/* Obsoletist — Returning Fold. Bright architectural world, silver fold, deep ultramarine. */
@font-face{font-family:"Instrument Serif";src:url(../assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../assets/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --paper:#f4f8fd;
  --ink:#0c1a3d;
  --ink-soft:#3e5079;
  --ultra:#1b3cc8;
  --ultra-deep:#0f2378;
  --silver:#c4cddc;
  --hair:rgba(12,26,61,.14);
  --glass:rgba(246,249,255,.80);
  --glow:0 1px 18px rgba(255,255,255,.75),0 0 2px rgba(255,255,255,.6);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,5vw,72px);
  --journey-length:1700svh;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
em{font-style:italic;color:var(--ultra-deep)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ultra);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:20;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:16px}

/* ---------- header ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(env(safe-area-inset-top) + 22px) var(--gutter) 18px;transition:background .4s,box-shadow .4s}
.bar.solid{background:var(--glass);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 var(--hair)}
.brand img{display:block;width:clamp(128px,14vw,184px);height:auto}
.bar nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-size:14px;letter-spacing:.01em}
.bar nav a{text-decoration:none}
.bar nav a:not(.pill):hover{color:var(--ultra)}
.pill{display:inline-flex;align-items:center;gap:.5em;padding:.62em 1.1em;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;
  font:500 14px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;transition:background .25s,transform .25s}
.pill:hover{background:var(--ultra)}
.pill.big{font-size:clamp(17px,1.6vw,21px);padding:1em 1.6em;margin-top:28px}
.pill.lead{font-size:16px;padding:.85em 1.4em;margin-top:26px;text-shadow:none;align-self:flex-start}
html.motion .chapter .pill{pointer-events:auto}
@media (max-width:640px){.bar nav a:not(.pill){display:none}.pill{font-size:13px}.pill.lead{font-size:15px;margin-top:18px}}

/* ---------- world (picture layer) ---------- */
.world{position:fixed;inset:0;z-index:0;background:#eaf1fb url(../media/poster.jpg) center/cover no-repeat}
.world canvas{display:block;width:100%;height:100%}
.veil{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s linear;
  background:linear-gradient(180deg,rgba(244,248,253,.0),rgba(244,248,253,.35))}
.wash{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(120% 95% at 50% 42%,#fff 0%,#f4f8fd 55%,#e6eefa 100%)}
html.no-js .wash,html.reduced .wash{display:none}
html.no-js .world,html.reduced .world,html.media-failed .world{background-image:url(../media/poster-end.jpg)}
html.no-js .world canvas,html.reduced .world canvas,html.media-failed .world canvas{display:none}

/* ---------- typography shared ---------- */
.eyebrow{font:600 11px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.num{display:inline-block;color:var(--ultra);margin-right:.9em;font-variant-numeric:tabular-nums}
h1,.chapter h2{font-size:clamp(44px,5.6vw,92px);line-height:.98;letter-spacing:-.025em;margin:18px 0 20px}
.lede{font-size:clamp(16px,1.25vw,19px);line-height:1.5;max-width:30em;margin:0;color:var(--ink)}

/* ---------- chapters ---------- */
.chapter{position:relative;padding:22svh var(--gutter) 6svh;max-width:min(720px,100%);text-shadow:var(--glow)}
.chapter .lede{max-width:22em}
html.motion .journey{height:var(--journey-length)}
html.motion .chapter{position:fixed;z-index:2;top:27svh;left:var(--gutter);padding:0;width:min(40vw,640px);opacity:0;pointer-events:none;will-change:opacity,transform}
html.motion .chapter.right{left:auto;right:calc(var(--gutter) + 96px);width:min(34vw,560px)}
html.motion .chapter.final{top:17svh;width:min(34vw,560px)}
html.motion #ch-arrival{opacity:1}

/* faint, oversized, clipped cue at the bottom edge — not an instruction */
.cue{display:none}
html.motion .cue{display:block;position:fixed;z-index:2;left:var(--gutter);right:0;bottom:calc(-.26em + env(safe-area-inset-bottom));
  font:italic 400 clamp(56px,9vw,156px)/1.1 var(--serif);letter-spacing:-.04em;white-space:nowrap;color:var(--ultra-deep);
  opacity:.18;pointer-events:none;-webkit-mask-image:linear-gradient(#000 20%,transparent);mask-image:linear-gradient(#000 20%,transparent)}

.progress{display:none}
html.motion .progress{display:block;position:fixed;z-index:4;left:0;bottom:0;width:100%;height:1px;background:var(--ultra);transform-origin:left;transform:scaleX(0)}

/* chapter rail */
.rail{display:none}
html.motion .rail{display:flex;flex-direction:column;gap:14px;position:fixed;z-index:5;right:calc(var(--gutter) * .45);top:50%;transform:translateY(-50%);transition:opacity .4s}
.rail button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:22px;color:var(--ink)}
.rail button::after{content:"";width:18px;height:1px;background:currentColor;opacity:.45;transition:width .35s,opacity .35s,background .35s}
.rail button span{font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;text-shadow:var(--glow)}
.rail button:hover span,.rail button:focus-visible span,.rail button[aria-current="step"] span{opacity:1;transform:none}
.rail button[aria-current="step"]::after{width:34px;opacity:1;background:var(--ultra)}
.rail.gone{opacity:0;pointer-events:none}

.status{position:fixed;z-index:4;left:var(--gutter);bottom:22px;margin:0;font-size:12px;color:var(--ink-soft);opacity:0;transition:opacity .4s}
.status.show{opacity:1}

/* ---------- after the journey: content over the final frame ---------- */
.after{position:relative;z-index:3;padding:12svh var(--gutter) 0;display:grid;gap:clamp(20px,3vw,36px)}
.panel{scroll-margin-top:110px;background:var(--glass);-webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 80px -40px rgba(12,26,61,.35);border-radius:4px;
  padding:clamp(28px,5vw,80px);max-width:1180px;width:100%;margin:0 auto}
.panel h2{font-size:clamp(34px,4vw,62px);line-height:1.02;letter-spacing:-.02em;margin:16px 0 clamp(24px,3vw,44px);max-width:16em}
.panel h3{font-size:clamp(23px,1.9vw,29px);line-height:1.12;margin:0 0 10px}
.panel p{margin:0}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(16px,2vw,28px)}
.door{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.6vw,36px);text-decoration:none;border:1px solid var(--hair);border-radius:3px;
  background:rgba(255,255,255,.55);transition:border-color .3s,transform .3s,box-shadow .3s}
.door strong{font:400 clamp(24px,2.2vw,32px)/1.1 var(--serif)}
.door .go{margin-top:auto;padding-top:8px;font-weight:600;font-size:14px;color:var(--ultra)}
.door:hover{border-color:var(--ultra);transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(27,60,200,.55)}
.trio,.quad{list-style:none;margin:0;padding:0;display:grid;gap:clamp(22px,3vw,44px)}
.trio{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));counter-reset:t}
.trio li{counter-increment:t;border-top:1px solid var(--hair);padding-top:20px}
.trio li::before{content:counter(t,lower-roman) ".";display:block;font:italic 400 20px/1 var(--serif);color:var(--ultra);margin-bottom:14px}
.quad{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.quad li{border-top:1px solid var(--hair);padding-top:18px}
.trio p,.quad p{color:var(--ink-soft)}
.aside{margin-top:clamp(28px,3vw,44px)!important;padding-top:22px;border-top:1px solid var(--hair);font:italic 400 clamp(19px,1.6vw,23px)/1.4 var(--serif);max-width:38em}
.prose{max-width:40em;display:grid;gap:1em;font-size:clamp(16px,1.2vw,18px)}
.sig{font:600 11px/1 var(--sans)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6em!important}
.contact{text-align:left}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;max-width:1180px;width:100%;margin:0 auto;
  padding:28px 0 calc(28px + env(safe-area-inset-bottom));font-size:13px;color:var(--ink-soft);text-shadow:var(--glow)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{text-decoration:none}.foot a:hover{color:var(--ultra)}

/* ---------- phones: text sits low on a soft floor; picture crop handled in the player ---------- */
@media (max-width:760px){
  html.motion .chapter,html.motion .chapter.right,html.motion .chapter.final{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(14svh + env(safe-area-inset-bottom));width:auto;max-width:440px}
  h1,.chapter h2{font-size:clamp(40px,11vw,56px)}
  html.motion .veil{opacity:1;background:linear-gradient(0deg,rgba(244,248,253,.82),rgba(244,248,253,.35) 45%,transparent 70%)}
  html.motion .rail{right:6px}
  html.motion .rail button span{display:none}
  .panel{padding:26px 20px}
  .after{padding-left:12px;padding-right:12px}
}

/* ---------- reduced motion and no-script: ordinary flowing page over a still ---------- */
html.reduced .journey,html.no-js .journey{padding-top:8svh}
html.reduced .chapter,html.no-js .chapter{min-height:72svh;display:flex;flex-direction:column;justify-content:center}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* ---------- triggered journey: one screen tall; a scroll gesture plays the camera to the next chapter ---------- */
html.motion{overscroll-behavior-y:none}
html.motion .journey{height:100svh}
html.motion .after{margin-top:-9svh;padding-top:0}

/* ---------- cards: content sections that fade in on a light wash at the half-way stops ---------- */
.journey .card{margin:0 auto 8svh;width:calc(100% - 2 * var(--gutter))}
.rail button.minor::after{width:10px}
.rail button.minor[aria-current="step"]::after{width:26px}
html.motion .card{position:fixed;z-index:3;left:50%;top:50%;margin:0;width:min(1100px,calc(100vw - 2 * var(--gutter) - 56px));
  max-height:calc(100svh - 150px);overflow:hidden;padding:clamp(22px,3.2vw,48px);visibility:hidden;opacity:0;will-change:opacity;
  transform:translate(-50%,calc(-50% + 30px));background:transparent;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.motion .card h2{font-size:clamp(28px,3.2vw,50px);margin:12px 0 clamp(16px,2vw,30px)}
html.motion .card h3{font-size:clamp(20px,1.6vw,25px)}
html.motion .card .trio,html.motion .card .quad{gap:clamp(14px,2vw,32px)}
html.motion .card p,html.motion .card .door span{font-size:clamp(14px,1.05vw,16px);line-height:1.45}
html.motion .card .door{padding:clamp(16px,2vw,28px);gap:10px}
html.motion .card .door strong{font-size:clamp(21px,1.9vw,28px)}
html.motion .card .aside{margin-top:clamp(16px,2vw,28px)!important;padding-top:16px;font-size:clamp(16px,1.3vw,20px)}
html.motion .card .eyebrow,html.motion .card .door .eyebrow{font-size:11px}
@media (max-width:760px){
  html.motion .card{width:calc(100vw - 24px);padding:20px 18px;max-height:calc(100svh - 110px)}
  html.motion .card h2{font-size:27px;margin:8px 0 14px}
  html.motion .card h3{font-size:19px;margin-bottom:4px}
  html.motion .card p,html.motion .card .door span{font-size:13.5px;line-height:1.4}
  html.motion .card .quad{grid-template-columns:1fr 1fr;gap:12px 14px}
  html.motion .card .quad li,html.motion .card .trio li{padding-top:10px}
  html.motion .card .trio{gap:12px}
  html.motion .card .trio li::before{display:none}
  html.motion .card .aside{display:none}
  html.motion .card .doors{gap:10px}
  html.motion .card .door{padding:14px;gap:6px}
  html.motion .card .door strong{font-size:20px}
  html.motion .card .door .go{padding-top:2px}
}
@media (min-width:1000px){html.motion .card .quad{grid-template-columns:repeat(4,1fr)}}