/* THE OPEN — pages.css
   Page compositions. Desktop-first 12-col; tablet/mobile in responsive.css.
   Each block maps to a future WordPress template (front-page.php, page-today.php, …). */

/* Immersive states hide global chrome (journal, letters writing, silence). */
.is-immersive .site-header,
.is-immersive .mobile-bar {
  display: none;
}

.tone-light,
.tone-dark {
  color: var(--fg);
}

/* SVG strokes stay crisp at any size */
.sym *,
.decision__sym *,
.dialog__sym *,
.result-sym * {
  vector-effect: non-scaling-stroke;
}

.nav-primary .sym {
  width: 10px;
  height: 10px;
}

/* =========================================================
   HOME
   ========================================================= */
.hero {
  /* width of the VOID text column beside the photograph */
  --hero-col: calc(44vw - max(0px, (100vw - var(--max)) / 2) - var(--margin) - var(--s-10));
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--bone);
  background: var(--void);
}

/* HERO — THE EMPTY CHAIR. The chair sits low on the left of the photograph, so the
   question keeps its own VOID column and the photograph holds the right of the screen:
   headline and chair never compete. */
.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 44%;
  --focus-x: 4%;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 11, 10, 0.62) 0%, rgba(11, 11, 10, 0) 20%, rgba(11, 11, 10, 0) 78%, rgba(11, 11, 10, 0.55) 100%),
    linear-gradient(90deg, rgba(11, 11, 10, 0.3) 0%, rgba(11, 11, 10, 0) 10%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-h);
  padding-bottom: var(--s-10);
}

.hero__content {
  align-self: center;
  padding-block: var(--s-4);
  /* stay inside the VOID column, also when the page is wider than --max */
  width: min(100%, var(--hero-col));
}

/* THE MARK leads the hero. On the homepage the header brand IS the hero mark:
   large while the hero is in view, compact once you scroll. One mark, never two,
   and the header always reads [THE MARK] THE OPEN. */
.page-home .site-header { transition-property: transform, background-color, border-color, height; }
.page-home .site-header:not(.is-scrolled) { height: 128px; }
.page-home .site-header .brand .mark { transition: width var(--dur-menu) var(--ease-quiet); }
.page-home .site-header:not(.is-scrolled) .brand .mark { --mark-w: 96px; }
.page-home .hero__inner { padding-top: 128px; }

.hero__title {
  margin-top: var(--s-4);
  /* "ĐANG GIỮ" is ~5em wide: the headline always keeps its three lines in the column */
  font-size: min(var(--fs-mega), 13vh, calc(var(--hero-col) / 5.3));
}

.hero__lede {
  margin-top: var(--s-6);
  color: var(--fg-2);
}

.hero__cta-wrap {
  margin-top: var(--s-10);
}

.hero__cta {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--track-meta);
  min-height: var(--touch);
}

.hero__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  min-width: var(--touch);
  color: var(--fg-2);
}

.hero__scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, currentColor, transparent);
}

.journey {
  position: relative;
  overflow: hidden;
}

.grid > .label { align-self: start; }

.j-song__text { align-content: start; }

/* 01 GIỮ — dense, dark, compressed */
.j-giu {
  background: var(--void);
  padding-block: var(--s-16) var(--s-20);
}

.j-giu__grid {
  row-gap: 0;
}

.j-giu__label { grid-column: 1 / -1; }

.j-giu__word {
  grid-column: 1 / span 8;
  margin-top: 0.12em;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(7rem, 3rem + 15vw, 21rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: var(--fg);
}

.j-giu__media {
  grid-column: 9 / span 4;
  grid-row: 2 / span 3;
  align-self: start;
  aspect-ratio: 3 / 4.4;
  --focus-x: 18%;     /* the slit of light and the handle */
}

.j-giu__dense {
  grid-column: 1 / span 8;
  font-family: var(--font-display);
  font-weight: 300;
}

.j-giu__intro {
  font-size: var(--fs-h3);
  color: var(--fg-2);
  margin-bottom: var(--s-2);
}

.j-giu__list {
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--fg-3);
}

.j-giu__turn {
  margin-top: var(--s-2) !important;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--fg);
}

.j-giu__foot {
  grid-column: 1 / span 8;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

/* 02 NHÌN — still, clear. The prime line is the first thing you see. */
.j-nhin {
  background: var(--void-2);
  padding-block: var(--s-24) var(--s-32);
}

.j-nhin__label { grid-column: 1 / -1; }

.j-nhin__prime {
  grid-column: 1 / -1;
  margin: var(--s-10) 0 var(--s-20);
  font-size: clamp(2rem, 1.1rem + 3.2vw, 4.25rem);
  font-weight: 300;
}

.j-nhin__media {
  grid-column: 1 / span 7;
  aspect-ratio: 3 / 2;
  --focus-x: 20%;     /* the person and the reflection, together */
}

.j-nhin__text {
  grid-column: 9 / span 4;
  align-self: center;
  align-content: start;
  display: grid;
  gap: var(--s-8);
  justify-items: start;
}

.j-nhin__q {
  font-weight: 300;
  color: var(--fg-2);
}

.j-nhin__lines {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.j-nhin__lines li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  padding-block: var(--s-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 350;
}

.j-nhin__lines li:last-child { border-bottom: 1px solid var(--line); }

/* 03 BUÔNG — space begins opening */
.j-buong {
  background: var(--void);
  padding-block: var(--s-40) var(--s-40);
}

.j-buong__label { grid-column: 1 / -1; }

.j-buong__def {
  grid-column: 1 / span 10;
  margin-top: var(--s-24);
}

.j-buong__line {
  display: block;
  grid-column: 1 / span 4;
  height: 1px;
  margin-top: var(--s-16);
  background: var(--signal);
}

.j-buong__note {
  grid-column: 1 / span 5;
  align-self: start;
  align-content: start;
  margin-top: var(--s-10);
  display: grid;
  gap: var(--s-8);
  justify-items: start;
}

.j-buong__media {
  grid-column: 7 / span 6;
  align-self: start;
  margin-top: var(--s-10);
  aspect-ratio: 4 / 3;
  --focus-x: 58%;     /* the open hand and the falling leaves */
}

/* 04 CÒN — what remains. The question keeps a wide field of emptiness; the empty
   room rises underneath as an architectural plane — never a picture in a box — and
   dissolves into the light of SỐNG. Space is content. */
.j-con {
  display: flex;
  flex-direction: column;
  min-height: 190vh;
  background: var(--void);
}

.j-con__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s-8);
  padding-top: 38vh;
  padding-bottom: 22vh;
}

.j-con__q {
  font-weight: 300;
}

.j-con__plane {
  flex: 1 0 auto;
  min-height: 100vh;
  margin-top: -10vh;
  background: transparent;
  --focus-x: 40%;
}

.j-con__plane img { opacity: 0.9; }

.j-con__plane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--void) 0%, rgba(11, 11, 10, 0.55) 20%, rgba(11, 11, 10, 0) 46%, rgba(237, 231, 224, 0) 76%, var(--bone) 100%);
}

/* 05 SỐNG — light, human, LIFE */
.j-song {
  background: var(--bg);
  padding-block: var(--s-16) var(--s-24);
}

.j-song__label { grid-column: 1 / -1; }

.j-song__life {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: var(--s-2);
  border-radius: 50%;
  background: var(--life);
}

.j-song__lede {
  grid-column: 1 / span 7;
  margin-top: var(--s-10);
  color: var(--fg-2);
}

.j-song__rule {
  display: block;
  grid-column: 1 / span 1;
  width: 48px;
  height: 2px;
  margin-top: var(--s-10);
  background: var(--life);
}

.j-song__title {
  grid-column: 1 / span 9;
  margin-top: var(--s-6);
}

.j-song__media {
  grid-column: 1 / -1;
  margin-top: var(--s-16);
  aspect-ratio: 21 / 9;
  --focus-y: 62%;
}

.j-song__text {
  grid-column: 7 / span 5;
  margin-top: var(--s-12);
  display: grid;
  gap: var(--s-6);
  justify-items: start;
}

/* FINAL — THE MARK / THE OPEN / BUÔNG ĐỂ CÒN. */
.home-final {
  background: var(--bg);
  padding-block: var(--s-32);
  border-top: 1px solid var(--line);
}

.home-final__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--s-10);
}

.home-final__lockup { --lockup-w: clamp(150px, 6vw + 96px, 220px); }

.home-final__lines { color: var(--fg-2); }

.home-final__today {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-top: calc(-1 * var(--s-4));
}

/* The FINAL already carries the lockup; the footer below keeps only its links. */
.page-home .site-footer__lockup { display: none; }

/* =========================================================
   THE OPENING
   ========================================================= */
.opening {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: var(--header-h);
}

.opening__media {
  position: fixed;
  inset: 0;
  opacity: 0.22;
  --focus-x: 72%;
}

.opening__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--void) 20%, rgba(11, 11, 10, 0.4));
}

.opening__steps {
  position: relative;
  list-style: none;
  margin: 0;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-16) var(--margin);
  padding-left: max(var(--margin), 9vw);
  display: grid;
  gap: var(--s-24);
}

.opening.is-enhanced .opening__steps {
  gap: 0;
  align-items: center;
}

.opening.is-enhanced .opening__step {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms var(--ease-quiet), visibility 0s linear 450ms;
}

.opening.is-enhanced .opening__step.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 450ms var(--ease-quiet), visibility 0s;
}

.opening__step:focus { outline: none; }

.opening__n {
  margin-bottom: var(--s-6);
}

.opening__line {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: 1.2;
}

.opening__form {
  max-width: 760px;
  display: grid;
  gap: var(--s-6);
}

.opening__ask {
  display: block;
  margin-bottom: var(--s-2);
}

.opening__answer {
  min-height: 8.5em;
}

.opening__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}

.opening__controls {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-8) var(--margin) var(--s-12);
  padding-left: max(var(--margin), 9vw);
}

.opening:not(.is-enhanced) .opening__controls { display: none; }

/* =========================================================
   TODAY — no dashboard, one question
   ========================================================= */
.today {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.today__media {
  position: absolute;
  inset: 0 0 0 38%;
  opacity: 0.55;
  --focus-x: 70%;
}

.today__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--void) 0%, rgba(11, 11, 10, 0.35) 45%, rgba(11, 11, 10, 0.2) 100%);
}

.today__inner {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--s-8));
  padding-bottom: var(--s-12);
}

.today__question {
  align-self: center;
  padding-block: var(--s-8);
}

.today__q {
  font-size: min(var(--fs-display), 10.5vh);
}

.today__num {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  margin-bottom: var(--s-6);
}

.today__note {
  margin-top: var(--s-6);
  font-size: var(--fs-lead);
  font-style: italic;
}

/* =========================================================
   PATH
   ========================================================= */
.path {
  padding-top: calc(var(--header-h) + var(--s-16));
}

.path__label { grid-column: 1 / -1; }

.path__title {
  grid-column: 1 / span 9;
  margin-top: var(--s-6);
}

.path__intro {
  grid-column: 1 / span 6;
  margin-top: var(--s-8);
}

.stages {
  display: flex;
  gap: 2px;
  height: 78vh;
  min-height: 520px;
  max-height: 880px;
  margin: var(--s-16) 0 0;
  padding: 0;
  list-style: none;
  background: var(--void);
}

.stage {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 500ms var(--ease-quiet);
}

.stage:hover,
.stage:focus-within {
  flex-grow: 2.1;
}

.stage__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  color: var(--bone);
}

.stage__link:focus-visible { outline-offset: -4px; }

.stage__media {
  position: absolute;
  inset: 0;
}

.stage__media img {
  transition: transform 700ms var(--ease-quiet), opacity var(--dur-hover) var(--ease-quiet);
  opacity: 0.82;
}

.stage:hover .stage__media img,
.stage:focus-within .stage__media img {
  transform: scale(1.03);
  opacity: 1;
}

.stage--giu .stage__media { --focus-x: 66%; }
.stage--nhin .stage__media { --focus-x: 50%; }
.stage--buong .stage__media { --focus-x: 64%; }
.stage--con .stage__media { --focus-x: 68%; }
.stage--song .stage__media { --focus-x: 40%; --focus-y: 60%; }

.stage__body {
  position: absolute;
  inset: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.stage__num { color: rgba(237, 231, 224, 0.75); }

.stage__name {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 0.9rem + 2.5vw, 3.5rem);
  line-height: 1.1;
}

.stage__q {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: rgba(237, 231, 224, 0.8);
  max-width: 24ch;
}

.stage__go {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-hover) var(--ease-quiet), transform var(--dur-hover) var(--ease-quiet);
}

.stage:hover .stage__go,
.stage:focus-within .stage__go {
  opacity: 1;
  transform: none;
}

.path__cycle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-8);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  color: var(--fg-2);
}

.path__cycle-mark {
  font-family: var(--font-sans);
  color: var(--fg);
}

.method {
  margin-top: var(--s-32);
}

.method__head {
  grid-column: 1 / span 4;
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.method__list {
  grid-column: 6 / span 7;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.method__list li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  align-items: baseline;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
}

.method__q {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 350;
}

.books {
  margin-top: var(--s-32);
  padding-bottom: var(--s-24);
}

.books__head {
  display: grid;
  gap: var(--s-4);
  max-width: 44rem;
}

.books__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
}

.book__title a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-2);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.book__title .t-meta { grid-column: 1 / -1; }

.book__name {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.1;
}

.book__chapters {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.book__chapters li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  padding-block: 5px;
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.book__chapters li span {
  font-size: var(--fs-meta);
  letter-spacing: 0.08em;
  padding-top: 0.2em;
}

.book__chapters li.is-open { color: var(--fg); }

.book__chapters a {
  display: contents;
}

.book__chapters a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

.book__empty {
  margin-top: var(--s-6);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  color: var(--fg-2);
  line-height: 1.4;
}

/* =========================================================
   READING — GIỮ / NHÌN / BUÔNG / CÒN / SỐNG
   ========================================================= */
.reading__open {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--void);
}

.reading__media {
  position: absolute;
  inset: 0;
}

.reading__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 10, 0.35) 0%, rgba(11, 11, 10, 0) 30%, rgba(11, 11, 10, 0.25) 55%, rgba(11, 11, 10, 0.9) 100%);
}

.stage-giu .reading__media { --focus-x: 66%; }
.stage-buong .reading__media { --focus-x: 64%; }
.stage-con .reading__media::after { background: linear-gradient(180deg, rgba(11, 11, 10, 0.2) 0%, rgba(11, 11, 10, 0) 36%, rgba(11, 11, 10, 0.78) 72%, rgba(11, 11, 10, 0.92) 100%); }

.reading__open-inner {
  position: relative;
  padding-top: var(--header-h);
  padding-bottom: var(--s-16);
}

.reading__title { margin-top: var(--s-6); }

.reading__sub {
  margin-top: var(--s-4);
  max-width: 34ch;
  color: var(--fg-2);
}

.reading__meta { margin-top: var(--s-8); }

.reading__body {
  padding-block: var(--s-24);
  --unit-h: 62vh;
}

.unit {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-content: center;
  min-height: var(--unit-h);
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-12) var(--margin);
}

.unit__n {
  grid-column: 2 / span 1;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  color: var(--fg-3);
  padding-top: 0.75em;
}

.unit__text {
  grid-column: 4 / span 6;
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.55;
  font-weight: 350;
}

.unit__statement {
  grid-column: 2 / span 9;
  font-weight: 300;
}

.unit__kicker {
  grid-column: 2 / span 9;
  margin-bottom: var(--s-6);
}

.unit__red {
  display: block;
  grid-column: 2 / span 3;
  height: 1px;
  margin-top: var(--s-10);
  background: var(--signal);
}

.unit--ask .t-meta,
.unit--ask .unit__ask {
  grid-column: 2 / span 10;
}

.unit--ask .unit__ask { margin-top: var(--s-6); }

.three {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.three li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-h3);
}

.three__cap { margin-top: var(--s-6); font-family: var(--font-sans); }

.unit__life {
  grid-column: 2 / span 1;
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: var(--s-8);
  background: var(--life);
}

.unit--life .unit__statement { grid-column: 2 / span 10; }

/* Stage density: the path opens as you move through it */
.stage-giu .reading__body { --unit-h: 46vh; padding-block: var(--s-16); }
.stage-giu .unit__text { line-height: 1.42; max-width: 30ch; }
.stage-nhin .reading__body { --unit-h: 58vh; }
.stage-buong .reading__body { --unit-h: 76vh; }
.stage-buong .unit__text { line-height: 1.66; }
.stage-con .reading__body { --unit-h: 96vh; }
.stage-con .unit__text { grid-column: 5 / span 4; font-size: calc(var(--fs-lead) * 0.92); }
.stage-song .reading__body { --unit-h: 60vh; }

.reading__end {
  padding-block: var(--s-16) var(--s-32);
}

.reading__end-label { margin-bottom: var(--s-4); }

.actions--4 { --n: 4; }

/* =========================================================
   WRITE — Journal & Letters editor
   ========================================================= */
.write,
.letters__write {
  min-height: 100vh;
  min-height: 100svh;
}

/* The sticky writing bar must never cover the line being written. */
html:has(.write__bar) { scroll-padding-top: 96px; }

.write__bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.write__bar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-8);
  min-height: 72px;
}

.write__brand .mark { --mark-w: 36px; }

.write__private {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
}

.write__right {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.write__page {
  max-width: 880px;
  padding-top: var(--s-20);
  padding-bottom: var(--s-24);
  display: grid;
  gap: var(--s-8);
  transition: opacity 600ms var(--ease-quiet);
}

.write__prompt {
  display: grid;
  gap: var(--s-2);
  padding-left: var(--s-5);
  border-left: 1px solid var(--line-strong);
}

.write__prompt-text {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: 1.4;
  color: var(--fg-2);
}

.write__title {
  font-size: var(--fs-h2);
  font-weight: 300;
  border-bottom-color: transparent;
}

.write__title:focus { border-bottom-color: var(--line-strong); }

.write__body {
  font-size: clamp(1.25rem, 1.08rem + 0.55vw, 1.5rem);
  line-height: 1.7;
}

.write__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.write__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
}

.write__release { color: var(--fg-3); }
.write__release:hover { color: var(--signal-on-dark); }
.write__release .sym { width: 0.8em; height: 0.8em; }

.is-released .write__page { opacity: 0.12; }

/* =========================================================
   LETTERS
   ========================================================= */
.letters__choose {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-24);
  overflow: hidden;
}

.letters__media {
  position: absolute;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  opacity: 0.6;
  --focus-x: 55%;
}

.letters__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--void) 0%, rgba(11, 11, 10, 0.2) 55%, rgba(11, 11, 10, 0.4) 100%);
}

.letters__choose-inner { position: relative; }

.letters__title {
  margin-top: var(--s-6);
}

.letters__lede {
  margin-top: var(--s-6);
  max-width: 34ch;
}

.recipients {
  margin: var(--s-16) 0 0;
  padding: 0;
  border: 0;
  max-width: 820px;
}

.recipients legend {
  padding: 0;
  margin-bottom: var(--s-4);
}

.recipient {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  column-gap: var(--s-4);
  width: 100%;
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
  text-align: left;
  transition: background-color var(--dur-hover) var(--ease-quiet), padding var(--dur-hover) var(--ease-quiet);
}

.recipient:last-of-type { border-bottom: 1px solid var(--line); }
.recipient:hover { padding-left: var(--s-3); }

.recipient__n { grid-row: 1 / span 2; padding-top: 0.9em; }

.recipient__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.15;
}

.recipient:hover .recipient__name { font-style: italic; }

.recipient__desc {
  grid-column: 2;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.recipient .arrow {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  font-size: var(--fs-h3);
}

.letters__kept { margin-top: var(--s-10); }

.letter-sheet {
  display: grid;
  gap: var(--s-6);
}

.letter__to {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
}

.letter__name { flex: 1; font-size: var(--fs-h3); }

.letter__to-fixed { font-style: italic; color: var(--fg-2); }

.letters__foot { margin-top: var(--s-2); }

.letters__decide {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--s-16);
}

.letters__decide-head {
  display: grid;
  gap: var(--s-4);
  padding-bottom: var(--s-12);
}

.letter-preview {
  max-width: 60ch;
  margin: 0 0 var(--s-10);
  padding-left: var(--s-5);
  border-left: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
}

.letter-preview__to { font-style: italic; }
.letter-preview__body { margin-top: var(--s-2); }

.letters__edit { padding-block: var(--s-8) var(--s-16); }

.letters__result {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
}

.letters__result-inner {
  display: grid;
  gap: var(--s-6);
  justify-items: start;
  padding-block: var(--s-16);
}

.result-sym {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: var(--fg);
  stroke-width: 1.25;
  overflow: visible;
}

.result-sym--release { stroke: var(--signal-on-dark); }

.letters__result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-6);
}

/* =========================================================
   SILENCE
   ========================================================= */
.silence__setup,
.silence__end,
.silence__nothing {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-16);
}

.silence__with {
  display: grid;
  gap: var(--s-2);
  max-width: 44ch;
  margin-block: var(--s-6) var(--s-2);
  padding-left: var(--s-5);
  border-left: 1px solid var(--line-strong);
}

.silence__with-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--fg-2);
}

.silence__setup h1 { margin-top: var(--s-6); }
.silence__lede { margin-top: var(--s-6); max-width: 36ch; }

.durations {
  margin: var(--s-12) 0 0;
  padding: 0;
  border: 0;
  max-width: 760px;
}

.durations legend { padding: 0; margin-bottom: var(--s-4); }

.durations__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.duration {
  position: relative;
  display: block;
  padding: var(--s-6) var(--s-4) var(--s-6) 0;
  cursor: pointer;
}

.duration + .duration { padding-left: var(--s-6); border-left: 1px solid var(--line); }

.duration input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.duration__n {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 1.8rem + 5vw, 7rem);
  line-height: 1;
  color: var(--fg-3);
  transition: color var(--dur-hover) var(--ease-quiet);
}

.duration:hover .duration__n { color: var(--fg-2); }
.duration input:checked + .duration__n { color: var(--fg); }
.duration input:focus-visible + .duration__n { outline: 2px solid var(--focus); outline-offset: 6px; }

.duration::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: var(--s-4);
  height: 2px;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-quiet);
}

.duration + .duration::before { left: var(--s-6); }
.duration:has(input:checked)::before { transform: scaleX(1); }

.silence__begin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6) var(--s-10);
  margin-top: var(--s-10);
}

.silence__how { max-width: 46ch; }

.silence__active {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--void);
}

.silence__surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  cursor: default;
}

.silence__surface:focus-visible { outline-offset: -12px; outline-color: rgba(237, 231, 224, 0.2); }

.silence__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(237, 231, 224, 0.2);
}

.silence-time {
  position: absolute;
  top: calc(50% + 28px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  color: var(--fg-3);
}

.silence__leave {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  min-height: var(--touch);
  padding: 0 var(--s-6);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  color: rgba(237, 231, 224, 0.34);
  transition: color var(--dur-hover) var(--ease-quiet);
}

.silence__leave:hover,
.silence__leave:focus-visible { color: var(--fg-2); }

.silence__qa {
  position: absolute;
  top: var(--s-6);
  right: var(--margin);
  color: var(--fg-3);
}

.silence__notice { margin-block: var(--s-6) var(--s-16); }

.silence__nothing h2 { margin-top: var(--s-6); }
.silence__nothing-text { margin-top: var(--s-6); }

.silence__nothing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-12);
}

/* =========================================================
   ARCHIVE — lighter, rational, editorial
   ========================================================= */
.archive {
  padding-top: calc(var(--header-h) + var(--s-12));
}

.archive__label { grid-column: 1 / -1; }

.archive__title {
  grid-column: 1 / span 6;
  grid-row: 2;
  margin-top: var(--s-6);
}

.archive__intro {
  grid-column: 1 / span 6;
  grid-row: 3;
  margin-top: var(--s-10);
  display: grid;
  gap: var(--s-4);
  align-content: start;
}

.archive__media {
  grid-column: 8 / span 5;
  grid-row: 2 / span 2;
  aspect-ratio: 4 / 5;
  background: var(--bone-2);
  --focus-x: 70%;
}

.archive__controls {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  margin-top: var(--s-20);
  padding-bottom: var(--s-6);
}

.archive__search { grid-column: 1 / span 5; grid-row: 1; }

.archive__count {
  grid-column: 9 / span 4;
  grid-row: 1;
  justify-self: end;
  padding-bottom: var(--s-3);
}

.archive__controls .filters {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: var(--s-8);
}

.archive__results { padding-bottom: var(--s-16); }

.archive__loading { padding-block: var(--s-8); }

.archive__none { max-width: 640px; }

.archive__note { padding-bottom: var(--s-16); max-width: 70ch; }

.archive__entry:focus { outline: none; }

.entry {
  padding-top: calc(var(--header-h) + var(--s-6));
  padding-bottom: var(--s-24);
}

.entry__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}

.entry__nav .link { font-size: var(--fs-meta); font-weight: 500; letter-spacing: var(--track-meta); }

.entry__head {
  padding-block: var(--s-16) var(--s-12);
  max-width: 62rem;
}

.entry__summary { margin-top: var(--s-6); }

.entry__sec {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-4);
  padding-block: var(--s-10);
  border-top: 1px solid var(--line);
}

.entry__label {
  grid-column: 1 / span 3;
  color: var(--fg-3);
}

.entry__text,
.entry__quote,
.entry__sources {
  grid-column: 4 / span 7;
  max-width: 64ch;
}

.entry__text p {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.7;
}

.entry__quote { margin: 0; }

.entry__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.42;
  font-weight: 350;
}

.entry__quote blockquote p::before { content: "“"; }
.entry__quote blockquote p::after { content: "”"; }

.entry__original {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.entry__quote figcaption { margin-top: var(--s-4); }

.entry__disclaimer { margin-bottom: var(--s-4); }

.entry__ask { margin-bottom: var(--s-8); font-weight: 300; }

.entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.entry__sources {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: src;
}

.entry__sources li {
  counter-increment: src;
  display: grid;
  grid-template-columns: 2rem 1fr;
  padding-block: var(--s-2);
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.entry__sources li::before {
  content: counter(src) ".";
  color: var(--fg-3);
}

.entry__next { margin-top: var(--s-16); }
.entry__next .row { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* =========================================================
   PRIVATE — WHAT YOU KEPT
   ========================================================= */
.priv {
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-24);
}

.priv__badge { grid-column: 1 / -1; }

.priv__title {
  grid-column: 1 / -1;
  margin-top: var(--s-6);
}

.priv__lede {
  grid-column: 1 / span 6;
  margin-top: var(--s-6);
}

.priv__toc {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-8);
  margin-top: var(--s-12);
  border-top: 1px solid var(--line);
}

.priv__toc a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  color: var(--fg-2);
}

.priv__toc a:hover { color: var(--fg); }

.priv__section {
  margin-top: var(--s-20);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

.priv__section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
}

.priv .row__meta .sym { width: 11px; height: 11px; }

.q-row { position: relative; }
.q-row .row { padding-right: 56px; }
.q-row .row__go { visibility: hidden; }

.q-row__release {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  color: var(--fg-3);
  transition: color var(--dur-hover) var(--ease-quiet);
}

.q-row__release:hover { color: var(--signal-on-dark); }

.priv__x {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-8);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.priv__x-text {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.22;
  max-width: 30ch;
}

.priv__x:hover .priv__x-text { font-style: italic; }

.priv__data {
  margin-top: var(--s-24);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}

.priv__data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-2);
}

/* =========================================================
   Ø.X
   ========================================================= */
.xp {
  padding-top: calc(var(--header-h) + var(--s-12));
  padding-bottom: var(--s-24);
}

.xp__grid { row-gap: var(--s-16); }

.xp__head { grid-column: 1 / span 7; }

.xp__title {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(6rem, 2.5rem + 12vw, 15rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.xp__sub { margin-top: var(--s-6); font-weight: 300; }
.xp__why { margin-top: var(--s-6); max-width: 44ch; }

.nine {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.xp .nine {
  grid-column: 9 / span 4;
  align-self: end;
}

.nine li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.nine__n {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--fg-3);
}

.nine__x { color: var(--fg); }
.nine__x .nine__n { color: var(--fg); }
.nine__x span:last-child { font-style: italic; }
.is-yours { color: var(--fg); }

.xp__compose,
.xp__saved {
  grid-column: 1 / span 8;
  display: grid;
  gap: var(--s-8);
  align-content: start;
}

.xp__form { display: grid; gap: var(--s-8); }

.xp__prompt {
  display: block;
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  line-height: 1.25;
}

.xp__input {
  min-height: 4.5em;
  font-size: var(--fs-h3);
}

.xp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-6);
}

.xp__principle {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.15;
}

.xp__history summary {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  cursor: pointer;
  color: var(--fg-2);
}

.xp__history ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.xp__history li {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  color: var(--fg-2);
}

/* =========================================================
   NIGHT — a content state, not just dark mode
   ========================================================= */
.night__open {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
}

.night__media { position: absolute; inset: 0; --focus-x: 62%; }

.night__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 7, 6, 0.3), rgba(7, 7, 6, 0.1) 40%, rgba(7, 7, 6, 0.92));
}

.night__open-inner {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding-bottom: var(--s-16);
}

.night__title { margin-top: var(--s-4); }
.night__sub { color: var(--fg-2); }

.night__body {
  padding-block: var(--s-16);
  --unit-h: 68vh;
}

.night .unit__text {
  grid-column: 3 / span 6;
  font-size: calc(var(--fs-lead) * 0.95);
  line-height: 1.72;
  color: var(--fg-2);
}

.night .unit__statement {
  grid-column: 3 / span 8;
  color: var(--fg);
}

.night__end {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  border-top: 1px solid var(--line);
}

.night.is-done .night__end { border-top: 0; }

.night__end-inner {
  display: grid;
  gap: var(--s-6);
  justify-items: start;
  padding-block: calc(var(--header-h) + var(--s-8)) var(--s-16);
}

.night__end-inner h2:focus { outline: none; }

.night__end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-6);
}

/* =========================================================
   ABOUT Ø
   ========================================================= */
.about {
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-24);
}

.about__label { grid-column: 1 / -1; }

.about__title {
  grid-column: 1 / span 10;
  margin-top: var(--s-6);
}

.about__sub {
  grid-column: 1 / span 8;
  margin-top: var(--s-6);
  font-style: italic;
  font-weight: 300;
  color: var(--fg-2);
}

.about__sec {
  margin-top: var(--s-24);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
  row-gap: var(--s-6);
}

.about__sec-label { grid-column: 1 / span 3; }

.about__text,
.about__manifesto,
.about__defs {
  grid-column: 4 / span 7;
}

.about__manifesto p {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  line-height: 1.4;
}

.about__manifesto p + p { margin-top: var(--s-5); }

.about__manifesto .about__sign {
  margin-top: var(--s-10);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--fg-2);
}

.about__text > p + p { margin-top: var(--s-4); }

.about__law {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line-strong);
}

.about__defs { margin: 0; }

.about__defs div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--line);
}

.about__defs dd { margin: 0; font-weight: 300; }

.redlines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.redlines li {
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 300;
}

.about__above { margin-block: var(--s-10) var(--s-4); font-weight: 300; }

.about__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8) var(--gutter);
}

.plain {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
}

.plain li {
  position: relative;
  padding-left: var(--s-6);
}

.plain li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--fg-3);
}

/* THE OPEN · THE MARK · Ø — the naming hierarchy, stated once and clearly. */
.about__mark {
  grid-column: 4 / span 3;
  align-self: start;
  margin: 0;
  padding-block: var(--s-4);
  display: grid;
  justify-items: center;
}

/* The tracked wordmark is ~1.43× the mark's width — size the lockup to its column. */
.about__lockup { --lockup-w: min(200px, 13vw); }

.about__names .about__names-defs { grid-column: 7 / span 6; }

.about__names-defs dt { color: var(--fg); }

.about__names-defs dd {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
}

/* =========================================================
   LEAVE Ø
   ========================================================= */
.leavep {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-24);
}

.leavep__title { margin-top: var(--s-6); }
.leavep__lede { margin-top: var(--s-6); max-width: 40ch; }

.leavep__options {
  list-style: none;
  margin: var(--s-16) 0 0;
  padding: 0;
  max-width: 900px;
  border-top: 1px solid var(--line);
}

.leavep__opt {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--s-4);
  width: 100%;
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.leavep__opt .t-meta { grid-row: 1 / span 2; padding-top: 0.9em; }

.leavep__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.2;
}

.leavep__name .sym { width: 0.62em; height: 0.62em; vertical-align: 0.02em; }

.leavep__desc {
  grid-column: 2;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.leavep__opt:hover .leavep__name { font-style: italic; }
.leavep__opt--release:hover .leavep__name { color: var(--signal-on-dark); }

.leavep__bye {
  min-height: 70vh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s-6);
}

.leavep__bye h2:focus { outline: none; }

/* =========================================================
   SYSTEM STATES (prototype)
   ========================================================= */
.states {
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-16);
}

.states__label { grid-column: 1 / -1; }
.states__title { grid-column: 1 / span 8; margin-top: var(--s-6); }
.states__lede { grid-column: 1 / span 6; margin-top: var(--s-6); }

.states__list {
  list-style: none;
  margin-top: var(--s-16);
  padding-block: 0;
}

.state {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-4);
  align-items: center;
  padding-block: var(--s-8);
  border-top: 1px solid var(--line);
}

.state:last-child { border-bottom: 1px solid var(--line); }

.state__name {
  grid-column: 1 / span 3;
  display: grid;
  gap: var(--s-2);
  align-self: start;
}

.state__demo { grid-column: 4 / span 6; }
.state__demo .empty { border-top: 0; padding-block: 0; }
.state__demo--stack { display: grid; gap: var(--s-3); }

.state__act {
  grid-column: 10 / span 3;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-3);
}

.state__act .sym { width: 0.8em; height: 0.8em; }

.notice {
  display: grid;
  gap: var(--s-2);
  padding-left: var(--s-5);
  border-left: 2px solid var(--signal-on-dark);
  transition: opacity 300ms var(--ease-quiet);
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0 0 var(--s-3);
  padding: 0;
  border: 1px solid var(--line-strong);
}

.segmented label { position: relative; }

.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.segmented span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-4);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-meta);
  cursor: pointer;
  color: var(--fg-2);
  transition: background-color var(--dur-hover) var(--ease-quiet), color var(--dur-hover) var(--ease-quiet);
}

.segmented input:checked + span { background: var(--fg); color: var(--bg); }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.states__qa {
  margin-top: var(--s-16);
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}

code,
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  padding: 1px 6px;
  border: 1px solid var(--line-strong);
}

/* =========================================================
   404
   ========================================================= */
.nf {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: var(--header-h);
}

.nf__inner {
  display: grid;
  gap: var(--s-6);
  justify-items: start;
  padding-block: var(--s-16);
}

.nf__text { max-width: 36ch; }

.nf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-4);
}

/* =========================================================
   Visual refresh — editorial brutalism pass
   ========================================================= */
.page-home .site-header:not(.is-scrolled) {
  background: linear-gradient(180deg, rgba(8, 7, 6, 0.72), rgba(8, 7, 6, 0));
}

.hero {
  --hero-col: calc(46vw - max(0px, (100vw - var(--max)) / 2) - var(--margin) - var(--s-8));
  background:
    linear-gradient(90deg, var(--void) 0 46%, #17130f 46% 100%);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(var(--header-h) + var(--s-6));
  bottom: var(--s-10);
  left: var(--margin);
  width: 1px;
  background: linear-gradient(180deg, rgba(242, 236, 227, 0.45), rgba(242, 236, 227, 0.05));
}

.hero__media {
  left: 46%;
  border-left: 1px solid rgba(242, 236, 227, 0.22);
}

.hero__media::after {
  background:
    linear-gradient(180deg, rgba(8, 7, 6, 0.62) 0%, rgba(8, 7, 6, 0) 22%, rgba(8, 7, 6, 0) 72%, rgba(8, 7, 6, 0.72) 100%),
    linear-gradient(90deg, rgba(8, 7, 6, 0.62) 0%, rgba(8, 7, 6, 0.18) 18%, rgba(8, 7, 6, 0) 40%);
}

.hero__content {
  padding-left: var(--s-8);
  border-left: 1px solid rgba(242, 236, 227, 0.18);
}

.hero__title {
  letter-spacing: -0.015em;
  text-shadow: 0 1px 0 rgba(8, 7, 6, 0.5);
}

.hero__lede {
  max-width: 25ch;
}

.hero__foot {
  padding-left: var(--s-8);
}

.j-giu {
  border-top: 1px solid rgba(242, 236, 227, 0.16);
  border-bottom: 1px solid rgba(242, 236, 227, 0.12);
}

.j-giu__word {
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 236, 227, 0.88);
  text-stroke: 1px rgba(242, 236, 227, 0.88);
  opacity: 0.95;
}

.j-giu__media,
.j-buong__media,
.j-song__media,
.archive__media {
  border: 1px solid var(--line);
}

.j-giu__dense {
  border-left: 1px solid var(--line);
  padding-left: var(--s-6);
}

.j-nhin {
  background: var(--bone);
  color: var(--void);
  --bg: var(--bone);
  --bg-2: var(--bone-2);
  --fg: var(--void);
  --fg-2: #38332d;
  --fg-3: #6d6359;
  --line: rgba(8, 7, 6, 0.16);
  --line-strong: rgba(8, 7, 6, 0.5);
  --focus: var(--void);
}

.j-nhin__prime {
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-8);
}

.j-nhin__media {
  border: 1px solid rgba(8, 7, 6, 0.18);
}

.j-nhin__text {
  border-left: 1px solid var(--line);
  padding-left: var(--s-6);
}

.j-buong {
  background:
    linear-gradient(90deg, rgba(168, 50, 40, 0.08) 0 1px, transparent 1px 100%),
    var(--void);
  background-size: calc((100vw - (2 * var(--margin))) / 12) 100%, auto;
}

.j-buong__def {
  max-width: 14ch;
}

.j-buong__line {
  height: 2px;
  box-shadow: 0 0 0 1px rgba(168, 50, 40, 0.22);
}

.j-con {
  background:
    linear-gradient(180deg, var(--void) 0%, #14110e 56%, var(--void) 100%);
}

.j-con__q {
  max-width: 10ch;
}

.j-con__plane {
  border-top: 1px solid rgba(242, 236, 227, 0.16);
}

.j-song {
  border-top: 1px solid rgba(8, 7, 6, 0.2);
}

.j-song__rule {
  width: 72px;
}

.j-song__text {
  border-left: 1px solid var(--line);
  padding-left: var(--s-6);
}

.home-final {
  background:
    linear-gradient(180deg, rgba(8, 7, 6, 0.04), transparent 34%),
    var(--bone);
  border-top-color: rgba(8, 7, 6, 0.3);
}

.path {
  background:
    linear-gradient(90deg, rgba(242, 236, 227, 0.04) 0 1px, transparent 1px 100%),
    var(--bg);
  background-size: calc((100vw - (2 * var(--margin))) / 12) 100%, auto;
}

.stages {
  border: 1px solid var(--line);
  gap: 1px;
}

.stage__link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 7, 6, 0.12), rgba(8, 7, 6, 0.72));
}

.stage__body {
  z-index: 1;
}

.stage__name {
  letter-spacing: -0.01em;
}

.reading__open::before,
.today::before,
.letters__choose::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 var(--margin);
  width: 1px;
  background: linear-gradient(180deg, rgba(242, 236, 227, 0.32), rgba(242, 236, 227, 0.02));
  z-index: 1;
  pointer-events: none;
}

.reading__open-inner,
.today__inner,
.letters__choose-inner {
  z-index: 2;
}

.reading__body {
  background:
    linear-gradient(90deg, rgba(242, 236, 227, 0.035) 0 1px, transparent 1px 100%),
    var(--bg);
  background-size: calc((100vw - (2 * var(--margin))) / 12) 100%, auto;
}

.unit {
  border-top: 1px solid var(--line);
}

.unit:last-child {
  border-bottom: 1px solid var(--line);
}

.write__bar {
  background: rgba(8, 7, 6, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(0.82);
  backdrop-filter: blur(18px) saturate(0.82);
}

.write__page {
  border-left: 1px solid var(--line);
  padding-left: var(--s-8);
}

/* =========================================================
   WALKER source pass — bám theo UNCLASSIFIED + FACELESS FORM SYSTEM
   ========================================================= */
img[src*="/walker/"] {
  filter: saturate(0.9) contrast(1.06) brightness(0.98);
  transform: scale(1.002);
}

.hero__media {
  left: 52%;
  --focus-x: 50%;
  --focus-y: 48%;
}

.hero__content {
  width: min(100%, 42vw);
}

.hero__title {
  font-size: min(var(--fs-mega), 11vh, 6.35vw);
}

.j-giu__media {
  aspect-ratio: 3 / 4.6;
  --focus-x: 52%;
  --focus-y: 48%;
}

.j-nhin__media {
  grid-column: 1 / span 5;
  aspect-ratio: 3 / 4.6;
  --focus-x: 52%;
}

.j-nhin__text {
  grid-column: 7 / span 5;
}

.j-buong__media {
  aspect-ratio: 3 / 4.4;
  grid-column: 8 / span 4;
  --focus-x: 50%;
}

.j-con__plane {
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, #0f0d0b, #18130e 45%, var(--bone) 100%);
}

.j-con__plane img {
  width: min(46vw, 680px);
  height: min(96vh, 980px);
  object-fit: contain;
  object-position: center bottom;
}

.j-song__media {
  grid-column: 1 / span 5;
  aspect-ratio: 3 / 4.6;
  --focus-x: 50%;
}

.j-song__text {
  grid-column: 7 / span 5;
  margin-top: var(--s-16);
}

.reading__media:has(img[src*="/walker/"]) {
  display: grid;
  place-items: center end;
  background:
    radial-gradient(circle at 68% 42%, rgba(185, 119, 67, 0.14), transparent 34%),
    linear-gradient(90deg, var(--void) 0%, #16120e 62%, #231a13 100%);
}

.reading__media:has(img[src*="/walker/"])::after {
  background:
    linear-gradient(90deg, rgba(8, 7, 6, 0.86) 0%, rgba(8, 7, 6, 0.46) 44%, rgba(8, 7, 6, 0.05) 100%),
    linear-gradient(180deg, rgba(8, 7, 6, 0.24), rgba(8, 7, 6, 0.82));
}

.reading__media img[src*="/walker/"] {
  width: min(48vw, 680px);
  height: min(92vh, 920px);
  object-fit: contain;
  object-position: center;
  margin-right: var(--margin);
}

.stage__media img[src*="/walker/"] {
  object-position: center;
}

/* =========================================================
   Founder typography + plate pass — replace weak WALKER crops with
   content-led chapter plates. Source images are preserved in assets.
   ========================================================= */
[data-art="hero"],
[data-art="giu"],
[data-art="nhin"],
[data-art="buong"],
[data-art="con"],
[data-art="song"],
.stage--giu,
.stage-giu {
  --plate-word: "GIỮ";
  --plate-index: "01";
  --plate-glow: rgba(126, 91, 55, 0.16);
}

[data-art="nhin"],
.stage--nhin,
.stage-nhin {
  --plate-word: "NHÌN";
  --plate-index: "02";
  --plate-glow: rgba(154, 146, 136, 0.18);
}

[data-art="buong"],
.stage--buong,
.stage-buong {
  --plate-word: "BUÔNG";
  --plate-index: "03";
  --plate-glow: rgba(168, 50, 40, 0.16);
}

[data-art="con"],
.stage--con,
.stage-con {
  --plate-word: "CÒN";
  --plate-index: "04";
  --plate-glow: rgba(209, 195, 178, 0.14);
}

[data-art="song"],
.stage--song,
.stage-song {
  --plate-word: "SỐNG";
  --plate-index: "05";
  --plate-glow: rgba(185, 119, 67, 0.18);
}

.hero__media img[src*="/walker/"],
.j-giu__media img[src*="/walker/"],
.j-nhin__media img[src*="/walker/"],
.j-buong__media img[src*="/walker/"],
.j-con__plane img[src*="/walker/"],
.j-song__media img[src*="/walker/"],
.stage__media img[src*="/walker/"],
.reading__media img[src*="/walker/"] {
  display: none;
}

.hero {
  --hero-col: calc(49vw - max(0px, (100vw - var(--max)) / 2) - var(--margin) - var(--s-8));
  background:
    linear-gradient(90deg, rgba(242, 236, 227, 0.08) 0 1px, transparent 1px 100%),
    var(--void);
  background-size: calc((100vw - (2 * var(--margin))) / 12) 100%, auto;
}

.hero__media,
.j-giu__media,
.j-nhin__media,
.j-buong__media,
.j-con__plane,
.j-song__media,
.stage__media,
.reading__media {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 52% 42%, var(--plate-glow), transparent 34%),
    linear-gradient(180deg, #0b0a09 0%, #070706 100%);
}

.hero__media {
  left: 50%;
  border-left: 1px solid rgba(242, 236, 227, 0.18);
}

.hero__media::before,
.j-giu__media::before,
.j-nhin__media::before,
.j-buong__media::before,
.j-con__plane::before,
.j-song__media::before,
.stage__media::before,
.reading__media::before {
  content: var(--plate-word);
  position: relative;
  z-index: 1;
  inset: auto;
  width: auto;
  height: auto;
  background: none;
  opacity: 0.72;
  mix-blend-mode: normal;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 236, 227, 0.72);
  text-stroke: 1px rgba(242, 236, 227, 0.72);
  text-align: center;
  pointer-events: none;
}

.hero__media::before {
  font-size: clamp(9rem, 17vw, 22rem);
  transform: translateX(-4vw);
  opacity: 0.5;
}

.hero__media::after {
  background:
    linear-gradient(90deg, rgba(8, 7, 6, 0.86) 0%, rgba(8, 7, 6, 0.5) 34%, rgba(8, 7, 6, 0.08) 76%),
    linear-gradient(180deg, rgba(8, 7, 6, 0.28), rgba(8, 7, 6, 0.78));
}

.hero__content {
  width: min(100%, 47vw);
  padding-left: var(--s-8);
}

.hero__title {
  max-width: 10.8ch;
  font-size: clamp(3.1rem, 5.65vw, 6.6rem);
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: 300;
  text-shadow: none;
}

.hero__lede {
  color: rgba(242, 236, 227, 0.62);
}

.j-giu__word {
  letter-spacing: 0;
  font-size: clamp(6.5rem, 2.8rem + 13vw, 18rem);
}

.j-giu__media::before,
.j-nhin__media::before,
.j-buong__media::before,
.j-con__plane::before,
.j-song__media::before {
  font-size: clamp(4.8rem, 9vw, 12rem);
}

.j-giu__media,
.j-nhin__media,
.j-buong__media,
.j-song__media {
  min-height: 420px;
}

.j-con__plane::before {
  font-size: clamp(6rem, 14vw, 17rem);
  opacity: 0.42;
}

.j-nhin {
  background:
    linear-gradient(90deg, rgba(8, 7, 6, 0.08) 0 1px, transparent 1px 100%),
    var(--bone);
  background-size: calc((100vw - (2 * var(--margin))) / 12) 100%, auto;
}

.j-nhin__prime,
.j-buong__def,
.j-con__q,
.j-song__title,
.reading__title,
.path__title {
  letter-spacing: 0;
  font-weight: 300;
}

.stage__media::before {
  font-size: clamp(4.25rem, 7vw, 8.5rem);
  opacity: 0.52;
}

.stage__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 7, 6, 0.05), rgba(8, 7, 6, 0.72)),
    linear-gradient(90deg, rgba(242, 236, 227, 0.12) 0 1px, transparent 1px 100%);
  background-size: auto, 72px 100%;
}

.stage:hover .stage__media::before,
.stage:focus-within .stage__media::before {
  opacity: 0.82;
  -webkit-text-stroke-color: rgba(242, 236, 227, 0.92);
  text-stroke-color: rgba(242, 236, 227, 0.92);
}

.stage__name {
  letter-spacing: 0;
}

.reading__media {
  place-items: center end;
  padding-right: var(--margin);
}

.reading__media::before {
  font-size: clamp(8rem, 19vw, 24rem);
  opacity: 0.38;
}

.reading__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 7, 6, 0.92) 0%, rgba(8, 7, 6, 0.58) 48%, rgba(8, 7, 6, 0.12) 100%),
    linear-gradient(180deg, rgba(8, 7, 6, 0.18), rgba(8, 7, 6, 0.86));
}

.reading__title {
  max-width: 8ch;
  font-size: clamp(5rem, 12vw, 13rem);
  line-height: 0.9;
}

@media (max-width: 1023px) {
  .hero {
    background-size: calc((100vw - (2 * var(--margin))) / 8) 100%, auto;
  }

  .hero__media {
    left: 0;
    height: 40svh;
    border-left: 0;
    border-bottom: 1px solid rgba(242, 236, 227, 0.18);
  }

  .page-home .hero__inner {
    padding-top: calc(40svh + var(--s-4));
  }

  .hero__content {
    width: auto;
  }

  .hero__media::before {
    transform: none;
    font-size: clamp(7rem, 23vw, 13rem);
  }

  .j-giu__media,
  .j-nhin__media,
  .j-buong__media,
  .j-song__media {
    min-height: 340px;
  }

  .j-nhin,
  .path,
  .reading__body {
    background-size: calc((100vw - (2 * var(--margin))) / 8) 100%, auto;
  }

  .reading__media {
    place-items: start center;
    padding: calc(var(--header-h) + var(--s-10)) var(--margin) 0;
  }
}

@media (max-width: 699px) {
  .hero,
  .j-nhin,
  .path,
  .reading__body {
    background-size: calc((100vw - (2 * var(--margin))) / 4) 100%, auto;
  }

  .hero__media {
    height: 34svh;
  }

  .page-home .hero__inner {
    padding-top: calc(34svh + var(--s-4));
  }

  .hero__title {
    font-size: clamp(2.95rem, 12.2vw, 4rem);
  }

  .hero__media::before {
    font-size: clamp(5.5rem, 28vw, 8rem);
  }

  .j-giu__media,
  .j-nhin__media,
  .j-buong__media,
  .j-song__media {
    min-height: 260px;
  }

  .j-giu__media::before,
  .j-nhin__media::before,
  .j-buong__media::before,
  .j-con__plane::before,
  .j-song__media::before {
    font-size: clamp(3.5rem, 22vw, 7rem);
  }

  .stage__media::before {
    font-size: clamp(3.8rem, 18vw, 6rem);
  }

  .reading__media {
    padding-top: calc(var(--header-h) + var(--s-6));
  }

  .reading__media::before {
    font-size: clamp(6rem, 30vw, 10rem);
  }

  .reading__title {
    font-size: clamp(4.5rem, 27vw, 8rem);
  }
}

/* =========================================================
   Founder black/red rule — black 90%, red 10%, white text.
   ========================================================= */
.tone-light,
[data-theme="bone"],
.j-nhin,
.j-song,
.home-final,
.books,
.method {
  --bg: var(--void);
  --bg-2: var(--void-2);
  --fg: var(--bone);
  --fg-2: rgba(247, 243, 238, 0.7);
  --fg-3: rgba(247, 243, 238, 0.42);
  --line: rgba(247, 243, 238, 0.12);
  --line-strong: rgba(255, 42, 58, 0.44);
  --focus: var(--signal-on-dark);
  color: var(--fg);
  background-color: var(--void);
}

[data-art="hero"],
[data-art="giu"],
[data-art="nhin"],
[data-art="buong"],
[data-art="con"],
[data-art="song"],
.stage--giu,
.stage--nhin,
.stage--buong,
.stage--con,
.stage--song,
.stage-giu,
.stage-nhin,
.stage-buong,
.stage-con,
.stage-song {
  --plate-glow: rgba(197, 22, 34, 0.22);
}

.hero,
.j-giu,
.j-nhin,
.j-buong,
.j-con,
.j-song,
.path,
.reading__body,
.home-final {
  background:
    linear-gradient(90deg, rgba(255, 42, 58, 0.055) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 82% 16%, rgba(197, 22, 34, 0.08), transparent 28%),
    var(--void);
  background-size: calc((100vw - (2 * var(--margin))) / 12) 100%, auto, auto;
}

.hero__media,
.j-giu__media,
.j-nhin__media,
.j-buong__media,
.j-con__plane,
.j-song__media,
.stage__media,
.reading__media {
  background:
    radial-gradient(circle at 48% 44%, rgba(197, 22, 34, 0.24), transparent 30%),
    linear-gradient(135deg, #080506 0%, #020202 54%, #130306 100%);
}

.hero__media::before,
.j-giu__media::before,
.j-nhin__media::before,
.j-buong__media::before,
.j-con__plane::before,
.j-song__media::before,
.stage__media::before,
.reading__media::before {
  -webkit-text-stroke-color: rgba(247, 243, 238, 0.74);
  text-stroke-color: rgba(247, 243, 238, 0.74);
}

.hero__media::after,
.reading__media::after {
  background:
    linear-gradient(90deg, rgba(5, 4, 4, 0.96) 0%, rgba(5, 4, 4, 0.58) 48%, rgba(5, 4, 4, 0.16) 100%),
    linear-gradient(180deg, rgba(5, 4, 4, 0.2), rgba(5, 4, 4, 0.88));
}

.hero::before,
.reading__open::before,
.today::before,
.letters__choose::before {
  background: linear-gradient(180deg, rgba(255, 42, 58, 0.64), rgba(255, 42, 58, 0.04));
}

.hero__title,
.path__title,
.reading__title,
.j-giu__word,
.j-buong__def,
.j-con__q,
.j-song__title,
.unit__statement,
.unit__ask {
  color: var(--bone);
}

.j-giu__word,
.stage__media::before,
.reading__media::before {
  -webkit-text-stroke-color: rgba(255, 42, 58, 0.54);
  text-stroke-color: rgba(255, 42, 58, 0.54);
}

.hero__lede,
.path__intro,
.reading__sub,
.j-giu__intro,
.j-giu__list,
.j-nhin__q,
.j-nhin__note,
.j-buong__note,
.j-song__lede,
.j-song__text,
.home-final__lines {
  color: rgba(247, 243, 238, 0.72);
}

.hero__cta,
.j-giu__foot .t-meta,
.j-nhin__lines .t-meta,
.j-buong__line,
.j-song__life,
.j-song__rule,
.path__cycle-mark,
.reading__meta,
.reading__end-label,
.unit__n,
.unit--ask .t-meta {
  color: var(--signal-on-dark);
}

.j-buong__line,
.j-song__life,
.j-song__rule {
  background: var(--signal-on-dark);
}

.stage__link::after {
  background:
    linear-gradient(180deg, rgba(5, 4, 4, 0.18), rgba(5, 4, 4, 0.78)),
    linear-gradient(0deg, rgba(197, 22, 34, 0.15), transparent 54%);
}

.stage__num,
.stage__go {
  color: var(--signal-on-dark);
}

.stage__q {
  color: rgba(247, 243, 238, 0.76);
}

.home-final {
  border-top-color: rgba(255, 42, 58, 0.38);
}

.book,
.action,
.row,
.entry__body,
.unit {
  border-color: rgba(247, 243, 238, 0.12);
}

@media (max-width: 1023px) {
  .hero,
  .j-nhin,
  .path,
  .reading__body {
    background-size: calc((100vw - (2 * var(--margin))) / 8) 100%, auto, auto;
  }
}

@media (max-width: 699px) {
  .hero,
  .j-nhin,
  .path,
  .reading__body {
    background-size: calc((100vw - (2 * var(--margin))) / 4) 100%, auto, auto;
  }
}

/* =========================================================
   WALKER runtime image pass — show the source-led art again.
   ========================================================= */
.hero__media img[src*="/walker/"],
.j-giu__media img[src*="/walker/"],
.j-nhin__media img[src*="/walker/"],
.j-buong__media img[src*="/walker/"],
.j-con__plane img[src*="/walker/"],
.j-song__media img[src*="/walker/"],
.stage__media img[src*="/walker/"],
.reading__media img[src*="/walker/"] {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.93;
  filter: grayscale(0.14) saturate(0.78) brightness(0.72) contrast(1.14);
  transform: scale(1.012);
}

.hero__media::before,
.j-giu__media::before,
.j-nhin__media::before,
.j-buong__media::before,
.j-con__plane::before,
.j-song__media::before,
.stage__media::before,
.reading__media::before {
  content: none;
  display: none;
}

.hero__media,
.j-giu__media,
.j-nhin__media,
.j-buong__media,
.j-con__plane,
.j-song__media,
.stage__media,
.reading__media {
  background:
    linear-gradient(180deg, #070707 0%, #020202 100%);
}

.hero__media::after {
  background:
    linear-gradient(90deg, rgba(3, 3, 3, 0.98) 0%, rgba(3, 3, 3, 0.68) 34%, rgba(3, 3, 3, 0.18) 76%),
    linear-gradient(180deg, rgba(3, 3, 3, 0.26), rgba(3, 3, 3, 0.9));
}

.j-giu__media,
.j-nhin__media,
.j-buong__media,
.j-song__media {
  border-color: rgba(255, 42, 58, 0.22);
}

.j-con__plane img[src*="/walker/"],
.reading__media img[src*="/walker/"] {
  object-fit: contain;
}

.reading__media:has(img[src*="/walker/"]) {
  place-items: center end;
  background:
    linear-gradient(90deg, #030303 0%, #050505 62%, #0e0305 100%);
}

.reading__media img[src*="/walker/"] {
  width: min(48vw, 680px);
  height: min(92vh, 920px);
  margin-right: var(--margin);
}

.reading__media::after {
  background:
    linear-gradient(90deg, rgba(3, 3, 3, 0.96) 0%, rgba(3, 3, 3, 0.68) 46%, rgba(3, 3, 3, 0.18) 100%),
    linear-gradient(180deg, rgba(3, 3, 3, 0.22), rgba(3, 3, 3, 0.9));
}

.stage__media::after {
  background:
    linear-gradient(180deg, rgba(3, 3, 3, 0.04), rgba(3, 3, 3, 0.58)),
    linear-gradient(0deg, rgba(197, 22, 34, 0.08), transparent 58%);
}

.stage__media img[src*="/walker/"] {
  object-fit: contain !important;
  object-position: center !important;
  background: #030303;
  opacity: 1;
  filter: grayscale(0.08) saturate(0.86) brightness(0.94) contrast(1.08);
}

.stage--giu .stage__media { --focus-x: 50%; --focus-y: 72%; }
.stage--nhin .stage__media { --focus-x: 50%; --focus-y: 66%; }
.stage--buong .stage__media { --focus-x: 50%; --focus-y: 64%; }
.stage--con .stage__media { --focus-x: 50%; --focus-y: 52%; }
.stage--song .stage__media { --focus-x: 50%; --focus-y: 64%; }

@media (max-width: 1023px) {
  .reading__media:has(img[src*="/walker/"]) {
    place-items: start center;
  }

  .reading__media img[src*="/walker/"] {
    width: min(70vw, 520px);
    height: min(70vh, 700px);
    margin: calc(var(--header-h) + var(--s-8)) 0 0;
  }
}

@media (max-width: 699px) {
  .reading__media img[src*="/walker/"] {
    width: min(86vw, 360px);
    height: 58vh;
    margin-top: calc(var(--header-h) + var(--s-4));
  }
}

/* =========================================================
   QA-002 narrow fixes (Claude) — see 07_AGENT_TASKS/CLAUDE/REPORTS/CLAUDE-WEB-QA-002.md
   ========================================================= */
/* HOME CÒN: the runtime-pass rule above (width/height 100%) outranks the plane sizing in
   the WALKER source pass, so the 249×398 doorway grew to ~1457×2329 px. Restore that
   intended size at equal specificity; tablet/mobile sizes live in responsive.css. */
.j-con__plane img[src*="/walker/"] {
  width: min(46vw, 680px);
  height: min(96vh, 980px);
}

/* PATH: pin each stage image to its card so `contain` resolves against the card in every
   engine. With a percentage height on a grid item, Chrome fell back to the image's own
   height and centre-cropped it (cutting the BUÔNG / SỐNG heads); WebKit did not. */
.stage__media img[src*="/walker/"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================
   POLISH-003 (Claude) — see 07_AGENT_TASKS/CLAUDE/REPORTS/CLAUDE-WEB-POLISH-003.md
   ========================================================= */
/* R-01 HOME CÒN → SỐNG: the plane used to dissolve into a light SỐNG (end stop var(--bone)).
   SỐNG is black now, so the fade ends in the black field instead of a white band. */
.j-con__plane::after {
  background: linear-gradient(180deg, var(--void) 0%, rgba(5, 4, 4, 0.55) 20%, rgba(5, 4, 4, 0) 46%, rgba(5, 4, 4, 0) 76%, var(--void) 100%);
}

/* N-01 Header / mobile bar tone: navigation.js still switches them to the light treatment over
   sections marked data-tone="light" (home SỐNG + final, song.html), which the black rule now renders
   black. Keep the dark bar scrim and the bone mark there so THE MARK and bar labels stay visible. */
.mobile-bar.tone-light { --scrim: rgba(8, 7, 6, 0.86); }

.site-header.tone-light .mark__img--bone,
.mobile-bar.tone-light .mark__img--bone { display: block; }

.site-header.tone-light .mark__img--void,
.mobile-bar.tone-light .mark__img--void { display: none; }