/* marckaiohasler.ch
   Built from the Claude Design file design/claude-design-v2.html (round eight).
   Order: fonts, design tokens, the design's own rules, then the additions for the
   live page (portrait slot, chapter notes, route animation, planner states, timeline,
   certificates, gallery, assistant states).
   Motion only runs when JavaScript has added the class "js" to <html> and the reader has
   not asked for reduced motion. Without either, every element is simply visible. */

/* Self-hosted fonts, Latin subset, all under the SIL Open Font License 1.1 (see NOTES.md). */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("../fonts/schibsted-grotesk-latin.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url("../fonts/source-serif-4-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2")}
/* Fallbacks scaled to the average letter width of the web fonts (measured with fontTools),
   so the text barely moves when the real fonts arrive. */
@font-face{font-family:"Schibsted fallback";src:local("Arial");size-adjust:107%}
@font-face{font-family:"Source Serif fallback";src:local("Georgia");size-adjust:103.8%}

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* colour */
  --bg:#F2F5F4; --band:#E6ECEA; --surface:#F9FBFA; --paper:#FFFFFF;
  --ink:#22303A; --ink-2:#33454F; --text:#24313A; --muted:#56616A;
  --line:#C3CDD1; --line-soft:#D9E0E3;
  --accent:#156E7C; --accent-deep:#0F5966; --accent-tint:#E4F0F2; --accent-mid:#C2DBE0;
  --dark:#22303A; --dark-2:#2A3A45; --dark-3:#1B262E; --dark-line:#43566180; --dark-line-solid:#435661;
  --on-dark:#F2F5F4; --on-dark-2:#D3DDE0; --accent-on-dark:#7CC6D0;
  --on-accent:#FFFFFF; --on-accent-2:#D5ECEF;
  --risk:#A8503F;
  --app-coral-1:#F6EEEB; --app-coral-2:#FBF6F4; --app-coral-ink:#5E4741;
  /* type */
  --f-head:'Schibsted Grotesk','Schibsted fallback','Helvetica Neue',Arial,sans-serif;
  --f-body:'Source Serif 4','Source Serif fallback',Georgia,'Times New Roman',serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --fs-display:clamp(31px,3.4vw,50px);
  --fs-part:clamp(40px,5.4vw,80px);
  --fs-h3:clamp(27px,2.8vw,40px);
  --fs-h4:clamp(20px,1.75vw,26px);
  --fs-h5:clamp(18px,1.3vw,20px);
  --fs-lead:clamp(17.5px,1.4vw,21px);
  --fs-body:clamp(16px,calc(15.1px + .14vw),17px);   /* 16 px on phones, 17 px on a laptop */
  --fs-small:clamp(15px,1.05vw,16px);
  --fs-label:13px;
  --lh-tight:1.06; --lh-head:1.15; --lh-body:1.6;
  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --sec:clamp(44px,5vw,72px);
  --gutter:clamp(20px,4vw,56px);
  --max:1240px;
  /* shape */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px; --r-pill:999px;
  --sh-sheet:0 1px 2px rgba(34,48,58,.08),0 14px 36px rgba(34,48,58,.10);
  --sh-lift:0 2px 4px rgba(34,48,58,.10),0 22px 44px rgba(34,48,58,.16);
  --sh-device:0 30px 60px rgba(34,48,58,.18);
  --sh-panel:-24px 0 60px rgba(34,48,58,.16);
  /* drawings */
  --stroke:1.5px;            /* rendered stroke weight of every line drawing */
  --draw-dur:1s;
  --ease:cubic-bezier(.45,.05,.25,1);
  --header-h:60px;
}

/* =========================================================
   BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe{display:block;max-width:100%}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-deep)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.teal :focus-visible{outline-color:#FFFFFF}
.skip{position:absolute;left:16px;top:-60px;z-index:999;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r-s);font-family:var(--f-head)}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec) 0}
.band{background:var(--band)}
.dark{background:var(--dark);color:var(--on-dark)}
.teal{background:var(--accent);color:var(--on-accent)}

/* type */
.label{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.dark .label{color:var(--accent-on-dark)}
.h3{font-family:var(--f-head);font-weight:600;font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.dark .h3{color:var(--on-dark)}
.h4{font-family:var(--f-head);font-weight:600;font-size:var(--fs-h4);line-height:var(--lh-head);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.dark .h4{color:var(--on-dark)}
.h5{font-family:var(--f-head);font-weight:600;font-size:var(--fs-h5);line-height:1.25;color:var(--ink)}
.dark .h5{color:var(--on-dark)}
.lead{font-size:var(--fs-lead);line-height:1.45;color:var(--ink);text-wrap:pretty;max-width:36em}
.dark .lead{color:var(--on-dark)}
.body{max-width:64ch;text-wrap:pretty}
.small{font-size:var(--fs-small);line-height:1.5}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 21px;border-radius:var(--r-pill);font-family:var(--f-head);font-weight:600;font-size:15.5px;line-height:1.1;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .12s,box-shadow .2s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-deep);color:var(--on-accent);box-shadow:0 8px 20px rgba(21,110,124,.25)}
.btn-outline{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-outline:hover{background:var(--ink);color:var(--on-dark)}
.btn-ghost{min-height:44px;padding:0 6px;color:var(--accent);background:none;border:0;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.btn-ghost:hover{color:var(--accent-deep);text-decoration-thickness:2.5px}
.btn-light{background:var(--on-dark);color:var(--accent-deep)}
.btn-light:hover{background:#fff;color:var(--accent-deep);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn-outline-light{border-color:#fff;color:#fff;background:transparent}
.btn-outline-light:hover{background:#fff;color:var(--accent-deep)}
.btn-dark-outline{border-color:var(--on-dark);color:var(--on-dark);background:transparent}
.btn-dark-outline:hover{background:var(--on-dark);color:var(--ink)}
.btn-sm{min-height:44px;padding:0 15px;font-size:14.5px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s,transform .12s}
.icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:hover{background:var(--ink);color:var(--on-dark)}
.icon-btn:active{transform:scale(.94)}
.icon-btn[disabled]{opacity:.35;cursor:default;background:transparent;color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.04em;padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.chip-accent{background:var(--accent-tint);border-color:var(--accent-mid);color:var(--accent-deep)}
.chip-accent::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* =========================================================
   LINE DRAWINGS (stroke-dasharray draw-on-scroll)
   ========================================================= */
svg.draw{fill:none;stroke:var(--draw-ink,var(--ink));stroke-width:var(--sw,var(--stroke));stroke-linecap:round;stroke-linejoin:round;overflow:visible;height:auto}
svg.draw .a{stroke:var(--draw-accent,var(--accent))}
svg.draw .mask{fill:var(--mask,var(--bg));stroke:none}
svg.draw text{font-family:var(--f-mono);fill:var(--draw-ink,var(--ink));stroke:none;letter-spacing:.08em}
svg.draw text.t-muted{fill:var(--muted);letter-spacing:.02em}
.dark svg.draw{--draw-ink:#E3EBEC;--draw-accent:var(--accent-on-dark);--mask:var(--dark)}
.teal svg.draw{--draw-ink:#F2F5F4;--draw-accent:#BFE3E8;--mask:var(--accent)}
.draw-line{transform-origin:0 50%}
.draw-line.y{transform-origin:50% 0}

/* =========================================================
   TOP BAR
   ========================================================= */
.top{position:sticky;top:0;z-index:100;height:var(--header-h);background:rgba(242,245,244,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-family:var(--f-head);font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;min-height:44px;display:flex;align-items:center;white-space:nowrap}
.brand .short{display:none}
.top nav{display:flex;align-items:center;gap:clamp(4px,1.6vw,26px)}
.top nav a.nav-link{font-family:var(--f-head);font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;min-height:44px;display:flex;align-items:center;padding:0 4px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.top nav a.nav-link:hover,.top nav a.nav-link.is-active{color:var(--ink);border-bottom-color:var(--accent)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
@media (max-width:720px){.top nav a.nav-link{display:none}}
@media (max-width:400px){.brand .full{display:none}.brand .short{display:inline}}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;overflow:hidden}
.contours{position:absolute;pointer-events:none;fill:none;stroke:#D2DCDA;stroke-width:1}
.contours path{vector-effect:non-scaling-stroke}
.hero .contours{right:-14%;top:-8%;width:74%;height:118%}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,3.6vw,56px);align-items:center;min-height:min(calc(100svh - var(--header-h)),620px);padding:clamp(20px,3vw,36px) 0 clamp(28px,3.6vw,44px)}
.hero-text{display:flex;flex-direction:column;gap:clamp(16px,1.7vw,22px)}
.hero h1{font-family:var(--f-head);font-weight:600;font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.027em;color:var(--ink);text-wrap:balance;max-width:16.5em}
.hero-name{font-family:var(--f-head);font-weight:500;font-size:clamp(18px,1.5vw,22px);line-height:1.3;letter-spacing:-.01em;color:var(--ink-2);margin-top:calc(-1 * clamp(4px,.6vw,8px))}
.avail{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border:1.5px solid var(--accent);border-radius:var(--r-l);background:var(--accent-tint);max-width:620px}
.avail-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--accent);margin-top:7px;box-shadow:0 0 0 5px var(--accent-mid)}
.avail p{font-family:var(--f-head);font-size:clamp(15.5px,1.08vw,16.5px);line-height:1.45;color:var(--ink)}
.avail strong{display:block;font-weight:700;font-size:clamp(17px,1.3vw,19.5px);letter-spacing:-.01em;margin-bottom:2px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero-comp{position:relative;width:100%;max-width:500px;justify-self:end;aspect-ratio:580/620}
.hero-comp svg.draw{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.portrait{position:absolute;z-index:1;left:6.9%;top:3.23%;width:62.07%;aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover}
.standin{width:100%;height:100%;display:flex;align-items:flex-end;padding:16px;background:repeating-linear-gradient(135deg,#DCE5E3 0 10px,#E7EDEB 10px 20px)}
.standin span{font-family:var(--f-mono);font-size:12px;color:var(--ink-2);background:rgba(249,251,250,.9);padding:6px 10px;border-radius:8px}
.standin.dark-s{background:repeating-linear-gradient(135deg,#1E2A32 0 10px,#26343D 10px 20px)}
.standin.dark-s span{color:#DCE6E7;background:rgba(27,38,46,.88)}
.standin.app{background:repeating-linear-gradient(135deg,var(--app-coral-1) 0 10px,var(--app-coral-2) 10px 20px);align-items:center;justify-content:center}
.standin.app span{color:var(--app-coral-ink);background:rgba(255,255,255,.85);text-align:center}
.hero-mobile{display:none}
@media (max-width:959px){
  .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0;gap:20px;padding-top:20px}
  .hero-comp{display:none}
  .hero-mobile{display:flex;align-items:center;gap:18px;order:0}
  .hero h1{order:1}
  .avail{order:2}
  .hero .actions{order:3}
  .hero-name{order:1}
  .hero-text{display:contents}
}
.mini-portrait{position:relative;flex:none;width:84px;aspect-ratio:4/5}
.mini-portrait::before{content:"";position:absolute;inset:0;transform:translate(7px,7px);border:1.5px solid var(--accent);border-radius:12px}
.mini-portrait .portrait{position:relative;left:0;top:0;width:100%;border-radius:12px}
.mini-portrait .standin{padding:6px}
.mini-portrait .standin span{font-size:10px;padding:3px 5px}
.hero-mobile svg{flex:1;min-width:0;max-width:300px}
@media (max-width:420px){.hero .actions .btn{flex:1 1 auto;padding:0 18px}}

/* =========================================================
   PART OPENERS
   ========================================================= */
.part-open{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(24px,4vw,64px);align-items:end;border-top:1.5px solid var(--ink);padding-top:clamp(14px,1.6vw,20px);margin-bottom:clamp(28px,3.4vw,44px)}
.dark .part-open{border-top-color:var(--on-dark)}
.teal .part-open{border-top-color:#fff}
.part-num{font-family:var(--f-mono);font-size:var(--fs-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.dark .part-num{color:var(--accent-on-dark)}
.teal .part-num{color:var(--on-accent-2)}
.part-title{font-family:var(--f-head);font-weight:700;font-size:var(--fs-part);line-height:.95;letter-spacing:-.04em;color:var(--ink);margin:8px 0 12px}
.dark .part-title,.teal .part-title{color:#fff}
.part-toc{display:flex;flex-wrap:wrap;gap:4px 22px}
.part-toc a{font-family:var(--f-head);font-weight:500;font-size:15.5px;color:var(--ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;gap:8px;border-bottom:1.5px solid transparent}
.part-toc a span{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.part-toc a:hover{border-bottom-color:currentColor}
.dark .part-toc a,.teal .part-toc a{color:#fff}
.dark .part-toc a span{color:var(--accent-on-dark)}
.teal .part-toc a span{color:var(--on-accent-2)}
.part-art{width:clamp(100px,12vw,168px)}
@media (max-width:560px){.part-art{width:96px}.part-toc{gap:0 18px}}

/* =========================================================
   WHY COMMODITIES
   ========================================================= */
.why-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px clamp(32px,5vw,80px);align-items:end}
.why-head .stack-v{display:flex;flex-direction:column;gap:13px}
.triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);margin-top:clamp(24px,3vw,36px)}
@media (max-width:1000px){.triptych{grid-template-columns:repeat(2,minmax(0,1fr))}.triptych figure:first-child{grid-column:1 / -1}.triptych figure:first-child .frame{aspect-ratio:16/9}}
@media (max-width:640px){.why-head{grid-template-columns:minmax(0,1fr)}}
.fig{display:flex;flex-direction:column;gap:12px}
.figcap{display:flex;gap:12px;align-items:baseline;font-size:var(--fs-small);line-height:1.45;color:var(--text)}
.figcap b{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--accent);flex:none}
.frame{position:relative;aspect-ratio:4/3;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;isolation:isolate}
.frame::before{content:"";position:absolute;inset:12px;border:1px solid var(--line-soft);border-radius:12px;pointer-events:none;z-index:3;transition:border-color .45s}
.frame-art{position:absolute;inset:0;padding:10%;display:grid;place-items:center;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.frame-art svg{width:100%}
.frame-photo{position:absolute;inset:0;z-index:1;opacity:0;transform:scale(1.03);transition:opacity .45s var(--ease),transform .7s var(--ease)}
.frame-photo img{width:100%;height:100%;object-fit:cover}
.frame-photo .standin{background:repeating-linear-gradient(135deg,#D3DEDB 0 10px,#DEE7E5 10px 20px)}
.frame-hit{position:absolute;inset:0;z-index:4;width:100%;height:100%;background:transparent;border:0;border-radius:var(--r-l);cursor:pointer;padding:0}
.frame-state{position:absolute;z-index:5;top:22px;right:22px;display:flex;border-radius:var(--r-pill);background:rgba(249,251,250,.94);border:1px solid var(--line);padding:3px;pointer-events:none}
.frame-state span{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.04em;padding:4px 10px;border-radius:var(--r-pill);color:var(--ink-2);transition:background .3s,color .3s}
.frame-state .s-draw{background:var(--ink);color:#fff}
.frame-hint{position:absolute;z-index:5;left:22px;bottom:20px;font-family:var(--f-mono);font-size:12px;color:var(--ink-2);pointer-events:none;transition:opacity .3s}
.frame.has-photo:hover .frame-photo,.frame.has-photo:focus-within .frame-photo,.frame.is-photo .frame-photo{opacity:1;transform:none}
.frame.has-photo:hover .frame-art,.frame.has-photo:focus-within .frame-art,.frame.is-photo .frame-art{opacity:0;transform:scale(.97)}
.frame.has-photo:hover::before,.frame.has-photo:focus-within::before,.frame.is-photo::before{border-color:rgba(255,255,255,.75)}
.frame.has-photo:hover .s-draw,.frame.has-photo:focus-within .s-draw,.frame.is-photo .s-draw{background:transparent;color:var(--ink-2)}
.frame.has-photo:hover .s-photo,.frame.has-photo:focus-within .s-photo,.frame.is-photo .s-photo{background:var(--ink);color:#fff}
.frame.has-photo:hover .frame-hint,.frame.has-photo:focus-within .frame-hint,.frame.is-photo .frame-hint{opacity:0}
.js .frame.has-photo.is-off:not(:hover) .frame-photo{opacity:0}
.hint-touch{display:none}
@media (hover:none){.hint-hover{display:none}.hint-touch{display:inline}}

/* =========================================================
   EXCHANGE + STAR WARS
   ========================================================= */
.skyline{display:block;width:min(100%,1000px);margin:clamp(20px,2.6vw,32px) auto clamp(4px,1vw,12px)}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
@media (max-width:760px){.cards2{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:11px}
.card-top{display:flex;align-items:center;gap:14px}
.badge{flex:none;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--f-head);font-weight:600;font-size:14px;letter-spacing:.02em}
.badge.drawn{background:var(--surface);border:1.5px solid var(--ink);color:var(--ink);position:relative}
.badge.drawn::after{content:"";position:absolute;right:4px;top:4px;width:7px;height:7px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);border-radius:0 3px 0 0}
.ticks{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.ticks li{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-small);color:var(--text)}
.ticks li::before{content:"";flex:none;width:6px;height:6px;border:1.5px solid var(--accent);border-radius:1.5px;transform:translateY(-2px)}

.browser{border:1px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--dark-3);box-shadow:var(--sh-device)}
.browser-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-height:56px;padding:6px 8px 6px 16px;background:var(--ink);color:var(--on-dark)}
.browser-dots{display:flex;gap:7px}
.browser-dots i{width:10px;height:10px;border-radius:50%;background:#56666F}
.browser-title{font-family:var(--f-mono);font-size:13px;color:var(--on-dark-2);flex:1 1 200px;min-width:0}
.browser-tools .note{font-family:var(--f-mono);font-size:12px;color:var(--on-dark-2);margin-right:6px}
.browser-tools .btn{min-height:44px;font-size:14px;padding:0 14px}
.browser-view{position:relative;aspect-ratio:16/10;background:var(--dark-3)}
.browser-view > *{position:absolute;inset:0}
.pl-live iframe{width:100%;height:100%;border:0;background:#fff}
.pl-open{display:none}
@media (max-width:760px){.pl-try{display:none}.pl-open{display:inline-flex}}
html:not(.js) .pl-try{display:none}
html:not(.js) .pl-open{display:inline-flex}
.hints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
@media (max-width:860px){.hints{grid-template-columns:minmax(0,1fr)}}
.hint{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
.hint-n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--f-mono);font-size:13px;display:flex;align-items:center;justify-content:center}
.hint svg{width:38px}
.hint p{font-family:var(--f-head);font-weight:500;font-size:16px;line-height:1.35;color:var(--ink)}

/* =========================================================
   LANGUAGES ROW
   ========================================================= */
.langs{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin-top:clamp(20px,2.4vw,30px);padding:12px 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line)}
.langs .label{margin-right:24px}
.langs li{display:flex;align-items:baseline;gap:8px;padding:4px 20px;border-left:1px solid var(--line);font-size:var(--fs-small)}
.langs li.lang-label{border:0;padding:0 24px 0 0}.langs li:nth-of-type(2){border-left:0;padding-left:0}
.langs b{font-family:var(--f-head);font-weight:600;color:var(--ink)}
@media (max-width:640px){.langs{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}.langs .label{grid-column:1 / -1}.langs li{border-left:0;padding:0;flex-direction:column;gap:0}}


/* =========================================================
   HOW I WORK WITH AI (dark chapter)
   ========================================================= */
.ai-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;max-width:900px}
.principle{margin-top:clamp(24px,3vw,38px);border:1.5px solid var(--accent-on-dark);border-radius:var(--r-xl);background:var(--dark-3);padding:clamp(20px,3vw,40px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(20px,3vw,40px);align-items:center}
.principle-h{font-family:var(--f-head);font-weight:700;font-size:clamp(32px,4vw,58px);line-height:1;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.principle-h em{font-style:normal;color:var(--accent-on-dark)}
.principle-s{margin-top:16px;font-size:clamp(17px,1.3vw,19.5px);line-height:1.5;color:var(--on-dark);max-width:34em}
.principle-art{width:100%;max-width:320px;justify-self:end}
.principle-pts{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);border-top:1px solid var(--dark-line-solid);padding-top:clamp(18px,2vw,24px)}
.principle-pts li{display:flex;flex-direction:column;gap:10px}
.principle-pts svg{width:42px}
.principle-pts p{font-family:var(--f-head);font-weight:500;font-size:clamp(16px,1.12vw,17px);line-height:1.4;color:var(--on-dark)}
.principle-close{grid-column:1 / -1;font-family:var(--f-head);font-weight:600;font-size:clamp(17px,1.3vw,19.5px);color:var(--accent-on-dark)}
@media (max-width:960px){.principle{grid-template-columns:minmax(0,1fr)}.principle-art{justify-self:start;max-width:300px}.principle-pts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow-head{margin-top:clamp(40px,4.4vw,60px);display:flex;flex-direction:column;gap:12px;max-width:820px}
.flow-head p{color:var(--on-dark-2);font-size:var(--fs-body)}
/* the four steps sit inside one frame: the logic check, named on the frame and closed by the gate below */
.flow{--fp:clamp(20px,2.6vw,34px);position:relative;margin-top:clamp(30px,3vw,40px);padding:calc(var(--fp) + 6px) var(--fp) 0;border:1.5px solid var(--accent-on-dark);border-radius:var(--r-xl)}
.gate-tag{position:absolute;top:0;left:calc(var(--fp) - 10px);transform:translateY(-50%);display:inline-flex;align-items:center;gap:8px;padding:2px 12px;background:var(--dark);font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-on-dark)}
.gate-tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-line{position:absolute;top:calc(var(--fp) + 46px);left:calc(var(--fp) + 40px);right:calc(var(--fp) + (100% - 2 * var(--fp) - 3 * 28px) / 4 - 40px);height:1.5px;background:var(--accent-on-dark)}
.gate{position:relative;display:flex;align-items:center;gap:clamp(14px,1.8vw,22px);margin:clamp(26px,2.8vw,36px) calc(var(--fp) * -1) 0;padding:clamp(16px,1.8vw,22px) var(--fp);border-top:1.5px solid var(--accent-on-dark);border-radius:0 0 calc(var(--r-xl) - 2px) calc(var(--r-xl) - 2px);background:rgba(124,198,208,.12)}
.gate-icon{flex:none;width:56px;height:56px;border-radius:50%;border:1.5px solid var(--accent-on-dark);background:var(--dark);display:flex;align-items:center;justify-content:center}
.gate-icon svg{width:64%}
.gate p{display:flex;flex-direction:column;gap:4px;max-width:62ch}
.gate b{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-on-dark)}
.gate span{font-size:var(--fs-body);line-height:1.5;color:var(--on-dark-2)}
.gate strong{display:block;margin-bottom:2px;font-family:var(--f-head);font-size:clamp(18px,1.45vw,21px);line-height:1.3}
/* "plain logic, not an AI model": the one line that should not be missed */
.logic-em{font-weight:700;color:#fff;text-decoration:underline;text-decoration-color:var(--accent-on-dark);text-decoration-thickness:2px;text-underline-offset:4px}
.flow ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.step{display:flex;flex-direction:column;gap:11px}
.step-icon{width:80px;height:80px;border-radius:50%;background:var(--dark);border:1.5px solid var(--dark-line-solid);display:flex;align-items:center;justify-content:center;flex:none}
.step-icon svg{width:62%}
.step-n{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;color:var(--accent-on-dark)}
.step h5{font-family:var(--f-head);font-weight:600;font-size:clamp(18.5px,1.4vw,21px);line-height:1.2;color:#fff}
.step p{font-size:var(--fs-body);line-height:1.5;color:var(--on-dark)}
.step-why{border-top:1px solid var(--dark-line-solid);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.step-why b{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-on-dark)}
.step-why span{font-family:var(--f-head);font-size:15.5px;line-height:1.45;color:var(--on-dark-2)}
/* the three vendors, always the same three badges, joined by a short hairline */
.models{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.models span{position:relative;font-family:var(--f-mono);font-size:12.5px;color:var(--on-dark);border:1px solid var(--dark-line-solid);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.models span + span::before{content:"";position:absolute;top:50%;right:100%;width:13px;height:1px;background:var(--dark-line-solid)}
@media (min-width:900px) and (max-width:1199px){.flow ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}.flow-line{display:none}}
@media (max-width:899px){
  .flow-line{top:calc(var(--fp) + 38px);bottom:56px;left:calc(var(--fp) + 32px);right:auto;width:1.5px;height:auto;transform-origin:50% 0}
  .gate-icon{width:64px;height:64px}
  .flow ol{grid-template-columns:minmax(0,1fr);gap:28px}
  .step{display:grid;grid-template-columns:64px minmax(0,1fr);gap:7px 16px;align-items:start}
  .step-icon{width:64px;height:64px;grid-row:1 / span 6}
  .step > *:not(.step-icon){grid-column:2}
}
.uses{margin-top:clamp(32px,3.6vw,48px);display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:16px 24px;align-items:center;border-top:1px solid var(--dark-line-solid);padding-top:24px}
.uses li{display:flex;align-items:center;gap:12px;font-family:var(--f-head);font-weight:500;font-size:16px;line-height:1.3;color:var(--on-dark)}
.uses svg{width:36px;flex:none}
@media (max-width:960px){.uses{grid-template-columns:repeat(2,minmax(0,1fr))}.uses .label{grid-column:1 / -1}}
.ai-close{margin-top:clamp(24px,3vw,36px);display:inline-flex;align-items:center;gap:12px;min-height:52px;font-family:var(--f-head);font-weight:600;font-size:clamp(18px,1.4vw,21px);color:#fff;text-decoration:none;border-bottom:1.5px solid var(--accent-on-dark);transition:color .2s,gap .2s}
.ai-close:hover{color:var(--accent-on-dark);gap:16px}
.ai-close svg{width:20px;height:20px;fill:none;stroke:var(--accent-on-dark);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   WHAT I BUILT
   ========================================================= */
.proj-head{display:flex;flex-wrap:wrap;gap:20px 56px;align-items:flex-end;justify-content:space-between}
.proj-name{font-family:var(--f-head);font-weight:700;font-size:clamp(38px,4.2vw,62px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px);margin-top:clamp(18px,2.2vw,28px)}
@media (max-width:860px){.cols3{grid-template-columns:minmax(0,1fr)}}
.col{border-top:1.5px solid var(--ink);padding-top:11px;display:flex;flex-direction:column;gap:8px}
/* The showcase: one large laptop with the phone in front. The screens lie on top of each other and
   crossfade. There are no buttons: a click, a swipe, the arrow keys or time change the screen. */
.showcase{margin-top:clamp(20px,2.6vw,32px);display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);border-radius:var(--r-l);outline-offset:10px}
/* the device group: about 85 percent of the column, centred, and it never changes size under the pointer */
.devices-box{position:relative;z-index:1;width:85%;margin-inline:auto;padding:clamp(8px,2vw,26px) 0 clamp(4px,1.4vw,20px)}
.devices{position:relative;padding-bottom:3.4%}
/* the laptop takes the whole content width: its base is 6 percent wider than its lid */
.laptop{width:94.34%;margin-left:2.83%}
.laptop-lid{background:#1D252B;border-radius:clamp(12px,1.8vw,24px) clamp(12px,1.8vw,24px) 8px 8px;padding:1.3% 1.3% 1.9%;box-shadow:var(--sh-device);transition:box-shadow .6s var(--ease)}
.laptop-base{width:106%;margin-left:-3%;height:clamp(10px,1.2vw,18px);background:linear-gradient(#D7DEE1,#AEB9BE);border-radius:0 0 18px 18px;display:flex;justify-content:center}
.laptop-base i{width:14%;height:45%;background:#9AA6AC;border-radius:0 0 8px 8px}
.screen{position:relative;overflow:hidden;background:#EEF2F1;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.js .screen{cursor:pointer}
.laptop .screen{border-radius:6px}
/* the phone: a thin even bezel with a metal rim, an island and side buttons. All sizes are shares of the
   phone's width, so it keeps its proportions from a laptop down to a phone (radius x / y follows the
   screen format 1170 by 2532). */
.phone{position:absolute;right:0;bottom:0;width:21.5%;background:#12181C;border-radius:16% / 7.7%;padding:.85%;box-shadow:0 0 0 1px #6B7880,inset 0 0 0 1.5px #313B42,0 2px 6px rgba(34,48,58,.2),0 30px 60px rgba(34,48,58,.3);transition:box-shadow .6s var(--ease)}
.phone .screen{border-radius:12% / 5.8%;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.phone-island{position:absolute;z-index:2;top:2.3%;left:35%;width:30%;aspect-ratio:3.5;border-radius:999px;background:#05080A;pointer-events:none}
.devices .phone::before,.devices .phone::after{content:"";position:absolute;width:max(2px,1.2%);border-radius:2px;background:#4E5A61}
.devices .phone::before{right:calc(max(2px,1.2%) * -1);top:24%;height:10%;border-radius:0 2px 2px 0}
.devices .phone::after{left:calc(max(2px,1.2%) * -1);top:19%;height:15%;border-radius:2px 0 0 2px;background:linear-gradient(#4E5A61 0 42%,transparent 42% 58%,#4E5A61 58%)}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s ease;user-select:none;-webkit-user-drag:none}
.shot.is-active{opacity:1}
@media (max-width:759px){.devices-box{width:100%;padding:0}.devices{padding-bottom:0}.laptop{display:none}.phone{position:relative;width:min(74%,300px);margin:0 auto;padding:8px}}
/* which screen is on: three thin bars, not buttons */
.show-bars{display:flex;justify-content:center;gap:8px}
.show-bars i{width:44px;height:3px;border-radius:2px;background:var(--line);transition:background .6s}

.show-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.show-foot p{font-family:var(--f-head);font-size:16px;color:var(--ink);display:flex;gap:12px;align-items:baseline}
.show-foot p b{font-family:var(--f-mono);font-weight:400;font-size:12.5px;color:var(--accent)}
.vistaio{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.vistaio{grid-template-columns:minmax(0,1fr)}}
.v-media{position:relative;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.v-media::before{content:"";position:absolute;inset:12px;border:1px solid var(--line-soft);border-radius:12px;pointer-events:none;z-index:2}
.v-art{position:absolute;inset:0;padding:5% 7%;display:grid;place-items:center}
.v-art svg{width:100%}
.v-video{display:none;position:absolute;inset:0;z-index:3}
.v-media[data-media="video"] .v-video{display:block}
.v-video button{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:none}
.v-video .play-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;border:1.5px solid #fff;background:rgba(34,48,58,.55);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.v-video button:hover .play-c{transform:translate(-50%,-50%) scale(1.06);background:rgba(34,48,58,.75)}
.v-video .play-c svg{width:28px;height:28px;margin-left:4px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.v-media.is-playing .play-c{display:none}
.v-text{display:flex;flex-direction:column;gap:11px}
.v-text .proj-name{font-size:clamp(30px,3vw,44px)}

/* =========================================================
   RESEARCH
   ========================================================= */
.quote{margin-top:clamp(18px,2.2vw,26px);padding:clamp(16px,2vw,24px) 0;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,2vw,24px)}
.quote span{font-family:var(--f-head);font-weight:700;font-size:clamp(42px,4.2vw,66px);line-height:.8;color:var(--accent)}
.quote p{font-family:var(--f-head);font-weight:500;font-size:clamp(21px,2.2vw,31px);line-height:1.18;letter-spacing:-.016em;color:var(--ink);max-width:30em;text-wrap:balance}
.res-text{margin-top:clamp(16px,2vw,24px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px clamp(28px,4vw,56px)}
@media (max-width:760px){.res-text{grid-template-columns:minmax(0,1fr)}}
.test{margin-top:clamp(28px,3.4vw,44px);background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-xl);padding:clamp(18px,2.4vw,30px)}
.test-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.test-flow{position:relative;margin-top:clamp(16px,2vw,24px)}
.test-line{position:absolute;top:28px;left:28px;right:calc((100% - 3 * clamp(16px,2vw,28px)) / 4 - 28px);height:1.5px;background:var(--accent)}
.test-steps li{position:relative;display:flex;flex-direction:column;gap:7px}
.test-icon{width:56px;height:56px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center}
.test-icon svg{width:70%}
.test-steps .step-n{color:var(--accent)}
.test-steps h5{font-family:var(--f-head);font-weight:600;font-size:clamp(18px,1.3vw,20px);color:var(--ink)}
.test-steps p{font-size:var(--fs-body);line-height:1.5;color:var(--text)}
@media (max-width:1020px){.test-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(16px,2vw,28px)}.test-line{display:none}}
@media (max-width:600px){
  .test-flow .test-line{display:block;top:28px;bottom:120px;left:28px;right:auto;width:1.5px;height:auto;transform-origin:50% 0}
  .test-steps{grid-template-columns:minmax(0,1fr);gap:24px}
  .test-steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 14px;align-items:start}
  .test-steps .test-icon{grid-row:1 / span 3}
  .test-steps li > *:not(.test-icon){grid-column:2}
}

/* =========================================================
   SELECTED WORK (paper stacks)
   ========================================================= */
.doc{display:flex;flex-direction:column;gap:12px;min-width:0}
.stack{position:relative}
.stack-face{position:relative;display:block;width:calc(100% - 12px);margin:0 12px 12px 0;padding:0;border:0;background:none;cursor:pointer;text-align:left;border-radius:6px;color:inherit;text-decoration:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.sheet{position:absolute;inset:0;border-radius:6px;background:var(--paper);border:1px solid var(--line);overflow:hidden}
.sheet-3{transform:translate(12px,12px);background:#EDF1F0}
.sheet-2{transform:translate(6px,6px);box-shadow:0 1px 2px rgba(34,48,58,.06)}
.sheet-1{box-shadow:var(--sh-sheet);transition:transform .25s var(--ease),box-shadow .25s}
.stack-face:hover .sheet-1{transform:translate(-3px,-4px) rotate(-.4deg);box-shadow:var(--sh-lift)}
.stack-face:active .sheet-1{transform:translate(-1px,-1px)}
.sheet-1::after{content:"";position:absolute;right:-1px;bottom:-1px;width:22px;height:22px;background:linear-gradient(315deg,var(--bg) 50%,#DDE6E4 50%);box-shadow:-2px -2px 6px rgba(34,48,58,.12);border-radius:0 0 6px 0;transition:width .25s var(--ease),height .25s var(--ease)}
.stack-face:hover .sheet-1::after,.stack-face:focus-visible .sheet-1::after{width:34px;height:34px}
.stack.turn-next .sheet-1{transform:translate(-26%,-4%) rotate(-7deg);opacity:0;transition:transform .42s var(--ease),opacity .38s ease}
.stack.turn-prev .sheet-1{transform:translate(26%,-4%) rotate(7deg);opacity:0;transition:transform .42s var(--ease),opacity .38s ease}
.stack.turn-next .sheet-2,.stack.turn-prev .sheet-2{transform:none;transition:transform .42s var(--ease)}
.stack.no-tr .sheet{transition:none !important}
.page{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:5% 6%}
.page img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.page-file{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-num{font-family:var(--f-head);font-weight:600;font-size:clamp(40px,5vw,88px);line-height:1;color:var(--accent-mid)}
.page-lines{display:flex;flex-direction:column;gap:8px;margin:auto 0 18px}
.page-lines i{display:block;height:6px;border-radius:3px;background:#E6ECEB}
.stack-cue{position:absolute;right:20px;bottom:22px;z-index:3;font-family:var(--f-mono);font-size:12px;color:#fff;background:var(--ink);padding:5px 10px;border-radius:var(--r-pill);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none}
.stack-face:hover .stack-cue,.stack-face:focus-visible .stack-cue{opacity:1;transform:none}
@media (hover:none){.stack-cue{opacity:1;transform:none}}
.doc-meta{display:flex;flex-direction:column;gap:6px}
.doc-kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.doc-meta .h5{font-size:clamp(18px,1.3vw,19.5px);line-height:1.22;text-wrap:balance}
.doc-ctx{font-family:var(--f-head);font-size:15px;line-height:1.4;color:var(--muted)}
.credit{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;color:var(--ink-2);border:1px dashed var(--ink-2);border-radius:var(--r-pill);padding:3px 10px}
.credit svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}

/* =========================================================
   NEXT (closing band), GALLERY, FOOTER
   ========================================================= */
.teal{position:relative;overflow:hidden}
.teal .contours{stroke:#2A8090;left:-22%;bottom:-40%;width:72%;height:150%}
.next-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,4vw,64px);align-items:start}
@media (max-width:900px){.next-grid{grid-template-columns:minmax(0,1fr)}}
.next-h{font-family:var(--f-head);font-weight:600;font-size:clamp(27px,3vw,44px);line-height:1.08;letter-spacing:-.024em;color:#fff;text-wrap:balance;max-width:18em}
.next-p{margin-top:16px;font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.55;color:#fff;max-width:36em}
.next-grid .actions{margin-top:22px}
.ask-card{border:1.5px solid rgba(255,255,255,.55);border-radius:var(--r-xl);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:14px;background:rgba(15,89,102,.45)}
.ask-card .h5{color:#fff}
.ask-card p{font-size:var(--fs-small);line-height:1.5;color:#fff}
.ask-card svg.mark{width:52px}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px}
.q-chip{min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid currentColor;background:transparent;font-family:var(--f-head);font-weight:500;font-size:15px;cursor:pointer;text-align:left;transition:background .2s,color .2s}
.teal .q-chip{color:#fff}
.teal .q-chip:hover{background:#fff;color:var(--accent-deep)}
.pill-sum{min-height:48px;padding:0 20px 0 14px;border-radius:var(--r-pill);border:1.5px solid var(--ink);color:var(--ink);font-family:var(--f-head);font-weight:600;font-size:16px;cursor:pointer;align-items:center;gap:11px;transition:background .2s}
.pill-sum:hover{background:var(--band)}
.pill-sum svg.cam{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pill-sum .pm{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform .3s var(--ease)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding-top:24px;padding-bottom:32px}
.foot p{font-family:var(--f-head);font-size:15.5px;color:var(--text)}
.foot a{min-height:44px;display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:600;font-size:15.5px;text-decoration:none}
.foot a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   OVERLAYS: reader, lightbox
   ========================================================= */
.overlay{position:fixed;inset:0;z-index:500;overflow-y:auto;overscroll-behavior:contain}
.overlay[hidden]{display:none}
.reader{background:#E3E9E7}
.ov-bar{position:sticky;top:0;z-index:2;background:rgba(242,245,244,.96);border-bottom:1px solid var(--line)}
.ov-bar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-top:10px;padding-bottom:10px}
.ov-title{flex:1 1 280px;min-width:0;font-family:var(--f-head);font-weight:600;font-size:16.5px;color:var(--ink)}
.ov-title span{display:block;font-family:var(--f-mono);font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px}
.ov-tools{display:flex;align-items:center;gap:8px}
.zoom-l{min-width:70px;text-align:center;font-family:var(--f-mono);font-size:13px;color:var(--ink)}
.reader-pages{display:flex;flex-direction:column;align-items:center;gap:28px;padding:32px 16px 96px}
.reader-pages li{width:var(--rw,920px);max-width:100%;display:flex;flex-direction:column;gap:8px;transition:width .3s var(--ease)}
.reader-pages.is-large{align-items:flex-start;width:max-content;min-width:100%}
.reader-pages.is-large li{max-width:none;margin:0 auto}
.reader-pages img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.reader-count{font-family:var(--f-mono);font-size:13px;color:var(--ink);white-space:nowrap;margin-right:6px}
.overlay.reader{overflow:auto}
.reader-pages .sheet{position:relative;inset:auto;box-shadow:var(--sh-sheet)}
.reader-pages .cap{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.lightbox{background:rgba(22,31,37,.96);color:var(--on-dark)}
.lightbox .ov-bar{background:rgba(22,31,37,.94);border-color:#33444F}
.lightbox .ov-title{color:#fff}
.lightbox .ov-title span{color:var(--on-dark-2)}
.lb-body{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:28px;padding:24px var(--gutter) 72px}
.lb-body .lb-lap{flex:1 1 640px;max-width:1440px;border-radius:10px;overflow:hidden}
.lb-body .lb-ph{flex:0 1 390px;border-radius:28px;overflow:hidden}
.lb-body .lb-photo{flex:0 1 auto;max-width:min(1500px,100%);border-radius:12px;overflow:hidden}
.lb-body .lb-photo img{width:auto;max-width:100%;max-height:calc(100vh - 190px);height:auto}
.lb-body img{display:block;width:100%;height:auto}
.lb-body p{flex:1 1 100%;text-align:center;font-family:var(--f-head);font-size:17px;color:var(--on-dark)}

/* =========================================================
   ASSISTANT
   ========================================================= */
.ask-fab{position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);z-index:390;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 20px 0 12px;border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--ink);color:#fff;font-family:var(--f-head);font-weight:600;font-size:16px;cursor:pointer;box-shadow:0 12px 30px rgba(34,48,58,.28);transition:opacity .25s,transform .25s,background .2s}
.ask-fab:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.ask-fab:active{transform:scale(.97)}
.ask-fab svg{width:34px;height:34px}
.ask-fab .dot{position:absolute;top:6px;right:8px;width:10px;height:10px;border-radius:50%;background:var(--accent-on-dark);box-shadow:0 0 0 2px var(--ink)}
.ask-fab.is-read .dot{display:none}
.ask-fab.is-hidden{opacity:0;transform:translateY(14px);pointer-events:none}
.ask{position:fixed;top:0;right:0;bottom:0;z-index:450;width:min(440px,100vw);background:var(--bg);border-left:1px solid var(--line);box-shadow:var(--sh-panel);display:flex;flex-direction:column;transform:translateX(105%);visibility:hidden;transition:transform .35s var(--ease),visibility 0s .35s}
.ask.is-open{transform:none;visibility:visible;transition:transform .35s var(--ease),visibility 0s}
@media (max-width:640px){.ask{width:100vw;height:100dvh;border-left:0;transform:translateY(100%)}}
.ask-head{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-bottom:1px solid var(--line-soft);min-height:64px}
.ask-head svg.mark{width:36px}
.ask-head h2{flex:1;font-family:var(--f-head);font-weight:600;font-size:18px;color:var(--ink)}
.ask-note{padding:12px 18px;font-family:var(--f-head);font-size:14.5px;line-height:1.45;color:var(--ink-2);background:var(--band);border-bottom:1px solid var(--line-soft)}
.ask-log{flex:1;overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:20px}
.ask-empty{display:flex;flex-direction:column;gap:16px}
.ask-empty svg{width:120px}
.ask-empty p{font-size:17px;line-height:1.5;color:var(--text)}
.ask-empty .ask-chips{flex-direction:column;align-items:flex-start}
.ask .q-chip{color:var(--ink);border-color:var(--ink)}
.ask .q-chip:hover{background:var(--ink);color:#fff}
.msg-q{align-self:flex-end;max-width:85%;background:var(--ink);color:#fff;font-family:var(--f-head);font-size:16px;line-height:1.4;padding:10px 14px;border-radius:16px 16px 4px 16px}
.msg-a{display:flex;flex-direction:column;gap:10px;max-width:100%}
.msg-a p{font-size:17px;line-height:1.55;color:var(--text)}
.msg-src{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;color:var(--muted);padding-top:6px;border-top:1px solid var(--line-soft)}
.msg-src svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.msg-a.unknown p{color:var(--ink)}
.typing{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.msg-err{border:1.5px solid var(--risk);border-radius:var(--r-m);padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:#FBF3F1}
.msg-err p{font-family:var(--f-head);font-size:15.5px;line-height:1.45;color:#5A2C23}
.ask-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line-soft);background:var(--surface)}
.ask-form input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:var(--r-m);border:1.5px solid var(--line);background:#fff;font-family:var(--f-head);font-size:16px;color:var(--ink)}
.ask-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-mid)}
.ask-form .icon-btn{width:48px;height:48px;background:var(--accent);border-color:var(--accent);color:#fff}
.ask-form .icon-btn:hover{background:var(--accent-deep)}

/* =========================================================
   ADDITIONS FOR THE LIVE PAGE
   ========================================================= */
[hidden]{display:none !important}

/* chapter numbers in the part openers count themselves, so an absent chapter leaves no gap */
.part-toc{counter-reset:ch}
.part-toc a{counter-increment:ch}
.part-toc a span::before{content:attr(data-p) "." counter(ch)}
/* a part with a single chapter needs no list of chapters */
.part-toc:not(:has(a:not([hidden]) ~ a:not([hidden]))){display:none}

/* "Why this is here": one quiet line under each chapter title */
.whyhere{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;max-width:60ch;padding:2px 0 2px 14px;border-left:1.5px solid var(--accent-mid);font-family:var(--f-head);font-size:var(--fs-small);line-height:1.45;color:var(--muted)}
.whyhere b{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.dark .whyhere{color:var(--on-dark-2);border-left-color:var(--dark-line-solid)}
.dark .whyhere b{color:var(--accent-on-dark)}
/* the framing of a whole chapter: the same line, set as a short paragraph that is read, not skimmed */
.whyhere-lg{display:block;max-width:44em;margin-top:4px;padding:4px 0 4px clamp(16px,1.6vw,22px);border-left-width:3px;font-size:clamp(18.5px,1.5vw,22px);line-height:1.45;font-weight:500}
.whyhere-lg b{display:block;margin-bottom:8px}
.dark .whyhere-lg{color:var(--on-dark);border-left-color:var(--accent-on-dark)}
.ch-top{display:flex;flex-direction:column;gap:11px}
.ch-top.gap-b{margin-bottom:clamp(20px,2.4vw,32px)}

/* ---------- opening: the portrait slot follows the size of the file ---------- */
.hero-comp .portrait img,.mini-portrait .portrait img{display:block;width:100%;height:100%;object-fit:cover}
.hero-mobile.no-portrait svg{max-width:230px}

/* ---------- Why commodities: three or four figures, numbered by the page ---------- */
.triptych:has(> .fig:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1180px){
  .triptych:has(> .fig:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .triptych:has(> .fig:nth-child(4)) figure:first-child{grid-column:auto}
  .triptych:has(> .fig:nth-child(4)) figure:first-child .frame{aspect-ratio:4/3}
}
/* a frame that only holds a photo (Lavour in the press): click to see it large */
.frame.photo-only .frame-photo{opacity:1;transform:none}
.frame.photo-only::before{border-color:rgba(255,255,255,.75)}
.frame.photo-only .frame-hit{cursor:zoom-in}
.frame.photo-only .frame-hint{color:#fff;background:rgba(34,48,58,.8);padding:4px 10px;border-radius:var(--r-pill)}

/* a small real photo that belongs to a drawing: it sits in the corner of the frame, the drawing moves aside */
.frame-inset{position:absolute;z-index:2;right:22px;bottom:22px;width:clamp(64px,27%,var(--iw,110px));display:flex;flex-direction:column;gap:6px}
.frame-inset img{display:block;width:100%;height:auto;border-radius:6px;border:3px solid #fff;box-shadow:var(--sh-sheet);transform:rotate(1.5deg)}
.frame-inset span{font-family:var(--f-mono);font-size:11px;line-height:1.3;color:var(--ink-2)}
.frame:has(.frame-inset) .frame-art{padding-right:calc(27% + 28px);padding-left:7%}

/* the stations appear one after another as the line reaches them */
.js .trail.will-anim .stop{opacity:0;transition:opacity .5s ease;transition-delay:calc(var(--i) * 190ms + 100ms)}
.js .trail.will-anim.is-in .stop{opacity:1}

/* ---------- My exchange: the route comes alive once ---------- */
.skyline .lit{fill:var(--accent);stroke:none}
.skyline .glow{fill:var(--accent-tint);stroke:var(--accent)}
.skyline .plane{display:none;fill:var(--band);stroke:var(--accent)}
.skyline.is-flying .plane{display:block}
.skyline.will-anim .lit,.skyline.will-anim .glow{opacity:0;transition:opacity .9s ease}
.skyline.will-anim.is-lit .lit,.skyline.will-anim.is-lit .glow{opacity:1}
.skyline.will-anim .lit:nth-of-type(2n){transition-delay:.15s}
.skyline.will-anim .lit:nth-of-type(3n){transition-delay:.3s}

/* ---------- Winning at Star Wars: poster, live frame, and the state without a demo ---------- */
.cta-plain{font-family:var(--f-head);font-weight:600;font-size:17px;color:#fff;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
.cta-plain:hover{color:var(--accent-on-dark)}
.pl-live iframe{position:relative;z-index:1}

/* =========================================================
   THE PATH SO FAR: one hairline that winds through the stations
   The stations are a grid, in time order. Every second row runs from right to left, so the line
   through the dots (drawn by site.js into .trail-line) snakes down the page. On phones it winds through
   two columns in the same way.
   ========================================================= */
.trail{--cols:4;position:relative;padding:4px 30px 0}
.trail-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.trail-stops{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:30px 22px}
.stop:nth-child(8n+1),.stop:nth-child(8n){grid-column:1}
.stop:nth-child(8n+2),.stop:nth-child(8n+7){grid-column:2}
.stop:nth-child(8n+3),.stop:nth-child(8n+6){grid-column:3}
.stop:nth-child(8n+4),.stop:nth-child(8n+5){grid-column:4}
.stop{position:relative;min-width:0;padding-top:24px}
.stop-dot{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink)}
.stop.feat .stop-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.stop-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 11px;align-items:start;width:100%;min-height:44px;padding:6px 6px 8px;margin-left:-6px;border:0;border-radius:var(--r-s);background:none;text-align:left;font:inherit;color:inherit}
button.stop-head,a.stop-head{cursor:pointer;transition:background .2s,box-shadow .2s}
a.stop-head{text-decoration:none}
button.stop-head:hover,a.stop-head:hover,.stop.is-open button.stop-head{background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.stop.is-open button.stop-head{box-shadow:0 0 0 1.5px var(--ink)}
.stop-text{display:block;min-width:0}
.stop-org{display:block;font-family:var(--f-head);font-weight:600;font-size:16px;line-height:1.25;color:var(--ink)}
.stop-role{display:block;margin-top:1px;font-size:15px;line-height:1.35;color:var(--text)}
.stop-date{display:block;margin-top:3px;font-family:var(--f-mono);font-size:12px;line-height:1.3;color:var(--muted)}
.stop-kind{margin-right:7px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
/* the word Study or Work sits on the line, next to the dot, like a label on a route map */
.stop-kind{position:absolute;left:19px;top:-3px;margin:0;padding:0 7px;background:var(--bg);font-size:11px;line-height:17px}
.plus{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .3s var(--ease),background .2s}
.plus svg{width:12px;height:12px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
.stop .plus{width:22px;height:22px;margin-top:2px}
.stop .plus svg{width:10px;height:10px}
.stop.is-open .plus{transform:rotate(45deg);background:var(--accent-tint)}
.stop .plus.go{transition:transform .25s var(--ease),background .2s}
a.stop-head:hover .plus.go{transform:translateY(2px);background:var(--accent-tint)}
/* the details: a dark callout under the station with a pointer to its plus, above whatever follows.
   site.js keeps it inside the path and sets --caret; the rules by column are the fallback without it. */
.stop-more{display:none;position:absolute;z-index:6;left:-6px;top:100%;width:min(340px,calc(100vw - 40px));margin-top:12px;padding:14px 16px 15px;border-radius:var(--r-m);background:var(--ink);color:var(--on-dark);box-shadow:0 4px 10px rgba(34,48,58,.18),0 24px 48px rgba(34,48,58,.26);animation:stop-in .18s var(--ease)}
.stop-more::before{content:"";position:absolute;top:-6px;left:var(--caret,24px);width:12px;height:12px;margin-left:-6px;border-radius:2px;background:var(--ink);transform:rotate(45deg)}
.stop-more::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.stop-more p{font-size:15.5px;line-height:1.5;color:var(--on-dark)}
.stop-go{display:inline-flex;align-items:center;gap:7px;min-height:36px;margin:6px 0 -6px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.02em;color:var(--accent-on-dark);text-underline-offset:4px}
.stop-go:hover{color:#fff}
.stop-go svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes stop-in{from{opacity:0;transform:translateY(-4px)}}
.stop:nth-child(8n+4) .stop-more,.stop:nth-child(8n+5) .stop-more{left:auto;right:0}
.stop.is-open .stop-more,html:not(.js) .stop:focus-within .stop-more{display:block}
@media (hover:hover) and (pointer:fine){
  .stop.has-more:hover .stop-more{display:block}
  /* hovering another station hides a pinned one for the moment, so two callouts never stack */
  .trail:has(.stop.has-more:hover) .stop.is-open:not(:hover) .stop-more{display:none}
}
html:not(.js) .trail-line{display:none}
html:not(.js) .stop{border-top:1px solid var(--line)}
@media (max-width:1020px) and (min-width:700px){
  .trail{--cols:3}
  .trail-stops{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stop:nth-child(n){grid-column:auto}
  .stop:nth-child(6n+1),.stop:nth-child(6n){grid-column:1}
  .stop:nth-child(6n+2),.stop:nth-child(6n+5){grid-column:2}
  .stop:nth-child(6n+3),.stop:nth-child(6n+4){grid-column:3}
  .stop:nth-child(n) .stop-more{left:-6px;right:auto}
  .stop:nth-child(6n+3) .stop-more,.stop:nth-child(6n+4) .stop-more{left:auto;right:0}
}
@media (max-width:699px){
  .trail{--cols:2;padding:4px 16px 0}
  .trail-stops{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .stop:nth-child(n){grid-column:auto}
  .stop:nth-child(4n+1),.stop:nth-child(4n){grid-column:1}
  .stop:nth-child(4n+2),.stop:nth-child(4n+3){grid-column:2}
  .stop-head{grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:4px 2px 6px 6px}
  .stop-head .badge{grid-column:1;grid-row:1}
  .stop-head .plus{grid-column:2;grid-row:1}
  .stop-head .stop-text{grid-column:1 / -1}
  .stop-org{font-size:15.5px}.stop-role{font-size:14.5px}
  .stop:nth-child(n) .stop-more{left:-6px;right:auto;width:min(300px,calc(100vw - 2 * var(--gutter) - 20px))}
  .stop:nth-child(4n+2) .stop-more,.stop:nth-child(4n+3) .stop-more{left:auto;right:-6px}
}

/* =========================================================
   CERTIFICATES AND AWARDS (only when work/certificates.json has entries with images)
   ========================================================= */
.certs{margin-top:clamp(28px,3.4vw,44px);scroll-margin-top:calc(var(--header-h) + 12px)}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(18px,2vw,26px)}
.cert{display:grid;grid-template-columns:80px minmax(0,1fr);gap:14px;align-items:center;height:100%;padding:10px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);color:inherit;text-decoration:none;cursor:zoom-in;transition:border-color .2s,background .2s,transform .2s}
.cert:hover{border-color:var(--ink);background:#fff;transform:translateY(-2px)}
.cert-pic{display:grid;place-items:center;width:80px;height:80px;border-radius:8px;background:var(--band);overflow:hidden}
.cert-pic img{display:block;max-width:86%;max-height:86%;width:auto;height:auto;background:#fff;box-shadow:0 1px 2px rgba(34,48,58,.12),0 6px 14px rgba(34,48,58,.14)}
.cert-t{display:block;font-family:var(--f-head);font-weight:600;font-size:16px;line-height:1.25;color:var(--ink)}
.cert-i{display:block;margin-top:2px;font-size:15px;line-height:1.4;color:var(--text)}
.cert-y{display:block;margin-top:4px;font-family:var(--f-mono);font-size:12.5px;color:var(--accent)}
.cert-n{display:block;margin-top:4px;font-family:var(--f-head);font-size:14px;line-height:1.35;color:var(--muted)}

/* =========================================================
   GALLERY: justified rows of large pictures (only when work/gallery.json has pictures)
   ========================================================= */
/* stepping through pictures in the enlarged view */
.lb-nav{display:flex;align-items:center;gap:8px;margin-right:8px}
.lb-nav .icon-btn{border-color:var(--on-dark);color:var(--on-dark)}
.lb-nav .icon-btn:hover{background:var(--on-dark);color:var(--ink)}
.lb-nav .icon-btn[disabled]{opacity:.35;background:transparent;color:var(--on-dark)}
.lb-count{font-family:var(--f-mono);font-size:13px;color:var(--on-dark-2);min-width:64px;text-align:center}

/* ---------- ymaplify showcase and Vistaio with real media ---------- */
.show-foot p b{white-space:nowrap}
.devices.no-phone .laptop{width:100%}
html:not(.js) [data-enlarge],html:not(.js) .show-bars{display:none}
.v-video video,.v-video img{display:block;width:100%;height:100%;object-fit:cover}
.v-media[data-media="image"] .v-video{display:block}
.v-wrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.v-cap{font-size:var(--fs-small);line-height:1.45;color:var(--text)}
.v-media[data-media="video"] .v-video .play-c,.v-media[data-media="video"] .v-video button{z-index:1}
.v-media.is-playing .v-video button{display:none}
/* the three start page screenshots, used while work/shots/ymaplify is empty */
.phones3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,24px);max-width:640px;margin:0 auto}
.phones3 .phone{position:relative;width:auto;right:auto;bottom:auto}
.phones3 .phone img{display:block;width:100%;height:auto;border-radius:clamp(10px,1.6vw,24px)}

/* ---------- Selected work ---------- */
.doc-note{font-family:var(--f-head);font-size:14.5px;line-height:1.4;color:var(--muted)}
.doc-flag{align-self:flex-start;font-family:var(--f-mono);font-size:12px;color:#7A5A12;background:#F8F1DF;border:1px solid #E6D8B0;border-radius:6px;padding:3px 8px}
.work-preview{margin-bottom:28px;max-width:60ch;padding:10px 14px;border-radius:var(--r-s);background:#F8F1DF;border:1px solid #E6D8B0;font-family:var(--f-head);font-size:15px;color:#7A5A12}
.sheet-2 .page img{transition:opacity .2s}
html:not(.js) .stack-cue{display:none}
.ov-tools .btn-ghost{font-size:15px}
@media (max-width:640px){.ov-title{flex-basis:100%}.ov-bar .wrap{gap:6px 12px}.reader-pages{padding:20px 10px 80px;gap:18px}}

/* ---------- Next: the contact block stands alone while the assistant is switched off ---------- */
.next-grid:not(.has-ask){grid-template-columns:minmax(0,1fr)}

/* =========================================================
   FIGURE REFERENCES: a small number in the text points to its figure
   ========================================================= */
.why-new{align-items:start}
.why-line{padding-left:14px;border-left:2px solid var(--accent);font-family:var(--f-head);font-weight:600;font-size:var(--fs-h4);line-height:1.22;letter-spacing:-.014em;color:var(--ink);text-wrap:balance}
.figref{font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--accent);text-decoration:none;white-space:nowrap;padding:2px 1px;border-radius:5px;vertical-align:.1em;transition:background .2s,color .2s}
.figref::before{content:"["}
.figref::after{content:"]"}
.figref:hover,.figref:focus-visible,.figref.is-on{background:var(--accent);color:#fff}
.fig{scroll-margin-top:calc(var(--header-h) + 20px)}
.fig .frame{outline:2px solid transparent;outline-offset:4px;transition:outline-color .3s}
.fig.is-ref .frame{outline-color:var(--accent)}
.figcap b{padding:2px 6px;margin:-2px -6px;border-radius:5px;white-space:nowrap;transition:background .3s,color .3s}
.fig.is-ref .figcap b{background:var(--accent);color:#fff}

/* =========================================================
   LOGOS: every station and both cards carry the same quiet plate.
   scripts/build_shots.py puts the file from assets/logos/ on it, or the initials while there is none.
   ========================================================= */
.badge.logo,.badge.drawn{width:64px;height:46px;border-radius:10px}
.badge.logo{background:#fff;border:1px solid var(--line);overflow:hidden}
.badge.logo img{display:block;width:calc(100% * var(--fill,.86));height:calc(100% * var(--fill,.86));object-fit:contain}
.stop .badge{width:56px;height:40px;border-radius:9px;font-size:12px}
/* a station without a logo file may carry a small drawing of its own instead of initials */
.badge.art{background:#fff;border:1px solid var(--line)}
.badge.art::after{display:none}
.badge.art svg{width:62%;height:76%;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.badge.art svg .a{stroke:var(--accent)}

/* =========================================================
   ALL COURSES (Zurich card): closed by default
   ========================================================= */
/* opened, the Zurich card takes about two thirds of the row, so that the list stays short */
@media (min-width:1021px){.cards2:has(.courses[open]){grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);align-items:start}}
.cards2:has(.courses[open]){align-items:start}
.highlights{margin-top:2px}
.hl-label{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.45;color:var(--accent);padding-bottom:7px;border-bottom:1px solid var(--line)}
.highlights ul{columns:2;column-gap:24px}
.highlights li{break-inside:avoid;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line-soft);font-size:15px;line-height:1.35;color:var(--text)}
.hl-g{font-family:var(--f-mono);font-weight:500;font-size:12.5px;color:var(--ink)}
.courses{margin-top:-4px}
.transcript{margin-top:-8px;font-family:var(--f-head);font-size:14px;line-height:1.3}
.transcript a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration-color:var(--line);text-underline-offset:4px}
.transcript a:hover{color:var(--accent-deep);text-decoration-color:currentColor}
@media (max-width:1020px){.highlights ul{columns:1}}
.courses > summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:46px;cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line-soft)}
.courses > summary::-webkit-details-marker{display:none}
.courses > summary:hover{color:var(--accent-deep)}
.courses .c-count{margin-left:auto;font-family:var(--f-mono);font-weight:400;font-size:12px;color:var(--muted);text-align:right}
.courses .pm{flex:none;width:14px;height:14px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;transition:transform .3s var(--ease)}
.courses[open] .pm{transform:rotate(45deg)}
.courses .entry-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;padding-top:14px}
.c-head{grid-column:1 / -1;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.sem h5{padding-bottom:6px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.sem li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line-soft);font-size:15px;line-height:1.35;color:var(--text)}
.courses.with-grades .sem li{grid-template-columns:minmax(0,1fr) auto 40px}
.c-e,.c-g{font-family:var(--f-mono);font-size:12px;color:var(--muted);white-space:nowrap;text-align:right}
.c-g{color:var(--ink);font-weight:500}
@media (max-width:1020px){.courses .entry-body{grid-template-columns:minmax(0,1fr)}}

/* =========================================================
   WINNING AT STAR WARS: a slim card that opens in place
   ========================================================= */
.stars{margin-top:clamp(28px,3.4vw,44px);scroll-margin-top:calc(var(--header-h) + 14px)}
.stars-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px clamp(20px,3.4vw,48px);align-items:center;padding:clamp(16px,1.9vw,24px) clamp(16px,2.2vw,28px);background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-l)}
.stars-text{display:flex;flex-direction:column;gap:8px;max-width:66ch}
.stars-text .h4{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.pl-teaser{display:flex;align-items:center;gap:16px}
.pl-thumb{flex:none;display:block;width:clamp(150px,16vw,220px);aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--ink);background:var(--dark-3);box-shadow:var(--sh-sheet);transition:transform .2s var(--ease)}
.pl-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0}
.pl-thumb:hover{transform:translateY(-2px)}
.pl-acts{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pl-acts .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.stars.is-open .pl-try svg{display:none}
.pl-note{max-width:19ch;font-family:var(--f-mono);font-size:12px;line-height:1.4;color:var(--muted)}
.pl-teaser .cta-plain{color:var(--ink)}
.pl-teaser .cta-plain:hover{color:var(--accent-deep)}
/* the opened frame */
.planner{margin-top:14px;display:flex;flex-direction:column;gap:clamp(14px,1.8vw,20px)}
.planner[hidden]{display:none}
.planner.is-in{animation:plin .34s var(--ease) both}
@keyframes plin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.browser-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.browser-tools .pl-close{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.browser-tools .pl-close:hover{background:#fff}
.browser-tools .pl-close svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pl-live{display:block}
.pl-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--f-mono);font-size:13px;color:var(--on-dark-2)}
.try-this{display:flex;flex-direction:column;gap:10px}
@media (min-width:700px) and (max-width:1020px){.pl-teaser{flex-direction:column;align-items:flex-start;gap:12px}.pl-note{max-width:none}}
@media (max-width:699px){
  .stars-card{grid-template-columns:minmax(0,1fr)}
  .pl-teaser{flex-wrap:wrap}
  .pl-thumb{width:clamp(110px,38vw,220px)}
}
@media (max-width:860px){
  .browser-view{aspect-ratio:4/5}
}

/* =========================================================
   YMAPLIFY SHOWCASE: arrows at the edges, bars that fill
   ========================================================= */
.show-arrow{position:absolute;z-index:4;top:calc(50% - 22px);width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);display:none;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-sheet);transition:background .2s,color .2s,transform .12s}
.js .show-arrow{display:inline-flex}
.show-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.show-arrow:hover{background:var(--ink);color:var(--on-dark)}}
.show-arrow:active{transform:scale(.94)}
.show-arrow.prev{left:calc(2.83% - 22px)}
.show-arrow.next{right:-22px}
.devices.no-phone .show-arrow.prev{left:-22px}
@media (max-width:759px){.show-arrow.prev,.devices.no-phone .show-arrow.prev{left:0}.show-arrow.next{right:0}}
.show-bars i{position:relative;overflow:hidden;width:56px;height:4px}
.show-bars i::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.show-bars i.is-done::after,.show-bars i.is-on::after{transform:scaleX(1)}
.showcase.is-run .show-bars i.is-on::after{animation:barfill 6s linear both}
@keyframes barfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* =========================================================
   VISTAIO: one set in a browser frame (the model picture, then pictures of the old website)
   It changes like the ymaplify screens: arrows, bars, a click, a swipe, the arrow keys, time.
   The page never loads the old website; at most it links to it (see scripts/build_shots.py).
   ========================================================= */
.v-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.v-logo{display:block;width:auto;height:22px}
@media (max-width:699px){.v-logo{height:16px}}
.v-quote{margin:2px 0;padding-left:14px;border-left:2px solid var(--accent)}
.v-quote,.v-quote p{font-family:var(--f-head);font-weight:500;font-size:clamp(17px,1.3vw,19px);line-height:1.36;color:var(--ink)}
.v-quote footer{margin-top:5px;font-family:var(--f-mono);font-size:12px;line-height:1.4;color:var(--muted)}
.v-set{gap:14px;outline-offset:8px;border-radius:var(--r-l)}
.v-stage{position:relative}
.v-browser .browser-bar{min-height:44px;padding:6px 16px}
.v-browser .browser-view{aspect-ratio:16/10}
.v-browser .shot{object-position:50% 0}
.v-browser .shot:first-child{object-position:50% 50%}
.v-set .show-arrow.prev{left:-22px}
.v-set .show-arrow.next{right:-22px}
@media (max-width:759px){.v-set .show-arrow.prev{left:-12px}.v-set .show-arrow.next{right:-12px}}
.v-set.is-run .show-bars i.is-on::after{animation:barfill 6s linear both}
.v-link{margin-top:-4px}
.v-link a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:var(--f-head);font-size:15px;color:var(--muted);text-underline-offset:4px}
.v-link a:hover{color:var(--accent-deep)}
.v-link svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.v-link a{color:var(--accent-deep);font-weight:600}
.v-link span{display:block;max-width:52ch;margin-top:-6px;font-family:var(--f-head);font-size:14.5px;line-height:1.45;color:var(--muted)}

/* =========================================================
   SELECTED WORK: every pair is one unit
   Default: the stacks side by side, each with its counter and "Open large" under it and its text below.
   From 1200 px: the two stacks, then one overview column. What both documents share stands once at
   its head. work.js checks that the column ends above the bottom of the stacks; a row that fails
   gets .is-tall and falls back to the default.
   ========================================================= */
.docs{display:flex;flex-direction:column;gap:clamp(30px,3.6vw,48px)}
.doc-row{display:grid;gap:clamp(18px,2.2vw,28px);align-items:start}
.doc-row.pl{grid-template-columns:minmax(0,1fr) minmax(0,var(--deck,2.45fr))}
.doc-row.ll{grid-template-columns:repeat(2,minmax(0,1fr))}
.doc-row.one{grid-template-columns:minmax(0,1fr)}
.doc-row.one .doc.s169{max-width:560px}
.doc-row.one .doc.a4 .stack,.doc-row.ll .doc.a4 .stack{max-width:250px}
.pair-head{display:none}
.stack{container-type:inline-size}
.stack-ctrl{display:none;flex-wrap:wrap;align-items:center;gap:0 2px;margin-top:2px}
.js .stack-ctrl{display:flex}
.stack-ctrl .icon-btn{border-color:var(--line)}
.stack-ctrl .icon-btn:hover{border-color:var(--ink)}
.stack-count{min-width:92px;text-align:center;font-family:var(--f-mono);font-size:12px;color:var(--ink);white-space:nowrap}
.open-quiet{margin-left:auto;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 6px;border:0;border-radius:8px;background:none;font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--accent-deep);white-space:nowrap;cursor:pointer;transition:color .2s,background .2s}
.open-quiet[hidden]{display:none}
.open-quiet svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.open-quiet:hover{color:var(--ink);background:var(--band)}
@container (max-width:310px){.open-quiet{margin-left:0;flex-basis:100%;justify-content:flex-start;margin-top:-4px}}
/* a paper next to a deck: both keep the same two lines under the stack, so the pair lines up */
@media (min-width:700px){.doc-row.pl .open-quiet{margin-left:0;flex-basis:100%;justify-content:flex-start;margin-top:-4px}}
.doc-meta{display:flex;flex-direction:column;gap:6px}
@media (min-width:1200px){
  .doc-row:not(.is-tall){--over:clamp(300px,24vw,340px);column-gap:clamp(22px,2.2vw,30px);row-gap:0;grid-template-rows:auto auto 1fr}
  .doc-row.pl:not(.is-tall){grid-template-columns:minmax(0,1fr) minmax(0,var(--deck,2.45fr)) var(--over)}
  .doc-row.ll:not(.is-tall){grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--over)}
  .doc-row.one:not(.is-tall){grid-template-columns:minmax(0,2.3fr) minmax(0,2.6fr)}
  .doc-row.one:not(.is-tall):has(.doc.a4){grid-template-columns:minmax(0,1fr) minmax(0,3.9fr)}
  .doc-row:not(.is-tall) .doc{display:contents}
  .doc-row:not(.is-tall) .stack{grid-row:1 / -1;max-width:none !important}
  .doc-row:not(.is-tall) .doc:nth-of-type(1) .stack{grid-column:1}
  .doc-row:not(.is-tall) .doc:nth-of-type(2) .stack{grid-column:2}
  .doc-row:not(.is-tall) .pair-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;grid-column:-2;grid-row:1;padding-bottom:11px;margin-bottom:12px;border-bottom:1.5px solid var(--ink)}
  .doc-row:not(.is-tall) .doc-meta{grid-column:-2;gap:5px}
  .doc-row:not(.is-tall) .doc:nth-of-type(1) .doc-meta{grid-row:2}
  .doc-row:not(.is-tall) .doc:nth-of-type(2) .doc-meta{grid-row:3;align-self:start;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
  .doc-row.has-head:not(.is-tall) .doc-meta .doc-ctx,.doc-row.has-head:not(.is-tall) .doc-meta .credit{display:none}
  .doc-row:not(.is-tall) .doc-meta .h5{font-size:17.5px;line-height:1.24}
}

/* =========================================================
   MORE: two closed sections side by side ("Other things I built", photos)
   ========================================================= */
.more{padding:clamp(28px,3.2vw,44px) 0;border-bottom:1px solid var(--line-soft)}
.more:not(:has(.more-item)){display:none}
.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px clamp(20px,3vw,44px);align-items:start}
.more-item{min-width:0;scroll-margin-top:calc(var(--header-h) + 14px)}
.more-item:has(details[open]){grid-column:1 / -1}
.more-item .whyhere{margin-bottom:16px}
.more-item details > summary{list-style:none;display:inline-flex}
@media (min-width:420px){.more-item .pill-sum{white-space:nowrap}}
@media (max-width:419px){.more-item .pill-sum{padding-block:8px;line-height:1.25;text-align:left}}
.more-item details > summary::-webkit-details-marker{display:none}
.more-item details[open] .pm{transform:rotate(45deg)}
/* photos: columns of equal width, every picture in its own format, title and place below */
.g-cols{columns:4;column-gap:18px;padding-top:26px}
.g-item{break-inside:avoid;margin-bottom:20px}
.g-item a{display:block;aspect-ratio:var(--r);border-radius:var(--r-m);overflow:hidden;background:var(--band);cursor:zoom-in}
.g-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.g-item a:hover img{transform:scale(1.025)}
.g-cap{display:flex;flex-direction:column;gap:1px;margin-top:8px;font-family:var(--f-head);font-size:15px;line-height:1.35}
.g-cap b{font-weight:600;color:var(--ink)}
.g-cap span{color:var(--muted)}
@media (max-width:1099px){.g-cols{columns:3}}
/* other things I built */
.x-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:26px}
@media (max-width:1099px){.x-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.x-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.x-item{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden;scroll-margin-top:calc(var(--header-h) + 14px)}
.x-pic{position:relative;display:block;aspect-ratio:16/10;background:var(--band);border-bottom:1px solid var(--line);overflow:hidden}
a.x-pic{cursor:zoom-in}
a.x-pic.x-film{cursor:pointer}
.x-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .5s var(--ease)}
.x-film img{object-position:50% 50%}
a.x-pic:hover img{transform:scale(1.025)}
.x-n{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:var(--r-pill);background:rgba(34,48,58,.82);color:#fff;font-family:var(--f-mono);font-size:11.5px}
.x-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:1.5px solid #fff;background:rgba(34,48,58,.6);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.x-film:hover .x-play{transform:translate(-50%,-50%) scale(1.06);background:rgba(34,48,58,.8)}
.x-play svg{width:20px;height:20px;margin-left:3px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.x-draw{display:grid;place-items:center;background:var(--paper)}
.x-draw svg{width:66%}
.x-text{flex:1;display:flex;flex-direction:column;gap:5px;padding:13px 16px 15px}
.x-y{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--accent)}
.x-text .h5{font-size:clamp(17.5px,1.3vw,19px);line-height:1.22}
.x-text p{font-size:15.5px;line-height:1.45;color:var(--text)}
.x-text .x-cap{font-family:var(--f-mono);font-size:12px;line-height:1.4;color:var(--muted)}
.x-acts{margin-top:auto;padding-top:2px;display:flex;flex-wrap:wrap;gap:0 16px}
.x-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--accent-deep);text-underline-offset:4px}
.x-link svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.x-text:has(.x-acts){padding-bottom:6px}
/* the detail view of an entry with a film: an overlay in the colours of the page */
.x-detail{background:var(--bg)}
.xd-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(22px,3vw,44px) clamp(24px,4vw,56px);align-items:start;padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(40px,6vw,72px)}
.xd-film{display:flex;flex-direction:column;gap:10px;min-width:0}
.xd-video{position:relative;aspect-ratio:5/4;border-radius:var(--r-l);overflow:hidden;background:var(--dark-3);border:1px solid var(--ink);box-shadow:var(--sh-device)}
.xd-video video{display:block;width:100%;height:100%;object-fit:contain;background:var(--dark-3)}
.xd-play{position:absolute;inset:0 0 56px 0;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.xd-play span{width:84px;height:84px;border-radius:50%;border:1.5px solid #fff;background:rgba(34,48,58,.6);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.xd-play:hover span{transform:scale(1.06);background:rgba(34,48,58,.8)}
.xd-play svg{width:28px;height:28px;margin-left:4px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.xd-video.is-playing .xd-play,html:not(.js) .xd-play{display:none}
.xd-credits{display:flex;flex-direction:column;gap:2px;font-family:var(--f-mono);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.xd-credits li:first-child{color:var(--ink)}
.xd-text{display:flex;flex-direction:column;gap:12px;min-width:0}
.xd-text .lead{color:var(--ink)}
.xd-stills{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding-top:clamp(18px,2.4vw,28px);border-top:1.5px solid var(--ink)}
.xd-stills figure{display:flex;flex-direction:column;gap:8px}
.xd-stills img{display:block;width:100%;height:auto;border-radius:var(--r-s);border:1px solid var(--line);background:var(--band)}
.xd-stills figcaption{display:flex;gap:8px;align-items:baseline;font-family:var(--f-head);font-size:14.5px;line-height:1.35;color:var(--text)}
.xd-stills figcaption b{font-family:var(--f-mono);font-weight:500;font-size:12px;color:var(--accent)}
@media (max-width:1099px){.xd-stills{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.xd-body{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.xd-stills{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}}

/* =========================================================
   PHONES: sideways instead of one long column
   Sets of similar things are rows that swipe: the next one peeks in at the right, site.js adds the
   marks below and makes the row reachable by keyboard. Small cards stand two by two.
   ========================================================= */
.swipe-marks{display:none}
@media (max-width:699px){
  .swipe{display:flex !important;flex-flow:row nowrap !important;align-items:stretch;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1) !important;padding-inline:var(--gutter);padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:none}
  .swipe::-webkit-scrollbar{display:none}
  .swipe > *{flex:0 0 84%;min-width:0;scroll-snap-align:start}
  .swipe:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-m)}
  .swipe-marks{display:flex;align-items:center;gap:6px;min-height:24px;margin-top:12px}
  .swipe-marks i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line);transition:width .25s var(--ease),background .25s}
  .swipe-marks i.is-on{width:22px;border-radius:4px;background:var(--accent)}
  .swipe-marks .track{flex:0 0 96px;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
  .swipe-marks .track b{display:block;height:100%;width:100%;border-radius:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(.1)}
  .swipe-marks .count{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-left:4px}
  .swipe-marks .go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.04em;color:var(--accent);transition:opacity .4s}
  .swipe-marks .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .swipe-marks.is-used .go{opacity:0}
  .dark .swipe-marks i,.dark .swipe-marks .track{background:var(--dark-line-solid)}
  .dark .swipe-marks i.is-on,.dark .swipe-marks .track b{background:var(--accent-on-dark)}
  .dark .swipe-marks .go{color:var(--accent-on-dark)}
  .dark .swipe-marks .count{color:var(--on-dark-2)}

  /* the two places */
  .cards2.swipe > *{flex-basis:86%}
  /* the four steps with AI: cards in a row, the line is not needed */
  .flow .flow-line,.test-flow .test-line{display:none !important}
  .flow ol.swipe .step{display:flex;flex-direction:column;gap:9px;padding:16px;border:1px solid var(--dark-line-solid);border-radius:var(--r-m);background:var(--dark-3)}
  .flow ol.swipe .step-icon{width:56px;height:56px}
  /* the steps swipe inside the frame of the logic check, not out to the screen edges */
  .flow{--fp:14px;border-radius:var(--r-l)}
  .flow .swipe{margin-inline:0 !important;padding-inline:0;scroll-padding-inline:0}
  .flow .swipe > *{flex-basis:86%}
  .models span + span::before{display:none}
  .gate{align-items:flex-start;border-radius:0 0 calc(var(--r-l) - 2px) calc(var(--r-l) - 2px)}
  .gate-icon{width:44px;height:44px}
  /* ymaplify in three points */
  .cols3.swipe{margin-top:18px}
  /* the test in four steps */
  .test-steps.swipe{gap:12px}
  .test-steps.swipe li{display:flex;flex-direction:column;gap:7px;padding:14px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface)}
  /* documents: one stack per slide; a swipe moves the row, the arrows and a tap turn the pages */
  .docs.swipe{align-items:flex-start;gap:16px}
  .docs.swipe .doc-row{display:contents}
  .docs.swipe .doc{flex:0 0 82%;scroll-snap-align:start}
  .docs.swipe .doc.a4{flex-basis:64%}
  .docs.swipe .stack-face{touch-action:auto}
  /* photos: one height, every picture in its own format */
  .g-cols.swipe{columns:auto;align-items:flex-start;padding-top:20px}
  .g-cols.swipe .g-item{flex:0 0 auto;width:clamp(140px,calc(230px * var(--r)),76vw);margin:0}
  .x-grid.swipe{padding-top:20px}
  .x-grid.swipe > *{flex-basis:74%}

  /* two by two */
  .triptych:has(> .fig:nth-child(4)){gap:18px 12px}
  .triptych .frame-state,.triptych .frame-hint{display:none}
  .triptych .figcap{flex-direction:column;gap:5px;font-size:14.5px;line-height:1.4}
  .triptych .figcap b{align-self:flex-start}
  .triptych .frame-inset span{display:none}
  .cert-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cert{grid-template-columns:minmax(0,1fr);align-content:start;gap:10px;padding:10px}
  .cert-pic{width:100%;height:auto;aspect-ratio:4/3}
  .cert-t{font-size:15px}.cert-i{font-size:14px}
  .uses li{flex-direction:column;align-items:flex-start;gap:8px;font-size:15px}
  .principle-pts li{gap:8px}
  .courses .c-count{display:none}
}

@media print{
  .top,.ask-fab,.ask,.overlay,.stack-ctrl,.browser-tools,.show-bars,[data-enlarge]{display:none !important}
  .dark,.teal{background:#fff !important;color:#000 !important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
}

/* Editable email handoff from transcript requests and unanswered professional questions. */
.contact-draft{grid-column:1 / -1;max-width:700px;border:1px solid rgba(255,255,255,.4);border-radius:var(--r-m);padding:24px;color:#fff}
.contact-draft[hidden]{display:none}
.contact-draft p{font-size:16px;margin:12px 0}
.contact-draft .draft-hint{font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--accent-on-dark);margin-top:-4px}
.contact-draft label{display:block;font-family:var(--f-head);margin:12px 0 6px}
.contact-draft input,.contact-draft textarea{display:block;width:100%;box-sizing:border-box;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit}
.contact-draft textarea{resize:vertical;margin-bottom:16px}
.contact-draft button{margin:4px 6px 0 0}
/* Keep offscreen swipe cards from enlarging the mobile layout viewport. */
@media (max-width:699px){.swipe{contain:paint}}
.contact-draft .h5{color:#fff}
/* Spacious native dialogs keep the original content and keyboard navigation. */
.course-modal,.contact-modal,.planner-modal{color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:28px;background:var(--paper);width:min(960px,90vw);max-width:none;max-height:88dvh;overflow:auto;box-shadow:0 24px 100px #15242b55}
dialog::backdrop{background:#14242bc2;backdrop-filter:blur(5px)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.modal-head h3{font-family:var(--f-head);font-size:32px;margin:8px 0}
.course-modal .entry-body{display:grid;grid-template-columns:1fr 1fr;gap:28px}.course-modal .transcript{grid-column:1/-1;padding-top:16px;border-top:1px solid var(--line)}
.entry-body .c-note{grid-column:1/-1;font-size:15px;line-height:1.5;color:var(--text)}.course-modal .c-note{font-size:17px;max-width:40em;margin-top:-12px}
.course-modal .sem h5{font:600 18px var(--f-head);margin-bottom:12px}
/* ROUND12: NTU course modal without ECTS */
.course-modal-ntu{width:min(720px,90vw)}
.course-modal-ntu .entry-body{grid-template-columns:1fr 1fr;gap:20px 32px}
.course-modal .sem li:not(:has(.c-e)){grid-template-columns:minmax(0,1fr);gap:0}
.course-modal .entry-body:has(.c-note){align-content:start}
.course-modal .sem li .c-n{font-family:var(--f-body);font-size:16.5px;line-height:1.35;color:var(--ink)}
.course-modal .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.course-modal .modal-head .label{display:block;margin-bottom:6px}
.course-modal .modal-head h3{font:650 clamp(28px,3vw,36px)/1.1 var(--f-head);letter-spacing:-.02em;margin:0}
.course-modal .sem ul{list-style:none;padding:0}.course-modal .sem li{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:16px}.course-modal .c-e{font:12px var(--f-mono);color:var(--muted);align-self:center}
.courses > summary{min-height:54px;gap:20px}.courses > summary:after{content:'↗';font-size:22px;color:var(--accent)}
.contact-modal{width:min(650px,90vw);background:var(--dark-3);color:white}.contact-modal .contact-draft{border:0;padding:0;max-width:none}
.planner-modal{width:80vw;height:84dvh;padding:0;background:var(--dark-3);border-radius:16px}.planner-modal .planner{margin:0;padding:16px;gap:16px}.planner-modal .browser-view{aspect-ratio:auto;height:calc(84dvh - 150px);min-height:400px}.planner-modal .try-this{display:none}.planner-modal .browser{width:100%;max-width:none}.planner-modal .pl-live iframe{width:100%;height:100%;border:0}
.pl-thumb{width:clamp(260px,30vw,440px)}.stars-card{grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);padding:28px;gap:32px}.pl-teaser{width:100%;flex-direction:column;align-items:stretch;gap:18px}.pl-thumb{width:100%}
.doc-meta{gap:14px;padding-top:14px}.doc-meta .pager{gap:16px}.open-quiet{padding:12px 0;min-height:44px}.doc-row.pl .open-quiet{margin-top:8px}.doc-row:not(.is-tall) .doc:nth-of-type(2) .doc-meta{margin-top:24px;padding-top:24px}
.mobile-details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.mobile-details summary{cursor:pointer;font:600 15px var(--f-head);min-height:36px;color:var(--accent-deep)}.dark .mobile-details{border-color:var(--dark-line-solid)}.dark .mobile-details summary{color:var(--accent-on-dark)}.mobile-details p{margin-top:12px}
@media(max-width:699px){
 .sec{padding-block:44px}.part-art{width:68px}.whyhere{font-size:14px}.whyhere b{display:none}.body{font-size:16px;line-height:1.55}.hero{padding-bottom:36px}.hero .h1{font-size:clamp(38px,10vw,58px)}
 .cards2.swipe,.flow ol.swipe,.cols3.swipe,.test-steps.swipe,.x-grid.swipe,.g-cols.swipe{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin-inline:0!important;padding-inline:0;gap:12px;contain:none;scroll-snap-type:none}
 .cards2.swipe > *,.flow ol.swipe > *,.cols3.swipe > *,.test-steps.swipe > *,.x-grid.swipe > *,.g-cols.swipe > *{width:auto;min-width:0;max-width:100%;flex-basis:auto}
 .cards2 .card{padding:14px}.cards2 .card-top{flex-wrap:wrap;gap:10px}.cards2 .label{font-size:10px;line-height:1.5}.cards2 .h4{font-size:22px;line-height:1.15}.cards2 .body,.cards2 .ticks{font-size:14px}.cards2 .ticks li{padding-block:10px}.cards2 .c-count{display:none}.cards2 .courses summary{font-size:14px;gap:8px}.cards2 .transcript a{font-size:14px;line-height:1.4;display:block;padding-block:8px}
 .flow ol.swipe .step,.test-steps.swipe li{padding:14px}.compact-card > h5{display:none}.flow .step-icon,.test-steps .test-icon{width:42px;height:42px}.compact-card .mobile-details{margin-top:0;border:0;padding-top:0}.compact-card .mobile-details summary{line-height:1.35}.compact-card .mobile-details p{font-size:14px;line-height:1.5}
 .x-card .x-text{padding:12px}.x-card .x-text p{font-size:14px}.x-card .h5{font-size:18px}.x-grid{align-items:start}.g-cols.swipe .g-item{width:100%;margin:0}.g-cols .g-item img{max-height:230px;object-fit:cover}
 .stars-card{grid-template-columns:1fr;padding:18px;gap:18px}.stars-text .body{font-size:15px}.pl-thumb{width:100%}.pl-try{display:inline-flex!important}.pl-open{display:none!important}
 .planner-modal{width:calc(100vw - 16px);height:92dvh;max-height:92dvh;border-radius:12px}.planner-modal .planner{padding:8px}.planner-modal .browser-view{height:calc(92dvh - 165px);min-height:300px}.browser-tools{gap:8px}.browser-tools .btn{font-size:12px;padding:8px 12px;min-height:40px}.browser-title{font-size:12px}
 .course-modal,.contact-modal{width:calc(100vw - 24px);padding:20px;max-height:90dvh;border-radius:14px}.course-modal .entry-body{grid-template-columns:1fr}.course-modal .sem li{font-size:15px}.modal-head{margin-bottom:16px}.modal-head h3{font-size:26px}
 .ask{top:auto;bottom:8px;right:8px;width:calc(100vw - 16px);height:min(700px,88dvh);border:1px solid var(--line);border-radius:18px;overflow:hidden}.ask .ask-intro{font-size:14px;padding:14px}.ask .ask-head{padding:14px}.ask input{font-size:16px}.ask .msg-a,.ask .msg-u{font-size:15px}.ask .icon-btn{width:42px;height:42px}
}
.stack-ctrl{gap:14px 12px;margin-top:20px;padding-top:10px}.stack-ctrl .open-quiet{margin-top:0!important;padding:12px 8px}.stack-count{min-width:104px}.stack-ctrl .icon-btn{width:42px;height:42px}
@media(max-width:699px){.principle-art{max-width:170px;justify-self:end}.principle-s{font-size:16px}.principle{padding:20px;gap:16px}.principle-h{font-size:28px}.triptych{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.triptych figure:first-child{grid-column:auto}.triptych .figcap{font-size:13px}.cards2{align-items:start}.cards2 .card{height:auto}.cols3 .col{padding:12px}.ask .ask-note{font-size:12px;line-height:1.4;padding:10px 14px}.ask-log{padding:14px;gap:14px}.ask-note{flex-shrink:0}.ask-log{min-height:0}.stars .whyhere{font-size:13px}.stars .label{font-size:10px}}

@media(max-width:699px){html:not(.js) .pl-try{display:none!important}html:not(.js) .pl-open{display:inline-flex!important}}
@media(max-width:699px){.sec .lead{font-size:17px;line-height:1.55}.h3{font-size:28px;line-height:1.15}.why-head{gap:16px}.card-top .badge{width:54px;height:40px}.cards2 .h4{font-size:20px}.cards2 .body{font-size:13px}.cards2 .ticks{font-size:13px}.stars-text .h4{font-size:23px}.principle-art{width:150px}.showcase .phone{max-width:230px}.sec .whyhere{line-height:1.45}}

/* Contents uses the free page margin, never changing the content width. */
html.has-outline .part-toc{display:none}
.outline{position:fixed;z-index:90;font-family:var(--f-head)}
.outline-head{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:12px}
.outline-list{list-style:none;margin:0;padding:0}
.outline-list a{display:flex;gap:8px;padding:5px 0;font-size:12px;line-height:1.4;color:var(--muted);text-decoration:none}
.outline-num{flex:none;width:24px;font-variant-numeric:tabular-nums;color:var(--muted)}
.outline-list .ol-l1{margin-top:12px}
.outline-list .ol-l1 > a{font-weight:600;color:var(--ink)}
.outline-list a.is-active,.outline-list a:hover{color:var(--accent-deep)}
.outline-list a.is-active{font-weight:600}
.ol-target:focus{outline:none}
 .outline{z-index:380;left:8px;bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px;opacity:0;pointer-events:none;transition:opacity .2s}
 .outline.is-visible,.outline.is-open,.outline:focus-within{opacity:1;pointer-events:auto}
 .outline-toggle{display:flex;align-items:center;gap:7px;padding:8px 12px;min-height:44px;background:var(--paper);border:1px solid var(--line);border-radius:24px;color:var(--ink);font:500 12px var(--f-head);box-shadow:var(--sh-sheet);cursor:pointer}
 .outline-toggle svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:1.6}
 .outline-now,.outline-chev{display:none}
 .outline-toggle::after{content:'Contents'}
 .outline-panel{display:none;width:min(310px,calc(100vw - 16px));max-height:65dvh;overflow:auto;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lift)}
 .outline.is-open .outline-panel{display:block}
 .outline-list a{padding-block:8px;font-size:13px}
 @media(prefers-reduced-motion:reduce){.outline{transition:none}}
@media print{.outline{display:none}html.has-outline .part-toc{display:flex}}

/* ROUND12: selected work paper/deck */
.work article[data-turn="off"] .stack-ctrl .pager,
.work article.doc-paper .stack-ctrl .pager,
.work article[data-turn="off"] .stack-ctrl .page-count {display:none !important}
.kind-badge{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep);border:1px solid var(--line);border-radius:999px;padding:4px 8px;margin-bottom:8px}
.work-built{margin-top:48px;padding-top:28px;border-top:1px solid var(--line-soft)}
.work-built .more-item,.work-built details.more-pill{display:block}
.work-built details[open] > summary{display:none}

/* Feedback pass: compact hierarchy, shared project container and sentence evidence. */
.hero h1{font-size:clamp(44px,5.4vw,76px);line-height:1.05;max-width:12em}
.hero-focus{font:500 clamp(20px,2vw,28px)/1.4 var(--f-head);max-width:24em;color:var(--ink-2);text-wrap:pretty}
.hero-name{font-size:16px;color:var(--muted);margin-top:0}
.principle{margin-top:24px;padding:22px 26px;gap:18px 28px;grid-template-columns:minmax(0,1fr) 160px;border-radius:18px}
.principle .label{display:none}
.principle-h{font-size:clamp(24px,2.6vw,34px);line-height:1.15}
.principle-h em{color:inherit}
.principle-s{margin-top:10px;font-size:16px;max-width:44em}
.principle-art{max-width:160px}
.principle-pts{gap:18px;padding-top:16px}
.principle-pts li{gap:6px}.principle-pts svg{width:28px}
.principle-pts p{font-size:14px}.principle-close{display:none}
.flow-head{margin-top:26px;gap:8px}
.flow{margin-top:18px}.step{gap:8px}.step-icon svg{max-width:66px}
.work-built{margin-top:40px;padding-top:28px}
.work-built .more-item{margin:0;padding:0;border:0}
.work-built .h4{margin-bottom:10px}.work-built .pill-sum{margin-top:18px}
.work-built details[open] > summary{display:flex}
.ask{width:min(480px,100vw)}
.ask-note{padding:12px 18px;font-size:12.5px;line-height:1.5}
.ask-details{margin-top:5px}.ask-details summary{cursor:pointer;font-weight:600}.ask-details p{margin-top:6px}
.ask-empty svg{width:68px}.ask-empty p{font:500 18px/1.45 var(--f-head)}
.ask-empty .ask-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ask .q-chip{border:1px solid var(--line);border-radius:12px;min-height:60px;padding:12px;font-size:13px;line-height:1.4;background:var(--paper)}
.msg-a p{font-size:16px;line-height:1.65}
.msg-a .msg-src{display:none}
.claim{position:relative;cursor:pointer;text-decoration-line:underline;text-underline-offset:4px;text-decoration-thickness:1px;outline-offset:4px}
.claim-source{text-decoration-color:var(--accent);text-decoration-style:solid}
.claim-interpreted{text-decoration-color:#986D46;text-decoration-style:dotted}
.claim:focus-visible{outline:2px solid var(--accent)}
.claim-tip{position:fixed;z-index:480;max-width:min(360px,calc(100vw - 32px));padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:var(--sh-panel);font:14px/1.5 var(--f-head)}
.claim-tip .claim-label{display:block;font-size:11px;font-weight:600;color:var(--accent);margin-bottom:6px}
.claim-tip blockquote{margin:0}.claim-tip p{margin-top:6px;font-size:12px;color:var(--muted)}
@media(max-width:699px){
 .principle{grid-template-columns:1fr;padding:18px}.principle-art{display:none}.principle-pts{gap:14px}
 .hero-focus{font-size:20px}.ask{width:calc(100vw - 16px)}.ask-empty .ask-chips{grid-template-columns:1fr 1fr}
}


.doc[data-turn="off"] .stack-count,.doc[data-turn="off"] [data-dir]{display:none}

.fab-short{display:none}
@media(max-width:959px){.hero-mobile{order:0}.hero h1{order:1}.hero-focus{order:2}.hero-name{order:3}.hero .avail{order:4}.hero .actions{order:5}}
@media(max-width:640px){
 .outline-now{display:none}.outline-toggle::after{content:'Contents'}
 .fab-long{display:none}.fab-short{display:inline}.ask-fab{font-size:14px;padding:0 14px 0 10px;min-height:46px}.ask-fab svg{width:28px}
 .flow .step-why{margin-top:12px}.flow .step-why span{font-size:13px}
 .flow .step .step-icon{width:42px;height:42px}
}

.fab-long{display:none}.fab-short{display:inline}.ask-fab{font-size:14px;padding:0 14px 0 10px;min-height:48px}.ask-fab svg{width:28px}
/* Fine contents in the free desktop margin, never a layout column. */
@media(min-width:1480px){
 .outline{left:8px;bottom:auto;top:calc(var(--header-h) + 24px);width:min(156px,calc((100vw - 1128px)/2 - 24px));gap:0}
 .outline-toggle{display:none}
 .outline-panel{display:block;width:100%;max-height:calc(100dvh - 120px);padding:0 4px;background:transparent;border:0;border-radius:0;box-shadow:none;scrollbar-width:none}
 .outline-head{font-size:10px;margin-bottom:8px;font-weight:500}
 .outline-list a{font-size:10px;gap:4px;line-height:1.35;padding-block:4px}
 .outline-list .ol-l1{margin-top:8px}
 .outline-num{width:20px}
 .outline.is-on-dark .outline-head,.outline.is-on-dark .outline-list a,.outline.is-on-dark .outline-num{color:#D3DDE0}
 .outline.is-on-dark .outline-list a.is-active{color:#fff}
}
.outline:hover{opacity:1;pointer-events:auto}
.contact-modal{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:0;border-radius:20px;max-width:600px;width:calc(100vw - 32px)}
.contact-modal .contact-draft{background:transparent;padding:28px;color:var(--ink);border:0}
.contact-modal #draft-title{color:var(--ink)}
.contact-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.contact-recipient{font:12px var(--f-head);color:var(--muted);margin-bottom:8px}
.contact-modal .contact-intro{font:14px/1.6 var(--f-head);margin:16px 0 22px;color:var(--muted)}
.contact-modal .btn-light{background:var(--accent);color:#fff}
.contact-modal .btn-outline-light{color:var(--ink);border-color:var(--line)}
.contact-modal label{font-size:13px}
.contact-modal .contact-fallback{font:12px/1.5 var(--f-head);margin-top:18px;color:var(--muted)}
.contact-fallback button{background:none;border:0;padding:0;color:var(--accent-deep);font:inherit;text-decoration:underline;cursor:pointer}
@media(max-width:640px){.contact-modal .contact-draft{padding:20px}.contact-recipient{font-size:11px}}
.ask-share{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:10px 18px 0;font:11px/1.5 var(--f-head);color:var(--muted)}
.ask-share input{accent-color:var(--accent)}.ask-share span{font-size:10px}
.metrics-note{font:11px/1.6 var(--f-head);color:var(--muted);max-width:750px;margin:20px auto;padding:0 24px;text-align:center}
.product-tour{border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);padding:24px;width:min(960px,calc(100vw - 24px));max-height:90dvh;overflow:auto;box-shadow:var(--sh-lift)}
.product-tour::backdrop{background:#22303Ab3;backdrop-filter:blur(5px)}
.product-tour-head{display:flex;align-items:center;justify-content:space-between;font:12px var(--f-head);color:var(--muted);margin-bottom:12px}
.product-tour-text{font:16px/1.6 var(--f-head);max-width:750px;margin:14px 0 20px}
.product-tour-image{width:100%;max-height:48dvh;object-fit:contain;display:block;background:white;border-radius:10px;border:1px solid var(--line)}
.product-tour-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}.product-tour-skip{margin-left:auto;color:var(--muted);font:12px var(--f-head)}
@media(max-width:640px){.product-tour{padding:18px}.product-tour-text{font-size:14px}.product-tour-skip{margin-left:0}}

.ask-share[hidden],.metrics-note[hidden]{display:none}

/* Kaio AI: edited answers with quiet evidence and a separate assessment mark. */
.ask-note{padding:12px 18px;font-size:12px;line-height:1.5}.ask-note p{font:inherit;margin:0}
.ask-legend{display:flex;gap:16px;align-items:center;margin-top:7px;font-size:11px;color:var(--muted)}
.legend-evidence{text-decoration:underline;text-decoration-color:#156E7C88;text-underline-offset:3px}.ask-legend sup{color:#8B6A47}
.ask-details{margin-top:7px;font-size:11px}.ask-details p{margin-top:8px;line-height:1.6}
.msg-a .answer-text,.msg-a .answer-points{font:15px/1.6 var(--f-head);color:var(--ink)}
.answer-points{list-style:disc;margin:0;padding-left:19px}.answer-points li{padding-left:3px;margin:0 0 12px}.answer-points li:last-child{margin-bottom:0}
.claim-source{text-decoration-color:#156E7C70;text-decoration-thickness:1px;text-underline-offset:3px}
.claim-source:hover,.claim-source:focus-visible{text-decoration-color:var(--accent);background:#156E7C08}
.claim-interpreted{text-decoration:none}.assessment-mark{font:600 11px var(--f-head);color:#8B6A47;margin-left:3px;vertical-align:super}
.claim-interpreted:hover,.claim-interpreted:focus-visible{background:#986D460C}
.answer-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}.answer-links a{font:11px/1.4 var(--f-head);padding:5px 9px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--accent-deep)}
.answer-links a:hover{background:var(--accent-mid)}
.evidence-focus{scroll-margin-top:calc(var(--header-h) + 28px);outline:2px solid var(--accent);outline-offset:8px;border-radius:6px;animation:evidence-reveal 5s ease-out}
@keyframes evidence-reveal{0%,25%{outline-color:var(--accent)}100%{outline-color:transparent}}
@media(prefers-reduced-motion:reduce){.evidence-focus{animation:none}}
@media(max-width:640px){.ask .ask-note{font-size:12px;padding:12px 16px}.ask .msg-a .answer-text,.ask .msg-a .answer-points{font-size:14px}}

/* The rail has its own stable surface across section colour boundaries. */
@media(min-width:1480px){
 .outline{top:50%;bottom:auto;transform:translateY(-50%)}
 .outline-panel{max-height:calc(100dvh - 160px);background:var(--paper);padding:12px 8px;border-radius:10px}
 .outline.is-on-dark .outline-head,.outline.is-on-dark .outline-list a,.outline.is-on-dark .outline-num{color:var(--muted)}
 .outline-list a{transition:font-size .15s,color .15s;min-height:23px}
 .outline-list a.is-active,.outline.is-on-dark .outline-list a.is-active{font-size:12px;font-weight:700;color:var(--accent-deep)}
 .outline-list a.is-active .outline-num{color:var(--accent-deep)}
}
.claim-source{display:inline-block;max-width:100%;vertical-align:baseline;border-radius:4px;padding:2px 3px;margin:0 -3px;line-height:1.6}
.claim-source:hover,.claim-source:focus-visible{background:#156E7C12;box-shadow:0 0 0 1px #156E7C35}
.answer-strength{font-weight:600}
.more-heading,.more-grid>.ask-card{grid-column:1/-1}
.more-grid>.ask-card{max-width:640px;margin:0 0 32px;background:var(--paper);color:var(--ink);border-color:var(--line)}
.more-grid>.ask-card p{color:var(--muted)}
.more-heading{margin-bottom:24px}

.more-grid>.ask-card .h5{color:var(--ink)}
.analytics-choice{position:fixed;z-index:420;bottom:20px;left:20px;width:min(390px,calc(100vw - 40px));padding:22px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-panel);font:13px/1.5 var(--f-head)}.analytics-choice h3{font-size:17px;margin-bottom:10px}.analytics-choice>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.analytics-choice button{padding:10px 12px;border:1px solid var(--accent);background:var(--paper);color:var(--accent-deep);border-radius:8px;font:inherit;cursor:pointer}.analytics-choice button:disabled{opacity:.5}.analytics-status{margin-top:10px}.analytics-settings{background:none;border:0;color:var(--accent-deep);font:inherit;text-decoration:underline;cursor:pointer}

/* Compact paired invitations and the same animated journey on every screen. */
.more-grid>.ask-card{grid-column:auto;max-width:none;margin:0;padding:26px;height:100%;min-height:240px;border-radius:20px}
.more-grid>.gallery{height:100%}
.more-grid>.gallery .pill-sum{display:flex;align-items:flex-start;gap:16px;width:100%;min-height:240px;white-space:normal;border:1px solid var(--line);border-radius:20px;padding:26px;background:var(--paper);font-size:22px}
.gallery .pill-sum .cam{width:38px;height:38px;flex:none}.gallery .pill-sum span{display:grid;gap:16px}.gallery .pill-sum strong{font-weight:600}.gallery .pill-sum small{font:17px/1.5 var(--f-body);color:var(--muted)}.gallery .pill-sum em{font:600 15px/1.4 var(--f-head);color:var(--accent);font-style:normal}.gallery .pill-sum .pm{margin-left:auto;flex:none}
.more-grid>.ask-card .btn{align-self:start;width:auto}.more-grid>.ask-card .mark{width:38px;height:38px}
.more-item:has(details[open]){grid-column:1/-1}.gallery details[open]>.pill-sum{min-height:0}
@media(max-width:959px){.hero-mobile.no-portrait svg.skyline{max-width:none;width:100%;height:auto;margin:0}.hero-mobile{min-height:145px}.hero .contours{opacity:.3}.hero-grid{gap:16px}}
@media(max-width:699px){.sec{padding-block:32px}.part-open{margin-bottom:22px}.part-title{font-size:clamp(34px,9vw,46px)}.cols3.swipe{grid-template-columns:repeat(2,minmax(0,1fr))!important}.cols3 .col{padding:12px}.cols3 h5{font-size:15px}.cols3 p{font-size:14px;line-height:1.45}.cols3 .col:last-child{grid-column:1/-1}.more-grid{grid-template-columns:1fr 1fr;gap:12px}.more-grid>.ask-card,.more-grid>.gallery .pill-sum{padding:16px;min-height:225px;border-radius:14px}.more-grid>.ask-card .h5,.gallery .pill-sum{font-size:19px}.more-grid>.gallery .pill-sum{flex-wrap:wrap}.gallery .pill-sum span{gap:12px}.gallery .pill-sum small,.more-grid>.ask-card p{font-size:14px;line-height:1.45}.more-grid>.ask-card .btn{font-size:13px;padding:0 12px;min-height:38px}.gallery .pill-sum .pm{position:absolute;right:14px;top:18px}.gallery .pill-sum{position:relative}.more-heading{margin-bottom:8px}.hero-focus{font-size:19px}.avail{padding:14px}.hero .actions{gap:8px}.hero .actions .btn{min-height:44px}.triptych{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px}.triptych figure{flex:0 0 78%;scroll-snap-align:start}.triptych figure:first-child{grid-column:auto}.triptych .frame{max-height:260px}.more-grid>.ask-card .mark{width:30px;height:30px}}

@media(max-width:959px){.hero-mobile{min-height:110px}.hero-mobile svg.skyline text{font-size:36px!important}}

.more-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.more-grid>.gallery details:not([open]),.more-grid>.gallery details:not([open])>.pill-sum{height:100%}

.metrics-note{grid-column:1/-1;text-align:left;max-width:800px}.metrics-note>summary{cursor:pointer;color:var(--accent);font:500 14px/1.5 var(--f-head);padding-block:10px}.metrics-note p{font:14px/1.6 var(--f-head);margin-block:10px}.ask-recording-note{font:12px/1.4 var(--f-head);color:var(--muted);padding:10px 16px;margin:0;border-top:1px solid var(--line-soft)}

.privacy-link{grid-column:1/-1;font:500 13px/1.5 var(--f-head);justify-self:start;min-height:36px;display:inline-flex;align-items:center}.privacy-page{max-width:850px;padding-block:48px}.privacy-page h1{font:600 clamp(36px,5vw,58px)/1.1 var(--f-head);margin:32px 0 16px}.privacy-page h2{font:600 23px/1.3 var(--f-head);margin-top:32px}.privacy-page p{font-size:17px;line-height:1.7;margin:16px 0}.more-context{margin-top:24px;max-width:36em}.gallery .pill-sum em{display:inline-flex;border:1px solid var(--line);border-radius:99px;padding:9px 16px;justify-self:start}.gallery .pill-sum small{font-family:var(--f-body)}

/* Photography is a quiet expandable button, subordinate to the conversation. */
.more-grid{align-items:start;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.more-grid>.gallery{height:auto;align-self:center}
.more-grid>.gallery details:not([open]),.more-grid>.gallery details:not([open])>.pill-sum{height:auto}
.more-grid>.gallery .pill-sum{display:inline-flex;align-items:center;flex-wrap:nowrap;width:auto;min-height:48px;padding:12px 20px;gap:12px;border:1.5px solid var(--ink);border-radius:99px;background:transparent;font:600 16px/1.4 var(--f-head);white-space:normal}
.gallery .pill-sum .cam{width:24px;height:24px}.gallery .pill-sum .pm{position:static;width:16px;height:16px;margin-left:4px}
.gallery details[open]>.pill-sum{min-height:48px}
@media(max-width:699px){.more-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.more-grid>.gallery .pill-sum{font-size:13px;padding:10px 12px;gap:8px;text-align:left}.gallery .pill-sum .cam{width:20px;height:20px}.gallery .pill-sum .pm{width:12px;height:12px;flex:none}.more-grid>.gallery{align-self:center}}

/* One personal invitation, with two small actions and image-only gallery tiles. */
.more-grid{grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.more-heading{margin-bottom:12px}.more-context{font:400 clamp(17px,1.6vw,21px)/1.6 var(--f-body);color:var(--ink-2);max-width:40em;margin-top:20px}
.more-grid>.ask-card{display:block;grid-column:auto;min-height:0;height:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.more-grid>.gallery{align-self:center}.more-grid>.gallery .pill-sum{font-size:16px;min-height:48px;padding:11px 20px}.more-grid>.ask-card .btn{min-height:48px;padding:11px 20px;font-size:16px}
.g-item{position:relative;border-radius:var(--r-m);overflow:hidden;margin-bottom:18px}.g-cap{position:absolute;inset:auto 0 0;margin:0;padding:36px 14px 14px;background:linear-gradient(transparent,rgba(12,24,30,.85));color:white;transform:translateY(100%);opacity:0;transition:transform .25s var(--ease),opacity .25s;pointer-events:none;z-index:1}.g-cap b,.g-cap span{color:white}.g-cap span{opacity:.8}.g-item:hover .g-cap,.g-item:focus-within .g-cap{transform:translateY(0);opacity:1}
@media(max-width:699px){.more-grid{grid-template-columns:auto minmax(0,1fr);gap:12px}.more-grid>.ask-card .btn,.more-grid>.gallery .pill-sum{font-size:13px;padding:10px 13px;min-height:44px}.more-context{font-size:16px}.gallery .pill-sum .cam{width:18px;height:18px}.g-cap{font-size:12px;padding:30px 10px 10px}}
@media(prefers-reduced-motion:reduce){.g-cap{transition:none}}