/* =========================================================================
   mentrox.ai — the Almanac world.

   One publication printed on five stocks. The page descends through a single
   day and the paper changes with the hour; nothing else about the printing
   changes, so it reads as one document rather than five websites.

   Three rules govern everything below:
     R-1  There is no lighting. Where a section is dark it is dark because it
          is printed on a dark stock. No gradients, no glows, no blurred
          shadows — weight of ink only.
     R-2  Every colour comes from the stock the panel is printed on. A panel
          sets --stock/--ink/--rule/--flood once; children never name a hex.
     R-3  The hour rail is a grid column, not a decoration. Each panel owns its
          own hour cell, so the time can never drift out of line with the
          section it labels.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts
   Bevan is the woodtype; Plex Sans and Plex Mono are already on the site.
   All self-hosted OFL, Latin subsets. See fonts/README.md.                  */
@font-face {
  font-family: "Bevan";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bevan-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-sans-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/plex-sans-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/plex-mono-500-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------- inks
   Six inks and no more. `--signal` is the only hue on the page that is not a
   neutral or a green, and it says exactly one word: DONE. Terracotta and hay
   are gone with the pasture world — under deuteranopia they collapsed into
   one olive, which is why status here is carried by the word, not the colour. */
:root {
  --oat:      #EDE4CE;   /* the bright stock */
  --oat-dim:  #DCD1B5;   /* the same stock in the gutter, one step back */
  --ink:      #16211E;   /* the press black */
  --night:    #17231D;   /* stock: late night */
  --bottle:   #24503F;   /* stock: first light */
  --dusk:     #3B3125;   /* stock: evening */
  --signal:   #1B68AD;   /* on pale stock */
  --signal-r: #6FB4DC;   /* the same ink reversed out of a dark stock */

  /* One-app makeover. These mirror the Android Bloom system and are kept in
     the measured token block so the public surface cannot drift into an
     untested palette. */
  --mx-ground:  #050508;
  --mx-surface: #0D0D12;
  --mx-raised:  #13131A;
  --mx-ink:     #F5F3F8;
  --mx-dim:     #A9A5B0;
  --mx-violet:  #9A5CFF;
  --mx-magenta: #E23D91;
  --mx-line:    #685681;

  /* Every keyline and flood, named here rather than written into the panel
     blocks, so `color.py` can measure the whole palette from one place. A hex
     that only exists inside a rule set is a hex nobody re-measures. */
  --rule-night: #567262;
  --rule-dawn:  #6CA087;
  --rule-dusk:  #8E7A5F;
  --flood-dusk: #241D14;

  --rail: 5.5rem;        /* width of the hour column */
  --gap: 1.25rem;        /* paper showing between panels */
  --pad: clamp(1.25rem, 3.2vw, 3rem);
  --stage: 82rem;      /* D-102b: the gutter was most of a wide screen */

  /* type scale — 16 px base, major third, same ratio the pasture used */
  --t12: 0.75rem;
  --t14: 0.875rem;
  --t16: 1rem;
  --t20: 1.25rem;
  --t25: 1.5625rem;
  --t31: 1.9375rem;
  --t39: 2.4375rem;
  --t49: 3.0625rem;

  --display: "Bevan", "Clarendon", Rockwell, Georgia, serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--oat-dim);
  color: var(--ink);
  font: 400 var(--t16)/1.6 var(--body);
  /* The gutter is bare stock, so it carries the fine speckle too. */
  background-image: url("/assets/grain.png");
  background-size: 128px 128px;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--oat);
  padding: .75rem 1rem; font: 500 var(--t14) var(--mono);
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* =========================================================== the sheet ===
   One grid: an hour column and the panel column. Everything on the page is a
   row of it, so the hour marks and the panels cannot come apart.            */
.sheet {
  max-width: var(--stage);
  margin: 0 auto;
  padding: var(--gap) var(--gap) 0;
}

.row {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  align-items: stretch;
}

/* --------------------------------------------------------------- the rail
   The rule and its ticks are drawn on the hour cell itself, so they run the
   exact height of the panel beside them and stop where it stops.            */
.hour {
  position: relative;
  padding: .75rem .9rem 0 0;
  text-align: right;
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

.hour::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 9px;
  border-right: 2px solid color-mix(in srgb, var(--ink) 45%, transparent);
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 45%, transparent) 0 2px,
    transparent 2px 22px);
  background-position: right center;
  background-repeat: repeat-y;
  background-size: 9px 100%;
}

/* ============================================================== panels ===
   A panel names its stock once. Everything inside reads --ink and --rule.   */
.panel {
  position: relative;
  isolation: isolate;
  background: var(--stock);
  color: var(--ink-on);
  border: 2px solid var(--rule);
  padding: var(--pad);
  margin-bottom: var(--gap);
  overflow: hidden;
}

/* the tooth of the paper — over the stock, under the content */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--tooth);
  background-size: 128px 128px;
  opacity: var(--tooth-op, .5);
  pointer-events: none;
}

.panel--night {
  --stock: var(--night);
  --ink-on: var(--oat);
  --rule: var(--rule-night);
  --flood: var(--bottle);
  --sig: var(--signal-r);
  --tooth: url("/assets/tooth.png");
  --tooth-op: .5;
}
.panel--dawn {
  --stock: var(--bottle);
  --ink-on: var(--oat);
  --rule: var(--rule-dawn);
  --flood: var(--night);
  --sig: var(--signal-r);
  --tooth: url("/assets/tooth.png");
  --tooth-op: .5;
}
.panel--day {
  --stock: var(--oat);
  --ink-on: var(--ink);
  --rule: var(--ink);
  --flood: var(--bottle);
  --sig: var(--signal);
  --tooth: url("/assets/grain.png");
  --tooth-op: .7;
}
.panel--dusk {
  --stock: var(--dusk);
  --ink-on: var(--oat);
  --rule: var(--rule-dusk);
  --flood: var(--flood-dusk);
  --sig: var(--signal-r);
  --tooth: url("/assets/tooth.png");
  --tooth-op: .5;
}

/* ============================================================ printing ===
   Misregistration: a second impression of the same letterforms, one pixel
   off, in the flood ink. It is what stops the flat colour looking like a
   screen. Kept to the display face only — on body text it would read as a
   rendering fault rather than as printing.                                  */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.005em;
  text-wrap: balance;
  text-transform: uppercase;
  text-shadow: 1px 0 0 color-mix(in srgb, var(--flood) 55%, transparent);
}

.eyebrow {
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-on) 72%, transparent);
  margin: 0 0 .5rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid color-mix(in srgb, var(--rule) 80%, transparent);
  display: inline-block;
}

.lede {
  max-width: 34ch;
  color: color-mix(in srgb, var(--ink-on) 84%, transparent);
  margin: 1rem 0 0;
}

.fineprint {
  font: 400 var(--t12)/1.5 var(--mono);
  color: color-mix(in srgb, var(--ink-on) 66%, transparent);
  margin: .9rem 0 0;
}

/* --------------------------------------------------------------- buttons
   Hard offset, no blur: the block sitting slightly proud of the paper.      */
.btn {
  display: inline-block;
  font: 500 var(--t14)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.5rem;
  border: 2px solid var(--ink-on);
  background: var(--ink-on);
  color: var(--stock);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--flood) 90%, transparent);
  transition: transform .08s linear, box-shadow .08s linear;
}
.btn--ghost {
  background: transparent;
  color: var(--ink-on);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--flood) 65%, transparent);
}
.btn:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--flood); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--flood); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.6rem;
}

/* ============================================================== header === */
.masthead {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: .25rem .25rem 1.1rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--gap);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-size: var(--t31);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: -.01em;
}
.wordmark img { width: 40px; height: 40px; }

.masthead nav {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-inline-end: auto;
}
.masthead nav a {
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .4rem 0;
  border-bottom: 2px solid transparent;
}
.masthead nav a:hover { border-bottom-color: var(--ink); }

.masthead .btn {
  --ink-on: var(--ink);
  --stock: var(--oat);
  --flood: var(--bottle);
  padding: .8rem 1.1rem;
}

/* ================================================================ hero === */
/* The hero is a dual-pane: the argument on the left, the product working on
   the right. 211 words used to pass before a reader saw the thing happen; the
   benchmark for that distance is under 30, and every page that manages it does
   so by putting input beside output. The mascot moved down a panel for this. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.hero h1 {
  font-size: clamp(1.35rem, 2.55vw, 2.15rem);
  margin: .2rem 0 0;
}

/* Each line of the headline is its own block, so the break points are the
   writer's and not the container's. */
.hero h1 .line { display: block; }
.hero h1 .stamp {
  display: inline-block;
  background: var(--ink-on);
  color: var(--stock);
  padding: 0 .28em .06em;
  text-shadow: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* the figure: a printed badge with the plate standing over it */
.plate {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 18rem;
}
.plate::before {
  content: "";
  position: absolute;
  top: 2%;
  left: 50%;
  translate: -50% 0;
  width: min(104%, 20rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--flood);
  z-index: 0;
}
/* <picture> is the grid item, not <img>. Sizing the image alone left it
   measured against a shrink-to-fit box, so the figure and the badge behind it
   stopped agreeing on where centre was. The wrapper carries the width. */
.plate picture {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 17rem);
  margin-inline: auto;
}
.plate img {
  display: block;
  width: 100%;
  /* No offset shadow: the plate is printed into the stock, not stuck onto it.
     A drop-shadow here is what made the old stickers sit on top of the page. */
}

/* ---------------------------------------------------------- voice strip */
.voice {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: 1.75rem;
  padding: .8rem 1rem;
  border: 2px solid var(--rule);
  max-width: 26rem;
}
.voice .play {
  width: 0; height: 0;
  border-left: 14px solid var(--ink-on);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  flex: 0 0 auto;
}
.voice .wave {
  flex: 1 1 auto;
  height: 26px;
  /* flat ink bars, not a waveform image */
  background-image: repeating-linear-gradient(
    to right, var(--ink-on) 0 2px, transparent 2px 6px);
  opacity: .85;
  clip-path: polygon(
     0 42%, 3% 22%, 6% 58%, 9% 8%, 12% 46%, 15% 30%, 18% 66%, 21% 16%,
    24% 52%, 27% 26%, 30% 72%, 33% 12%, 36% 44%, 39% 34%, 42% 62%, 45% 20%,
    48% 50%, 51% 28%, 54% 68%, 57% 14%, 60% 48%, 63% 32%, 66% 60%, 69% 24%,
    72% 54%, 75% 18%, 78% 64%, 81% 30%, 84% 46%, 87% 22%, 90% 56%, 93% 34%,
    96% 40%, 100% 44%,
   100% 56%, 96% 60%, 93% 66%, 90% 44%, 87% 78%, 84% 54%, 81% 70%, 78% 36%,
    75% 82%, 72% 46%, 69% 76%, 66% 40%, 63% 68%, 60% 52%, 57% 86%, 54% 32%,
    51% 72%, 48% 50%, 45% 80%, 42% 38%, 39% 66%, 36% 56%, 33% 88%, 30% 28%,
    27% 74%, 24% 48%, 21% 84%, 18% 34%, 15% 70%, 12% 54%, 9% 92%, 6% 42%,
     3% 78%, 0 58%);
}
.voice .len {
  font: 500 var(--t14)/1 var(--mono);
  letter-spacing: .06em;
  flex: 0 0 auto;
}

/* ============================================================== thread === */
.split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.split h2, .band h2 { font-size: clamp(1.6rem, 3.4vw, var(--t39)); margin: .3rem 0 0; }

.thread {
  border: 2px solid var(--rule);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  background: color-mix(in srgb, var(--flood) 45%, transparent);
}
.thread p {
  margin: 0;
  max-width: 32ch;
  padding: .7rem .9rem;
  font-size: var(--t14);
  line-height: 1.5;
  border: 2px solid var(--rule);
}
.thread .from-them {
  background: var(--oat);
  color: var(--ink);
  align-self: flex-start;
}
.thread .from-you {
  background: var(--ink);
  color: var(--oat);
  align-self: flex-end;
  border-color: var(--ink);
}
.taps { display: flex; gap: .6rem; align-self: flex-end; }
.taps span {
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .6rem .9rem;
  border: 2px solid var(--rule);
}

/* =============================================================== cards === */
.band { text-align: center; }
.band > .eyebrow { display: inline-block; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--gap);
  margin-top: 2rem;
  text-align: left;
}

.card {
  border: 2px solid var(--rule);
  display: flex;
  flex-direction: column;
}
.card > h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--t20);
  line-height: 1.05;
  margin: 0;
  padding: .9rem 1rem .3rem;
}
.card > p { margin: 0; padding: 0 1rem 1.15rem; font-size: var(--t14); }

.card .strip {
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  padding: .55rem;
  background: var(--flood);
  color: var(--oat);
  border-bottom: 2px solid var(--rule);
}

/* The pictograms each say what their card says, in the almanac's vocabulary:
   an hour struck, a measure shortened to a shorter one, a balance left level
   because nothing here weighs you. Drawn inline so they take the panel's ink. */
.mark {
  display: block;
  margin: 1.1rem 1rem .1rem;
  width: 40px; height: 40px;
  color: var(--flood);
}

/* ============================================================== ledger === */
.ledger {
  margin: 1.75rem auto 0;
  border-collapse: collapse;
  width: 100%;
  max-width: 46rem;
  text-align: left;
}
.ledger th { font: 500 var(--t12) var(--mono); letter-spacing: .14em; }
.ledger td, .ledger th {
  border: 2px solid var(--rule);
  padding: .7rem .9rem;
  vertical-align: middle;
}
.ledger .name {
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  background: color-mix(in srgb, var(--flood) 55%, transparent);
}
.ledger .state {
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: right;
}
.ledger .state.is-done { color: var(--sig); }

/* the bar: a flat filled rectangle inside a keyline, never a progress ring */
.bar {
  display: block;
  height: 14px;
  border: 2px solid var(--rule);
  background:
    linear-gradient(to right, var(--ink-on) 0 var(--w, 0%), transparent var(--w, 0%) 100%);
}

/* The two margin figures. In the Almanac the plates are printed into the page,
   so they carry no die-cut edge and no offset shadow — the ink sits on the
   stock like everything else. Both are decorative and both stand in margin
   space the content is not using, so on a narrow screen they simply go. */
.walker, .onlooker { display: block; }
.walker img, .onlooker img { display: block; width: 100%; }

.walker {
  position: absolute;
  left: var(--pad);
  bottom: 0;
  width: 8rem;
  z-index: 0;
}

.onlooker {
  position: absolute;
  right: var(--pad);
  /* stands on the same line the cards stand on, rather than floating below it */
  bottom: var(--pad);
  width: 8rem;
  z-index: 0;
}

/* the content keeps its own layer above them */
.panel > .band, .panel > .split, .panel > .hero { position: relative; z-index: 1; }

/* A figure in the margin needs a margin. Above the fold width the two panels
   that carry one give up a column of their own width for it, so the plate
   stands in empty stock instead of over the cards or the ledger — which is
   the whole rule: he is never in frame with a person's results. */
@media (min-width: 62.01rem) {
  .panel--day > .band { padding-right: 11.5rem; }
  .panel--dusk > .band { padding-left: 12.5rem; }
}

@media (max-width: 62rem) {
  .walker, .onlooker { display: none; }
}

/* ============================================================== footer === */
.colophon {
  padding: var(--pad) var(--pad) calc(var(--pad) + 1rem);
  font-size: var(--t14);
}
.colophon ul { list-style: none; margin: .6rem 0 0; padding: 0;
               display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.colophon a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ========================================================== responsive ===
   Below the fold width the hour rail folds into the panel as a printed
   caption, because a 5.5rem gutter on a phone is most of the phone.         */
@media (max-width: 52rem) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .hour {
    text-align: left;
    padding: 0 0 .5rem .15rem;
  }
  .hour::after { display: none; }
  .hero, .split { grid-template-columns: minmax(0, 1fr); }
  /* He follows the argument on a phone rather than opening it: the fold is
     narrow enough that a 15rem figure would push the headline off it. */
  .plate { min-height: 0; margin-top: 1.5rem; }
  .plate::before { width: min(60%, 13rem); }
  .plate picture { width: min(62%, 12rem); }
  .hero h1 { font-size: clamp(1.9rem, 8.5vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* Printing the page should give you the almanac, not a black rectangle. */
@media print {
  body, .panel { background: #fff !important; color: #000 !important; }
  .panel::before, .plate::before { display: none; }
}

/* ============================================================ documents ===
   The manifesto pages, the comparisons, the policies. Same publication, a
   different plate: one bright panel of prose on the day stock, closed by a
   night panel carrying the offer. Long-form wants the readable stock, so a
   document never opens on a dark one.                                       */
.prose { max-width: 42rem; }

.prose > h1 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1.6rem, 3.6vw, var(--t39));
  margin: .3rem 0 1.2rem;
  text-wrap: balance;
  text-shadow: 1px 0 0 color-mix(in srgb, var(--flood) 45%, transparent);
}

.prose > h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.05;
  font-size: var(--t20);
  margin: 2.4rem 0 .6rem;
  padding-top: 1.1rem;
  border-top: 2px solid color-mix(in srgb, var(--rule) 55%, transparent);
}

.prose p { margin: 0 0 1rem; }
.prose > p:first-of-type { font-size: var(--t20); line-height: 1.45; }

.prose a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.prose a:hover { background: color-mix(in srgb, var(--flood) 22%, transparent); }

.prose ul.plain { list-style: none; margin: 0 0 1rem; padding: 0; }
.prose ul.plain > li {
  margin: 0 0 .9rem;
  padding-left: 1.5rem;
  position: relative;
}
/* a printer's fist, kept to a square: the almanac's bullet is a set slug */
.prose ul.plain > li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .55rem; height: .55rem;
  background: currentColor;
}

.prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }

.prose dl { margin: 0 0 1rem; }
.prose dt { font-weight: 600; margin-top: 1rem; }
.prose dd { margin: .2rem 0 0; }

.prose table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1.25rem;
  font-size: var(--t14);
}
.prose th, .prose td {
  border: 2px solid var(--rule);
  padding: .55rem .7rem;
  text-align: left;
  vertical-align: top;
}
.prose th { font: 500 var(--t12) var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* wide things scroll inside themselves; the sheet never scrolls sideways */
.scroller { overflow-x: auto; }

/* the shared closing panel */
.closer { text-align: center; }
.closer .lede { margin-inline: auto; }

/* the 404 */
.error-figure { width: 8rem; margin: 0 auto 1.25rem; display: block; }

/* legacy hooks from the Pasture markup, mapped rather than renamed in nine
   files: the converter keeps the class, the almanac decides what it means. */
.lead { font-size: var(--t20); line-height: 1.45; }

/* The prose column is centred in its plate: a 42rem measure pinned to the left
   of a 74rem panel leaves a third of the paper visibly unused. */
.prose { margin-inline: auto; }
.closer .actions { justify-content: center; align-items: center; }
.closer .fineprint { max-width: 44rem; margin-inline: auto; }

/* The log-in door. Quiet next to the trial button on purpose: a returning
   reader knows where it is, a new one is not asked to choose between two
   equally loud doors. */
.masthead-login {
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.1rem;
  border: 2px solid var(--ink);
}
.masthead-login:hover { background: var(--ink); color: var(--oat); }

/* The four claims. A printed list, set as a two-column spread on wide stock so
   the panel does not become a long thin ribbon of text. The lead of each is
   bold rather than a heading, because these are four sentences about one
   subject, not four sections. */
.claims {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem 2.5rem;
  max-width: 60rem;
  margin-inline: auto;
}
.claims > li {
  position: relative;
  padding-left: 1.6rem;
  max-width: 42ch;
}
.claims > li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: .55rem; height: .55rem;
  background: var(--flood);
}


/* ------------------------------------------------ the figure beside a column
   Used where a panel has a lot to say and a plate to say it beside: the
   problem. Narrower than the hero split, because prose wants the room.        */
.split--figure {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr);
}
.split--figure .plate { min-height: 0; }
.split--figure .plate::before { top: 8%; width: min(96%, 17rem); }
.split--figure .plate picture { width: min(100%, 14rem); }

/* ------------------------------------------------------------ the dawn aside
   The voice note sits with the sentence that describes it, not three panels
   away in the hero.                                                           */
.dawn-aside {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.dawn-aside .voice { margin-top: 0; max-width: none; }

/* ------------------------------------------------------------- the rule bar
   Values instead of claims — but PRODUCT RULES, not performance statistics.
   "3 a day, capped" is a promise we keep in code; it carries no proof burden
   the way "99.9% delivery" would. Nothing here is a number about our users,
   because we do not have users to count yet and will not imply that we do.    */
.rulebar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--rule);
}
.rulebar > li {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .75rem .9rem;
  border-right: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
}
.rulebar > li:nth-child(2n) { border-right: 0; }
.rulebar > li:nth-last-child(-n+2) { border-bottom: 0; }
.rule-k {
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-on) 70%, transparent);
}
.rule-v {
  font-family: var(--display);
  font-size: var(--t16);
  line-height: 1.15;
  text-transform: uppercase;
}

@media (max-width: 52rem) {
  .split--figure { grid-template-columns: minmax(0, 1fr); }
  .split--figure .plate picture { width: min(58%, 11rem); }
  .rulebar { grid-template-columns: 1fr; }
  .rulebar > li { border-right: 0; }
  .rulebar > li:last-child { border-bottom: 0; }
}

/* ============================================================ the story ===
   D-102. The front page is the reader's own next day, one beat per screen.
   A beat is four things and no more: the head (hour, one line, narration),
   the plate, the transcript, the payoff. On a phone they stack in that order;
   above the fold width the plate takes the right column and the words the
   left, so the proof sits beside the feeling it proves.

   The story keeps every rule above it. The plates are ink with alpha, so the
   stock and its tooth show through the hatching — a printed plate, not a
   pasted picture. Nothing here glows, and nothing here is a phone.          */
.beat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.beat > .head { display: flex; flex-direction: column; gap: .7rem; }

.hour-big {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.6rem, 13vw, 6.4rem);
  line-height: .9;
  letter-spacing: -.02em;
  text-shadow: 2px 0 0 color-mix(in srgb, var(--flood) 55%, transparent);
  font-variant-numeric: tabular-nums;
}

/* Sentence case here. The story is spoken, not shouted; the uppercase
   woodtype stays on the wordmark and the document pages. */
.beat .display {
  text-transform: none;
  margin: 0;
  font-size: clamp(1.5rem, 5vw, 2.35rem);
  line-height: 1.08;
}
.beat .head .eyebrow { margin: 0 0 .2rem; }

.narr {
  margin: 0;
  max-width: 36ch;
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  line-height: 1.5;
}

.plate-fig { margin: 0; }
.plate-fig picture, .plate-fig img { display: block; width: 100%; height: auto; }
.plate-fig img { border: 2px solid var(--rule); }

/* the transcript — typeset on the page, not a phone */
.script {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
  max-width: 34rem;
}
.script .them {
  margin: 0;
  padding: .85rem 1rem;
  border: 2px solid color-mix(in srgb, var(--ink-on) 62%, transparent);
  font-size: var(--t16);
  line-height: 1.45;
}
.script .you {
  margin: 0;
  align-self: flex-end;
  padding: .7rem 1rem .62rem;
  background: var(--ink-on);
  color: var(--stock);
  font: 500 var(--t14)/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--flood) 90%, transparent);
}

/* the voice note, boxed like a message, with its transcription under it */
.note {
  border: 2px solid color-mix(in srgb, var(--ink-on) 62%, transparent);
  padding: .85rem 1rem;
}
.note .voice { margin: 0; padding: 0; border: 0; max-width: none; }
.note-text {
  margin: .7rem 0 0;
  font-style: italic;
  font-size: var(--t16);
}

.payoff { display: flex; flex-direction: column; gap: .6rem; }
.payoff .display { font-size: clamp(1.4rem, 4.4vw, 2rem); }

/* a beat without a plate keeps to one column and a reading width */
.beat--bare { max-width: 40rem; }

/* the ask: the order card under the line */
.beat--ask .order { display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; }
.beat--ask .order .actions { margin: 0; }
.beat--ask .order .fineprint { margin: 0; text-align: left; }
.beat--ask .order .rulebar { margin: .25rem 0; }

/* the sceptic's document: the validated argument, verbatim, in columns */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  margin-top: 1.5rem;
  text-align: left;
}
.doc-part > h3 {
  margin: 0 0 .5rem;
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-on) 72%, transparent);
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--rule);
}
.doc-part > p { margin: 0 0 .8rem; font-size: var(--t16); max-width: 52ch; }
.doc-part .claims { margin-top: 0; }
.doc-part .actions { margin-top: 1.2rem; }

@media (min-width: 52.01rem) {
  .beat {
    grid-template-columns: minmax(0, 1fr) minmax(0, 31rem);
    grid-template-areas:
      "head   plate"
      "script plate"
      "pay    plate";
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }
  .beat > .head   { grid-area: head; }
  .beat > .plate-fig { grid-area: plate; }
  .beat > .script { grid-area: script; }
  .beat > .payoff { grid-area: pay; align-self: end; }
  .beat--bare, .beat--ask {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "script" "pay";
  }
  .beat--ask .order { grid-area: script; }
  .doc { grid-template-columns: 1fr 1fr; }
}

/* the masthead: on a phone, the wordmark and the way in. The offer is the
   ask at the end of the day, not a button crowding the nameplate. */
@media (max-width: 52rem) {
  .masthead { flex-wrap: nowrap; justify-content: space-between; gap: .75rem; }
  .masthead nav, .masthead .btn { display: none; }
  .masthead-login { margin-inline-start: auto; flex: 0 0 auto; }
  .wordmark { font-size: clamp(1.25rem, 6vw, var(--t25)); }
  .wordmark img { width: 32px; height: 32px; }
}

/* Each beat settles onto the page as it is reached. Scroll-driven, in CSS,
   so the page still carries no script; and only where the browser can do it
   and the reader has not asked for stillness. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .beat > .head, .beat > .plate-fig, .beat > .script, .beat > .payoff, .beat > .order {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    .script--reveal > * {
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ========================================================== marginalia ===
   D-102b. On a wide screen the almanac's outer margins carry what a printed
   almanac's margins carry: small figures, inked into the gutter beside the
   page. They stand OUTSIDE the panels — never in frame with a transcript or
   a verdict — and they exist only where the margin does. Below 100rem the
   sheet fills the window and there is no margin to print in.               */
.marginalia {
  display: none;
  position: absolute;
  width: 7.5rem;
  z-index: 0;
  pointer-events: none;
}
.marginalia img { display: block; width: 100%; height: auto; }
.marginalia--left  { right: calc(100% + 1.25rem); }
.marginalia--right { left:  calc(100% + 1.25rem); }
.marginalia--foot  { bottom: 0; }
.marginalia--head  { top: 12%; }
@media (min-width: 100rem) {
  .row { position: relative; }
  .marginalia { display: block; }
}

/* ====================================================== for the sceptic ===
   D-102b. The argument for the reader who scrolls past the ask: a film, one
   pull-quote, four specimen cards, a stamp. "How it works" is its own page.  */
.beat--doc { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
.beat--doc .head { text-align: left; }

.film { margin: 0; }
.film video {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--rule);
  background: var(--night);
}
.film figcaption {
  margin-top: .5rem;
  font: 500 var(--t12)/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-on) 70%, transparent);
}

.pull { margin: 0; padding: 0 0 0 1.1rem; border-left: 4px solid var(--rule); }
.pull > p:first-child {
  margin: 0 0 .6rem;
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  line-height: 1.15;
  text-wrap: balance;
}
.pull-more { margin: 0 0 .5rem; max-width: 52ch; font-size: var(--t16); }

.specimens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border: 2px solid var(--rule);
}
.specimens > li {
  padding: 1rem 1.1rem 1.1rem;
  border-bottom: 2px solid var(--rule);
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: .8rem;
  align-items: start;
}
.specimens > li:last-child { border-bottom: 0; }
.specimens .glyph { width: 2rem; height: 2rem; grid-row: 1 / span 2; }
.specimens h3 {
  margin: .1rem 0 .3rem;
  font-family: var(--display);
  font-size: var(--t20);
  line-height: 1.1;
}
.specimens p { margin: 0; font-size: var(--t14); line-height: 1.5; max-width: 40ch; }

.stamps { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: center; }
.stampword {
  display: inline-block;
  padding: .45rem .7rem .4rem;
  border: 2px solid var(--ink-on);
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
}
.stampword:nth-child(2) { transform: rotate(.8deg); }
.stampword:nth-child(3) { transform: rotate(-.6deg); }
.stamps-more { flex-basis: 100%; font-size: var(--t14); max-width: 52ch; margin-top: .3rem; }

.doc-link { text-align: left; margin: 0; }
.doc-link a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.beat--doc .actions { margin: 0; }

@media (min-width: 52.01rem) {
  .beat--doc { grid-template-areas: none; }
  .beat.beat--doc > * { grid-area: auto; }   /* outranks the named areas above */
  .specimens { grid-template-columns: 1fr 1fr; }
  .specimens > li:nth-child(odd) { border-right: 2px solid var(--rule); }
  .specimens > li:nth-last-child(-n+2) { border-bottom: 0; }
  .specimens > li:nth-child(2) { border-bottom: 2px solid var(--rule); }
}

/* =========================================================== get the app ===
   Plan F. The ask position's second door. Two rules only, and neither of them
   names a hex: every colour here is the panel's own --ink-on / --stock / --rule,
   so the panel is correct on the night stock (index) and the day stock
   (/how-it-works) without a second palette, and color.py's "no colour outside
   the token block" check stays true.                                          */

/* the two tiers — one sentence each, framed like the rule bar so the ask reads
   as two doors rather than a paragraph with a fork in it */
.tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 2px solid var(--rule);
  text-align: left;
}
.tiers > li {
  padding: .9rem 1.1rem 1rem;
  border-bottom: 2px solid var(--rule);
}
.tiers > li:last-child { border-bottom: 0; }
.tier-k {
  margin: 0 0 .5rem;
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-on) 70%, transparent);
}
.tier-v {
  margin: 0;
  font-size: var(--t16);
  line-height: 1.45;
}

/* the exception (D-118), directly under the two tiers and above the refusals.
   Deliberately NOT smaller than .tier-v and NOT dimmed: it is the qualification
   on the strongest claim we make, and setting it as fine print would be the
   weaselling this product cannot afford. It sits outside the bordered box so it
   reads as ours to own rather than as a caveat filed under the free tier. */
.tier-note {
  margin: .9rem 0 0;
  font-size: var(--t16);
  line-height: 1.45;
  max-width: 46ch;
}
.tier-note strong { font-weight: 600; }
.prose .tier-note { margin: 1.1rem 0 0; }

/* the store badge, our own type — the reversible half of the open ruling.
   Shaped like the official badge (small line over a large one) so swapping in
   Google's artwork does not move anything around it. */
.btn--store {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  padding: .75rem 1.5rem .85rem;
  text-align: left;
}
.store-k {
  font: 500 var(--t12)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.store-v {
  font-family: var(--display);
  font-size: var(--t20);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* the app panel's order card is exactly the subscribe card's width, so the two
   halves of the ask are one column. That is also why the tiers stack instead of
   sitting side by side: at this measure two columns would set four words a line,
   and the narration above them is the site's 36ch, which a wider box fights. */
.beat--ask .order--app { max-width: 34rem; }

/* the same block on /how-it-works, where there is no beat around it */
.prose .tiers { margin: 1.5rem 0; }
.prose .actions { margin-top: 1.5rem; }

/* ===================================================== one-app makeover === */
.mx-site {
  min-height: 100vh;
  background: var(--mx-ground);
  background-image:
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--mx-violet) 22%, transparent), transparent 29rem),
    radial-gradient(circle at 14% 45%, color-mix(in srgb, var(--mx-magenta) 12%, transparent), transparent 34rem);
  color: var(--mx-ink);
  font: 400 1rem/1.55 var(--body);
}

.mx-site .skip { background: var(--mx-ink); color: var(--mx-ground); }

.mx-header,
.mx-site main,
.mx-footer {
  width: min(74rem, calc(100% - 2rem));
  margin-inline: auto;
}

.mx-header {
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--mx-line);
}

.mx-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--mx-ink);
  font: 600 1.15rem/1 var(--body);
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
}

.mx-wordmark img { width: 2.25rem; height: 2.25rem; }
.mx-header nav { display: flex; gap: 1.4rem; margin-inline-start: auto; }
.mx-header nav a,
.mx-link-button {
  color: var(--mx-dim);
  font: 500 .875rem/1 var(--mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.mx-header nav a { padding-block: 1rem; }
.mx-header nav a:hover { color: var(--mx-ink); }
.mx-link-button {
  color: var(--mx-ink);
  border: 1px solid var(--mx-line);
  border-radius: 999px;
  padding: .85rem 1.1rem;
}

.mx-hero {
  min-height: calc(100vh - 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .72fr);
  gap: clamp(2.5rem, 8vw, 8rem);
  align-items: center;
  padding-block: clamp(4rem, 9vw, 8rem);
}

.mx-kicker,
.mx-card-label,
.mx-mini-screen > span,
.mx-mini-screen small,
.mx-tiers article > span {
  margin: 0;
  color: var(--mx-violet);
  font: 500 .8rem/1.3 var(--mono);
  letter-spacing: .17em;
  text-transform: uppercase;
}

.mx-hero h1,
.mx-section h2,
.mx-split h2,
.mx-quote h2,
.mx-cta h2 {
  margin: .8rem 0 0;
  color: var(--mx-ink);
  font-family: var(--body);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.mx-hero h1 { max-width: 10ch; font-size: clamp(3rem, 7vw, 6.4rem); }
.mx-lede { max-width: 38rem; margin: 1.5rem 0 0; color: var(--mx-dim); font-size: clamp(1.05rem, 2vw, 1.3rem); }
.mx-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.mx-primary,
.mx-secondary {
  min-height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  padding: .9rem 1.25rem;
  font: 600 .875rem/1 var(--mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
.mx-primary { color: var(--mx-ink); background: linear-gradient(100deg, var(--mx-violet), var(--mx-magenta)); }
.mx-secondary { color: var(--mx-ink); border: 1px solid var(--mx-line); background: var(--mx-surface); }
.mx-fine { margin-top: 1.2rem; color: var(--mx-dim); font-size: .875rem; }

.mx-phone {
  position: relative;
  width: min(100%, 23rem);
  min-height: 40rem;
  margin-inline: auto;
  padding: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--mx-line);
  border-radius: 3rem;
  background: color-mix(in srgb, var(--mx-surface) 94%, transparent);
  box-shadow: 0 0 5rem color-mix(in srgb, var(--mx-violet) 24%, transparent);
}
.mx-phone::before {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  left: -8rem;
  top: 4rem;
  border-radius: 50%;
  background: var(--mx-violet);
  filter: blur(7rem);
  opacity: .18;
  pointer-events: none;
}
.mx-phone-top { display: flex; justify-content: space-between; color: var(--mx-dim); font: 500 .75rem/1 var(--mono); letter-spacing: .16em; }
.mx-glow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 6rem;
  padding: 1.4rem;
  border: 1px solid var(--mx-violet);
  border-radius: 1.5rem;
  background: var(--mx-raised);
}
.mx-glow-card strong { max-width: 10ch; font-size: 2rem; line-height: 1.05; }
.mx-first-move { display: flex; align-items: center; gap: .65rem; color: var(--mx-dim); }
.mx-first-move i { width: .5rem; height: .5rem; flex: 0 0 auto; border-radius: 50%; background: var(--mx-violet); }
.mx-phone-action { margin-top: .4rem; padding: 1rem; border-radius: 1rem; background: linear-gradient(100deg, var(--mx-violet), var(--mx-magenta)); text-align: center; font: 600 .8rem/1 var(--mono); letter-spacing: .12em; }
.mx-phone button { width: 100%; min-height: 3rem; margin-top: 1rem; border: 0; background: transparent; color: var(--mx-violet); font: 500 .875rem var(--body); opacity: 1; }
.mx-phone-nav { position: absolute; inset: auto 1.5rem 1.5rem; display: flex; justify-content: space-around; border-top: 1px solid var(--mx-line); padding-top: 1rem; color: var(--mx-dim); font-size: .8rem; }
.mx-phone-nav b { color: var(--mx-ink); }

.mx-section,
.mx-split,
.mx-quote,
.mx-cta { padding-block: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid var(--mx-line); }
.mx-section h2,
.mx-split h2,
.mx-quote h2,
.mx-cta h2 { max-width: 18ch; font-size: clamp(2.3rem, 5vw, 4.6rem); }

.mx-path { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 3rem 0 0; padding: 0; counter-reset: none; }
.mx-path li,
.mx-tiers article {
  min-height: 16rem;
  padding: 1.4rem;
  border: 1px solid var(--mx-line);
  border-radius: 1.4rem;
  background: var(--mx-surface);
}
.mx-path li > span { color: var(--mx-violet); font: 500 .8rem var(--mono); }
.mx-path li > strong { display: block; margin-top: 3rem; font-size: 1.55rem; }
.mx-path li > p { margin: .65rem 0 0; color: var(--mx-dim); }

.mx-split { display: grid; grid-template-columns: 1fr minmax(18rem, .7fr); gap: clamp(2rem, 8vw, 8rem); align-items: center; }
.mx-split > div:first-child > p:not(.mx-kicker, .mx-callout) { max-width: 36rem; color: var(--mx-dim); font-size: 1.1rem; }
.mx-callout { color: var(--mx-violet); font-size: 1.5rem; font-weight: 600; }
.mx-mini-screen { padding: 2rem; border: 1px solid var(--mx-violet); border-radius: 2rem; background: var(--mx-surface); box-shadow: 0 0 4rem color-mix(in srgb, var(--mx-magenta) 18%, transparent); }
.mx-mini-screen > strong { display: block; margin: 2rem 0; font-size: 2rem; line-height: 1.05; }
.mx-mini-screen > div { display: grid; gap: .7rem; padding: 1.2rem; border: 1px solid var(--mx-line); border-radius: 1rem; }
.mx-mini-screen > div b { font-size: 1.25rem; }
.mx-mini-screen > em { display: block; margin-top: 1rem; padding: 1rem; border-radius: 1rem; background: linear-gradient(100deg, var(--mx-violet), var(--mx-magenta)); font: normal 600 .8rem/1 var(--mono); letter-spacing: .1em; text-align: center; }

.mx-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.mx-tiers article { min-height: 20rem; }
.mx-tiers h3 { margin: 3rem 0 1.2rem; font-size: 1.8rem; }
.mx-tiers ul { display: grid; gap: .85rem; margin: 0; padding-inline-start: 1.2rem; color: var(--mx-dim); }
.mx-tier-coach { box-shadow: inset 0 0 0 1px var(--mx-violet), 0 0 4rem color-mix(in srgb, var(--mx-violet) 13%, transparent); }
.mx-quote > p:last-child,
.mx-cta > p:not(.mx-kicker, .mx-fine) { max-width: 40rem; color: var(--mx-dim); font-size: 1.1rem; }
.mx-footer { display: flex; justify-content: space-between; gap: 1rem; padding-block: 2rem; border-top: 1px solid var(--mx-line); color: var(--mx-dim); font-size: .875rem; }
.mx-footer nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

.mx-article-hero { max-width: 58rem; padding-block: clamp(5rem, 10vw, 9rem); }
.mx-article-hero h1 {
  max-width: 12ch;
  margin: .8rem 0 0;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.mx-article-hero > p:last-child { max-width: 39rem; color: var(--mx-dim); font-size: 1.15rem; }
.mx-story { border-top: 1px solid var(--mx-line); }
.mx-story > article {
  display: grid;
  grid-template-columns: minmax(8rem, .32fr) minmax(0, .8fr) minmax(17rem, .65fr);
  gap: clamp(1.2rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--mx-line);
}
.mx-story > article > span,
.mx-destinations article > span { color: var(--mx-violet); font: 500 .8rem/1.3 var(--mono); letter-spacing: .14em; }
.mx-story h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -.035em; }
.mx-story > article > p { color: var(--mx-dim); }
.mx-story-card { display: grid; gap: .7rem; padding: 1.4rem; border: 1px solid var(--mx-line); border-radius: 1.3rem; background: var(--mx-surface); }
.mx-story-card small { color: var(--mx-violet); font: 500 .75rem var(--mono); letter-spacing: .14em; }
.mx-story-card b { font-size: 1.2rem; line-height: 1.3; }
.mx-chip-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.mx-chip-row > * { padding: .7rem .9rem; border: 1px solid var(--mx-line); border-radius: 999px; color: var(--mx-dim); font-size: .875rem; }
.mx-chip-row > b { color: var(--mx-ink); border-color: var(--mx-violet); background: color-mix(in srgb, var(--mx-violet) 18%, transparent); }
.mx-destinations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.mx-destinations article { padding: 1.4rem; border: 1px solid var(--mx-line); border-radius: 1.3rem; background: var(--mx-surface); }
.mx-destinations p { margin: 2rem 0 0; color: var(--mx-dim); }

@media (max-width: 52rem) {
  .mx-header { min-height: 4.5rem; }
  .mx-header nav { display: none; }
  .mx-link-button { margin-inline-start: auto; }
  .mx-hero { grid-template-columns: 1fr; min-height: auto; }
  .mx-hero h1 { max-width: 9ch; }
  .mx-phone { min-height: 36rem; }
  .mx-path { grid-template-columns: 1fr 1fr; }
  .mx-split,
  .mx-tiers { grid-template-columns: 1fr; }
  .mx-story > article { grid-template-columns: 1fr; gap: 1rem; }
  .mx-story > article > p { max-width: 36rem; }
  .mx-destinations { grid-template-columns: 1fr; }
}

@media (max-width: 32rem) {
  .mx-header,
  .mx-site main,
  .mx-footer { width: min(100% - 1.25rem, 74rem); }
  .mx-wordmark img { display: none; }
  .mx-link-button { padding-inline: .8rem; }
  .mx-path { grid-template-columns: 1fr; }
  .mx-path li { min-height: 12rem; }
  .mx-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-primary,
  .mx-secondary,
  .mx-link-button { scroll-behavior: auto; }
}