@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-800.woff2") format("woff2"); font-style: normal; font-weight: 800; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("fonts/libre-franklin-400-800.woff2") format("woff2"); font-style: normal; font-weight: 400 800; font-display: swap; }

html { scroll-behavior: smooth; }
html,body{margin:0}

    /* ================================================================
       KNOBS. Every one of these is overwritten from the tweak chips on
       the page root; the values here are only what the artboard falls
       back to, and they are the SnapATK defaults.
       ================================================================ */
    :root {
      --k-display: 'Anton', Impact, sans-serif;
      --k-display-w: 700;
      --k-display-wd: 100%;
      --k-display-tr: -0.025em;
      --k-display-lh: 0.92;
      --k-display-scale: 1;
      --k-display-case: uppercase;
      --k-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
      --k-body-scale: 1;
      --k-body-w: 400;
      --k-body-lh: 1;
      --k-label-tr: 0.08em;
      --k-label-w: 700;
      --k-accent: #fbbf24;
      --k-accent-soft: #fcd34d;
      --k-ink: #f4f6f5;
      --k-ink-2: #c3ccc8;
      --k-ink-3: #a3ada9;
      --k-page: #252d2c;
      --k-deep: #0a0e0d;
      --k-well: #171e1c;
      --k-panel: #222b29;
      --k-plate: #2d3634;
      --k-density: 1;
      --k-radius: 12px;
    }


    /* ================================================================
       SnapATK landing page - the app's own design system.
       Tokens lifted from src/styles/globals.css, src/config/rarity.ts,
       src/components/cards/frameGeometry.ts and frameMaterial.ts.
       ================================================================ */
    :root {
      --page:   var(--k-page);
      --panel:  var(--k-panel);
      --plate:  var(--k-plate);
      --plate2: #283130;
      --well:   var(--k-well);
      --deep:   var(--k-deep);
      --line:   #3a4442;
      --edge6:  #4a5553;
      --ink-50:  var(--k-ink);
      --ink-100: var(--k-ink);
      --ink-200: var(--k-ink-2);
      --ink-300: var(--k-ink-2);
      --ink-400: var(--k-ink-3);
      --ink-500: var(--k-ink-3);
      --amber-200: var(--k-accent-soft);
      --amber-300: var(--k-accent-soft);
      --amber-400: var(--k-accent);
      --amber-500: #f59e0b;
      --font-display: "Anton", "Archivo", Impact, "Haettenschweiler", sans-serif;
      --font-num: "Archivo", "Helvetica Neue", Arial, sans-serif;
      --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
      --font-serif: "Tinos", Times, "Times New Roman", "Liberation Serif", serif;
      --font-mono: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

      /* Tool marks on a rail - frameMaterial.REED, verbatim. */
      --reed-h: repeating-linear-gradient(90deg, rgba(255,252,241,0.075) 0px, rgba(255,252,241,0.075) 0.6px, rgba(0,0,0,0.060) 0.6px, rgba(0,0,0,0.060) 1.5px, rgba(255,255,255,0.020) 1.5px, rgba(255,255,255,0.020) 2.9px, rgba(0,0,0,0.038) 2.9px, rgba(0,0,0,0.038) 3.6px, rgba(255,252,241,0.042) 3.6px, rgba(255,252,241,0.042) 4.4px, rgba(0,0,0,0.014) 4.4px, rgba(0,0,0,0.014) 6.3px, rgba(0,0,0,0.050) 6.3px, rgba(0,0,0,0.050) 7.1px, rgba(255,255,255,0.024) 7.1px, rgba(255,255,255,0.024) 9.4px);
      --reed-v: repeating-linear-gradient(0deg, rgba(255,252,241,0.075) 0px, rgba(255,252,241,0.075) 0.6px, rgba(0,0,0,0.060) 0.6px, rgba(0,0,0,0.060) 1.5px, rgba(255,255,255,0.020) 1.5px, rgba(255,255,255,0.020) 2.9px, rgba(0,0,0,0.038) 2.9px, rgba(0,0,0,0.038) 3.6px, rgba(255,252,241,0.042) 3.6px, rgba(255,252,241,0.042) 4.4px, rgba(0,0,0,0.014) 4.4px, rgba(0,0,0,0.014) 6.3px, rgba(0,0,0,0.050) 6.3px, rgba(0,0,0,0.050) 7.1px, rgba(255,255,255,0.024) 7.1px, rgba(255,255,255,0.024) 9.4px);
      --wear: radial-gradient(closest-side circle at 2% 1.5%, rgba(255,253,246,0.24) 0%, rgba(255,253,246,0.07) 46%, transparent 100%), radial-gradient(closest-side circle at 98.5% 98.5%, rgba(255,231,186,0.16) 0%, rgba(255,231,186,0.04) 48%, transparent 100%);
      --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%3E%3Cfilter%20id%3D%22l%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20seed%3D%2211%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%200.985%200%200%200%200%200.94%200.26%200.26%200.26%200%20-0.35%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22d%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.11%22%20numOctaves%3D%224%22%20seed%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.04%200%200%200%200%200.06%200%200%200%200%200.10%20-0.34%20-0.34%20-0.34%200%200.55%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20filter%3D%22url(%23l)%22%2F%3E%3Crect%20width%3D%22120%22%20height%3D%22120%22%20filter%3D%22url(%23d)%22%2F%3E%3C%2Fsvg%3E");
      --env: linear-gradient(168deg, rgba(188,215,255,0.19) 0%, rgba(255,255,255,0.03) 30%, rgba(0,0,0,0.11) 60%, rgba(255,172,98,0.14) 88%, rgba(0,0,0,0.17) 100%);
      /* A2 — the card frame's own casting grain, at page scale, with the
         room's cool-above / warm-below light over it. */
      --tex: var(--grain), linear-gradient(168deg, rgba(188,215,255,0.05) 0%, transparent 40%, rgba(255,172,98,0.05) 100%);
      --tex-size: 120px 120px, auto;
    }

    body { margin: 0; background: var(--k-page); color: var(--k-ink);
           font-family: var(--k-body); font-weight: var(--k-body-w);
           font-size: calc(14px * var(--k-body-scale)); line-height: calc(1.45 * var(--k-body-lh));
           -webkit-font-smoothing: antialiased; }
    * { box-sizing: border-box; }
    a { color: var(--k-accent-soft); text-decoration: none; }
    a:hover { color: var(--k-accent-soft); }
    p { margin: 0; text-wrap: pretty; }
    h1, h2, h3, h4 { margin: 0; }

    /* ---- type utilities: ported from globals.css, then knob-bound ---- */
    .t-wordmark, .t-screen, .t-panel, .t-section {
      font-family: var(--k-display);
      font-weight: var(--k-display-w);
      font-stretch: var(--k-display-wd);
      letter-spacing: var(--k-display-tr);
      text-transform: var(--k-display-case);
    }
    .t-wordmark { font-size: calc(72px * var(--k-display-scale)); line-height: var(--k-display-lh); }
    .t-screen   { font-size: calc(52px * var(--k-display-scale)); line-height: var(--k-display-lh); }
    .t-panel    { font-size: calc(24px * var(--k-display-scale)); line-height: calc(var(--k-display-lh) + 0.1); }
    .t-section  { font-size: calc(18px * var(--k-display-scale)); line-height: calc(var(--k-display-lh) + 0.14); }
    .t-label    { font-family: var(--font-num); font-size: calc(12px * var(--k-body-scale)); line-height: 1.1;
                  font-weight: var(--k-label-w); letter-spacing: var(--k-label-tr); text-transform: uppercase; }
    .t-micro    { font-family: var(--font-num); font-size: calc(11px * var(--k-body-scale)); line-height: 1.1;
                  font-weight: var(--k-label-w); letter-spacing: calc(var(--k-label-tr) + 0.01em); text-transform: uppercase; }
    .t-readout  { font-family: var(--font-num); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

    /* ---- controls, ported from OnlinePage.tsx ---- */
    .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      height: 52px; padding: 0 28px; border: 0; border-radius: var(--k-radius); cursor: pointer;
      font-family: var(--font-num); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      color: #1b2220; background: var(--k-accent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(120,74,6,.55), 0 6px 18px rgba(247,179,43,.22);
      transition: background 140ms ease, transform 140ms ease; }
    .btn-primary:hover { background: var(--k-accent-soft); transform: translateY(-1px); }
    .btn-quiet { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      height: 52px; padding: 0 24px; border: 0; border-radius: var(--k-radius); cursor: pointer;
      font-family: var(--font-num); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
      color: var(--k-ink-2); background: var(--k-plate);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.3);
      transition: background 140ms ease, color 140ms ease; }
    .btn-quiet:hover { background: #35413e; color: var(--k-accent-soft); }
    .btn-sm { height: 40px; padding: 0 18px; font-size: 12px; }

    .well { background: var(--k-well); border-radius: var(--k-radius);
      box-shadow: inset 0 2px 4px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.07); }
    .plate-panel { background: var(--k-panel); border-radius: var(--k-radius);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.4); }

    /* ================================================================
       The card. A layered physical object - CardFrame.tsx, in CSS.
       ================================================================ */
    .dc-card { position: relative; width: 100%; aspect-ratio: 3 / 4;
      container-type: inline-size; --plate-scale: 1.4; }
    .dc-card .contour { position: absolute; inset: -1.5px; background: rgba(0,0,0,.85);
      border-radius: calc(var(--radius) + 1.5px); clip-path: var(--clip); }
    .dc-card .metal { position: absolute; inset: 0; border-radius: var(--radius); clip-path: var(--clip);
      background-image: var(--wear), var(--reed-h), var(--reed-h), var(--reed-v), var(--reed-v), var(--grain), var(--env), var(--rail-paint);
      background-size: auto, auto, 100% var(--rail), 100% var(--rail), var(--rail) 100%, var(--rail) 100%, 120px 120px, auto, auto;
      background-position: 0 0, 0 0, 0 0, 0 100%, 0 0, 100% 0, 0 0, 0 0, 0 0;
      background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-y, repeat-y, repeat, no-repeat, no-repeat;
      filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)) var(--glow);
      box-shadow: inset 0 0 0 1px var(--edge), inset 0 1.5px 0 var(--edge), inset 0 -1.5px 0 rgba(0,0,0,.55); }
    .dc-card .win { position: absolute; inset: var(--rail); overflow: hidden;
      border-radius: var(--win-radius);
      background: linear-gradient(178deg, #1b2124 0%, #0d1113 58%, #060809 100%);
      box-shadow: inset 0 0 0 1px var(--inner-rim), inset 0 2px 6px rgba(0,0,0,.75); }
    .dc-card .win img { position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; user-select: none; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
    .dc-card:hover .win img { transform: scale(1.045); }
    /* The aperture's own walls cast onto the art, plus the frame's 315deg key. */
    .dc-card .glass { position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(146deg, rgba(226,240,255,.075) 0%, rgba(226,240,255,.018) 22%, transparent 44%), linear-gradient(326deg, rgba(255,206,142,.045) 0%, transparent 26%);
      box-shadow: inset 5px 6px 14px rgba(0,0,0,.60), inset -3px -4px 13px rgba(0,0,0,.34), inset -1px -1px 0 rgba(255,238,206,.11), inset 0 0 0 1px rgba(255,255,255,.05); }
    .dc-card .plate-zone { position: absolute; inset: 0; pointer-events: none; }
    .dc-card .scrim { position: absolute; left: 0; right: 0; bottom: 0;
      height: calc(var(--plate-h) * var(--plate-scale) * 2.1);
      background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.82) 100%); }
    .dc-card .plate-rim { position: absolute; left: calc(var(--plate-ix) - .5cqw); right: calc(var(--plate-ix) - .5cqw);
      bottom: calc(var(--plate-iy) - .5cqw); height: calc(var(--plate-h) * var(--plate-scale) + 1cqw);
      clip-path: var(--plate-clip); background: var(--plate-rim-c); }
    .dc-card .plate { position: absolute; left: var(--plate-ix); right: var(--plate-ix); bottom: var(--plate-iy);
      height: calc(var(--plate-h) * var(--plate-scale)); clip-path: var(--plate-clip);
      display: flex; align-items: center; gap: clamp(2px, 2.4cqw, 5px);
      padding: 0 26cqw 0 clamp(2px, 3cqw, 9px);
      background: var(--plate-bg);
      box-shadow: inset 0 1px 0 var(--plate-rim-c), inset 0 0 0 1px rgba(0,0,0,.5); }
    .dc-card .cf-name { flex: 1; min-width: 0; font-family: var(--font-num); font-weight: 700;
      font-stretch: 88%; line-height: 1.05; font-size: clamp(11px, 8.6cqw, 26px);
      color: var(--ink); text-shadow: 0 1px 2px rgba(0,0,0,.95);
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-align: left; }
    .dc-card .sigil { flex: 0 0 auto; width: clamp(6px, 9cqw, 28px); height: clamp(6px, 9cqw, 28px);
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.95)); }
    /* Legendary: a specular travelling diagonally across the metal. */
    .dc-card .gloss { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
      border-radius: var(--radius); clip-path: var(--clip); }
    .dc-card .gloss::after { content: ""; position: absolute; inset: -40%;
      background: linear-gradient(114deg, transparent 42%, rgba(255,246,214,.55) 50%, transparent 58%);
      animation: card-gloss-sweep 4.6s cubic-bezier(.4,0,.2,1) infinite; }
    @keyframes card-gloss-sweep { 0%, 62% { transform: translate3d(-115%,0,0); } 100% { transform: translate3d(115%,0,0); } }
    .dc-card .gem { position: absolute; width: 19%; aspect-ratio: 1; z-index: 20;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-num); font-weight: 900; font-stretch: 92%;
      font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #fff;
      font-size: 9.6cqw; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
    .dc-card .gem span { position: relative; z-index: 2; }
    .dc-card .gem-cost  { top: 3%; left: 3%; }
    .dc-card .gem-power { bottom: 3%; right: 3%; }
    /* Two stones in the top-left, sitting on the art rather than cut into the
       frame: Power is the disc, Cost the diamond hung under it. The metal reads
       unbroken the whole way round, and the foot of the card comes back for a
       full-width nameplate. Cost is pinned at left: 1.5% so its wider box still
       centres on Power's line at 12.5%.

       --gem-rim is the black outline. It is a length off the card rather than a
       percentage of each stone, so Cost and Power carry the same weight of edge
       even though their boxes differ, as they do here. Rotating 45deg and
       scaling by 1/root 2 is what turns Cost's square into a diamond without
       changing the box it occupies, which is also why its corner radius stays
       circular rather than stretching.

       Unlike the wedges these replace, neither stone is measured off --rail, so
       the pair sits identically on all four tiers instead of re-fitting each.

       The .dc-card prefixes are load-bearing, on the stones and on the numeral
       spans alike: the offsets and the widths are set by .dc-card .gem-cost /
       .dc-card .gem, and position: relative on the span by .dc-card .gem span.
       A bare selector loses on specificity, and the numeral in particular then
       falls back to flex centring, takes its left/top as a relative nudge from
       there and lands off the stone. */
    .dc-card { --gem-rim: 0.4cqw; }
    .gem::before { content: ""; position: absolute; inset: calc(-1 * var(--gem-rim));
      background: rgba(0,0,0,.85); }
    .gem .stone, .gem .facet, .gem .spec { position: absolute; }
    .gem .stone { inset: 0; }
    .gem .facet { inset: 0; z-index: 2; background: rgba(255,255,255,.19); }
    .gem .spec { left: 20%; top: 12%; width: 34%; height: 23%; border-radius: 50%;
      transform: rotate(-27deg); z-index: 3;
      background: radial-gradient(circle, rgba(255,255,255,.425) 0%, rgba(255,255,255,0) 70%); }

    /* Power: the disc. Two inset hairlines for the turned edge and a wide dark
       one from below carry the sphere; the facet the wedges used is flat by
       definition and would only fight it, so it is off here. */
    .dc-card .gem-power { top: 3%; left: 3%; right: auto; bottom: auto;
      filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.6)); }
    .dc-card .gem-power::before { border-radius: 50%; }
    .gem-power .stone { border-radius: 50%; clip-path: none;
      background: radial-gradient(circle at 32% 24%, #ebadad 0%, #6d1a1a 42%, #360d0d 100%);
      box-shadow: inset 1.2px 1.2px 0 rgba(255,255,255,.5), inset -1.2px -1.2px 0 rgba(0,0,0,.45),
                  inset 0 -30% 22% -20% rgba(0,0,0,.5); }
    .gem-power .facet { display: none; }
    .gem-power .spec { left: 20%; top: 12%; width: 30%; height: 21%; }
    .dc-card .gem-power span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

    /* Cost: the diamond. The rim's radius tracks --gem-rim so the two corners
       stay concentric as the outline thickens, and the facet takes the left
       half of the turned square, which is the pair of faces pointing at the
       light once the whole thing is on the diagonal. */
    .dc-card .gem-cost { top: 15.3%; left: 1.5%; right: auto; bottom: auto; width: 22%;
      filter: drop-shadow(0 1.5px 1px rgba(0,0,0,.6)); }
    .dc-card .gem-cost::before { border-radius: calc(18% + var(--gem-rim)); clip-path: none;
      transform: rotate(45deg) scale(.7071); }
    .gem-cost .stone { border-radius: 20%; clip-path: none;
      transform: rotate(45deg) scale(.7071);
      background: radial-gradient(circle at 32% 24%, #b0bfe8 0%, #16244a 44%, #0b1225 100%);
      box-shadow: inset 1.1px 1.1px 0 rgba(255,255,255,.4), inset -1.1px -1.1px 0 rgba(0,0,0,.4); }
    .gem-cost .facet { border-radius: 20%; transform: rotate(45deg) scale(.7071);
      clip-path: polygon(0% 0%, 0% 100%, 50% 50%); }
    .gem-cost .spec { left: 29%; top: 29%; width: 20%; height: 13%; }
    .dc-card .gem-cost span { position: absolute; left: 51%; top: 50.5%; transform: translate(-50%,-50%); }

    /* ---- the four metals, from config/rarity.ts ---- */
    .r-common {
      --rail: 3cqw; --radius: 4.667cqw; --win-radius: 2.667cqw; --clip: none;
      --plate-h: 15cqw; --plate-ix: 0cqw; --plate-iy: 0cqw; --plate-clip: none;
      --edge: rgba(255,255,255,.28); --inner-rim: rgba(0,0,0,.72); --glow: none;
      --plate-bg: linear-gradient(180deg, rgba(44,52,50,.96) 0%, rgba(14,19,18,.97) 100%);
      --plate-rim-c: rgba(255,255,255,.10); --ink: #e9edeb;
      --rail-paint: conic-gradient(from 0deg at 50% 50%, #98a19d 0deg, #98a19d 32.9deg, #3b423e 40.9deg, #3b423e 139.1deg, #232827 147.1deg, #232827 212.9deg, #98a19d 220.9deg, #98a19d 311.1deg, #c3ccc7 323.1deg, #98a19d 335.1deg, #98a19d 360deg);
    }
    .r-rare {
      --rail: 3.667cqw; --radius: 4cqw; --win-radius: 2.333cqw;
      --clip: polygon(5% 0%, 95% 0%, 100% 3.75%, 100% 100%, 0% 100%, 0% 3.75%);
      --plate-h: 15.5cqw; --plate-ix: 0cqw; --plate-iy: 0cqw;
      --plate-clip: polygon(0% 26%, 4% 0%, 100% 0%, 100% 100%, 0% 100%);
      --edge: rgba(255,240,205,.44); --inner-rim: rgba(28,16,4,.78);
      --glow: drop-shadow(0 0 5px rgba(201,148,79,.30));
      --plate-bg: linear-gradient(180deg, rgba(58,44,28,.96) 0%, rgba(20,14,8,.97) 100%);
      --plate-rim-c: rgba(240,211,164,.24); --ink: #fbeed6;
      --rail-paint: conic-gradient(from 0deg at 50% 50%, #e2bd85 0deg, #e2bd85 32.9deg, #6d4a22 40.9deg, #6d4a22 139.1deg, #3a2711 147.1deg, #3a2711 212.9deg, #e2bd85 220.9deg, #e2bd85 311.1deg, #fbe8c2 323.1deg, #e2bd85 335.1deg, #e2bd85 360deg);
    }
    .r-epic {
      --rail: 4.333cqw; --radius: 3.333cqw; --win-radius: 2cqw;
      --clip: polygon(6.5% 0%, 93.5% 0%, 100% 4.9%, 100% 95.1%, 93.5% 100%, 6.5% 100%, 0% 95.1%, 0% 4.9%);
      --plate-h: 16cqw; --plate-ix: 2.2cqw; --plate-iy: 1.8cqw;
      --plate-clip: polygon(0% 36%, 5% 0%, 95% 0%, 100% 36%, 100% 100%, 0% 100%);
      --edge: rgba(236,226,255,.50); --inner-rim: rgba(18,9,38,.80);
      --glow: drop-shadow(0 0 8px rgba(167,139,250,.50));
      --plate-bg: linear-gradient(180deg, rgba(48,36,76,.96) 0%, rgba(16,11,28,.97) 100%);
      --plate-rim-c: rgba(196,181,253,.30); --ink: #f0e9ff;
      --rail-paint: conic-gradient(from 0deg at 50% 50%, #c3adf2 0deg, #c3adf2 32.9deg, #4d3688 40.9deg, #4d3688 139.1deg, #281a4a 147.1deg, #281a4a 212.9deg, #c3adf2 220.9deg, #c3adf2 311.1deg, #eee6ff 323.1deg, #c3adf2 335.1deg, #c3adf2 360deg);
    }
    .r-legendary {
      --rail: 5.333cqw; --radius: 4cqw; --win-radius: 2cqw;
      --clip: polygon(9.5% 0%, 90.5% 0%, 100% 7.1%, 100% 92.9%, 90.5% 100%, 9.5% 100%, 0% 92.9%, 0% 7.1%);
      --plate-h: 16.8cqw; --plate-ix: 3.2cqw; --plate-iy: 2.8cqw;
      --plate-clip: polygon(0% 44%, 4% 10%, 11% 0%, 89% 0%, 96% 10%, 100% 44%, 100% 90%, 96% 100%, 4% 100%, 0% 90%);
      --edge: rgba(255,248,214,.62); --inner-rim: rgba(38,24,2,.80);
      --glow: drop-shadow(0 0 10px rgba(250,204,21,.52));
      --plate-bg: linear-gradient(180deg, rgba(64,50,20,.96) 0%, rgba(22,16,6,.97) 100%);
      --plate-rim-c: rgba(253,230,138,.36); --ink: #fff6dc;
      --rail-paint: conic-gradient(from 0deg at 50% 50%, #f4d478 0deg, #f4d478 32.9deg, #835913 40.9deg, #835913 139.1deg, #452e07 147.1deg, #452e07 212.9deg, #f4d478 220.9deg, #f4d478 311.1deg, #fff6cd 323.1deg, #f4d478 335.1deg, #f4d478 360deg);
    }

    /* ---- page furniture ---- */
    .pick { border: 0; background: none; padding: 0; cursor: pointer; display: block; width: 100%;
      transition: transform 180ms cubic-bezier(.2,.7,.2,1); }
    .pick:hover { transform: translateY(-8px); }
    .pick[data-on="1"] { transform: translateY(-8px); }
    .pick[data-on="1"] .dc-card::after { content: ""; position: absolute; inset: -7px; border-radius: 14px;
      box-shadow: 0 0 0 2px var(--k-accent), 0 0 24px 2px rgba(251,191,36,.35); pointer-events: none; }
    .row { border: 0; width: 100%; text-align: left; cursor: pointer; background: var(--k-panel);
      display: block; padding: 0; border-radius: var(--k-radius);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.4);
      transition: background 140ms ease; }
    .row:hover { background: #283130; }
    .row-head { display: flex; align-items: center; gap: 18px; padding: 17px 22px; }
    .rank { flex: 0 0 auto; width: 96px; height: 30px; border-radius: 6px; display: flex; white-space: nowrap;
      align-items: center; justify-content: center; background: var(--k-well); color: var(--k-ink-3);
      font-family: var(--font-num); font-weight: 800; font-size: 11px; letter-spacing: .04em;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
    .row[data-on="1"] .rank { background: rgba(251,191,36,.14); color: var(--k-accent-soft); box-shadow: inset 0 0 0 1px rgba(251,191,36,.4); }
    .chev { flex: 0 0 auto; color: var(--k-ink-3); transition: transform 200ms ease; }
    .row[data-on="1"] .chev { transform: rotate(90deg); color: var(--k-accent-soft); }
    .row-body { padding: 0 22px 20px 136px; color: var(--k-ink-2);
      font-size: calc(15px * var(--k-body-scale)); line-height: calc(1.62 * var(--k-body-lh)); }

    /* ---- two-column lists: the wishlist and the FAQ ----
       auto-fit rather than a hard 2, so the split folds back to a single
       column on its own once the container cannot hold two 460px tracks --
       no breakpoint to keep in sync. max-width is deliberately below three
       tracks plus their gap (3*460 + 2*18 = 1416), so a third column can
       never appear however wide the page gets.
       align-items:start is what stops an opened accordion from stretching
       the card sitting next to it in the same grid row. */
    .two-col {
      display: grid;
      /* min(460px, 100%) rather than a bare 460px: below that width the
         track floor would stop shrinking and push the page sideways, which
         is exactly the overflow the 340/400px breakpoints exist to avoid. */
      grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
      align-items: start;
      gap: 9px 18px;
      width: 100%;
      max-width: 1400px;
    }
    /* the two halves; the outer grid stacks them back into one column
       when it drops to a single track, so reading order survives intact. */
    .two-col-half {
      display: flex;
      flex-direction: column;
      gap: 9px;
      min-width: 0;
    }
    .tab { border: 0; cursor: pointer; padding: 15px 30px; border-radius: 10px;
      font-family: var(--font-num); font-size: 13px; font-weight: 700; letter-spacing: .09em;
      text-transform: uppercase; color: var(--k-ink-3); background: transparent; transition: all 140ms ease; }
    .tab:hover { color: var(--k-ink); }
    .tab[data-on="1"] { color: #1b2220; background: var(--k-accent);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(120,74,6,.5); }
    .no-mark { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(239,68,68,.12); box-shadow: inset 0 0 0 1px rgba(239,68,68,.35); }
    .stat { padding: 26px 24px; border-radius: var(--k-radius); background: var(--k-panel);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.4); }
    code { font-family: var(--font-mono); font-size: 13px; }
  
    .row, .pick { font-family: var(--k-body); font-weight: var(--k-body-w); }

    /* ================================================================
       CARD TREATMENT, carried over from the nameplate concepts sheet.
       These rules come last on purpose: they restate selectors from the
       block above at the same specificity, so source order decides.
       ================================================================ */

    /* The relief ornament. Not one path names a colour: the shadow pass takes
       `fill`, the dark edges take `stroke`, both light passes ask for
       `currentColor`, so one rule tints the whole thing per metal. */
    .relief-wrap { position: absolute; inset: 0; overflow: hidden;
      border-radius: var(--radius); clip-path: var(--clip); pointer-events: none; }
    .cf-relief { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
      --cf-lit: var(--cf-lit-small); --cf-shade: var(--cf-shade-small);
      color: rgb(var(--cf-lit)); fill: rgb(var(--cf-shade)); stroke: rgb(var(--cf-shade)); }
    .card-frame-detail { opacity: 0; transition: opacity 160ms ease; }
    @container (min-width: 190px) {
      .card-frame-detail { opacity: 1; }
      .cf-relief { --cf-lit: var(--cf-lit-detail); --cf-shade: var(--cf-shade-detail); }
    }

    /* Nameplate: the inset well. Caps, left aligned, full width, dropped flush
       with the foot of the art so the aperture's own radius clips its bottom
       corners. Both stones are in the top-left now, so nothing sits in the foot
       to run behind -- the plate takes the whole width and an even padding,
       where the wedges had it stop short at the power gem's centre. */
    .dc-card .plate-rim { display: none; }
    .dc-card .plate { left: 0; right: 0; bottom: 0;
      clip-path: none; border-radius: 0;
      height: calc(var(--plate-h) * 1.15); padding: 0 5cqw;
      background: rgba(6,8,8,0.9);
      box-shadow: inset 2px 3px 7px rgba(0,0,0,0.95), inset 0 -1px 0 rgba(255,255,255,0.13); }
    .dc-card .cf-name { font-size: clamp(6.6px, 5.16cqw, 15.6px);
      text-transform: uppercase; text-align: left; letter-spacing: 0.015em; }

    /* ---- footer action buttons ---- */
    .f-btn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px;
      border: 0; border-radius: var(--k-radius); cursor: pointer; text-decoration: none;
      font-family: var(--font-num); font-size: calc(12px * var(--k-body-scale)); font-weight: 700;
      letter-spacing: var(--k-label-tr); text-transform: uppercase; white-space: nowrap;
      color: #14191a;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(0,0,0,0.26),
                  0 4px 12px rgba(0,0,0,0.35);
      transition: filter 140ms ease, transform 140ms ease; }
    .f-btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: #14191a; }
    .f-btn svg { flex-shrink: 0; }
    /* Three tones already in the game's palette: the accent, the epic metal's
       violet and the Active sigil's green. Dark ink on all three. */
    .f-btn--join { background: var(--k-accent); }
    .f-btn--ask  { background: #b39ae8; }
    .f-btn--give { background: #7fdcb4; }
    /* ---- FAQ ---- */
    .faq-row { background: var(--k-panel); border-radius: var(--k-radius);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(0,0,0,0.4);
      transition: background 140ms ease; overflow: hidden; }
    .faq-row:hover { background: #283130; }
    .faq-q { display: flex; align-items: center; gap: 18px; width: 100%;
      padding: 16px 22px; background: none; border: 0; cursor: pointer; text-align: left;
      font-family: var(--k-body); }
    .faq-row[data-on="1"] .chev { transform: rotate(90deg); color: var(--k-accent-soft); }
    .faq-a { padding: 0 26px 22px 22px; color: var(--k-ink-2);
      font-size: calc(15px * var(--k-body-scale)); line-height: calc(1.62 * var(--k-body-lh));
      display: flex; flex-direction: column; gap: 13px; }
    .faq-a em { font-style: normal; color: var(--k-accent-soft); }
    .faq-a a { text-decoration: underline; text-underline-offset: 2px; }
    /* Sub-heading for an answer that gathers several questions under one row.
       Same label voice as .spec dt; the negative bottom margin pulls it onto
       the paragraph it introduces, against the .faq-a flex gap. */
    .faq-a .faq-sub { color: var(--k-ink-3); font-family: var(--font-num);
      font-size: calc(11px * var(--k-body-scale)); font-weight: var(--k-label-w);
      letter-spacing: calc(var(--k-label-tr) + 0.01em); text-transform: uppercase;
      margin: 5px 0 -5px; }
    .faq-a ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
    /* The stack, as a label/value grid inside a FAQ answer. */
    .faq-a .spec { display: grid; grid-template-columns: 88px 1fr; gap: 11px 22px; margin: 2px 0 0; }
    .faq-a .spec dt { color: var(--k-ink-3); font-family: var(--font-num);
      font-size: calc(11px * var(--k-body-scale)); font-weight: var(--k-label-w);
      letter-spacing: calc(var(--k-label-tr) + 0.01em); text-transform: uppercase; padding-top: 3px; }
    .faq-a .spec dd { margin: 0; }
    /* ---- E3-9 without the marks: a thin recessed rail between sections.
       Drawn as a ::before inside each band rather than as a sibling, so a
       section switched off takes its own divider with it. ---- */
    .rail { position: relative; }
    .rail::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 34px;
      background: rgba(0,0,0,0.28); pointer-events: none; z-index: 3;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 -1px 0 rgba(0,0,0,0.5); }
    /* ---- the rising sun behind the wishlist ----
       Absolutely positioned, so it would otherwise paint over the in-flow
       content; the sibling rule below lifts everything after it instead of
       wrapping the section's children in a new element. */
    .sunrise { position: absolute; left: 50%; top: -90px; width: 2200px; height: 1100px;
      transform: translateX(-50%); pointer-events: none; z-index: 0; opacity: 0.62;
      mix-blend-mode: screen;
      /* The rail owns the top 34px of the band. Without this the sun paints
         straight over the divider (both are positioned at z 0, so tree order
         decides) and the rays read differently above and below the seam.
         124px = the 90px the sun sits above the band + the 34px rail, so the
         light starts at the rail's underside and ramps in from there. */
      -webkit-mask-image: linear-gradient(180deg, transparent 0 124px, #000 250px);
      mask-image: linear-gradient(180deg, transparent 0 124px, #000 250px); }
    .sunrise ~ * { position: relative; z-index: 1; }

    /* ---- the page's own edge moulding ----
       The same read as a card frame's left and right sides, in profile from
       the outside in: a 2px contour, a lit chamfer crest, the face turning
       away over 5px, an inner lip hairline, the groove under it, then a long
       occlusion easing inward so no band ends on a hard line. The 11px of
       ironwork is fixed; only the shade scales with the viewport. Painted
       over the content (z 50) because every band lays down its own opaque
       background, and lit cool-above / warm-below to match the A2 texture's
       room light. */
    .page { position: relative; }
    .page::before, .page::after { content: ""; position: absolute; top: 0; bottom: 0;
      /* Above .forge-nav, which also sits at 50 and, being a later sibling,
         would win the tie and paint its bar over the rail's top 86px -
         making the edge look like it runs underneath the header. */
      width: clamp(30px, 4.6vw, 72px); pointer-events: none; z-index: 60;
      background-repeat: no-repeat, no-repeat;
      background-size: 11px 100%, auto; }
    .page::before { left: 0;
      background-position: left top, left top;
      background-image:
        linear-gradient(180deg, rgba(188,215,255,0.13) 0%, rgba(188,215,255,0) 26%,
                        rgba(255,172,98,0) 72%, rgba(255,172,98,0.13) 100%),
        linear-gradient(90deg,
          rgba(0,0,0,0.88) 0, rgba(0,0,0,0.88) 2px,
          rgba(255,255,255,0.13) 2px, rgba(255,255,255,0.13) 4px,
          rgba(0,0,0,0.44) 4px, rgba(0,0,0,0.24) 9px,
          rgba(255,255,255,0.075) 9px, rgba(255,255,255,0.075) 10px,
          rgba(0,0,0,0.52) 10px, rgba(0,0,0,0.52) 11px,
          rgba(0,0,0,0.32) 11px, rgba(0,0,0,0.15) 36%,
          rgba(0,0,0,0.055) 66%, rgba(0,0,0,0) 100%); }
    .page::after { right: 0;
      background-position: right top, right top;
      background-image:
        linear-gradient(180deg, rgba(188,215,255,0.13) 0%, rgba(188,215,255,0) 26%,
                        rgba(255,172,98,0) 72%, rgba(255,172,98,0.13) 100%),
        linear-gradient(270deg,
          rgba(0,0,0,0.88) 0, rgba(0,0,0,0.88) 2px,
          rgba(255,255,255,0.13) 2px, rgba(255,255,255,0.13) 4px,
          rgba(0,0,0,0.44) 4px, rgba(0,0,0,0.24) 9px,
          rgba(255,255,255,0.075) 9px, rgba(255,255,255,0.075) 10px,
          rgba(0,0,0,0.52) 10px, rgba(0,0,0,0.52) 11px,
          rgba(0,0,0,0.32) 11px, rgba(0,0,0,0.15) 36%,
          rgba(0,0,0,0.055) 66%, rgba(0,0,0,0) 100%); }


/* ==================================================================
   Site additions. The artboard is a fixed 1440px canvas; everything
   below is what turns it into a page that survives a phone.
   ================================================================== */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* Images are natively draggable, so a click-drag lifts a translucent ghost
   and a no-drop cursor. Nothing on this page is a drop target. */
img { max-width: 100%; -webkit-user-drag: none; user-drag: none; }
.t-screen { overflow-wrap: break-word; }

/* the hero fan keeps its exact composition and is scaled as one unit,
   rather than being re-laid out at each breakpoint */
/* No overflow clipping here. The three cards are rotated and their cost/power
   gems sit on negative offsets, so they bleed outside the nominal 620x480
   stage by design -- clipping at the box edge slices the corner cards and cuts
   the gems in half. The hero section already clips at the page edge, which is
   where the artboard clips too. The box controls layout with height alone. */
/* min-width:0 matters: a flex item defaults to min-width:auto, which floors
   this box at its 620px child, so flex-basis:100% could not shrink it and
   the box stuck out past narrow viewports. The child is scaled by transform,
   which does not affect layout, so the box must be told it may shrink. */
.hero-fan-box { flex: 0 0 620px; height: 480px; min-width: 0; }
.hero-fan { position: relative; width: 620px; height: 480px; transform-origin: top left; }

.top-rail { flex-wrap: wrap; min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
.tab-row { flex-wrap: wrap; }

/* copy-to-clipboard confirmation */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 200;
  transform: translate(-50%, 12px);
  max-width: min(92vw, 460px); padding: 13px 20px;
  border-radius: var(--k-radius); background: var(--k-plate); color: var(--k-ink);
  font-family: var(--font-num); font-size: 13px; font-weight: 700; letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(0,0,0,.5),
              0 10px 30px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.nav-list { flex-wrap: wrap; }
.row, .faq-row, .pick, .btn-quiet, .f-btn, .tab { -webkit-tap-highlight-color: transparent; }
a { color: var(--k-accent-soft); }

/* ---- hero fan: shrink in place, then wrap ----
   The row is `flex-wrap: wrap` with a 520px text basis and a 64px gap, so the
   fan wraps as soon as 520 + 64 + basis stops fitting the rail's content box
   (the viewport less 2 x clamp(20px, 4.2vw, 56px)). Wrapping is decided from
   flex-basis BEFORE flex-shrink runs, so scaling the child alone changes
   nothing -- every step below moves the basis and the transform together.

   Step spacing is not arbitrary. A 5% step frees 31px of basis while the
   content box loses 0.916px per px of viewport, so steps wider than ~33px of
   viewport lose ground and the fan wraps part-way down the cascade anyway.
   30px steps hold with 25-42px of margin at every boundary.

   Heights are 480 x scale: the box carries the layout, the child is only
   painted smaller (transforms do not affect layout). */
@media (max-width: 1340px) {
  .hero-fan-box { flex: 0 0 589px; height: 456px; }
  .hero-fan { transform: scale(0.95); }
}
@media (max-width: 1310px) {
  .hero-fan-box { flex: 0 0 558px; height: 432px; }
  .hero-fan { transform: scale(0.9); }
}
@media (max-width: 1280px) {
  .hero-fan-box { flex: 0 0 527px; height: 408px; }
  .hero-fan { transform: scale(0.85); }
}
@media (max-width: 1250px) {
  .hero-fan-box { flex: 0 0 496px; height: 384px; }
  .hero-fan { transform: scale(0.8); }
}
@media (max-width: 1220px) {
  .hero-fan-box { flex: 0 0 465px; height: 360px; }
  .hero-fan { transform: scale(0.75); }
}
@media (max-width: 1190px) {
  .hero-fan-box { flex: 0 0 434px; height: 336px; }
  .hero-fan { transform: scale(0.7); }
}

/* 70% reached and the row is finally out of width: hand the fan its own line.
   It keeps the 70% it walked down to rather than jumping back up.

   1140 rather than the 1120 the basis arithmetic suggested: the text column is
   `flex: 1 1 520px` with min-width:auto, so flexbox breaks the line against its
   ~555px min-content width, not its 520px basis. Measured wrap point is 1128;
   this fires just above it so the fan is never left wrapped while still
   carrying the narrow inline basis. */
@media (max-width: 1140px) {
  .hero-fan-box { flex: 1 1 100%; height: 336px; }
  .hero-fan { transform: scale(0.7); }
}
@media (max-width: 860px) {
  .hero-fan-box { height: 300px; }
  .hero-fan { transform: scale(0.625); }
  .nav-list { gap: 10px 16px; }
  .row-body { padding-left: 22px; }
}
@media (max-width: 560px) {
  .hero-fan-box { height: 268px; }
  .hero-fan { transform: scale(0.55); }
  .row-head { gap: 12px; padding: 14px 16px; }
  .rank { display: none; }
  .faq-q { padding: 14px 16px; gap: 12px; }
  .page::before, .page::after { width: 12px; }
}
/* 620px of stage has to fit a 305px viewport once the browser chrome is off */
@media (max-width: 400px) {
  .hero-fan-box { height: 220px; }
  .hero-fan { transform: scale(0.45); }
}
@media (max-width: 340px) {
  .hero-fan-box { height: 190px; }
  .hero-fan { transform: scale(0.39); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ================================================================
   WORLDFORGE — production direction selected from concept 06.
   The existing card frames and content architecture remain intact;
   this layer gives the full page one cinematic forge material system.
   ================================================================ */
.worldforge-page {
  width: 100%; max-width: 1600px; margin: 0 auto; overflow: hidden; background: #120e09;
  --k-display: "Barlow Condensed", "Arial Narrow", sans-serif; --k-display-w: 800; --k-display-wd: 100%;
  --k-display-tr: -0.035em; --k-display-lh: .98; --k-display-scale: .87; --k-display-case: none;
  --k-body: "Libre Franklin", "Segoe UI", sans-serif; --k-body-scale: 1.07; --k-body-w: 450; --k-body-lh: 1.05;
  --k-label-tr: .1em; --k-label-w: 750; --k-accent: #ffc451; --k-accent-soft: #ffdc92;
  --k-ink: #fff4df; --k-ink-2: #d8cbb8; --k-ink-3: #aa9d8b;
  --k-page: #0b0c0b; --k-deep: #080908; --k-well: #120e09; --k-panel: #19130d; --k-plate: #24180d;
  --k-density: 1; --k-radius: 4px; --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-num: "Libre Franklin", "Segoe UI", sans-serif; --font-body: "Libre Franklin", "Segoe UI", sans-serif;
  --font-serif: "Barlow Condensed", "Arial Narrow", sans-serif; --font-mono: "Cascadia Mono", Consolas, monospace;
  --line: rgba(255,196,81,.22); --edge6: rgba(255,220,146,.36); --plate2: #21170d;
}
body { background: #070807; font-family: "Libre Franklin", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; }
::selection { color: #1c1203; background: #ffc451; }
.worldforge-page .rail[id] { scroll-margin-top: 72px; }

.forge-nav {
  position: relative; z-index: 50; min-height: 72px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 28px; padding: 10px clamp(20px,4.2vw,64px);
  border-bottom: 1px solid rgba(255,196,81,.25); background: rgba(8,9,8,.94);
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
.forge-brand { min-height: 44px; display: inline-flex; align-items: center; justify-self: start; line-height: 0; }
.forge-brand img { width: 172px; height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.7)); }
.forge-nav nav { display: flex; align-items: center; gap: clamp(22px,3vw,48px); }
.forge-nav nav a {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: #d8cbb8;
  font: 750 11px/1 "Libre Franklin", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.forge-nav nav a:hover, .forge-nav nav a:focus-visible { color: #ffc451; }

.worldforge-hero {
  position: relative; min-height: calc(100svh - 72px); padding: clamp(46px,6vh,76px) clamp(20px,4.2vw,64px) clamp(42px,5vh,64px);
  overflow: hidden; isolation: isolate; background: #080908;
}
.forge-atmosphere {
  position: absolute; z-index: -2; inset: 0;
  background: radial-gradient(ellipse at 74% 38%,rgba(255,105,22,.34),transparent 28%), radial-gradient(ellipse at 73% 74%,rgba(255,196,81,.18),transparent 27%), linear-gradient(103deg,#080908 0 47%,#160f09 47% 100%);
}
.forge-atmosphere::before {
  content: ""; position: absolute; left: 47%; right: -6%; bottom: 0; height: 52%; opacity: .68;
  background: linear-gradient(171deg,transparent 0 41%,rgba(255,83,8,.17) 42% 43%,transparent 44% 55%,rgba(255,181,48,.14) 56% 57%,transparent 58%);
}
.worldforge-hero-grid {
  position: relative; z-index: 2; min-height: min(760px,calc(100svh - 176px)); display: grid;
  grid-template-columns: minmax(480px,.86fr) minmax(560px,1.14fr); align-items: center; gap: clamp(22px,3.6vw,62px);
}
.worldforge-copy { position: relative; z-index: 8; max-width: 680px; }
.worldforge-title {
  max-width: 10.5ch; color: #fff4df; font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(68px,6.3vw,104px); font-weight: 800; line-height: .88; letter-spacing: -.035em;
  text-wrap: balance; text-shadow: 0 10px 32px rgba(0,0,0,.5);
}
.forge-summary { max-width: 57ch; margin-top: 25px; color: #d8cbb8; font-size: 17px; line-height: 1.6; }
.forge-disclaimer {
  max-width: 57ch; margin-top: 16px; color: var(--k-ink-3);
  font: 700 11px/1.7 "Libre Franklin",sans-serif; letter-spacing: .09em; text-transform: uppercase;
}
.forge-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.forge-action {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 22px;
  border: 1px solid rgba(255,196,81,.38); color: #fff4df; font: 800 12px/1 "Libre Franklin", sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  transition: transform 160ms ease, color 160ms ease, filter 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.forge-action svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.forge-action:hover, .forge-action:focus-visible { transform: translateY(-2px); }
.forge-action-primary {
  color: #1c1203; border-color: #ffc451;
  /* Longhands, not the `background` shorthand: the shorthand resets
     background-color to transparent, and transitioning out of transparent
     fades the button through black over the dark page. */
  background-color: #ffc451; background-image: linear-gradient(135deg,#ffe09b,#ffc451 60%,#f39b28);
  box-shadow: 0 18px 38px rgba(255,138,27,.22), inset 0 1px rgba(255,255,255,.55);
}
.forge-action-primary:hover, .forge-action-primary:focus-visible { color: #120b02; filter: brightness(1.08); }
.forge-promises {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin: 34px 0 0; padding: 18px 0 0;
  border-top: 1px solid rgba(255,196,81,.28); list-style: none;
}
.forge-promise { min-width: 0; display: grid; grid-template-columns: 24px 1fr; gap: 9px; padding-right: 14px; }
.forge-promise + .forge-promise { padding-left: 14px; border-left: 1px solid rgba(255,196,81,.19); }
.forge-promise-icon { color: #ffc451; }
.forge-promise-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.forge-promise strong {
  display: block; color: #ffdc92; font: 800 12px/1.25 "Libre Franklin",sans-serif; letter-spacing: .055em; text-transform: uppercase;
}
.forge-promise p { margin-top: 7px; color: #c8bba7; font-size: 15px; line-height: 1.48; }
.worldforge-hero .hero-fan-box { filter: drop-shadow(0 34px 40px rgba(0,0,0,.62)) drop-shadow(0 0 28px rgba(255,112,22,.16)); }
.worldforge-hero .hero-fan::after {
  content: ""; position: absolute; z-index: 10; left: 3%; right: -2%; bottom: 1%; height: 17%; pointer-events: none;
  background: linear-gradient(to top,rgba(255,78,8,.25),transparent); filter: blur(17px);
}
.worldforge-hero .forge-sigil {
  position: absolute; z-index: 14; left: 8%; right: 5%; bottom: 1%; display: grid;
  grid-template-columns: auto 1fr auto 1fr auto; align-items: center; gap: 12px;
  color: #ffd577; font: 700 8px/1 "Libre Franklin",sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.worldforge-hero .forge-sigil i { height: 1px; background: currentColor; }
.worldforge-hero .forge-sigil strong {
  width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid currentColor;
  font: 800 34px/1 "Barlow Condensed",sans-serif; transform: rotate(45deg);
}
.worldforge-hero .forge-sigil strong b { font: inherit; transform: rotate(-45deg); }

/* ================================================================
   HERO FAN — depth under the cursor, and the Eternal Flame's own light.

   The fan angle stays where it was, on each slot's inline rotate(); the
   tilt, the lift and the glare all ride on the inner .dc-card, so the two
   transforms never fight and the measured fan geometry is untouched.

   app.js writes --mx/--my (pointer, %), --rx/--ry (tilt, deg) and --px/--py
   (art parallax, px) onto the hovered card. Every rule below falls back to
   a flat, still card, so with JS off the fan still lifts and dims on hover
   -- it just stops leaning.
   ================================================================ */
.hero-fan .fan-slot { transition: z-index 0s; }
.hero-fan .fan-slot:hover { z-index: 30; }   /* the flame slot keeps its inline 2, and is already on top */

.hero-fan .dc-card {
  transform: perspective(1150px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translate3d(0, var(--lift, 0px), 0)
             scale(var(--pop, 1));
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), filter 320ms ease;
}
/* The hovered card rises out of the stack and casts a real shadow... */
.hero-fan .fan-slot:hover .dc-card {
  --lift: -18px; --pop: 1.045;
  filter: drop-shadow(0 26px 30px rgba(0,0,0,.58)) drop-shadow(0 0 24px rgba(255,138,27,.20));
}
/* ...and the two it is standing in front of fall back out of focus. That
   half is what actually reads as depth: a card that lifts alone is a button. */
.hero-fan:hover .fan-slot:not(:hover) .dc-card {
  --lift: 4px; --pop: .972;
  filter: brightness(.62) saturate(.8) blur(.5px);
}
/* The flame's own light recedes with it -- the halo is a box-shadow on the
   slot, so the card's brightness filter cannot reach it. */
.hero-fan:hover .fan-slot:not(:hover)::before { filter: brightness(.4); }

/* Specular travelling with the cursor, across frame, art and stones alike. */
.hero-fan .dc-card::after {
  content: ""; position: absolute; inset: 0; z-index: 25; pointer-events: none;
  border-radius: var(--radius); clip-path: var(--clip);
  background: radial-gradient(58% 44% at var(--mx, 50%) var(--my, 0%),
    rgba(255,246,226,.30) 0%, rgba(255,196,81,.11) 40%, transparent 68%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 240ms ease;
}
.hero-fan .fan-slot:hover .dc-card::after { opacity: 1; }

/* The illustration drifts against the tilt, so it reads as sitting behind
   the aperture rather than printed on it. */
.hero-fan .dc-card .win img { transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
.hero-fan .fan-slot:hover .win img {
  transform: scale(1.075) translate3d(var(--px, 0px), var(--py, 0px), 0);
}

/* ---- Eternal Flame: the focal card carries its own fire ---- */
/* One variable: the frame's edge now catches warm light instead of none. */
.hero-fan .fan-flame .dc-card { --glow: drop-shadow(0 0 7px rgba(255,138,27,.45)); }

/* The card burns. Deliberately a rim glow on the card's own silhouette and
   not a soft radial haze: .forge-atmosphere already lays a wide orange wash
   right behind the fan, so more ambient orange there is invisible -- what
   reads as a light source against a warm field is a hot, near-white edge
   with a defined falloff. 11px is the card's own 4.667cqw corner at 244px,
   so the halo tracks the frame exactly and scales with the fan. */
.hero-fan .fan-flame::before {
  content: ""; position: absolute; z-index: -1; inset: 1.5%; pointer-events: none;
  border-radius: 11px;
  box-shadow: 0 0 14px 1px rgba(255,232,178,.62),
              0 0 40px 6px rgba(255,150,44,.52),
              0 0 96px 26px rgba(255,92,10,.30);
  animation: flame-breathe 7.3s ease-in-out infinite;
}
@keyframes flame-breathe {
  0%, 100% { opacity: .70; transform: scale(1); }
  38%      { opacity: 1;   transform: scale(1.012); }
  61%      { opacity: .84; transform: scale(1.004); }
}

/* Warm glare sweeping the frame -- the legendary gloss, slower and on fire. */
.hero-fan .fan-flame .flare {
  position: absolute; inset: 0; z-index: 22; overflow: hidden; pointer-events: none;
  border-radius: var(--radius); clip-path: var(--clip);
  opacity: 1; transition: opacity 200ms ease;
}
/* Hand the attention over. Dimming the flame card is not enough while its
   glare keeps travelling -- movement pulls the eye whatever its brightness --
   so the sweep goes out entirely once either neighbour is under the cursor. */
.hero-fan:hover .fan-slot:not(:hover) .flare { opacity: 0; }
.hero-fan .fan-flame .flare::after {
  content: ""; position: absolute; inset: -45%;
  background: linear-gradient(108deg, transparent 43%, rgba(255,222,160,.20) 48.4%,
    rgba(255,252,240,.50) 50.4%, rgba(255,255,255,.58) 51%, rgba(255,186,72,.24) 53%,
    transparent 59%);
  animation: flame-glare-sweep 6.4s cubic-bezier(.45,0,.25,1) infinite;
}
@keyframes flame-glare-sweep {
  0%, 58% { transform: translate3d(-125%, 0, 0); }
  100%    { transform: translate3d(125%, 0, 0); }
}

/* Firelight inside the aperture. Two animations on coprime cycles -- opacity
   on 3.7s, brightness on 5.3s -- so the flicker takes ~20s to repeat and
   never reads as a loop. */
.hero-fan .fan-flame .ember {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(42% 30% at 50% 27%,
    rgba(255,226,158,.46) 0%, rgba(255,132,30,.20) 50%, transparent 78%),
    radial-gradient(56% 34% at 50% 88%, rgba(255,110,18,.20) 0%, transparent 74%);
  animation: flame-flicker-a 3.7s ease-in-out infinite,
             flame-flicker-b 5.3s ease-in-out infinite;
}
@keyframes flame-flicker-a {
  0%, 100% { opacity: .55; } 22% { opacity: .94; } 41% { opacity: .60; }
  68% { opacity: 1; } 84% { opacity: .70; }
}
@keyframes flame-flicker-b {
  0%, 100% { filter: brightness(1); } 30% { filter: brightness(1.30); }
  55% { filter: brightness(.84); } 77% { filter: brightness(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fan .dc-card { --rx: 0deg !important; --ry: 0deg !important; }
  .hero-fan .fan-flame::before,
  .hero-fan .fan-flame .ember { animation: none; }
  .hero-fan .fan-flame .flare { display: none; }
}

.worldforge-page .rail { border-top: 1px solid rgba(255,196,81,.12); background-image: none !important; }
.worldforge-page .row, .worldforge-page .faq-row, .worldforge-page .pick, .worldforge-page .well, .worldforge-page .mode-card { border-color: rgba(255,196,81,.16); }
.worldforge-page .faq-row:hover { background: #21170d; }
/* FAQ questions used to be inline-styled at 25px of the display face. Only the
   800 weight of Barlow Condensed is loaded, so weight is not a lever here:
   the fix is size and tracking. A smaller cap-height and near-zero tracking
   let the eye scan 37 stacked one-line questions without the slab effect. */
.worldforge-page .faq-q .faq-qt {
  flex-grow: 1; color: var(--k-ink); font-family: var(--font-serif);
  font-size: calc(20px * var(--k-display-scale)); letter-spacing: 0;
}
.worldforge-page .btn-primary { color: #1c1203; background: linear-gradient(135deg,#ffe09b,#ffc451 62%,#f39b28); }
.worldforge-page .btn-quiet { border: 1px solid rgba(255,196,81,.22); background: #21170d; }
.worldforge-page .btn-quiet:hover { color: #ffc451; background: #291b0d; }
.worldforge-page :focus-visible { outline: 2px solid #ffc451; outline-offset: 4px; }

@media (max-width: 1180px) {
  .worldforge-hero-grid { grid-template-columns: minmax(430px,.9fr) minmax(450px,1.1fr); }
  .worldforge-hero .hero-fan-box { justify-self: center; }
  .forge-promises { grid-template-columns: 1fr; gap: 12px; }
  .forge-promise + .forge-promise { padding-left: 0; border-left: 0; }
}
@media (max-width: 900px) {
  .forge-nav { grid-template-columns: 1fr auto; min-height: 64px; }
  .forge-nav nav { display: none; }
  .worldforge-hero { min-height: calc(100svh - 64px); padding-top: 44px; }
  .worldforge-hero-grid { min-height: 760px; grid-template-columns: 1fr; align-items: start; }
  .worldforge-copy { max-width: 650px; }
  .worldforge-hero .hero-fan-box { position: absolute; z-index: -1; top: 160px; right: -230px; opacity: .3; pointer-events: none; }
  .hero-fan .fan-flame::before, .hero-fan .fan-flame .flare, .hero-fan .fan-flame .ember { display: none; }
  .forge-atmosphere { background: radial-gradient(ellipse at 100% 34%,rgba(255,105,22,.26),transparent 45%),linear-gradient(125deg,#080908 0 64%,#160f09 100%); }
  .forge-promises { max-width: 560px; }
}
@media (max-width: 560px) {
  .forge-nav { padding: 9px 18px; }
  .forge-brand img { width: 132px; }
  .worldforge-hero { padding: 34px 20px 38px; }
  .worldforge-hero-grid { min-height: 0; display: block; }
  .worldforge-title { max-width: 9.5ch; font-size: clamp(52px,16vw,68px); line-height: .88; }
  .forge-summary { margin-top: 19px; font-size: 15px; line-height: 1.53; }
  .forge-disclaimer { margin-top: 13px; font-size: 10px; line-height: 1.62; letter-spacing: .07em; }
  .forge-actions { display: grid; grid-template-columns: 1fr; margin-top: 22px; }
  .forge-action { width: 100%; min-height: 48px; }
  .forge-promises { gap: 10px; margin-top: 25px; padding-top: 14px; }
  .forge-promise { grid-template-columns: 22px 1fr; gap: 7px; padding-right: 0; }
  .forge-promise p { margin-top: 3px; font-size: 14px; line-height: 1.42; }
  .worldforge-hero .hero-fan-box { top: 142px; right: -210px; opacity: .42; }
  .worldforge-hero .forge-sigil { display: none; }
}

/* ================================================================
   PLAYTEST APPLICATION — playtest.html
   The page had no form vocabulary before this, so these controls are
   built from the same material as the rest of the forge: well-dark
   fields sunk into the panel, a brass hairline that lights to the
   accent on focus, and the 4px radius the cards and rails already use.
   ================================================================ */
.pt-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(46px,7vh,86px) clamp(20px,4.2vw,64px) clamp(38px,5vh,58px);
  background: #080908;
}
/* Only the copy is lifted, never `.pt-hero > *`: that selector ties with
   `.forge-atmosphere` on specificity and, being later in the file, would win
   -- turning the absolutely-positioned light layer into a zero-height
   in-flow div and blanking the hero. */
.pt-hero-inner { position: relative; z-index: 2; }
/* The hero band inherits .forge-atmosphere from the home page but wants a
   warmer, more forward-leaning light: the ember sits behind the headline
   rather than off to the right, and the floor glows as if the forge were
   just out of frame. */
.pt-hero .forge-atmosphere {
  background:
    radial-gradient(ellipse 62% 74% at 82% 26%, rgba(255,138,26,.30), transparent 64%),
    radial-gradient(ellipse 84% 62% at 6% 108%, rgba(255,196,81,.20), transparent 62%),
    linear-gradient(166deg, #080908 0%, #130c07 58%, #1d1108 100%);
}
.pt-hero-inner { max-width: 1180px; margin: 0 auto; }
.pt-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  color: var(--k-accent); font: 750 11px/1 "Libre Franklin", sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
}
.pt-eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--k-accent));
}
.pt-title {
  max-width: 16ch; margin: 0; color: #fff4df;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(52px,5.4vw,84px); font-weight: 800; line-height: .92;
  letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 10px 32px rgba(0,0,0,.5);
}
.pt-lede { max-width: 62ch; margin: 22px 0 0; color: #d8cbb8; font-size: 17px; line-height: 1.6; }
.pt-lede + .pt-lede { margin-top: 14px; color: var(--k-ink-3); font-size: 15px; }

/* ---- the form itself ---- */
.pt-band { padding: clamp(38px,5vh,60px) clamp(20px,4.2vw,64px) clamp(52px,7vh,88px); background: var(--k-page); }
.pt-form { max-width: 1180px; margin: 0 auto; }
.pt-set { margin: 0 0 34px; padding: 0; border: 0; }
.pt-set:last-of-type { margin-bottom: 26px; }
.pt-legend {
  width: 100%; margin: 0 0 20px; padding: 0 0 12px;
  border-bottom: 1px solid rgba(255,196,81,.20); color: var(--k-accent-soft);
  font: 750 11px/1 "Libre Franklin", sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.pt-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; }
.pt-span2 { grid-column: 1 / -1; }
.pt-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pt-label {
  display: flex; align-items: baseline; gap: 8px; color: var(--k-ink);
  font: 700 12px/1.3 "Libre Franklin", sans-serif; letter-spacing: .07em; text-transform: uppercase;
}
.pt-opt { color: var(--k-ink-3); font-weight: 500; letter-spacing: .04em; text-transform: none; }
.pt-hint { margin: 0; color: var(--k-ink-3); font-size: 13px; line-height: 1.5; }

.pt-input, .pt-select, .pt-textarea {
  width: 100%; min-height: 52px; padding: 13px 15px; border-radius: var(--k-radius);
  border: 1px solid rgba(255,196,81,.22); background: var(--k-well); color: #fff4df;
  font-family: "Libre Franklin", "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none; appearance: none;
}
.pt-textarea { min-height: 132px; resize: vertical; }
.pt-input::placeholder, .pt-textarea::placeholder { color: #8b8172; }
.pt-input:hover, .pt-select:hover, .pt-textarea:hover { border-color: rgba(255,196,81,.38); }
.pt-input:focus, .pt-select:focus, .pt-textarea:focus {
  outline: none; border-color: var(--k-accent); background: #171009;
  box-shadow: 0 0 0 3px rgba(255,196,81,.18);
}
/* The chevron is drawn, not a glyph, so it recolors with the field. */
.pt-select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc451' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px 17px;
}
.pt-select option { background: #19130d; color: #fff4df; }

/* ---- the experience slider ---- */
.pt-slider { display: flex; flex-direction: column; gap: 12px; padding: 2px 2px 6px; }
.pt-readout {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  color: var(--k-accent); font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: .01em;
}
.pt-readout span { color: var(--k-ink-3); font: 700 11px/1 "Libre Franklin", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.pt-range {
  width: 100%; height: 30px; margin: 0; padding: 0; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.pt-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #3a2a14, #ffc451);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.pt-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -9px;
  border: 0; border-radius: 50%; background: linear-gradient(160deg,#ffe09b,#ffc451 60%,#f39b28);
  box-shadow: 0 4px 14px rgba(255,138,27,.45), inset 0 1px rgba(255,255,255,.6);
}
.pt-range::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #3a2a14, #ffc451);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.pt-range::-moz-range-thumb {
  width: 24px; height: 24px; border: 0; border-radius: 50%;
  background: linear-gradient(160deg,#ffe09b,#ffc451 60%,#f39b28);
  box-shadow: 0 4px 14px rgba(255,138,27,.45), inset 0 1px rgba(255,255,255,.6);
}
.pt-scale { display: flex; justify-content: space-between; gap: 8px; }
.pt-scale span { color: var(--k-ink-3); font: 700 10px/1.2 "Libre Franklin", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.pt-scale span:last-child { text-align: right; }

/* ---- a three-slot list (favourite games) ---- */
.pt-slots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }

/* ---- footer of the form ---- */
.pt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; margin-top: 30px; }
.pt-note { flex: 1 1 320px; margin: 0; color: var(--k-ink-3); font-size: 12.5px; line-height: 1.6; }
.pt-submit { min-width: 260px; }
.pt-submit[disabled] { opacity: .55; cursor: progress; transform: none; }

/* Server- and browser-side messages share one look. */
.pt-alert {
  margin: 0 0 26px; padding: 15px 18px; border-radius: var(--k-radius);
  border: 1px solid rgba(255,120,90,.4); background: rgba(120,38,20,.28); color: #ffd9cd;
  font-size: 14.5px; line-height: 1.55;
}
.pt-field[data-bad="1"] .pt-input,
.pt-field[data-bad="1"] .pt-select,
.pt-field[data-bad="1"] .pt-textarea { border-color: #ff7a5a; }
.pt-bad { margin: 0; color: #ff9d84; font-size: 12.5px; font-weight: 600; }

/* ---- the sent state ---- */
.pt-sent { max-width: 720px; margin: 0 auto; padding: 44px 34px; text-align: center; }
.pt-sent-mark {
  width: 74px; height: 74px; margin: 0 auto 26px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(160deg,#ffe09b,#ffc451 60%,#f39b28);
  box-shadow: 0 18px 44px rgba(255,138,27,.32);
}
.pt-sent-mark svg { width: 34px; height: 34px; fill: none; stroke: #1c1203; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pt-sent h2 {
  margin: 0 0 14px; color: #fff4df; font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 46px; font-weight: 800; line-height: .98; letter-spacing: -.03em;
}
.pt-sent p { margin: 0 auto 10px; max-width: 52ch; color: #d8cbb8; font-size: 16px; line-height: 1.6; }
.pt-sent .btn-quiet { margin-top: 22px; }

@media (max-width: 860px) {
  .pt-grid { grid-template-columns: 1fr; }
  .pt-slots { grid-template-columns: 1fr; }
  .pt-submit { width: 100%; }
}
@media (max-width: 560px) {
  .pt-title { font-size: clamp(40px,11vw,54px); }
  .pt-sent h2 { font-size: 34px; }
}

/* ============================ NEWS ============================
   The posts here are rebuilt at runtime from a Google Doc, so nothing in
   this block may depend on markup a human wrote by hand. Everything is
   selected by element or by the four .news-* classes the parser emits:
   .news-post, .news-stamp, .news-title, .news-body. */
.news-list { display: flex; flex-direction: column; }
.news-post {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 34px;
  padding: 30px 0; border-top: 1px solid rgba(255,196,81,.14);
}
.news-post:first-child { border-top: 0; padding-top: 4px; }
/* Breathing room above a post you arrive at by its share link, so the headline
   does not sit flush against the top edge. Not nav clearance -- .forge-nav is
   position: relative and scrolls away -- but the rails set the same kind of
   margin, and a post is a link target now too. */
.news-post[id] { scroll-margin-top: 86px; }

/* The left gutter holds the date and the share control, stacked, so a run of
   posts scans as a timeline rather than as stacked headings. The gutter is
   placed explicitly and the body left to flow, or the body would drop into the
   gutter beneath the date instead of staying under the title. */
.news-meta {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 13px;
  padding-top: 7px;
}
.news-stamp {
  color: var(--k-accent); font-family: var(--font-num);
  font-size: calc(12px * var(--k-body-scale)); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.news-title {
  grid-column: 2; grid-row: 1;
  margin: 0 0 12px; color: #fff4df;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: calc(30px * var(--k-display-scale)); font-weight: 800;
  line-height: 1.02; letter-spacing: -.01em;
}
/* Spelled out, not an icon alone, and always drawn -- a control that only
   appears on hover does not exist on a touch screen. Sized and lettered like
   .btn-quiet so it reads as part of the same kit at a smaller scale. */
.news-share {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px; cursor: pointer;
  border: 1px solid rgba(255,196,81,.22); border-radius: var(--k-radius);
  background: #21170d; color: var(--k-ink-2);
  font-family: var(--font-num); font-size: calc(11px * var(--k-body-scale));
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.news-share svg { flex: 0 0 auto; opacity: .8; }
.news-share:hover { color: #ffc451; background: #291b0d; border-color: rgba(255,196,81,.4); }
.news-share:hover svg { opacity: 1; }
.news-body { grid-column: 2;
  color: var(--k-ink-2); font-size: calc(15px * var(--k-body-scale));
  line-height: calc(1.66 * var(--k-body-lh)); max-width: 68ch; }
.news-body > :first-child { margin-top: 0; }
.news-body > :last-child { margin-bottom: 0; }
.news-body p { margin: 0 0 12px; }
.news-body h4 {
  margin: 22px 0 8px; color: var(--k-ink); font-family: var(--font-num);
  font-size: calc(13px * var(--k-body-scale)); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.news-body ul, .news-body ol { margin: 0 0 12px; padding-left: 20px; }
.news-body li { margin: 0 0 6px; }
/* Google's nested levels arrive as their own lists; the parser re-nests them,
   so the inner list must not inherit the outer's bottom margin. */
.news-body li > ul, .news-body li > ol { margin: 6px 0 0; }
.news-body ul { list-style: none; padding-left: 0; }
.news-body ul > li { position: relative; padding-left: 18px; }
.news-body ul > li::before {
  content: ""; position: absolute; left: 3px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,196,81,.5);
}
.news-body ul ul > li::before { background: none; box-shadow: inset 0 0 0 1px rgba(255,196,81,.55); }
/* The three marks nest, so they have to stay legible in combination.
   Italic follows the FAQ convention: recoloured to amber rather than slanted.
   Neither loaded face carries a true italic, so slanting would be a
   synthesised oblique -- the highlight reads better and matches the rest of
   the page. Underline stays a line, because nothing else on the page is one. */
.news-body strong { color: var(--k-ink); font-weight: 700; }
.news-body em { font-style: normal; color: var(--k-accent-soft); }
.news-body u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.news-body a { text-decoration: underline; text-underline-offset: 2px; }

.js-newswrap { margin-top: 30px; }

@media (max-width: 760px) {
  /* One column: the gutter placement above has to be undone, or the explicit
     rows would leave the title and body stranded beside an empty first track. */
  .news-post { grid-template-columns: 1fr; gap: 0; padding: 24px 0; }
  .news-meta, .news-title, .news-body { grid-column: 1; grid-row: auto; }
  /* Side by side on a narrow screen: stacking them would push the headline a
     long way down the card for no gain. */
  .news-meta {
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 12px; width: 100%; padding-top: 0; margin-bottom: 12px;
  }
  .news-title { font-size: calc(26px * var(--k-display-scale)); }
}