/* Inner pages, pass one (Mason, 2026-10-20). The home's language carried to Work, Services, About and the Studio: one
   pinned stage per page, each chapter an object that travels in, holds while it drifts, and leaves the other way, with
   its words arriving whole, word by word. Same nav, counter, type, acid green button, founder photos and footer as the
   home. Colors: ink ground, cream type, acid green for buttons only, each chapter's accent (--acc) set from its photo. */
:root{--u:1vh;--ink:#060507;--ink2:#110e12;--cream:#EBDED0;--stone:#9A938A;--acid:#81FF28;--orange:#FF6A00;--acc:#81FF28;--gx:clamp(16px,5vw,72px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--cream);font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.hv{font-weight:900}.th{font-weight:300}
a{color:inherit}

/* nav, menu, buttons: the home's */
.bar{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px var(--gx);background:rgba(6,5,7,.6);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid rgba(235,222,208,.08)}
.wm{font:900 24px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;color:var(--cream);text-decoration:none;letter-spacing:-.01em}
.wm span{color:var(--orange)}
.bar nav{display:flex;gap:26px;align-items:center}
.bar nav a{font:300 19px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--cream);text-decoration:none}
.bar nav a[aria-current]{font-weight:900}
.menu{display:none;font:900 16px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:.04em;background:none;border:1px solid rgba(235,222,208,.35);color:var(--cream);padding:11px 12px;border-radius:3px;cursor:pointer}
.mnu{position:fixed;inset:0;z-index:60;background:var(--ink);padding:90px var(--gx) 30px;display:flex;flex-direction:column;gap:22px;overflow:auto}
.mnu[hidden]{display:none}
.mnu nav{display:flex;flex-direction:column;gap:6px}
.mnu nav a{font:900 13vw/.9 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.022em;color:var(--cream);text-decoration:none}
.mx{position:absolute;top:18px;right:var(--gx);font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;background:none;border:0;color:var(--cream);padding:12px 0;cursor:pointer}
.mn-note{margin:0;color:var(--stone);font-size:14px}
.go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:3px;background:var(--acid);color:var(--ink)!important;
  font:900 17px/1 'Big Shoulders Display',sans-serif!important;text-transform:uppercase;letter-spacing:.02em!important;text-decoration:none;text-align:center}
.go.big{min-height:58px;padding:0 26px;font-size:21px!important}
.more{color:var(--cream);font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(235,222,208,.35)}

/* the run and its one stage */
.run{position:relative}
.stage{position:sticky;top:0;height:calc(100 * var(--u));overflow:hidden;background:var(--ink)}
.chrome{position:absolute;z-index:12;top:92px;left:var(--gx);right:var(--gx);pointer-events:none}
.chrome p{margin:0;font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--stone)}
.chrome b{color:var(--acc);font-weight:600}
.kick span{color:var(--cream)}

.ch{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.ch.on{visibility:visible}
.ch.live{pointer-events:auto}
.ob{position:absolute;margin:0;will-change:transform}
.tx{position:absolute;z-index:6}
.tx .w{display:inline-block;opacity:0}
.tx p{margin:0}

/* headline: Big Shoulders, heavy then thin, the home's scale */
.hh{font-family:'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.022em;line-height:.86;font-size:clamp(54px,5.6vw,112px);text-wrap:balance}
.hh .hv{color:var(--cream)}.hh .th{display:block;color:var(--acc)}
.hh.big{font-size:clamp(64px,7.4vw,150px)}
.bd{margin-top:22px!important;max-width:34em;font-size:clamp(17px,1.3vw,21px);line-height:1.45}
.bd+.bd{margin-top:12px!important}
.fine{margin-top:16px!important;font:600 11px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--stone)}
.row2{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:26px}
.lst{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;font-size:clamp(16px,1.2vw,19px);line-height:1.4;max-width:34em}
.lst li{padding-left:22px;position:relative}
.lst li::before{content:'';position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--acc)}

/* layouts. L: object left, words right. R: the mirror. F: object full bleed behind the words. C: words centered. */
.L .ob,.R .ob{top:calc(16 * var(--u));height:calc(70 * var(--u));width:44vw}
.L .ob{left:var(--gx)}.R .ob{right:var(--gx)}
.L .tx{left:54vw;right:var(--gx);top:50%;transform:translateY(-50%)}
.R .tx{left:var(--gx);width:44vw;top:50%;transform:translateY(-50%)}
.F .ob{inset:0}
.F .ob::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,5,7,.92) 0%,rgba(6,5,7,.78) 40%,rgba(6,5,7,.25) 68%,rgba(6,5,7,0) 86%),linear-gradient(0deg,rgba(6,5,7,.6),rgba(6,5,7,0) 40%)}
.F .tx{left:var(--gx);width:min(54vw,900px);bottom:calc(9 * var(--u))}
.C .tx{left:50%;top:50%;transform:translate(-50%,-50%);width:min(78vw,1180px);text-align:center}
.C .tx .bd{margin-left:auto;margin-right:auto}
.C .row2{justify-content:center}

/* a photo in a frame */
.ph{position:relative;width:100%;height:100%;overflow:hidden;border-radius:4px;background:var(--ink2)}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.F .ph{border-radius:0}
.cap{position:absolute;left:12px;bottom:12px;z-index:2;font:600 10px/1.3 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;background:rgba(6,5,7,.75);color:var(--cream);padding:6px 8px;max-width:calc(100% - 24px)}
.F .cap{left:auto;right:var(--gx);bottom:calc(4 * var(--u))}
.ph .x{opacity:0}

/* the real site on a real phone */
.dv{aspect-ratio:780/1688;height:calc(74 * var(--u));width:auto!important;top:calc(14 * var(--u))!important}
.L .dv{left:calc(var(--gx) + 8vw)}.R .dv{right:calc(var(--gx) + 8vw);left:auto}
.dv .scr{position:relative;height:100%;overflow:hidden;border-radius:34px;background:#0d0b0c;box-shadow:0 0 0 9px #0d0b0c,0 0 0 10px #2a2628,0 50px 90px rgba(0,0,0,.6)}
.dv .scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;will-change:transform}
.dv .scr img+img{transform:translate3d(0,101%,0);box-shadow:0 -20px 40px rgba(0,0,0,.35)}
.dv .tag{position:absolute;left:0;top:-30px;white-space:nowrap;font:600 10px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--acid)}
.before{position:absolute;inset:0;z-index:2;background:#d9d6d0;color:#3a3633;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:12%}
.before .bl{font:600 11px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:#77716b}
.before p{margin:0;font:400 clamp(18px,calc(2.2 * var(--u)),26px)/1.3 'Hanken Grotesk',sans-serif}

/* their words */
.msg{margin:0}
.msg p{font:600 clamp(24px,2.3vw,40px)/1.28 'Hanken Grotesk',sans-serif;letter-spacing:-.005em}
.msg.sms p{display:inline-block;background:var(--cream);color:var(--ink);padding:18px 24px 20px;border-radius:26px 26px 26px 6px;text-align:left}
.msg.mail p{display:inline-block;background:#fff;color:#1d1b1c;padding:22px 26px;border-radius:6px;text-align:left;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.msg.mail .hd{display:block;font:600 11px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:#77716b;margin-bottom:12px}
.msg.q p{font-weight:400;font-size:clamp(22px,1.9vw,32px);text-align:left;border-left:3px solid var(--acc);padding-left:22px}
.msg cite{display:block;margin-top:18px;font:600 12px/1.4 'IBM Plex Mono',monospace;font-style:normal;text-transform:uppercase;letter-spacing:.16em;color:var(--acc)}
.C.msg .tx{width:min(70vw,980px)}

/* a brand's own colors, as a measured strip */
.pal{display:flex;gap:3px;height:100%;align-items:stretch}
.pal span{flex:1;position:relative;border-radius:3px}
.pal em,.pal i{position:absolute;left:12px;font:600 11px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.12em;font-style:normal}
.pal em{bottom:34px}.pal i{bottom:16px;opacity:.75}
.pal .dk{color:var(--cream)}.pal .lt{color:var(--ink)}

/* the badge, set big */
.badge{display:flex;align-items:center;justify-content:center}
.badge img{width:min(100%,560px);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}

/* steps and timelines: one item lit at a time */
.seq{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;max-width:36em}
.seq li{display:grid;grid-template-columns:62px 1fr;gap:4px 14px;opacity:.28;transition:opacity .25s}
.seq li.lit{opacity:1}
.seq .n{grid-row:span 2;font:900 46px/.9 'Big Shoulders Display',sans-serif;color:var(--acc)}
.seq b{font:900 26px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.01em}
.seq span{font-size:16px;line-height:1.4;color:var(--cream)}
.yr{position:absolute;z-index:3;left:18px;bottom:14px;font:900 clamp(64px,8vw,150px)/.84 'Big Shoulders Display',sans-serif;text-transform:uppercase;color:var(--cream);letter-spacing:-.03em;text-shadow:0 10px 40px rgba(0,0,0,.5)}

/* a size */
.size .price{font:900 clamp(64px,7vw,130px)/.86 'Big Shoulders Display',sans-serif;color:var(--cream);letter-spacing:-.02em;margin-top:14px!important}
.size .price small{display:inline-block;margin-left:14px;font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);vertical-align:middle}
.size .num{font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--acc)}
.kitl{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:8%;background:var(--ink2);border:1px solid rgba(235,222,208,.12);border-radius:4px;height:100%}
.kitl b{font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--acc)}
.kitl span{font:900 clamp(26px,2.4vw,44px)/1 'Big Shoulders Display',sans-serif;text-transform:uppercase}

/* two ways to keep going */
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;text-align:left}
.two a{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid rgba(235,222,208,.18);border-radius:4px;text-decoration:none;background:rgba(17,14,18,.7)}
.two b{font:900 clamp(28px,2.4vw,42px)/.95 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.two i{font-style:normal;font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.two span{font-size:16px;line-height:1.4}

/* the 2006 editor, small */
.ed{display:flex;gap:4vw;align-items:center;justify-content:center;height:100%}
.oldwin{width:min(100%,520px);background:#fff;color:#1c2b4a;border:1px solid #6d86b8;border-radius:6px;box-shadow:0 30px 70px rgba(0,0,0,.55);font-family:Verdana,Tahoma,Geneva,sans-serif;font-size:12px;overflow:hidden}
.ow-title{display:flex;align-items:center;gap:10px;background:linear-gradient(#e9e9e9,#c9c9c9);color:#333;font:bold 12px/1 Tahoma,sans-serif;padding:7px 10px;border-bottom:1px solid #999}
.ow-dots{display:flex;gap:5px}.ow-dots i{width:11px;height:11px;border-radius:50%;background:#e25b4b}.ow-dots i:nth-child(2){background:#f0b33a}.ow-dots i:nth-child(3){background:#68b84f}
.ow-url{background:#f4f4f4;border-bottom:1px solid #bbb;padding:6px 10px;font:11px/1 Tahoma,sans-serif;color:#555}
.ow-tabs{display:flex;gap:2px;background:#003399;padding:8px 10px 0}
.ow-tabs span{background:#6699cc;color:#fff;font-weight:bold;padding:6px 12px;border-radius:4px 4px 0 0}
.ow-tabs span.on{background:#fff;color:#003399}
.ow-body{padding:14px 16px 16px;display:grid;gap:9px}
.ow-row{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:start}
.ow-lab{font-weight:bold;color:#ff6600;padding-top:6px}
.ow-in{background:#fff;border:1px solid #7f9db9;padding:6px 8px;font-size:14px;min-height:30px}
.ow-in .c{opacity:0}
.caret{display:inline-block;width:1px;height:15px;background:#1c2b4a;vertical-align:-2px;margin-left:1px}
.ow-box{display:inline-block;width:12px;height:12px;border:1px solid #7f9db9;background:#fff;position:relative;vertical-align:-2px;margin-right:6px}
.ow-box::after{content:'';position:absolute;left:3px;top:0;width:4px;height:8px;border:solid #003399;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:var(--tick,0)}
.ow-save{justify-self:end;background:linear-gradient(#ffb36b,#ff6600);color:#fff;border:1px solid #c94f00;border-radius:3px;padding:6px 14px;font-weight:bold}
.np{flex:none;width:min(220px,16vw);aspect-ratio:9/19;border-radius:34px;background:#0d0b0c;padding:9px;box-shadow:0 40px 80px rgba(0,0,0,.6),inset 0 0 0 2px #2a2628}
.np-scr{width:100%;height:100%;border-radius:26px;overflow:hidden;background:#140c09;color:#FBEBD7;display:flex;flex-direction:column}
.np-ph{position:relative;height:52%}.np-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.np-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px}
.np-name{font:900 26px/.95 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.np-line{display:grid;font-size:12px}.np-line>span{grid-area:1/1}
.np-sold{align-self:flex-start;font-size:10px;font-weight:700;background:#B8462A;padding:4px 8px;border-radius:4px;opacity:0}
.np-btn{align-self:flex-start;margin-top:auto;background:#FBEBD7;color:#2A120B;font-weight:700;font-size:11px;padding:7px 12px;border-radius:999px}

/* the close: one path, free first */
.doors{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;max-width:760px;text-align:left}
.doors li{display:grid;grid-template-columns:120px 1fr auto;gap:6px 18px;align-items:center;padding:16px 0;border-top:1px solid rgba(235,222,208,.14)}
.doors li:last-child{border-bottom:1px solid rgba(235,222,208,.14)}
.doors .p{font:900 30px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;color:var(--acid)}
.doors .t{font:900 26px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.doors .d{grid-column:2;font-size:15px;line-height:1.4;color:var(--stone)}
.doors .a{grid-row:1/span 2;grid-column:3}
.C .doors{margin-left:auto;margin-right:auto}
.studio-row{margin-top:18px!important;font-size:16px}

/* footer: the home's */
.foot{position:relative;background:var(--ink);border-top:1px solid rgba(235,222,208,.1);padding:70px var(--gx) 30px}
.wmb{font:900 clamp(70px,15vw,280px)/.82 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.03em;color:var(--cream)}
.wmb span{color:var(--orange)}
.map{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:50px}
.map div{display:flex;flex-direction:column;gap:10px}
.map b{font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--stone);margin-bottom:6px}
.map a{color:var(--cream);text-decoration:none;font-size:16px}
.map a:hover{color:var(--acid)}
.meta{display:flex;gap:26px;margin-top:46px;font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--cream)}
.open i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--acid);margin-right:9px;animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(129,255,40,0)}100%{box-shadow:0 0 0 0 rgba(129,255,40,0)}}
.base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid rgba(235,222,208,.1);color:var(--stone);font-size:13px}
.base a{color:var(--stone)}

/* phone */
@media (max-width:760px){
 .bar nav a:not(.go){display:none}
 .bar nav{gap:8px}
 .menu{display:inline-block}
 .go{min-height:40px;font-size:15px!important;padding:0 14px}
 .go.big{min-height:52px;font-size:18px!important;width:100%}
 .chrome{top:78px}
 .chrome p{font-size:10px;letter-spacing:.12em}
 .hh{font-size:11.4vw;line-height:.88}
 .hh.big{font-size:13vw}
 .bd{font-size:15.5px;margin-top:12px!important;line-height:1.42}
 .lst{font-size:15px;gap:6px;margin-top:12px}
 .row2{margin-top:14px;gap:12px}
 .row2 .more{font-size:15px}
 .fine{font-size:9.5px;margin-top:10px!important}
 /* L and R: the object on top, the words below it */
 .L .ob,.R .ob{left:var(--gx);right:var(--gx);width:auto;top:calc(100px + 1 * var(--u));height:calc(38 * var(--u))}
 .L .tx,.R .tx{left:var(--gx);right:var(--gx);width:auto;top:calc(100px + 41 * var(--u));transform:none;bottom:auto}
 .F .ob::after{background:linear-gradient(180deg,rgba(6,5,7,.15) 0%,rgba(6,5,7,.1) 30%,rgba(6,5,7,.82) 56%,var(--ink) 80%)}
 .F .tx{left:var(--gx);right:var(--gx);width:auto;bottom:calc(3 * var(--u))}
 .F .cap{left:var(--gx);right:auto;top:104px;bottom:auto}
 .C .tx{width:calc(100vw - 2 * var(--gx));text-align:left;top:calc(50% + 40px)}
 .C.msg .tx{width:calc(100vw - 2 * var(--gx))}
 .msg p{font-size:22px}
 .msg.q p{font-size:19px;padding-left:16px}
 .msg cite{font-size:10px;margin-top:12px}
 .dv{height:calc(40 * var(--u));top:calc(100px + 1 * var(--u))!important;left:50%!important;right:auto!important;margin-left:calc(-40 * var(--u) * 780 / 1688 / 2)}
 .dv .scr{border-radius:22px;box-shadow:0 0 0 6px #0d0b0c,0 0 0 7px #2a2628,0 30px 60px rgba(0,0,0,.6)}
 .dv .tag{display:none}
 .pal em,.pal i{display:none}
 .seq{gap:8px;margin-top:12px}
 .seq li{grid-template-columns:40px 1fr;gap:2px 10px}
 .seq .n{font-size:30px}.seq b{font-size:20px}.seq span{font-size:13.5px}
 .yr{font-size:20vw}
 .size .price{font-size:17vw;margin-top:8px!important}
 .kitl{padding:6% 7%;gap:8px}.kitl span{font-size:6.4vw}
 .two{grid-template-columns:1fr;gap:10px;margin-top:14px}
 .two a{padding:14px 16px;gap:6px}.two b{font-size:24px}.two span{font-size:14px}
 .ed{gap:12px}
 .oldwin{font-size:10px}.ow-body{padding:10px;gap:6px}.ow-row{grid-template-columns:62px 1fr;gap:6px}.ow-in{font-size:12px;min-height:24px;padding:4px 6px}
 .ow-tabs span{padding:4px 7px}
 .np{width:28vw;border-radius:22px;padding:6px}.np-scr{border-radius:17px}.np-name{font-size:17px}.np-body{padding:8px 9px;gap:5px}.np-line{font-size:9.5px}.np-btn{font-size:8.5px;padding:5px 8px}.np-sold{font-size:8px}
 .doors{margin-top:14px}
 .doors li{grid-template-columns:76px 1fr;padding:10px 0;gap:2px 12px}
 .doors .p{font-size:21px}.doors .t{font-size:20px}.doors .d{font-size:13px}
 .doors .a{grid-row:auto;grid-column:1/-1;margin-top:6px}
 .studio-row{font-size:14px;margin-top:10px!important}
 .map{grid-template-columns:1fr 1fr}
 .meta{flex-direction:column;gap:14px}
}
@media (max-width:760px) and (max-height:700px){
 .hh{font-size:10vw}.bd{font-size:14.5px}
 .L .ob,.R .ob{height:calc(32 * var(--u))}.L .tx,.R .tx{top:calc(100px + 35 * var(--u))}
 .dv{height:calc(34 * var(--u));margin-left:calc(-34 * var(--u) * 780 / 1688 / 2)}
}
@media (prefers-reduced-motion:reduce){.open i{animation:none}}

/* reading pages and the money page's fine print: the same type, in normal flow after the stage */
.flow{position:relative;z-index:2;background:var(--ink);padding:40px var(--gx) 40px}
.flow>*{max-width:760px;margin-left:auto;margin-right:auto}
.flow .lab{font:600 12px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--acc);margin:0 auto 14px}
.flow h2{font:900 clamp(40px,4.4vw,72px)/.88 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.02em;margin:70px auto 22px;text-wrap:balance}
.flow h2 .th{font-weight:300;color:var(--acc);display:block}
.flow h2:first-child{margin-top:0}
.flow h3{font:900 26px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;margin:34px auto 10px}
.flow p,.flow li{font-size:18px;line-height:1.62}
.flow p{margin:0 auto 18px}
.flow ul,.flow ol{padding-left:22px;margin:0 auto 20px}
.flow li{margin-bottom:8px}
.flow a{color:var(--cream);text-decoration-color:var(--acc);text-underline-offset:4px}
.flow blockquote{margin:28px auto;padding-left:22px;border-left:3px solid var(--acc);font-size:22px;line-height:1.4}
.flow strong{color:var(--cream)}
.flow details{border-top:1px solid rgba(235,222,208,.16);padding:16px 0}
.flow details:last-of-type{border-bottom:1px solid rgba(235,222,208,.16)}
.flow summary{cursor:pointer;font:900 22px/1.1 'Big Shoulders Display',sans-serif;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;gap:18px}
.flow summary::after{content:'+';color:var(--acc);font-size:28px;line-height:.8}
.flow details[open] summary::after{content:'\2013'}
.flow summary::-webkit-details-marker{display:none}
.flow details p{margin:12px 0 0;color:var(--cream)}
.flow table{width:100%;border-collapse:collapse;margin:10px auto 24px;font-size:15px}
.flow caption{text-align:left;font:600 11px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--stone);padding-bottom:10px}
.flow th,.flow td{border-bottom:1px solid rgba(235,222,208,.14);padding:12px 10px;text-align:left;vertical-align:top}
.flow thead th{font:900 17px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.flow tbody th{font-weight:700}
.flow td.us{color:var(--acid);font-weight:700}
.tbl{overflow-x:auto}
.flow .two{max-width:760px}
.fortwo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.fortwo b{display:block;font:900 22px/1 'Big Shoulders Display',sans-serif;text-transform:uppercase;margin-bottom:10px}
.meta-line{font:600 11px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--stone)}
.answer{font-size:clamp(18px,1.4vw,22px)!important;line-height:1.5!important}
.fclose{position:relative;z-index:2;background:var(--ink);padding:80px var(--gx) 90px;border-top:1px solid rgba(235,222,208,.08)}
.fclose>*{max-width:760px;margin-left:auto;margin-right:auto}
.fclose .hh .th{color:var(--acid)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;max-width:1180px!important}
.card{display:flex;flex-direction:column;text-decoration:none;border:1px solid rgba(235,222,208,.14);border-radius:4px;overflow:hidden;background:var(--ink2)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card div{padding:18px 18px 22px;display:flex;flex-direction:column;gap:8px}
.card b{font:900 26px/.95 'Big Shoulders Display',sans-serif;text-transform:uppercase}
.card span{font-size:15px;line-height:1.45;color:var(--stone)}
.card:hover b{color:var(--acid)}
.choose{display:grid;gap:10px;margin-top:20px;text-align:left}
.choose a{display:grid;grid-template-columns:1fr auto;gap:4px 16px;align-items:center;padding:14px 18px;border:1px solid rgba(235,222,208,.2);border-radius:4px;text-decoration:none;background:rgba(17,14,18,.75)}
.choose a:hover{border-color:var(--acid)}
.choose i{font-style:normal;font-size:16px;line-height:1.35}
.choose b{grid-row:span 2;font:900 30px/1 'Big Shoulders Display',sans-serif;color:var(--acid);text-align:right}
.choose em{font-style:normal;font:600 11px/1 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:var(--acc)}
.C .choose{max-width:860px;margin-left:auto;margin-right:auto}
@media (max-width:760px){
 .flow{padding:60px var(--gx) 30px}
 .flow p,.flow li{font-size:16.5px}
 .flow h2{margin-top:52px}
 .fortwo{grid-template-columns:1fr}
 .choose{gap:6px;margin-top:12px}.choose a{padding:9px 12px;gap:2px 10px}.choose i{font-size:13.5px}.choose b{font-size:22px}.choose em{font-size:9.5px}
 .fclose{padding:60px var(--gx) 70px}
}
.tx .two a.w{display:flex}.tx .choose a.w{display:grid}
.choose em{grid-column:1;grid-row:1}.choose i{grid-column:1;grid-row:2}.choose b{grid-column:2;grid-row:1/span 2}
/* the counter sits on ink, like the home's, so it reads over any photo */
.chrome .kick{display:inline-block;background:var(--ink);padding:6px 8px;margin-left:-8px}
.flow h2.mix{font-weight:300}.flow h2.mix b{font-weight:900}
/* the close: every page's specimens in one row above the path */
.tilesob{top:calc(92px + 28px);left:var(--gx);right:var(--gx);height:calc(10 * var(--u));display:flex;gap:4px}
.tilesob img{flex:1;min-width:0;height:100%;object-fit:cover;border-radius:2px}
.C.close .tx{top:calc(50% + 6 * var(--u))}
@media (max-width:760px){.tilesob{top:108px;height:calc(7 * var(--u));gap:3px}.tilesob img:nth-child(n+7){display:none}.C.close .tx{top:calc(50% + 7 * var(--u) + 20px)}}

/* GATE 2026-10-21: button labels centered in their own box again; a picture with the giant year keeps its label on top */
.tx .go.w,.tx a.go.w{display:inline-flex;align-items:center;justify-content:center}
.yr ~ .cap{top:12px;bottom:auto}

/* Steve's iPhone pass, 2026-10-21 */
/* 2. a full-screen hero picture never washes out its words: a deeper ink under the text block, and the small kicker on
   its own ink chip */
.F .tx>.fine:first-child{display:inline-block;background:var(--ink);padding:6px 8px;margin-left:-8px!important;color:var(--cream)}
.F .tx .hh{text-shadow:0 2px 24px rgba(6,5,7,.55)}
@media (max-width:760px){
 .F .ob::after{background:linear-gradient(180deg,rgba(6,5,7,.35) 0%,rgba(6,5,7,.42) 22%,rgba(6,5,7,.9) 46%,var(--ink) 66%)}
 /* About on a phone (Steve 2026-10-22: "very dark and mostly blacked out"): the picture keeps the top 60 percent
    of the screen, brighter, and only the strip under the words goes to ink */
 body.pg-about .F .ob::after{background:linear-gradient(180deg,rgba(6,5,7,0) 0%,rgba(6,5,7,.05) 38%,rgba(6,5,7,.72) 58%,var(--ink) 74%)}
 body.pg-about .ob img{filter:brightness(1.12)}
 body.pg-about .S .ob::after,body.pg-about .ob .cap{display:none}
}
@media (min-width:761px){
 .F .ob::after{background:linear-gradient(90deg,rgba(6,5,7,.95) 0%,rgba(6,5,7,.86) 42%,rgba(6,5,7,.35) 70%,rgba(6,5,7,0) 88%),linear-gradient(0deg,rgba(6,5,7,.7),rgba(6,5,7,0) 45%)}
}
/* 4. a size's kicker ("04 / 04 . For you if...") keeps its own lines above the name, never under it */
.size .num{line-height:1.45;margin-bottom:10px!important}
/* 4. the Kit list fits its own box (pages.js sizes the words to it), so it never spills over the counter or the words */
.kitl{overflow:hidden;justify-content:flex-start}
/* 3. the footer map: four tidy columns, two by two on a phone */
.foot .map{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.foot .map{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the photo caption on a full-screen picture sits below the counter row on a phone, never on it */
@media (max-width:760px){.F .cap{top:118px}}
/* on a wide screen the phone's "Live / site" tag sits under the phone, clear of the counter row */
@media (min-width:761px){.dv .tag{top:auto;bottom:-24px}}

/* GREEN HAS ONE JOB (Steve picked option B, 2026-10-21): one solid acid green button per screen, the main action.
   Every other button is a cream outline; prices and labels that were green are cream; thin lines take the section's
   accent. Green stays on the "Open for new work" dot. */
.go{background:transparent;color:var(--cream)!important;box-shadow:inset 0 0 0 1.5px rgba(235,222,208,.8)}
.go:hover{background:rgba(235,222,208,.08)}
.tx .go.big,.doors li:first-child .go,.mnu .go,.flow .go.big,.fclose .go.big{background:var(--acid);color:var(--ink)!important;box-shadow:none}
.doors .p,.choose b,.dv .tag,.flow td.us,.fclose .hh .th,.card:hover b,.map a:hover{color:var(--cream)!important}
.choose a:hover{border-color:var(--cream)!important}

/* Journal: two more pictures in the text (Steve 2026-10-22), full width of the reading column, no caption */
.flow figure.jfig{margin:44px 0}
.flow figure.jfig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:6px}