/* ==========================================================================
   js.17 workspace (dashboard.html) — light "paper" theme.
   Standalone: does not load css/base.css. Spec: docs/dashboard-spec.md
   ========================================================================== */

:root {
  color-scheme: light;

  --paper: #f7f5f0;      /* ground; equals PAPER in js/transition.js */
  --vellum: #fcfbf8;     /* dialogs, account panel */
  --linen: #eeeae2;      /* row hover tint only */
  --card: #fcfbf8;       /* app-shell card ground: same value as --vellum, different role */
  --folio: #0f0e0d;      /* the brief, image mats, initial tiles */

  --ink: #0f0e0d;        /* 17.70 on paper */
  --graphite: #3b3935;   /* 10.57 */
  --stone: #67635d;      /* 5.48 */
  --gilt: #6f5a36;       /* 6.04 */
  --verdigris: #3d6656;  /* 5.96 */
  --oxblood: #9b3a2b;    /* 6.35 */

  --pearl: #efece6;      /* on the folio: 16.36 */
  --champagne: #e7dcc6;  /* 14.19 */
  --folio-muted: #a8a39a;/* 7.69 */
  --alert: #e6a28f;      /* 9.12 */

  --line-control: #8a857d;
  --hair: rgba(15, 14, 13, .14);
  --hair-folio: rgba(239, 236, 230, .16);
  --keyline: rgba(231, 220, 198, .28);

  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);

  --shadow-rest: 0 40px 80px -40px rgba(15, 14, 13, .45), 0 2px 6px -2px rgba(15, 14, 13, .12);
  --shadow-float: 0 24px 48px -24px rgba(15, 14, 13, .30);
  --backdrop: rgba(15, 14, 13, .42);
  --fig: clamp(48px, 1.5rem + 3.6vw, 96px);

  --gutter: 20px;
  --col-gap: 16px;
  --band: clamp(88px, 4rem + 7vw, 184px);
  --desk-gap: clamp(32px, 1rem + 2vw, 56px);
}
@media (min-width: 576px)  { :root { --gutter: 32px; } }
@media (min-width: 768px)  { :root { --col-gap: 20px; } }
@media (min-width: 992px)  { :root { --gutter: clamp(40px, 4vw, 72px); } }
@media (min-width: 1200px) { :root { --col-gap: 24px; } }
@media (min-width: 1500px) { :root { --col-gap: 32px; } }

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

html {
  font-size: 16px;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}
html.has-compose-bar { scroll-padding-bottom: 96px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (max-width: 767.98px) { body { font-size: 16px; } }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 400; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }  /* width/height attributes must not beat aspect-ratio */
a { color: inherit; text-decoration: none; }
.drafted__title, .page-open, .proof__title, .confirm__text, .plate__title { overflow-wrap: anywhere; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; }
i, em { font-style: italic; }
[hidden] { display: none !important; }  /* component display rules must never beat the hidden attribute */

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

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.folio :focus-visible { outline-color: var(--champagne); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font: 500 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  transform: translate(-50%, -200%);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Arrival: the veil holds a paper frame until js/transition.js takes over
   -------------------------------------------------------------------------- */
.nct-veil { position: fixed; inset: 0; z-index: 19999; background: var(--paper); }
html:not(.js) .nct-veil { display: none; }

html.js:not(.is-revealed) [data-enter] { opacity: 0; }
html.no-gsap [data-enter] { transition: opacity .6s linear; }

/* Masks clip rising lines during the entrance, then open so nothing is cut */
.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .1em .14em 0;
  margin: 0 -.1em -.14em 0;
}
.mask > span { display: inline-block; }
.mask.is-open { overflow: visible; }

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */
.micro {
  font: 500 11px/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
@media (max-width: 767.98px) { .micro { font-size: 12px; } }

.desk { width: min(100% - 2 * var(--gutter), 1520px); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */
.icon-arrow {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform .6s var(--ease-out);
}
.icon-arrow svg { width: 100%; height: 100%; }

.pill {
  --fill: var(--champagne);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 500 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .5s var(--ease-out);
}
.pill::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--fill);
  transform: translateY(101%);
  transition: transform .6s var(--ease-out);
}
.pill__label { display: inline-block; transition: transform .3s var(--ease-out), opacity .3s linear; }
.pill:active .pill__label { transform: scale(.97); transition-duration: 80ms; }
.pill[aria-busy="true"] { cursor: progress; }

.pill--champagne { --fill: var(--pearl); border-color: var(--champagne); background: var(--champagne); color: var(--ink); }
.pill--sm { min-height: 36px; padding: 0 18px; }
@media (max-width: 767.98px) { .pill:not(.pill--sm) { min-height: 52px; } }

.pill.is-cue::before { animation: nct-fill-rise 1.1s var(--ease-out) 1; }
@keyframes nct-fill-rise {
  0% { transform: translateY(101%); }
  45% { transform: translateY(0); }
  100% { transform: translateY(-101%); }
}

@media (hover: hover) {
  .pill:not([aria-busy="true"]):hover { color: var(--ink); }
  .pill:not([aria-busy="true"]):hover::before { transform: translateY(0); }
  .pill:hover .icon-arrow,
  .arrow-link:hover .icon-arrow,
  .row-link:hover .row-link__arrow { transform: translate(2px, 2px); }
}

.arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  padding: 0 0 6px;
  color: var(--ink);
  font: 500 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
}
.arrow-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right center;
  transition: transform .8s var(--ease-out);
}
.arrow-link--folio { color: var(--pearl); }
.arrow-link--folio:active { color: var(--folio-muted); }
@media (hover: hover) { .arrow-link:hover::after { transform: scaleX(0); } }
.arrow-link:active { color: var(--graphite); }

.text-btn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--ink);
  font: 500 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.text-btn--folio { color: var(--pearl); }
@media (hover: hover) { .text-btn:hover { text-decoration-color: transparent; } }

@media (pointer: coarse) {
  .arrow-link, .text-btn, .pill--sm, .page-open { min-height: 44px; }
}

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  color: var(--stone);
  font: 500 11px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--folio { color: var(--champagne); }
.tag--sample { height: 20px; padding: 0 8px; letter-spacing: .1em; }  /* stays at the 11px floor */

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.tile {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--folio);
  color: var(--champagne);
  font: 400 24px/1 var(--serif);
}

.status { display: inline-flex; align-items: center; gap: 8px; }
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--verdigris);
}
.status--draft::before { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */
.mast {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
}
.mast__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 56px;
}
.mast__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hair);
}

.mast__brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; }
.mast__mark { display: block; width: 24px; height: 24px; color: var(--ink); }
.mast__mark svg { width: 100%; height: 100%; }
.mast__word { display: flex; align-items: center; font-size: 15px; font-weight: 500; letter-spacing: -.01em; line-height: 1; }

.mast__nav { display: none; }
.mast__end { display: flex; align-items: center; gap: 16px; }
.mast__compose { display: none; }
.mast__account { display: none; }
.mast__menu {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font: 500 12px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .mast__inner { height: 64px; }
}

@media (min-width: 992px) {
  .mast__mark { width: 28px; height: 28px; }
  .mast__menu { display: none; }

  .mast__nav {
    position: absolute;
    left: 50%;
    display: flex;
    gap: 32px;
    transform: translateX(-50%);
  }
  .mast__nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 64px;
    color: var(--stone);
    font: 500 12px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color .3s linear;
  }
  .mast__nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.215, .61, .355, 1);
  }
  .mast__nav a[aria-current="location"] { color: var(--ink); }
  .mast__nav a[aria-current="location"]::after { transform: scaleX(1); }

  .mast__compose { display: inline-flex; }
  .mast__account {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line-control);
    border-radius: 999px;
    color: var(--ink);
    font: 400 18px/1 var(--serif);
  }
  .mast__account-mark { display: block; width: 16px; height: 16px; }
  .mast__account-mark svg { width: 100%; height: 100%; }
}
@media (hover: hover) and (min-width: 992px) {
  .mast__nav a:hover { color: var(--ink); }
}

/* Account panel */
.account {
  position: absolute;
  top: calc(100% + 12px);
  right: calc((100% - min(100% - 2 * var(--gutter), 1520px)) / 2);
  width: 280px;
  padding: 20px 20px 4px;
  border: 1px solid var(--hair);
  background: var(--vellum);
  box-shadow: var(--shadow-float);
}
.account__name { font: 400 26px/1.1 var(--serif); }
.account__plan { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--stone); }
.account__rows { margin-top: 16px; border-top: 1px solid var(--hair); }
.account__rows li + li { border-top: 1px solid var(--hair); }
.account__rows a,
.account__rows button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  font-size: 15px;
  color: var(--ink);
  text-align: left;
}
@media (hover: hover) {
  .account__rows a:hover,
  .account__rows button:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* Pages in the menus: a way back into anything already composed */
.menu-pages { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.menu-pages__title { color: var(--stone); }
.menu-pages ul { margin-top: 4px; }
.menu-pages li + li { border-top: 1px solid var(--hair); }
.menu-page {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 44px;
  padding: 11px 0;
  color: var(--ink);
  text-align: left;
}
.menu-page__title {
  font-size: 15px;
  line-height: 1.3;
  overflow-wrap: anywhere;       /* titles run to 48 characters; wrap rather than truncate */
}
.menu-page__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 13px;
  line-height: 1.45;
}
.menu-page__date { color: var(--stone); font-variant-numeric: tabular-nums lining-nums; }
@media (hover: hover) {
  .menu-page:hover .menu-page__title { text-decoration: underline; text-underline-offset: 4px; }
}

.menu-pages--sheet { margin-top: 24px; }
.menu-pages--sheet .menu-page { min-height: 60px; }
.menu-pages--sheet .menu-page__title { font-size: 17px; }

/* --------------------------------------------------------------------------
   I · Desk: salutation, brief, launch sequence
   -------------------------------------------------------------------------- */
.band { scroll-margin-top: 88px; }
.band--desk { padding-top: clamp(24px, 1rem + 2vw, 64px); }

.desk-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.salute-head,
.salute__aside,
.folio,
.sequence { grid-column: 1 / -1; min-width: 0; }

.salute__eyebrow { margin-bottom: 16px; color: var(--stone); }

.salute__title {
  font: 400 clamp(44px, min(1rem + 5.4vw, 12.5vh), 128px)/.9 var(--serif);
  letter-spacing: -.02em;
  color: var(--ink);
}
.salute__title .mask { display: block; }
.salute__line { display: block; }
.salute__name { font-style: italic; color: var(--gilt); }

.salute__aside { max-width: 38ch; margin-top: 20px; }
.salute__lead {
  font-size: clamp(17px, 15px + .3vw, 20px);
  line-height: 1.5;
  color: var(--graphite);
}

.enquiry {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 20px;
  padding-top: 12px;
}
.enquiry__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  transform-origin: left center;
}
.enquiry__label { color: var(--stone); }
.enquiry__plan { font: italic 400 22px/1.1 var(--serif); }

@media (min-width: 768px) {
  .desk-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .salute-head { grid-row: 1; }
  .salute__aside {
    grid-column: 5 / -1;
    grid-row: 1;
    align-self: end;
    margin-top: 0;
    padding-bottom: .5rem;
  }
  .salute--stacked .salute__aside {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 20px;
    padding-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .desk-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .salute__aside { grid-column: 8 / -1; }
  .folio { grid-column: 1 / 8; grid-row: 2 / 4; }
  .sequence { grid-column: 9 / -1; grid-row: 2 / 4; margin-top: var(--desk-gap); }

  .salute--stacked .salute__aside {
    grid-column: 9 / -1;
    grid-row: 2;
    align-self: start;
    margin-top: var(--desk-gap);
  }
  .salute--stacked .sequence { grid-row: 3; margin-top: 40px; }
}

/* The brief (folio) */
.folio {
  position: relative;
  isolation: isolate;               /* keeps .folio__shadow (z-index -1) above body's paper background */
  align-self: start;
  margin-top: var(--desk-gap);
  padding: clamp(24px, .5rem + 2vw, 48px);
  background: var(--folio);
  color: var(--pearl);
  scroll-margin-top: 88px;
}
@media (max-width: 767.98px) {
  .folio { margin-inline: calc(-1 * var(--gutter)); }
}
@media (min-width: 992px) {
  .folio { min-height: clamp(400px, 32vw, 520px); display: flex; flex-direction: column; }
  .folio__inner { flex: 1; }
}

.folio__shadow {
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: var(--shadow-rest);
  pointer-events: none;
}
.folio__grain {
  position: absolute;
  inset: 0;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  pointer-events: none;
}
.folio__keyline {
  position: absolute;
  inset: 12px;
  border: 1px solid var(--keyline);
  pointer-events: none;
}
.folio__progress {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: var(--champagne);
  opacity: 0;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  transition: transform .9s cubic-bezier(.45, 0, .55, 1), opacity .3s linear;
}
.folio[data-state="composing"] .folio__progress { opacity: 1; }

.folio__inner { position: relative; display: flex; flex-direction: column; }

.folio__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.folio__label { display: inline-flex; align-items: center; gap: 10px; color: var(--pearl); }
.folio__burst { display: block; width: 16px; height: 16px; color: var(--champagne); }
.folio__burst svg { width: 100%; height: 100%; fill: currentColor; }

.folio__title {
  margin-top: clamp(24px, 1rem + 1.6vw, 40px);
  font: 400 clamp(32px, .75rem + 2.2vw, 52px)/1 var(--serif);
  color: var(--pearl);
}
.folio__title i { color: var(--champagne); }
.folio[data-state="drafted"] .folio__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.folio__view { margin-bottom: 28px; }  /* spare height sits above the foot, so errors never move the field */
.brief-form { padding-top: clamp(28px, 1rem + 2vw, 48px); }
.brief-label { display: block; color: var(--folio-muted); }

.brief-row { display: flex; flex-direction: column; gap: 16px; }
.brief-field { position: relative; flex: 1; min-width: 0; }
.brief-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pearl);
  font: 400 18px/1 var(--sans);
  -webkit-appearance: none;
  appearance: none;
}
.brief-input::placeholder { color: var(--folio-muted); opacity: 1; }
.brief-input:focus-visible { outline: none; }
.brief-input[readonly] { color: var(--folio-muted); }
.brief-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line-control);
  transform-origin: left center;
  transition: height .2s linear, background-color .2s linear;
}
.brief-field:focus-within .brief-underline { height: 2px; background: var(--champagne); }
.brief-input[aria-invalid="true"] + .brief-underline { height: 2px; background: var(--alert); }
.brief-field:focus-within .brief-input[aria-invalid="true"] + .brief-underline { height: 4px; }

.brief-submit { width: 100%; }
@media (min-width: 992px) {
  .brief-row { flex-direction: row; align-items: flex-end; gap: 24px; }
  .brief-submit { width: auto; }
}

.brief-stage {
  overflow: hidden;
  font: italic 400 26px/1.15 var(--serif);
  color: var(--pearl);
}
.brief-stage:empty { display: none; }
.folio[data-state="composing"] .brief-stage { margin-top: 20px; }

.brief-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--folio-muted);
}
.brief-error { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--alert); }
.brief-error:empty { display: none; }

.folio__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hair-folio);
  font-size: 13px;
  line-height: 1.45;
  color: var(--folio-muted);
}
@media (min-width: 992px) {
  .folio__title { margin-top: 24px; }
  .brief-form { padding-top: 32px; }
}

/* Drafted state */
.drafted {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 28px;
}
.drafted__img { display: none; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.drafted__tile { width: 88px; border: 1px solid var(--hair-folio); font-size: 44px; }
.drafted__meta { color: var(--folio-muted); }
.drafted__title { margin-top: 10px; font: 400 28px/1.05 var(--serif); color: var(--pearl); }
.drafted__sentence { margin-top: 10px; color: var(--pearl); }
.drafted .btn-row { margin-top: 22px; }
@media (max-width: 399.98px) {
  .drafted { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .drafted { grid-template-columns: 120px minmax(0, 1fr); gap: 28px; }
  .drafted__img { display: block; }
  .drafted__tile { display: none; }
  .drafted__title { font-size: 34px; }
}

/* Launch sequence */
.sequence { margin-top: 48px; }
.sequence__head { display: flex; justify-content: space-between; gap: 16px; color: var(--stone); }
.sequence__title {
  margin-top: 12px;
  font: 400 clamp(30px, 1rem + 1.4vw, 44px)/1 var(--serif);
}
.sequence__title i { color: var(--ink); }

.stations-wrap { position: relative; margin-top: 28px; }

.stations__track {
  position: absolute;
  left: var(--t-cross, 6px);
  top: var(--t-start, 6px);
  width: 1px;
  height: var(--t-len, 0);
  background: var(--line-control);
  transform-origin: center top;
}
.stations__fill {
  position: absolute;
  top: 0;
  left: -.5px;
  width: 2px;
  height: var(--t-fill, 0);
  background: var(--ink);
  transition: height .9s cubic-bezier(.645, .045, .355, 1), width .9s cubic-bezier(.645, .045, .355, 1);
}

.station {
  position: relative;
  display: grid;
  grid-template-columns: 13px 30px minmax(0, 1fr);
  column-gap: 12px;
  padding-bottom: 28px;
}
.station__marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-top: 7px;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background: var(--paper);
}
.station__check { display: none; width: 7px; height: 7px; color: var(--paper); }
.station__check svg { width: 100%; height: 100%; }
.station.is-done .station__marker { border-color: var(--ink); background: var(--ink); }
.station.is-done .station__check { display: block; }
.station.is-current .station__marker { border-color: var(--ink); }
.station.is-current .station__marker::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--gilt);
}
.station__num { padding-top: 4px; font: italic 400 20px/1 var(--serif); color: var(--stone); }
.station__title { font: 400 clamp(24px, 1rem + .7vw, 30px)/1.1 var(--serif); }
.station__body { max-width: 32ch; margin-top: 6px; color: var(--graphite); }
.station__meta { margin-top: 10px; color: var(--stone); }
.station__action:not(:empty) { margin-top: 12px; }
.station__reason { max-width: 32ch; margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--stone); }
.station__blocked { color: var(--stone); font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.station__action--compact { display: inline-flex; }
@media (min-width: 768px) { .station__action--compact { display: none; } }

.sequence__end { display: flex; align-items: center; gap: 12px; padding-left: 2px; color: var(--ink); }
.sequence__diamond { width: 9px; height: 9px; background: var(--ink); transform: rotate(45deg); }

.sequence__toggle { display: none; margin-top: 8px; }

/* Mobile: only the current station, full list on request */
@media (max-width: 767.98px) {
  .sequence:not(.is-expanded) .station:not(.is-current) { display: none; }
  .sequence:not(.is-expanded) .sequence__end { display: none; }
  .sequence:not(.is-expanded) .station.is-current { padding-bottom: 8px; }
  .sequence__toggle { display: inline-flex; }
}

/* 768px and up: three stations across a horizontal track.
   The literal below is mirrored in updateTrack() in js/desk.js — keep them identical. */
@media (min-width: 768px) {
  .stations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .station { display: block; padding: 0 12px 0 0; }
  .station__num { display: block; margin-top: 18px; }
  .station__title { margin-top: 6px; }
  .stations__track {
    left: var(--t-start, 6px);
    top: var(--t-cross, 13px);
    width: var(--t-len, 0);
    height: 1px;
    transform-origin: left center;
  }
  .stations__fill { top: -.5px; left: 0; width: var(--t-fill, 0); height: 2px; }
  .sequence__end { margin-top: 24px; }
}

/* Inline publish confirmation */
.confirm {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-in-out);
}
.confirm.is-open { grid-template-rows: 1fr; }
.confirm__inner { min-height: 0; overflow: hidden; padding-inline: 6px; margin-inline: -6px; }  /* room for focus rings */
.confirm__box { margin-top: 14px; padding: 16px 0 6px; border-top: 1px solid var(--hair); }
.confirm__text { max-width: 48ch; color: var(--graphite); }
.confirm__text:focus-visible { outline-offset: 2px; }
.confirm .btn-row { margin-top: 14px; }

.sequence__done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; }
.sequence__done-burst { display: block; width: 20px; height: 20px; color: var(--gilt); }
.sequence__done-burst svg { width: 100%; height: 100%; fill: currentColor; }
.sequence__done-line { font: 400 26px/1.1 var(--serif); }
.sequence__show { margin-top: 8px; }

/* --------------------------------------------------------------------------
   Bands shared
   -------------------------------------------------------------------------- */
#record, #selection, #atelier { padding-top: var(--band); }

.band__rule { display: block; height: 1px; background: var(--ink); transform-origin: left center; }
.band__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 24px;
}
.band__heading { display: flex; align-items: baseline; gap: 16px; }
.band__num { color: var(--stone); }
.band__title {
  font: 400 clamp(40px, 1.5rem + 3.2vw, 88px)/.95 var(--serif);
  letter-spacing: -.01em;
}
.band__stamp { color: var(--stone); }

/* --------------------------------------------------------------------------
   II · Record
   -------------------------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 32px;
  margin-top: 40px;
}
.figure { min-width: 0; padding: 32px 24px 0; border-left: 1px solid var(--hair); }
.figure:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
.figure dt { color: var(--stone); }
.figure__value {
  display: block;
  margin-top: 14px;
  font: 400 var(--fig)/.9 var(--serif);
  white-space: nowrap;
}
.figure__value.is-empty { color: var(--stone); }
.figure__value--text { overflow: hidden; font-size: 32px; line-height: 1.1; text-overflow: ellipsis; }
.figure__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 26ch; margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--stone); }
.figures.is-empty .figure__sub { display: none; }
.figures__caption { margin-top: 28px; font-size: 13px; line-height: 1.45; color: var(--stone); }
@media (min-width: 768px) { .figure__value--text { font-size: 40px; } }
@media (min-width: 992px) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figure:nth-child(2n + 1) { padding-left: 24px; border-left: 1px solid var(--hair); }
  .figure:first-child { padding-left: 0; border-left: 0; }
}

/* Digit roll */
.roll { display: inline-flex; align-items: flex-start; }
.roll__slot { display: inline-flex; justify-content: center; height: 1em; overflow: hidden; line-height: 1; }
.roll__col { display: flex; flex-direction: column; align-items: center; }
.roll__digit { display: block; height: 1em; line-height: 1; }
.roll__char { display: inline-block; line-height: 1; }

/* Pages on file */
.pages { margin-top: 64px; }
.pages__title { padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.pages__empty { padding: 28px 0 0; }
.pages__empty-line { font: italic 400 28px/1.1 var(--serif); }
.pages__empty-note { margin-top: 8px; color: var(--stone); }

.pages__table { width: 100%; border-collapse: collapse; }
.pages__table thead th {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.pages__table td { padding: 12px 0; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.pages__cell-tile { width: 80px; }
.pages__cell-status { width: 120px; font-size: 13px; }
.pages__cell-date { width: 96px; font-size: 13px; font-variant-numeric: tabular-nums lining-nums; color: var(--graphite); }
.pages__cell-action { width: 140px; text-align: right; }
.page-tile { width: 56px; }
.page-open {
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .3s linear;
  min-height: 24px;
}
@media (hover: hover) { .page-open:hover { text-decoration-color: currentColor; } }
.page-domain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; font-size: 13px; color: var(--stone); }
.confirm-row td { padding: 0 0 16px; }

@media (min-width: 768px) {
  .pages__row td { height: 96px; }
}
@media (max-width: 767.98px) {
  .pages__table, .pages__table tbody { display: block; }
  .pages__row {
    display: grid;
    grid-template-columns: 48px 16px auto minmax(0, 1fr);
    padding: 16px 0;
    border-bottom: 1px solid var(--hair);
  }
  .pages__row td { display: block; width: auto; height: auto; padding: 0; border: 0; text-align: left; }
  .pages__row .pages__cell-tile { grid-column: 1; grid-row: 1 / span 3; }
  .pages__row .page-tile { width: 48px; }
  .pages__row .pages__cell-title { grid-column: 3 / -1; grid-row: 1; }
  .pages__row .pages__cell-status { grid-column: 3; grid-row: 2; margin-top: 8px; color: var(--graphite); }
  .pages__row .pages__cell-date { grid-column: 4; grid-row: 2; margin-top: 8px; color: var(--graphite); }
  .pages__row .pages__cell-date::before { content: "\00a0·\00a0"; }
  .pages__row .pages__cell-action { grid-column: 3 / -1; grid-row: 3; margin-top: 4px; }
  .confirm-row { display: block; }
  .confirm-row td { display: block; }
}

/* --------------------------------------------------------------------------
   III · Selection
   -------------------------------------------------------------------------- */
.selection__header,
.plates,
.atelier {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.selection__intro,
.selection__aside { grid-column: 1 / -1; }
.selection__kicker { margin-bottom: 16px; color: var(--stone); }
.selection__aside { margin-top: 24px; }
.selection__lead { max-width: 40ch; font-size: 17px; line-height: 1.55; color: var(--graphite); }
.selection__next { margin-top: 14px; color: var(--stone); }

.plates { row-gap: 48px; margin-top: 56px; }
.plate { grid-column: 1 / -1; min-width: 0; }
.plate__figure { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--folio); }
.plate__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) { .plate:hover .plate__figure img { transform: scale(1.03); } }
.plate__caption { margin-top: 20px; }
.plate__caption > .micro { color: var(--stone); }
.plate__title { margin-top: 10px; font: 400 clamp(26px, 1rem + 1vw, 36px)/1.05 var(--serif); }
.plate__sentence { max-width: 34ch; margin-top: 10px; color: var(--graphite); }
.plate__facts { margin-top: 16px; font-size: 13px; line-height: 1.45; }
.plate__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--hair); }
.plate__facts dt { color: var(--stone); }
.plate__facts dd { color: var(--ink); font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.plate__caption .arrow-link { margin-top: 18px; }
.selection__disclosure { margin-top: 56px; font-size: 13px; line-height: 1.45; color: var(--stone); }

@media (max-width: 767.98px) {
  /* media rows: image floats left of the heading and sentence, facts run full width beneath */
  .plate--2, .plate--3 { display: flow-root; }
  .plate--2 .plate__figure, .plate--3 .plate__figure { float: left; width: 42%; margin: 0 16px 16px 0; }
  .plate--2 .plate__caption, .plate--3 .plate__caption { margin-top: 0; }
  .plate--2 .plate__facts, .plate--3 .plate__facts { clear: left; }
}

@media (min-width: 768px) {
  .selection__header, .plates, .atelier { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .plate--1 { grid-column: 1 / 6; grid-row: 1 / 3; }
  .plate--2 { grid-column: 6 / 9; grid-row: 1; }
  .plate--3 { grid-column: 6 / 9; grid-row: 2; }
}

@media (min-width: 1200px) {
  .selection__header, .plates, .atelier { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .selection__intro { grid-column: 1 / 8; align-self: end; }
  .selection__aside { grid-column: 9 / -1; align-self: end; margin-top: 0; }
  .plates { align-items: start; }
  .plate--1 { grid-column: 1 / 6; grid-row: 1; }
  .plate--2 { grid-column: 7 / 10; grid-row: 1; margin-top: 96px; }
  .plate--3 { grid-column: 10 / -1; grid-row: 1; margin-top: 192px; }
}

/* --------------------------------------------------------------------------
   IV · Atelier
   -------------------------------------------------------------------------- */
.atelier { margin-top: 24px; }
.atelier__head { grid-column: 1 / -1; }
.atelier__lead { max-width: 34ch; margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--graphite); }
.atelier__rows { grid-column: 1 / -1; margin-top: 36px; border-top: 1px solid var(--hair); }
.atelier__rows li { border-bottom: 1px solid var(--hair); }
.row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  padding: 20px 12px 20px 0;
  transition: background-color .25s linear, padding .25s var(--ease-out);
}
.row-link__title { display: block; font: 400 24px/1.1 var(--serif); }
.row-link__desc { display: block; margin-top: 6px; font-size: 14px; color: var(--stone); }
.row-link__arrow { display: block; flex: none; width: 20px; height: 20px; transition: transform .6s var(--ease-out); }
.row-link__arrow svg { width: 100%; height: 100%; }
@media (hover: hover) { .row-link:hover { background: var(--linen); padding-left: 12px; } }
@media (min-width: 768px) {
  .atelier__head { grid-column: 1 / 5; }
  .atelier__rows { grid-column: 5 / -1; margin-top: 0; }
  .row-link__title { font-size: 28px; }
}
@media (min-width: 1200px) {
  .atelier__head { grid-column: 1 / 6; }
  .atelier__rows { grid-column: 7 / -1; }
}

/* --------------------------------------------------------------------------
   Footer + compose bar
   -------------------------------------------------------------------------- */
.foot { margin-top: var(--band); border-top: 1px solid var(--hair); }
.foot__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
  font-size: 13px;
  line-height: 1.45;
  color: var(--stone);
}
html.has-compose-bar .foot__inner { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.foot__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.foot a,
.foot__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}
@media (hover: hover) { .foot a:hover, .foot__btn:hover { text-decoration-color: currentColor; } }
@media (min-width: 768px) {
  .foot__inner { flex-direction: row; align-items: center; justify-content: space-between; min-height: 72px; padding-block: 0; }
}

.compose-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair);
  background: var(--paper);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .42s cubic-bezier(.215, .61, .355, 1), visibility 0s linear .42s;
}
.compose-bar.is-shown { transform: none; visibility: visible; transition: transform .42s cubic-bezier(.215, .61, .355, 1), visibility 0s; }
.compose-bar__pill { width: 100%; }
@media (min-width: 992px) { .compose-bar { display: none; } }

/* --------------------------------------------------------------------------
   Overlays
   -------------------------------------------------------------------------- */
dialog {
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--hair);
  background: var(--vellum);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  overscroll-behavior: contain;
}
dialog::backdrop { background: var(--backdrop); }
dialog[open] { animation: nct-dialog-in .36s cubic-bezier(.215, .61, .355, 1); }
dialog[open]::backdrop { animation: nct-fade-in .3s linear; }
dialog.is-closing { animation: nct-dialog-out .24s ease-in forwards; pointer-events: none; }
dialog.is-closing::backdrop { animation: nct-fade-out .24s linear forwards; }
@keyframes nct-dialog-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes nct-dialog-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes nct-fade-in { from { opacity: 0; } }
@keyframes nct-fade-out { to { opacity: 0; } }

.dialog__kicker { color: var(--stone); }
.dialog__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 24px;
  padding: 20px 40px;
  border-top: 1px solid var(--hair);
}
.dialog__foot--flush { padding: 28px 0 0; border-top: 0; }

/* Proof */
.dialog--proof { width: min(1040px, calc(100% - 48px)); }
.proof {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  padding: 40px;
}
.proof__plate { align-self: start; padding: 20px; background: var(--folio); }
.proof__plate img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.proof__meta { color: var(--stone); }
.proof__title { margin-top: 12px; font: 400 44px/1.05 var(--serif); }
.proof__block { margin-top: 24px; }
.proof__block .micro { color: var(--stone); }
.proof__block p + p { margin-top: 6px; color: var(--graphite); }
.proof__price { margin-top: 24px; font-size: 13px; color: var(--stone); }

/* Store */
.dialog--store { width: min(520px, calc(100% - 48px)); padding: 40px; }
.store__title { margin-top: 10px; font: 400 36px/1.05 var(--serif); }
.store__lede { margin-top: 14px; color: var(--graphite); }
.field-label { display: block; margin-top: 28px; color: var(--stone); }
.field-row { display: flex; align-items: center; gap: 4px; box-shadow: inset 0 -1px 0 var(--line-control); transition: box-shadow .2s linear; }
.field-row:focus-within { box-shadow: inset 0 -2px 0 var(--ink); }
.field-row.is-invalid { box-shadow: inset 0 -2px 0 var(--oxblood); }
.field-row.is-invalid:focus-within { box-shadow: inset 0 -4px 0 var(--oxblood); }
.field {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 16px/1 var(--sans);
}
.field:focus-visible { outline: none; }
.field::placeholder { color: var(--stone); opacity: 1; }
.field-suffix { font-size: 16px; color: var(--stone); }
.field-error { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--oxblood); }
.field-error:empty { display: none; }
.store__success { margin-top: 18px; font: 400 22px/1.2 var(--serif); }
.store__foot { margin-top: 24px; font-size: 13px; line-height: 1.45; color: var(--stone); }
.store__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Menu sheet */
.sheet {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom));
  border: 0;
  background: var(--paper);
  box-shadow: none;
}
.sheet[open] { animation: nct-fade-in .24s linear; }
.sheet.is-closing { animation: nct-fade-out .24s linear forwards; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; height: 56px; border-bottom: 1px solid var(--hair); }
.sheet__brand { display: inline-flex; align-items: center; gap: 10px; }
.sheet__nav li { border-bottom: 1px solid var(--hair); }
.sheet__nav a { display: flex; align-items: center; gap: 16px; min-height: 72px; font: 400 44px/1 var(--serif); }
.sheet__num { width: 32px; color: var(--stone); }
.sheet__rows { margin-top: 24px; border-top: 1px solid var(--ink); }
.sheet__rows li { border-bottom: 1px solid var(--hair); }
.sheet__rows a,
.sheet__rows button { display: flex; align-items: center; width: 100%; min-height: 48px; font-size: 16px; text-align: left; }
.sheet__foot { margin-top: 24px; font-size: 13px; color: var(--stone); }
.sheet__foot span:first-child:not(:empty)::after { content: " ·"; }

@media (max-width: 767.98px) {
  .dialog--proof {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
  }
  .proof { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
  .proof__plate { max-width: 280px; padding: 14px; }
  .proof__title { font-size: 34px; }
  .dialog__foot { padding: 16px 24px calc(16px + env(safe-area-inset-bottom)); }

  .dialog--store {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
  }
  .dialog__foot--flush { padding: 24px 0 0; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pill::before,
  .icon-arrow,
  .arrow-link::after,
  .plate__figure img,
  .row-link,
  .row-link__arrow,
  .stations__fill,
  .folio__progress,
  .confirm { transition: none; }
  .pill.is-cue::before { animation: none; }
  dialog[open],
  dialog.is-closing { animation: nct-fade-in .15s linear; }
  .compose-bar { transition: none; }
  .mast__nav a::after,
  .pill__label { transition: none; }
  .pill:active .pill__label { transform: none; }
  html { scroll-behavior: auto; }
}

@media (pointer: coarse) and (min-width: 992px) {
  .mast__account { min-height: 44px; }
}

/* ==========================================================================
   App shell — a fixed workspace rail beside a scrolling content column.
   Below 992px nothing here applies: the page keeps the masthead layout above.
   ========================================================================== */

/* Rail-only furniture, dormant at narrow widths */
.mast__nav-num,
.mast__account-text,
.topbar { display: none; }

@media (min-width: 992px) {
  :root {
    --rail: 268px;
    --shell-pad: clamp(28px, 2.2vw, 56px);
    --shell-max: 1400px;
    --card-pad: clamp(20px, 1.4vw, 28px);
  }

  html { scroll-padding-top: 84px; }     /* clears the sticky strip */

  body {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
  }

  /* --- Rail ---------------------------------------------------------- */
  .mast {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    height: 100dvh;
    border-right: 1px solid var(--hair);
  }
  .mast__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    width: auto;
    height: 100%;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .mast__rule { display: none; }

  .mast__nav {
    position: static;
    flex-direction: column;
    gap: 2px;
    margin-top: 36px;
    transform: none;
  }
  .mast__nav a {
    gap: 14px;
    height: 44px;
    padding-inline: 14px 10px;
  }
  .mast__nav a::after {                  /* the active mark reads down the rail, not across */
    top: 12px;
    right: auto;
    bottom: auto;
    width: 1px;
    height: 20px;
    transform: scaleY(0);
    transform-origin: center top;
  }
  .mast__nav a[aria-current="location"]::after { transform: scaleY(1); }
  .mast__nav-num {                       /* sans, not serif: the serif floor is 20px */
    display: block;
    width: 20px;
    color: var(--stone);
    font: 500 11px/1 var(--sans);
    letter-spacing: .14em;
  }
  .mast__nav a[aria-current="location"] .mast__nav-num { color: var(--ink); }

  .mast__end {
    margin-top: auto;              /* the account row sits at the foot of the rail */
    padding-top: 16px;
    border-top: 1px solid var(--hair);
  }
  .mast__account {
    display: flex;
    place-items: initial;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: auto;
    padding: 4px;
    border: 0;
    border-radius: 0;
    text-align: left;
  }
  .mast__monogram {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line-control);
    border-radius: 999px;
    font: 400 20px/1 var(--serif);
  }
  .mast__account-text {
    display: grid;
    min-width: 0;
    font-family: var(--sans);      /* the row would otherwise inherit the monogram's serif */
  }
  .mast__account-name {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (hover: hover) {
    .mast__account:hover .mast__account-name { text-decoration: underline; text-underline-offset: 3px; }
  }

  /* The account panel rises from the account row pinned at the foot of the rail */
  .account {
    top: auto;
    right: auto;
    bottom: 78px;
    left: 12px;
    width: 244px;
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* --- Content column -------------------------------------------------- */
  main,
  .foot { grid-column: 2; min-width: 0; }

  main.desk,
  .foot__inner.desk {
    width: auto;
    max-width: var(--shell-max);
    margin-inline: auto;          /* centres the column on very wide screens */
    padding-inline: var(--shell-pad);
  }

  .topbar {                              /* sticky: it carries the fast path to Start creating */
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 68px;
    padding-block: 14px;
    border-bottom: 1px solid var(--hair);
    background: var(--paper);
  }
  .topbar__line { color: var(--stone); }
  .topbar__end { display: flex; align-items: center; gap: 24px; }

  /* --- Rhythm: an interface, not an essay ------------------------------ */
  .band { scroll-margin-top: 84px; }
  .band--desk { padding-top: clamp(28px, 1rem + 1.4vw, 48px); }
  #record, #selection, #atelier { padding-top: clamp(56px, 2rem + 2.4vw, 88px); }
  .folio { scroll-margin-top: 84px; }

  .salute__title { font-size: clamp(40px, 1.5rem + 2.2vw, 68px); }
  .salute__aside { padding-bottom: 0; }

  /* --- The brief and the sequence each take the full column ------------ */
  .folio,
  .sequence { grid-column: 1 / -1; grid-row: auto; }
  .folio { min-height: 0; margin-top: clamp(24px, 1rem + 1.2vw, 40px); }
  .sequence { margin-top: 24px; }
  .salute--stacked .salute__aside {   /* the collision remedy: drop the lead below the H1 */
    grid-column: 1 / -1;
    grid-row: auto;
    align-self: start;
    margin-top: 20px;
  }

  /* --- Cards ----------------------------------------------------------- */
  .sequence,
  .pages,
  .atelier__rows {
    padding: var(--card-pad);
    border: 1px solid var(--hair);
    background: var(--card);
  }
  .station__marker { background: var(--card); }   /* no seam where the track passes behind it */

  .sequence__title { font-size: clamp(28px, 1rem + 1vw, 34px); }
  .stations-wrap { margin-top: 24px; }
  .station { padding-right: 20px; }

  .figures {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px;
  }
  .figure,
  .figure:first-child,
  .figure:nth-child(2n + 1) {
    padding: var(--card-pad);
    border: 1px solid var(--hair);
    background: var(--card);
  }
  .figure__value { margin-top: 10px; font-size: clamp(40px, 1rem + 2.4vw, 56px); }
  .figure__value--text { font-size: 28px; }
  .figures__caption { margin-top: 20px; }

  .pages { margin-top: 28px; }
  .pages__title { padding-bottom: 14px; }
  .pages__empty { padding-top: 22px; }

  .band__title { font-size: clamp(34px, 1rem + 2vw, 52px); }
  .band__header { margin-top: 18px; }

  /* --- Selection: three plates, level with each other ------------------ */
  .plates { row-gap: 32px; margin-top: 32px; }
  .selection__disclosure { margin-top: 32px; }
  .atelier { margin-top: 20px; }
  .atelier__rows { margin-top: 0; border-top: 1px solid var(--hair); }
  .atelier__rows li:last-child { border-bottom: 0; }
  .row-link { padding-inline: 12px; }
  .row-link__title { font-size: 22px; }
  @media (hover: hover) { .row-link:hover { padding-left: 20px; } }

  .foot { margin-top: clamp(56px, 2rem + 2.4vw, 88px); }
}

@media (min-width: 1200px) {
  .selection__aside { margin-top: 0; }          /* the lead sits beside the heading again */
  .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .plate--1, .plate--2, .plate--3 { grid-column: auto; grid-row: 1; margin-top: 0; }
  .plate__title { font-size: 26px; }
  .atelier__head { grid-column: 1 / 5; }
  .atelier__rows { grid-column: 5 / -1; }
}


/* The brand is always lowercase ("js.17"), even inside uppercase labels. */
.brand-name { text-transform: none; }