/* Wheelwright site — one stylesheet for every page. Edit here, not in the pages. */
:root{
  --ground:#F3F5F3; --paper:#FFFFFF; --paper-2:#F6F8F7;
  --ink:#141B1C; --ink-2:#4A5A59; --ink-3:#7B8A89;
  --rule:#E1E7E4; --rule-2:#C9D3CF;
  --forge:#0F5F58; --forge-ink:#0B4A45; --forge-soft:#E3F0ED;
  --ember:#C0521F; --ember-soft:#FBEBE2;
  --brass:#9A722A; --brass-soft:#F7F0DF;
  --hero-a:#E3F0ED; --hero-b:#F3F5F3;
  --shadow:0 1px 2px rgba(20,27,28,.04), 0 10px 30px -18px rgba(20,27,28,.25);
  --r:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0C1314; --paper:#141D1E; --paper-2:#1A2526;
    --ink:#E8EEEC; --ink-2:#A8B8B6; --ink-3:#7B8A89;
    --rule:#263331; --rule-2:#384745;
    --forge:#62CFC1; --forge-ink:#8ADCD1; --forge-soft:#10292A;
    --ember:#F09A72; --ember-soft:#2C1A12;
    --brass:#DBB163; --brass-soft:#271F10;
    --hero-a:#11292A; --hero-b:#0C1314;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0C1314; --paper:#141D1E; --paper-2:#1A2526;
  --ink:#E8EEEC; --ink-2:#A8B8B6; --ink-3:#7B8A89;
  --rule:#263331; --rule-2:#384745;
  --forge:#62CFC1; --forge-ink:#8ADCD1; --forge-soft:#10292A;
  --ember:#F09A72; --ember-soft:#2C1A12;
  --brass:#DBB163; --brass-soft:#271F10;
  --hero-a:#11292A; --hero-b:#0C1314;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink);
     font-family:"Public Sans",ui-sans-serif,system-ui,-apple-system,sans-serif; font-size:17px; line-height:1.7}
.wrap{max-width:920px; margin:0 auto; padding:0 24px}
a{color:var(--forge); text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:2px solid var(--forge); outline-offset:3px; border-radius:4px}
img{max-width:100%}

/* header */
header{position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--paper) 86%,transparent);
       backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
       border-bottom:1px solid var(--rule)}
.top{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 0}
.logo{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:26px; letter-spacing:-.02em; line-height:1; text-decoration:none; color:var(--ink)}
.logo .w{color:var(--forge)}
nav{margin-left:auto; display:flex; gap:4px; font-size:15px; flex-wrap:wrap}
nav a{color:var(--ink-2); text-decoration:none; padding:7px 11px; border-radius:999px}
nav a:hover{color:var(--forge); background:var(--forge-soft)}
nav a[aria-current="page"]{color:var(--forge); background:var(--forge-soft); font-weight:500}

/* hero (home) and page heads */
.hero{background:radial-gradient(900px 420px at 15% -10%,var(--hero-a) 0%,transparent 70%),var(--hero-b); border-bottom:1px solid var(--rule)}
.heroGrid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr); gap:40px; align-items:center; padding-top:64px; padding-bottom:56px}
@media (max-width:720px){ .heroGrid{grid-template-columns:minmax(0,1fr); gap:28px; padding-top:44px; padding-bottom:40px} #wheel{max-width:300px; margin:0 auto} }
h1{font-family:Fraunces,Georgia,serif; font-weight:500; font-size:clamp(34px,6vw,56px);
   line-height:1.06; letter-spacing:-.028em; margin:0 0 18px; text-wrap:balance}
h1 em{font-style:italic; color:var(--forge)}
.lede{font-size:19px; color:var(--ink-2); margin:0; max-width:48ch; line-height:1.6}
.by{margin:18px 0 0; font-size:14.5px; color:var(--ink-3)}
#wheel{width:100%; max-width:100%; height:auto; display:block; filter:drop-shadow(0 18px 30px rgba(0,0,0,.12))}
.pagehead{background:radial-gradient(900px 420px at 15% -10%,var(--hero-a) 0%,transparent 70%),var(--hero-b);
          border-bottom:1px solid var(--rule); padding:52px 0 44px}
h1.ph{font-size:clamp(30px,5vw,44px); line-height:1.12; letter-spacing:-.024em; margin:0 0 14px; max-width:22ch}

/* sections */
main.wrap{padding-bottom:16px}
section{padding:52px 0; border-top:1px solid var(--rule)}
section:first-of-type, main.wrap > section:first-child{border-top:0; padding-top:44px}
.kicker{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; letter-spacing:.14em;
        text-transform:uppercase; color:var(--forge); margin:0 0 10px; font-weight:500}
h2{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:28px; letter-spacing:-.018em;
   margin:0 0 10px; text-wrap:balance; line-height:1.2}
h3{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:19px; margin:26px 0 6px; letter-spacing:-.01em}
section > p{max-width:66ch; color:var(--ink-2)}
section > p.tight{margin-top:10px}
p{margin:0 0 16px}

.readonly{background:var(--ember-soft); border-left:4px solid var(--ember);
          padding:18px 22px; border-radius:var(--r); margin:0 0 34px}
.readonly p{margin:0; max-width:68ch; color:var(--ink-2)}
.readonly strong{color:var(--ember); font-weight:600; letter-spacing:.015em}

/* the four phases */
.phases{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:26px}
.phase{background:var(--paper); border:1px solid var(--rule); border-top:3px solid var(--pc); border-radius:var(--r);
       padding:18px 19px; box-shadow:var(--shadow); transition:transform .16s ease}
.phase:hover{transform:translateY(-2px)}
.phase .n{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; color:var(--pc); font-weight:500}
.phase h3{font-size:18px; margin:6px 0 6px}
.phase p{margin:0; font-size:15px; color:var(--ink-2); line-height:1.55}
.p1{--pc:var(--forge)} .p2{--pc:var(--brass)} .p3{--pc:var(--ember)} .p4{--pc:var(--forge)}

ul.does{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px}
ul.does li{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:16px 18px 16px 48px;
           font-size:16px; position:relative; box-shadow:var(--shadow); color:var(--ink-2)}
ul.does li::before{content:""; position:absolute; left:18px; top:22px; width:16px; height:16px; border-radius:50%;
           background:var(--forge-soft); border:1.5px solid var(--forge)}
ul.does li::after{content:""; position:absolute; left:23.5px; top:25px; width:4px; height:8px;
           border:solid var(--forge); border-width:0 2px 2px 0; transform:rotate(45deg)}
ul.does b{font-weight:600; color:var(--ink)}

.pairs{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:22px}
.pair{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:17px 19px; box-shadow:var(--shadow)}
.pair .t{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
         color:var(--forge); margin-bottom:6px; font-weight:500}
.pair p{margin:0; font-size:15px; color:var(--ink-2)}

.note{background:var(--forge-soft); border-radius:var(--r); padding:17px 20px; margin-top:24px;
      font-size:15.5px; color:var(--ink-2); max-width:68ch}
.note b{color:var(--ink)}
.warn{background:var(--ember-soft); border-left:4px solid var(--ember); padding:16px 20px; border-radius:var(--r); margin:24px 0; font-size:15.5px; color:var(--ink-2)}
.warn b{color:var(--ember)}

blockquote{margin:28px 0 0; padding:0 0 0 22px; border-left:3px solid var(--brass);
           font-family:Fraunces,Georgia,serif; font-style:italic; font-size:20px; color:var(--ink);
           max-width:52ch; line-height:1.5}

.ends{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:12px 20px; border-radius:999px;
     font-weight:600; font-size:15px; line-height:1; transition:transform .12s ease, filter .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn.solid{background:var(--forge); color:#fff; box-shadow:var(--shadow)}
.btn.solid:hover{filter:brightness(1.08)}
.btn.ghost{border:1px solid var(--rule-2); color:var(--ink-2); background:var(--paper)}
.btn.ghost:hover{border-color:var(--forge); color:var(--forge)}
.btn.soon{border:1px dashed var(--rule-2); color:var(--ink-3); background:transparent; cursor:default}
.btn.soon:hover{transform:none}

/* legal and support pages */
details{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); margin-top:10px; box-shadow:var(--shadow)}
details[open]{background:var(--paper-2); border-color:var(--rule-2)}
summary{padding:16px 18px; cursor:pointer; font-weight:500; list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; color:var(--forge); font-family:"IBM Plex Mono",monospace; margin-right:12px; font-weight:500}
details[open] summary::before{content:"\2013"}
details .body{padding:0 18px 18px 44px; color:var(--ink-2); font-size:15.5px; max-width:68ch}
dl{margin:6px 0 0}
dt{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:18px; margin-top:28px; letter-spacing:-.01em}
dd{margin:6px 0 0; color:var(--ink-2); max-width:68ch; font-size:16px}
.never{display:grid; gap:10px; margin-top:24px}
.never span{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:13px 17px; font-size:15.5px; box-shadow:var(--shadow)}
.never span::before{content:"\2715"; color:var(--ember); margin-right:12px; font-family:"IBM Plex Mono",monospace}
.steps{counter-reset:s; list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px}
.steps li{counter-increment:s; background:var(--paper); border:1px solid var(--rule); border-radius:var(--r);
          padding:15px 18px 15px 54px; position:relative; font-size:16px; box-shadow:var(--shadow)}
.steps li::before{content:counter(s); position:absolute; left:18px; top:14px;
     font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--forge); font-weight:500}

/* guides */
article{max-width:68ch; padding-top:44px}
article h1{font-size:clamp(30px,5vw,44px); line-height:1.12; letter-spacing:-.024em; margin:0 0 14px; max-width:22ch}
article .stamp{display:block; margin:0 0 28px}
article p{color:var(--ink-2)}
article p b, article li b{color:var(--ink); font-weight:600}
article ul, article ol{padding-left:22px; color:var(--ink-2); margin:0 0 16px}
article li{margin:0 0 9px}
article h2{margin-top:42px}
.stamp{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3); margin:0 0 36px}
.tbl{overflow-x:auto; margin:16px 0 24px; border:1px solid var(--rule); border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow)}
table{border-collapse:collapse; width:100%; font-size:15.5px}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--rule); vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--forge); font-weight:500; background:var(--paper-2)}
td.n,th.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.app{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:26px 28px; margin:44px 0 12px; box-shadow:var(--shadow)}
.app h2{margin-top:0; font-size:23px}
.app p{color:var(--ink-2)}
.small{font-size:14px; color:var(--ink-3)}
.cards{display:grid; gap:12px; margin:26px 0}
.card{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow)}
.card h2{margin:0 0 6px; font-size:21px}
.card p{margin:0; color:var(--ink-2)}
.card a{text-decoration:none; color:var(--ink)}
.card a:hover{color:var(--forge)}

footer{border-top:1px solid var(--rule); background:var(--paper); margin-top:48px}
.foot{display:flex; flex-wrap:wrap; gap:8px 26px; align-items:baseline; padding:28px 0 36px; font-size:14.5px; color:var(--ink-3)}
.foot .co{font-family:Fraunces,Georgia,serif; font-size:16px; color:var(--ink-2); font-weight:500}
.foot a{color:var(--ink-2)}
.foot .stamp{margin:0 0 0 auto; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-3)}
.mail{font-family:"IBM Plex Mono",monospace; font-size:15px}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }