/* ============================================================================
   PHOSPHOR — a retro-futurist Ghost theme
   Terminal-cold chrome · editorial-warm reading · a quiet knowledge graph
   ============================================================================ */

/* --- Self-hosted fonts — variable woff2s in assets/fonts/, no Google ping.
       Subsets: latin + latin-ext; unicode-range keeps downloads minimal. --- */
/* The Latin Space Grotesk face is declared in default.hbs so its source URL
   exactly matches the preload. Keeping it here too would download it twice. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Italic is deliberately STATIC (400 + 700) while roman stays variable.
   The variable italic face was 143 KB latin / 93 KB latin-ext, and Chrome
   fetches it at VeryHigh priority — on Fast 3G it outranked the Polaroids LCP
   photo and stole ~144 KB of a 1600 Kbps pipe during the LCP window. Every
   italic use in this theme sits at one of two weights (body italic and
   bold-italic inside post prose), so the axis range bought nothing. Instanced
   at wght 400/700, opsz 18 — the sizes italic actually renders at here are
   16-25 px, so pinning optical size is visually inert. 143 KB -> 22 KB.
   Do NOT collapse these back into a `font-weight: 200 800` variable face. */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-italic-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/newsreader-italic-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/newsreader-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/newsreader-italic-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;   /* dark scrollbars/native controls in non-webkit browsers too */

  /* The Void — surfaces & ink */
  --void: #06090d;
  --surface: #0d1219;
  --raised: #141b24;
  --hairline: #1e2733;
  --muted: #6e7987;      /* 4.5:1 on the void, ~3.9 on cards — quieter tier below --label */
  --label: #7d8895;      /* smallest mono labels — darkest grey ≥ 4.5:1 on all surfaces (R8) */
  --secondary: #97a3b2;
  --primary: #e9eff6;
  --paper: 237, 231, 218;

  /* Phosphors — the graph palette (rgb triplets for rgba()) */
  --cyan: 47, 224, 200;
  --green: 88, 239, 138;
  --violet: 177, 145, 255;
  --amber: 236, 201, 75;
  --magenta: 255, 92, 156;
  --slate: 120, 132, 146;

  --font-display: var(--gh-font-heading, 'Space Grotesk', system-ui, sans-serif);
  --font-body: var(--gh-font-body, 'Newsreader', Georgia, serif);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --glow-op: 1;            /* overridden by .glow-soft / .glow-bright */
  --wrap: 1120px;
}

.glow-soft  { --glow-op: 0.5; }
.glow-bright{ --glow-op: 1.4; }

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Always show the vertical scrollbar track so centered .wrap content doesn't
   shift a few px between pages that scroll and pages that don't.
   NOTE: scrollbar-gutter:stable was tried first and did NOT work here — with the
   custom ::-webkit-scrollbar plus macOS overlay scrollbars it reserved 0 on
   non-scrolling pages, so the shift persisted. overflow-y:scroll forces the 9px
   classic bar to always render (track is transparent, thumb only when
   scrollable), which keeps every room's centering identical. */
/* `scrollbar-gutter` is not redundant next to the forced scrollbar: the gutter
   is what survives when .cst-reader-locked switches the page to overflow:hidden
   for the expanded note. Without it the classic scrollbars on Windows and Linux
   vanish under the overlay and the fixed note jumps ~15px as it settles. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
/* Page scroll is parked while the note owns the viewport; the note's own
   .reader-scroll keeps scrolling normally. */
html.cst-reader-locked { overflow-y: hidden; }

body {
  background: radial-gradient(1300px 780px at 78% -12%, #0c1a22 0%, var(--void) 58%) no-repeat;
  background-color: var(--void);
  color: var(--primary);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: rgba(var(--cyan), 1); text-decoration: none; }
a:hover { color: #8ff4e4; }

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus {
  outline: none;
}
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid rgba(var(--cyan), 1);
  outline-offset: 4px;
  border-color: rgba(var(--cyan), .65) !important;
  box-shadow: 0 0 0 4px rgba(var(--cyan), .16), 0 0 22px -8px rgba(var(--cyan), calc(.9 * var(--glow-op)));
}

img { max-width: 100%; height: auto; display: block; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

::selection { background: rgba(var(--cyan), .3); }

/* Keyboard-only "skip to content" — parked above the viewport until focused */
.skip-link {
  position: absolute; left: 18px; top: -52px; z-index: 100;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--void); background: rgba(var(--cyan), 1);
  padding: 11px 16px; border-radius: 0 0 10px 10px; text-decoration: none;
}
/* plain :focus — the link sits offscreen, so only keyboard can ever reach it */
.skip-link:focus { top: 0; }

.portal-load-error {
  position: fixed; right: 18px; bottom: 18px; z-index: 260; display: flex;
  align-items: center; gap: 12px; max-width: min(440px, calc(100vw - 36px));
  padding: 12px 14px 12px 16px; border: 1px solid rgba(var(--magenta), .45);
  border-radius: 11px; background: rgba(11, 15, 22, .97);
  box-shadow: 0 18px 45px -20px rgba(0, 0, 0, .85);
  color: var(--secondary); font-family: var(--font-body); font-size: 14px;
}
.portal-load-error[hidden] { display: none !important; }
.portal-load-retry { flex: none; padding: 7px 11px; font-size: 11px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }

/* Shared outer rail: navigation, room intros, controls, cards, galleries,
   graph surfaces, archive lists, and the footer all resolve to 1120px. */
.room-intro,
.room-section { max-width: var(--wrap); }
.room-intro--standard { margin-top: 38px; }

/* Articles use the shared outer rail without stretching editorial content.
   The 720px prose measure is unchanged, and the 1000px feature cap keeps the
   existing 2000px source at a full 2x density on high-DPI/4K displays. */
.post-intro-inner { max-width: 720px; }
.post-feature-inner { max-width: 1000px; }
.post-body-shell .post-content {
  max-width: 720px;
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.post-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #141b22;
}
.post-author {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}
.post-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 86px;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgba(var(--cyan), .28);
  border-radius: 10px;
  color: rgba(var(--cyan), .9);
  background: rgba(var(--cyan), .035);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s;
}
.post-share:hover {
  color: rgba(var(--cyan), 1);
  border-color: rgba(var(--cyan), .58);
  background: rgba(var(--cyan), .075);
  box-shadow: 0 0 22px -12px rgba(var(--cyan), calc(.7 * var(--glow-op)));
}
.post-share.is-confirmed {
  color: rgba(var(--green), 1);
  border-color: rgba(var(--green), .45);
}

/* ---------- Eyebrow (mono, dotted) ---------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 13px;
  align-items: center;
}
.eyebrow .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(var(--cyan), 1);
  box-shadow: 0 0 12px rgba(var(--cyan), calc(.9 * var(--glow-op)));
}
.eyebrow .sep { color: #2b333d; }
.eyebrow .lead { color: var(--secondary); }

.dot-cyan { background: rgba(var(--cyan),1); box-shadow: 0 0 12px rgba(var(--cyan), calc(.9*var(--glow-op))); }
.dot-green { background: rgba(var(--green),1); box-shadow: 0 0 12px rgba(var(--green), calc(.9*var(--glow-op))); }
.dot-violet { background: rgba(var(--violet),1); box-shadow: 0 0 12px rgba(var(--violet), calc(.9*var(--glow-op))); }
.dot-amber { background: rgba(var(--amber),1); box-shadow: 0 0 12px rgba(var(--amber), calc(.9*var(--glow-op))); }
.dot-magenta { background: rgba(var(--magenta),1); box-shadow: 0 0 12px rgba(var(--magenta), calc(.9*var(--glow-op))); }
.dot-slate { background: rgba(var(--slate),1); box-shadow: 0 0 10px rgba(var(--slate), calc(.6*var(--glow-op))); }

/* ---------- Nav ----------------------------------------------------------- */
.site-nav {
  display: flex; align-items: center; gap: 18px;
  padding-top: 26px; padding-bottom: 20px;
  border-bottom: 1px solid #141b22;
}
.site-brand { display: flex; align-items: center; gap: 11px; }
.site-brand .mark {
  width: 20px; height: 20px;
  flex: none;
  object-fit: contain;
}
.site-brand .name {
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  letter-spacing: -.01em; color: #f2f6fb;
}
.site-menu {
  margin-left: auto; display: flex; align-items: center; gap: 26px;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .03em;
  color: var(--secondary);
}
/* padding+negative margin: same look, ≥24px touch target (WCAG 2.5.8) */
.site-menu a { color: var(--secondary); padding: 8px 4px; margin: -8px -4px; border-radius: 6px; transition: color .18s, text-shadow .18s; }
/* Room links sit quiet by default; hover lights each in its own phosphor —
   the same room→colour mapping the directory cards use. */
.site-menu a:hover, .site-menu a.active { color: var(--primary); }
.site-menu a.nav-notes:hover { color: rgba(var(--green),1); text-shadow: 0 0 15px rgba(var(--green), calc(.75 * var(--glow-op))); }
.site-menu a.nav-polaroids:hover { color: rgba(var(--magenta),1); text-shadow: 0 0 15px rgba(var(--magenta), calc(.75 * var(--glow-op))); }
.site-menu a.nav-about:hover { color: rgba(var(--amber),1); text-shadow: 0 0 15px rgba(var(--amber), calc(.75 * var(--glow-op))); }
.site-menu a.nav-graph:hover { color: rgba(var(--violet),1); text-shadow: 0 0 15px rgba(var(--violet), calc(.75 * var(--glow-op))); }
/* Account access belongs to the amber member system. Keep the nav footprint
   compact, but avoid the bright stock-button block that overpowered the mobile
   header. The stronger selector intentionally wins over `.site-menu a`. */
.site-menu .btn-signin {
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(var(--amber),1); background: rgba(var(--amber),.055);
  border: 1px solid rgba(var(--amber),.34);
  padding: 7px 11px; margin: -7px -11px;
  border-radius: 7px; font-weight: 500; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(var(--paper),.04),
              0 0 16px -10px rgba(var(--amber),.85);
}
.site-menu .btn-signin:hover {
  color: #ffe8a0; background: rgba(var(--amber),.11);
  border-color: rgba(var(--amber),.58);
}
/* The chip is a two-faced flip control: the identity face turns over to reveal
   "sign out", and the click after the flip is the one that acts. Both faces are
   stacked in the same grid cell so the pill keeps ONE width — whichever label is
   longer sets it, and the chip never resizes mid-flip and shoves the nav around.
   Reveal comes from :hover and :focus-visible; touch has neither, so
   member-chip.js adds .is-flipped on first tap (see the file for why one model
   covers both). */
.member-chip {
  display: inline-grid; align-items: center;
  color: rgba(var(--amber),1); border: 1px solid rgba(var(--amber),.4);
  padding: 6px 12px; border-radius: 7px; font-size: 11.5px;
  background: transparent; font-family: inherit; cursor: pointer;
  transform-style: preserve-3d; transition: transform .26s ease, border-color .26s ease, color .26s ease;
}
.member-chip-face {
  grid-area: 1 / 1; display: flex; align-items: center; gap: 8px;
  justify-content: center; backface-visibility: hidden;
  transition: opacity .13s ease;
}
.member-chip-back {
  transform: rotateX(180deg);
  letter-spacing: .04em; opacity: 0;
}
.member-chip:hover, .member-chip:focus-visible, .member-chip.is-flipped {
  transform: rotateX(180deg);
  color: rgba(var(--magenta),1); border-color: rgba(var(--magenta),.5);
}
/* Faces cross-fade slightly inside the turn so neither reads backwards mid-flip. */
.member-chip:hover .member-chip-front,
.member-chip:focus-visible .member-chip-front,
.member-chip.is-flipped .member-chip-front { opacity: 0; }
.member-chip:hover .member-chip-back,
.member-chip:focus-visible .member-chip-back,
.member-chip.is-flipped .member-chip-back { opacity: 1; }
.member-chip:hover .dot, .member-chip:focus-visible .dot, .member-chip.is-flipped .dot {
  background: rgba(var(--magenta),1); box-shadow: 0 0 8px rgba(var(--magenta),1);
}
.member-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--amber),1); box-shadow: 0 0 8px rgba(var(--amber),1); transition: background .26s ease, box-shadow .26s ease; }
/* Free subscribers (delivery audience) get a quieter chip than the amber
   inner-circle one. */
.member-chip--free { color: var(--secondary); border-color: var(--hairline); }
.member-chip--free .dot { background: rgba(var(--slate),1); box-shadow: 0 0 8px rgba(var(--slate),.8); }
/* A flip is decoration; the state change is not. Reduced motion keeps the
   reveal and drops the rotation. */
@media (prefers-reduced-motion: reduce) {
  .member-chip, .member-chip-face { transition: none; }
  .member-chip:hover, .member-chip:focus-visible, .member-chip.is-flipped { transform: none; }
  .member-chip-back { transform: none; }
}

/* ---------- Headlines ----------------------------------------------------- */
.page-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 56px; line-height: .94; letter-spacing: -.025em;
  color: #f4f7fb; margin: 20px 0 0;
}
.page-lede {
  font-family: var(--font-body); font-style: italic;
  font-size: 20px; line-height: 1.4; color: var(--secondary);
  margin: 0; max-width: 44ch;
}
.page-heading-row {
  display: flex; align-items: flex-end; gap: 24px; margin-top: 20px;
  flex-wrap: wrap;
}
.page-heading-row .page-title { margin: 0; }

/* ---------- Cards (green-accent, fade to void) ---------------------------- */
.card {
  border: 1px solid rgba(var(--green), .28);
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 8% 4%, rgba(var(--paper),.09) 0%, rgba(var(--paper),.02) 30%, rgba(var(--paper),0) 55%),
    linear-gradient(180deg, rgba(20,29,39,.82) 0%, rgba(13,19,27,.4) 52%, rgba(9,13,19,0) 100%);
  box-shadow: 0 22px 54px -30px rgba(0,0,0,.65),
              0 0 44px -26px rgba(var(--green), calc(.5*var(--glow-op))),
              inset 0 1px 0 rgba(var(--paper),.09);
}
.card--plain { border-color: var(--hairline); box-shadow: 0 22px 54px -30px rgba(0,0,0,.6); }

/* ---------- Tag pill ------------------------------------------------------ */
.tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; color: #c3ccd6;
  border: 1px solid var(--hairline); padding: 7px 13px; border-radius: 20px;
}
.tag-pill:hover { border-color: #3a4654; color: #f2f6fb; }
.tag-pill .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- Topic navigation + archive hubs ------------------------------ */
.topic-nav-wrap { margin-top: 28px; }
.topic-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.topic-nav-label {
  font: 500 11px/1 var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--label); margin-right: 2px;
}
.topic-pill { --topic-color: 120,132,146; }
.topic-pill .dot {
  background: rgb(var(--topic-color));
  box-shadow: 0 0 9px rgba(var(--topic-color), .82);
}
.topic-pill[aria-current="page"] {
  color: #f2f6fb; border-color: rgba(var(--topic-color), .55);
  background: rgba(var(--topic-color), .08);
}
.topic-count { color: var(--muted); }
.topic-homelab { --topic-color: var(--green); order: 1; }
.topic-3d-printing { --topic-color: var(--amber); order: 2; }
.topic-robotics { --topic-color: var(--magenta); order: 3; }
.topic-imaging { --topic-color: var(--cyan); order: 4; }
.topic-aerospace-rocketry { --topic-color: var(--violet); order: 5; }
.topic-new-tech { --topic-color: 105,174,255; order: 6; }

.archive-hero { margin-top: 38px; }
.archive-hero .back-link { margin-bottom: 16px; }
.archive-panel {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: end;
  padding: clamp(26px, 4vw, 48px); border: 1px solid #1b2530;
  border-radius: 20px; background: linear-gradient(145deg, #0b1118, #080c11 70%);
}
.archive-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.7%, color-mix(in srgb, var(--archive-accent) 7%, transparent) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, color-mix(in srgb, var(--archive-accent) 6%, transparent) 50%, transparent 50.3%);
  background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent 38%, #000);
}
.archive-copy, .archive-status { position: relative; z-index: 1; }
.archive-dot { background: var(--archive-accent); box-shadow: 0 0 10px var(--archive-accent); }
.archive-title { margin: 18px 0 0; max-width: 15ch; }
.archive-lede { max-width: 62ch; margin: 18px 0 0; }
.archive-status {
  min-width: 132px; display: grid; justify-items: end; padding-left: 28px;
  border-left: 1px solid color-mix(in srgb, var(--archive-accent) 22%, #1b2530);
  font-family: var(--font-mono); color: var(--label); text-transform: uppercase;
  letter-spacing: .12em; font-size: 10px;
}
.archive-status strong {
  font: 600 clamp(38px, 5vw, 64px)/.95 var(--font-display);
  color: #f2f6fb; letter-spacing: -.04em; margin: 10px 0 7px;
}
.archive-status-label { color: var(--archive-accent); }
.archive-hero > .topic-nav { margin-top: 18px; }
.archive-results { margin-top: 38px; }
.archive-results-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 8px 12px; font-family: var(--font-mono); color: var(--label);
  text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px;
}
.archive-results-heading h2 { margin: 0; font: inherit; color: var(--secondary); }
.archive-empty {
  display: grid; gap: 7px; padding: 30px 8px; border-top: 1px solid #161d25;
  color: var(--muted); font-family: var(--font-body);
}
.archive-empty strong { color: #eef2f7; font-family: var(--font-display); font-size: 20px; }
.archive-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; border-top: 1px solid #161d25; padding-top: 28px; margin-top: 4px;
}
.archive-pagination-end { justify-content: flex-end; }
.archive-pagination .btn-ghost { padding: 12px 24px; }

.directory-topics {
  margin-top: 44px; padding: 28px 30px; border: 1px solid #1b2530;
  border-radius: 16px; background: rgba(10, 15, 21, .72);
}
.directory-topics h2 {
  margin: 17px 0 0; font: 600 clamp(24px, 3vw, 32px)/1.12 var(--font-display);
  letter-spacing: -.02em; color: #f2f6fb;
}
.directory-topics > p {
  max-width: 66ch; margin: 11px 0 20px; color: #8f9aa7;
  font: 16px/1.6 var(--font-body);
}

/* ---------- Buttons ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  color: var(--void); padding: 11px 22px; border-radius: 9px;
  border: none; cursor: pointer;
}
.btn-cyan { background: rgba(var(--cyan),1); box-shadow: 0 0 22px rgba(var(--cyan), calc(.35*var(--glow-op))); }
.btn-green { background: rgba(var(--green),1); box-shadow: 0 0 22px rgba(var(--green), calc(.35*var(--glow-op))); }
.btn-violet { background: rgba(var(--violet),1); box-shadow: 0 0 22px rgba(var(--violet), calc(.4*var(--glow-op))); }
.btn-amber { background: rgba(var(--amber),1); box-shadow: 0 0 22px rgba(var(--amber), calc(.4*var(--glow-op))); }
.btn:hover { filter: brightness(1.08); color: var(--void); }
.btn-ghost {
  color: #c3ccd6; background: transparent; border: 1px solid var(--hairline);
  font-family: var(--font-mono); font-size: 12px; padding: 8px 14px; border-radius: 8px;
}
.btn-ghost:hover { border-color: #3a4654; color: #f2f6fb; }

/* ---------- Back link (filtered archives → parent room) ------------------- */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
  color: var(--muted);
}
.back-link:hover { color: var(--secondary); }
.back-link .arr { transition: transform .15s ease; }
.back-link:hover .arr { transform: translateX(-3px); }

/* ---------- Home: currently widget ---------------------------------------- */
.cur-row + .cur-row { border-top: 1px solid #161d25; margin-top: 16px; padding-top: 16px; }

/* ---------- Home cards ---------------------------------------------------- */
.home-card-head { align-items: center; }

/* ---------- Footer -------------------------------------------------------- */
.site-footer {
  margin: 44px auto 60px; padding: 22px 32px 0;
  border-top: 1px solid #141b22;
  display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; column-gap: 16px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--label);
  max-width: var(--wrap);
}
.site-footer .foot-link { justify-self: start; }
.site-footer .foot-year { justify-self: center; }
.site-footer .built { justify-self: end; text-align: right; white-space: nowrap; }
.site-footer .foot-link { color: var(--secondary); }
.site-footer .foot-link:hover { color: var(--primary); }

/* ---------- Directory (page-directory.hbs) -------------------------------- */
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* A whole room card is one link; --accent (set inline per card) tints its
   path dot, arrow, hover border, and glow. */
.dir-card {
  --accent: var(--green);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 28px 30px;
  border-radius: 16px;
  color: inherit;
  border-color: rgba(var(--accent), .26);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dir-card:hover {
  transform: translateY(-3px);
  color: inherit;
  border-color: rgba(var(--accent), .6);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.7),
              0 0 52px -20px rgba(var(--accent), calc(.6*var(--glow-op))),
              inset 0 1px 0 rgba(var(--paper),.09);
}
.dir-card .dir-path {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--muted);
}
.dir-card .dir-name {
  font-family: var(--font-display); font-weight: 600; font-size: 25px;
  letter-spacing: -.015em; color: #f2f6fb; margin: 16px 0 0;
}
.dir-card .dir-desc {
  font-family: var(--font-body); font-size: 16.5px; line-height: 1.5;
  color: var(--secondary); margin: 9px 0 0; max-width: 34ch;
}
.dir-card .dir-arrow {
  position: absolute; top: 24px; right: 26px;
  font-family: var(--font-mono); font-size: 18px; line-height: 1;
  color: rgba(var(--accent), 1);
  transition: transform .18s ease;
}
.dir-card:hover .dir-arrow { transform: translate(3px, -3px); }

.dir-mini-row { display: flex; flex-wrap: wrap; gap: 12px; }
.dir-mini {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12.5px; color: #c3ccd6;
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 12px 16px;
}
.dir-mini:hover { border-color: #3a4654; color: #f2f6fb; }
.dir-mini .dot { width: 7px; height: 7px; border-radius: 50%; }

/* ============================================================================
   PROSE — post content ({{content}} from the Koenig editor)
   These map Ghost's .kg-* card classes onto the Phosphor look.
   ============================================================================ */
.post-content { max-width: 784px; margin: 0 auto; padding: 0 32px; }
.post-content > * { margin-left: auto; margin-right: auto; }
.post-content p,
.post-content ul,
.post-content ol,
.post-content blockquote {
  font-family: var(--font-body); font-size: 19px; line-height: 1.72;
  color: #c3ccd6; margin: 0 0 24px;
}
.post-content h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 27px;
  letter-spacing: -.015em; color: #f2f6fb; margin: 44px 0 18px;
}
.post-content h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  letter-spacing: -.01em; color: #f2f6fb; margin: 34px 0 14px;
}
.post-content a { color: rgba(var(--cyan),1); border-bottom: 1px solid rgba(var(--cyan),.3); }
.post-content a:hover { border-bottom-color: rgba(var(--cyan),.9); }
.post-content strong { color: var(--primary); font-weight: 600; }
.post-content ul { list-style: none; padding-left: 4px; }
.post-content ul li { position: relative; padding-left: 26px; margin-bottom: 11px; }
.post-content ul li::before {
  content: ''; position: absolute; left: 2px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(var(--cyan),1); box-shadow: 0 0 8px rgba(var(--cyan),.7);
}
.post-content blockquote {
  border-left: 2px solid rgba(var(--violet),.6);
  padding: 4px 0 4px 26px; margin: 36px auto;
  font-style: italic; font-size: 25px; line-height: 1.4; color: #e4e9f0;
}

/* code — terminal card */
.post-content pre {
  border: 1px solid var(--hairline); border-radius: 12px;
  background: linear-gradient(180deg, #0c1219, #090d13);
  padding: 18px; margin: 0 0 26px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #aab4c1;
}
.post-content :not(pre) > code {
  font-family: var(--font-mono); font-size: .88em;
  background: rgba(var(--cyan),.08); color: rgba(var(--cyan),1);
  padding: 2px 6px; border-radius: 5px;
}

/* Koenig image / gallery / video / embed cards */
.post-content .kg-card { margin: 34px auto; }
.post-content figure,
.post-content .kg-image-card,
.post-content .kg-embed-card { margin: 34px auto; }
.post-content .kg-image {
  border: 1px solid rgba(var(--cyan),.18); border-radius: 14px;
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.8);
}
.post-content figcaption {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  text-align: center; margin-top: 10px;
}
.post-content .kg-width-wide { max-width: 1000px; }
.post-content .kg-width-full { max-width: 1200px; }

/* ---------- Members gate -------------------------------------------------- */
/* Ghost injects its own accent-colored "subscribers only" CTA into
   {{content}} on gated posts — the theme's .gate below replaces it, so the
   built-in one would double up. Suppress it. */
.gh-post-upgrade-cta { display: none !important; }

.gate {
  max-width: 720px; margin: 16px auto 0;
  border: 1px solid rgba(var(--amber),.3); border-radius: 16px;
  padding: 40px; text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(var(--amber),.06), transparent 60%), linear-gradient(180deg, #121a23, #0b0f15);
  box-shadow: 0 0 50px -28px rgba(var(--amber), calc(.5*var(--glow-op)));
}
.gate .badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(var(--amber),1); border: 1px solid rgba(var(--amber),.4);
  padding: 6px 13px; border-radius: 20px;
}
.gate h3 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.015em; color: #f2f6fb; margin: 20px 0 0; }
.gate p { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--secondary); margin: 14px auto 0; max-width: 46ch; }

/* ---------- Error room (error.hbs) ---------------------------------------- */
.err-card {
  text-align: center; padding: 84px 32px 72px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(var(--magenta),.05), transparent 60%), linear-gradient(180deg, #121a23, #0b0f15);
  box-shadow: 0 0 50px -28px rgba(var(--magenta), calc(.5*var(--glow-op)));
}
.err-card .eyebrow { justify-content: center; }
.err-code {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(96px, 22vw, 180px); line-height: 1; letter-spacing: -.04em;
  color: #f4f7fb; margin: 22px 0 0;
  text-shadow: 0 0 18px rgba(var(--magenta), calc(.5*var(--glow-op))),
               0 0 70px rgba(var(--magenta), calc(.22*var(--glow-op)));
}
.err-title { font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -.015em; color: #f2f6fb; margin: 20px 0 0; }
.err-copy { font-family: var(--font-body); font-size: 18px; line-height: 1.6; color: var(--secondary); max-width: 52ch; margin: 14px auto 0; }
.err-trace { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); max-width: 60ch; margin: 18px auto 0; overflow-wrap: anywhere; }
.err-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* ---------- Reduced motion (canvases handle themselves in JS) ------------- */
@media (prefers-reduced-motion: reduce) {
  .polaroid-grid .frame, .workin-card, .chevron, .lb-img, .post-share { transition: none; }
  .polaroid-grid .frame:hover, .workin-card:hover { transform: none; }
  .cst-load-links, .cst-load-node, .reader-skeleton-line, .reader-load-dot { animation: none !important; }
}

/* ---------- Responsive ---------------------------------------------------- */
@media (max-width: 820px) {
  .page-title { font-size: 40px; }
  .page-heading-row .page-title { font-size: 56px; }
  .page-heading-row { align-items: flex-end; }
  .site-menu { gap: 16px; font-size: 11.5px; }
  .wrap, .site-footer, .post-content { padding-left: 24px; padding-right: 24px; }
  .site-main > .wrap:first-child {
    margin-top: 22px !important;
  }
  .home-hero-main,
  .home-currently,
  .home-mini-card {
    padding: 24px !important;
  }
  .home-currently {
    border-left: 0 !important;
    border-top: 1px solid #1a222c;
  }
  .home-card-grid {
    gap: 16px !important;
  }
  .home-card-head {
    margin-bottom: 18px !important;
  }
  .home-polaroid-grid {
    gap: 10px !important;
  }
}
@media (max-width: 680px) {
  .page-heading-row { align-items: flex-start; }
  .page-heading-row .page-title { font-size: 40px; }
  .page-heading-row .page-lede { flex-basis: 100%; }
  .archive-panel { grid-template-columns: 1fr; gap: 26px; padding: 26px 24px; }
  .archive-title { font-size: 40px; max-width: none; }
  .archive-status {
    min-width: 0; grid-template-columns: 1fr auto auto; align-items: baseline;
    justify-items: start; gap: 10px; padding: 18px 0 0; border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--archive-accent) 22%, #1b2530);
  }
  .archive-status strong { font-size: 34px; margin: 0; }
  .archive-results { margin-top: 30px; }
  .directory-topics { padding: 24px; }
}
@media (max-width: 560px) {
  /* Phone widths: let the menu drop under the brand instead of crowding
     the sign-in button off the right edge. */
  .site-nav { flex-wrap: wrap; gap: 12px 18px; padding-left: 24px; padding-right: 24px; }
  .site-brand .name { white-space: nowrap; }
  .site-menu { margin-left: 0; flex-wrap: wrap; gap: 12px 16px; width: 100%; }
  .site-menu .btn-signin, .site-menu .member-chip { margin-left: auto; }
  .site-footer { column-gap: 8px; }
  .site-footer .built { font-size: 9px; letter-spacing: -.01em; }
  .featured-card-body {
    min-width: 0 !important;
    padding: 24px !important;
  }
  .post-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  .post-card > div:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding-top: 0 !important;
  }
  .post-card > div:last-child {
    text-align: left !important;
    padding-top: 0 !important;
  }
  .topic-nav { align-items: flex-start; }
  .topic-nav-label { flex-basis: 100%; margin-bottom: 2px; }
  .archive-results-heading { align-items: flex-start; }
  .archive-pagination .btn-ghost { padding: 11px 17px; }
  .post-share {
    min-width: 42px;
    padding-left: 11px;
    padding-right: 11px;
  }
  .post-share span { display: none; }
  .post-share.has-status span { display: inline; }
}
@media (max-width: 360px) {
  .site-footer { row-gap: 12px; }
  .site-footer .built { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Polaroids masonry -------------------------------------------- */
.polaroid-grid .frame { transition: border-color .25s, box-shadow .25s, transform .25s; }
.polaroid-grid .frame:hover {
  border-color: rgba(var(--cyan), .5) !important;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.85), 0 0 40px -22px rgba(var(--cyan), .5);
  transform: translateY(-3px);
}
.polaroid-grid .frame:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
.polaroid-grid .frame:nth-child(4n+3) { grid-row: span 2; }
.polaroid-grid .scrim { transition: opacity .25s; }
@media (max-width: 820px) {
  .polaroid-grid { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 130px !important; }
  .polaroid-grid .frame:nth-child(7n+1) { grid-column: span 2; grid-row: span 2; }
}

/* Lightbox stays closed until opened. The overlay carries an inline
   `display:flex`, which beats the UA `[hidden]{display:none}` rule — so we
   force it hidden here (author !important overrides inline). This also makes
   close() work, since the JS toggles the `hidden` attribute. */
.lightbox[hidden] { display: none !important; }
/* Lightbox meta rows. These used to be inline styles concatenated into
   `elMeta.innerHTML` alongside EXIF strings read out of the image file — the
   same injection shape THM-01 removed from Constellation. The markup is now
   built with safe DOM APIs in assets/js/polaroids.js, so the styling lives
   here. Keep these in sync with that renderer. */
.lb-meta-row { display: flex; align-items: baseline; gap: 12px; }
.lb-meta-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #465059; width: 64px; flex: none;
}
.lb-meta-value {
  font-family: var(--font-body); font-size: 15px; color: #d5dce4;
  display: flex; align-items: center; gap: 8px;
}
.lb-meta-value--mono { font-family: var(--font-mono); font-size: 13px; color: rgba(47, 224, 200, 1); }
.lb-meta-auto {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(88, 239, 138, 1);
  border: 1px solid rgba(88, 239, 138, .35); padding: 2px 5px; border-radius: 5px;
}
.lb-load-status {
  position: absolute; left: 50%; bottom: 18px; z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 9px; max-width: calc(100% - 32px);
  padding: 8px 12px; border: 1px solid rgba(var(--violet), .28); border-radius: 10px;
  background: rgba(8, 12, 17, .88); backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--secondary); white-space: nowrap;
}
.lb-load-status[hidden] { display: none !important; }
.lb-load-status.is-error { border-color: rgba(var(--magenta), .35); white-space: normal; }
.lb-load-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: rgba(var(--violet), 1); box-shadow: 0 0 9px rgba(var(--violet), .85); animation: readerLoadPulse 1.4s ease-in-out infinite; }
.lb-load-status.is-error .lb-load-dot { background: rgba(var(--magenta), 1); box-shadow: 0 0 9px rgba(var(--magenta), .85); animation: none; }
.lb-retry { padding: 5px 10px; font-size: 10px; flex: none; }
.lb-retry[hidden] { display: none !important; }
.lb-img { transition: filter .22s ease, opacity .22s ease; }
.lb-img.is-preview { filter: blur(2px); opacity: .78; transform: scale(1.01); }
/* Same display-override gotcha, third occurrence: the /graph/ member
   inspector carries inline display:flex and must stay closed until a node
   is selected. */
#cst-inspector[hidden] { display: none !important; }

/* Under ~680px the bottom-left view controls and the bottom-right legend
   together need ~580px of card width, so they collide. Stack the legend
   above the controls instead (!important beats its inline positioning). */
@media (max-width: 680px) {
  #cst-legend {
    left: 16px !important;
    right: 16px !important;
    bottom: 68px !important;
    max-width: none !important;
  }
}

/* On phones the full-height right-side member inspector swallowed most of the
   graph and hid the nodes. Dock it to the bottom instead, capped at half the
   stage; its inner body already scrolls (flex:1; overflow-y:auto). !important
   beats its inline top/right/bottom/width. */
@media (max-width: 560px) {
  #cst-inspector {
    top: auto !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-height: 50% !important;
  }
}

@media (max-width: 820px) {
  .lightbox {
    padding: 56px 24px 24px !important;
  }
  .lightbox .lb-layout {
    flex-direction: column;
    gap: 14px !important;
    height: calc(100vh - 80px) !important;
  }
  .lightbox .lb-photo {
    flex: 1 1 auto !important;
    min-height: 0;
  }
  .lightbox .lb-info {
    flex: 0 0 auto !important;
    max-height: 30vh;
    padding: 18px 20px !important;
  }
  .lightbox .lb-title { margin-top: 10px !important; }
  .lightbox .lb-caption { margin-top: 10px !important; }
  .lightbox .lb-meta {
    margin-top: 16px !important;
    padding-top: 14px !important;
  }
}

@media (max-width: 560px) {
  .lightbox {
    padding: 56px 16px 18px !important;
  }
  .lightbox .lb-prev,
  .lightbox .lb-next {
    top: 44% !important;
    width: 38px !important;
    height: 38px !important;
  }
  .lightbox .lb-prev { left: 10px !important; }
  .lightbox .lb-next { right: 10px !important; }
}

/* ---------- Polaroids: season switcher + per-season sections ------------- */
/* Season colour is keyed off the slug prefix, so any year works. Pills carry a
   bare season ("summer"); year blocks carry "summer-2026" — both match. */
.season-pill,                        .year-block                        { --season: var(--slate); }
.season-pill[data-season^="summer"], .year-block[data-season^="summer"] { --season: var(--amber); }
.season-pill[data-season^="spring"], .year-block[data-season^="spring"] { --season: var(--green); }
.season-pill[data-season^="winter"], .year-block[data-season^="winter"] { --season: var(--cyan); }
.season-pill[data-season^="autumn"], .year-block[data-season^="autumn"] { --season: var(--magenta); }
.season-pill[data-season^="fall"],   .year-block[data-season^="fall"]   { --season: var(--magenta); }

.season-pill { cursor: pointer; background: transparent; transition: border-color .2s, color .2s, box-shadow .2s; }
/* `.tag-pill` sets display:inline-flex, which beats the UA [hidden] rule — force
   hide seasons with no content (JS sets the attribute). */
.season-pill[hidden] { display: none !important; }
.season-pill .dot { background: rgba(var(--season), 1); box-shadow: 0 0 9px rgba(var(--season), calc(.7*var(--glow-op))); }
.season-pill.is-active {
  color: #f2f6fb;
  border-color: rgba(var(--season), .55);
  box-shadow: 0 0 0 1px rgba(var(--season), .25), 0 0 20px -8px rgba(var(--season), calc(.9*var(--glow-op)));
}

/* Year blocks: a collapsible header + body. JS toggles .is-open. */
.year-block { margin-top: 6px; }
.year-head {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: transparent; border: none; border-top: 1px solid var(--hairline);
  padding: 20px 2px; cursor: pointer; text-align: left;
}
.year-head:hover .year-name { color: #fff; }
.year-head .season-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: rgba(var(--season), 1); box-shadow: 0 0 13px rgba(var(--season), calc(.8*var(--glow-op))); }
.year-name { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.02em; color: #f2f6fb; }
.year-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.chevron { margin-left: auto; font-family: var(--font-mono); font-size: 13px; color: var(--muted); transition: transform .2s; }
.year-block.is-open .chevron { transform: rotate(180deg); }
.year-body { display: none; padding-bottom: 10px; }
.year-block.is-open .year-body { display: block; }
.season-desc { font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.4; color: var(--secondary); margin: 4px 0 0; }

/* ---------- About page ---------------------------------------------------- */
.about-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--label); }

.about-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 22px; align-items: start; }
.about-side-stack { display: flex; flex-direction: column; gap: 22px; }
.about-now-copy { margin: 14px 0 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.55; color: #eef2f7; }
.about-story-card { position: relative; }
.about-story-content { padding-left: 0; padding-right: 0; transition: max-height .32s ease; }
.about-story-content.is-collapsed { overflow: hidden; }
.about-story-scrim {
  position: absolute; right: 38px; bottom: 66px; left: 38px; height: 70px;
  display: none; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,17,23,0), rgba(12,17,23,.96));
}
.about-story-card.has-collapsed-story .about-story-scrim { display: block; }
.about-story-toggle {
  width: 100%; margin-top: 16px; padding: 13px 0 0; border: 0; border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; background: transparent;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(var(--cyan),.9); cursor: pointer;
}
.about-story-toggle[hidden] { display: none; }
.about-story-toggle:hover { color: #f2f6fb; }
.about-story-toggle-arrow { font-size: 15px; transition: transform .22s; }
.about-story-toggle[aria-expanded="true"] .about-story-toggle-arrow { transform: rotate(180deg); }

.findme { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; color: #c3ccd6; text-decoration: none; padding: 12px 0; border-top: 1px solid var(--hairline); transition: color .2s; }
.findme:hover { color: #f2f6fb; }
.findme:hover .findme-arrow { color: rgba(var(--cyan), 1); }
.findme-arrow { color: var(--muted); transition: color .2s; }

.about-cert-list { display: flex; flex-direction: column; }
.about-cert { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; padding: 13px 0; border-top: 1px solid var(--hairline); }
.about-cert-node { width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--muted); border-radius: 50%; background: rgba(89,99,111,.08); }
.about-cert--rpas { --cert-color: 255, 86, 92; }
.about-cert--leader { --cert-color: var(--amber); }
.about-cert--photogrammetry { --cert-color: var(--green); }
.about-cert--aec { --cert-color: var(--magenta); }
.about-cert[class*="about-cert--"] .about-cert-node { border-color: rgba(var(--cert-color),1); background: rgba(var(--cert-color),.05); box-shadow: 0 0 11px rgba(var(--cert-color),calc(.3*var(--glow-op))); }
.about-cert strong { display: block; font-family: var(--font-display); font-size: 14px; line-height: 1.35; font-weight: 600; color: #eef2f7; }
.about-cert small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 10px; line-height: 1.4; color: var(--muted); }

.about-experience { max-width: 1120px; }
.experience-timeline { position: relative; padding-left: 26px; }
.experience-line { position: absolute; left: 5px; top: 6px; bottom: 10px; width: 1px; background: linear-gradient(180deg, #26313d, #161d25); }
.experience-item { position: relative; padding-bottom: 28px; }
.experience-item--last { padding-bottom: 0; }
.experience-dot { position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border: 1.5px solid var(--muted); border-radius: 50%; background: rgba(89,99,111,.08); }
.experience-item--current .experience-dot { border-color: rgba(var(--green),1); background: rgba(var(--green),.05); box-shadow: 0 0 12px rgba(var(--green),.4); }
.experience-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.experience-item--current .experience-meta span { color: rgba(var(--green),1); }
.experience-title { margin-top: 7px; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #eef2f7; }
.experience-desc { max-width: 72ch; margin-top: 6px; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: #8a95a2; }
.experience-more { position: relative; margin: 0 0 0 -10px; }
.experience-more summary {
  display: grid; grid-template-columns: 1fr auto 18px; gap: 12px; align-items: center;
  padding: 13px 14px; border: 1px solid var(--hairline); border-radius: 11px;
  background: rgba(20,29,39,.35); cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #c3ccd6;
}
.experience-more summary::-webkit-details-marker { display: none; }
.experience-more summary:hover { border-color: #2b3947; color: #eef2f7; }
.experience-more-count { color: var(--muted); }
.experience-more-icon { color: rgba(var(--cyan),.9); font-size: 16px; line-height: 1; transition: transform .2s; }
.experience-more[open] .experience-more-icon { transform: rotate(45deg); }
.experience-more-list { padding: 26px 0 0 10px; }

.workin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.workin-card { border: 1px solid var(--hairline); border-radius: 14px; padding: 24px 22px; background: linear-gradient(180deg, rgba(20,29,39,.5), rgba(9,13,19,0)); transition: border-color .25s, transform .25s; }
.workin-card:hover { border-color: #2b3947; transform: translateY(-3px); }
.workin-node { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid; }
.workin-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #eef2f7; margin-top: 18px; }
.workin-desc { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: #8a95a2; margin-top: 8px; }

@media (max-width: 820px) {
  .about-split { grid-template-columns: 1fr; }
  .workin-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .about-hero-card,
  .about-story-card { padding: 24px !important; }
  .about-story-scrim { display: none !important; }
  .experience-title { font-size: 17px; }
  .experience-desc { font-size: 15px; }
  .experience-more summary { grid-template-columns: 1fr auto 16px; gap: 8px; padding: 13px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-story-content, .about-story-toggle-arrow, .experience-more-icon { transition: none; }
}

/* ---------- Constellation map / list switcher (1.2.0) -------------------- */
/* Sized up 2026-07-25: at 10px in a muted 7% violet this read as a caption
   rather than the primary control for the room, and its label named a view
   without saying whether that was the current one or the destination. It is now
   the same visual weight as a `.btn-ghost`, and the label carries the verb. */
.cst-view-toggle {
  display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 9px 17px;
  border: 1px solid rgba(var(--violet), .55); border-radius: 999px;
  background: rgba(var(--violet), .16); color: rgba(240, 242, 250, .96);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 0 18px rgba(var(--violet), calc(.3 * var(--glow-op)));
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.cst-view-toggle:hover,
.cst-view-toggle:focus-visible {
  color: var(--primary); border-color: rgba(var(--violet), .62);
  background: rgba(var(--violet), .13); box-shadow: 0 0 18px rgba(var(--violet), .12);
}
.cst-view-toggle:focus-visible { outline: 2px solid rgba(var(--cyan), .72); outline-offset: 3px; }
.cst-view-toggle[aria-pressed="true"] { color: rgba(var(--cyan), .98); border-color: rgba(var(--cyan), .5); background: rgba(var(--cyan), .14); box-shadow: 0 0 18px rgba(var(--cyan), calc(.28 * var(--glow-op))); }
.cst-view-toggle:disabled { cursor: default; opacity: .42; }
.cst-view-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; width: 12px; height: 12px; }
.cst-view-icon span { display: block; width: 12px; height: 1px; border-radius: 1px; background: currentColor; transition: width .22s, transform .22s; }
.cst-view-icon span:nth-child(2) { width: 9px; }
.cst-view-toggle[aria-pressed="true"] .cst-view-icon { display: grid; grid-template-columns: repeat(2, 4px); grid-template-rows: repeat(2, 4px); gap: 2px; }
.cst-view-toggle[aria-pressed="true"] .cst-view-icon span { width: 4px; height: 4px; border: 1px solid currentColor; border-radius: 50%; background: transparent; }
.cst-view-toggle[aria-pressed="true"] .cst-view-icon span:nth-child(3) { grid-column: 1 / -1; justify-self: center; }

#constellation-stage { perspective: 1500px; }
.cst-view-card { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .56s cubic-bezier(.22, .72, .2, 1); }
.cst-view-face {
  position: absolute; inset: 0; min-width: 0; min-height: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.cst-graph-face { overflow: hidden; }
.cst-list-face {
  --list-panel: rgba(10, 14, 20, .96);
  transform: rotateY(180deg); overflow-y: auto; overscroll-behavior: contain;
  padding: 0 28px 34px; background:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    radial-gradient(620px circle at 14% -8%, rgba(var(--cyan), .08), transparent 65%),
    radial-gradient(760px circle at 96% 4%, rgba(var(--violet), .09), transparent 68%),
    #080c11;
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
  scrollbar-color: rgba(var(--violet), .38) transparent; scrollbar-width: thin;
  transition: padding-right .32s ease;
}
.cst-list-face::-webkit-scrollbar { width: 8px; }
.cst-list-face::-webkit-scrollbar-track { background: transparent; }
.cst-list-face::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 10px; background: rgba(var(--violet), .38); background-clip: padding-box; }
#constellation-stage[data-view="list"] .cst-view-card { transform: rotateY(180deg); }
#constellation-stage[data-view="graph"] .cst-list-face,
#constellation-stage[data-view="list"] .cst-graph-face { pointer-events: none; }
#constellation-stage.has-inspector[data-view="list"] .cst-list-face { padding-right: 342px; }

.cst-list-header {
  position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr);
  align-items: end; gap: 30px; margin: 0 -28px 18px; padding: 27px 28px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(8, 12, 17, .99) 72%, rgba(8, 12, 17, .92));
  backdrop-filter: blur(16px);
}
.cst-list-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: rgba(var(--cyan), .78); }
/* Scoped to the first child 2026-07-25. As `.cst-list-kicker span` this claimed
   EVERY span in the kicker, so wrapping the date in one turned it into a second
   6px cyan dot with the text overflowing it. The dot is one specific element,
   not "any span here". */
.cst-list-kicker > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--cyan), 1); box-shadow: 0 0 10px rgba(var(--cyan), .8); }
.cst-list-header h2 { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 31px); line-height: 1; color: var(--primary); }
.cst-list-header p { max-width: 52ch; margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--secondary); transition: opacity .18s ease, visibility .18s ease; }
/* The header deliberately breaks out of the face's padding (margin: 0 -28px) so
   its blurred band spans the full width — which also means the `padding-right`
   that insets the buckets for the inspector does NOT inset this row. The result
   was the intro paragraph sitting half-readable behind the panel. Hide it while
   a note is open rather than reflowing: `visibility` keeps the grid cell, so
   opening and closing notes does not shift the buckets underneath. */
#constellation-stage.has-inspector[data-view="list"] .cst-list-header p { visibility: hidden; opacity: 0; }
/* Below 560px the inspector docks to the bottom of the stage and never reaches
   the header, so the paragraph stays. This override must sit AFTER the rule
   above: the two selectors have identical specificity, so source order decides,
   and keeping it beside the #cst-inspector docking rule instead silently lost. */
@media (max-width: 560px) {
  #constellation-stage.has-inspector[data-view="list"] .cst-list-header p { visibility: visible; opacity: 1; }
}
.cst-list-buckets { display: flex; flex-direction: column; gap: 10px; }
.cst-list-empty { padding: 30px; font-family: var(--font-mono); font-size: 11px; text-align: center; color: var(--label); }
.cst-list-bucket {
  overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); border-radius: 13px;
  background: linear-gradient(110deg, color-mix(in srgb, var(--bucket-color) 4%, transparent), rgba(255, 255, 255, .018));
  transition: border-color .2s, box-shadow .2s;
}
.cst-list-bucket[open] { border-color: color-mix(in srgb, var(--bucket-color) 29%, transparent); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--bucket-color) 72%, transparent); }
.cst-list-bucket-summary {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 11px 15px;
  list-style: none; cursor: pointer; user-select: none;
}
.cst-list-bucket-summary::-webkit-details-marker { display: none; }
.cst-list-bucket-summary:focus-visible { outline: 2px solid color-mix(in srgb, var(--bucket-color) 68%, white); outline-offset: -3px; border-radius: 11px; }
.cst-list-bucket-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cst-list-bucket-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--bucket-color); box-shadow: 0 0 11px color-mix(in srgb, var(--bucket-color) 72%, transparent); }
.cst-list-bucket-name { overflow: hidden; font-family: var(--font-display); font-size: 16px; font-weight: 650; color: rgba(242, 246, 251, .94); text-overflow: ellipsis; white-space: nowrap; }
.cst-list-bucket-count { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; color: var(--label); text-transform: uppercase; }
.cst-list-bucket-chevron { width: 20px; color: var(--bucket-color); font-family: var(--font-mono); font-size: 17px; line-height: 1; text-align: center; transform: rotate(-90deg); transition: transform .2s; }
.cst-list-bucket[open] .cst-list-bucket-chevron { transform: rotate(0); }
.cst-list-rows { padding: 0 9px 9px; }
.cst-list-note {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 11px;
  width: 100%; min-height: 66px; padding: 10px 12px; border: 1px solid transparent; border-top-color: rgba(255, 255, 255, .055);
  border-radius: 9px; background: transparent; color: inherit; text-align: left; cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
.cst-list-note:hover { z-index: 1; border-color: color-mix(in srgb, var(--node-color) 24%, transparent); background: color-mix(in srgb, var(--node-color) 7%, rgba(255, 255, 255, .02)); transform: translateX(2px); }
.cst-list-note:focus-visible { z-index: 1; outline: 2px solid color-mix(in srgb, var(--node-color) 66%, white); outline-offset: -2px; }
.cst-list-note.is-selected { z-index: 1; border-color: color-mix(in srgb, var(--node-color) 54%, transparent); background: color-mix(in srgb, var(--node-color) 11%, rgba(255, 255, 255, .025)); box-shadow: 0 0 20px color-mix(in srgb, var(--node-color) 8%, transparent); }
.cst-list-note-signal { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid color-mix(in srgb, var(--node-color) 58%, transparent); border-radius: 50%; }
.cst-list-note-signal::before { content: ''; position: absolute; inset: 4px; border: 1px dashed color-mix(in srgb, var(--node-color) 42%, transparent); border-radius: 50%; }
.cst-list-note-signal span { width: 5px; height: 5px; border-radius: 50%; background: var(--node-color); box-shadow: 0 0 9px color-mix(in srgb, var(--node-color) 80%, transparent); }
.cst-list-note-copy { display: block; min-width: 0; }
.cst-list-note-title { display: block; overflow: hidden; font-family: var(--font-display); font-size: 14px; font-weight: 620; line-height: 1.25; color: rgba(242, 246, 251, .95); text-overflow: ellipsis; white-space: nowrap; }
.cst-list-note-summary { display: block; overflow: hidden; margin-top: 4px; font-family: var(--font-body); font-size: 12.5px; line-height: 1.35; color: rgba(163, 174, 187, .78); text-overflow: ellipsis; white-space: nowrap; }
.cst-list-note-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 92px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; color: rgba(135, 148, 162, .62); text-transform: uppercase; }

@media (max-width: 720px) {
  #constellation-stage.has-inspector[data-view="list"] .cst-list-face { padding-right: 18px; }
  .cst-list-face { padding: 0 18px 26px; }
  .cst-list-header { grid-template-columns: 1fr; gap: 9px; margin: 0 -18px 14px; padding: 21px 18px 17px; }
  .cst-list-header p { font-size: 13px; }
  .cst-list-note { grid-template-columns: 28px minmax(0, 1fr); }
  .cst-list-note-meta { grid-column: 2; flex-direction: row; align-items: center; min-width: 0; }
}
@media (max-width: 500px) {
  .cst-view-toggle { min-height: 34px; padding: 7px 13px; font-size: 10.5px; }
  .cst-list-bucket-summary { padding: 10px 12px; }
  .cst-list-bucket-count { font-size: 8.5px; }
  .cst-list-note { gap: 9px; padding: 9px 8px; }
  .cst-list-note-summary { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .cst-view-card { transform: none !important; transition: none; }
  .cst-view-face { transform: none; transition: opacity .01ms linear, visibility .01ms linear; }
  #constellation-stage[data-view="graph"] .cst-list-face,
  #constellation-stage[data-view="list"] .cst-graph-face { opacity: 0; visibility: hidden; }
  #constellation-stage[data-view="graph"] .cst-graph-face,
  #constellation-stage[data-view="list"] .cst-list-face { opacity: 1; visibility: visible; }
  .cst-list-note:hover { transform: none; }
}

/* ---------- Constellation loading / recovery ------------------------------ */
.cst-loading {
  position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 28px;
  text-align: center; background:
    radial-gradient(480px circle at 50% 42%, rgba(var(--violet), .1), transparent 68%),
    rgba(8, 12, 17, .97);
}
.cst-loading[hidden] { display: none !important; }
.cst-loading-map { width: min(320px, 82vw); height: auto; overflow: visible; }
.cst-load-links {
  fill: none; stroke: rgba(148, 163, 184, .18); stroke-width: 1.2;
  stroke-dasharray: 6 8; animation: cstLoadingTrace 2.8s linear infinite;
}
.cst-load-node { stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: cstLoadingPulse 1.8s ease-in-out infinite; }
.cst-load-node:nth-child(2n) { animation-delay: -.45s; }
.cst-load-node:nth-child(3n) { animation-delay: -.9s; }
.cst-load-node--cyan { fill: rgba(var(--cyan), .12); stroke: rgba(var(--cyan), .82); }
.cst-load-node--green { fill: rgba(var(--green), .1); stroke: rgba(var(--green), .76); }
.cst-load-node--amber { fill: rgba(var(--amber), .1); stroke: rgba(var(--amber), .78); }
.cst-load-node--violet { fill: rgba(var(--violet), .13); stroke: rgba(var(--violet), .88); }
.cst-load-node--magenta { fill: rgba(var(--magenta), .1); stroke: rgba(var(--magenta), .76); }
.cst-load-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--violet), 1);
}
.cst-load-kicker span { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--violet), 1); box-shadow: 0 0 9px rgba(var(--violet), .9); }
.cst-load-title { margin-top: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 650; color: var(--primary); }
.cst-load-detail { max-width: 46ch; margin-top: 5px; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--secondary); }
.cst-load-retry { margin-top: 17px; padding: 8px 18px; font-size: 12px; }
.cst-load-retry[hidden] { display: none !important; }
.cst-noscript { max-width: 520px; }
#constellation-stage[data-load-state="slow"] .cst-load-kicker { color: rgba(var(--amber), 1); }
#constellation-stage[data-load-state="slow"] .cst-load-kicker span { background: rgba(var(--amber), 1); box-shadow: 0 0 9px rgba(var(--amber), .9); }
#constellation-stage[data-load-state="error"] .cst-load-links,
#constellation-stage[data-load-state="error"] .cst-load-node { animation: none; opacity: .35; }
#constellation-stage[data-load-state="error"] .cst-load-kicker { color: rgba(var(--magenta), 1); }
#constellation-stage[data-load-state="error"] .cst-load-kicker span { background: rgba(var(--magenta), 1); box-shadow: 0 0 9px rgba(var(--magenta), .9); }
#constellation-stage button:disabled { cursor: default; opacity: .42; }
.ins-links-heading {
  margin-top: 16px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; color: rgba(232, 234, 242, .45);
}
.ins-links-heading:first-child { margin-top: 0; }
.ins-links-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.ins-link {
  display: block; width: 100%; padding: 6px 9px; border: 1px solid transparent;
  border-radius: 8px; background: rgba(255, 255, 255, .03);
  color: rgba(var(--cyan), .95); font-family: var(--font-display);
  font-size: 12.5px; text-align: left; cursor: pointer;
}
.ins-link:hover, .ins-link:focus-visible {
  border-color: rgba(var(--cyan), .35); background: rgba(var(--cyan), .07);
}
@keyframes cstLoadingTrace { to { stroke-dashoffset: -28; } }
@keyframes cstLoadingPulse { 0%, 100% { transform: scale(.92); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }

@media (max-width: 560px) {
  .cst-loading { padding: 22px; }
  .cst-loading-map { width: min(280px, 88vw); }
  .cst-load-title { font-size: 18px; }
}

/* ============================================================
   VAULT READER (1.1.0) — the full Obsidian note, rendered below
   the graph and gated to Inner Circle. Styles the .v-*/.tok-*
   markup from tools/obsidian-to-html.mjs plus the reader chrome.
   ============================================================ */
#cst-reader { margin-top: 6px; --rc: 177, 145, 255; }
#cst-reader[hidden] { display: none !important; }
/* connector: a folder-coloured trace descending from the graph into the note,
   so the two cards read as one system building off each other. */
.reader-connector { position: relative; height: 40px; }
.reader-connector .rc-line { position: absolute; left: 50%; transform: translateX(-50%); top: 2px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, rgba(var(--rc), 0), rgba(var(--rc), .8)); }
.reader-connector .rc-node { position: absolute; left: 50%; transform: translate(-50%, 50%); bottom: 2px; width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--rc), 1); box-shadow: 0 0 12px rgba(var(--rc), .9); }
.reader-card {
  display: flex; flex-direction: column; max-height: 62vh; overflow: hidden;
  border: 1px solid rgba(var(--violet), .24);
  border-top: 1px solid rgba(var(--rc), .55);
  border-radius: 16px;
  background: rgba(11, 15, 22, .94);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8), 0 -1px 22px -6px rgba(var(--rc), .4);
}
.reader-h {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 13px 18px; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.reader-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.reader-path {
  flex: 1; font-family: var(--font-mono); font-size: 11px; color: rgba(232, 234, 242, .5);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reader-close {
  border: none; background: transparent; color: rgba(232, 234, 242, .5);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.reader-close:hover { color: var(--primary); }
.reader-expand {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 5px 10px; border-radius: 8px;
  border: 1px solid var(--hairline); background: transparent;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
  color: rgba(232, 234, 242, .55); cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.reader-expand:hover {
  color: var(--primary);
  border-color: rgba(var(--rc), .5);
  background: rgba(var(--rc), .1);
}
.rx-icon {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.reader-expand .rx-in,
.reader-expand[aria-pressed="true"] .rx-out { display: none; }
.reader-expand[aria-pressed="true"] .rx-in { display: inline; }
.reader-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 34px 48px; }
.reader-title { font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.15; letter-spacing: -.01em; margin: 0; color: var(--primary); }
.reader-meta { font-family: var(--font-mono); font-size: 11px; color: var(--label); margin-top: 9px; }
.reader-tags { margin: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 7px; }
.reader-tags span { font-family: var(--font-mono); font-size: 10px; color: var(--secondary); border: 1px solid var(--hairline); border-radius: 20px; padding: 3px 10px; }
.reader-rule { height: 1px; background: linear-gradient(90deg, rgba(var(--violet), .4), transparent); margin: 20px 0 4px; }

/* ---- expanded note ------------------------------------------------------
   The card lifts out of the page and grows to fill the viewport. The expanded
   box is owned here, not by the script: constellation.js only freezes the
   starting rect on the inset longhands so the browser has two boxes to
   interpolate, then hands the end state back to these rules. A placeholder
   holds the card's old height in flow, so the page below neither jumps up on
   expand nor loses the reader's scroll position on collapse. */
#cst-reader { --rx-gap: clamp(12px, 2.2vw, 30px); }
.reader-placeholder { flex: none; }
#cst-reader.is-expanded .reader-connector { visibility: hidden; }
#cst-reader.is-expanded::before {
  content: ""; position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 7, 11, .74);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: readerBackdropIn .3s ease both;
}
#cst-reader.is-collapsing::before { animation: none; opacity: 0; transition: opacity .3s ease; }
#cst-reader.is-expanded .reader-card {
  position: fixed; z-index: 91;
  top: var(--rx-gap); right: var(--rx-gap); bottom: var(--rx-gap); left: var(--rx-gap);
  width: auto; height: auto; max-height: none;
  transition: top .34s cubic-bezier(.22, .61, .36, 1), right .34s cubic-bezier(.22, .61, .36, 1),
              bottom .34s cubic-bezier(.22, .61, .36, 1), left .34s cubic-bezier(.22, .61, .36, 1);
}
/* Full width is for the frame, not the prose: an unbroken 2000px measure is
   unreadable, so the column stays centred at the article measure. */
#cst-reader.is-expanded .reader-scroll { padding: 34px clamp(22px, 5vw, 64px) 64px; }
#cst-reader.is-expanded .reader-scroll > * { max-width: 900px; margin-left: auto; margin-right: auto; }
@keyframes readerBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #cst-reader.is-expanded .reader-card { transition: none; }
  #cst-reader.is-expanded::before { animation: none; }
  #cst-reader.is-collapsing::before { transition: none; }
}
@media (max-width: 560px) { .rx-label { display: none; } }
.reader-status { font-family: var(--font-mono); font-size: 12px; color: var(--label); margin: 20px 0; }
.reader-status[hidden] { display: none !important; }
.reader-skeleton { display: flex; flex-direction: column; gap: 11px; padding: 5px 0 8px; }
.reader-skeleton-line {
  display: block; height: 12px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255,255,255,.035) 20%, rgba(var(--violet),.13) 48%, rgba(255,255,255,.035) 76%);
  background-size: 240% 100%; animation: readerSkeleton 1.8s ease-in-out infinite;
}
.reader-skeleton-line--wide { width: min(100%, 680px); }
.reader-skeleton-line--mid { width: min(82%, 540px); }
.reader-skeleton-line--short { width: min(58%, 380px); }
.reader-load-copy { display: flex; align-items: center; gap: 9px; margin-top: 12px; color: var(--label); }
.reader-load-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: rgba(var(--violet), 1); box-shadow: 0 0 9px rgba(var(--violet), .8);
  animation: readerLoadPulse 1.4s ease-in-out infinite;
}
.reader-error { max-width: 540px; padding: 6px 0 2px; }
.reader-error-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: rgba(var(--magenta), 1);
}
.reader-error-kicker span { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--magenta), 1); box-shadow: 0 0 9px rgba(var(--magenta), .85); }
.reader-error p { margin: 11px 0 0; font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--secondary); }
.reader-retry { margin-top: 16px; padding: 8px 17px; font-size: 12px; }
@keyframes readerSkeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes readerLoadPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* gate shown to non-members */
.reader-gate { margin: 22px 0; padding: 22px 24px; border-radius: 14px; border: 1px solid rgba(var(--violet), .35); background: rgba(11, 15, 22, .92); backdrop-filter: blur(3px); }
.reader-gate .g-kind { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--violet), 1); border: 1px solid rgba(var(--violet), .4); padding: 5px 11px; border-radius: 20px; }
.reader-gate .g-kind span { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--violet), 1); box-shadow: 0 0 7px rgba(var(--violet), 1); }
.reader-gate h4 { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: #f2f6fb; margin: 14px 0 0; }
.reader-gate p { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--secondary); margin: 8px 0 0; }
.reader-summary { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--secondary); font-style: italic; margin: 4px 0 0; }

/* locked note: a blurred DECOY (generic filler, never the real note) under an
   unlock CTA. The real content is only in the gated Ghost page, so removing the
   blur reveals nothing real — security doesn't rely on the filter. */
.reader-locked { position: relative; margin-top: 10px; }
.reader-blur {
  filter: blur(6px); opacity: .62; user-select: none; pointer-events: none;
  max-height: 460px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
.reader-lockwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.reader-lockwrap .reader-gate { margin: 0; max-width: 440px; text-align: center; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); }
.reader-lockwrap .g-kind { align-self: center; }
.reader-lockwrap .reader-summary { max-width: 42ch; }
.reader-access-link { margin-top: 16px; padding: 9px 18px; font-size: 13px; }

/* ---- rendered note content (.vault-note wraps .v-*/.tok-* markup) ---- */
.vault-note { font-family: var(--font-body); font-size: 17px; line-height: 1.72; color: rgba(233, 239, 246, .9); }
.vault-note p { margin: 15px 0; }
.vault-note strong { color: #fff; font-weight: 700; }
.vault-note em { color: #eef3f9; }
.vault-note a.wl { color: rgba(var(--cyan), 1); text-decoration: none; border-bottom: 1px solid rgba(var(--cyan), .35); padding-bottom: 1px; white-space: nowrap; cursor: pointer; }
.vault-note a.wl:hover { border-bottom-color: rgba(var(--cyan), 1); text-shadow: 0 0 12px rgba(var(--cyan), .5); }
.vault-note a.wl .wl-glyph { font-size: .7em; margin-right: 3px; opacity: .7; }
.vault-note a.ext { color: rgba(var(--cyan), 1); text-decoration: none; border-bottom: 1px solid rgba(var(--cyan), .3); }
/* in-note heading jump ([[#Heading]]) — distinct from the cyan graph-node link */
.vault-note a.wl-anchor { color: rgba(var(--violet), .92); text-decoration: none; border-bottom: 1px dotted rgba(var(--violet), .4); padding-bottom: 1px; cursor: pointer; }
.vault-note a.wl-anchor:hover { border-bottom-color: rgba(var(--violet), 1); text-shadow: 0 0 12px rgba(var(--violet), .45); }
.vault-note a.wl-anchor .wl-anchor-glyph { font-family: var(--font-mono); font-size: .72em; margin-right: 4px; opacity: .65; }
.vault-note :target { scroll-margin-top: 16px; }
.vault-note code { font-family: var(--font-mono); font-size: .82em; background: rgba(var(--cyan), .08); border: 1px solid rgba(var(--cyan), .16); border-radius: 5px; padding: 1px 6px; color: #a9f0e4; }
.vault-note .v-h2 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--primary); margin: 34px 0 4px; padding-top: 8px; display: flex; align-items: center; gap: 11px; }
.vault-note .v-h2::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: rgba(var(--violet), 1); box-shadow: 0 0 8px rgba(var(--violet), .7); flex: none; }
.vault-note .v-h3 { font-family: var(--font-display); font-weight: 650; font-size: 16px; color: var(--secondary); margin: 24px 0 2px; }
.vault-note hr { border: none; height: 1px; background: var(--hairline); margin: 30px 0; }
.vault-note .v-code { position: relative; margin: 18px 0; border: 1px solid var(--hairline); border-radius: 11px; background: #0a0e14; overflow: hidden; }
.vault-note .v-code-lang { position: absolute; top: 0; right: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); background: rgba(255, 255, 255, .04); border-left: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); border-radius: 0 11px 0 8px; padding: 4px 10px; }
.vault-note .v-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; }
.vault-note .v-code code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.65; color: #c7d3e0; background: none; border: none; padding: 0; white-space: pre; }
.vault-note .tok-comment { color: #6b7684; font-style: italic; }
.vault-note .tok-kw { color: rgba(var(--violet), 1); }
.vault-note .tok-type { color: rgba(var(--cyan), 1); }
.vault-note .tok-str { color: rgba(var(--green), 1); }
.vault-note .tok-num, .vault-note .tok-const { color: rgba(var(--amber), 1); }
.vault-note .tok-pre { color: rgba(var(--magenta), 1); }
.vault-note .v-callout { --a: var(--slate); margin: 20px 0; padding: 14px 18px 14px 16px; border-radius: 11px; border: 1px solid rgba(var(--a), .22); border-left: 3px solid rgba(var(--a), .9); background: rgba(var(--a), .06); }
.vault-note .v-cyan { --a: var(--cyan); } .vault-note .v-green { --a: var(--green); } .vault-note .v-violet { --a: var(--violet); }
.vault-note .v-amber { --a: var(--amber); } .vault-note .v-magenta { --a: var(--magenta); } .vault-note .v-slate { --a: var(--slate); }
.vault-note .v-callout-h { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 5px 9px; margin-bottom: 2px; }
.vault-note .v-callout-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: rgba(var(--a), 1); box-shadow: 0 0 9px rgba(var(--a), .8); flex: none; }
.vault-note .v-callout-kind { font-family: var(--font-mono); font-size: 10px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: rgba(var(--a), 1); }
.vault-note .v-callout-title { flex: 1 1 260px; min-width: 0; font-family: var(--font-display); font-weight: 650; font-size: 14.5px; line-height: 1.45; color: var(--primary); }
.vault-note .v-callout-body { color: rgba(233, 239, 246, .82); }
.vault-note .v-callout-body p:first-child { margin-top: 6px; } .vault-note .v-callout-body p:last-child { margin-bottom: 0; }
.vault-note .v-tablewrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--hairline); border-radius: 11px; }
.vault-note .v-table { width: 100%; border-collapse: collapse; font-family: var(--font-display); font-size: 13.5px; }
.vault-note .v-table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--label); text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hairline); background: rgba(255, 255, 255, .02); white-space: nowrap; }
.vault-note .v-table td { padding: 10px 14px; border-bottom: 1px solid rgba(30, 39, 51, .6); color: var(--secondary); vertical-align: top; }
.vault-note .v-table tr:last-child td { border-bottom: none; }
.vault-note .v-list { margin: 14px 0; padding-left: 2px; list-style: none; }
.vault-note .v-list li { position: relative; padding-left: 22px; margin: 8px 0; }
.vault-note .v-list li::before { content: "›"; position: absolute; left: 5px; color: rgba(var(--violet), 1); font-family: var(--font-mono); top: -1px; }
.vault-note .v-ordered { margin: 16px 0; padding-left: 30px; }
.vault-note .v-ordered li { margin: 9px 0; padding-left: 5px; }
.vault-note .v-ordered li::marker { color: rgba(var(--violet), 1); font-family: var(--font-mono); font-size: .78em; }
.vault-note .v-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; margin: 22px 0; }
.vault-note .v-image { display: block; margin: 20px 0; }
.vault-note .v-media .v-image { margin: 0; }
.vault-note .v-image img { display: block; width: 100%; max-height: 70vh; object-fit: contain; border: 1px solid var(--hairline); border-radius: 11px; background: #080c11; }
.vault-note .v-image-caption { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: 10px; line-height: 1.5; color: var(--label); }
.vault-note .v-attachment { display: inline-flex; align-items: center; margin: 8px 0; padding: 6px 10px; border: 1px solid var(--hairline); border-radius: 7px; background: rgba(255, 255, 255, .025); font-family: var(--font-mono); font-size: 10px; color: var(--label); }
.vault-note .v-transcript { font-size: .95em; line-height: 1.78; }
.vault-note .v-transcript p { max-width: 72ch; margin: 1.15em 0; }
.vault-note .v-tasklist { margin: 14px 0; padding-left: 0; list-style: none; }
.vault-note .v-task { display: flex; align-items: flex-start; gap: 11px; margin: 9px 0; }
.vault-note .v-check { flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 5px; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(var(--green), 1); background: rgba(255, 255, 255, .02); }
.vault-note .v-check.on { border-color: rgba(var(--green), .5); background: rgba(var(--green), .1); }
.vault-note .v-quote { margin: 18px 0; padding: 4px 0 4px 16px; border-left: 3px solid rgba(var(--violet), .5); color: var(--secondary); font-style: italic; }

/* Let supporting browsers postpone layout/paint for genuinely offscreen,
   repeated content. Fallback sizes keep the scrollbar stable until each block
   has been measured; `auto` remembers the real size after first render. */
@supports (content-visibility: auto) {
  .post-card,
  .polaroid-grid .frame,
  .vault-note > :is(.v-code, .v-callout, .v-tablewrap, .v-media, .v-image, .v-transcript, .v-quote),
  .vault-note > .v-transcript > p {
    content-visibility: auto;
  }

  .post-card { contain-intrinsic-size: auto 130px; }
  .polaroid-grid .frame { contain-intrinsic-size: auto 150px; }
  .vault-note > :is(.v-code, .v-callout, .v-tablewrap, .v-quote),
  .vault-note > .v-transcript > p { contain-intrinsic-size: auto 180px; }
  .vault-note > :is(.v-media, .v-image, .v-transcript) { contain-intrinsic-size: auto 520px; }
}

@media (max-width: 560px) {
  .reader-card { max-height: 68vh; }
  .reader-scroll { padding: 20px 20px 40px; }
  .reader-title { font-size: 23px; }
  .vault-note .v-callout-title { flex-basis: 100%; margin-left: 17px; }
  @supports (content-visibility: auto) {
    .vault-note > :is(.v-media, .v-image, .v-transcript) { contain-intrinsic-size: auto 260px; }
  }
  /* On phones the reader below already carries the title/meta/summary for
     everyone (full note for members, gated summary for non-members), so the
     floating inspector's preview text is duplicated — trim it to just the
     graph-interactive links/backlinks. */
  #cst-inspector .ins-title,
  #cst-inspector .ins-meta,
  #cst-inspector .ins-excerpt { display: none; }
}