/* Ocean Hill — shared base for the section-options boards.
   Layout concept: each board = a stack of "option frames"; each frame holds a full-width mock of one homepage section.
   Single committed look (paper), intentionally not theme-switching: the site itself is a paper site.
   Palette = "E · Sun on Water" (design-system/colors.md). Type = "Soft Paper + Machine" (design-system/fonts.md). */

:root {
  color-scheme: light;
  /* paper */
  --paper: #f3e9d1; --paper-2: #faf3e2; --line: #dccfae;
  /* ink */
  --ink: #1b2f6b; --muted: #5a5f78;
  /* sea */
  --sea-900: #14245a; --sea-700: #1f4fa8; --sea-600: #2a63bf; --sea-500: #4a8fd6; --sea-300: #7fb0e0; --sea-100: #d7e6f4;
  --primary: var(--sea-700); --sun: #f3c766; --data: #276f50;
  /* engines */
  --organic: var(--sea-500); --organic-fill: var(--sea-300); --organic-text: #2667b5; --paid: var(--sea-700);
  /* night-ocean sections */
  --night: #0e1b3d; --night-2: #16295a; --night-ink: #f3e9d1; --night-muted: #a8b4cf; --night-data: #8fdcb4;
  /* board chrome (the frame around each option, not part of the site) */
  --board: #e9dfc6; --board-ink: #3a3f57;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-card: 14px; --r-pill: 999px;
  --shadow-card: 0 1px 0 rgba(27,47,107,.06), 0 10px 30px -12px rgba(20,36,90,.28);
  /* paper grain, used as an overlay */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .28  0 0 0 0 .15  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html { background: var(--board); }
body {
  margin: 0; background: var(--board); color: var(--board-ink);
  font: 400 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 40px 80px;
}
img, video { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sea-700); outline-offset: 3px; }

/* ---------- board chrome ---------- */
.board { max-width: 1320px; margin: 0 auto; display: grid; gap: 56px; }
.board-head { display: grid; gap: 10px; max-width: 760px; }
.board-head .kicker { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.board-head h1 { font: 600 clamp(32px, 4.5vw, 52px)/1.05 var(--f-display); color: var(--ink); font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.015em; }
.board-head p { color: var(--muted); max-width: 64ch; }

.option { display: grid; gap: 14px; }
.option-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.option-tag { font: 600 13px/1 var(--f-mono); letter-spacing: .08em; color: var(--paper); background: var(--ink); padding: 7px 10px; border-radius: 6px; }
.option-name { font: 600 22px/1.2 var(--f-display); color: var(--ink); }
.option-from { font: 400 13px/1.4 var(--f-mono); color: var(--muted); }
.option-why { color: var(--board-ink); max-width: 80ch; font-size: 15px; }
.option-why b { color: var(--ink); }

/* the "browser" holding the mock */
.frame {
  position: relative; overflow: hidden; border-radius: 16px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(27,47,107,.12), 0 30px 60px -30px rgba(20,36,90,.45);
  isolation: isolate;
}
.frame::after { /* paper grain over the whole mock */
  content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; z-index: 50;
}
.frame.night { background: var(--night); color: var(--night-ink); }
.frame.night::after { opacity: .12; mix-blend-mode: soft-light; }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(27,47,107,.06); border-bottom: 1px solid rgba(27,47,107,.08); font: 400 11px/1 var(--f-mono); color: var(--muted); position: relative; z-index: 51; }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(27,47,107,.18); }
.frame-bar span { margin-left: 10px; }
.frame.night .frame-bar { background: rgba(243,233,209,.05); border-color: rgba(243,233,209,.08); color: var(--night-muted); }
.frame.night .frame-bar i { background: rgba(243,233,209,.2); }
.mock { padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 64px); }

/* ---------- shared site components ---------- */
.wordmark { font: 700 22px/1 var(--f-body); letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.logo-img { display: block; mix-blend-mode: multiply; } /* logo.jpg has paper behind it; multiply melts it into the page */
.nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.nav-links { display: flex; gap: 22px; font-size: 15px; flex-wrap: wrap; }
.nav-links a { text-decoration: none; opacity: .85; }

.display { font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 0; line-height: 1.02; }
.display em { font-style: italic; font-weight: 500; color: var(--sea-700); }
.night .display em { color: var(--sea-300); }
.label { font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.night .label { color: var(--night-muted); }
.lede { font-size: clamp(16px, 1.4vw, 19px); color: var(--muted); max-width: 52ch; }
.night .lede { color: var(--night-muted); }
.num { font-family: var(--f-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: var(--r-pill); font: 600 15px/1 var(--f-body); text-decoration: none; border: 0; cursor: pointer; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--sea-900); }
.btn-sun { background: var(--sun); color: var(--sea-900); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(27,47,107,.35); }
.night .btn-ghost { color: var(--night-ink); box-shadow: inset 0 0 0 1.5px rgba(243,233,209,.35); }
.btn .arr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 13px; }

/* video card: a phone-ratio placeholder "post" with result overlay */
.vcard { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); color: #fff; background: var(--sea-700); max-width: 100%; }
.vcard .scene { position: absolute; inset: 0; }
.vcard .meta { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 4px; font-size: 12px; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.vcard .views { font: 600 18px/1 var(--f-display); }
.vcard .handle { font: 500 10.5px/1 var(--f-mono); opacity: .9; }
.vcard .plat { position: absolute; top: 9px; left: 9px; font: 600 9.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(14,27,61,.45); padding: 5px 7px; border-radius: 6px; backdrop-filter: blur(6px); }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--f-mono); letter-spacing: .06em; padding: 6px 9px; border-radius: var(--r-pill); background: var(--sea-100); color: var(--sea-900); }
.chip.up { background: #dcefe4; color: var(--data); }

/* stat card */
.stat { background: var(--paper-2); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-card); display: grid; gap: 4px; }
.stat .num { font-size: 30px; color: var(--sea-700); }
.night .stat { background: var(--night-2); box-shadow: none; }
.night .stat .num { color: var(--night-ink); }

/* placeholder brand logo (text wordmark until real logos exist) */
.brand { font-weight: 700; letter-spacing: -.02em; color: var(--ink); opacity: .72; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}