/* YB Forge v4 shared shell. Black and gold by default; ?theme=light restores the pale v3 page for comparison. */
@font-face{font-family:'General Sans';src:url(/vendor/general-sans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/vendor/general-sans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'General Sans';src:url(/vendor/general-sans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/vendor/plex-mono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/vendor/plex-mono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --page:#08070a;            /* live ybforge.co background family */
  --page-2:#100e12;
  --page-3:#17141a;
  --ink:#f2ede3;             /* warm off-white */
  --ink-2:rgba(242,237,227,.72);
  --mute:rgba(242,237,227,.7);             /* .7 = about #aca8a1 on the page: mono captions stay #A8A29A or lighter (design-fix 10-20) */
  --line:rgba(242,237,227,.12);
  --gold:#c9a35e;            /* the star's gold */
  --gold-hi:#e3c68e;
  --gold-ink:#d9b672;        /* gold for small text on dark */
  --pill:rgba(242,237,227,.07);
  --pill-line:rgba(242,237,227,.16);
  --foot:#0e0c10;
  --glow:rgba(201,163,94,.07);
  --gut:72px;
  --r:22px;
  --sans:"General Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
html[data-theme="light"]{
  --page:#edeff3;--page-2:#e4e7ec;--page-3:#dde1e7;
  --ink:#101215;--ink-2:#3a3f47;--mute:#6b717b;--line:rgba(16,18,21,.14);
  --gold-ink:#8d6a2e;--pill:#dfe2e8;--pill-line:transparent;--foot:#101215;--glow:transparent;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--page)}
body{background:radial-gradient(1100px 620px at 78% -8%,var(--glow),transparent 62%) no-repeat,var(--page);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:#0b0a0c}
.mono{font-family:var(--mono);font-size:13px;line-height:1.5;text-transform:uppercase;letter-spacing:.01em;font-weight:400}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#0b0a0c;padding:10px 14px;border-radius:99px;z-index:99}
.skip:focus{left:16px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
main{overflow-x:clip}
.g{color:var(--gold)}
.soft{color:var(--mute)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ───────── header + nav ───────── */
.top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding-top:30px;padding-bottom:28px;position:relative;z-index:20}
.logo{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:21px;letter-spacing:-.04em;white-space:nowrap;min-height:44px}
.logo svg{width:22px;height:22px;margin-right:6px;flex:none}
.logo .gd{color:var(--gold)}
.nav{display:flex;justify-content:center;gap:6px}
.nav a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;padding:12px 14px;border-radius:99px;color:var(--ink-2);transition:color .25s,background .25s;position:relative}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink)}
.nav a[aria-current]::after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.actions{display:flex;justify-content:flex-end;gap:10px}
.pill{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 22px;border-radius:99px;font-family:var(--mono);font-size:12.5px;text-transform:uppercase;font-weight:500;white-space:nowrap;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .35s}
.pill:hover{transform:translateY(-2px)}
.pill.mag{transition:background .25s,box-shadow .35s}
.pill.mag:hover{transform:none}
.pill .dot{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill .dots{display:inline-flex;gap:3px}.pill .dots i{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.cta{background:var(--gold);color:#0b0a0c}
.pill.cta:hover{box-shadow:0 10px 34px rgba(201,163,94,.28)}
.pill.ghost{background:var(--pill);box-shadow:inset 0 0 0 1px var(--pill-line);color:var(--ink)}
.menu-btn{display:none}

/* ───────── menu overlay (phones and tablets) ───────── */
.menu{position:fixed;inset:12px;z-index:50;background:var(--page-2);border:1px solid var(--line);border-radius:var(--r);padding:30px var(--gut) 36px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-14px) scale(.985);transition:.45s cubic-bezier(.2,.8,.2,1);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu .mtop{display:flex;justify-content:space-between;align-items:center}
.menu nav{margin-top:auto;display:flex;flex-direction:column}
.menu nav a{font-weight:500;font-size:clamp(40px,6vw,80px);line-height:1.06;letter-spacing:-.04em;padding:6px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.menu nav a .mono{color:var(--mute)}
.menu nav a[aria-current]{color:var(--gold)}
.menu .mfoot{margin-top:24px;display:flex;justify-content:space-between;color:var(--ink-2);gap:16px;flex-wrap:wrap}
.menu .pill.cta{margin-top:22px;justify-content:space-between;height:54px}

/* ───────── shared page parts ───────── */
.kicker{color:var(--gold-ink)}

/* ───────── full-screen hero frame: every page opens in Home's rounded dark frame, its own live scene inside,
   the headline inside the frame. --hdr is the header height, so the frame ends 12px above the bottom of the screen. ───────── */
:root{--hdr:102px}
.hero{position:relative;padding-bottom:12px}
.hero.wrap{padding-left:12px;padding-right:12px}          /* the frame runs nearly edge to edge, like the footer card */
.frame{position:relative;height:calc(100vh - var(--hdr) - 12px);height:calc(100svh - var(--hdr) - 12px);min-height:500px;border-radius:var(--r);overflow:hidden;isolation:isolate;
  background:#0d0c0f;color:#f4f3ef;box-shadow:0 0 0 1px rgba(201,163,94,.14),0 40px 120px rgba(0,0,0,.55)}
.frame>.scene{position:absolute;inset:0;z-index:0}
.frame>.amb{position:absolute;inset:-6%;z-index:-1;background:var(--img) 50% 20%/cover no-repeat;filter:blur(30px) brightness(.8) saturate(1.2);transform:scale(1.04)}
/* calm hero background (design-fix 10-20, addendum: 3D only on Home): warm black, one soft gold glow, fine grain, one quiet gold line */
.frame>.calmbg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 85% at 80% 18%,rgba(201,163,94,.24),rgba(201,163,94,.07) 45%,transparent 70%),radial-gradient(55% 70% at 6% 104%,rgba(201,163,94,.12),transparent 72%),linear-gradient(158deg,#1d1812 0%,#100d10 52%,#17120c 100%)}
.frame>.calmbg::before{content:none}
.frame>.calmbg::after{content:"";position:absolute;left:-8%;right:-8%;top:62%;height:1px;transform:rotate(-7deg);background:linear-gradient(90deg,transparent 4%,rgba(201,163,94,.35) 30%,rgba(227,198,142,.85) 58%,rgba(201,163,94,.3) 80%,transparent 96%);box-shadow:0 0 18px rgba(227,198,142,.35)}
/* film grain over the calm and dimmed heroes (design-fix 10-20): a surface, not a flat black slab */
.frame>.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px}
.frame.shade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(transparent,rgba(8,8,8,.62));pointer-events:none;z-index:1}
.frame.shade-l::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.5) 0%,rgba(8,8,8,.24) 32%,transparent 56%);pointer-events:none;z-index:1}
.hx{position:absolute;left:calc(var(--gut) - 12px);right:calc(var(--gut) - 12px);bottom:44px;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;pointer-events:none}
.hx>*{pointer-events:auto}
.hx::before{content:"";position:absolute;z-index:-1;left:-8%;right:30%;top:-30%;bottom:-30%;background:radial-gradient(60% 60% at 30% 55%,rgba(6,6,6,.55),transparent 75%);pointer-events:none}
.hx h1{font-weight:500;letter-spacing:-.04em;text-wrap:balance;font-size:clamp(46px,5.4vw,104px);line-height:.95;max-width:11.5em;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.hx .cap{color:rgba(255,255,255,.84);font-size:18px;line-height:1.45;max-width:21em;padding-bottom:6px;text-shadow:0 1px 18px rgba(0,0,0,.9);text-wrap:pretty}
.hx .cta-row{margin-top:18px}
.hx.top{top:34px;bottom:auto;align-items:start}
.frame .crumbs{position:absolute;left:calc(var(--gut) - 12px);top:28px;z-index:3;color:rgba(242,237,227,.7)}
.frame .crumbs a{color:rgba(242,237,227,.85)}
.frame .hx .crumbs{position:static;margin-bottom:16px}
.frame .chip{position:absolute;right:22px;bottom:18px;z-index:3;color:rgba(242,237,227,.7);background:rgba(8,7,10,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:7px 12px;border-radius:99px}
html[data-theme="light"] .frame{box-shadow:0 0 0 1px rgba(16,18,21,.12),0 30px 80px rgba(16,18,21,.18)}
.cta-row{grid-column:2 / 4}
.cta-row{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.crumbs{color:var(--mute);display:flex;gap:10px;flex-wrap:wrap}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--gold-ink)}
.sec{padding-top:120px;padding-bottom:120px}
.sec.tight{padding-top:80px;padding-bottom:80px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:42px}
.sec-head h2{font-weight:500;font-size:clamp(52px,7.6vw,124px);line-height:.92;letter-spacing:-.045em}
.sec-head .mono{max-width:340px;text-align:right;color:var(--ink-2)}
.h2{font-weight:500;font-size:clamp(40px,4.6vw,72px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.h3{font-weight:500;font-size:clamp(26px,2.5vw,36px);line-height:1.08;letter-spacing:-.03em}
.prose p{color:var(--ink-2);font-size:19px;max-width:36em;text-wrap:pretty}
.prose p+p{margin-top:16px}
.prose strong{color:var(--ink);font-weight:500}
.pull{font-weight:500;font-size:clamp(34px,4vw,60px);line-height:1.04;letter-spacing:-.035em;max-width:18em;text-wrap:balance}
.pull .g{color:var(--gold)}
a.lk{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--ink)}
.lk::after{content:"↗";font-family:var(--sans);color:var(--gold)}
.lk.in::after{content:"→"}
.lk span{background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.facts{border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:1fr 2.1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--mute)}
.facts dd{color:var(--ink);font-size:18px}
.facts dd a{background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.note{color:var(--mute);font-size:14px;max-width:44em}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.tag::before{content:"";width:6px;height:6px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.next{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.next a{padding:28px 24px 34px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;transition:color .3s}
.next a+a{padding-left:24px;border-left:1px solid var(--line)}
.next a .mono{color:var(--mute)}
.next a b{font-weight:500;font-size:clamp(24px,2.3vw,34px);letter-spacing:-.03em;line-height:1.05}
.next a:hover b{color:var(--gold-hi)}
.next a:hover .arrow{transform:translateX(6px)}
.next .arrow{display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1);color:var(--gold)}
.fx-still{display:block}
.js .fx-on .fx-still{display:none}
canvas.fx{display:block;width:100%;height:100%}

/* ───────── footer ───────── */
.foot-cta{background:var(--foot);color:#f2ede3;border-radius:var(--r) var(--r) 0 0;margin:0 12px;padding-top:96px;padding-bottom:40px;overflow:hidden;position:relative;border:1px solid var(--line);border-bottom:0;isolation:isolate}
.foot-cta::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,163,94,.55),transparent)}
.foot-cta .kicker{color:rgba(242,237,227,.7)}
.foot-cta h2{font-weight:500;font-size:clamp(34px,3.6vw,56px);line-height:1.02;letter-spacing:-.035em;max-width:13em;text-wrap:balance}
.foot-cta h2 .g{color:var(--gold)}
.foot-cta .pill.cta{height:54px}
.foot-cta>.wrap{padding-left:calc(var(--gut) - 13px);padding-right:calc(var(--gut) - 13px)}   /* footer text on the page gutter (design-fix 10-20) */
.foot-cta.bare{padding-top:56px}
.foot-cta.bare .foot-grid{margin-top:0;padding-top:0;border-top:0}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:24px;margin-top:80px;padding-top:34px;border-top:1px solid rgba(242,237,227,.14)}
.foot-grid h3{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:normal;line-height:inherit;text-transform:uppercase;color:rgba(242,237,227,.7);margin-bottom:14px}
.foot-grid ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.foot-grid a{color:rgba(242,237,227,.82);font-size:17px}
.foot-grid a:hover{color:var(--gold-hi)}
.foot-cta .email{display:inline-block;font-size:clamp(24px,2.4vw,34px);font-weight:500;letter-spacing:-.025em;background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:4px}
.base{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:80px;color:rgba(242,237,227,.7);flex-wrap:wrap}
.base nav{display:flex;gap:24px}
.base .logo{color:#f2ede3;font-size:19px}

/* ───────── reveal + headline focus (v3 effect 5) ───────── */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js h2.bw.rv,.js h1.bw.rv{opacity:1;transform:none}
.bw .w{display:inline-block;filter:blur(var(--blur,.14em));opacity:0;transform:translateY(.16em);transition:filter 1.4s cubic-bezier(.3,.55,.25,1),opacity 1.1s cubic-bezier(.3,.55,.25,1),transform 1.3s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 110ms)}
.bw.win .w{filter:blur(0);opacity:1;transform:none}

/* ───────── page transition: a gold star opens over the old page, the new page appears inside it ───────── */
@view-transition{navigation:auto}
::view-transition-image-pair(root){background:var(--gold)}
::view-transition-old(root){animation:yb-old .72s cubic-bezier(.7,0,.25,1) both}
::view-transition-new(root){animation:yb-new .72s cubic-bezier(.7,0,.25,1) both}
@keyframes yb-old{
  from{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}
  to{clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,50% calc(50% - 260vmax),calc(50% + 52vmax) calc(50% - 52vmax),calc(50% + 260vmax) 50%,calc(50% + 52vmax) calc(50% + 52vmax),50% calc(50% + 260vmax),calc(50% - 52vmax) calc(50% + 52vmax),calc(50% - 260vmax) 50%,calc(50% - 52vmax) calc(50% - 52vmax),50% calc(50% - 260vmax))}
}
@keyframes yb-new{
  0%,18%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}
  100%{clip-path:polygon(50% calc(50% - 250vmax),calc(50% + 50vmax) calc(50% - 50vmax),calc(50% + 250vmax) 50%,calc(50% + 50vmax) calc(50% + 50vmax),50% calc(50% + 250vmax),calc(50% - 50vmax) calc(50% + 50vmax),calc(50% - 250vmax) 50%,calc(50% - 50vmax) calc(50% - 50vmax))}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .js .rv{opacity:1;transform:none;transition:none}
  .bw .w{filter:none;opacity:1;transform:none;transition:none}
}

/* ───────── tablet ───────── */
@media (max-width:1100px){
  :root{--gut:40px;--hdr:104px}
  .hx{left:28px;right:28px;bottom:30px;grid-template-columns:1fr;gap:14px}
  .frame .crumbs{left:28px}
  /* design-fix 10-20: full nav + CTA stay down to 900px (no MENU-only header at 960) */
  .top{gap:12px}
  .nav{gap:0}
  .nav a{padding:12px 8px;font-size:12px}
  .actions .pill.cta{padding-left:16px;padding-right:16px}
    .foot-grid{grid-template-columns:1fr 1fr}
  .next{grid-template-columns:1fr}
  .next a+a{padding-left:0;border-left:0}
}

@media (max-width:900px){
  .top{grid-template-columns:1fr auto}
  .nav,.actions .pill.cta{display:none}
  .menu-btn{display:inline-flex}
}

/* ───────── phone: its own layout ───────── */
@media (max-width:640px){
  .frame>.amb{background-image:var(--img-m,var(--img))}   /* phones: a 360px copy where the page gives one (blurred 30-40px, looks the same) */
  :root{--gut:16px;--r:18px;--hdr:68px}
  .frame{min-height:460px}
  .hero.wrap{padding-left:8px;padding-right:8px}
  .hero{padding-bottom:8px}
  .hx{left:18px;right:18px;bottom:20px}
  .hx.top{top:22px}
  .hx h1{font-size:clamp(36px,10.6vw,46px);line-height:1}
  .hx .cap{font-size:15px}
  .hx .cta-row .pill{flex:1;justify-content:space-between}
  .frame .crumbs{left:18px;top:18px}
  .frame .chip{right:12px;bottom:12px;font-size:13px}
  body{font-size:16px}
  .top{padding-top:14px;padding-bottom:10px}
  .logo{font-size:19px}
  .pill{height:44px;padding:0 18px}
  .sec{padding-top:80px;padding-bottom:80px}
  .sec.tight{padding-top:56px;padding-bottom:56px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:26px}
  .sec-head h2{font-size:clamp(44px,13vw,58px)}
  .sec-head .mono{text-align:left}
  .h2{font-size:clamp(34px,10vw,44px)}
  .prose p{font-size:17px}
  .pull{font-size:32px}
  .facts>div{grid-template-columns:1fr;gap:4px}
  .foot-cta{margin:0 8px;padding-top:70px}
  .foot-cta>.wrap{padding-left:calc(var(--gut) - 9px);padding-right:calc(var(--gut) - 9px)}
  /* one section spacing on phones (design-fix 10-20): 96px between sections, every page */
  main>section:not(.hero){padding-top:96px!important;padding-bottom:0!important}
  main{padding-bottom:96px}
  .foot-grid{grid-template-columns:1fr 1fr;margin-top:50px;gap:30px 16px}
  .foot-grid .wide{grid-column:1 / -1}
  .foot-cta .email{font-size:24px}
  .foot-cta .cta-row .pill{width:100%;justify-content:space-between}
  .base{margin-top:56px;flex-direction:column;align-items:flex-start}
  .menu{inset:8px;padding:16px 18px 24px}
  .menu nav a{font-size:40px}
}

/* ───────── round 6 (Oct 21): closing block, star field, press feedback ───────── */
.foot-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.foot-cta>.wrap{position:relative;z-index:1}
.close{display:grid;grid-template-columns:1.25fr 1fr;gap:40px 6vw;align-items:end}
.close .k{color:var(--gold-ink);margin-bottom:16px}
.close .sub{color:rgba(242,237,227,.72);font-size:18px;max-width:30em;margin-top:16px;text-wrap:pretty}
.close .cta-row{margin-top:30px}
.close .side{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.close .side .mono{color:var(--mute)}
.close .email{font-size:clamp(22px,2vw,30px)}
@media (hover:none){
  .pill:active{transform:scale(.96)}
  .sp:active .sp-3d,.q:active,.proj:active .media,.next a:active,.gal-item .media:active,.can article:active{transform:scale(.975)}
  .sp-3d,.q,.proj .media,.next a,.gal-item .media,.can article{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
}
@media (max-width:1100px){.close{grid-template-columns:1fr;gap:28px}}
@media (max-width:640px){
  .foot-cta{padding-top:64px}
  .foot-cta h2{font-size:clamp(28px,8.4vw,36px)}
  .close .sub{font-size:16px}
  .close .cta-row .pill{flex:1;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){.foot-stars{opacity:.6}.pill.mag{transition:none}}
/* round 7 (Oct 21, 2026): every tap target at least 44px: inline links get vertical padding (no layout change on inline boxes) */
body main p a:not(.pill):not(.lk),body main dd a,body main li a:not(.pill),body main figcaption a,body main .who a,body main .fl dd a,body main .facts dd a,body .foot-grid a,body .base nav a,body .menu .mfoot a{padding:13px 0;background-origin:content-box}
body main .crumbs a{padding:14px 0}
form.msg select{-webkit-appearance:none;appearance:none;height:46px;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23c9a35e' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.base nav a{padding:13px 0}
a.lk{min-height:44px;align-items:center}
.menu nav a{min-height:56px;align-items:center}
@media (max-height:520px) and (orientation:landscape){
  :root{--hdr:60px;--gut:24px}
  .top{padding-top:8px;padding-bottom:8px}
  .frame,.stage{min-height:0;height:calc(100svh - var(--hdr) - 12px)}
  .hx{bottom:14px;left:20px;right:20px}
  .hx.top{top:14px}
  .hx h1{font-size:clamp(26px,4.6vw,40px);line-height:1}
  .hx .cap{font-size:14px;max-width:30em;margin-top:8px}
  .hx .cta-row{margin-top:10px}
  .pill,.show-link{min-height:44px}   /* round 8: landscape pills stay 44px (Codex r7, review r7 non-blocking 3) */
}
/* round 7: Isaac, no big type near the end of pages: section headings on inner pages, gallery titles and the big capability words cap at 56px (36px on phones) */
body .h2,body .gal-item h2,body .gal-item.half h2,body .cap3 b,body .lab-item .about h2{font-size:clamp(34px,3.9vw,56px);line-height:1.02}
.gal-item a.title{display:inline-block;padding:5px 0}
.foot-cta .email{padding:5px 0 8px;background-origin:content-box}
@media (max-width:640px){body .h2,body .gal-item h2,body .gal-item.half h2,body .cap3 b,body .lab-item .about h2{font-size:clamp(30px,9vw,36px)}}

/* round 8 (review r7 non-blocking 3, Codex r7): every tap target is 44px in both directions. Footer links are 44px rows (no
   inline padding, so neighbours never overlap); the breadcrumb link grows its hit box without moving the line; the Home
   client line is spaced so its padded links do not overlap from one line to the next. */
body .foot-grid a,body .base nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;padding:0}
.foot-grid ul{gap:0}
.foot-grid h3{margin-bottom:6px}
body main .crumbs a{display:inline-block;padding:14px 10px;margin:-14px -10px}
.gal-item a.title{min-height:44px}
body .intro .who{line-height:46px}
body main .who a{padding:12px 0}
/* round 8 (review r7 non-blocking 4): a floating Menu pill once the header has scrolled away (phones and tablets) */
.pill.fab-menu{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:12px;z-index:45;display:none;background:rgba(10,9,12,.8);color:#f2ede3;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(242,237,227,.16),0 12px 30px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility .35s}
.pill.fab-menu.on{opacity:1;visibility:visible;transform:none}
html.menu-open .pill.fab-menu{opacity:0;visibility:hidden}
@media (max-width:900px){.pill.fab-menu{display:inline-flex}}
@media (max-width:640px){body .intro .who{line-height:46px}body main .who a{padding:13px 0}}
@media (prefers-reduced-motion:reduce){.pill.fab-menu{transition:none}}
/* round 8: the breadcrumb link is a 44px box (it lives in a <p>, so it needs the stronger selector); short inline links never
   break across two lines, where each half would be a target under 44px */
body main p.crumbs a:not(.pill):not(.lk){display:inline-block;padding:14px 10px;margin:-14px -10px}
body .intro .who a,body main a[href$="/privacy/"]{white-space:nowrap}
/* ───────── round 9 (Oct 22, 2026) ─────────
   review r8 non-blocking 12: the skip link is a 44px target. */
.skip{min-height:44px;display:inline-flex;align-items:center;padding:12px 16px;line-height:20px}
/* manager decision 5 (review r8 non-blocking 3, Codex r8 blocker 1): the floating Menu pill shows on every touch screen up to
   1366px wide and on every landscape phone, bottom right where a thumb reaches, above the safe area. html.touch is set by site.js
   (navigator.maxTouchPoints), so touch iPads match even where (hover:none) is not reported. */
.pill.fab-menu{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));right:calc(16px + env(safe-area-inset-right,0px));transform:translateY(12px)}
@media (hover:none) and (max-width:1366px),(pointer:coarse) and (max-width:1366px),(max-height:520px) and (orientation:landscape){.pill.fab-menu{display:inline-flex}}
@media (max-width:1366px){html.touch .pill.fab-menu{display:inline-flex}}
/* the open menu never runs past a short screen: it scrolls, and landscape phones get a compact two-column list */
.menu{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (max-height:520px) and (orientation:landscape){
  .menu{inset:8px;padding:10px 20px 14px}
  .menu nav{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .menu nav a{font-size:22px;min-height:48px;padding:2px 0;letter-spacing:-.02em}
  .menu .pill.cta{margin-top:12px;height:48px}
  .menu .mfoot{margin-top:6px}
}
/* Codex r8: no menu motion under reduced motion */
@media (prefers-reduced-motion:reduce){.menu{transition:none;transform:none}}
/* review r8 non-blocking 9: each word span keeps its own space (site.js puts it inside the span, with a <wbr> after it), so a
   wrapped heading still reads "not promised" and not "notpromised" when copied or read as text in Safari */
.bw .w{white-space:pre}

/* ═════ Round 10 (Oct 22, 2026) ═════ */
/* phones: a sticky gold Book bar once the first screen's button has scrolled away. It shares one row with the floating
   Menu pill (Book on the left, Menu on the right, same bottom line), hides while the menu is open, while a field has
   focus and while the Contact form is on screen. The page keeps room under its last line so the pair never covers it. */
.book-bar{display:none}
@media (max-width:640px){
  .book-bar{display:inline-flex;position:fixed;z-index:44;left:calc(16px + env(safe-area-inset-left,0px));right:calc(26px + var(--fabw,112px) + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:48px;justify-content:space-between;box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility 0s .3s}
  .book-bar.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
  html.menu-open .book-bar{opacity:0;visibility:hidden}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){.book-bar,.book-bar.on{transition:none}}
/* phones: first-screen panels run 24px past Safari's small viewport, so the next section starts under the toolbar, not above it */
@media (max-width:640px){main > section:first-child .frame{min-height:calc(100svh - var(--hdr) + 24px)}}