/* Kitan Ogunfeibo — site styles.
 *
 * The design mock drives its entire layout from CSS custom properties, which
 * its preview harness rewrote in JS for a "Desktop" (1180px) or "Mobile"
 * (402px) frame. Here those two sets become real breakpoints, and the desktop
 * set is made fluid so the gap between them holds up: every clamp() below
 * reaches its maximum at 1180px, so at the mock's design width the rendered
 * values are identical to the mock's.
 *
 * Colour tokens are copied verbatim from the mock's two themes.
 */

/* ---------- base (from the mock's <helmet>) ---------- */

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

body {
  margin: 0;
  background: var(--bg);
  font-family: Onest, system-ui, sans-serif;
  color: var(--ink);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.72;
}

.hstrip {
  scrollbar-width: none;
}

.hstrip::-webkit-scrollbar {
  height: 0;
}

@keyframes vroll {
  0%, 15%   { transform: translateY(0); }
  20%, 35%  { transform: translateY(-44px); }
  40%, 55%  { transform: translateY(-88px); }
  60%, 75%  { transform: translateY(-132px); }
  80%, 95%  { transform: translateY(-176px); }
  100%      { transform: translateY(-220px); }
}

/* The mock rendered inside a fixed, rounded, scrolling frame. On the real site
 * the document scrolls and this is simply the page.
 *
 * Do not give this element an overflow. `overflow-x: hidden` promotes the
 * untouched axis to `overflow-y: auto`, which turns it into a scroll container
 * with zero scroll range — and a wheel chaining up out of a card strip then
 * stalled inside it for half a second before reaching the document. Nothing
 * overflows horizontally at any width from 402px up, so there is nothing to
 * clip. `scroll-behavior` went too: this is not the scroller, so it only
 * ever misled. validate.mjs asserts this stays a non-scroller. */
.site {
  position: relative;
  background: var(--bg);
  color: var(--ink);
}

/* All navigation is <button>-driven, so a visible focus ring matters. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- layout tokens: desktop (fluid, exact at >=1180px) ---------- */

:root {
  --locshow: block;
  --themeshow: flex;
  --mobhero: none;
  --deskhero: block;
  --moblist: none;
  --deskstrips: block;
  --barshow: block;
  --navshow: flex;
  --menushow: none;
  --railshow: block;

  --mobheroh: 598px;
  --cardh: 400px;
  --cardpush: 150px;
  --stripdir: row;
  --stripx: auto;
  --leadh: 280px;

  --sec: clamp(70px, 9.33vw, 110px);
  --gl: clamp(28px, 11.02vw, 130px);
  --gr: clamp(24px, 8.48vw, 100px);
  --pv: clamp(80px, 11.02vw, 130px);
  --hpad: 26px clamp(20px, 3.73vw, 44px) 14px;

  --split: clamp(190px, 25.43vw, 300px) minmax(0, 1fr);
  --c4: repeat(4, minmax(0, 1fr));
  --c3: repeat(3, minmax(0, 1fr));
  --c2: repeat(2, minmax(0, 1fr));
  --artcol: minmax(0, 680px) minmax(0, 1fr);
  --wrow: clamp(100px, 12.72vw, 150px) minmax(0, 1fr) clamp(140px, 18.65vw, 220px) 80px;
  --arow: clamp(96px, 11.02vw, 130px) minmax(0, 1fr) 90px;
  --feat: minmax(0, 1fr) clamp(240px, 35.6vw, 420px);

  --h1: clamp(72px, 11.19vw, 132px);
  --hero: clamp(140px, 24.58vw, 290px);
  --h2: clamp(44px, 5.43vw, 64px);
  --ah1: clamp(40px, 5.26vw, 62px);
  --feath: clamp(34px, 4.58vw, 54px);
  --lede: clamp(22px, 2.55vw, 30px);
  --nextf: clamp(30px, 3.73vw, 44px);

  --card: clamp(280px, 30.51vw, 360px);
  /* also bounded by viewport height — the hero is 100vh, not a fixed 820px */
  --photo: min(clamp(420px, 59.33vw, 700px), 86vh);
  --shero: clamp(380px, 49.16vw, 580px);
  --sheromin: 420px;
  --sheromax: 760px;
}

/* ---------- layout tokens: mobile (the mock's Mobile frame, verbatim) ---------- */

@media (max-width: 700px) {
  :root {
    --locshow: none;
    --themeshow: none;
    --mobhero: block;
    --deskhero: none;
    --moblist: block;
    --deskstrips: none;
    --barshow: none;
    --navshow: none;
    --menushow: flex;
    --railshow: none;

    --mobheroh: 598px;
    --cardh: auto;
    --cardpush: 20px;
    --stripdir: column;
    --stripx: visible;
    --leadh: 210px;

    --sec: 54px;
    --gl: 24px;
    --gr: 24px;
    --pv: 70px;
    --hpad: 56px 24px 12px;

    --split: minmax(0, 1fr);
    --c4: repeat(2, minmax(0, 1fr));
    --c3: minmax(0, 1fr);
    --c2: minmax(0, 1fr);
    --artcol: minmax(0, 1fr);
    --wrow: minmax(0, 1fr);
    --arow: minmax(0, 1fr);
    --feat: minmax(0, 1fr);

    --h1: 54px;
    --hero: 104px;
    --h2: 42px;
    --ah1: 34px;
    --feath: 30px;
    --lede: 21px;
    --nextf: 28px;

    --card: 100%;
    --photo: 380px;
    --shero: 360px;
    --sheromin: 360px;
    --sheromax: 360px;
  }

  /* the mock hides the call link on mobile; the Menu panel carries it instead */
  [data-bookcall] {
    display: none !important;
  }
}

/* The Menu button only exists on mobile; make sure an open panel cannot be
   left stranded on screen after a resize. */
@media (min-width: 701px) {
  [data-menupanel] {
    display: none !important;
  }
}

/* ---------- themes (colour tokens copied from the mock) ---------- */

/* Light is the default. It is on bare :root rather than [data-theme='light']
   so the page still renders correctly if the attribute is ever absent. */
:root {
  --bg: #f4f1ec;
  --ink: #1c1b19;
  --ink2: #4a4742;
  --mut: #6f6a62;
  --mut2: #8a857c;
  --line: rgba(28, 27, 25, 0.14);
  --line2: rgba(28, 27, 25, 0.3);
  --fill: rgba(28, 27, 25, 0.06);
  --fill2: rgba(28, 27, 25, 0.035);
  --heroink: #cdc7bd;
  --ghost: rgba(28, 27, 25, 0.13);
  --leadshadow: 0 18px 34px -16px rgba(28, 27, 25, 0.38);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --bg: #1a1d22;
  --ink: #ebe7de;
  --ink2: rgba(235, 231, 222, 0.75);
  --mut: rgba(235, 231, 222, 0.55);
  --mut2: rgba(235, 231, 222, 0.45);
  --line: rgba(235, 231, 222, 0.16);
  --line2: rgba(235, 231, 222, 0.3);
  --fill: rgba(235, 231, 222, 0.07);
  --fill2: rgba(235, 231, 222, 0.04);
  --heroink: #ebe7de;
  --ghost: rgba(235, 231, 222, 0.14);
  --leadshadow: 0 20px 44px -18px rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}

/* In light mode the mock blends the stat roll and the scroll rail against the
   page so they read as knocked-out rather than tinted. These override inline
   styles on the same elements, hence !important. */
:root:not([data-theme='dark']) [data-roll],
:root:not([data-theme='dark']) [data-railwrap] {
  mix-blend-mode: difference;
}

:root:not([data-theme='dark']) [data-roll] div > div {
  color: #fff !important;
}

:root:not([data-theme='dark']) [data-railtop],
:root:not([data-theme='dark']) [data-railbot] {
  color: rgba(255, 255, 255, 0.82) !important;
}

:root:not([data-theme='dark']) [data-railline] {
  background: rgba(255, 255, 255, 0.42) !important;
}

:root:not([data-theme='dark']) [data-bar] {
  background: #fff !important;
}

/* The Writing lead image is a very light photograph. On the light page it sits
   fine; on the dark one it is the brightest thing on screen and pulls focus off
   the headline, so it is dimmed there only. */
:root[data-theme='dark'] [data-lead] {
  filter: brightness(0.74) contrast(1.08) saturate(0.8);
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  [data-roll] > div {
    animation: none;
  }

  /* scroll-reveal is applied inline by site.js; neutralise the transition */
  [data-page] > * {
    transition: none !important;
  }
}