:root{--ink:#090d0c;--panel:#101714;--line:#28322e;--muted:#98a49d;--paper:#ecf0ea;--lime:#b7ff3c;--lime-ink:#172100;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:1rem;top:1rem;z-index:5;background:var(--lime);color:var(--ink);padding:.65rem 1rem}.site-header,main,footer{width:min(calc(100% - 3rem),var(--max));margin:auto}.site-header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.wordmark{font-weight:800;letter-spacing:.11em;color:var(--paper);text-decoration:none;font-size:.93rem}.wordmark span{color:var(--lime)}nav{display:flex;gap:1.5rem}nav a,.text-link{color:var(--paper);text-underline-offset:.3em;text-decoration-color:var(--line)}nav a:hover,.text-link:hover{color:var(--lime)}.hero{padding:clamp(4rem,10vw,9rem) 0 5rem;max-width:850px}.eyebrow{margin:0 0:1rem;color:var(--lime);font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.hero h1,.statement h2,.contact h2{font-size:clamp(3rem,8vw,7rem);line-height:.96;letter-spacing:-.075em;margin:0}.hero h1 em{color:var(--lime);font-style:normal}.hero-copy{max-width:48ch;color:var(--muted);font-size:1.1rem;margin:2rem 0}.hero-actions,.card-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1rem;text-decoration:none;font-weight:800;border:1px solid transparent}.button-primary{background:var(--lime);color:var(--lime-ink)}.button-primary:hover{background:var(--button-hover)}.button-secondary{border-color:var(--line);color:var(--paper)}.availability,.card-meta{color:var(--muted);font-size:.8rem;margin:1rem 0 0}.product-section{padding:4rem 0;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem}.section-heading h2{font-size:1.3rem;margin:0}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.product-card{border:1px solid var(--line);background:var(--panel);min-width:0}.product-card-featured{grid-column:span 2}.card-topline{display:flex;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}.status{color:var(--muted)}.status-live{color:var(--lime)}.media-frame{height:220px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;padding:1.15rem;background:linear-gradient(135deg,var(--media-accent),var(--media-base));font-weight:800;font-size:clamp(1.4rem,3vw,2.4rem);letter-spacing:-.05em}.media-frame small{font-size:.72rem;font-weight:500;letter-spacing:.05em;color:var(--muted);margin-top:.4rem}.media-game{background:linear-gradient(135deg,var(--media-accent),var(--media-base))}.media-live{background:linear-gradient(135deg,var(--media-accent),var(--media-base))}.media-pubmint{background:linear-gradient(135deg,var(--media-accent),var(--media-base))}.card-body{padding:1.25rem}.card-body h3{font-size:1.6rem;letter-spacing:-.05em;margin:0}.card-body p:not(.card-meta){color:var(--muted);min-height:3rem}.statement,.contact{border-top:1px solid var(--line);padding:5rem 0;max-width:820px}.statement h2,.contact h2{font-size:clamp(2.2rem,5vw,4.3rem)}.statement>p:last-child,.contact>p:not(.eyebrow){color:var(--muted);max-width:56ch;font-size:1.08rem}.contact{padding-bottom:7rem}.contact-placeholder{display:inline-block;border:1px dashed var(--line);color:var(--muted);padding:.7rem 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}footer{border-top:1px solid var(--line);padding:1.4rem 0 2rem;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.78rem}a:focus-visible{outline:3px solid var(--lime);outline-offset:3px}@media(max-width:700px){.site-header,main,footer{width:min(calc(100% - 2rem),var(--max))}.site-header{height:70px}nav{gap:.8rem;font-size:.86rem}.hero{padding:4rem 0}.product-grid{grid-template-columns:1fr}.product-card-featured{grid-column:auto}.media-frame{height:190px}.section-heading{display:block}.section-heading .eyebrow{margin-bottom:.5rem}.statement,.contact{padding:4rem 0}.contact{padding-bottom:5rem}footer{gap:1rem;align-items:flex-start;flex-direction:column}}
.services{border-top:1px solid var(--line);padding:5rem 0;display:grid;grid-template-columns:1.25fr .75fr;gap:3rem;align-items:center}.services h2,.service-hero h1,.service-list h2,.engagement h2{font-size:clamp(2.2rem,5vw,4.7rem);line-height:.98;letter-spacing:-.065em;margin:0}.services-copy>p:not(.eyebrow),.service-hero p:not(.eyebrow),.engagement>p:not(.eyebrow){color:var(--muted);max-width:54ch;font-size:1.05rem}.character-stage{min-height:330px;border:1px solid var(--line);position:relative;overflow:hidden;background:linear-gradient(145deg,var(--panel),var(--ink));display:flex;align-items:flex-end;justify-content:center}.character-stage>img:first-child{height:290px;max-width:78%;position:relative;z-index:2;filter:drop-shadow(12px 15px 0 #070a08)}.character-stage .desk-mark{position:absolute;width:110%;bottom:-3px;opacity:.44;filter:sepia(1) saturate(2) hue-rotate(25deg)}.contact-intents{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.4rem 0}.contact-intents a{border:1px solid var(--line);color:var(--paper);padding:.65rem .8rem;text-decoration:none}.contact-intents a:hover{border-color:var(--lime);color:var(--lime)}.contact-email{color:var(--lime);font-weight:800;text-underline-offset:.28em}.service-hero{padding:clamp(4rem,9vw,8rem) 0 5rem;display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}.service-hero h1 em{font-style:normal;color:var(--lime)}.service-character{min-height:390px}.service-list,.engagement{border-top:1px solid var(--line);padding:5rem 0}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.service-grid article{border:1px solid var(--line);background:var(--panel);padding:1.2rem}.service-grid h3{margin:0;font-size:1.2rem}.service-grid p{color:var(--muted)}.engagement{max-width:820px;padding-bottom:7rem}@media(max-width:700px){.services,.service-hero{grid-template-columns:1fr;gap:1.5rem;padding:4rem 0}.character-stage{min-height:260px;order:-1}.character-stage>img:first-child{height:240px}.service-grid{grid-template-columns:1fr}.service-list,.engagement{padding:4rem 0}.engagement{padding-bottom:5rem}}
.media-screenshot{padding:0;display:block;background:#0a0d0b;position:relative}.media-screenshot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.media-screenshot figcaption{position:absolute;left:.75rem;bottom:.7rem;background:var(--panel);border:1px solid var(--line);color:var(--paper);font-size:.7rem;letter-spacing:.06em;padding:.35rem .5rem;text-transform:uppercase}
.wordmark{display:inline-flex;gap:0;align-items:center}.wordmark .wordmark-o{height:1.05em;width:1.05em;object-fit:contain;margin:0 .06em 0 .04em;position:relative;top:.02em;flex:0 0 auto}.hero{position:relative}.hero-visual{position:absolute;right:-4rem;bottom:1rem;width:min(34vw,330px);height:280px;border:1px solid var(--line);background:radial-gradient(circle at 32% 18%,var(--media-accent) 0,transparent 40%),linear-gradient(145deg,var(--panel),var(--ink));overflow:hidden;pointer-events:none}.hero-icon{position:absolute;width:180px;right:-36px;top:-28px;opacity:.25;filter:sepia(1) saturate(4) hue-rotate(25deg)}.hero-avatar{position:absolute;bottom:-2px;right:15%;height:250px;filter:drop-shadow(13px 15px 0 #070a08)}.about-hero{padding:clamp(4rem,9vw,8rem) 0 4rem;display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:center}.about-hero h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.96;letter-spacing:-.075em;margin:0}.about-hero h1 em{font-style:normal;color:var(--lime)}.about-hero p:not(.eyebrow),.about-contact>p{color:var(--muted);max-width:55ch;font-size:1.08rem}.about-portrait{height:360px;border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.about-portrait>img{max-height:320px;max-width:100%;width:auto;height:auto;z-index:2}.about-portrait>img+img{position:absolute;width:240px;right:-65px;top:-45px;opacity:.25;filter:sepia(1) saturate(4) hue-rotate(25deg)}.about-arc,.credentials,.about-contact{border-top:1px solid var(--line);padding:5rem 0}.about-arc h2,.credentials h2,.about-contact h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:.98;letter-spacing:-.065em;margin:0}.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}.timeline article,.credentials-grid article{border:1px solid var(--line);background:var(--panel);padding:1.25rem}.timeline img{height:82px;float:right;margin:-.35rem -.35rem .8rem .7rem;filter:drop-shadow(4px 5px 0 #080b09)}.timeline-date{margin:0;color:var(--lime);font-size:.75rem;font-weight:700;letter-spacing:.1em}.timeline h3,.credentials-grid h3{font-size:1.22rem;margin:.55rem 0}.timeline p:not(.timeline-date),.credentials-grid p{color:var(--muted)}.timeline-detail{border-top:1px solid var(--line);padding-top:.8rem;color:var(--paper)!important}.credentials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem}.veteran-logo-slot{border-style:dashed!important}.veteran-logo-slot span{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem}.about-contact{max-width:780px;padding-bottom:7rem}.about-contact a{color:var(--lime);font-weight:800}@media(max-width:800px){.hero-visual{position:relative;right:auto;bottom:auto;margin-top:2rem;width:100%;height:245px}.hero-avatar{height:225px}.about-hero{grid-template-columns:1fr;gap:1.5rem;padding:4rem 0}.about-portrait{height:275px}.about-portrait>img{max-height:240px}.about-portrait>img:first-child{height:245px}.about-arc,.credentials,.about-contact{padding:4rem 0}.timeline,.credentials-grid{grid-template-columns:1fr}.about-contact{padding-bottom:5rem}}@media(max-width:520px){.site-header{gap:.8rem}.site-header nav{gap:.55rem;font-size:.75rem}.site-header nav a:nth-child(1){display:none}.hero-visual{height:220px}}
.veteran-badge,.service-veteran{display:inline-flex;align-items:center;gap:.45rem;margin:0 0:1.1rem;padding:.48rem .72rem;border:1px solid var(--badge-border);background:var(--badge-bg);color:var(--lime);font-size:.8rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.veteran-badge span,.service-veteran span{color:var(--paper)}.service-veteran{font-size:.9rem;margin-bottom:1.35rem}@media(max-width:520px){.veteran-badge{font-size:.73rem;padding:.5rem .62rem}.hero h1{font-size:clamp(2.9rem,14vw,4.3rem)}.hero-actions .button-primary{width:100%}}

/* Etched circuit texture. The dark trace remains at its existing value until
   the supplied candidate renders are reviewed. */
body {
  background-image: url("assets/texture/circuit-etched.svg");
  background-repeat: repeat;
  background-size: 640px 480px;
}
/* Prose stays on ink. Existing opaque cards and panels need no changes. */
.site-header, footer,
.hero, .services, .statement, .contact,
.service-hero, .service-list, .engagement,
.about-hero, .about-contact,
.section-heading,
.about-arc > .eyebrow, .about-arc > h2,
.credentials > .eyebrow, .credentials > h2 {
  background-color: var(--ink);
}

/* The hero visual bleeds 4rem past the hero's right edge by design. Between
   801px and ~940px the viewport is too narrow for that overhang to land inside
   the window, so it pushed the whole document 40px sideways — a horizontal
   scrollbar on desktop. Below 801px the visual already stacks; extend that same
   tested layout up through the gap rather than inventing a third arrangement.
   Measured: overflow present 801-930px, clear at 950px and above. */
@media (min-width:801px) and (max-width:940px){
  .hero-visual{position:relative;right:auto;bottom:auto;margin-top:2rem;width:100%;height:245px}
}

/* Product-page section headings. The shared h2 renders at ~42px, a third
   larger than the h1 — which made "the fine print" the loudest thing on the
   page and the game's own name the quietest. These two sit deliberately below
   the h1 so the hierarchy reads product first, sections second. */
.statement h2.fine-print-title,.statement h2#feedback-title{font-size:clamp(1.25rem,3vw,1.55rem);line-height:1.2;letter-spacing:.01em;margin:2.4rem 0 .6rem}

/* Product story captures keep their 16:10 game viewport and open at full size. */
.rug-copy .media-screenshot { height:auto; aspect-ratio:8/5; padding:0; margin:1.5rem 0 2.5rem; }
.rug-copy .media-screenshot a { display:block; width:100%; height:100%; }
.rug-copy .media-screenshot img { height:100%; }

/* Scheme and component colours. */
:root {
  color-scheme: dark;
  --texture-image: none;
  /* Candidate C, chosen by Jerry 2026-09-22. 3.66:1 against --ink: the circuit
     reads as a board rather than a rumour, matching the light scheme's presence.
     Only the margins show it — prose sits on solid panels. */
  --texture-trace: #507263;
  --button-hover: #7fb829;
  --media-base: var(--panel);
  --media-accent: var(--ink);
  --badge-bg: rgba(183,255,60,.1);
  --badge-border: rgba(183,255,60,.7);
}
body { position: relative; isolation: isolate; background-image: var(--texture-image); }
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--texture-trace);
  mask-image: url("assets/texture/circuit-etched.svg");
  mask-repeat: repeat;
  mask-size: 640px 480px;
}
nav a,.text-link { text-decoration-color: var(--line); }
.button-primary { min-height: 52px; padding: .8rem 1.35rem; border: 2px solid var(--paper); font-weight: 900; }
.button-primary:hover { background: var(--button-hover); transform: translateY(-2px); }
.media-frame { color: var(--paper); background: linear-gradient(135deg,var(--media-accent),var(--media-base)); }
.media-frame small { color: var(--muted); }
.media-game { background: linear-gradient(135deg,var(--media-accent),var(--media-base)); }
.media-live,.media-pubmint { background: linear-gradient(135deg,var(--media-accent),var(--media-base)); }
.contact-placeholder { border-color: var(--line); }
.character-stage { background: linear-gradient(145deg,var(--panel),var(--ink)); }
.media-screenshot figcaption { background: var(--panel); border-color: var(--line); color: var(--paper); }
.hero-visual { background: radial-gradient(circle at 32% 18%,var(--media-accent) 0,transparent 40%),linear-gradient(145deg,var(--panel),var(--ink)); }
.veteran-badge,.service-veteran { border-color: var(--badge-border); background: var(--badge-bg); }
footer a { color: var(--paper); }
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ink: #f5f6ef;
    --panel: #ffffff;
    --line: #74806d;
    --muted: #505c52;
    --paper: #172119;
    --lime: #426800;
    --lime-ink: #f8ffe9;
    --button-hover: #223800;
    --texture-image: url("assets/texture/circuit-etched.svg");
    --badge-bg: rgba(66,104,0,.1);
    --badge-border: #426800;
  }
  body::before { display:none; }
}
@media (prefers-contrast: more) {
  :root { --ink:#000; --panel:#000; --paper:#fff; --muted:#e3e9e5; --line:#b5c4bb; }
  body { background-image:none; }
  body::before { display:none; }
  .button { border-width:2px; }
}
@media (prefers-color-scheme: light) and (prefers-contrast: more) {
  :root { --ink:#fff; --panel:#fff; --paper:#000; --muted:#253129; --line:#394a3d; --lime:#314e00; }
}
@media (forced-colors: active) {
  :root { --ink:Canvas; --panel:Canvas; --paper:CanvasText; --muted:CanvasText; --line:CanvasText; --lime:LinkText; --lime-ink:Canvas; }
  body { background-image:none; }
  body::before { display:none; }
  a { color:LinkText; }
  .button,.button-primary:hover { background:ButtonFace; color:ButtonText; border:2px solid ButtonText; }
  a:focus-visible { outline:3px solid Highlight; outline-offset:3px; }
}

/* PubMint product frame: the mark stands in until there is product art. */
.media-frame.pubmint-markframe{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.pubmint-markframe img{width:clamp(96px,22vw,160px);height:auto}

/* Vision section closing line — it lands on its own, so give it room. */
.vision-close{margin-top:1.4rem}

/* Product-page changelog groups sit under the section heading, not beside it. */
.statement h3.changelog-group{font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:1.6rem 0 .5rem}


/* The spiral IS the O in JERBOT, not a logo beside the word.
   gap:0 — the letters must close up or it reads as two separate things.
   height is .78em, set from cap height rather than the em box; sized off the
   em box the mark looks small next to the letters.
   The small side margins pull the adjacent letters to the optical spacing of
   the rest of the word — a round glyph needs less room than a square one.
   It scales with the type, so no separate mobile size is needed. */