/* site/style.css — oddlyuseful.studio
 *
 * Implements `Oddly Useful - Home.dc.html` from Eugene's claude.ai/design
 * project. Values here are lifted from that file's inline styles rather than
 * re-invented: the 10px awning at 42px stripe pitch, the 1140px measure with
 * 32px gutters, the 3px outlined display face, the 9px mono meta lines at
 * 0.08em tracking, the 30px 12px shelf rows on hairline rules.
 *
 * WHY IT IS REBUILT RATHER THAN SERVED. The .dc.html is a design-canvas
 * document — an <x-dc> template driven by support.js, a React harness needing
 * window.React. Serving it as-is means React from a CDN on every visit. The
 * behaviour is reimplemented in vanilla JS in app.js so that no third-party
 * request is made, which is what the page's privacy section promises.
 *
 * DEPARTURES FROM THE DESIGN — kept to the two that commerce forces, after an
 * earlier build cut things on my own judgement and had to put them back:
 * 1. A Register aisle is added, which the design does not have, because the
 *    shop sells something and its terms belong at the counter. Racket Sim
 *    joins the shelf as OU-001 for the same reason.
 * 2. Fonts are self-hosted (latin subsets, SIL OFL, licence in fonts/OFL.txt)
 *    rather than pulled from Google. This is invisible — same faces, same
 *    rendering — and it keeps the page's promise that no third party sees a
 *    visitor.
 *
 * Everything else follows the source, including the parts that are unfinished
 * in it: the Retired aisle's "Project name here", the Writing titles, and the
 * LinkedIn and GitHub buttons under their own "LINKS: TBC" note. Those are the
 * design's own honest placeholders and it is not this file's place to overrule
 * them. Night stays a `.night` class, as the design system specifies, rather
 * than an automatic preference switch.
 */

/* --- Fonts: self-hosted latin subsets ------------------------------------- */

@font-face { font-family: 'Zen Maru Gothic'; src: url('fonts/zen-maru-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Zen Maru Gothic'; src: url('fonts/zen-maru-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('fonts/archivo-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('fonts/martian-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('fonts/martian-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('fonts/martian-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('fonts/caveat-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, li, dl, dt, dd { margin: 0; }
ul { padding: 0; list-style: none; }

/* --- Tokens: from the design system --------------------------------------- */

:root {
  color-scheme: light;

  --paper: #f4f1e4;
  --sur: #fbf8ee;
  --ink: #3e4a45;
  --ink70: #3e4a45b3;
  --ink45: #3e4a4573;
  --rule: #3e4a4530;
  --teal: #4e7a72;
  --teal-d: #3a5f58;
  --rose: #c96f4a;
  --straw: #f0c987;
  --wist: #9fbf8f;
  --powder: #7e96b4;
  --coral: #f2c48d;
  --price: #a6382e;
  --shelf: #e7e2ce;
  --hand-ink: #c05a50;
  --on-teal: #f4f1e4;

  --font-display: 'Zen Maru Gothic', sans-serif;
  --font-body: Archivo, system-ui, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, monospace;
  --font-hand: Caveat, cursive;

  --measure: 1140px;
  --gutter: 32px;
}

/* NIGHT IS A CLASS, NOT A MEDIA QUERY — the design system specifies
 * "night = `.night` class on `<body>`", and the home page forces day on load.
 * An earlier build here auto-switched with prefers-color-scheme, which meant
 * dark-mode visitors saw a page the design never asked for. The palette stays
 * available for a future toggle; nothing applies it today. */
body.night {
  --paper: #17201f;
  --sur: #1f2b28;
  --ink: #f2e3c1;
  --ink70: #f2e3c1b3;
  --ink45: #f2e3c173;
  --rule: #f2e3c12e;
  --teal: #e3a857;
  --teal-d: #e3a857;
  --rose: #c4825e;
  --straw: #e3a857;
  --wist: #7e9678;
  --coral: #d98b5f;
  --powder: #7fb3b0;
  --price: #e8896b;
  --shelf: #243330;
  --hand-ink: #f0a88d;
  --on-teal: #17201f;
  background-color: var(--paper);
  color: var(--ink);
  transition: background-color 0.6s, color 0.6s;
}

/* --- Page ----------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

a { color: var(--teal-d); }

/* The design's meta line, used for every label on the page. */
.meta {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink45);
  line-height: 1.7;
}

/* --- The arrival sequence ------------------------------------------------- */

#intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: var(--paper);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}

#intro[hidden] { display: none; }

.greet {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 5vw, 44px);
  line-height: 1.2;
  color: var(--ink);
}

.greet small {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink45);
}

.door {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 50.5vw;
  background-color: var(--sur);
  border-inline: 2.5px solid var(--ink);
  z-index: 101;
  transition: transform 0.85s cubic-bezier(0.6, 0.05, 0.28, 0.99);
}

.door[hidden] { display: none; }
.door.l { left: 0; }
.door.r { right: 0; }
body.open .door.l { transform: translateX(-104%); }
body.open .door.r { transform: translateX(104%); }
body.entered .door { display: none; }

/* --- The awning ----------------------------------------------------------- */

.awning {
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 42px, var(--sur) 42px 84px);
  border-bottom: 2px solid var(--ink);
  opacity: 0.92;
}

/* --- Header --------------------------------------------------------------- */

header.top {
  position: sticky;
  top: 0;
  z-index: 90;
  background-color: var(--paper);
  border-bottom: 2.5px solid var(--ink);
}

.top .bar {
  max-width: var(--measure);
  margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}

.logo span { color: var(--teal-d); }

nav { display: flex; gap: 22px; align-items: center; margin-left: auto; flex-wrap: wrap; }

nav a {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

nav a:hover { border-bottom-color: var(--teal); }

nav a.cta {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0;
  background-color: var(--teal);
  color: var(--on-teal);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 16px;
}

nav a.cta:hover { background-color: var(--teal-d); }

.clock { flex: none; }

/* --- Hero ----------------------------------------------------------------- */

.hero { padding: 64px 0 30px; }

.hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.hero-meta b { color: var(--price); font-weight: 400; }

/* THE DISPLAY FACE IS OUTLINED, not filled — the design's signature move.
 * Filled is the default and the outline is applied only where the browser
 * supports the stroke: `color: transparent` without a working stroke would
 * render the largest words on the page invisible. */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.5s;
}

@supports (-webkit-text-stroke: 3px currentColor) {
  .display { color: transparent; -webkit-text-stroke: 3px var(--ink); }
  .display:hover { color: var(--ink); }
  a.display:hover { color: var(--teal); }
}

.hero h1 {
  font-size: clamp(60px, 11.4vw, 150px);
  line-height: 0.85;
  cursor: default;
}

.hero-foot {
  display: flex;
  gap: 34px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 26px;
}

.hero-foot .lede {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 25px);
  line-height: 1.3;
  max-width: 34ch;
  flex: 1;
  min-width: 280px;
}

.hero-foot .lede span { color: var(--teal-d); }

.hero-aside { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; flex: none; }

.chip {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  background-color: var(--straw);
  color: #3e4a45;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 14px;
}

.jump {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
}

.jump:hover { color: var(--teal-d); }

/* --- The banner rule between hero and aisles ------------------------------ */

.banner { border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); padding: 26px 0; }

.banner p {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(19px, 2.9vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* --- Aisles --------------------------------------------------------------- */

section { scroll-margin-top: 90px; padding: 52px 0 28px; }

.aisle-label { margin-bottom: 10px; letter-spacing: 0.1em; }

/* --- Shelf rows ----------------------------------------------------------- */

.row {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 30px 12px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.2s, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

a.row:hover { background-color: var(--sur); transform: translateX(6px); }

.row .code { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink45); flex: none; width: 52px; }

.row .name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(25px, 3.6vw, 38px);
  line-height: 1;
  flex: none;
}

.row .gap { flex: 1; min-width: 20px; }

.row .stat {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  color: var(--ink45);
  text-transform: uppercase;
  flex: none;
}

.row .go {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  color: var(--teal-d);
  text-transform: uppercase;
  flex: none;
}

/* The one row that costs money wears a price tag, in price red. */
.row .tag {
  flex: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 3px 12px;
  background-color: var(--paper);
  color: var(--price);
  font-family: var(--font-mono);
  font-size: 10px;
  white-space: nowrap;
}

.row .warn {
  flex-basis: 100%;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
  color: var(--ink70);
}

/* --- Writing: dashed rules and TBC tags, as the design has them ----------- */

.issue {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 22px 12px;
  border-bottom: 1px dashed var(--rule);
  flex-wrap: wrap;
}

.issue .code { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink45); flex: none; width: 52px; }

.issue .title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.15;
  color: var(--ink45);
}

.issue .gap { flex: 1; min-width: 20px; }

.tbc {
  flex: none;
  border: 1.5px dashed var(--price);
  border-radius: 999px;
  padding: 3px 12px;
  color: var(--price);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.08em;
}

.note { margin-top: 14px; }

/* --- Retired -------------------------------------------------------------- */

.gone {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 20px 12px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.gone .code { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink45); flex: none; width: 52px; }

.gone .name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.15;
  flex: none;
  color: var(--ink70);
}

.gone .why { font-size: 13px; color: var(--ink70); flex: 1; min-width: 240px; line-height: 1.45; }

.tbc.solid { border-style: solid; border-width: 2px; font-size: 8px; padding: 3px 8px; text-transform: uppercase; }

.tbc-note { color: var(--price); }

/* --- Studio --------------------------------------------------------------- */

.studio-grid { display: flex; gap: 44px; flex-wrap: wrap; align-items: flex-start; }

.method {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  flex: 1.4;
  min-width: 300px;
}

.method span { color: var(--teal-d); }

.tools { flex: 1; min-width: 260px; display: flex; flex-direction: column; }

.tools .head {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 6px;
}

.tools li { padding: 14px 2px; border-bottom: 1px solid var(--rule); }

.tools li span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.1;
}

/* --- Register: the terms, posted at the counter --------------------------- */

.register {
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background-color: var(--shelf);
  padding: clamp(18px, 3vw, 28px);
}

.register dt {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink);
  padding-top: 18px;
  border-top: 2px solid var(--rule);
}

.register dl > dt:first-child { padding-top: 0; border-top: 0; }
.register dd { margin-left: 0; padding-top: 8px; padding-bottom: 20px; font-size: 15px; }
.register dd:last-child { padding-bottom: 0; }

/* --- Contact -------------------------------------------------------------- */

/* Bottom padding clears the fixed gacha button, which would otherwise sit on
 * top of the colophon's right-hand line. */
footer { border-top: 2.5px solid var(--ink); padding: 56px 0 96px; }

.friction { font-size: clamp(40px, 7.5vw, 88px); line-height: 1; text-decoration: none; display: inline-block; }

@supports (-webkit-text-stroke: 3px currentColor) {
  .friction { -webkit-text-stroke: 2.5px var(--ink); }
}

.contact-sub { font-size: 14px; color: var(--ink70); margin-top: 10px; }

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 22px; }

.btn {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 11px 22px;
  color: var(--ink);
}

.btn.fill { background-color: var(--teal); color: var(--on-teal); }
.btn.fill:hover { background-color: var(--teal-d); }
.btn:hover { background-color: var(--sur); }
.btn.fill:hover { background-color: var(--teal-d); }

.colophon {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- Gacha ---------------------------------------------------------------- */

.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 45;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background-color: var(--straw);
  color: #3e4a45;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--ink);
}

.fab:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }

dialog.gacha {
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background-color: var(--sur);
  color: var(--ink);
  max-width: 30rem;
  width: calc(100vw - 2rem);
  padding: clamp(18px, 3vw, 26px);
}

dialog.gacha::backdrop { background-color: #17201fcc; }

.gacha h2 { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1.1; }

.capsule {
  margin-top: 16px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 18px;
  background-color: var(--paper);
}

.capsule .k { font-family: var(--font-mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink45); }
.capsule .s { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; }
.capsule .r { margin-top: 10px; font-size: 15px; color: var(--ink70); }

.gacha .controls { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }

.gacha button {
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 9px 18px;
  background-color: var(--teal);
  color: var(--on-teal);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}

.gacha button.ghost { background-color: transparent; color: var(--ink); }

/* --- Reveal --------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

:focus-visible { outline: 2.5px solid var(--teal-d); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}