/* ==========================================================================
   KRONENTERPRISE — quiet power
   --------------------------------------------------------------------------
   Ground  : true black. The video sits behind a blurred glass plane so it
             reads as atmosphere and light, never as footage.
   Accent  : one oxblood red, and only ever in motion — the things that fall,
             draw, open or confirm. Never a block of colour, never static.
   Type    : Inter for voice, IBM Plex Mono for anything the house records.
   ========================================================================== */

:root{
  --void:#000000;
  --bone:#edeae4;
  --ash:#8b877f;
  --dust:#54514c;
  --line:rgba(237,234,228,.10);
  --line-soft:rgba(237,234,228,.055);
  /* royal blue, measured to sit at the same visibility the oxblood had.
     Blue reads dimmer than red at equal luminance — the eye peaks around
     555nm — so anything that moves or glows uses the brighter step. */
  --royal:#092B9C;        /* base — fills, static marks        1.84:1 on black */
  --royal-lit:#1443D6;    /* lines, rules, seams               2.80:1 */
  --royal-glow:#1E4FE8;   /* anything that moves or glows      3.34:1 */
  --blood:#092B9C;        /* legacy names, kept so nothing breaks */
  --blood-lit:#1443D6;

  --f-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);


  /* ── golden ratio ────────────────────────────────────────────────────
     φ = 1.618. Display sizes step by φ; text sizes step by √φ (1.272), so
     the reading range has room to breathe without the jumps becoming
     violent. Spacing steps by φ throughout. Nothing on the page is sized
     by eye any more — every value below is a rung on this ladder. */
  --phi:1.618;

  --t-1:0.618rem;    /*  9.9px  micro */
  --t-2:0.786rem;    /* 12.6px  mono labels */
  --t-3:0.875rem;    /* 14.0px  small body */
  --t-4:1rem;        /* 16.0px  body */
  --t-5:1.272rem;    /* 20.4px  lede */
  --t-6:1.618rem;    /* 25.9px  */
  --t-7:2.058rem;    /* 32.9px  */
  --t-8:2.618rem;    /* 41.9px  section titles */
  --t-9:3.330rem;    /* 53.3px  */

  --s-1:0.382rem;
  --s-2:0.618rem;
  --s-3:1rem;
  --s-4:1.618rem;
  --s-5:2.618rem;
  --s-6:4.236rem;
  --s-7:6.854rem;
  --s-8:11.089rem;

  --pad:clamp(1.25rem,5vw,var(--s-6));
  --measure:58rem;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
a,button{-webkit-tap-highlight-color:rgba(237,234,228,.12)}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--void);
  color:var(--bone);
  font-family:var(--f-sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0}

::selection{background:var(--royal);color:#fff}
:focus-visible{outline:1px solid var(--bone);outline-offset:4px}

.skip{
  position:fixed;top:-100px;left:1rem;z-index:10001;
  background:var(--bone);color:var(--void);
  padding:.7rem 1.1rem;font-family:var(--f-mono);font-size:.805rem;
  letter-spacing:.08em;text-transform:uppercase;
  transition:top .25s var(--ease);
}
.skip:focus{top:1rem}

/* ── the glass plane ─────────────────────────────────────────────────── */

.bg-video{
  position:fixed;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-3;
  pointer-events:none;
  background:var(--void);
  /* No CSS filter. The blur and the grade are baked into the file at encode
     time — re-filtering a full-viewport video on every frame was costing
     roughly four times the frame budget for an identical picture. */
  transform:scale(1.03) translateZ(0);
  will-change:transform;
}

.glass{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(150% 95% at 50% 4%,rgba(255,255,255,.058) 0%,rgba(255,255,255,.016) 40%,transparent 70%),
    radial-gradient(80% 55% at 82% 92%,rgba(168,178,198,.045),transparent 62%),
    linear-gradient(180deg,rgba(8,9,12,.24) 0%,rgba(0,0,0,.38) 52%,rgba(0,0,0,.68) 100%);
}
/* No backdrop-filter here. The video beneath already carries its own blur,
   so filtering the whole viewport a second time doubled the compositing
   cost for no visible difference. The glass is now purely its gradients. */
.glass::after{
  content:"";position:absolute;inset:-25%;
  background:radial-gradient(36% 24% at 50% 50%,rgba(255,255,255,.055),transparent 72%);
  animation:sheen 46s ease-in-out infinite;
}
@keyframes sheen{
  0%,100%{transform:translate3d(-13%,-9%,0)}
  50%{transform:translate3d(13%,10%,0)}
}

.bg-grade{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.38;
  background:
    radial-gradient(ellipse 80% 64% at 50% 46%,rgba(0,0,0,0) 0%,rgba(0,0,0,.46) 62%,rgba(0,0,0,.9) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.34) 0%,rgba(0,0,0,.2) 34%,rgba(0,0,0,.66) 78%,#000 100%);
  will-change:opacity;
}

.grain{
  position:fixed;inset:-6%;z-index:9990;pointer-events:none;
  opacity:.03;
  will-change:transform;
  transform:translateZ(0);
  contain:strict;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  animation:grainDrift 7s steps(6) infinite;
}
@keyframes grainDrift{
  0%{transform:translate3d(0,0,0)} 16%{transform:translate3d(-1.6%,1%,0)}
  33%{transform:translate3d(1%,-1.6%,0)} 50%{transform:translate3d(-1%,-1%,0)}
  66%{transform:translate3d(1.6%,.5%,0)} 83%{transform:translate3d(-.5%,1.6%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* ── preloader ───────────────────────────────────────────────────────── */

.loader{
  position:fixed;inset:0;z-index:10020;   /* above the curtain, always */
  background:var(--void);
  display:grid;place-items:center;
  transition:opacity 1s var(--ease),visibility 1s var(--ease);
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{display:grid;justify-items:center;gap:1.6rem;padding:2rem}

.loader__mark{
  width:34px;height:auto;opacity:0;
  animation:markIn 1.6s var(--ease) .1s forwards;
}
@keyframes markIn{to{opacity:.9}}

.loader__word{
  font-family:var(--f-mono);
  font-size:clamp(var(--t-2),2.1vw,var(--t-3));
  letter-spacing:.62em;text-indent:.62em;
  color:var(--bone);
}
.loader__word span{opacity:0;animation:letterIn .6s var(--ease) forwards}
@keyframes letterIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}

.loader__bar{width:min(220px,52vw);height:1px;background:var(--line);overflow:hidden}
.loader__bar span{
  display:block;height:100%;width:0;
  background:var(--bone);
  border-right:2px solid var(--royal-lit);      /* red leading edge */
  box-shadow:0 0 10px rgba(30,79,232,.55);
  transition:width .2s linear;
}

.loader__num{font-family:var(--f-mono);font-size:.713rem;letter-spacing:.28em;color:var(--dust)}

/* ── scroll progress ─────────────────────────────────────────────────── */

.progress{position:fixed;top:0;left:0;right:0;height:1px;z-index:9995;pointer-events:none}
.progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,rgba(9,43,156,.35),var(--royal-glow));
  box-shadow:0 0 12px rgba(30,79,232,.5);
}

/* ── cursor ──────────────────────────────────────────────────────────── */

.cursor{
  position:fixed;top:0;left:0;z-index:10000;
  pointer-events:none;mix-blend-mode:difference;
  opacity:0;transition:opacity .35s ease;
}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:4px;height:4px;background:#fff}
.cursor__ring{
  width:30px;height:30px;border:1px solid rgba(255,255,255,.5);
  transition:width .45s var(--ease),height .45s var(--ease),border-color .45s var(--ease);
}
.cursor.is-hot .cursor__ring{width:58px;height:58px;border-color:rgba(255,255,255,.85)}

/* ── header ──────────────────────────────────────────────────────────── */

/* ══ the head ═════════════════════════════════════════════════════════════
   Permanent. The mark sits centred above the index, and neither moves for
   the whole of a visit — on a site whose entire purpose is to be remembered,
   the mark is the thing doing the remembering, and a mark that withdraws on
   a downward scroll is a mark that is not doing its work.

   It contracts rather than disappears: past the fold the mark shrinks, the
   rules tighten, and a hairline of blue tracks how far down the page you
   are. The same object, at two densities. */

.head{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(1.1rem,2.6vw,1.8rem) var(--pad) 0;
  /* Transparent, and nothing behind it.
     The first attempt at this broke the site — not because of the
     transparency but because of what I added to compensate for it: a mask
     that hid every section below the fold. There is no mask now and no
     scrim. Content passes beneath the head, which is the honest cost of a
     head with no background, and the type carries its own legibility so it
     stays readable over whatever is underneath.

     The rule that matters: nothing here may decide whether content is
     VISIBLE. A background can only ever be too dark or too light. */
  background:none;
  transition:padding .7s var(--ease);
}
.head.is-away{
  padding-top:clamp(.55rem,1.4vw,.9rem);
}

/* the type carries its own legibility, so it survives whatever the footage
   happens to be doing behind it */
.head__links a,.head__mark{
  text-shadow:0 1px 16px rgba(6,6,8,.95), 0 0 4px rgba(6,6,8,.85);
}
.head__mark{filter:drop-shadow(0 1px 12px rgba(6,6,8,.95))}
.head__nav{border-top-color:rgba(242,239,233,.10)}

/* the type carries its own legibility instead, so it survives whatever the
   footage is doing behind it at that moment */
.head__links a,.head__mark{
  text-shadow:0 1px 14px rgba(6,6,8,.92), 0 0 3px rgba(6,6,8,.7);
}
.head__mark{filter:drop-shadow(0 1px 10px rgba(6,6,8,.9))}

/* how far down the page, drawn as one hairline */
.head__progress{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:rgba(242,239,233,.07);
}
.head__progress i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--royal),var(--royal-lit));
  transform:scaleX(0);transform-origin:left;
  transition:transform .12s linear;
}

.head__brand{
  display:block;line-height:0;
  transition:transform .7s var(--ease);
}
.head__mark{
  width:clamp(22px,3.2vw,28px);height:auto;opacity:.94;
  transition:width .7s var(--ease),opacity .7s var(--ease);
}
.head.is-away .head__mark{width:clamp(17px,2.2vw,20px);opacity:.8}
.head__brand:hover .head__mark{opacity:1}

.head__nav{
  width:100%;max-width:var(--measure);
  margin-top:clamp(.7rem,1.6vw,1.05rem);
  padding-top:clamp(.6rem,1.4vw,.9rem);
  padding-bottom:clamp(.55rem,1.3vw,.85rem);
  border-top:1px solid var(--line-soft);
  transition:margin .7s var(--ease),padding .7s var(--ease);
}
.head.is-away .head__nav{
  margin-top:clamp(.45rem,1vw,.7rem);
  padding-top:clamp(.45rem,1vw,.7rem);
}

.head__links{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  list-style:none;
  text-align:center;
}
.head__links a{
  position:relative;display:inline-block;
  font-family:var(--f-mono);
  font-size:clamp(.56rem,1.5vw,.72rem);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ash);padding-block:.3rem;
  transition:color .5s var(--ease);
}
.head__links a:hover,.head__links a.is-here{color:var(--bone)}

/* the seam beneath the section you are actually in */
.head__links a::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:0;height:1px;background:var(--royal-lit);
  transform:translateX(-50%);
  transition:width .55s var(--ease);
}
.head__links a:hover::after{width:1.6rem}
.head__links a.is-here::after{width:2.4rem}

@media (max-width:620px){
  .head__links a{
    font-size:.54rem;letter-spacing:.14em;
  }
  .head__nav{max-width:none}
}

/* the old flush-left header rules lived here; the centred head above
   replaces them entirely */

/* ── hero ────────────────────────────────────────────────────────────── */

.hero{
  position:relative;min-height:100svh;
  display:grid;place-items:center;
  padding:clamp(9rem,17vh,12rem) var(--pad) 5rem;text-align:center;
}
/* a soft pool of shade under the hero copy only — the frame edges stay open,
   so the footage still reads, but nothing bright ever crosses the type */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 56% 42% at 50% 50%,
    rgba(0,0,0,.55) 0%,rgba(0,0,0,.36) 40%,rgba(0,0,0,.10) 70%,rgba(0,0,0,0) 88%);
}
.hero__inner{
  display:grid;justify-items:center;gap:clamp(1.4rem,3vw,2.2rem);
  max-width:min(62rem,92vw);
  position:relative;z-index:1;
  will-change:transform,opacity;
}

.emblem{position:relative;display:inline-block}
.emblem__img{
  width:clamp(64px,9vw,104px);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.9s var(--ease) .2s;
}
.is-ready .emblem__img{clip-path:inset(0 0 0 0)}

.emblem__scan{
  position:absolute;left:-14%;right:-14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--royal-glow),transparent);
  box-shadow:0 0 11px rgba(30,79,232,.65);
  opacity:0;
}
.is-ready .emblem__scan{animation:scan 1.9s var(--ease) .2s 1}
@keyframes scan{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

.hero__title{
  font-size:clamp(var(--t-5),3.4vw,var(--t-7));
  font-weight:100;letter-spacing:.26em;text-indent:.26em;
  line-height:1.05;white-space:nowrap;
}
.hero__title span{
  display:inline-block;opacity:0;transform:translateY(26px);
  transition:opacity 1.2s var(--ease),transform 1.3s var(--ease);
}
.is-ready .hero__title span{opacity:1;transform:none}

.hero__tag{
  font-family:var(--f-mono);
  font-size:clamp(var(--t-2),1.4vw,var(--t-3));
  letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;
  color:var(--ash);
  opacity:0;transform:translateY(14px);
  transition:opacity 1.4s var(--ease) 1s,transform 1.4s var(--ease) 1s;
}
.is-ready .hero__tag{opacity:1;transform:none}

.hero__scroll{
  display:grid;justify-items:center;gap:.9rem;
  margin-top:clamp(1rem,4vw,2.6rem);
  opacity:0;transition:opacity 1.4s var(--ease) 1.6s;
}
.is-ready .hero__scroll{opacity:1}
.hero__scroll-label{
  font-family:var(--f-mono);font-size:.667rem;
  letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;
  color:var(--dust);transition:color .5s ease;
}
.hero__scroll:hover .hero__scroll-label{color:var(--bone)}
.hero__scroll-line{
  width:1px;height:clamp(38px,7vh,64px);
  background:linear-gradient(to bottom,var(--line),transparent);
  position:relative;overflow:hidden;
}
/* the falling mark — red */
.hero__scroll-line::after{
  content:"";position:absolute;left:0;top:-60%;
  width:1px;height:60%;
  background:linear-gradient(to bottom,transparent,var(--royal-glow));
  box-shadow:0 0 9px rgba(30,79,232,.8);
  animation:drop 3.4s var(--ease-io) infinite;
}
@keyframes drop{0%{top:-60%}72%,100%{top:100%}}

/* ── marquee band ────────────────────────────────────────────────────── */

.band{
  position:relative;z-index:3;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding-block:.95rem;overflow:hidden;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.band__track{display:flex;width:max-content;will-change:transform}
.band__track.css-fallback{animation:slide 52s linear infinite}
.band__set{
  display:inline-flex;align-items:center;
  font-family:var(--f-mono);font-size:.7245rem;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--dust);white-space:nowrap;padding-right:0;
}
.band__set i{font-style:normal;color:var(--royal-lit);padding-inline:1.6rem;opacity:.75}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── page shell ──────────────────────────────────────────────────────── */

.page{
  position:relative;z-index:3;
  background:linear-gradient(to bottom,rgba(0,0,0,.66) 0%,rgba(0,0,0,.95) 15%,rgba(0,0,0,.95) 100%);
}

.sec{
  position:relative;max-width:var(--measure);margin-inline:auto;
  padding:clamp(var(--s-6),11vh,var(--s-7)) var(--pad);
}

.eyebrow{
  display:flex;align-items:center;gap:1rem;
  font-family:var(--f-mono);font-size:.69rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ash);
  margin-bottom:clamp(var(--s-4),4vw,var(--s-5));
}
.eyebrow__num{color:var(--bone)}
.eyebrow__rule{
  flex:0 0 clamp(28px,7vw,84px);height:1px;
  background:linear-gradient(90deg,var(--line),rgba(30,79,232,.45));
}

.sec__title{
  font-size:clamp(var(--t-6),3.9vw,var(--t-8));
  font-weight:200;letter-spacing:.005em;line-height:1.14;
  text-wrap:balance;
  margin-bottom:clamp(var(--s-3),2.2vw,var(--s-4));
}
/* a red hairline draws itself under each section title */
.sec__title::after{
  content:"";display:block;width:0;height:1px;
  margin-top:clamp(.8rem,1.8vw,1.2rem);
  background:linear-gradient(90deg,var(--royal-lit),rgba(30,79,232,0));
  transition:width 1.8s var(--ease) .35s;
}
.sec__title.is-in::after{width:min(6.5rem,34%)}

[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity 1.2s var(--ease),transform 1.3s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ── about ───────────────────────────────────────────────────────────── */

.about__grid{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5rem);align-items:start;
}
.lede{
  font-size:clamp(var(--t-4),1.55vw,var(--t-5));
  font-weight:300;line-height:1.9;
  color:rgba(237,234,228,.78);max-width:42ch;
  text-wrap:pretty;
}

.record{border-top:1px solid var(--line)}
.record__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:.736rem;
  letter-spacing:.14em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}
.record dt{color:var(--dust)}
.record dd{color:var(--bone);display:flex;align-items:center;gap:.55rem;text-align:right}

.pulse{
  width:5px;height:5px;border-radius:50%;
  background:var(--royal-glow);
  animation:pulse 4.6s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(30,79,232,.55)}
  60%{box-shadow:0 0 0 10px rgba(30,79,232,0)}
  100%{box-shadow:0 0 0 0 rgba(30,79,232,0)}
}

/* ── declarations ────────────────────────────────────────────────────── */

.creed{
  max-width:var(--measure);margin-inline:auto;
  padding:clamp(3rem,7.5vh,5rem) var(--pad);
  display:grid;justify-items:center;
  gap:clamp(2.4rem,5.5vh,3.6rem);
}
.creed__edge{
  display:block;width:min(100%,32rem);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 25%,var(--line) 75%,transparent);
}
.creed__list{
  list-style:none;width:100%;
  display:grid;justify-items:center;
  gap:clamp(2rem,5vh,3.2rem);
}
.creed__item{display:grid;justify-items:center;gap:.9rem;text-align:center}

.creed__idx{
  font-family:var(--f-mono);font-size:.667rem;
  letter-spacing:.36em;text-indent:.36em;text-transform:uppercase;
  color:var(--dust);
  opacity:0;transform:translateY(6px);
  transition:opacity 1s var(--ease),transform 1s var(--ease),color 1s ease;
}
.creed__item.is-in .creed__idx{opacity:1;transform:none}

.creed__line{
  font-size:clamp(var(--t-4),2.3vw,var(--t-6));
  font-weight:200;text-transform:uppercase;line-height:1.3;
  color:var(--bone);
  letter-spacing:.66em;text-indent:.66em;
  opacity:0;filter:blur(10px);
  transition:opacity 1.6s var(--ease),filter 1.6s var(--ease),
             letter-spacing 1.9s var(--ease),text-indent 1.9s var(--ease);
}
.creed__item.is-in .creed__line{
  opacity:1;filter:blur(0);letter-spacing:.2em;text-indent:.2em;
}

/* a red seam opens beneath each declaration once it settles */
.creed__item::after{
  content:"";width:0;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--royal-lit),transparent);
  box-shadow:0 0 8px rgba(30,79,232,.5);
  transition:width 1.7s var(--ease) .55s,opacity 1.7s var(--ease) .55s;
}
.creed__item.is-in::after{width:clamp(52px,10vw,124px);opacity:.9}

/* ── doctrine ────────────────────────────────────────────────────────── */

.doctrine{overflow:hidden}
.doctrine__inner{position:relative;z-index:1}
.doctrine__ghost{
  position:absolute;top:50%;left:50%;
  /* sized from the width so the intrinsic ratio cannot fight the rule and
     grow the mark past the section it is meant to sit inside */
  width:min(34vw,24rem);height:auto;
  object-fit:contain;
  transform:translate(-50%,-50%);
  opacity:.032;pointer-events:none;
}

.tenets{list-style:none;border-top:1px solid var(--line)}
.tenet{
  position:relative;display:grid;
  grid-template-columns:3.9rem minmax(0,10.5rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;
  padding:clamp(1.6rem,3.4vw,2.4rem) 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-left .7s var(--ease);
}
.tenet::before{
  content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;
  background:linear-gradient(90deg,var(--royal-lit),var(--bone) 30%,var(--bone));
  transition:width .9s var(--ease);
}

.tenet__num{
  font-family:var(--f-mono);font-size:.736rem;
  letter-spacing:.18em;color:var(--dust);transition:color .55s ease;
}
.tenet__head:hover .tenet__num{color:var(--royal-lit)}
.tenet__name{
  display:block;
  font-size:clamp(var(--t-4),1.72vw,var(--t-5));
  font-weight:300;letter-spacing:.17em;text-transform:uppercase;
}
.tenet__text{
  display:block;
  font-size:clamp(var(--t-3),1.4vw,var(--t-4));
  font-weight:300;line-height:1.9;color:var(--ash);max-width:42ch;
  text-wrap:pretty;
}

/* ── position ────────────────────────────────────────────────────────── */

.axiom{
  position:relative;max-width:var(--measure);margin-inline:auto;
  padding:clamp(4rem,10vh,7rem) var(--pad);
  display:grid;justify-items:center;gap:clamp(1.2rem,2.6vw,1.9rem);
  text-align:center;
}
.axiom__mark{width:clamp(24px,3.2vw,36px);opacity:.45}
.axiom__rule{
  display:block;width:1px;height:clamp(28px,5vh,52px);
  background:linear-gradient(to bottom,var(--royal-lit),rgba(30,79,232,0));
}
.axiom__line{
  font-size:clamp(var(--t-5),2.55vw,var(--t-7));
  font-weight:200;line-height:1.68;letter-spacing:.04em;
  color:rgba(237,234,228,.9);
  max-width:34ch;text-wrap:balance;
}

/* ── contact ─────────────────────────────────────────────────────────── */

.contact__head{
  font-size:clamp(var(--t-6),3.9vw,var(--t-8));
  font-weight:100;letter-spacing:.01em;line-height:1.12;margin-bottom:1.15rem;
  text-wrap:balance;
}
.contact__sub{
  font-size:clamp(var(--t-4),1.55vw,var(--t-5));
  font-weight:300;line-height:1.9;
  color:rgba(237,234,228,.72);max-width:40ch;text-wrap:pretty;
  margin-bottom:clamp(2.5rem,5vw,3.6rem);
}
.contact__actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:stretch}

.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.85rem;
  padding:1rem 1.55rem;
  font-family:var(--f-mono);font-size:.805rem;
  letter-spacing:.16em;text-transform:lowercase;
  border:1px solid var(--line);cursor:pointer;
  transition:border-color .55s var(--ease),color .55s var(--ease),transform .35s var(--ease);
  will-change:transform;
}
.btn__label{position:relative;z-index:2}
.btn__icon{position:relative;z-index:2;display:grid;place-items:center;transition:transform .55s var(--ease)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--bone);
  transform:translateY(101%);transition:transform .7s var(--ease);
}
/* a red seam leads the fill in */
.btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:3;
  background:var(--royal-lit);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn:hover,.btn:focus-visible{color:var(--void);border-color:var(--bone)}
.btn:hover .btn__icon{transform:translate(3px,-3px)}
.btn:active{transform:scale(.985)}

.btn--primary{border-color:rgba(237,234,228,.28)}
.btn--ghost{text-transform:uppercase;letter-spacing:.2em;font-size:.7245rem;color:var(--ash)}
.btn--ghost.is-copied{color:var(--bone);border-color:var(--royal-lit)}

.contact__note{
  margin-top:clamp(2.5rem,5vw,3.6rem);
  font-family:var(--f-mono);font-size:.7015rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dust);
}

/* ── footer ──────────────────────────────────────────────────────────── */

.foot{
  position:relative;z-index:3;background:#000;
  border-top:1px solid var(--line-soft);
  padding:clamp(1.1rem,2.2vw,1.5rem) var(--pad) clamp(1.2rem,2.4vw,1.7rem);
}
.foot__row{
  /* A grid with equal outer tracks, not a wrapping flex row. The old layout
     depended on the legal line being short enough to leave room for the
     address, so a page carrying one extra word pushed the address onto a
     second line and out of alignment with every other page. Equal 1fr
     tracks either side also centre the legal line on the row itself rather
     than merely inside its own column. */
  max-width:min(76rem,100%);margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(1rem,3vw,2.2rem);
  font-family:var(--f-mono);font-size:.63rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dust);
}
.foot__row > .foot__mark{justify-self:start}
.foot__legal{justify-self:center;text-align:center;text-wrap:balance}
.foot__row > .foot__end{justify-self:end}
.foot__mark{width:16px;opacity:.32}
.foot__end{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.8rem);flex-wrap:wrap;justify-content:center}
.foot__motion{display:none}
.foot__dot{color:var(--royal-lit);opacity:.7;padding-inline:.3rem}
.foot__link{color:var(--ash);transition:color .45s ease}
.foot__link:hover{color:var(--bone)}
.axiom__link{margin-top:.6rem}
.foot__mail{position:relative;transition:color .4s ease}
.foot__mail::after{
  content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;
  background:var(--royal-lit);transition:width .7s var(--ease);
}
.foot__mail:hover{color:var(--bone)}
.foot__mail:hover::after{width:100%}

/* ── toast ───────────────────────────────────────────────────────────── */

.toast{
  /* Hidden by opacity and visibility, not by a percentage translate.
     translate(-50%,140%) moves it 140% of its OWN height — 36px on a 26px
     box — which was never enough to clear a 32px bottom offset, so a bone
     rectangle sat permanently at the foot of the page. */
  position:fixed;left:50%;bottom:2rem;z-index:10002;
  opacity:0;visibility:hidden;
  transform:translate(-50%,calc(100% + 3rem));
  background:var(--bone);color:var(--void);
  padding:.75rem 1.3rem;
  font-family:var(--f-mono);font-size:.7475rem;
  letter-spacing:.18em;text-transform:uppercase;
  border-bottom:2px solid var(--royal-lit);
  transition:transform .7s var(--ease),opacity .5s var(--ease),visibility .7s var(--ease);
  pointer-events:none;
}
.toast.is-up{opacity:1;visibility:visible;transform:translate(-50%,0)}


/* ── mono renders at 400: the only mono weight we ship ──────────────────
   (body sets 300, which Plex Mono has no file for — the browser was
   faking it, which is what made the small caps look slightly mushy) */
.skip,.head__word,.head__links a,.loader__word,.loader__num,.hero__tag,
.hero__scroll-label,.band__set,.eyebrow,.record__row,.creed__idx,
.tenet__num,.btn,.contact__note,.foot__row,.toast,.rail{font-weight:400}

/* ── section rail ───────────────────────────────────────────────────────
   quiet orientation on a long page; appears only once you are past the
   hero, and only where there is room for it */
.rail{
  position:fixed;left:clamp(1.1rem,2.4vw,2.4rem);top:50%;
  transform:translateY(-50%);z-index:90;
  display:grid;gap:1.5rem;justify-items:start;
  font-family:var(--f-mono);
  opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease),visibility .7s var(--ease);
}
.rail::before{
  content:"";position:absolute;left:.34rem;top:-1.4rem;bottom:-1.4rem;
  width:1px;background:linear-gradient(to bottom,transparent,var(--line-soft) 18%,var(--line-soft) 82%,transparent);
}
.rail.is-on{opacity:1;visibility:visible}
.rail__item{
  position:relative;flex-direction:row-reverse;
  display:flex;align-items:center;gap:.7rem;justify-content:flex-end;
  font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dust);transition:color .5s var(--ease);
}
.rail__t{
  display:block;width:14px;height:1px;background:currentColor;
  opacity:.5;transition:width .6s var(--ease),background .5s var(--ease),opacity .5s var(--ease);
}
.rail__item:hover{color:var(--ash)}
.rail__item.is-here{color:var(--bone)}
.rail__item.is-here .rail__t{width:30px;background:var(--royal-lit);opacity:1}

/* ── 404 ────────────────────────────────────────────────────────────────*/
.is-bare{background:#000;display:flex;flex-direction:column;min-height:100svh}
.lost{
  flex:1;display:grid;justify-items:center;align-content:center;
  gap:clamp(1.1rem,2.6vw,1.8rem);text-align:center;
  padding:clamp(4rem,12vh,8rem) var(--pad);
}
.lost__mark{width:clamp(46px,7vw,64px);opacity:.85}
.lost__code{
  font-family:var(--f-mono);font-size:.63rem;
  letter-spacing:.42em;text-indent:.42em;color:var(--royal-lit);
}
.lost__head{
  font-size:clamp(1.5rem,4.2vw,2.6rem);
  font-weight:200;letter-spacing:.01em;line-height:1.2;text-wrap:balance;
}
.lost__sub{
  font-size:clamp(.95rem,1.7vw,1.1rem);font-weight:300;
  color:rgba(237,234,228,.6);max-width:34ch;line-height:1.85;
}
.lost__btn{margin-top:.8rem}


/* ══════════════════════════════════════════════════════════════════════
   ATMOSPHERE
   Slow light that never repeats the same way twice. Everything here is
   dark, wide and blurred — it reads as depth, not as decoration.
   ══════════════════════════════════════════════════════════════════════ */

.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura b{
  position:absolute;display:block;border-radius:50%;
  /* deliberately NOT filter:blur() — these are radial gradients and are
     already soft. Blurring them cost roughly four times the frame budget
     and looked identical. */
  will-change:transform;
  transform:translateZ(0);
}
.aura__a{
  width:52vmax;height:52vmax;left:-14vmax;top:-10vmax;
  background:radial-gradient(circle,rgba(78,104,150,.22),rgba(78,104,150,0) 66%);
  animation:drift-a 54s ease-in-out infinite;
}
.aura__b{
  width:40vmax;height:40vmax;right:-14vmax;top:26vmax;
  background:radial-gradient(circle,rgba(20,67,214,.085),rgba(20,67,214,0) 62%);
  animation:drift-b 71s ease-in-out infinite;
}
.aura__c{
  width:34vmax;height:34vmax;left:28vmax;bottom:-16vmax;
  background:radial-gradient(circle,rgba(196,204,224,.10),rgba(196,204,224,0) 60%);
  animation:drift-c 88s ease-in-out infinite;
}
@keyframes drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(16vmax,10vmax,0) scale(1.14)}
  66%{transform:translate3d(6vmax,22vmax,0) scale(.92)}
}
.aura{contain:strict}
@keyframes drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-20vmax,14vmax,0) scale(1.2)}
  75%{transform:translate3d(-8vmax,-12vmax,0) scale(.9)}
}
@keyframes drift-c{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-16vmax,-18vmax,0) scale(1.22)}
}

/* the light warms as you descend: cold at the top, oxblood by the contact */
.page{--tint:0}
.page::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(90,116,164,.05),rgba(20,67,214,.07));
  opacity:var(--tint);transition:opacity 1.4s linear;
}
.page > section,.page > .creed,.page > .axiom,.page > .seal{position:relative;z-index:1}

/* ── display type carries a gradient, so light falls across it ─────────── */
.lost__head,.relic__title,
.hero__title span,.sec__title span,.contact__head span{
  background-image:linear-gradient(178deg,#ffffff 0%,var(--bone) 44%,#9c988f 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* section headings resolve character by character */
.sec__title[data-split],.contact__head[data-split]{opacity:1;transform:none}
.sec__title span,.contact__head span{
  display:inline-block;opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
  transition-delay:var(--d,0ms);
}
.sec__title.is-in span,.contact__head.is-in span{opacity:1;transform:none}


/* ── emblem tilts toward the pointer ───────────────────────────────────── */
.emblem{transform-style:preserve-3d;transition:transform .9s var(--ease)}
.emblem.is-live{transition:transform .18s ease-out}

/* ── scramble: mono data resolves out of noise ─────────────────────────── */
[data-scramble]{font-variant-ligatures:none}

/* ── curtain between pages ─────────────────────────────────────────────── */
.curtain{
  position:fixed;inset:0;z-index:10005;pointer-events:none;
  background:var(--void);
  transform:translateY(100%);
  transition:transform .8s var(--ease);
  display:grid;place-items:center;
}
.curtain.is-closing{transform:translateY(0)}
.curtain.is-opening{transform:translateY(-100%);transition:transform .9s var(--ease)}
.curtain img{width:34px;opacity:0;transition:opacity .5s var(--ease) .2s}
.curtain.is-closing img{opacity:.9}

/* ── tenet rows breathe on approach ────────────────────────────────────── */
.tenet__name{transition:letter-spacing .8s var(--ease),color .5s ease}
.tenet__head:hover .tenet__name{letter-spacing:.23em}
.tenet__text{transition:color .6s ease}
.tenet__head:hover .tenet__text{color:rgba(237,234,228,.82)}

/* ── buttons get a travelling gradient edge ────────────────────────────── */
.btn{background-clip:padding-box}
.btn__sheen{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(237,234,228,.12) 50%,transparent 62%);
  transform:translateX(-120%);
}
.btn:hover .btn__sheen{animation:sheenPass .9s var(--ease) 1}
@keyframes sheenPass{to{transform:translateX(120%)}}

/* ── the record values sit on a hairline that fills in ─────────────────── */
.record__row{position:relative;overflow:hidden}
.record__row::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--royal-lit),transparent);
  transition:width 1.4s var(--ease);
}
.record.is-in .record__row::after{width:100%}
.record.is-in .record__row:nth-child(2)::after{transition-delay:.12s}
.record.is-in .record__row:nth-child(3)::after{transition-delay:.24s}
.record.is-in .record__row:nth-child(4)::after{transition-delay:.36s}

/* ── the mark page ─────────────────────────────────────────────────────── */
.relic{
  position:relative;display:grid;justify-items:center;
  gap:clamp(1.6rem,3.6vw,2.6rem);text-align:center;
  padding:clamp(7rem,17vh,12rem) var(--pad) clamp(3rem,7vh,5rem);
}
.relic__stage{position:relative;display:inline-block;perspective:900px}
.relic__img{
  width:clamp(140px,22vw,260px);
  transition:transform .2s ease-out,filter 1s var(--ease);
}
.relic__halo{
  position:absolute;left:50%;top:50%;width:150%;height:150%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(30,79,232,.20),transparent 62%);
  filter:blur(38px);
  animation:halo 8s ease-in-out infinite;
}
@keyframes halo{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
                50%{opacity:.95;transform:translate(-50%,-50%) scale(1.12)}}
.relic__title{
  font-size:clamp(1.6rem,4.4vw,2.9rem);font-weight:100;
  letter-spacing:.16em;text-transform:uppercase;
}
.reading{
  max-width:var(--measure);margin-inline:auto;
  padding:clamp(2rem,6vh,4rem) var(--pad) clamp(6rem,14vh,9rem);
  display:grid;gap:clamp(2.6rem,6vh,4.2rem);
}
.gloss{
  display:grid;grid-template-columns:clamp(3rem,7vw,5rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.4rem);align-items:start;
  padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--line-soft);
}
.gloss__n{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;
  color:var(--royal-lit);opacity:.85;
}
.gloss__h{
  font-size:clamp(1rem,2vw,1.25rem);font-weight:300;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:.8rem;
}
.gloss__p{
  font-size:clamp(.95rem,1.65vw,1.08rem);font-weight:300;
  line-height:1.9;color:var(--ash);max-width:46ch;text-wrap:pretty;
}
.backlink{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);
  transition:color .5s ease,gap .5s var(--ease);
}
.backlink:hover{color:var(--bone);gap:1.1rem}


/* ══════════════════════════════════════════════════════════════════════
   REFINEMENT PASS
   ══════════════════════════════════════════════════════════════════════ */

/* text that exists for screen readers only — the scramble effect rewrites
   its element's contents dozens of times a second, which a screen reader
   would try to read out. The stable copy lives here instead. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* The mark used to hand off from the hero to the header as you scrolled.
   With a permanent centred head it is simply always present, and the two
   rules that faded it in are gone — they did nothing but fight the one that
   keeps it visible. */
.head__brand:hover .head__mark{transform:translateY(-2px) scale(1.04)}

/* ── a quiet action that arrives once you are inside ───────────────────── */
.head__act{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.52rem .95rem;
  border:1px solid rgba(237,234,228,.22);
  font-family:var(--f-mono);font-size:.6rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),
             visibility .7s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
}
.head.is-marked .head__act{opacity:1;visibility:visible;transform:none}
.head__act::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--bone);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.head__act:hover{color:var(--void);border-color:var(--bone)}
.head__act:hover::before{transform:translateY(0)}
.head__act i{
  font-style:normal;width:4px;height:4px;border-radius:50%;
  background:var(--royal-lit);flex:0 0 auto;
}

/* ── prose arrives line by line ──────────────────────────────────────────
   Each line gets its own overflow box and rises out of it. The clip is
   never on the observed element itself: a box clipped to nothing reports
   as off-screen and its reveal would never fire. */
[data-lines]{opacity:1!important;transform:none!important}
[data-lines] .ln{display:block;overflow:hidden}
[data-lines] .ln i{
  display:block;font-style:normal;
  transform:translateY(106%);
  transition:transform 1.2s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-lines].is-in .ln i{transform:none}

/* ── the closing seal: the page needs an ending, not just a stop ───────── */
.seal{
  position:relative;z-index:1;
  display:grid;justify-items:center;gap:clamp(1rem,2.4vw,1.6rem);
  padding:clamp(4rem,10vh,7rem) var(--pad) clamp(3rem,7vh,5rem);
  text-align:center;
}
.seal__rule{
  display:block;width:1px;height:clamp(30px,6vh,58px);
  background:linear-gradient(to bottom,rgba(237,234,228,0),var(--line));
}
.seal__mark{
  width:clamp(26px,3.4vw,38px);opacity:.42;
  transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);
}
.seal:hover .seal__mark{opacity:.8;transform:translateY(-3px)}
.seal__line{
  font-family:var(--f-mono);font-size:.63rem;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  color:var(--dust);
}

/* ── rail: current section announced, and a little magnetism ───────────── */
.rail__item{transition:color .5s var(--ease),transform .45s var(--ease)}
.rail__item:hover{transform:translateX(3px)}

@media (max-width:860px){
  .head__act{display:none}
}


/* ── motion switch: same effect as the OS setting, but reachable ────────── */
html.is-calm *,html.is-calm *::before,html.is-calm *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
}
html.is-calm .cursor,html.is-calm .curtain{display:none}
html.is-calm .grain,html.is-calm .aura b,html.is-calm .glass::after,
html.is-calm .relic__halo,html.is-calm .band__track{animation:none}
html.is-calm .emblem__img{clip-path:none}
html.is-calm [data-lines] .ln i{transform:none}
html.is-calm [data-reveal],html.is-calm .hero__title span,html.is-calm .hero__tag,
html.is-calm .hero__scroll,html.is-calm .creed__idx{opacity:1;transform:none;filter:none}
html.is-calm .creed__line{opacity:1;filter:none;letter-spacing:.2em;text-indent:.2em}
html.is-calm .head__mark,html.is-calm .head__act{opacity:1;visibility:visible;transform:none}
html.is-calm .rail{opacity:1;visibility:visible}
html.is-calm .halo{display:none}
html.is-calm .numeral{display:none}
html.is-calm .emblem__img{transform:none;opacity:1;filter:none}
html.is-calm .head__mark{opacity:.95;transform:none}
html.is-calm .capacity__row,html.is-calm .terms li,html.is-calm .ledger__list li,
html.is-calm .gauge__list li{opacity:1;transform:none}
html.is-calm .capacity__bar i{width:var(--fill)}
html.is-calm .rd::after{animation:none}
html.is-calm .sec::before,html.is-calm .creed::before,
html.is-calm .creed::after,html.is-calm .axiom::before{transform:scaleX(1)}
html.is-calm .axiom__line::before,html.is-calm .axiom__line::after{opacity:.75}
html.is-calm .spine{opacity:1}

.foot__motion{
  background:none;border:0;cursor:pointer;
  font-family:var(--f-mono);font-size:.6rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dust);
  padding:.2rem 0;position:relative;
  transition:color .45s ease;
}
.foot__motion::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--royal-lit);transition:width .5s var(--ease);
}
.foot__motion:hover{color:var(--bone)}
.foot__motion:hover::after{width:100%}


/* ── the cursor carries a word over the things worth doing ─────────────── */
.cursor__ring{display:grid;place-items:center}
.cursor__ring em{
  font-family:var(--f-mono);font-size:.5rem;font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--void);
  opacity:0;transition:opacity .3s var(--ease);white-space:nowrap;
}
.cursor.is-hot.is-named .cursor__ring{background:var(--bone);border-color:transparent}
.cursor.is-hot.is-named .cursor__ring em{opacity:1}
.cursor.is-hot.is-named .cursor__dot{opacity:0}
.cursor__dot{transition:opacity .25s var(--ease)}

/* ── a slow specular pass across the mark, once in a while ─────────────── */
.emblem__sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  background-size:340% 100%;
  background-position:135% 0;
  background-repeat:no-repeat;
  -webkit-mask-image:url("assets/logo.svg");mask-image:url("assets/logo.svg");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  opacity:0;
}
/* the element never moves: only the gradient slides beneath a fixed mask.
   animating transform here dragged the mask along with it, which is what
   sent a second logo-shaped ghost flying across the hero. */
.is-ready .emblem__sheen{animation:pass 13s var(--ease) 4.5s infinite}
@keyframes pass{
  0%{opacity:0;background-position:135% 0}
  7%{opacity:.9}
  24%{opacity:0;background-position:-35% 0}
  100%{opacity:0;background-position:-35% 0}
}

/* ── typographic housekeeping ──────────────────────────────────────────── */
.record dd,.tenet__num,.creed__idx,.foot__legal{font-variant-numeric:tabular-nums}
.lede,.contact__sub,.tenet__text,.gloss__p{hanging-punctuation:first last}
.hero__title{font-feature-settings:"case" 1}


/* ══════════════════════════════════════════════════════════════════════
   THE FORGE
   The entrance no longer shows the mark — it builds it. Points are
   sampled from the emblem's own geometry and drawn in as the counter
   climbs, so the thing you are waiting for is the thing assembling.
   ══════════════════════════════════════════════════════════════════════ */

.loader__forge{
  position:relative;
  width:clamp(96px,15vw,132px);
  aspect-ratio:1870 / 2840;
  display:grid;place-items:center;
}
.loader__canvas{position:absolute;inset:0;width:100%;height:100%}
.loader__mark{
  position:absolute;width:100%;height:auto;
  opacity:0;transition:opacity .8s var(--ease);
  animation:none;
}
/* if the canvas cannot run, the mark simply fades in as before */
.no-forge .loader__canvas{display:none}
.no-forge .loader__mark{opacity:.9;transition:opacity 1.4s var(--ease) .1s}
.loader.settled .loader__mark{opacity:.92}
.loader.settled .loader__canvas{opacity:0;transition:opacity .7s var(--ease)}

/* ── doctrine opens ─────────────────────────────────────────────────────── */

.tenet{display:block;padding:0;transition:none}
.tenet::before{display:none}
.tenet__head{
  width:100%;display:grid;
  grid-template-columns:3.9rem minmax(0,10.5rem) minmax(0,1fr) 1.2rem;
  gap:clamp(1rem,3vw,2.5rem);
  align-items:baseline;text-align:left;
  padding:clamp(1.6rem,3.4vw,2.4rem) 0;
  position:relative;
  transition:padding-left .7s var(--ease);
}
.tenet__head::before{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:linear-gradient(90deg,var(--royal-lit),var(--bone) 30%,var(--bone));
  transition:width .9s var(--ease);
}
.tenet__head:hover{padding-left:1rem}
.tenet__head:hover::before{width:100%}
.tenet__cue{position:relative;width:10px;height:10px;align-self:center;justify-self:end}
.tenet__cue::before,.tenet__cue::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--ash);
  transition:transform .55s var(--ease),background .5s var(--ease);
}
.tenet__cue::before{width:10px;height:1px}
.tenet__cue::after{width:1px;height:10px}
.tenet.is-open .tenet__cue::after{transform:scaleY(0)}
.tenet.is-open .tenet__cue::before{background:var(--royal-lit)}
.tenet.is-open .tenet__num{color:var(--royal-lit)}

.tenet__more{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .75s var(--ease);
}
.tenet.is-open .tenet__more{grid-template-rows:1fr}
.tenet__more > p{
  overflow:hidden;
  grid-column:1/-1;
  margin-left:calc(3.9rem + clamp(1rem,3vw,2.5rem));
  max-width:52ch;
  font-size:clamp(.85rem,1.35vw,.92rem);
  line-height:1.95;color:var(--dust);
  opacity:0;transition:opacity .6s var(--ease);
}
.tenet.is-open .tenet__more > p{opacity:1;padding-bottom:clamp(1.3rem,2.8vw,2rem)}

@media (max-width:900px){
  .tenet__head{grid-template-columns:3rem 1fr 1.2rem;row-gap:.75rem}
  .tenet__head .tenet__text{grid-column:2/-1}
  .tenet__head:hover{padding-left:.5rem}
  .tenet__more > p{margin-left:3rem}
}


/* ══════════════════════════════════════════════════════════════════════
   RULE WORK
   Fine white and blue lines, used as structure rather than decoration.
   Each one marks an edge that already exists — a section beginning, a
   column, a threshold — so the page reads as drawn rather than stacked.
   ══════════════════════════════════════════════════════════════════════ */

/* a hairline runs the height of the page, just inside the left margin,
   with a blue index mark that tracks how far down you are */
.spine{
  position:fixed;left:clamp(.85rem,2vw,2rem);top:0;bottom:0;width:1px;z-index:80;
  background:linear-gradient(to bottom,
    transparent 0,var(--line-soft) 12%,var(--line-soft) 88%,transparent 100%);
  opacity:0;transition:opacity 1s var(--ease);pointer-events:none;
}
.is-ready .spine{opacity:1}
.spine__pip{
  position:absolute;left:-2px;width:5px;height:5px;
  background:var(--royal-glow);
  box-shadow:0 0 10px rgba(30,79,232,.7);
  transform:translateY(-50%);
  transition:top .18s linear;
}
.spine__pip::after{
  content:"";position:absolute;left:2px;top:50%;
  width:clamp(10px,1.4vw,18px);height:1px;
  background:linear-gradient(90deg,var(--royal-lit),transparent);
}

/* every section opens on a rule that draws itself in */
.sec::before,.creed::before,.axiom::before{
  content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;
  background:linear-gradient(90deg,
    var(--royal-lit) 0,rgba(242,239,233,.22) 14%,var(--line-soft) 46%,transparent 100%);
  transform:scaleX(0);transform-origin:left;
  transition:transform 2.1s var(--ease);
}
.sec.is-edged::before,.creed.is-edged::before,.axiom.is-edged::before{transform:scaleX(1)}

/* the eyebrow gains a blue tick and a longer white rule */
.eyebrow__rule{
  position:relative;
  background:linear-gradient(90deg,rgba(242,239,233,.34),var(--line)) !important;
}
.eyebrow__rule::after{
  content:"";position:absolute;left:0;top:-2px;width:6px;height:5px;
  background:var(--royal-lit);
}

/* the record gets a hairline gutter, so the values sit in a column */
.record{position:relative}
.record::before{
  content:"";position:absolute;left:-1.4rem;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--royal-lit),transparent 42%);
  opacity:0;transition:opacity 1.4s var(--ease) .4s;
}
.record.is-in::before{opacity:.55}

/* the declarations sit between two full rules */
.creed::after{
  content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:1px;
  background:linear-gradient(270deg,
    var(--royal-lit) 0,rgba(242,239,233,.18) 16%,transparent 70%);
  transform:scaleX(0);transform-origin:right;
  transition:transform 2.1s var(--ease) .2s;
}
.creed.is-edged::after{transform:scaleX(1)}

/* the position statement is bracketed by two short blue marks */
.axiom__line{position:relative}
.axiom__line::before,.axiom__line::after{
  content:"";position:absolute;top:-1.4rem;width:clamp(18px,2.4vw,30px);height:1px;
  background:var(--royal-lit);opacity:0;transition:opacity 1.2s var(--ease) .5s;
}
.axiom__line::before{left:50%;transform:translateX(calc(-50% - clamp(26px,3.4vw,44px)))}
.axiom__line::after{left:50%;transform:translateX(calc(-50% + clamp(26px,3.4vw,44px)))}
.axiom__line.is-in::before,.axiom__line.is-in::after{opacity:.75}

@media (max-width:900px){ .spine{display:none} }


/* ══════════════════════════════════════════════════════════════════════
   DISPATCH
   A direct channel, styled as correspondence rather than as support chat.
   It does not pretend to be live: it says plainly that the reply comes by
   email, which is the only promise the brand can actually keep.
   ══════════════════════════════════════════════════════════════════════ */

.dispatch__open{
  position:fixed;right:clamp(1rem,2.4vw,2.2rem);bottom:clamp(1rem,2.4vw,2.2rem);
  z-index:9200;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.75rem 1.15rem;
  background:rgba(5,5,6,.82);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);
  font-family:var(--f-mono);font-size:.62rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
  cursor:pointer;
  transition:color .5s var(--ease),border-color .5s var(--ease),
             transform .5s var(--ease),opacity .6s var(--ease);
}
.dispatch__open:hover{color:var(--bone);border-color:rgba(242,239,233,.3);transform:translateY(-2px)}
.dispatch__open.is-away{opacity:0;visibility:hidden;transform:translateY(10px)}
.dispatch__pip{
  width:5px;height:5px;border-radius:50%;background:var(--royal-glow);
  box-shadow:0 0 9px rgba(30,79,232,.8);
  animation:pulse 4.6s var(--ease-io) infinite;
}

.dispatch{
  position:fixed;right:clamp(1rem,2.4vw,2.2rem);bottom:clamp(1rem,2.4vw,2.2rem);
  z-index:9300;
  width:min(380px,calc(100vw - 2rem));
  max-height:min(560px,calc(100svh - 2rem));
  display:flex;flex-direction:column;
  background:rgba(4,4,5,.94);
  -webkit-backdrop-filter:blur(18px) saturate(112%);
  backdrop-filter:blur(18px) saturate(112%);
  border:1px solid var(--line);
  box-shadow:0 26px 70px rgba(0,0,0,.72);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);
  transition:opacity .55s var(--ease),transform .6s var(--ease),visibility .55s var(--ease);
}
.dispatch.is-open{opacity:1;visibility:visible;transform:none}
.dispatch::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--royal-lit),rgba(242,239,233,.3) 30%,transparent 78%);
}

.dispatch__head{
  display:flex;align-items:center;gap:.8rem;
  padding:1.05rem 1.15rem;border-bottom:1px solid var(--line-soft);
}
.dispatch__head img{width:15px;opacity:.85;flex:0 0 auto}
.dispatch__head > div{flex:1;min-width:0}
.dispatch__title{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--bone);
}
.dispatch__sub{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dust);margin-top:.2rem;
}
.dispatch__close{
  position:relative;width:26px;height:26px;flex:0 0 auto;cursor:pointer;
  border:1px solid transparent;transition:border-color .4s var(--ease);
}
.dispatch__close:hover{border-color:var(--line)}
.dispatch__close span,.dispatch__close span::after{
  position:absolute;left:50%;top:50%;width:11px;height:1px;background:var(--ash);
}
.dispatch__close span{transform:translate(-50%,-50%) rotate(45deg)}
.dispatch__close span::after{content:"";left:0;top:0;transform:rotate(-90deg)}

.dispatch__log{
  flex:1;overflow-y:auto;padding:1.1rem 1.15rem;
  display:flex;flex-direction:column;gap:.75rem;
  scrollbar-width:thin;
}
.dispatch__note{
  font-size:.82rem;line-height:1.75;color:var(--dust);
  padding-bottom:.4rem;border-bottom:1px solid var(--line-soft);
}
.line{
  max-width:88%;padding:.65rem .85rem;
  font-size:.84rem;line-height:1.65;
  border:1px solid var(--line-soft);
  opacity:0;transform:translateY(8px);
  animation:lineIn .55s var(--ease) forwards;
}
@keyframes lineIn{to{opacity:1;transform:none}}
.line--sent{align-self:flex-end;background:rgba(9,43,156,.16);border-color:rgba(30,79,232,.4);color:var(--bone)}
.line--house{align-self:flex-start;background:rgba(242,239,233,.035);color:var(--ash)}
.line__meta{
  display:block;margin-top:.4rem;
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dust);
}

.dispatch__form{padding:1rem 1.15rem 1.15rem;border-top:1px solid var(--line-soft);display:grid;gap:.7rem}
.dispatch__field{display:grid;gap:.35rem}
.dispatch__field > span{
  font-family:var(--f-mono);font-size:.53rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dust);
}
.dispatch__field input,.dispatch__field textarea{
  width:100%;padding:.6rem .7rem;
  background:rgba(242,239,233,.028);
  border:1px solid var(--line-soft);
  color:var(--bone);font-family:var(--f-sans);font-size:.86rem;font-weight:300;
  line-height:1.6;resize:vertical;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.dispatch__field textarea{min-height:74px;max-height:180px}
.dispatch__field input::placeholder,.dispatch__field textarea::placeholder{color:var(--dust)}
.dispatch__field input:focus,.dispatch__field textarea:focus{
  outline:none;border-color:rgba(30,79,232,.6);background:rgba(242,239,233,.05);
}
.dispatch__trap{position:absolute!important;left:-9999px!important;opacity:0!important}

.dispatch__send{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:.8rem 1.2rem;border:1px solid var(--line);cursor:pointer;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.dispatch__send span{position:relative;z-index:1}
.dispatch__send::before{
  content:"";position:absolute;inset:0;background:var(--bone);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.dispatch__send::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:var(--royal-glow);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.dispatch__send:hover{color:var(--void);border-color:var(--bone)}
.dispatch__send:hover::before{transform:translateY(0)}
.dispatch__send:hover::after{transform:scaleX(1)}
.dispatch__send:disabled{opacity:.45;cursor:default}
.dispatch__send:disabled::before{transform:translateY(101%)}
.dispatch__send-icon{display:grid;place-items:center;transition:transform .45s var(--ease)}
.dispatch__send:hover .dispatch__send-icon{transform:translateX(3px)}

.dispatch__legal{
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dust);line-height:1.7;
}

@media (max-width:520px){
  .dispatch{right:.5rem;left:.5rem;bottom:.5rem;width:auto;max-height:calc(100svh - 1rem)}
  .dispatch__open{right:.75rem;bottom:.75rem}
}


/* ── nothing renders behind a closed door ───────────────────────────────
   The aura, the glass, the grade, the grain and the film all sit under an
   opaque black overlay while the entrance plays — but the compositor was
   still blurring and animating every one of them, which is what starved
   the assembly of frames. They come back the moment the door lifts. */
html:not(.is-ready) .aura,
html:not(.is-ready) .glass,
html:not(.is-ready) .bg-grade,
html:not(.is-ready) .grain,
html:not(.is-ready) .bg-video,
html:not(.is-ready) .band,
html:not(.is-ready) .noise-overlay{
  display:none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   THE REGISTER
   Scarcity stated as fact rather than as pressure. No countdown, no
   "only 2 left" — a register of quarters, most of them shut.
   ══════════════════════════════════════════════════════════════════════ */

.sec__note{
  font-size:clamp(var(--t-3),1.42vw,var(--t-4));
  font-weight:300;line-height:1.9;color:var(--ash);
  max-width:46ch;text-wrap:pretty;
  margin-bottom:clamp(2.2rem,5vw,3.4rem);
}
.lede--after{margin-top:1.4rem;color:rgba(237,234,228,.6)}

.capacity{border-top:1px solid var(--line);margin-bottom:clamp(3rem,6vw,4.5rem)}
.capacity__row{
  display:grid;
  grid-template-columns:clamp(5rem,10vw,7rem) minmax(0,1fr) clamp(7rem,14vw,10rem);
  align-items:center;gap:clamp(1rem,3vw,2.2rem);
  padding:clamp(1rem,2.4vw,1.5rem) 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transform:translateY(14px);
  transition:opacity .9s var(--ease),transform 1s var(--ease);
  transition-delay:var(--d,0ms);
}
.capacity.is-in .capacity__row{opacity:1;transform:none}
.capacity__q{color:var(--dust);font-variant-numeric:tabular-nums}
.capacity__bar{display:block;height:1px;background:var(--line-soft);position:relative;overflow:hidden}
.capacity__bar i{
  position:absolute;left:0;top:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--royal),var(--royal-lit));
  transition:width 1.8s var(--ease) .3s;
}
.capacity.is-in .capacity__bar i{width:var(--fill)}
.capacity__s{text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:.5rem}
.is-shut .capacity__s{color:var(--dust)}
.is-shut .capacity__bar i{background:linear-gradient(90deg,rgba(242,239,233,.14),rgba(242,239,233,.07))}
.is-open .capacity__s{color:var(--bone)}
.is-open .capacity__bar i{background:linear-gradient(90deg,var(--royal-lit),var(--royal-glow))}

/* what the house does not do — the negative space is the argument */
.terms{
  display:grid;
  grid-template-columns:clamp(7rem,16vw,12rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,2.4rem);align-items:start;
  padding-top:clamp(1.6rem,3.4vw,2.4rem);
  border-top:1px solid var(--line);
}
.terms__lead{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dust);
}
.terms ul{list-style:none;display:grid;gap:.75rem}
.terms li{
  position:relative;padding-left:1.5rem;
  font-size:clamp(.94rem,1.5vw,1.04rem);font-weight:300;
  color:rgba(237,234,228,.78);
  opacity:0;transform:translateY(12px);
  transition:opacity .85s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
.terms.is-in li{opacity:1;transform:none}
.terms li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.7rem;height:1px;background:var(--royal-lit);
}

/* ══════════════════════════════════════════════════════════════════════
   THE LEDGER
   Every name permanently withheld. The redaction is not a reveal waiting
   to happen — it is the point, and it never clears.
   ══════════════════════════════════════════════════════════════════════ */

.ledger{
  position:relative;z-index:1;
  max-width:var(--measure);margin-inline:auto;
  padding:clamp(3rem,8vh,5.5rem) var(--pad) clamp(4rem,10vh,7rem);
}
.ledger__head{
  display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--bone);
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);
  margin-bottom:.4rem;
}
.ledger__note{letter-spacing:.14em;color:var(--dust);font-size:.58rem}
.ledger__list{list-style:none}
.ledger__list li{
  display:grid;
  grid-template-columns:clamp(4.5rem,9vw,6.5rem) minmax(0,1fr) clamp(5rem,10vw,7rem) clamp(5rem,9vw,6.5rem);
  align-items:center;gap:clamp(.8rem,2.4vw,1.8rem);
  padding:clamp(.85rem,2vw,1.15rem) 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:.63rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dust);
  opacity:0;transform:translateY(12px);
  transition:opacity .85s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
.ledger__list.is-in li,.ledger__list li.is-in{opacity:1;transform:none}
.ledger__y{color:var(--ash);font-variant-numeric:tabular-nums}
.ledger__m{color:var(--ash)}
.ledger__st{text-align:right}

.rd{
  display:inline-block;width:var(--w,10ch);height:.82em;
  vertical-align:-.08em;user-select:none;
  background:
    repeating-linear-gradient(90deg,
      rgba(242,239,233,.10) 0 3px,
      rgba(242,239,233,.05) 3px 6px),
    linear-gradient(90deg,rgba(9,43,156,.42),rgba(20,67,214,.18));
  border:1px solid rgba(242,239,233,.07);
  position:relative;overflow:hidden;
}
.rd::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 40%,rgba(242,239,233,.16) 50%,transparent 60%);
  background-size:280% 100%;background-position:130% 0;
  animation:rdPass 9s var(--ease) infinite;
}
@keyframes rdPass{
  0%{background-position:130% 0}
  30%{background-position:-30% 0}
  100%{background-position:-30% 0}
}

@media (max-width:820px){
  .terms{grid-template-columns:1fr;gap:1.2rem}
  .capacity__row{grid-template-columns:4.5rem minmax(0,1fr) 6.5rem;gap:.8rem;font-size:.6rem}
  .ledger__list li{
    grid-template-columns:4.2rem minmax(0,1fr);
    row-gap:.4rem;font-size:.58rem;
  }
  .ledger__m{grid-column:2}
  .ledger__st{grid-column:2;text-align:left;color:var(--dust)}
  .ledger__head{gap:.5rem}
}


/* ── what is assessed ────────────────────────────────────────────────── */

.gauge{
  border-top:1px solid var(--hair,var(--line));
  padding-top:var(--s-4);
  margin-bottom:var(--s-6);
}
.gauge__lead{
  font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dust);margin-bottom:var(--s-4);
}
.gauge__list{list-style:none;display:grid;gap:var(--s-3)}
.gauge__list li{
  display:grid;grid-template-columns:3.4rem minmax(0,1fr);
  gap:clamp(var(--s-3),2.4vw,var(--s-4));
  align-items:baseline;
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(12px);
  transition:opacity .85s var(--ease),transform .95s var(--ease);
  transition-delay:var(--d,0ms);
}
.gauge.is-in .gauge__list li{opacity:1;transform:none}
.gauge__n{
  font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.18em;
  color:var(--royal-lit);
}
.gauge__t{
  font-size:clamp(var(--t-3),1.42vw,var(--t-4));
  font-weight:300;line-height:1.9;color:rgba(237,234,228,.74);
  max-width:52ch;text-wrap:pretty;
}

/* ── what the house holds to ─────────────────────────────────────────── */

.terms li strong{
  display:block;font-weight:400;color:var(--bone);
  letter-spacing:.005em;margin-bottom:.28rem;
}
.terms li{
  color:var(--ash);line-height:1.85;
  padding-bottom:var(--s-2);
}
.terms ul{gap:var(--s-3)}


/* ══════════════════════════════════════════════════════════════════════
   CONTROLS
   Every control now shares one anatomy: a hairline frame, a fill that
   rises from below, a blue seam that leads it, and a label that steps
   aside as the fill arrives. Consistency is what makes a set of buttons
   read as a system rather than as a collection.
   ══════════════════════════════════════════════════════════════════════ */

.btn{
  padding:var(--s-3) clamp(var(--s-4),2.4vw,var(--s-5));
  font-size:var(--t-2);
  letter-spacing:.18em;
  border-radius:0;
  isolation:isolate;
}
.btn__label{transition:transform .55s var(--ease)}
.btn:hover .btn__label{transform:translateX(-2px)}
.btn::before{transition:transform .62s var(--ease)}
.btn::after{height:1px}
.btn--primary{border-color:rgba(237,234,228,.34)}
.btn--ghost{font-size:var(--t-2);letter-spacing:.2em}

/* the corner ticks are the detail that reads as drawn rather than styled */
.btn{position:relative}
.btn > .btn__tick{
  position:absolute;width:5px;height:5px;z-index:3;
  border:1px solid var(--royal-lit);opacity:0;
  transition:opacity .5s var(--ease),transform .6s var(--ease);
  pointer-events:none;
}
.btn > .btn__tick--tl{left:-1px;top:-1px;border-right:0;border-bottom:0;transform:translate(4px,4px)}
.btn > .btn__tick--br{right:-1px;bottom:-1px;border-left:0;border-top:0;transform:translate(-4px,-4px)}
.btn:hover > .btn__tick{opacity:1;transform:translate(0,0)}

.head__act{
  padding:var(--s-2) var(--s-3);
  font-size:var(--t-1);
  letter-spacing:.2em;
}
.dispatch__open{padding:var(--s-2) var(--s-3);font-size:var(--t-1)}
.dispatch__send{padding:var(--s-3) var(--s-4);font-size:var(--t-2)}

/* ── alignment ─────────────────────────────────────────────────────────
   The eyebrow, the title rule and the body copy all begin on the same
   vertical line, and the section rule spans exactly the content measure. */
.sec{--gutter:var(--pad)}
.eyebrow{margin-left:0}
.about__grid{align-items:start}
.record{margin-top:.25rem}

/* the hero column is centred on the optical middle, not the mathematical
   one — the emblem sits above its own weight */
.hero__inner{padding-bottom:clamp(var(--s-3),2vh,var(--s-4))}

/* ── transitions ──────────────────────────────────────────────────────
   One easing family across the page, so nothing feels borrowed. */
.tenet__head,.gauge__list li,.terms li,.ledger__list li,
.record__row,.btn,.head__act,.dispatch__open{
  transition-timing-function:var(--ease);
}
.tenet__head::before{height:1px}
.record__row{transition:background .5s var(--ease)}
.record__row:hover{background:rgba(237,234,228,.018)}
.ledger__list li{transition:background .5s var(--ease),opacity .85s var(--ease),transform .95s var(--ease)}
.ledger__list li:hover{background:rgba(237,234,228,.015)}


/* ══════════════════════════════════════════════════════════════════════
   DOCUMENTS
   Legal notice and privacy. Same materials as the rest of the site, set
   for reading rather than for effect: longer measure, quieter rules, and
   every field that must be completed marked so it cannot be missed.
   ══════════════════════════════════════════════════════════════════════ */

.doc{padding-top:clamp(var(--s-6),12vh,var(--s-7))}
.doc__sec{max-width:56rem}
.doc__note{
  font-size:clamp(var(--t-3),1.45vw,var(--t-4));
  line-height:1.95;color:var(--ash);max-width:62ch;
  padding-bottom:var(--s-4);border-bottom:1px solid var(--line-soft);
  margin-bottom:var(--s-5);text-wrap:pretty;
}
.doc__block{margin-bottom:var(--s-5)}
.doc__block h2{
  font-family:var(--f-mono);font-size:var(--t-2);
  letter-spacing:.24em;text-transform:uppercase;color:var(--bone);
  padding-bottom:var(--s-2);margin-bottom:var(--s-3);
  border-bottom:1px solid var(--line-soft);
}
.doc__block p{
  font-size:clamp(var(--t-3),1.42vw,var(--t-4));
  line-height:1.95;color:rgba(237,234,228,.74);
  max-width:64ch;margin-bottom:var(--s-3);text-wrap:pretty;
}
.doc__hint{
  display:block;font-family:var(--f-mono);
  font-size:var(--t-1);letter-spacing:.1em;line-height:1.8;
  color:var(--dust);text-transform:none;margin-top:.35rem;
}
.doc__fill{
  color:var(--royal-lit);
  border-bottom:1px dashed rgba(20,67,214,.5);
  padding-bottom:1px;
}

.doc__dl{display:grid;gap:0}
.doc__dl > div{
  display:grid;grid-template-columns:clamp(9rem,20vw,14rem) minmax(0,1fr);
  gap:clamp(var(--s-2),2vw,var(--s-4));
  padding:var(--s-3) 0;border-bottom:1px solid var(--line-soft);
  align-items:start;
}
.doc__dl dt{
  font-family:var(--f-mono);font-size:var(--t-2);
  letter-spacing:.16em;text-transform:uppercase;color:var(--dust);
}
.doc__dl dd{
  font-size:clamp(var(--t-3),1.4vw,var(--t-4));
  line-height:1.8;color:rgba(237,234,228,.82);
}
.doc__dl dd a{border-bottom:1px solid var(--line);transition:border-color .4s var(--ease)}
.doc__dl dd a:hover{border-color:var(--royal-lit)}

.doc__table{width:100%;border-collapse:collapse;margin-bottom:var(--s-3)}
.doc__table th{
  text-align:left;font-family:var(--f-mono);font-weight:400;
  font-size:var(--t-1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dust);padding:var(--s-2) var(--s-2) var(--s-2) 0;
  border-bottom:1px solid var(--line);
}
.doc__table td{
  font-size:clamp(var(--t-2),1.25vw,var(--t-3));
  line-height:1.75;color:rgba(237,234,228,.74);
  padding:var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom:1px solid var(--line-soft);vertical-align:top;
}
.doc__table td:first-child{color:var(--bone)}

.doc__list{list-style:none;display:grid;gap:var(--s-3)}
.doc__list li{
  position:relative;padding-left:var(--s-4);
  font-size:clamp(var(--t-3),1.4vw,var(--t-4));
  line-height:1.9;color:rgba(237,234,228,.74);max-width:64ch;
}
.doc__list li::before{
  content:"";position:absolute;left:0;top:.85em;
  width:.75rem;height:1px;background:var(--royal-lit);
}
.doc__list strong{color:var(--bone);font-weight:400}

@media (max-width:720px){
  .doc__dl > div{grid-template-columns:1fr;gap:.3rem}
  .doc__table{display:block;overflow-x:auto}
  .doc__table th,.doc__table td{white-space:nowrap}
  .doc__table td:first-child{white-space:normal;min-width:14rem}
}


/* ══════════════════════════════════════════════════════════════════════
   THE ASSESSMENT
   ══════════════════════════════════════════════════════════════════════ */

.as{padding-top:clamp(var(--s-6),13vh,var(--s-7))}
.as__stage{
  position:relative;z-index:1;
  max-width:50rem;margin-inline:auto;
  padding:0 var(--pad) clamp(var(--s-6),12vh,var(--s-7));
}
.as__kicker{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.28em;
  text-transform:uppercase;color:var(--ash);margin-bottom:var(--s-4);
}
.as__count{color:var(--dust);letter-spacing:.18em;font-variant-numeric:tabular-nums}
.as__h1{
  font-size:clamp(var(--t-6),4.4vw,var(--t-8));
  font-weight:200;line-height:1.12;letter-spacing:.01em;
  margin-bottom:var(--s-4);text-wrap:balance;
}
.as__intro{
  font-size:clamp(var(--t-3),1.5vw,var(--t-4));
  line-height:1.95;color:rgba(237,234,228,.74);
  max-width:52ch;margin-bottom:var(--s-5);text-wrap:pretty;
}
.as__aside{
  display:block;margin-top:var(--s-3);
  font-family:var(--f-mono);font-size:var(--t-1);letter-spacing:.12em;
  line-height:1.8;color:var(--dust);
}
.as__prompt{
  font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.22em;
  text-transform:uppercase;color:var(--dust);
  padding-bottom:var(--s-2);border-bottom:1px solid var(--line);
  margin-bottom:var(--s-2);
}

/* ── choosing a division ─────────────────────────────────────────────── */
.as__divs{list-style:none}
.as__div{
  /* Four children, three columns. Each child is placed explicitly, or the
     description falls into the 1.4rem arrow column — crushed to one word per
     line — and the arrow wraps onto a row of its own. */
  width:100%;position:relative;overflow:hidden;
  display:grid;
  grid-template-columns:2.6rem minmax(0,1fr) 1.4rem;
  grid-template-rows:auto auto;
  column-gap:var(--s-3);row-gap:.35rem;
  align-items:baseline;text-align:left;
  padding:var(--s-3) 0;border-bottom:1px solid var(--line-soft);
  cursor:pointer;transition:padding-left .6s var(--ease);
}
.as__div-n{grid-column:1;grid-row:1}
.as__div-name{grid-column:2;grid-row:1}
.as__div-line{grid-column:2;grid-row:2}
.as__div-go{grid-column:3;grid-row:1}
.as__div::before{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:linear-gradient(90deg,var(--royal-lit),var(--bone) 40%,var(--bone));
  transition:width .8s var(--ease);
}
.as__div:hover{padding-left:.7rem}
.as__div:hover::before{width:100%}
.as__div-n{
  font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.16em;
  color:var(--dust);transition:color .5s var(--ease);
}
.as__div:hover .as__div-n{color:var(--royal-lit)}
.as__div-name{
  display:block;font-size:clamp(var(--t-4),1.75vw,var(--t-5));
  font-weight:300;letter-spacing:.16em;text-transform:uppercase;
}
.as__div-line{
  display:block;
  font-size:var(--t-3);line-height:1.75;color:var(--ash);
  max-width:58ch;text-wrap:pretty;
}
.as__div-go{
  align-self:center;justify-self:end;color:var(--dust);
  display:grid;place-items:center;
  transition:transform .5s var(--ease),color .5s var(--ease);
}
.as__div:hover .as__div-go{transform:translateX(4px);color:var(--bone)}

/* ── the questions ───────────────────────────────────────────────────── */
.as__bar{height:1px;background:var(--line-soft);margin-bottom:var(--s-4)}
.as__bar i{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--royal),var(--royal-glow));
  transition:width .5s var(--ease);
}
.as__q{
  font-size:clamp(var(--t-5),2.5vw,var(--t-7));
  font-weight:200;line-height:1.3;letter-spacing:.005em;
  margin-bottom:var(--s-4);max-width:26ch;text-wrap:balance;
}
.as__opts{list-style:none;display:grid;gap:.5rem}
.as__opt{
  width:100%;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:var(--s-3);text-align:left;
  padding:var(--s-3);border:1px solid var(--line-soft);cursor:pointer;
  font-size:clamp(var(--t-3),1.45vw,var(--t-4));
  color:rgba(237,234,228,.82);line-height:1.6;
  transition:border-color .45s var(--ease),color .45s var(--ease),
             background .45s var(--ease),transform .3s var(--ease);
}
.as__opt-m{
  flex:0 0 auto;width:9px;height:9px;border:1px solid var(--dust);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}
.as__opt:hover{border-color:rgba(20,67,214,.55);color:var(--bone);background:rgba(9,43,156,.07)}
.as__opt:hover .as__opt-m{border-color:var(--royal-glow)}
.as__opt.is-taken{border-color:var(--royal-glow);background:rgba(9,43,156,.16);color:var(--bone)}
.as__opt.is-taken .as__opt-m{background:var(--royal-glow);border-color:var(--royal-glow);transform:rotate(45deg)}
.as__back{
  margin-top:var(--s-4);
  font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dust);cursor:pointer;
  transition:color .4s var(--ease);
}
.as__back:hover{color:var(--bone)}

/* ── the result ──────────────────────────────────────────────────────── */
.as__score{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(var(--s-4),4vw,var(--s-5));align-items:center;
  padding:var(--s-4) 0 var(--s-5);border-bottom:1px solid var(--line-soft);
}
.as__dial{position:relative;width:clamp(108px,17vw,144px);aspect-ratio:1}
.as__dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.as__dial circle{fill:none;stroke-width:1.5}
.as__dial-t{stroke:var(--line)}
.as__dial-v{
  stroke:var(--royal-glow);stroke-linecap:butt;
  stroke-dasharray:var(--dash) 339.3;
  animation:dial 1.4s var(--ease) forwards;
}
@keyframes dial{from{stroke-dasharray:0 339.3}}
.is-sound .as__dial-v{stroke:#dfe6f5}
.is-exposed .as__dial-v{stroke:var(--royal)}
.as__dial-n{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  font-family:var(--f-mono);
}
.as__dial-n b{display:block;font-size:clamp(1.4rem,3.4vw,2rem);font-weight:400;color:var(--bone);
  font-variant-numeric:tabular-nums}
.as__dial-n i{font-style:normal;font-size:var(--t-1);letter-spacing:.2em;color:var(--dust)}
.as__verdict h2{
  font-size:clamp(var(--t-5),2.4vw,var(--t-7));
  font-weight:200;line-height:1.2;margin-bottom:var(--s-3);text-wrap:balance;
}
.as__verdict p{
  font-size:clamp(var(--t-3),1.45vw,var(--t-4));
  line-height:1.95;color:rgba(237,234,228,.74);max-width:54ch;text-wrap:pretty;
}

.as__findings{padding:var(--s-5) 0;border-bottom:1px solid var(--line-soft)}
.as__findings-h{
  font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.24em;
  text-transform:uppercase;color:var(--dust);margin-bottom:var(--s-4);
}
.as__findings ol{list-style:none;display:grid;gap:var(--s-4);counter-reset:f}
.as__findings li{counter-increment:f;position:relative;padding-left:2.4rem}
.as__findings li::before{
  content:counter(f,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--f-mono);font-size:var(--t-2);color:var(--royal-lit);
}
.as__f-q{
  display:block;font-size:clamp(var(--t-3),1.45vw,var(--t-4));
  color:var(--bone);line-height:1.7;margin-bottom:.45rem;
}
.as__f-d{
  display:block;font-size:var(--t-3);line-height:1.9;
  color:var(--ash);max-width:56ch;text-wrap:pretty;
}

.as__seal{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-4) 0;border-bottom:1px solid var(--line-soft);
}
.as__seal img{opacity:.55;flex:0 0 auto}
.as__seal-r{
  font-family:var(--f-mono);font-size:clamp(var(--t-3),1.5vw,var(--t-4));
  letter-spacing:.22em;color:var(--bone);
}
.as__seal-d{
  font-family:var(--f-mono);font-size:var(--t-1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dust);margin-top:.3rem;
}

.as__acts{display:flex;flex-wrap:wrap;gap:.75rem;padding:var(--s-4) 0}
.as__small{
  font-family:var(--f-mono);font-size:var(--t-1);letter-spacing:.1em;
  line-height:1.9;color:var(--dust);max-width:56ch;
}

/* ── the invitation on the main page ─────────────────────────────────── */
.invite{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto minmax(0,1fr) 1.4rem;
  gap:var(--s-3);align-items:center;
  margin:var(--s-5) 0;padding:var(--s-4);
  border:1px solid var(--line);
  background:linear-gradient(120deg,rgba(9,43,156,.10),transparent 62%);
  transition:border-color .55s var(--ease),transform .45s var(--ease);
}
.invite::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,var(--royal-glow),transparent);
}
.invite:hover{border-color:rgba(20,67,214,.5);transform:translateY(-2px)}
.invite__mark img{width:22px;opacity:.7;transition:opacity .5s var(--ease)}
.invite:hover .invite__mark img{opacity:1}
.invite__h{
  display:block;font-size:clamp(var(--t-4),1.7vw,var(--t-5));
  font-weight:300;letter-spacing:.02em;margin-bottom:.4rem;
}
.invite__p{
  display:block;font-size:var(--t-3);line-height:1.85;
  color:var(--ash);max-width:52ch;
}
.invite__go{color:var(--dust);transition:transform .5s var(--ease),color .5s var(--ease)}
.invite:hover .invite__go{transform:translateX(4px);color:var(--bone)}

@media (max-width:640px){
  .as__score{grid-template-columns:1fr;justify-items:start}
  .as__div{grid-template-columns:2.2rem minmax(0,1fr)}
  .as__div-go{display:none}
  .as__div-name{grid-column:2;grid-row:1}
  .as__div-line{grid-column:2;grid-row:2}
  .invite{grid-template-columns:auto minmax(0,1fr)}
  .invite__go{display:none}
  .as__acts .btn{width:100%}
}

@media print{
  .as__acts,.as__back,.as__bar,.invite{display:none!important}
  .as__stage{max-width:none}
  .as__dial-v{animation:none}
}





/* ══════════════════════════════════════════════════════════════════════
   DEPTH
   Three planes moving at three rates, a mark that hands itself over, and
   a light that follows the pointer. Everything here is driven from one
   frame loop and expressed through custom properties, so the CSS stays
   declarative and the JavaScript only ever writes numbers.
   ══════════════════════════════════════════════════════════════════════ */

/* the flow leans into its own momentum and rights itself when it stops */
.sec,.creed,.axiom,.ledger,.band{
  transform-origin:50% 0;
  will-change:transform;
}

/* ── the mark hands over ───────────────────────────────────────────────
   The hero emblem gives up its scale and its light on exactly the curve
   the header mark takes them on. At no point are there two, and at no
   point are there none. */
.emblem{--exit:0}
.emblem__img{
  transform:scale(calc(1 - var(--exit) * 0.34)) translateY(calc(var(--exit) * -24px));
  opacity:calc(1 - var(--exit) * 0.88);
  will-change:transform,opacity;
}
.is-ready .emblem__img{transition:clip-path 1.9s var(--ease) .2s}

.head__brand:hover .head__mark{opacity:1}

/* ── the aura drifts against the scroll ────────────────────────────── */
.aura b{--drift:0px}
.aura__a{animation:drift-a 54s ease-in-out infinite;translate:0 var(--drift)}
.aura__b{animation:drift-b 71s ease-in-out infinite;translate:0 calc(var(--drift) * -1)}
.aura__c{animation:drift-c 88s ease-in-out infinite;translate:0 var(--drift)}

/* ── chapter numerals ──────────────────────────────────────────────────
   Set enormously, kept almost invisible, and moving slower than the text
   in front of them. You do not read them; you feel the section has a
   number. */
.numeral{
  position:absolute;
  top:50%;left:clamp(-1rem,-2vw,0rem);
  font-family:var(--f-sans);
  font-size:clamp(9rem,26vw,22rem);
  font-weight:100;
  letter-spacing:-.04em;
  line-height:.8;
  color:var(--bone);
  opacity:0;
  pointer-events:none;user-select:none;
  z-index:0;
  will-change:transform,opacity;
  contain:layout paint;
}
/* Lift section content above the chapter numeral — but never touch a child
   that positions itself. This selector is more specific than
   .doctrine__ghost, so without the second exclusion it forced the watermark
   from absolute back into flow, dropping it to the top of the section where
   overflow:hidden cut it in half. */
.sec > *:not(.numeral):not(.doctrine__ghost){position:relative;z-index:1}

/* ── the pointer carries light ─────────────────────────────────────── */
.halo{
  position:fixed;top:0;left:0;z-index:2;
  width:min(34vw,460px);aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:opacity .7s var(--ease);
  background:radial-gradient(circle,
    rgba(168,192,255,.10) 0%,
    rgba(104,136,228,.055) 30%,
    rgba(24,72,220,.025) 54%,
    transparent 70%);
  will-change:transform;
  contain:strict;
}

@media (max-width:900px){
  .halo{display:none}
  .numeral{font-size:clamp(7rem,34vw,12rem)}
}


/* what the governor sheds, in order, when a machine cannot hold the rate */
html.drop-halo .halo{display:none}
html.drop-numerals .numeral{display:none}


/* ══════════════════════════════════════════════════════════════════════
   ACCESS REQUEST
   An application form that reads as a document being completed rather than
   as a sign-up. Fields are ruled lines, not boxes; a wrong one is marked
   quietly and only after a first attempt.
   ══════════════════════════════════════════════════════════════════════ */

.ac__what{
  margin:var(--s-5) 0;padding-top:var(--s-4);
  border-top:1px solid var(--line);
}
.ac__what-h,.ac__form-h{
  font-family:var(--f-mono);font-size:var(--t-2);letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone);margin-bottom:var(--s-4);
}
.ac__list{list-style:none;display:grid;gap:var(--s-3);margin-bottom:var(--s-3)}
.ac__list li{
  position:relative;padding-left:var(--s-4);
  font-size:clamp(var(--t-3),1.4vw,var(--t-4));
  line-height:1.9;color:rgba(237,234,228,.74);max-width:62ch;
}
.ac__list li::before{
  content:"";position:absolute;left:0;top:.9em;
  width:.75rem;height:1px;background:var(--royal-lit);
}
.ac__list strong{color:var(--bone);font-weight:400}
.ac__what-p{
  font-size:var(--t-3);line-height:1.9;color:var(--dust);max-width:56ch;
}

.ac__form{
  margin-top:var(--s-6);padding-top:var(--s-4);
  border-top:1px solid var(--line);
}
.ac__form.is-sent{opacity:.42;pointer-events:none}

.ac__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-4) clamp(var(--s-4),4vw,var(--s-5));
}
.ac__f{display:grid;gap:.45rem;min-width:0}
.ac__f--wide{grid-column:1/-1;margin-top:var(--s-4)}
.ac__f > span,.ac__set legend{
  font-family:var(--f-mono);font-size:var(--t-1);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dust);
  display:flex;align-items:baseline;gap:.6rem;
}
.ac__f > span i,.ac__set legend i{
  font-style:normal;font-size:.9em;letter-spacing:.14em;
  color:var(--royal-lit);opacity:.85;
}
.ac__f > em{
  font-style:normal;font-size:var(--t-2);line-height:1.7;
  color:var(--dust);opacity:.85;
}

.ac__f input,.ac__f textarea{
  width:100%;padding:.7rem 0;
  background:none;border:0;border-bottom:1px solid var(--line);
  color:var(--bone);font-family:var(--f-sans);
  font-size:clamp(var(--t-3),1.4vw,var(--t-4));font-weight:300;
  line-height:1.7;resize:vertical;
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.ac__f textarea{min-height:8rem;padding:.7rem .8rem;border:1px solid var(--line)}
.ac__f input:focus,.ac__f textarea:focus{
  outline:none;border-color:var(--royal-lit);
  background:rgba(237,234,228,.02);
}
.ac__f.is-bad input,.ac__f.is-bad textarea{border-color:rgba(200,80,80,.6)}
.ac__f.is-bad > span{color:rgba(220,120,120,.9)}

.ac__set{border:0;padding:var(--s-4) 0 0;margin:0;display:grid;gap:var(--s-3)}
.ac__set legend{padding:0;margin-bottom:.2rem}
.ac__set.is-bad legend{color:rgba(220,120,120,.9)}

.ac__chips{display:flex;flex-wrap:wrap;gap:.6rem}
.ac__chip{position:relative;cursor:pointer}
.ac__chip input{position:absolute;opacity:0;width:0;height:0}
.ac__chip span{
  display:inline-block;padding:.6rem 1.1rem;
  border:1px solid var(--line);
  font-family:var(--f-mono);font-size:var(--t-2);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.ac__chip:hover span{color:var(--bone);border-color:rgba(237,234,228,.3)}
.ac__chip input:checked + span{
  color:var(--bone);border-color:var(--royal-lit);
  background:rgba(9,43,156,.22);
}
.ac__chip input:focus-visible + span{outline:1px solid var(--bone);outline-offset:3px}

.ac__consent{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.9rem;align-items:start;
  margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px solid var(--line-soft);
  cursor:pointer;
}
.ac__consent input{
  appearance:none;width:15px;height:15px;margin-top:.25rem;
  border:1px solid var(--line);background:none;cursor:pointer;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.ac__consent input:checked{border-color:var(--royal-lit);background:var(--royal)}
.ac__consent input:focus-visible{outline:1px solid var(--bone);outline-offset:3px}
.ac__consent span{
  font-size:var(--t-3);line-height:1.8;color:var(--ash);max-width:62ch;
}
.ac__consent.is-bad span{color:rgba(220,120,120,.9)}
.ac__consent.is-bad input{border-color:rgba(200,80,80,.6)}

.ac__acts{
  margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-3) var(--s-4);
}
.ac__note{
  font-family:var(--f-mono);font-size:var(--t-2);
  letter-spacing:.14em;line-height:1.8;color:var(--dust);
  max-width:48ch;text-transform:none;
}

@media (max-width:720px){
  .ac__grid{grid-template-columns:1fr}
  .ac__acts{flex-direction:column;align-items:stretch}
  .ac__acts .btn{width:100%}
}


/* ══════════════════════════════════════════════════════════════════════
   HOMEWARD
   One way back, in one place, on every page that is not the front.

   Two of these pages had no route home at all — a visitor landing on the
   404, or finishing the Assessment, could only reach the site again through
   the browser's own controls. The others hid it at the foot of a long
   document. A mark in the corner is a signature; it is not a control, and
   it should not have been asked to work as one.
   ══════════════════════════════════════════════════════════════════════ */

.homeward{
  position:fixed;
  top:clamp(.9rem,2.2vw,1.7rem);
  left:clamp(.9rem,2.4vw,2.2rem);
  z-index:620;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.55rem .95rem .55rem .8rem;
  border:1px solid var(--line);
  background:rgba(5,5,6,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:var(--f-mono);font-size:var(--t-1);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
  transition:color .45s var(--ease),border-color .45s var(--ease),
             background .45s var(--ease),transform .45s var(--ease);
}
.homeward:hover,.homeward:focus-visible{
  color:var(--bone);
  border-color:rgba(242,239,233,.32);
  background:rgba(5,5,6,.88);
}

.homeward__arrow{
  display:grid;place-items:center;
  width:13px;height:13px;flex:0 0 auto;
  transition:transform .45s var(--ease);
}
.homeward:hover .homeward__arrow{transform:translateX(-3px)}

.homeward__mark{
  width:15px;height:auto;flex:0 0 auto;
  opacity:.72;transition:opacity .45s var(--ease);
}
.homeward:hover .homeward__mark{opacity:1}

.homeward__label{white-space:nowrap}

/* the rule underneath draws in on hover, like every other control here */
.homeward::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--royal-lit);
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.homeward:hover::after,.homeward:focus-visible::after{transform:scaleX(1)}

/* where a page also carries the section nav, the two must not collide */
.head--offset .head__nav{justify-content:flex-end}

@media (max-width:620px){
  .homeward{padding:.5rem .7rem;gap:.5rem}
  .homeward__label{display:none}
}

@media print{ .homeward{display:none!important} }


/* The sound control lived here. There is no sound now — the page is
   silent by design rather than by default. */



/* ══ the solid ════════════════════════════════════════════════════════════
   Five faces, five divisions, five points on the crown. Built in CSS 3D
   rather than with a library — a pentagonal prism is 60 lines of transform
   maths, where the smallest WebGL renderer is 150 KB the visitor has to
   download before anything appears. On a site whose first virtue is
   restraint, importing a 3D engine to draw five rectangles would be the
   wrong decision twice.

   Geometry: for a face of width w, the distance from the axis to the face
   is the apothem, w / (2·tan 36°) = w / 1.4531. Each face is turned by
   i × 72° and pushed out by that distance.
   ══════════════════════════════════════════════════════════════════════ */

.prism{
  --w:clamp(15rem,42vw,22rem);      /* face width  */
  --h:clamp(7.5rem,17vw,10rem);     /* face height */
  --r:calc(var(--w) / 1.4531);      /* apothem     */
  margin:var(--s-5) auto 0;
  max-width:var(--measure);
  display:flex;flex-direction:column;align-items:center;
}

/* the field reaches past the stage, so the solid sits inside a constellation
   rather than in front of a panel of one */
.prism__field{
  position:absolute;inset:-4.5rem -6% -3rem;z-index:0;pointer-events:none;
}
.prism__stage{
  position:relative;
  width:100%;height:calc(var(--h) + 5.5rem);
  display:grid;place-items:center;
  perspective:1400px;
  cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.prism__stage.is-turning{cursor:grabbing}
.prism__stage:focus-visible{outline:1px solid rgba(242,239,233,.4);outline-offset:8px}

.prism__solid{
  position:relative;z-index:1;width:var(--w);height:var(--h);
  transform-style:preserve-3d;
  transform:rotateX(-7deg) rotateY(var(--turn,0deg));
  /* Slower, and eased more gently at both ends. The old curve arrived hard;
     a solid of this size should feel like it has mass. */
  transition:transform 1.25s cubic-bezier(.22,.75,.18,1);
}
.prism__solid.is-free{transition:none}

/* No panel at all.
   The frame is gone: no fill, no border, no shadow, no blur. What turns is
   five labels arranged on an invisible pentagonal prism, and the geometry is
   read from where the words sit rather than from anything drawn around them.

   This is the more confident version. A frame tells a reader where to look;
   removing it trusts them to look anyway, which is the same argument the rest
   of this site makes. The only marks left are on the face you are reading —
   a rule beneath the name and two register ticks — and they are there to say
   THIS ONE, not to contain it. */
.pface{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;
  transform:rotateY(calc(var(--i) * 72deg)) translateZ(var(--r));
  background:none;border:0;box-shadow:none;
  cursor:pointer;
  backface-visibility:hidden;
  opacity:.34;
  transition:opacity .7s var(--ease);
}
.pface.is-front{opacity:1}

/* a breath of light behind the reading face, so the words lift off the field
   without anything being drawn to hold them */
.pface::before{
  content:"";position:absolute;left:50%;top:50%;
  width:118%;height:150%;transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(ellipse 50% 42% at 50% 50%,
    rgba(10,12,20,.60) 0%, rgba(10,12,20,.34) 45%, transparent 76%);
  opacity:0;transition:opacity .8s var(--ease);
}
.pface.is-front::before{opacity:1}

/* the rule beneath the name, drawn outward from the centre */
.pface::after{
  content:"";position:absolute;left:50%;bottom:24%;
  width:0;height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,
    transparent, rgba(242,239,233,.42) 22%, rgba(30,79,232,.85) 50%,
    rgba(242,239,233,.42) 78%, transparent);
  transition:width .85s var(--ease);
}
.pface.is-front::after{width:58%}

/* two register ticks, on the reading face only */
.pface__n::before,.pface__n::after{
  content:"";position:absolute;bottom:19%;
  width:6px;height:6px;
  border:1px solid rgba(242,239,233,.24);
  opacity:0;transition:opacity .8s var(--ease);
}
.pface__n::before{left:14%;border-right:0;border-top:0}
.pface__n::after{right:14%;border-left:0;border-top:0}
.pface.is-front .pface__n::before,
.pface.is-front .pface__n::after{opacity:1}

.pface__n{
  position:static;
  font-family:var(--f-mono);font-size:var(--t-2);
  letter-spacing:.3em;color:var(--dust);
  transition:color .6s var(--ease);
}
.pface__t{
  font-family:var(--f-sans);font-weight:200;
  font-size:clamp(var(--t-4),3.6vw,var(--t-5));
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  transition:color .6s var(--ease);
}
/* the reading face is distinguished by light and by its marks, not by a box */
.pface.is-front .pface__n{color:var(--royal-lit)}
.pface.is-front .pface__n{color:var(--royal-lit)}
.pface.is-front .pface__t{color:var(--bone)}

.prism__ring{
  position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  width:var(--w);height:var(--w);margin:calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
  border-radius:50%;
  border:1px solid rgba(30,79,232,.55);
  opacity:0;transform:scale(.28);
}
.prism__ring.is-out{animation:ringOut 1.15s var(--ease) forwards}
@keyframes ringOut{
  0%  {opacity:.85;transform:scale(.28)}
  70% {opacity:.18}
  100%{opacity:0;transform:scale(1.35)}
}

.prism__cue{
  margin-top:.4rem;
  font-family:var(--f-mono);font-size:var(--t-1);
  letter-spacing:.26em;text-transform:uppercase;color:var(--dust);
  transition:opacity .8s var(--ease);
}
.prism.is-touched .prism__ring{
  position:absolute;left:50%;top:50%;z-index:0;pointer-events:none;
  width:var(--w);height:var(--w);margin:calc(var(--w) / -2) 0 0 calc(var(--w) / -2);
  border-radius:50%;
  border:1px solid rgba(30,79,232,.55);
  opacity:0;transform:scale(.28);
}
.prism__ring.is-out{animation:ringOut 1.15s var(--ease) forwards}
@keyframes ringOut{
  0%  {opacity:.85;transform:scale(.28)}
  70% {opacity:.18}
  100%{opacity:0;transform:scale(1.35)}
}

.prism__cue{opacity:0}

/* the index, doubling as a position read-out */
.prism__index{
  display:flex;gap:0;list-style:none;
  margin-top:var(--s-3);
  border-top:1px solid var(--line-soft);
}
.prism__index button{
  padding:.75rem clamp(.7rem,2.4vw,1.3rem);
  background:none;border:0;border-top:1px solid transparent;margin-top:-1px;
  font-family:var(--f-mono);font-size:var(--t-1);
  letter-spacing:.2em;color:var(--dust);cursor:pointer;
  transition:color .5s var(--ease),border-color .5s var(--ease);
}
.prism__index button:hover{color:var(--ash)}
.prism__index button.is-here{color:var(--bone);border-top-color:var(--royal-lit)}

/* the reading */
/* One height for all five. The panel used to grow for whichever division had
   the longest paragraph, which changed the height of the whole section — and
   the watermark behind it is centred on that section, so it visibly jumped
   between divisions. A fixed floor removes the cause rather than the symptom. */
.prism__read{
  margin-top:var(--s-4);max-width:54ch;text-align:center;
  min-height:13.5rem;
}
.prism__lead{
  font-size:clamp(var(--t-4),3.2vw,var(--t-5));
  font-weight:100;line-height:1.5;letter-spacing:-.01em;
  color:var(--bone);text-wrap:balance;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.prism__body{
  margin-top:var(--s-3);
  font-size:var(--t-3);line-height:1.9;color:var(--ash);
  text-wrap:pretty;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.prism__read.is-swapping .prism__lead,
.prism__read.is-swapping .prism__body{opacity:0;transform:translateY(7px)}

@media (max-width:620px){
  .prism{--w:clamp(13rem,74vw,17rem);--h:8rem}
  .prism__read{min-height:14rem}
  .prism__index button{padding:.7rem .55rem}
}

@media (prefers-reduced-motion:reduce){
  .prism__solid{transition:none}
}

/* the ledger rows open. The four columns are unchanged — the button simply
   takes the place the li used to occupy, so the grid, the redaction and the
   rhythm all survive. */
.ledger__list li{display:block;padding:0;border-bottom:1px solid var(--line-soft)}

.lrow{
  width:100%;display:grid;
  grid-template-columns:clamp(4.5rem,9vw,6.5rem) minmax(0,1fr) clamp(5rem,10vw,7rem) clamp(5rem,9vw,6.5rem);
  align-items:center;gap:clamp(.8rem,2.4vw,1.8rem);
  padding:clamp(.85rem,2vw,1.15rem) 0;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-mono);font-size:.63rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dust);
  transition:padding-left .55s var(--ease),color .45s var(--ease);
}
.lrow:hover{padding-left:.6rem}
.lrow:hover .ledger__m,.lrow[aria-expanded="true"] .ledger__m{color:var(--bone)}
.lrow[aria-expanded="true"] .ledger__y{color:var(--royal-lit)}

.lrow__body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .7s var(--ease);
}
.lrow[aria-expanded="true"] + .lrow__body{grid-template-rows:1fr}
.lrow__body > p{
  overflow:hidden;
  max-width:58ch;
  margin-left:calc(clamp(4.5rem,9vw,6.5rem) + clamp(.8rem,2.4vw,1.8rem));
  font-family:var(--f-sans);font-size:var(--t-3);line-height:1.9;
  letter-spacing:0;text-transform:none;color:var(--ash);
  opacity:0;transition:opacity .55s var(--ease) .1s;
}
.lrow[aria-expanded="true"] + .lrow__body > p{
  opacity:1;padding-bottom:clamp(1rem,2.4vw,1.6rem);
}
@media (max-width:700px){
  .lrow{grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.7rem}
  .lrow .rd{display:none}
  .lrow__body > p{margin-left:2.6rem}
}

/* A mask lived here and it hid the entire site below the first screen.
   mask-attachment:fixed is not honoured everywhere. Where it is ignored the
   mask is sized against the element instead of the viewport — and .page is
   thousands of pixels tall — so mask-size:100% 100vh with no-repeat covered
   only the first screenful. Everything past it had no mask at all, which in
   CSS masking means fully transparent. The page was still there; it was
   simply not being painted.

   The lesson is the one that matters: a property with patchy support must
   never be the thing that decides whether content is visible. If it fails,
   it has to fail toward showing, not hiding. */

/* every page that carries the head must clear it */
body.is-bare .doc,body.is-bare .as,.doc__sec:first-of-type{padding-top:clamp(8rem,17vh,11rem)}

/* what a company sees once its code is accepted */
.ac__form.is-done{display:none}
.vault{display:none;margin-top:var(--s-5)}
.vault.is-open{display:block;animation:rise .8s var(--ease) both}
.vault__who{
  font-family:var(--f-mono);font-size:var(--t-2);
  letter-spacing:.24em;text-transform:uppercase;color:var(--bone);
  padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:.4rem;
}
.vault__who::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--royal-lit);margin-right:.7rem;vertical-align:.15em;
}
.vault .lrow{cursor:default}
.vault .lrow:hover{padding-left:0}
.vault__note{
  margin-top:var(--s-4);max-width:56ch;
  font-size:var(--t-2);line-height:1.9;color:var(--dust);
}
.vault__note a{color:var(--ash);border-bottom:1px solid var(--line)}

/* ── responsive ──────────────────────────────────────────────────────── */

@media (max-width:1180px){
  .rail{display:none}
}

@media (max-width:900px){
  .about__grid{grid-template-columns:1fr;gap:3rem}
  .doctrine__ghost{width:min(58vw,16rem)}
}

@media (max-width:720px){
  /* The four links measured 444 px inside a 360 px screen and were simply
     being clipped by overflow-x:hidden, so nothing ever flagged it. The
     header now stacks: mark centred on its own line, the four sections
     spread evenly across the full width beneath it. */
  .head{padding:clamp(.85rem,3vw,1.2rem) clamp(.75rem,3.5vw,1.25rem)}
  .head__nav{
    display:grid;grid-template-columns:1fr;justify-items:center;
    gap:.55rem;width:100%;
  }
  .head__word{display:none}
  .head__brand{justify-content:center}
  .head__mark{width:19px}
  .head__right{width:100%;justify-content:center;gap:0}
  .head__links{
    width:100%;
    display:flex;justify-content:space-between;align-items:baseline;
    gap:.25rem;flex-wrap:nowrap;
  }
  .head__links li{flex:0 1 auto;min-width:0}
  .head__links a{
    font-size:clamp(.5rem,2.4vw,.58rem);
    letter-spacing:.09em;
    white-space:nowrap;
    padding-block:.2rem;
  }
  .head__links .idx{display:none}
  .hero__title{letter-spacing:.2em;text-indent:.2em}
  .bg-video{transform:scale(1.03) translateZ(0)}
  .creed__line{letter-spacing:.5em;text-indent:.5em}
  .creed__item.is-in .creed__line{letter-spacing:.16em;text-indent:.16em}
  .axiom__line br{display:none}
  .contact__actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .foot__row{
    grid-template-columns:1fr;justify-items:center;
    text-align:center;gap:.9rem;
  }
  .foot__row > .foot__mark,.foot__legal,.foot__row > .foot__end{justify-self:center}
}

@media (max-width:380px){
  .hero__title{font-size:1.05rem;letter-spacing:.18em;text-indent:.18em}
}

/* ── reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .emblem__img{clip-path:none}
  .hero__title span,.hero__tag,.hero__scroll,[data-reveal]{opacity:1;transform:none;filter:none}
  [data-lines] .ln i{transform:none}
  .head__mark,.head__act{opacity:1;visibility:visible;transform:none}
  .creed__line{opacity:1;filter:none;letter-spacing:.2em;text-indent:.2em}
  .capacity__row,.terms li,.ledger__list li,.gauge__list li{opacity:1;transform:none}
  .capacity__bar i{width:var(--fill)}
  .creed__idx{opacity:1;transform:none}
  .grain,.band__track,.glass::after,.aura b,.relic__halo{animation:none}
  .curtain{display:none}
  .emblem{transform:none!important}
  .cursor{display:none}
}

@media (prefers-reduced-transparency:reduce){
  .band,.glass{-webkit-backdrop-filter:none;backdrop-filter:none}
}


/* ── print ──────────────────────────────────────────────────────────────
   black ink on white paper: the mark inverts, the atmosphere is dropped */
@media print{
  .bg-video,.glass,.bg-grade,.grain,.loader,.cursor,.progress,.band,
  .rail,.toast,.hero__scroll,.head__links,.head__act,.emblem__scan,
  .spine,.dispatch,.dispatch__open,.halo,.numeral{display:none!important}
  html,body,.page,.foot,.is-bare{background:#fff!important}
  *{color:#000!important;box-shadow:none!important;text-shadow:none!important}
  .head{position:static!important;mix-blend-mode:normal!important;padding:0 0 1cm}
  .hero{min-height:auto!important;padding:0 0 1cm}
  [data-lines] .ln i{transform:none!important}
  .emblem__img,.head__mark,.foot__mark,.axiom__mark,.doctrine__ghost,.lost__mark,.seal__mark{
    clip-path:none!important;filter:invert(1)!important;animation:none!important}
  .doctrine__ghost{display:none!important}
  .sec,.creed,.axiom{max-width:none;padding:.8cm 0}
  [data-reveal],.creed__idx{opacity:1!important;transform:none!important}
  .creed__line{opacity:1!important;filter:none!important;letter-spacing:.2em!important;text-indent:.2em!important}
  .tenet,.creed__item,.axiom,.capacity__row,.ledger__list li{break-inside:avoid}
  .capacity__row,.terms li,.ledger__list li,.gauge__list li{opacity:1!important;transform:none!important}
  .rd{background:#000!important;border-color:#000!important}
  .sec__title::after,.creed__item::after{display:none!important}
  .btn{border:1px solid #000!important}
  .foot{border-top:1px solid #000!important}
}


/* ══ the dossier ══════════════════════════════════════════════════════════
   What the assessment prints. It is the only thing on this site a visitor
   can still be holding a week later, so it is worth being a document rather
   than a printed web page.

   Three faults the first proof showed: nearly three hundred points of dead
   space above the content, a wash of background gradient across the sheet,
   and the mark stranded alone at the top instead of reading as a masthead.
   ══════════════════════════════════════════════════════════════════════════ */
@media print{
  /* nothing that belongs to the screen */
  .aura,.aura b,.veil,.bg-video,.glass,.bg-grade,.grain,.prism__field,
  .head__progress,.head__nav,.foot__mark,.skip,.as__acts{display:none!important}

  html,body{background:#fff!important;margin:0!important;padding:0!important}

  /* the head becomes a masthead: the mark, the name, a rule beneath */
  .head{
    position:static!important;display:block!important;
    padding:0 0 .45cm!important;margin:0 0 .7cm!important;
    border-bottom:.6pt solid #000!important;text-align:left!important;
    background:none!important;backdrop-filter:none!important;
  }
  /* The mark is an SVG that draws in currentColor, and the print rule that
     forces every colour to black also blacks its fill — leaving a smudge
     rather than a line drawing. Hiding it and setting the wordmark as the
     masthead is the honest fix; a mark that prints as a blot is worse than
     no mark. */
  .head__brand{display:none!important}
  .head::after{
    content:"KRONENTERPRISE";display:block;
    font-family:var(--f-mono);font-size:9pt;
    letter-spacing:.36em;color:#000;padding-bottom:.1cm;
  }

  /* the page starts at the top of the sheet */
  .page,.doc,.as,.sec,.doc__sec{
    padding-top:0!important;margin-top:0!important;min-height:0!important;
  }
  .as__result{padding-top:0!important}

  /* the dial and the verdict sit together, not adrift */
  .as__score{display:flex!important;align-items:flex-start;gap:1cm;page-break-inside:avoid}
  .as__dial{flex:0 0 auto}
  .as__dial-v{stroke:#000!important}
  .as__dial-t{stroke:#ccc!important}
  .as__verdict h2{font-size:16pt!important;margin-bottom:.2cm}
  .as__verdict p{font-size:10pt!important;line-height:1.6!important;max-width:none!important}

  .as__kicker{font-size:8.5pt!important;letter-spacing:.28em!important;margin-bottom:.5cm!important}
  .as__score{margin-bottom:0!important;padding-bottom:0!important}
  .as__findings{page-break-inside:auto;margin-top:.7cm!important;padding-top:0!important}
  .as__findings-h{font-size:8.5pt!important;letter-spacing:.24em!important;margin-bottom:.35cm!important}
  .as__findings li{page-break-inside:avoid;margin-bottom:.35cm!important}
  .as__f-q{font-size:10pt!important;line-height:1.5!important}
  .as__f-d{font-size:9pt!important;line-height:1.5!important;color:#444!important}

  /* the seal closes the document */
  .as__seal{
    page-break-inside:avoid;margin-top:1cm!important;
    padding-top:.5cm!important;border-top:.6pt solid #000!important;
  }
  .as__seal img{display:none!important}
  .as__seal-r{font-size:9pt!important;letter-spacing:.2em!important}
  .as__seal-d{font-size:8pt!important;color:#444!important}

  /* and a footer line on every sheet */
  .foot{border-top:.6pt solid #000!important;padding-top:.4cm!important;margin-top:1cm!important}
  .foot__legal,.foot__mail{font-size:7.5pt!important;color:#000!important}

  @page{margin:14mm}
}

/* the prism's one outbound reading — the arrow leads away, not back */
.backlink--go{margin-top:1.4rem}
.prism__read.is-swapping .backlink--go{opacity:0;transform:translateY(7px)}
.backlink--go{transition:opacity .3s var(--ease),transform .3s var(--ease),color .3s var(--ease),gap .3s var(--ease)}