/* ==========================================================================
   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: Signifier for the voice (the statement and every line of the
   essays, its italic in the site blue), Söhne Kräftig 500 for the essay titles you scan, Söhne Buch 400
   for labels (the dot pattern), ledes and meta, Söhne 450 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: 400 clamp(37.6px, min(5.076vw, 8.46vh), 78.96px)/1.06 var(--serif);
  letter-spacing: -0.021em; 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: 500; }

.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: 500 clamp(20px, 3.2vw, 48px)/1.06 var(--sans); letter-spacing: -0.024em; 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: 400 clamp(20.68px, 2.256vw, 30.08px)/1.2 var(--serif); letter-spacing: -0.014em; 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(24.44px, min(2.35vw, 4.136vh), 37.6px); line-height: 1.18; 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: 450 15px/1.2 var(--sans); letter-spacing: -0.006em;
  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: 400 clamp(20.68px, min(2.162vw, 4.136vh), 35.72px)/1.2 var(--serif);
  letter-spacing: -0.014em; 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(24.44px, 6.956vw, 30.08px); }
  .gl .lede { font-size: 14px; max-width: 32ch; }
  .sub { font-size: clamp(20.68px, 5.828vw, 26.32px); 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; }
}