/* Dark Ascendant — Blood Canon v2.
   Layout: a campaign plate first (one eclipse in the void, the wordmark across its lower limb),
   then a single 720px reading column. On wide screens each section title moves into a left
   rail beside the column, like a lookbook caption. Sharp corners, hairlines, no cards.
   Palette and type are fixed by LYRA's Blood Canon v2; do not add colours here. */

:root {
  /* Palette (exact, Blood Canon v2). Red never sets body text. */
  --void: #050203;
  --crypt: #0d0507;
  --oxblood: #2a0509;
  --venous: #5c0a14;
  --arterial: #8b0a1a;
  --blood: #b3001b;
  --wound: #e0102a;
  --bone: #ece4df;
  --ash: #8a7f7c;

  /* The same colours as channels, for alpha: rgb(var(--blood-rgb) / .4). */
  --void-rgb: 5 2 3;
  --crypt-rgb: 13 5 7;
  --oxblood-rgb: 42 5 9;
  --venous-rgb: 92 10 20;
  --arterial-rgb: 139 10 26;
  --blood-rgb: 179 0 27;
  --bone-rgb: 236 228 223;

  /* Type */
  --font-display: 'Syncopate', 'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step--1: 0.8125rem;
  --step-0: 1.125rem;
  --step-1: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem);
  --step-3: clamp(1.625rem, 0.9rem + 3.4vw, 3.25rem);

  /* Space and frame */
  --gutter: 24px;
  --column: 720px;
  --header-h: 64px;
  --section-space: clamp(5.5rem, 4rem + 8vw, 10rem);
  --hairline: 1px solid rgb(var(--venous-rgb) / 0.7);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; }
}

/* ---------- base ---------- */

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

html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  /* Jost runs smaller and lighter than Inter did: regular weight (never bold) keeps body copy readable */
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.85;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Glows (button smoke, section washes) may bleed sideways; clip them per section so a
   phone's layout viewport never grows past the screen. body's clip alone does not stop it. */
main > section {
  overflow-x: clip;
}

/* Fine film grain over everything. Static: the hero canvas carries the moving grain. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .93 0 0 0 .9 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

img, canvas { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--arterial); color: var(--bone); }

/* --wound is the one glint the canon allows: focus. */
:focus-visible {
  outline: 2px solid var(--wound);
  outline-offset: 4px;
}

p { margin: 0; }

.da-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.da-skip {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  z-index: 120;
  padding: 0.6rem 1rem;
  background: var(--crypt);
  border: var(--hairline);
  font-size: var(--step--1);
  text-decoration: none;
  transform: translateY(-200%);
}
.da-skip:focus-visible { transform: none; }

.da-glyph {
  color: var(--blood);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1;
}

/* ---------- header ---------- */
/* Solid by default, so it stays readable with JavaScript off.
   hero.js adds .da-header--over-hero while the hero is beneath it. */

.da-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  background: rgb(var(--void-rgb) / 0.94);
  border-bottom: 1px solid rgb(var(--venous-rgb) / 0.55);
  transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .da-header {
    background: rgb(var(--void-rgb) / 0.8);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
  }
}

/* hero.js sets this until its first reading, so the page does not open with a fade. */
.da-header--instant,
.da-header--instant * { transition: none !important; }

.da-header--over-hero {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.da-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 44px;
  min-height: 44px;
  text-decoration: none;
}

.da-header__brand .da-glyph { font-size: 1.05rem; }

.da-header__word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.6s var(--ease);
}

@media (max-width: 519px) {
  .da-header__word { display: none; }
}

/* Over the hero the wordmark is already on screen at full size. */
.da-header--over-hero .da-header__word { opacity: 0; }

.da-nav {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.da-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  background: linear-gradient(var(--blood), var(--blood)) left calc(50% + 0.85em) / 0 1px no-repeat;
  transition: color 0.3s var(--ease), background-size 0.5s var(--ease);
}

.da-nav a:hover { color: var(--bone); background-size: 100% 1px; }

/* ---------- hero: the eclipse plate ---------- */
/* The still eclipse is pure CSS on #hero, so first paint never waits on script.
   Task 14 draws the breathing moon on #hero-canvas at the same place:
   centre (50%, --moon-y) and diameter --moon-size, both read from #hero. */

.da-hero {
  --moon-size: min(84vw, 50svh, 620px);
  --moon-y: 41%;

  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 600px;
  min-height: max(600px, 100svh);
  overflow: hidden;
  background: var(--void);
}

@media (min-width: 900px) {
  .da-hero { --moon-size: min(60svh, 640px); --moon-y: 43%; }
}

.da-hero__moon {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: var(--moon-y);
  width: var(--moon-size);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    /* surface: low-frequency maria, multiplied in */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009' numOctaves='5' seed='11'/%3E%3CfeColorMatrix values='.9 0 0 0 .3 .9 0 0 0 .3 .9 0 0 0 .3 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") center / 100% 100%,
    /* the eclipse: umbra high and right, the lit limb low and left */
    radial-gradient(circle at 62% 30%, var(--void) 0, var(--crypt) 26%, var(--oxblood) 46%, var(--venous) 60%, var(--arterial) 70%, var(--blood) 76%);
  background-blend-mode: multiply, normal;
  box-shadow:
    /* lacquer: a thin wet rim along the lit limb */
    inset calc(var(--moon-size) * 0.006) calc(var(--moon-size) * -0.006) calc(var(--moon-size) * 0.008) rgb(var(--bone-rgb) / 0.12),
    inset 0 0 calc(var(--moon-size) * 0.03) rgb(var(--void-rgb) / 0.6),
    calc(var(--moon-size) * -0.03) calc(var(--moon-size) * 0.04) calc(var(--moon-size) * 0.12) rgb(var(--blood-rgb) / 0.22);
}

/* the faint corona, strongest beside the lit limb (behind the moon, so on #hero) */
.da-hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  left: 50%;
  top: var(--moon-y);
  width: calc(var(--moon-size) * 2.1);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(circle at 46% 54%,
    rgb(var(--arterial-rgb) / 0.34) 0,
    rgb(var(--venous-rgb) / 0.2) 24%,
    rgb(var(--oxblood-rgb) / 0.1) 38%,
    rgb(var(--oxblood-rgb) / 0) 64%);
}

/* hero.js draws only light, screen-blended onto the still: a square around the moon, big
   enough for the corona. Transparent until its first frame, then it fades in. */
.da-hero__canvas {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: var(--moon-y);
  width: calc(var(--moon-size) * 2.3);
  height: calc(var(--moon-size) * 2.3);
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
}

.da-hero__canvas--live { opacity: 1; }

/* vignette */
.da-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% var(--moon-y), rgb(var(--void-rgb) / 0) 55%, rgb(var(--void-rgb) / 0.85) 100%),
    linear-gradient(rgb(var(--void-rgb) / 0) 70%, var(--void) 100%);
}

.da-hero__content {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  padding-bottom: clamp(3rem, 2rem + 6svh, 6.5rem);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  text-align: center;
}

.da-wordmark {
  margin: 0;
  /* trailing tracking would push the word off-centre, so pull it back */
  margin-right: -0.3em;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  /* below 900px the two words stack, so the mark can be larger than one line allows */
  font-size: clamp(1.8rem, 8.2vw, 3.6rem);
  line-height: 1.25;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bone);
  text-shadow: 0 0 1.2em rgb(var(--void-rgb) / 0.9);
}

@media (min-width: 900px) {
  .da-wordmark {
    font-size: clamp(2.6rem, 5.4vw, 5.5rem);
    line-height: 1.1;
    white-space: nowrap;
  }
}

.da-hero__line {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ash);
}

.da-hero__actions {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 300px);
  margin-top: clamp(1rem, 3svh, 2rem);
}

@media (min-width: 560px) {
  .da-hero__actions {
    display: flex;
    width: auto;
    gap: 1rem;
  }
}

/* ---------- buttons ---------- */

.da-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 1.9rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--bone);
  text-shadow: 0 0 0.9em rgb(var(--void-rgb) / 0.85);
  cursor: pointer;
}

/* No box: each button is a word floating in its own mist. ::before is the mist itself,
   a feathered cloud wider than the button with slow-drifting wisps in it; ::after is the
   glow that breathes with the moon. Both are masked to soft edges, so they melt into the
   page and into each other when buttons sit side by side. */
.da-btn::before,
.da-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -55% -22%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, rgb(0 0 0 / 0.6) 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 35%, rgb(0 0 0 / 0.6) 62%, transparent 100%);
  transition: transform 1.2s var(--ease), opacity 1.2s var(--ease);
}

.da-btn::before {
  background-size: 360px 180px, 100% 100%;
  background-repeat: repeat, no-repeat;
  animation: da-mist-drift 26s linear infinite alternate;
}

/* Primary: a blood-red mist, its glow breathing in time with the moon. */
.da-btn--blood::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .028' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 0 0 0 0 0 .1 0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(closest-side, rgb(var(--blood-rgb) / 0.85), rgb(var(--arterial-rgb) / 0.6) 45%, rgb(var(--oxblood-rgb) / 0.45) 72%, rgb(var(--oxblood-rgb) / 0) 100%);
}

.da-btn--blood::after {
  inset: -90% -35%;
  background: radial-gradient(closest-side, rgb(var(--blood-rgb) / 0.55), rgb(var(--blood-rgb) / 0) 100%);
  opacity: 0.3;
  animation: da-breathe 6.5s ease-in-out infinite;
}

/* Secondary: black smoke with a faint red breath at its heart. Its wisps are bone-grey, not red. */
.da-btn--ghost::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.009 .028' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(closest-side, rgb(var(--void-rgb) / 0.92), rgb(var(--crypt-rgb) / 0.8) 40%, rgb(var(--oxblood-rgb) / 0.45) 70%, rgb(var(--oxblood-rgb) / 0) 100%);
  opacity: 0.85;
}

.da-btn--ghost::after {
  background: radial-gradient(closest-side, rgb(var(--arterial-rgb) / 0.25), rgb(var(--arterial-rgb) / 0) 100%);
  opacity: 0.6;
}

/* On hover or focus the mist gathers and brightens. */
.da-btn:hover::before,
.da-btn:focus-visible::before { transform: scale(1.08); opacity: 1; }
.da-btn--ghost:hover::after,
.da-btn--ghost:focus-visible::after { opacity: 1; }

.da-btn:focus-visible {
  /* bone, not red: a red ring would vanish inside the blood mist. Lifted over a neighbour's mist. */
  z-index: 1;
  outline-color: var(--bone);
  outline-offset: 10px;
}

@keyframes da-mist-drift {
  from { background-position: 0 0, center; }
  to { background-position: 360px 40px, center; }
}

.da-btn:disabled,
.da-btn[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
}

.da-btn:disabled::before,
.da-btn:disabled::after,
.da-btn[aria-disabled="true"]::before,
.da-btn[aria-disabled="true"]::after { animation: none; }

/* one breath: a 40% inhale, a longer exhale (hero.js breathes the moon at this tempo, loosely) */
@keyframes da-breathe {
  0%, 100% { opacity: 0.25; }
  40% { opacity: 0.85; }
}

/* ---------- sections ---------- */
/* One reading column. From 1360px the h2 moves into the left rail. */

.da-section,
.da-offerings,
.da-follow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 1.75rem;
  width: 100%;
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin-inline: auto;
  padding-block: var(--section-space);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

section[id] { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); }

/* a hairline between sections, fading at both ends */
.da-section + .da-section::before,
.da-section + .da-offerings::before,
.da-offerings + .da-follow::before,
.da-follow + .da-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--gutter), env(safe-area-inset-left, 0px));
  right: max(var(--gutter), env(safe-area-inset-right, 0px));
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--venous-rgb) / 0), var(--venous) 18%, var(--venous) 82%, rgb(var(--venous-rgb) / 0));
}

.da-h2,
.da-offerings__title,
.da-follow__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bone);
}

.da-lead {
  max-width: 34em;
  color: var(--ash);
}

.da-note {
  font-size: var(--step--1);
  line-height: 1.8;
  color: var(--ash);
}

@media (min-width: 1360px) {
  .da-section,
  .da-offerings,
  .da-follow {
    --rail: minmax(0, 1fr);
    grid-template-columns: var(--rail) min(var(--column), 100%) var(--rail);
    column-gap: 3.5rem;
    max-width: none;
  }

  /* The rail title spans several rows; with no row gap the empty ones collapse to nothing,
     so column 2 is spaced by margins instead. */
  .da-section:not(.da-manifesto),
  .da-offerings,
  .da-follow { row-gap: 0; }

  .da-section:not(.da-manifesto) > * + * + *,
  .da-offerings > * + * + *,
  .da-follow > * + * + * { margin-top: 1.75rem; }

  .da-section > *,
  .da-offerings > *,
  .da-follow > * { grid-column: 2; }

  .da-section > .da-h2,
  .da-offerings > .da-offerings__title,
  .da-follow > .da-follow__title {
    grid-column: 1;
    grid-row: 1 / span 4;
    justify-self: end;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 2.5rem);
    padding-top: 0.2em;
    text-align: right;
  }

  .da-section + .da-section::before,
  .da-section + .da-offerings::before,
  .da-offerings + .da-follow::before,
  .da-follow + .da-section::before {
    left: calc(50% - var(--column) / 2 - 14rem);
    right: calc(50% - var(--column) / 2 - 14rem);
  }
}

/* ---------- section art ---------- */
/* Each section below the hero carries its own full-bleed plate (assets/brand/bg/*.svg):
   one red light source, hairlines, mostly void. The plate sits behind the section's
   content, fades out at its top and bottom so sections meet in black, and stays dim
   under the reading column so bone and ash text keep their contrast. */

.da-section,
.da-offerings,
.da-follow { isolation: isolate; }

.da-section::after,
.da-offerings::after,
.da-follow::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background: var(--art, none) var(--art-pos, center) / var(--art-size, cover) no-repeat;
  opacity: var(--art-opacity, 0.85);
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

#manifesto { --art: url("/assets/brand/bg/manifesto.svg"); --art-pos: 70% 50%; }
#sky       { --art: url("/assets/brand/bg/sky.svg");       --art-pos: 80% 0%; }
#chamber   { --art: url("/assets/brand/bg/chamber.svg");   --art-pos: 0% 100%; }
#offerings { --art: url("/assets/brand/bg/offerings.svg"); --art-pos: 100% 50%; }
#follow    { --art: url("/assets/brand/bg/follow.svg");    --art-pos: 100% 50%; }
#about     { --art: url("/assets/brand/bg/about.svg");     --art-pos: 100% 100%; }

/* On a phone the column is the whole width, so the plates sit lower behind the text. */
@media (max-width: 719px) {
  .da-section::after,
  .da-offerings::after,
  .da-follow::after { --art-opacity: 0.6; }
}

/* ---------- manifesto ---------- */
/* Two canon statements on the column's left edge. */

.da-manifesto {
  gap: clamp(2.75rem, 2rem + 4vw, 5rem);
  padding-block: calc(var(--section-space) * 1.15);
}

.da-manifesto__line {
  max-width: 22em;
  font-family: var(--font-display);
  font-weight: 400;
  /* Syncopate sets very wide: a step smaller than --step-3 keeps each statement to two lines */
  font-size: clamp(1.25rem, 0.75rem + 2.3vw, 2.4rem);
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--bone);
}


.da-manifesto__line .da-glyph {
  display: inline-block;
  margin-right: 0.45em;
  font-size: 0.5em;
  vertical-align: 0.32em;
}

/* ---------- panels ---------- */
/* An instrument frame: hairline box with four corner ticks in blood. */

.da-panel {
  --tick: 10px;
  position: relative;
  min-width: 0;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem);
  background:
    linear-gradient(var(--blood), var(--blood)) top left / var(--tick) 1px no-repeat,
    linear-gradient(var(--blood), var(--blood)) top left / 1px var(--tick) no-repeat,
    linear-gradient(var(--blood), var(--blood)) top right / var(--tick) 1px no-repeat,
    linear-gradient(var(--blood), var(--blood)) top right / 1px var(--tick) no-repeat,
    linear-gradient(var(--blood), var(--blood)) bottom left / var(--tick) 1px no-repeat,
    linear-gradient(var(--blood), var(--blood)) bottom left / 1px var(--tick) no-repeat,
    linear-gradient(var(--blood), var(--blood)) bottom right / var(--tick) 1px no-repeat,
    linear-gradient(var(--blood), var(--blood)) bottom right / 1px var(--tick) no-repeat,
    linear-gradient(180deg, rgb(var(--crypt-rgb) / 0.9), rgb(var(--void-rgb) / 0.6));
  border: 1px solid rgb(var(--venous-rgb) / 0.55);
}

/* ---------- sky now (#sky-panel) ---------- */
/* Task 15 renders into #sky-panel. Suggested markup, already styled:
     .da-sky__head   > .da-sky__label + .da-sky__stamp (mono, local time)
     ul.da-sky__rows > li.da-sky__row > .da-sky__glyph .da-sky__body .da-sky__sign .da-sky__deg .da-sky__rx
     dl.da-sky__meta > div > dt + dd   (moon phase, next ingress, sharpest aspect)
     p.da-sky__line                    (lilith's line of the day)
   min-height holds the space so the page does not jump when the panel fills. */

.da-sky__panel {
  display: grid;
  align-content: start;
  gap: 1.75rem;
  min-height: 42rem;
}

/* Before the data arrives the frame shows its empty ruling, like an instrument at rest. */
.da-sky__panel:has(> .da-sky__state) {
  background-image:
    linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)),
    linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)),
    linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)),
    linear-gradient(var(--blood), var(--blood)), linear-gradient(var(--blood), var(--blood)),
    repeating-linear-gradient(180deg, rgb(var(--venous-rgb) / 0) 0 calc(2.6rem - 1px), rgb(var(--venous-rgb) / 0.3) calc(2.6rem - 1px) 2.6rem),
    linear-gradient(180deg, rgb(var(--crypt-rgb) / 0.9), rgb(var(--void-rgb) / 0.6));
  background-size:
    var(--tick) 1px, 1px var(--tick), var(--tick) 1px, 1px var(--tick),
    var(--tick) 1px, 1px var(--tick), var(--tick) 1px, 1px var(--tick),
    calc(100% - 2 * clamp(1.25rem, 0.8rem + 2vw, 2.25rem)) calc(100% - 6.5rem),
    auto;
  background-position:
    top left, top left, top right, top right,
    bottom left, bottom left, bottom right, bottom right,
    center bottom clamp(1.25rem, 0.8rem + 2vw, 2.25rem),
    0 0;
  background-repeat: no-repeat;
}

.da-sky__state {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ash);
}

.da-sky__panel noscript .da-sky__state { padding-left: calc(0.9rem + 7px); }

.da-sky__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: var(--hairline);
}

.da-sky__label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.da-sky__stamp,
.da-sky__deg,
.da-sky__rx,
.da-sky__meta dd {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.da-sky__stamp { font-size: var(--step--1); color: var(--ash); }

.da-sky__rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.da-sky__row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto 4.75rem 1.25rem;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid rgb(var(--venous-rgb) / 0.35);
  font-size: 0.95rem;
  line-height: 1.5;
}

.da-sky__glyph { color: var(--blood); font-size: 1.05rem; text-align: center; }
.da-sky__body { color: var(--bone); min-width: 0; }
.da-sky__sign { color: var(--ash); }
.da-sky__deg { color: var(--bone); text-align: right; font-size: 0.875rem; }
.da-sky__rx { color: var(--bone); font-size: 0.75rem; } /* meaningful text, so never red */

.da-sky__meta {
  display: grid;
  gap: 1rem;
  margin: 0;
}

@media (min-width: 600px) {
  .da-sky__meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.da-sky__meta dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ash);
}

.da-sky__meta dd { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--bone); }

.da-sky__line {
  padding-top: 1.5rem;
  border-top: var(--hairline);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Task 15: the filled panel. sky.js draws head, lilith's line, eleven rows, then the moon and aspect readouts. */
.da-sky__label { margin: 0; color: var(--bone); }

.da-sky__verse { margin: 0; display: grid; gap: 0.9rem; }
.da-sky__verse blockquote { margin: 0; }
.da-sky__verse .da-sky__line { padding-top: 0; border-top: 0; color: var(--bone); }
.da-sky__by {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ash);
}
.da-sky__by .da-glyph { font-size: 0.8rem; }

/* zodiac and planet glyphs are symbols, not letters: a steadier face than Inter for them */
.da-sky__glyph,
.da-sky__zod,
.da-sky__aspglyph {
  font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols', 'Noto Sans Symbols 2', var(--font-body);
  font-variant-emoji: text;
}
.da-sky__zod { display: inline-block; width: 1.3em; }
.da-sky__sign { white-space: nowrap; }

/* the degree carries a hairline gauge beneath it: how far through its sign the body has travelled */
.da-sky__deg {
  padding-bottom: 4px;
  background:
    linear-gradient(var(--blood), var(--blood)) 0 100% / calc(var(--arc, 0) * 100%) 1px no-repeat,
    linear-gradient(rgb(var(--venous-rgb) / 0.45), rgb(var(--venous-rgb) / 0.45)) 0 100% / 100% 1px no-repeat;
}
.da-sky__row:last-child { border-bottom: 0; }

/* wider screens: name and sign read as two table columns rather than two ends of a line */
@media (width >= 520px) {
  .da-sky__row { grid-template-columns: 1.75rem minmax(0, 1.15fr) minmax(0, 1fr) 4.75rem 1.25rem; }
}

/* With JavaScript, the space held before data arrives matches the filled panel, so nothing below
   it jumps. Without it no data is coming, so the frame keeps the shorter base height. */
@media (scripting: enabled) and (width < 520px) { .da-sky__panel { min-height: 78rem; } }
@media (scripting: enabled) and (width >= 520px) { .da-sky__panel { min-height: 56rem; } }
@media (scripting: none) { .da-sky__panel { min-height: 15rem; } }
/* after a failed fetch nothing is in progress, so the frame shrinks and the pulse rests */
.da-sky__panel.da-sky__panel--down { min-height: 15rem; }
.da-sky__panel--down .da-pulse { animation: none; opacity: 0.6; }

/* phones: the sign drops under the body name so the numerals keep their column */
@media (width < 520px) {
  .da-sky__row {
    grid-template-columns: 1.5rem minmax(0, 1fr) 4.5rem 1rem;
    grid-template-areas: "glyph body deg rx" "glyph sign deg rx";
    row-gap: 0;
    column-gap: 0.7rem;
    align-items: center;
    padding-block: 0.45rem;
  }
  .da-sky__glyph { grid-area: glyph; }
  .da-sky__body { grid-area: body; line-height: 1.35; }
  .da-sky__sign { grid-area: sign; font-size: 0.8125rem; line-height: 1.35; }
  .da-sky__deg { grid-area: deg; }
  .da-sky__rx { grid-area: rx; }
}

.da-sky__meta { padding-top: 1.5rem; border-top: var(--hairline); }
@media (min-width: 600px) {
  .da-sky__meta { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.5rem; }
}
.da-sky__meta dd { font-family: var(--font-body); font-variant-numeric: normal; line-height: 1.6; }
.da-sky__num,
.da-sky__when { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.da-sky__num { color: var(--ash); }
.da-sky__when { display: block; margin-top: 0.15rem; font-size: 0.78rem; }
.da-sky__phase { display: inline-flex; align-items: center; gap: 0.6rem; }
.da-sky__aspglyph { color: var(--blood); letter-spacing: 0.12em; }

.da-moon { flex: none; display: block; }
.da-moon__dark { fill: var(--oxblood); stroke: rgb(var(--venous-rgb) / 0.9); stroke-width: 0.75; }
.da-moon__lit { fill: var(--blood); }

/* ---------- lilith's chamber (#chamber-root) ---------- */
/* Task 16 renders the intake form and the reading into #chamber-root. Styled hooks:
     form.da-form > .da-field > label.da-label + .da-input | select.da-input | .da-choices
     .da-choices > label.da-choice > input[type=radio] + span
     label.da-check > input[type=checkbox] + span
     .da-field__error (shown with aria-invalid on the control), .da-btn.da-btn--blood
     .da-loading (a slow red pulse + "she is reading.")
     article.da-reading > p … + .da-reading__note + .da-reading__cta */

.da-chamber__root {
  display: grid;
  gap: 1.75rem;
  min-width: 0;
}

.da-form {
  display: grid;
  gap: 1.75rem;
}

.da-field {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.da-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--ash);
}

.da-input {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem;
  background: var(--crypt);
  border: 1px solid rgb(var(--venous-rgb) / 0.9);
  border-radius: 0;
  font: 300 1rem/1.4 var(--font-body);
  color: var(--bone);
  transition: border-color 0.3s var(--ease);
}

.da-input::placeholder { color: var(--ash); }
.da-input:hover { border-color: var(--arterial); }
.da-input:focus-visible { border-color: var(--blood); outline-offset: 2px; }
/* When Tab reaches a date or time field's built-in picker button, Chrome moves
   focus inside the field, so :focus and :focus-visible stop matching. Keep the ring there. */
.da-input:is([type="date"], [type="time"]):focus-within { border-color: var(--blood); outline: 2px solid var(--wound); outline-offset: 2px; }
.da-input[aria-invalid="true"] { border-color: var(--blood); }

.da-field__error {
  display: flex;
  gap: 0.6rem;
  font-size: var(--step--1);
  color: var(--bone);
}

.da-field__error::before { content: "◉"; color: var(--blood); }

.da-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgb(var(--venous-rgb) / 0.9);
  border: 1px solid rgb(var(--venous-rgb) / 0.9);
}

@media (min-width: 600px) {
  .da-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.da-choice { position: relative; display: grid; }

.da-choice input,
.da-check input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.da-choice span {
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: 0.5rem;
  background: var(--crypt);
  font-family: var(--font-display);
  /* Syncopate is wide: the longest label ("remembered") must fit a half-width (phone) or quarter-width button */
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ash);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.da-choice input:checked + span {
  background: var(--oxblood);
  color: var(--bone);
  box-shadow: inset 0 -1px 0 var(--blood);
}

.da-choice input:focus-visible + span,
.da-check input:focus-visible + span {
  outline: 2px solid var(--wound);
  outline-offset: 2px;
}

.da-check {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 44px;
  font-size: 0.95rem;
  color: var(--ash);
  cursor: pointer;
}

.da-check span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.8rem;
  vertical-align: -2px;
  border: 1px solid var(--venous);
  background: var(--crypt);
}

.da-check input:checked + span::before {
  background: radial-gradient(circle, var(--blood) 0 3.5px, var(--crypt) 4.5px);
  border-color: var(--blood);
}

.da-loading {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ash);
}

.da-pulse {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blood);
  box-shadow: 0 0 12px 2px rgb(var(--blood-rgb) / 0.6);
  animation: da-slow-pulse 2.4s ease-in-out infinite;
}

.da-loading .da-pulse { width: 10px; height: 10px; }

@keyframes da-slow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}

.da-reading {
  display: grid;
  gap: 1.4em;
  padding-block: 1rem;
  font-size: 1.125rem;
  line-height: 1.9;
}

.da-reading__note { font-size: var(--step--1); color: var(--ash); }
.da-reading__cta {
  justify-self: start;
  margin-top: 0.75rem;
  /* a long product title is wider than a phone in Syncopate: let the CTA wrap */
  max-width: 100%;
  padding-block: 0.8rem;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
}

/* ---------- chamber, live (Task 16: chamber.js) ---------- */
/* The intake reads as a rite in three steps (i the day · ii the hour · iii the place),
   then a vigil while she reads, then the reading itself. */

.da-chamber__root [hidden] { display: none !important; }

/* the chamber scrolls itself into view for the vigil and the reading; keep it clear of the fixed header */
.da-chamber__root { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top, 0px) + 1.5rem); }

.da-chamber__form {
  gap: 0;
  padding: clamp(1.5rem, 0.9rem + 3vw, 3rem);
}

.da-step,
.da-field--group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.da-step {
  display: grid;
  gap: 1.5rem;
  padding-block: 2.25rem;
}

.da-step:first-child { padding-top: 0.25rem; }

.da-step + .da-step { border-top: var(--hairline); }

.da-step__title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  float: left; /* lets the legend sit inside the grid like any other row */
  width: 100%;
  margin: 0 0 0.25rem;
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
}

.da-step__title + * { clear: both; }

.da-step__num {
  min-width: 1.6em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--blood);
}

.da-field--group { display: grid; gap: 0.55rem; }
.da-field--group > legend { float: left; width: 100%; margin-bottom: 0.55rem; padding: 0; }
.da-field--group > legend + * { clear: both; }

.da-step__hint,
.da-places__status {
  font-size: var(--step--1);
  line-height: 1.8;
  color: var(--ash);
}


.da-step__row {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 560px) {
  .da-step__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* native date, time, number, search and select, made to sit quietly in the frame */
.da-input[type="date"],
.da-input[type="time"],
.da-input[type="search"],
.da-input[type="number"],
select.da-input {
  appearance: none;
  -webkit-appearance: none;
}

.da-input[type="date"],
.da-input[type="time"] { font-family: var(--font-mono); letter-spacing: 0.04em; }

.da-input::-webkit-date-and-time-value { text-align: left; }
.da-input::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
.da-input::-webkit-calendar-picker-indicator:hover { opacity: 0.9; }
.da-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.da-input::-webkit-inner-spin-button,
.da-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.da-input[type="number"] { -moz-appearance: textfield; font-family: var(--font-mono); }
.da-input:disabled { opacity: 0.45; cursor: not-allowed; }

select.da-input {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a7f7c' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

select.da-input option { background: var(--crypt); color: var(--bone); }

/* place candidates: a ruled list, nothing chosen until the visitor chooses */
.da-places__list {
  display: grid;
  border: 1px solid rgb(var(--venous-rgb) / 0.9);
}

.da-place { position: relative; display: grid; }
.da-place + .da-place { border-top: 1px solid rgb(var(--venous-rgb) / 0.6); }

.da-place input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.da-place span {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 50px;
  padding: 0.7rem 1rem;
  background: var(--crypt);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ash);
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.da-place span::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--venous);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.da-place span:hover { color: var(--bone); }

.da-place input:checked + span {
  background: var(--oxblood);
  color: var(--bone);
}

.da-place input:checked + span::before {
  background: var(--blood);
  border-color: var(--blood);
  box-shadow: 0 0 10px 1px rgb(var(--blood-rgb) / 0.7);
}

.da-place input:focus-visible + span {
  outline: 2px solid var(--wound);
  outline-offset: -2px;
}

.da-check span { line-height: 1.6; }
.da-check span::before { margin-right: 0.9rem; }

.da-chamber__turnstile { width: 100%; max-width: 100%; } /* measured to pick the widget size */

.da-chamber__submit {
  display: grid;
  gap: 1.1rem;
  padding-top: 2.25rem;
  border-top: var(--hairline);
}

.da-chamber__submit .da-btn { width: 100%; }

@media (min-width: 560px) {
  .da-chamber__submit { justify-items: start; }
  .da-chamber__submit .da-btn { width: auto; min-width: 16rem; }
}

.da-chamber__fine { max-width: 34em; }

/* the vigil: the form withdraws, one red body breathes while she reads */
.da-chamber__vigil {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.5rem;
  min-height: clamp(22rem, 62svh, 34rem);
  text-align: center;
  outline: none;
}

.da-chamber__vigil .da-loading { justify-content: center; color: var(--bone); }
.da-chamber__vigil .da-note { max-width: 24em; }

.da-chamber__orb {
  position: relative;
  width: 84px;
  height: 84px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 62%, var(--blood) 0%, var(--arterial) 38%, var(--oxblood) 72%, var(--void) 100%);
  box-shadow: 0 0 46px 6px rgb(var(--blood-rgb) / 0.4), inset -10px 10px 22px rgb(var(--void-rgb) / 0.85);
  animation: da-vigil-breathe 2.4s ease-in-out infinite;
}

.da-chamber__orb::before,
.da-chamber__orb::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgb(var(--blood-rgb) / 0.55);
  animation: da-vigil-ring 4.8s var(--ease) infinite;
}

.da-chamber__orb::after { animation-delay: 2.4s; }

@keyframes da-vigil-breathe {
  0%, 100% { transform: scale(0.94); box-shadow: 0 0 30px 2px rgb(var(--blood-rgb) / 0.28), inset -10px 10px 22px rgb(var(--void-rgb) / 0.85); }
  50% { transform: scale(1); box-shadow: 0 0 60px 10px rgb(var(--blood-rgb) / 0.5), inset -10px 10px 22px rgb(var(--void-rgb) / 0.85); }
}

@keyframes da-vigil-ring {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* the reading */
.da-chamber__stage { min-width: 0; }

.da-reading {
  gap: 2.25rem;
  padding-block: 0.5rem 0;
  outline: none;
}

.da-reading__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: var(--hairline);
}

.da-reading__facts > div {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 0.75rem 1.05rem 0;
}

.da-reading__facts > div + div { padding-left: 0.9rem; border-left: 1px solid rgb(var(--venous-rgb) / 0.5); }

.da-reading__facts dt,
.da-reading__key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ash);
}

.da-reading__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--bone);
  overflow-wrap: anywhere;
}

.da-reading__deg {
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0;
  color: var(--ash);
}

.da-reading__facts .da-reading__deg { display: block; margin-top: 0.2rem; }

/* Below 520px a third of the column is narrower than "sagittarius", so the three
   facts stack as rows instead of breaking a sign mid-word. */
@media (width < 520px) {
  .da-reading__facts { grid-template-columns: minmax(0, 1fr); }
  .da-reading__facts > div { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: baseline; column-gap: 1rem; padding: 0.85rem 0; }
  .da-reading__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgb(var(--venous-rgb) / 0.5); }
  .da-reading__facts .da-reading__deg { display: inline; margin: 0 0 0 0.6rem; white-space: nowrap; }
}

.da-reading__transit {
  margin-top: -1.25rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--bone);
}

.da-reading__transit .da-reading__key { margin-right: 0.75rem; }

.da-reading__body {
  display: grid;
  gap: 1.4em;
  max-width: 36em;
}

.da-reading__para {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.95;
  color: var(--bone);
  animation: da-reading-rise 1.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 0.32s + 0.15s);
}

.da-reading__para:first-child::first-letter {
  float: left;
  margin: 0.1em 0.12em 0 0;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.8;
  color: var(--bone);
}

.da-reading__pull {
  margin-top: 1rem;
  padding-top: 1.75rem;
  border-top: var(--hairline);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-wrap: balance;
}

.da-reading__note {
  max-width: 34em;
  padding-left: 1rem;
  border-left: 1px solid var(--venous);
  line-height: 1.8;
}

.da-reading__cta { margin-top: 0; }

.da-reading__sign {
  font-size: 0.9rem;
  line-height: 1;
  color: var(--blood);
}

@keyframes da-reading-rise {
  from { opacity: 0; transform: translateY(0.6rem); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* the verdict: a limit reached, said once, with nothing else on the page around it */
.da-chamber__verdict {
  display: grid;
  justify-items: start;
  gap: 2rem;
  padding-block: 3rem 1rem;
  outline: none;
}

.da-chamber__verdict-line {
  max-width: 22em;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-wrap: balance;
  color: var(--bone);
}

/* ---------- offerings (generated block) ---------- */

.da-offerings__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .da-offerings__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.da-offering__link {
  display: grid;
  gap: 0.35rem;
  text-decoration: none;
}

.da-offering__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  object-fit: cover;
  background: var(--crypt);
  border: 1px solid rgb(var(--venous-rgb) / 0.7);
  transition: border-color 0.4s var(--ease), filter 0.6s var(--ease);
}

.da-offering__link:hover .da-offering__image {
  border-color: var(--blood);
  filter: brightness(1.12);
}

.da-offering__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.da-offering__price {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}

.da-offering__blurb { color: var(--ash); }

.da-offerings__store {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--venous);
  transition: border-color 0.3s var(--ease);
}

.da-offerings__store::after { content: "↗"; font-family: var(--font-body); color: var(--blood); }
.da-offerings__store:hover { border-color: var(--blood); }

.da-offerings__note {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ash);
}

.da-offerings__note::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.5em;
  border: 1px solid var(--blood);
  border-radius: 50%;
}

/* ---------- follow (generated block) ---------- */

.da-follow__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--hairline);
}

.da-follow__item { border-bottom: var(--hairline); }

.da-follow__link {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  min-height: 4.5rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--ease), padding 0.5s var(--ease);
}

.da-follow__link::before {
  content: "";
  width: 1.15rem;
  aspect-ratio: 1;
  background: var(--bone);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  transition: background-color 0.3s var(--ease);
}

.da-follow__link::after {
  content: "↗";
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ash);
  transition: color 0.3s var(--ease), transform 0.5s var(--ease);
}

.da-follow__link:hover::before { background-color: var(--blood); }
.da-follow__link:hover::after { color: var(--blood); transform: translate(3px, -3px); }

/* A social with no icon below still gets a glyph. */
.da-follow__link { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
.da-follow__link[data-icon="tiktok"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); }
.da-follow__link[data-icon="x"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E"); }
.da-follow__link[data-icon="youtube"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E"); }

/* ---------- about ---------- */

.da-about__body { max-width: 34em; color: var(--bone); }

.da-about__line {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ---------- footer ---------- */

.da-footer {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding-top: clamp(4rem, 3rem + 6vw, 7rem);
  padding-bottom: calc(clamp(2.5rem, 2rem + 3vw, 4rem) + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  background: linear-gradient(rgb(var(--oxblood-rgb) / 0), rgb(var(--oxblood-rgb) / 0.35));
  border-top: var(--hairline);
  text-align: center;
}

.da-footer__mark { font-size: 1.4rem; }

.da-footer__word {
  margin-right: -0.42em;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.da-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 2rem;
}

.da-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
  transition: color 0.3s var(--ease);
}

.da-footer__nav a:hover { color: var(--bone); }

.da-footer__fine {
  display: grid;
  gap: 0.35rem;
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ash);
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .da-btn--blood::after { opacity: 0.45; }
}