/* ══════════════════════════════════════════════════════════════
   JohnsProperty

   Green belongs to the mark and nothing else. Orange carries every
   interactive state. Each product panel then wears its own real
   colours, so the page reads as one estate holding three doors.

   The lockup top-left is the 3D mark at nav scale, driven by the
   same thirteen-pose table. Opening the nav takes the name apart.
   ══════════════════════════════════════════════════════════════ */

:root{
  --tarmac:#0A1512;
  --jade:#1B9E52;
  --jade-deep:#0F5D33;
  --bone:#EDE9DE;
  --bone-2:#E2DCCC;
  --signal:#FF5B2E;
  --sage:#7E9A8F;
  --chalk:#F4F7F5;

  --disp:'Cabinet Grotesk','Switzer',ui-sans-serif,system-ui,sans-serif;
  --body:'Switzer',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --pad:clamp(1.25rem,4.5vw,4.5rem);
  --rule:rgba(126,154,143,.22);
  --rule-dark:rgba(10,21,18,.16);
  --ease:cubic-bezier(.2,.7,.25,1);

  /* chrome, re-pointed per band by the observer in ui.js */
  --chrome-ink:#EDE9DE;
  --chrome-hair:rgba(237,233,222,.22);
  --lock-green:#1B9E52;
  --sheet-bg:rgba(10,21,18,.96);
}

/* The lockup crosses five backgrounds. Rather than blend modes or glass,
   it is simply told which band it is standing on. On bone, "Johns" takes
   the mark's own extrusion green: #1B9E52 on #EDE9DE is 2.84:1 and fails,
   #0F5D33 is 6.46:1 and passes. Same brand, second colour. */
[data-band="works"]{
  --chrome-ink:#0A1512;
  --chrome-hair:rgba(10,21,18,.20);
  --lock-green:#0F5D33;
  --sheet-bg:rgba(237,233,222,.97);
}
[data-band="natw"]{
  --chrome-ink:#E4EDF7;
  --chrome-hair:rgba(200,154,26,.34);
  --sheet-bg:rgba(6,20,36,.96);
}
[data-band="qwickly"]{
  --chrome-ink:#F5F0EA;
  --chrome-hair:rgba(249,115,22,.34);
  --sheet-bg:rgba(10,9,7,.96);
}
[data-band="larp"]{
  --chrome-ink:#F2F2F2;
  --chrome-hair:rgba(181,255,86,.30);
  --sheet-bg:rgba(0,0,0,.96);
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--tarmac);
  color:var(--chalk);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.62;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

main{position:relative;z-index:1}

/* ── the 3D stage ─────────────────────────────────────────── */
#stage{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;display:block;
  touch-action:pan-y;cursor:grab;
}
#stage.is-grabbing{cursor:grabbing}

#fallback{
  position:fixed;top:26vh;left:50%;
  width:min(88vw,900px);transform:translateX(-50%);
  z-index:0;pointer-events:none;
}

.grain{
  position:fixed;inset:-50%;z-index:40;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ── shared ───────────────────────────────────────────────── */
.sr,.skip{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip:focus{
  position:fixed;top:.75rem;left:.75rem;z-index:99;
  width:auto;height:auto;margin:0;clip:auto;
  padding:.6rem 1rem;background:var(--signal);color:#150703;
  font-family:var(--mono);font-size:.8rem;border-radius:2px;
}

.label{
  margin:0 0 1.1rem;
  font-family:var(--mono);font-size:.6875rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sage);
}
.label--dark{color:rgba(10,21,18,.5)}

:where(a):focus-visible,:where(button):focus-visible{
  outline:2px solid var(--signal);outline-offset:3px;border-radius:2px;
}

/* The stage sits behind <main>, so main and the transparent sections must
   be click-through or they swallow pointer events before the canvas. */
main,.hero,.about,.foot{pointer-events:none}
.works,.show,.lock,
.hero__foot,.scrollcue,.about__col,.foot__inner{pointer-events:auto}

/* ══ THE LOCKUP ════════════════════════════════════════════ */
.lock{
  position:fixed;z-index:30;
  top:max(1rem,env(safe-area-inset-top));
  left:var(--pad);
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
}

.lock__mark{
  display:flex;align-items:baseline;
  background:none;border:0;cursor:pointer;
  padding:.6rem .75rem;margin:-.6rem -.75rem;
  font-family:var(--disp);font-weight:800;font-size:15px;
  letter-spacing:-.02em;line-height:1;
  color:var(--chrome-ink);
  transition:color .38s var(--ease);
}
.lock__word{display:inline-flex}
.lock__word--j{color:var(--lock-green);transition:color .38s var(--ease)}

/* Each letter is its own inline-block so the name can come apart.
   Closing runs outside-in: the seam between "Johns" and "Property"
   is the last thing to lock, which is what makes it read as authored. */
.lock__mark span span{
  display:inline-block;
  transform:translate(0,0) rotate(0);
  transition:transform .34s var(--ease);
}
.lock[data-nav="open"] .lock__mark span span{
  /* The 3D pose offsets are in model em where a letter is 1em tall. At 15px
     nav scale the same numbers are sub-pixel, so they get scaled up until
     the break is legible without the letters colliding. */
  transform:translate(calc(var(--dx,0) * 1.25em), calc(var(--dy,0) * -1.25em))
            rotate(calc(var(--rz,0) * 1.4rad));
  transition-duration:.09s;
  transition-delay:0ms;
  transition-timing-function:cubic-bezier(.05,.7,.1,1);
}

.lock__word--j span:nth-child(1){--dx:-.26;--dy:.20;--rz:.13;transition-delay:76ms}
.lock__word--j span:nth-child(2){--dx:-.13;--dy:.11;--rz:-.09;transition-delay:101ms}
.lock__word--j span:nth-child(3){--dx:-.04;--dy:.17;--rz:.16;transition-delay:127ms}
.lock__word--j span:nth-child(4){--dx:.06;--dy:.08;--rz:-.06;transition-delay:152ms}
.lock__word--j span:nth-child(5){--dx:.02;--dy:.15;--rz:.11;transition-delay:177ms}
.lock__word--p span:nth-child(1){--dx:-.02;--dy:-.14;--rz:-.12;transition-delay:177ms}
.lock__word--p span:nth-child(2){--dx:-.02;--dy:-.09;--rz:.07;transition-delay:152ms}
.lock__word--p span:nth-child(3){--dx:.05;--dy:-.18;--rz:-.15;transition-delay:127ms}
.lock__word--p span:nth-child(4){--dx:.09;--dy:-.07;--rz:.05;transition-delay:101ms}
.lock__word--p span:nth-child(5){--dx:.14;--dy:-.16;--rz:-.10;transition-delay:76ms}
.lock__word--p span:nth-child(6){--dx:.19;--dy:-.06;--rz:.08;transition-delay:51ms}
.lock__word--p span:nth-child(7){--dx:.24;--dy:-.19;--rz:-.17;transition-delay:25ms}
.lock__word--p span:nth-child(8){--dx:.30;--dy:-.11;--rz:.12;transition-delay:0ms}

.lock__where{
  margin:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--chrome-ink);opacity:.55;
  transition:color .38s var(--ease),opacity .2s var(--ease);
}
.lock__where.is-swap{opacity:0}

/* ── the sheet ────────────────────────────────────────────── */
.sheet{
  position:absolute;top:calc(100% + .7rem);left:-.75rem;
  min-width:16.5rem;
  display:flex;flex-direction:column;
  padding:.45rem;
  background:var(--sheet-bg);
  border:1px solid var(--chrome-hair);
  border-radius:12px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.85);
  opacity:0;transform:translateY(-6px);
  transition:opacity .24s var(--ease) .04s,transform .24s var(--ease) .04s;
}
.lock[data-nav="open"] .sheet{opacity:1;transform:translateY(0)}
.sheet[hidden]{display:none}

.sheet a{
  display:flex;align-items:baseline;gap:.6rem;
  min-height:40px;padding:.5rem .65rem;border-radius:7px;
  color:var(--chrome-ink);text-decoration:none;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.sheet a b{font-weight:500;opacity:.45;min-width:1.3em}
.sheet a i{font-style:normal;margin-left:auto;opacity:.4;font-size:.6875rem}
.sheet a:hover{background:rgba(128,128,128,.14)}
.sheet a[aria-current="true"]{color:var(--signal)}
.sheet a[aria-current="true"] b{opacity:1;color:var(--signal)}

/* ══ HERO ══════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) clamp(2.5rem,7vh,5rem);
}
.hero__foot{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,5vw,4rem);align-items:end;
}
.hero__line{
  margin:0;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2.05rem,4.6vw,4rem);
  line-height:1.0;letter-spacing:-.035em;
}
.hero__line--em{color:var(--sage);display:inline-block;position:relative}
.hero__line--em::after{
  content:"";position:absolute;left:0;right:0;bottom:-.14em;
  height:3px;background:var(--signal);
  transform-origin:left;transform:scaleX(0);
  animation:rule 1s var(--ease) 1.5s forwards;
}
@keyframes rule{to{transform:scaleX(1)}}

.hero__aside{max-width:36ch;padding-bottom:.4rem}
.hero__eyebrow{
  margin:0 0 1rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);
}
.hero__eyebrow a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(126,154,143,.35);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.hero__eyebrow a:hover{color:var(--signal);border-color:var(--signal)}
.hero__sub{margin:0 0 1.4rem;color:var(--sage);font-size:.98rem}

.hint{
  margin:0;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(126,154,143,.7);
  transition:opacity .6s var(--ease);
}
.hint.is-done{opacity:.25}
.hint__key{
  color:var(--signal);
  border-bottom:1px solid rgba(255,91,46,.45);padding-bottom:1px;
}

.scrollcue{
  position:absolute;right:var(--pad);bottom:clamp(2.5rem,7vh,5rem);
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(126,154,143,.45);
}
.scrollcue span{writing-mode:vertical-rl}
.scrollcue i{
  width:1px;height:34px;
  background:linear-gradient(180deg,var(--signal),transparent);
}

/* ══ DOCTRINE ══════════════════════════════════════════════ */
.about{
  position:relative;
  padding:clamp(6rem,18vh,12rem) var(--pad) clamp(8rem,22vh,16rem);
}
.about__col{
  width:min(100%,46ch);
  display:flex;flex-direction:column;gap:clamp(4.5rem,14vh,9rem);
}
.note{margin:0}
.note__h{
  margin:0 0 .9rem;
  font-family:var(--disp);font-weight:700;
  font-size:clamp(1.5rem,2.9vw,2.35rem);
  line-height:1.08;letter-spacing:-.028em;text-wrap:balance;
}
.note__p{margin:0;color:var(--sage);max-width:42ch}

/* ══ THE DIRECTORY ═════════════════════════════════════════ */
.works{
  position:relative;z-index:2;
  background:var(--bone);color:#0A1512;
  padding:clamp(4.5rem,12vh,8rem) var(--pad) clamp(4.5rem,12vh,8rem);
}
.works__h{
  margin:0 0 1.2rem;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2.4rem,7vw,5.5rem);
  line-height:.93;letter-spacing:-.04em;
}
.works__note{margin:0 0 clamp(2.5rem,7vh,4.5rem);max-width:48ch;color:rgba(10,21,18,.62)}

.dir{list-style:none;margin:0;padding:0}
.dir__legend,.dir__row{
  display:grid;
  grid-template-columns:3.2rem minmax(6rem,1fr) minmax(6rem,1fr) minmax(8rem,1.6fr) 4.5rem;
  gap:1rem;align-items:baseline;
  padding:1.15rem .25rem;
  border-top:1px solid var(--rule-dark);
}
.dir__legend{
  border-top:0;padding-bottom:.6rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(10,21,18,.4);
}
.dir li:last-child .dir__row{border-bottom:1px solid var(--rule-dark)}

.dir__row{
  position:relative;color:inherit;text-decoration:none;
  transition:background .3s var(--ease);
}
a.dir__row::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
a.dir__row:hover{background:var(--bone-2)}
a.dir__row:hover::after{transform:scaleX(1)}

.dir__no{
  font-family:var(--mono);font-size:.75rem;color:rgba(10,21,18,.4);
}
.dir__name{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(1.1rem,1.9vw,1.55rem);
  letter-spacing:-.03em;line-height:1;
}
.dir__dom,.dir__is{
  font-family:var(--mono);font-size:.75rem;color:rgba(10,21,18,.55);
}
.dir__is{color:rgba(10,21,18,.78)}
.dir__state{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);text-align:right;
}
/* The legend and the empty row both have to beat the cell styles above,
   which share their specificity and win on source order. */
.dir__legend span{
  font-family:var(--mono);font-weight:400;
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(10,21,18,.4);
}
.dir__legend .dir__state{text-align:right}

/* Row 04 claims nothing. It is the only forward motion on the page. */
.dir__row--empty span{color:rgba(10,21,18,.3)}
.dir__row--empty .dir__name{
  font-family:var(--mono);font-weight:400;font-size:.75rem;letter-spacing:.2em;
}

/* ══ SHOWCASE PANELS ═══════════════════════════════════════ */
.show{
  position:relative;z-index:2;
  padding:0 var(--pad) clamp(3.5rem,9vh,6.5rem);
  overflow:hidden;
}
.show__grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
  max-width:1500px;margin:0 auto;position:relative;z-index:1;
}
.show__grid--flip .show__copy{order:2}
.show__grid--wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}

/* The call strip. Three violently different palettes read as one estate
   because every panel opens with the same line in its own brand colour. */
.call{
  margin:0 calc(var(--pad)*-1) clamp(2.5rem,6vh,4rem);
  padding:.7rem var(--pad);
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:baseline;
  background:var(--brand);color:var(--call-ink);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.2em;
  text-transform:uppercase;
}
.call span{opacity:.72}
.call b{margin-left:auto;font-weight:500}

/* The product name is a heading that happens to be a link, so the h2 owns the
   spacing and the anchor stays inline. */
.show__h{margin:0 0 .9rem}
.show__title{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0;color:inherit;text-decoration:none;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2.4rem,5.6vw,4.6rem);
  line-height:.95;letter-spacing:-.04em;
  transition:color .3s var(--ease);
}
.show__title:hover{color:var(--brand)}
.show__arrow{
  width:.42em;height:.42em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--ease);
}
.show__title:hover .show__arrow{transform:translate(4px,-4px)}

.show__kick{
  margin:0 0 1.1rem;max-width:44ch;
  font-size:.95rem;line-height:1.5;color:var(--brand);
}
.show__p{margin:0 0 1.8rem;max-width:46ch;opacity:.72;line-height:1.66}

.show__stats{
  list-style:none;margin:0 0 2rem;padding:1.3rem 0 0;
  border-top:1px solid currentColor;
  display:grid;grid-template-columns:repeat(4,auto);
  gap:1.4rem;justify-content:start;
}
.show__stats li{display:flex;flex-direction:column;gap:.15rem}
.show__stats b{
  font-family:var(--disp);font-weight:800;font-size:1.5rem;
  line-height:1;letter-spacing:-.03em;color:var(--brand);
}
.show__stats span{
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.55;
}

.show__cta{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.4rem;border-radius:999px;
  background:var(--brand);color:var(--call-ink);text-decoration:none;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.show__cta:hover{transform:translateY(-2px);box-shadow:0 12px 34px -14px var(--brand)}

/* ── panel skins ──────────────────────────────────────────── */
.show--natw{
  --brand:#C89A1A;--call-ink:#061424;
  background:#061424;color:#E4EDF7;
  background-image:
    radial-gradient(120% 90% at 78% 12%,rgba(200,154,26,.13),transparent 60%),
    repeating-linear-gradient(0deg,rgba(170,184,194,.05) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(170,184,194,.05) 0 1px,transparent 1px 46px);
}
.show--qw{
  --brand:#F97316;--call-ink:#1A0A02;
  background:#0A0907;color:#F5F0EA;
  background-image:
    radial-gradient(90% 80% at 12% 88%,rgba(249,115,22,.16),transparent 62%),
    radial-gradient(70% 60% at 92% 10%,rgba(249,115,22,.07),transparent 60%);
}
.show--larp{
  --brand:#B5FF56;--call-ink:#0A0F02;
  background:#000;color:#F2F2F2;
  background-image:
    repeating-linear-gradient(0deg,rgba(181,255,86,.055) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(90deg,rgba(181,255,86,.055) 0 1px,transparent 1px 54px);
}

/* ══ 01 · NATW console ═════════════════════════════════════ */
.cmd{
  border:1px solid rgba(200,154,26,.34);
  background:rgba(22,25,42,.72);
  box-shadow:0 30px 80px -40px #000,inset 0 1px 0 rgba(255,255,255,.05);
}
.cmd__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1rem;border-bottom:1px solid rgba(200,154,26,.24);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);
}
.cmd__turn b{font-weight:700;color:#F0DFA8}
.cmd__map{position:relative;padding:1rem 1rem .3rem}
.cmd__map svg{display:block;width:100%;height:auto}

.hex{
  fill:#1E2238;stroke:#0A1220;stroke-width:1.4;cursor:pointer;
  transition:fill .35s var(--ease),opacity .25s var(--ease);
}
.hex:hover{opacity:.78}
.hex.is-p0{fill:#C89A1A}
.hex.is-p1{fill:#1E5F9F}
.hex.is-p2{fill:#009688}
.hex.is-p3{fill:#A2453B}
.hex.is-cap{stroke:#F0DFA8;stroke-width:2.2}
.hex.is-hit{animation:hexhit .5s var(--ease)}
@keyframes hexhit{0%{opacity:1}35%{opacity:.25}100%{opacity:1}}

.cmd__hint{
  margin:.5rem 0 0;text-align:center;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(170,184,194,.55);min-height:1.2em;
}
.cmd__hud{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(.8rem,2vw,1.4rem);align-items:center;
  padding:.85rem 1rem;border-top:1px solid rgba(200,154,26,.24);
}
.cmd__roll,.cmd__hold{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.cmd__d12{
  display:grid;place-items:center;width:52px;height:52px;
  background:var(--brand);color:#061424;
  clip-path:polygon(50% 0,95% 27%,95% 73%,50% 100%,5% 73%,5% 27%);
  font-family:var(--disp);font-weight:800;font-size:1.35rem;
  transition:background .3s var(--ease);
}
.cmd__d12.is-rolling{animation:tumble .55s cubic-bezier(.3,1.4,.4,1)}
@keyframes tumble{0%{transform:rotate(0) scale(1)}35%{transform:rotate(190deg) scale(.84)}
  70%{transform:rotate(320deg) scale(1.08)}100%{transform:rotate(360deg) scale(1)}}
.cmd__d12lbl,.cmd__holdl{
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(170,184,194,.55);
}
.cmd__holdn{
  font-family:var(--disp);font-weight:800;font-size:1.9rem;line-height:1;color:var(--brand);
}
.cmd__log{
  list-style:none;margin:0;padding:0;
  font-family:var(--mono);font-size:.625rem;line-height:1.9;
  color:rgba(170,184,194,.85);
  display:flex;flex-direction:column-reverse;max-height:5.7em;overflow:hidden;
}
.cmd__log li{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:logIn .4s var(--ease);
}
.cmd__log li:nth-child(2){opacity:.55}
.cmd__log li:nth-child(3){opacity:.28}
@keyframes logIn{from{opacity:0;transform:translateY(4px)}}

/* ══ 02 · OnQwickly chat ═══════════════════════════════════ */
.chat{
  display:flex;flex-direction:column;min-height:26rem;
  background:#14120F;border:1px solid rgba(255,255,255,.09);
  border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -50px #000;
}
.chat__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.15rem;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;
}
.chat__status{display:inline-flex;align-items:center;gap:.5rem;color:rgba(245,240,234,.65)}
.chat__status i{
  width:7px;height:7px;border-radius:50%;background:#EAB308;
  animation:pulse 1.1s linear infinite;
}
.chat__status.is-live i{background:#10B981;animation:none}
.chat__who{color:var(--brand)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.chat__stream{
  flex:1;list-style:none;margin:0;padding:1.1rem;
  display:flex;flex-direction:column;gap:.55rem;justify-content:flex-end;
}
.msg{
  max-width:80%;padding:.6rem .95rem;border-radius:16px;
  font-size:.9rem;line-height:1.5;animation:msgIn .35s var(--ease);
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}}
.msg--them{background:#221D17;align-self:flex-start;border-bottom-left-radius:5px}
.msg--you{background:var(--brand);color:#1A0A02;align-self:flex-end;border-bottom-right-radius:5px}
.msg--sys{
  align-self:center;background:none;padding:.2rem 0;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(245,240,234,.32);
}
.msg--typing{display:flex;gap:4px;align-items:center;padding:.75rem .95rem}
.msg--typing i{
  width:6px;height:6px;border-radius:50%;background:rgba(245,240,234,.5);
  animation:bounce 1.1s var(--ease) infinite;
}
.msg--typing i:nth-child(2){animation-delay:.15s}
.msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

.chat__bottom{
  display:flex;align-items:center;gap:1rem;
  padding:.85rem 1.15rem;border-top:1px solid rgba(255,255,255,.07);
}
.chat__skip{
  padding:.55rem 1.15rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--brand);color:#1A0A02;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  transition:transform .25s var(--ease);
}
.chat__skip:hover{transform:translateY(-1px)}
.chat__fake{font-family:var(--mono);font-size:.625rem;color:rgba(245,240,234,.3);line-height:1.4}

/* ══ 03 · LARP PACK ════════════════════════════════════════ */
.ticker{
  margin:0 calc(var(--pad)*-1) clamp(2.5rem,6vh,4rem);
  padding:.85rem 0;border-bottom:1px solid rgba(181,255,86,.22);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.ticker__row{display:flex;width:max-content;animation:slide 42s linear infinite}
.ticker__row span{
  display:inline-flex;align-items:center;gap:.55rem;padding:0 1.9rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;color:#F2F2F2;white-space:nowrap;
}
.ticker__row i{font-style:normal;color:var(--brand)}
.ticker__row i.dn{color:#FB48CE}
@keyframes slide{to{transform:translateX(-50%)}}

.larp__fine{
  margin:1.1rem 0 0;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(242,242,242,.32);
}
.reel__lbl{
  margin:0 0 .9rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brand);
}
.reel__lbl span{color:rgba(242,242,242,.3)}
.reel__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.clip{
  position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;
  border:1px solid rgba(181,255,86,.16);
  transition:border-color .3s var(--ease),transform .35s var(--ease);
}
.clip::after{
  content:"▶ preview";
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(0,0,0,.55);opacity:0;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand);
  transition:opacity .3s var(--ease);
}
.clip:hover{border-color:var(--brand);transform:translateY(-2px)}
.clip:hover::after{opacity:1}
.clip figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:1.6rem .55rem .45rem;
  background:linear-gradient(transparent,rgba(0,0,0,.9));
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;
}
.clip figcaption b{font-weight:400;color:#F2F2F2}
.clip figcaption span{color:var(--brand);flex:none}

.clip--yacht{background:linear-gradient(180deg,#FFC98A 0%,#FF8B4A 30%,#C4562F 45%,#3A2436 46%,#1C1226 100%)}
.clip--jet{background:
  radial-gradient(circle at 68% 42%,#BFE0FF 0 7%,#5E9BD6 7% 9%,transparent 10%),
  linear-gradient(180deg,#3A342C 0%,#221E19 55%,#141110 100%)}
.clip--monaco{background:
  radial-gradient(circle at 22% 62%,rgba(255,214,140,.9) 0 1.2%,transparent 2%),
  radial-gradient(circle at 38% 68%,rgba(255,214,140,.8) 0 1%,transparent 2%),
  radial-gradient(circle at 62% 58%,rgba(255,236,180,.9) 0 1.4%,transparent 2.2%),
  radial-gradient(circle at 78% 70%,rgba(255,214,140,.7) 0 1%,transparent 2%),
  radial-gradient(circle at 50% 22%,rgba(220,232,255,.55) 0 3%,transparent 5%),
  linear-gradient(180deg,#0A1430 0%,#122246 52%,#061024 100%)}
.clip--watch{background:
  radial-gradient(circle at 52% 54%,transparent 21%,#E3C05A 22% 27%,#8A6C1E 28% 30%,transparent 31%),
  linear-gradient(140deg,#2B2723 0%,#17130F 100%)}
.clip--pool{background:linear-gradient(180deg,#F2D9AE 0 18%,#7FD8E8 18% 52%,#2E96AC 52% 60%,#E8D7B6 60% 100%)}
.clip--terminal{background:
  linear-gradient(90deg,rgba(0,0,0,.75) 0 6%,transparent 6% 46%,rgba(0,0,0,.75) 46% 54%,transparent 54% 94%,rgba(0,0,0,.75) 94%),
  linear-gradient(180deg,rgba(0,0,0,.8) 0 10%,transparent 10% 72%,#0B0B0C 72%),
  radial-gradient(90% 50% at 50% 70%,#F0C089 0 14%,#7E5C46 34%,transparent 62%),
  linear-gradient(180deg,#101922 0%,#26333E 58%,#0C1015 100%)}

.reel__count{
  margin:1.1rem 0 0;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:rgba(242,242,242,.42);
}
.reel__count b{color:var(--brand);font-weight:500}

/* ══ FOOT ══════════════════════════════════════════════════ */
.foot{
  position:relative;min-height:100svh;
  padding:clamp(7rem,20vh,13rem) var(--pad) clamp(2rem,5vh,3rem);
  display:flex;flex-direction:column;justify-content:space-between;
}
.foot__inner{max-width:52ch}
.foot__h{
  margin:0 0 1.1rem;
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2rem,5vw,3.9rem);
  line-height:.98;letter-spacing:-.04em;
}
.foot__p{margin:0 0 2rem;color:var(--sage);max-width:42ch}
.cta{
  display:inline-flex;align-items:center;gap:.8rem;
  padding:1rem 1.5rem;background:var(--signal);color:#150703;
  text-decoration:none;border-radius:999px;
  font-family:var(--mono);font-size:.875rem;letter-spacing:.02em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cta svg{
  width:1.05em;height:1.05em;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(255,91,46,.7)}
.cta:hover svg{transform:translateX(4px)}

.foot__links{
  list-style:none;display:flex;flex-wrap:wrap;gap:1.5rem;
  margin:3rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
}
.foot__links a{color:var(--sage);text-decoration:none;transition:color .25s var(--ease)}
.foot__links a:hover{color:var(--signal)}
.foot__fine{
  margin:2.5rem 0 0;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(126,154,143,.4);
}

/* ══ responsive ════════════════════════════════════════════ */
@media (max-width:1000px){
  .show__grid,.show__grid--wide{grid-template-columns:1fr;gap:2.5rem}
  .show__grid--flip .show__copy{order:0}
}

@media (max-width:900px){
  .hero__foot{grid-template-columns:1fr;gap:1.75rem}
  .hero__aside{max-width:42ch}
  .scrollcue{display:none}
  .about__col{width:100%}
  .foot{min-height:auto}
  .show__stats{grid-template-columns:repeat(2,auto);gap:1.1rem 2rem}
  .cmd__hud{grid-template-columns:auto minmax(0,1fr);row-gap:.9rem}
  .cmd__hold{grid-column:2;flex-direction:row;align-items:baseline;gap:.5rem;justify-content:flex-end}
}

/* Directory collapses to two lines: identity above, the transformation below. */
@media (max-width:700px){
  .dir__legend{display:none}
  .dir__row{
    grid-template-columns:2.6rem 1fr auto;
    grid-template-areas:"no name state" ". is is";
    gap:.35rem .8rem;padding:1rem .25rem;
  }
  .dir__no{grid-area:no}
  .dir__name{grid-area:name}
  .dir__state{grid-area:state}
  .dir__is{grid-area:is}
  .dir__dom{display:none}
}

@media (max-width:720px){
  .lock__mark{font-size:13px}
  .sheet{min-width:min(19rem,calc(100vw - 2*var(--pad)))}
}

@media (max-width:560px){
  .hero__line{font-size:clamp(1.75rem,8.4vw,2.6rem)}
  .hero__sub{font-size:.92rem}
  .reel__grid{grid-template-columns:repeat(2,1fr)}
  .chat__fake{display:none}
}

/* ══ reduced motion ════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker__row,.chat__status i,.msg--typing i{animation:none}
  .hero__line--em::after{animation:none;transform:scaleX(1)}
  .lock__mark span span{transition:none}
  .lock[data-nav="open"] .lock__mark span span{transform:none}
  *{transition-duration:.01ms!important}
}