/* 365Entertainment - main.css
   Charcoal ground. Three voices:
     gold  = brand / value
     ember = life / attention (one per view)
     gray  = structure
   The shell (header+footer) is a deeper frame around the stage. */

:root{
  --bg:#131416; --panel:#1b1d20;
  --shell:rgba(13,14,16,.82);
  --line:rgba(255,255,255,.065); --line-gold:rgba(212,175,55,.20);
  --gold:#D4AF37; --gold-hi:#e2c25a; --ember:#E0693A;
  --ink:#ECE9E2; --ink-hi:#F7F4EC;
  --gray:#C9CCD1; --muted:#A3A7AD; --muted-2:#9BA0A8; --muted-3:#8E9299;
  --header-h:72px; --footer-h:44px;
  --rail:1380px;
  --display:Georgia,'Times New Roman',serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
::selection{background:rgba(212,175,55,.26);color:var(--ink-hi)}

/* === SPA SHELL === */
.app{min-height: 100dvh;display:flex;flex-direction:column;isolation:isolate}
.app::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 58% 56% at 50% 40%, rgba(255,255,255,.028), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 78%, rgba(0,0,0,.50) 100%);
  transition:background .8s ease;
}
body[data-route="home"] .app::before{
  background:
    radial-gradient(ellipse 42% 50% at 25% 46%, rgba(212,175,55,.075), rgba(212,175,55,0) 72%),
    radial-gradient(ellipse 30% 24% at 25% 106%, rgba(224,105,58,.13), rgba(224,105,58,0) 70%),
    radial-gradient(ellipse 48% 62% at 76% 44%, rgba(255,255,255,.026), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 78%, rgba(0,0,0,.50) 100%);
}

/* content area */
#view{
  flex:1 1 auto;overflow-y:auto;overflow-x:hidden;
  scroll-behavior:smooth;position:relative;z-index:1;
  scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.20) transparent;
}
#view::-webkit-scrollbar{width:11px}
#view::-webkit-scrollbar-track{background:transparent}
#view::-webkit-scrollbar-thumb{background:rgba(212,175,55,.18);background-clip:content-box;border:4px solid transparent;border-radius:99px}
#view::-webkit-scrollbar-thumb:hover{background:rgba(212,175,55,.34);background-clip:content-box}
#view:focus{outline:none}

/* === HEADER === */
.site-header{
  flex:0 0 auto;height:calc(var(--header-h) + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);
  z-index:100;position:sticky;top:0;
  display:flex;align-items:center;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px);
  background:rgba(13,14,16,.94);
}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    rgba(212,175,55,0) 0%, rgba(212,175,55,.16) 18%,
    rgba(212,175,55,.40) 50%, rgba(212,175,55,.16) 82%, rgba(212,175,55,0) 100%);
}
.header-inner{width:100%;max-width:var(--rail);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* The house mark. One name, set in the display serif the stage headline
   already speaks in: "365" is the network's gold foil (the same foil as
   "Your Empire."), "Entertainment" is this house, in ivory. On arrival the
   name is unveiled once, left to right, the way light crosses an engraved
   plate; then the foil catches the light once and the mark is still. On
   hover the light passes again. The two pseudo-elements carry only that
   moving light, clipped to the numerals, so the arrival pass and the hover
   pass never restart each other. */
.brandmark{
  display:inline-flex;align-items:baseline;text-decoration:none;white-space:nowrap;padding:10px 0;
  font-family:var(--display);font-weight:400;font-size:clamp(21px,14px + 1vw,28px);
  line-height:1;letter-spacing:-.012em;
  -webkit-mask-image:linear-gradient(90deg,#000 40%,rgba(0,0,0,0) 60%);mask-image:linear-gradient(90deg,#000 40%,rgba(0,0,0,0) 60%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:markUnveil 1.5s var(--ease) both;
}
@keyframes markUnveil{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.brandmark .wm365{
  position:relative;font-variant-numeric:lining-nums;
  background:linear-gradient(135deg,#fbe6b6 0%,#D4AF37 48%,#9d7c1e 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);
}
.brandmark .wm365::before,.brandmark .wm365::after{
  content:"365";position:absolute;left:0;top:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,246,214,0) 42%,rgba(255,246,214,.78) 50%,rgba(255,246,214,0) 58%) no-repeat;
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.brandmark .wm365::after{animation:markSheen 1.3s ease-in-out 1.5s both}
.brandmark:hover .wm365::before{animation:markSheen 1.1s ease-in-out both}
@keyframes markSheen{from{background-position:100% 0}to{background-position:0 0}}
.brandmark .wmE{color:var(--ink);transition:color .4s}
.brandmark:hover .wmE{color:var(--ink-hi)}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:13.5px;font-weight:500;cursor:pointer;transition:color .25s;white-space:nowrap}
.nav-links a:not(.nav-cta){position:relative;padding: 10px 4px;}
.nav-links a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);opacity:.8;
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--ink-hi)}
.nav-links a:not(.nav-cta):hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{
  padding:10px 22px;border-radius:2px;
  border:1px solid rgba(212,175,55,.45);
  background:linear-gradient(180deg,rgba(212,175,55,.11),rgba(212,175,55,.03));
  color:var(--gold) !important;font-size:11px !important;font-weight:700 !important;
  letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s;
}
.nav-cta:hover{background:var(--gold);border-color:var(--gold);color:#0F1012 !important}
.nav-cta .lbl-short{display:none}

/* === FOOTER === */
.site-footer{
  flex:0 0 auto;height:calc(var(--footer-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:100;position:relative;
  display:flex;align-items:center;padding:0 clamp(20px,4vw,48px);
  background:var(--shell);backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
  font-size:11px;color:var(--muted-3);letter-spacing:.04em;
}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,
    rgba(212,175,55,0) 0%, rgba(212,175,55,.10) 22%,
    rgba(212,175,55,.24) 50%, rgba(212,175,55,.10) 78%, rgba(212,175,55,0) 100%);
}
.footer-inner{width:100%;max-width:var(--rail);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px}
.footer-links{display:flex;align-items:center;gap:26px}
.site-footer a{color:var(--muted-3);text-decoration:none;cursor:pointer;transition:color .25s;padding:14px 6px;display:inline-block}
.site-footer a:hover{color:var(--gold)}

/* === VIEW TRANSITIONS === */
.view{animation:viewIn .6s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* === HOME: the stage ===
   Two halves and nothing else. Left: the phoenix, drawn for this visit alone,
   with its fingerprint underneath - the protection proved on the visitor's
   own screen. Right: the promise, and no door: the pages in the navigation
   are the invitation, and a creator walks through on their own accord. */
.stage{
  position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  min-height:calc(100dvh - var(--header-h) - var(--footer-h));
  width:100%;max-width:var(--rail);margin:0 auto;padding:0 clamp(20px,4vw,48px);
}
.stage::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(212,175,55,0) 0%, rgba(212,175,55,.14) 26%,
    rgba(212,175,55,.14) 74%, rgba(212,175,55,0) 100%);
}
.stage-art{position:relative;align-self:stretch;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:48px 32px}
.stage .engine{width:min(500px,76%);max-width:min(500px,58vh)}
.engine{position:relative;z-index:2;aspect-ratio:1/1;animation:emblemIn 1.6s var(--ease) both}
@keyframes emblemIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.engine svg{width:100%;height:100%;overflow:visible}
.motes{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.mote{position:absolute;bottom:-12px;border-radius:50%;background:radial-gradient(circle,#f6e6b0,rgba(246,230,176,0) 70%);opacity:0;animation:rise linear infinite}
.mote.ember{background:radial-gradient(circle,#f0895c,rgba(224,105,58,0) 70%)}
@keyframes rise{0%{transform:translateY(0) scale(.55);opacity:0}14%{opacity:.6}86%{opacity:.34}100%{transform:translateY(-86vh) scale(1);opacity:0}}
.phoenix{transform-box:fill-box;transform-origin:center;animation:phoenixFloat 7s ease-in-out infinite}
/* ImageForge Live Assembly: the canvas holds the engine-rendered phoenix; the
   SVG phoenix is hidden only while (and after) the assembly succeeds */
.engine canvas.forge{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;
  opacity:0;transition:opacity .4s ease;filter:drop-shadow(0 0 5px rgba(212,175,55,.30))}
.engine.forging canvas.forge{opacity:1}
.engine.forging .phoenix{opacity:0;transition:opacity .3s}
.engine.forged canvas.forge{animation:phoenixFloat 7s ease-in-out infinite}
@keyframes phoenixFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.orbit{transform-origin:250px 250px;animation:spin 52s linear infinite}
.orbit-rev{transform-origin:250px 250px;animation:spin 72s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.core-glow{transform-origin:250px 250px;animation:breathe 5.5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.05)}}
.node{transform-box:fill-box;transform-origin:center;animation:nodepulse 3.4s ease-in-out infinite}
@keyframes nodepulse{0%,100%{opacity:.6}50%{opacity:1}}
.spark{opacity:0;animation:sparkflow 4.2s linear infinite}
@keyframes sparkflow{0%{opacity:0;offset-distance:0%}8%{opacity:1}92%{opacity:1}100%{opacity:0;offset-distance:100%}}

/* the proof: written only once this visit's render has really landed */
.stage-proof{position:relative;z-index:3;min-height:1.2em;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--muted-3);font-variant-numeric:tabular-nums;text-align:center;opacity:0;transition:opacity 1.4s var(--ease);
  padding:14px 0}
.stage-proof:not(:empty){opacity:.9}
.stage-proof b{font-weight:600;color:var(--gold);letter-spacing:.2em}

/* the promise */
.stage-copy{position:relative;z-index:4;padding:56px clamp(8px,1.5vw,24px) 56px clamp(32px,5.5vw,96px)}
.stage-copy > *{animation:riseIn .9s var(--ease) both}
.stage-copy h1{animation-delay:.1s}
.stage-sign{animation-delay:.3s}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stage-copy h1{font-family:var(--display);font-weight:500;color:var(--ink-hi);
  font-size:clamp(44px,4.7vw,80px);line-height:1;letter-spacing:-.016em;white-space:nowrap}
.stage-copy h1 span{display:inline-block;padding-bottom:.06em;color:var(--gold);
  background:linear-gradient(135deg,#fbe6b6 0%,#D4AF37 48%,#9d7c1e 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stage-sign{margin-top:clamp(20px,3vh,30px);font-family:var(--display);font-style:italic;
  font-size:clamp(19px,1.7vw,24px);line-height:1.45;color:var(--gray)}

/* === SECTIONS === */
.section{max-width:1040px;margin:0 auto;padding:clamp(56px,8vh,100px) clamp(20px,4vw,40px) clamp(40px, 6vh, 80px)}
.section-head{text-align:center;max-width:620px;margin:0 auto 60px}
.section-eyebrow{display:inline-block;font-size:10.5px;color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.2em;margin-bottom:18px}
.section-head h2{font-family:var(--display);font-size:clamp(34px,4.2vw,52px);font-weight:500;letter-spacing:-.008em;line-height:1.06;color:var(--ink-hi);margin-bottom:18px}
.section-head p{font-size:15px;color:var(--muted-2);line-height:1.7}
.proof{display:flex;align-items:center;gap:22px;padding:28px 30px;border:1px solid var(--line);border-radius:3px;background:rgba(27,29,32,.5)}
.proof-render{flex:0 0 auto;width:72px;height:72px;border-radius:3px;background:rgba(0,0,0,.35);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.proof-render img{width:48px;height:48px}
.proof-copy h4{font-size:14.5px;color:var(--ink);font-weight:700;margin-bottom:5px}
.proof-copy p{font-size:13px;color:var(--muted-2);line-height:1.6}

/* protection */
.layer-grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:60px;margin-bottom:68px}
.layer{display:flex;gap:20px;padding:26px 0;border-top:1px solid var(--line)}
.layer-no{flex:0 0 auto;font-size:11.5px;font-weight:600;color:var(--gold);opacity:.8;padding-top:4px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.layer h3{font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:-.005em}
.layer p{font-size:13.5px;color:var(--muted-2);line-height:1.65}
.ethos{margin-top:56px;display:flex;justify-content:center;flex-wrap:wrap;gap:0 16px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.ethos span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.7;vertical-align:middle;margin-right:16px}

/* form */
.field{margin-bottom:26px}
.field label{display:block;font-size:11px;font-weight:600;color:var(--muted-2);margin-bottom:9px;text-transform:uppercase;letter-spacing:.14em}
.field input,.field select{width:100%;padding:13px 2px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.13);border-radius:0;color:var(--ink);font-family:inherit;font-size:16px;transition:border-color .3s}
.field input::placeholder{color:var(--muted-3)}
.field input:focus,.field select:focus{outline:none;border-bottom-color:var(--gold)}
.field select option{background:var(--panel);color:var(--ink)}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23878B92' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center}
.hp{position:absolute;left:-9999px;opacity:0}
.btn{padding:15px 26px;border-radius:2px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .28s,border-color .28s,color .28s,transform .15s;border:1px solid transparent;display:inline-flex;align-items:center;gap:8px}
.btn-ghost{background:transparent;color:var(--muted);border-color:rgba(255,255,255,.14)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn:active{transform:scale(.985)}
.submit-btn{width:100%;padding:16px;margin-top:16px;border:none;border-radius:2px;cursor:pointer;background:var(--gold);color:#0F1012;font-family:inherit;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;transition:background .28s,transform .15s}
.submit-btn:hover{background:var(--gold-hi)}
.submit-btn:active{transform:scale(.985)}
.submit-btn:disabled{opacity:.55;cursor:default}
.form-msg{margin-top:20px;font-size:13.5px;line-height:1.55;display:none;padding:2px 0 2px 15px;border-left:1px solid var(--gold);color:var(--ink)}
.form-msg.show{display:block}
.form-msg.err{border-left-color:var(--ember);color:#f0a583}
.legal{margin-top:30px;font-size:12px;color:var(--muted-3);line-height:1.7}
.legal a{color:var(--muted-2);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.13);cursor:pointer;transition:color .25s,border-color .25s}
.legal a:hover{color:var(--gold);border-color:var(--gold)}

/* === THE BETA (#/onboard) ===
   Informative first: an editorial page that reads like a prospectus, with one
   deliberate door at the end. Hairlines, no cards; gold marks value only. */
.beta{max-width:1040px}
.nowrap{white-space:nowrap}
.beta .layer-grid{margin-bottom:clamp(72px,11vh,120px)}
.beta-fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);margin-bottom:clamp(88px,13vh,140px)}
.fit h4{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,28px);color:var(--ink-hi);padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--line-gold)}
.fit.not h4{border-bottom-color:var(--line)}
.fit ul{list-style:none}
.fit li{padding:16px 0 16px 22px;position:relative;font-size:14px;line-height:1.65;color:var(--muted);border-bottom:1px solid var(--line)}
.fit li::before{content:"";position:absolute;left:0;top:26px;width:9px;height:1px;background:var(--gold);opacity:.75}
.fit.not li::before{background:var(--muted-3)}
.beta-order .standard-h,.beta-after .standard-h{margin-bottom:clamp(30px,5vh,48px)}
.ledger{list-style:none;border-top:1px solid var(--line-gold)}
.ledger li{display:grid;grid-template-columns:64px minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);padding:30px 0;border-bottom:1px solid var(--line)}
.ledger-no{font-family:var(--display);font-size:24px;line-height:1.1;color:var(--gold);opacity:.8}
.ledger-main h4{font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.ledger-main p{font-size:14px;line-height:1.7;color:var(--muted)}
.ledger-meta{display:grid;grid-template-columns:96px minmax(0,1fr);row-gap:9px;font-size:13px;line-height:1.55}
.ledger-meta dt{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-3);padding-top:2px}
.ledger-meta dd{color:var(--muted-2)}
.beta-after{max-width:640px;margin:clamp(88px,13vh,140px) auto 0;text-align:center}
.beta-after p:not(.standard-h){font-size:15px;line-height:1.8;color:var(--muted)}
.beta-after p + p{margin-top:16px}
.beta-door{margin-top:clamp(72px,11vh,112px);padding-top:clamp(56px,8vh,80px);border-top:1px solid var(--line-gold);text-align:center}
.beta-door-line{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.4vw,30px);color:var(--ink);margin-bottom:34px}
.beta-door-acts{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.beta-door .legal{margin-top:34px}
@media (max-width:900px){
  .beta-fit{grid-template-columns:1fr}
  .ledger li{grid-template-columns:44px minmax(0,1fr)}
  .ledger-meta{grid-column:2}
}
@media (max-width:560px){
  .ledger-meta{grid-template-columns:1fr;row-gap:2px}
  .ledger-meta dd{margin-bottom:10px}
  .beta-door-acts a{width:100%}
}

/* === RESPONSIVE === */
@media (max-width:900px){
  :root{--header-h:62px;--footer-h:42px}
  .nav-links{gap:20px}
  .nav-links a:not(.nav-cta){font-size:12.5px}
  .nav-cta{padding:8px 13px;letter-spacing:.12em}
  .nav-cta .lbl-full{display:none}
  .nav-cta .lbl-short{display:inline}
  .stage{grid-template-columns:1fr;min-height:0}
  .stage::after{display:none}
  .stage-art{padding:48px 20px 20px}
  .stage .engine{max-width:min(420px,42vh)}
  .stage-copy{text-align:center;padding:24px 26px 64px}
  .stage-sign{margin-left:auto;margin-right:auto}
  .layer-grid{grid-template-columns:1fr}
  body[data-route="home"] .app::before{
    background:
      radial-gradient(ellipse 90% 30% at 50% 22%, rgba(212,175,55,.06), rgba(212,175,55,0) 72%),
      linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 78%, rgba(0,0,0,.50) 100%);
  }
}
.hamburger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;padding:10px;min-width:44px;min-height:44px}
.hamburger[aria-expanded="true"]{color:var(--gold)}
.hamburger svg { width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none; }
/* the menu button takes over at 640px: below that the four links and the
   house mark cannot share one line without wrapping */
@media (max-width:640px) {
  .hamburger { display:block; }
  .nav-links { display:none; }
  .nav-links.open { display:flex; position:fixed; inset:0; z-index:99; background:var(--bg); flex-direction:column; align-items:center; justify-content:center; gap:32px; padding-top:var(--header-h); }
  .nav-links.open a { font-size:18px; padding:12px 24px; }
  .nav-links.open .nav-cta { padding:14px 28px; font-size:14px; }
}
@media (max-width:560px){
  .stage-art{padding:28px 16px 12px;gap:16px}
  .stage .engine{width:min(270px,66vw);max-width:none}
  .stage-proof{font-size:9.5px;letter-spacing:.18em;line-height:1.7}
  .stage-copy{padding:20px 22px 48px}
  .stage-copy h1{font-size:clamp(34px,11.2vw,54px)}
  .stage-sign{font-size:18px}
  .nav-links{gap:15px}
  .nav-cta{padding:7px 11px;white-space:nowrap;min-height:40px}
  .footer-inner{justify-content:center}
  .footer-inner > span{display:none}
  .footer-links{gap:22px}
  .ethos{flex-direction:column;align-items:center;gap:10px}
  .ethos span+span::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mote,.spark,.orbit,.orbit-rev,.core-glow,.node,.phoenix,
  .brandmark,.brandmark .wm365::before,.brandmark .wm365::after,
  .view,.engine,.engine.forged canvas.forge,.stage-copy > *,
  .salon.hung .plate::before,.flip-panel.flip-on,.reveal-overlay.reveal-closing{animation:none !important}
  .app::before{transition:none}
  html,#view{scroll-behavior:auto}
}

/* Legal pages */
.legal-entity{font-size:12px;color:var(--muted-3);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.legal-updated{font-size:11px;color:var(--muted-3);text-align:center;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.06)}
.legal-list{margin:0;padding:0}
.legal-list dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:4px;padding-top:20px}
.legal-list dt:first-of-type{padding-top:0}
.legal-list dd{margin:0 0 0 0;padding:0 0 18px;font-size:14.5px;line-height:1.7;color:var(--ink);border-bottom:1px solid rgba(255,255,255,.04)}
.legal-list dd:last-of-type{border-bottom:none}
.legal-list dd a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(212,175,55,.3);text-underline-offset:2px}
.legal-list dd a:hover{text-decoration-color:var(--gold)}

/* ================================================================
   THE DIRECTORY - a portrait salon.
   Portraits hang as tall plates in a staggered gallery rhythm, captioned
   like a museum wall. Type does the luxury: an oversized serif masthead,
   hairline gold rules, tracked small caps. Gold marks value (numerals,
   rules, the one action); ember only for an error; everything else is gray.
   ================================================================ */
body[data-route="creators"] .app::before,
body[data-route="creator"] .app::before{
  background:
    radial-gradient(ellipse 70% 40% at 50% -6%, rgba(212,175,55,.085), rgba(212,175,55,0) 70%),
    radial-gradient(ellipse 60% 60% at 50% 60%, rgba(255,255,255,.022), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 78%, rgba(0,0,0,.55) 100%);
}
.dir{max-width:var(--rail);margin:0 auto;padding:clamp(64px,10vh,128px) clamp(20px,4vw,48px) clamp(56px,8vh,112px)}
.dir-eyebrow{display:block;font-size:10.5px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}

/* masthead */
.dir-mast{text-align:center;margin:0 auto clamp(72px,11vh,128px);max-width:1120px}
.dir-title{font-family:var(--display);font-weight:400;color:var(--ink-hi);
  font-size:clamp(48px,8.4vw,136px);line-height:.92;letter-spacing:-.025em;margin:26px 0 30px;
  animation:mastIn 1.3s var(--ease) both}
.dir-title.sm{font-size:clamp(44px,6vw,80px);margin:22px 0 22px}
@keyframes mastIn{from{opacity:0;letter-spacing:.02em;filter:blur(6px)}to{opacity:1;letter-spacing:-.025em;filter:none}}
.dir-rule{display:block;width:88px;height:1px;margin:0 auto 30px;
  background:linear-gradient(90deg,rgba(212,175,55,0),var(--gold),rgba(212,175,55,0))}
.dir-intro{font-family:var(--display);font-style:italic;font-size:clamp(17px,1.6vw,21px);line-height:1.6;color:var(--gray);max-width:600px;margin:0 auto}
.dir-modes{display:flex;justify-content:center;gap:44px;margin-top:48px}
.dir-modes a{position:relative;font-size:10.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--muted-2);text-decoration:none;padding:8px 0;transition:color .4s}
.dir-modes a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;background:var(--gold);transition:left .5s var(--ease),right .5s var(--ease)}
.dir-modes a:hover{color:var(--ink)}
.dir-modes a.on{color:var(--gold)}
.dir-modes a.on::after{left:0;right:0}

/* the salon. Images start clipped to a 0.5% sliver, never 100%: Chrome does not
   fetch a loading=lazy image whose visible area is zero, so a full clip never loads. */
.salon{display:grid;grid-template-columns:repeat(3,1fr);column-gap:clamp(28px,4vw,64px);row-gap:clamp(64px,9vh,112px);align-items:start}
.salon .plate:nth-child(3n+2){margin-top:clamp(56px,9vh,120px)}
/* the picture rail: the first row hangs from a gold rail on hairline wires,
   the staggered centre portrait on a longer one, as in a salon hang */
.salon.hung{position:relative;padding-top:0}
.salon.hung::before{content:"";position:absolute;left:-2%;right:-2%;top:0;height:1px;
  background:linear-gradient(90deg,rgba(212,175,55,0),rgba(212,175,55,.42) 12%,rgba(212,175,55,.42) 88%,rgba(212,175,55,0))}
.salon.hung .plate:nth-child(-n+3){margin-top:0}
.salon.hung .plate:nth-child(-n+3)::before{content:"";display:block;width:1px;margin:0 auto;height:var(--wire,64px);
  background:linear-gradient(180deg,rgba(212,175,55,.55),rgba(212,175,55,.18));
  transform-origin:top;animation:wire 1s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 150ms)}
.salon.hung .plate:nth-child(2){--wire:calc(64px + clamp(56px,9vh,120px))}
@keyframes wire{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.plate{display:block;text-decoration:none;color:inherit;opacity:0;animation:plateIn 1.1s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 250ms)}
@keyframes plateIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.plate-frame{position:relative;aspect-ratio:4/5;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 50% 30%, #1f2124, #141517 70%)}
.plate-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;clip-path:inset(99.5% 0 0 0);transform:scale(1.08);
  transition:clip-path 1.5s var(--ease),opacity .9s ease,transform 2.4s var(--ease)}
.plate-frame.lit img{opacity:1;clip-path:inset(0);transform:scale(1)}
.plate-frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.34) 100%)}
.plate-frame::after{content:"";position:absolute;inset:12px;z-index:2;pointer-events:none;
  border:1px solid rgba(212,175,55,0);transition:border-color .9s var(--ease),inset .9s var(--ease)}
a.plate:hover .plate-frame img{transform:scale(1.035);transition:transform 1.8s var(--ease)}
a.plate:hover .plate-frame::after,a.plate:focus-visible .plate-frame::after{border-color:rgba(212,175,55,.55);inset:16px}
a.plate:focus-visible{outline:none}
.plate-frame.broken img{display:none}

/* monogram plate: a creator without a portrait still hangs with dignity */
.plate-frame.mono{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 70% 55% at 50% 42%, rgba(212,175,55,.10), rgba(212,175,55,0) 70%),#151618}
.mono-i{font-family:var(--display);font-size:clamp(72px,9vw,128px);letter-spacing:-.02em;line-height:1;
  background:linear-gradient(160deg,#fbe6b6 0%,#D4AF37 55%,#8f6f18 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);opacity:.9}

/* museum caption */
.plate-cap{display:flex;flex-direction:column;gap:7px;padding:22px 2px 0}
.plate-no{font-size:10px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);opacity:.85}
.plate-name{font-family:var(--display);font-size:clamp(24px,2.1vw,30px);line-height:1.1;color:var(--ink-hi);letter-spacing:-.01em;transition:color .5s}
a.plate:hover .plate-name{color:var(--gold-hi)}
.plate-line{font-family:var(--display);font-style:italic;font-size:15px;line-height:1.5;color:var(--muted)}
.plate-plats{display:flex;gap:14px;margin-top:4px;font-size:9.5px;font-weight:600;letter-spacing:.3em;color:var(--muted-3)}
.plate-plats span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.55;vertical-align:middle;margin-right:14px}

/* loading plates */
.plate.ghost .plate-frame{background:linear-gradient(100deg,#17181a 30%,#1e2023 50%,#17181a 70%);background-size:300% 100%;animation:sheen 2.4s ease-in-out infinite}
.plate.ghost .g1,.plate.ghost .g2{display:block;height:10px;background:#1b1d20}
.plate.ghost .g1{width:34%}.plate.ghost .g2{width:62%;height:18px}
@keyframes sheen{from{background-position:100% 0}to{background-position:0 0}}

/* the vacant gallery (a truthful empty state) */
.plate.vacant .plate-frame{background:transparent;border:1px solid rgba(212,175,55,.16);display:flex;align-items:center;justify-content:center}
.plate.vacant .plate-frame::before{display:none}
.plate.vacant .plate-frame::after{inset:14px;border-color:rgba(255,255,255,.04)}
.vacant-no{font-family:var(--display);font-size:clamp(40px,4vw,56px);color:var(--gold);opacity:.32;letter-spacing:.04em}
.vacant-note{text-align:center;margin-top:clamp(64px,9vh,96px)}
.vacant-note p{font-size:14px;color:var(--muted-2);line-height:1.7}
.vacant-note .vacant-line{font-family:var(--display);font-style:italic;font-size:clamp(22px,2.4vw,30px);color:var(--ink);margin-bottom:10px}
.vacant-note .btn-gold{margin-top:34px}

/* buttons */
.btn-gold,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:16px 30px;border-radius:2px;font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .35s,color .35s,border-color .35s}
.btn-gold{background:var(--gold);color:#0F1012;border:1px solid var(--gold)}
.btn-gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.btn-gold:disabled{opacity:.6;cursor:wait}
.btn-line{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.16)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}

/* the house standard: features lined up */
.standard{margin-top:clamp(112px,16vh,176px);padding-top:clamp(56px,8vh,80px);border-top:1px solid var(--line-gold)}
.standard-h{text-align:center;font-size:10.5px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--muted-2);margin-bottom:clamp(48px,7vh,72px)}
.standard-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.standard-row li{padding:0 clamp(18px,2.4vw,36px);border-left:1px solid var(--line)}
.standard-row li:first-child{border-left:0;padding-left:0}
.standard-row li:last-child{padding-right:0}
.std-no{display:block;font-family:var(--display);font-size:clamp(40px,4vw,56px);line-height:1;color:var(--gold);opacity:.8;margin-bottom:26px}
.standard-row h4{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.standard-row p{font-size:13.5px;line-height:1.75;color:var(--muted-2)}
.standard .ethos{margin-top:clamp(64px,9vh,96px)}

/* the feed: a lookbook */
.lookbook{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(40px,6vw,96px);row-gap:clamp(80px,11vh,128px);align-items:start;max-width:1080px;margin:0 auto}
.lookbook .post:nth-child(even){margin-top:clamp(80px,14vh,168px)}
.post{animation:plateIn 1s var(--ease) both}
.post-media{position:relative;display:block;width:100%;overflow:hidden;background:#161719}
.post-media img{display:block;width:100%;height:auto;opacity:0;clip-path:inset(99.5% 0 0 0);transition:clip-path 1.4s var(--ease),opacity .8s}
.post-media.lit img{opacity:1;clip-path:inset(0)}
.post-media.film{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.post-media.film span{font-size:10.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted-3)}
.post-media.locked{aspect-ratio:4/5;border:1px solid rgba(212,175,55,.22);cursor:pointer;font-family:inherit;color:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:radial-gradient(ellipse 70% 55% at 50% 45%, rgba(212,175,55,.07), rgba(212,175,55,0) 70%),#131416;transition:border-color .5s}
.post-media.locked::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.04);pointer-events:none;transition:border-color .6s,inset .6s var(--ease)}
.post-media.locked:hover{border-color:rgba(212,175,55,.5)}
.post-media.locked:hover::after{border-color:rgba(212,175,55,.25);inset:18px}
.lock-k{font-family:var(--display);font-size:52px;line-height:1;color:var(--gold)}
.lock-t{font-size:10.5px;font-weight:700;letter-spacing:.36em;text-transform:uppercase;color:var(--ink)}
.lock-a{font-family:var(--display);font-style:italic;font-size:15px;color:var(--muted)}
.post-cap{padding-top:24px}
.post.words .post-cap{padding:48px 0 0;border-top:1px solid var(--line-gold)}
.post-by{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--gold);text-decoration:none;margin-bottom:12px}
.post-by:hover{color:var(--gold-hi)}
.post-title{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.15;color:var(--ink-hi);letter-spacing:-.01em;margin-bottom:12px}
.post-text{font-size:14.5px;line-height:1.75;color:var(--gray)}
.post-text p+p{margin-top:12px}
.post.words .post-text{font-family:var(--display);font-size:clamp(19px,1.7vw,23px);line-height:1.55;color:var(--ink)}
.offers{display:flex;flex-direction:column;margin-top:24px;border-top:1px solid var(--line)}
.offer{display:flex;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:padding .5s var(--ease),color .4s}
.offer-k{flex:1 1 auto;font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase}
.offer-p{font-family:var(--display);font-size:17px;color:var(--gold)}
.offer-a{color:var(--gold);transition:transform .5s var(--ease)}
.offer:hover{padding-left:10px;color:var(--gold-hi)}
.offer:hover .offer-a{transform:translateX(6px)}
.lookbook .post.ghost .post-media{aspect-ratio:4/5;background:linear-gradient(100deg,#17181a 30%,#1e2023 50%,#17181a 70%);background-size:300% 100%;animation:sheen 2.4s ease-in-out infinite}
.more{text-align:center;margin-top:clamp(72px,10vh,112px)}
.dir-quiet{text-align:center;font-family:var(--display);font-style:italic;font-size:20px;color:var(--muted);padding:40px 0}

/* a creator page */
.dir-profile{padding-top:clamp(40px,6vh,72px)}
.dir-back{display:inline-flex;gap:12px;font-size:10.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--muted-2);text-decoration:none;margin-bottom:clamp(40px,6vh,64px);transition:color .4s,gap .5s var(--ease)}
.dir-back:hover{color:var(--gold);gap:18px}
.dir-wait{min-height:60vh}
.pf-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,112px);align-items:center}
.pf-portrait{position:relative;margin:0}
.pf-portrait::before{content:"";position:absolute;inset:0;transform:translate(18px,18px);border:1px solid rgba(212,175,55,.32);pointer-events:none;animation:frameIn 1.6s var(--ease) .5s both}
@keyframes frameIn{from{opacity:0;transform:translate(0,0)}to{opacity:1;transform:translate(18px,18px)}}
.pf-portrait .plate-frame{max-height:78vh}
.pf-portrait .plate-frame::after{display:none}
.pf-text > *{animation:riseIn .9s var(--ease) both}
.pf-text > *:nth-child(2){animation-delay:.12s}.pf-text > *:nth-child(3){animation-delay:.24s}
.pf-text > *:nth-child(4){animation-delay:.36s}.pf-text > *:nth-child(5){animation-delay:.48s}
.pf-name{font-family:var(--display);font-weight:400;font-size:clamp(52px,7vw,112px);line-height:.92;letter-spacing:-.025em;color:var(--ink-hi);margin:24px 0 22px}
.pf-line{font-family:var(--display);font-style:italic;font-size:clamp(19px,1.8vw,24px);line-height:1.5;color:var(--gray);margin-bottom:26px}
.pf-bio{font-size:15px;line-height:1.8;color:var(--muted);max-width:520px}
.pf-bio p+p{margin-top:14px}
.pf-find{margin-top:44px;max-width:520px}
.pf-find-h{display:block;font-size:10px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--muted-3);margin-bottom:10px}
.find{display:flex;align-items:baseline;gap:18px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:padding .5s var(--ease)}
.find:first-of-type{border-top:1px solid var(--line)}
.find-k{font-family:var(--display);font-size:24px;letter-spacing:-.01em}
.find-h{flex:1 1 auto;font-size:13px;color:var(--muted-3)}
.find-a{color:var(--gold);transition:transform .5s var(--ease)}
.find:hover{padding-left:12px}
.find:hover .find-k{color:var(--gold-hi)}
.find:hover .find-a{transform:translateX(8px)}
.pf-feed-head{display:flex;align-items:center;gap:28px;margin:clamp(112px,16vh,176px) 0 clamp(64px,9vh,96px)}
.pf-feed-head span{flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(212,175,55,0),rgba(212,175,55,.3))}
.pf-feed-head span:last-child{background:linear-gradient(90deg,rgba(212,175,55,.3),rgba(212,175,55,0))}
.pf-feed-head h2{font-size:10.5px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
.dir-quiet-page{text-align:center;padding:12vh 0}
.dir-quiet-page p{color:var(--muted-2);margin-bottom:36px}

/* the age gate */
.gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(8,9,10,.74);backdrop-filter:blur(18px) saturate(.9);-webkit-backdrop-filter:blur(18px) saturate(.9);
  opacity:0;transition:opacity .5s ease}
.gate.on{opacity:1}
.gate-card{max-width:480px;text-align:center;padding:clamp(40px,6vw,64px) clamp(28px,5vw,56px);
  background:#121315;border:1px solid rgba(212,175,55,.28);position:relative;
  transform:translateY(14px) scale(.985);transition:transform .7s var(--ease)}
.gate.on .gate-card{transform:none}
.gate-card::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.04);pointer-events:none}
.gate-k{display:block;font-family:var(--display);font-size:64px;line-height:1;color:var(--gold);margin-bottom:18px}
.gate-card h2{font-family:var(--display);font-weight:400;font-size:32px;color:var(--ink-hi);margin-bottom:16px}
.gate-card > p{font-size:14.5px;line-height:1.7;color:var(--gray)}
.gate-acts{display:flex;flex-direction:column;gap:12px;margin:34px 0 22px;position:relative;z-index:1}
.gate-card > p.gate-note{font-size:11.5px;color:var(--muted-3)}
.gate-msg{font-size:13px;color:var(--ember);min-height:1em;margin-top:8px}

/* page transition into a creator: the portrait morphs, the rest crossfades */
::view-transition-group(*){animation-duration:.85s;animation-timing-function:cubic-bezier(.16,.84,.44,1)}
::view-transition-old(root){animation:vtOut .45s ease both}
::view-transition-new(root){animation:vtIn .7s var(--ease) .1s both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}to{opacity:1}}

@media (max-width:980px){
  .salon{grid-template-columns:repeat(2,1fr)}
  .salon.hung::before,.salon.hung .plate::before{display:none}
  .salon .plate:nth-child(3n+2){margin-top:0}
  .salon .plate:nth-child(even){margin-top:clamp(48px,8vh,96px)}
  .standard-row{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .standard-row li:nth-child(3){border-left:0;padding-left:0}
  .pf-hero{grid-template-columns:1fr;gap:56px}
  .pf-portrait{max-width:520px;width:100%;margin:0 auto}
}
@media (max-width:640px){
  .salon,.lookbook{grid-template-columns:1fr}
  .salon .plate:nth-child(even),.lookbook .post:nth-child(even){margin-top:0}
  .standard-row{grid-template-columns:1fr}
  .standard-row li{border-left:0;padding:0 0 32px;border-bottom:1px solid var(--line)}
  .dir-modes{gap:32px}
  .pf-portrait::before{transform:translate(10px,10px)}
}
@media (prefers-reduced-motion:reduce){
  .dir-title,.plate,.post,.pf-text > *,.pf-portrait::before{animation:none !important;opacity:1}
  .plate-frame img,.post-media img{transition:none;clip-path:none;transform:none}
  .plate.ghost .plate-frame,.lookbook .post.ghost .post-media{animation:none}
}


/* === THE ENGINE: rows that show, then explain === */
.engine-page{max-width:1040px}
.eng{list-style:none;border-top:1px solid var(--line-gold)}
.eng-row{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:clamp(18px,3vw,44px);padding:34px 0;border-bottom:1px solid var(--line)}
.eng-head{grid-column:1 / -1;display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:clamp(18px,3vw,44px);align-items:baseline;margin-bottom:12px}
.eng-no{font-family:var(--display);font-size:24px;line-height:1.1;color:var(--gold);opacity:.8;font-variant-numeric:tabular-nums}
.eng-head h3{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.eng-status{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-3);white-space:nowrap}
.eng-status:empty{display:none}
.eng-copy{grid-column:2}
.eng-copy p{font-size:14.5px;line-height:1.7;color:var(--muted)}
.eng-copy p+p{margin-top:10px}
.eng-live{grid-column:2;margin-top:18px}
.eng-live:empty{display:none}
.eng-fact{font-size:12.5px;line-height:1.7;color:var(--muted-2);font-variant-numeric:tabular-nums;margin-top:12px}
.eng-fact b,.eng-hash{color:var(--gold);font-weight:600;font-family:ui-monospace,'Cascadia Code',Consolas,Menlo,monospace;letter-spacing:.06em}
.eng-fact a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(212,175,55,.3);text-underline-offset:2px}
.eng-fact a:hover{text-decoration-color:var(--gold)}
.eng-fallback{color:var(--muted-3)}
.eng-badges{display:flex;gap:28px;align-items:flex-start}
.eng-badges figure{margin:0;text-align:center}
.eng-badges img{display:block;width:64px;height:64px;border:1px solid var(--line);border-radius:2px;background:var(--panel)}
.eng-badges figcaption{margin-top:8px;font-size:11px}
.eng-consents{margin-top:14px;border-top:1px solid var(--line)}
.eng-consents dt{padding-top:14px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.eng-consents dt span{margin-left:10px;font-weight:600;letter-spacing:.06em;text-transform:none;color:var(--muted-3);font-family:ui-monospace,Consolas,Menlo,monospace}
.eng-consents dd{padding:6px 0 14px;font-size:13.5px;line-height:1.65;color:var(--muted-2);border-bottom:1px solid var(--line)}
.eng-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);margin-top:4px}
.eng-two h4{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-3);padding-bottom:10px;border-bottom:1px solid var(--line-gold)}
.eng-two ul{list-style:none}
.eng-two li{padding:10px 0 10px 18px;position:relative;font-size:14px;line-height:1.6;color:var(--muted);border-bottom:1px solid var(--line)}
.eng-two li::before{content:"";position:absolute;left:0;top:19px;width:8px;height:1px;background:var(--gold);opacity:.75}
.eng-two div:last-child li::before{background:var(--muted-3)}
.eng-open{margin-top:14px}
.eng-live .reveal-score{margin-top:6px;text-align:left}
.eng-live .reveal-parts{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){
  .eng-row{grid-template-columns:44px minmax(0,1fr)}
  .eng-head{grid-template-columns:44px minmax(0,1fr) auto}
  .eng-two{grid-template-columns:1fr}
}
@media (max-width:560px){
  .eng-badges{gap:18px}
  .eng-head{grid-template-columns:44px minmax(0,1fr)}
  .eng-status{grid-column:2}
  .eng-live .reveal-parts{grid-template-columns:repeat(2,1fr)}
}

/* ======================== PROOF ENGINE REVEAL ======================== */
/* One job per colour: gold is a pass (and the brand), ember is a flag,
   gray is neutral. Hairlines, no glows. */

/* the trigger: the proof line under the phoenix */
.reveal-trigger{cursor:pointer;transition:color .2s}
.reveal-trigger:hover,.reveal-trigger:focus-visible{color:var(--gold) !important}
.reveal-trigger::after{content:' \2022 tap to reveal';font-size:9px;letter-spacing:.06em;opacity:.72;transition:opacity .2s}
.reveal-trigger:hover::after{opacity:1}
.reveal-btn-ghost{background:none;border:1px solid rgba(255,255,255,.16);color:var(--ink)}
.rs-genuine .reveal-score-fill{background:var(--gold)}
body.reveal-open{overflow:hidden}

/* overlay */
.reveal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(13,14,16,.97);overflow-y:auto;animation:revealIn .5s var(--ease)}
.reveal-overlay.reveal-closing{animation:revealOut .35s ease-in forwards}
@keyframes revealIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes revealOut{to{opacity:0;transform:translateY(24px)}}
.reveal-container{max-width:780px;margin:0 auto;padding:60px 28px 80px;position:relative}
.reveal-close{position:fixed;top:14px;right:18px;background:none;border:none;color:var(--ink);font-size:32px;line-height:1;cursor:pointer;opacity:.5;transition:opacity .2s;padding:8px;min-width:44px;min-height:44px}
.reveal-close:hover,.reveal-close:focus-visible{opacity:1}

/* acts */
.reveal-act{display:none}
.reveal-act-active{display:block;animation:actIn .4s var(--ease)}
@keyframes actIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* type */
.reveal-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.reveal-title{font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-.01em;margin:0 0 14px;color:var(--ink-hi)}
.reveal-heading{font-size:clamp(22px,4vw,32px);font-weight:700;line-height:1.15;margin:0 0 16px;color:var(--ink-hi)}
.reveal-surprise{font-size:16px;color:var(--gold);line-height:1.6;margin:0 0 34px}
.reveal-body{font-size:14.5px;line-height:1.7;color:var(--muted);margin:0 0 20px}
.reveal-em{color:var(--ink);font-weight:600;font-size:15px}
.reveal-gold{color:var(--gold)}
.reveal-fine{font-size:11px;color:var(--muted-3);text-align:center;margin-top:26px;line-height:1.7}
.reveal-h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-3);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-gold)}

/* the security read */
.reveal-read{list-style:none;margin:0 0 32px;padding:0}
.reveal-read li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.reveal-read li:last-child{border-bottom:none}
.reveal-read strong{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.reveal-read div span{display:block;font-size:12.5px;line-height:1.55;color:var(--muted-2)}
.rv-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;margin-top:7px;background:var(--muted-3)}
.rv-ok .rv-dot{background:var(--gold)}
.rv-flag .rv-dot{background:var(--ember)}
.rv-flag strong{color:var(--ember)}

/* device + behaviour */
.reveal-columns{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:8px}
.reveal-table{width:100%;border-collapse:collapse}
.reveal-table tr{border-bottom:1px solid var(--line)}
.reveal-table tr:last-child{border-bottom:none}
.reveal-label{font-size:11px;color:var(--muted-3);padding:6px 8px 6px 0;white-space:nowrap;width:38%;vertical-align:top}
.reveal-value{font-size:12px;color:var(--ink);padding:6px 0;font-family:ui-monospace,'Cascadia Code',Consolas,Menlo,monospace;word-break:break-word}

/* the score and its eight parts */
.reveal-score{margin:30px 0 6px;text-align:center}
.reveal-score-bar{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-bottom:12px}
.reveal-score-fill{height:100%;border-radius:3px;background:var(--gold);transition:width 1.2s var(--ease)}
.rs-uncertain .reveal-score-fill{background:var(--gray)}
.rs-suspicious .reveal-score-fill{background:var(--ember)}
.reveal-score-num{font-size:13px;color:var(--muted);letter-spacing:.06em}
.reveal-score-num strong{font-size:30px;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:0}
.rs-uncertain .reveal-score-num strong{color:var(--gray)}
.rs-suspicious .reveal-score-num strong{color:var(--ember)}
.reveal-parts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 14px;margin-top:18px;text-align:left}
.reveal-parts span{font-size:11px;color:var(--muted-3);border-top:1px solid var(--line);padding-top:6px;font-variant-numeric:tabular-nums}
.reveal-parts b{color:var(--ink);font-weight:600}
.reveal-parts .rp-low b{color:var(--ember)}

/* next */
.reveal-next{display:inline-block;margin-top:26px;padding:12px 28px;background:none;border:1px solid var(--gold);color:var(--gold);font-size:13px;letter-spacing:.06em;cursor:pointer;border-radius:3px;transition:background .2s,color .2s;font-family:inherit}
.reveal-next:hover,.reveal-next:focus-visible{background:var(--gold);color:#0E0F11}

/* this site's real numbers */
.reveal-stats{border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold);padding:18px 0;margin:26px 0}
.rs-head{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-3);margin-bottom:14px}
.rs-row{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:center;margin-bottom:10px;font-size:13px;color:var(--ink)}
.rs-row .rs-bar{grid-column:1 / -1;height:4px;border-radius:2px;display:block}
.rs-gold{background:var(--gold)}
.rs-gray{background:var(--gray)}
.rs-ember{background:var(--ember)}
.rs-label{grid-row:2}
.rs-num{grid-row:2;font-size:11.5px;color:var(--muted-3);font-variant-numeric:tabular-nums}
.rs-foot{font-size:11.5px;color:var(--muted-3);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}

/* the choice */
.reveal-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.reveal-btn{display:block;width:100%;text-align:left;padding:15px 18px;border-radius:3px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s;font-size:14px;line-height:1.4;font-family:inherit;text-decoration:none}
.reveal-btn strong{display:block;font-weight:600}
.reveal-btn span{display:block;font-size:12px;color:var(--muted-3);margin-top:3px;line-height:1.5}
.reveal-btn:hover,.reveal-btn:focus-visible{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.03)}
.reveal-btn-gold{border-color:rgba(212,175,55,.35)}
.reveal-btn-gold:hover,.reveal-btn-gold:focus-visible{border-color:var(--gold);background:rgba(212,175,55,.06)}
.reveal-btn-red{border-color:rgba(224,105,58,.25)}
.reveal-btn-red:hover,.reveal-btn-red:focus-visible{border-color:var(--ember);background:rgba(224,105,58,.06)}
.reveal-btn:disabled{opacity:.5;cursor:default}
.reveal-result-gold .reveal-heading{color:var(--gold)}

/* the deep read (Act 2, on the visitor's consent) */
.reveal-deep{margin:30px 0 8px}
.reveal-consent{border:1px solid var(--line-gold);border-radius:3px;padding:16px 18px 14px;margin:0 0 10px;position:relative}
.reveal-consent p{font-size:12.5px;line-height:1.65;color:var(--ink);margin:0 0 14px}
.reveal-consent-btn{display:inline-block;padding:11px 22px;background:var(--gold);border:1px solid var(--gold);color:#0E0F11;font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;border-radius:3px;font-family:inherit;transition:background .2s}
.reveal-consent-btn:hover,.reveal-consent-btn:focus-visible{background:var(--gold-hi)}
.reveal-consent-btn:disabled{opacity:.6;cursor:default}
.reveal-consent-v{position:absolute;right:14px;bottom:14px;font-size:10px;letter-spacing:.1em;color:var(--muted-3);text-transform:uppercase}
.reveal-consent.rc-done{display:none}
.reveal-trail{display:block;width:100%;border:1px solid var(--line);border-radius:3px;background:rgba(255,255,255,.015)}

/* the flip-book: attacker view / what we delete / how we protect */
.reveal-flip{margin:34px 0 8px;border-top:1px solid var(--line-gold);padding-top:24px}
.flip-panel{display:none}
.flip-panel.flip-on{display:block;animation:actIn .35s var(--ease)}
.flip-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-bottom:8px}
.flip-panel:nth-child(3) .flip-eyebrow,.flip-panel:nth-child(4) .flip-eyebrow{color:var(--gold)}
.flip-list{list-style:none;margin:0;padding:0}
.flip-list li{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 14px;padding-left:16px;position:relative}
.flip-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--muted-3)}
.flip-list strong{color:var(--ink)}
.flip-keep{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--muted);border:1px solid var(--line-gold);border-radius:3px;padding:12px 14px;margin-top:6px;cursor:pointer}
.flip-keep input{margin-top:2px;accent-color:var(--gold);flex:0 0 auto}
.flip-nav{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:12px}
.flip-prev,.flip-next{padding:9px 18px;background:none;border:1px solid var(--line-gold);color:var(--gold);font-size:12.5px;cursor:pointer;border-radius:3px;font-family:inherit;transition:background .2s,color .2s}
.flip-prev:hover:not(:disabled),.flip-next:hover:not(:disabled){background:var(--gold);color:#0E0F11}
.flip-prev:disabled,.flip-next:disabled{opacity:.35;cursor:default}
.flip-dots{display:flex;gap:8px}
.flip-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16)}
.flip-dot.on{background:var(--gold)}

@media(max-width:640px){
  .reveal-container{padding:56px 18px 60px}
  .reveal-columns{grid-template-columns:1fr;gap:22px}
  .reveal-parts{grid-template-columns:repeat(2,1fr)}
  .reveal-title{font-size:28px}
  .reveal-score-num strong{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .reveal-overlay,.reveal-act-active,.reveal-score-fill{animation:none;transition:none}
}