/* dataterminals.github.io — warm, identity-forward landing page
   Palette pulled from the oxblood/sepia background loop. No external assets. */

:root {
  --bg-0: #100804;            /* deepest warm black */
  --bg-1: #1c0f0a;            /* oxblood base */
  --bg-2: #2a140d;            /* warmer highlight for the gradient */
  --ink: #f1e7da;             /* warm bone — primary text */
  --ink-dim: #c8b3a3;         /* muted taupe — secondary */
  --ink-faint: #94796a;       /* faint — meta */
  --accent: #d8794c;          /* terracotta ember — links / hover */
  --accent-soft: #e6a271;     /* softer warm gold */
  --hair: rgba(241, 231, 218, 0.13);
  --hair-strong: rgba(241, 231, 218, 0.26);

  /* astro glyph coverage + aspect palette */
  --glyph: "Segoe UI Symbol", "Noto Sans Symbols2", "Apple Symbols", "Segoe UI Emoji", var(--serif);
  --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  --hard: #e07a4e;   /* square / opposition — warm ember */
  --soft: #79c2cf;   /* trine / sextile — cool teal */
  --conj: #e6b877;   /* conjunction — warm gold */

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 660px;
  --pad: clamp(1.5rem, 5vw, 3rem);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}

/* ---- Background: blurred looping video + tinted fallback + scrim ---- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* Warm oxblood fallback — this is what shows until a video is dropped in,
     and behind any video whose frame is transparent while loading. */
  background:
    radial-gradient(120% 130% at 72% 8%, var(--bg-2) 0%, transparent 46%),
    linear-gradient(158deg, #241009 0%, var(--bg-1) 52%, var(--bg-0) 100%);
}

.bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  /* Slightly blurred, per the brief; scale hides the soft blur edge. */
  filter: blur(4px) saturate(1.06) contrast(1.02);
  transform: scale(1.09);
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.bg__video.is-ready { opacity: 1; }

.bg__scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(115% 95% at 26% 22%, transparent 0%, rgba(16, 8, 4, 0.70) 100%),
    linear-gradient(185deg, rgba(16, 8, 4, 0.50) 0%, rgba(16, 8, 4, 0.40) 40%, rgba(16, 8, 4, 0.86) 100%);
}

/* Faint film grain for the analog/classical feel (self-contained SVG noise). */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Layout ---- */
main {
  position: relative;
  width: 100%;
  padding: 0 var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3rem, 12vh, 6.5rem);
  /* Legibility insurance over busy footage — imperceptible over dark footage. */
  text-shadow: 0 1px 2px rgba(8, 4, 2, 0.5);
}
.screen, .foot, .chart, .tarot { width: 100%; max-width: var(--maxw); }

/* First screenful: the identity hero + curated links, vertically centered. */
.screen {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: clamp(2.2rem, 6vh, 3.6rem);
  padding: max(var(--pad), env(safe-area-inset-top)) 0 4vh;
}
/* Center the block when there's room; fall back to top-aligned (never clip the
   hero) when the content is taller than the viewport. */
.screen > .hero { margin-top: auto; }
.screen > .links { margin-bottom: auto; }

/* ---- Identity hero ---- */
.hero__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 1px rgba(216, 121, 76, 0.7);
}

.hero__name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.7rem, 8vw, 4.7rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  perspective: 900px;      /* subtle depth for the spindle roll */
  white-space: nowrap;
}

/* Rotating-spindle prefix: data → deni → sylvi → data, with "terminals" fixed.
   The window clips one word; the track rolls vertically; the window width
   tweens between prefixes so the suffix re-tucks smoothly. */
.spindle {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1.5em;                           /* tall enough to fully contain the "y" descender */
  width: 4ch;                              /* JS sets a constant slot width = widest prefix */
  vertical-align: -0.42em;                 /* tuned so the word baseline meets "terminals" */
}
.spindle__track {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;                   /* right-align: the suffix junction never moves */
  transform: translateY(0);
  transition: transform 0.62s cubic-bezier(0.42, 0.15, 0.16, 1.02);
  will-change: transform;
}
.spindle__track.is-rolling { filter: blur(0.4px); }   /* faint motion blur */
.spindle__word {
  flex: 0 0 auto;
  height: 1.5em;
  line-height: 1.5em;
  white-space: nowrap;
  text-align: right;
}

/* Tagline: a one-time, scattered multilingual "In my time…" fade-in
   (an homage to blackdenim.carrd.co), laid out horizontally in the tagline band. */
.hero__tagline {
  position: relative;
  margin: 1.05rem 0 0;
  height: clamp(7rem, 16vh, 8.2rem);
  max-width: min(100%, 40rem);
  font-weight: 400;
}
.tl {
  position: absolute;
  white-space: nowrap;
  color: var(--ink-faint);
  opacity: 0;
  /* entrance once, then a lazy perpetual drift that starts after it lands */
  animation: tl-in 1.5s var(--ease) both, tl-float var(--fd, 9s) ease-in-out infinite;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + 1.5s);
  text-shadow: 0 1px 3px rgba(8, 4, 2, 0.6);
  will-change: transform;
}
/* varied drift speeds so the phrases desync into an organic float */
.tl:nth-child(1) { --fd: 9.5s; }
.tl:nth-child(2) { --fd: 11s; }
.tl:nth-child(3) { --fd: 8.5s; }
.tl:nth-child(4) { --fd: 10.5s; }
.tl:nth-child(5) { --fd: 9s; }
.tl:nth-child(6) { --fd: 12s; }
.tl:nth-child(7) { --fd: 8s; }
.tl:nth-child(8) { --fd: 11.5s; }
.tl:nth-child(9) { --fd: 10s; }
@keyframes tl-float {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(1.5px, -2.5px, 0) rotate(0.3deg); }
  50%  { transform: translate3d(-1px, 1.5px, 0) rotate(-0.25deg); }
  75%  { transform: translate3d(-2px, -1px, 0) rotate(0.2deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
.tl-en {
  color: var(--ink-dim);
  text-shadow: 0 1px 3px rgba(8, 4, 2, 0.6), 0 0 8px rgba(233, 210, 181, 0.38), 0 0 18px rgba(216, 121, 76, 0.2);
  animation: tl-in 1.5s var(--ease) both, en-flicker 7s ease-in-out infinite, tl-float var(--fd, 9.5s) ease-in-out infinite;
  animation-delay: 0.2s, 2s, 1.7s;
}
/* ever-so-slight glow flicker on the English anchor */
@keyframes en-flicker {
  0%, 100% { opacity: 0.95; text-shadow: 0 1px 3px rgba(8,4,2,.6), 0 0 8px rgba(233,210,181,.38), 0 0 18px rgba(216,121,76,.2); }
  7%  { opacity: 0.87; text-shadow: 0 1px 3px rgba(8,4,2,.6), 0 0 5px rgba(233,210,181,.26), 0 0 12px rgba(216,121,76,.11); }
  8%  { opacity: 0.95; text-shadow: 0 1px 3px rgba(8,4,2,.6), 0 0 8px rgba(233,210,181,.38), 0 0 18px rgba(216,121,76,.2); }
  40% { opacity: 0.96; text-shadow: 0 1px 3px rgba(8,4,2,.6), 0 0 10px rgba(233,210,181,.44), 0 0 22px rgba(216,121,76,.24); }
  42% { opacity: 0.82; text-shadow: 0 1px 3px rgba(8,4,2,.6), 0 0 4px rgba(233,210,181,.2), 0 0 10px rgba(216,121,76,.09); }
  43% { opacity: 0.94; text-shadow: 0 1px 3px rgba(8,4,2,.6), 0 0 8px rgba(233,210,181,.38), 0 0 18px rgba(216,121,76,.2); }
  71% { opacity: 0.96; text-shadow: 0 1px 3px rgba(8,4,2,.6), 0 0 8px rgba(233,210,181,.38), 0 0 18px rgba(216,121,76,.2); }
  72.5% { opacity: 0.88; text-shadow: 0 1px 3px rgba(8,4,2,.6), 0 0 6px rgba(233,210,181,.3), 0 0 14px rgba(216,121,76,.14); }
  74% { opacity: 0.95; text-shadow: 0 1px 3px rgba(8,4,2,.6), 0 0 8px rgba(233,210,181,.38), 0 0 18px rgba(216,121,76,.2); }
}
@keyframes tl-in {
  from { opacity: 0; transform: translateY(9px) scale(0.98); filter: blur(5px); }
  to   { opacity: var(--o, 1); transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tl { animation: none; opacity: var(--o, 1); transform: none; filter: none; }
}
@media (max-width: 480px) {
  .hero__tagline { height: 7rem; max-width: 23rem; }
  .tl { font-size: 0.9rem !important; }
  .tl-en { font-size: 1.05rem !important; }
}

/* Centered italic sub-tagline in the gap below the multilingual band: one
   random phrase from subtaglines.json, flickering + drifting like .tl-en. */
.hero__subtag {
  margin: 0.15rem 0 0;
  min-height: 1.5em;              /* reserve a line so JS injection doesn't shift layout */
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: var(--ink-dim);
}
.subtag__phrase {
  display: inline-block;
  color: var(--ink-dim);
  text-shadow: 0 1px 3px rgba(8, 4, 2, 0.6), 0 0 8px rgba(233, 210, 181, 0.34), 0 0 18px rgba(216, 121, 76, 0.18);
  /* Prefer a single line; when a phrase can't fit, break into balanced lines of
     near-equal length (centered by .hero__subtag) rather than a long+short pair. */
  text-wrap: balance;
  /* entrance once, then perpetual flicker + drift (mirrors the English anchor) */
  animation: tl-in 1.5s var(--ease) both, en-flicker 7s ease-in-out infinite, tl-float 10s ease-in-out infinite;
  animation-delay: 0.4s, 2.2s, 1.9s;
  will-change: transform;
}
/* Word wrapper: keeps a word unbreakable so the line only wraps at real spaces. */
.subtag__word { display: inline-block; white-space: nowrap; }
/* Per-character host for the occasional glitch. inline-block keeps a stable
   box width so a glitched glyph can overlay without nudging its neighbours. */
.subtag__char { display: inline-block; position: relative; }
/* While glitching, hide the real glyph (and its shadow) but keep its width. */
.subtag__char.is-glitch { color: transparent; text-shadow: none; }
/* The glitch glyph itself: absolutely positioned so the line never reflows. */
.subtag__glitch {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--glyph);   /* astro-symbol coverage */
  font-style: normal;          /* symbols shouldn't inherit the italic slant */
  color: var(--accent-soft);
  text-shadow: 0 0 5px rgba(230, 162, 113, 0.55), 0 0 11px rgba(216, 121, 76, 0.3);
  pointer-events: none;
  animation: subtag-glitch 0.16s steps(2, end) both;
}
@keyframes subtag-glitch {
  0%   { opacity: 0.2;  transform: translateX(-50%) skewX(-8deg); }
  30%  { opacity: 1;    transform: translateX(-53%) translateY(-0.5px) skewX(6deg); }
  60%  { opacity: 0.85; transform: translateX(-47%) translateY(0.5px) skewX(-3deg); }
  100% { opacity: 1;    transform: translateX(-50%) skewX(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .subtag__phrase { animation: none; }
  .subtag__glitch { display: none; }
}

/* ---- Links (editorial index) ---- */
.links__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.35rem;
}

.links__list {
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 1fr;              /* single column on narrow screens */
  column-gap: clamp(1.5rem, 4.5vw, 2.8rem);
}
/* Two columns once there's room; grid equalises each row's height so the
   per-item rules line up across both columns. */
@media (min-width: 34rem) {
  .links__list { grid-template-columns: 1fr 1fr; }
  /* Stack each card and pin the "updated" stamp to the bottom-right, so the
     stamps align across a row regardless of blurb length. */
  .link { flex-direction: column; align-items: stretch; }
  .link__main { flex: 0 0 auto; }
  .link__meta { align-self: flex-end; margin-top: auto; padding-top: 0.7rem; }
}

.link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  padding: 1.05rem 0.2rem 1.0rem;
  border-bottom: 1px solid var(--hair);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s var(--ease), padding-left 0.3s var(--ease), background 0.3s var(--ease);
}
.link:hover,
.link:focus-visible {
  border-bottom-color: var(--hair-strong);
  padding-left: 0.55rem;
  outline: none;
}
.link:focus-visible {
  background: rgba(241, 231, 218, 0.05);
  border-radius: 6px;
}

.link__main { min-width: 0; flex: 1 1 15rem; }

.link__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.16rem, 2.7vw, 1.42rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.link:hover .link__title,
.link:focus-visible .link__title { color: var(--accent-soft); }

.link__arrow {
  font-family: var(--sans);
  font-size: 0.95em;
  color: var(--ink-faint);
  transform: translateX(-2px);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), color 0.25s var(--ease);
}
.link:hover .link__arrow,
.link:focus-visible .link__arrow {
  opacity: 1;
  transform: translateX(2px);
  color: var(--accent);
}

.link__blurb {
  margin: 0.28rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-dim);
  max-width: 46ch;
}

.link__meta {
  flex: 0 0 auto;
  align-self: baseline;
  margin-left: auto;               /* keep it right-aligned, inline or wrapped below */
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.link__meta.is-shown { opacity: 1; }
.link__meta .dot { opacity: 0.5; margin: 0 0.4em; }
.link__meta .star { color: var(--accent-soft); }

/* ---- Footer ---- */
.foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.foot a {
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.foot a:hover,
.foot a:focus-visible {
  color: var(--accent-soft);
  border-bottom-color: var(--hair-strong);
  outline: none;
}
.foot__sep { opacity: 0.4; }

/* ================= Natal chart ================= */
.chart { padding-bottom: 2vh; }
.chart__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 clamp(1.2rem, 4vh, 2.2rem);
}
.chart__sub { color: rgba(148, 121, 106, 0.7); }

.chart__wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 2.8rem);
}
.chart__aside { flex: 0 0 auto; width: clamp(198px, 34%, 244px); }
.chart__wheelbox { position: relative; flex: 1 1 auto; min-width: 0; max-width: 420px; }
.wheel { display: block; width: 100%; height: auto; overflow: visible; }

/* rings + ticks */
.ring-c { fill: none; stroke: var(--hair-strong); stroke-width: 1; }
.ring-hub { stroke: rgba(241, 231, 218, 0.09); }
.ring-spoke { stroke: var(--hair); stroke-width: 1; }
.ring-mini { stroke: var(--hair); stroke-width: 1; }

/* zodiac signs, tinted by element */
.sign { font-family: var(--glyph); font-size: 15px; }
.sign-fire { fill: #e08a5a; }
.sign-earth { fill: #b7a07f; }
.sign-air { fill: #cdb98f; }
.sign-water { fill: #7fb4c0; }

/* houses */
.cusp { stroke: var(--hair); stroke-width: 1; }
.cusp-axis { stroke: rgba(230, 178, 120, 0.55); stroke-width: 1.4; }
.house-num { font-family: var(--sans); font-size: 8px; fill: var(--ink-faint); }
.axis-label { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--ink-dim); }

/* planets */
.deg-tick { stroke: var(--ink-dim); stroke-width: 1.2; }
.p-conn { stroke: var(--hair); stroke-width: 1; }
.p-halo { fill: var(--accent-soft); opacity: 0; transition: opacity 0.2s var(--ease); }
.p-glyph { font-family: var(--glyph); font-size: 16px; fill: var(--ink); filter: url(#glow); transition: fill 0.2s var(--ease); }
.p-retro { font-family: var(--glyph); font-size: 8px; fill: var(--ink-faint); }
.planet { cursor: pointer; }
.planet:focus-visible { outline: none; }

/* aspects — hidden by default, majors faintly drawn */
.asp { fill: none; stroke-width: 1; opacity: 0; transition: opacity 0.25s var(--ease), stroke-width 0.2s var(--ease); }
.asp-major { opacity: 0.26; }
.asp-hard { stroke: var(--hard); }
.asp-soft { stroke: var(--soft); }
.asp-conj { stroke: var(--conj); }

/* focus states */
.wheel.is-focused .asp:not(.is-on) { opacity: 0.05; }
.wheel.is-focused .planet:not(.is-on) { opacity: 0.38; }
.asp.is-on { opacity: 0.95; stroke-width: 1.7; filter: url(#glowSoft); }
.planet.is-on .p-halo { opacity: 0.16; }
.planet.is-on .p-glyph,
.planet:focus-visible .p-glyph { filter: url(#glowSoft); }
.planet:focus-visible .p-halo { opacity: 0.12; }

/* aspect detail — sits in the left column below the placements, so the wheel is never covered */
.chart__detail {
  margin-top: 1.05rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--hair);
  min-height: 9.5rem;
  text-shadow: none;
}
.chart__detail strong { font-family: var(--serif); font-weight: 500; font-size: 1.06rem; color: var(--ink); }
.chart__detail .pl-r { color: var(--accent-soft); }
.cd-hint { margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--ink-faint); }
.cd-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.34rem; }
.cd-legend li { display: flex; align-items: center; gap: 0.55em; font-size: 0.76rem; color: var(--ink-dim); }
.cd-sw { width: 15px; height: 3px; border-radius: 2px; flex: 0 0 auto; background: currentColor; box-shadow: 0 0 5px currentColor; }
.tip-pos { display: block; margin-top: 0.12rem; font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink-dim); }
.tip-asps { list-style: none; margin: 0.6rem 0 0; padding: 0.55rem 0 0; border-top: 1px solid var(--hair); display: grid; gap: 0.26rem; }
.tip-asps li { font-size: 0.78rem; color: var(--ink-dim); display: flex; align-items: baseline; gap: 0.45em; }
.tip-asp { font-family: var(--glyph); width: 1em; text-align: center; flex: 0 0 auto; }
.tip-name { flex: 1 1 auto; }
.tip-hard { color: var(--hard); }
.tip-soft { color: var(--soft); }
.tip-conj { color: var(--conj); }
.tip-orb { margin-left: auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* placements list (the <ul> itself) */
.chart__list { list-style: none; margin: 0; padding: 0; }
.chart__list li {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.26rem 0.45rem;
  border-radius: 7px;
  font-size: 0.85rem;
  cursor: default;
  transition: background 0.2s var(--ease);
}
.chart__list li:hover,
.chart__list li.is-on { background: rgba(241, 231, 218, 0.06); }
.chart__list li:focus-visible { outline: none; background: rgba(241, 231, 218, 0.06); }
.pl-glyph { font-family: var(--glyph); width: 1.3em; text-align: center; color: var(--ink-dim); flex: 0 0 auto; }
.pl-name { color: var(--ink); flex: 1 1 auto; }
.pl-r { color: var(--accent-soft); font-family: var(--glyph); }
.pl-pos { color: var(--ink-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-sg { font-family: var(--glyph); color: var(--ink-faint); }

/* keep every astro glyph monochrome (no emoji tiles) where the browser supports it */
.sign, .p-glyph, .p-retro, .pl-glyph, .pl-sg, .tip-asp, .chart__tip strong { font-variant-emoji: text; }
.pl-house { color: var(--ink-faint); font-size: 0.78em; min-width: 2.7em; text-align: right; flex: 0 0 auto; }
/* angle rows (Ascendant / Midheaven) */
.pl-abbr { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.07em; color: var(--ink-faint); }
.pl-angle .pl-name { color: var(--ink-dim); }
.pl-groupsep { margin-top: 0.35rem; padding-top: 0.55rem; border-top: 1px solid var(--hair); }
/* interactive AC/MC labels on the wheel */
.axis-label[data-body="asc"], .axis-label[data-body="mc"] { cursor: pointer; }
.axis-label { transition: fill 0.2s var(--ease); }
.axis-label.is-on { fill: var(--accent-soft); }
.axis-label:focus-visible { outline: none; }
.wheel.is-focused .axis-label:not(.is-on) { opacity: 0.4; }

@media (max-width: 640px) {
  .chart__wrap { flex-direction: column-reverse; align-items: center; }
  .chart__aside { width: 100%; max-width: 400px; }
}

/* ================= Tarot ================= */
.tarot__deck { display: flex; flex-direction: column; gap: clamp(1.4rem, 4vw, 2.2rem); }
.tarot__featured { display: flex; flex-direction: column; align-items: center; gap: 0.95rem; }
.sig-row { display: flex; align-items: center; justify-content: center; gap: clamp(0.25rem, 1.5vw, 1rem); }
.sig-diagram { width: clamp(128px, 22vw, 190px); height: auto; overflow: visible; flex: 0 1 auto; }
.sig-line { stroke: var(--hair-strong); stroke-width: 0.75; }
.sig-node { fill: var(--accent-soft); }
.sig-tick { fill: var(--ink-faint); }
.sig-label { fill: var(--ink-faint); font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.5px; text-transform: uppercase; }
.sig-val { fill: var(--ink-dim); font-family: var(--mono); font-size: 9px; }
.sig-caption { margin: 0; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.03em; color: var(--ink-faint); text-align: center; text-shadow: none; }
@media (max-width: 640px) { .sig-diagram { display: none; } }
.tarot__group-label { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.85rem; text-align: center; }
.tarot__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.55rem, 1.6vw, 0.85rem); }

.tcard {
  --w: 104px; --suit: var(--accent-soft);
  width: var(--w); height: calc(var(--w) * 1.6);
  padding: 0; border: 0; background: none; font: inherit;
  perspective: 900px; cursor: pointer; text-shadow: none; flex: 0 0 auto;
}
.tcard--featured { --w: 156px; }
.tarot__grid .tcard { --w: 89px; }
.tcard[data-suit="wands"] { --suit: var(--hard); }
.tcard[data-suit="cups"] { --suit: var(--soft); }
.tcard[data-suit="swords"] { --suit: #b9c6cf; }
.tcard[data-suit="pentacles"] { --suit: var(--conj); }

.tcard__inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s var(--ease); }
.tcard:hover .tcard__inner, .tcard:focus-visible .tcard__inner { transform: translateY(-4px); }
.tcard.is-flipped .tcard__inner { transform: rotateY(180deg); }
.tcard:focus-visible { outline: none; }

.tcard__face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: 0.6rem 0.5rem; text-align: center; overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(216, 121, 76, 0.28);
  background: linear-gradient(165deg, rgba(44, 21, 14, 0.9), rgba(18, 10, 6, 0.94));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.38), inset 0 0 20px rgba(216, 121, 76, 0.05);
}
.tcard--featured .tcard__face {
  padding: 0.75rem 0.6rem;
  border-color: rgba(230, 178, 120, 0.5);
  box-shadow: 0 0 22px rgba(216, 121, 76, 0.18), 0 8px 26px rgba(0, 0, 0, 0.45), inset 0 0 26px rgba(216, 121, 76, 0.09);
}

.tcard__kicker { position: absolute; top: 0.5rem; left: 0; right: 0; font-size: 0.54rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.tcard__num { font-family: var(--serif); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--suit); }
.tcard--featured .tcard__num { margin-top: 0.5rem; font-size: 0.82rem; }
.tcard__emblem { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; }
.tcard__glyph { font-family: var(--glyph); font-size: 1.8rem; color: var(--ink); text-shadow: 0 0 7px rgba(216, 121, 76, 0.4); }
.tcard__abbr { font-family: var(--sans); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--ink); }
.tcard--featured .tcard__glyph { font-size: 2.4rem; }
.tcard__name { font-family: var(--serif); font-size: 0.72rem; line-height: 1.12; color: var(--ink); }
.tcard--featured .tcard__name { font-size: 0.98rem; }
.tcard__tag { margin-top: 0.24rem; font-size: 0.52rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.tcard--featured .tcard__tag { font-size: 0.56rem; }

/* suit emblems (colour-coded by element) */
.suit { width: 46%; height: auto; overflow: visible; color: var(--suit); }
.suit .sk { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.suit .sf { fill: currentColor; }

/* featured wands */
.wands { width: 58%; height: auto; overflow: visible; }
.wand { stroke: var(--accent-soft); stroke-width: 2.4; stroke-linecap: round; opacity: 0.6; }
.wand--lead { stroke: var(--ink); opacity: 1; stroke-width: 3; }

.tcard__back { transform: rotateY(180deg); justify-content: center; gap: 0.35rem; padding: 0.55rem 0.45rem; }
.tcard__kw { font-size: 0.55rem; letter-spacing: 0.02em; color: var(--suit); line-height: 1.3; }
.tcard__meaning { margin: 0; font-size: 0.6rem; line-height: 1.36; color: var(--ink-dim); }
.tcard--featured .tcard__back { padding: 0.7rem 0.6rem; }
.tcard--featured .tcard__kw { font-size: 0.64rem; }
.tcard--featured .tcard__meaning { font-size: 0.73rem; line-height: 1.42; }

@media (prefers-reduced-motion: reduce) { .tcard__inner { transition: none; } }
@media (max-width: 480px) {
  .tarot__grid { justify-content: center; }
  .tcard--featured { --w: 138px; }
  .tarot__grid .tcard { --w: 84px; }
}

/* ---- Entrance motion ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.9s var(--ease) forwards;
}
.reveal:nth-child(1) { animation-delay: 0.05s; }
.reveal:nth-child(2) { animation-delay: 0.16s; }
.reveal:nth-child(3) { animation-delay: 0.27s; }
.links .link { opacity: 0; transform: translateY(10px); animation: rise 0.7s var(--ease) forwards; }
.links .link:nth-child(1) { animation-delay: 0.30s; }
.links .link:nth-child(2) { animation-delay: 0.38s; }
.links .link:nth-child(3) { animation-delay: 0.46s; }
.links .link:nth-child(4) { animation-delay: 0.54s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* ---- Reduced motion: kill the video + all entrance motion ---- */
@media (prefers-reduced-motion: reduce) {
  .bg__video { display: none; }
  .bg__video, .reveal, .links .link, .link__arrow, * {
    animation: none !important;
    transition: none !important;
  }
  .reveal, .links .link { opacity: 1; transform: none; }
  .link__meta { opacity: 1; }
}

/* ---- Small screens ---- */
@media (max-width: 480px) {
  main { justify-content: flex-end; padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom)); gap: 2rem; }
  .link__meta { flex-basis: 100%; }
}