/* KNGHT — heraldic monochrome. Sable ground, argent type, one blade of light.
   Layout: full-bleed cinematic plates, a sticky blade that measures the seven layers,
   a horizontal gallery for the worlds. */
:root{
  --sable:#000;
  --sable-2:#0a0a0a;
  --sable-3:#121212;
  --vellum:#fff;
  --vellum-2:#f2f2f2;
  --ink:#000;
  --ink-2:#4d4d4d;
  --rule-ink:rgba(0,0,0,.14);
  --rule-ink-strong:rgba(0,0,0,.32);
  --argent:#fff;
  --ash:#a6a6a6;
  --ash-2:#7a7a7a; /* 4.9:1 on black, the AA minimum for small text is 4.5 */
  --rule:rgba(255,255,255,.16);
  --rule-strong:rgba(255,255,255,.32);
  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,4.4vw,64px);
  --wrap:1440px;
  --ease:cubic-bezier(.65,.05,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:76px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--sable);-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h)}
body{margin:0;background:var(--sable);color:var(--argent);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--argent);color:var(--sable)}
:focus-visible{outline:1px solid var(--argent);outline-offset:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--argent);color:var(--sable);padding:10px 16px;font-weight:600;text-decoration:none}
.skip:focus{top:16px}

/* Type */
.eyebrow{display:flex;align-items:center;gap:14px;margin:0;font-size:.78rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.display{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:.94;margin:0;text-wrap:balance}
.display em{font-style:italic;font-weight:400}
h2.display{font-size:clamp(3rem,8vw,8.25rem)}
.numeral{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ash)}

/* Buttons */
.btn{--fill:var(--argent);position:relative;display:inline-flex;white-space:nowrap;align-items:center;gap:14px;min-height:54px;padding:0 28px;border:1px solid var(--argent);border-radius:999px;background:var(--fill);color:var(--sable);font:600 .95rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sable);transform:translateY(101%);border-radius:inherit;transition:transform .55s var(--ease)}
.btn:hover{color:var(--argent)}
.btn:hover::before{transform:translateY(0)}
.btn .arrow{width:18px;height:10px;flex:none;transition:transform .5s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--ghost{--fill:transparent;color:var(--argent)}
.btn--ghost::before{background:var(--argent)}
.btn--ghost:hover{color:var(--sable)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.88rem}
.link{position:relative;display:inline-flex;align-items:center;gap:10px;color:var(--argent);text-decoration:none;font-weight:500;padding-block:6px}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:right;transition:transform .6s var(--ease)}
.link:hover::after{transform:scaleX(0);transform-origin:left}

/* Grain */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* Cursor */

@keyframes draw{to{stroke-dashoffset:0}}

/* Nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;padding-top:env(safe-area-inset-top,0px);transition:transform .6s var(--ease),background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(0,0,0,.72);backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);border-color:var(--rule)}
.nav.is-hidden{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.nav__end{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.mark{display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px;font:600 1.35rem/1 var(--serif);letter-spacing:.34em;text-decoration:none}
.mark svg{order:2;display:block;width:0;min-width:calc(100% - .34em);height:auto}
.mark svg *{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
/* The missing I: on hover the blade is drawn up out of the name, and it reads KNIGHT for a moment */
.mark{position:relative}
.mark__word{display:block;white-space:nowrap}
.mark__i{display:inline-block;width:0;overflow:visible;white-space:nowrap}
.mark__i b{display:inline-block;font:inherit;clip-path:inset(0 0 100% 0);transform:translateY(.5em);transition:clip-path .55s var(--ease) .12s,transform .55s var(--ease) .12s}
.mark__r{display:inline-block;transition:transform .5s var(--ease)}
.mark svg{transition:clip-path .45s var(--ease),opacity .45s}
.mark__say{position:absolute;left:0;bottom:-1px;font:500 .5rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--ash);-webkit-text-fill-color:var(--ash);opacity:0;transform:translateY(3px);transition:opacity .4s,transform .4s;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .mark:hover .mark__word,.mark:focus-visible .mark__word{color:#fff;-webkit-text-fill-color:#fff}
  .mark:hover .mark__r,.mark:focus-visible .mark__r{transform:translateX(.82em)}
  .mark:hover .mark__i b,.mark:focus-visible .mark__i b{clip-path:inset(0 0 0 0);transform:none}
  .mark:hover svg,.mark:focus-visible svg{clip-path:inset(0 100% 0 0);opacity:0}
  .mark:hover .mark__say,.mark:focus-visible .mark__say{opacity:1;transform:none;transition-delay:.55s}
  .mark.is-holding .mark__i b{animation:iGlow .9s linear forwards}
}
@keyframes iGlow{to{text-shadow:0 0 14px #fff,0 0 4px #fff}}
/* A touch screen has no hover: holding the mark draws the blade out of the name the same way (site.js sets .is-drawn),
   and the I fills with light while the thumb stays. No link preview or text selection under the thumb, or the hold is lost. */
.mark{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.mark.is-drawn .mark__word{color:#fff;-webkit-text-fill-color:#fff}
.mark.is-drawn .mark__r{transform:translateX(.82em)}
.mark.is-drawn .mark__i b{clip-path:inset(0 0 0 0);transform:none}
.mark.is-drawn svg{clip-path:inset(0 100% 0 0);opacity:0}
.mark.is-drawn .mark__say{opacity:1;transform:none;transition-delay:.55s}
.mark.is-drawn.is-holding .mark__i b{animation:iGlow .9s linear forwards}
@media (prefers-reduced-motion: reduce){.mark__i b,.mark__r,.mark svg,.mark__say{transition:none}}
.nav ul{display:flex;gap:clamp(20px,3vw,40px);list-style:none;margin:0;padding:0}
.nav ul a{position:relative;display:inline-block;text-decoration:none;color:var(--ash);font-size:.92rem;overflow:hidden;transition:color .3s}
.nav ul a:hover,.nav ul a[aria-current="true"]{color:var(--argent)}
/* The primary bar only (not the panels under it): six links and the button fit from 1000 px up with room to spare. Between 901 and 1000 px (a classic scrollbar takes 15 px) the gaps close a little, so no label breaks onto two lines. */
.nav > .wrap > nav a{white-space:nowrap}
@media (min-width:901px) and (max-width:1000px){.nav > .wrap > nav ul{gap:18px}}

/* Hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-1;will-change:transform}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,0) 70%),linear-gradient(0deg,#000 0%,rgba(0,0,0,0) 32%)}
.hero__inner{position:relative;width:100%;padding-top:calc(var(--nav-h) + 8vh);padding-bottom:clamp(36px,6vh,72px)}
.hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,min(6.6vw,11.5svh),8.2rem);line-height:.9;letter-spacing:-.03em;margin:24px 0 0}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.hero__title .line > span{display:block}
.hero__title em{font-style:italic}
.hero__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px 64px;margin-top:clamp(24px,4vh,48px);padding-top:28px;border-top:1px solid var(--rule)}
.hero__lede{margin:0;max-width:54ch;color:var(--ash);font-size:clamp(1rem,1.2vw,1.12rem)}
.hero__lede strong{color:var(--argent);font-weight:500}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.hero__meta{position:absolute;right:var(--gutter);top:calc(var(--nav-h) + 4vh);display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);text-align:right;font-variant-numeric:tabular-nums}

/* Hero intro choreography. Every word is on the first frame: nothing waits on an opacity or a script.
   The text only settles a short way upward. A headline line starts .08em low, which keeps the descenders
   inside its mask (the tightest line, "to get it wrong.", has .086em to spare at 1280 px). */
.js .hero__title .line > span{transform:translateY(.08em)}
.js .hero [data-hero-fade]{transform:translateY(16px)}
.is-loaded .hero__title .line > span{transform:none;transition:transform 1.25s var(--ease-out)}
.is-loaded .hero__title .line:nth-child(2) > span{transition-delay:.08s}
.is-loaded .hero__title .line:nth-child(3) > span{transition-delay:.16s}
.is-loaded .hero__title .line:nth-child(4) > span{transition-delay:.24s}
.is-loaded .hero [data-hero-fade]{transform:none;transition:transform 1.2s .2s var(--ease-out)}
.js .hero__media{transform:scale(1.08)}
.is-loaded .hero__media{transform:scale(1);transition:transform 2.6s var(--ease-out)}
.is-loaded.is-scrolling .hero__media{transition:none}
@media (prefers-reduced-motion:reduce){.js .hero__title .line > span,.js .hero [data-hero-fade],.js .hero__media{transform:none}}

/* Marquee */
.marquee{position:relative;border-block:1px solid var(--rule);padding-block:clamp(18px,3vw,34px);overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:inline-flex;align-items:center;animation:marquee 38s linear infinite}
.marquee__group{display:inline-flex;align-items:center}
.marquee__item{font:400 clamp(2.6rem,7vw,6.5rem)/1 var(--serif);letter-spacing:-.02em;padding-inline:clamp(18px,2.4vw,40px)}
.marquee__item:nth-child(4n+3){font-style:italic;color:transparent;-webkit-text-stroke:1px var(--argent)}
.marquee__sep{width:clamp(10px,1.2vw,16px);height:auto;flex:none;opacity:.7}
.marquee__sep *{fill:none;stroke:var(--argent);stroke-width:6}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Thesis */
.thesis{padding-block:clamp(120px,18vw,260px)}
.thesis .wrap{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:40px}
.thesis__text{font:400 clamp(1.9rem,4.1vw,4.1rem)/1.08 var(--serif);letter-spacing:-.015em;margin:0;text-wrap:pretty}
.thesis__text .w{color:var(--ash-2);transition:color .5s}
.thesis__text .w.lit{color:var(--argent)}
.thesis__text em{font-style:italic}
.thesis__aside{display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.thesis__stats{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.thesis__stats li{display:grid;gap:4px;padding-top:14px;border-top:1px solid var(--rule)}
.thesis__stats b{font:300 3.4rem/1 var(--serif);font-style:italic}
.thesis__stats span{font-size:.85rem;color:var(--ash);line-height:1.45}

/* Worlds (horizontal) */
.worlds{position:relative}
.worlds__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column}
.worlds__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:calc(var(--nav-h) + 3vh)}
.worlds__count{font:italic 400 1.4rem/1 var(--serif);color:var(--ash);font-variant-numeric:tabular-nums}
.worlds__count b{color:var(--argent);font-weight:400}
.worlds__track{flex:1;display:flex;align-items:center;gap:clamp(72px,9vw,160px);padding-inline:var(--gutter);will-change:transform}
.worlds__intro{flex:none;width:min(560px,80vw);display:flex;flex-direction:column;gap:28px}
.worlds__intro p{margin:0;color:var(--ash);max-width:34ch;font-size:1.1rem}
.world{flex:none;position:relative;display:grid;grid-template-columns:auto clamp(280px,25vw,400px);gap:clamp(24px,2.6vw,44px);align-items:end;text-decoration:none}
.world__plate{position:relative;width:clamp(220px,min(30vw,calc((100svh - 280px) * .8)),460px);aspect-ratio:4/5;overflow:hidden;background:var(--sable-3)}
.world__plate img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.6s var(--ease-out),filter 1s;filter:grayscale(1) contrast(1.05) brightness(.86)}
@media (hover:hover){.world:hover .world__plate img{transform:scale(1.02);filter:grayscale(1) contrast(1.1) brightness(1)}}
.world__plate::after{content:"";position:absolute;inset:0;border:1px solid var(--rule);pointer-events:none}
.world__body{display:flex;flex-direction:column;gap:18px;padding-bottom:6px;min-width:0}
.world__n{font:italic 400 clamp(1.4rem,2vw,1.9rem)/1 var(--serif);color:var(--ash)}
.world__name{font:400 clamp(2.8rem,4.9vw,5.4rem)/.92 var(--serif);letter-spacing:-.03em;margin:0;text-wrap:balance}
.world__name em{font-style:italic}
.world__desc{margin:0;color:var(--ash);max-width:36ch}
.world__sector{display:inline-flex;align-self:flex-start;padding:7px 14px;border:1px solid var(--rule-strong);border-radius:999px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase}
.worlds__bar{height:1px;background:var(--rule);margin:0 var(--gutter) clamp(24px,4vh,44px);position:relative}
.worlds__bar i{position:absolute;inset:0;background:var(--argent);transform-origin:left;transform:scaleX(0)}

/* Layers: the seven in brief, one line each. Every row opens that layer's own page (/layers/<id>/). */
.layers{position:relative;padding-block:clamp(72px,9vw,140px);border-top:1px solid var(--rule)}
.layers .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px)}
.layers__aside{align-self:start;display:flex;flex-direction:column;gap:24px}
.layers__aside p{margin:0;color:var(--ash);max-width:40ch}
.lrows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.lrows > li{position:relative;display:grid;grid-template-columns:2rem 24px minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding-block:18px;border-bottom:1px solid var(--rule)}
.lrows > li::after{content:"\2192";content:"\2192"/"";grid-row:1;grid-column:4;color:var(--argent);opacity:.5;transition:transform .3s var(--ease-out),opacity .3s}
.lrow__n{font:italic 400 1.2rem/1 var(--serif);color:var(--ash)}
.lrow__sigil{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;color:var(--argent);opacity:.8}
.lrow__name{margin:0;font:400 clamp(1.7rem,2.6vw,2.4rem)/1 var(--serif);letter-spacing:-.01em}
.lrow__name a{color:inherit;text-decoration:none}
.lrow__name a::after{content:"";position:absolute;inset:0}
.lrow__name a:focus-visible{outline:1px solid var(--argent);outline-offset:4px}
.lrow__what{grid-column:1/-1;margin:0;color:var(--ash);font-size:.95rem;line-height:1.5;max-width:56ch}
/* The squire's lines under Machinery sit above the row's stretched link, so they read and select as text. */
.lrow__ai{grid-column:1/-1;position:relative;z-index:1;padding-top:8px}
@media (hover:hover){.lrows > li:hover::after{opacity:1;transform:translateX(4px)}}
@media (min-width:901px){.lrow__what,.lrow__ai{grid-column:3/-1}}
@media (prefers-reduced-motion:reduce){.lrows > li::after{transition:none}.lrows > li:hover::after{transform:none}}

/* Engage: the one vellum page in a sable book */
.engage{position:relative;padding-block:clamp(110px,12vw,180px);background:var(--vellum);color:var(--ink);clip-path:inset(0 var(--clip-x,0px) round var(--clip-r,0px))}
.engage ::selection{background:var(--ink);color:var(--vellum)}
.engage__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;align-items:end;margin-bottom:clamp(48px,6vw,88px)}
.engage__head p{margin:0;color:var(--ink-2);max-width:40ch;font-size:1.12rem;justify-self:end}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-ink-strong)}
.offer{position:relative;display:flex;flex-direction:column;gap:20px;padding:clamp(32px,3.4vw,52px) clamp(24px,2.8vw,44px) clamp(36px,4vw,56px);min-height:460px;border-bottom:1px solid var(--rule-ink-strong);isolation:isolate;overflow:hidden;transition:color .6s var(--ease)}
.offer + .offer{border-left:1px solid var(--rule-ink-strong)}
.offer::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease)}
@media (hover:hover){
  .offer:hover{color:var(--vellum)}
  .offer:hover::before{transform:scaleY(1)}
  .offer--lead:hover .offer__flag{background:var(--vellum);color:var(--ink)}
}
.offer--lead .offer__top{margin-top:14px}
.offer__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.offer__n{font:italic 400 1.3rem var(--serif);opacity:.6}
.offer__terms{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border:1px solid currentColor;border-radius:999px;opacity:.85}
.offer h3{font:400 clamp(2.6rem,4vw,3.8rem)/.95 var(--serif);letter-spacing:-.02em;margin:auto 0 0}
.offer h3 em{font-style:italic}
.offer p{margin:0;max-width:34ch;opacity:.75}
.offer--lead{background:var(--vellum-2)}
.offer--lead .offer__flag{position:absolute;top:0;left:clamp(24px,2.8vw,44px);background:var(--ink);color:var(--vellum);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;padding:5px 10px;transition:background .6s,color .6s}
.engage .link{color:inherit}
.offer__link{align-self:flex-start;font-size:.92rem}
.offer__facts{list-style:none;margin:0;padding:0;border-top:1px solid currentColor;font-size:.92rem}
.offer__facts li{padding:10px 0;border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent);opacity:.85}
.offer__facts b{font:500 1.25rem/1 var(--serif);margin-right:6px;opacity:1}

/* Score your world */
.score{padding-block:clamp(110px,12vw,180px);border-top:1px solid var(--rule)}
.score__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:clamp(48px,6vw,80px)}
.score__head .eyebrow{grid-column:1/-1}
.score__head > p:not(.eyebrow){margin:0;color:var(--ash);max-width:42ch;font-size:1.12rem;justify-self:end}
.score__body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center;border-top:1px solid var(--rule-strong);padding-top:clamp(36px,4vw,56px)}
.quiz,.result{grid-column:1;grid-row:1;min-width:0}
.quiz{min-height:440px}
.quiz__bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.quiz__step b{color:var(--argent);font-weight:500}
.quiz__back{background:none;border:0;padding:8px 0;color:var(--ash);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:color .3s}
.quiz__back:hover{color:var(--argent)}
.quiz__back:disabled{opacity:.3;cursor:default}
.no-js .quiz__bar{display:none}
.q{border:0;margin:0 0 56px;padding:0;min-width:0}
.js .q{display:none;margin:0}
.js .q.is-on{display:block;animation:qIn .8s var(--ease-out)}
@keyframes qIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.q legend{display:flex;flex-direction:column;gap:18px;padding:0;margin-bottom:36px}
.q__layer{font:italic 400 1.35rem var(--serif);color:var(--ash)}
.q__text{font:400 clamp(1.9rem,3.2vw,3.1rem)/1.06 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.q__opts{display:grid;gap:10px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:62px;padding:0 26px;background:transparent;border:1px solid var(--rule-strong);border-radius:999px;color:var(--argent);font:500 1rem var(--sans);text-align:left;cursor:pointer;transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease-out)}
.opt::after{content:"\2192";opacity:.4;transition:opacity .3s,transform .4s var(--ease-out)}
@media (hover:hover){
  .opt:hover{border-color:var(--argent);transform:translateX(6px)}
  .opt:hover::after{opacity:1;transform:translateX(4px)}
}
.opt[aria-pressed="true"]{background:var(--argent);color:var(--sable);border-color:var(--argent)}
.result__band{font:italic 400 clamp(3.6rem,7.4vw,7rem)/.9 var(--serif);letter-spacing:-.03em;margin:22px 0 20px}
.result__blurb{color:var(--ash);max-width:44ch;margin:0 0 32px;font-size:1.1rem}
.result__weak{display:grid;gap:6px;padding:24px 0;border-block:1px solid var(--rule);margin-bottom:36px}
.result__weak span{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.result__weak b{font:400 2.6rem/1 var(--serif)}
.result__weak p{margin:6px 0 0;color:var(--ash);max-width:46ch}
.result .link{background:none;border:0;font:inherit;font-weight:500;cursor:pointer}
.result__note{margin:28px 0 0;font-size:.84rem;color:var(--ash-2)}
.js .result:not([hidden]){animation:qIn .9s var(--ease-out)}
.dial{grid-column:2;grid-row:1;position:relative;width:min(100%,460px);aspect-ratio:1;justify-self:center}
.no-js .dial{display:none}
.dial svg{width:100%;height:100%;overflow:visible}
.dial .seg-track{fill:none;stroke:var(--rule);stroke-width:9;transition:stroke .4s}
.dial .seg-track.is-now{stroke:var(--rule-strong);animation:segPulse 1.6s ease-in-out infinite}
.dial.is-away .seg-track.is-now{animation-play-state:paused} /* out of view (site.js) */
@keyframes segPulse{50%{stroke:rgba(255,255,255,.5)}}
.dial .seg-fill{fill:none;stroke:var(--argent);stroke-width:9;transition:stroke-dashoffset 1.2s var(--ease-out)}
.dial .seg-label{fill:var(--ash);font:500 8px var(--sans);letter-spacing:.14em;text-transform:uppercase;transition:fill .4s}
.dial .seg-label.is-now{fill:var(--argent)}
.dial__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.dial__score{display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .5s var(--ease-out),transform .6s var(--ease-out)}
.dial__score b{font:300 clamp(4.4rem,8.6vw,7.6rem)/.8 var(--serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.03em}
.dial__score span{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ash)}


/* Foil sheen: a slow glint across the few words that carry the brand */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sheen{background-image:linear-gradient(105deg,var(--argent) 0%,var(--argent) 40%,#8c8c8c 46%,#fff 50%,#9d9d9d 54%,var(--argent) 60%,var(--argent) 100%);background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-inline:.06em;margin-inline:-.06em;animation:sheen 9s var(--ease) infinite}
  .footer__word span.sheen{padding-inline:0;margin-inline:0}
  .footer__word--still span{--gx:160%;background:linear-gradient(100deg,#9c9c9c 0%,#dcdcdc calc(var(--gx) - 22%),#fff var(--gx),#dcdcdc calc(var(--gx) + 22%),#8f8f8f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .footer__word--still span:nth-child(3){--gx:42%}.footer__word--still span:nth-child(n+4){--gx:-60%} /* the homepage's steel with the light at the centre */
  .footer__word span:nth-child(2){animation-delay:.12s}.footer__word span:nth-child(3){animation-delay:.24s}.footer__word span:nth-child(4){animation-delay:.36s}.footer__word span:nth-child(5){animation-delay:.48s}
}
@keyframes sheen{0%{background-position:100% 0}24%,100%{background-position:0 0}}
/* With site.js the loop above is played as its sweep alone, once a cycle while the word is in view, so nothing animates
   through the hold: the same 2.16 s (24% of 9 s), the same ease, and --glint-at starts it at the loop's own point. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sheen[data-glint]{animation:none;background-position:0 0} /* between sweeps: where the loop holds */
  .sheen[data-glint="a"]{animation:sheenA 2.16s var(--ease) var(--glint-at,0s) both}
  .sheen[data-glint="b"]{animation:sheenB 2.16s var(--ease) var(--glint-at,0s) both}
}
@keyframes sheenA{from{background-position:100% 0}to{background-position:0 0}}
@keyframes sheenB{from{background-position:100% 0}to{background-position:0 0}}

/* Category picker */
.cats{display:flex;flex-direction:column;gap:10px;margin-top:clamp(18px,3vh,32px)}
.cats__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cats__label{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-right:8px}
.cat{min-height:36px;padding:0 15px;border:1px solid var(--rule-strong);border-radius:999px;background:transparent;color:var(--argent);font:500 .84rem/1 var(--sans);cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.cat[aria-pressed="true"]{background:var(--argent);color:var(--sable);border-color:var(--argent)}
@media (hover:hover){.cat:hover{border-color:var(--argent)}}
.cats__rules{margin:0;font:italic 400 1.15rem/1.3 var(--serif);color:var(--ash);min-height:1.3em}
:root[data-cat]:not([data-cat=""]) .cats__rules{color:var(--argent)}
.world.is-match .world__sector{background:var(--argent);color:var(--sable);border-color:var(--argent)}
.hero__intake{color:var(--argent)}
.engage__intake{display:block;margin-top:10px;color:var(--ink);font-weight:500}
.engage__intake[hidden]{display:none}

/* World cards: link and film */
.world__link{text-decoration:none;color:inherit}
.world__link::after{content:"";position:absolute;inset:0;z-index:1}
.world__link:focus-visible{outline:none}
.world:has(.world__link:focus-visible){outline:1px solid var(--argent);outline-offset:12px}
.world__ink{position:absolute;inset:0}
.world__plate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);filter:grayscale(1) contrast(1.05) brightness(.86);transition:opacity 1.2s,transform 1.6s var(--ease-out),filter 1s}
.world__plate video.is-playing{opacity:1}
@media (hover:hover){.world:hover .world__plate video{transform:scale(1.02);filter:grayscale(1) contrast(1.1) brightness(1)}}
.world__plate img{position:absolute;inset:0}

/* Seal, scorecard, lead */
.seal{width:132px;height:132px;margin:0 0 6px -10px;border-radius:50%;overflow:hidden}
.seal video{width:100%;height:100%;object-fit:cover}
.result .actions{gap:16px 28px}
.lead{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.lead__label{display:block;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-bottom:12px}
.lead__row{display:flex;gap:10px;flex-wrap:wrap}
.lead__row input{flex:1 1 240px;min-width:0;min-height:44px;padding:0 18px;border:1px solid var(--rule-strong);border-radius:999px;background:transparent;color:var(--argent);font:400 1rem var(--sans)}
.lead__row input:focus{outline:none;border-color:var(--argent)}
.lead__row select{flex:0 1 190px;min-height:44px;padding:0 18px;border:1px solid var(--rule-strong);border-radius:999px;background:transparent;color:var(--argent);font:400 1rem var(--sans)}
.lead__row select:focus{outline:none;border-color:var(--argent)}
.lead__row select option{color:#000}
.lead__consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.84rem;color:var(--ash)}
.lead__consent input{margin-top:3px;accent-color:#fff}
.lead__status{margin:10px 0 0;font-size:.88rem;color:var(--argent);min-height:1.2em}
.lead__fine{margin:6px 0 0;font-size:.78rem;color:var(--ash)}

/* Scroll-driven hero */
.hero-scrub .hero-pin{height:190vh;position:relative}
.hero-scrub .hero{position:sticky;top:var(--hero-top,0px);min-height:100svh;height:auto}
.hero-scrub .hero__media{transform:none!important}
.hero-scrub .hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:#000;opacity:calc((var(--hp,0) - .82) * 5.5)}


/* Page transitions between the home page and each world */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s}
::view-transition-group(*){animation-duration:.8s;animation-timing-function:cubic-bezier(.65,.05,.2,1)}

/* World pages */
.worldpage .nav{background:rgba(0,0,0,.72)}
.whero{padding-top:calc(var(--nav-h) + clamp(40px,7vh,88px));padding-bottom:clamp(56px,8vw,110px)}
.whero__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:end}
.plate__note{position:absolute;left:12px;bottom:10px;z-index:2;margin:0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.72;text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none}
.whero__plate{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--sable-3)}
.whero__plate img,.whero__plate video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.whero__plate::after{content:"";position:absolute;inset:0;border:1px solid var(--rule)}
.whero__body{display:flex;flex-direction:column;gap:26px;min-width:0}
.whero__title{font-size:clamp(3.4rem,8.4vw,8.6rem)}
.whero__line{margin:0;color:var(--ash);font-size:1.15rem;max-width:44ch}
.whero__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:12px 0 0;border-top:1px solid var(--rule-strong)}
.whero__meta div{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule)}
.whero__meta dt{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-bottom:6px}
.whero__meta dd{margin:0;font:400 1.25rem/1.3 var(--serif)}
.wsec{border-top:1px solid var(--rule);padding-block:clamp(72px,9vw,130px)}
.wsec__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,80px);align-items:start}
.wsec__text p{margin:0 0 .8em;font:400 clamp(1.6rem,2.8vw,2.5rem)/1.2 var(--serif);letter-spacing:-.01em}
.wsec__text p + p{color:var(--ash)}
.wsec__h{font-size:clamp(2.6rem,5vw,4.6rem);margin-top:20px}
.wsec__aside{position:sticky;top:calc(var(--nav-h) + 4vh)}
@media (max-width:900px){.wsec__aside{position:static}}
.wrules{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.wrules li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:8px 24px;padding:22px 0;border-bottom:1px solid var(--rule)}
.wrules b{font:400 1.6rem/1.15 var(--serif)}
.wrules span{color:var(--ash)}
.chapters{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.chapter{display:grid;grid-template-columns:56px minmax(0,1fr);gap:6px 20px;padding:28px 0;border-bottom:1px solid var(--rule)}
.chapter__n{grid-row:span 3;font:italic 300 2.6rem/1 var(--serif);color:var(--ash)}
.chapter h3{margin:0;font:400 clamp(2rem,3.4vw,3rem)/1 var(--serif)}
.chapter p{margin:6px 0 0;color:var(--ash);max-width:56ch}
.wwork__grid{display:grid;gap:clamp(10px,1.4vw,20px)}
.wwork__row{display:flex;gap:clamp(10px,1.4vw,20px);align-items:flex-start}
.wwork__item{margin:0;min-width:0;overflow:hidden;background:#111}
.wwork__item img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform 1.2s var(--ease-out)}
.wwork__item:hover img{transform:scale(1.03)}
.wwork .eyebrow{margin-bottom:clamp(28px,4vw,56px)}
@media (max-width:700px){.wwork__row{flex-wrap:wrap}.wwork__item{flex-basis:100%!important}}
.wnext{border-top:1px solid var(--rule)}
.wnext__link{position:relative;display:block;overflow:hidden;text-decoration:none;color:inherit;padding-block:clamp(72px,11vw,170px)}
.wnext__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(14px,2vw,26px)}
.wnext__name{font:300 clamp(3.4rem,10vw,10rem)/.92 var(--serif);letter-spacing:-.02em;transition:transform 1s var(--ease-out)}
.wnext__name em{font-style:italic}
.wnext__line{max-width:34ch;color:var(--ash)}
.wnext__plate{position:absolute;right:clamp(16px,6vw,110px);top:50%;width:clamp(180px,24vw,360px);height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) brightness(.55);opacity:.55;transform:translateY(-50%) scale(.94);transition:opacity .9s,transform 1.2s var(--ease-out),filter .9s}
.wnext__link:hover .wnext__plate{opacity:1;filter:grayscale(1) brightness(.9);transform:translateY(-50%) scale(1)}
.wnext__link:hover .wnext__name{transform:translateX(clamp(8px,1.5vw,24px))}
.wnext__foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:22px 64px;border-top:1px solid var(--rule)}
@media (max-width:700px){.wnext__plate{position:relative;top:auto;right:auto;display:block;width:min(60%,260px);margin:40px 16px 0;transform:none;opacity:.8}.wnext__link:hover .wnext__plate{transform:none}}
.wcta{border-top:1px solid var(--rule);padding-block:clamp(96px,12vw,170px);text-align:center}
.wcta .wrap{display:flex;flex-direction:column;align-items:center;gap:26px}
.wcta h2{font-size:clamp(2.8rem,6.4vw,6.4rem)}
.wcta p{margin:0;color:var(--ash);max-width:46ch}
.wcta .wrules{width:min(100%,880px);text-align:left}
@media (max-width:900px){
  .whero__grid,.wsec__grid,.wrules li{grid-template-columns:minmax(0,1fr)}
  .whero__plate{max-width:460px}
  
}

/* Smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* Verdict CTA */
.verdict{position:relative;min-height:100svh;display:grid;place-items:end center;text-align:center;overflow:hidden;isolation:isolate;border-top:1px solid var(--rule)}
.verdict__media{position:absolute;inset:0;z-index:-1}
.verdict__media video,.verdict__media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.verdict__media img{display:none}
.verdict__media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 55%,#000 100%),linear-gradient(0deg,#000 0%,rgba(0,0,0,.85) 26%,rgba(0,0,0,0) 52%)}
.verdict__engrave{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.7;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(circle var(--torch,260px) at var(--mx,50%) var(--my,40%),#000 0%,rgba(0,0,0,.4) 42%,transparent 100%);mask-image:radial-gradient(circle var(--torch,260px) at var(--mx,50%) var(--my,40%),#000 0%,rgba(0,0,0,.4) 42%,transparent 100%)}
.verdict .wrap{display:flex;flex-direction:column;align-items:center;gap:24px;padding-block:46vh 12vh}
.verdict h2{font-size:clamp(2.8rem,6.4vw,7rem);max-width:none}
.verdict p{margin:0;color:var(--ash);max-width:46ch;font-size:1.12rem}
.verdict__contact{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:.92rem;color:var(--ash)}
.verdict__contact a{text-decoration:none}
.verdict__contact a:hover{color:var(--argent)}

/* Footer */
.footer{border-top:1px solid var(--rule);padding-top:clamp(48px,6vw,80px);overflow:hidden}
.footer__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(32px,6vw,96px);align-items:start}
.footer__lead{display:flex;flex-direction:column;gap:22px}
.footer__contact{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:6px 18px!important}
.footer__contact a{font:400 clamp(1.3rem,1.8vw,1.6rem)/1.2 var(--serif);color:var(--argent);border-bottom:1px solid var(--rule-strong);padding-bottom:2px;transition:border-color .3s}
.footer__contact a:hover{border-color:var(--argent)}
.footer__contact span{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-2)}
.footer__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:28px;padding-top:10px}
.footer__two{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.footer__grid h4{margin:0 0 14px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-2);font-weight:500}
.footer__grid p,.footer__grid ul{margin:0;padding:0;list-style:none;color:var(--ash);font-size:.95rem;display:grid;gap:8px}
.footer__grid a{text-decoration:none}
.footer__grid a:hover{color:var(--argent)}
.footer__tag{font:italic 400 clamp(1.9rem,3vw,2.8rem)/1.1 var(--serif)!important;color:var(--argent)!important;max-width:18ch}
.footer__word{display:flex;justify-content:space-between;margin-top:clamp(40px,5vw,72px);font:500 clamp(5rem,24vw,26rem)/.76 var(--serif);letter-spacing:-.02em;padding-inline:calc(var(--gutter) * .5);user-select:none}
.footer__word span{display:block;transform:translateY(18%)}
/* Every other footer: the same wordmark, still, in its steel at rest (FooterWord.astro) */
.footer__word--still span{transform:none}
.footer>.footer__word--still:first-child{margin-top:0}
.footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-block:22px;padding-right:64px;border-top:1px solid var(--rule);font-size:.82rem;color:var(--ash-2)}
/* The homepage footer's endings (src/scripts/footer, SCENES.md). The stage is exactly the wordmark's box:
   the word's margins pass through it, so wrapping the word moved nothing. A scene draws on layers inside it. */
.footer__stage{position:relative;isolation:isolate}
.footer__stage .footer__word{position:relative;z-index:1}
.footer__layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.footer__layer--under{z-index:0}
/* The backdrop: the whole footer, behind the links and the email (a floor for shadows). The footer isolates it. */
.footer--endings{position:relative;isolation:isolate}
.footer__layer--back{z-index:-1}
.footer__layer > svg,.footer__layer > canvas{position:absolute;left:0;top:0;overflow:visible}
/* A scene that takes over draws the letters itself: no rise (base.js) and no steel. */
.footer__stage.is-own .footer__word .sheen{background:none;color:var(--argent);-webkit-text-fill-color:currentColor;animation:none}
/* The steel's resting light, for when the hall's light is not moving (reduced motion) */
.footer__word .sheen{--gx:50%}
/* The footer line with the knight: centred between the two lines on wide screens, a mark beside them on phones */
.footer__base--knight{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"k a" "k b";align-items:center;column-gap:10px;row-gap:12px}
.footer__base--knight .footer__copy{grid-area:a}
.footer__base--knight .footer__end{grid-area:b}
.footer__knight{grid-area:k;position:relative;display:grid;place-items:center;width:44px;height:44px;margin:-12px -10px -12px -16px;padding:0;border:0;border-radius:50%;background:none;color:var(--ash-2);cursor:pointer;visibility:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .35s var(--ease-out)}
.footer__knight.is-ready{visibility:visible}
.footer__knight svg{width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.footer__knight circle{fill:currentColor;stroke:none}
.footer__knight:hover,.footer__knight:focus-visible{color:var(--argent)}
.footer__knight:focus-visible{outline:1px solid var(--argent);outline-offset:-5px}
@media (min-width:820px){
  .footer__base--knight{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"a k b";column-gap:24px;padding-right:0}
  .footer__base--knight .footer__end{justify-self:end;padding-right:64px}
  .footer__knight{margin:-12px -11px}
}

/* Reveal */
.js [data-reveal]{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease-out),transform 1.3s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal-delay="1"]{transition-delay:.1s}
.js [data-reveal-delay="2"]{transition-delay:.2s}
.js [data-reveal-delay="3"]{transition-delay:.3s}
.js .split .line{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.js .split .line > span{display:block;transform:translateY(105%);transition:transform 1.2s var(--ease-out)}
.js .split.in .line > span{transform:none}
.js .split.in .line:nth-child(2) > span{transition-delay:.08s}
.js .split.in .line:nth-child(3) > span{transition-delay:.16s}

/* Responsive */
@media (max-width:1080px){
  .world{grid-template-columns:minmax(0,1fr);width:min(420px,70vw);align-items:start}
  .world__plate{width:100%}
  .world__name{font-size:clamp(2.4rem,7vw,4rem)}
}
@media (max-width:900px){
  :root{--nav-h:64px}
  /* The links move into the menu. The empty nav goes too, or it keeps a second gap in the bar and pushes the
     menu button off the right edge of a small phone. */
  .nav ul,.nav .wrap > nav{display:none}
  .hero__media video,.hero__media img{object-position:78% 50%}
  .hero__media::after{background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.7) 45%,rgba(0,0,0,.25) 100%)}
  .hero__foot{grid-template-columns:minmax(0,1fr)}
  .hero__meta{display:none}
  .thesis .wrap{grid-template-columns:minmax(0,1fr)}
  .thesis__stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .worlds{height:auto!important}
  .worlds__pin{position:relative;height:auto;overflow:visible}
  .worlds__head{padding-top:clamp(96px,14vw,140px)}
  .worlds__track{flex-direction:column;align-items:stretch;transform:none!important;padding-block:48px 24px;gap:72px}
  .worlds__intro{width:auto}
  .world{width:auto;grid-template-columns:minmax(0,1fr)}
  .world__body{max-width:none}
  .worlds__bar,.worlds__count{display:none}
  .layers .wrap{grid-template-columns:minmax(0,1fr)}
  .engage__head,.score__head{grid-template-columns:minmax(0,1fr)}
  .score__head > p:not(.eyebrow){justify-self:start}
  .score__body{grid-template-columns:minmax(0,1fr)}
  .dial{grid-column:1;grid-row:1;width:min(78vw,320px)}
  .quiz,.result{grid-row:2}
  .quiz{min-height:0}
  .engage__head p{justify-self:start}
  .offers{grid-template-columns:minmax(0,1fr)}
  .offer{min-height:0}
  .offer + .offer{border-left:0}
  .offer h3{margin-top:24px}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
  .footer__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer__cols > :nth-child(2){grid-column:1/-1;order:3}
}
@media (max-width:560px){
  .nav__end{gap:10px}
  .opt{min-height:56px;padding:0 20px}
  .thesis__stats{grid-template-columns:minmax(0,1fr)}
  .footer__grid{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .grain{display:none}
  .dial .seg-track.is-now{animation:none}
  .world__plate video{display:none}
  .verdict__media video{display:none}
  .verdict__media img{display:block}
  .marquee__track{animation:none}
}

/* Mobile menu */
.nav__toggle{display:none;position:relative;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;color:inherit;cursor:pointer}
.nav__toggle svg{position:absolute;left:10px;top:10px;width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5}
.nav__toggle line{transform-box:fill-box;transform-origin:center;transition:transform .55s var(--ease-out)}
.tg__sword path,.tg__knight{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .3s var(--ease)}
.tg__sword circle,.tg__sword path,.tg__knight{stroke-width:1.3}
.tg__sword,.tg__knight{opacity:0;transition:opacity 0s .3s}
.nav__toggle[aria-expanded="true"] .tg__sword,.nav__toggle[aria-expanded="true"] .tg__knight{opacity:1;transition:none}
.tg__eye{fill:currentColor;stroke:none;opacity:0;transition:opacity .2s}
.tg__pommel{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:opacity .2s,transform .2s}
.nav__toggle[aria-expanded="true"] .tg__pommel{opacity:1;transform:none;transition:opacity .3s 1.2s,transform .5s var(--ease-out) 1.2s}
.nav__toggle[aria-expanded="true"] .tg__a{transform:translate(5.5px,4.5px) rotate(90deg) scaleX(.76)}
.nav__toggle[aria-expanded="true"] .tg__b{transform:translate(-5.35px,6.6px) scaleX(.767)}
.nav__toggle[aria-expanded="true"] .tg__sword path,.nav__toggle[aria-expanded="true"] .tg__knight{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease-out) .85s}
.nav__toggle[aria-expanded="true"] .tg__knight{transition-delay:.25s;transition-duration:.7s}
.nav__toggle[aria-expanded="true"] .tg__eye{opacity:1;transition-delay:.8s}
.mnav{position:fixed;inset:0;z-index:79;display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 6vh) var(--gutter) calc(32px + env(safe-area-inset-bottom,0px));background:#000;opacity:0;transition:opacity .45s var(--ease);overflow-y:auto;overscroll-behavior:contain}
.mnav[hidden]{display:none}
/* While it fades out the panel still catches taps (site.js swallows them), so a quick second tap never lands on the page. */
.menu-open .mnav{opacity:1}
.nav__toggle,.mnav a,.mnav button{-webkit-tap-highlight-color:transparent}
.menu-open .nav{transform:none;background:#000;border-color:var(--rule)}
.mnav__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mnav__list li{border-bottom:1px solid var(--rule);opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i) * 60ms + 80ms)}
.menu-open .mnav__list li{opacity:1;transform:none}
.mnav__top{display:flex;align-items:center;gap:16px;width:100%;padding:16px 0;background:none;border:0;color:inherit;text-align:left;cursor:pointer;font:400 clamp(1.9rem,8vw,2.8rem)/1 var(--serif);letter-spacing:-.01em;text-decoration:none}
.mnav__sigil{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.mnav__label{flex:1}
.mnav__plus{position:relative;flex:none;width:14px;height:14px}
.mnav__plus::before,.mnav__plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.mnav__plus::after{transform:rotate(90deg)}
.mnav__item.is-open .mnav__plus::after{transform:rotate(0)}
.mnav__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.mnav__item.is-open .mnav__sub{grid-template-rows:1fr}
.mnav__sub ul{overflow:hidden;list-style:none;margin:0;padding:0 0 0 44px;visibility:hidden;transition:visibility 0s .45s}
.mnav__item.is-open .mnav__sub ul{visibility:visible;transition:none;padding-bottom:14px}
.mnav__list .mnav__sub li{border:0}
.mnav__sub a{display:flex;align-items:baseline;gap:12px;padding:9px 0;color:var(--ash);font-size:1.02rem;text-decoration:none}
.mnav__sub a:hover,.mnav__sub a:focus-visible,.mnav__sub a[aria-current]{color:var(--argent)}
.mnav__sub a.mnav__all{color:var(--argent);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}
.mnav__num{min-width:2.2em;font:italic 400 .95rem/1 var(--serif);color:var(--ash);opacity:.7}
.mnav a[aria-current]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mnav__foot{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
@media (max-width:900px){.nav__toggle{display:block}}
/* A small phone: the bar's Book button gives up a little room so the menu button stays whole on screen. */
@media (max-width:400px){.nav__end .btn{padding:0 14px;font-size:.82rem}}
@media (prefers-reduced-motion:reduce){.mnav,.mnav__list li,.nav__toggle *,.mnav__sub,.mnav__sub ul,.mnav__plus::after{transition:none!important}}

/* Back to top */
.totop{position:fixed;right:calc(var(--gutter) - 4px);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--argent);cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop svg{display:block;width:100%;height:100%}
.totop circle{fill:none;stroke-width:1}
.totop__track{stroke:var(--rule-strong)}
.totop__ring{stroke:currentColor;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:50% 50%}
.totop path{transition:transform .4s var(--ease)}
.totop:hover path{transform:translateY(-2px)}
.totop:focus-visible{outline:1px solid var(--argent);outline-offset:4px}
@media (prefers-reduced-motion:reduce){.totop,.totop path{transition:none}}

/* Booking page */
.book.whero{padding-top:calc(var(--nav-h) + clamp(28px,4vh,56px));padding-bottom:clamp(48px,6vw,90px)}
.book__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:end}
.book__intro{display:contents}
.book__intro .eyebrow{grid-column:1/-1}
.book__title{grid-column:1;font-size:clamp(3rem,6.6vw,7rem)}
.book__title em{font-style:italic}
.book__side{grid-column:2;display:flex;flex-direction:column;gap:18px}
.book__lede{margin:0;max-width:44ch;color:var(--ash);font-size:1.06rem;line-height:1.6}
.book__micro{margin:0;font:italic 400 1.2rem/1.4 var(--serif);color:var(--argent)}
.book__cal{grid-column:1/-1;margin-top:clamp(24px,4vw,56px);border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule);background:#0a0a0a;scroll-margin-top:calc(var(--nav-h) + 16px)}
/* The site declares color-scheme:dark; Calendly does not. A mismatch makes the browser paint the embed white, so the embed box opts out. */
.book__cal{color-scheme:normal}
.book__cal .calendly-inline-widget{width:100%}
.book__fallback{margin:0;padding:14px 0;border-top:1px solid var(--rule);font-size:.9rem;color:var(--ash)}
@media (max-width:900px){.book__grid{grid-template-columns:minmax(0,1fr)}.book__title,.book__side{grid-column:1}.book__cal .calendly-inline-widget{height:1040px!important}}
.hero__micro{margin:10px 0 0;font-size:.82rem;letter-spacing:.04em;color:var(--ash)}

/* Privacy page: readable body copy instead of display serif */
.legalpage .wsec__text p{font:400 1.08rem/1.65 var(--sans);letter-spacing:0;max-width:62ch;color:var(--argent)}
.legalpage .wsec__text p + p{color:var(--ash)}
.legalpage .wsec{padding-block:clamp(56px,7vw,100px)}

/* Category pages (/for/) */
.forpage .whero{padding-top:calc(var(--nav-h) + clamp(28px,4vh,56px))}
.for__title{margin-top:24px}
@media (max-width:560px){.for__eyebrow{display:none}.forpage .for__title{margin-top:0}}
.for__answer{margin:28px 0 32px;max-width:62ch;font:400 clamp(1.15rem,1.6vw,1.4rem)/1.55 var(--sans);color:var(--argent)}
.fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(20px,3vw,40px)}
.fcard{display:flex;flex-direction:column;gap:12px;text-decoration:none}
.fcard img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) brightness(.85);transition:filter .6s}
.fcard:hover img{filter:grayscale(1) brightness(1)}
.fcard__line{color:var(--ash);font-size:.95rem;max-width:36ch}
.for__others{margin:8px 0 0;color:var(--ash);font-size:.92rem}
.for__others .link{margin:0 4px}
.wrules__more{grid-column:2;margin:24px 0 0}
@media (max-width:900px){.wrules__more{grid-column:1}}
.wsec__note{margin:20px 0 0;max-width:36ch;color:var(--ash)}

/* FAQ */
.faq{border-top:1px solid var(--rule-strong)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__item summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font:400 clamp(1.35rem,2vw,1.7rem)/1.2 var(--serif)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";content:"+"/"";flex:none;font:300 1.6rem/1 var(--sans);color:var(--ash);transition:transform .4s var(--ease)}
.faq__item[open] summary::after{transform:rotate(45deg)}
.faq__item summary:focus-visible{outline:1px solid var(--argent);outline-offset:4px}
.faq__item p{margin:0 0 24px;max-width:62ch;color:var(--ash);line-height:1.65}

.thesis__not{display:block;margin-top:.9em;font-style:italic}
.engage :focus-visible{outline-color:var(--ink)}

/* Seven-layer meter */
.meter{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.meter__seg{width:18px;height:4px;background:var(--rule-strong);opacity:.6}
.meter__seg.is-on{background:var(--argent);opacity:1}
.meter__label{margin-left:10px;font:500 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.world__meter{display:block;margin-top:14px}
.world__meter .meter__seg{width:14px;height:3px}
.whero__meter{grid-column:1/-1}
.whero__meter dd{display:flex;flex-direction:column;gap:10px}
.meter__names{font:400 1rem/1.4 var(--sans);color:var(--ash)}
.meter__names a{color:var(--argent)}

/* Layer filter on the worlds gallery */
.wfilter{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.wfilter__chip{padding:8px 14px;border:1px solid var(--rule-strong);border-radius:999px;background:none;color:var(--ash);font:500 .78rem/1 var(--sans);letter-spacing:.06em;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.wfilter__chip:hover{color:var(--argent);border-color:var(--argent)}
.wfilter__chip[aria-pressed="true"]{background:var(--argent);border-color:var(--argent);color:#000}
.world{transition:opacity .6s var(--ease),filter .6s var(--ease)}
@media (min-width:901px){.world.is-dim{opacity:.18;filter:grayscale(1)}}
/* Phones (900 px and under) swipe the worlds one card at a time, so the layer filter is for wider screens. A filter set on a wide window dims nothing once it is narrow. */
@media (max-width:900px){.wfilter{display:none}}

/* Layer pages */
.layer__q{margin:18px 0 0;font:italic 400 clamp(1.5rem,2.6vw,2.2rem)/1.25 var(--serif);color:var(--argent);max-width:30ch}
.layerbar{display:flex;flex-wrap:wrap;gap:6px;margin-top:36px}
.layerbar a{display:inline-flex;align-items:baseline;gap:8px;padding:9px 14px;border:1px solid var(--rule);border-radius:999px;text-decoration:none;color:var(--ash);font-size:.86rem;transition:color .3s,border-color .3s}
.layerbar a b{font:400 .95rem/1 var(--serif);font-style:italic}
.layerbar a:hover,.layerbar a.is-on{color:var(--argent);border-color:var(--argent)}
.layer__pager{display:flex;justify-content:space-between;gap:24px;padding-block:28px;border-top:1px solid var(--rule)}

/* Gallery captions (layer pages and walls) */
.wwork__item{position:relative}
.wwork__item figcaption{position:absolute;left:10px;bottom:10px;padding:5px 9px;background:rgba(0,0,0,.72);font:500 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--argent)}

/* Beyond the screen (home) */
.beyond{border-top:1px solid var(--rule);padding-block:clamp(96px,11vw,160px)}
.beyond__h{font-size:clamp(2.8rem,6.6vw,6.6rem);margin-top:22px}
.beyond__h em{font-style:italic}
.beyond__lede{max-width:52ch;margin:26px 0 0;color:var(--ash);font-size:1.06rem;line-height:1.6}
.beyond__sub{margin:clamp(48px,6vw,80px) 0 22px}

/* Process and articles */
.process__terms{margin:4px 0 10px !important;font:500 .74rem/1.2 var(--sans) !important;letter-spacing:.16em;text-transform:uppercase;color:var(--argent) !important}
.article{max-width:66ch}
.article p{margin:0 0 1.1em;font:400 1.1rem/1.7 var(--sans);color:var(--argent)}
.article__note{color:var(--ash) !important;font-size:.95rem !important;border-left:1px solid var(--rule-strong);padding-left:16px}
.article__h{margin:36px 0 12px;font:500 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.article__sources{margin:0 0 28px;padding-left:18px;color:var(--ash);line-height:1.8}
/* World pages: the work leads, the layer labels it */
.chapter--work{gap:10px 20px}
.chapter--work .chapter__n{grid-row:span 2;font-size:2rem;padding-top:2px}
.chapter h3.chapter__layer{display:flex;align-items:center;gap:10px;margin:0;font:500 .74rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.chapter__layer a{color:inherit;text-decoration:none;transition:color .3s}
.chapter__layer a:hover,.chapter__layer a:focus-visible{color:var(--argent)}
.chapter__sig{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.chapter p.chapter__work{margin:0;max-width:30ch;color:var(--argent);font:400 clamp(1.45rem,2.2vw,2.1rem)/1.22 var(--serif)}
.chapter--off p.chapter__work{font-style:italic}
.chapter--off > *{opacity:.38}
.chapter--off h3 a{text-decoration:none;color:inherit}
.chapter--off h3 a:hover{opacity:.8}
/* /for/ pages: a category line on a layer the page does not feature (Ground and Machinery on spirits and food) sits in its place, smaller. */
.chapter--also p.chapter__work{font-size:clamp(1.15rem,1.6vw,1.4rem)}

/* ===== Chapters: the home page read as four chapters ===== */
/* Chapter labels: one thin line with the outlined numeral, the sigil and the chapter's name (chapters.js) */
.chap{position:relative;overflow:hidden;padding-block:clamp(30px,4vh,44px) clamp(18px,2.6vh,28px)}
.chap__in{position:relative}
.chap__meta{position:relative;display:flex;align-items:baseline;gap:16px;margin:0;color:var(--ash)}
.chap__num{flex:none;min-width:1.1em;font:italic 300 clamp(2.6rem,4.4vw,3.6rem)/1 var(--serif);color:transparent;-webkit-text-stroke:1px var(--ash);letter-spacing:-.02em;user-select:none}
.chap__sigil{flex:none;align-self:center;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;color:var(--argent)}
.chap__meta b{font:italic 400 clamp(1.6rem,2.6vw,2.2rem)/1 var(--serif);letter-spacing:-.01em;color:var(--argent)}
.js .chap__meta{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
.chap.is-in .chap__meta{opacity:1;transform:none}

/* Chapter rail */
.crail{position:fixed;left:18px;top:50%;z-index:55;transform:translate(-8px,-50%);opacity:0;pointer-events:none;color:#fff;mix-blend-mode:difference;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.crail.is-on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.crail ol{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;margin:0;padding:0;list-style:none}
.crail a{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;opacity:.42;transition:opacity .4s}
.crail a.is-past{opacity:.7}
.crail a.is-on,.crail a:hover,.crail a:focus-visible{opacity:1}
.crail__sigil{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
.crail a.is-on .crail__sigil{transform:scale(1.18)}
.crail__label{font:500 .7rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .4s var(--ease-out)}
.crail__label i{font:italic 400 .95rem var(--serif);letter-spacing:0;text-transform:none;margin-right:4px}
.crail a:hover .crail__label,.crail a:focus-visible .crail__label{opacity:1;transform:none}
.crail__line{position:absolute;left:9.5px;top:-28px;bottom:-28px;width:1px;background:rgba(255,255,255,.25)}
.crail__line i{position:absolute;inset:0;background:#fff;transform-origin:top;transform:scaleY(0)}
@media (max-width:1199px){.crail{display:none}}

/* Bottom bar on phones: where you are, and the way in */
.cbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:65;display:none;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 18px;border:1px solid var(--rule-strong);border-radius:999px;background:rgba(0,0,0,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transform:translateY(calc(100% + 24px));transition:transform .5s var(--ease)}
.cbar.is-on{transform:none}
.cbar__chap{display:flex;align-items:baseline;gap:8px;min-width:0;margin:0;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar__n{font:italic 400 1.05rem/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--argent)}
@media (max-width:900px){.cbar{display:flex}.cbar-on .totop{transform:translateY(-64px)}}

/* The self-check is a white page */
.score{--argent:#000;--ash:#4d4d4d;--ash-2:#6b6b6b;--rule:rgba(0,0,0,.14);--rule-strong:rgba(0,0,0,.32);--sable:#fff;background:var(--vellum);color:var(--ink);border-top:0;clip-path:inset(0 var(--clip-x,0px) round var(--clip-r,0px))}
.score ::selection{background:#000;color:#fff}
.score .dial .seg-track.is-now{animation-name:segPulseInk}
@keyframes segPulseInk{50%{stroke:rgba(0,0,0,.5)}}
.score :focus-visible{outline-color:#000}
/* The self-check on its own page (/score/): the white page starts under the bar, at an inner page's opening height (.whero), and its title is the page's h1 at the size the homepage heading had. */
.score--page{margin-top:var(--nav-h);padding-top:clamp(40px,7vh,88px)}
.score--page h1.display{font-size:clamp(3rem,8vw,8.25rem)}

/* Worlds swipe on phones */
.worlds__hint{display:none}
@media (max-width:900px){
  .worlds__head{align-items:center}
  .worlds__count{display:block;font-size:1.2rem}
  .worlds__hint{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);transition:opacity .4s}
  .worlds__hint::after{content:"\2192";animation:nudge 1.6s var(--ease) infinite}
  .worlds__hint.is-gone{opacity:0}
  .worlds__hint.is-away::after,.worlds__hint.is-out::after{animation-play-state:paused} /* out of view (site.js), or faded out (chapters.js) */
  .worlds__pin > .worlds__intro{padding:28px var(--gutter) 0}
  .worlds__track{flex-direction:row;align-items:stretch;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:28px var(--gutter) 20px;scrollbar-width:none}
  .worlds__track::-webkit-scrollbar{display:none}
  .world{flex:0 0 min(80vw,360px);width:auto;scroll-snap-align:start;grid-template-columns:minmax(0,1fr);gap:18px}
  .world__plate{aspect-ratio:1}
  .world__body{gap:12px}
  .world__name{font-size:clamp(2rem,8.4vw,2.8rem)}
  .worlds__bar{display:block;margin:0 var(--gutter) 8px}
  .worlds__head{gap:12px}
}
@keyframes nudge{50%{transform:translateX(4px)}}

/* A knight roams the world plates on hover, making random L moves */
.world__knight{position:absolute;z-index:2;left:0;top:0;width:12.5%;height:10%;display:grid;place-items:center;color:#fff;pointer-events:none;opacity:0;transition:transform .55s cubic-bezier(.5,0,.2,1),opacity .4s var(--ease)}
.world__knight.is-instant{transition:none}
.world__knight.is-on{opacity:1}
.world__knight svg{width:82%;height:auto;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7))}
.world__knight circle{fill:currentColor;stroke:none}
.world__knight.is-hop svg{animation:khop .55s cubic-bezier(.5,0,.2,1)}
@keyframes khop{50%{transform:translateY(-22%) scale(1.12)}}

@media (prefers-reduced-motion:reduce){
  .js .chap__meta{opacity:1;transform:none}
  .worlds__hint::after{animation:none}
}
.worlds__count{white-space:nowrap}
@media (max-width:900px){.worlds__head .eyebrow{font-size:.7rem;letter-spacing:.18em}}

/* ===== Magic: runes, decoding, the constellation, the portal, marginalia, the codex ===== */
/* Runes carved into the dark */
.thesis,.chap,.layers{position:relative;isolation:isolate}
.runes{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.runes svg{position:absolute;fill:none;stroke:#fff;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round;opacity:.045}
.runes--lit svg{opacity:.55;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
.runes--lit{opacity:0;transition:opacity 1.2s var(--ease);-webkit-mask-image:radial-gradient(circle 190px at var(--rx,-999px) var(--ry,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 100%);mask-image:radial-gradient(circle 190px at var(--rx,-999px) var(--ry,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 100%)}
.is-woken > .runes--lit{opacity:1;transition-duration:.35s}

/* Portal into a world (fallback where page transitions are not supported) */
.portal{position:fixed;z-index:180;overflow:hidden;background:#000;transition:left .5s var(--ease),top .5s var(--ease),width .5s var(--ease),height .5s var(--ease)}
.portal img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.86)}
.portal.is-open{left:0!important;top:0!important;width:100vw!important;height:100vh!important}

/* Wax seals on the world plates */
.seal__wax{fill:#e9e9e9}
.seal__ring{fill:none;stroke:rgba(0,0,0,.28);stroke-width:1.2}
.seal__mark{fill:none;stroke:#111;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* The AI squire: whole on /layers/machinery/ (src/lib/squire.ts); its title and one item under the homepage's Machinery row */
.layer__ai{grid-column:2;margin-top:22px;padding:22px 0 4px;border-top:1px solid var(--rule)}
.layer__ai-h{margin:0;font:400 clamp(1.6rem,2.4vw,2.2rem)/1.1 var(--serif)}
.layer__ai-h em{font-style:italic}
.layer__ai-p{margin:10px 0 0;color:var(--ash);max-width:52ch}
.layer__ai-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.layer__ai-list li{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:4px 20px;padding:0;border:0;font-size:.95rem}
.layer__ai-list b{font:400 1.2rem/1.2 var(--serif)}
.layer__ai-list span{color:var(--ash)}
.layer__ai-more{margin:14px 0 0}
@media (max-width:600px){.layer__ai-list li{grid-template-columns:minmax(0,1fr)}}
.wsec .layer__ai{margin-top:0;padding-top:0;border-top:0}

/* The codex: found by the knight's move */
.codex{position:fixed;inset:0;z-index:190;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .5s var(--ease);overflow-y:auto;overscroll-behavior:contain}
.codex.is-on{opacity:1}
.codex__in{width:min(640px,100%);display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:clamp(28px,5vw,56px);border:1px solid var(--rule-strong);background:#000}
.codex__knight{width:46px;height:46px;fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.codex__knight circle{fill:#fff;stroke:none}
.codex__h{font-size:clamp(3rem,8vw,5rem)}
.codex__h em{font-style:italic}
.codex__lede{margin:0;color:var(--ash)}
.codex__list{list-style:none;margin:8px 0 0;padding:0;width:100%;border-top:1px solid var(--rule)}
.codex__list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);font:400 1.3rem/1.3 var(--serif);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(.25s + var(--i) * 90ms)}
.codex.is-on .codex__list li{opacity:1;transform:none}
.codex__list span{font-style:italic;color:var(--ash)}
.codex__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:10px}
.codex .link{background:none;border:0;font:inherit;font-weight:500;cursor:pointer}
.nav .mark.is-holding svg{animation:holdGlow .9s linear forwards}
@keyframes holdGlow{to{filter:drop-shadow(0 0 6px #fff)}}


/* Sigil page */
.sigil__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start}
.sigil__intro{display:flex;flex-direction:column;gap:22px}
.sigil__form{display:grid;gap:18px;margin-top:12px}
.sigil__field{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.sigil__field > span,.sigil__field legend{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);padding:0;margin-bottom:8px}
.sigil__field input[type=text],.sigil__field select{width:100%;min-height:54px;padding:0 18px;border:1px solid var(--rule-strong);border-radius:999px;background:transparent;color:var(--argent);font:400 1.05rem var(--sans);appearance:none;-webkit-appearance:none}
.sigil__field select{background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 26px) 50%,calc(100% - 20px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.sigil__field select option{background:#000;color:#fff}
.sigil__field input:focus-visible,.sigil__field select:focus-visible{outline:1px solid #fff;outline-offset:3px}
.sigil__virtues{display:flex;flex-wrap:wrap;gap:8px}
.sigil__virtues legend{width:100%}
.sigil__virtue{position:relative;cursor:pointer}
.sigil__virtue input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sigil__virtue span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--rule-strong);border-radius:999px;font-size:.9rem;transition:background .3s,color .3s}
.sigil__virtue input:checked + span{background:#fff;color:#000;border-color:#fff}
.sigil__virtue input:focus-visible + span{outline:1px solid #fff;outline-offset:3px}
.sigil__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.sigil__actions .link{background:none;border:0;font:inherit;font-weight:500;cursor:pointer}
.sigil__note{margin:0;font-size:.84rem;color:var(--ash-2)}
.sigil__vstatus{margin:-6px 0 0;font-size:.84rem;color:var(--ash)}
.sigil__vstatus:empty{display:none}
.sigil__code{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin:-4px 0 0;font-size:.84rem;color:var(--ash);letter-spacing:.08em}
.sigil__code b{font-weight:500;color:var(--argent);font-variant-numeric:tabular-nums;letter-spacing:.14em}
.sigil__code .link{background:none;border:0;font:inherit;font-weight:500;cursor:pointer;letter-spacing:0;color:var(--argent)}
.sigil__actions .link:disabled{opacity:.5;cursor:progress}
.sigil__figure{margin:0;position:sticky;top:calc(var(--nav-h) + 24px)}
.sigil__stage{border:1px solid var(--rule);background:#000}
.sigil__stage svg{display:block;width:100%;height:auto}
.sigil__blazon{margin-top:12px;font:italic 400 1.05rem/1.4 var(--serif);color:var(--ash)}
@media (max-width:900px){.sigil__grid{grid-template-columns:minmax(0,1fr)}.sigil__figure{position:relative;top:0;order:-1;max-width:420px}}

@media (prefers-reduced-motion:reduce){
  .codex,.codex__list li{transition:none}
}

/* The offer ladder: three steps, one way up */
.engage{padding-block:clamp(90px,10vw,150px)}
.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1.15fr) 64px minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch;perspective:1400px}
.rung{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(28px,3vw,44px);border:1px solid var(--rule-ink-strong);background:var(--vellum);color:var(--ink);transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.rung::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 260px at var(--lx,50%) var(--ly,0%),rgba(0,0,0,.06),transparent 70%);opacity:0;transition:opacity .4s}
.rung:hover{box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.rung:hover::before{opacity:1}
.rung--lead{background:#000;color:#fff;border-color:#000;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.rung--lead::before{background:radial-gradient(circle 300px at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.12),transparent 70%)}
.rung--keep{background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.035) 0 1px,transparent 1px 9px)}
.rung__flag,.rung__tag{position:absolute;top:-1px;left:clamp(28px,3vw,44px);transform:translateY(-50%);padding:6px 12px;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.rung__flag{background:#fff;color:#000;border:1px solid #000}
.rung__tag{background:var(--vellum);color:var(--ink-2);border:1px solid var(--rule-ink-strong)}
.rung__top{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.rung__n{font:italic 300 clamp(3.4rem,5vw,4.6rem)/.8 var(--serif);opacity:.35}
.rung__sigil{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.rung__name{margin:0;font:400 clamp(2.4rem,3.4vw,3.4rem)/.95 var(--serif);letter-spacing:-.02em}
.rung__name em{font-style:italic}
.rung__line{margin:-6px 0 0;font:italic 400 1.3rem/1.2 var(--serif);opacity:.7}
.rung__big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:6px 0 0;padding:16px 0;border-block:1px solid currentColor;border-color:color-mix(in srgb,currentColor 22%,transparent)}
.rung__big b{font:300 clamp(2rem,3vw,2.8rem)/1 var(--serif);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.rung--lead .rung__big b{font-size:clamp(3.4rem,5.4vw,5.2rem)}
.rung__cur{font:300 clamp(1.6rem,2.4vw,2.2rem)/1 var(--serif);align-self:flex-start;margin-top:.4em}
.rung__unit{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-left:6px}
.rung__facts{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.95rem}
.rung__facts li{position:relative;padding-left:22px;opacity:.85}
.rung__facts li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:currentColor}
/* The three ways in, on their own pages (/verdict/, /build/, /keep/): the hero reuses the rung's price and facts */
.offerpage .whero .rung__big,.offerpage .whero .rung__facts{max-width:62ch}
.offerpage .whero .rung__facts{margin:18px 0 32px}
.offerpage h2.book__title{font-size:clamp(3rem,6.6vw,7rem)} /* the booking heading at /book/'s own title size (h2.display is larger) */
.rung__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:auto;padding-top:10px}
.rung--lead .btn{--fill:#fff;border-color:#fff;color:#000}
.rung--lead .btn::before{background:#000}
.rung--lead .btn:hover{color:#fff}
.engage .rung--lead .link{color:#fff}
.ladder__link{display:flex;align-items:center;justify-content:center;color:var(--ink)}
.ladder__link svg{width:100%;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.js .ladder__link path{stroke-dasharray:1;stroke-dashoffset:1}
.js .rung{opacity:0;translate:0 40px}
.js .rung__sigil *{stroke-dasharray:60;stroke-dashoffset:60}
.ladder.is-in .rung{opacity:1;translate:0 0;transition:opacity .8s var(--ease-out),translate 1s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.ladder.is-in .rung:nth-child(3){transition-delay:.18s,.18s,0s,0s}
.ladder.is-in .rung:nth-child(5){transition-delay:.36s,.36s,0s,0s}
.ladder.is-in .rung__sigil *{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease-out) .5s}
.ladder.is-in .ladder__link path{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-out) .7s}
.ladder.is-in .ladder__link:nth-child(4) path{transition-delay:1s}
@media (max-width:1080px){
  .ladder{grid-template-columns:minmax(0,1fr);gap:0}
  .ladder__link{height:56px}
  .ladder__link svg{width:24px;height:56px;transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){
  .js .rung{opacity:1;translate:none}
  .js .rung__sigil *,.js .ladder__link path{stroke-dashoffset:0}
  .rung{transform:none}
}
.engage__pos{display:block;margin-bottom:10px;font:italic 400 clamp(1.4rem,2vw,1.8rem)/1.2 var(--serif);color:var(--ink)}
.engage__head .link{margin-top:6px}

/* ---------- GSAP (src/scripts/motion.js). The .gsap class is set in the head and dropped by site.js if the module never loads. ---------- */
.gsap [data-split]{visibility:hidden}
.gsap [data-split] .sheen{display:inline-block}
.sl-mask{padding:0 .08em .24em;margin:0 -.08em -.24em}
.gsap [data-reveal]{transition:none}
.gsap .chap__meta{opacity:1;transform:none;transition:none}
.gsap .rung{translate:none}
.gsap .footer__word span{transform:none} /* GSAP sets the start offset itself; the CSS one would double it */
@media (prefers-reduced-motion:reduce){.footer__word span{transform:none}} /* no rise: the letters rest where they end */
.footer__word{padding-bottom:.08em;margin-bottom:clamp(12px,2vw,28px)} /* clear of the footer line, whatever the serif's baseline */

/* ===== The dial's codex: each question shows its layer's sigil and meaning (public/assets/js/score.js) ===== */
.dial__center{text-align:center;z-index:1}
.dial__codex{position:absolute;inset:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;transform:scale(.96);transition:opacity .45s var(--ease-out),transform .6s var(--ease-out);pointer-events:none}
.dial.is-codex .dial__score{opacity:0;transform:scale(.9)}
.dial.is-codex .dial__codex{opacity:1;transform:none}
.dial__no{font:500 .62rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}
.dial .dial__sig{width:clamp(26px,2.6vw,36px);height:clamp(26px,2.6vw,36px);overflow:visible;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.dial__name{font:italic 400 clamp(1.5rem,2.2vw,2rem)/1 var(--serif);letter-spacing:-.01em}
.dial__def{max-width:21ch;font-size:clamp(.74rem,.92vw,.84rem);line-height:1.38;color:var(--ash);min-height:4.2em}
.dial .seg-hit{fill:none;stroke:transparent;stroke-width:34;pointer-events:stroke;cursor:help}
.dial .seg-label{pointer-events:auto;cursor:help}
.dial .seg-track.is-peeked{stroke:var(--argent);animation:none}
.dial .seg-label.is-peeked{fill:var(--argent)}
.dial.is-peek .dial__no{opacity:.5}
/* codex: the sigil draws itself and the meaning rises */
.dial__codex.is-rise .dial__sig *{stroke-dasharray:80;stroke-dashoffset:80;animation:sigDraw 1.1s var(--ease-out) forwards}
.dial__codex.is-rise .dial__name{animation:codexRise .7s var(--ease-out) both .1s}
@keyframes sigDraw{to{stroke-dashoffset:0}}
@keyframes codexRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .dial__codex,.dial__score{transition:none}
  .dial__codex.is-rise *{animation:none!important}
}
@media (max-width:900px){.dial__codex{inset:21%;gap:5px}.dial__def{font-size:.7rem;max-width:19ch;min-height:3em}.dial__no{font-size:.56rem}}

/* ---------- The hall: one light, layered blacks, an engraving the light finds ---------- */
:root{--hall-r:clamp(260px,32vw,520px)}
/* The floor sits behind the page: the light pools on it, so text and buttons are never dimmed */
.hall-floor{position:fixed;inset:0;z-index:-1;pointer-events:none;--lx:50vw;--ly:32vh;--lr:1;background:radial-gradient(circle calc(var(--hall-r) * 1.5 * var(--lr)) at var(--lx) var(--ly),#1c1c1c 0%,#0e0e0e 34%,#050505 70%,#000 100%)}
html.has-hall body{background:transparent}
/* In front: a faint glow and the engraving, added as light only */
.hall{position:fixed;inset:0;z-index:70;pointer-events:none;--lx:50vw;--ly:32vh;--lr:1;--sy:0px}
.hall__glow{position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(circle calc(var(--hall-r) * var(--lr)) at var(--lx) var(--ly),rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,0) 100%)}
.hall[data-tone="light"] .hall__glow{opacity:0}
/* Each dark room is lit from above, a thin layer of light over the floor */
.has-hall .thesis,.has-hall .layers,.has-hall .chap,.has-hall .footer{background:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(255,255,255,.045) 0%,rgba(255,255,255,.015) 40%,rgba(255,255,255,0) 75%)}
/* The light finds words */
/* Steel catches the light */
.steel{--ga:0;--gx:50%}
/* A glow, not text-clipped steel: Chrome can't clip a gradient to letters that move, and the hover moves them. */
.mark.steel .mark__word{text-shadow:0 0 calc(var(--ga) * 10px) rgba(255,255,255,calc(var(--ga) * .55))}
.mark.steel svg{color:#fff;filter:drop-shadow(0 0 calc(var(--ga) * 6px) rgba(255,255,255,calc(var(--ga) * .9)))}
.has-hall .footer__word .sheen{animation:none;background-size:100% 100%;background-image:linear-gradient(100deg,#9c9c9c 0%,#dcdcdc calc(var(--gx) - 22%),#fff var(--gx),#dcdcdc calc(var(--gx) + 22%),#8f8f8f 100%)}
.chap__num.steel{-webkit-text-stroke-color:rgba(255,255,255,calc(.32 + var(--ga) * .6))}
.layer__sigil.steel,.rung__sigil.steel{filter:drop-shadow(0 0 calc(var(--ga) * 7px) rgba(255,255,255,calc(var(--ga) * .85)))}
.cat.steel,.wfilter__chip.steel{box-shadow:0 0 calc(var(--ga) * 18px) rgba(255,255,255,calc(var(--ga) * .22)),inset 0 0 0 1px rgba(255,255,255,calc(var(--ga) * .45))}

@media print{.hall,.hall-floor{display:none}}

/* ---------- Colour belongs to the clients ---------- */
.world__plate img,.world__plate video{transition:transform 1.6s var(--ease-out),filter 1.4s var(--ease-out),opacity 1.2s}
@media (hover:hover){
  .world:hover .world__plate img,.world:hover .world__plate video{filter:grayscale(0) contrast(1.02) brightness(1)}
  .fcard:hover img{filter:grayscale(0) brightness(1)}
  .wnext__link:hover .wnext__plate{filter:grayscale(0) brightness(1)}
}
.world.is-bloom .world__plate img,.world.is-bloom .world__plate video,.fcard.is-bloom img{filter:grayscale(0) contrast(1.02) brightness(1)}
.wnext__link.is-bloom .wnext__plate{filter:grayscale(0) brightness(.95);opacity:1}
.whero__plate img,.whero__plate video{transition:filter 2.6s cubic-bezier(.3,.6,.2,1)}
.whero__plate.is-bloom img,.whero__plate.is-bloom video{filter:grayscale(0) contrast(1.02)}
.wwork__item{position:relative}
.wwork__item img.wwork__color{filter:none}
.wwork__color{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.65,0,.2,1),transform 1.2s var(--ease-out);pointer-events:none}
.wwork__item.is-bloom .wwork__color{clip-path:inset(0 0 0 0)}
.wwork__item:hover .wwork__color{transform:scale(1.03)}
@media (prefers-reduced-motion: reduce){.whero__plate img,.whero__plate video,.wwork__color{transition:none}}

/* ---------- Desktop nav: a light underline and two panels ---------- */
.nav ul{position:relative}
.nav__line{position:absolute;left:0;bottom:-9px;height:1px;width:var(--lw,0px);transform:translateX(var(--lx,0px));background:linear-gradient(90deg,rgba(255,255,255,0),#fff 28%,#fff 72%,rgba(255,255,255,0));opacity:0;pointer-events:none;transition:transform .45s var(--ease-out),width .45s var(--ease-out),opacity .35s}
.npanel{position:absolute;left:0;right:0;top:100%;background:rgba(0,0,0,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--rule);clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;transition:clip-path .55s var(--ease-out),opacity .3s,visibility 0s linear .55s}
.npanel.is-open{clip-path:inset(0 0 0 0);opacity:1;visibility:visible;transition:clip-path .55s var(--ease-out),opacity .3s,visibility 0s}
.nav .npanel .wrap{display:block;height:auto}
.nav .npanel .nlayers{display:grid}
.nav .npanel ul{display:block;gap:0;position:static}
.nav .npanel ul.nworlds{display:grid;gap:clamp(10px,1.1vw,16px)}
.nav .npanel a{display:revert;overflow:visible;color:var(--argent);font-size:inherit}
.nav .npanel a.link{display:inline-block}
.npanel__in{padding-block:26px 34px}
.npanel__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.nworlds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(10px,1.1vw,16px)}
.nworlds li{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .6s var(--ease-out);transition-delay:calc(var(--i) * 40ms)}
.npanel.is-open .nworlds li{opacity:1;transform:none}
.nav .npanel .nworld{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--argent)}
.nworld__plate{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--sable-3);border:1px solid var(--rule)}
.nworld__plate img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.8);transform:scale(1.06);transition:filter .9s var(--ease-out),transform 1s var(--ease-out)}
.nworld:hover .nworld__plate img,.nworld:focus-visible .nworld__plate img{filter:grayscale(0) brightness(1);transform:scale(1)}
.nworld__n{font:italic 400 .9rem/1 var(--serif);color:var(--ash);margin-top:4px}
.nworld__name{font:400 1rem/1.15 var(--serif)}
.nworld__name em{font-style:italic}
.nworld__cat{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2)}
.nlayers{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:center}
.nring{position:relative;width:calc(var(--r) * 2 + 80px);height:calc(var(--r) * 2 + 80px)}
.nring ul{list-style:none;margin:0;padding:0}
.nring li{position:absolute;left:50%;top:50%;z-index:1;opacity:0;transform:translate(calc(-50% + var(--x) * .6),calc(-50% + var(--y) * .6));transition:opacity .5s,transform .8s var(--ease-out);transition-delay:calc(var(--i) * 50ms)}
.npanel.is-open .nring li{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}
.nav .npanel .nring__sig{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--rule-strong);border-radius:50%;background:#060606;color:var(--argent);text-decoration:none;transition:border-color .3s,background .3s,transform .4s var(--ease-out)}
.nring__sig svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.nring__sig:hover,.nring__sig:focus-visible,.nring__sig.is-on{border-color:var(--argent);background:#161616;transform:scale(1.1)}
.nring__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nring__circle{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%) rotate(-90deg);fill:none;stroke:var(--rule);stroke-width:1;pointer-events:none}
.nring__circle circle{stroke-dasharray:820;stroke-dashoffset:820;transition:stroke-dashoffset 1.2s var(--ease-out) .1s}
.npanel.is-open .nring__circle circle{stroke-dashoffset:0}
.nlayers__name{margin:12px 0 10px;font:300 clamp(2.4rem,4vw,3.8rem)/1 var(--serif)}
.nlayers__line{margin:0 0 20px;max-width:48ch;color:var(--ash)}
.nring__sig.steel{box-shadow:0 0 calc(var(--ga) * 18px) rgba(255,255,255,calc(var(--ga) * .25))}
@media (max-width:900px),(hover:none){.npanel,.nav__line{display:none}}
@media (prefers-reduced-motion: reduce){.npanel,.npanel.is-open,.nworlds li,.nring li,.nring__circle circle,.nav__line{transition:none}}

/* ---------- The field: engravings, sayings and portals the light finds ---------- */
.hall-field{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen;clip-path:inset(100% 0 0 0);-webkit-mask-image:radial-gradient(circle calc(var(--hall-r) * .72 * var(--lr)) at var(--lx) var(--ly),#000 0%,rgba(0,0,0,.55) 42%,transparent 100%);mask-image:radial-gradient(circle calc(var(--hall-r) * .72 * var(--lr)) at var(--lx) var(--ly),#000 0%,rgba(0,0,0,.55) 42%,transparent 100%);transition:opacity 1.2s var(--ease)}
.hall[data-tone="light"] .hall-field{opacity:0}
.hall-field__d{position:absolute;left:0;top:0;width:100%;will-change:transform}
.hall-engr{position:absolute;pointer-events:none}
.hall-engr svg{display:block;width:100%;height:100%;opacity:.2}
.hall-say{position:absolute;will-change:transform;margin:0;white-space:nowrap;font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:.34em;line-height:1.9;color:#fff}
/* The portal layer is exactly as tall as the page (site.js keeps it so) and clips whatever drifts past it,
   so a portal can never make the page longer than its footer. */
.hall-portals{position:absolute;left:0;top:0;width:100%;z-index:69;pointer-events:none;overflow:hidden;overflow:clip}
.hall-portal{position:absolute;width:56px;height:56px;display:grid;place-items:center;color:#fff;opacity:0;pointer-events:none;text-decoration:none;cursor:pointer}
.hall-portal svg{position:relative;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,255,255,.55));transition:transform .5s var(--ease-out)}
.hall-portal__ring{position:absolute;inset:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;transform:scale(.72);transition:transform .6s var(--ease-out),border-color .4s,box-shadow .4s}
.hall-portal.is-near .hall-portal__ring{transform:scale(1);border-color:rgba(255,255,255,.7)}
.hall-portal:hover .hall-portal__ring{transform:scale(1.2);box-shadow:0 0 28px rgba(255,255,255,.28)}
.hall-portal:hover svg{transform:scale(1.14) rotate(-6deg)}
.hall-portal.is-found .hall-portal__ring{animation:portalPulse 1.6s var(--ease-out) 1}
@keyframes portalPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 28px rgba(255,255,255,0)}}
.hall-portal__label{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);white-space:nowrap;font:500 .62rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:#ddd;opacity:0;transition:opacity .4s}
.hall-portal.is-near .hall-portal__label{opacity:.9}
.hall-gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;align-content:center;gap:20px;background:#000;color:#fff;pointer-events:none;clip-path:circle(0 at var(--gx,50%) var(--gy,50%));transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.hall-gate.is-open{clip-path:circle(150% at var(--gx,50%) var(--gy,50%))}
.hall-gate svg{width:96px;height:96px;fill:none;stroke:#fff;stroke-width:.9;stroke-linecap:round;stroke-linejoin:round;transform:scale(.4);opacity:0;transition:transform 1s var(--ease-out) .15s,opacity .6s .15s}
.hall-gate.is-open svg{transform:scale(1);opacity:1}
.hall-gate p{margin:0;font:500 .78rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:0;transition:opacity .6s .45s}
.hall-gate.is-open p{opacity:.85}
@media (prefers-reduced-motion: reduce){.hall-field,.hall-portals{display:none}}

.hall-say{transition:opacity .45s}
.hall-say.is-blocked,.hall-portal.is-blocked{opacity:0!important}
/* Phones and tablets: the same light, lighter for Safari. A fast flick to the bottom of the homepage crashed Safari on
   an iPhone, and these full-screen layers are what it holds at three times the pixels. The grain holds still at the
   size of the screen (moving, it was four screens large). The glow and the field draw white over black, which looks the
   same blended or not, so they skip the blend. A saying moves inside its depth instead of on a layer of its own. */
@media not all and (hover:hover) and (pointer:fine){
  .grain{inset:0;animation:none}
  .hall__glow,.hall-field{mix-blend-mode:normal}
  .hall-say{will-change:auto}
}

/* ---------- The reel: what KNGHT does, in six scenes ---------- */
.reel{position:relative;border-top:1px solid var(--rule)}
.reel__pin{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:clamp(70px,9vh,110px) clamp(40px,6vh,80px);overflow:hidden}
.reel__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;width:100%}
.reel__caps{position:relative}
.reel__cap+.reel__cap{margin-top:clamp(28px,4vh,48px)}
.reel__h{margin:14px 0 18px;font-size:clamp(2.1rem,3.5vw,3.7rem);line-height:1.04}
.reel__h em{font-style:italic}
.reel__p{margin:0;max-width:40ch;color:var(--ash);font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.6}
.reel__p b{color:var(--argent);font-weight:500}
.reel__no{font-family:var(--serif);font-style:italic;letter-spacing:0;margin-right:4px;color:var(--argent)}
.reel__count,.reel__hint{display:none}
.reel__stage{position:relative;width:min(100%,82vh);aspect-ratio:1;justify-self:center}
.reel__svg{display:block;width:100%;height:100%;overflow:visible}
.reel__svg *{vector-effect:non-scaling-stroke}
.reel__ring{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.1}
.reel__bound{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.1;stroke-dasharray:2 7}
.reel__lawtext{fill:rgba(255,255,255,.6);font:500 13px var(--sans);letter-spacing:.34em}
.reel__chip{fill:#060606;stroke:rgba(255,255,255,.6);stroke-width:1.1;transition:fill .3s,stroke .3s}
.reel__sig{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.reel__name{fill:#fff;font:400 26px var(--serif);text-anchor:middle}
.reel__name--core{font-size:30px;font-style:italic}
.reel__tag{fill:rgba(255,255,255,.55);font:500 12.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;text-anchor:middle}
.reel__corec{fill:#0b0b0b;stroke:#fff;stroke-width:1.4}
.reel__pulse{fill:none;stroke:#fff;stroke-width:1;opacity:0}
.reel__spoke{stroke:rgba(255,255,255,.2);stroke-width:1}
.reel__worlds{display:none}
.reel__wa{cursor:pointer}
.reel__seat .reel__chip{fill:#141414;pointer-events:all;stroke:#fff;stroke-width:1.6;stroke-dasharray:4 5;animation:seatdash 14s linear infinite}
@keyframes seatdash{to{stroke-dashoffset:-90}}
.reel__plus{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.reel__seat .reel__ping,.reel__halo,.reel__pulse{pointer-events:none}
.reel__seat .reel__spoke{opacity:.85}
.reel__seat .reel__name{font-style:italic}
.reel__hit{fill:transparent;pointer-events:all}
.reel__seat:hover .reel__chip{fill:#222}
@media (max-width:900px){.reel__seatg{transform:scale(1.5)}}
.reel__ping{fill:none;stroke:#fff;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;animation:seat 2.4s ease-out infinite}
.reel__ping--late{animation-delay:1.2s}
.reel__seat.is-away .reel__chip,.reel__seat.is-away .reel__ping{animation-play-state:paused} /* off screen, or not yet in the film (film.js) */
@keyframes seat{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
@media (prefers-reduced-motion:reduce){.reel__ping,.reel__seat .reel__chip{animation:none}}
.reel__wa:hover .reel__chip,.reel__wa:focus-visible .reel__chip{fill:#161616;stroke:#fff}
/* With motion: one pinned stage, the captions trade places */
.gsap .reel__pin{height:100svh;padding-block:clamp(70px,9vh,100px) clamp(30px,5vh,60px)}
.gsap .reel__caps{display:grid;align-items:center}
.gsap .reel__cap{grid-area:1/1;margin:0}
.gsap .reel__worlds{display:inline}
.gsap .reel__count{display:block;margin:28px 0 0;font:500 .72rem/1 var(--sans);letter-spacing:.3em;color:var(--ash-2)}
.gsap .reel__count b{color:var(--argent);font-weight:500}
.gsap .reel__hint{display:flex;align-items:center;gap:12px;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);margin:0;font:500 .66rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--ash-2)}
.reel__hint span{display:block;width:1px;height:28px;background:linear-gradient(var(--argent),transparent);animation:reelHint 2s ease-in-out infinite}
@keyframes reelHint{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media (max-width:900px){
  .reel__grid{grid-template-columns:1fr;gap:18px}
  .reel__stage{order:-1;width:min(92vw,52svh)}
  .reel__h{font-size:clamp(1.9rem,7.6vw,2.6rem);margin:10px 0 12px}
  .reel__p{font-size:1rem}
  .gsap .reel__pin{padding-block:calc(var(--nav-h) + 8px) 24px;align-items:flex-start}
  .gsap .reel__caps{align-items:start}
  .gsap .reel__count{margin-top:14px}
  .gsap .reel__hint{display:none}
}

.in-reel .totop{opacity:0;pointer-events:none;transform:translateY(12px)}
/* Without motion: the diagram stays beside the six lines as you read them */
html:not(.gsap) .reel__grid{align-items:start}
html:not(.gsap) .reel__stage{position:sticky;top:calc(var(--nav-h) + 4vh)}
@media (max-width:900px){html:not(.gsap) .reel__stage{position:static}}

/* ---------- The film: what KNGHT does, in six scenes of footage and motion graphics ---------- */
.film{position:relative;border-top:1px solid var(--rule)}
.film__stage{position:relative;overflow:hidden;background:#000;isolation:isolate;padding:clamp(70px,10vh,120px) var(--gutter)}
.film__plates,.film__ui,.film__shade{display:none}
.film__gfx{display:block;width:min(100%,560px);margin:0 auto 40px;overflow:visible}
.film__scene+.film__scene{margin-top:36px}
.film__h{margin:12px 0 16px;font-size:clamp(2.2rem,4.6vw,5rem);line-height:1}
.film__h em{font-style:italic}
.film__line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.film__in{display:inline-block}
.film__p{margin:0;max-width:38ch;color:#c4c4c4;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.6}
.film__steps{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.film__steps li{display:flex;align-items:baseline;gap:14px}
.film__steps b{font:400 clamp(1.4rem,2.1vw,2rem)/1 var(--serif)}
.film__steps span{color:#c4c4c4;font-size:.98rem}
.film__cta{margin-top:28px}
/* With motion: a full-screen film */
.gsap .film__stage{height:100svh;min-height:560px;padding:0}
.gsap .film__plates,.gsap .film__shade{display:block}
.gsap .film__ui{display:flex}
.film__plates{position:absolute;inset:0;z-index:0}
.film__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.film__plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.18) brightness(1.3);opacity:0;transform:scale(1.04);transition:opacity 1.4s ease}
.film__plate.is-on{opacity:1}
.film.no-autoplay .film__plate{opacity:0} /* the browser would not start the footage: the drawn film runs over black (film.js) */
.film__plate[data-i="3"]:not(.is-on){transition-duration:2.8s}
.film__plate[data-i="0"]:not(.is-on){transition-duration:2.4s}
/* The forge's metal is the brightest thing in the film: graded down so it keeps its texture instead of clipping to white */
.film__plate[data-i="2"]{filter:grayscale(1) contrast(1.06) brightness(.92)} /* genesis fades as it condenses into the core */ /* the hall fades out slowly under scene 5's dust */
.film__shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.38) 30%,rgba(0,0,0,0) 52%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.4) 100%)}
.gsap .film__gfx{position:absolute;z-index:2;right:3vw;top:50%;margin:0;width:min(80vh,50vw);height:auto;aspect-ratio:1;transform:translateY(-50%)}
.gsap .film__type{position:absolute;z-index:3;left:var(--gutter);top:50%;transform:translateY(-50%);width:min(44vw,640px);display:grid}
.gsap .film__scene{grid-area:1/1;margin:0}
.film__ui{position:absolute;z-index:4;left:var(--gutter);right:var(--gutter);bottom:clamp(18px,4vh,36px);align-items:center;gap:18px}
.film__play{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;transition:border-color .3s,background .3s}
.film__play:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.film__play svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.film__play .i-play{fill:currentColor;stroke:none}
.film.is-playing .i-play,.film:not(.is-playing) .i-pause{display:none}
.film__bar{position:relative;flex:1;height:2px;background:rgba(255,255,255,.18)}
.film__fill{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.film__tick{position:absolute;top:50%;left:calc(var(--p) * 100%);width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border:0;background:none;cursor:pointer}
.film__tick::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#000;border:1px solid rgba(255,255,255,.5);transition:background .3s,border-color .3s}
.film__tick.is-on::before{background:#fff;border-color:#fff}
.film__tick span{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;font:500 .62rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);opacity:0;transition:opacity .3s}
.film__tick:hover span,.film__tick:focus-visible span,.film__tick.is-on:last-of-type span{opacity:1}
.film__replay{display:inline-block;visibility:hidden;opacity:0;transition:opacity .6s;flex:none;padding:0;border:0;background:none;color:#fff;font:500 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid currentColor;padding-bottom:4px}
.film.is-ended .film__replay{visibility:visible;opacity:1} /* its room is kept all along, so the bar never jumps when it appears */
@media (max-width:900px){
  .gsap .film__gfx{left:50%;right:auto;top:calc(var(--nav-h) + 1svh);width:min(84vw,40svh);transform:translateX(-50%)}
  .gsap .film__type{left:20px;right:20px;width:auto;top:auto;bottom:86px;transform:none}
  .film__h{font-size:clamp(2rem,8.6vw,2.7rem)}
  .film__shade{background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.6) 58%,rgba(0,0,0,.92) 100%)}
  .film__tick span{display:none}
  .film__ui{gap:14px}
  /* The diagram is small on a phone: the little tags go, and the names and the boundary's words grow so they read */
  .film .reel__tag{display:none}
  .film .reel__name{font-size:38px}
  .film .reel__name--core{font-size:42px}
  .film .reel__lawtext{font-size:22px;letter-spacing:.24em}
  /* Names below a world chip clear its outline; names above sit as close as "Yours" (the descriptors are hidden here) */
  .film .reel__name--below{transform:translateY(10px)}
  .film .reel__name--above{transform:translateY(22px)}
  /* Each scene sits on the bottom of the shared type cell, so the tallest one (the ending) doesn't lift the rest */
  .gsap .film__scene{align-self:end}
}
@media (max-width:900px) and (max-height:700px){.gsap .film__gfx{width:min(84vw,34svh)}}
/* A thin dark keyline under the diagram's words, so they hold over bright footage */
.film .reel__name,.film .reel__tag,.film .reel__lawtext{paint-order:stroke;stroke:rgba(0,0,0,.72);stroke-width:2.5px;stroke-linejoin:round}
.film .reel__tag,.film .reel__lawtext{stroke-width:2px}
.film__p{text-wrap:balance}
/* The site's faint light from the cursor stays off over the film, which has its own light */
.hall__glow{transition:opacity .6s}
.in-reel .hall__glow{opacity:0}

.gsap .film__gfx .reel__halo{mix-blend-mode:screen}
.film.no-footage .film__plates{display:none}

/* ---------- Layer pages: you are here, sealed checks, and the turn to the next layer ---------- */
.lhero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.lhero__body{grid-column:1;grid-row:1;min-width:0}
.lring{grid-column:2;grid-row:1;margin:0 -4% 0 0;position:relative}
.lring__svg{transform:scale(1.12)}
.lring__svg{display:block;width:100%;height:auto;overflow:visible}
.lring__halo{opacity:0;animation:lrFade 2.4s ease .2s forwards}
.lring__ring{fill:none;stroke-width:1.1}
.lring__ring.is-before{stroke:rgba(255,255,255,.42)}
.lring__ring.is-after{stroke:rgba(255,255,255,.3);stroke-dasharray:3 7}
.lring__ring.is-here{stroke:#fff;stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1;animation:lrDraw 2s cubic-bezier(.65,0,.35,1) .35s forwards;filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
.lring__corec{fill:#000;stroke:rgba(255,255,255,.5);stroke-width:1.2}
.lring__core.is-here .lring__corec{stroke:#fff;stroke-width:2.4;filter:drop-shadow(0 0 10px rgba(255,255,255,.6))}
.lring__sig{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.lring__core .lring__sig{color:rgba(255,255,255,.7)}
.lring__core.is-here .lring__sig{color:#fff}
.lring__chipc{fill:#000;stroke:rgba(255,255,255,.3);stroke-width:1.1;transition:stroke .3s}
.lring__chip{color:rgba(255,255,255,.55);text-decoration:none}
.lring__chip.is-after{color:rgba(255,255,255,.28)}
.lring__chip.is-after .lring__chipc{stroke:rgba(255,255,255,.14)}
.lring__chip:hover{color:#fff}
.lring__chip:hover .lring__chipc{stroke:#fff}
.lring__chip.is-here{color:#fff;opacity:0;animation:lrFade .8s ease 1.9s forwards}
.lring__chip.is-here .lring__chipc{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 8px rgba(255,255,255,.5))}
.lring__name{fill:currentColor;font:400 22px/1 var(--serif);text-anchor:middle}
.lring__chip:not(.is-here) .lring__name{font-size:17px;opacity:0;transition:opacity .3s}
.lring__chip:not(.is-here):hover .lring__name{opacity:1}
.lring__chip.is-here .lring__name{font-size:30px}
.lring__name--core{fill:#fff;font-size:30px}
.lring__cap{display:flex;justify-content:center;gap:28px;margin-top:10px;font:500 .7rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.lring__cap b{font-weight:500;color:var(--argent)}
@keyframes lrDraw{to{stroke-dashoffset:0}}
@keyframes lrFade{to{opacity:1}}
@media (max-width:900px){
  .lhero__grid{grid-template-columns:minmax(0,1fr)}
  .lring{grid-column:1;grid-row:1;width:min(88%,360px);margin:0 auto}
  .lring__svg{transform:none}
  .lhero__body{grid-row:2}
}
@media (prefers-reduced-motion: reduce){.lring__ring.is-here{stroke-dashoffset:0;animation:none}.lring__chip.is-here,.lring__halo{opacity:1;animation:none}}
/* Each rule is sealed as it arrives */
.wrules--sealed b{display:flex;align-items:flex-start;gap:14px}
.seal{flex:none;position:relative;width:26px;height:26px;margin-top:.12em;border:1px solid rgba(255,255,255,.5);border-radius:50%;opacity:0;transform:scale(1.9) rotate(-25deg)}
.seal::before{content:"";position:absolute;inset:3px;border:1px dashed rgba(255,255,255,.35);border-radius:50%}
.seal::after{content:"";position:absolute;left:8px;top:6px;width:6px;height:10px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.is-sealed .seal{opacity:1;transform:none;transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.no-js .seal,.reduce .seal{opacity:1;transform:none}
/* The turn: the next layer, large */
.lturn{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:24px;padding-block:clamp(48px,7vw,96px);border-top:1px solid var(--rule)}
.lturn__prev{grid-column:1;align-self:end;font-size:.9rem}
.lturn__next{grid-column:2;justify-self:end;display:grid;justify-items:end;gap:14px;text-align:right;text-decoration:none;color:var(--argent)}
.lturn__name{display:inline-flex;align-items:center;gap:.3em;font:400 clamp(3rem,7vw,6.4rem)/1 var(--serif);transition:gap .5s var(--ease)}
.lturn__name svg:first-child{width:.55em;height:.55em;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.lturn__name .arrow{width:.45em;height:.3em;transition:transform .5s var(--ease)}
.lturn__next:hover .lturn__name .arrow{transform:translateX(.2em)}
.lturn__q{color:var(--ash);font:italic 400 1.15rem/1.3 var(--serif)}
@media (max-width:700px){.lturn{grid-template-columns:minmax(0,1fr)}.lturn__next{grid-column:1;grid-row:1}.lturn__prev{grid-row:2}}
.lgate{position:fixed;left:0;top:0;z-index:200;width:20px;height:20px;margin:-10px 0 0 -10px;border:1.5px solid #fff;border-radius:50%;background:#000;box-shadow:0 0 30px rgba(255,255,255,.5),inset 0 0 30px rgba(255,255,255,.25);pointer-events:none;transition:transform .7s cubic-bezier(.7,0,.3,1)}

/* ---------- Layer explainers: ten seconds per layer, drawn in line ---------- */
.lx__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px}
.lx__tag{font:500 .62rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ash-2)}
.lx{position:relative;border:1px solid var(--rule);border-radius:8px;padding:clamp(16px,3vw,40px) clamp(12px,3vw,40px) 24px;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.05),transparent 70%)}
.lx__svg{display:block;width:100%;max-width:880px;height:auto;margin:0 auto;overflow:visible}
.lx-line{fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lx-faint{stroke:rgba(255,255,255,.35)}
.lx-bold{stroke-width:2.4}
.lx-path{stroke-width:2;stroke-dasharray:none}
.lx-fill,.lx-dot{fill:#fff}
.lx-ink{fill:#000!important}
.lx-node{fill:#000;stroke:#fff;stroke-width:1.6}
.lx-strike{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.lx-glow{filter:drop-shadow(0 0 8px rgba(255,255,255,.7))}
.lx-s{fill:var(--ash);font:500 13px var(--sans);letter-spacing:.16em;text-transform:uppercase;text-anchor:middle}
.lx-s--l{fill:#fff;font-size:17px;letter-spacing:.03em;text-transform:none}
.lx-note{fill:#d6d6d6;font-style:italic;font-size:15px;letter-spacing:.02em;text-transform:none}
.lx-h{fill:#fff;font:400 26px var(--serif);text-anchor:middle}
.lx-h--l{font-size:31px}
.lx-h--s{font-size:19px}
.lx-h--xl{font-size:64px;letter-spacing:.3em}
.lx-start{text-anchor:start}
.lx-end{text-anchor:end}
.lx-runner{opacity:0}
.lx.is-on .lx-runner{animation:lxShow .2s linear var(--rs,2.4s) both}
@keyframes lxShow{from{opacity:0}to{opacity:1}}
.lx__beats{list-style:none;margin:18px auto 0;padding:0;display:grid;max-width:640px;text-align:center;font:italic 400 clamp(1.15rem,1.8vw,1.45rem)/1.35 var(--serif);color:var(--argent)}
.lx__beats li{grid-area:1/1}
.lx__again{display:block;margin:16px auto 0;padding:0 0 4px;border:0;border-bottom:1px solid currentColor;background:none;color:var(--ash);font:500 .68rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s,color .3s}
.lx.is-done .lx__again{opacity:1;pointer-events:auto}
.lx__again:hover{color:#fff}
/* The last frame, for no script or reduced motion */
.lx:not(.is-ready) .x-out,.lx:not(.is-ready) .x-go{opacity:0}
.lx:not(.is-ready) .x-dim{opacity:.3}
.lx:not(.is-ready) .lx__beats li:not(.is-last){display:none}
/* The film itself */
.lx.is-ready .x-in,.lx.is-ready .lx__beats li{animation:lxIn .8s var(--ease) var(--d) both}
.lx.is-ready .lx__beats li:not(.is-last){animation:lxIn .8s var(--ease) var(--d) both,lxOut .5s ease var(--o) forwards}
.lx.is-ready .x-out{animation:lxOut .6s ease var(--o) forwards}
.lx.is-ready .x-in.x-out{animation:lxIn .8s var(--ease) var(--d) both,lxOut .6s ease var(--o) forwards}
.lx.is-ready .x-in.x-go{animation:lxIn .8s var(--ease) var(--d) both,lxGo 1s cubic-bezier(.7,0,.3,1) var(--o) forwards}
.lx.is-ready .x-in.x-dim{animation:lxIn .8s var(--ease) var(--d) both,lxDim .6s ease var(--o) forwards}
.lx.is-ready .x-draw{stroke-dasharray:1;animation:lxDraw var(--t,1.2s) cubic-bezier(.65,0,.35,1) var(--d) both}
.lx.is-ready .x-draw.x-out{animation:lxDraw var(--t,1.2s) cubic-bezier(.65,0,.35,1) var(--d) both,lxOut .6s ease var(--o) forwards}
.x-pop{transform-box:fill-box;transform-origin:center}
.lx.is-ready .x-pop{animation:lxPop .55s cubic-bezier(.2,1.6,.4,1) var(--d) both}
.lx.is-ready .x-pop.x-out{animation:lxPop .55s cubic-bezier(.2,1.6,.4,1) var(--d) both,lxOut .4s ease var(--o) forwards}
.lx.is-ready .x-pop.x-flash{animation:lxPop .55s cubic-bezier(.2,1.6,.4,1) var(--d) both,lxFlash 1.1s ease var(--o) both}
.lx.is-ready .x-type{animation:lxType var(--t,1.2s) steps(15,end) var(--d) both}
.lx.is-ready:not(.is-on) *{animation-play-state:paused!important}
@keyframes lxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes lxOut{to{opacity:0}}
@keyframes lxDim{to{opacity:.3}}
@keyframes lxGo{to{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.6)}}
@keyframes lxDraw{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes lxPop{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}
@keyframes lxFlash{0%{fill:#000}20%{fill:#fff;filter:drop-shadow(0 0 10px #fff)}100%{fill:#fff}}
@keyframes lxType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:700px){.lx{padding:14px 8px 20px}.lx__head{flex-direction:column;gap:8px}.lx__svg{width:118%;margin-left:-9%}}
.lx-fold{stroke:rgba(255,255,255,.3);stroke-width:1;stroke-dasharray:4 4}
.lx-tiny{fill:var(--ash);font:500 9px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-anchor:middle}
.lx-tiny--w{fill:#e8e8e8}
.lx-it{font-style:italic;text-transform:none;letter-spacing:.04em;font-size:10px}
.lx-brand{fill:#fff;font:400 19px var(--serif);letter-spacing:.28em;text-anchor:middle}
.lx-brand--l{font-size:24px}
.lx-li{fill:#e0e0e0;font:400 14px var(--sans)}
.lx-patch{fill:#fff}
.lx-bars{fill:#000}
.lx-code{fill:#000;font:500 6px var(--sans);letter-spacing:.08em;text-anchor:middle}
.lx .lx-start{text-anchor:start}
.lx .lx-end{text-anchor:end}
.lx-nc{text-transform:none;letter-spacing:.06em}
.lx-logo{fill:#fff;font-family:var(--serif);font-weight:600}
/* "Without it" films: the layer, skipped */
.lxw{margin-top:clamp(28px,4vw,48px)}
.lx-dash{stroke-dasharray:none}
.lx.is-ready .lx-dash.x-draw{stroke-dasharray:1}
.lx-s--w{fill:#fff}
.lx-ink-bg{fill:#000;stroke:#fff;stroke-width:1.4}
.lx:not(.is-ready) .x-scan{opacity:0}
.lx.is-ready .x-scan{animation:lxScan .5s ease-in-out var(--d) 2 alternate both}
@keyframes lxScan{from{transform:translateY(0)}to{transform:translateY(80px)}}
.cta-note{margin:14px 0 0;font-size:.82rem;letter-spacing:.04em;opacity:.72}
/* ---------- The plain-speech test ---------- */
.pl__score{display:grid;grid-template-columns:120px minmax(0,1fr);gap:28px;align-items:center;margin-bottom:28px}
.pl__dial{position:relative;width:120px;height:120px}
.pl__dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.pl__track{fill:none;stroke:var(--rule-strong);stroke-width:6}
.pl__arc{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}
.pl__dial span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:500 .62rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.pl__dial b{display:block;font:400 2.4rem/1 var(--serif);letter-spacing:0;color:#fff;margin-bottom:4px}
.pl__meta{margin:0;font-size:.88rem;color:var(--ash)}
.pl-out .ck__sum{margin-bottom:8px}
.pl__plain-h{margin-top:clamp(40px,5vw,64px)}
.pl__plain{max-width:860px;margin:16px 0 0;padding:24px 26px;border:1px solid var(--rule-strong);border-radius:8px;font:400 clamp(1.1rem,1.5vw,1.3rem)/1.7 var(--serif);color:#ececec;white-space:pre-wrap}
.pl-out .ck__actions{margin-top:18px}
@media (max-width:600px){.pl__score{grid-template-columns:90px minmax(0,1fr);gap:18px}.pl__dial{width:90px;height:90px}.pl__dial b{font-size:1.8rem}}
/* ---------- Waymarks ---------- */
.wm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start}
.wm__picks{display:flex;flex-wrap:wrap;gap:8px}
.wm .ck__cats{align-items:flex-start}
.wm__count{font-size:.88rem;color:var(--ash)}
.wm__grid{display:grid;gap:14px;position:sticky;top:calc(var(--nav-h) + 20px);max-height:calc(100vh - var(--nav-h) - 40px);overflow:auto;padding:4px}
.wm__grid.is-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
.wm__card{margin:0;animation:wmIn .5s var(--ease-out) calc(var(--i) * 50ms) both}
.wm__card svg{display:block;width:100%;height:auto;box-shadow:0 10px 30px rgba(0,0,0,.6);outline:1px solid var(--rule)}
@keyframes wmIn{from{opacity:0;transform:translateY(10px)}}
@media (max-width:900px){.wm{grid-template-columns:minmax(0,1fr)}.wm__grid{position:relative;top:0;max-height:none;order:-1}}
@media (prefers-reduced-motion:reduce){.wm__card{animation:none}}
/* ---------- The cartographer ---------- */
.ct{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.ct__form{display:grid;gap:26px}
.ct__group{margin:0;padding:0;border:0;display:grid;gap:4px}
.ct__group legend{margin-bottom:10px;font:500 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.ct__item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--rule);cursor:pointer}
.ct__item input{position:absolute;opacity:0;width:1px;height:1px}
.ct__box{width:22px;height:22px;margin-top:2px;border:1px solid var(--rule-strong);border-radius:50%;transition:background .3s,border-color .3s,box-shadow .3s}
.ct__item input:checked + .ct__box{background:#fff;border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,.5)}
.ct__item input:focus-visible + .ct__box{outline:1px solid #fff;outline-offset:3px}
.ct__lab{font:400 1.08rem/1.35 var(--serif);color:var(--ash);transition:color .3s}
.ct__item input:checked ~ .ct__lab{color:var(--argent)}
.ct__out{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:22px;padding:clamp(18px,2.6vw,30px);border:1px solid var(--rule);border-radius:8px;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.05),transparent 70%)}
.ct__map{margin:0}
.ct__svg{display:block;width:100%;height:auto}
.ct__frame{fill:none;stroke:var(--rule-strong)}
.ct__streets path{fill:none;stroke:rgba(255,255,255,.1);stroke-width:5;stroke-linecap:round}
.ct__lit path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1),opacity .3s}
.ct__lit path.is-on{stroke-dashoffset:0;opacity:1;filter:drop-shadow(0 0 4px rgba(255,255,255,.6))}
.ct__pin{transform-box:fill-box;transform-origin:50% 100%;transform:scale(var(--s,.75));transition:transform .8s cubic-bezier(.2,1.4,.4,1)}
.ct__halo{fill:rgba(255,255,255,.06)}
.ct__drop{fill:#000;stroke:#fff;stroke-width:2}
.ct__dot{fill:#fff}
.ct__ring{fill:none;stroke:#fff;stroke-width:1.2;opacity:0}
.ct__map.is-strong .ct__ring{animation:ctRing 2.4s ease-out infinite}
@keyframes ctRing{0%{opacity:.7;r:30}100%{opacity:0;r:120}}
.ct__fixes{margin:0;padding-left:1.2em;display:grid;gap:10px;color:var(--argent);font-size:.95rem}
.ct__fixes .link{font-size:.88rem}
@media (max-width:900px){.ct{grid-template-columns:minmax(0,1fr)}.ct__out{position:relative;top:0;order:-1}}
@media (prefers-reduced-motion:reduce){.ct__lit path,.ct__pin{transition:none}.ct__map.is-strong .ct__ring{animation:none}}
/* ---------- The one-line forge ---------- */
.ln{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.lk__row.ln__row{grid-template-columns:minmax(0,1fr)}
.ln__row small{font:400 .8rem var(--sans);color:var(--ash)}
.ln__in{width:100%;min-height:52px;padding:0 16px;border:1px solid var(--rule-strong);border-radius:8px;background:rgba(255,255,255,.03);color:var(--argent);font:400 1.08rem var(--sans)}
.ln__in:focus{outline:none;border-color:var(--argent)}
.ln__out{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:18px}
.ln__stage{display:grid;place-items:center;min-height:300px;padding:clamp(28px,4vw,56px);border:1px solid var(--rule-strong);border-radius:8px;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.07),transparent 70%);overflow:hidden}
.ln__line{margin:0;text-align:center;font:italic 400 clamp(1.5rem,2.6vw,2.2rem)/1.35 var(--serif);color:#fff}
.ln__line span{display:inline-block}
.ln__line.is-forging span{animation:lnGather 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 45ms) both}
@keyframes lnGather{from{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.7);filter:blur(6px)}}
.ln__forms{margin:0}
.ln__test{margin:0;font-size:.88rem;color:var(--ash)}
@media (max-width:900px){.ln{grid-template-columns:minmax(0,1fr)}.ln__out{position:relative;top:0;order:-1}}
@media (prefers-reduced-motion:reduce){.ln__line.is-forging span{animation:none}}
/* ---------- The armoury ---------- */
.arm-sec{padding-top:clamp(32px,4vw,56px)}
.arm{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.arm__layer{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2.4fr);gap:clamp(16px,4vw,64px);padding-block:clamp(26px,3.4vw,42px);border-bottom:1px solid var(--rule)}
.arm__head{display:flex;align-items:center;gap:14px;align-self:start}
.arm__sig{width:34px;height:34px;flex:none;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;color:var(--argent)}
.arm__num{font:italic 300 1.3rem/1 var(--serif);color:var(--ash)}
.arm__name{font:400 clamp(1.6rem,2.6vw,2.2rem)/1 var(--serif);color:var(--argent);text-decoration:none}
.arm__name:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.arm__tools{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.arm__tool{position:relative;display:grid;gap:6px;padding:20px 54px 20px 22px;border:1px solid var(--rule-strong);border-radius:8px;color:var(--argent);text-decoration:none;transition:border-color .3s,background .3s}
.arm__tool b{font:400 1.35rem/1.15 var(--serif)}
.arm__tool span{font-size:.95rem;color:var(--ash);max-width:60ch}
.arm__tool .arrow{position:absolute;right:22px;top:50%;width:18px;margin-top:-5px;transition:transform .4s var(--ease-out)}
a.arm__tool:hover{border-color:var(--argent);background:rgba(255,255,255,.04)}
a.arm__tool:hover .arrow{transform:translateX(5px)}
.arm__tool.is-forging{border-style:dashed;border-color:var(--rule);opacity:.7}
.arm__tool em{font:500 .62rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash-2);font-style:normal;margin-top:4px}
@media (max-width:760px){.arm__layer{grid-template-columns:minmax(0,1fr)}}
/* ---------- The leak ---------- */
.lk-sec{padding-top:clamp(32px,4vw,56px)}
.lk{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.lk__form{display:grid;gap:22px}
.lk__form .ck__cats{margin:0}
.lk__row{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:8px 18px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.lk__q{font:400 1.15rem/1.3 var(--serif);color:var(--argent)}
.lk__hint{grid-column:1/-1;font-style:normal;font-size:.84rem;color:var(--ash)}
.lk__in{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 16px;border:1px solid var(--rule-strong);border-radius:8px;background:rgba(255,255,255,.03)}
.lk__in:focus-within{border-color:var(--argent)}
.lk__in i{font-style:normal;color:var(--ash)}
.lk__in input{width:100%;min-width:0;border:0;background:none;color:var(--argent);font:400 1.15rem var(--sans);text-align:right;-moz-appearance:textfield}
.lk__in input:focus{outline:none}
.lk__in input::-webkit-outer-spin-button,.lk__in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lk__row.lk__row--slide{grid-template-columns:minmax(0,1fr)}
.lk__in--slide{border:0;background:none;padding:0;gap:16px}
.lk__in--slide input{accent-color:#fff;padding:0;text-align:left}
.lk__in--slide output{min-width:3.4em;font:400 1.15rem var(--sans);color:var(--argent);text-align:right}
.lk__out{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:center;padding:clamp(20px,3vw,36px);border:1px solid var(--rule);border-radius:8px;background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.06),transparent 70%)}
.lk__glass{margin:0}
.lk__svg{display:block;width:100%;height:auto}
.lk__frame{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.lk__bar{fill:#000;stroke-width:1.6}
.lk__post{stroke-width:1.2;opacity:.6}
.lk__sand{fill:#d9d9d9}
.lk__stream{fill:none;stroke:#d9d9d9;stroke-width:2;stroke-dasharray:3 5;animation:lkFall .5s linear infinite;transition:opacity .4s}
@keyframes lkFall{to{stroke-dashoffset:-8}}
.lk__stream.is-dry{animation-play-state:paused} /* faded out, not pouring (leak.js) */
.lk__lbl{margin:0 0 6px;font:500 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.lk__lbl--gap{margin-top:26px}
.lk__big{margin:0;font:400 clamp(2.4rem,5vw,4rem)/1 var(--serif);color:#fff;font-variant-numeric:tabular-nums;word-break:break-word}
.lk__sub{margin:12px 0 0;font-size:.92rem;color:var(--ash)}
.lk__mid{margin:0;font:italic 400 clamp(1.6rem,3vw,2.3rem)/1 var(--serif);color:var(--argent);font-variant-numeric:tabular-nums}
.lk__note{margin:22px 0 0;font-size:.8rem;color:var(--ash-2)}
@media (max-width:900px){.lk{grid-template-columns:minmax(0,1fr)}.lk__out{position:relative;top:0;order:-1}}
@media (max-width:480px){.lk__row{grid-template-columns:minmax(0,1fr) 130px}.lk__out{grid-template-columns:100px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.lk__stream{animation:none}}
/* ---------- The herald ---------- */
.hb-sec{padding-top:clamp(40px,5vw,72px)}
.hb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.hb__form{display:grid;gap:18px}
.hb__form .ck__cats{margin:0}
.hb__fields{display:grid;gap:14px}
.hb__hint{display:block;margin-top:2px;font-style:normal;font-size:.82rem;color:var(--ash)}
.hb__select{width:100%;min-height:50px;padding:0 16px;border:1px solid var(--rule-strong);border-radius:8px;background:rgba(255,255,255,.03);color:var(--argent);font:400 1rem var(--sans);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.hb__select option{background:#000;color:#fff}
.hb__check{display:flex;align-items:center;gap:10px;text-transform:none!important;letter-spacing:0!important;font-size:.92rem!important;color:var(--argent)!important}
.hb__check input{width:18px;height:18px;accent-color:#fff}
.hb__size small{margin-left:8px;font-size:.72rem;color:var(--ash)}
.cat[aria-pressed="true"] small{color:inherit;opacity:.7}
.hb__out{position:sticky;top:calc(var(--nav-h) + 20px);display:grid;gap:22px}
.hb__stage{position:relative;margin:0;display:grid;place-items:center;min-height:320px;padding:clamp(16px,2.4vw,28px);border:1px solid var(--rule);border-radius:8px;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.06),transparent 70%);overflow:hidden}
.hb__stage svg{display:block;width:100%;height:auto;max-height:62vh;filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))}
.hb__stage.is-card svg{max-width:340px}
.hb__stage.is-sticker svg{max-width:300px}
.hb__empty{margin:0;color:var(--ash);font:italic 400 1.2rem var(--serif);text-align:center}
.hb__stage.is-forging .hb-r{transform-box:fill-box;transform-origin:center;animation:hbRow .32s cubic-bezier(.2,1.4,.4,1) calc(.45s + var(--r) * 20ms) both}
.hb__stage.is-forging .hb-d{stroke-dasharray:1;animation:hbDraw 1.1s cubic-bezier(.65,0,.35,1) both}
.hb__stage.is-forging .hb-c{animation:hbFade .8s ease 1.2s both}
.hb__stage.is-forging .hb-i{animation:hbFade .6s ease 1.5s both}
.hb__stage.is-forging::after{content:"";position:absolute;inset:-20%;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-120%);animation:hbFoil 1.3s ease 1.9s forwards;mix-blend-mode:screen}
@keyframes hbRow{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:none}}
@keyframes hbDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hbFade{from{opacity:0}to{opacity:1}}
@keyframes hbFoil{to{transform:translateX(120%)}}
.hb__read{display:grid;gap:14px}
.hb__verdict{margin:0;min-height:1.4em;font:italic 400 1.25rem var(--serif);color:var(--ash)}
.hb__verdict.is-ok{color:#fff}
.hb__verdict.is-ok::before{content:"";display:inline-block;width:8px;height:8px;margin:0 10px 2px 0;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff}
.hb__verdict.is-bad{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hb__range{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center}
.hb__range p{margin:0;font-size:.9rem;color:var(--ash)}
.hb__range b{display:block;color:var(--argent);font-weight:500}
.hb__beam{width:100%;height:auto}
.hb__ph,.hb__sg{fill:none;stroke:#fff;stroke-width:1.4}
.hb__cone{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.35);stroke-width:1}
.hb__axis{stroke:rgba(255,255,255,.5);stroke-dasharray:3 4}
.hb__payload{margin:0;font:400 .82rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--argent);word-break:break-all}
.hb__payload span{display:block;font:500 .66rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-bottom:6px}
.hb__read .ck__actions{margin-top:4px;flex-wrap:wrap}
@media (max-width:900px){.hb{grid-template-columns:minmax(0,1fr)}.hb__out{position:relative;top:0;order:-1}}
@media (prefers-reduced-motion:reduce){.hb__stage.is-forging *,.hb__stage.is-forging::after{animation:none!important}}
.hb-cam{position:fixed;inset:0;z-index:200;display:grid;place-items:center;align-content:center;gap:18px;padding:24px;background:rgba(0,0,0,.94)}
.hb-cam[hidden]{display:none}
.hb-cam__view{max-width:min(100%,900px);max-height:70vh;width:auto;height:auto;border:1px solid var(--rule-strong);border-radius:8px;background:#000}
.hb-cam__status{margin:0;max-width:640px;text-align:center;font:italic 400 1.25rem var(--serif);color:var(--argent);word-break:break-word}
.hb-cam__status b{font-style:normal;color:#fff}
/* ---------- The licence keep ---------- */
.kp__rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kp__row{display:grid;grid-template-columns:minmax(0,1fr) 190px 44px;gap:12px;align-items:end}
.kp__date input{color-scheme:dark}
.kp__x{width:44px;height:50px;border:1px solid var(--rule);border-radius:8px;background:none;color:var(--ash);font:300 1.4rem/1 var(--sans);cursor:pointer;transition:color .2s,border-color .2s}
.kp__x:hover{color:#fff;border-color:var(--argent)}
.kp__yearly{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;color:var(--argent);cursor:pointer}
.kp__yearly input{width:18px;height:18px;accent-color:#fff}
@media (max-width:700px){.kp__row{grid-template-columns:minmax(0,1fr) 44px;padding-bottom:14px;border-bottom:1px solid var(--rule)}.kp__name{grid-column:1/-1}}
.kp__wall{margin:0 0 30px;max-width:1000px}
.kp__svg{display:block;width:100%;height:auto;overflow:visible}
.kp__stone{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.55);stroke-width:1.4;stroke-linejoin:round}
.kp__brick{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1}
.kp__wax{fill:#000}
.kp__ring{fill:none;stroke:#fff;stroke-width:1.6}
.kp__ring--in{stroke:rgba(255,255,255,.4);stroke-width:1}
.kp__ring--dash{stroke-dasharray:5 5}
.kp__crack{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:kpCrack 1.1s cubic-bezier(.65,0,.35,1) .5s forwards}
.kp__abbr{fill:#fff;font:500 19px var(--serif);letter-spacing:.12em;text-anchor:middle}
.kp__days{fill:#fff;font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-anchor:middle}
.kp__nm{fill:var(--ash);font:400 12px var(--sans);text-anchor:middle}
.kp__seal{outline:none}
.kp__seal:focus-visible .kp__wax{stroke:#fff;stroke-width:1;stroke-dasharray:2 3}
.kp__seal.is-sound .kp__ring:not(.kp__ring--in){filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}
.kp__seal.is-broken .kp__abbr{opacity:.55}
.kp__half{transform-box:fill-box;transform-origin:center;transform:translateX(var(--dx)) rotate(var(--rot))}
.kp__seal.is-in{transform-box:fill-box;transform-origin:center;animation:kpDrop .6s cubic-bezier(.2,1.5,.4,1) calc(var(--i) * 90ms) both}
.kp__seal.is-in .kp__half{animation:kpSplit .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 90ms + .45s) both}
@keyframes kpDrop{from{opacity:0;transform:translateY(-26px) scale(1.25)}to{opacity:1;transform:none}}
@keyframes kpCrack{to{stroke-dashoffset:0}}
@keyframes kpSplit{from{transform:none}}
.kp__how{margin:16px 0 0;font-size:.9rem;color:var(--argent)}
@media (prefers-reduced-motion:reduce){.kp__seal.is-in,.kp__seal.is-in .kp__half{animation:none}.kp__crack{animation:none;stroke-dashoffset:0}}
/* ---------- The reply scribe ---------- */
.rp__stars{margin-top:-4px}
.rp__star{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--ash-2);cursor:pointer;transition:color .25s,transform .25s}
.rp__star svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.rp__star.is-lit{color:#fff}
.rp__star.is-lit svg{fill:#fff}
.rp__star:hover{transform:translateY(-2px);color:#fff}
.rp__star:focus-visible{outline:1px solid #fff;outline-offset:2px;border-radius:4px}
.rp__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.rp__field{display:grid;gap:8px}
.rp__field span{font:500 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.rp__field input{width:100%;min-height:50px;padding:0 18px;border:1px solid var(--rule-strong);border-radius:8px;background:rgba(255,255,255,.03);color:var(--argent);font:400 1rem var(--sans)}
.rp__field input:focus{outline:none;border-color:var(--argent)}
.rp__status{margin:12px 0 0;font-size:.9rem;color:var(--argent)}
.rp__status:empty{display:none}
.ck__actions .link{background:none;border:0;padding-inline:0;font:inherit;font-weight:500;color:var(--argent);cursor:pointer}
@media (max-width:700px){.rp__row{grid-template-columns:1fr}.rp__stars .ck__lbl{flex-basis:100%}.rp__stars{gap:2px}}
.rp__ink{max-width:860px;margin:0 0 34px;padding:clamp(22px,3vw,36px) clamp(22px,3vw,40px);border:1px solid var(--rule-strong);border-radius:8px;background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.06),transparent 70%);font:400 clamp(1.15rem,1.6vw,1.4rem)/1.65 var(--serif);color:#ececec}
.rp__ink p{margin:0 0 1em}
.rp__ink p:last-child{margin:0;font-style:italic;color:var(--ash)}
.rp__ink.is-inking span{display:inline-block;opacity:0;filter:blur(6px);transform:translateY(4px);animation:rpInk .7s var(--ease-out) calc(var(--i) * 38ms) forwards}
@keyframes rpInk{to{opacity:1;filter:none;transform:none}}
.rp__label{display:block;margin:0 0 12px;font:500 .7rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.rp__edit{min-height:180px}
.rp__marked{margin-top:18px}
.rp__flags:empty{display:none}
.rp-out .ck__actions{margin:22px 0 0}
.rp__why-h{margin-top:clamp(48px,6vw,72px)}
.rp__why{margin-top:18px;max-width:860px}
/* ---------- The claim checker ---------- */
.ck{margin-top:36px;max-width:860px}
.ck__cats{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px}
.ck__lbl{margin-right:6px;font:500 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash)}
.ck__text{display:block;width:100%;min-height:140px;padding:18px 20px;border:1px solid var(--rule-strong);border-radius:8px;background:rgba(255,255,255,.03);color:var(--argent);font:400 clamp(1.05rem,1.4vw,1.2rem)/1.55 var(--sans);resize:vertical}
.ck__text:focus{outline:none;border-color:var(--argent)}
.ck__actions{display:flex;align-items:center;gap:24px;margin-top:18px}
.ck__sum{margin:0 0 22px;font:italic 400 clamp(1.4rem,2.4vw,2rem)/1.25 var(--serif);color:var(--argent)}
.ck__marked{max-width:860px;margin:0 0 34px;padding:24px 26px;border:1px solid var(--rule);border-radius:8px;font:400 clamp(1.1rem,1.5vw,1.3rem)/1.7 var(--serif);color:#d8d8d8;white-space:pre-wrap}
.ck__hit{background:none;color:#fff}
.ck__hit s{text-decoration-thickness:2px;text-decoration-color:#fff}
.ck__hit sup{margin-left:2px;font:600 .62rem/1 var(--sans);color:var(--ash)}
.ck__list{list-style:none;margin:0;padding:0;max-width:860px;border-top:1px solid var(--rule-strong)}
.ck__item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:22px 0;border-bottom:1px solid var(--rule)}
.ck__n{font:italic 300 2rem/1 var(--serif);color:var(--ash)}
.ck__item p{margin:0 0 8px;color:var(--ash);max-width:62ch}
.ck__t{color:var(--argent)!important;font-size:1.05rem}
.ck__t b{font:400 1.3rem/1.2 var(--serif)}
.ck__fix{color:var(--argent)!important}
.ck__fix span{font:500 .7rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ash);margin-right:6px}
.ck__src{font-size:.82rem}
.ck__note{max-width:70ch;margin:24px 0 0;font-size:.85rem;color:var(--ash)}
.ck-out.is-clean .ck__marked{border-style:dashed}
.social{display:flex;gap:10px;list-style:none;margin:22px 0 0;padding:0}
.social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule-strong);border-radius:50%;color:var(--ash);transition:color .3s,border-color .3s}
.social a:hover,.social a:focus-visible{color:#fff;border-color:#fff}
.social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.footer ul.social{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;grid-template-columns:none;margin:22px 0}
.footer ul.social li{margin:0;padding:0}
.mnav__foot .social{flex-basis:100%;margin:6px 0 0}
/* Sigil: foil, earned marks prompt, website field */
.sigil__field em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--ash-2)}
.sigil__earn{margin:14px 0 0;font-size:.88rem;color:var(--ash)}
.sigil__foil{--fx:50%;--fy:50%;--rx:0deg;--ry:0deg;position:relative;perspective:900px;transform-style:preserve-3d}
.sigil__foil .sigil__stage{transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .25s ease-out}
.sigil__foil::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--fx) var(--fy),rgba(255,255,255,.55),rgba(255,255,255,0) 38%),
  linear-gradient(115deg,transparent calc(var(--fx) - 22%),rgba(255,255,255,.35) calc(var(--fx) - 6%),rgba(255,255,255,.08) var(--fx),rgba(255,255,255,.3) calc(var(--fx) + 8%),transparent calc(var(--fx) + 24%))}
.sigil__foil.is-lit::after{opacity:1}
.sigil__tilt{margin-top:12px}
.sigil__stage svg{max-height:calc(100svh - var(--nav-h) - 110px);width:auto;max-width:100%;margin:0 auto}
.sigil__tilt[hidden]{display:none}
@media (max-width:900px){.sigil__stage svg{max-height:none;width:100%}}