/* ── Compendium ────────────────────────────────────────────────────────────
   One printed tarot card on paper, in the Baldur's Gate deck's language:
   powder-blue filigree frame, desaturated slate field, cream geometry, an
   ornamental base band. The view is a list of names and nothing else.
   ------------------------------------------------------------------------ */

:root {
  --paper:   #f1efe9;   /* the mount the card is printed on */
  --card:    #fbfaf7;   /* card stock inside the frame      */
  --line:    #8ba3c7;   /* filigree linework                */
  --line-d:  #62789c;
  --slate:   #3f4c5e;   /* the field the art sits on        */
  --slate-d: #333e4e;
  --cream:   #eadfcd;
  --cream-d: rgba(234, 223, 205, 0.55);
  --blush:   #d8c6b4;
  --taupe:   #92806d;
  --ice:     #a9bdd8;

  /* The case file: the same palette, warmed into folder stock and desk. */
  --desk:     #29323f;
  --manila:   #ded0b5;
  --manila-d: #c9b697;
  --page:     #f6efe1;
  --page-2:   #ece2cf;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: "Courier New", Courier, ui-monospace, monospace;

  --page-pad: clamp(1.5rem, 3.4vw, 3.1rem);
  --strip: clamp(1.4rem, 3.2vh, 2rem);

  /* Print grain, laid over the field so flat fills read as pressed ink. */
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.5"/></svg>');
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: clamp(0.75rem, 3vh, 2.25rem) 1rem;
  font-family: var(--serif);
  color: var(--cream);
  background: var(--paper);
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.card {
  position: relative;
  width: min(660px, 100%);
  /* Hold the portrait proportions of a card even when the roll is short. */
  min-height: min(760px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 18px;
  background: var(--card);
  box-shadow: 0 2px 3px rgba(50, 60, 75, 0.1), 0 18px 44px rgba(50, 60, 75, 0.16);
}

/* ── Filigree frame ─────────────────────────────────────────────────────── */

.frame {
  position: absolute;
  inset: 7px;
  border: 1.5px solid var(--line);
  pointer-events: none;
  z-index: 2;
}

.frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 0.75px solid var(--line);
  opacity: 0.55;
}

.medallion {
  position: absolute;
  width: 30px;
  height: 30px;
  color: var(--line-d);
  background: var(--card);
}

.medallion--tl { top: -15px; left: -15px; }
.medallion--tr { top: -15px; right: -15px; }
.medallion--bl { bottom: -15px; left: -15px; }
.medallion--br { bottom: -15px; right: -15px; }

/* ── Field ──────────────────────────────────────────────────────────────── */

.field {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: linear-gradient(168deg, var(--slate) 0%, var(--slate-d) 100%);
}

.field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── Celestial furniture ────────────────────────────────────────────────── */

.sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.glyph { position: absolute; }

/* Everything here keeps to the header band or the side gutters, so no
   ornament is ever sitting behind a name. */
.glyph--burst  { top: -96px; left: 50%; width: 290px; height: 290px; margin-left: -145px; color: var(--blush); opacity: 0.15; }
.glyph--orbit  { bottom: -190px; left: -140px; width: 330px; height: 330px; color: var(--ice); opacity: 0.13; }
.glyph--star-a { top: 4%;  left: 8%;   width: 30px; height: 30px; color: var(--cream); opacity: 0.26; }
.glyph--star-b { top: 8%;  right: 9%;  width: 18px; height: 18px; color: var(--ice);   opacity: 0.3; }
.glyph--star-c { bottom: 7%;  left: 3.2%;  width: 15px; height: 15px; color: var(--blush); opacity: 0.26; }
.glyph--star-d { bottom: 20%; right: 2.6%; width: 22px; height: 22px; color: var(--cream); opacity: 0.18; }

/* Light shafts, confined to the header so they never rake across the roll. */
.ray {
  position: absolute;
  transform-origin: top center;
  background: linear-gradient(to bottom, rgba(234, 223, 205, 0.5), transparent);
}

.ray--a { top: 0; left: 27%; width: 1.5px; height: 20%; transform: rotate(19deg);  opacity: 0.22; }
.ray--b { top: 0; right: 29%; width: 1px;  height: 17%; transform: rotate(-15deg); opacity: 0.2; }
.ray--c { top: 0; left: 63%; width: 2.5px; height: 13%; transform: rotate(7deg);   opacity: 0.13; }

/* ── Head ───────────────────────────────────────────────────────────────── */

.field__head {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: clamp(1.1rem, 3.2vh, 1.9rem) 1rem clamp(0.9rem, 2.4vh, 1.35rem);
}

.field__mark {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 0.5rem;
  color: var(--cream);
  opacity: 0.85;
}

.field__mark svg { width: 100%; height: 100%; display: block; }

.field__title {
  margin: 0;
  font-size: clamp(1.15rem, 3.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--cream);
}

/* Hairline under the title, thinning out at both ends. */
.field__head::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 189, 216, 0.55), transparent);
}

/* ── The roll of names ──────────────────────────────────────────────────── */

.roll {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.5rem 0 0.9rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(169, 189, 216, 0.4) transparent;
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%);
}

.roll:focus { outline: none; }
.roll:focus-visible { outline: 1px solid rgba(169, 189, 216, 0.5); outline-offset: -4px; }

.name {
  position: relative;
  padding: 0.6rem clamp(1.6rem, 6vw, 3.2rem);
  font-size: clamp(1.02rem, 2.6vw, 1.16rem);
  letter-spacing: 0.055em;
  color: var(--cream);
  cursor: default;
  transition: color 140ms ease, background 140ms ease;
}

/* Dotted rule between names, in the deck's tile-strip idiom. */
.name + .name::after {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.6rem, 6vw, 3.2rem);
  right: clamp(1.6rem, 6vw, 3.2rem);
  height: 1px;
  background-image: linear-gradient(90deg, rgba(169, 189, 216, 0.5) 45%, transparent 45%);
  background-size: 5px 1px;
}

.name:hover,
.name.is-current {
  color: #fff8ea;
  background: linear-gradient(90deg, transparent, rgba(169, 189, 216, 0.13) 10%, rgba(169, 189, 216, 0.13) 90%, transparent);
}

/* Your own row, and the note that appears when you have not made one. */
.name__you {
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(169, 189, 216, 0.75);
  vertical-align: 0.1em;
}

/* Small star flanking the live row. */
.name::before {
  content: "";
  position: absolute;
  left: clamp(0.55rem, 2.6vw, 1.5rem);
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  background: var(--cream);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: 0;
  transition: opacity 140ms ease;
}

.name:hover::before,
.name.is-current::before { opacity: 0.95; }

/* ── Base band ──────────────────────────────────────────────────────────── */

.band {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.2rem 0;
  color: var(--line-d);
}

.band__scroll { width: 46px; height: 26px; flex: none; }
.band__scroll--r { transform: scaleX(-1); }

/* Run of small tiles between the two scrolls. */
.band__tiles {
  height: 12px;
  background-repeat: repeat-x, no-repeat;
  background-position: center, center;
  background-size: 15px 12px, 100% 1px;
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12"><path d="M7.5 1.6 11 6 7.5 10.4 4 6Z" fill="none" stroke="%2362789c" stroke-width="1"/><circle cx="0.6" cy="6" r="0.9" fill="%2362789c"/></svg>'),
    linear-gradient(90deg, transparent, rgba(98, 120, 156, 0.45) 8%, rgba(98, 120, 156, 0.45) 92%, transparent);
}

/* Title block, bottom-right, the way the decks sign their cards. */
.plate {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7rem;
  padding-top: 0.55rem;
}

.plate__seal { width: 26px; height: 26px; color: var(--line-d); opacity: 0.9; }

.plate__text { display: flex; align-items: baseline; gap: 0.75rem; }

.plate__word {
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--slate);
}

.plate__count {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--line-d);
}

/* ── Empty compendium ───────────────────────────────────────────────────── */

/* With nothing to list, centre the notice in the field. */
.roll:has(.hollow) { display: grid; place-content: center; }

.hollow {
  padding: clamp(2rem, 9vh, 4rem) 2rem;
  text-align: center;
  font-style: italic;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: var(--cream-d);
}

.hollow em { display: block; font-style: normal; font-size: 0.86rem; margin-top: 0.5rem; opacity: 0.8; }

/* ── Actions ────────────────────────────────────────────────────────────── */

.acts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
  padding-top: 0.8rem;
}

.act {
  position: relative;
  font-family: var(--serif);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  background: #f5f1e8;
  border: 1px solid var(--line);
  padding: 0.5rem 1.65rem;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

/* Diamond caps, as on the tile strip. */
.act::before,
.act::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border: 1px solid currentColor;
  opacity: 0.55;
  transform: rotate(45deg);
}

.act::before { left: 7px; }
.act::after  { right: 7px; }

.act:hover:not(:disabled) { background: var(--cream); border-color: var(--line-d); }
.act:focus-visible { outline: 2px solid var(--line-d); outline-offset: 2px; }

.act:disabled { opacity: 0.38; cursor: default; }

/* Destructive, kept inside the palette with the deck's taupe. */
.act--grave { color: var(--taupe); }
.act--grave:hover:not(:disabled) { background: #efe6da; border-color: var(--taupe); }

/* The committing button in a dialog. */
.act--seal {
  color: var(--cream);
  background: var(--slate);
  border-color: var(--slate);
}

.act--seal:hover:not(:disabled) { background: var(--slate-d); border-color: var(--slate-d); color: #fff8ea; }
.act--grave.act--seal { background: var(--taupe); border-color: var(--taupe); }
.act--grave.act--seal:hover:not(:disabled) { background: #7d6c5b; border-color: #7d6c5b; }

/* ── Dialogs ────────────────────────────────────────────────────────────── */

.leaf {
  width: min(420px, calc(100vw - 2rem));
  padding: 0;
  color: var(--slate);
  background: var(--card);
  border: 1.5px solid var(--line);
  box-shadow: 0 20px 50px rgba(50, 60, 75, 0.28);
}

.leaf::backdrop { background: rgba(45, 55, 70, 0.5); }

.leaf__body {
  position: relative;
  margin: 5px;
  border: 0.75px solid var(--line);
  padding: clamp(1.3rem, 4vw, 1.9rem);
  display: grid;
  gap: 1rem;
}

.leaf__title {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  text-transform: uppercase;
  color: var(--slate);
}

/* A section break inside a long dialog — Amend carries the name and the birth
   moment, and the two want telling apart. */
.leaf__rule {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s4) 0 0;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.leaf__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(120, 102, 80, 0.3);
}

/* Hairline under the dialog title, matching the card's. */
.leaf__title::after {
  content: "";
  display: block;
  height: 1px;
  margin: 0.75rem auto 0;
  width: 62%;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.leaf__ask { margin: 0; text-align: center; font-size: 1.02rem; line-height: 1.5; }
.leaf__ask strong { font-weight: 400; color: var(--slate-d); border-bottom: 1px solid var(--line); }

.field-row { display: grid; gap: 0.3rem; }

.field-row__label {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--line-d);
}

.field-row__input {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--slate-d);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 0.35rem 0.15rem;
  transition: border-color 130ms ease;
}

.field-row__input:focus { outline: none; border-bottom-color: var(--slate); border-bottom-width: 1.5px; }

.leaf__error {
  margin: 0;
  font-size: 0.82rem;
  font-style: italic;
  text-align: center;
  color: #9a5b4a;
}

.leaf__acts {
  margin: 0;
  padding: 0.2rem 0 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
}

/* ── The case file ──────────────────────────────────────────────────────── */

.dossier {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
}

.dossier::backdrop { background: rgba(20, 26, 34, 0.7); }

/* The table the folder is lying on. */
.desk {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  /* minmax(0,…) so the row is exactly the space available. Left auto-sized,
     a long leaf grows the row, and centring then pushes the folder off the
     top of the screen. */
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  /* Extra headroom so the folder tab is never clipped by the top edge. */
  padding: clamp(2.8rem, 6vh, 3.8rem) clamp(0.8rem, 3vw, 2rem) clamp(1rem, 3vh, 2rem);
  background:
    radial-gradient(120% 90% at 50% 0%, #35404f 0%, var(--desk) 55%, #1e252f 100%);
}

.desk::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.07;
  pointer-events: none;
}

.desk__close {
  position: absolute;
  top: clamp(0.7rem, 2.4vh, 1.4rem);
  right: clamp(0.7rem, 2.4vw, 1.4rem);
  z-index: 3;
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(234, 223, 205, 0.4);
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}

.desk__close:hover { background: rgba(0, 0, 0, 0.45); color: #fff8ea; }
.desk__close:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

/* The folder itself, set down slightly askew. */
.folder {
  position: relative;
  width: min(1340px, 100%);
  height: min(900px, 100%);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 14px 14px 0;
  background: linear-gradient(165deg, var(--manila) 0%, var(--manila-d) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 26px 60px rgba(0, 0, 0, 0.55);
  /* Deliberately unrotated: the back leaf below supplies the "set down on a
     table" tilt, while the text stays on the pixel grid and renders crisp. */
}

/* The back leaf of the folder, peeking out behind. */
.folder::before {
  content: "";
  position: absolute;
  inset: -10px -16px -18px;
  z-index: -1;
  background: linear-gradient(165deg, var(--manila-d), #b5a184);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  transform: rotate(0.8deg);
}

.folder__tab {
  position: absolute;
  top: -30px;
  left: 52px;
  max-width: calc(100% - 104px);
  padding: 0.48rem 2.2rem 0.42rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3f3527;
  background: linear-gradient(180deg, #e6d8be, var(--manila));
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

/* ── Spread ─────────────────────────────────────────────────────────────── */

.spread {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--page);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.page {
  /* Positioning context, so a stamp stays on its own leaf. */
  position: relative;
  min-height: 0;
  overflow-y: auto;
  /* The top strip is reserved on both leaves for the back button and the leaf
     marker, which keeps the two headings level with each other. */
  padding: calc(var(--strip) + 2.5rem) var(--page-pad) clamp(1.5rem, 4vh, 2.8rem);
  font-size: var(--t-note);
  line-height: 1.6;
  color: #2b2419;
  scrollbar-width: thin;
  scrollbar-color: var(--manila-d) transparent;

  /* Scroll shadows. The two covers scroll with the content (background-
     attachment: local) so they mask the shadows at the very top and bottom;
     the shadows themselves stay pinned, appearing only when there is more
     page in that direction. A page that scrolls now looks like one. */
  background-color: var(--page);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--page) 38%, rgba(246, 239, 225, 0)),
    linear-gradient(rgba(246, 239, 225, 0), var(--page-2) 62%),
    radial-gradient(farthest-side at 50% 0,
      rgba(92, 76, 55, 0.17), rgba(92, 76, 55, 0)),
    radial-gradient(farthest-side at 50% 100%,
      rgba(92, 76, 55, 0.17), rgba(92, 76, 55, 0));
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  background-size: 100% 46px, 100% 46px, 100% 16px, 100% 16px;
  background-attachment: local, local, scroll, scroll;
}

/* The gutter where the two leaves meet. */
.spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 34px;
  margin-left: -17px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(120, 100, 74, 0) 0%,
    rgba(120, 100, 74, 0.22) 42%,
    rgba(90, 74, 54, 0.4) 50%,
    rgba(120, 100, 74, 0.22) 58%,
    rgba(120, 100, 74, 0) 100%);
}

/* ── Page furniture ─────────────────────────────────────────────────────── */

.sheet__head {
  margin: 0 0 var(--s5);
  padding-bottom: 0.65rem;
  font-size: 0.92rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid rgba(120, 102, 80, 0.5);
}

/* Photograph plate, taped down. */
.plate-shot {
  position: relative;
  margin: 1.6rem auto 2.1rem;
  width: min(310px, 84%);
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  padding: 10px 10px 34px;
  background: #fbf7ee;
  box-shadow: 0 6px 16px rgba(70, 58, 44, 0.3);
  transform: rotate(-1.6deg);
}

.plate-shot__void {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(64, 54, 40, 0.68);
  background:
    repeating-linear-gradient(-45deg, rgba(146, 128, 109, 0.09) 0 6px, transparent 6px 12px),
    #e9e0cf;
}

/* Two strips of tape holding it to the page. */
.plate-shot::before,
.plate-shot::after {
  content: "";
  position: absolute;
  width: 74px;
  height: 22px;
  background: rgba(238, 229, 205, 0.72);
  box-shadow: 0 1px 2px rgba(90, 74, 54, 0.22);
}

.plate-shot::before { top: -11px; left: -18px; transform: rotate(-24deg); }
.plate-shot::after  { bottom: 16px; right: -20px; transform: rotate(-24deg); }

.plate-shot__cap {
  position: absolute;
  bottom: 9px;
  left: 10px;
  right: 10px;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  color: #4f4335;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stamped mark, rotated over the page. */
.stamp {
  position: absolute;
  right: clamp(1rem, 3vw, 2.2rem);
  bottom: clamp(1.2rem, 4vh, 2.4rem);
  padding: 0.4rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(84, 106, 143, 0.95);
  border: 2px solid rgba(84, 106, 143, 0.75);
  transform: rotate(-8deg);
  pointer-events: none;
}

/* ── Top strip: back to contents, and the leaf marker ───────────────────── */

/* Sits in the reserved strip, so adding it never shifts the page's heading. */
.back {
  position: absolute;
  top: var(--strip);
  left: var(--page-pad);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1.15rem 0.4rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #3f3527;
  background: linear-gradient(180deg, #e8dcc4, #d9c9ac);
  border: 1px solid rgba(120, 102, 80, 0.55);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(90, 74, 54, 0.22);
  transition: background 130ms ease, transform 130ms ease;
}

.back:hover { background: linear-gradient(180deg, #efe5d1, #e0d1b6); }
.back:active { transform: translateY(1px); }
.back:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }

.back__arrow { font-size: 1.05rem; line-height: 1; }

.leafmark {
  position: absolute;
  top: calc(var(--strip) + 0.35rem);
  right: var(--page-pad);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7a6952;
}

/* ── Contents ───────────────────────────────────────────────────────────── */

.toc { margin: 0; padding: 0; list-style: none; }

.toc__row {
  display: grid;
  grid-template-columns: 2.8rem 1fr auto;
  align-items: baseline;
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 0.5rem;
  font-family: var(--serif);
  font-size: 1.22rem;
  text-align: left;
  color: #23303f;
  background: none;
  border: none;
  border-bottom: 1px dotted rgba(120, 102, 80, 0.5);
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}

.toc__row:hover { background: rgba(146, 128, 109, 0.16); }
.toc__row:focus-visible { outline: 2px solid var(--line-d); outline-offset: -2px; }

.toc__no { font-family: var(--mono); font-size: 0.9rem; color: #6b5a45; }
.toc__leaf { font-family: var(--mono); font-size: 0.86rem; color: #6b5a45; }

/* ── Particulars ────────────────────────────────────────────────────────── */

.facts { margin: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 0.2rem 1rem; align-items: baseline; }

.facts dt {
  grid-column: 1;
  padding: 0.62rem 0;
  font-family: var(--mono);
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5a45;
}

.facts .lead {
  grid-column: 2;
  align-self: center;
  height: 1px;
  background-image: linear-gradient(90deg, rgba(120, 102, 80, 0.55) 45%, transparent 45%);
  background-size: 5px 1px;
}

.facts dd { grid-column: 3; margin: 0; padding: 0.62rem 0; font-size: 1.3rem; color: #1d2836; }

.given {
  margin: 0 0 1.9rem;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  color: #1d2836;
}

.given small {
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b5a45;
}

/* ── Reading the leaves ─────────────────────────────────────────────────────
   A modular type scale at roughly 1.25, one measure for every run of prose,
   and a spacing scale so the vertical rhythm is deliberate rather than
   improvised. Proximity does the grouping: a label sits tight to its value,
   the value's sentence sits close under it, and the gap between one trait and
   the next is larger than anything inside a trait.
   ------------------------------------------------------------------------ */

:root {
  --t-label: 0.75rem;
  --t-note:  1.0625rem;   /* 17px — comfortable for sustained reading */
  --t-small: 1.375rem;
  --t-value: 1.75rem;
  --t-hero:  2.25rem;

  /* 45–75 characters is the readable range and 60–66 is the comfortable part
     of it. At 17px this lands around 64 — without it, prose runs the full
     column width and lines get to ~68. */
  --measure: 30em;

  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem;
  --s4: 1rem;    --s5: 1.5rem;  --s6: 2rem;   --s7: 2.75rem;

  --ink:      #1d2836;
  --ink-soft: #463c2e;
  --ink-mute: #6a5943;   /* darkened for contrast at label sizes */
}

/* ── Trait groups ───────────────────────────────────────────────────────── */

/* A quiet rule with a heading, giving the eye somewhere to rest and restart. */
.group {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s7) 0 var(--s5);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.group::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(120, 102, 80, 0.42);
}

.trait { margin-bottom: var(--s6); }
.trait:last-child { margin-bottom: var(--s2); }

.trait__label {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.trait__value {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}

.trait__note {
  margin: var(--s2) 0 0;
  max-width: var(--measure);
  font-size: var(--t-note);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The one thing worth seeing first, given room to be seen. */
.trait--hero { margin-bottom: var(--s5); }

.trait--hero .trait__value {
  font-size: var(--t-hero);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.trait--hero .trait__sub {
  margin: var(--s1) 0 0;
  font-size: var(--t-small);
  line-height: 1.25;
  font-style: italic;
  color: var(--ink-mute);
}

.trait--hero .trait__note { margin-top: var(--s3); }

.lede {
  margin: 0 0 var(--s5);
  max-width: var(--measure);
  font-size: var(--t-note);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* ── Gifts ──────────────────────────────────────────────────────────────── */

/* Hanging numerals: the number sits in the margin so every name starts on the
   same vertical line and the column reads straight down. */
.gift {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: var(--s3);
  padding: var(--s4) 0;
  border-top: 1px solid rgba(120, 102, 80, 0.2);
}

.gift:first-of-type { border-top: none; }

.gift__no {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.75;
  text-align: right;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums lining-nums;
}

.gift__name {
  grid-column: 2;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.gift__note {
  grid-column: 2;
  margin: var(--s1) 0 0;
  max-width: var(--measure);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The Personality Sun gate. The panel says "this one matters" on its own, so
   there is no badge shouting it as well. */
.gift--primary {
  margin-bottom: var(--s4);
  padding: var(--s4) var(--s4) var(--s5);
  background: rgba(146, 128, 109, 0.13);
  border: 1px solid rgba(120, 102, 80, 0.34);
  border-left: 3px solid var(--taupe);
}

.gift--primary + .gift { border-top: none; }
.gift--primary .gift__name { font-size: 1.45rem; }

.gift__flag {
  grid-column: 2;
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── The cross, and other gate/term lists ───────────────────────────────── */

.cross {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: var(--s3);
  row-gap: var(--s4);
  margin: 0;
}

.cross__gate {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1.5;
  text-align: right;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums lining-nums;
}

.cross__body { grid-column: 2; margin: 0; }

.cross__name {
  display: block;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ink);
}

.cross__role {
  display: block;
  max-width: var(--measure);
  margin-top: 0.1rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.caveat {
  margin: var(--s4) 0 0;
  max-width: var(--measure);
  font-size: 0.94rem;
  line-height: 1.55;
  font-style: italic;
  color: rgba(90, 78, 60, 0.85);
  text-wrap: pretty;
}

/* ── BaZi: set the way the charts set it ────────────────────────────────────
   Vermillion and seal red against the parchment, characters carrying the
   weight with the romanisation supporting them.
   ------------------------------------------------------------------------ */

:root {
  --seal:      #9c2b25;   /* the red of a chop, muted to sit on aged paper */
  --seal-deep: #7d211d;
  --seal-wash: rgba(156, 43, 37, 0.07);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-bottom: var(--s4);
  background: rgba(120, 102, 80, 0.4);
  border: 1px solid rgba(120, 102, 80, 0.45);
}

.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s3) var(--s2) var(--s4);
  background: var(--page);
}

/* The day pillar is the self; it is read against everything else. */
.pillar--self { background: var(--seal-wash); }

.pillar__head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  width: calc(100% + var(--s2) * 2);
  margin: calc(var(--s3) * -1) calc(var(--s2) * -1) var(--s3);
  padding: 0.35rem 0;
  justify-content: center;
  background: var(--seal);
  color: #fbf3e6;
}

.pillar__han { font-size: 0.95rem; }

.pillar__name {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.92;
}

.pillar__god {
  min-height: 1.2em;
  margin-bottom: var(--s2);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--seal-deep);
}

/* The character block: han large, then romanisation, then the element. */
.glyphbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: var(--s2) 0;
}

.glyphbox--branch { border-top: 1px dotted rgba(120, 102, 80, 0.45); }

.glyphbox__han {
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--ink);
}

.glyphbox__latin {
  margin-top: 0.1rem;
  font-size: 0.92rem;
  color: var(--ink);
}

.glyphbox__element {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-align: center;
}

.pillar__hidden {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  width: 100%;
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid rgba(120, 102, 80, 0.28);
}

.hidden-stem { display: flex; align-items: baseline; gap: 0.35rem; }
.hidden-stem__han { font-size: 1.05rem; color: var(--ink); }

.hidden-stem__god {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

/* ── Element balance ────────────────────────────────────────────────────── */

.bars { display: grid; gap: 0.55rem; margin-bottom: var(--s4); }

.bar {
  display: grid;
  grid-template-columns: 6.5rem 1fr 1.6rem;
  align-items: center;
  gap: var(--s3);
}

.bar__label { font-size: 0.95rem; color: var(--ink); }

.bar__track {
  height: 9px;
  background: rgba(120, 102, 80, 0.16);
  border: 1px solid rgba(120, 102, 80, 0.22);
}

.bar__fill { display: block; height: 100%; }

/* The five phases keep their conventional colours, muted onto the parchment. */
.bar__fill--wood  { background: #6f8f5f; }
.bar__fill--fire  { background: #b5503c; }
.bar__fill--earth { background: #b08d4f; }
.bar__fill--metal { background: #9a9384; }
.bar__fill--water { background: #4d6a86; }

/* Neutral fill for the office bars, which are counts of people rather than
   of the five phases. */
.bar__fill--ink { background: rgba(90, 76, 58, 0.55); }
.bar__fill--open { background: rgba(120, 102, 80, 0.28); }

.bar__count {
  font-family: var(--mono);
  font-size: 0.85rem;
  text-align: right;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* ── Luck cycles ────────────────────────────────────────────────────────── */

.cycles { margin: 0; padding: 0; list-style: none; }

.cycle {
  display: grid;
  grid-template-columns: 2.6rem auto 1fr auto;
  align-items: baseline;
  gap: var(--s3);
  padding: 0.55rem var(--s2);
  border-top: 1px solid rgba(120, 102, 80, 0.2);
}

.cycle:first-child { border-top: none; }

.cycle__age {
  font-family: var(--mono);
  font-size: 0.88rem;
  text-align: right;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums lining-nums;
}

.cycle__han { font-size: 1.3rem; color: var(--ink); }
.cycle__latin { font-size: 0.98rem; color: var(--ink-soft); }

/* The decade currently running. */
.cycle--now {
  background: var(--seal-wash);
  box-shadow: inset 3px 0 0 var(--seal);
}

.cycle--now .cycle__age,
.cycle--now .cycle__latin { color: var(--ink); }

.cycle__flag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--seal-deep);
}

/* ── Alias ─────────────────────────────────────────────────────────────── */

.given__alias {
  display: block;
  margin-top: 0.2rem;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-style: italic;
  line-height: 1.25;
  color: var(--ink-mute);
}

.given__alias::before { content: "“"; }
.given__alias::after  { content: "”"; }

.alias-note {
  margin: 0 0 var(--s5);
  max-width: var(--measure);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ── Birth form: derived location ──────────────────────────────────────── */

.check-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: -0.4rem;
  font-size: 0.95rem;
  color: var(--slate-d);
  cursor: pointer;
}

.check-row input { accent-color: var(--slate); }

.check-row__note {
  margin: -0.4rem 0 0;
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--line-d);
}

/* What the form has worked out from the chosen place. */
.derived {
  margin: -0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--line-d);
}

.derived--warn { color: #8c4a3d; }

/* ── Tables on the leaves ───────────────────────────────────────────────── */

.note {
  margin: 1.3rem 0 0;
  font-size: 0.86rem;
  font-style: italic;
  color: rgba(64, 54, 40, 0.75);
}

.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.grid th {
  padding: 0 var(--s2) var(--s2);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-mute);
  border-bottom: 1px solid rgba(120, 102, 80, 0.5);
}

.grid th:first-child { text-align: left; }

/* Roomier rows: the old 0.42rem crowded the leading and made the column hard
   to track across. */
.grid td {
  padding: 0.6rem var(--s2);
  text-align: right;
  color: var(--ink);
  border-bottom: 1px solid rgba(146, 128, 109, 0.24);
}

/* The row label reads as a label, not as data. */
.grid td:first-child {
  text-align: left;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

.grid tbody tr:last-child td { border-bottom: none; }

/* Gate.line and stem/branch columns want tabular figures. */
.grid--sky td:not(:first-child) { font-size: 0.94rem; }

/* A leaf that carries an action. */
.sheet__act {
  margin-top: 1.6rem;
  padding: 0.5rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3f3527;
  background: linear-gradient(180deg, #e8dcc4, #d9c9ac);
  border: 1px solid rgba(120, 102, 80, 0.55);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(90, 74, 54, 0.22);
  transition: background 130ms ease;
}

.sheet__act:hover { background: linear-gradient(180deg, #efe5d1, #e0d1b6); }
.sheet__act:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }

/* A contents line for a framework that has not been cast yet. */
.toc__row--empty { opacity: 0.55; }
.toc__row--empty .toc__leaf { font-style: italic; }

/* ── Dialog extras ──────────────────────────────────────────────────────── */

.field-row__hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.62rem;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(98, 120, 156, 0.85);
}


select.field-row__input { appearance: none; border-radius: 0; }

/* ── Foot & page turns ──────────────────────────────────────────────────── */

.folder__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.7rem 0.75rem;
}

.turn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #4a3f30;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(74, 63, 48, 0.45);
  border-radius: 50%;
  cursor: pointer;
  transition: background 130ms ease, opacity 130ms ease;
}

.turn svg { width: 22px; height: 22px; }
.turn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.6); }
.turn:disabled { opacity: 0.3; cursor: default; }
.turn:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }

/* Sheet markers, one per spread. */
.folder__marks { display: flex; gap: 0.7rem; }

.mark {
  width: 10px;
  height: 10px;
  background: transparent;
  border: 1px solid rgba(74, 63, 48, 0.6);
  transform: rotate(45deg);
  padding: 0;
  cursor: pointer;
}

.mark:hover { background: rgba(74, 63, 48, 0.35); }
.mark[aria-current="true"] { background: #4a3f30; }
.mark:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }

/* ── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* One leaf at a time; the second stacks under the first. */
  .folder { height: 100%; }
  .spread { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; }
  .spine { display: none; }
  .page--r { border-top: 1px dashed rgba(146, 128, 109, 0.5); }
}

@media (max-width: 520px) {
  .act { padding-inline: 1.15rem; letter-spacing: 0.14em; }
  .card { padding: 13px; }
  .frame { inset: 5px; }
  .medallion { width: 24px; height: 24px; }
  .medallion--tl { top: -12px; left: -12px; }
  .medallion--tr { top: -12px; right: -12px; }
  .medallion--bl { bottom: -12px; left: -12px; }
  .medallion--br { bottom: -12px; right: -12px; }
  .field__title { letter-spacing: 0.26em; text-indent: 0.26em; }
  .band__scroll { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ── Pinned-section chips ───────────────────────────────────────────────── */

.pins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.pin {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--fw-ink);
  background: var(--fw-light);
  border: 1px solid var(--fw-edge);
  border-radius: 2px;
}

/* ── Stacked blocks: a head, a body, a row of chips ────────────────────────────────────────────────────── */

.block {
  position: relative;
  margin-block: var(--s3);
  padding: var(--s2) var(--s3);
  text-align: left;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(120, 100, 74, 0.22);
  border-left: 3px solid var(--fw);       /* the spine carries the colour */
  cursor: pointer;
}
.block:hover { background: rgba(255, 255, 255, 0.6); }

.block__head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s1);
}

.block__when {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}

.block__body {
  margin: 0 0 var(--s2);
  font-size: var(--t-note);
  line-height: 1.62;
  color: var(--ink);
  white-space: pre-wrap;
}

.block__pins {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* ── The notepad ────────────────────────────────────────────────────────── */

.notepad {
  display: block;
  width: 100%;
  min-height: 60vh;
  margin-top: var(--s3);
  padding: var(--s2);
  font-family: var(--serif);
  font-size: var(--t-note);
  line-height: 1.9;
  color: var(--ink);
  background: transparent;
  /* Ruled, so an empty page still reads as a page rather than a form field. */
  background-image: repeating-linear-gradient(
    transparent,
    transparent calc(1.9 * var(--t-note) - 1px),
    rgba(120, 100, 74, 0.16) calc(1.9 * var(--t-note))
  );
  border: 0;
  resize: none;
}
.notepad:focus { outline: none; }
.notepad::placeholder { color: var(--ink-mute); font-style: italic; }

.notepad__status {
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

/* ── Snippets: tokens and config, meant to be copied ──────────────────────── */

.snippet {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(120, 102, 80, 0.10);
  border: 1px solid rgba(120, 102, 80, 0.22);
  padding: var(--s3);
  margin: 0 0 var(--s3);
  overflow-x: auto;
  user-select: all;
}

.token-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0.35rem 0;
  border-bottom: 1px dotted rgba(120, 102, 80, 0.3);
}

.token-row__name { font-size: 0.92rem; }
.token-row__when { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mute); }



/* ── The gate ───────────────────────────────────────────────────────────────
   The card inverted. Everywhere else the frame holds cream paper with a dark
   field inside it; here the field is the whole card, so the first thing anyone
   sees is the night sky rather than the stock it is printed on.
   ------------------------------------------------------------------------ */

.gate {
  width: 100%;
  max-width: 33rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cream);
  overflow: visible;
}

.gate::backdrop {
  background: #10161f;
  backdrop-filter: blur(2px);
}

.gate__card {
  position: relative;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  background:
    radial-gradient(115% 80% at 50% -12%, rgba(169, 189, 216, 0.20), transparent 62%),
    linear-gradient(#3d4a5d, #29323f);
  box-shadow: 0 24px 60px rgba(8, 12, 18, 0.55);
  overflow: hidden;
}

/* The grain that the field carries elsewhere, so the fill reads as pressed ink. */
.gate__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.05;
  pointer-events: none;
}

/* The frame, flipped: linework in cream, medallions filled with the field
   rather than the card stock. */
.frame--dark { border-color: rgba(234, 223, 205, 0.5); }
.frame--dark::before { border-color: rgba(234, 223, 205, 0.32); }

.medallion--dark {
  color: var(--cream);
  background: #333e4e;
}

.gate__inner { position: relative; z-index: 3; }

.gate__head {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-bottom: clamp(1.4rem, 3.5vw, 2rem);
  text-align: center;
}

.gate__mark {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--cream);
  opacity: 0.75;
}

.gate__mark svg { display: block; width: 100%; height: 100%; }

.gate__title {
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.05rem);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: #fff8ea;
}

/* A hairline between the head and whichever pane is showing. */
.gate__head::after {
  content: "";
  width: 62%;
  height: 1px;
  margin-top: 0.65rem;
  background: linear-gradient(90deg, transparent, rgba(234, 223, 205, 0.42), transparent);
}

/* Onboarding runs long, so the panel scrolls rather than growing past the
   viewport on a laptop. */
.gate__pane {
  display: grid;
  gap: 1rem;
  max-height: min(64vh, 34rem);
  overflow-y: auto;
  padding-right: 0.2rem;
}

/* `display: grid` above outranks the user-agent rule for [hidden], so without
   this every pane shows at once. */
.gate__pane[hidden] { display: none; }

.gate__lede {
  margin: 0;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(234, 223, 205, 0.86);
}

.gate__acts {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.3rem;
}

/* ── Runes: the fields ──────────────────────────────────────────────────── */

.rune { display: grid; gap: 0.35rem; }

.rune__label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(169, 189, 216, 0.9);
}

.rune__hint {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--serif);
  font-size: 0.76rem;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(234, 223, 205, 0.5);
}

.rune__input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-family: var(--serif);
  font-size: 1rem;
  color: #fff8ea;
  background: rgba(16, 22, 31, 0.34);
  border: 1px solid rgba(169, 189, 216, 0.38);
  border-radius: 2px;
  transition: border-color 140ms ease, background 140ms ease;
}

.rune__input:focus {
  outline: none;
  border-color: var(--cream);
  background: rgba(16, 22, 31, 0.5);
}

.rune__input::placeholder { color: rgba(234, 223, 205, 0.35); }

/* ── Rites: the buttons ─────────────────────────────────────────────────── */

.rite {
  position: relative;
  padding: 0.62rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(234, 223, 205, 0.07);
  border: 1px solid rgba(169, 189, 216, 0.45);
  border-radius: 2px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.rite:hover {
  color: #fff8ea;
  background: rgba(234, 223, 205, 0.14);
  border-color: var(--cream);
}

.rite:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

/* The one that goes forward wears the seal. */
.rite--seal {
  color: #242c38;
  background: var(--cream);
  border-color: var(--cream);
}

.rite--seal:hover { color: #1b222c; background: #fff8ea; }

.rite--quiet {
  border-color: transparent;
  background: none;
  color: rgba(234, 223, 205, 0.6);
}

.rite--quiet:hover { background: none; color: var(--cream); border-color: transparent; }

.rite[disabled] { opacity: 0.5; cursor: default; }

/* ── The bargain, and when it goes wrong ────────────────────────────────── */

.gate__warn {
  margin: 0;
  padding-left: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(234, 223, 205, 0.66);
  border-left: 2px solid rgba(216, 198, 180, 0.5);
}

.gate__error {
  margin: 0;
  font-size: 0.86rem;
  color: #f0b8a8;
}

@media (max-width: 30rem) {
  .gate__card { padding: 1.5rem 1.15rem; }
}


/* ── The gate, joining ──────────────────────────────────────────────────── */

.gate__step {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(169, 189, 216, 0.62);
}

.rune-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.gate__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: rgba(234, 223, 205, 0.82);
  cursor: pointer;
}

.gate__check input { accent-color: var(--cream); }

.gate__note,
.gate__derived {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.55;
  color: rgba(169, 189, 216, 0.72);
}

.gate__derived.is-warn { color: #e8b9a6; }

/* A disabled time field still has to read as a field, not as missing. */
.rune__input:disabled { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 30rem) {
  .rune-pair { grid-template-columns: 1fr; }
}


/* "Take a free test" — offered rather than pushed, since not knowing your
   type is a perfectly good answer here. */
.gate__aside {
  margin: -0.35rem 0 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgba(234, 223, 205, 0.7);
}

.gate__link {
  color: var(--cream);
  text-decoration-color: rgba(234, 223, 205, 0.45);
  text-underline-offset: 0.18em;
}

.gate__link:hover { color: #fff8ea; text-decoration-color: var(--cream); }


/* The two Claude clients, chosen one at a time. */
.clients {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}