/* Trademark Search Australia — original stylesheet v2 */
:root{
  --paper:#fffffc;--ink:#191919;--night:#191919;--night-2:#111;
  --muted:#00000070;--muted-2:#0000004d;--hair:#dfdfdf;--panel:#ededeb;
  --blue:#0059ff;--blue-h:#0351e3;--on-dark:#fffffc;--on-dark-mute:#fffffca8;--on-dark-hair:#fffffc24;
  --font:"SF Pro","SF Pro Text","SF Pro Display",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:2rem;--inset:2rem;--ease:cubic-bezier(.2,.7,.1,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --gut:clamp(1.25rem,4vw,4rem);--max:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:80%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--paper);scroll-padding-top:6rem}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);font-size:1.25rem;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:99px;z-index:99}
.skip:focus{top:1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* announcement */
.announce{display:flex;justify-content:center;align-items:center;gap:.9rem;padding:.85rem 1rem;font-size:1.05rem;text-align:center}
.announce b{font-weight:600}
.pill-sm{display:inline-flex;align-items:center;height:2.2rem;padding:0 1rem;border-radius:99px;background:var(--panel);text-decoration:none;font-weight:500;font-size:1rem;white-space:nowrap;transition:background .25s}
.pill-sm:hover{background:#e2e2df}

/* stage */
.stage{position:relative;margin:0 var(--inset);border-radius:var(--r);background:var(--night);color:var(--on-dark);overflow:hidden;isolation:isolate}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff0d}
.bar{position:absolute;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:2.1rem 2.5rem;z-index:3}
.wordmark{white-space:nowrap;display:inline-flex;align-items:baseline;gap:.45rem;text-decoration:none;color:inherit;line-height:1}
.wm-a{font-weight:800;letter-spacing:.02em;font-size:1.55rem}
.wordmark sup{font-size:.55rem;font-weight:600;transform:translateY(-.7rem);margin-left:-.25rem;opacity:.9}
.wm-b{font-weight:400;font-size:1.55rem;letter-spacing:-.01em}
.menu-btn{height:2.75rem;padding:0 1.5rem;border-radius:99px;border:0;background:var(--paper);color:var(--ink);font-weight:500;font-size:1.05rem;cursor:pointer;transition:transform .3s var(--ease),background .25s}
.menu-btn:hover{background:#fff}.menu-btn:active{transform:scale(.97)}

/* sticky compact header */
.mini-bar{position:fixed;top:.75rem;left:var(--inset);right:var(--inset);z-index:40;display:flex;justify-content:space-between;align-items:center;height:4.2rem;padding:0 .6rem 0 1.6rem;border-radius:1.25rem;background:#191919ee;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--on-dark);transform:translateY(-140%);transition:transform .55s var(--ease);box-shadow:0 10px 30px -18px #000}
.mini-bar.show{transform:none}
.mini-bar .wm-a,.mini-bar .wm-b{font-size:1.3rem}
.mini-bar .r{display:flex;gap:.5rem;align-items:center}
.mini-bar .menu-btn{height:2.9rem}
.mini-bar .go{display:inline-flex;align-items:center;gap:.6rem;height:2.9rem;padding:0 .35rem 0 1.1rem;border-radius:99px;background:#ffffff14;text-decoration:none;font-weight:500;font-size:1.05rem}
.mini-bar .go .dot{width:2.2rem;height:2.2rem}

/* hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(13rem,25vh,20rem) 2rem 0}
.hero.inner{padding:clamp(11rem,20vh,15rem) 2rem 0}
.eyebrow{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mute);margin:0 0 1.6rem;font-weight:500}
.eyebrow a{text-decoration:none}.eyebrow a:hover{color:var(--on-dark)}
.hero h1{margin:0;font-weight:500;font-size:clamp(3.2rem,6.6vw,6.4rem);line-height:1.04;letter-spacing:-.022em;max-width:15ch;text-wrap:balance}
.hero.inner h1{font-size:clamp(3rem,5.6vw,5.4rem);max-width:17ch}
.hero .sub{margin:1.6rem auto 0;max-width:46rem;color:var(--on-dark-mute);font-size:1.35rem;line-height:1.45;text-wrap:balance}
.h1w{display:inline-block;white-space:pre}

/* search pill */
.search{margin-top:2.6rem;width:min(42rem,100%);position:relative}
.search-row{display:flex;align-items:center;background:var(--paper);color:var(--ink);border-radius:99px;padding:.4rem .4rem .4rem 1.6rem;box-shadow:0 18px 50px -20px #000;transition:box-shadow .35s var(--ease)}
.search-row:focus-within{box-shadow:0 0 0 4px #0059ff40,0 18px 50px -20px #000}
.search input[type=text]{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:1.4rem;letter-spacing:-.01em;padding:.7rem 0;font-weight:500}
.search input::placeholder{color:#0000005c;font-weight:400}
.cta{display:inline-flex;align-items:center;gap:.9rem;border:0;cursor:pointer;background:transparent;color:var(--ink);font-weight:500;font-size:1.25rem;padding:.3rem .3rem .3rem 1.2rem;border-radius:99px;white-space:nowrap;text-decoration:none;transition:background .25s}
.dot{width:2.75rem;height:2.75rem;border-radius:50%;background:var(--blue);display:inline-grid;place-items:center;color:#fff;flex:none;transition:background .25s,transform .45s var(--ease)}
.dot svg{width:1.15rem;height:1.15rem}
.cta:hover .dot,.go:hover .dot{background:var(--blue-h);transform:translateX(2px)}
.search-row .cta{background:var(--panel)}
.search-row .cta:hover{background:#e4e4e1}
.cta.solo{background:var(--paper);height:3.6rem;padding-left:1.6rem;box-shadow:0 18px 50px -24px #0006}
.cta.ink{background:var(--ink);color:var(--paper);height:3.6rem;padding-left:1.6rem}
.cta.ink:hover{background:#000}
.search-meta{display:flex;justify-content:center;gap:1.4rem;margin-top:1rem;font-size:1rem;color:var(--on-dark-mute);flex-wrap:wrap}
.linkish{background:none;border:0;padding:0;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.gs{display:none;margin-top:.8rem}
.gs.open{display:block;animation:rise .45s var(--ease)}
.gs input{width:100%;border-radius:99px;border:1px solid var(--on-dark-hair);background:#ffffff0d;color:var(--on-dark);padding:1rem 1.5rem;font-size:1.15rem;outline:0}
.gs input::placeholder{color:#fffffc66}
.examples{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}
.examples button{border:1px solid var(--on-dark-hair);background:transparent;color:var(--on-dark-mute);border-radius:99px;padding:.35rem .9rem;font-size:.95rem;cursor:pointer;font-family:var(--mono);letter-spacing:.04em;transition:color .2s,border-color .2s}
.examples button:hover{color:var(--on-dark);border-color:#fffffc66}

/* plates */
.plate-wrap{width:100%;margin-top:clamp(3rem,7vw,6rem);padding:0 1.2rem 1.5rem}
.plate{width:100%;height:auto;max-width:1500px;margin:0 auto;overflow:visible}
.g{stroke:#fffffc0c;stroke-width:1}
.plate .l,.mini .l{fill:none;stroke:#fffffcd9;stroke-width:1.1}
.plate .thin,.mini .thin{stroke:#fffffc59;stroke-width:.8}
.plate .dash{stroke-dasharray:4 5}
.plate .blue,.mini .blue{stroke:#4d8bff}
.plate .cell{fill:none;stroke:#fffffc4d;stroke-width:.8}
.plate .cell.hi{stroke:#fffffce6;fill:#fffffc10}
.plate .cell.svc{stroke:#4d8bff99}
.plate .dot{fill:#fffffc}
.plate .survey{fill:#4d8bff}
.plate .spec,.mini .spec{font-family:var(--font);font-weight:700;font-size:206px;letter-spacing:.02em;fill:none;stroke:#fffffc;stroke-width:1.3}
.mini .spec.c{font-size:56px;stroke-width:1}
.plate .spec.ghost,.mini .spec.ghost{stroke:#4d8bff}
.plate .spec.sm{font-size:30px;font-weight:600;stroke-width:1}
.plate .seal{font-family:var(--font);font-weight:600;font-size:46px;fill:none;stroke:#fffffc;stroke-width:1.2}
.plate text.lab,.plate .dim,.plate .dimv,.plate .tc,.plate .cap,.plate .tcb,.mini .lab,.mini .tc{font-family:var(--font);fill:#fffffcb3;font-size:10.5px;letter-spacing:.12em;font-weight:500}
.plate .lab.dim,.mini .lab.dim{fill:#fffffc73}
.plate .blue-t,.mini .blue-t{fill:#6f9fff}
.plate .tc,.mini .tc{font-size:8.5px;fill:#fffffc99;letter-spacing:.04em}
.plate .tcb{font-size:13px;fill:#fffffc99}
.plate .arc{font-size:7.6px;letter-spacing:.22em}
.plate .cap{fill:#fffffc4d;font-size:10px;letter-spacing:.2em}
.spin{animation:spin 24s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* motion (only when allowed) */
@media (prefers-reduced-motion:no-preference){
  .js .draw .l,.js .draw .cell,.js .draw rect{stroke-dasharray:1;stroke-dashoffset:1}
  .js .draw .spec{stroke-dasharray:2400;stroke-dashoffset:2400}
  .js .drawn .draw .l,.js .drawn .draw .cell,.js .drawn .draw rect{animation:draw 2.2s var(--ease) forwards}
  .js .drawn .draw .spec{animation:draw 3.4s var(--ease) forwards}
  .js .drawn .d1 *{animation-delay:.15s!important}.js .drawn .d2 *{animation-delay:.3s!important}.js .drawn .d3 *{animation-delay:.8s!important}
  .js .drawn .d4 *{animation-delay:1s!important}.js .drawn .d5 *{animation-delay:1.3s!important}.js .drawn .d6 *{animation-delay:1.5s!important}
  .js .draw .thin.dash{stroke-dasharray:4 5;stroke-dashoffset:0}
  .js .hero .h1w{opacity:0;transform:translateY(.35em);filter:blur(6px);animation:word .9s var(--ease) forwards}
  .js .hero .sub,.js .hero .search,.js .hero .eyebrow,.js .hero .examples{animation:rise 1s var(--ease) both}
  .js .hero .eyebrow{animation-delay:.05s}.js .hero .sub{animation-delay:.45s}.js .hero .search{animation-delay:.6s}.js .hero .examples{animation-delay:.75s}
  .js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
  .js .rule-d{transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-io)}
  .js .rule-d.in{transform:none}
}
@media (prefers-reduced-motion:reduce){.spin,.survey{display:none}html{scroll-behavior:auto}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes word{to{opacity:1;transform:none;filter:none}}

/* typography + section scaffolding */
.sec{padding:clamp(6rem,11vw,11rem) 0 0}
.label{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0}
.label i{font-style:normal;color:var(--blue)}
h2{font-size:2.625rem;line-height:1.12;letter-spacing:-.02em;font-weight:500;margin:0;text-wrap:balance}
.xl{font-size:clamp(3rem,5.4vw,5.2rem);line-height:1.02;letter-spacing:-.03em}
h3{font-size:1.6rem;line-height:1.25;letter-spacing:-.012em;font-weight:500;margin:0}
.lede{font-size:1.5rem;line-height:1.45;color:#191919d9;max-width:36em;margin:1.4rem 0 0;text-wrap:pretty}
.muted{color:var(--muted)}
.rule{height:1px;background:var(--ink);border:0;margin:0}
.rule.h{background:var(--hair)}
.head-c{text-align:center;display:flex;flex-direction:column;align-items:center}
.head-c .lede{margin-left:auto;margin-right:auto}
.more-link{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:500;margin-top:2.4rem}
.more-link .dot{width:2.2rem;height:2.2rem}
.more-link:hover .dot{transform:translateX(3px)}

/* inline chips (statement & headings) */
.chip{display:inline-grid;place-items:center;vertical-align:middle;border-radius:.18em;height:.86em;padding:0 .18em;margin:0 .06em;transform:translateY(-.06em)}
.chip.blue{background:var(--blue);color:#fff;border-radius:.16em;box-shadow:inset 0 0 0 1px #ffffff30}
.chip.blue svg{height:.62em;width:auto}
.chip.circ{width:.86em;padding:0;border-radius:50%;background:var(--blue);color:#fff}
.chip.circ svg{width:.42em}
.chip.dark{background:var(--night);padding:0 .22em}
.chip.dark svg{height:.6em;width:auto}
.chip.seal{width:.86em;padding:0;border-radius:50%;border:1.5px solid currentColor;font-size:.6em;height:1.43em;width:1.43em;font-weight:600}
.spec-chip text{font-family:var(--font);font-weight:700;letter-spacing:.06em}

/* punch statement */
.punch{padding:clamp(7rem,13vw,13rem) var(--gut) 0;text-align:center}
.punch p{margin:0 auto;max-width:17ch;font-size:clamp(3rem,6.2vw,6rem);line-height:1.06;letter-spacing:-.032em;font-weight:500;text-wrap:balance}
.punch .w{color:#19191926;transition:color .5s var(--ease)}
.punch .w.on{color:var(--ink)}
.no-js .punch .w,.rm .punch .w{color:var(--ink)}
.punch small{display:block;margin-top:2rem;color:var(--muted);font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase}

/* intro + tabs */
.intro-h{font-size:clamp(3.6rem,7.4vw,7.2rem);line-height:1;letter-spacing:-.035em;font-weight:500;margin:0;text-align:center}
.tabs{position:sticky;top:5.6rem;z-index:20;display:flex;justify-content:center;gap:2.2rem;margin:3.6rem auto 0;padding:1rem 0;background:linear-gradient(var(--paper) 70%,#fffffc00)}
.tabs a{text-decoration:none;color:var(--muted);font-size:1.2rem;padding:.4rem 0;position:relative;transition:color .25s;white-space:nowrap}
.tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .45s var(--ease)}
.tabs a.on{color:var(--ink)}.tabs a.on::after{transform:none}
.overview{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-top:3rem}
.overview h3{font-size:clamp(2rem,2.6vw,2.6rem);line-height:1.15;letter-spacing:-.02em}
.overview .lede{font-size:1.35rem}
.record{border-radius:1.5rem;background:var(--night);color:var(--on-dark);padding:2rem;position:relative;overflow:hidden;aspect-ratio:5/4;display:flex;flex-direction:column;justify-content:space-between}
.record .rc{background:var(--paper);color:var(--ink);border-radius:1rem;padding:1.4rem 1.5rem;box-shadow:0 30px 60px -30px #000;transform:rotate(-2deg);max-width:26rem;margin:auto}
.record .rc .rn{font-family:var(--mono);font-size:.95rem;color:var(--blue)}
.record .rc .mk{font-size:2.6rem;font-weight:700;letter-spacing:.01em;margin:.3rem 0 .8rem}
.record .rc dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.2rem;margin:0;font-size:1.05rem}
.record .rc dt{color:var(--muted)}.record .rc dd{margin:0}
.record .rc .st{display:inline-block}
.record .cap2{display:flex;justify-content:space-between;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:#fffffc80}
.record .q{position:absolute;inset:auto 2rem 4.5rem auto;font-family:var(--mono);font-size:.95rem;color:#6f9fff}
.spec-table{margin-top:2rem;border-top:1px solid var(--hair)}
.spec-table div{display:flex;justify-content:space-between;gap:2rem;padding:1rem 0;border-bottom:1px solid var(--hair);font-size:1.15rem}
.spec-table span:first-child{color:var(--muted)}
.spec-table span:last-child{text-align:right}

/* glance */
.glance{margin-top:clamp(5rem,8vw,8rem);display:grid;grid-template-columns:minmax(12rem,1fr) 3fr;gap:2rem}
.glance dl{margin:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.glance dl>div{padding:1.6rem 1.6rem 2.2rem 0;position:relative}
.glance dl>div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair)}
.glance dt{font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.glance dd{margin:0;font-size:2rem;letter-spacing:-.02em;line-height:1.1;font-weight:500}
.glance dd b{font-weight:500;font-size:4.2rem;letter-spacing:-.04em;display:block;line-height:1;font-variant-numeric:tabular-nums}
.glance dd small{display:block;font-size:1.1rem;letter-spacing:0;color:var(--muted);font-weight:400;margin-top:.6rem;line-height:1.4}

/* promise panel */
.promise{margin-top:clamp(4rem,6vw,6rem);border-radius:1.5rem;background:var(--panel);padding:2rem 2rem 2rem 2.4rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.promise .pi{display:flex;gap:1.4rem;align-items:center}
.promise .tick{width:3rem;height:3rem;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;flex:none}
.promise b{display:block;font-size:1.45rem;font-weight:500;letter-spacing:-.01em}
.promise span{color:#191919b3}

/* reading cards */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin-top:3.4rem}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{border-radius:1.5rem;background:var(--panel);overflow:hidden;display:flex;flex-direction:column;transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-4px)}
.card .vis{background:var(--night);aspect-ratio:400/220;position:relative;display:grid;place-items:center;padding:1.2rem}
.card .vis svg{width:100%;height:100%}
.card .vis .tag{position:absolute;left:1rem;bottom:1rem}
.card .bd{padding:1.8rem 1.8rem 2rem;display:flex;flex-direction:column;gap:1rem;flex:1}
.card h3{font-size:1.9rem;letter-spacing:-.02em}
.card p{margin:0;color:#191919c7;font-size:1.18rem;line-height:1.5}
.card .facts3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d8d8d4;margin-top:auto}
.card .facts3 div{padding:.9rem .6rem 0 0;font-size:1.05rem}
.card .facts3 span{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:.5rem;font-size:.95rem;padding:.35rem .85rem;border-radius:99px;background:var(--paper);white-space:nowrap;color:var(--ink)}
.tag::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--c,#999)}
.tag.high{--c:#d33a2c}.tag.med{--c:#d08a1a}.tag.low{--c:#3c8f4f}.tag.word{--c:var(--blue)}.tag.ctx{--c:#e0662b}

/* process track */
.track{position:relative;margin-top:4rem;display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.track .line{position:absolute;left:0;right:0;top:1.35rem;height:1px;background:var(--hair)}
.track .line i{position:absolute;inset:0;background:var(--blue);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .2s linear}
.stage-s{position:relative;padding:0 1.6rem 0 0}
.stage-s .nd{width:2.7rem;height:2.7rem;border-radius:50%;border:1px solid var(--hair);background:var(--paper);display:grid;place-items:center;font-family:var(--mono);font-size:.9rem;color:var(--muted);position:relative;z-index:1;transition:all .6s var(--ease)}
.stage-s.lit .nd{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 6px #0059ff1f}
.stage-s .tm{margin-top:1.6rem;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .6s}
.stage-s.lit .tm{color:var(--blue)}
.stage-s h3{margin-top:.6rem;font-size:1.7rem;letter-spacing:-.02em;opacity:.35;transition:opacity .6s}
.stage-s p{margin:.7rem 0 0;font-size:1.12rem;line-height:1.5;color:#191919b3;opacity:.35;transition:opacity .6s}
.stage-s.lit h3,.stage-s.lit p{opacity:1}
.rm .stage-s h3,.rm .stage-s p,.no-js .stage-s h3,.no-js .stage-s p{opacity:1}

/* why tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 1.4rem;margin-top:3.4rem}
.tile .tv{border-radius:1.5rem;aspect-ratio:16/10;background:var(--night);position:relative;overflow:hidden;display:grid;place-items:center}
.tile .tv.paper{background:var(--panel)}
.tile p{margin:1.1rem 0 0;font-size:1.2rem;color:#191919b3;max-width:34em}
.tile p b{color:var(--ink);font-weight:500}
.ui{background:var(--paper);color:var(--ink);border-radius:1rem;padding:1.2rem 1.3rem;box-shadow:0 30px 60px -30px #000a;min-width:16rem}
.ui .uh{display:flex;justify-content:space-between;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ui .big{font-size:2.6rem;font-weight:600;letter-spacing:-.02em;margin-top:.4rem}
.variants{display:flex;flex-wrap:wrap;gap:.5rem;max-width:24rem;justify-content:center;padding:1rem}
.variants span{font-family:var(--mono);font-size:1.05rem;padding:.5rem .9rem;border-radius:99px;border:1px solid #fffffc33;color:#fffffcb3;transition:all .5s var(--ease)}
.variants span.on{background:var(--blue);border-color:var(--blue);color:#fff}
.cgrid{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;width:min(80%,22rem)}
.cgrid i{aspect-ratio:1;border:1px solid #fffffc33;border-radius:3px;font-style:normal;font-size:.7rem;display:grid;place-items:center;color:#fffffc80;font-family:var(--mono);transition:all .5s}
.cgrid i.on{background:#fffffc;color:var(--ink);border-color:#fffffc}
.cgrid i.rel{border-color:var(--blue);color:#6f9fff}
.linkchip{display:inline-flex;align-items:center;gap:.8rem;background:var(--paper);border-radius:99px;padding:.6rem .6rem .6rem 1.3rem;font-family:var(--mono);font-size:1.1rem;color:var(--blue);box-shadow:0 30px 60px -30px #000a}

/* articles list */
.alist{margin-top:3rem;border-top:1px solid var(--ink)}
.alist a{display:grid;grid-template-columns:8rem 1fr auto;gap:2rem;align-items:center;padding:2rem 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:padding .45s var(--ease)}
.alist a:hover{padding-left:1rem}
.alist .n{font-family:var(--mono);color:var(--muted);font-size:.95rem}
.alist h3{font-size:2rem;letter-spacing:-.02em}
.alist p{margin:.4rem 0 0;color:var(--muted);font-size:1.15rem}
.alist .dot{width:2.4rem;height:2.4rem}

/* faq */
.faq{border-top:1px solid var(--ink);margin-top:3rem}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:2rem;align-items:center;padding:1.6rem 0;cursor:pointer;font-size:1.5rem;letter-spacing:-.012em;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq .a{padding:0 4rem 1.8rem 0;max-width:52em}
.faq .a p{margin:0 0 .9rem;font-size:1.25rem;line-height:1.58;color:#191919cc}
.plus{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;flex:none;position:relative;transition:background .25s}
.plus::before,.plus::after{content:"";position:absolute;width:.9rem;height:1.5px;background:var(--ink)}
.plus::after{transform:rotate(90deg);transition:transform .45s var(--ease)}
details[open] .plus::after{transform:rotate(0)}
summary:hover .plus{background:var(--panel)}
.faq-group{margin-top:5rem}
.faq-group:first-child{margin-top:0}

/* two-col layouts for inner pages */
.split{display:grid;grid-template-columns:minmax(12rem,1fr) 3fr;gap:2rem}
.prose{max-width:44em}
.prose h2{margin:3.6rem 0 1.2rem;font-size:2.2rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:2.4rem 0 .8rem}
.prose p,.prose li{font-size:1.32rem;line-height:1.62;color:#191919d4}
.prose p{margin:0 0 1.2rem}
.prose ul,.prose ol{padding-left:1.3rem;margin:0 0 1.4rem}
.prose li{margin:.35rem 0}
.prose a{color:var(--blue);text-underline-offset:3px}
.prose strong{font-weight:600;color:var(--ink)}
.prose .callout{border-radius:1.25rem;background:var(--panel);padding:1.5rem 1.8rem;margin:2rem 0}
.prose .callout p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:1.6rem 0 2rem;font-size:1.15rem}
.prose th,.prose td{text-align:left;padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--hair);vertical-align:top}
.prose thead th{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom:1px solid var(--ink)}
.toc{position:sticky;top:7rem;align-self:start}
.toc ol{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid var(--hair)}
.toc li{border-bottom:1px solid var(--hair)}
.toc a{display:block;padding:.75rem 0;text-decoration:none;color:var(--muted);font-size:1.08rem;transition:color .2s}
.toc a:hover,.toc a.on{color:var(--ink)}
.meta-row{display:flex;gap:1.6rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem;color:var(--on-dark-mute);font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
.related{margin-top:6rem}

/* long readings (read page) */
.reading-x{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,4vw,4rem);align-items:center;padding:4rem 0;border-bottom:1px solid var(--hair)}
.reading-x:first-of-type{border-top:1px solid var(--ink)}
.reading-x .vis{border-radius:1.5rem;background:var(--night);aspect-ratio:400/240;display:grid;place-items:center;padding:1.6rem;position:relative}
.reading-x .vis .tag{position:absolute;left:1.2rem;top:1.2rem}
.reading-x .no{font-family:var(--mono);color:var(--muted);font-size:.95rem}
.reading-x h2{margin:.6rem 0 1rem;font-size:2.4rem}
.reading-x p{margin:0 0 1rem;font-size:1.25rem;line-height:1.55;color:#191919cc}
.reading-x .do{border-left:2px solid var(--blue);padding-left:1.2rem;margin-top:1.4rem}
.reading-x .do b{display:block;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:500;margin-bottom:.3rem}
.reading-x:nth-of-type(even) .vis{order:2}

/* process page detail */
.stage-x{display:grid;grid-template-columns:10rem 1fr 1fr;gap:2rem;padding:3rem 0;border-bottom:1px solid var(--hair);position:relative}
.stage-x .big{font-size:5rem;font-weight:500;letter-spacing:-.04em;line-height:.9;color:#19191920;transition:color .8s var(--ease)}
.stage-x.lit .big{color:var(--blue)}
.stage-x .tm{font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:.6rem}
.stage-x h2{font-size:2.3rem}
.stage-x p,.stage-x li{font-size:1.22rem;line-height:1.55;color:#191919cc}
.stage-x ul{margin:0;padding-left:1.2rem}

/* contact/about */
.form-panel{border-radius:var(--r);background:var(--night);color:var(--on-dark);padding:clamp(2rem,4vw,3.6rem);display:grid;grid-template-columns:1fr 1.3fr;gap:3rem}
.form-panel h2,.form-panel h3{font-size:2.4rem;letter-spacing:-.02em;line-height:1.1}
.form-panel p{color:var(--on-dark-mute);font-size:1.2rem;margin:1rem 0 0}
.form-panel form{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field.full{grid-column:1/-1}
.field label{font-size:.9rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-mute)}
.field input,.field textarea{border-radius:1rem;border:1px solid var(--on-dark-hair);background:#ffffff0a;color:var(--on-dark);padding:1rem 1.2rem;font-size:1.15rem;outline:0;transition:border-color .2s}
.field input:focus,.field textarea:focus{border-color:#fffffc80}
.field textarea{min-height:7rem;resize:vertical}
.hp{position:absolute;left:-9999px}
.form-panel .cta{background:var(--paper);height:3.6rem;padding-left:1.6rem;justify-self:start;grid-column:1/-1;margin-top:.6rem}
.form-panel .fine{grid-column:1/-1;font-size:.98rem;color:#fffffc80;margin:0}
.done{grid-column:1/-1}.done h4{font-size:2rem;font-weight:500;margin:0;letter-spacing:-.02em}
.princ{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);margin-top:3rem}
.princ div{padding:2rem 2rem 2.4rem 0;border-bottom:1px solid var(--hair)}
.princ div+div{padding-left:2rem;border-left:1px solid var(--hair)}
.princ b{display:block;font-family:var(--mono);color:var(--blue);font-weight:400;font-size:.95rem;margin-bottom:2.4rem}
.princ h3{font-size:1.8rem}
.princ p{color:#191919b3;font-size:1.15rem;margin:.7rem 0 0}

/* closing stage */
.stage.close{margin-top:clamp(7rem,11vw,11rem);text-align:center;padding:clamp(7rem,11vw,10rem) 2rem}
.stage.close h2{margin:0 auto;color:var(--on-dark);font-size:clamp(3.2rem,7vw,7rem);line-height:1;letter-spacing:-.035em;max-width:none}
.stage.close .sub{color:var(--on-dark-mute);font-size:1.35rem;max-width:40rem;margin:1.6rem auto 0}
.stage.close .search{margin:2.6rem auto 0}
.stage.close .chip.dark{background:#fffffc14}
.stage.close .chip.seal{border-color:#fffffc}

/* footer */
.foot{padding:5rem var(--gut) 2.4rem;max-width:1480px;margin:0 auto;text-align:center}
.foot nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;font-size:1.3rem}
.foot nav a{text-decoration:none}.foot nav a:hover{text-decoration:underline;text-underline-offset:4px}
.foot .giant{margin:4rem 0 0;line-height:.82;font-weight:600;letter-spacing:-.055em;font-size:clamp(4rem,15.6vw,18.5rem);white-space:nowrap;user-select:none}
.foot .giant small{display:block;font-size:.16em;letter-spacing:.02em;font-weight:800;margin-bottom:.5em}
.foot .disc{max-width:52em;margin:3rem auto 0;color:var(--muted);font-size:1.02rem;line-height:1.55}
.legal{border-top:1px solid var(--hair);padding-top:1.6rem;margin-top:2.4rem;display:flex;justify-content:space-between;gap:1rem 2rem;color:var(--muted);font-size:1rem;flex-wrap:wrap}
.legal a{text-decoration:none}.legal a:hover{color:var(--ink)}

/* dialogs */
dialog{border:0;padding:0;max-width:none;max-height:none;background:transparent;color:inherit}
dialog::backdrop{background:#11111166;backdrop-filter:blur(6px)}
.menu{position:fixed;inset:var(--inset);width:auto;height:auto;margin:0;border-radius:var(--r);background:var(--night-2);color:var(--on-dark);padding:2.1rem 2.5rem;overflow:auto}
.menu[open]{display:flex;flex-direction:column;animation:fade .35s var(--ease)}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-grid{margin:auto 0;display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;padding:3rem 0}
.menu nav{display:flex;flex-direction:column}
.menu nav a{font-size:clamp(2.8rem,5vw,4.8rem);letter-spacing:-.03em;line-height:1.12;text-decoration:none;color:var(--on-dark-mute);transition:color .25s,transform .45s var(--ease);width:max-content;max-width:100%}
.menu nav a:hover,.menu nav a[aria-current=page]{color:var(--on-dark)}
.menu nav a:hover{transform:translateX(.4rem)}
.menu nav a small{font-size:1rem;font-family:var(--mono);vertical-align:top;margin-right:1rem;color:#fffffc66;letter-spacing:0}
.menu .side h4{margin:0 0 1rem;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:#fffffc80;font-weight:500}
.menu .side ul{list-style:none;margin:0 0 2rem;padding:0}
.menu .side li a{display:block;padding:.45rem 0;text-decoration:none;color:var(--on-dark-mute);font-size:1.2rem}
.menu .side li a:hover{color:var(--on-dark)}
.menu[open] nav a{animation:rise .6s var(--ease) both}
.menu[open] nav a:nth-child(2){animation-delay:.04s}.menu[open] nav a:nth-child(3){animation-delay:.08s}.menu[open] nav a:nth-child(4){animation-delay:.12s}.menu[open] nav a:nth-child(5){animation-delay:.16s}.menu[open] nav a:nth-child(6){animation-delay:.2s}.menu[open] nav a:nth-child(7){animation-delay:.24s}
.menu-foot{display:flex;justify-content:space-between;align-items:center;color:var(--on-dark-mute);font-size:1.05rem;gap:1rem;flex-wrap:wrap}
@keyframes fade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* results sheet */
.sheet{position:fixed;inset:var(--inset);width:auto;height:auto;margin:0;border-radius:var(--r);background:var(--paper);color:var(--ink);overflow:hidden}
.sheet[open]{display:flex;flex-direction:column;animation:fade .35s var(--ease)}
.sheet-top{display:flex;justify-content:space-between;align-items:center;padding:1.6rem 2.4rem;border-bottom:1px solid var(--hair);gap:1rem}
.close-btn{height:2.75rem;padding:0 1.4rem;border-radius:99px;border:0;background:var(--panel);cursor:pointer;font-weight:500}
.close-btn:hover{background:#e2e2df}
.sheet-body{overflow:auto;padding:2.6rem 2.4rem 4rem;flex:1;overscroll-behavior:contain}
.sheet-inner{max-width:1240px;margin:0 auto}
.sheet-inner:focus{outline:0}
.q-title{font-size:clamp(3rem,7vw,6.5rem);letter-spacing:-.035em;line-height:1;font-weight:600;margin:.6rem 0 0;word-break:break-word}
.q-sub{color:var(--muted);font-size:1.25rem;margin:1rem 0 0}
.loading{padding:3rem 0}
.scan{position:relative;height:2px;background:var(--hair);margin:3rem 0 1.6rem;overflow:hidden;border-radius:2px}
.scan::after{content:"";position:absolute;inset:0 auto 0 0;width:30%;background:var(--blue);animation:scan 1.4s var(--ease) infinite}
@keyframes scan{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.steps{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:1.05rem;color:var(--muted)}
.steps li{padding:.35rem 0;opacity:.35;transition:opacity .4s}
.steps li.on{opacity:1;color:var(--ink)}
.summary{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-top:3rem}
.summary div{padding:1.4rem 1.4rem 1.8rem 0;border-bottom:1px solid var(--hair)}
.summary div+div{padding-left:1.4rem;border-left:1px solid var(--hair)}
.summary b{display:block;font-size:3.2rem;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.summary span{font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.verdict{margin:2.4rem 0 0;padding:1.8rem 2rem;border-radius:1.25rem;background:var(--panel);display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.verdict .vd{width:1rem;height:1rem;border-radius:50%;margin-top:.55rem;background:var(--blue)}
.verdict.high .vd{background:#d33a2c}.verdict.med .vd{background:#d08a1a}.verdict.clear .vd{background:#2f8a46}
.verdict h3{font-size:1.7rem}
.verdict p{margin:.5rem 0 0;color:#191919cc;font-size:1.2rem;max-width:52em}
.verdict a{color:var(--blue)}
.riskbar{display:flex;height:.6rem;border-radius:99px;overflow:hidden;background:var(--hair);margin:2.4rem 0 .8rem}
.riskbar i{display:block;height:100%;transform-origin:left;animation:grow 1.2s var(--ease) both}
@keyframes grow{from{transform:scaleX(0)}}
.legend{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:1rem;color:var(--muted)}
.legend span::before{content:"";display:inline-block;width:.6rem;height:.6rem;border-radius:50%;margin-right:.45rem;background:var(--c)}
.marks{width:100%;border-collapse:collapse;margin-top:2.4rem;font-size:1.12rem}
.marks th{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--ink);white-space:nowrap}
.marks td{padding:1.05rem 1rem 1.05rem 0;border-bottom:1px solid var(--hair);vertical-align:top}
.marks tbody tr{animation:rise .6s var(--ease) both}
.marks td.mk{font-weight:600;font-size:1.3rem;letter-spacing:-.01em}
.marks td.num a{font-family:var(--mono);font-size:1rem;color:var(--blue);text-decoration:none}
.marks .why{display:block;color:var(--muted);font-size:1rem;margin-top:.2rem;font-weight:400}
.st{font-size:.95rem;padding:.25rem .65rem;border-radius:99px;background:var(--panel);white-space:nowrap}
.st.reg{background:#191919;color:var(--paper)}
.st.pen{background:#e3ecff;color:#0041bd}
.cls{font-family:var(--mono);font-size:1rem;white-space:nowrap}
.more{margin-top:1.6rem}
.btn-ghost{height:3rem;padding:0 1.4rem;border-radius:99px;border:1px solid var(--hair);background:transparent;cursor:pointer;font-weight:500}
.btn-ghost:hover{background:var(--panel)}
.disclaimer{margin-top:2.4rem;font-size:1.02rem;color:var(--muted);max-width:60em;line-height:1.55}
.err{padding:2rem;border-radius:1.25rem;background:#fff1ef;color:#8a1c14;margin-top:2rem}
.sheet .form-panel{margin-top:4rem}

/* responsive */
@media (max-width:1100px){
  .track{grid-template-columns:repeat(3,1fr);row-gap:3rem}
  .track .line{display:none}
  .cards.three{grid-template-columns:repeat(2,1fr)}
  .menu-grid{grid-template-columns:1fr}
  .menu .side{display:none}
}
@media (max-width:820px){
  :root{--inset:.6rem;--r:1.5rem}
  html{font-size:75%}
  .announce{font-size:1rem;flex-wrap:wrap;gap:.5rem;padding:.7rem 1.2rem}
  .announce .long{display:none}
  .bar{padding:1.4rem 1.3rem}
  .wm-a,.wm-b{font-size:1.22rem}
  .wordmark sup{transform:translateY(-.5rem)}
  .menu-btn{height:2.5rem;padding:0 1.2rem}
  .mini-bar{top:.5rem;padding-left:1.2rem;height:3.8rem}
  .mini-bar .go .lbl{display:none}.mini-bar .go{padding:0 .3rem}
  .mini-bar .wm-b{display:none}
  .hero{padding-top:11rem}
  .hero.inner{padding-top:10rem}
  .hero h1{font-size:clamp(3.1rem,11vw,4.6rem)}
  .hero.inner h1{font-size:clamp(2.8rem,10vw,4rem)}
  .search-row{padding-left:1.2rem}
  .search-row .cta .lbl{display:none}
  .search-row .cta{padding:.3rem;background:transparent}
  .plate-wrap{padding:0 .4rem 1rem}
  .punch p{font-size:clamp(2.6rem,10vw,3.6rem)}
  .intro-h{font-size:clamp(3rem,13vw,4.6rem)}
  .tabs{top:4.6rem;justify-content:flex-start;overflow-x:auto;gap:1.6rem;padding:1rem var(--gut);margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .overview{grid-template-columns:1fr}
  .record{aspect-ratio:auto;min-height:22rem;gap:1.4rem}
  .glance,.split{grid-template-columns:1fr;gap:1.2rem}
  .glance dl{grid-template-columns:1fr 1fr}
  .glance dl>div{padding-right:1rem}
  .glance dd b{font-size:3.4rem}
  .glance dd{font-size:1.6rem}
  .promise{flex-direction:column;align-items:flex-start;padding:1.6rem}
  .cards,.cards.three{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:1rem;margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));padding:0 var(--gut) 1rem;scrollbar-width:none}
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 86%;scroll-snap-align:center}
  .swipe{display:flex!important}
  .track{grid-template-columns:1fr;row-gap:0;margin-top:3rem;padding-left:0}
  .track .line{display:block;left:1.35rem;right:auto;width:1px;top:0;bottom:0;height:auto}
  .track .line i{transform-origin:top;transform:scaleY(var(--p,0))}
  .stage-s{display:grid;grid-template-columns:2.7rem 1fr;column-gap:1.4rem;padding:0 0 2.4rem}
  .stage-s .nd{grid-row:1/4}
  .stage-s .tm{margin-top:.6rem}
  .tiles{grid-template-columns:1fr}
  .alist a{grid-template-columns:1fr auto;gap:1rem}
  .alist .n{display:none}
  .alist h3{font-size:1.65rem}
  .faq summary{font-size:1.35rem}
  .faq .a{padding-right:0}
  .toc{position:static}
  .reading-x{grid-template-columns:1fr;padding:3rem 0}
  .reading-x:nth-of-type(even) .vis{order:0}
  .stage-x{grid-template-columns:1fr;gap:1rem}
  .stage-x .big{font-size:3.6rem}
  .princ{grid-template-columns:1fr}
  .princ div+div{padding-left:0;border-left:0}
  .princ b{margin-bottom:1rem}
  .form-panel,.form-panel form{grid-template-columns:1fr}
  .summary{grid-template-columns:1fr 1fr}
  .summary div:nth-child(3){padding-left:0;border-left:0}
  .marks thead{display:none}
  .marks tr{display:grid;grid-template-columns:1fr auto;padding:1rem 0;border-bottom:1px solid var(--hair)}
  .marks td{border:0;padding:.15rem 0}
  .marks td.own,.marks td.date{grid-column:1/-1;color:var(--muted);font-size:1rem}
  .sheet-top,.sheet-body{padding-left:1.4rem;padding-right:1.4rem}
  .menu{padding:1.4rem 1.3rem}
  .menu nav a{font-size:clamp(2.4rem,10vw,3.4rem)}
  .foot nav ul{font-size:1.15rem;gap:.4rem 1.4rem}
  .legal{flex-direction:column;align-items:center}
  .stage.close h2{font-size:clamp(2.8rem,11vw,4.2rem)}
  .prose p,.prose li{font-size:1.25rem}
  .prose table{display:block;overflow-x:auto}
}
.swipe{display:none;justify-content:space-between;align-items:center;color:var(--muted);font-size:1rem;margin-top:1.2rem}

/* ===== v3: fold header, Gray-rhythm column system ===== */
:root{--col:72rem;--colw:86rem;--barh:4.6rem}
html{scroll-padding-top:8rem}
.fold-space{display:none}
.js .fold-space{display:block;height:var(--h0,100vh)}
.js .stage.fold{position:fixed;z-index:30;top:var(--ft,3.6rem);left:var(--inset);right:var(--inset);height:var(--fh,auto);margin:0;border-radius:var(--fr,var(--r));will-change:height,top;contain:layout paint}
.stage.fold .bar{height:var(--bh,7rem);padding-top:0;padding-bottom:0}
.fold-c{position:relative;opacity:var(--fo,1);transform:translateY(var(--fy,0));transform-origin:50% 0}
.js .stage.fold .fold-c{position:absolute;left:0;right:0;top:0}
.stage.fold.folded .fold-c{visibility:hidden}
.stage.fold.folded{box-shadow:0 14px 34px -22px #000c}

/* marquee */
.marquee{overflow:hidden;padding:clamp(2.4rem,4vw,3.4rem) 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-t{display:flex;gap:2.2rem;width:max-content;animation:mq 46s linear infinite;align-items:center}
.mq-t span{font-size:1.5rem;font-weight:600;letter-spacing:-.01em;color:#191919b8;white-space:nowrap}
.mq-t span:nth-child(4n+1){font-family:var(--mono);font-weight:400;letter-spacing:.08em;text-transform:uppercase;font-size:1.15rem}
.mq-t span:nth-child(4n+3){font-style:italic;font-weight:500;font-family:Georgia,"Times New Roman",serif;font-size:1.65rem}
.mq-t i{font-style:normal;color:#19191940}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-t{animation:none}}

/* punch statement (Gray-scale title beat) */
.punch{padding:clamp(2rem,5vw,5rem) var(--gut) 0;text-align:center}
.punch p{max-width:22ch;font-size:clamp(3rem,4.9vw,5.2rem);line-height:1.08;letter-spacing:-.03em;font-weight:500}
.punch .chip.dark{background:var(--night)}

/* drawn film panel (no video) */
.film-wrap{max-width:var(--col);margin:clamp(3rem,5vw,4.5rem) auto 0;padding:0 var(--gut)}
.film-card{position:relative;border-radius:1.5rem;background:var(--night);overflow:hidden;aspect-ratio:16/9}
.film{width:100%;height:100%}
.film .fl-pill{fill:#fffffc;stroke:none}
.film .fl-word{font-family:var(--font);font-weight:700;font-size:40px;letter-spacing:.04em;fill:#191919}
.film .fl-go{fill:#0059ff}.film .fl-arrow{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.film .fl-lab{font-family:var(--font);font-size:12px;letter-spacing:.16em;fill:#fffffc8c;font-weight:500}
.film .fl-cap{font-family:var(--font);font-size:12px;letter-spacing:.22em;fill:#fffffc4d}
.film .fl-line{fill:none;stroke:#fffffc59;stroke-width:1.2}
.film .fl-line2{fill:none;stroke:#fffffc59;stroke-width:1.2}
.film .fl-chip{fill:none;stroke:#fffffc66;stroke-width:1.2}.film .fl-chip.on{fill:#0059ff;stroke:#0059ff}
.film .fl-v{font-family:var(--mono);font-size:15px;letter-spacing:.06em;fill:#fffffcd9}
.film .fl-row{fill:#fffffc0d;stroke:#fffffc1f}
.film .fl-ph{fill:#fffffc33}.film .fl-ph.b{fill:#fffffc66}
.film .fl-st{fill:#fffffc14}.film .fl-st.high{fill:#d33a2c40}.film .fl-st.ctx{fill:#e0662b40}.film .fl-st.med{fill:#d08a1a40}.film .fl-st.low{fill:#3c8f4f40}
.film .fl-stt{font-family:var(--font);font-size:11px;letter-spacing:.12em;fill:#fffffcd9;font-weight:600}
.film .fl-risk.high{fill:#d33a2c}.film .fl-risk.ctx{fill:#e0662b}.film .fl-risk.med{fill:#d08a1a}.film .fl-risk.low{fill:#3c8f4f}
.film-btn{position:absolute;right:1.2rem;bottom:1.2rem;width:2.8rem;height:2.8rem;border-radius:50%;border:0;background:#fffffc1f;color:#fffffc;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}
.film-btn:hover{background:#fffffc33}
@media (prefers-reduced-motion:no-preference){
  .js .film .sq{opacity:0;animation:sq 12s var(--ease) infinite;animation-delay:var(--d,0s)}
  .js .film .typer{animation:type 12s steps(8,end) infinite;animation-delay:.6s}
  .js .film.paused .sq,.js .film.paused .typer{animation-play-state:paused}
  .js .film:not(.playing) .sq,.js .film:not(.playing) .typer{animation-play-state:paused}
}
@keyframes sq{0%{opacity:0;transform:translateY(8px)}3%{opacity:1;transform:none}86%{opacity:1}92%,100%{opacity:0}}
@keyframes type{0%{width:0}8%,88%{width:420px}94%,100%{width:0}}
.rm .film .typer,.no-js .film .typer{width:420px}

/* column system */
.col{max-width:calc(var(--col) + 2*var(--gut));margin:0 auto;padding:clamp(5rem,8vw,8rem) var(--gut) 0}
.col.wide{max-width:calc(var(--colw) + 2*var(--gut))}
.sec{padding-top:clamp(7rem,11vw,11rem)}
.intro-h{font-size:clamp(3.8rem,7vw,7.4rem);line-height:1.02;letter-spacing:-.035em}
.intro-h .chip.blue{height:.82em}
.tabs{top:calc(var(--barh) + 1.2rem);margin-top:3rem;gap:clamp(1.4rem,3vw,2.8rem);background:linear-gradient(var(--paper) 72%,#fffffc00)}
.tabs a{font-size:1.45rem}
.sub-h{font-size:2.1rem;letter-spacing:-.015em;font-weight:500;margin:0 0 2rem}
.sec-h{font-size:clamp(2.4rem,3.4vw,3.2rem);letter-spacing:-.025em;line-height:1.1;margin:0 0 1.4rem;font-weight:500}
.intro-p{font-size:1.3rem;color:#191919c7;max-width:46em;margin:0 0 2.4rem}
.note{font-size:1.05rem;color:var(--muted);margin:2rem 0 0;max-width:60em}
.note a{color:inherit}
.small{font-size:1rem}

/* overview */
.ov{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.record{aspect-ratio:4/5;padding:1.4rem;border-radius:1.25rem}
.record .rc{transform:rotate(-2.5deg);transition:transform 1.2s var(--ease)}
.record.in .rc{transform:rotate(0)}
.record .rc .mk{font-size:2.3rem}
.ov-t h3{font-size:clamp(2rem,2.4vw,2.4rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 1.4rem}
.ov-t p{font-size:1.28rem;line-height:1.55;color:#191919c7;margin:0 0 1rem}
.ov-t .sig{font-family:var(--mono);font-size:1rem;color:var(--muted);margin-top:1.6rem}

/* key-value hairline table */
.kvt{margin-top:clamp(3rem,5vw,4.5rem)}
.kvt>div,.kv>div{display:flex;justify-content:space-between;gap:2rem;padding:1.15rem 0;border-bottom:1px solid var(--hair);font-size:1.22rem;position:relative}
.kvt>div>span:first-child,.kv>div>span:first-child{color:var(--muted);flex:none}
.kvt>div>span:last-child,.kv>div>span:last-child{text-align:right}
.kvt a{color:var(--blue);text-decoration:none}.kvt a:hover{text-decoration:underline}
.kvt b,.glance b{font-weight:inherit;font-variant-numeric:tabular-nums}
.kvt .tag{font-style:normal;background:var(--panel)}
@media (prefers-reduced-motion:no-preference){
  .js .kvt.reveal>div{border-bottom-color:transparent}
  .js .kvt.reveal>div::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--hair);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-io)}
  .js .kvt.reveal.in>div::after{transform:none}
  .js .kvt.reveal.in>div:nth-child(2)::after{transition-delay:.07s}.js .kvt.reveal.in>div:nth-child(3)::after{transition-delay:.14s}.js .kvt.reveal.in>div:nth-child(4)::after{transition-delay:.21s}.js .kvt.reveal.in>div:nth-child(5)::after{transition-delay:.28s}.js .kvt.reveal.in>div:nth-child(6)::after{transition-delay:.35s}.js .kvt.reveal.in>div:nth-child(7)::after{transition-delay:.42s}.js .kvt.reveal.in>div:nth-child(8)::after{transition-delay:.49s}
}

/* glance grid (kept, tightened) */
.glance{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--ink)}
.glance>div{padding:1.6rem 1.4rem 2rem 0;border-bottom:1px solid var(--hair)}
.glance>div:not(:nth-child(3n+1)){padding-left:1.4rem;border-left:1px solid var(--hair)}
.glance>div>b{display:block;font-size:clamp(3.4rem,5vw,4.6rem);letter-spacing:-.045em;line-height:1;font-weight:500}
.glance>div>span{display:block;margin-top:.8rem;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* promise + audience */
.promise{margin-top:clamp(3rem,5vw,4.5rem);border-radius:1.25rem}
.promise .pi>div{display:flex;flex-direction:column;gap:.3rem}
.aud{margin-top:clamp(4rem,6vw,6rem)}
.aud h3{font-size:1.75rem;margin:0 0 1rem;letter-spacing:-.012em}
.aud p{font-size:1.25rem;line-height:1.55;color:#191919c7;margin:0 0 1rem;max-width:48em}
.aud a{color:var(--blue)}

/* reading project cards */
.pcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.pcard{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:.35rem;width:100%}
.pcard .pv{position:relative;display:block;border-radius:1.1rem;background:var(--night);aspect-ratio:3/4;overflow:hidden;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.pcard .pv svg{position:absolute;inset:18% 6% auto;width:88%;height:auto}
.pcard .pv .tag{position:absolute;left:.9rem;bottom:.9rem;font-size:.85rem}
.pcard:hover .pv,.pcard:focus-visible .pv{transform:translateY(-6px);box-shadow:0 24px 40px -26px #000c}
.pcard .pt{font-size:1.3rem;font-weight:500;margin-top:.7rem;letter-spacing:-.01em}
.pcard .pk{font-size:1.05rem;color:var(--muted)}
.pcard:focus-visible{outline:none}.pcard:focus-visible .pv{outline:2px solid var(--blue);outline-offset:3px}
.reading-sheet{position:fixed;inset:var(--inset) var(--inset) var(--inset) auto;width:min(46rem,calc(100% - 2*var(--inset)));height:auto;margin:0;border-radius:var(--r);background:var(--paper);color:var(--ink);padding:0;overflow:auto}
.reading-sheet[open]{animation:slidein .55s var(--ease)}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}
.reading-sheet .close-btn{position:sticky;top:1.2rem;float:right;margin:1.2rem 1.2rem 0 0;z-index:2}
.rd-in{padding:1.6rem 2.2rem 3rem}
.rd-in:focus{outline:0}
.rd-vis{border-radius:1.25rem;background:var(--night);padding:2rem 1.4rem;position:relative;margin-bottom:1.8rem}
.rd-vis .tag{position:absolute;left:1rem;top:1rem}
.rd-h{font-size:2.4rem;letter-spacing:-.02em;margin:.5rem 0 1.2rem}
.rd-in>p{font-size:1.22rem;line-height:1.55;color:#191919cc}
.kv{margin-top:1.6rem;border-top:1px solid var(--ink)}
.kv>div>span:last-child{max-width:65%}

/* info rows (accordion) */
.rows{margin-top:1rem}
.row{border-bottom:1px solid var(--hair)}
.row summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:1.45rem 0;font-size:1.55rem;font-weight:500;letter-spacing:-.012em;cursor:pointer}
.row summary::-webkit-details-marker{display:none}
.chev{width:.7rem;height:.7rem;border-right:1.5px solid #19191999;border-bottom:1.5px solid #19191999;transform:rotate(45deg) translate(-2px,-2px);transition:transform .45s var(--ease)}
.row[open] .chev{transform:rotate(225deg)}
.row-b{padding:0 3rem 1.6rem 0}
.row-b p{margin:0;font-size:1.22rem;line-height:1.58;color:#191919c7}
details .row-b,details .st-b,details .a{animation:rise .5s var(--ease)}

/* process rows with timeline motion */
.mini-plate{border-radius:1.25rem;background:var(--night);padding:1.2rem 1rem .4rem;margin-bottom:2.4rem}
.st-list{list-style:none;margin:0;padding:0 0 0 2.2rem;position:relative;border-top:1px solid var(--hair)}
.st-line{position:absolute;left:.45rem;top:0;bottom:0;width:1px;background:var(--hair)}
.st-line i{position:absolute;inset:0;background:var(--blue);transform-origin:top;transform:scaleY(var(--p,0))}
.st-row{border-bottom:1px solid var(--hair);position:relative}
.st-row::before{content:"";position:absolute;left:-2.2rem;top:1.95rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--paper);border:1px solid #19191940;transition:all .6s var(--ease);z-index:1}
.st-row.lit::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px #0059ff1f}
.st-row summary{list-style:none;display:grid;grid-template-columns:11rem 1fr auto;gap:1.4rem;align-items:center;padding:1.45rem 0;cursor:pointer}
.st-row summary::-webkit-details-marker{display:none}
.st-n{display:flex;flex-direction:column;font-size:1rem;color:var(--muted);line-height:1.3}
.st-n b{font-weight:400}.st-n em{font-style:normal;font-family:var(--mono);font-size:.92rem;transition:color .6s}
.st-row.lit .st-n em{color:var(--blue)}
.st-t{font-size:1.55rem;font-weight:500;letter-spacing:-.012em;transition:color .6s;color:#19191973}
.st-row.lit .st-t{color:var(--ink)}
.rm .st-t,.no-js .st-t{color:var(--ink)}
.st-b{display:grid;grid-template-columns:11rem 1fr;gap:1.4rem;padding:0 3rem 1.8rem 0}
.st-b p{grid-column:2;margin:0;font-size:1.2rem;line-height:1.55;color:#191919c7}
.st-b ul{grid-column:2;margin:.8rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.st-b li{font-size:1rem;padding:.35rem .85rem;border-radius:99px;background:var(--panel)}
.dark-on-paper{max-width:none}

/* why tiles */
.tiles{grid-template-columns:repeat(2,1fr);gap:2.2rem 1.4rem;margin-top:0}
.tile .tv{aspect-ratio:4/3;border-radius:1.25rem}
.tile p{font-size:1.15rem}
.ui .live{color:#2f8a46;letter-spacing:.06em}

/* field guide links */
.fgs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.fg{display:flex;flex-direction:column;gap:.6rem;padding:1.6rem 1.4rem 2rem 0;border-bottom:1px solid var(--hair);text-decoration:none;transition:background .3s}
.fg+.fg{padding-left:1.4rem;border-left:1px solid var(--hair)}
.fg b{font-weight:500;font-size:1.4rem;letter-spacing:-.01em;line-height:1.25}
.fg .muted{font-size:1.05rem}
.fg:hover b{color:var(--blue)}
.alist{margin-top:0}
.alist a{grid-template-columns:4rem 1fr auto}
.alist h3{font-size:1.75rem;margin-top:.35rem}

/* inner pages: readings */
.rx{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.6rem,4vw,3.4rem);padding:clamp(3rem,5vw,4.5rem) 0;border-bottom:1px solid var(--hair);align-items:start}
.rx:first-child{border-top:1px solid var(--ink)}
.rx-vis{position:sticky;top:calc(var(--barh) + 2rem);border-radius:1.25rem;background:var(--night);padding:3.4rem 1.4rem 2rem}
.rx-vis .tag{position:absolute;left:1rem;top:1rem}
.rx h2{font-size:clamp(2rem,2.8vw,2.6rem);margin:.6rem 0 .4rem}
.rx .kick{color:var(--muted);font-size:1.25rem;margin:0 0 1.4rem}
.rx-t>p{font-size:1.22rem;line-height:1.58;color:#191919cc;margin:0 0 1rem}

/* inner: process */
.sx-list{position:relative;margin-top:3rem;padding-left:2.2rem;border-top:1px solid var(--ink)}
.sx{display:grid;grid-template-columns:7rem 1.4fr 1fr;gap:1.6rem;padding:2.6rem 0;border-bottom:1px solid var(--hair);position:relative}
.sx::before{content:"";position:absolute;left:-2.2rem;top:3.2rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--paper);border:1px solid #19191940;transition:all .6s var(--ease);z-index:1}
.sx.lit::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px #0059ff1f}
.sx .big{font-size:3.6rem;font-weight:500;letter-spacing:-.04em;line-height:1;color:#19191926;transition:color .8s var(--ease)}
.sx.lit .big{color:var(--blue)}
.sx .tm{margin:0 0 .5rem;font-family:var(--mono);font-size:.95rem;color:var(--blue)}
.sx h2{font-size:2rem;margin:0 0 .8rem}
.sx p{font-size:1.2rem;line-height:1.55;color:#191919c7;margin:0}
.sx ul{list-style:none;margin:0;padding:0}
.sx li{font-size:1.1rem;padding:.6rem 0;border-bottom:1px solid var(--hair);color:#191919b3}
.sx li:first-child{padding-top:0}

/* inner: articles */
.art{display:grid;grid-template-columns:15rem 1fr;gap:clamp(2rem,4vw,4rem);max-width:calc(var(--colw) + 2*var(--gut))}
.prose section{scroll-margin-top:8rem}

/* inner hero plates */
.hero.inner + .plate-wrap,.fold-c .plate-wrap{margin-top:clamp(2.6rem,5vw,4.5rem)}

@media (max-width:1100px){
  .pcards{grid-template-columns:repeat(2,1fr)}
  .art{grid-template-columns:1fr}
  .toc{display:none}
}
@media (max-width:820px){
  :root{--barh:4rem}
  .stage.fold .bar{padding-left:1.3rem;padding-right:1.1rem}
  .punch p{font-size:clamp(2.5rem,9.6vw,3.6rem);max-width:15ch}
  .film-wrap{padding:0 var(--gut)}
  .film-card{aspect-ratio:4/3}
  .film{transform:scale(1.25);transform-origin:50% 40%}
  .tabs a{font-size:1.25rem}
  .ov{grid-template-columns:1fr}
  .record{aspect-ratio:auto;min-height:24rem}
  .kvt>div,.kv>div{font-size:1.12rem;gap:1rem}
  .kv>div>span:last-child{max-width:70%}
  .glance{grid-template-columns:1fr 1fr}
  .glance>div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .glance>div:nth-child(even){padding-left:1.2rem;border-left:1px solid var(--hair)}
  .pcards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gut));padding:0 var(--gut) 1rem;scrollbar-width:none;gap:.9rem}
  .pcards::-webkit-scrollbar{display:none}
  .pcards li{flex:0 0 72%;scroll-snap-align:start}
  .reading-sheet{inset:auto 0 0 0;width:100%;max-height:88svh;border-radius:1.5rem 1.5rem 0 0}
  .reading-sheet[open]{animation:sheetup .5s var(--ease)}
  .rd-in{padding:1rem 1.4rem 3rem}
  .row summary{font-size:1.3rem}
  .row-b{padding-right:0}
  .st-list{padding-left:1.8rem}
  .st-row::before{left:-1.8rem}
  .st-line{left:.42rem}
  .st-row summary{grid-template-columns:1fr auto;gap:.3rem 1rem}
  .st-n{grid-column:1;flex-direction:row;gap:.8rem}
  .st-t{grid-column:1;font-size:1.4rem}
  .st-row summary .plus{grid-row:1/3;grid-column:2}
  .st-b{grid-template-columns:1fr;padding-right:0}
  .st-b p,.st-b ul{grid-column:1}
  .tiles{grid-template-columns:1fr}
  .fgs{grid-template-columns:1fr}
  .fg+.fg{padding-left:0;border-left:0}
  .rx{grid-template-columns:1fr}
  .rx-vis{position:relative;top:0}
  .sx-list{padding-left:1.8rem}
  .sx::before{left:-1.8rem;top:2.9rem}
  .sx{grid-template-columns:1fr;gap:.8rem;padding:2.2rem 0}
  .sx .big{font-size:2.6rem}
  .intro-h{font-size:clamp(3.2rem,12.5vw,4.6rem)}
}
@keyframes sheetup{from{transform:translateY(40px);opacity:0}}
.glance{gap:0!important}
.hero{padding-top:clamp(9.5rem,19vh,15rem)}
.hero.inner{padding-top:clamp(9.5rem,17vh,13rem)}
.record,.tile .tv,.pcard .pv,.rx-vis,.rd-vis,.mini-plate,.film-card{background-color:var(--night);background-image:linear-gradient(#fffffc08 1px,transparent 1px),linear-gradient(90deg,#fffffc08 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
@media (max-width:820px){.hero{padding-top:9rem}.hero.inner{padding-top:8.5rem}}
.promise .cta span,.promise .cta{color:var(--paper)}
.promise .cta .dot{color:#fff}
.tabs{top:calc(var(--barh) + 10px);padding-top:1.4rem}
@media (max-width:720px){.alist a{grid-template-columns:1fr auto;gap:1rem;padding:1.5rem 0}.alist .n{grid-column:1/-1}.alist h3{font-size:1.4rem}.alist p{font-size:1rem}}
