:root{
  --bg: #120e0c;
  --bg-raised: #1a1411;
  --fg: #ece5da;
  --dim: #8d7e70;
  --red: #d5001f;
  --gold: #c9a24b;
  --cold: #6fe3d1;
  --rule: #33281f;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;}

html{
  background:var(--bg);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-display);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

a{color:inherit;}

:focus-visible{
  outline:2px solid var(--cold);
  outline-offset:3px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:1.5rem clamp(1.25rem, 4vw, 3rem);
  border-bottom:1px solid var(--rule);
}
.mark{
  font-family:var(--font-mono);
  font-size:0.95rem;
  letter-spacing:0.02em;
}
.mark-sub{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--dim);
  display:none;
}
@media (min-width:640px){
  .mark-sub{display:inline;}
}

main{
  max-width:1100px;
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  padding:clamp(4rem, 12vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem);
  max-width:46rem;
}

.cross{
  width:28px;
  height:28px;
  fill:var(--red);
  margin-bottom:2rem;
}
.cross.small{
  width:20px;
  height:20px;
  margin:0 auto 1.75rem;
}

h1{
  font-size:clamp(2.6rem, 7vw, 4.6rem);
  font-weight:900;
  line-height:0.98;
  letter-spacing:-0.02em;
  margin:0 0 1.75rem;
}

.hero-sub{
  font-size:clamp(1.1rem,2.4vw,1.35rem);
  color:var(--fg);
  margin:0 0 1.5rem;
  line-height:1.5;
  min-height:3em;
}

.cycler{
  font-family:var(--font-mono);
  color:var(--cold);
  border-bottom:1px solid rgba(111,227,209,0.35);
  padding-bottom:0.1em;
}

.hero-lede{
  color:var(--dim);
  max-width:36rem;
  font-size:1rem;
}

/* ---------- inventory ---------- */

.inventory{
  padding:clamp(2rem,5vw,3.5rem) 0;
  border-top:1px solid var(--rule);
}

.inventory-head{
  max-width:34rem;
  margin-bottom:2rem;
}

h2{
  font-size:clamp(1.5rem,3.4vw,2rem);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0 0 0.6rem;
}

.dim{
  color:var(--dim);
  margin:0;
  font-size:0.95rem;
}
.dim.small{
  margin-top:1rem;
  font-size:0.85rem;
}

.terminal{
  list-style:none;
  margin:0;
  padding:1.5rem clamp(1rem,3vw,1.75rem);
  background:var(--bg-raised);
  border-left:2px solid var(--red);
  font-family:var(--font-mono);
  font-size:0.9rem;
  display:grid;
  gap:0.85rem;
  overflow-x:auto;
}

.terminal li{
  white-space:nowrap;
}

.terminal b{
  font-weight:500;
  color:var(--fg);
}

.terminal .prompt{
  color:var(--red);
  margin-right:0.5em;
}

.terminal .flag{
  color:var(--dim);
}

/* ---------- generator ---------- */

.generator{
  padding:clamp(2.5rem,6vw,4rem) 0;
  border-top:1px solid var(--rule);
  text-align:left;
}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:0.9rem;
  margin:1.5rem 0 2rem;
}

.btn{
  font-family:var(--font-display);
  font-size:0.95rem;
  font-weight:600;
  padding:0.85rem 1.4rem;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform 0.15s ease, background 0.15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}

.btn-cold{
  background:transparent;
  color:var(--cold);
  border-color:rgba(111,227,209,0.4);
}
.btn-cold:hover{background:rgba(111,227,209,0.08);}

.btn-warm{
  background:var(--gold);
  color:#1a1411;
  border-color:var(--gold);
}
.btn-warm:hover{background:#d8b562;}

.idea-output{
  font-family:var(--font-mono);
  color:var(--cold);
  background:var(--bg-raised);
  padding:1rem 1.25rem;
  border-left:2px solid var(--cold);
  margin-bottom:1.25rem;
  font-size:0.92rem;
  word-break:break-word;
}

.choc-output{
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
  background:linear-gradient(155deg, #1d150d, #241a0f);
  border:1px solid rgba(201,162,75,0.35);
  border-radius:4px;
  padding:1.5rem;
  max-width:34rem;
}

.square{
  flex:none;
  width:56px;
  height:56px;
  border-radius:3px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 8px),
    linear-gradient(155deg, var(--gold), #8a6a2f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.choc-fact{
  margin:0 0 0.5rem;
  color:var(--fg);
  font-size:0.98rem;
}

.choc-line{
  margin:0;
  color:var(--gold);
  font-family:var(--font-mono);
  font-size:0.85rem;
}

/* ---------- manifesto ---------- */

.manifesto{
  max-width:34rem;
  margin:0 auto;
  padding:clamp(3rem,8vw,5rem) 0;
  border-top:1px solid var(--rule);
  text-align:center;
}

.manifesto p{
  font-size:1.05rem;
  color:var(--fg);
}

.signoff{
  margin-top:1.5rem;
  font-family:var(--font-mono);
  color:var(--dim);
  font-size:0.85rem;
}

footer{
  text-align:center;
  padding:2rem 1.25rem 3rem;
  color:var(--dim);
  font-family:var(--font-mono);
  font-size:0.75rem;
}