/* Compute Local: the Overclock direction. A cut-and-paste zine: deep maroon,
   hot coral, chartreuse stickers, staggered cards, offset shadows. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #160a0e;
  --panel: #22111a;
  --text: #fbeee6;
  --muted: #d6b6b0;
  --line: #4a2a36;
  --ink: #160a0e;          /* text on coral and lime stickers */
  --coral: #ff5c39;        /* sticker and shadow surface */
  --coral-text: #ff5c39;   /* coral used as text on --bg */
  --lime: #d6ff3a;
  --lime-text: #d6ff3a;    /* links and lime headings on --bg */
  --sticker: #fbeee6;      /* the cream "paper" stickers */
  --on-sticker: #160a0e;
  --footer-bg: #160a0e;
  --footer-text: #fbeee6;
  --footer-muted: #d6b6b0;
  --focus: #d6ff3a;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* Light: the same zine on pale peach paper. Coral and lime stay as sticker
   surfaces with ink text; where they were used as text they darken so every
   pair clears 4.5:1 (coral-text 5.06:1, lime-text 5.35:1, muted 7.0:1). */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf3ea;
  --panel: #f3e4da;
  --text: #2a0f16;
  --muted: #6b4a52;
  --line: #d9c2c8;
  --ink: #160a0e;
  --coral-text: #c23310;
  --lime-text: #44700a;
  --sticker: #2a0f16;
  --on-sticker: #fbf3ea;
  --footer-bg: #2a0f16;
  --footer-text: #fbeee6;
  --footer-muted: #d6b6b0;
  --focus: #c23310;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #fbf3ea;
    --panel: #f3e4da;
    --text: #2a0f16;
    --muted: #6b4a52;
    --line: #d9c2c8;
    --ink: #160a0e;
    --coral-text: #c23310;
    --lime-text: #44700a;
    --sticker: #2a0f16;
    --on-sticker: #fbf3ea;
    --footer-bg: #2a0f16;
    --footer-text: #fbeee6;
    --footer-muted: #d6b6b0;
    --focus: #c23310;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 18px; line-height: 1.55; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lime-text); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.1; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); line-height: .95; max-width: 18ch; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
.wrap { max-width: 70rem; margin: 0 auto; padding: 0 1.25rem; }
.muted { color: var(--muted); }
.plain { list-style: none; padding: 0; margin: 0; }
.plain a { display: inline-block; padding: .45rem 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: .5rem; z-index: 100; padding: .6rem 1rem; font-weight: 700; background: var(--lime); color: var(--ink); }
.skip:focus { left: .5rem; }

.eyebrow { font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: var(--lime); display: inline-block; padding: .2rem .6rem; transform: rotate(-1.5deg); margin: 0 0 1rem; font-weight: 700; }
.lede { font-size: 1.2rem; max-width: 56ch; }

/* header */
.site-header { background: var(--bg); border-bottom: 3px solid var(--coral); position: sticky; top: 0; z-index: 10; }
.hdr { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: .6rem; padding-bottom: .6rem; }
.wordmark { font-weight: 900; text-transform: uppercase; color: var(--text); text-decoration: none; font-size: 1.1rem; display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; }
.mark { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; position: relative; background: var(--coral-text); box-shadow: 3px 3px 0 var(--lime); transform: rotate(12deg); margin: 0 5px 0 2px; vertical-align: -3px; }
.mark::after { content: ""; position: absolute; inset: 30%; background: var(--bg); }
.site-footer .mark { background: var(--coral); }
.site-footer .mark::after { background: var(--footer-bg); }
.nav { display: flex; flex-wrap: wrap; gap: .2rem; align-items: center; margin-left: auto; }
.nav a, .theme-toggle, .btn { min-height: 44px; display: inline-flex; align-items: center; }
.nav a { color: var(--text); text-decoration: none; font-weight: 800; text-transform: uppercase; font-size: .85rem; padding: .45rem .7rem; }
.nav a:hover { background: var(--coral); color: var(--ink); }
.theme-toggle { font: inherit; cursor: pointer; gap: .4em; background: none; border: 2px solid var(--lime-text); color: var(--lime-text); padding: .35rem .8rem; font-weight: 800; text-transform: uppercase; font-size: .8rem; margin-left: -.4rem; }
.theme-toggle:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .sun { display: none; }
:root.is-light .theme-toggle .sun { display: inline; }
:root.is-light .theme-toggle .moon { display: none; }
.no-js .theme-toggle { display: none; }
/* Phones: the header scrolls away instead of pinning three rows to the top of
   the screen. Wordmark and theme toggle share the first row, the nav takes the
   second, and the toggle keeps its label for screen readers only. */
@media (max-width: 48rem) {
  .site-header { position: static; }
  .hdr { gap: .25rem 1rem; }
  .theme-toggle { order: 1; margin-left: auto; padding: .35rem .6rem; }
  .theme-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav { order: 2; flex-basis: 100%; margin-left: -.5rem; }
  .nav a { padding: .45rem .5rem; }
}
/* The narrowest phones (360px Androids): four links on one row, no third row. */
@media (max-width: 24rem) {
  .nav { margin-left: -.25rem; }
  .nav a { padding: .45rem .25rem; font-size: .7rem; }
}

/* hero */
.hero { padding: clamp(2rem, 6vw, 5rem) 0 3rem; position: relative; overflow: hidden; border-bottom: 3px solid var(--coral); }
.hero .wrap { position: relative; }
.hero-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); }
.hero .wrap { position: relative; z-index: 1; }
.hero-art.art-dark { opacity: .3; }
.hero-art.art-light { display: none; opacity: .28; }
:root.is-light .hero-art.art-dark { display: none; }
:root.is-light .hero-art.art-light { display: block; }
/* Phones: the hero is taller than it is wide, and cover-cropping a 3:2 map
   into that box left a slice through the middle of the state. Show the whole
   map edge to edge behind the title instead and let the mask fade it out. */
@media (max-width: 48rem) {
  .hero-art { bottom: auto; height: auto; object-fit: fill; -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); }
  .hero-art.art-dark { opacity: .4; }
  .hero-art.art-light { opacity: .36; }
}
/* On phones the display type is capped by the width left inside the wrap
   padding (100vw - 2.5rem), so COMPUTE never runs past the right edge: 19% of
   that leaves 5.26em for a word that measures 4.5em in Roboto Black and about
   4.9em in the widest system sans. Desktop still lands on the 12rem cap. */
.display { font-size: clamp(2.5rem, min(2rem + 13vw, 19vw - .5rem), 12rem); line-height: .82; margin: 0 0 1rem; }
.display .l1 { display: block; color: var(--text); }
.display .l2 { display: block; color: var(--coral-text); margin-left: .6em; text-shadow: 6px 6px 0 var(--lime); }
@media (max-width: 40rem) { .display .l2 { margin-left: 0; text-shadow: 4px 4px 0 var(--lime); } }
.tagline { font-family: var(--mono); color: var(--lime-text); font-size: clamp(1.2rem, 1rem + 1.5vw, 2rem); font-weight: 700; margin: 0 0 1rem; transform: rotate(-1deg); display: inline-block; }
.ctas { display: flex; gap: .9rem; flex-wrap: wrap; margin: 1.5rem 0 2rem; }
.btn { text-decoration: none; font-weight: 900; text-transform: uppercase; padding: .8rem 1.3rem; border: 3px solid var(--text); color: var(--text); background: var(--bg); box-shadow: 5px 5px 0 var(--coral); }
.btn:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--coral); }
.btn.primary { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.btn.ghost { border-style: dashed; color: var(--muted); box-shadow: none; }
.btn.ghost:hover { transform: none; }
.stats { margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.stats div { background: var(--panel); border: 2px solid var(--line); padding: .5rem .9rem; transform: rotate(1deg); }
.stats div:nth-child(2) { transform: rotate(-1.5deg); }
.stats div:nth-child(3) { transform: rotate(.6deg); }
.stats dt { font-family: var(--mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.stats dd { margin: 0; font-size: 1.8rem; font-weight: 900; color: var(--coral-text); line-height: 1; }

/* band */
.band { background: var(--coral); color: var(--ink); font-weight: 900; text-transform: uppercase; font-size: 1.1rem; padding: .5rem 0; overflow: hidden; white-space: nowrap; border-bottom: 3px solid var(--lime); }
.band-track { display: inline-block; padding-left: 100%; animation: band 24s linear infinite; }
@keyframes band { to { transform: translateX(-100%); } }
.band .sep { margin: 0 .7em; }

/* sections */
.section { padding: clamp(2.5rem, 7vw, 6rem) 0; border-bottom: 3px solid var(--line); overflow-x: clip; }
.section.alt { background: var(--panel); }
.split, .bring, .footer-grid { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .split, .bring { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.bring { margin-top: 2.5rem; align-items: start; }

.card { background: var(--panel); border: 3px solid var(--text); padding: 1.5rem; position: relative; box-shadow: 8px 8px 0 var(--coral); }
.section.alt .card { background: var(--bg); }
.threads { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .threads { grid-template-columns: repeat(3, 1fr); align-items: start; } .thread:nth-child(2) { margin-top: 3rem; } .thread:nth-child(3) { margin-top: 1.5rem; } }
.thread .num { position: absolute; top: -1rem; right: 1rem; background: var(--lime); color: var(--ink); font-family: var(--mono); font-weight: 700; padding: .2rem .6rem; transform: rotate(3deg); }
.thread.t-inf { box-shadow: 8px 8px 0 var(--lime); }
.thread.t-com { box-shadow: 8px 8px 0 var(--muted); }
.sub { color: var(--muted); font-weight: 700; }
.thread ul { padding-left: 1.1em; margin: 0; }
.thread li { margin: .35rem 0; }

.outcomes { list-style: none; padding: 0; counter-reset: o; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .outcomes { grid-template-columns: 1fr 1fr; } }
.outcomes li { counter-increment: o; background: var(--sticker); color: var(--on-sticker); padding: 1rem 1.2rem 1rem 3.6rem; position: relative; font-weight: 800; transform: rotate(-.6deg); }
.outcomes li:nth-child(even) { transform: rotate(.7deg); background: var(--lime); color: var(--ink); }
.outcomes li::before { content: counter(o, decimal-leading-zero); position: absolute; left: 1rem; top: .9rem; font-family: var(--mono); font-weight: 700; }

.slots { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .slots { grid-template-columns: repeat(3, 1fr); } }
.slot { border: 3px dashed var(--line); min-height: 120px; display: grid; place-items: center; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-size: .8rem; }
.slot:nth-child(odd) { transform: rotate(-1deg); }
.slot:nth-child(even) { transform: rotate(1.2deg); }
.speakers { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .speakers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.speaker img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--text); margin-bottom: .9rem; }
.speaker .social { display: flex; gap: .5rem; margin: 0 0 .6rem; }
.speaker .social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); border: 2px solid var(--line); }
.speaker .social a:hover { background: var(--coral); color: var(--ink); border-color: var(--coral); }
.speaker .social svg { width: 20px; height: 20px; fill: currentColor; }
.speaker:nth-child(3n+1) { transform: rotate(-.8deg); }
.speaker:nth-child(3n+2) { transform: rotate(.6deg); }
.speaker h3 { font-size: 1.2rem; text-transform: none; }
/* trap: a stretched slot turns its aspect ratio into a column minimum and starves the other column */
.speakers .slot { min-height: 0; aspect-ratio: 1; align-self: start; }

.checks { list-style: none; padding: 0; font-weight: 700; }
.checks li { padding: .5rem 0 .5rem 2.2rem; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: .7rem; width: 1.1rem; height: 1.1rem; background: var(--coral); transform: rotate(8deg); }

.logos { list-style: none; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.logos li { border: 3px solid var(--text); background: var(--bg); padding: .75rem 1rem; box-shadow: 4px 4px 0 var(--lime); }
.logos a { color: var(--text); text-decoration: none; font-weight: 800; text-transform: uppercase; }
.logos img { max-height: 2.5rem; }

.links { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
@media (min-width: 48rem) { .links { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.card.link { display: flex; gap: 1rem; align-items: flex-start; text-decoration: none; color: inherit; box-shadow: 6px 6px 0 var(--lime); }
.card.link:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--lime); }
.card.link span { display: block; }
.card.link strong { display: block; font-size: 1.1rem; margin-bottom: .25rem; text-transform: uppercase; }
.card.link small { font-size: .95rem; color: var(--muted); }
.card.link .logo { width: 64px; height: 64px; flex: 0 0 64px; }
.fig { margin: 0; }
.fig img { border: 3px solid var(--text); transform: rotate(2deg); box-shadow: 8px 8px 0 var(--coral); }
.fig figcaption { font-size: .85rem; color: var(--muted); margin-top: 1rem; }

.faq div { margin: 0 0 1.25rem; border: 2px solid var(--line); padding: 1rem 1.2rem; background: var(--bg); }
.faq dt { font-weight: 700; margin-bottom: .25rem; text-transform: uppercase; color: var(--lime-text); }
.faq dd { margin: 0; }

/* prose pages */
.prose { padding: clamp(2.5rem, 6vw, 5rem) 1.25rem; max-width: 46rem; }
.prose h1 { font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem); line-height: .9; color: var(--coral-text); text-shadow: 4px 4px 0 var(--lime); margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 3px solid var(--coral); max-width: none; }
.prose li { margin: .35em 0; }
.prose table { border-collapse: collapse; width: 100%; margin: 1rem 0; border: 3px solid var(--text); }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border-top: 2px solid var(--line); vertical-align: top; }
.prose thead th { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; background: var(--lime); color: var(--ink); border-top: 0; }
.prose > table { display: block; overflow-x: auto; }

/* footer */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 3rem 0 2rem; border-top: 3px solid var(--coral); }
.site-footer a { color: var(--lime); }
.site-footer .muted { color: var(--footer-muted); }
.site-footer .eyebrow { transform: none; }
.footer-tagline { font-weight: 800; text-transform: uppercase; }
.colophon { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--line); font-size: .85rem; }

/* reduced motion: no marquee, no hover slide, and the stickers sit straight */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .band-track { padding-left: 0; }
  .btn:hover, .card.link:hover { transform: none; }
  .eyebrow, .tagline, .stats div, .thread .num, .outcomes li, .slot, .speaker, .checks li::before, .fig img { transform: none; }
}

.footer-brand { display: inline-flex; align-items: center; gap: .5rem; }
.footer-brand .mark { width: 16px; height: 16px; flex-basis: 16px; }