/* Aurel case study. Colour tokens are Aurel's Figma "Color" collection, same names as its web code syntax.
   Light / Dark via [data-theme] on <html>. Instrument Serif (voice) · Hanken Grotesk (work) · Geist Mono (data). */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/InstrumentSerif-normal-400.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("assets/fonts/InstrumentSerif-italic-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400 600;font-display:swap;src:url("assets/fonts/HankenGrotesk-normal-400-600.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400 500;font-display:swap;src:url("assets/fonts/GeistMono-normal-400-500.woff2") format("woff2")}
:root{
  --color-bg-canvas:#F4F0E8;--color-bg-surface:#FBF9F4;--color-bg-sunken:#EAE4D8;--color-bg-inverse:#16130F;
  --color-bg-accent:#3A422B;--color-bg-accent-soft:#E3E5D6;--color-bg-warm-soft:#F1E1D6;
  --color-text-primary:#16130F;--color-text-secondary:#5A5348;--color-text-inverse:#FBF9F4;--color-text-accent:#3A422B;
  --color-text-on-accent:#FBF9F4;--color-text-warm:#A65A3A;
  --color-border-hairline:#D9D1C1;--color-border-strong:#16130F;--color-border-accent:#3A422B;
  --serif:"Instrument Serif",Georgia,serif;--sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,Consolas,monospace;
  --radius-md:14px;--radius-lg:22px;--radius-xl:32px;--pad:clamp(16px,5vw,64px);--ease:cubic-bezier(.16,1,.3,1);
  --elev:0 1px 2px rgba(22,19,15,.05),0 20px 44px -22px rgba(22,19,15,.28);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --color-bg-canvas:#16130F;--color-bg-surface:#24211D;--color-bg-sunken:#1C1916;--color-bg-inverse:#F4F0E8;
  --color-bg-accent:#A7AE8A;--color-bg-accent-soft:#222819;--color-bg-warm-soft:#7A3E24;
  --color-text-primary:#F4F0E8;--color-text-secondary:#A39A8A;--color-text-inverse:#16130F;--color-text-accent:#A7AE8A;
  --color-text-on-accent:#16130F;--color-text-warm:#D49A7C;
  --color-border-hairline:#3D3831;--color-border-strong:#F4F0E8;--color-border-accent:#A7AE8A;
  --elev:0 1px 2px rgba(0,0,0,.4),0 24px 50px -24px rgba(0,0,0,.75);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--color-bg-canvas);color:var(--color-text-primary);font:400 17px/1.6 var(--sans);overflow-x:hidden;transition:background-color .5s var(--ease),color .5s var(--ease)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
em{font-style:italic}
code{font:400 .82em var(--mono);color:var(--color-text-accent)}
.mono{font-family:var(--mono)}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:10px;background:var(--color-bg-inverse);color:var(--color-text-inverse);padding:10px 14px;border-radius:999px;z-index:99}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--color-border-accent);outline-offset:3px;border-radius:6px}
section[id]{scroll-margin-top:64px}

/* header */
.top{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px var(--pad);background:color-mix(in srgb,var(--color-bg-canvas) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--color-border-hairline)}
.back{justify-self:start;text-decoration:none;font:500 14px var(--sans);color:var(--color-text-secondary);display:inline-flex;gap:8px;align-items:center}
.back span{transition:transform .3s var(--ease)}.back:hover span{transform:translateX(-4px)}
.logo{font:400 26px/1 var(--serif);text-decoration:none;letter-spacing:-.01em}
.top-r{justify-self:end;display:flex;align-items:center;gap:22px}
.toc{display:flex;gap:18px}
.toc a{text-decoration:none;font-size:13.5px;color:var(--color-text-secondary)}
.toc a:hover{color:var(--color-text-primary)}
.mode{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--color-border-hairline);background:var(--color-bg-surface);color:var(--color-text-primary);border-radius:999px;padding:7px 14px 7px 10px;cursor:pointer;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.mode::before{content:"";width:14px;height:14px;border-radius:50%;background:linear-gradient(90deg,var(--color-text-primary) 50%,transparent 50%);box-shadow:inset 0 0 0 1.5px var(--color-text-primary)}

/* hero */
.hero{padding:clamp(60px,10vw,130px) var(--pad) clamp(40px,6vw,64px);max-width:1440px;margin:0 auto}
.over,.num{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary)}
.num{color:var(--color-text-accent)}
h1{font:400 clamp(4rem,11vw,9.6rem)/.94 var(--serif);letter-spacing:-.02em;margin:22px 0 28px;max-width:12ch}
h1 em{color:var(--color-text-accent)}
.lede{font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.5;color:var(--color-text-secondary);max-width:52ch}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--color-border-hairline);border:1px solid var(--color-border-hairline);border-radius:var(--radius-lg);overflow:hidden;margin-top:clamp(36px,5vw,56px)}
.meta div{background:var(--color-bg-surface);padding:18px 20px}
.meta dt{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:6px}
.meta dd{font-size:15px;line-height:1.45}
.stats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.stats li{padding:18px 20px;border-radius:var(--radius-lg);background:var(--color-bg-accent-soft)}
.stats b{display:block;font:400 clamp(2.4rem,4vw,3.4rem)/1 var(--serif)}
.stats span{font-size:14px;color:var(--color-text-secondary)}

/* film */
.film{padding:0 var(--pad) clamp(60px,9vw,120px);max-width:1520px;margin:0 auto}
.fmt{display:flex;justify-content:flex-end;gap:4px;margin-bottom:12px}
.fmt button{font:500 12px var(--mono);letter-spacing:.06em;padding:8px 14px;border-radius:999px;border:1px solid var(--color-border-hairline);background:transparent;color:var(--color-text-primary);cursor:pointer}
.fmt button.on{background:var(--color-bg-inverse);color:var(--color-text-inverse);border-color:transparent}
.frame{border-radius:var(--radius-lg);overflow:hidden;background:#16130F;box-shadow:var(--elev)}
.frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#16130F}
.frame.tall{background:transparent;box-shadow:none;border-radius:0;overflow:visible}
.frame.tall video{aspect-ratio:9/16;width:auto;height:min(82vh,820px);max-width:100%;margin:0 auto;border-radius:var(--radius-lg);box-shadow:var(--elev)}
.cap{margin-top:14px;font-size:14px;color:var(--color-text-secondary);text-align:center}

/* sections */
.sec{padding:clamp(70px,10vw,130px) var(--pad);border-top:1px solid var(--color-border-hairline)}
.sec>*{max-width:1440px;margin-left:auto;margin-right:auto}
.sunken{background:var(--color-bg-sunken)}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:20px;margin-bottom:clamp(36px,5vw,64px)}
h2{font:400 clamp(2.5rem,5.4vw,4.6rem)/1.02 var(--serif);letter-spacing:-.015em}
h2 em{color:var(--color-text-accent)}
.prose{color:var(--color-text-secondary);font-size:clamp(1rem,1.25vw,1.1rem)}
.prose p+p{margin-top:14px}
.pillars{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pillars li{background:var(--color-bg-surface);border:1px solid var(--color-border-hairline);border-radius:var(--radius-lg);padding:24px}
.pillars b{display:block;font:400 1.7rem/1.1 var(--serif);margin-bottom:10px}
.pillars span{color:var(--color-text-secondary);font-size:15px}

/* flows */
.flow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(32px,4vw,56px) 0;border-top:1px solid var(--color-border-hairline)}
.flow h3{font:400 clamp(2.2rem,3.6vw,3.2rem)/1.02 var(--serif);margin:12px 0 14px}
.flow-text>p:not(.over){color:var(--color-text-secondary);max-width:44ch}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,22px)}
.trio img{border-radius:clamp(18px,2.4vw,30px);border:clamp(4px,.5vw,6px) solid #16130F;box-shadow:var(--elev);margin-bottom:10px}
figcaption{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary)}
.receipt{list-style:none;margin-top:22px;border-top:1px solid var(--color-border-strong);max-width:420px}
.receipt li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--color-border-hairline);font-size:13px;color:var(--color-text-secondary)}
.receipt b{font-weight:400;color:var(--color-text-primary)}
.receipt .acc{color:var(--color-text-accent)}
.receipt .tot{font-size:15px;color:var(--color-text-primary)}
.receipt .tot b{font-weight:500}

/* system */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px;align-items:start}
.tokens,.card{background:var(--color-bg-surface);border:1px solid var(--color-border-hairline);border-radius:var(--radius-lg)}
.tokens{padding:8px 22px}
.card{padding:22px}
.tok-head,.tok{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:11px 0}
.tok-head{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary)}
.tok{border-top:1px solid var(--color-border-hairline);font:400 12px var(--mono);color:var(--color-text-secondary)}
.tok span{display:flex;align-items:center;gap:10px}
.tok i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(128,120,100,.4);flex:none}
.card-t{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-accent);margin-bottom:12px}
.card-f{margin-top:12px;font-size:13.5px;color:var(--color-text-secondary)}
.ctable{width:100%;border-collapse:collapse;font-size:14px}
.ctable th{text-align:left;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary);padding:0 0 8px}
.ctable td{padding:9px 0;border-top:1px solid var(--color-border-hairline)}
.ctable td+td,.ctable th+th{text-align:right;width:64px;font-family:var(--mono);font-size:12.5px}
.type{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:baseline;margin-top:22px;padding-top:18px;border-top:1px solid var(--color-border-hairline)}
.type>span{font-size:10.5px;color:var(--color-text-secondary);white-space:nowrap}
.t1{font:400 clamp(2rem,3.6vw,2.8rem)/1 var(--serif)}
.t2{font:600 1.1rem/1.3 var(--sans)}
.t3{font-size:14px;letter-spacing:.04em}
.found{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px;align-items:start}
.found figure,.found-wide,.comps figure{background:#F4F0E8;border:1px solid #D9D1C1;border-radius:var(--radius-lg);overflow:hidden}
.found-wide{margin-bottom:14px;display:grid;place-items:center;background:#FBF9F4!important}
.found-wide img{max-width:1000px;width:100%}
.comps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.comps figure{display:grid;place-items:center;padding:clamp(8px,1.4vw,16px);background:#EAE4D8}
.comps .w2{grid-column:span 2}
.comps img{border-radius:var(--radius-md);max-height:520px;width:auto}

/* screens */
.phones{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(200px,20vw,260px);gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:6px var(--pad) 26px;max-width:none!important;margin-left:calc(-1 * var(--pad))!important;margin-right:calc(-1 * var(--pad))!important;scrollbar-width:thin}
.phones figure{scroll-snap-align:start}
.ph{border-radius:34px;border:7px solid #16130F;overflow:hidden;background:#F4F0E8;box-shadow:var(--elev);margin-bottom:12px}
.ph.dark{border-color:#3D3831}
.ph.tall{aspect-ratio:393/852;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.ph.tall::-webkit-scrollbar{display:none}
.gal-nav{display:flex;gap:8px;justify-content:flex-end}
.gal-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--color-border-hairline);background:var(--color-bg-surface);font:500 18px var(--sans);color:var(--color-text-primary);cursor:pointer}
.gal-nav button:hover{border-color:var(--color-border-strong)}
.long-head{margin-top:clamp(70px,9vw,120px)}
.long{display:flex;gap:clamp(20px,4vw,56px);justify-content:center;flex-wrap:wrap}
.long figure{width:min(320px,100%)}

/* prototype stage: always olive */
.stage{background:#3A422B;color:#FBF9F4;border-top:0}
.stage .prose{color:#E3E5D6}
.stage .num{color:#E3E5D6}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:500 15px var(--sans);border-radius:999px;padding:15px 24px;background:var(--color-bg-inverse);color:var(--color-text-inverse);border:0;cursor:pointer;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.stage .btn{background:#FBF9F4;color:#16130F}
.stage .btn.ghost{background:transparent;color:#FBF9F4;box-shadow:inset 0 0 0 1px rgba(251,249,244,.5)}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.proto{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/9;background:#2B3120}
.proto-poster{width:100%;height:100%;object-fit:cover;opacity:.3;filter:blur(6px);transform:scale(1.06)}
.proto-cta{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:16px}
.proto-cta p{font-size:13px;color:#E3E5D6}
.proto.live{aspect-ratio:auto;height:min(86vh,900px)}
.proto iframe{width:100%;height:100%;border:0;display:block}

/* principles + next + footer */
.learn{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px;counter-reset:l}
.learn li{background:var(--color-bg-surface);border:1px solid var(--color-border-hairline);border-radius:var(--radius-lg);padding:24px;counter-increment:l}
.learn li::before{content:"No. 0" counter(l);display:block;font:500 11px var(--mono);letter-spacing:.1em;color:var(--color-text-accent);margin-bottom:14px}
.learn b{display:block;font:400 1.75rem/1.1 var(--serif);margin-bottom:10px}
.learn span{color:var(--color-text-secondary);font-size:15px}
.next{padding:clamp(60px,8vw,110px) var(--pad);text-align:center;border-top:1px solid var(--color-border-hairline)}
.next p{font:italic 400 clamp(2.4rem,5vw,3.8rem)/1.05 var(--serif);margin-bottom:26px}
.foot{padding:28px var(--pad) 40px;border-top:1px solid var(--color-border-hairline);color:var(--color-text-secondary);font-size:14px;text-align:center}
.foot b{color:var(--color-text-primary)}

/* reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* responsive */
@media (max-width:1100px){.toc{display:none}}
@media (max-width:980px){
  .meta,.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.two,.found{grid-template-columns:minmax(0,1fr)}
  .pillars,.learn{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .top{grid-template-columns:1fr auto auto}
  .back{font-size:0;gap:0}.back span{font-size:18px}
  .meta{grid-template-columns:minmax(0,1fr)}
  .tok-head,.tok{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tok-head span:first-child,.tok code{grid-column:span 2}
  .comps{grid-template-columns:minmax(0,1fr)}
  .comps .w2{grid-column:auto}
  .frame.tall video{height:auto;width:100%}
  .proto.live{height:80vh}
}