/* ==========================================================================
   Blog — Field notes on making things people love (four essays, 2016–2019)
   Loads after site.css (tokens, nav, section nav, footer, button, cursor).

   One stage, one ring of 16:9 windows bent around the reader. A window opens from a card into a wide
   cinema screen, its story runs underneath as subtitles, then it closes and the ring turns to the next
   essay. With reduced motion, no WebGL or no JavaScript it is a static list of 16:9 frames.

   Typography follows the site system: serif Light 300 for the voice (the statement and every line of
   the essays, its italic in the site blue), Geist 600 tight for the essay titles you scan, Geist 400
   for labels (the dot pattern), ledes and meta, Geist 500 for the button you press. The essays are
   the section nav's chapters (Teams · Users · Markets · Trust), under the site nav as on every page.
   ========================================================================== */
:root {
  --accent: #0B57D0;           /* the site's own blue: these are Hozefa's notes, not a client's */
  --tint: #D3E3FD;
  --on-accent: #ffffff;
  --glass-strong: rgba(255, 255, 255, .72);
  --stage-1: #e9e7f2;
  --stage-2: #f2e6df;
  --stage-3: #e2ebe7;
  --stage-4: #f1ebdc;
  --serif: var(--font-serif);
  --sans: var(--font-sans);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --top-nav: calc(var(--nav-top) + var(--nav-h) + env(safe-area-inset-top, 0px));   /* the site nav alone */
  --clear: calc(var(--chrome) + env(safe-area-inset-top, 0px));                        /* site nav + section nav */
  --shadow-lens: 0 1px 2px rgba(15, 15, 13, .08), 0 8px 18px -8px rgba(15, 15, 13, .26), inset 0 1px .5px rgba(255, 255, 255, 1), inset 0 -1px 1px rgba(255, 255, 255, .6), inset 0 0 0 .5px rgba(15, 15, 13, .06);
}

/* ---------- shared type ---------- */
.label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 400 15px/1.3 var(--sans); color: var(--ink-2);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.meta { font: 400 13px/1.4 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cue {
  font: 400 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.arrow { width: 16px; height: 16px; flex: none; transition: transform .45s var(--ease); }
.arrow path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* line masks for text reveals */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.wi { display: inline-block; will-change: transform; }

/* ---------- the deck: static first (no JS, no WebGL, reduced motion) ---------- */
.stage { position: relative; }
.amb, .screen, .subs, .hint { display: none; }
.intro {
  display: grid; gap: 22px; width: min(100%, 1180px); margin-inline: auto;
  padding-block: calc(var(--top-nav) + 72px) 56px;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.statement {
  font: 300 clamp(40px, min(5.4vw, 9vh), 84px)/1.06 var(--serif);
  font-optical-sizing: auto; font-variation-settings: "SOFT" 0, "WONK" 0; letter-spacing: -.03em; max-width: 17ch; text-wrap: balance;
}
.statement em { font-style: italic; color: var(--accent); }
.lede { font-size: 16px; color: var(--ink-2); max-width: 46ch; }
.lede b { color: var(--ink); font-weight: 600; }

.essays {
  display: grid; gap: clamp(56px, 9vh, 104px); width: min(100%, 1280px); margin-inline: auto;
  padding-bottom: clamp(72px, 12vh, 128px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.essay { display: grid; gap: 28px; scroll-margin-top: calc(var(--clear) + 24px); }
.essay__frame {
  position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 28px; overflow: hidden;
  background: radial-gradient(70% 80% at 67% 52%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%), var(--stage);
  display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
}
.essay__head { display: grid; align-content: start; gap: 12px; padding: clamp(18px, 4.5%, 56px); min-width: 0; }
.essay__title { font: 600 clamp(20px, 3.2vw, 48px)/1.06 var(--sans); letter-spacing: -.04em; text-wrap: balance; }
.essay__art { position: relative; min-width: 0; padding: 6% 6% 6% 0; }
.essay__art .ill { width: 100%; height: 100%; display: block; }
.ill .ink { fill: var(--ink); }
.lines { display: grid; gap: 10px; max-width: 40ch; }
.lines li { font: 300 clamp(22px, 2.4vw, 32px)/1.2 var(--serif); font-variation-settings: "SOFT" 0, "WONK" 0; letter-spacing: -.02em; text-wrap: balance; }
.lines cite { display: block; margin-top: 6px; font: 400 13px/1.4 var(--sans); font-style: normal; color: var(--ink-2); letter-spacing: 0; }
.essay__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 760px) {
  .essay__frame { grid-template-columns: 1fr; aspect-ratio: auto; }
  .essay__art { aspect-ratio: 16 / 10; padding: 0 6% 6%; }
}

/* ---------- the deck: the ring (WebGL + motion) ---------- */
.gl .essays { display: none; }
.gl .deck { position: relative; height: var(--deck-h, 1400vh); }
.gl .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.gl .amb {
  display: block; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(48% 46% at 50% var(--amb-y, 45%), var(--amb, rgba(233, 231, 242, .9)), rgba(255, 255, 255, 0) 72%);
  transition: background-color .6s linear;
}
.gl .screen { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.gl .intro {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; width: auto; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 48px;
  padding-block: calc(var(--top-nav) + 30px) 0;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  pointer-events: none;
}
.gl .statement { font-size: clamp(26px, min(2.5vw, 4.4vh), 40px); line-height: 1.1; max-width: 21ch; }
.gl .lede { font-size: 15px; max-width: 30ch; padding-bottom: 4px; }
.sub-link {
  display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.2 var(--sans); letter-spacing: -.01em;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: var(--line-strong); transition: text-decoration-color .3s var(--ease), color .3s var(--ease);
}
.sub-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.sub-link:hover .arrow { transform: translate(2px, -2px); }
.gl .subs {
  display: grid; position: absolute; z-index: 2; left: 50%; top: var(--subs-top, 72%);
  translate: -50% 0; width: min(90vw, 52rem); text-align: center;
}
.subs__group { grid-area: 1 / 1; display: grid; justify-items: center; gap: 18px; visibility: hidden; }
.subs__lines { display: grid; }
.sub {
  grid-area: 1 / 1; font: 300 clamp(22px, min(2.3vw, 4.4vh), 38px)/1.2 var(--serif); font-variation-settings: "SOFT" 0, "WONK" 0;
  letter-spacing: -.02em; text-wrap: balance; max-width: 30ch; margin-inline: auto;
}
.sw { display: inline-block; }
.sub__cite { display: block; margin-top: 8px; font: 400 13px/1.4 var(--sans); color: var(--ink-2); letter-spacing: 0; }
.win-cta { display: none; }
.gl .win-cta {
  display: flex; position: absolute; z-index: 2; left: var(--cta-left, 8vw); bottom: var(--cta-bottom, 30vh);
  align-items: center; gap: 14px; visibility: hidden;
}
.gl .win-cta .btn { height: 42px; background: rgba(255, 255, 255, .38); }
@media (max-width: 760px) { .gl .win-cta .meta { display: none; } .gl .win-cta .btn { height: 36px; padding: 0 14px 0 16px; font-size: 14px; } }
.gl .hint {
  display: block; position: absolute; z-index: 2; left: 50%; translate: -50% 0;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px)); pointer-events: none;
}
@media (max-width: 760px) {
  .gl .intro { padding-top: calc(var(--top-nav) + 22px); flex-direction: column; align-items: flex-start; }
  .gl .statement { font-size: clamp(26px, 7.4vw, 32px); }
  .gl .lede { font-size: 14px; max-width: 32ch; }
  .sub { font-size: clamp(22px, 6.2vw, 28px); max-width: 22ch; }
  .gl .hint { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

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