/* ============================================================
   ARLO — About (component)
   Editorial, calm, RTL-first. No cards, no glass, no gradients.
   Index: 01 section frame / 02 header band / 03 the route / 04 the plate /
   05 the close / 06 reveal on scroll / 07 responsive.
   ============================================================ */

/* ---------- 01 — Section frame ---------- */
.about {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-ink);
}

/* ---------- 02 — Header band ---------- */
/* Two voices on one baseline: the title at the reading start, the lede
   and its note at the reading end, the link closing the row. */
.about__header {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  padding-block: clamp(5rem, 12vh, 8.5rem) clamp(2.75rem, 7vh, 4.5rem);
}

.about__intro,
.about__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: content starts from the right */
}

.about__intro {
  gap: 1.3rem;
}

.about__side {
  gap: 1rem;
  max-width: 32rem;
}

/* Label — a hairline, the words, then one drawn bean closing the line */
.about__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: clamp(0.6875rem, 0.625rem + 0.3125vw, 0.8125rem);
  font-weight: 500;
  color: var(--color-accent);
}

.about__label-mark {
  display: inline-flex;
  align-items: center;
}

.about__label-mark svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 0.75;
}

.about__rule {
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.about__title {
  font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.4;
  max-width: 30rem;
  text-wrap: balance;
}

/* Accent word inside the title — underlined like a hand-marked passage */
.about__title-em {
  position: relative;
  font-style: normal;
  color: var(--color-accent);
  white-space: nowrap;
}

.about__title-em::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.08em;
  height: 2px;
  background: currentColor;
  opacity: 0.45;
}

.about__lede {
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.0625rem);
  font-weight: 300;
  line-height: 2;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* A quieter aside, hung off a hairline like a margin note */
.about__note {
  padding-inline-start: 1.1rem;
  border-inline-start: 1px solid var(--color-line);
  font-size: clamp(0.875rem, 0.82rem + 0.25vw, 0.975rem);
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-muted);
}

/* The road into the About page */
.about__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-start: 0.4rem;
  padding-block-end: 0.35rem;
  font-size: clamp(0.875rem, 0.84rem + 0.25vw, 0.95rem);
  font-weight: 500;
  color: var(--color-accent);
}

.about__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transition: opacity var(--dur-med) var(--ease-out);
}

.about__link:hover::after,
.about__link:focus-visible::after {
  opacity: 1;
}

/* Drawn, not typed: a hairline arrow in the same line-art voice as the
   map and the closing cup. It scales with the link's own font size,
   inherits the link colour, and always points left — forward in RTL. */
.about__link-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform var(--dur-med) var(--ease-out);
}

.about__link-arrow svg {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about__link:hover .about__link-arrow {
  transform: translateX(-0.3rem); /* RTL: forward is left */
}

/* ---------- 03 — The route ---------- */
/* Four stops a bean makes before it reaches your cup, strung on one
   hairline. The rail runs behind the numbered nodes: each node carries
   the paper colour, so the line passes under the disc and out again. */
.about__route {
  --about-node: 2.6rem;
  --about-route-pad-top: clamp(3rem, 7vh, 4.5rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
  /* An <ol>, so the UA sheet's marker box and 40px inline indent have
     to be cleared by hand — tokens.css only resets ul[class]. Left in
     place, the indent would shift all four stops off the rail. */
  list-style: none;
  padding-inline: 0;
  padding-block: var(--about-route-pad-top) clamp(1rem, 3vh, 2rem);
}

.about__route::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(var(--about-route-pad-top) + var(--about-node) / 2);
  height: 1px;
  background: var(--color-line);
  transform-origin: 100% 50%;
}

.about__stop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.about__stop-node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: var(--about-node);
  block-size: var(--about-node);
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent);
}

.about__stop-num {
  font-size: clamp(0.8rem, 0.76rem + 0.25vw, 0.9rem);
  letter-spacing: 0.14em;
}

.about__stop-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
}

.about__stop-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.7;
}

.about__stop-title {
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.9375rem + 0.625vw, 1.3rem);
  line-height: 1.6;
}

.about__stop-text {
  max-width: 22rem;
  font-size: clamp(0.875rem, 0.82rem + 0.3125vw, 0.975rem);
  font-weight: 300;
  line-height: 1.95;
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

/* ---------- 04 — The plate ----------
   The band is the mount; the plate itself is a sheet printed on it: a drawn
   elevation of the counter corner with its dimensions and three callouts,
   the legend that names them, and the colophon. Every mark is drawn in
   place, so the band fetches nothing. */
.about__plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M0 28 28 0' stroke='%23d9a77e' stroke-opacity='0.09'/><path d='M0 0 28 28' stroke='%23d9a77e' stroke-opacity='0.045'/><circle cx='7' cy='21' r='0.9' fill='%23fdf9f2' fill-opacity='0.13'/><ellipse cx='21' cy='7' rx='1.7' ry='1.1' transform='rotate(-32 21 7)' fill='%23d9a77e' fill-opacity='0.15'/></svg>"),
    radial-gradient(120% 160% at 82% 0%, rgba(217, 167, 126, 0.2), transparent 60%),
    radial-gradient(90% 150% at 0% 100%, rgba(154, 91, 50, 0.3), transparent 58%),
    linear-gradient(180deg, #2b2116 0%, #20170f 58%, #150e08 100%);
}

.about__sheet {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 3vh, 1.75rem);
  padding: clamp(1.5rem, 3.6vw, 2.75rem);
  color: var(--color-ink);
  background-color: #fbf7ec;
  box-shadow: 0 44px 70px -54px rgba(0, 0, 0, 0.8);
}

.about__sheet::before {
  content: "";
  position: absolute;
  inset: clamp(0.4rem, 1vw, 0.6rem);
  border: 1px solid rgba(74, 65, 54, 0.16);
  pointer-events: none;
}

.about__sheet-head {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-block-end: clamp(0.7rem, 1.8vh, 1rem);
  border-block-end: 1px solid rgba(74, 65, 54, 0.2);
}

.about__sheet-index,
.about__sheet-scale {
  font-size: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
  text-transform: uppercase;
}

.about__sheet-index {
  font-family: var(--font-latin);
  letter-spacing: 0.3em;
  color: var(--color-accent);
}

.about__sheet-scale {
  font-family: var(--font-num);
  letter-spacing: 0.18em;
  color: var(--color-muted);
}

.about__sheet-title {
  flex: 1;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.6;
}

.about__sheet-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}

/* ---- The drawing: an elevation of the corner, its measures and callouts ---- */
.about__drawing {
  display: block;
  width: 100%;
  height: auto;
}

.about__drawing-ink {
  fill: none;
  stroke: #4a4136;
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.about__drawing-soft {
  fill: none;
  stroke: rgba(74, 65, 54, 0.32);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.about__drawing-glow {
  fill: rgba(217, 167, 126, 0.16);
  animation: about-plate-glow var(--dur-glow) var(--ease-in-out) infinite alternate;
}

.about__drawing-steam {
  fill: none;
  stroke: rgba(154, 91, 50, 0.5);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: about-plate-steam var(--dur-steam) var(--ease-in-out) infinite;
}

.about__drawing-steam--2 {
  animation-delay: 2.6s;
}

.about__drawing-measure,
.about__drawing-measure-v {
  fill: none;
  stroke: rgba(154, 91, 50, 0.7);
  stroke-width: 1;
  transform-box: fill-box;
}

.about__drawing-measure {
  transform-origin: left center;
}

.about__drawing-measure-v {
  transform-origin: center top;
}

.about__drawing-dim {
  fill: none;
  stroke: rgba(154, 91, 50, 0.7);
  stroke-width: 1;
}

.about__drawing-dimtext {
  font-family: var(--font-num);
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: rgba(154, 91, 50, 0.92);
  stroke: none;
}

.about__drawing-lead path {
  fill: none;
  stroke: rgba(154, 91, 50, 0.6);
  stroke-width: 1;
}

.about__drawing-lead circle {
  fill: var(--color-accent);
}

.about__drawing-mark {
  fill: #fbf7ec;
  stroke: var(--color-accent);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
}

.about__drawing-mark-num {
  font-family: var(--font-num);
  font-size: 9px;
  fill: var(--color-accent);
}

.about__drawing-label {
  font-family: var(--font-latin);
  font-size: 8px;
  letter-spacing: 0.24em;
  fill: rgba(74, 65, 54, 0.55);
}

/* ---- The legend: the drawing's three callouts, read out.
   An <ol>, so the UA sheet's marker box and inline indent have to be
   cleared by hand — tokens.css only resets ul[class]. ---- */
.about__legend {
  display: grid;
  list-style: none;
  padding-inline: 0;
  font-size: clamp(0.875rem, 0.82rem + 0.3125vw, 0.975rem);
}

.about__legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.7rem;
  row-gap: 0.2rem;
  padding-block: clamp(0.7rem, 1.8vh, 0.95rem);
  border-block-start: 1px solid rgba(74, 65, 54, 0.16);
}

.about__legend-item:last-child {
  border-block-end: 1px solid rgba(74, 65, 54, 0.16);
}

.about__legend-num {
  grid-row: 1 / 3;
  font-size: clamp(0.7rem, 0.66rem + 0.25vw, 0.8rem);
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.about__legend-label {
  font-weight: 500;
  line-height: 1.6;
}

.about__legend-note {
  font-weight: 300;
  font-size: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9rem);
  line-height: 1.8;
  color: var(--color-ink-soft);
}

/* ---- Two endless loops, and both wait for the band to be on screen ---- */
@keyframes about-plate-steam {
  0%   { opacity: 0;    transform: translateY(10px) scale(0.94); }
  30%  { opacity: 0.5; }
  70%  { opacity: 0.26; transform: translateY(-14px) scale(1.02); }
  100% { opacity: 0;    transform: translateY(-32px) scale(1.06); }
}

@keyframes about-plate-glow {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* The band is a data-reveal-section, so the steam and the lamp wait for it
   to arrive instead of running from first paint while the visitor is still
   in the hero. Scoped to `.js-reveal:not(.is-visible)`, so with JavaScript
   off both rise exactly as they always did. */
.about.js-reveal:not(.is-visible) .about__drawing-steam,
.about.js-reveal:not(.is-visible) .about__drawing-glow {
  animation-play-state: paused;
}

/* ---- The colophon, on the sheet's own measure ---- */
.about__sheet-foot {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding-block-start: clamp(0.7rem, 1.8vh, 1rem);
  border-block-start: 1px solid rgba(74, 65, 54, 0.2);
}

.about__sheet-mark {
  font-family: var(--font-latin);
  font-size: clamp(0.65rem, 0.6rem + 0.25vw, 0.75rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.about__sheet-text {
  max-width: 46rem;
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.9;
}

/* ---------- 05 — The close ---------- */
.about__close {
  padding-block: clamp(3.5rem, 9vh, 6rem) clamp(4.5rem, 11vh, 7.5rem);
}

/* One line, centred, under a drawn quotation glyph */
.about__quote {
  position: relative;
  max-width: 46rem;
  margin-inline: auto;
  padding-block-start: 2.6rem;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  line-height: 2;
  text-align: center;
  text-wrap: balance;
}

.about__quote-glyph {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  margin-inline: auto;
  width: 1.7rem;
  height: 1.7rem;
  color: var(--color-accent);
  opacity: 0.55;
  pointer-events: none;
}

.about__quote-glyph svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* The marks row: three cells on hairlines, the closing ledger of the band */
.about__marks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: clamp(2.5rem, 6vh, 3.5rem);
  border-block-start: 1px solid var(--color-line);
}

.about__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding-block: clamp(1.1rem, 3vh, 1.6rem);
  font-size: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9rem);
  color: var(--color-ink-soft);
  transition: color var(--dur-med) var(--ease-out);
}

.about__mark + .about__mark {
  border-inline-start: 1px solid var(--color-line);
}

.about__mark-icon {
  display: inline-flex;
  align-items: center;
}

.about__mark-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  opacity: 0.8;
  transition:
    rotate var(--dur-reveal) var(--ease-out),
    scale var(--dur-reveal) var(--ease-out),
    opacity var(--dur-med) var(--ease-out);
}

@media (hover: hover) {
  .about__mark:hover {
    color: var(--color-accent);
  }
  .about__mark:hover .about__mark-icon svg {
    rotate: -10deg;
    scale: 1.1;
    opacity: 1;
  }
}

/* ---------- 06 — Reveal on scroll ----------
   js/reveal.js adds .js-reveal, then .is-visible on entry. Opacity,
   translate, rotate and scale only — no blur or filter. Without JS
   everything stays visible. The route rail draws itself from the reading
   start and each stop's four parts arrive in turn. */
.about [data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.about.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(1.6rem);
}

.about.js-reveal.is-visible [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Header, in reading order */
.about.js-reveal.is-visible .about__label { transition-delay: 0.04s; }
.about.js-reveal.is-visible .about__title { transition-delay: 0.1s; }
.about.js-reveal.is-visible .about__lede { transition-delay: 0.16s; }
.about.js-reveal.is-visible .about__note { transition-delay: 0.22s; }
.about.js-reveal.is-visible .about__link { transition-delay: 0.28s; }

/* Route — each stop is given its own beat, and its parts are offset
   inside that beat, so four by four the day assembles itself. */
.about__stop { --stop-delay: 0.06s; }
.about__stop:nth-child(2) { --stop-delay: 0.18s; }
.about__stop:nth-child(3) { --stop-delay: 0.3s; }
.about__stop:nth-child(4) { --stop-delay: 0.42s; }

.about__stop-node { --part-delay: 0s; }
.about__stop-icon { --part-delay: 0.06s; }
.about__stop-title { --part-delay: 0.11s; }
.about__stop-text { --part-delay: 0.16s; }

.about.js-reveal.is-visible .about__stop-node,
.about.js-reveal.is-visible .about__stop-icon,
.about.js-reveal.is-visible .about__stop-title,
.about.js-reveal.is-visible .about__stop-text {
  transition-delay: calc(var(--stop-delay) + var(--part-delay));
}

/* The rail draws out of the reading start */
.about__route::before {
  transition: transform var(--dur-reveal) var(--ease-out);
}

.about .js-reveal .about__route::before {
  transform: scaleX(0);
}

.about .js-reveal.is-visible .about__route::before {
  transform: none;
  transition-delay: 0.2s;
}

/* Plate — the sheet is set down on the band first, then it prints itself:
   the measures rule out from the reading start, the callouts land on their
   parts, the legend reads out row by row and the colophon closes it. */
.about__sheet,
.about__legend-item,
.about__sheet-foot,
.about__drawing-dim,
.about__drawing-lead,
.about__drawing-measure,
.about__drawing-measure-v,
.about__drawing-mark {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.about.js-reveal .about__sheet,
.about.js-reveal .about__legend-item,
.about.js-reveal .about__sheet-foot,
.about.js-reveal .about__drawing-dim,
.about.js-reveal .about__drawing-lead,
.about.js-reveal .about__drawing-measure,
.about.js-reveal .about__drawing-measure-v,
.about.js-reveal .about__drawing-mark {
  opacity: 0;
}

.about.js-reveal .about__sheet,
.about.js-reveal .about__legend-item,
.about.js-reveal .about__sheet-foot {
  translate: 0 1.2rem;
}

.about.js-reveal .about__drawing-measure { transform: scaleX(0); }
.about.js-reveal .about__drawing-measure-v { transform: scaleY(0); }
.about.js-reveal .about__drawing-mark { transform: scale(0.35); }

.about.js-reveal.is-visible .about__sheet,
.about.js-reveal.is-visible .about__legend-item,
.about.js-reveal.is-visible .about__sheet-foot,
.about.js-reveal.is-visible .about__drawing-dim,
.about.js-reveal.is-visible .about__drawing-lead,
.about.js-reveal.is-visible .about__drawing-measure,
.about.js-reveal.is-visible .about__drawing-measure-v,
.about.js-reveal.is-visible .about__drawing-mark {
  opacity: 1;
  translate: none;
  transform: none;
}

.about.js-reveal.is-visible .about__sheet { transition-delay: 0.3s; }
.about.js-reveal.is-visible .about__drawing-measure { transition-delay: 0.62s; }
.about.js-reveal.is-visible .about__drawing-measure-v { transition-delay: 0.7s; }
.about.js-reveal.is-visible .about__drawing-dim { transition-delay: 0.88s; }
.about.js-reveal.is-visible .about__drawing-lead { transition-delay: 0.94s; }
.about.js-reveal.is-visible .about__drawing-mark { transition-delay: 1s; }
.about.js-reveal.is-visible .about__legend-item:nth-child(1) { transition-delay: 0.74s; }
.about.js-reveal.is-visible .about__legend-item:nth-child(2) { transition-delay: 0.82s; }
.about.js-reveal.is-visible .about__legend-item:nth-child(3) { transition-delay: 0.9s; }
.about.js-reveal.is-visible .about__sheet-foot { transition-delay: 1.08s; }

/* Close — the glyph settles, the line arrives, the marks follow */
.about__quote-glyph {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    scale var(--dur-reveal) var(--ease-out);
}

.about .js-reveal .about__quote-glyph {
  opacity: 0;
  scale: 0.7;
}

.about.js-reveal.is-visible .about__quote-glyph {
  opacity: 0.55;
  scale: 1;
  transition-delay: 0.42s;
}

.about.js-reveal.is-visible .about__quote { transition-delay: 0.4s; }
.about.js-reveal.is-visible .about__marks { transition-delay: 0.5s; }

/* The label's hairline and the title's underline grow from the reading
   start, like a rule drawn under a line that has just been read. */
.about__rule,
.about__title-em::after {
  transform-origin: 100% 50%;
}

.about__rule {
  transition: scale var(--dur-reveal) var(--ease-out);
}

.about .js-reveal .about__rule {
  scale: 0 1;
}

.about.js-reveal.is-visible .about__label .about__rule {
  scale: 1 1;
  transition-delay: 0.1s;
}

.about__title-em::after {
  transition: scale var(--dur-reveal) var(--ease-out);
}

.about .js-reveal .about__title-em::after {
  scale: 0 1;
}

.about.js-reveal.is-visible .about__title-em::after {
  scale: 1 1;
  transition-delay: 0.36s;
}

/* ---------- 07 — Responsive ---------- */
/* Tablet — the header stacks, and the route loses its rail: with two
   stops to a row a single hairline could only ever line up with one of
   them, so each stop becomes a hairline-topped entry instead. */
@media (max-width: 59.99rem) {
  .about__header {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    padding-block: clamp(4rem, 10vh, 6.5rem) clamp(2.25rem, 6vh, 3.5rem);
  }

  .about__side {
    max-width: none;
  }

  .about__route {
    --about-node: 2.4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 2.5rem);
    padding-block: clamp(1.5rem, 4vh, 2.5rem) 0;
  }

  .about__route::before {
    display: none;
  }

  .about__stop {
    border-block-start: 1px solid var(--color-line);
    padding-block-start: clamp(1.1rem, 3vh, 1.6rem);
  }

  .about__stop-text {
    max-width: none;
  }

  /* The plate stacks: the drawing reads first, the legend follows it */
  .about__sheet-body {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vh, 2rem);
  }

  .about__quote {
    max-width: 40rem;
  }
}

/* Mobile — the rail comes back, standing up on the reading-start side,
   drawn stop by stop behind the node discs. */
@media (max-width: 39.99rem) {
  .about__title {
    line-height: 1.55;
  }

  .about__route {
    --about-node: 2.5rem;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-block: 1.25rem 0;
  }

  .about__stop {
    position: relative;
    border-block-start: 0;
    padding-block-start: 0;
    padding-inline-start: calc(var(--about-node) + 1.1rem);
  }

  .about__stop-node {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.15rem;
  }

  /* The connector between two stops: it runs from under one disc, through
     the gap, and out again under the next. The last stop draws none, so
     the rail stops where the day stops. */
  .about__stop:not(:last-child)::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--about-node) / 2);
    top: 1.25rem;
    bottom: -1.75rem;
    width: 1px;
    background: var(--color-line);
    transform-origin: 50% 0;
    transition: transform var(--dur-slow) var(--ease-out);
  }

  .about .js-reveal .about__stop:not(:last-child)::before {
    transform: scaleY(0);
  }

  .about .js-reveal.is-visible .about__stop:not(:last-child)::before {
    transform: none;
    transition-delay: calc(var(--stop-delay) + 0.1s);
  }

  /* The sheet tightens: the head breaks into two lines and the colophon
     stands up rather than squeezing the credit line beside the mark. */
  .about__plate {
    padding-block: clamp(1.75rem, 5vh, 2.5rem);
  }

  .about__sheet {
    padding: clamp(1.1rem, 4vw, 1.6rem);
  }

  .about__sheet-head {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .about__sheet-title {
    order: 3;
    flex-basis: 100%;
  }

  .about__sheet-foot {
    flex-direction: column;
    gap: 0.4rem;
  }

  .about__quote {
    padding-block-start: 2.2rem;
    font-size: 1.05rem;
  }

  .about__marks {
    grid-template-columns: 1fr;
  }

  .about__mark {
    justify-content: flex-start;
    padding-inline: 0;
  }

  .about__mark + .about__mark {
    border-inline-start: 0;
    border-block-start: 1px dashed var(--color-line);
  }
}

/* Small — the drawing's own note stands down before it crowds the sheet */
@media (max-width: 29.99rem) {
  /* The drawing's own note stands down before it crowds the sheet */
  .about__drawing-label {
    display: none;
  }

  .about__legend-note {
    font-size: 0.8125rem;
  }

  .about__mark {
    font-size: 0.8125rem;
  }
}