/* ============================================================================
   Oli's Anecdotes — expressive display layer
   ----------------------------------------------------------------------------
   Layered ON TOP of site.css for the landing and section-index surfaces only.
   The base type scale (--md-text-*) is deliberately untouched: this is the
   "branch deliberately" escape hatch design-system/README.md describes, not an
   inflation of the documentary base.

   Two rules, both inherited from site.css:
     1. No literal hex. Every colour resolves from var(--md-*). A hardcoded
        hex here is a bug — it would break admin theme editing.
     2. No new hues. Gradients and glows are color-mix() compositions of the
        four existing accents.
   ========================================================================== */

*{box-sizing:border-box}
body{
  margin:0;background:var(--md-surface);color:var(--md-on-surface);
  font-family:var(--md-font);font-size:var(--md-text-base);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.od-wrap{max-width:var(--od-wrap);margin:0 auto;padding:0 var(--md-space-6)}

/* --- scroll progress ------------------------------------------------------ */
.od-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;
  transform:scaleX(0);z-index:60;
  background:linear-gradient(90deg,var(--md-primary),var(--md-secondary),var(--md-teal));
}

/* --- nav (scroll-aware glass) --------------------------------------------- */
.od-nav{
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid transparent;
  transition:background .3s var(--od-ease),border-color .3s var(--od-ease),
             backdrop-filter .3s var(--od-ease),padding .3s var(--od-ease);
  padding:var(--md-space-4) 0;
}
.od-nav.is-stuck{
  background:color-mix(in srgb,var(--md-surface-low) 72%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--md-outline-variant);
  padding:var(--md-space-2) 0;
}
.od-nav-in{display:flex;align-items:center;gap:var(--md-space-4)}
.od-brand{display:flex;align-items:center;gap:var(--md-space-2);text-decoration:none;color:inherit}
.od-brand svg{height:30px;width:30px}
.od-word{font-weight:800;font-size:var(--md-text-xl);letter-spacing:-.02em}
.od-word .a{color:var(--md-primary)}
.od-navlinks{display:flex;gap:var(--md-space-1);margin-left:auto;flex-wrap:wrap}
.od-navlinks a{
  font-size:var(--md-text-sm);text-decoration:none;color:var(--md-on-surface-variant);
  padding:var(--md-space-2) var(--md-space-3);border-radius:var(--md-shape-full);
  border:1px solid transparent;transition:.18s var(--od-ease);
}
.od-navlinks a:hover{
  background:color-mix(in srgb,var(--md-primary) 10%,transparent);
  color:var(--md-on-surface);border-color:var(--md-primary-container);
}
.od-navlinks a:focus-visible,.od-cta:focus-visible,.od-card:focus-visible{
  outline:2px solid var(--md-primary);outline-offset:3px;
}

/* --- ambient aurora (composed only from existing accents) ------------------ */
.od-aura{position:absolute;inset:0 0 auto 0;height:120vh;pointer-events:none;overflow:hidden;z-index:0}
.od-aura i{
  position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.16;
  animation:od-drift 26s var(--od-ease) infinite alternate;
}
.od-aura i:nth-child(1){width:640px;height:640px;left:-12%;top:-14%;background:var(--md-primary)}
.od-aura i:nth-child(2){width:520px;height:520px;right:-8%;top:6%;background:var(--md-teal);animation-delay:-9s}
.od-aura i:nth-child(3){width:460px;height:460px;left:38%;top:34%;background:var(--md-secondary);animation-delay:-17s;opacity:.1}
@keyframes od-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,50px,0) scale(1.18)}}

/* --- HERO ----------------------------------------------------------------- */
.od-hero{position:relative;z-index:1;padding:var(--od-space-16) 0 var(--od-space-24)}
.od-hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--od-space-12);align-items:center}
.od-eyebrow{
  font-size:var(--md-text-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--md-teal);margin:0 0 var(--md-space-4);display:flex;align-items:center;gap:var(--md-space-2);
}
.od-eyebrow::before{content:"";width:26px;height:1px;background:var(--md-teal);opacity:.6}
.od-h1{
  font-size:var(--od-display-1);line-height:1.02;letter-spacing:-.035em;font-weight:800;
  margin:0 0 var(--md-space-6);text-wrap:balance;
}
/* Gradient headline text. background-clip:text paints the gradient ONLY inside
   the element's background box, and color is transparent — so any glyph ink
   outside that box gets no paint at all and simply disappears. At 74px the
   descenders reach 2.8px past the box, which silently ate the tail of the g in
   "writing". It looks exactly like a clipping bug and is not one: the solid
   white words on the line above keep their descenders, because they are
   painted by `color`, not by a background.
   Vertical padding on an inline element extends the background box without
   affecting line height, so this costs no layout. Sized well clear of the
   2.8px measured at the largest step, since the headline is a clamp(). */
.od-h1 .em{
  background:linear-gradient(96deg,var(--md-primary) 0%,var(--md-secondary) 52%,var(--md-teal) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.14em;
}
/* word-by-word mask reveal */
/* Word mask for the load reveal. `overflow:hidden` clips on BOTH axes, and the
   mask is sized to the line box — which is smaller than the glyph ink in two
   ways. Vertically: line-height 1.02 is under the font's natural line box, so
   descenders (g/y/p) sit below it. Horizontally: letter-spacing -.035em pulls
   the inline-block's width in tighter than the final glyph's ink.
   The padding opens room on every side; the equal negative margins cancel it,
   so layout is byte-identical to no padding at all.

   Verified by pixel-diffing the headline with ONLY `overflow` toggled between
   hidden and visible — with animations frozen, since the hero aura animates
   continuously and otherwise makes every screenshot differ. The two renders
   must come out identical; anything else means the mask is eating ink.

   The start transform must clear the TALLER mask, not just the span, or a
   sliver of text is visible before the reveal runs. */
.od-h1 .w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:.2em .08em;margin:-.2em -.08em;
}
.od-h1 .w>span{display:inline-block;transform:translateY(135%);opacity:0}
.od-lede{
  font-size:var(--od-display-3);color:var(--md-on-surface-variant);
  max-width:52ch;margin:0 0 var(--od-space-8);line-height:1.5;
}

/* stat strip */
.od-stats{display:flex;gap:var(--od-space-8);flex-wrap:wrap;margin:0 0 var(--od-space-8);padding:0;list-style:none}
.od-stat b{
  display:block;font-size:var(--od-display-2);font-weight:800;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--md-on-surface);
}
.od-stat span{
  display:block;font-size:var(--md-text-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--md-on-surface-variant);margin-top:var(--md-space-2);
}
.od-stat:nth-child(1) b{color:var(--md-primary)}
.od-stat:nth-child(2) b{color:var(--md-secondary)}
.od-stat:nth-child(3) b{color:var(--md-teal)}
.od-stat:nth-child(4) b{color:var(--md-tertiary)}

.od-actions{display:flex;gap:var(--md-space-3);flex-wrap:wrap}
.od-cta{
  display:inline-flex;align-items:center;gap:var(--md-space-2);text-decoration:none;
  font-size:var(--md-text-base);font-weight:600;padding:var(--md-space-3) var(--od-space-8);
  border-radius:var(--md-shape-full);transition:.25s var(--od-ease);
}
.od-cta.primary{
  color:var(--md-on-primary);background:linear-gradient(96deg,var(--md-primary),var(--md-secondary));
  box-shadow:0 6px 24px -8px color-mix(in srgb,var(--md-primary) 70%,transparent);
}
.od-cta.primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px -8px color-mix(in srgb,var(--md-primary) 85%,transparent)}
.od-cta.ghost{color:var(--md-on-surface);border:1px solid var(--md-outline-variant);background:color-mix(in srgb,var(--md-surface-c) 60%,transparent)}
.od-cta.ghost:hover{border-color:var(--md-primary-container);background:color-mix(in srgb,var(--md-primary) 8%,transparent);transform:translateY(-2px)}
.od-cta .arw{transition:transform .25s var(--od-ease)}
.od-cta:hover .arw{transform:translateX(4px)}

/* --- the living knowledge-net --------------------------------------------- */
.od-net{position:relative;aspect-ratio:1;width:100%;max-width:460px;margin-inline:auto}
.od-net svg{width:100%;height:100%;overflow:visible}
.od-net .edge-outer{stroke:color-mix(in srgb, var(--md-outline-variant) 85%, var(--md-outline));stroke-width:.5}
.od-net .edge-spoke{stroke:color-mix(in srgb, var(--md-outline-variant) 60%, var(--md-outline));stroke-width:.7}
.od-net .edge-outer,.od-net .edge-spoke{
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:od-draw 1.1s var(--od-ease) forwards;
}
@keyframes od-draw{to{stroke-dashoffset:0}}
.od-node{transform-box:fill-box;transform-origin:center;opacity:0;animation:od-pop .5s var(--od-ease) forwards}
@keyframes od-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.od-orbit{animation:od-float 9s ease-in-out infinite alternate;transform-origin:32px 32px}
@keyframes od-float{from{transform:rotate(-2.2deg) scale(.985)}to{transform:rotate(2.2deg) scale(1.015)}}
.od-pulse{opacity:0;animation:od-travel 2.8s var(--od-ease) infinite}
@keyframes od-travel{
  0%{opacity:0;transform:translate(0,0)}
  12%{opacity:.95}
  70%{opacity:.5}
  100%{opacity:0;transform:translate(var(--dx),var(--dy))}
}
.od-net-label{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  font-family:var(--md-mono);font-size:var(--md-text-2xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--md-on-surface-variant);opacity:.65;white-space:nowrap;
}

/* --- generic section scaffolding ------------------------------------------ */
.od-sec{position:relative;z-index:1;padding:var(--od-space-24) 0}
.od-sec-head{margin-bottom:var(--od-space-12);max-width:62ch}
.od-kicker{
  font-family:var(--md-mono);font-size:var(--md-text-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--md-teal);margin:0 0 var(--md-space-3);
}
.od-h2{font-size:var(--od-display-2);font-weight:700;letter-spacing:-.025em;margin:0 0 var(--md-space-3);line-height:1.1;text-wrap:balance}
.od-sub{font-size:var(--md-text-base);color:var(--md-on-surface-variant);margin:0;max-width:60ch}

/* --- cards ---------------------------------------------------------------- */
.od-card{
  position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--md-surface-c);border:1px solid var(--md-outline-variant);
  border-radius:var(--md-shape-lg);overflow:hidden;
  transition:transform .38s var(--od-ease),border-color .38s var(--od-ease),box-shadow .38s var(--od-ease);
}
.od-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .38s var(--od-ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%);
}
.od-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,var(--md-outline-variant));
  box-shadow:0 22px 48px -20px color-mix(in srgb,var(--accent) 55%,transparent),0 2px 8px rgba(0,0,0,.4)}
.od-card:hover::after{opacity:1}

/* procedural cover — hash(slug) drives angle+shift, register drives the accent */
.od-cover{
  position:relative;height:132px;flex:none;overflow:hidden;
  background:
    linear-gradient(var(--ang,120deg),
      color-mix(in srgb,var(--accent) 34%,var(--md-surface-c)) 0%,
      color-mix(in srgb,var(--accent2) 22%,var(--md-surface-c)) 58%,
      var(--md-surface-c) 100%);
}
.od-cover::before{
  content:"";position:absolute;inset:-40%;
  background:
    radial-gradient(circle at 22% 28%,color-mix(in srgb,var(--accent) 42%,transparent),transparent 42%),
    radial-gradient(circle at 76% 68%,color-mix(in srgb,var(--accent2) 34%,transparent),transparent 46%);
  filter:blur(14px);transition:transform .6s var(--od-ease);
}
.od-card:hover .od-cover::before{transform:scale(1.14) translate(-2%,-3%)}
.od-cover::after{ /* hairline grid — ties covers to the knowledge-net motif */
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--md-outline-variant) 70%,transparent) 1px,transparent 1px),
                   linear-gradient(90deg,color-mix(in srgb,var(--md-outline-variant) 70%,transparent) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom, black, transparent);
}
.od-cover .ico{
  position:absolute;left:var(--md-space-4);bottom:var(--md-space-4);z-index:2;
  width:44px;height:44px;display:grid;place-items:center;font-size:22px;line-height:1;
  border-radius:var(--md-shape-md);
  background:color-mix(in srgb,var(--md-surface) 62%,transparent);
  backdrop-filter:blur(8px);
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--md-outline-variant));
  transition:transform .38s var(--od-ease);
}
.od-card:hover .od-cover .ico{transform:scale(1.08) rotate(-4deg)}
.od-body{padding:var(--md-space-4);display:flex;flex-direction:column;gap:var(--md-space-2);flex:1}
.od-card h3{font-size:var(--md-text-lg);font-weight:600;margin:0;letter-spacing:-.01em}
.od-card p{font-size:var(--md-text-md);color:var(--md-on-surface-variant);margin:0;line-height:1.5}
.od-meta{display:flex;flex-wrap:wrap;gap:var(--md-space-2);margin-top:auto;padding-top:var(--md-space-3)}
.od-chip{
  font-size:var(--md-text-2xs);padding:3px var(--md-space-2);border-radius:var(--md-shape-full);
  border:1px solid var(--md-outline-variant);color:var(--md-on-surface-variant);
  letter-spacing:.06em;text-transform:uppercase;
}
.od-chip.documentary{color:var(--md-secondary);border-color:var(--md-secondary-container)}
.od-chip.deep-dive{color:var(--md-teal);border-color:color-mix(in srgb,var(--md-teal) 40%,transparent)}
.od-chip.storybook{color:var(--md-tertiary);border-color:var(--md-tertiary-container)}
.od-chip.comic{color:var(--md-primary);border-color:var(--md-primary-container)}

/* --- block 2: what's inside (asymmetric 12-col) ---------------------------- */
.od-inside{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--md-space-4)}
.od-inside>*:nth-child(1){grid-column:span 7}
.od-inside>*:nth-child(2){grid-column:span 5}
.od-inside>*:nth-child(3){grid-column:span 12}
.od-inside>*:nth-child(3) .od-cover{height:104px}
.od-toc{display:flex;flex-wrap:wrap;gap:var(--md-space-2);margin-top:var(--md-space-3)}
.od-toc span{
  font-size:var(--md-text-2xs);color:var(--md-on-surface-variant);
  padding:2px var(--md-space-2);border-radius:var(--md-shape-sm);
  background:color-mix(in srgb,var(--md-surface-high) 80%,transparent);
  border:1px solid var(--md-outline-variant);
}

/* --- block 3: featured ---------------------------------------------------- */
.od-feature{
  display:grid;grid-template-columns:5fr 7fr;gap:0;--accent:var(--md-secondary);--accent2:var(--md-primary);
  border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);
  background:var(--md-surface-c);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .38s var(--od-ease),border-color .38s var(--od-ease),box-shadow .38s var(--od-ease);
}
.od-feature:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 45%,var(--md-outline-variant));
  box-shadow:0 26px 56px -22px color-mix(in srgb,var(--accent) 60%,transparent)}
.od-feature .od-cover{height:100%;min-height:280px}
.od-feature-body{padding:var(--od-space-8);display:flex;flex-direction:column;gap:var(--md-space-3);justify-content:center}
.od-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:var(--md-space-2);
  font-size:var(--md-text-2xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--md-tertiary);padding:var(--md-space-1) var(--md-space-3);
  border-radius:var(--md-shape-full);
  background:color-mix(in srgb,var(--md-tertiary) 12%,transparent);
  border:1px solid var(--md-tertiary-container);
}
.od-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--md-tertiary);animation:od-blink 2.4s ease-in-out infinite}
@keyframes od-blink{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--md-tertiary) 60%,transparent)}50%{opacity:.65;box-shadow:0 0 0 5px transparent}}
.od-feature h3{font-size:var(--od-display-2);font-weight:700;letter-spacing:-.025em;margin:0;line-height:1.12}
.od-feature p{font-size:var(--md-text-base);color:var(--md-on-surface-variant);margin:0;max-width:54ch}

/* --- block 4: registers --------------------------------------------------- */
.od-regs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--md-space-4)}
/* Each register card links to an exemplar of that voice. They were divs
   before — card-shaped, in a grid beside real cards, with a coloured heading
   and an accent bar, and clicking one did nothing. Now that they are links,
   they carry the interaction affordances to match. */
.od-reg{
  position:relative;display:flex;flex-direction:column;
  padding:var(--od-space-8) var(--md-space-4) var(--md-space-4);
  border:1px solid var(--md-outline-variant);border-radius:var(--md-shape-lg);
  background:var(--md-surface-c);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .38s var(--od-ease),border-color .38s var(--od-ease),box-shadow .38s var(--od-ease),background .38s var(--od-ease);
}
a.od-reg{cursor:pointer}
a.od-reg:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--md-outline-variant));
  box-shadow:0 18px 40px -22px color-mix(in srgb,var(--accent) 65%,transparent);
}
a.od-reg:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* "Read one →" sits at the bottom, revealed on hover/focus so the card stays
   calm at rest but announces what a click does. */
.od-reg-go{
  margin-top:var(--md-space-3);font-size:var(--md-text-xs);color:var(--accent);
  opacity:0;transform:translateY(4px);
  transition:opacity .28s var(--od-ease),transform .28s var(--od-ease);
}
a.od-reg:hover .od-reg-go,a.od-reg:focus-visible .od-reg-go,.od-reg.is-on .od-reg-go{opacity:1;transform:none}
.od-reg-go .arw{display:inline-block;transition:transform .28s var(--od-ease)}
a.od-reg:hover .od-reg-go .arw{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  a.od-reg:hover{transform:none}
  .od-reg-go{opacity:1;transform:none;transition:none}
}
.od-reg::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);
  transform:scaleX(var(--s,.18));transform-origin:0 50%;transition:transform .5s var(--od-ease);
}
.od-reg.is-on{border-color:color-mix(in srgb,var(--accent) 50%,var(--md-outline-variant));
  background:color-mix(in srgb,var(--accent) 6%,var(--md-surface-c));
  box-shadow:0 18px 40px -24px color-mix(in srgb,var(--accent) 70%,transparent)}
.od-reg.is-on::before{transform:scaleX(1)}
.od-reg b{display:block;font-size:var(--md-text-lg);font-weight:600;margin-bottom:var(--md-space-2);color:var(--accent);letter-spacing:-.01em}
.od-reg p{font-size:var(--md-text-md);color:var(--md-on-surface-variant);margin:0 0 var(--md-space-3);line-height:1.5}
.od-reg .n{font-family:var(--md-mono);font-size:var(--md-text-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--md-on-surface-variant);opacity:.8;margin-top:auto}

/* --- block 5: latest ------------------------------------------------------ */
.od-latest{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--md-space-4)}

/* --- block 6: glossary CTA ------------------------------------------------ */
.od-glossary{
  position:relative;overflow:hidden;border-radius:var(--md-shape-lg);
  border:1px solid var(--md-outline-variant);
  background:linear-gradient(100deg,color-mix(in srgb,var(--md-primary) 11%,var(--md-surface-c)),
             color-mix(in srgb,var(--md-teal) 9%,var(--md-surface-c)));
  padding:var(--od-space-12);display:flex;gap:var(--od-space-8);
  align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.od-glossary h2{font-size:var(--od-display-2);font-weight:700;margin:0 0 var(--md-space-2);letter-spacing:-.025em}
.od-glossary p{margin:0;color:var(--md-on-surface-variant);max-width:48ch}

/* --- footer --------------------------------------------------------------- */
.od-foot{
  position:relative;z-index:1;border-top:1px solid var(--md-outline-variant);
  padding:var(--od-space-12) 0;font-size:var(--md-text-xs);color:var(--md-on-surface-variant);
}
.od-foot a{color:var(--md-secondary)}
.od-foot p{margin:0 0 var(--md-space-2);max-width:78ch}

/* --- scroll entrance ------------------------------------------------------ */
.od-rise{opacity:0;transform:translateY(26px);transition:opacity .7s var(--od-ease),transform .7s var(--od-ease)}
.od-rise.is-in{opacity:1;transform:none}

/* --- responsive ----------------------------------------------------------- */
@media (max-width:1000px){
  .od-hero-grid{grid-template-columns:1fr;gap:var(--od-space-12)}
  .od-net{max-width:340px;order:-1}
  .od-inside>*:nth-child(1),.od-inside>*:nth-child(2),.od-inside>*:nth-child(3){grid-column:span 12}
  .od-regs{grid-template-columns:repeat(2,1fr)}
  .od-latest{grid-template-columns:1fr 1fr}
  .od-feature{grid-template-columns:1fr}
  .od-feature .od-cover{min-height:170px}
}
@media (max-width:640px){
  .od-wrap{padding:0 var(--md-space-4)}
  .od-sec{padding:var(--od-space-16) 0}
  .od-hero{padding:var(--od-space-12) 0 var(--od-space-16)}
  .od-regs,.od-latest{grid-template-columns:1fr}
  .od-stats{gap:var(--md-space-6) var(--od-space-8)}
  .od-glossary{padding:var(--od-space-8)}
  .od-navlinks{display:none}
  .od-feature-body{padding:var(--md-space-4)}
}

/* --- motion off ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .od-rise{opacity:1;transform:none}
  .od-h1 .w>span{transform:none;opacity:1}
  .od-node{opacity:1}
  .od-edge,.edge-outer,.edge-spoke{stroke-dashoffset:0!important}
  .od-pulse{display:none}
}