@import url("./defaults.css");
/* Card wall E · Margin haiku — styles, taken 1:1 from the Paper boards
   (Sonnet · E · Margin haiku · Desktop 1440 / Mobile 390 / Unfurl sequence). */

/* ── Brand corner motif (owner decision 2026-10-21) ────────────────
   Two sharp, two rounded, on one diagonal: rounded top-right and
   bottom-left, sharp top-left and bottom-right. One rule; the radii are
   design tokens. Cards keep a uniform 18px radius (not the motif).     */
@property --nv-handoff { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --nv-day-progress { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes nv-day-clipping { from { --nv-day-progress: 0; } to { --nv-day-progress: 1; } }
@keyframes nv-handoff { from { --nv-handoff: 0; } to { --nv-handoff: 1; } }
@keyframes nv-handoff-cut { 0%,49.999% { --nv-handoff: 0; } 50%,100% { --nv-handoff: 1; } }
@keyframes nv-margin-meta-fade { from { opacity: 1; } to { opacity: 0; } }
:root {

  /* Stagger (saved production defaults) */
  --nv-stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Haiku unfurl / fold (saved production defaults) */

  /* Wall (saved production defaults) */
  --nv-handoff: 0;
  --nv-sheet-top: 32px;
  --nv-sheet-rest-top: 32px;
  --nv-sheet-travel: 82px;
  --nv-wordmark-travel: 80px; /*24px remaining at the board’s70% halfway pose*/

  /* Cards (saved production defaults). Defaults are the round-4 values. */
  --nv-source-chip-fill: #F4D7E1;
  /* C3 decision72: exact #F4D7E18C, decision81 hides image pills at rest. */
  --nv-image-pill-opacity: 54.9019608%;
  --nv-image-overlay-ms: 180ms;
  --nv-image-overlay-ease: cubic-bezier(.215, .61, .355, 1); /* cubic ease-out: ~70% at 60ms */
  --nv-image-chip-rise: 2px;
  --nv-day-pin-gap: 32px;
  --nv-wall-gutter: 4px;
  --nv-day-margin-inset: 2px;
  --nv-haiku-inset: 6px;
  --nv-day-pin-top: calc(var(--nv-day-pin-gap) - var(--nv-haiku-inset) - var(--nv-wall-gutter));
  --nv-margin-status-gap: 12px;
  --nv-meta-fade-distance: 16px;
  --nv-sheet-bottom: 64px;
  --nv-image-pill-blur: 12px;
  --nv-corner-shape: round;
  --nv-sheet-shape: round;
  --nv-card-delay: 0ms;

  /* Corner-furniture lines, used to keep the prototype panel clear of them.
     Desktop: 28px inset + 16px line = 44px from the edge. */
  --nv-furniture-top: 46px;
  --nv-furniture-bottom: 44px;

  /* Decision 36: only the giant letters use the board fill. */
  --nv-brand-glow-1: #3BB3E3;
  --nv-brand-glow-1-edge: #45D8C2;
  --nv-brand-glow-2: #65CD3A;
  --nv-brand-glow-2-edge: #CD76B7;
  --nv-brand-base: #A98BD6;
  --nv-brand-base-bottom: #3020AC;
  --nv-brand-gradient:
    radial-gradient(circle farthest-corner at 12% 50% in oklab, var(--nv-brand-glow-1) 0%, var(--nv-brand-glow-1-edge) 20%, #63BE8000 43%),
    radial-gradient(circle farthest-corner at 48% 50% in oklab, var(--nv-brand-glow-2) 0%, var(--nv-brand-glow-2-edge) 25%, #00000000 56%),
    linear-gradient(in oklab 180deg, var(--nv-brand-base) 0%, var(--nv-brand-base-bottom) 100%);

}
body {
  timeline-scope: --wall-handoff;
  animation: nv-handoff linear both;
  animation-timeline: --wall-handoff;
  animation-range: var(--nv-handoff-start, 29px) var(--nv-handoff-end, 245px);
  --nv-sheet-top: calc(var(--nv-sheet-rest-top) + var(--nv-sheet-travel) * var(--nv-handoff));
  --nv-wall-height: calc(100dvh - var(--nv-sheet-top) - var(--nv-sheet-bottom));
}
body[data-reduced-motion="true"] { animation-name: nv-handoff-cut; }

.nv-diagonal {
  border-radius: 0 var(--nv-corner, var(--nv-corner-lg)) 0 var(--nv-corner, var(--nv-corner-lg));
}

/* ── Base / field ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  /* Native elastic overscroll stays available (owner decision 17). */
  overscroll-behavior-y: auto;
}

body {
  background-color: #06050A;
  font-family: "SFProRounded-Medium", "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

/* Color Stream 3 shader layer (the solid #0A0918 fallback is the layer's own
   background, so the first frame and every failure still show a dark field). */
.shader-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #0A0918;
  pointer-events: none;
}

#shader-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* A soft edge vignette keeps the white corner text legible over the bright
   parts of the shader; it is part of the page layer the cut-outs show. */
.shader-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #06050AE6 0%, #06050AE6 max(18vh, 160px), #06050A00 max(38vh, 300px), #06050A00 84%, #06050AE6 94%, #06050AE6 100%),
    linear-gradient(90deg, #06050A99 0%, #06050A00 12%, #06050A00 88%, #06050A99 100%);
}

/* The fallback (and the first frame) is exactly #0A0918, not a vignetted edge. */
body:not([data-shader="ready"]) .shader-layer::after { display: none; }

body[data-shader="fallback"] #shader-canvas { visibility: hidden; }

/* ── Scrolled-state wordmark (desktop/tablet) ──────────────────────
   One element in the field, inside a 72px clip at the viewport top, so it
   appears to rise out from behind the sheet's top edge. It can take a fill. */
.masthead-wordmark-clip {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--nv-sheet-top);
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.masthead-wordmark {
  position: absolute;
  left: calc(50px + var(--nv-wordmark-left-adjust, 6px));
  top: 0;
  width: calc(100vw - 66px);
  height: 108px;
  color: #FFFFFF;
  font-family: "Fraunces", system-ui, sans-serif;
  font-size: 92px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 108px;
  /* Decision47: the complete 92px italic wordmark fits the114px band. */
  text-indent: -5px;
  text-align: left;
  white-space: nowrap;
  transform: translateY(calc(var(--nv-wordmark-travel) * (1 - min(1.4 * var(--nv-handoff), .4 + .6 * var(--nv-handoff))))); /* fully hidden below the clip at rest */
  will-change: transform;
}
.masthead-wordmark::after { content: none; }

/* ── Corner furniture (fixed while the wall scrolls inside the sheet) ── */
.furniture-item {
  position: fixed;
  z-index: 30;
  display: flex;
  align-items: center;
}

.furniture-logo {
  position: fixed;
  top: 30px;
  left: 32px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -2px;
  color: #FFFFFF;
  font-family: "Fraunces", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 20px;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  will-change: opacity, transform;
}

.furniture-bhava {
  position: fixed;
  left: calc(var(--nv-sheet-side) + var(--nv-content-inset-x) + var(--nv-patrons-optical));
  bottom: 28px;
  z-index: 30;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 16px;
  text-decoration: underline 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none !important;
}
.furniture-bhava span { text-decoration: underline 1px #FFFFFF66; text-underline-offset: 3px; }
.furniture-bhava:hover span { text-decoration-color: #FFFFFF; }
.furniture-bhava svg { flex: 0 0 11px; }
.furniture-bhava path { stroke: #FFFFFF; }

.furniture-legal {
  bottom: 28px;
  right: 32px;
  gap: 24px;
}

.furniture-legal a {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 16px;
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}

/* Desktop/tablet: the big wordmark is the logo; no small top-left logo. */
@media (min-width: 768px) {
  .furniture-logo { display: none; }
}

/* ── One focus ring everywhere (cards and the corner links) ───────────
   Tab shows it; a pointer press shows none (that is what :focus-visible
   means). Same 2px #285AEC, offset 2, as the cards.                     */
.card:focus-visible,
.card-profile-link:focus-visible,
.card-post-link:focus-visible,
.furniture-item:focus-visible,
.furniture-bhava:focus-visible,
.furniture-legal a:focus-visible {
  outline: 2px solid #285AEC;
  outline-offset: 2px;
  /* keeps the blue ring readable where it sits on the dark field */
  box-shadow: 0 0 0 4px rgba(6, 5, 10, 0.45);
}

/* ── Sheet ────────────────────────────────────────────────────────── */
.sheet {
  /* Corner shape is a shared card choice; the sheet/banner only follow it when
     the Cards toggle is on (default: round, i.e. today's shape). */
  corner-shape: var(--nv-sheet-shape, round);
  position: fixed;
  top: var(--nv-sheet-top);
  left: var(--nv-sheet-side);
  right: var(--nv-sheet-side);
  bottom: var(--nv-sheet-bottom);
  background: transparent;
  border: 0;
  /* Preserve content geometry without drawing a stroke. */
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10;
  overscroll-behavior: auto;
  --nv-corner: var(--nv-corner-lg);
}

/* The lavender sheet surface lives on a pseudo-element so it can carry true
   holes for the See-through brand fill (the page shader shows through). */
.sheet::before, .sheet::after { content: none; }
/* A separate loading blur must not make the moving fixed sheet itself a
   backdrop-filter surface: Chrome can misplace that surface on first scroll.
   Keep the uninterrupted fill on its unfiltered owner throughout entrance. */
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; border-radius: inherit; corner-shape: inherit;
  -webkit-backdrop-filter: blur(var(--nv-sheet-blur));
  backdrop-filter: blur(var(--nv-sheet-blur));
  visibility: hidden;
}
body[data-loading="true"] .sheet::before,
body:not([data-aperture-ready="true"]) .sheet::before { visibility: visible; }

/* ── Scrolling wall: banner first, then the days (owner decision 6) ── */
.wall-scroll {
  scroll-timeline-name: --wall-handoff;
  scroll-timeline-axis: block;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  /* 4px so a first-row focus ring is not clipped by the scroll edge */
  padding: var(--nv-wall-gutter) var(--nv-content-inset-x) 33px;
  scroll-behavior: auto;
  /* Keep edge gestures on this scrollport. With auto they chain to the
     overflow-hidden document, which cannot stretch (decision17, round17).
     contain keeps Chrome's native local elasticity; none would suppress it. */
  overscroll-behavior-y: contain;
  scroll-snap-type: none;
}

/* ── C4 masthead banner (owner decision 11) ──────────────────────────
   Keeps the banner's place and diagonal corners; everything inside is the
   C4 composition. Container query units make the masthead scale proportionally
   with the banner width, so the phone (no C4 board) is a scaled poster. */
.masthead-stage {
  position: relative;
  margin: 25px 0 24px;
  isolation: isolate;
  --nv-corner: var(--nv-corner-md);
  corner-shape: var(--nv-sheet-shape, round);
}
/* #1516, Abhi2026-11-02 supersedes Decision112: responsive defaults remain,
   while the generated recipe binds explicit gap edits at every width. */
@media (min-width: 1024px) {
  .masthead-stage { margin-bottom: var(--nv-below-masthead-gap); }
}
.sheet-backdrop, .sheet-blur {
  /* Persistent coincident layers travel with the same structural aperture.
     Keep fill separate: Chrome culls a moving backdrop-filter at the previous
     scrollport edge for one frame on reversal. That must not punch out fill. */
  will-change: transform, opacity;
  position: absolute;
  pointer-events: none;
  visibility: visible;
  opacity: 1;
}
.sheet-backdrop {
  inset: 0; z-index: -1; border-radius: inherit; corner-shape: inherit;
  /* A native outset shadow paints the sheet around the actual window shape.
     Unlike an oversized clipped rectangle, it has no scroll-culling edge. */
  --nv-sheet-spread-shadow: 0 0 0 var(--nv-backdrop-spread, 100vmax) rgba(243, 241, 252, var(--nv-sheet-opacity));
  box-shadow: var(--nv-sheet-spread-shadow);
}
.sheet-blur {
  /* Decorative viewport plane is outside the scrolling content. */
  inset: 0;
  z-index: -2;
  -webkit-backdrop-filter: blur(var(--nv-sheet-blur));
  backdrop-filter: blur(var(--nv-sheet-blur));
}
.masthead-cover {
  /* The continuous sheet now owns the loading fill. A second rounded cover
     would double that fill, and recreate a distinct window during entrance. */
  display: none;
}
.masthead-stage.replay-reset, .replay-reset .banner, .replay-reset .masthead-cover { transition: none !important; }
#days { isolation: isolate; }
.banner {
  position: relative;
  /* 24px, not 28px: the wall's 4px focus-ring gutter sits above it, so the
     banner's top lands back on the board's 101px at 1440. */
  margin: 0;
  width: 100%;
  aspect-ratio: 1310 / calc(216 * var(--nv-masthead-height,100) / 100);
  height: auto;
  flex-shrink: 0;
  overflow: hidden;
  container-type: inline-size;
  corner-shape: var(--nv-sheet-shape, round);
  background-color: transparent;
  border: 0;
  padding: 0;
  isolation: isolate;
  z-index: 1;
  --nv-corner: var(--nv-corner-md);
}

/* Decision40: the banner is a transparent, borderless window. The fill and
   blur live outside it on coincident sheet layers, never inside the window. */
.banner::before, .banner::after { content: none; border: 0; background: none; }

.masthead-byline {
  position: absolute;
  right: 16px;
  top: 16px;
  color: #FFFFFF;
  background: #FFFFFF1A;
  padding: 12px 20px;
  border-radius: 0 20px 0 20px;
  font-family: "Newsreader", system-ui, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  z-index: 1;
}

/* Giant word, cropped by the banner's bottom edge. */
.masthead-word {
  position: absolute;
  left: 1.67939cqw;
  top: auto;
  bottom: -5.19084cqw;
  width: 76.33588cqw;
  height: 19.08397cqw;
  color: transparent;
  font-family: "Fraunces", system-ui, sans-serif;
  font-size: 23.66412cqw;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 19.08397cqw;
  white-space: nowrap;
  z-index: 2;
}

/* Abhi placed "House of" by hand: right 902px of the banner, top 82px. */
.masthead-house {
  position: absolute;
  left: 21.45038cqw;
  bottom: 8.47328cqw;
  color: transparent;
  background-color: #FFFFFF;
  background-image: linear-gradient(102.05deg in oklab, var(--nv-house-glow-start) 8.08%, var(--nv-house-glow-end) 97.56%);
  -webkit-background-clip: text;
  background-clip: text;
  font-family: "Fraunces", system-ui, sans-serif;
  font-size: 2.1374cqw;
  font-weight: 700;
  font-style: italic;
  font-synthesis: none;
  line-height: 1;
  text-align: right;
  z-index: 1;
}

/* D1 / decision41: all tablets use the clipped base poster; corners/byline stay. */
@media (min-width:768px) and (max-width:1024px){
 /* Responsive corner defaults and explicit overrides share the generated recipe. */
 .masthead-byline{padding:8px 16px;border-radius:0 16px 0 16px}
}

/* Board and See-through keep their existing treatments; White includes both
   desktop words and the combined phone wordmark. The byline is invariant. */
.masthead-word {
  background-color: var(--nv-brand-color);
  background-image: var(--nv-brand-image);
  background-attachment: scroll;
  background-size: auto;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body[data-brand-fill="board"] {
  --nv-brand-color: transparent;
  --nv-brand-image: var(--nv-brand-gradient);
}
body[data-brand-fill="field"] {
  --nv-brand-color: transparent;
  --nv-brand-image: none;
}
body, body[data-brand-fill="white"] {
  --nv-brand-color: #FFFFFF;
  --nv-brand-image: none;
}
body:not([data-brand-fill]) :is(.masthead-word, .masthead-house, .masthead-wordmark),
body[data-brand-fill="white"] :is(.masthead-word, .masthead-house, .masthead-wordmark) {
  color: var(--nv-brand-color);
  background: none;
}

/* ── Day ──────────────────────────────────────────────────────────── */
.day {
  display: flex;
  align-items: flex-start;
  gap: var(--nv-margin-gap);
}

.day + .day { margin-top: var(--nv-day-gap); }

/* ── Day margin (sticky side column) ──────────────────────────────── */
.day-margin {
  width: 400px;
  flex-shrink: 0;
  border-right: 1px solid #0E0D2424;
  padding-right: 28px;
  padding-top: var(--nv-day-margin-inset);
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.margin-status { display: flex; align-items: center; gap: 8px; padding-top: 2px; margin-bottom: var(--nv-margin-status-gap); }
.margin-status-dot { width: 7px; height: 7px; border-radius: 4px; background: #0B8F9C; flex-shrink: 0; }
.margin-status-text { font-family: "SFProRounded-Regular", "SF Pro Rounded", system-ui, sans-serif; color: #0E0D24B8; font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: .05em; white-space: nowrap; }

.margin-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  animation: nv-margin-meta-fade linear both;
  animation-timeline: view(block calc(var(--nv-wall-gutter) + var(--nv-day-pin-top) + var(--nv-haiku-reserved-height) + var(--nv-meta-fade-distance)) 0px);
  animation-range: exit-crossing 0px exit-crossing var(--nv-meta-fade-distance);
}
.margin-calendars { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.margin-calendar { display: flex; align-items: center; gap: 5px; width: fit-content; color: #0E0D24A6; font-family: "SFProRounded-Medium", "SF Pro Rounded", system-ui, sans-serif; font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .02em; white-space: nowrap; text-decoration: none; }
.margin-calendar path { stroke: currentColor; }
.margin-calendar span { text-decoration: underline 1px color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.margin-calendar:hover span { text-decoration-color: currentColor; }
.margin-calendar:focus-visible { outline: 2px solid #285AEC; outline-offset: 2px; }

.margin-date {
  color: #0E0D24;
  font-family: "Newsreader", system-ui, sans-serif;
  font-size: 19px;
  font-style: italic;
  font-weight: 600;
  line-height: 26px;
  white-space: nowrap;
}



/* #1692: only the haiku margin endpoints are measured. A universal rule here
   cancels active card/masthead entrances and commits their final opacity. */
body.nv-measuring .day-margin,
body.nv-measuring .day-margin *,
body.nv-measuring .day-margin *::before,
body.nv-measuring .day-margin *::after {
  transition: none !important;
  animation: none !important;
}

/* The settled haiku height is reserved inline by JS on every day margin
   (measureDays), so an unfurl never reflows the cards. */
.margin-body {
  position: sticky;
  top: var(--nv-day-pin-top);
  z-index: 3;
  flex-shrink: 0;
  padding-top: var(--nv-haiku-inset);
  min-height: 0;
}
.margin-body[hidden] { display: none; }

.haiku {
  --nv-haiku-base-size: 25px;
  display: flex;
  flex-direction: column;
}

.haiku .line {
  color: #0E0D24;
  font-family: "Fraunces", system-ui, sans-serif;
  font-size: var(--nv-haiku-size, var(--nv-haiku-base-size));
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: calc(var(--nv-haiku-size, var(--nv-haiku-base-size)) * 1.32);
}

/* Entry125 supersedes the haiku-only “No opacity fades” rule.
   Card entrances keep their existing rule. All three text rows exist at rest. */
.haiku-eyebrow { height:18px; line-height:18px; margin-bottom:2px; white-space:nowrap; display:flex; align-items:baseline; }
.word {
  font-size:56px;
  line-height:60px;
  letter-spacing:-0.03em;
  color:#0E0D24;
  font-family:"Fraunces",system-ui,sans-serif;
  font-style:italic;
  font-weight:600;
  transition:font-size var(--nv-fold-ms) ease-in-out,line-height var(--nv-fold-ms) ease-in-out,letter-spacing var(--nv-fold-ms) ease-in-out;
  transition-delay:var(--nv-haiku-out-total);
}
.haiku-suffix { font:italic 600 var(--nv-haiku-eyebrow-size,13px)/18px "Fraunces",system-ui,sans-serif;letter-spacing:.01em;color:rgb(14 13 36 / var(--nv-haiku-eyebrow-ink,.72));white-space:pre;opacity:0;transition:opacity var(--nv-haiku-out-duration,120ms) linear;transition-delay:calc(var(--nv-haiku-out-total) - var(--nv-haiku-out-duration,120ms)); }
.haiku .line { height:calc(var(--nv-haiku-size,var(--nv-haiku-base-size)) * 1.32);white-space:nowrap; }
.line1-rest,.line1-copy,.line-clip,.line-copy { display:block;white-space:nowrap; }
.haiku-letter { opacity:0;transition:opacity var(--nv-haiku-out-duration,120ms) linear;transition-delay:var(--nv-letter-out-delay); }
.day.unfurled .word,.day.settled .word {
  font-size:var(--nv-haiku-eyebrow-size,13px);
  line-height:18px;
  letter-spacing:.01em;
}
.day.unfurled .word {
  transition:font-size 200ms cubic-bezier(0.34,1.56,0.64,1),line-height 200ms cubic-bezier(0.34,1.56,0.64,1),letter-spacing 200ms cubic-bezier(0.34,1.56,0.64,1);
  transition-delay:0ms;
}
.day.unfurled .haiku-letter { opacity:1;transition-duration:var(--nv-haiku-in-duration,160ms);transition-delay:var(--nv-letter-in-delay); }
.day.unfurled .haiku-suffix,.day.settled .haiku-suffix { opacity:1;transition-delay:0ms; }
.day.settled .word,.day.settled .haiku-letter,.day.settled .haiku-suffix { transition:none; }
.day.settled .haiku-letter { opacity:1; }
.haiku.is-instant .word { font-size:var(--nv-haiku-eyebrow-size,13px);line-height:18px;letter-spacing:.01em; }
.haiku.is-instant .haiku-letter,.haiku.is-instant .haiku-suffix { opacity:1; }
.haiku.is-instant .word,.haiku.is-instant .haiku-letter,.haiku.is-instant .haiku-suffix { transition:none; }
body[data-reduced-motion="true"] .haiku-letter,
body[data-reduced-motion="true"] .haiku-suffix,
body[data-reduced-motion="true"] .word { transition:none !important; }

/* ── Cards (Sakhi anatomy) ────────────────────────────────────────── */
/* The day content: masonry blocks around an optional full-width #wip card. */
.day-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.day-body .day-cards {
  flex: none;
  width: 100%;
}

.day-cards {
  flex: 1;
  min-width: 0;
  --nv-columns: 3;
  position: relative;
}
.day-cards > .card {
  position: absolute;
  width: calc((100% - (var(--nv-masonry-columns) - 1) * var(--nv-card-gap)) / var(--nv-masonry-columns));
  left: calc(var(--nv-masonry-column, 0) * (100% + var(--nv-card-gap)) / var(--nv-masonry-columns));
}

.banner {
  opacity: 0;
  transition: opacity var(--nv-masthead-opacity-ms) var(--nv-masthead-opacity-ease);
}
.banner.is-in { opacity: 1; }
.masthead-stage {
  transform: translateY(var(--nv-masthead-rise)) scale(var(--nv-masthead-start-scale));
  transition: transform var(--nv-masthead-transform-ms) var(--nv-masthead-transform-ease);
}
.masthead-stage:has(.banner.is-in) { transform: none; }

.card {
  /* Keep the accepted native layout reservation constant; only the overlay
     below draws a stroke, independently of its tuned thickness. */
  --nv-card-layout-edge: 1px;
  --nv-card-stroke-color: rgb(14 13 36 / var(--nv-card-stroke-opacity));
  position: relative;
  isolation: isolate;
  display: block;
  break-inside: avoid;
  margin-bottom: var(--nv-row-gap);
  border: var(--nv-card-layout-edge) solid transparent;
  /* Paint the gradient across the reserved edge instead of repeating into it. */
  background-origin: border-box;
  border-radius: var(--nv-card-radius);
  corner-shape: var(--nv-corner-shape, round);
  box-shadow:
    var(--nv-card-shadow-contact) 0 1px 2px 0,
    var(--nv-card-shadow-drop) 0 var(--nv-card-drop-y) var(--nv-card-drop-blur) var(--nv-card-drop-spread);
  text-decoration: none;
  color: #0E0D24;
  outline: none;
}

/* Decisions130/137: framed cards share an overlay; frameless video puts the
   same overlay on its cover. Quotes keep only their existing gradient rule.
   Absolute inset0 starts at the padding box; the fixed negative margin brings
   it back to the outer rounded edge, including on full-bleed images. */
.card::after, .card--video .media-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: calc(-1 * var(--nv-card-layout-edge));
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
  z-index: 6;
  box-shadow: inset 0 0 0 var(--nv-card-stroke-width) var(--nv-card-stroke-color);
}
.card--video::after, .card--quote::after { content: none; }
.card--video .media-cover::after { margin: 0; }
.card--wip, .card--video, .card--quote { --nv-card-layout-edge: 0px; }
.card--audio, .card--wip { --nv-card-stroke-color: rgb(255 255 255 / var(--nv-card-stroke-opacity)); }

/* ── Load stagger: rise + fade + slight scale, transform/opacity only ──────
   The reveal order is row-by-row across columns, assigned in JS as a per-card
   --nv-card-delay (capped so a long day never waits more than ~900 ms). The
   delay applies to the entrance only, so a hover-lift is never delayed.      */
.card {
  opacity: 0;
  transform: translateY(var(--nv-stagger-rise)) scale(var(--nv-stagger-scale));
  transition:
    opacity var(--nv-stagger-opacity-ms) var(--nv-stagger-opacity-ease) var(--nv-card-delay, 0ms),
    transform var(--nv-stagger-transform-ms) var(--nv-stagger-transform-ease) var(--nv-card-delay, 0ms),
    translate var(--nv-card-hover-ms) var(--nv-card-hover-ease),
    scale var(--nv-card-hover-ms) var(--nv-card-hover-ease),
    box-shadow var(--nv-card-hover-ms) var(--nv-card-hover-ease);
  transform-origin: center;
  will-change: opacity, transform;
}

.card.is-in {
  opacity: 1;
  transform: none;
}

/* Paper09 G · Quiet frame, decisions93–95. The wall supplies the shared
   shadow and optional hover lift. Geometry is fixed from the first slide. */
.card--wip { position: relative; width: 100%; height: auto; overflow: clip; border: 0; border-radius: var(--nv-wip-tuned-radius); corner-shape: var(--nv-wip-tuned-shape,round); background: #0E0D24; isolation: isolate; cursor: default; container-type: inline-size; touch-action: pan-y; }
.wip-track { position: absolute; inset: 0; display: flex; transition: transform var(--nv-slideshow-ms) ease; }
.wip-view { position: relative; width: 100%; height: 100%; flex: 0 0 100%; overflow: hidden; opacity: 0; transition: opacity var(--nv-slideshow-ms) var(--nv-wip-ease,ease); }
.wip-view.is-active { opacity: 1; }
.card--wip[data-dragging="true"] .wip-view, .card--wip[data-settling="true"] .wip-view { opacity: 1; transition: none; }
.wip-picture, .wip-pair { position: absolute; inset: 0; }
.wip-picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wip-view[data-kind="contain"] .wip-picture img { object-fit: contain; }
.wip-frost { position: absolute; left: calc(-1.5 * var(--nv-wip-frost,40px)); top: calc(-1.5 * var(--nv-wip-frost,40px)); width: calc(100% + 3 * var(--nv-wip-frost,40px)); height: calc(100% + 3 * var(--nv-wip-frost,40px)); object-fit: cover; object-position: center; filter: blur(var(--nv-wip-frost,40px)) saturate(130%) brightness(55%); }
.wip-pair { display: flex; align-items: center; justify-content: center; gap: var(--nv-wip-pair-gap); }
.wip-pair img { display: block; height: min(100%,calc((100cqw - var(--nv-wip-pair-gap)) / var(--nv-wip-pair-ratios))); width: auto; flex: none; object-fit: contain; }
.wip-scrim { position: absolute; left: 0; bottom: 0; width: 100%; height: 340px; max-height: 100%; background: linear-gradient(180deg,#0E0D2400 0%,rgb(14 13 36 / var(--nv-wip-shade-mid)) 50%,rgb(14 13 36 / var(--nv-wip-shade-bottom)) 100%); z-index: 1; pointer-events: none; }
.wip-meta { position: absolute; left: 28px; bottom: 28px; width: 600px; max-width: calc(100% - 56px); z-index: 3; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.wip-project { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: fit-content; max-width: 100%; color: #FFFFFF; font: 700 40px/44px Fraunces,serif; letter-spacing: -.02em; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.wip-project:focus-visible { outline: 2px solid #285AEC; outline-offset: 2px; }
.wip-caption { margin: 0; color: #FFFFFF; font: 500 18px/26px "SFProRounded-Medium", "SF Pro Rounded", system-ui, sans-serif; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.wip-controls { position: absolute; right: 20px; bottom: 30px; z-index: 3; display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgb(14 13 36 / var(--nv-wip-pill-opacity)); pointer-events: auto; transition: background-color var(--nv-wip-reveal-ms) ease-out; }
.wip-dot { flex: none; width: var(--nv-wip-dot-size); height: var(--nv-wip-dot-size); padding: 0; border: 0; border-radius: var(--nv-wip-dot-size); background: #FFFFFF80; cursor: pointer; transition: width var(--nv-wip-reveal-ms) ease-out,background-color var(--nv-wip-reveal-ms) ease-out; }
.wip-dot.is-active { width: var(--nv-wip-active-dot-size); background: #FFFFFF; }
.wip-dot:focus-visible, .card--wip:focus-visible { outline: 2px solid #285AEC; outline-offset: 2px; }
.wip-scrim, .wip-meta { opacity: 0; transition: opacity var(--nv-wip-reveal-ms) ease-out; }
.card--wip:hover .wip-scrim, .card--wip:hover .wip-meta, .card--wip:hover .wip-controls,
.card--wip:focus-visible .wip-scrim, .card--wip:focus-visible .wip-meta, .card--wip:focus-visible .wip-controls,
.card--wip:has(:focus-visible) .wip-scrim, .card--wip:has(:focus-visible) .wip-meta, .card--wip:has(:focus-visible) .wip-controls,
.card--wip[data-revealed="true"] .wip-scrim, .card--wip[data-revealed="true"] .wip-meta, .card--wip[data-revealed="true"] .wip-controls { opacity: 1; }
.card--wip:hover .wip-project, .card--wip:focus-visible .wip-project, .card--wip:has(:focus-visible) .wip-project, .card--wip:hover .wip-controls, .card--wip:focus-visible .wip-controls, .card--wip:has(:focus-visible) .wip-controls, .card--wip[data-revealed="true"] .wip-project, .card--wip[data-revealed="true"] .wip-controls { pointer-events: auto; }
.card--wip[data-dragging="true"] .wip-scrim, .card--wip[data-dragging="true"] .wip-meta { opacity: 0; transition: none; }
.card--wip[data-dragging="true"] .wip-controls { opacity: 1; }
.card--wip[data-cursor="true"] { cursor: none; }
.wip-cursor { position: absolute; top: 0; left: 0; width: var(--nv-wip-cursor-size); height: var(--nv-wip-cursor-size); display: flex; justify-content: center; align-items: center; z-index: 5; pointer-events: none; }
/* Decision37: wall set arrows, Open and the painted dots plate share one glass. */
.picture-affordance,.picture-dots::before { background:#F4D7E166;-webkit-backdrop-filter:blur(12px) brightness(var(--nv-cursor-pill-brightness));backdrop-filter:blur(12px) brightness(var(--nv-cursor-pill-brightness)); }
.picture-affordance { position:absolute;left:50%;top:0;translate:-50% 0;width:var(--nv-wip-cursor-size);height:var(--nv-wip-cursor-size);border-radius:calc(var(--nv-wip-cursor-size) / 2);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #0E0D2440;opacity:0;transition:opacity calc(var(--nv-picture-glyph-ms) * 1ms) var(--nv-picture-glyph-ease); }
.picture-affordance[data-zone="open"] { width:max-content;padding-inline:calc(var(--nv-picture-open-padding) * 1px);color:#FFFFFF;font:var(--nv-picture-open-weight) calc(var(--nv-picture-open-size) * 1px)/calc(var(--nv-picture-open-line) * 1px) "SFProRounded-Semibold","SF Pro Rounded",system-ui,sans-serif;letter-spacing:calc(var(--nv-picture-open-tracking) * 1em);white-space:nowrap; }
.picture-cursor.is-visible[data-direction="prev"] [data-zone="prev"],.picture-cursor.is-visible[data-direction="open"] [data-zone="open"],.picture-cursor.is-visible[data-direction="next"] [data-zone="next"] { opacity:1; }
.wip-cursor[hidden] { display: none; }
.wip-cursor svg { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wip-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(max-width:767px) {
 .wip-scrim { height: 100%; background: linear-gradient(180deg,#0E0D2433 0%,rgb(14 13 36 / var(--nv-wip-shade-mid)) 55%,rgb(14 13 36 / var(--nv-wip-shade-bottom)) 100%); }
 .wip-meta { left: 16px; bottom: 30px; width: 300px; max-width: calc(100% - 32px); gap: 2px; }
 .wip-project { font-size: 26px; line-height: 30px; }
 .wip-caption { font-size: 15px; line-height: 20px; }
 .wip-controls { right: 10px; bottom: 10px; border-radius: 8px; padding: 4px 6px; gap: 5px; }
 .wip-dot { width: 5px; height: 5px; border-radius: 5px; }
 .wip-dot.is-active { width: 14px; }
 @media(hover:hover) {
 .card--wip:not([data-revealed="true"]):not(:has(:focus-visible)):not(:focus-visible) .wip-meta,
 .card--wip:not([data-revealed="true"]):not(:has(:focus-visible)):not(:focus-visible) .wip-scrim { opacity: 0; }
 }
}
@media(prefers-reduced-motion:reduce) {
 .wip-track,.wip-view,.wip-dot { transition: none !important; }
 .wip-scrim,.wip-meta,.wip-controls { transition: opacity var(--nv-wip-reveal-ms) ease-out; }
}

/* Hover lift (Card hover, owner default Off). The rise uses the individual
   `translate` property so it composes with the entrance transform and can have
   its own 160 ms transition without inheriting the per-card stagger delay. */
@media(min-width:768px) and (hover:hover) and (pointer:fine) {
body[data-hover-lift="true"] .card:hover {
  translate: 0 -2px;
  box-shadow:
    var(--nv-card-shadow-contact) 0 1px 2px 0,
    var(--nv-card-shadow-drop) 0 calc(var(--nv-card-drop-y) + 4px) calc(var(--nv-card-drop-blur) + 8px) var(--nv-card-drop-spread);
}
}

/*131: transform-only picture growth stays inside the existing picture clip.
  Individual card scale composes with entrance transform and lift translate. */
.card-image img, .card-fill, .media-cover > img, .wip-picture img, .wip-pair img {
  transform-origin: center;
  transition: transform var(--nv-card-hover-ms) var(--nv-card-hover-ease);
}
@media(max-width:767px), (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
  :root { --nv-card-hover-ms: 0ms; }
}
@media(min-width:768px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  body[data-reduced-motion="false"][data-card-grow="image"] .card:hover :is(.card-image img,.card-fill,.media-cover > img,.wip-picture img,.wip-pair img) {
    transform: scale(var(--nv-card-hover-scale));
  }
  body[data-reduced-motion="false"][data-card-grow="card"] .card.is-in:hover {
    scale: var(--nv-card-hover-scale);
    z-index: 2;
  }
}

.day-margin {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms var(--nv-stagger-ease), transform 260ms var(--nv-stagger-ease);
}

.day.is-revealed .day-margin {
  opacity: 1;
  transform: none;
}

/* Three tints by content type */
.card--link {
  background-image: linear-gradient(in oklab 180deg, #CCEDF3 0%, #F2FAFC 72%, #FFFFFF 100%);
}

.card--x {
  background-image: linear-gradient(in oklab 180deg, #D8D4F7 0%, #F5F4FD 72%, #FFFFFF 100%);
}

.card--image {
  background-color: var(--nv-source-chip-fill); /* tinted fallback behind the image */
  background-image: linear-gradient(in oklab 180deg, #F4D7E1 0%, #F7E3EB 100%);
}

/* Cards → Article cards: tint from image. Only link/X cards that carry an inset
   image; imageless cards keep their type pastel. The same top→white fade. */
body[data-article-colour="on"] .card--link[data-has-image="true"],
body[data-article-colour="on"] .card--x[data-has-image="true"] {
  background-image: linear-gradient(in oklab 180deg,
    var(--nv-tint-color, #CCEDF3) 0%,
    color-mix(in oklab, var(--nv-tint-color, #CCEDF3) 32%, #FFFFFF) 72%,
    #FFFFFF 100%);
}

.card--link, .card--x {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

/*105: sibling links; the handle paints above the full-card post hit area. */
.card--x .card-post-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-profile-link { position: relative; z-index: 2; color: inherit; text-decoration: underline; text-decoration-color: rgb(14 13 36 / 40%); text-underline-offset: .15em; }
.card-profile-link:hover { text-decoration-color: currentColor; }
html[data-wall-input="pointer"] .card-profile-link:focus,
html[data-wall-input="pointer"] .card-post-link:focus { outline: none; box-shadow: none; }

.card-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.card-title {
  margin: 0;
  color: #0E0D24;
  font-family: "Fraunces", system-ui, sans-serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 26px;
}

.card-excerpt {
  margin: 0;
  color: #0E0D24C7;
  font-family: "SFProRounded-Regular", "SF Pro Rounded", system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.card-image {
  position: relative;
  border-radius: var(--nv-card-image-radius);
  corner-shape: var(--nv-corner-shape, round);
  overflow: hidden;
  width: 100%;
  margin-top: 2px;
  flex-shrink: 0;
  background-image: linear-gradient(in oklab 135deg, #CCEDF3 0%, #F4D7E1 100%);
}


.card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card-image img[hidden] { display: none; }

/* Paper page08 G, decisions90/92. Media geometry has one CSS home; the
   listener's general card radius/tint controls do not restyle these plates. */
:root {
  --nv-media-radius: var(--nv-media-tuned-radius);
  --nv-media-cover-radius: var(--nv-media-tuned-cover-radius);
  --nv-media-shadow: var(--nv-media-tuned-shadow);
}
.card--audio, .card--video { display: flex; flex-direction: column; corner-shape: round; text-decoration: none; cursor: pointer; }
.card--audio {
  padding: 16px 16px 14px; gap: 14px; background: #0E0D24;
  border-radius: var(--nv-media-radius); box-shadow: var(--nv-media-shadow);
}
.media-cover { display: block; overflow: hidden; position: relative; width: 100%; flex: none; background: #0E0D24; }
.media-cover img { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.media-cover img[hidden], .media-credit[hidden], .card--wip img[hidden] { display: none; }
.card--audio .media-cover { aspect-ratio: 1; border: 1px solid #FFFFFF1F; border-radius: var(--nv-media-cover-radius); }
.media-body { display: flex; flex-direction: column; min-width: 0; }
/*150: replaced-image baseline is its bottom. Shift by half its height minus
  half the title font x-height, preserving the first baseline at any line count. */
.media-caption { display: flex; align-items: first baseline; min-width: 0; }
.media-icon { display: block; flex: none; object-fit: cover; transform: translateY(calc((100% - 1ex) / 2)); }
.card--audio .media-caption { gap: 8px; padding-inline: 2px; font: 600 18px/23.2941176471px Fraunces, serif; }
.card--audio .media-icon { width: 16px; height: 16px; border-radius: 4px; }
.media-words { display: flex; flex-wrap:wrap; flex: 1; align-items: baseline; column-gap: 6px; min-width: 0; }
.card--audio .media-title { font: inherit; letter-spacing: -.01em; color: #FFFFFF; overflow-wrap: anywhere; flex: none; max-width: 100%; white-space: nowrap; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--nv-audio-title-lines); overflow: hidden; }
.card--audio .media-credit { font: 400 16px/25.1428571429px "SFProRounded-Regular", "SF Pro Rounded", system-ui, sans-serif; color: #FFFFFFA3; flex: 1; min-width: min(100%,40px); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-words[data-title-wrap="true"] { flex-direction: column; align-items: stretch; row-gap: 0; }
.card--audio .media-words[data-title-wrap="true"] .media-title { white-space: normal; }
.card--audio .media-words[data-title-wrap="true"] .media-credit { flex: none; }
.card--video { padding: 0; gap: 10px; background: none; border: 0; border-radius: var(--nv-media-radius); box-shadow: none; }
.card--video .media-cover { --nv-card-layout-edge: 1px; aspect-ratio: 16/9; border: var(--nv-card-layout-edge) solid transparent; border-radius: var(--nv-media-radius); box-shadow: var(--nv-media-shadow); transition: translate var(--nv-card-hover-ms) ease, box-shadow var(--nv-card-hover-ms) ease; }
.card--video .media-body { --nv-media-icon-size: 14px; --nv-media-icon-gap: 7px; --nv-media-caption-inset: 4px; gap: 4px; }
.card--video .media-caption { flex-wrap:wrap; gap: var(--nv-media-icon-gap); padding-inline: var(--nv-media-caption-inset); font: 500 13px/18px "SFProRounded-Medium", "SF Pro Rounded", system-ui, sans-serif; }
.card--video .media-icon { width: var(--nv-media-icon-size); height: var(--nv-media-icon-size); border-radius: 3px; }
.card--video .media-title { font: inherit; color: #0E0D24; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card--video .media-credit { font: 400 13px/18px "SFProRounded-Regular", "SF Pro Rounded", system-ui, sans-serif; color: #0E0D24A6; flex: 1; min-width: min(100%,40px); overflow-wrap:anywhere; }
.media-description { margin: 0; padding-inline: var(--nv-media-caption-inset); font: 400 14px/20px "SFProRounded-Regular", "SF Pro Rounded", system-ui, sans-serif; color: #0E0D24C7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media(min-width:768px) and (hover:hover) and (pointer:fine) {
body[data-hover-lift="true"] .card--video:hover { translate: none; box-shadow: none; }
body[data-hover-lift="true"] .card--video:hover .media-cover { translate: 0 -2px; box-shadow: var(--nv-media-shadow); }
body[data-hover-lift="true"] .card--audio:hover { box-shadow: var(--nv-media-shadow); }
}
.card--audio:focus-visible, .card--video:focus-visible { outline: 2px solid #285AEC; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  body[data-hover-lift="true"] .card--video:hover .media-cover { translate: none; transition: none; }
}

.card-domain {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #0E0D24;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 16px;
}

.card-domain svg { flex-shrink: 0; display: inline-block; }

/* Full-bleed image card */
.card--image {
  position: relative;
  overflow: clip;
  overflow-clip-margin: border-box;
}

.card--image img.card-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*48c: full-bleed frames already reserve their OUTER size by aspect ratio;
  they do not need the inset cards' transparent layout border. WebKit cannot
  extend its native overflow clip through that border. Remove it only here,
  keeping picture/link geometry coincident and the stroke at its old footprint. */
.card--image:not([data-content-order="custom"]) { border: 0; }
.card--image:not([data-content-order="custom"])::after { margin: 0; }
/* Published single-picture ratios and collection frames share uniform scaling;
   a different-shaped collection member crops rather than stretching. */
.card--image:not([data-content-order="custom"]) img.card-fill { object-fit: cover; }
.card--image:not([data-content-order="custom"]) > .card-source-link { translate: calc(-1 * var(--nv-card-layout-edge)) var(--nv-card-layout-edge); }
.card--image:not([data-content-order="custom"]) > .picture-caption--full { left: 0; right: 0; bottom: 0; }
.card--image:not([data-content-order="custom"]) > .card-title { left: calc(var(--nv-card-padding) + var(--nv-card-layout-edge)); right: calc(var(--nv-card-padding) + var(--nv-card-layout-edge)); bottom: calc(var(--nv-card-padding) + var(--nv-card-layout-edge)); }
.card--video .media-cover { border: 0; }
.card--video .media-cover::after { inset: var(--nv-card-layout-edge); }
/* No fallback ground may tint the native antialiased picture edge. Keep it
   while loading/missing; frosted/paired slideshow compositions retain theirs. */
.card--image:not([data-content-order="custom"]):has(.card-fill[data-picture-ready="true"]),
.card--video .media-cover:has(> img[data-picture-ready="true"]),
.card--wip:has(.wip-view.is-active[data-kind="cover"] .wip-picture img[data-picture-ready="true"]) { background: none; }


.card--image .card-scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(in oklab 0deg, #0E0D24C7 0%, #0E0D2400 46%);
}

/* Cards → Image cards: colour from image. The per-card colour is clamped in JS
   so white on the strongest point is ≥4.5:1; the strength is its alpha. */
body[data-image-colour="on"] .card--image .card-scrim {
  background-image: linear-gradient(in oklab 0deg,
    var(--nv-scrim-color, #0E0D24C7) 0%,
    var(--nv-scrim-fade, #0E0D2400) var(--nv-image-overlay-height, 46%));
}

/* 16px inset on both sides so a long title never reaches the card edge. */
.card--image .card-title {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: #FFFFFF;
  z-index: 1;
}

/* ── Breakpoints (4 → 3 → 2 → 1, adapted to E) ────────────────────── */
/* ≥1280: margin + 3 columns (default above). */
/* 1024–1279: a ~300px margin + 2 columns, so cards are not squeezed. */
@media (max-width: 1279px) {
  .day-cards { --nv-columns: 2; }
  .day-margin { width: 300px; }
}

/* Tablet: margin becomes a full-width day header above that day's cards. */
@media (max-width: 1023px) {
  :root { --nv-pinned-title-air: 14px; }
  .day { display: grid; grid-template-columns: minmax(0,1fr); gap: 0; }

  .day-body { width: 100%; grid-area: 1 / 1; margin-top: calc(var(--nv-day-header-height) + var(--nv-margin-gap)); }
  .day-margin {
    width: 100%;
    border-right: none;
    padding-right: 0;
    /* Keep the removed 1px border in the box without painting a rule. */
    padding-bottom: calc(var(--nv-pinned-title-air) + 1px);
    grid-area: 1 / 1;
    pointer-events: none;
  }
  .margin-body, .margin-meta { pointer-events: auto; }
  .margin-meta { padding-bottom: calc(var(--nv-pinned-title-air) + 1px); }
  .day-cards { --nv-columns: 2; }
}

/* Mobile 390: single column, day header + haiku above its cards. */
@media (max-width: 767px) {
  :root { --nv-sheet-bottom: 54px; --nv-sheet-rest-top: var(--nv-phone-sheet-rest-top,118px); --nv-sheet-travel: -8px; --nv-phone-wordmark-size: min(40px, calc((100vw - 56px) / 7.7)); }
  :root { --nv-phone-sheet-radius: 32px; --nv-phone-banner-radius: 16px; --nv-phone-byline-radius: 24px; --nv-phone-card-radius: 18px; --nv-phone-image-radius: 12px; }
  body { overflow: hidden; }

  .sheet {
    top: var(--nv-sheet-top);
    left: var(--nv-sheet-side);
    right: var(--nv-sheet-side);
    bottom: var(--nv-sheet-bottom);
    --nv-corner: var(--nv-phone-sheet-radius);
  }
  .sheet-backdrop { border-radius: 0 var(--nv-phone-sheet-radius) 0 var(--nv-phone-sheet-radius); box-shadow: none; }
  /* The outer backdrop follows the32px sheet; its native shadow aperture
     follows the16px window. No clip-path on the moving fill: Chrome can cull
     a clipped shadow for a frame during a rapid scroll reversal. */
  .sheet-backdrop::before {
    content: ""; position: absolute; inset: 0;
    border-radius: 0 var(--nv-phone-banner-radius) 0 var(--nv-phone-banner-radius);
    corner-shape: inherit; box-shadow: var(--nv-sheet-spread-shadow);
  }

  .furniture-logo { display: none; }
  .furniture-logo { top: 20px; left: 20px; margin-top: -1px; font-size: 15px; line-height: 18px; opacity: calc(1 - var(--nv-handoff)); transform: none; }
  .furniture-legal { bottom: 20px; right: 20px; gap: 20px; }
  /* Bhāva Patrons takes the credit's bottom-left slot. */
  .furniture-bhava { position: fixed; left: calc(var(--nv-sheet-side) + var(--nv-content-inset-x) + var(--nv-patrons-optical)); right: auto; bottom: 20px; top: auto; z-index: 30; }

  .masthead-wordmark-clip { display: block; }
  /* Decision80: one fixed line box; native scroll progress scales the type
     from its left edge and crossfades a coincident white glyph layer. */
  .masthead-wordmark { left: 28px; top: var(--nv-phone-wordmark-top,58px); font-size: calc(var(--nv-phone-wordmark-size) * (1 - .2 * var(--nv-handoff))); line-height: 52px; height: 52px; width: max-content; text-indent: 0; transform: none; color: transparent; background-image: var(--nv-brand-gradient); -webkit-background-clip: text; background-clip: text; will-change: auto; }
  .masthead-wordmark::after { content: attr(data-label); position: absolute; inset: 0; color: #FFFFFF; background: none; opacity: var(--nv-handoff); }


  /* Decision 37: byline strip only. Flow text grows the strip below 380px;
     padding and the 13px floor stay fixed. */
  /* Decision111: the24px byline fill deliberately sits inside a16px window.
     Keep the fill on its own box so the two corner curves remain distinct. */
  .banner { aspect-ratio: auto; padding: 0 0 calc(var(--nv-masthead-byline-height,0px) * max(0, var(--nv-masthead-height,100) - 100) / 100); --nv-corner: var(--nv-phone-banner-radius); background: transparent; }
  .masthead-stage { --nv-corner: var(--nv-phone-banner-radius); }
  .masthead-byline {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    white-space: normal;
    color: #FFFFFF;
    background: #FFFFFF1A;
    padding: 8px 12px;
    border-radius: 0 var(--nv-phone-byline-radius) 0 var(--nv-phone-byline-radius);
  }
  .masthead-word, .masthead-house { display: none; }

  .wall-scroll { padding: var(--nv-wall-gutter) var(--nv-content-inset-x) 25px; }

  .masthead-stage {
    margin: 13px 0 14px;
    /* width-scaled C4 masthead; the 1310:216 banner keeps its ratio */
  }

  .day-cards { --nv-columns: 1; }
  .card--x, .card--image, .card--link { border-radius: var(--nv-phone-card-radius); }
  .card--x .card-image, .card--link .card-image { border-radius: var(--nv-phone-image-radius); }

  /* Board mobile spacing: 12px card gap, 14px under the haiku, 16px above
     the first card. The gap is a root default so prototype's Card Gap control
     still wins (its inline write outranks this rule). */

  :root { --nv-margin-status-gap: 10px; }
  :root { --nv-furniture-top: 36px; --nv-furniture-bottom: 36px; }

  /* Board mobile type: haiku 23/31. */

  .haiku { --nv-haiku-base-size: 23px; }
  .haiku .line { font-size: var(--nv-haiku-size, var(--nv-haiku-base-size)); line-height: calc(var(--nv-haiku-size, var(--nv-haiku-base-size)) * 1.347826); }
  .haiku .line { height:calc(var(--nv-haiku-size,var(--nv-haiku-base-size)) * 1.347826); }


  .margin-date { font-size: 16px; line-height: 22px; }
}

/* ── Reduced motion: settled haiku, no morph, no stagger ──────────── */
@media (prefers-reduced-motion: reduce) {
  .word, .haiku-letter, .haiku-suffix {
    transition: none !important;
  }
  /* No hover lift under reduced motion: no rise, no animated shadow. */
  body[data-hover-lift="true"] .card:hover {
    translate: none;
    box-shadow:
      var(--nv-card-shadow-contact) 0 1px 2px 0,
      var(--nv-card-shadow-drop) 0 var(--nv-card-drop-y) var(--nv-card-drop-blur) var(--nv-card-drop-spread);
  }
  .banner,
  .masthead-stage,
  .card,
  .day-margin {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

body[data-reduced-motion="true"] .banner,
body[data-reduced-motion="true"] .masthead-stage,
body[data-reduced-motion="true"] .card,
body[data-reduced-motion="true"] .day-margin {
  opacity: 1;
  transform: none;
  transition: none;
}

/* C3 · siblings preserve two real links and keyboard order. */
.card-image-link { border-radius:inherit; outline: none; position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.card--image:has(.card-image-link:focus-visible) { outline: 2px solid #285AEC; outline-offset: 2px; }
.card-source-link { position: absolute; right: 12px; top: 2px; min-width: 110px; height: 44px; display: flex; align-items: center; justify-content: flex-end; color: #0E0D24; text-decoration: none; pointer-events: none; }
.card-source-chip { display: flex; align-items: center; gap: 6px; height: 24px; padding: 4px 10px 4px 4px; border-radius: 0 12px 0 12px; background: var(--nv-source-chip-fill); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; opacity: 0; transform: translateY(var(--nv-image-chip-rise)); transition: opacity var(--nv-image-overlay-ms) var(--nv-image-overlay-ease), transform var(--nv-image-overlay-ms) var(--nv-image-overlay-ease); }
.card-source-chip img { width: 16px; height: 16px; object-fit: contain; mix-blend-mode: multiply; border-radius: 0 6px 0 6px; }
.card-source-chip svg { flex-shrink: 0; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card-source-chip { background: color-mix(in srgb, var(--nv-source-chip-fill) var(--nv-image-pill-opacity), transparent); -webkit-backdrop-filter: blur(var(--nv-image-pill-blur)); backdrop-filter: blur(var(--nv-image-pill-blur)); }
}
.card--image[data-image-active="true"] .card-source-link { pointer-events: auto; }
.card--image[data-image-active="true"] .card-source-chip { opacity: 1; transform: translateY(0); }
.card-source-link:focus-visible { outline: none; }
.card-source-link:focus-visible .card-source-chip { outline: 2px solid #285AEC; outline-offset: 2px; }
@media (hover:none) { .card--image:has(.card-source-link) :is(.card-image-link,.collection-picture) { -webkit-touch-callout: none; } }
@media (prefers-reduced-motion: reduce) { .card-source-chip { transform: none !important; transition-property: opacity; } }
body[data-reduced-motion="true"] .card-source-chip { transform: none; transition-property: opacity; }

/* Full-width day headers stay transparent. Clip only the cards behind their
   pinned box, on the compositor's own day view timeline; never repaint a fill
   or write a per-scroll JS mask. Desktop side margins need no card clip. */
.day { view-timeline-name: --nv-day; view-timeline-axis: block; view-timeline-inset: 0; }
@media (max-width: 1023px) {
  .wall-scroll { scroll-padding-top: calc(var(--nv-day-pin-top) + var(--nv-haiku-reserved-height, 0px)); }
  .day-body {
    animation: nv-day-clipping linear both;
    animation-timeline: --nv-day;
    animation-range: cover;
    clip-path: inset(clamp(-48px,
      calc(var(--nv-day-progress) * (var(--nv-day-height) + var(--nv-wall-height)) - var(--nv-wall-height) + var(--nv-wall-gutter) + var(--nv-day-pin-top) + var(--nv-haiku-reserved-height) + var(--nv-pinned-title-air) - var(--nv-day-header-height) - var(--nv-margin-gap)),
      var(--nv-day-body-height)) -48px -48px -48px);
  }
}

/* Decisions81–84: image-only reveal and unboxed C · Margin note. */
:root {
  --nv-house-glow-start: #40C3DB;
  --nv-house-glow-end: #96DF78;
  --nv-quote-inset: 22px;
  --nv-quote-line-width: 2px;
}
.card--quote {
  display: flex; flex-direction: column; gap: 14px;
  padding: 6px 8px 10px var(--nv-quote-inset);
  margin: 0 0 var(--nv-row-gap);
  border: 0; border-radius: 0; background: transparent;
  box-shadow: none; cursor: default;
}
.card--quote::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 10px; width: var(--nv-quote-line-width);
  background: linear-gradient(180deg in oklab, var(--nv-house-glow-start) 0%, var(--nv-house-glow-end) 100%);
  pointer-events: none;
}
body[data-hover-lift="true"] .card--quote:hover { translate: none; box-shadow: none; }
.quote-text {
  margin: 0; color: #0E0D24; font-family: "Newsreader", system-ui, sans-serif;
  font-weight: 500; font-style: italic; text-wrap: pretty; overflow-wrap: anywhere;
}
:is([data-quote-tier="short"] .quote-text,[data-comment-tier="short"] .link-commentary-words) { font-size: 40px; line-height: 44px; letter-spacing: -.02em; }
:is([data-quote-tier="medium"] .quote-text,[data-comment-tier="medium"] .link-commentary-words) { font-size: 28px; line-height: 34px; letter-spacing: -.01em; }
:is([data-quote-tier="long"] .quote-text,[data-comment-tier="long"] .link-commentary-words) { font-size: 20px; line-height: 28px; letter-spacing: 0; }
.quote-ref { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.quote-author {
  color: #0E0D24C7; font-family: "SFProRounded-Medium", "SF Pro Rounded", system-ui, sans-serif;
  font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: .05em;
}
.quote-ref:has(.quote-reference-link) { align-items: center; }
.quote-title { color: #0E0D24; font: italic 500 15px/16px "Newsreader", system-ui, sans-serif; }
.quote-reference-link { display: inline-flex; align-items: center; gap: 5px; color: #0E0D24; text-decoration: none; }
.quote-reference-link cite, .quote-reference-link .quote-author {
  text-decoration: underline 1px color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px;
}
.quote-reference-link:hover cite, .quote-reference-link:hover .quote-author { text-decoration-color: currentColor; }
.quote-reference-link:focus-visible { outline: 2px solid #285AEC; outline-offset: 2px; }
.quote-reference-link svg { flex: none; }
@media (max-width:767px) {
  .card--quote { gap: 12px; }
  :is([data-quote-tier="short"] .quote-text,[data-comment-tier="short"] .link-commentary-words) { font-size: 36px; line-height: 40px; }
  :is([data-quote-tier="medium"] .quote-text,[data-comment-tier="medium"] .link-commentary-words) { font-size: 26px; line-height: 32px; }
  :is([data-quote-tier="long"] .quote-text,[data-comment-tier="long"] .link-commentary-words) { font-size: 19px; line-height: 27px; }
}

/*98–103: manual slideshow, fixed-position rest pill and image-only source exit.*/
.card--wip[data-has-text="false"] .wip-scrim { opacity: 0 !important; background: none; }
.card--wip[data-slide-style="slide"] .wip-view { opacity: 1; transition: none; }
.card--wip[data-slide-style="crossfade"] .wip-view { transition: none; }
.wip-transition-snapshot { position: absolute; inset: 0; pointer-events: none; background: #0E0D24; }
.wip-source-link { position: absolute; top: 12px; right: 12px; width: 32px; height: 24px; z-index: 4; opacity: 0; transform: translateY(var(--nv-image-chip-rise)); pointer-events: none; cursor: pointer; transition: opacity var(--nv-wip-reveal-ms) ease-out, transform var(--nv-wip-reveal-ms) ease-out; }
.wip-source-chip { width: 32px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 0 12px 0 12px; background: color-mix(in srgb, var(--nv-source-chip-fill) var(--nv-image-pill-opacity), transparent); -webkit-backdrop-filter: blur(var(--nv-image-pill-blur)); backdrop-filter: blur(var(--nv-image-pill-blur)); }
.wip-source-chip svg { width: 10px; height: 10px; }
.card--wip:hover .wip-source-link, .card--wip:focus-visible .wip-source-link,
.card--wip:has(:focus-visible) .wip-source-link, .card--wip[data-revealed="true"] .wip-source-link { opacity: 1; transform: none; pointer-events: auto; }
.wip-source-link:focus-visible { outline: 2px solid #285AEC; outline-offset: 2px; }
@media (max-width:767px) {
 .wip-source-link { top: 0; right: 4px; width: 44px; height: 44px; }
 .wip-source-chip { position: absolute; top: 10px; right: 6px; }
 .card--wip:not([data-revealed="true"]):not(:has(:focus-visible)):not(:focus-visible) .wip-source-link { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion:reduce) { .wip-source-link { transform: none !important; transition-property: opacity; } }
body[data-reduced-motion="true"] .wip-source-link { transform: none; transition-property: opacity; }

/*120/37b/37c, decision30: one uninterrupted sheet until masthead reveal. The old
  scaled aperture shadow + cover blur met on an antialiased loading seam. */
body[data-loading="true"] .sheet,
body:not([data-aperture-ready="true"]) .sheet { background: rgba(243,241,252,var(--nv-sheet-opacity)); }
body:not([data-aperture-ready="true"]) :is(.sheet-backdrop,.sheet-blur) { opacity: 0; }
body[data-loading="true"] .sheet-backdrop,
body[data-loading="true"] .sheet-blur,
body[data-loading="true"] .masthead-cover,
body[data-loading="true"] .banner { visibility: hidden; }
@media(prefers-reduced-motion:reduce) {
  .sheet, .sheet::before, .sheet-backdrop, .sheet-blur { transition: none !important; }
}

/*120: canonical16px control; retain each accepted family's original inset at
  default. Full-bleed pictures remain full bleed; their text insets are tunable. */
:root { --nv-card-padding-delta: calc(var(--nv-card-padding) - 16px); }
.card--link,.card--x { padding: var(--nv-card-padding); }
.card--audio { padding: var(--nv-card-padding) var(--nv-card-padding) max(0px,calc(var(--nv-card-padding) - 2px)); }
.card--video .media-body { padding-inline: max(0px,var(--nv-card-padding-delta)); }
.card--image .card-title { left: var(--nv-card-padding); right: var(--nv-card-padding); bottom: var(--nv-card-padding); }
.card--quote { padding: max(0px,calc(6px + var(--nv-card-padding-delta))) max(0px,calc(8px + var(--nv-card-padding-delta))) max(0px,calc(10px + var(--nv-card-padding-delta))) max(0px,calc(22px + var(--nv-card-padding-delta))); }
.wip-meta { left: calc(28px + var(--nv-card-padding-delta)); bottom: calc(28px + var(--nv-card-padding-delta)); max-width: calc(100% - 2 * (28px + var(--nv-card-padding-delta))); }
@media(max-width:767px){.wip-meta { left: var(--nv-card-padding); bottom: calc(30px + var(--nv-card-padding-delta)); max-width: calc(100% - 2 * var(--nv-card-padding)); }}

/*120a: explicit reorder only. Existing nodes/listeners move; pictures preserve
  their own box and controls, while metadata can occupy its selected flow slot. */
.card[data-content-order="custom"] { display: flex; flex-direction: column; gap: 10px; }
.card[data-content-order="custom"] > .media-body:empty { display: none; }
.card--image[data-content-order="custom"],.card--wip[data-content-order="custom"] { aspect-ratio: auto !important; height: auto; background: #0E0D24; }
.card--image[data-content-order="custom"] .card-image-link { position: relative; inset: auto; display: block; width: 100%; aspect-ratio: var(--nv-content-aspect); flex: none; overflow: clip; border-radius: inherit; corner-shape: inherit; }
.card--image[data-content-order="custom"] > .card-title { position: static; margin: var(--nv-card-padding); }
.card--image[data-content-order="custom"] .card-scrim { display: none; }
.card--image[data-content-order="custom"] .card-source-link { position: relative; inset: auto; margin: var(--nv-card-padding); width: fit-content; height: 24px; }
.card--image[data-content-order="custom"] .card-source-chip { opacity: 1; transform: none; }
.wip-image-block { position: relative; width: 100%; aspect-ratio: var(--nv-content-aspect); flex: none; overflow: hidden; }
.card--wip[data-content-order="custom"] > .wip-meta { display: none; }
.card--wip[data-content-order="custom"] > .wip-scrim { display: none; }
.card--wip[data-content-order="custom"] > .wip-project,.card--wip[data-content-order="custom"] > .wip-caption { margin: var(--nv-card-padding); pointer-events: auto; }

/* Native controls inside the existing prototype panel; no library/runtime island. */
.card--wip[data-caption-lines="1"] .wip-caption { -webkit-line-clamp:1; }
.card--wip[data-caption-lines="3"] .wip-caption { -webkit-line-clamp:3; }
@media(min-width:768px){
 body[data-wip-card-shadow="false"] .card--wip { box-shadow:var(--nv-media-shadow); }
 :is(.card--wip,.card--collection)[data-dots-position="left"] .wip-controls { left:20px;right:auto; }
 :is(.card--wip,.card--collection)[data-dots-position="centre"] .wip-controls { left:50%;right:auto;transform:translateX(-50%); }
}
@media(max-width:767px){:root{--nv-media-radius:var(--nv-media-phone-radius);--nv-media-cover-radius:var(--nv-media-phone-cover-radius);--nv-media-shadow:var(--nv-media-phone-shadow);}}
@media(max-width:767px){.card--wip{border-radius:var(--nv-media-phone-radius);corner-shape:round}}

/*134: caption is an independent, at-rest ink layer. Palette tint and image-only
  grow cannot replace or transform it. The shared card stroke stays above it. */
:root {
 --nv-caption-size:14px; --nv-caption-line:20px;
 --nv-caption-symbol-size:21px; --nv-caption-symbol-line:26px;
 --nv-caption-full-inset:var(--nv-card-padding); --nv-caption-inset:12px;
 --nv-caption-ink:#0E0D24A3; --nv-caption-fade:66px; --nv-caption-solid-clearance:8px;
}
.picture-caption {
 position:absolute; bottom:0; left:0; width:100%; z-index:1;
 box-sizing:border-box; pointer-events:none;
 padding:36px var(--nv-caption-inset) var(--nv-caption-inset);
 background:linear-gradient(0deg,var(--nv-caption-ink) 0%,var(--nv-caption-ink) max(62%,calc(100% - 36px)),#0E0D2400 100%);
 color:#FFFFFF; text-align:left;
}
/* #1788 / Abhi6558239525: the inset upload's image link is z2. Keep its
  caption above the pixels at rest without intercepting the picture tap. */
.card-image[data-link-caption="true"] > .picture-caption { z-index:3;opacity:1;visibility:visible; }
.picture-caption-text {
 display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
 overflow:hidden; overflow-wrap:anywhere; white-space:pre-wrap;
 font-family:"SFProRounded-Medium","SF Pro Rounded",system-ui,sans-serif;
 font-weight:500; font-size:var(--nv-caption-size); line-height:var(--nv-caption-line);
}
.picture-caption-text[data-symbols="true"] { font-size:var(--nv-caption-symbol-size); line-height:var(--nv-caption-symbol-line); }
.picture-caption--full {
 display:flex; flex-direction:column; gap:2px;
 padding:calc(var(--nv-caption-fade) + var(--nv-caption-solid-clearance)) calc(var(--nv-caption-full-inset) - var(--nv-card-layout-edge)) calc(var(--nv-caption-full-inset) - var(--nv-card-layout-edge));
 background:linear-gradient(0deg,var(--nv-caption-ink) 0%,var(--nv-caption-ink) calc(100% - var(--nv-caption-fade)),#0E0D2400 100%);
}
.picture-caption--full .picture-caption-text { -webkit-line-clamp:3; }
.card--image .picture-caption--full .card-title {
 position:static; margin:0; color:#FFFFFF; left:auto; right:auto; bottom:auto;
 font-family:"Fraunces",serif; font-weight:600; font-size:21px; line-height:26px; letter-spacing:-.01em;
}
.card--x .card-excerpt--caption,.card--link .card-excerpt--caption {
 display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
 color:#0E0D24C7; font-family:"SFProRounded-Regular","SF Pro Rounded",system-ui,sans-serif;
 font-size:14px; line-height:20px; font-weight:400; white-space:pre-wrap; overflow-wrap:anywhere;
}
.card--image[data-content-order="custom"] > .picture-caption--full { position:static; width:auto; margin:var(--nv-card-padding); padding:0; background:none; }

/* Decision141: reserve both calendar rows before local computation. */
.margin-calendars { min-height:36px; }
.margin-calendar { transition:none; }
.margin-calendar svg { flex-shrink:0; }
.margin-calendar-hint { position:fixed; z-index:50; width:max-content; max-width:300px; background:#0E0D24; border-radius:12px; padding:8px 12px; font-family:"SFProRounded-Medium","SF Pro Rounded",system-ui,sans-serif; font-size:12px; font-weight:500; line-height:16px; color:#FFF; pointer-events:none; }
.margin-calendar-hint[hidden] { display:none; }
.margin-calendar-hint > div + div { margin-top:2px; font-family:"SFProRounded-Regular","SF Pro Rounded",system-ui,sans-serif; font-weight:400; color:rgb(255 255 255 / .72); }
@media(max-width:767px){.margin-calendars { gap:0; min-height:48px; }.margin-calendar { min-height:24px; }}

/*143/144 · One native disclosure, sibling to the card's destination link. */
.card .card-post-link { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.card-post-link:focus-visible { outline:2px solid #285AEC; outline-offset:2px; }
.card-domain { position:relative; z-index:2; width:fit-content; text-decoration:none; }
.card-domain > span { text-decoration:underline; text-decoration-color:rgb(14 13 36 / .4); text-underline-offset:3px; }
.card-domain:hover > span { text-decoration-color:currentColor; }
.card-domain:focus-visible { outline:2px solid #285AEC; outline-offset:2px; }
.card .fold-eligible { -webkit-line-clamp:unset !important; white-space:var(--nv-fold-white-space,normal) !important; overflow:visible !important; display:block !important; }
.fold-target { position:relative; }
.fold-control { position:relative; z-index:3; display:block; width:100%; min-width:0; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; white-space:inherit; text-align:inherit; appearance:none; cursor:pointer; user-select:text; -webkit-user-select:text; outline:none; }
.fold-control:focus-visible { outline:2px solid #285AEC; outline-offset:2px; }
html[data-wall-input="pointer"] .fold-control:focus { outline:none; box-shadow:none; }
.fold-viewport { display:block; position:relative; overflow:clip; }
.fold-copy { display:block; }
.fold-sentence { position:relative; }
.fold-more { font-weight:var(--nv-fold-label-weight); color:var(--nv-fold-ink,#0E0D24); }
.fold-more { position:absolute; white-space:nowrap; }
.fold-control:hover .fold-copy { color:var(--nv-fold-ink,#0E0D24); }
.fold-control:hover .fold-more-words { text-decoration:underline; text-underline-offset:3px; }
.fold-control:hover .fold-more-words { text-decoration-color:color-mix(in srgb,currentColor 30%,transparent); }
.fold-readable { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.fold-post-link { position:absolute; inset:0; z-index:1; }
.card--audio,.card--wip,.picture-caption,.card--image > .card-title { --nv-fold-ink:#FFFFFF; }
.picture-caption .fold-control { pointer-events:auto; }
.wip-meta .fold-control { pointer-events:none; }
.card--wip:is(:focus-visible,:has(:focus-visible),[data-revealed="true"]) .wip-meta .fold-control { pointer-events:auto; }
@media(hover:hover){.card--wip:hover .wip-meta .fold-control { pointer-events:auto; }}
/* #1837: touch has no hover reveal. Keep copy discoverable and its command live. */
@media(hover:none) {
 .card--wip .wip-meta,.card--wip .wip-scrim { opacity:1; }
 .wip-meta .fold-control,.card--wip .wip-project { pointer-events:auto; }
}
.wip-project > a { color:inherit; text-decoration:inherit; }
.card--image { overflow:clip; }
.card--image > .picture-caption--full { left:calc(-1 * var(--nv-card-layout-edge)); right:calc(-1 * var(--nv-card-layout-edge)); bottom:calc(-1 * var(--nv-card-layout-edge)); width:auto; }
.card .fold-eligible[hidden] { display:none !important; }

.wip-project.fold-target { width:100%; }
.card--video .media-title.fold-target { flex:1; width:100%; }
/* Credits need a stable full-width line so their complete disclosure cue fits.
   Use eligibility, not fold-target, to avoid a fit/remove/refit width loop. */
.card--audio .media-credit.fold-eligible,.card--video .media-credit.fold-eligible { flex:0 0 100%; }

.card--image > .card-title { pointer-events:none; }
.card--image > .card-title .fold-control { pointer-events:auto; }
.wip-project > a:focus-visible { outline:2px solid #285AEC; outline-offset:2px; }
html[data-wall-input="pointer"] .wip-project > a:focus { outline:none; }

/*148: native scrolling, masked text, and the existing picture held in place. */
.fold-tail { position:absolute; left:calc(-1 * var(--nv-tail-edge)); right:calc(-1 * var(--nv-tail-edge)); height:var(--nv-tail-picture-height); z-index:3; color:#FFF; }
.fold-tail-scroll { width:100%; height:var(--nv-tail-scroll-height); overflow-y:auto; overflow-x:hidden; overscroll-behavior:auto; scrollbar-width:none; touch-action:pan-y; outline:none; scroll-timeline:--nv-tail-scroll block; }
.fold-tail-mask { width:100%; height:100%; timeline-scope:--nv-tail-scroll; animation:nv-tail-top linear both,nv-tail-bottom linear both; animation-timeline:--nv-tail-scroll,--nv-tail-scroll; animation-range:0px var(--nv-tail-fade),calc(100% - var(--nv-tail-fade)) 100%; mask-image:linear-gradient(to bottom,rgb(0 0 0 / var(--nv-tail-top-alpha,1)) 0px,#000 var(--nv-tail-fade),#000 calc(100% - var(--nv-tail-fade)),rgb(0 0 0 / var(--nv-tail-bottom-alpha,1)) 100%); -webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0 / var(--nv-tail-top-alpha,1)) 0px,#000 var(--nv-tail-fade),#000 calc(100% - var(--nv-tail-fade)),rgb(0 0 0 / var(--nv-tail-bottom-alpha,1)) 100%); }
/* #1840: a fully fitted WIP tail has no hidden continuation to fade. */
.card--wip.has-fold-tail .fold-tail-mask { mask-image:none; -webkit-mask-image:none; }
.fold-tail-scroll::-webkit-scrollbar { display:none; width:0; height:0; }
.fold-tail:has(.fold-tail-scroll:focus-visible) { outline:2px solid #285AEC; outline-offset:-4px; }
html[data-wall-input="pointer"] .fold-tail { outline:none; }
.fold-tail-content { padding:var(--nv-tail-top) var(--nv-tail-x) var(--nv-tail-bottom); }
.fold-tail .picture-caption,.fold-tail .wip-meta,.fold-tail .fold-tail-content > .card-title { position:static; inset:auto; margin:0; padding:0; background:none; width:min(100%,var(--nv-fold-copy-width)); max-width:100%; opacity:1; pointer-events:auto; }
.fold-tail .fold-control { pointer-events:auto; }
.has-fold-tail > .card-image-link,.has-fold-tail > .wip-track,.has-fold-tail > .wip-transition-snapshot { bottom:auto; height:var(--nv-tail-media-height,var(--nv-tail-picture-height)); }
.has-fold-tail > .wip-scrim { opacity:0 !important; }
.has-fold-tail > img { height:var(--nv-tail-picture-height); }
.fold-snapshot { pointer-events:none !important; }
.fold-snapshot * { pointer-events:none !important; }

@property --nv-tail-top-alpha { syntax:"<number>"; inherits:true; initial-value:1; }
@property --nv-tail-bottom-alpha { syntax:"<number>"; inherits:true; initial-value:1; }
@keyframes nv-tail-top { from { --nv-tail-top-alpha:1; } to { --nv-tail-top-alpha:0; } }
@keyframes nv-tail-bottom { from { --nv-tail-bottom-alpha:0; } to { --nv-tail-bottom-alpha:1; } }

.fold-tail .fold-viewport { overflow:visible; }
.fold-tail .fold-snapshot .fold-viewport { overflow:clip; }
@supports not (animation-timeline: scroll()) {
  /*44c: passive scroll + rAF writes the same alpha properties here. */
  .fold-tail-mask { animation:none; }
}
/*Some engines parse timelines but leave this ancestor's named one unbound. */
.fold-tail-mask[data-fade-fallback] { animation:none; }

/* Missing syntax and parsed-but-unbound timelines share one fallback.
   Native animation declarations above remain unchanged. */
body[data-wall-timeline-fallback="true"],
.margin-meta[data-wall-timeline-fallback="true"],
.day-body[data-wall-timeline-fallback="true"] { animation: none; }
@supports not (animation-timeline: scroll()) { body { animation: none; } }
@supports not (animation-timeline: view()) {
 .margin-meta { animation: none; }
 @media (max-width: 1023px) { .day-body { animation: none; } }
}

/*147 · The approved portrait uses the existing inset frame, with a sibling
  picture destination above the stretched post link. No new card geometry. */
.rangoli-picture-link { position:absolute; inset:0; z-index:2; display:block; border-radius:inherit; color:inherit; text-decoration:none; }
.card-image:has(.rangoli-picture-link:focus-visible) { outline:2px solid #285AEC; outline-offset:2px; }

/*155: each destination is one indivisible item; wrap between links only.
  The label alone may ellipsize. Icons and arrows never shrink or underline.*/
.card-footer { position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; column-gap:16px; row-gap:8px; max-width:100%; }
.card-footer .card-domain { display:flex; align-items:center; flex:0 1 auto; max-width:100%; min-width:0; white-space:nowrap; color:inherit; }
.card-footer .card-footer-label { min-width:0; white-space:normal; overflow-wrap:anywhere; text-decoration:none; }
.card-footer .card-domain:hover > .card-footer-label { text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 30%,transparent); }
.card-footer .card-source-icon { flex:none; width:16px; height:16px; object-fit:contain; }
.card--audio > .card-footer { color:#fff; }
.card--audio > .card-footer svg path { stroke:currentColor; }

/* Paper36 / entry131, #1788. Column widths stay with masonry; only the page
   thumbnail's21/332 side measure scales. Uploads keep the existing padded deck. */
.card[data-link-picture="page"] { --nv-card-layout-edge:0px; border:0; padding:var(--nv-link-preview-inset,var(--nv-card-padding)); overflow:clip; }
/* The stretched destination is clipped; paint its keyboard ring on the card. */
.card[data-link-picture="page"]:has(.card-post-link:focus-visible) { outline:2px solid #285AEC; outline-offset:2px; box-shadow:0 0 0 4px rgba(6,5,10,.45); }
.card[data-link-picture="page"] .card-post-link:focus-visible { outline:none; box-shadow:none; }
.card[data-link-picture="page"][data-link-comment="true"] { padding-top:0; }
.card[data-link-picture="page"][data-link-comment="false"] { padding-bottom:0; }
.card[data-link-picture="page"] > .card-image { margin-top:0; }
.card[data-link-picture="page"][data-link-comment="true"] > .card-image { border-radius:0 0 12px 12px; }
.card[data-link-picture="page"][data-link-comment="false"] > .card-image { border-radius:12px 12px 0 0; }
.card[data-link-comment] .card-image:not(.card--collection) img { object-fit:contain; }
.card-image[hidden] { display:none; }
.link-commentary { position:relative; z-index:2; display:grid; grid-template-columns:2px minmax(0,1fr); gap:12px; margin:0; padding:8px 0 0; }
.link-commentary::before { content:""; border-radius:1px; background:linear-gradient(in oklab 180deg,#3BB3E3 0%,#65CD3A 100%); }
.link-commentary-copy { min-width:0; display:flex; flex-direction:column; gap:6px; }
.link-commentary-words { margin:0; font:italic 400 17px/24px "Fraunces",serif; color:#0E0D24; white-space:pre-wrap; overflow-wrap:anywhere; }
.link-commentary-signature { margin:0; font:500 13px/18px "SFProRounded-Medium","SF Pro Rounded",system-ui,sans-serif; color:#0E0D2499; }
.card[data-link-comment] .card-footer .card-source-icon { width:15px; height:15px; }
.card[data-link-comment] .card-footer .card-footer-label { text-decoration:underline; text-decoration-color:rgb(14 13 36 / 40%); text-underline-offset:.15em; }
.card[data-link-comment] .card-footer .card-domain:hover > .card-footer-label { text-decoration-color:currentColor; }

/*48f: hold the actual entrance until its one palette decision is ready.
  Reserve layout throughout. Reduced motion still admits the final state at once.*/
.day[data-entrance-state="waiting"] .card { visibility:hidden;pointer-events:none; }
.card[data-palette-state="pending"] {
  visibility:hidden; opacity:0;
  transform:translateY(var(--nv-stagger-rise)) scale(var(--nv-stagger-scale));
  pointer-events:none;
}
.card[data-palette-state="neutral"]:is(.card--link,.card--x) { background:#fff; }

/* The published bottom edge also owns a full-bleed loading ground. Successful
  pictures still clear it entirely (48c); no pink default paints first. */
body[data-image-colour="on"] .card--image:not([data-content-order="custom"]):not(:has(.card-fill[data-picture-ready="true"])) {
  background:var(--nv-image-ground,#0E0D24);
}

/*162: shared picture interaction, including WIP. Each hit target contains a
  smaller painted dot; the capsule, tokens and bottom-right anchor are shared. */
.picture-dots { left:auto;transform:none; }
.picture-dots .picture-dot { position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:var(--nv-picture-hit);height:var(--nv-picture-hit);min-width:var(--nv-picture-hit);padding:0;border:0;border-radius:var(--nv-wip-dot-size);background:none; }
/*43: inactive dots keep their smaller shape with0.8 white ink.44 keeps the
  separate aria-hidden end chip at0.4 as a deliberate disabled-direction hint. */
.picture-dot-ink { pointer-events:none;width:var(--nv-wip-dot-size);height:var(--nv-wip-dot-size);border-radius:var(--nv-wip-dot-size);background:#FFFFFFCC;transition:width var(--nv-wip-reveal-ms) ease-out,background-color var(--nv-wip-reveal-ms) ease-out; }
.picture-dot.is-active .picture-dot-ink { width:var(--nv-wip-active-dot-size);background:#FFFFFF; }
.picture-dot:focus-visible { outline:2px solid #285AEC;outline-offset:2px; }
.picture-track { position:absolute;inset:0;display:flex; }
.picture-view { position:relative;flex:0 0 100%;width:100%;height:100%; }
.card--collection .card-scrim { z-index:2;pointer-events:none; }
.card--collection .picture-view img.card-fill { object-fit:cover; }
.card--collection[data-collection-fit="tallest"] .picture-view img.card-fill { object-fit:contain; }
/* Both slide-fade views become translucent; pool ink keeps the page out. */
.card--collection .picture-viewport { background:#0E0D24; }
.picture-viewport { overflow:clip;corner-shape:inherit; }
.picture-track,.picture-view,.picture-view > .collection-picture { border-radius:inherit;corner-shape:inherit; }
.picture-view > .collection-picture { position:absolute;inset:auto;left:50%;top:50%;translate:-50% -50%; }
.collection-picture[data-picture-inset="true"] { border-radius:0; }
.card--image:has(.collection-picture:focus-visible) { outline:2px solid #285AEC;outline-offset:2px; }
.card--wip[data-collection-fit="crop"] :is(.wip-picture,.wip-pair) img { object-fit:cover; }
.card--wip[data-collection-fit="tallest"] .wip-picture img { object-fit:contain; }
.card--wip[data-collection-fit="crop"] .wip-frost { display:none; }
.card--wip[data-collection-fit="tallest"] .wip-picture > .collection-picture { inset:auto;left:50%;top:50%;translate:-50% -50%;overflow:hidden; }
.picture-track-snapshot { z-index:1;pointer-events:none; }
.collection-picture { display:block;border-radius:inherit;outline:none;cursor:inherit; }
.wip-picture > .collection-picture { position:absolute;inset:0;width:100%;height:100%; }
.wip-pair > .collection-picture { height:min(100%,calc((100cqw - var(--nv-wip-pair-gap)) / var(--nv-wip-pair-ratios)));flex:none; }
.wip-pair > .collection-picture > img { width:100%;height:100%; }
@media(hover:hover){.card--wip[data-rangoli-collection]:not(:focus-visible):not(:has(:focus-visible)) .wip-source-link { opacity:0;pointer-events:none; }}
@media(prefers-reduced-motion:reduce){.picture-dot-ink { transition:none; }}
.collection-picture:focus-visible { outline:2px solid #285AEC;outline-offset:2px; }
.card--wip:has(.collection-picture:focus-visible) { outline:2px solid #285AEC;outline-offset:2px; }
.wip-picture > .collection-picture { border-radius:var(--nv-wip-tuned-radius); }
.card--collection,.card--collection > .card-image-link { touch-action:pan-y; }

.card--image .collection-picture:focus-visible { outline:none; }

/*166, Paper20: exact painted pill, with non-overlapping midpoint hit regions.
  Vertical targets stay24px; compact7px dots cannot also have24px horizontal
  targets without overlap. Every visible ink pixel belongs to its own button.
  Decision42: the painted plate is8px from the picture on phones,16 elsewhere;
  the24px hit height and the wall Open pill's viewport anchor stay unchanged. */
.picture-dots { --nv-picture-phone-inset:8;right:calc(var(--nv-picture-inset) * 1px);bottom:calc(var(--nv-picture-inset) * 1px - (var(--nv-picture-hit) - var(--nv-wip-dot-size) - var(--nv-picture-pill-pad-y) * 2px) / 2);gap:0;border-radius:calc(var(--nv-picture-pill-radius) * 1px);padding:0 calc((var(--nv-picture-pill-pad-x) - var(--nv-picture-gap) / 2) * 1px);background:transparent; }
@media(max-width:767px){.picture-dots { --nv-picture-inset:var(--nv-picture-phone-inset); }}
.picture-dots::before { content:"";position:absolute;inset-inline:0;top:50%;translate:0 -50%;height:calc(var(--nv-wip-dot-size) + var(--nv-picture-pill-pad-y) * 2px);border-radius:inherit;pointer-events:none; }
.picture-dots .picture-dot { min-width:0;width:calc(var(--nv-wip-dot-size) + var(--nv-picture-gap) * 1px);padding-inline:calc(var(--nv-picture-gap) * .5px);transition:width var(--nv-wip-reveal-ms) ease-out; }
.picture-dots .picture-dot.is-active { width:calc(var(--nv-wip-active-dot-size) + var(--nv-picture-gap) * 1px); }

.card--collection[data-slide-style="slide-fade"] .picture-view { opacity:0;transition:opacity var(--nv-slideshow-ms) var(--nv-wip-ease,ease); }
.card--collection[data-slide-style="slide-fade"] .picture-view.is-active { opacity:1; }
.card--collection[data-dragging="true"] .picture-view { opacity:1;transition:none; }
@media(prefers-reduced-motion:reduce){.picture-view { transition:none !important; }.picture-affordance { transition:none; }}

/*164: a clipped, overscanned source-hue ground below content and overlay stroke.
  The transparent layout border stays reserved; paint reaches its outer edge. */
.article-ground { position:absolute; inset:calc(-1 * var(--nv-card-layout-edge)); overflow:hidden; border-radius:inherit; corner-shape:inherit; pointer-events:none; z-index:-1; }
.article-ground > span { position:absolute; }
body[data-article-colour="off"] .article-ground { display:none; }
body[data-article-colour="on"] .card[data-article-ground-state="pending"] { visibility:hidden; opacity:0; pointer-events:none; transform:translateY(var(--nv-stagger-rise)) scale(var(--nv-stagger-scale)); }
body[data-article-colour="on"] .card[data-article-ground] { background:#fff; }

/*Round49: the pool and hold are owned by each picture's moving layer. */
.image-pool { position:absolute; left:0; width:100%; pointer-events:none; z-index:1; }
.card[data-pool-state="pending"] { visibility:hidden; opacity:0; pointer-events:none; transform:translateY(var(--nv-stagger-rise)) scale(var(--nv-stagger-scale)); }
.card[data-pooled="true"] .card-scrim { display:none; }
.card[data-pooled="true"] > .picture-caption--full:not(:has([aria-expanded="true"])) { background:none; }
.card[data-pooled="true"] > .card-title,.card[data-pooled="true"] > .picture-caption--full { z-index:2; }
.card[data-pooled="true"][data-content-order="custom"] .image-pool,.card.has-fold-tail .image-pool { display:none; }


/* External rule instead of a CSP-blocked cursor markup style. */
.wip-cursor-prev { transform: scaleX(-1); }

/* Static, CSP-safe equivalent of the prototype no-JS calendar frame. */
body .sheet:has(.no-js-calendars) .masthead-stage{display:none}
body .sheet:has(.no-js-calendars){background:#E6E2F6}
.no-js-calendars{display:block;position:static;overflow:auto;background:#E6E2F6;padding:24px 17px;color:#0E0D24}.no-js-calendars .no-js-day{margin-bottom:40px}.no-js-calendars .no-js-day h2{font:600 italic 28px/1.2 Newsreader,serif;margin:0 0 12px}.no-js-calendars .no-js-day p{margin:0 0 6px;font:600 italic 19px/26px Newsreader,serif}.no-js-calendars .margin-calendar{white-space:normal}

/* Paper23: every registered picture uses the existing Open affordance. */
.picture-cursor { opacity:1; transition:none; }
/*1674: viewport space, above wall chrome, below the native modal top layer.
  No wrapper opacity/transform/contain: the existing glass samples the page. */
.picture-cursor.wall-picture-cursor { position:fixed;z-index:40; }
/* H3: animate the painted pill, not the positioning shell. Scaling the shell
   would also scale its transform translation away from the pointer. */
.picture-cursor[data-direction="open"] { opacity:1; }
.picture-cursor .picture-affordance[data-zone="open"] { opacity:0;scale:var(--nv-pill-min-scale);transition:opacity var(--nv-pill-out-ms) var(--nv-pill-out-ease),scale var(--nv-pill-out-ms) var(--nv-pill-out-ease); }
.picture-cursor.is-visible[data-direction="open"] .picture-affordance[data-zone="open"] { opacity:1;scale:1;transition:opacity var(--nv-pill-in-ms) var(--nv-pill-in-ease),scale var(--nv-pill-in-ms) var(--nv-pill-in-ease); }
.picture-cursor.is-visible { opacity:1; }
.picture-cursor.is-visible[data-direction="prev"][data-end="true"] [data-zone="prev"],.picture-cursor.is-visible[data-direction="next"][data-end="true"] [data-zone="next"] { opacity:var(--nv-picture-end-opacity); }
.picture-cursor:not(.is-visible) .picture-affordance:not([data-zone="open"]) { transition:none; }
.rangoli-picture-link,.card-image-link[data-rangoli-picture] { overflow:clip; }
@media(prefers-reduced-motion:reduce){.picture-cursor,.picture-cursor[data-direction="open"],.picture-affordance,.picture-cursor .picture-affordance[data-zone="open"],.picture-cursor.is-visible[data-direction="open"] .picture-affordance[data-zone="open"] { transition:none;scale:1; }}

/* #1516, Abhi2026-11-02: all-screen circle; the name ring is the only song text. */
:is(.day-cards,.card--reflection-unit) > .card--audio[data-corona] { --nv-corona-scale:1; --nv-corona-diameter:100%; aspect-ratio:auto; min-height:0; cursor:default; padding:0; gap:0; border:0; border-radius:0; overflow:visible; background:none; box-shadow:none; isolation:isolate; transition:opacity var(--nv-stagger-opacity-ms) var(--nv-stagger-opacity-ease) var(--nv-card-delay,0ms),transform var(--nv-stagger-transform-ms) var(--nv-stagger-transform-ease) var(--nv-card-delay,0ms); }
.card--audio[data-corona]::after { display:none; }
.card--audio[data-corona] > .corona-open { position:relative; display:block; inset:auto; margin-inline:auto; width:var(--nv-corona-diameter); aspect-ratio:1; height:auto; z-index:4; border-radius:50%; outline:none; touch-action:pan-y; pointer-events:auto; }
.corona-open:focus-visible { outline:2px solid #285AEC !important; outline-offset:0; }
html[data-wall-input="pointer"] .corona-open:focus { outline:none !important; }
body[data-hover-lift="true"] .card--audio[data-corona]:hover { translate:none; transform:none; box-shadow:none; }
.corona-face { display:block; position:absolute; inset:0; border-radius:50%; pointer-events:none; overflow:clip; background:#0E0D24; box-shadow:var(--nv-media-shadow); }
.card--audio[data-corona="ready"] .corona-face { background:radial-gradient(circle farthest-corner at 50% 50% in oklab,var(--nv-corona-hot) 0%,var(--nv-corona-hot) 48%,var(--nv-corona-mid) 56%,var(--nv-corona-cool) 63%,#0E0D24 71%); }
.corona-dark { position:absolute; inset:14.285714%; border-radius:50%; background:#050409; }
.corona-cover { position:absolute; inset:16.541353%; border-radius:50%; overflow:clip; background:#0E0D24; }
/* Keep stationary furniture paintable while the engine hides its focus origin. */
.card--audio[data-corona-zoom] .corona-face { visibility:visible; }
.card--audio[data-corona-zoom] .corona-cover { visibility:hidden; }
.corona-cover > img { display:block; width:100%; height:100%; object-fit:cover; }
.corona-cover > img[hidden] { display:none; }
.corona-chip { position:absolute; z-index:5; width:52px; height:52px; left:calc(50% + 43px * var(--nv-corona-scale)); top:calc(176px * var(--nv-corona-scale)); border-radius:50%; background:#050409; border:1px solid #FFFFFF4D; box-shadow:0 4px 12px #00000066; display:grid; place-items:center; color:#fff; cursor:pointer; opacity:1; pointer-events:auto; transition:border-color 120ms ease; }
.corona-chip svg { grid-area:1/1; width:22px; height:22px; }
.corona-service-mark { grid-area:1/1; width:28px; height:28px; border-radius:7px; object-fit:contain; }
.corona-service-mark[hidden] { display:none; }
.corona-chip:is(:active,[data-pressed="true"]) { scale:.94; }
.corona-chip:is(:active,[data-pressed="true"]) .corona-service-mark { opacity:.8; }
@media(hover:hover) and (pointer:fine) { .corona-chip:hover { border-color:#fff; } }
.corona-chip:not([data-mark-ready="true"]):is(:focus-visible,:active,[data-pressed="true"]) { background:#fff; color:#050409; }
@media(hover:hover) and (pointer:fine) { .corona-chip:not([data-mark-ready="true"]):hover { background:#fff; color:#050409; } }
.corona-chip:focus-visible { outline:2px solid #285AEC; outline-offset:2px; }
.day-cards:has(> .corona-halos) { isolation:isolate; }
.day-cards:has(> .corona-halos) > .card { z-index:1; }
.corona-halos { position:absolute; inset:0; z-index:0; pointer-events:none; }
.corona-halo { position:absolute; border-radius:50%; pointer-events:none; opacity:0; transform:translateY(var(--nv-stagger-rise)) scale(var(--nv-stagger-scale)); transition:opacity var(--nv-stagger-opacity-ms) var(--nv-stagger-opacity-ease) var(--nv-card-delay,0ms),transform var(--nv-stagger-transform-ms) var(--nv-stagger-transform-ease) var(--nv-card-delay,0ms); }
.corona-halo.is-in { opacity:1; transform:none; }
.corona-halo[data-ready="true"] { box-shadow:0 0 calc(40px * var(--nv-corona-scale)) calc(10px * var(--nv-corona-scale)) color-mix(in srgb,var(--nv-corona-hot) 70.196078%,transparent),0 0 calc(90px * var(--nv-corona-scale)) calc(26px * var(--nv-corona-scale)) color-mix(in srgb,var(--nv-corona-cool) 33.333333%,transparent); }
body[data-card-grow="card"] .card--audio[data-corona].is-in:hover { scale:1; }
@media(max-width:1023px) { :is(.day-cards,.card--reflection-unit) > .card--audio[data-corona] { --nv-corona-diameter:266px; } }
@media(hover:none), (pointer:coarse) { .corona-open:not([role="img"]):is(:active,[data-pressed="true"]) .corona-face::after { opacity:1; transition-duration:80ms; } }
.corona-face::after { content:""; position:absolute; inset:0; z-index:2; background:#0E0D2466; opacity:0; transition:opacity 160ms ease; }
@media(prefers-reduced-motion:reduce) { .corona-chip,.corona-face::after { transition:none !important; } .corona-halo { opacity:1; transform:none; transition:none; } }
body[data-reduced-motion="true"] :is(.corona-chip,.corona-face::after) { transition:none !important; }
body[data-reduced-motion="true"] .corona-halo { opacity:1; transform:none; transition:none; }

/* #1750 R1/R2: clear cover, service mark at rest; fixed mask over a turning loop. */
.corona-open[role="img"] { cursor:default; }
.corona-ring-turn { transform-box:view-box; transform-origin:50% 50%; }
.corona-ring { position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:hidden; fill:#0E0D24; pointer-events:none; user-select:none; -webkit-user-select:none; letter-spacing:.02em; line-height:14px; }
.corona-ring-artist { font-family:"SFProRounded-Medium","SF Pro Rounded",system-ui,sans-serif; font-weight:500; }
.corona-ring-song { font-family:"SFProRounded-Bold","SF Pro Rounded",system-ui,sans-serif; font-weight:700; }

/* Decisions54–54c: a share and its reflection form one masonry/hover unit. */
.card.card--reflection-unit { background:none;border:0;box-shadow:none;padding:0;overflow:visible;display:flex;flex-direction:column;aspect-ratio:auto; }
.card--reflection-unit > .card { position:relative;width:100%;flex:none;margin:0;transform:none!important;opacity:1!important;transition:none!important; }
.reflection-note { --nv-fold-ink:var(--reflection-ink);--reflection-ink:#0E0D24;--reflection-label-ink:#0E0D24A6;--reflection-chip-fill:#0E0D24;--reflection-icon-ink:#FFFFFF;pointer-events:none;position:relative;isolation:isolate;box-sizing:border-box;width:100%;margin-top:var(--reflection-gap);padding:var(--reflection-top) var(--reflection-padding) var(--reflection-bottom);display:flex;flex-direction:column;gap:var(--reflection-wordsGap);overflow:clip;border:1px solid #FFFFFFB3;border-radius:var(--reflection-radiusTopLeft) var(--reflection-radiusTopRight) var(--reflection-radiusBottomRight) var(--reflection-radiusBottomLeft);background:#FFFFFF8F;box-shadow:0 1px 2px #0E0D240F,0 12px 16px 2px #0E0D2412; }
.reflection-grid { position:absolute;left:0;top:0;z-index:-1;pointer-events:none; }
.reflection-heading { display:flex;align-items:center;gap:var(--reflection-labelGap);font:600 12px/16px "SFProRounded-Semibold","SF Pro Rounded",system-ui,sans-serif;letter-spacing:.04em;color:var(--reflection-label-ink); }
.reflection-chip { width:var(--reflection-chip);height:var(--reflection-chip);background:var(--reflection-chip-fill);border-radius:50%;display:grid;place-items:center;flex:none; }
.reflection-chip svg { color:var(--reflection-icon-ink);width:var(--reflection-glyph);height:var(--reflection-glyph); }
.reflection-words { white-space:pre-line;margin:0;max-width:var(--reflection-measure);font:italic 400 var(--reflection-textSize)/var(--reflection-line-height) Fraunces,serif;color:var(--reflection-ink); }

.card--reflection-unit:has(> [data-corona]) > .reflection-note {margin-top:var(--reflection-songGap)}

.card--reflection-unit::after {display:none}

.reflection-note .fold-control {pointer-events:auto}

/* One-way expanded copy remains selectable without reactivating a picture. */
.fold-open { display:block; position:relative; z-index:3; cursor:auto; user-select:text; pointer-events:auto; }