/* ============================================================
   PROTOCOL
   A clinical chart for a 26-week MCAT run.

   Direction — the subject is an OR, not an office. Bone-white
   chart paper, blue-black ink, instrument numerals. One
   continuous hairline is the signature: it draws the hero,
   then becomes the rules, then becomes the chart axes.
   No enclosures. Nothing is in a box.
   ============================================================ */

/* ---------- 1. tokens ---------- */

:root {
  /* paper & ink — warm cream over deep navy-charcoal, the palette those
     aesthetic presentation decks run on */
  --paper:      #F5F1EA;
  --paper-2:    #EFE9DE;
  --paper-3:    #E7DFD1;
  --ink:        #1F2A33;
  --ink-2:      #56626C;
  --ink-3:      #8A8579;
  --rule:       #DED5C6;
  --rule-soft:  #EBE4D8;
  --sand:       #E3D6C2;   /* the mat behind framed images */
  --mat:        #F7F3EC;   /* stays light in both themes: plates sit on paper */

  /* the arch — the shape every one of those decks frames its pictures with */
  /* lift, not fill — a cell sits on the page's own paper and is separated
     by shadow alone */
  --card-fill:  var(--paper);
  --shade:      0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
                0 4px 12px color-mix(in srgb, var(--ink) 6%, transparent);
  --shade-lift: 0 2px 4px color-mix(in srgb, var(--ink) 10%, transparent),
                0 10px 24px color-mix(in srgb, var(--ink) 9%, transparent);
  --shade-flat: 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);

  --arch:       46% 46% 5px 5px / 38% 38% 5px 5px;
  --arch-wide:  150px 150px 6px 6px;

  /* rooms — every value below cleared the six data-viz checks against both
     surfaces: OKLCH lightness band, chroma floor, and WCAG >= 4.5 contrast.
     Do not hand-tune these; regenerate them. */
  --a-cal:     #0B6A75;
  --a-today:   #117034;
  --a-plan:    #355BA3;
  --a-method:  #825B00;
  --a-scores:  #853F7C;
  --a-log:     #973C30;

  /* charts carry one accent plus one neutral. identity in every categorical
     chart here comes from the row's text label, so hue stays decorative and
     there is no four-colour scheme to mis-read. */
  --mark-2:    #9AA3A6;

  /* the streak grid has its own colour, held steady across all five rooms so
     the streak always looks like itself. cleared the same checks as the
     accents: OKLCH chroma floor and >= 4.5 contrast on both surfaces.
     For a plant green instead, swap for #007835 / dark #24AE56. */
  --heat:      #007095;

  /* the live room accent, swapped by JS */
  --accent:      var(--a-today);
  --accent-wash: rgba(17,112,52,.06);

  /* type */
  --f-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-body:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --slow: .78s;
  --med:  .42s;
  --fast: .22s;

  /* metrics */
  --rail: clamp(240px, 15vw, 300px);
  --gut:  clamp(22px, 3.4vw, 92px);
  /* wide enough to actually fill a large display. prose keeps its own ch caps
     below, so the measure stays readable however wide the page gets. */
  --max:  2160px;
}

:root[data-theme="dark"],
:root[data-theme="auto"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { color-scheme: dark; }
}

/* dark palette — every text token brightens, no exceptions.
   the previous build died on hardcoded greys; there are none here. */
:root[data-theme="dark"],
:root[data-theme="auto"].sys-dark {
  --paper:      #1E2733;
  --paper-2:    #243040;
  --paper-3:    #2B3849;
  --ink:        #F1EBE0;
  --ink-2:      #B4B6B4;
  --ink-3:      #8A8F94;
  --rule:       #38455460;
  --rule-soft:  #2C3948;
  --sand:       #33415280;

  --a-cal:     #3FB8C8;
  --a-today:   #58B670;
  --a-plan:    #6F9DF2;
  --a-method:  #CA9423;
  --a-scores:  #CF7DC4;
  --a-log:     #E67B6B;

  --mark-2:    #7C8792;
  --heat:      #00B1CE;

  --card-fill:  color-mix(in srgb, var(--ink) 4%, transparent);
  --shade:      inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent),
                0 3px 10px rgba(0, 0, 0, .30);
  --shade-lift: inset 0 0 0 1px color-mix(in srgb, var(--ink) 16%, transparent),
                0 8px 22px rgba(0, 0, 0, .42);
  --shade-flat: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);

  --accent-wash: rgba(88,182,112,.08);
  color-scheme: dark;
}

/* ---------- 2. reset & base ---------- */

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

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

body {
  margin: 0;
  overflow-x: clip; /* insurance: the page must never scroll sideways */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16.5px;
  font-weight: 450;
  line-height: 1.66;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--slow) var(--ease), color var(--med) var(--ease);
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }

::selection { background: var(--accent); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* the ambient wash — the only "background" in the design.
   it drifts with scroll and cross-fades between rooms. */
.wash {
  position: fixed;
  inset: -20vh -10vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58vw 52vh at 78% 8%,  var(--accent-wash), transparent 68%),
    radial-gradient(48vw 46vh at 6%  92%, var(--accent-wash), transparent 66%);
  transition: background var(--slow) var(--ease), transform 1.1s var(--ease);
  will-change: transform;
}

/* ---------- photographs ----------
   Drop files into assets/img/ and these layers switch themselves on:
     bg-1 … bg-4   the Today background, slow crossfade + Ken Burns drift
     hero          the wide image under the headline
   Accepted extensions: jpg, jpeg, png, webp. Nothing else to configure. */

.photos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  /* an opaque paper backdrop: mix-blend-mode below needs something inside
     this stacking context to blend against, or it silently does nothing */
  background: var(--paper);
  transition: opacity 1.4s var(--ease);
}
.photos.ready { opacity: 1; }

/* Collage elements, not full-bleed photographs.
   Each one is cropped in to its subject, dissolved to nothing at the edges
   so the surrounding scene never shows, and drained of colour so a brown
   café table becomes a soft grey shape that belongs to the page. */
.ph {
  position: absolute;
  display: none;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  filter: grayscale(1) contrast(1.06);
  transition: opacity 2.4s var(--ease);
  animation: float 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
  /* the soft round cut: solid at the centre, gone well before the corners */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 71%);
          mask-image: radial-gradient(circle at 50% 50%, #000 38%, transparent 71%);
}
.ph.live { display: block; }
.ph.live.on { opacity: .34; }
:root[data-theme="dark"] .ph.live.on,
:root[data-theme="auto"].sys-dark .ph.live.on { opacity: .26; }

/* anatomical plates are ink on white paper. `darken` keeps the ink and drops
   the paper; in dark mode the plate is inverted first so the ink turns pale
   and `lighten` keeps it — otherwise the white floods the page. */
.ph.diagram { mix-blend-mode: darken; }
.ph.live.on.diagram { opacity: .42; }
:root[data-theme="dark"] .ph.diagram,
:root[data-theme="auto"].sys-dark .ph.diagram {
  filter: grayscale(1) invert(1);
  mix-blend-mode: lighten;
}
:root[data-theme="dark"] .ph.live.on.diagram,
:root[data-theme="auto"].sys-dark .ph.live.on.diagram { opacity: .3; }

/* each element drifts on its own clock */
@keyframes float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-10px, -16px, 0) scale(1.07); }
}

@keyframes ken {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.6%, -1.2%, 0); }
}

/* no scrim: the collage elements are small, faint and sit at the margins,
   so there is nothing to shield the reading column from */

/* the hero photograph — edges masked so it melts into the paper
   instead of sitting in a hard rectangle */
.hero__photo {
  position: relative;
  margin: 42px 0 0;
  aspect-ratio: 20 / 7;
  overflow: hidden;
  /* soft edges so the photo melts into the paper. two masks on one element
     needs mask-composite, which silently drops to a single layer in some
     engines — so the axes are split across nested elements instead, which
     intersects by construction. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.hero__photo-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.hero__photo-img {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  animation: ken 34s ease-in-out infinite alternate;
  will-change: transform;
}

/* colour is drained most of the way out so photographs sit quietly with the
   grey collage instead of shouting past it */
.hero__photo-img { filter: grayscale(.78) contrast(1.03); }

/* a plate is ink on white — a white slab on a dark page. desaturate BEFORE
   inverting: inverting a colour plate flips its hues too, which turns pink
   lungs green. grayscale first gives a clean monochrome negative. */
.hero__photo.diagram .hero__photo-img { filter: grayscale(1) contrast(1.05); }
:root[data-theme="dark"] .hero__photo.diagram .hero__photo-img,
:root[data-theme="auto"].sys-dark .hero__photo.diagram .hero__photo-img {
  filter: grayscale(1) invert(1) contrast(1.05);
}
.hero__photo.diagram { opacity: .86; }

@media (max-width: 700px) { .hero__photo { aspect-ratio: 4 / 3; } }

/* the ambient desk — line art that lives behind Today only.
   fixed to the viewport so it never fights the content column for space. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
:root[data-room="today"] .ambient { opacity: 1; }

.amb {
  position: absolute;
  color: var(--ink-3);
  opacity: .26;
}
.amb path, .amb ellipse, .amb circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.amb .leafy { fill: color-mix(in srgb, var(--accent) 9%, transparent); }

.amb--branch { top: -26px;   right: 1%;  width: 168px; }
.amb--cup    { top: 44%;     right: -8px; width: 128px; }
.amb--fern   { bottom: 4%;   right: 3%;  width: 148px; }
.amb--specs  { bottom: 34px; left: calc(var(--rail) + 18px); width: 152px; }

/* a slow breath, not a wobble */
.sway { transform-origin: 50% 100%; animation: sway 13s ease-in-out infinite; }
.sway--slow { animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.3deg); }
}

@media (max-width: 1000px) { .ambient { display: none; } }

/* ---------- 3. type ---------- */

.display {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.55rem, 4.6vw, 5.6rem);
  line-height: .99;
  letter-spacing: -.024em;
}

.h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.3vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -.018em;
}

.h3 {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: -.012em;
}

.label {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

.dim  { color: var(--ink-2); }
.dim2 { color: var(--ink-3); }

.num {
  font-family: var(--f-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.accent { color: var(--accent); }

/* the hairline. the single most-used object on the page. */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
  transform-origin: left;
}

/* ---------- 4. shell ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100vh;
}

/* grid items default to min-width:auto, so the hero SVG's intrinsic viewBox
   width would otherwise push the whole column past the viewport */
.shell > * { min-width: 0; }

/* --- rail --- */
.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px 0 24px;
  border-right: 1px solid var(--rule);
}

.rail__mark {
  padding: 0 24px 26px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.rail__mark b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -.02em;
}

.rail__mark span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav { display: flex; flex-direction: column; padding: 6px 0; gap: 2px; }

.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 24px;
  color: var(--ink-2);
  text-align: left;
  transition: color var(--med) var(--ease), padding-left var(--med) var(--ease),
              background var(--med) var(--ease);
}

/* the active tab is marked by a bar and a wash that fades out to the right —
   distinct, but with no edge on three sides, so it never reads as a box */
.nav__item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2.5px; height: 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height var(--med) var(--ease);
}

.nav__item:hover {
  color: var(--ink);
  padding-left: 28px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 88%);
}
.nav__item:hover::before { height: 18px; }

.nav__item.is-on {
  color: var(--ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 92%);
}
.nav__item.is-on::before { height: 30px; }

.nav__item i {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .06em;
  transition: color var(--med) var(--ease);
}
.nav__item.is-on i { color: var(--accent); }

.nav__item b { font-weight: 550; font-size: 17.5px; letter-spacing: -.014em; }
.nav__item.is-on b { font-weight: 650; }

.rail__foot { margin-top: auto; padding: 0 24px; }

.rail__stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
}
.rail__stat dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rail__stat dd { margin: 0; font-family: var(--f-mono); font-size: 14.5px; font-variant-numeric: tabular-nums; }

/* theme switch */
.theme {
  display: flex;
  gap: 2px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

.theme button {
  flex: 1;
  padding: 5px 0;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--fast) var(--ease);
}
.theme button:hover { color: var(--ink); }
.theme button.is-on { color: var(--accent); }

/* --- main --- */
.main {
  /* the reveal completes as a block passes the middle of the screen, so the
     page must scroll far enough for the LAST block to get there — hence a
     bottom margin of well over half a viewport */
  padding: 0 var(--gut) max(140px, 62vh);
  max-width: calc(var(--max) + var(--gut) * 2);
}

.room { display: none; }
.room.is-on { display: block; }

/* ---------- 5. reveal (two-way — fades out on the way back up) ---------- */

.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; }

/* Scroll-linked, not scroll-triggered. With a view() timeline the reveal is
   driven by scroll POSITION rather than a fixed duration — so it moves at
   exactly the speed you scroll, stops when you stop, and runs backwards when
   you scroll up. The transition version above stays as the fallback for
   engines without scroll-driven animation. */
@supports (animation-timeline: view()) {
  .rv {
    transition: none;
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 46%;
  }
  .rv.in { opacity: 0; transform: translateY(16px); }   /* the timeline decides */
}
@keyframes reveal {
  to { opacity: 1; transform: none; }
}

/* repeated rows travel less than whole sections, so a long list reads as one
   movement rather than a queue of separate ones */
.wk.rv, .day.rv, .steps li.rv, .spine__g li.rv, .stat.rv { transform: translateY(9px); }
@supports (animation-timeline: view()) {
  .wk.rv, .day.rv, .steps li.rv, .spine__g li.rv, .stat.rv {
    animation-range: entry 4% cover 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- 6. hero ---------- */

/* Words on the left, photograph on the right — the asymmetric split those
   presentation layouts use. The image is shown as it is: no mask, no blend,
   no desaturation. Just cropped to the panel. */
.hero {
  padding: clamp(36px, 5vh, 64px) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 3vw, 44px);
  align-items: center;
}
.hero:has(.hero__shot:not([hidden])) { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
.hero__text { min-width: 0; }

.hero__shot {
  margin: 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
}
/* `display` beats the hidden attribute, so say it explicitly — otherwise an
   empty frame renders on any tab that has no photograph */
.hero__shot[hidden] { display: none; }
/* same reasoning as the bands: fit a plate whole, crop a photograph */
.hero__shot.shot--plate img { object-fit: contain; }
.hero__shot img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  max-height: 420px;
  object-fit: cover;
  display: block;
  border-radius: var(--arch);
  border: 1px solid var(--rule);
  background: var(--sand);
}

/* the offset outline those decks set behind a framed picture */
.hero__shot::after {
  content: '';
  position: absolute;
  inset: 26px -20px -20px 26px;
  border: 1px solid var(--accent);
  border-radius: var(--arch);
  opacity: .3;
  z-index: -1;
  pointer-events: none;
  transition: border-color var(--slow) var(--ease);
}
.hero__shot { position: relative; }

/* a plate is ink on white; it keeps a light mat in both themes rather than
   being inverted, so the drawing stays exactly as it was printed */
.shot--plate img, .band--plate img { background: var(--mat); }

/* the scene sits below the split, spanning both columns */
.hero .scene { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .hero:has(.hero__shot:not([hidden])) { grid-template-columns: 1fr; }
  .hero__shot img { min-height: 200px; max-height: 300px; }
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin-bottom: 26px;
}
.hero__eyebrow s { flex: 1; height: 1px; background: var(--rule); text-decoration: none; }

.hero__title em {
  font-style: italic;
  color: var(--accent);
  transition: color var(--slow) var(--ease);
}

.hero__sub {
  margin-top: 26px;
  max-width: 54ch;
  font-size: 18.5px;
  line-height: 1.56;
  color: var(--ink-2);
}

/* the scene: one unbroken stroke, drawn on load */
/* the drawing has a natural size — let the page grow past it rather than
   inflating the line art to fill an ultrawide screen */
.scene { width: 100%; max-width: 1080px; height: auto; margin: 18px 0 0; overflow: visible; }

.scene path, .scene line, .scene circle, .scene ellipse {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.scene .faint { stroke: var(--rule); }
.scene .soft  { stroke: var(--ink-3); }
.scene .hot   { stroke: var(--accent); transition: stroke var(--slow) var(--ease); }
.scene .fillc { fill: var(--accent); stroke: none; opacity: .12; transition: fill var(--slow) var(--ease); }

.draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 1.5s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.steam {
  stroke-dasharray: 3 5;
  opacity: 0;
  animation: steam 3.4s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes steam {
  0%   { opacity: 0; stroke-dashoffset: 0;  transform: translateY(2px); }
  22%  { opacity: .55; }
  78%  { opacity: .2; }
  100% { opacity: 0; stroke-dashoffset: -28; transform: translateY(-9px); }
}

/* the lid swings up off the base */
.lid { transform-box: view-box; transform-origin: 107px 155px; animation: lid 1.5s var(--ease) .35s backwards; }
@keyframes lid { from { transform: rotate(92deg); } to { transform: rotate(0deg); } }

/* the pot tips, holds, and comes back */
.pot { transform-box: view-box; transform-origin: 287px 122px; animation: pour 3s var(--ease) 1.45s backwards; }
@keyframes pour {
  0%, 8%   { transform: rotate(0deg); }
  32%, 74% { transform: rotate(-38deg); }
  100%     { transform: rotate(0deg); }
}

/* the cup fills */
#brew { transform-box: view-box; transform-origin: 258px 161px; animation: brew 2.1s var(--ease) 2.1s backwards; }
@keyframes brew { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.rise { animation: rise 1.4s var(--ease) forwards; animation-delay: var(--d, 0s); opacity: 0; }
@keyframes rise { to { opacity: 1; } }

/* ---------- 6b. image bands ----------
   A wide photograph set between sections, shown as it is — no mask, no
   blend, no desaturation. Slots with no file are removed outright, so the
   page never carries an empty frame. */
.band {
  display: block;
  margin: clamp(46px, 6vh, 80px) 0 0;
  overflow: visible;
}
.band[hidden] { display: none; }
.band img {
  display: block;
  width: 100%;
  /* taller than the width demands, so `cover` crops less and you see more
     of the photograph rather than a narrow strip through the middle */
  height: clamp(230px, 34vh, 380px);
  object-fit: cover;
  border-radius: var(--arch-wide);
  border: 1px solid var(--rule);
  transition: transform 1.2s var(--ease);
}
.band:hover img { transform: scale(1.02); }

/* A plate is a tall, ink-on-white figure. Full width it either gets cropped
   to a strip or floats marooned in the middle of the column — so it takes
   half the width and sits against one edge, the way the hero image does.
   Sides alternate down the page. */
.band--plate {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  overflow: visible;
}
.band__cap { max-width: 36ch; }
.band__cap .label { display: block; margin-bottom: 10px; color: var(--accent); }
.band__cap p { color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
.band--plate img {
  object-fit: contain;
  /* tall enough that a portrait plate actually fills its half of the page
     rather than sitting as a small strip inside it */
  height: clamp(300px, 46vh, 520px);
  border-radius: var(--arch);
}
.band--plate:hover img { transform: none; }
.band--right img       { grid-column: 2; grid-row: 1; }
.band--right .band__cap { grid-column: 1; grid-row: 1; }
.band--left  img       { grid-column: 1; grid-row: 1; }
.band--left  .band__cap { grid-column: 2; grid-row: 1; }

@media (max-width: 760px) {
  .band--plate { grid-template-columns: 1fr; }
  .band--plate img, .band--plate .band__cap { grid-column: 1; grid-row: auto; }
  .band--plate img { height: 240px; }
}

@media (max-width: 700px) {
  .band img { height: 150px; }
}

/* ---------- 7. sections ---------- */

.sec { padding: clamp(40px, 5.5vh, 68px) 0 0; }

.sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding-bottom: 14px;
}
.sec__head s { flex: 1 1 40px; height: 1px; background: var(--rule); text-decoration: none; }

.sec__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 13px; min-width: 0; }

/* ---------- 8. stat row — open, divided by verticals, never boxed ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  border-top: 1px solid var(--rule);
  margin-top: 4px;
}

.stat {
  padding: 20px 22px 20px 0;
  border-left: 1px solid var(--rule-soft);
  padding-left: 22px;
  transition: border-color var(--med) var(--ease);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat:hover { border-color: var(--accent); }

.stat__v {
  font-family: var(--f-mono);
  font-size: clamp(2rem, 3.1vw, 2.8rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.stat__v small { font-size: .44em; color: var(--ink-3); letter-spacing: 0; margin-left: 3px; }

.stat__k { margin-top: 9px; }

.stat__note {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--ink-3);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.stat:hover .stat__note { opacity: 1; transform: none; }

/* ---------- 9. today ---------- */

.daybar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.seg { display: flex; gap: 0; }

.seg button {
  padding: 7px 17px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1.5px solid transparent;
  transition: color var(--med) var(--ease), border-color var(--med) var(--ease);
}
.seg button:first-child { padding-left: 0; }
.seg button:hover { color: var(--ink); }
.seg button.is-on { color: var(--accent); border-color: var(--accent); }

.blocks { margin-top: 8px; }

.block {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: transform var(--med) var(--ease), border-color var(--med) var(--ease);
}
.block:hover { transform: translateX(5px); border-color: var(--accent); }

.block__t {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-3);
  padding-top: 3px;
  letter-spacing: .04em;
}
.block__d { line-height: 1.5; max-width: 88ch; }
.block__from {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
}
.block.done .block__d { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }

/* checkbox — draws its tick */
.tick {
  display: inline-block;
  flex: none;
  width: 19px; height: 19px;
  margin-top: 2px;
  position: relative;
  border: 1.25px solid var(--rule);
  border-radius: 2px;
  transition: border-color var(--med) var(--ease), background var(--med) var(--ease), transform var(--med) var(--ease);
}
.tick:hover,
.task:hover .tick { border-color: var(--accent); transform: scale(1.12); }
.tick svg { position: absolute; inset: 2px; }
.tick svg path {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset var(--med) var(--ease);
}
.tick.on { background: var(--accent); border-color: var(--accent); }
.tick.on svg path { stroke-dashoffset: 0; }

/* ---------- 9b. the week board ----------
   A planner grid, but a record rather than a rota: the columns are filled
   in as the week happens, not handed down before it starts.

   Cells are lifted with shade, not filled with colour — the surface stays
   the page's own paper and a soft shadow does the separating. In dark mode
   a shadow alone is invisible, so a hairline ring carries the edge instead. */

.board__note {
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 64ch;
  padding: 0 0 22px;
}

.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
}

.day {
  min-width: 0;
  padding: 14px 0 4px;
  border-top: 1px solid var(--rule);
  transition: border-color var(--med) var(--ease);
}
.day:hover { border-top-color: var(--accent); }
.day.is-today { border-top: 2px solid var(--accent); padding-top: 13px; }

.day__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.day__wd { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); }
.day__n  { font-family: var(--f-mono); font-size: 21px; color: var(--ink-2); letter-spacing: -.02em; }
.day.is-today .day__wd, .day.is-today .day__n { color: var(--accent); }

/* the Heavy / OR toggle, as soft pills */
.day__type { display: flex; gap: 6px; padding: 12px 0 14px; }
.day__type button {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ink-3);
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  transition: color var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
              background var(--fast) var(--ease);
}
.day__type button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.day__type button.on {
  color: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* a cell: raised by shade, with soft edges. no border, no flat fill. */
.card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 15px 14px;
  margin-bottom: 9px;
  border-radius: 12px;
  background: var(--card-fill);
  box-shadow: var(--shade);
  transition: box-shadow var(--med) var(--ease), transform var(--med) var(--ease),
              opacity var(--med) var(--ease);
}
.card:hover {
  box-shadow: var(--shade-lift);
  transform: translateY(-2px);
}
.card:active { transform: translateY(0); }

.card.done {
  opacity: .46;
  box-shadow: var(--shade-flat);
  transform: none;
}
.card.done:hover { transform: none; box-shadow: var(--shade-flat); }
.card.done .card__d { text-decoration: line-through; text-decoration-thickness: 1px; }

.card__t {
  display: block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: .06em;
  margin-bottom: 5px;
}
.card__d { display: block; font-size: 14.5px; line-height: 1.4; letter-spacing: -.006em; }

@media (max-width: 1100px) {
  .week { grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr);
          grid-template-columns: none; overflow-x: auto; padding-bottom: 10px; }
}

/* ---------- 10. insight board ---------- */

.insight { padding: 18px 0; border-bottom: 1px solid var(--rule-soft); display: grid; grid-template-columns: 32px 1fr; gap: 18px; }
.insight__r {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--accent);
  padding-top: 3px;
}
.insight__h { font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.insight__b { margin-top: 4px; color: var(--ink-2); font-size: 15.5px; line-height: 1.58; max-width: 92ch; }

.empty {
  padding: 26px 0;
  color: var(--ink-3);
  font-size: 15.5px;
  max-width: 56ch;
  border-bottom: 1px solid var(--rule-soft);
}

/* ---------- 11. charts ---------- */

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 46px 54px;
  margin-top: 40px;
}
@media (min-width: 1180px) { .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.chart { min-width: 0; }
.chart__k { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; }
.chart svg { width: 100%; height: auto; overflow: visible; }

.gridline { stroke: var(--rule-soft); stroke-width: 1; }
.axis     { stroke: var(--rule); stroke-width: 1; }
.axis-t   { font-family: var(--f-mono); font-size: 10.5px; fill: var(--ink-3); letter-spacing: .06em; }
.val-t    { font-family: var(--f-mono); font-size: 11.5px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.plot     { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.plot-dot { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.bar      { fill: var(--accent); }
.bar-2    { fill: var(--mark-2); }
.bar-ghost{ fill: var(--rule-soft); }

/* reference line — neutral, never a series colour */
.target-l { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 4; }

/* dumbbell: hollow neutral dot = target, filled accent dot = where you are */
.db-line { stroke: var(--rule); stroke-width: 2; stroke-linecap: round; }
.db-now  { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.db-tgt  { fill: var(--paper); stroke: var(--mark-2); stroke-width: 2; }

/* hover layer */
.hit { fill: transparent; cursor: pointer; }
.hit:hover ~ .bar, .bar.hot { opacity: .6; }
.crosshair { stroke: var(--rule); stroke-width: 1; }

.tip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  padding: 8px 11px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -118%);
  transition: opacity var(--fast) var(--ease);
}
.tip.on { opacity: 1; }
.tip b { color: var(--accent); font-weight: 500; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; }
.legend span { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--accent); }
.legend i.n { background: var(--mark-2); }
.legend i.o { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--mark-2); height: 9px; width: 9px; border-radius: 50%; }

/* heatmap — one column per week, one row per weekday, one square per day */
.heatgrid {
  --cell: 11px;
  --cgap: 3px;
  display: grid;
  grid-template-columns: 26px max-content;
  gap: 4px 8px;
  margin-top: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.heat-months {
  display: grid;
  grid-auto-columns: calc(var(--cell) + var(--cgap));
  grid-auto-flow: column;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.heat-months span { grid-row: 1; white-space: nowrap; }

.heat-wd {
  display: grid;
  grid-template-rows: repeat(7, var(--cell));
  gap: var(--cgap);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  color: var(--ink-3);
  align-items: center;
  justify-items: end;
}

.heat {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, var(--cell));
  grid-auto-columns: var(--cell);
  gap: var(--cgap);
}
.heat i {
  width: var(--cell); height: var(--cell);
  border-radius: 2px;
  background: var(--rule-soft);
  transition: transform var(--fast) var(--ease), background var(--med) var(--ease);
  cursor: default;
}
.heat i:hover { transform: scale(1.6); }
.heat i[data-l="1"] { background: color-mix(in srgb, var(--heat) 32%, var(--rule-soft)); }
.heat i[data-l="2"] { background: color-mix(in srgb, var(--heat) 64%, var(--rule-soft)); }
.heat i[data-l="3"] { background: var(--heat); }
.heat i[data-l="x"] { background: transparent; box-shadow: inset 0 0 0 1px var(--rule-soft); }

.legend b { color: var(--heat); font-weight: 500; }
.legend i:first-child { background: var(--heat); }

/* ---------- 12. plan ---------- */

.phase { padding: 26px 0; border-top: 1px solid var(--rule); }
.phase__top { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.phase__ring { flex: none; }
.phase__aim { margin-top: 14px; max-width: 68ch; color: var(--ink-2); font-size: 16px; line-height: 1.62; }

.wk {
  border-top: 1px solid var(--rule-soft);
  transition: border-color var(--med) var(--ease);
}
.wk:hover { border-color: var(--accent); }

.wk__hd {
  display: grid;
  grid-template-columns: 68px 1fr auto auto;
  gap: 20px;
  align-items: baseline;
  width: 100%;
  padding: 16px 0;
  text-align: left;
  transition: transform var(--med) var(--ease);
}
.wk:hover .wk__hd { transform: translateX(5px); }

.wk__n { font-family: var(--f-mono); font-size: 13px; color: var(--ink-3); letter-spacing: .06em; }
.wk__t { font-weight: 550; font-size: 17.5px; letter-spacing: -.012em; }
.wk__d { font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }

.wk__bar { width: 54px; height: 2px; background: var(--rule-soft); position: relative; align-self: center; }
.wk__bar b { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width var(--slow) var(--ease); }

.wk.now .wk__n { color: var(--accent); }
.wk.now .wk__t::after {
  content: 'you are here';
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: 12px;
}

.wk__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--slow) var(--ease), opacity var(--med) var(--ease);
  opacity: 0;
}
.wk.open .wk__body { max-height: 1400px; opacity: 1; }

.wk__inner { padding: 2px 0 26px 72px; }
.wk__focus { color: var(--ink-2); font-size: 16px; max-width: 68ch; padding-bottom: 16px; }

.task { display: flex; gap: 13px; align-items: flex-start; padding: 9px 0; cursor: pointer; }
.task span { line-height: 1.55; font-size: 16px; max-width: 96ch; transition: color var(--med) var(--ease); }
.task.done span { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }

.flag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

/* ---------- 13. method ---------- */

.proto { padding: 30px 0; border-top: 1px solid var(--rule); }
.proto__lede { margin: 12px 0 22px; max-width: 64ch; color: var(--ink-2); font-size: 16.5px; }

.steps { counter-reset: s; }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
  max-width: 74ch;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
  padding-top: 4px;
}
.steps li p { font-size: 16px; line-height: 1.62; color: var(--ink-2); }

.tmpl { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 44px; margin-top: 8px; }
.tmpl__note { color: var(--ink-2); font-size: 15.5px; margin: 10px 0 16px; max-width: 46ch; }

.spine { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 34px 44px; }
.spine__g { }
.spine__g h4 { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--c, var(--accent)); font-weight: 500; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
.spine__g li { padding: 8px 0; font-size: 15.5px; color: var(--ink-2); border-bottom: 1px solid var(--rule-soft); transition: color var(--fast) var(--ease), padding-left var(--fast) var(--ease); }
.spine__g li:hover { color: var(--ink); padding-left: 5px; }

/* ---------- 14. forms & tables ---------- */

.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 20px 26px; align-items: end; padding: 24px 0; border-top: 1px solid var(--rule); }

/* the two forms have different shapes; auto-fit alone wraps them badly */
@media (min-width: 920px) {
  #fleForm  { grid-template-columns: 140px minmax(180px, 1fr) 78px 78px 78px 78px auto; }
  #missForm { grid-template-columns: 140px 110px minmax(180px, 1fr) 150px 130px auto; }
}

.field label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }

.field input, .field select {
  width: 100%;
  padding: 7px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-size: 15px;
  transition: border-color var(--med) var(--ease);
}
.field input:focus, .field select:focus { outline: 0; border-color: var(--accent); }
.field select { cursor: pointer; }

.btn {
  align-self: end;
  padding: 8px 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transition: opacity var(--fast) var(--ease), letter-spacing var(--med) var(--ease);
}
.btn:hover { opacity: .62; letter-spacing: .19em; }
.btn.quiet { color: var(--ink-3); border-color: var(--rule); }
.btn.quiet:hover { color: var(--a-log); border-color: var(--a-log); }

.tbl { width: 100%; border-collapse: collapse; margin-top: 10px; }
.tbl th {
  text-align: left;
  padding: 10px 14px 10px 0;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.tbl td {
  padding: 13px 14px 13px 0;
  font-size: 15px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.tbl tbody tr { transition: background var(--fast) var(--ease); }
.tbl tbody tr:hover { background: var(--paper-2); }
.tbl .n { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .del { color: var(--ink-3); font-family: var(--f-mono); font-size: 15px; line-height: 1; transition: color var(--fast) var(--ease); }
.tbl .del:hover { color: var(--a-log); }

.pill {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c, var(--ink-2));
  border-bottom: 1.5px solid var(--c, var(--rule));
  padding-bottom: 1px;
  white-space: nowrap;
}

.scroll-x { overflow-x: auto; }

/* ---------- 15. scoreboard ---------- */

.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--rule); }

.sc { padding: 22px 20px 22px 0; border-left: 1px solid var(--rule-soft); padding-left: 20px; }
.sc:first-child { border-left: 0; padding-left: 0; }
.sc__n { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--c, var(--ink-3)); }
.sc__v { font-family: var(--f-mono); font-size: 2.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.04em; margin-top: 10px; }
.sc__t { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.sc__track { height: 2px; background: var(--rule-soft); margin-top: 12px; position: relative; }
.sc__track b { position: absolute; inset: 0 auto 0 0; background: var(--c, var(--accent)); transition: width 1.1s var(--ease); }

/* ---------- 16. responsive ---------- */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }

  .rail {
    position: sticky;
    top: 0;
    z-index: 40;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__mark { padding: 0 14px 0 0; }
  .rail__mark span { display: none; }
  .nav { flex-direction: row; padding: 0; }
  .nav__item { padding: 6px 12px; white-space: nowrap; }
  .nav__item:hover { padding-left: 12px; }
  .nav__item i { display: none; }
  .nav__item::before { left: 12px; right: 12px; top: auto; bottom: 0; width: auto; height: 0; transform: none; }
  .nav__item.is-on::before { height: 1.5px; }
  .nav__item:hover::before { height: 1.5px; }
  .rail__foot { margin: 0 0 0 auto; padding: 0 0 0 14px; display: flex; align-items: center; gap: 14px; }
  .rail__stat { border: 0; padding: 0; gap: 7px; }
  .theme { margin: 0; padding: 0; border: 0; }
  .theme button { padding: 4px 5px; }

  .main { padding-bottom: 90px; }
  .wk__inner { padding-left: 0; }
  .block { grid-template-columns: 70px 1fr auto; gap: 12px; }
}

@media (max-width: 560px) {
  .rail__stat { display: none; }
  .rail__mark { display: none; }
  .nav__item { padding: 6px 9px; }
  .nav__item:hover { padding-left: 9px; }
  .nav__item::before { left: 9px; right: 9px; }
  .theme button { padding: 4px 4px; letter-spacing: .08em; }
  .hero__sub { font-size: 16px; }
  .stats, .board { grid-template-columns: 1fr 1fr; }
  .stat, .sc { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3), .sc:nth-child(n+3) { border-top: 1px solid var(--rule-soft); }
  .wk__hd { grid-template-columns: 52px 1fr auto; gap: 12px; }
  .wk__d { display: none; }
  .charts { gap: 40px; }
}

/* ---------- 17. print — it should print like a chart ---------- */
@media print {
  .rail, .wash, .scene { display: none; }
  .room { display: block !important; }
  .main { padding: 0; max-width: none; }
  .rv { opacity: 1; transform: none; }
  .wk__body { max-height: none; opacity: 1; }
}


/* ---------- 18. the assistant ----------
   Everything it produces arrives here first. Nothing behind this dialog has
   changed until Accept is pressed. */

.btn.ai::before { content: '\2726\00a0\00a0'; }

.prop {
  width: min(640px, calc(100vw - 40px));
  max-height: 82vh;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.prop::backdrop { background: color-mix(in srgb, var(--ink) 52%, transparent); }

.prop__hd { padding: 24px 28px 16px; border-bottom: 1px solid var(--rule); }
.prop__hd .label { display: block; color: var(--accent); margin-bottom: 8px; }

.prop__body { padding: 20px 28px 6px; overflow-y: auto; max-height: 54vh; }
.prop__note { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 62ch; }
.prop__note code { font-family: var(--f-mono); font-size: .88em; }

.prop__row { padding: 14px 0; border-top: 1px solid var(--rule-soft); }
.prop__row:first-of-type { border-top: 0; }
.prop__row p { font-size: 15.5px; line-height: 1.55; }
.prop__k { display: flex; align-items: baseline; gap: 12px; margin-bottom: 5px; }
.prop__k b { font-size: 15.5px; font-weight: 600; }
.prop__k span { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }
.prop__covers { color: var(--ink-3); font-size: 13px; margin-top: 5px; }
.prop__was { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.prop__row.is-moved { border-left: 2px solid var(--accent); padding-left: 12px; }
.prop__legend { display: flex; gap: 28px; font-family: var(--f-mono); font-size: 10px;
                letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 8px; }
.prop__foot-note { margin-top: 16px; color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }

.prop__foot { display: flex; justify-content: flex-end; gap: 26px;
              padding: 16px 28px 20px; border-top: 1px solid var(--rule); }

/* draft-a-card, in the log table */
.row-acts { display: flex; gap: 12px; align-items: center; }
.card-btn {
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.card-btn:hover { color: var(--accent); transform: scale(1.18); }


/* ---------- 19. what to change ----------
   Sits at the top of the Plan tab and stays hidden until something has
   genuinely recurred across separate weeks. */
.adapt__row { padding: 16px 0; border-top: 1px solid var(--rule-soft); max-width: 76ch; }
.adapt__k { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.adapt__k b { font-size: 17px; font-weight: 600; }
.adapt__k span { font-family: var(--f-mono); font-size: 11.5px; color: var(--a-log); }
.adapt__row p { color: var(--ink-2); font-size: 16px; line-height: 1.6; }

.adapt__advice { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); max-width: 76ch; }
.adapt__advice .label { display: block; margin-bottom: 10px; }
.adapt__diag { font-size: 17px; line-height: 1.6; margin-bottom: 14px; }
.adapt__advice ul li {
  padding: 9px 0 9px 20px;
  position: relative;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.6;
  border-top: 1px solid var(--rule-soft);
}
.adapt__advice ul li::before {
  content: '\2192';
  position: absolute; left: 0; top: 9px;
  color: var(--accent);
}

.prop__list li {
  padding: 8px 0 8px 20px;
  position: relative;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.prop__list li::before { content: '\2192'; position: absolute; left: 0; color: var(--accent); }

/* the reasoning column */
.field--wide { grid-column: 1 / -1; }
@media (min-width: 920px) {
  #missForm { grid-template-columns: 130px 100px minmax(150px, 1fr) 140px 120px auto; }
  #missForm .field--wide { grid-column: 1 / -2; }
}
.tbl td.think { max-width: 34ch; color: var(--ink-3); font-size: 14px; line-height: 1.45; }

/* ---------- 14. the list ----------
   The day's errands, sitting under the day's work. It borrows the block
   grid so the two lists read as one column, with a delete affordance the
   study blocks don't have — the plan is not yours to delete, this is. */

.sync {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.sync__s {
  flex: 1;
  min-width: 0;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sync__b {
  flex: none;
  color: var(--accent);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: opacity var(--fast) var(--ease);
}
.sync__b:hover { opacity: .6; }

.todobar {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  padding-bottom: 4px;
}
.todobar__in {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  font-family: var(--f-body);
  font-size: 16.5px;
  color: var(--ink);
  transition: border-color var(--med) var(--ease);
}
.todobar__in::placeholder { color: var(--ink-3); opacity: .72; }
.todobar__in:focus { outline: 0; border-bottom-color: var(--accent); }
.todobar__hint {
  margin: 9px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 76ch;
}
.todobar__hint em { font-style: italic; color: var(--ink-2); }

.todo {
  display: grid;
  grid-template-columns: 86px 1fr auto auto;
  gap: 18px;
  align-items: start;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: transform var(--med) var(--ease), border-color var(--med) var(--ease);
}
.todo:hover { transform: translateX(5px); border-color: var(--accent); }
.todo.done .block__d { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.todo--empty:hover { transform: none; border-color: var(--rule-soft); }

.todo__when {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 4px;
}
/* a missed reminder is stated, not shouted — the log accent, same as
   every other "this didn't go to plan" signal on the site */
.todo.late .todo__when { color: var(--a-log); }
.todo.done .todo__when { color: var(--ink-3); }

.todo__x {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity var(--fast) var(--ease), color var(--fast) var(--ease);
}
.todo:hover .todo__x, .todo__x:focus-visible { opacity: 1; }
.todo__x:hover { color: var(--a-log); }
@media (hover: none) { .todo__x { opacity: 1; } }

/* ---------- 15. the calendar ----------
   The one room that is a tool rather than a document, so it drops the
   page's generous margins and behaves like an application: fixed bar,
   scrolling grid, a sidebar that stays put. */

#room-cal { padding-top: 26px; }

.cal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 30px;
  align-items: start;
}
@media (max-width: 1080px) {
  .cal { grid-template-columns: minmax(0, 1fr); }
  .cal__side { order: -1; }
}

/* --- the bar --- */
.cal__bar {
  display: flex;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.cal__navgrp { display: flex; align-items: center; gap: 2px; flex: none; }
.cal__arrow, .cal__now {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.cal__arrow:hover, .cal__now:hover { color: var(--accent); border-color: var(--accent); }
.cal__title {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--f-display);
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
}
.cal__views { flex: none; }
.cal__add { flex: none; }

/* --- timed grids (day / week) --- */
.cal__body { margin-top: 14px; }
.tgrid {
  display: grid;
  gap: 0;
  overflow-x: auto;
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  background: var(--card-fill);
}
.tgrid--day  { grid-template-columns: 62px minmax(0, 1fr); }
.tgrid--week { grid-template-columns: 62px repeat(7, minmax(96px, 1fr)); }

.rail { position: relative; border-right: 1px solid var(--rule-soft); }
.rail__hd { height: 46px; border-bottom: 1px solid var(--rule-soft); }
.hr { position: absolute; left: 0; right: 0; height: 0; }
.hr span {
  position: absolute;
  right: 8px;
  top: -7px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--ink-3);
}

.dcol { position: relative; border-left: 1px solid var(--rule-soft); min-width: 0; }
.dcol:first-of-type { border-left: 0; }
.dcol__hd {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dcol__hd b { font-family: var(--f-body); font-size: 15px; color: var(--ink); letter-spacing: 0; }
.dcol.is-today .dcol__hd b { color: var(--accent); }
.dcol.is-today { background: var(--accent-wash); }
.dcol__body { position: relative; }

/* hour ruling, drawn once as a repeating gradient rather than 16 elements */
.dcol__body {
  background-image: linear-gradient(to bottom, var(--rule-soft) 1px, transparent 1px);
  background-size: 100% 51px;
}

.ev {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 3px;
  padding: 3px 6px;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.25;
  border-left: 2.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--card-fill));
  color: var(--ink);
  cursor: default;
}
.ev b { display: block; font-weight: 500; }
.ev i {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .05em;
  color: var(--ink-3);
  margin-top: 1px;
}
.ev--mcat { border-left-color: var(--a-today); background: color-mix(in srgb, var(--a-today) 15%, var(--card-fill)); }
.ev--task { border-left-color: var(--a-plan);  background: color-mix(in srgb, var(--a-plan) 15%, var(--card-fill)); }
.ev--task.is-hard { border-left-color: var(--a-log); background: color-mix(in srgb, var(--a-log) 16%, var(--card-fill)); }
.ev--life {
  border-left-color: transparent;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ink) 5%, transparent) 0 6px,
    transparent 6px 12px);
  color: var(--ink-3);
}
.ev--life b { font-weight: 400; font-size: 10.5px; }
.ev--work { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.ev.is-done { opacity: .45; }
.ev.is-done b { text-decoration: line-through; }

.nowline { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--a-log); z-index: 3; }
.nowline::before {
  content: ''; position: absolute; left: -3px; top: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--a-log);
}

/* --- month --- */
.mgrid { border: 1px solid var(--rule-soft); border-radius: 4px; overflow: hidden; }
.mgrid__hd {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--rule-soft);
}
.mgrid__hd span {
  padding: 9px 10px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.mgrid__body { display: grid; grid-template-columns: repeat(7, 1fr); }
.mcell {
  min-height: 96px;
  padding: 7px 8px 9px;
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.mcell:nth-child(7n+1) { border-left: 0; }
.mcell:hover { background: var(--accent-wash); }
.mcell.is-out { opacity: .38; }
.mcell.is-today .mcell__d { color: var(--accent); font-weight: 600; }
.mcell__d { font-size: 13px; color: var(--ink-2); margin-bottom: 5px; }
.mcell__load { height: 2px; background: var(--rule-soft); border-radius: 2px; margin-bottom: 6px; }
.mcell__load b { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.chip {
  display: block;
  font-size: 10.5px;
  line-height: 1.3;
  padding: 2px 5px;
  margin-bottom: 3px;
  border-radius: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip--mcat { background: color-mix(in srgb, var(--a-today) 17%, transparent); color: var(--ink-2); }
.chip--task { background: color-mix(in srgb, var(--a-plan) 17%, transparent); color: var(--ink-2); }
.chip--more { color: var(--ink-3); padding-left: 0; }

/* --- year --- */
.ygrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 22px 20px; }
.ymon__t {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.ymon__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2.5px; }
.ymon__g i {
  aspect-ratio: 1; border-radius: 1.5px; background: transparent;
  transition: transform var(--fast) var(--ease);
}
.ymon__g i[data-date] { cursor: pointer; }
.ymon__g i[data-date]:hover { transform: scale(1.45); }
.ymon__g .l0 { background: var(--rule-soft); }
.ymon__g .l1 { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.ymon__g .l2 { background: color-mix(in srgb, var(--accent) 48%, transparent); }
.ymon__g .l3 { background: color-mix(in srgb, var(--accent) 72%, transparent); }
.ymon__g .l4 { background: var(--accent); }
.ymon__g .is-today { outline: 1.5px solid var(--ink); outline-offset: 1px; }
.ymon__g .is-test  { outline: 1.5px solid var(--a-log); outline-offset: 1px; }

/* --- the sidebar --- */
.cal__side { position: sticky; top: 26px; display: flex; flex-direction: column; gap: 18px; }
.cd { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.cd__n {
  font-family: var(--f-display);
  font-size: clamp(56px, 8vw, 88px);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--accent);
}
.cd__k { display: block; margin-top: 4px; color: var(--ink-3); }
.cd__bar { height: 2px; background: var(--rule-soft); border-radius: 2px; margin: 13px 0 8px; }
.cd__bar b { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.cd__sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cd__note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }

.btn.go {
  width: 100%;
  justify-content: center;
  padding: 12px 0;
  border: 1px solid var(--accent);
  border-radius: 3px;
  color: var(--accent);
}
.btn.go:hover { background: var(--accent-wash); opacity: 1; letter-spacing: .16em; }

.side__sec { padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.side__hd { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.qrow { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.qrow b { display: block; font-weight: 400; font-size: 13.5px; line-height: 1.35; }
.qrow span {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--a-log);
}
.qrow em {
  display: block; margin-top: 3px;
  font-family: var(--f-mono); font-style: normal; font-size: 9.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}
.qrow--plan span { color: var(--a-today); }
.qhint { font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.qempty { font-size: 12.5px; line-height: 1.5; margin: 0; }
.side__rhythm { text-align: left; padding-top: 4px; }

/* --- the estimate card in the task dialog --- */
.est {
  margin-top: 18px; padding: 15px 17px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-wash);
}
.est__n { font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--accent); }
.est__b { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }
.est__w { margin: 9px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* --- rhythm editor --- */
.rh { margin-top: 8px; }
.rhrow {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto auto auto auto;
  gap: 8px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
}
.rh__l, .rh__t {
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  color: var(--ink); font-family: var(--f-body); font-size: 13.5px; padding: 4px 0;
}
.rh__t { font-family: var(--f-mono); font-size: 11.5px; }
.rh__l:focus, .rh__t:focus { outline: 0; border-bottom-color: var(--accent); }
.rh__d { display: flex; gap: 1px; }
.rh__d button {
  width: 19px; height: 19px; border-radius: 2px;
  font-family: var(--f-mono); font-size: 9.5px; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--rule);
}
.rh__d button.is-on { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.rh__x { color: var(--ink-3); font-size: 17px; line-height: 1; }
.rh__x:hover { color: var(--a-log); }
.rh__add { margin-top: 12px; }

#taskText {
  width: 100%; padding: 10px 12px;
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5;
  resize: vertical;
}
#taskText:focus { outline: 0; border-color: var(--accent); }