/*
 * Organise (The Virtual Organiser): paper and envelopes, built on the
 * direction's system (assets/system, copied unchanged from the hub).
 * Site-local overrides of the shared parts are marked "override".
 */

/* override: whichever family host handed over, Organise opens from its own tint */
html[data-arrived-from-hub] { --arrive-tint: var(--tint-organise); }

/* ------------------------------------------------------------ Header extras */
.o-hub-link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-2); font-size: var(--text-m); font-weight: 600; text-decoration: none; color: var(--ink); }
.o-hub-link:hover { text-decoration: underline; }
.o-hub-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink); background: conic-gradient(var(--ink-organise) 0 25%, var(--ink-style) 0 50%, var(--ink-celebrate) 0 75%, var(--ink-juggle) 0); }
@media (max-width: 899px) { .o-hub-link { display: none; } }
.u-foot-sign b { color: var(--area); }

/* ------------------------------------------------------------ Shared page parts */
.page { width: min(100% - 2 * var(--gutter), 74rem); margin: var(--s-4) auto 0; }
.page-wide { width: min(100% - 2 * var(--gutter), 86rem); }
.quiet-inline { display: block; margin-top: var(--s-1); font-size: var(--text-s); color: var(--ink-2); }
.nowrap-run { white-space: nowrap; font-weight: 650; }
@media (max-width: 400px) { .nowrap-run { white-space: normal; } }

/* The page band: every inner page opens on a printed band. */
.page-band { position: relative; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 26px 50px -38px var(--shadow-ink); }
.page-band > .band { margin: 0; padding: var(--s-5) clamp(1.25rem, 1rem + 2vw, 3rem); display: grid; gap: var(--s-3); }
.page-band > .band::before, .page-band > .band::after { display: none; }
.page-band h1 { font-family: var(--area-face); font-weight: 780; font-size: var(--text-2xl); color: var(--band-text); line-height: 1.02; }
.page-band .band-line { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3rem); max-width: 50ch; line-height: 1.4; }
.page-band .band-prices { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-1); }
.page-band .band-prices .price { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .2rem .7rem; border-radius: 3px; background: var(--sheet-raised); color: var(--area); font-weight: 700; font-size: var(--text-m); box-shadow: 0 2px 0 color-mix(in srgb, var(--area) 60%, black); }
.page-band .band-quiet, .page-band .fourteen { font-size: var(--text-s); }
.fourteen { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration-color: currentColor; }
.page-band-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) clamp(1.25rem, 1rem + 2vw, 3rem); }
.page-band-foot .door-edge-wide { flex: 1 1 10rem; height: 24px; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); opacity: .75; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; }
.crumbs a { color: inherit; display: inline-flex; align-items: center; min-height: 32px; }
@media (any-pointer: coarse) { .crumbs a { min-height: 44px; } }
@media (max-width: 719px) {
  .page-band > .band { padding: var(--s-4); gap: var(--s-2); }
  .page-band h1 { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); }
  .page-band-foot { padding: var(--s-2) var(--s-4) var(--s-3); }
  .page-band-foot .seal { display: none; }
}

.sheet { background: var(--sheet); border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 18px 40px -32px var(--shadow-ink); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.sheet h2 { font-size: var(--text-xl); margin-bottom: var(--s-3); }
.sheet h3 { font-size: var(--text-l); margin-bottom: var(--s-2); }
.sheet p + p { margin-top: var(--s-3); }
.section-gap { margin-top: var(--s-7); }
.section-h { font-size: var(--text-xl); margin-bottom: var(--s-4); }
.lede { font-size: var(--text-l); line-height: 1.45; max-width: 52ch; color: var(--ink-2); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.ticks li { position: relative; padding-left: 1.6rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .8rem; height: .45rem; border-left: 2px solid var(--area); border-bottom: 2px solid var(--area); transform: rotate(-45deg); }
.scope-label, .hers-label { display: block; font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px; }
q { quotes: "\201C" "\201D"; }
.hers q { font-family: var(--face-display); font-weight: 560; color: var(--ink); }

/* Neighbours and next doors */
.neighbours { margin-top: var(--s-7); }
.neighbours > h2 { font-size: var(--text-s); font-family: var(--face-sans); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 650; color: var(--ink-2); margin-bottom: var(--s-3); }
.neighbours ul { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.neighbours .door-row { min-height: 3rem; }
.diy { margin-top: var(--s-4); color: var(--ink-2); }
.diy .text-link { color: var(--ink); }

/* --------------------------------------------------------------- FRONT ---- */
.tf { margin-top: var(--s-2); }

/* The band: printed in indigo across the whole letter, its ends folded behind. */
.o-band {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--s-5);
  align-items: end;
  margin-inline: -8px;
  padding: clamp(1.5rem, 1rem + 2.4vw, 3.25rem) clamp(1.5rem, 1rem + 3vw, 4rem) clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  background: var(--area);
  color: var(--band-text);
  box-shadow: 0 18px 30px -24px var(--shadow-ink);
}
.o-band::before, .o-band::after { content: ""; position: absolute; bottom: -7px; width: 8px; height: 7px; background: color-mix(in srgb, var(--area) 58%, black); }
.o-band::before { left: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.o-band::after { right: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.o-band-pattern { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--band-text); opacity: .22; -webkit-mask: var(--pattern) repeat-x 0 0 / var(--pattern-size); mask: var(--pattern) repeat-x 0 0 / var(--pattern-size); pointer-events: none; }
.o-band-words { display: grid; gap: var(--s-3); }
.o-band h1 { font-size: var(--text-hero); font-weight: 820; letter-spacing: -.028em; line-height: .96; color: var(--band-text); max-width: 12ch; }
.o-band-line { font-size: clamp(1.125rem, 1rem + .55vw, 1.45rem); line-height: 1.38; max-width: 40ch; }
.o-band .seal { box-shadow: inset 0 0 0 var(--ring) var(--ink), 0 10px 22px -12px rgb(0 0 0 / .5); }
.o-band-call { display: grid; gap: var(--s-5); justify-items: start; }
@media (min-width: 900px) { .o-band { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: var(--s-7); } .o-band h1 { font-size: clamp(2.5rem, 1rem + 4.4vw, 5.5rem); } }

/* The five price slips, tucked under the band. Closed: the exact price. Open: what it buys. */
.slips-wrap { position: relative; z-index: 1; }
.slips { display: grid; gap: var(--s-3); margin: -1rem clamp(.5rem, 2vw, 1.5rem) 0; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; }
.slip {
  position: relative;
  background: var(--sheet-raised);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 1px 0 var(--hairline), 0 18px 30px -24px var(--shadow-ink);
  padding-top: 1rem;
}
/* The fold: a crease where the slip was folded once, and its shaded lower half. */
.slip::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--sheet-shade) 55%, transparent)); border-radius: inherit; pointer-events: none; }
.slip-face {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: var(--s-3) var(--s-4) var(--s-3);
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  border-radius: 0;
}
.slip-kind { font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.slip-price { font-family: var(--face-display); font-weight: 780; font-size: clamp(1.0625rem, .9rem + .45vw, 1.3rem); line-height: 1.16; letter-spacing: -.01em; color: var(--area); padding-right: 1.75rem; }
.slip-crease { position: absolute; right: var(--s-4); top: var(--s-4); width: 18px; height: 14px; background: linear-gradient(var(--crease), var(--crease)) 0 0 / 100% 1.5px no-repeat, linear-gradient(var(--crease), var(--crease)) 0 100% / 100% 1.5px no-repeat; transition: transform var(--t-lift) var(--ease-paper); }
.slip-face[aria-expanded="true"] .slip-crease { background: linear-gradient(var(--area), var(--area)) 0 50% / 100% 2px no-repeat; }
.slip-face:hover .slip-crease { transform: translateY(-2px); }
.slip-face:focus-visible { outline-offset: -3px; }
.slip-in { position: relative; z-index: 1; display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px dashed var(--crease); font-size: var(--text-m); line-height: 1.45; transform-origin: 50% 0; }
.slip-in .hers q { font-size: 1.02rem; line-height: 1.4; }
.slip-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--text-s); }
@media (hover: hover) { .slip:hover { box-shadow: 0 1px 0 var(--hairline), 0 22px 34px -22px var(--shadow-ink); } }
.slip-face:active { transform: scale(.99); }

/* The letter's three panels: opened flat with two visible creases on a laptop,
   turned one at a time on a phone (W: swipe with buttons and a counter). */
.tf-letter { margin-top: var(--s-6); }
.tf-turn { display: none; }
.tf-panels {
  position: relative;
  background: var(--sheet);
  box-shadow: 0 1px 0 var(--hairline), 0 30px 60px -44px var(--shadow-ink);
  perspective: 2200px;
}
.tf-panel { position: relative; padding: clamp(1.25rem, 1rem + 1.6vw, 2.5rem); min-width: 0; }
.tf-title { font-size: var(--text-xl); margin-bottom: var(--s-3); }
@media (min-width: 720px) {
  .tf-letter .swipe-controls { display: none; }
  .tf-panels.swipe-track { display: grid; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; gap: 0; }
}
@media (min-width: 1000px) {
  .tf-panels.swipe-track { grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr) minmax(0, .95fr); }
  .tf-week { background: color-mix(in srgb, var(--sheet) 60%, var(--sheet-shade)); }
  .tf-panel + .tf-panel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: repeating-linear-gradient(180deg, var(--crease) 0 5px, transparent 5px 9px); }
  .tf-does::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4rem; background: linear-gradient(90deg, transparent, var(--shadow-ink-soft)); pointer-events: none; }
  .tf-ways::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4rem; background: linear-gradient(270deg, transparent, var(--shadow-ink-soft)); pointer-events: none; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .lt-ready .tf-does { animation: o-panel-l 640ms var(--ease-paper) both; transform-origin: 100% 50%; }
  .lt-ready .tf-ways { animation: o-panel-r 640ms 90ms var(--ease-paper) both; transform-origin: 0 50%; }
}
@keyframes o-panel-l { from { transform: rotateY(9deg); } }
@keyframes o-panel-r { from { transform: rotateY(-9deg); } }
@media (min-width: 720px) and (max-width: 999px) {
  .tf-panels.swipe-track { grid-template-columns: 1fr 1fr; }
  .tf-week { border-left: 1px dashed var(--crease); background: color-mix(in srgb, var(--sheet) 60%, var(--sheet-shade)); }
  .tf-ways { grid-column: 1 / -1; border-top: 1px dashed var(--crease); }
  .tf-ways .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Panel 1: her five lines. */
.does { display: grid; gap: 0; }
.does li { position: relative; padding: var(--s-3) 0 var(--s-3) 1.9rem; border-top: 1px dashed var(--hairline); font-family: var(--face-display); font-weight: 560; font-size: 1.06rem; line-height: 1.38; }
.does li:first-child { border-top: 0; padding-top: 0; }
.does li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-3) + .2em); width: 1.2rem; height: .6rem; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); }
.does li:first-child::before { top: .2em; }
.does-sig { margin-top: var(--s-4); font-size: var(--text-s); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3); }
.does-sig .text-link { color: var(--ink); }

/* Panel 2: the week, handed over. */
.object-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.object-head .tf-title { margin-bottom: 0; }
.week { display: grid; gap: var(--s-3); align-content: start; }
.week-for { font-size: var(--text-m); color: var(--ink-2); }
.week-days { display: grid; gap: 6px; }
.day { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s-2); align-items: stretch; }
.day-name { font-family: var(--face-display); font-weight: 780; font-size: var(--text-m); padding-top: .55rem; color: var(--area); }
.day-cell { position: relative; min-height: 3.5rem; border-radius: 4px; background: var(--sheet-raised); box-shadow: inset 0 0 0 1px var(--hairline); padding: 6px; display: grid; }
/* A folded letter: three panels, two creases, already folded at rest. */
.letter-slip, .diary-line {
  position: relative;
  display: grid;
  gap: 1px;
  padding: .45rem .7rem .5rem;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sheet) 33.3%, color-mix(in srgb, var(--sheet) 70%, var(--sheet-shade)) 33.3% 66.6%, var(--sheet) 66.6%);
  box-shadow: 0 1px 0 var(--hairline), 0 6px 12px -10px var(--shadow-ink);
  transform-origin: 50% 0;
  font-size: var(--text-m);
  line-height: 1.3;
}
.letter-slip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 3px 0 0 3px; background: var(--area); }
.diary-line { background: transparent; box-shadow: none; border: 1.5px dashed var(--crease); }
.ls-tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--area); }
.ls-line { color: var(--ink); }
.day-empty { align-self: center; padding-left: .5rem; font-size: var(--text-s); color: var(--ink-2); }
.letter-new { display: none; }
[data-state="handed"] .letter-new { display: grid; }
[data-state="handed"] .day-empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .week.is-breathing .day:not(.day-thu) .letter-slip { animation: o-breathe 900ms 300ms var(--ease-paper) both; }
  .week.is-breathing .day:nth-child(2) .letter-slip { animation-delay: 380ms; }
  .week.is-breathing .day:nth-child(3) .letter-slip { animation-delay: 460ms; }
}
@keyframes o-breathe {
  45% { transform: perspective(500px) rotateX(58deg) scaleY(.42); box-shadow: 0 1px 0 var(--hairline), 0 2px 4px -2px var(--shadow-ink); }
}

.messy { position: relative; padding: var(--s-3) var(--s-4); border-radius: 3px; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 12px 20px -14px var(--shadow-ink); transform: rotate(-1.2deg); transform-origin: 50% 0; }
.messy::after { content: ""; position: absolute; right: -6px; top: -8px; width: 34px; height: 16px; background: color-mix(in srgb, var(--area) 22%, var(--sheet-shade)); transform: rotate(18deg); opacity: .9; }
.messy-head { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.messy-text { margin-top: 4px; font-size: var(--text-m); line-height: 1.45; color: var(--ink); }
[data-state="handed"] .messy { display: none; }
.week-result { display: none; gap: var(--s-2); }
[data-state="handed"] .week-result { display: grid; }
.reply-slip, .diary-slip { padding: var(--s-3) var(--s-4); border-radius: 3px; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 8px 16px -12px var(--shadow-ink); font-size: var(--text-m); line-height: 1.45; }
.diary-slip { box-shadow: inset 0 0 0 1.5px var(--area); background: var(--area-tint); }
@media (prefers-reduced-motion: no-preference) {
  .week.is-filed .reply-slip { animation: o-rise 360ms var(--ease-paper) both; }
  .week.is-filed .diary-slip { animation: o-rise 360ms 90ms var(--ease-paper) both; }
  .week.is-filed .letter-new { animation: o-file 360ms var(--ease-paper) both; }
}
@keyframes o-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes o-file { from { opacity: 0; transform: perspective(500px) rotateX(-70deg); } }
.object-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.status:empty { min-height: 0; }

/* Panel 3: three ways in. */
.ways-q { color: var(--ink-2); margin-bottom: var(--s-4); }
.ways { display: grid; gap: var(--s-4); }
.ways .door .band { padding-block: .6rem; }
.ways .band-name { font-size: 1.25rem; }
.ways .band-price .price { white-space: normal; }
.pairing { margin-top: var(--s-5); padding: var(--s-4); border: 1.5px dashed var(--crease); border-radius: 4px; font-size: var(--text-m); line-height: 1.5; }

/* The evening, given back. */
.evening { display: grid; gap: var(--s-6); margin-top: var(--s-7); align-items: center; }
@media (min-width: 900px) { .evening { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.evening-print img { aspect-ratio: 3 / 2; object-fit: cover; }
.evening-words { display: grid; gap: var(--s-4); }
.evening-words h2 { font-size: var(--text-2xl); max-width: 16ch; }
.evening-words p { font-size: var(--text-l); line-height: 1.5; color: var(--ink-2); max-width: 44ch; }

/* An index of tabs: the other pages, filed like folders. */
.o-index { display: grid; gap: 6px; margin-top: var(--s-2); }
.o-index-tab { position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 var(--s-4) 0 calc(var(--s-4) + 10px); border-radius: 3px 14px 3px 3px; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 6px 14px -12px var(--shadow-ink); text-decoration: none; font-weight: 650; transition: transform var(--t-lift) var(--ease-paper); }
.o-index-tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; border-radius: 3px 0 0 3px; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); }
.o-index-tab::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--area); border-top: 2px solid var(--area); transform: rotate(45deg); flex: none; }
@media (hover: hover) { .o-index-tab:hover { transform: translateX(4px); } }
.o-index-tab:active { transform: scale(.99); }

/* ---- Front, phone: the band first, five closed slips, the week by day, the ways as doors */
@media (max-width: 719px) {
  .o-band { margin-inline: -4px; padding: var(--s-4) var(--s-4) var(--s-5); gap: var(--s-3); }
  .o-band h1 { font-size: clamp(1.85rem, 1.1rem + 3.6vw, 2.4rem); max-width: none; }
  .o-band-line { font-size: 1rem; }
  .o-band-call .seal { display: none; }
  .band-caps { font-size: var(--text-xs); }
  .slips { grid-template-columns: 1fr; gap: 4px; margin: -.5rem 0 0; }
  .slip { padding-top: .5rem; border-radius: 0 0 4px 4px; }
  .slip:not(:first-child) { padding-top: 0; border-radius: 4px; }
  .slip-face { grid-template-columns: 1fr auto; align-items: center; padding: .55rem var(--s-4) .6rem; min-height: 52px; }
  .slip-kind { grid-column: 1; font-size: .75rem; }
  .slip-price { grid-column: 1; font-size: 1.0625rem; padding-right: 0; }
  .slip-crease { position: static; grid-column: 2; grid-row: 1 / span 2; }
  .slip::after { display: none; }
  .tf-letter { margin-top: var(--s-5); }
  .tf-panels.swipe-track { position: static; background: transparent; box-shadow: none; gap: var(--s-3); align-items: start; scroll-padding-inline: 0; }
  .tf-panel { padding: var(--s-4); background: var(--sheet); border-radius: 4px; box-shadow: 0 1px 0 var(--hairline), 0 14px 24px -20px var(--shadow-ink); }
  .tf-panel .tf-title { font-size: 1.375rem; }
  /* The turn tabs: the letter's three panels named, the one in view marked. */
  .tf-turn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: var(--s-2); }
  .tf-turn-tab { width: 100%; min-height: 48px; padding: var(--s-2) var(--s-2); border: 0; border-bottom: 2px solid var(--hairline); background: transparent; color: var(--ink-2); font-size: var(--text-s); font-weight: 650; line-height: 1.2; text-align: left; transition: border-color var(--t-lift), color var(--t-lift); }
  .tf-turn-tab[aria-current="true"] { color: var(--ink); border-bottom-color: var(--area); }
  .tf-turn-tab:active { transform: scale(.98); }
  .day { grid-template-columns: 2.5rem 1fr; }
  .letter-slip, .diary-line { font-size: .9375rem; }
  .ways .door-line { padding-top: var(--s-2); padding-bottom: var(--s-3); }
  .evening { margin-top: var(--s-6); gap: var(--s-4); }
  .evening-words h2 { font-size: 1.6rem; }
  .evening-words p { font-size: var(--text-body); }
}
@media (max-width: 719px) {
  .ways { gap: 6px; }
  .ways-q { margin-bottom: var(--s-3); }
  .pairing { margin-top: var(--s-3); }
  .evening-print img { aspect-ratio: 16 / 9; }
  /* override: the foot, two columns on a phone so it is a card, not a column */
  .u-foot { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); font-size: var(--text-s); }
  .u-foot-sign { grid-column: 1 / -1; }
  .u-foot nav[aria-label="More"] { grid-column: 1 / -1; }
  .u-foot nav[aria-label="More"] ul { grid-template-columns: 1fr 1fr; column-gap: var(--s-3); }
}

/* ============================================================ INNER PAGES ==== */
/* The rest of the letter: every page's way on, filed as tabs, then the neighbours. */
.onward { margin-top: var(--s-8); }
.onward-h { font-family: var(--face-sans); font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-3); }
.onward-gap { margin-top: var(--s-6); }
.o-index-grid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 6px var(--s-3); }
.o-index-tab[aria-current="page"] { background: var(--area-tint); box-shadow: inset 0 0 0 1.5px var(--area); }
.o-index-tab[aria-current="page"]::after { border-color: transparent; }
.onward-doors { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
@media (max-width: 719px) {
  .onward { margin-top: var(--s-7); }
  /* A phone files the tabs two to a row, so the index is a card, not a column. */
  .o-index-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .o-index-grid .o-index-tab { min-height: 52px; padding-right: var(--s-2); font-size: var(--text-m); line-height: 1.2; }
  .o-index-grid .o-index-tab::after { display: none; }
}

/* The page's band foot: its pattern and the page's own seal. */
.page-band .band-caps { opacity: .95; }
.band-runs { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-1); padding: 0; list-style: none; }
.band-runs li { display: inline-flex; align-items: center; min-height: 2.25rem; padding: .2rem .7rem; border-radius: 3px; background: var(--sheet-raised); color: var(--area); font-weight: 700; font-size: var(--text-m); box-shadow: 0 2px 0 color-mix(in srgb, var(--area) 60%, black); }
.page-intro { margin-top: var(--s-6); max-width: 60ch; font-size: var(--text-l); line-height: 1.5; color: var(--ink-2); }
.page-intro b { color: var(--ink); font-weight: 650; }

/* The letter (About). */
.letter { position: relative; background: linear-gradient(180deg, var(--sheet-raised) 33.3%, color-mix(in srgb, var(--sheet-raised) 55%, var(--sheet-shade)) 33.3% 66.6%, var(--sheet-raised) 66.6%); padding: clamp(1.5rem, 1rem + 3vw, 4rem); box-shadow: 0 1px 0 var(--hairline), 0 26px 50px -38px var(--shadow-ink); display: grid; gap: var(--s-5); }
.letter::before, .letter::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.25rem; background: linear-gradient(var(--crease), var(--crease)) 0 33.3% / 100% 1px no-repeat, linear-gradient(var(--crease), var(--crease)) 0 66.6% / 100% 1px no-repeat; }
.letter::before { left: 0; }
.letter::after { right: 0; }
.letter > * { position: relative; z-index: 1; }
.letter blockquote { font-family: var(--face-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem); line-height: 1.3; letter-spacing: -.01em; max-width: 34ch; padding-left: var(--s-4); border-left: 2px solid var(--area); }
.letter blockquote p { margin: 0; }
.letter-sign { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.letter-sign a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .lt-ready .letter-top { animation: o-letter 520ms var(--ease-paper) both; transform-origin: 50% 100%; }
}
@keyframes o-letter { from { transform: perspective(1200px) rotateX(14deg); } }

/* The reply card (Book). */
.reply-title { font-size: var(--text-2xl); margin-block: var(--s-2) var(--s-3); color: var(--area); }
.reply-actions { display: grid; gap: var(--s-3); justify-items: start; }
.reply-routes { color: var(--ink-2); font-size: var(--text-m); }
.cover-line { font-size: clamp(1.125rem, 1rem + .5vw, 1.4rem); line-height: 1.4; max-width: 40ch; }

/* The crumpled sheet (404). */
.lost { max-width: 52rem; margin-top: var(--s-6); display: grid; gap: var(--s-5); justify-items: start; }
.lost h1 { font-size: var(--text-2xl); }
.lost-doors { display: grid; gap: var(--s-3); width: 100%; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cr-paper { fill: var(--sheet-raised); stroke: var(--crease); stroke-width: 1.5; }
.cr-line { fill: none; stroke: var(--crease); }
.cr-dash { stroke-dasharray: 4 4; }
.cr-ink { fill: var(--area); opacity: .85; }

/* ========================================================= MONTHLY HOURS ==== */
.month-tool { margin-top: var(--s-6); background: var(--sheet); border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 30px 60px -44px var(--shadow-ink); padding: clamp(1.25rem, 1rem + 1.8vw, 2.75rem); display: grid; gap: var(--s-5); }
.mt-head { display: grid; gap: var(--s-2); }
.mt-head h2 { font-size: var(--text-xl); }
.mt-for { color: var(--ink-2); max-width: 62ch; }
.plans { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.plans-legend { padding: 0; margin-bottom: var(--s-2); font-family: var(--face-sans); font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.plan { display: grid; gap: var(--s-2); scroll-margin-top: var(--s-6); }
/* The strip: her price run, then one paper cell per hour; its length is its hours. */
.plan-strip { position: relative; display: grid; grid-template-columns: 17rem 1fr; align-items: center; gap: var(--s-4); min-height: 52px; cursor: pointer; }
.plan-strip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.plan-run { display: flex; align-items: center; gap: var(--s-3); font-family: var(--face-display); font-weight: 780; font-size: 1.125rem; line-height: 1.2; color: var(--area); }
.plan-run::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--sheet-raised); box-shadow: inset 0 0 0 4px var(--sheet-raised); transition: background var(--t-lift); }
.plan-cells { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; max-width: 52rem; }
.plan-cells i { height: 2.25rem; border-radius: 2px; background: var(--sheet-raised); box-shadow: inset 0 0 0 1px var(--crease); transition: background 260ms var(--ease-paper), transform 260ms var(--ease-paper), box-shadow 260ms; }
.plan-strip:hover .plan-cells i { box-shadow: inset 0 0 0 1px var(--ink-2); }
.plan-strip:hover .plan-run::before { background: var(--sheet-shade); }
.plan-strip:active .plan-cells { transform: scale(.995); }
.plan-strip:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.plan-strip:has(input:checked) .plan-run::before { background: var(--area); }
.plan-strip:has(input:checked) .plan-cells i { background: var(--area); box-shadow: inset 0 0 0 1px var(--area); transform: translateY(-3px); }
.plan-strip:has(input:checked) .plan-cells i:nth-child(2) { transition-delay: 30ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(3) { transition-delay: 60ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(4) { transition-delay: 90ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(5) { transition-delay: 120ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(6) { transition-delay: 150ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(7) { transition-delay: 180ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(8) { transition-delay: 210ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(9) { transition-delay: 240ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(10) { transition-delay: 270ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(11) { transition-delay: 300ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(12) { transition-delay: 330ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(13) { transition-delay: 360ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(14) { transition-delay: 390ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(15) { transition-delay: 420ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(16) { transition-delay: 450ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(17) { transition-delay: 480ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(18) { transition-delay: 510ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(19) { transition-delay: 540ms; }
.plan-strip:has(input:checked) .plan-cells i:nth-child(20) { transition-delay: 570ms; }
.plan-more { display: grid; gap: var(--s-2); margin-left: calc(17rem + var(--s-4)); max-width: 52rem; font-size: var(--text-m); line-height: 1.45; }
@media (min-width: 1100px) { .plan-more { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); } }
.plan-more .hers q { font-size: 1.0625rem; }
.plans-terms { font-size: var(--text-m); color: var(--ink-2); margin-top: var(--s-2); max-width: 62ch; }

/* The sheet: the owner's month, and Laura's column beside it. */
.mt-sheet { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); align-items: start; }
.mt-label { font-family: var(--face-sans); font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s-2); }
.mweeks { display: grid; gap: 6px; }
.mweek { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-2); align-items: stretch; }
.mweek-n { font-size: var(--text-s); font-weight: 650; color: var(--ink-2); padding-top: var(--s-2); }
.mdays { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mday { min-height: 5.25rem; padding: 4px; border-radius: 3px; background: var(--sheet-shade); display: flex; flex-direction: column; gap: 3px; }
.mday-n { font-size: var(--text-xs); font-weight: 650; color: var(--ink-2); padding: 0 2px; }
.hr { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 6px; padding: 4px 6px; border-radius: 2px; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 4px 8px -6px var(--shadow-ink); font-size: var(--text-s); line-height: 1.25; }
.hr b { font-weight: 650; }
.hr-t { font-size: var(--text-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mt-laura { background: var(--area-tint); border-radius: 3px; padding: var(--s-3); box-shadow: inset 0 0 0 1.5px var(--area); }
.mt-laura .mt-label { color: var(--area); }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; counter-reset: slot; }
.slot { position: relative; min-height: 2.15rem; border-radius: 2px; border: 1px dashed color-mix(in srgb, var(--area) 45%, transparent); display: grid; }
.slot-n { position: absolute; right: 5px; top: 50%; translate: 0 -50%; font-size: var(--text-xs); color: color-mix(in srgb, var(--area) 70%, var(--ink-2)); font-variant-numeric: tabular-nums; }
.slot .hr { position: relative; z-index: 1; background: var(--sheet-raised); box-shadow: inset 3px 0 0 var(--area), 0 1px 0 var(--hairline); }
.slot:has(.hr) .slot-n { display: none; }
.mt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.mt-foot .status { flex: 1 1 20rem; }
.hours-other { margin-top: var(--s-7); }
.ways-row { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.hours-other .pairing { max-width: 62ch; }
@media (prefers-reduced-motion: reduce) { .plan-cells i { transition: none; } }

@media (max-width: 899px) {
  .plan-strip { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-2) 0; }
  .plan-more { margin-left: 0; }
  .mt-sheet { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
  .month-tool { margin-inline: calc(-1 * var(--gutter) + 6px); padding: var(--s-4); gap: var(--s-4); }
  .plans { gap: 4px; }
  .plan { padding: var(--s-2) var(--s-3); border-radius: 4px; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline); }
  .plan-run { font-size: 1.0625rem; }
  .plan-cells i { height: 1.4rem; }
  /* A phone opens the chosen plan's slip only: one open at a time. */
  .plan-more { display: none; padding: var(--s-2) 0 var(--s-1); border-top: 1px dashed var(--crease); }
  .plan:has(input:checked) .plan-more { display: grid; }
  .plans-terms { font-size: var(--text-s); }
  /* The month as a column of four weeks; Laura's column as a strip at its foot. */
  .mweek { grid-template-columns: 3.25rem 1fr; }
  .mdays { display: flex; flex-wrap: wrap; gap: 3px; }
  .mday { display: contents; }
  .mday-n { display: none; }
  .hr { padding: 3px 5px; font-size: var(--text-xs); }
  .hr-t { display: none; }
  .mweek-n { font-size: var(--text-xs); padding-top: 4px; }
  .slots { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .slot { min-height: 1.85rem; }
  .slot .hr b { font-size: var(--text-xs); }
  .mt-foot .chit { width: 100%; }
}

/* ========================================================= ONE-OFF FIXES ==== */
.detox { position: relative; margin-top: var(--s-7); scroll-margin-top: var(--s-5); }
/* One printed band round both envelopes: her one price run, unbroken. */
.detox-band { position: relative; z-index: 5; margin-inline: clamp(.5rem, 3vw, 3rem); padding-block: .8rem .85rem; box-shadow: 0 10px 18px -14px var(--shadow-ink); }
.detox-band .band-name { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.detox-band .band-price { font-size: 1.0625rem; }
.detox-line { margin: var(--s-3) clamp(.5rem, 3vw, 3rem) 0; color: var(--ink-2); font-size: var(--text-m); }
.envs { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); margin-top: var(--s-5); padding-inline: clamp(0rem, 2vw, 2rem); align-items: start; }
.env { position: relative; display: grid; scroll-margin-top: var(--s-6); }
.env-in { position: relative; z-index: 3; padding: var(--s-2) var(--s-3) var(--s-3); }
.lt-js .env:not(.is-open) .env-in { display: none; }
.env-in .scope-label { margin: 0 0 var(--s-3) var(--s-2); }
.folders { display: grid; gap: 7px; }
.folder { position: relative; padding: .65rem .9rem .6rem; margin-top: 6px; border-radius: 0 4px 3px 3px; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 8px 14px -12px var(--shadow-ink); font-weight: 600; font-size: var(--text-m); line-height: 1.3; transform-origin: 50% 100%; }
.folder:nth-child(even) { background: color-mix(in srgb, var(--sheet-raised) 70%, var(--area-tint)); margin-left: 8px; }
.folder-tab-mini { position: absolute; left: 0; top: -7px; width: 3.25rem; height: 8px; border-radius: 4px 6px 0 0; background: inherit; }
.env-front {
  position: relative;
  z-index: 2;
  min-height: 14rem;
  padding: 5.25rem var(--s-5) var(--s-5);
  border-radius: 4px;
  background: color-mix(in srgb, var(--sheet-raised) 78%, var(--area-tint));
  box-shadow: 0 1px 0 var(--hairline), 0 22px 36px -28px var(--shadow-ink);
  display: grid;
  align-content: end;
  gap: var(--s-1);
}
/* The envelope's seams, printed at rest. */
.env-front::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(to top right, transparent calc(50% - .6px), var(--crease) 50%, transparent calc(50% + .6px)) 0 100% / 50% 62% no-repeat, linear-gradient(to top left, transparent calc(50% - .6px), var(--crease) 50%, transparent calc(50% + .6px)) 100% 100% / 50% 62% no-repeat; opacity: .7; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 5.5rem; background: color-mix(in srgb, var(--sheet-raised) 55%, var(--area-tint)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transition: transform var(--t-fold) var(--ease-paper), filter var(--t-fold); filter: drop-shadow(0 3px 2px var(--shadow-ink-soft)); }
.env.is-open .env-flap, html:not(.lt-js) .env-flap { transform: perspective(900px) rotateX(-172deg); }
.env-stamp { position: absolute; right: var(--s-4); top: var(--s-4); width: 2.6rem; height: 3rem; border-radius: 2px; background: var(--area); -webkit-mask: var(--pattern) repeat 0 0 / var(--pattern-size); mask: var(--pattern) repeat 0 0 / var(--pattern-size); opacity: .55; }
.env-name { position: relative; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); color: var(--area); line-height: 1; }
.env-sub { position: relative; color: var(--ink-2); }
/* The flap's tab: tap it, or pull it down with a thumb (P). */
.env-open { position: absolute; left: 50%; top: 4.25rem; translate: -50% 0; z-index: 2; display: grid; justify-items: center; gap: 3px; min-width: 7.5rem; min-height: 48px; padding: 7px var(--s-3) 6px; border: 1.5px solid var(--ink); border-radius: 0 0 10px 10px; background: var(--sheet-raised); color: var(--ink); font-size: var(--text-s); font-weight: 650; touch-action: none; transition: transform var(--t-lift) var(--ease-paper); box-shadow: 0 6px 12px -8px var(--shadow-ink); }
.env-open:hover { transform: translateY(2px); }
.env-open:active { transform: scale(.97); }
.env-shut-t, .env.is-open .env-open-t { display: none; }
.env.is-open .env-shut-t { display: inline; }
.env.is-open .env-open { top: auto; bottom: var(--s-4); left: auto; right: var(--s-4); translate: none; border-radius: 10px; }
html:not(.lt-js) .env-open { display: none; }
@media (prefers-reduced-motion: reduce) { .env-flap, .env-open { transition: none; } }

/* The Power Hour: one card in three panels. */
.ph { display: grid; gap: var(--s-6); margin-top: var(--s-8); align-items: start; scroll-margin-top: var(--s-5); }
@media (min-width: 960px) { .ph { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); } }
.ph-cover { display: grid; gap: var(--s-4); }
.ph-band { margin: 0; padding-block: .8rem .85rem; }
.ph-band .band-name { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.ph-band::before, .ph-band::after { display: none; }
.ph-hers q { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.35; }
.ph-cover .scope { font-size: var(--text-m); color: var(--ink-2); }
.ph-card { background: var(--sheet); border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 30px 60px -44px var(--shadow-ink); padding: 0 var(--s-5) var(--s-5); }
.ph-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 calc(-1 * var(--s-5)) var(--s-4); }
.ph-tab { min-height: 48px; border: 0; border-bottom: 1.5px dashed var(--crease); background: var(--sheet-shade); color: var(--ink-2); font-weight: 650; font-size: var(--text-m); transition: background var(--t-lift), color var(--t-lift); }
.ph-tabs li:first-child .ph-tab { border-top-left-radius: var(--radius-paper); }
.ph-tabs li:last-child .ph-tab { border-top-right-radius: var(--radius-paper); }
.ph-tab[aria-current="true"] { background: var(--sheet); color: var(--area); border-bottom-color: transparent; }
.ph-tab:hover { color: var(--ink); }
.ph-panel { display: grid; gap: var(--s-3); align-content: start; min-height: 17rem; padding-inline: 2px; }
.ph-panel h3 { font-size: var(--text-xl); color: var(--area); }
.ph-step { font-size: var(--text-s); font-weight: 650; color: var(--ink-2); }
.ph-form, .ph-list { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: 3px; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 10px 18px -14px var(--shadow-ink); }
.ph-q { font-size: var(--text-s); font-weight: 650; color: var(--ink-2); margin-top: var(--s-2); }
.ph-a { padding-bottom: var(--s-2); border-bottom: 1px dashed var(--crease); }
.ph-actions { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s-2); }
.ph-actions li::marker { font-family: var(--face-display); font-weight: 800; color: var(--area); }
.ph-clock { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s-4); align-items: center; }
.ph-clock svg { width: 8.5rem; height: 8.5rem; }
.clk-face { fill: var(--sheet-raised); stroke: var(--crease); stroke-width: 1.5; }
.clk-hour { fill: none; stroke: var(--area); stroke-width: 10; stroke-dasharray: 60 60; transform: rotate(-90deg); transform-origin: 60px 60px; }
.clk-ticks { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.clk-hand { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.clk-pin { fill: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .ph-panel:target .clk-hour, .ph-clock.is-ticking .clk-hour { animation: o-hour 900ms var(--ease-paper) both; }
}
@keyframes o-hour { from { stroke-dashoffset: 60; } }
@media (max-width: 719px) {
  .ph-card { padding: 0 var(--s-4) var(--s-4); margin-inline: calc(-1 * var(--gutter) + 6px); }
  .ph-tabs { margin-inline: calc(-1 * var(--s-4)); }
  .ph-clock { grid-template-columns: 6rem 1fr; }
  .ph-clock svg { width: 6rem; height: 6rem; }
  .env-front { min-height: 12rem; padding: 4.75rem var(--s-4) var(--s-4); }
  .env-flap { height: 4.75rem; }
  .env-open { top: 3.6rem; }
  .envs { gap: var(--s-5); padding-inline: 0; }
}

/* The same price, two different things. */
.fixes-pair { margin-top: var(--s-8); max-width: 60rem; }
.pair-scale { display: grid; grid-template-columns: minmax(8rem, 1fr) 4fr; gap: 6px; margin-bottom: var(--s-4); }
.pair-side { display: grid; align-content: end; gap: 2px; min-height: 6.5rem; padding: var(--s-3); border-radius: 3px; font-size: var(--text-s); font-weight: 600; line-height: 1.25; }
.pair-side b { font-family: var(--face-display); font-weight: 820; font-size: 2.25rem; line-height: 1; color: var(--area); }
.pair-hour { background: var(--sheet-raised); box-shadow: inset 0 0 0 1.5px var(--area); }
.pair-five { background: var(--area-tint); background-image: linear-gradient(90deg, transparent calc(20% - 1px), color-mix(in srgb, var(--area) 35%, transparent) 20%, transparent calc(20% + 1px)); background-size: 20% 100%; }
@media (max-width: 520px) { .pair-scale { grid-template-columns: 1fr 2fr; } .pair-side { min-height: 5rem; } }
.ph > *, .detox > *, .envs > * { min-width: 0; }
/* The phone's letter panels are the same size, like a real letter's: the
   strip stretches every panel to the tallest, and each panel's foot sits low. */
@media (max-width: 719px) {
  .tf-panels.swipe-track { align-items: stretch; }
  .tf-panel { display: flex; flex-direction: column; }
  .tf-does-in { display: flex; flex-direction: column; flex: 1; }
  .does-sig { margin-top: auto; padding-top: var(--s-4); }
  .tf-week .letter-slip, .tf-week .diary-line { padding: .35rem .6rem .4rem; }
  .tf-week .day-cell { min-height: 0; }
  .tf-ways .pairing { margin-top: auto; }
  .does li { font-size: 1rem; padding-block: var(--s-2); }
}

/* ===================================================== HOW A MONTH WORKS ==== */
/* The stationery set: a concertina of six steps, flattening once in view (K);
   on a phone the same panels swipe one by one with buttons (W). */
.mw { margin-top: var(--s-7); }
.mw-track.swipe-track { box-shadow: 0 1px 0 var(--hairline), 0 30px 60px -44px var(--shadow-ink); }
.mw-pleat { display: grid; align-content: start; gap: var(--s-2); min-height: 17rem; padding: var(--s-5) var(--s-5) var(--s-6); }
.mw-pleat h2 { font-size: var(--text-l); color: var(--area); }
.mw-pleat p { font-size: var(--text-m); line-height: 1.5; }
.mw-step { font-size: var(--text-xs); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.mw-icon { width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--area); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--s-2); }
.mw-pleat + .mw-pleat { box-shadow: inset 1px 0 0 var(--hairline); }
@media (min-width: 720px) {
  .mw .swipe-controls { display: none; }
  .mw-track.swipe-track { display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); overflow: visible; scroll-snap-type: none; gap: 0; }
}
@media (min-width: 1280px) { .mw-track.swipe-track { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .mw-track.swipe-track { box-shadow: none; gap: var(--s-3); perspective: none; }
  .lt-js .mw-track.is-set .pleat, .lt-js .mw-track .pleat { transform: none; }
  .mw-pleat { min-height: 15rem; border-radius: 4px; box-shadow: 0 1px 0 var(--hairline), 0 14px 24px -20px var(--shadow-ink); background: var(--sheet-raised); }
  .mw-pleat + .mw-pleat { box-shadow: 0 1px 0 var(--hairline), 0 14px 24px -20px var(--shadow-ink); }
}

/* The note at the end of a week: a folded sheet that unfolds (F, P). */
.note-wrap { display: grid; gap: var(--s-5); margin-top: var(--s-8); align-items: start; }
@media (min-width: 960px) { .note-wrap { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } }
.wk-note { position: relative; background: var(--sheet-raised); border-radius: 2px; box-shadow: 0 1px 0 var(--hairline), 0 26px 44px -32px var(--shadow-ink); overflow: hidden; }
.wk-note::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--area); -webkit-mask: var(--pattern) repeat-x 0 0 / var(--pattern-size); mask: var(--pattern) repeat-x 0 0 / var(--pattern-size); }
.wk-note-head { display: grid; gap: 2px; padding: var(--s-5) var(--s-5) var(--s-4); }
.wk-note-to { font-family: var(--face-display); font-weight: 760; font-size: var(--text-l); margin-top: var(--s-2); }
.wk-note-week { color: var(--ink-2); font-size: var(--text-m); }
.wk-note-body { display: grid; gap: var(--s-4); padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px dashed var(--crease); background: linear-gradient(180deg, color-mix(in srgb, var(--sheet-raised) 70%, var(--sheet-shade)), var(--sheet-raised) 3rem); }
.wk-note-body h3 { font-family: var(--face-sans); font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--area); margin-bottom: var(--s-2); }
.wk-note-body section { transform-origin: 50% 0; }
.wk-note.is-folded { box-shadow: 0 1px 0 var(--hairline), 0 4px 0 -1px var(--sheet-shade), 0 8px 0 -2px var(--hairline), 0 22px 30px -26px var(--shadow-ink); }
.wk-shut-t, .wk-note.is-open .wk-open-t { display: none; }
.wk-note.is-open .wk-shut-t { display: inline; }
html:not(.lt-js) .wk-note-pull { display: none; }

/* ======================================================= WORKED EXAMPLE ==== */
.wx { margin-top: var(--s-6); background: var(--sheet); border-radius: var(--radius-paper); box-shadow: 0 1px 0 var(--hairline), 0 30px 60px -44px var(--shadow-ink); padding: clamp(1.25rem, 1rem + 1.8vw, 2.75rem); display: grid; gap: var(--s-5); }
.wx-top { display: grid; gap: var(--s-3); }
.wx-top h2 { font-size: var(--text-xl); }
.wx-chits .chit-input span { min-height: 48px; }
.wx-grid { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 1000px) { .wx-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.wx-left { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .wx-left { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; } }
.wx-pic { display: none; }
.wx-pic img { aspect-ratio: 4 / 3; object-fit: cover; }
.wx-inbox { display: none; gap: 6px; }
.wx:has(input[value="beauty"]:checked) [data-biz="beauty"],
.wx:has(input[value="trade"]:checked) [data-biz="trade"],
.wx:has(input[value="therapy"]:checked) [data-biz="therapy"],
.wx:has(input[value="office"]:checked) [data-biz="office"] { display: grid; }
.wx:has(input[value="beauty"]:checked) .wx-pic[data-biz="beauty"],
.wx:has(input[value="trade"]:checked) .wx-pic[data-biz="trade"],
.wx:has(input[value="therapy"]:checked) .wx-pic[data-biz="therapy"],
.wx:has(input[value="office"]:checked) .wx-pic[data-biz="office"] { display: block; }
/* A message, drawn at real size: who, when, the subject and its first lines. */
.msg { position: relative; display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: 3px; background: var(--sheet-raised); box-shadow: 0 1px 0 var(--hairline), 0 8px 16px -12px var(--shadow-ink); transform-origin: 50% 0; }
.msg::before { content: ""; position: absolute; left: var(--s-2); top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--area); }
.msg { padding-left: calc(var(--s-4) + 6px); }
.msg-head { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--text-s); }
.msg-time { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.msg-subj { font-weight: 650; }
.msg-body { font-size: var(--text-m); color: var(--ink-2); line-height: 1.45; }
.wx-empty { display: none; padding: var(--s-4); border: 1.5px dashed var(--crease); border-radius: 4px; color: var(--ink-2); font-size: var(--text-m); }
.wx[data-state="handed"] .wx-empty { display: block; }
/* The four trays, and a filed message folded down to its subject. */
.trays { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.tray { min-height: 7.5rem; padding: var(--s-2) var(--s-3) var(--s-3); border-radius: 4px; background: var(--sheet-shade); box-shadow: inset 0 2px 6px -3px var(--shadow-ink); display: grid; align-content: start; gap: var(--s-2); }
.tray-h { font-family: var(--face-sans); font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--area); }
.tray-list { display: grid; gap: 4px; }
.tray .msg { padding: var(--s-2) var(--s-3) var(--s-2) calc(var(--s-3) + 6px); box-shadow: 0 1px 0 var(--hairline); }
.tray .msg-body, .tray .msg-time { display: none; }
.tray .msg-head { font-size: var(--text-xs); }
.tray .msg-subj { font-size: var(--text-s); }
.wx-result { display: none; gap: var(--s-2); margin-top: var(--s-3); }
.wx[data-state="handed"] .wx-result, html:not(.lt-js) .wx-result { display: grid; }
.wx-res { display: none; gap: var(--s-2); }
.wx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.wx-hand[aria-disabled="true"] { opacity: .5; }
html:not(.lt-js) .wx-foot .object-actions { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .wx.is-filed .wx-res .reply-slip { animation: o-rise 360ms var(--ease-paper) both; }
  .wx.is-filed .wx-res .diary-slip { animation: o-rise 360ms 90ms var(--ease-paper) both; }
}
.wx-after { margin-top: var(--s-7); max-width: 62rem; display: grid; gap: var(--s-3); }
@media (max-width: 719px) {
  .wx { margin-inline: calc(-1 * var(--gutter) + 6px); padding: var(--s-4); gap: var(--s-4); }
  .wx-chits { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .wx-chits .chit-input span { width: 100%; }
  .wx-pic img { aspect-ratio: 16 / 9; }
  /* The inbox as a stack: one message at a time on top, the rest beneath. */
  .wx-inbox { gap: 0; padding-bottom: 22px; }
  .wx-inbox .msg { grid-area: 1 / 1; }
  .wx-inbox .msg:nth-child(2) { transform: translateY(8px) scale(.97); z-index: -1; }
  .wx-inbox .msg:nth-child(3) { transform: translateY(15px) scale(.94); z-index: -2; }
  .wx-inbox .msg:nth-child(4) { transform: translateY(22px) scale(.91); z-index: -3; }
  .wx-inbox-wrap { position: relative; z-index: 0; isolation: isolate; }
  .wx-inbox .msg:nth-child(n+2) > * { visibility: hidden; }
  /* The trays as four rows. */
  .trays { grid-template-columns: 1fr; gap: 4px; }
  .tray { min-height: 3.25rem; grid-template-columns: 6.5rem 1fr; align-items: center; padding: var(--s-2) var(--s-3); }
  .tray-list { display: flex; flex-wrap: wrap; gap: 4px; }
  .wx-foot .object-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
}

/* ============================================================ YOUR DATA ==== */
.env-big { margin-top: var(--s-7); max-width: 64rem; margin-inline: auto; }
.env-big .env-front { min-height: 19rem; padding: 7rem clamp(1.5rem, 1rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.env-big .env-flap { height: 7.5rem; }
.env-big .env-open { top: 6.1rem; }
.env-big .env-name { font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem); }
.env-big .env-sub { max-width: 44ch; font-size: var(--text-l); }
.data-seal { position: absolute; left: clamp(1.5rem, 1rem + 3vw, 3.5rem); top: 1.25rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--area); box-shadow: inset 0 0 0 2px var(--area); z-index: 2; }
.data-seal svg { width: 1.3rem; height: 1.55rem; }
.env-big.is-open .data-seal { opacity: 0; }
.data-letter { display: grid; gap: var(--s-4); }
@media (min-width: 860px) { .data-letter { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.data-true, .data-qs { background: var(--sheet-raised); border-radius: 3px; padding: var(--s-5); box-shadow: 0 1px 0 var(--hairline), 0 12px 24px -18px var(--shadow-ink); display: grid; gap: var(--s-3); align-content: start; transform-origin: 50% 100%; }
.data-hers { font-family: var(--face-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.3; }
.q-picks { display: grid; gap: 4px; }
.q-pick { position: relative; display: flex; gap: var(--s-3); align-items: flex-start; min-height: 48px; padding: var(--s-2) var(--s-3); border-radius: 4px; cursor: pointer; font-size: var(--text-m); line-height: 1.4; transition: background var(--t-lift); }
.q-pick:hover { background: var(--sheet-shade); }
.q-pick input { flex: none; width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--area); }
.q-pick:has(input:not(:checked)) span { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--crease); }
.q-actions { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; }
html:not(.lt-js) .q-actions .chit { display: none; }
.data-next { margin-top: var(--s-7); max-width: 62rem; display: grid; gap: var(--s-3); }
@media (max-width: 719px) {
  .env-big .env-front { min-height: 15rem; padding: 6rem var(--s-4) var(--s-4); }
  .env-big .env-flap { height: 6rem; }
  .env-big .env-open { top: 4.85rem; }
  .data-seal { top: 1rem; left: var(--s-4); width: 2.75rem; height: 2.75rem; }
  .env-big .env-sub { font-size: var(--text-body); }
  .data-true, .data-qs { padding: var(--s-4); }
}

/* ============================================================ QUESTIONS ==== */
/* An index-card box filed by worry: dividers on a laptop, tabs on a phone. */
.q-box { margin-top: var(--s-6); background: var(--sheet-shade); border-radius: 6px; padding: clamp(1rem, .8rem + 1.2vw, 2rem); box-shadow: inset 0 3px 10px -6px var(--shadow-ink), 0 1px 0 var(--hairline); }
.q-tabs { display: none; }
.q-groups { display: grid; gap: var(--s-5) var(--s-4); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; }
.q-divider { display: flex; margin-bottom: var(--s-3); font-family: var(--face-sans); font-size: var(--text-s); font-weight: 650; letter-spacing: var(--track-caps); text-transform: uppercase; }
.q-divider span { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 var(--s-4); border-radius: 8px 8px 0 0; background: var(--area); color: var(--band-text); }
.q-group .cards { gap: 6px; }
.q-group .card-q > summary { font-family: var(--face-display); font-weight: 700; line-height: 1.3; }
.q-more { margin-top: var(--s-5); color: var(--ink-2); }
@media (max-width: 719px) {
  .q-box { margin-inline: calc(-1 * var(--gutter) + 6px); padding: 0 var(--s-3) var(--s-4); }
  .lt-js .q-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: 0 calc(-1 * var(--s-3)) var(--s-4); padding-top: var(--s-3); }
  .q-tab { width: 100%; min-height: 52px; padding: var(--s-2) 4px; border: 0; border-radius: 8px 8px 0 0; background: var(--sheet); color: var(--ink-2); font-size: var(--text-s); font-weight: 650; line-height: 1.15; transition: background var(--t-lift), color var(--t-lift), transform var(--t-lift) var(--ease-paper); }
  .q-tab[aria-selected="true"] { background: var(--area); color: var(--band-text); transform: translateY(-3px); }
  .lt-js .q-group:not(.is-shown) { display: none; }
  .lt-js .q-divider { display: none; }
  .q-groups { grid-template-columns: 1fr; }
}

/* ============================================================ ABOUT ==== */
.page-about .letter h1 { font-size: var(--text-2xl); color: var(--area); }
.letter-tag { font-family: var(--face-display); font-weight: 700; font-size: var(--text-l); margin-top: var(--s-2); }
.letter-panels { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .letter-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .letter-panel { padding-inline: var(--s-5); } .letter-panel:first-child { padding-left: 0; } .letter-panel + .letter-panel { border-left: 1px dashed var(--crease); } }
.letter-panel { display: grid; gap: var(--s-3); align-content: start; }
.letter-panel blockquote { font-size: clamp(1.1875rem, 1rem + .6vw, 1.5rem); }

/* ============================================================ BOOK ==== */
.reply-prices { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px dashed var(--crease); }
.reply-prices .band-runs li { background: var(--area-tint); box-shadow: none; }
.page-book .reply-card { margin-inline: auto; }
.page-lost .lost { margin-inline: auto; }
/* The flap, drawn: a darker paper with a crease along both edges. */
.env-flap { background: color-mix(in srgb, var(--crease) 55%, var(--sheet-raised)); filter: none; }
.env-flap::before { content: ""; position: absolute; inset: 0 2px 2px; background: color-mix(in srgb, var(--area-tint) 65%, var(--sheet-shade)); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env.is-open .env-flap::before, html:not(.lt-js) .env-flap::before { background: color-mix(in srgb, var(--sheet-shade) 80%, var(--crease)); }

/* The front, on a laptop: ONE letter. The band is printed across the top of the
   sheet, the slips tucked under it, and the two creases run the whole height. */
@media (min-width: 1000px) {
  .tf-sheet { position: relative; background: var(--sheet); box-shadow: 0 1px 0 var(--hairline), 0 40px 70px -50px var(--shadow-ink); }
  .tf-sheet::before, .tf-sheet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; z-index: 0; background: repeating-linear-gradient(180deg, var(--crease) 0 5px, transparent 5px 9px); pointer-events: none; }
  .tf-sheet::before { left: calc(100% * .95 / 3.05); }
  .tf-sheet::after { left: calc(100% * 2.1 / 3.05); }
  .tf-sheet .slips-wrap { padding-bottom: var(--s-2); }
  .tf-sheet .tf-letter { margin-top: var(--s-4); }
  .tf-sheet .tf-panels { background: transparent; box-shadow: none; }
  .tf-sheet .tf-panel + .tf-panel::before { display: none; }
  .tf-sheet .tf-week { background: color-mix(in srgb, var(--sheet) 55%, var(--sheet-shade)); }
}
/* Tablet: the five slips file three and two, so each price reads whole. */
@media (min-width: 720px) and (max-width: 999px) {
  .slips { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 0; }
}
/* Open, the flap's tab sits in the flow at the envelope's foot, never over its words. */
.env.is-open .env-open { position: relative; top: auto; bottom: auto; left: auto; right: auto; translate: none; justify-self: start; margin-top: var(--s-3); }
@media (max-width: 719px) {
  /* The neighbours on a phone: name and price only, one row each. */
  .neighbours .door-line { display: none; }
  .neighbours ul { gap: 6px; }
  .neighbours .door .band { margin-block: 0; }
}
@media (max-width: 719px) {
  .neighbours .door { grid-template-areas: "edge band"; }
  .neighbours .door .band { margin-right: 0; border-radius: 0 var(--radius-tag) var(--radius-tag) 0; min-height: 3rem; align-content: center; }
  .neighbours .door .band::after { display: none; }
}
@media (max-width: 719px) {
  .mw-track.swipe-track { grid-template-columns: none; grid-auto-columns: 100%; grid-auto-flow: column; }
}
@media (max-width: 719px) {
  .env-big .env-front { padding-top: 8.75rem; }
  .env-front { padding-top: 7rem; }
}

/* The cancellation line beside every price block (truth table, "On every price block"). */
.fourteen-line { margin-top: var(--s-2); font-size: var(--text-s); color: var(--ink-2); }
.fourteen-line .fourteen { color: inherit; }
.slips-fourteen { margin: var(--s-2) clamp(.5rem, 2vw, 1.5rem) 0; }
.detox-fourteen { margin-inline: clamp(.5rem, 3vw, 3rem); }
.u-sheet .fourteen-line { margin-top: 0; }
.card-a .fourteen-line { margin-top: var(--s-2); }
@media (max-width: 719px) { .slips-fourteen { margin-inline: 0; } }
@media (min-width: 1000px) { .slips-fourteen { display: table; padding: 0 .4rem; background: var(--sheet); } }

/* Footer theme reset: Theme: match my device (clears lt-theme) */
.foot-theme { display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.foot-theme:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }