@font-face { font-family:'Vollkorn'; src:url('assets/vollkorn-400.woff2') format('woff2'); font-weight:400 700; font-display:swap; }

  :root {
    --ink:#0a0910; --surface:#14121b; --surface-2:#1c1926; --line:#2a2632; --line-strong:#3a3444;
    --text:#ece7de; --strong:#fbf8f2; --muted:#a79fb0; --faint:#746c82;
    --ember:#c99a2f; --ember-bright:#e0b64a; --ember-ink:#241c06; --good:#7fae8e;
    --display:'Vollkorn','Palatino Linotype',Georgia,serif;
    --sans:'Segoe UI',system-ui,sans-serif;
    --mono:'Cascadia Mono',Consolas,monospace;
  }
  * { margin:0; box-sizing:border-box; }
  body { background:var(--ink); color:var(--text); font-family:var(--sans); }
  /* height:auto keeps the width/height ATTRIBUTES as aspect-ratio hints only
     (they reserve layout space before load); any rule that sets an explicit
     CSS height still wins over this. */
  img { max-width:100%; display:block; height:auto; }

  .grain { position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; pointer-events:none; background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* ------------------------------------------------------------- hero --- */
  .hero { position:relative; min-height:88vh; overflow:hidden; display:flex; align-items:flex-end; }
  .hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%;
    animation:drift 30s ease-in-out infinite alternate; }
  @keyframes drift { from { transform:scale(1.0); } to { transform:scale(1.045) translateX(-.8%); } }
  .hero .scrim { position:absolute; inset:0; background:
    linear-gradient(180deg, rgba(10,9,16,.82) 0%, rgba(10,9,16,0) 26%),
    linear-gradient(75deg, rgba(10,9,16,.93) 0%, rgba(10,9,16,.5) 38%, rgba(10,9,16,0) 64%),
    linear-gradient(0deg, rgba(10,9,16,1) 0%, rgba(10,9,16,.3) 22%, rgba(10,9,16,0) 42%); }
  .vignette { position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 45%, transparent 58%, rgba(10,9,16,.5) 100%); }

  .embers { position:absolute; inset:0; pointer-events:none; }
  .embers i { position:absolute; display:block; border-radius:50%;
    background:radial-gradient(circle, #f2e2a6 0%, rgba(224,182,74,.9) 40%, rgba(201,154,47,.25) 70%, transparent 80%);
    box-shadow:0 0 8px 2px rgba(224,182,74,.55);
    animation:rise linear infinite; }
  @keyframes rise {
    from { transform:translateY(6vh) translateX(0); opacity:0; }
    10%  { opacity:var(--o,.85); }
    70%  { opacity:var(--o,.85); }
    to   { transform:translateY(-58vh) translateX(4vw); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce) { .hero > img, .embers i, .cue svg { animation:none; } }

  nav { position:absolute; top:0; left:0; right:0; z-index:6; display:flex; align-items:center;
    gap:2.4rem; padding:1.5rem clamp(1.25rem,4vw,3.5rem);
    background:linear-gradient(180deg, rgba(10,9,16,.55), transparent); }

  /* stacked wordmark: single metal color, no mark */
  .lockup { display:flex; flex-direction:column; align-items:center; text-decoration:none; margin-right:auto; line-height:1; }
  .lk-top, .lk-main { display:block; text-align:center; font-family:var(--display); font-weight:700; text-transform:uppercase;
    background:linear-gradient(180deg, #fdfcf9 0%, #e4ddd0 42%, #a89f8f 68%, #d6cfc1 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
  .lk-top { font-size:1.42rem; letter-spacing:.34em; text-indent:.34em; }
  .lk-main { font-size:.92rem; letter-spacing:.3em; text-indent:.3em; margin-top:.3rem; }

  nav a.link { font-size:.76rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
    color:#cfc8da; text-decoration:none; }
  nav a.link:hover { color:var(--ember-bright); }
  nav a.cta { font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    text-decoration:none; color:var(--ember-bright); border:1px solid rgba(224,182,74,.55);
    border-radius:999px; padding:.62rem 1.4rem; background:rgba(10,9,16,.35); }

  .copy { position:relative; z-index:3; padding:0 clamp(1.25rem,4vw,3.5rem) 7rem; max-width:50rem; }
  .eyebrow { display:block; font-size:.72rem; font-weight:700; letter-spacing:.34em;
    text-transform:uppercase; color:var(--ember-bright); margin-bottom:1.2rem; }
  .copy .eyebrow::after, .section-head .eyebrow::after { content:''; display:block; width:2.6rem; height:1px;
    margin-top:.75rem; background:linear-gradient(90deg, var(--ember), transparent); }
  h1 { font-family:var(--display); font-size:clamp(2.7rem,5.2vw,4.6rem); font-weight:600;
    line-height:1.04; letter-spacing:-.015em; color:var(--strong); margin-bottom:1.3rem;
    text-shadow:0 2px 34px rgba(0,0,0,.65); }
  .sub { font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.6; color:#e6e0d6; max-width:34rem;
    margin-bottom:2.1rem; text-shadow:0 1px 12px rgba(0,0,0,.7); }
  .row { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
  .btn { display:inline-block; font-size:.9rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    text-decoration:none; color:var(--ember-ink); padding:1.05rem 2.4rem; border-radius:8px;
    background:linear-gradient(180deg,#e0b64a 0%,#c99a2f 55%,#96701f 100%);
    box-shadow:0 0 30px rgba(201,154,47,.4), inset 0 1px 0 rgba(255,220,190,.55); }
  .btn.ghost { color:var(--text); background:rgba(10,9,16,.4); border:1px solid rgba(236,231,222,.28); box-shadow:none; }

  .cue { position:absolute; left:50%; bottom:1.5rem; transform:translateX(-50%); z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:.45rem; color:var(--muted); }
  .cue span { font-size:.62rem; font-weight:700; letter-spacing:.4em; text-transform:uppercase; }
  .cue svg { width:14px; height:14px; stroke:var(--ember-bright); fill:none; animation:bob 2.2s ease-in-out infinite; }
  @keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }

  /* ------------------------------------------------------------ proof --- */
  .proof { position:relative; overflow:hidden; padding:6rem 0 6.5rem; }
  .proof .bg { position:absolute; inset:0; }
  .proof .bg img { width:100%; height:100%; object-fit:cover; object-position:center 30%; opacity:.17; filter:saturate(.8);
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); }
  .proof .glow { position:absolute; inset:0; background:
    radial-gradient(70rem 34rem at 82% 8%, rgba(201,154,47,.10), transparent 62%),
    linear-gradient(0deg, var(--ink) 0%, transparent 22%),
    linear-gradient(180deg, var(--ink) 0%, transparent 20%); }
  .container { position:relative; z-index:2; max-width:76rem; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
  .section-head { max-width:46rem; margin-bottom:3.2rem; }
  .section-head h1, .section-head h2 { font-family:var(--display); font-size:clamp(1.9rem,3.2vw,2.8rem); font-weight:600;
    letter-spacing:-.01em; line-height:1.15; color:var(--strong); margin-bottom:.7rem; text-shadow:none; }
  .section-head .lede { color:var(--muted); font-size:1.03rem; line-height:1.6; max-width:38rem; }

  .transcript { position:relative; max-width:56rem; border-radius:16px;
    background:linear-gradient(180deg, rgba(28,25,38,.92), rgba(20,18,27,.96));
    border:1px solid var(--line-strong); box-shadow:0 34px 80px rgba(0,0,0,.55);
    padding:2.6rem 2.8rem 2.2rem; backdrop-filter:blur(3px); }
  .transcript::before { content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(224,182,74,.7), transparent); }
  .t-tag { position:absolute; top:-.72rem; left:2.6rem; font-size:.62rem; font-weight:800;
    letter-spacing:.22em; text-transform:uppercase; color:var(--ember-bright);
    background:var(--ink); border:1px solid rgba(224,182,74,.45); border-radius:999px; padding:.35rem .85rem; }
  .t-label { font-size:.64rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
    color:var(--faint); display:block; margin-bottom:.6rem; }
  .t-player { font-family:var(--mono); font-size:.95rem; color:var(--ember-bright);
    background:rgba(201,154,47,.07); border:1px solid rgba(201,154,47,.25); border-radius:8px;
    padding:.9rem 1.15rem; margin-bottom:1.9rem; }
  .t-player b { color:#f2e2a6; font-weight:600; }
  .t-narr { font-family:var(--display); font-size:1.16rem; line-height:1.8; color:var(--text); margin-bottom:1.7rem; }
  .t-rows { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.7rem; }
  .t-row { font-family:var(--mono); font-size:.76rem; color:var(--text);
    background:rgba(38,34,48,.8); border:1px solid var(--line-strong); border-radius:7px; padding:.45rem .8rem; }
  .t-row em { font-style:normal; color:var(--good); }
  .t-row b { font-weight:600; color:var(--ember-bright); }
  .t-cap { font-size:.92rem; line-height:1.6; color:var(--muted); border-top:1px solid var(--line); padding-top:1.25rem; }

  .trophy { position:absolute; top:-2.2rem; right:.6rem; width:250px; height:250px; z-index:3;
    transform:rotate(5deg); pointer-events:none; }
  .trophy img { width:100%; height:100%; object-fit:cover; border-radius:50%;
    -webkit-mask-image:radial-gradient(circle, #000 42%, transparent 66%);
    mask-image:radial-gradient(circle, #000 42%, transparent 66%); }
  .t-head-room { margin-right:12rem; }

  /* ------------------------------------------------------------- trio --- */
  .trio { position:relative; overflow:hidden; padding:5.5rem 0 6rem;
    background:radial-gradient(70rem 34rem at 12% 20%, rgba(201,154,47,.08), transparent 60%), var(--ink); }
  .trio .container { position:relative; z-index:2; }
  .m-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:6.5rem; }
  .m-card { position:relative; border:1px solid var(--line-strong); border-radius:16px;
    background:linear-gradient(180deg, rgba(28,25,38,.9), rgba(20,18,27,.95));
    box-shadow:0 26px 60px rgba(0,0,0,.45);
    padding:6.4rem 1.9rem 2rem; text-align:center; }
  .m-card::before { content:''; position:absolute; top:0; left:14%; right:14%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(224,182,74,.55), transparent); }
  .m-obj { position:absolute; top:-4.8rem; left:50%; transform:translateX(-50%);
    width:180px; height:180px; pointer-events:none; }
  .m-obj img { width:100%; height:100%; object-fit:cover; border-radius:50%;
    -webkit-mask-image:radial-gradient(circle, #000 44%, transparent 68%);
    mask-image:radial-gradient(circle, #000 44%, transparent 68%); }
  .m-card h3 { font-family:var(--display); font-size:1.38rem; font-weight:600; color:var(--strong);
    margin-bottom:.65rem; }
  .m-card p { font-size:.94rem; line-height:1.65; color:var(--muted); margin:0; }

  /* ---------------------------------------------------------- catalog --- */
  .catalog { position:relative; overflow:hidden; padding:6rem 0 6.5rem;
    background:radial-gradient(80rem 40rem at 90% 0%, rgba(201,154,47,.07), transparent 60%), var(--ink); }
  .catalog .container { position:relative; z-index:2; }
  .bin-label { display:flex; align-items:center; gap:.8rem; font-size:.68rem; font-weight:800;
    letter-spacing:.24em; text-transform:uppercase; color:var(--ember-bright); margin-bottom:1.3rem; }
  .bin-label::before { content:''; width:1.8rem; height:1px; background:linear-gradient(90deg, var(--ember), transparent); }
  .bin-label span { color:var(--faint); font-weight:600; letter-spacing:.16em; }
  .cat-row { margin-bottom:3.6rem; }
  .cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; }
  .cat-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; align-items:start; }
  .cat-card { position:relative; display:block; text-decoration:none; border-radius:16px; overflow:hidden;
    border:1px solid var(--line-strong); background:linear-gradient(180deg, rgba(28,25,38,.9), rgba(20,18,27,.95));
    box-shadow:0 26px 60px rgba(0,0,0,.4); transition:transform .25s ease, box-shadow .25s ease; }
  .cat-card:hover { transform:translateY(-4px); box-shadow:0 30px 66px rgba(0,0,0,.55), 0 0 0 1px rgba(224,182,74,.35); }
  .cat-card .art { position:relative; aspect-ratio:16/9; overflow:hidden; }
  .cat-card .art img { width:100%; height:100%; object-fit:cover; }
  .cat-card .art::after { content:''; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(16,14,22,.96) 0%, rgba(16,14,22,.25) 38%, transparent 60%); }
  .cat-card .flag { position:absolute; top:.9rem; left:.9rem; z-index:2; font-size:.62rem; font-weight:800;
    letter-spacing:.16em; text-transform:uppercase; color:var(--ember-ink);
    background:linear-gradient(180deg,#e0b64a,#c99a2f); border-radius:5px; padding:.34rem .62rem;
    box-shadow:0 0 14px rgba(201,154,47,.5); }
  .cat-card .meta { position:relative; margin-top:-2.6rem; z-index:2; padding:0 1.5rem 1.4rem; }
  .cat-card h3 { font-family:var(--display); font-size:1.42rem; font-weight:600; color:var(--strong); margin-bottom:.4rem; }
  .cat-card .hook { font-size:.9rem; line-height:1.55; color:var(--muted); margin:0 0 1rem; }
  .chips { display:flex; flex-wrap:wrap; gap:.45rem; }
  .chip { font-size:.68rem; font-weight:600; letter-spacing:.04em; color:var(--text);
    background:rgba(38,34,48,.85); border:1px solid var(--line-strong); border-radius:999px; padding:.3rem .75rem; }
  .chip.gold { color:var(--ember-bright); border-color:rgba(224,182,74,.4); }
  .cat-more { display:inline-block; margin-top:.4rem; font-size:.82rem; letter-spacing:.1em;
    text-transform:uppercase; font-weight:700; color:var(--ember-bright); text-decoration:none; }

  .forge { position:relative; display:grid; grid-template-columns:250px 1fr; gap:2.6rem; align-items:center;
    border:1px solid rgba(224,182,74,.35); border-radius:18px; padding:2.4rem 3rem;
    background:linear-gradient(105deg, rgba(201,154,47,.10), rgba(20,18,27,.55) 55%),
               linear-gradient(180deg, rgba(28,25,38,.9), rgba(20,18,27,.95)); }
  .forge::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(224,182,74,.6), transparent); }
  .forge-obj { width:250px; height:250px; margin:-3.5rem 0 -2.5rem; }
  .forge-obj img { width:100%; height:100%; object-fit:cover; border-radius:50%;
    -webkit-mask-image:radial-gradient(circle, #000 46%, transparent 70%);
    mask-image:radial-gradient(circle, #000 46%, transparent 70%); }
  .forge h3 { font-family:var(--display); font-size:1.7rem; font-weight:600; color:var(--strong); margin-bottom:.6rem; }
  .forge p { font-size:.98rem; line-height:1.65; color:var(--muted); margin:0 0 1.4rem; max-width:36rem; }
  .forge .row { gap:1rem; }

  /* ----------------------------------------------------------- devlog --- */
  .devlog { position:relative; overflow:hidden; padding:5.5rem 0 6rem;
    background:radial-gradient(70rem 34rem at 8% 100%, rgba(201,154,47,.07), transparent 60%), var(--ink); }
  .d-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
  .d-card { display:flex; flex-direction:column; border:1px solid var(--line-strong); border-radius:14px;
    background:linear-gradient(180deg, rgba(28,25,38,.9), rgba(20,18,27,.95)); overflow:hidden;
    text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; }
  .d-art { position:relative; aspect-ratio:16/7; overflow:hidden; }
  .d-art img { width:100%; height:100%; object-fit:cover; }
  .d-art::after { content:''; position:absolute; inset:0;
    background:linear-gradient(0deg, rgba(20,18,27,.95) 0%, rgba(20,18,27,.15) 45%, transparent 70%); }
  .d-body { display:flex; flex-direction:column; gap:.8rem; padding:1.3rem 1.8rem 1.6rem; margin-top:-1.4rem;
    position:relative; z-index:2; }
  .d-card:hover { transform:translateY(-3px); box-shadow:0 20px 46px rgba(0,0,0,.5), 0 0 0 1px rgba(224,182,74,.3); }
  .d-tag { align-self:flex-start; font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ember-bright); background:rgba(201,154,47,.1); border:1px solid rgba(224,182,74,.35);
    border-radius:5px; padding:.3rem .6rem; }
  .d-card h3 { font-family:var(--display); font-size:1.22rem; font-weight:600; color:var(--strong); line-height:1.3; }
  .d-card p { font-size:.9rem; line-height:1.6; color:var(--muted); margin:0; }
  .d-video { position:relative; margin-top:1.6rem; border:1px solid var(--line-strong); border-radius:14px;
    overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:200px; }
  .d-video img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; filter:saturate(.7); }
  .d-video .play { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:.8rem; }
  .d-video .play-btn { width:64px; height:64px; border-radius:50%; border:1px solid rgba(224,182,74,.6);
    background:rgba(10,9,16,.55); display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 30px rgba(201,154,47,.3); }
  .d-video .play-btn::after { content:''; display:block; margin-left:5px;
    border-left:16px solid var(--ember-bright); border-top:10px solid transparent; border-bottom:10px solid transparent; }
  .d-video span { font-size:.68rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }

  /* -------------------------------------------------------------- faq --- */
  .faq { position:relative; overflow:hidden; padding:5.5rem 0 6rem;
    background:radial-gradient(60rem 30rem at 12% 30%, rgba(201,154,47,.08), transparent 62%), var(--ink); }
  .faq .container { max-width:72rem; display:grid; grid-template-columns:1fr 1.7fr; gap:3.5rem;
    align-items:start; }
  .faq .section-head { margin-bottom:0; }
  .faq-obj { width:260px; height:260px; margin:.6rem 0 0 .4rem; pointer-events:none;
    transform:rotate(-4deg); }
  .faq-obj img { width:100%; height:100%; object-fit:cover; border-radius:50%;
    -webkit-mask-image:radial-gradient(circle, #000 44%, transparent 68%);
    mask-image:radial-gradient(circle, #000 44%, transparent 68%); }
  .faq-item { border:1px solid var(--line); border-radius:12px; margin-bottom:.8rem;
    background:linear-gradient(180deg, rgba(28,25,38,.65), rgba(20,18,27,.8)); }
  .faq-item summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
    gap:1rem; padding:1.15rem 1.4rem; font-size:1.02rem; font-weight:600; color:var(--text); }
  .faq-item summary::-webkit-details-marker { display:none; }
  .faq-item summary::after { content:'+'; font-family:var(--display); font-size:1.4rem; color:var(--ember-bright);
    line-height:1; transition:transform .2s ease; }
  .faq-item[open] summary::after { transform:rotate(45deg); }
  .faq-item[open] { border-color:rgba(224,182,74,.35); }
  .faq-item p { font-size:.94rem; line-height:1.65; color:var(--muted); margin:0; padding:0 1.4rem 1.3rem; max-width:44rem; }
  .faq-item a { color:var(--ember-bright); }

  /* ---------------------------------------------------- capture/footer --- */
  .capture { position:relative; overflow:hidden; text-align:center; padding:6rem 0 6rem;
    background:radial-gradient(70rem 32rem at 50% 130%, rgba(201,154,47,.13), transparent 65%), var(--ink); }
  .capture .section-head { max-width:40rem; margin:0 auto 2.4rem; }
  .capture .section-head .eyebrow::after { margin-left:auto; margin-right:auto; }
  .cap-form { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
  .cap-form input { font-family:var(--sans); font-size:.95rem; color:var(--strong);
    background:rgba(28,25,38,.9); border:1px solid var(--line-strong); border-radius:8px;
    padding:1.05rem 1.3rem; width:min(24rem,80vw); }
  .cap-form input:focus { outline:none; border-color:rgba(224,182,74,.55); }
  .cap-note { font-size:.8rem; letter-spacing:.06em; color:var(--faint); margin-top:1.1rem; }

  footer { border-top:1px solid var(--line); padding:3.5rem 0 2.5rem;
    background:linear-gradient(180deg, var(--ink), #070609); }
  .f-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2.6rem; }
  .f-brand .lk-top { font-size:1.05rem; }
  .f-brand .lk-main { font-size:.68rem; }
  .f-brand { display:inline-flex; flex-direction:column; align-items:flex-start; text-decoration:none; margin-bottom:.9rem; }
  .f-tag { font-size:.84rem; line-height:1.6; color:var(--muted); max-width:20rem; }
  footer h3 { font-size:.68rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
    color:var(--faint); margin-bottom:1rem; }
  footer ul { list-style:none; padding:0; margin:0; }
  footer li { margin-bottom:.55rem; }
  footer li a { font-size:.88rem; color:var(--muted); text-decoration:none; }
  footer li a:hover { color:var(--ember-bright); }
  .f-legal { border-top:1px solid var(--line); padding-top:1.6rem; font-size:.72rem; line-height:1.7; color:var(--faint); }

  @media (max-width:900px) {
    .d-grid { grid-template-columns:1fr; }
    .f-grid { grid-template-columns:1fr 1fr; }
    .m-grid { grid-template-columns:1fr; gap:5.6rem; margin-top:5.5rem; max-width:26rem; margin-left:auto; margin-right:auto; }
    .m-obj { width:150px; height:150px; top:-4rem; }
    .m-card { padding-top:5.4rem; }
    .cat-grid, .cat-cols { grid-template-columns:1fr; }
    .forge { grid-template-columns:1fr; text-align:center; padding:2rem 1.4rem; }
    .forge-obj { margin:-4.5rem auto -1.5rem; }
    .forge p { margin-left:auto; margin-right:auto; }
    .forge .row { justify-content:center; }
    .hero { min-height:92vh; }
    .hero > img { object-position:64% 30%; }
    /* The links used to be display:none here with nothing put in their place, so a
       phone had no navigation above the fold at all: the only way to another page
       was to scroll past the whole document to the footer. They now wrap onto a
       second line under the lockup. No markup change, so the generated module pages
       inherit it for free. */
    nav { gap:.6rem 1rem; padding:1rem 1.25rem .85rem; flex-wrap:wrap; }
    nav .lockup { flex:0 0 auto; }
    nav a.cta { order:2; margin-left:auto; }
    nav a.link { order:3; font-size:.62rem; letter-spacing:.13em; }
    nav a.link:first-of-type { margin-left:0; }
    nav a.cta { font-size:.62rem; letter-spacing:.12em; padding:.5rem .95rem; white-space:nowrap; }
    .lk-top { font-size:1.14rem; }
    .lk-main { font-size:.69rem; }
    .copy { padding-bottom:6rem; }
    .proof { padding:5.5rem 0 6rem; }
    .transcript { padding:2rem 1.4rem 1.6rem; margin-top:3.5rem; }
    .t-tag { left:1.4rem; }
    .trophy { width:130px; height:130px; top:-3.4rem; right:-.6rem; }
    .t-head-room { margin-right:0; }
  }

/* ------------------------------------------------------- page chrome --- */
.page-hero { position:relative; min-height:52vh; overflow:hidden; display:flex; align-items:flex-end; }
.page-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
/* The bottom stop carries most of the work: the picture has to dissolve into the
   page background rather than stop at a horizontal line. With the old 24%/46%
   ramp the lit right-hand side of every hero was still bright a few pixels above
   the cut, which is what made the page read as an image and then, separately, a
   document. */
.page-hero .scrim { position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,9,16,.85) 0%, rgba(10,9,16,0) 30%),
  linear-gradient(75deg, rgba(10,9,16,.93) 0%, rgba(10,9,16,.5) 42%, rgba(10,9,16,0) 68%),
  linear-gradient(0deg, rgba(10,9,16,1) 0%, rgba(10,9,16,.92) 12%, rgba(10,9,16,.55) 30%,
    rgba(10,9,16,0) 62%); }
/* The module pages read as one column, not as a hero and then a document.
   The homepage hero is flush-left against the viewport; a module page's body
   sits in the centred .container, so the two used to start at different left
   edges and wrap to different measures, which read as two unrelated sections
   stacked on top of each other. This puts the hero copy on exactly the
   .container grid and gives the standfirst the same measure as .prose, so the
   eyebrow, the title, the standfirst and the body text all share one left rule
   from the top of the page to the bottom. Scoped to .page-hero: the homepage
   hero is a different composition and keeps its flush-left framing. */
.page-hero .copy { width:100%; max-width:76rem; margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3rem) 3.2rem; }
.page-hero .copy .sub { max-width:44rem; }
.page-hero h1 { font-size:clamp(2.3rem,4.4vw,3.7rem); }
nav.static { position:static; background:linear-gradient(180deg, rgba(10,9,16,.9), rgba(10,9,16,0)); }
.crumb { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  text-decoration:none; display:inline-block; margin-bottom:1.4rem; }
.crumb:hover { color:var(--ember-bright); }

/* -------------------------------------------------------- engine page --- */
.step-grid { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:1.2rem; align-items:stretch; }
.step-card { border:1px solid var(--line-strong); border-radius:16px; padding:2rem 1.9rem;
  background:linear-gradient(180deg, rgba(28,25,38,.9), rgba(20,18,27,.95)); position:relative; }
.step-card::before { content:''; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(224,182,74,.55), transparent); }
.step-num { font-family:var(--display); font-size:2.6rem; font-weight:700; line-height:1;
  background:linear-gradient(180deg,#e0b64a,#96701f); -webkit-background-clip:text; background-clip:text;
  color:transparent; display:block; margin-bottom:.9rem; }
.step-kicker { font-size:.64rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); display:block; margin-bottom:.4rem; }
.step-card h3 { font-family:var(--display); font-size:1.5rem; color:var(--strong); margin-bottom:.6rem; }
.step-card p { font-size:.92rem; line-height:1.65; color:var(--muted); margin:0; }
.step-arrow { align-self:center; font-size:1.6rem; color:var(--ember-bright); }
.forbid { max-width:52rem; }
.forbid li { list-style:none; display:flex; gap:1rem; padding:1.05rem 0; border-bottom:1px solid var(--line);
  font-size:.97rem; line-height:1.6; color:var(--text); }
.forbid li::before { content:'\2715'; color:var(--ember-bright); font-weight:700; flex:0 0 auto; margin-top:.1rem; }
.forbid li b { color:var(--strong); }
.scope-table { width:100%; border-collapse:collapse; max-width:56rem; }
.scope-table th { font-size:.66rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); text-align:left; padding:.7rem 1rem; border-bottom:1px solid var(--line-strong); }
.scope-table td { font-size:.92rem; color:var(--text); padding:.85rem 1rem; border-bottom:1px solid var(--line); }
.scope-table td:first-child { font-family:var(--display); font-size:1.02rem; color:var(--strong); }
.scope-table td:last-child { color:var(--ember-bright); font-size:.8rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; }
.class-chips { display:flex; flex-wrap:wrap; gap:.5rem; max-width:44rem; }

/* -------------------------------------------------------- module page --- */
.pills { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0 1.6rem; }
.prose { max-width:44rem; }
.prose p { font-size:1.02rem; line-height:1.75; color:var(--text); margin-bottom:1.2rem; }
.prose .note { font-size:.86rem; color:var(--faint); }
.h3line { font-family:var(--display); font-size:1.6rem; font-weight:600; color:var(--strong); margin:2.6rem 0 .9rem; }
.rail { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; max-width:44rem; }
.face { display:block; text-align:center; text-decoration:none; }
.face, .face .ring { display:block; } .face .ring { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line-strong); }
.face .ring::after { content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,9,16,.5) 0%, rgba(10,9,16,0) 40%); }
.face img { aspect-ratio:1; object-fit:cover; width:100%; }
.face .name { display:block; font-family:var(--display); font-size:.95rem; color:var(--strong); margin-top:.55rem; }
.cross-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }

/* ------------------------------------------------------ honesty/survey --- */
.honest-cols { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; max-width:60rem; }
.honest-cols h3 { font-size:.7rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ember-bright); margin-bottom:1.1rem; }
.honest-cols ul { list-style:none; padding:0; margin:0; }
.honest-cols li { display:flex; gap:.9rem; font-size:.94rem; line-height:1.6; color:var(--muted);
  padding:.7rem 0; border-bottom:1px solid var(--line); }
.honest-cols .live li::before { content:'\2713'; color:var(--good); font-weight:700; flex:0 0 auto; }
.honest-cols .later li::before { content:'\2014'; color:var(--faint); flex:0 0 auto; }
.honest-cols li b { color:var(--text); }
.survey { max-width:34rem; margin:2.5rem auto 0; text-align:left; }
.survey label { display:block; font-size:.8rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin:1.4rem 0 .5rem; }
.survey input, .survey textarea, .survey select { width:100%; font-family:var(--sans); font-size:.95rem;
  color:var(--strong); background:rgba(28,25,38,.9); border:1px solid var(--line-strong);
  border-radius:8px; padding:.9rem 1.1rem; }
.survey textarea { min-height:6rem; resize:vertical; }

@media (max-width:900px) {
  .step-grid { grid-template-columns:1fr; }
  .step-arrow { transform:rotate(90deg); justify-self:center; }
  .rail { grid-template-columns:repeat(2,1fr); }
  .cross-grid { grid-template-columns:1fr; }
  .honest-cols { grid-template-columns:1fr; }
  .scope-table td:last-child { font-size:.7rem; }
}

/* ------------------------------------------------------- alpha band --- */
.alpha { position:relative; overflow:hidden; padding:5rem 0 5.5rem;
  background:radial-gradient(70rem 34rem at 88% 50%, rgba(201,154,47,.08), transparent 60%), var(--ink); }
.alpha .container { position:relative; z-index:2; }
.alpha-band { position:relative; display:grid; grid-template-columns:1fr 270px; gap:2.6rem; align-items:center;
  border:1px solid rgba(224,182,74,.35); border-radius:18px; padding:3rem 3.2rem;
  background:linear-gradient(255deg, rgba(201,154,47,.10), rgba(20,18,27,.55) 55%),
             linear-gradient(180deg, rgba(28,25,38,.9), rgba(20,18,27,.95));
  box-shadow:0 30px 70px rgba(0,0,0,.5); }
.alpha-band::before { content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(224,182,74,.6), transparent); }
.alpha-band h2 { font-family:var(--display); font-size:clamp(1.7rem,2.8vw,2.4rem); font-weight:600;
  letter-spacing:-.01em; line-height:1.15; color:var(--strong); margin:0 0 .9rem; }
.alpha-band p { font-size:.98rem; line-height:1.7; color:var(--muted); margin:0; max-width:38rem; }
.alpha-chips { margin:1.4rem 0 1.7rem; }
.alpha-obj { width:270px; height:270px; margin:-3.4rem 0 -2.8rem; justify-self:center; }
.alpha-obj img { width:100%; height:100%; object-fit:cover; border-radius:50%;
  -webkit-mask-image:radial-gradient(circle, #000 46%, transparent 70%);
  mask-image:radial-gradient(circle, #000 46%, transparent 70%); }

/* ------------------------------------------------------- about page --- */
.about-head { text-align:center; max-width:44rem; margin:0 auto 3rem; }
.about-head .eyebrow::after { margin-left:auto; margin-right:auto; }
.about-head h1 { font-size:clamp(2.2rem,3.6vw,3.1rem); text-shadow:none; margin-bottom:.9rem; }
.about-head p { color:var(--muted); font-size:1.08rem; line-height:1.6; }
.about-obj { position:absolute; top:21rem; right:2%; width:280px; height:280px; pointer-events:none;
  transform:rotate(3deg); }
@media (max-width:1300px) { .about-obj { display:none; } }
.about-obj img { width:100%; height:100%; object-fit:cover; border-radius:50%;
  -webkit-mask-image:radial-gradient(circle, #000 44%, transparent 68%);
  mask-image:radial-gradient(circle, #000 44%, transparent 68%); }
.sig { font-family:var(--display); font-size:1.12rem; color:var(--strong); margin-top:2.2rem; }
.pull { border-left:2px solid rgba(224,182,74,.55); padding:.4rem 0 .4rem 1.6rem; margin:2.2rem 0;
  font-family:var(--display); font-size:1.3rem; line-height:1.55; color:var(--strong); }

/* ------------------------------------------------------ contact form --- */
.hp { position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden; }
.survey .btn, .cap-form .btn { border:0; cursor:pointer; font-family:var(--sans); }
.form-note { font-size:.8rem; letter-spacing:.04em; color:var(--faint); margin-top:1.2rem; }
.form-ok { display:none; font-size:.95rem; color:var(--good); margin-top:1.2rem; }

/* ------------------------------------------------------ floating nav --- */
nav.stuck { position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(12,10,17,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); padding-top:.85rem; padding-bottom:.85rem;
  animation:navdrop .32s ease; }
@keyframes navdrop { from { transform:translateY(-100%); } to { transform:translateY(0); } }
nav.stuck .lk-top { font-size:1.05rem; }
nav.stuck .lk-main { font-size:.68rem; }
body.navstuck:has(nav.static) { padding-top:82px; }

@media (max-width:900px) {
  .faq-obj, .about-obj { display:none; }
  .faq .container { grid-template-columns:1fr; gap:2.2rem; }
  .alpha-band { grid-template-columns:1fr; text-align:center; padding:2.2rem 1.5rem; }
  .alpha-band p { margin-left:auto; margin-right:auto; }
  .alpha-band .chips, .alpha-band .row { justify-content:center; }
  .alpha-obj { margin:-1rem auto -4.5rem; order:-1; }
  body.navstuck:has(nav.static) { padding-top:70px; }
}

/* ------------------------------------------------------ centered hero --- */
.center-copy { margin:0 auto; text-align:center; }
.center-copy .eyebrow::after { margin-left:auto; margin-right:auto; }
.center-copy .sub { margin-left:auto; margin-right:auto; }
.center-copy .row { justify-content:center; }

.sig-row { display:flex; align-items:center; gap:1.5rem; margin-top:2.6rem; }

/* -------------------------------------------------------- legal pages --- */
.draft-band { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ember-bright); background:rgba(201,154,47,.1);
  border:1px solid rgba(224,182,74,.4); border-radius:6px; padding:.55rem .9rem; margin-bottom:2.2rem; }
.legal-prose { max-width:46rem; }
.legal-prose p { font-size:.95rem; line-height:1.7; color:var(--muted); margin-bottom:1rem; }
.legal-prose p b, .legal-prose li b { color:var(--text); }
.legal-prose .h3line { font-size:1.3rem; margin:2.4rem 0 .8rem; }
.legal-list { list-style:none; padding:0; margin:0 0 1rem; }
.legal-list li { font-size:.95rem; line-height:1.7; color:var(--muted); padding:.5rem 0 .5rem 1.4rem;
  border-bottom:1px solid var(--line); position:relative; }
.legal-list li::before { content:'•'; color:var(--ember); position:absolute; left:.2rem; }

/* ------------------------------------------------- what's built: the top backdrop --- */
/* The hero painting is the page's BACKDROP, not a band that stops where the words
   start (owner, 2026-08-01). The art is pinned to the top of this wrapper and the
   veil darkens down it, so the troll is still behind the heading. The heading sits
   HIGH, right under the nav, rather than pinned to the bottom of a tall hero. */
/* The wrapper is only as tall as the nav and the heading. A min-height here was
   padding 218px of empty art under the text before the first section could start
   which is the gap the owner kept flagging. Instead the BACKDROP overflows past the
   wrapper and the first band paints over it, so the art runs on behind the page
   with no dead band anywhere. */
.feat-top { position:relative; overflow:visible; background:var(--ink); min-height:0; }
.feat-top > .backdrop { position:absolute; top:0; left:0; right:0; height:660px;
  z-index:0; pointer-events:none; }
.feat-top > .backdrop img { width:100%; height:100%; object-fit:cover; object-position:center 24%;
  display:block; }
.feat-top > .backdrop::after { content:''; position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(10,9,16,.66) 0%, rgba(10,9,16,.32) 12%, rgba(10,9,16,.36) 34%,
                  rgba(10,9,16,.66) 62%, rgba(10,9,16,.94) 86%, rgba(10,9,16,1) 100%),
  linear-gradient(75deg, rgba(10,9,16,.6) 0%, rgba(10,9,16,.16) 48%, rgba(10,9,16,0) 74%); }
.feat-top > * { position:relative; z-index:2; }
/* .hero clips to its own height; with the hero collapsed to just a nav bar the
   absolutely-positioned nav was being clipped away entirely. Let it flow. */
.feat-hero { min-height:0; display:block; overflow:visible; }
.feat-hero nav { position:static; background:none; }
.feat-intro { padding:1.4rem 0 2.4rem; }
.feat-intro .section-head { margin-bottom:0; max-width:42rem; }
.feat-intro h1 { text-shadow:0 2px 30px rgba(0,0,0,.8); }
.feat-intro .lede { color:#d9d3ca; text-shadow:0 1px 14px rgba(0,0,0,.8); }

/* --------------------------------------------------- what's built: art bands --- */
.band { position:relative; z-index:1; overflow:hidden; padding:2.6rem 0 3rem; }
.band.alt { background:radial-gradient(56rem 26rem at 12% 100%, rgba(201,154,47,.06), transparent 62%), var(--ink); }
.band .container { position:relative; z-index:2; }
.band .section-head { margin-bottom:1.7rem; }
.band .section-head h2 { font-size:clamp(1.45rem,2.1vw,1.85rem); }
.band .section-head .lede { font-size:.92rem; }

.plate { margin:0; border:1px solid var(--line-strong); border-radius:12px; overflow:hidden;
  background:var(--surface); box-shadow:0 18px 42px rgba(0,0,0,.5); }
.plate img { width:100%; height:auto; display:block; }
.plate figcaption { padding:.7rem 1rem; font-size:.8rem; line-height:1.55; color:var(--muted);
  border-top:1px solid var(--line); }
.plate figcaption strong { color:var(--text); font-weight:650; }
.plate figcaption a { color:var(--ember-bright); }

/* screenshots of the app, and the lead dungeon plate: sized so a section reads at a
   glance rather than filling the viewport (owner: "you left everything gigantic") */
.plate.shot { max-width:54rem; margin:0 auto; }
/* the turn is the page's proof; it needs the room for the roll readout to be read */
.plate.shot.wide { max-width:68rem; }
.plate.lead { max-width:42rem; margin:0 auto; }

/* where a floor plan came from, spelled out, not jargon */
.origin { display:inline-block; font-size:.58rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; border-radius:4px; padding:.2rem .45rem; margin-right:.5rem;
  vertical-align:.08em; white-space:nowrap; }
.origin.authored  { color:var(--ember-bright); background:rgba(201,154,47,.12);
  border:1px solid rgba(224,182,74,.4); }
.origin.generated { color:var(--faint); background:rgba(120,112,135,.1);
  border:1px solid var(--line-strong); }

.map-lead { display:grid; grid-template-columns:.92fr 1fr; gap:2.2rem; align-items:center; }
.map-lead .words h3 { font-family:var(--display); font-size:1.2rem; font-weight:600;
  color:var(--strong); margin-bottom:.5rem; }
.map-lead .words p { font-size:.9rem; line-height:1.65; color:var(--muted); margin-bottom:.8rem; }

.dungeons { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin-top:1.1rem; }

.rooms { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.2rem; }
/* the three room plates are different shapes; a shared box with contain keeps the
   captions level without cropping anything out of the art */
.rooms .plate img { aspect-ratio:4/3; object-fit:contain; background:var(--ink); }

/* the three side panels, shown at their real proportions (tall and narrow) */
.panels { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.panels .plate img { aspect-ratio:66/104; object-fit:cover; object-position:top center; }

/* what's not done yet */
.wip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem 1.8rem; }
.wip { padding:.9rem 0 0; border-top:1px solid var(--line-strong); }
.wip h3 { font-size:.92rem; font-weight:650; color:var(--strong); margin:0 0 .3rem; }
.wip p { font-size:.845rem; line-height:1.58; color:var(--muted); margin:0; }

@media (max-width: 900px) {
  .feat-top > .backdrop { height:520px; }
  .feat-intro { padding:1.2rem 0 1.6rem; }
  .map-lead { grid-template-columns:1fr; gap:1.4rem; }
  .dungeons, .rooms, .panels, .wip-grid { grid-template-columns:1fr; }
  .panels .plate img { aspect-ratio:auto; }
}

/* ------------------------------------------------------- the bestiary --- */
/* The page these style is vetoed and held at marketing/drafts/bestiary.html.
   Kept here on purpose: un-vetoing is then a flag flip and four links, not a
   redesign. Unused rules cost ~1KB and nothing else. */
/* The in-game codex pattern on the web: A to Z, a plate, a name, one line.
   Cards are square because every plate is 384x384, so nothing crops. */
.best-jump { justify-content:center; gap:.35rem; flex-wrap:wrap; margin-bottom:.5rem; }
.best-jump .chip { text-decoration:none; min-width:2rem; text-align:center; }
.best-jump .chip:hover { color:var(--ember-bright); border-color:rgba(224,182,74,.4); }

.best-letter { font-family:var(--display); font-size:2.1rem; font-weight:400; color:var(--ember);
  margin:2.8rem 0 1rem; padding-bottom:.4rem; border-bottom:1px solid var(--line-strong);
  scroll-margin-top:5rem; }
.best-letter:first-of-type { margin-top:.6rem; }

.best-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem 1.2rem; }
.best-card { margin:0; scroll-margin-top:5rem; }
.best-card img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px;
  border:1px solid var(--line-strong); background:var(--surface); }
.best-card figcaption { padding:.6rem .1rem 0; font-size:.82rem; line-height:1.55; color:var(--muted); }
.best-card figcaption strong { display:block; font-family:var(--display); font-size:1.02rem;
  font-weight:600; color:var(--strong); }
.best-meta { display:block; font-size:.68rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin:.15rem 0 .4rem; }

@media (max-width: 1100px) { .best-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 760px)  { .best-grid { grid-template-columns:repeat(2,1fr); gap:1.1rem .9rem; }
  .best-letter { font-size:1.7rem; margin-top:2rem; } }