/* Kintsugi — product site, built around the brand mark.
   One brand accent: kintsugi gold. Green is kept only as the "safe/ok" signal.
   Red is the single danger/catastrophe accent. Calm until it must shout. */
:root {
  --bg: #0b0e16;
  --bg2: #0e1320;
  --panel: #121a2b;
  --line: #283557;
  --ink: #e8ecf5;
  --dim: #8b95ad;
  /* Brand: kintsugi gold (the molten seam). Primary accent everywhere. */
  --gold: #D4AF37;
  --gold-bright: #EBC65A;
  --gold-deep: #9C6F1C;
  --gold-shadow: #4a3608;   /* drop-shadow for gold pixel text on dark */
  /* Signal colors — meaning, not decoration. */
  --green: #5af78e;         /* "safe / ok" only (✓, running, intact) */
  --amber: #ffd866;
  --cyan: #6bd6ff;
  --magenta: #ff6ac1;
  --red: #ff5d5d;           /* the one danger accent */
  --accent: var(--gold);
  --term-bg: #070a11;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #16203a 0%, transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: "VT323", ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: .3px;
  -webkit-font-smoothing: none;
}

/* CRT scanlines + faint flicker, kept subtle so text stays readable. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
  opacity: .5;
  z-index: 9;
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: flicker 6s infinite steps(60); }
}
@keyframes flicker { 0%,97%{opacity:.5} 98%{opacity:.38} 100%{opacity:.5} }

h1, h2, h3, .pix, nav a, .btn, .tag, .kbd {
  font-family: "Press Start 2P", "VT323", monospace;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--gold-bright); }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

/* ---- top nav ---- */
header.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11,14,22,.9);
  border-bottom: 3px solid var(--line);
  backdrop-filter: blur(4px);
}
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { font-family: "Press Start 2P"; font-size: 16px; color: var(--gold);
  text-shadow: 2px 2px 0 var(--gold-shadow); display: inline-flex; align-items: center;
  line-height: 1; }
.brand .blink { color: var(--gold-bright); }
.brand img { margin-right: 7px; flex: none; }
.nav nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav nav a { font-size: 9px; color: var(--dim); line-height: 1; }
.nav nav a:hover, .nav nav a.active { color: var(--gold); }

/* landing highlight cards */
.cards { display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px; }
@media (min-width:760px){ .cards{grid-template-columns:1fr 1fr 1fr} }
.card { border:3px solid var(--line); background:var(--panel); padding:16px; }
.card h3 { font-family:"Press Start 2P"; font-size:10px; color:var(--gold); margin:0 0 10px; }
.card p { margin:0; font-size:19px; color:var(--dim); }
.card .k { color:var(--gold-bright); }

/* ---- buttons / chrome ---- */
.btn {
  display: inline-block; font-size: 10px; color: #1a1206;
  background: var(--gold); border: none; padding: 14px 18px;
  box-shadow: 4px 4px 0 var(--gold-deep); cursor: pointer;
  transition: transform .05s ease, box-shadow .05s ease;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 var(--gold-deep); color:#1a1206; }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--gold-deep); }
.btn.alt { background: var(--panel); color: var(--ink); box-shadow: 4px 4px 0 var(--line); }
.btn.alt:hover { color: var(--gold-bright); }

.tag { display:inline-block; font-size:8px; color:var(--gold); border:2px solid var(--line);
  padding:6px 8px; margin:2px; }

/* ---- hero ---- */
.hero { padding: 70px 0 30px; text-align: center; }
.hero h1 {
  font-size: 56px; margin: 0 0 6px; color: var(--gold); line-height: 1.1;
  text-shadow: 4px 4px 0 var(--gold-shadow), 8px 8px 0 #1f1604;
}
.hero .sub { font-size: 26px; color: var(--ink); margin: 0 auto 8px; max-width: 760px; }
.hero .sub b { color: var(--gold-bright); }
.hero .cta { margin: 22px 0 6px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero .note { color: var(--dim); font-size: 18px; }

/* ---- the brand hero: the logo lockup is the centerpiece ---- */
.brandhero { padding: 64px 0 34px; text-align: center; border-top: none; }
.lockup-frame { display: inline-block; margin: 0 auto 28px; max-width: 600px; width: 100%; }
.brandhero .lockup {
  display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto;
  /* a faint molten glow so the gold seam reads as the focal point */
  filter: drop-shadow(0 6px 26px rgba(212,175,55,.22));
}
/* The shard is near-black; on the cream light theme it would vanish. Float it
   on a quiet dark plate so the mark keeps its contrast in either theme. */
:root[data-theme="light"] .lockup-frame {
  background: #11151d; border: 1px solid #c9c0a6;
  border-radius: 14px; padding: 26px 22px; box-shadow: 0 6px 22px rgba(0,0,0,.12);
}
:root[data-theme="light"] .lockup-frame { margin-bottom: 26px; }
.brandhero .tagline {
  font-family: "Press Start 2P", monospace; font-size: 14px; color: var(--ink);
  line-height: 1.7; margin: 0 auto 14px; max-width: 640px;
}
.brandhero .tagline b { color: var(--gold-bright); }
.brandhero .sub { font-size: 24px; color: var(--dim); margin: 0 auto 10px; max-width: 720px; }
.brandhero .sub b { color: var(--ink); }
.brandhero .cta { margin: 26px 0 8px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.brandhero .note { color: var(--dim); font-size: 18px; }
/* a hairline gold rule under the hero — the single seam motif */
.seam { height: 0; border: none; border-top: 2px solid var(--gold);
  opacity: .5; max-width: 220px; margin: 30px auto 0; }
@media (max-width: 640px) {
  .brandhero { padding: 30px 0 22px; }
  .brandhero .lockup { max-width: 92%; margin-bottom: 20px; }
  .brandhero .tagline { font-size: 11px; }
  .brandhero .sub { font-size: 19px; }
}

/* ---- sections ---- */
section { padding: 46px 0; border-top: 3px dashed var(--line); }
section h2 { font-size: 20px; color: var(--gold); text-shadow: 3px 3px 0 var(--gold-shadow); }
section h2 .n { color: var(--gold-bright); }
.lead { font-size: 23px; color: var(--ink); max-width: 800px; }
.muted { color: var(--dim); }

/* ---- terminal window cards ---- */
.term {
  border: 3px solid var(--line);
  background: var(--term-bg);
  box-shadow: 6px 6px 0 rgba(0,0,0,.5);
  margin: 18px 0;
  overflow: hidden;
}
.term .bar {
  display: flex; align-items: center; gap: 8px;
  background: #141c30; border-bottom: 3px solid var(--line);
  padding: 8px 12px;
}
.term .dot { width: 12px; height: 12px; display: inline-block; }
.dot.r{background:var(--red)} .dot.y{background:var(--amber)} .dot.g{background:var(--green)}
.term .ttl { margin-left: 8px; font-family:"Press Start 2P"; font-size: 8px; color: var(--dim); }
.term pre {
  margin: 0; padding: 16px; overflow-x: auto;
  font-family: ui-monospace, "DejaVu Sans Mono", "Cascadia Mono", monospace;
  font-size: 14px; line-height: 1.45; color: #cdd6e6; letter-spacing: 0;
}
/* The full-screen TUI capture is ~118 cols; shrink so it fits without scroll. */
.term.wide pre { font-size: 11px; line-height: 1.3; }
.t-line { color: #6b7691; }
/* terminal accent classes */
.t-dim{color:var(--dim)} .t-grn{color:var(--green)} .t-amb{color:var(--amber)}
.t-red{color:var(--red)} .t-cy{color:var(--cyan)} .t-b{color:#fff;font-weight:bold}
.t-sel{ background:#1d2742; color:#fff; }

/* ---- feature grid ---- */
.grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.feat h3 { font-size: 13px; color: var(--cyan); margin: 0 0 4px; }
.feat p { margin: 6px 0 0; font-size: 21px; }

/* ---- flow diagram ---- */
.flow { display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; margin:18px 0; }
.flow .box { flex:1 1 150px; border:3px solid var(--line); background:var(--panel);
  padding:12px; min-width:150px; }
.flow .box h4 { font-family:"Press Start 2P"; font-size:9px; margin:0 0 8px; color:var(--gold); }
.flow .box.warn h4 { color: var(--red); }
.flow .box p { margin:0; font-size:18px; color:var(--dim); }
.flow .arrow { align-self:center; color:var(--gold); font-size:24px; }

/* ---- install ---- */
.cmd { position: relative; }
.cmd pre { background: var(--term-bg); border:3px solid var(--line); padding:14px 56px 14px 16px;
  margin:10px 0; overflow-x:auto; font-family: ui-monospace,"DejaVu Sans Mono",monospace;
  font-size:15px; color: var(--green); }
.cmd .copy { position:absolute; top:14px; right:10px; font-family:"Press Start 2P"; font-size:8px;
  background:var(--panel); color:var(--ink); border:2px solid var(--line); padding:7px 8px; cursor:pointer; }
.cmd .copy:hover { color: var(--green); }
.cmd .copy.ok { color: var(--green); border-color: var(--green); }

ul.checks { list-style:none; padding:0; }
ul.checks li { padding:4px 0 4px 28px; position:relative; font-size:21px; }
ul.checks li::before { content:"▸"; color:var(--gold); position:absolute; left:6px; }

.cols { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width: 760px){ .cols.two{grid-template-columns:1fr 1fr} }

footer { border-top:3px solid var(--line); padding:30px 0 60px; color:var(--dim); font-size:18px; }
footer a { color: var(--cyan); }
.spine { border:3px solid var(--line); border-left:8px solid var(--red); background:var(--panel);
  padding:14px 18px; margin:18px 0; }
.spine b { color: var(--red); }

.cast { display:block; margin:18px auto; max-width:760px; width:100%;
  border:3px solid var(--line); box-shadow:6px 6px 0 rgba(0,0,0,.5); }

/* theme toggle */
.themebtn { font-family:"Press Start 2P"; font-size:10px; background:var(--panel);
  color:var(--ink); border:2px solid var(--line); padding:7px 9px; cursor:pointer;
  display:inline-flex; align-items:center; line-height:1; }
.themebtn:hover { color:var(--gold); }

/* ---- the tour page ---- */
/* Each scene is a numbered story beat: a small 8-bit header, a square SVG
   animation on the left, plain-English copy on the right. The grid collapses
   to one column on mobile, with the SVG on top. */
.scene { padding: 50px 0; border-top: 3px dashed var(--line); }
.scene-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.scene-num {
  font-family: "Press Start 2P", monospace; font-size: 12px;
  color: var(--gold);
  background: var(--panel); border: 2px solid var(--line);
  padding: 8px 10px; line-height: 1;
}
.scene-head h2 {
  margin: 0; font-size: 18px; color: var(--gold);
  text-shadow: 3px 3px 0 var(--gold-shadow); line-height: 1.2;
}
.scene-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start;
}
@media (min-width: 760px) {
  .scene-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; }
}
.scene-svg {
  margin: 0;
  border: 3px solid var(--line);
  background: var(--term-bg);
  box-shadow: 6px 6px 0 rgba(0,0,0,.5);
  padding: 12px;
  border-radius: 6px;
  overflow: hidden;
}
.scene-svg svg { display: block; width: 100%; height: auto; }
.scene-body p { margin: 0 0 14px; font-size: 21px; color: var(--ink); }
.scene-body .lead { font-size: 23px; }
.scene-body .muted { font-size: 18px; }
.scene-finale { text-align: center; }
.scene-finale .lead { font-size: 26px; margin: 0 auto 22px; max-width: 760px; }
.scene-finale .cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px;
}
.scene-finale .note { color: var(--dim); font-size: 17px; }

/* Respect reduced-motion: the SVG SMIL animations are decorative; freeze them
   for anyone who's asked the OS to dial things back. */
@media (prefers-reduced-motion: reduce) {
  .scene-svg svg * { animation: none !important; }
  .scene-svg svg animate, .scene-svg svg animateTransform { display: none; }
}

/* Mobile tweaks for scenes. */
@media (max-width: 640px) {
  .scene { padding: 32px 0; }
  .scene-head { flex-wrap: wrap; gap: 10px; }
  .scene-head h2 { font-size: 14px; }
  .scene-num { font-size: 10px; padding: 6px 8px; }
  .scene-body p { font-size: 17px; }
  .scene-body .lead { font-size: 19px; }
  .scene-body .muted { font-size: 15px; }
  .scene-finale .lead { font-size: 20px; }
}

/* ---- hamburger (only visible <=640px) ---- */
/* The ☰ glyph isn't in "Press Start 2P", so a pixel font would fall back to a
   system font with odd vertical metrics and sit high in the box. Use the body
   monospace and center the glyph in a fixed square so it lines up with the
   brand on the header row. */
.navtoggle {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-family: ui-monospace, "DejaVu Sans Mono", monospace;
  font-size: 20px;
  line-height: 1;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--line);
  padding: 0;
  cursor: pointer;
}
.navtoggle:hover, .navtoggle[aria-expanded="true"] { color: var(--gold); }

/* ---- mobile layout ---- */
/* Phones: collapse the nav into a hamburger panel, shrink the hero, and stack
   the flow diagram vertically so the steps read top-to-bottom with one
   centered down-arrow between each box. */
@media (max-width: 640px) {
  /* Anchor every block to the viewport so a single overflowing element can't
     create a horizontal scrollbar that clips the whole page. */
  html, body { overflow-x: hidden; }

  .wrap { padding: 0 14px; }

  /* Header: brand + hamburger only; nav slides down on toggle. The fixed
     64px height is replaced by min-height so the wrapped nav has room to
     expand when open without clipping. */
  .nav .wrap { gap: 10px; height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .brand { font-size: 13px; }
  .navtoggle { display: inline-flex; }

  .nav nav {
    display: none;
    /* Full-bleed panel: break out of the .wrap's 14px side padding. Basis must
       be 100% + both paddings (not 100%, which is only the content width and
       leaves a gap on the right), and it must not shrink back. */
    flex: 0 0 calc(100% + 28px);
    margin: 0 -14px;
    padding: 8px 14px 14px;
    background: var(--bg);
    border-top: 2px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .nav[data-nav="open"] nav { display: flex; }
  .nav[data-nav="open"] .navtoggle { color: var(--gold); }
  .nav nav a { font-size: 11px; padding: 4px 0; }
  .themebtn { font-size: 11px; }

  /* Hero: the 56px Press Start title with double drop-shadow overflowed; this
     fits 320-414px viewports without horizontal scroll. */
  .hero { padding: 32px 0 18px; }
  .hero h1 { font-size: 36px; text-shadow: 2px 2px 0 #0a3a1f, 4px 4px 0 #06250f; }
  .hero .sub { font-size: 19px; }
  .hero .note { font-size: 15px; }
  .hero .cta { gap: 10px; }
  .hero .cta .btn { padding: 12px 14px; font-size: 9px; }

  /* Sections: tighter padding. */
  section { padding: 30px 0; }
  section h2 { font-size: 16px; }
  .lead { font-size: 19px; }

  /* Flow diagram: stack vertically with a down-arrow between each step. The
     desktop markup interleaves <div class="arrow">▶</div> between boxes; on
     mobile we hide the glyph (it's still in the DOM for desktop) and pin a ▼
     pseudo-element so the relationship reads top-to-bottom. */
  .flow { flex-direction: column; align-items: stretch; gap: 0; }
  .flow .box { flex: 0 0 auto; min-width: 0; padding: 14px; }
  .flow .arrow {
    align-self: center;
    font-size: 0;       /* hide the ▶ glyph without removing it */
    line-height: 1;
    padding: 6px 0;
  }
  .flow .arrow::before {
    content: "▼";
    font-size: 22px;
    color: var(--amber);
  }
}

/* ---- light theme (chrome flips; terminals stay dark, as terminals do) ----
   On cream, pure #D4AF37 is too pale to read, so the brand gold deepens to an
   antique gold for text/chrome while the gold *fill* on buttons stays warm. */
:root[data-theme="light"] {
  --bg:#f3efe3; --bg2:#efe9da; --panel:#fbf8ef; --ink:#1b2230; --dim:#5f6b80;
  --line:#c9c0a6; --green:#1f8a4c; --amber:#a9760a; --cyan:#1f6f8b; --red:#c0392b;
  --gold:#9C6F1C; --gold-bright:#B8860B; --gold-deep:#caa84e; --gold-shadow:#e7d9ab;
}
:root[data-theme="light"] body {
  background: radial-gradient(1200px 600px at 50% -10%, #fff8e6 0%, transparent 60%), var(--bg);
}
:root[data-theme="light"] .hero h1 { text-shadow: 3px 3px 0 #e7d9ab, 6px 6px 0 #f3ecd2; }
:root[data-theme="light"] body::after { opacity: .12; }
:root[data-theme="light"] .btn { color:#241a06; background:#d8b042; box-shadow:4px 4px 0 #caa84e; }
:root[data-theme="light"] .btn:hover { box-shadow:6px 6px 0 #caa84e; color:#241a06; }
/* the molten glow is invisible on cream; soften it into a subtle warm shadow */
:root[data-theme="light"] .brandhero .lockup { filter: drop-shadow(0 4px 14px rgba(156,111,28,.18)); }
:root[data-theme="light"] .seam { opacity: .8; }