/* Acharya Life — live surface, maximalist.
   Theme tokens first, then the instrument's own classes.
   Nothing here restyles .sc-stage, .sc-copy or any [data-sc-*] selector. */

@import url("assets/fonts/playfair.css");

:root {
  /* Deep indigo night, bone ink, brand gold as the single accent.
     Moves off the live site's warm brown on purpose: astronomical, not artisan. */
  --sc-canvas:     #070A14;
  --sc-surface:    #0D1322;
  --sc-ink:        #F2ECDE;
  --sc-ink-soft:   #C6BCA9;
  --sc-accent:     #D9B441;
  --sc-accent-ink: #0A0D16;

  --sc-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sc-font-text:    ui-sans-serif, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
  --sc-font-mono:    ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  /* instrument-only roles, derived from the six above */
  --ins-line:   color-mix(in oklab, var(--sc-accent) 26%, transparent);
  --ins-line-2: color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --ins-panel:  color-mix(in oklab, var(--sc-surface) 88%, #000);
  --ins-glow:   color-mix(in oklab, var(--sc-accent) 30%, transparent);
}

/* ============================================================ instrument == */
/* Type in the surface's own idiom: labels, readouts, status lines.
   No display-scale hero claim anywhere on this page. */

.ins-label {
  font-family: var(--sc-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sc-accent);
  margin: 0;
}
.ins-label--soft { color: var(--sc-ink-soft); }

.ins-read {
  font-family: var(--sc-font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--sc-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ins-read b { color: var(--sc-accent); font-weight: 600; }
.ins-read--soft { color: var(--sc-ink-soft); }

.ins-name {
  font-family: var(--sc-font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.ins-name i { font-style: italic; color: var(--sc-accent); }

.ins-prose {
  font-size: var(--sc-t-sm);
  line-height: 1.75;
  color: var(--sc-ink-soft);
  max-width: 42ch;
  margin: 0;
  text-wrap: pretty;
}

/* ================================================================ chrome == */
/* App chrome, not a marketing bar: a status rail that reports live state. */

.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: var(--sc-5);
  padding: 0 var(--sc-4);
  height: 46px;
  background: color-mix(in oklab, var(--sc-canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ins-line);
  font-family: var(--sc-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.chrome__mark {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--sc-ink); letter-spacing: 0.2em;
}
.chrome__mark img { width: 18px; height: 18px; }
.chrome__sep { flex: 1 1 auto; height: 1px; background: var(--ins-line-2); }
.chrome__sys { display: flex; gap: 1px; }
.chrome__sys span {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--ins-line-2);
  color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent);
  transition: color .35s, border-color .35s, background-color .35s;
}
.chrome__sys span.on {
  color: var(--sc-accent-ink); background: var(--sc-accent);
  border-color: var(--sc-accent);
}
.chrome__val { color: var(--sc-ink); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .chrome { gap: var(--sc-3); font-size: 0.6rem; }
  .chrome__hide { display: none; }
}

/* Margin rail: degree ticks down the left edge. Marginalia, maximalist. */
.rail {
  position: fixed; left: 0; top: 46px; bottom: 0; width: 54px; z-index: 40;
  border-right: 1px solid var(--ins-line-2);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--sc-5) 0;
  pointer-events: none;
  font-family: var(--sc-font-mono);
  font-size: 0.56rem; letter-spacing: 0.14em;
  color: color-mix(in oklab, var(--sc-ink-soft) 60%, transparent);
}
.rail i { display: block; font-style: normal; text-align: center; }
.rail__now {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--sc-accent);
  box-shadow: 0 0 8px var(--ins-glow);
  top: calc((100% - 2px) * var(--sc-page, 0));
}
@media (max-width: 1100px) { .rail { display: none; } }

/* ================================================================= stage == */

.stage {
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  padding: 46px var(--sc-gutter) var(--sc-6);
}
.stage__sky {
  position: absolute; inset: 0;
  overflow: hidden;
}
.stage__sky video, .stage__sky img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.34;
  /* mask the sky away from the readout columns rather than scrimming over it */
  mask-image: radial-gradient(ellipse 42% 64% at 50% 46%, #000 34%, transparent 72%);
}
.stage__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--ins-line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ins-line-2) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 82%);
}

/* the three-column instrument face */
.face {
  position: relative;
  width: 100%; max-width: 78rem;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 15rem);
  gap: var(--sc-6);
  align-items: center;
}
.face__side { display: flex; flex-direction: column; gap: var(--sc-4); }
.face__side > * + * { margin-top: 0; }
.face__side--r { text-align: right; }
.face__side--r .ins-label, .face__side--r .ins-read { text-align: right; }

/* Once the columns stack, the copy runs full width and crosses the sky, so the
   photograph retreats to the band the rings occupy and gives the type its
   ground back. Same reasoning as the corner-scrim-becomes-a-band rule. */
@media (max-width: 1000px) {
  .stage__sky video, .stage__sky img {
    opacity: 0.22;
    mask-image: radial-gradient(ellipse 66% 26% at 50% 50%, #000 30%, transparent 74%);
  }
  .face { grid-template-columns: 1fr; gap: var(--sc-4); justify-items: center; }
  .face__side { max-width: 32rem; width: 100%; }
  .face__side--r { text-align: left; }
  .face__side--r .ins-label, .face__side--r .ins-read { text-align: left; }
  .face__side--hide { display: none; }
}

/* ================================================== the rings (signature) == */

.wheel { width: min(58vh, 100%); aspect-ratio: 1; position: relative; margin-inline: auto; }
/* Density under the rings only, not across the frame. The sky is brightest at
   centre, which is exactly where the glyphs sit, so the disc buys the contrast
   back without touching the rest of the photograph. */
.wheel::before {
  content: ""; position: absolute; inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 88%, transparent) 58%,
    transparent 76%);
  pointer-events: none;
}
.wheel svg, .wheel__hub { position: relative; }
.wheel svg { width: 100%; height: 100%; overflow: visible; display: block; }
/* rotate() carries its own explicit centre; do NOT set transform-origin here.
   The SVG transform attribute maps to the CSS transform property, so an origin
   shift would be applied on top of the centre already in the rotate(). */
.wheel__ring { transition: transform 0s; }
.wheel__ring.snap { transition: transform 1.05s cubic-bezier(.16,1,.3,1); }
.wheel text { font-family: var(--sc-font-mono); fill: var(--sc-ink-soft); }
.wheel .g-west  { font-family: var(--sc-font-display); fill: var(--sc-ink); }
.wheel .g-ved   { fill: var(--sc-ink); font-size: 7px; }
.wheel .g-chi   { fill: var(--sc-ink); font-size: 8px; }
.wheel .lit     { fill: var(--sc-accent-ink); }
.wheel .arc     { fill: none; stroke: var(--ins-line); stroke-width: 0.6; }
.wheel .arc-2   { fill: none; stroke: var(--ins-line-2); stroke-width: 0.5; }
.wheel .tick    { stroke: var(--ins-line-2); stroke-width: 0.4; }
.wheel .tick-5  { stroke: var(--ins-line); stroke-width: 0.6; }
.wheel .seat    { fill: color-mix(in oklab, var(--sc-accent) 0%, transparent); transition: fill .5s; }
.wheel .seat.on { fill: var(--sc-accent); }
.wheel .marker  { stroke: var(--sc-accent); stroke-width: 1.1; }
.wheel .plumb   { stroke: var(--sc-accent); stroke-width: 0.7; stroke-dasharray: 2 2; opacity: .8; }
.wheel__hub {
  position: absolute; inset: 34% 34%;
  display: grid; place-items: center; text-align: center;
  pointer-events: none;
}
.wheel__hub .d {
  font-family: var(--sc-font-display);
  font-size: clamp(1.1rem, 0.7rem + 1.4vw, 1.9rem);
  color: var(--sc-ink); line-height: 1.05;
}
.wheel__hub .s {
  font-family: var(--sc-font-mono); font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-accent);
  margin-top: 0.35rem;
}

/* ================================================================ panels == */

.panels {
  display: grid; gap: var(--sc-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .panels { grid-template-columns: 1fr; } }

.panel {
  border: 1px solid var(--ins-line-2);
  background: var(--ins-panel);
  padding: var(--sc-5);
  display: flex; flex-direction: column; gap: var(--sc-3);
  position: relative;
}
.panel::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px; background: var(--sc-accent); opacity: .5;
}
.panel__art {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1px solid var(--ins-line);
  object-fit: cover; background: var(--sc-canvas);
}
.panel dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; }
.panel dt {
  font-family: var(--sc-font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sc-ink-soft); white-space: nowrap;
}
.panel dd {
  margin: 0; font-family: var(--sc-font-mono); font-size: 0.75rem;
  color: var(--sc-ink); font-variant-numeric: tabular-nums;
}
.panel dd.warn { color: var(--sc-accent); }

/* ============================================================== the gap === */

.gap-fig { display: grid; place-items: center; gap: var(--sc-5); width: 100%; }
.gap-num {
  font-family: var(--sc-font-display);
  font-size: clamp(3rem, 1.5rem + 6vw, 7rem);
  line-height: 0.9; color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
}
.gap-num sup { font-size: 0.32em; vertical-align: super; }

/* ============================================================= reference == */

.ref { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-6); }
@media (max-width: 900px) { .ref { grid-template-columns: 1fr; gap: var(--sc-5); } }
.ref section { border-top: 1px solid var(--ins-line); padding-top: var(--sc-4); }
.ref h3 {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  margin: 0 0 var(--sc-2); color: var(--sc-ink); font-weight: 700;
}

/* ================================================================= input == */
/* Live surface closes on an actual input, not a magnetic button. */

.console {
  border: 1px solid var(--ins-line);
  background: var(--ins-panel);
  padding: var(--sc-4);
  display: grid; gap: var(--sc-3);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--sc-accent) 10%, transparent),
              0 24px 60px -20px #000;
}
.console__row { display: flex; flex-wrap: wrap; gap: var(--sc-3); align-items: flex-end; }
.console__field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 11rem; }
.console input {
  min-height: 46px;
  background: color-mix(in oklab, var(--sc-canvas) 70%, transparent);
  border: 1px solid var(--ins-line-2);
  border-bottom-color: var(--sc-accent);
  color: var(--sc-ink);
  font-family: var(--sc-font-mono); font-size: 0.9rem;
  padding: 0 0.7rem;
  border-radius: 0;
}
.console input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.console input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; }
.console button {
  min-height: 46px; padding: 0 1.4rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  border: 1px solid var(--sc-accent);
  font-family: var(--sc-font-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  cursor: pointer; border-radius: 0;
  transition: background-color .2s, transform .12s;
}
.console button:hover { background: color-mix(in oklab, var(--sc-accent) 80%, #fff); }
.console button:active { transform: translateY(1px); }
.console button:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 2px; }
.console__note {
  font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
  color: var(--sc-ink-soft); margin: 0;
}
.console__err { color: #FF9B85; }

.verdict {
  border-top: 1px solid var(--ins-line);
  margin-top: var(--sc-3); padding-top: var(--sc-3);
  font-family: var(--sc-font-mono); font-size: 0.76rem; line-height: 1.7;
  color: var(--sc-ink-soft);
}
.verdict b { color: var(--sc-accent); font-weight: 600; }
.verdict .agree-hit { color: var(--sc-ink); }

.foot {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sc-3) var(--sc-gutter);
  border-top: 1px solid var(--ins-line-2);
  display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5);
  font-family: var(--sc-font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--sc-ink-soft) 85%, transparent);
}
.foot a { color: inherit; text-underline-offset: 3px; }
.foot a:hover { color: var(--sc-ink); }

/* ============================================================== sections == */

/* A flow section between two pinned acts must fill its own screen, or its
   block padding reads as an empty frame on the way past. Centring the content
   in a full viewport removes the gap without lengthening the page. */
.doc {
  padding-left: 54px;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center;
}
@media (max-width: 1100px) { .doc { padding-left: 0; } }
@media (max-width: 900px) { .doc { min-height: 0; padding-block: var(--sc-9); } }

.head-row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sc-3) var(--sc-5);
  border-bottom: 1px solid var(--ins-line);
  padding-bottom: var(--sc-3);
  margin-bottom: var(--sc-6);
}

@media (prefers-reduced-motion: reduce) {
  .wheel__ring, .wheel__ring.snap { transition: none !important; }
}