/* =========================================================
   TULIPMANIA - Amsterdamsche Beurs, Anno 1637
   A single antique broadsheet. Sharp corners throughout.
   ========================================================= */

:root {
  /* Sampled from assets/web/paper-texture.jpg (avg rgb 249,238,213) */
  --paper: oklch(0.94 0.03 88);
  --paper-deep: oklch(0.90 0.035 85);       /* vignette / seams */
  --ink: oklch(0.24 0.02 60);               /* iron gall, never pure black */
  --ink-faded: oklch(0.44 0.02 60);         /* secondary, AA vs paper */
  --ink-hair: oklch(0.24 0.02 60 / 0.28);   /* ruled lines */
  --ink-hair-soft: oklch(0.24 0.02 60 / 0.16);
  --vermillion: oklch(0.48 0.19 30);        /* red ink, wax, the crash */
  --vermillion-deep: oklch(0.42 0.18 30);
  --gilt: oklch(0.68 0.10 85);              /* faded gold, used sparingly */
  --scanbed: oklch(0.20 0.012 70);          /* dark warm scan bed at edges */

  --measure: 68ch;

  /* Modular type scale, ratio 1.25 */
  --fs-fine: 0.78rem;
  --fs-small: 0.86rem;
  --fs-body: clamp(1rem, 0.96rem + 0.22vw, 1.14rem);
  --fs-lede: clamp(1.18rem, 1.1rem + 0.4vw, 1.42rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem);
  --fs-display: clamp(3.4rem, 1rem + 10vw, 9.5rem);
}

* { box-sizing: border-box; border-radius: 0; }

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

body {
  margin: 0;
  background-color: var(--scanbed);
  color: var(--ink);
  font-family: "EB Garamond", Georgia, serif;
  font-size: var(--fs-body);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* safety net against sub-pixel margin overflow; clip (not hidden) so we do
     not create a scroll container that would break position:sticky pinning */
  overflow-x: clip;
}

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

/* Square focus rings, never rounded */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.btn--vermillion:focus-visible { outline-color: var(--vermillion-deep); }

a { color: var(--ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--vermillion-deep); }

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

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

/* =========================================================
   THE SHEET: centered document over a dark scan bed
   ========================================================= */
.sheet {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(1.6rem, 4vw, 4rem) clamp(1.3rem, 4vw, 3.4rem);
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 90% at 50% 12%, transparent 60%, var(--paper-deep) 140%),
    url("assets/web/paper-texture.jpg");
  background-repeat: no-repeat, repeat;
  background-size: cover, 512px 512px;
  border: 1px solid var(--ink);
  position: relative;
}
/* subtle scan-bed vignette so the sheet edges read as a scan */
@media (min-width: 1180px) {
  body { padding: clamp(1rem, 3vw, 3rem) 0; }
}

/* =========================================================
   RULES / KEYLINES
   ========================================================= */
.rule { border: 0; margin: 0; }
.rule--hair {
  height: 1px; background: var(--ink-hair);
  transform-origin: center;
}
.rule--double {
  height: 4px;
  border-top: 1px solid var(--ink-hair);
  border-bottom: 1px solid var(--ink-hair);
  background: transparent;
  margin: clamp(2.4rem, 5vw, 4rem) 0;
}

/* =========================================================
   I. MASTHEAD
   ========================================================= */
.masthead { text-align: center; padding: clamp(0.4rem, 2vw, 1.4rem) 0 clamp(1.6rem, 4vw, 3rem); position: relative; }
.masthead .rule--hair:first-child { margin-bottom: clamp(1rem, 3vw, 1.8rem); }
.masthead .rule--hair:last-child { margin-top: clamp(1.4rem, 3vw, 2.2rem); }

.meta {
  font-family: "IM Fell English SC", serif;
  letter-spacing: 0.28em;
  font-size: var(--fs-small);
  color: var(--ink-faded);
  margin: 0 0 clamp(0.8rem, 2vw, 1.4rem);
  text-indent: 0.28em;
}

.masthead__title {
  font-family: "IM Fell English", serif;
  font-weight: 400;
  font-size: clamp(2.6rem, calc((100vw - 2.6rem) / 7.6), 8.5rem);
  line-height: 0.92;
  margin: 0;
  letter-spacing: 0.005em;
  color: var(--ink);
}

.banner {
  font-family: "IM Fell English SC", serif;
  letter-spacing: 0.3em;
  font-size: clamp(0.9rem, 0.7rem + 0.9vw, 1.35rem);
  margin: clamp(0.5rem, 1.5vw, 1rem) 0 0;
  text-indent: 0.3em;
  color: var(--ink);
}

.banner-sub {
  font-family: "IM Fell English SC", serif;
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--ink-faded);
  max-width: 40ch;
  margin: 0.6rem auto 0;
}

.deck {
  font-style: italic;
  max-width: 60ch;
  margin: clamp(1.2rem, 3vw, 1.8rem) auto 0;
  font-size: var(--fs-lede);
  color: var(--ink);
}

/* =========================================================
   STAMPS (vermillion, square, ink-bitten)
   ========================================================= */
.stamp {
  display: inline-block;
  font-family: "IM Fell English SC", serif;
  letter-spacing: 0.12em;
  color: var(--vermillion);
  border: 1px solid var(--vermillion);
  padding: 0.14em 0.5em 0.1em;
  line-height: 1.1;
  background: transparent;
  mix-blend-mode: multiply;
}

.stamp--ticker {
  position: absolute;
  /* sit at the deck paragraph's vertical level, out in the empty right margin
     (deck is max-width 60ch centered, so this never covers the wordmark) */
  bottom: clamp(1.2rem, 4vw, 3rem);
  right: clamp(2rem, 9vw, 8rem);
  top: auto;
  border: 3px double var(--vermillion);
  font-size: clamp(1.15rem, 1.5vw, 1.6rem);
  padding: 0.3em 0.7em;
  transform: rotate(-6deg);
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .stamp--ticker { transition: transform 200ms ease; }
  .stamp--ticker:hover { transform: rotate(-4deg); }
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section { padding: clamp(1rem, 2vw, 1.6rem) 0; }
.section__head {
  font-family: "IM Fell English SC", serif;
  font-weight: 400;
  font-size: var(--fs-h2);
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 0 clamp(1.2rem, 3vw, 1.8rem);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink-hair);
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}
.section__head .numeral { color: var(--vermillion); }
.section__head .section__dot { color: var(--ink-faded); }

/* =========================================================
   II. THE SPECIMEN
   ========================================================= */
.specimen {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(1.4rem, 4vw, 3.2rem);
  align-items: start;
}
.specimen__plate { margin: 0; padding-left: clamp(0px, 2vw, 1.4rem); }
.plate-frame { position: relative; will-change: transform; }
.plate-frame img { width: 100%; }

.blend-multiply { mix-blend-mode: multiply; }

/* engraving label callouts, connected by 1px rules */
.callout {
  position: absolute;
  font-family: "IM Fell English SC", serif;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}
.callout__label { position: relative; z-index: 2; background: var(--paper); padding: 0 0.25em; }
.callout::before {
  content: ""; position: absolute; top: 50%; height: 1px; background: var(--ink-hair);
}
/* flower callout: right side, pointing left into bloom */
.callout--flower { top: 20%; right: -6%; }
.callout--flower::before { right: 100%; width: 3.4rem; }
/* leaf callout: left side */
.callout--leaf { top: 55%; left: -8%; }
.callout--leaf::before { left: 100%; width: 3rem; }
/* bulb callout: right side low */
.callout--bulb { top: 84%; right: -4%; }
.callout--bulb::before { right: 100%; width: 3rem; }

.specimen__text { max-width: var(--measure); }
.specimen__text > * { margin: 0 0 1.1rem; }
.lede { font-size: var(--fs-lede); font-style: italic; color: var(--ink); }
.figure-line {
  font-family: "IM Fell English SC", serif;
  letter-spacing: 0.08em;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink);
  padding-top: 0.9rem;
  border-top: 1px solid var(--ink-hair);
}

/* =========================================================
   III. THE LEDGER
   ========================================================= */
.intro-italic { font-style: italic; color: var(--ink-faded); margin: 0 0 1.4rem; max-width: var(--measure); }

.ledger {
  display: grid;
  grid-template-columns: 1fr clamp(180px, 26%, 300px);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}

.ledger__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ledger__table thead th {
  font-family: "IM Fell English SC", serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  font-size: var(--fs-small);
  text-align: left;
  color: var(--ink);
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--ink);
}
.ledger__table td {
  padding: 0.72rem 0.7rem;
  border-bottom: 1px solid var(--ink-hair);
  vertical-align: middle;
}
.ledger__table tbody tr:last-child td { border-bottom: 0; }
.col-price { font-variant-numeric: tabular-nums; text-align: right; }
.col-status { width: 1%; white-space: nowrap; text-align: right; }
.col-name { font-style: italic; }
.col-date { font-family: "IM Fell English SC", serif; letter-spacing: 0.04em; font-size: var(--fs-small); white-space: nowrap; }

.row--nobid td { color: var(--ink-faded); }
/* the annotated cell anchors the handwritten margin note (position:relative on
   tr is unreliable, so we relate the note to this td instead) */
.col-name--annotated { position: relative; }

.stamp--sold {
  font-size: var(--fs-fine);
  letter-spacing: 0.14em;
  transform: rotate(-2.5deg);
}
.js-row:nth-child(2) .stamp--sold { transform: rotate(1.5deg); }
.js-row:nth-child(3) .stamp--sold { transform: rotate(-3.5deg); }
.js-row:nth-child(4) .stamp--sold { transform: rotate(2deg); }
.js-row:nth-child(5) .stamp--sold { transform: rotate(-1deg); }

.nobid {
  font-family: "IM Fell English SC", serif;
  letter-spacing: 0.12em;
  font-size: var(--fs-fine);
  color: var(--ink-faded);
}

/* red quill annotation: anchored to the annotated name cell, then pushed out
   into the right margin so it overlaps the table edge like a handwritten note */
.quill-note {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(clamp(6rem, 62%, 15rem), -50%) rotate(-6deg);
  font-family: "Monsieur La Doulaise", "EB Garamond", cursive;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
  line-height: 1.05;
  color: var(--vermillion);
  width: 11ch;
  text-align: center;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.medallion { margin: 0; text-align: center; }
.medallion img { width: 100%; }
.medallion figcaption {
  font-family: "IM Fell English SC", serif;
  letter-spacing: 0.1em;
  font-size: var(--fs-fine);
  color: var(--ink-faded);
  margin-top: 0.6rem;
}

/* =========================================================
   IV. THE CHART
   ========================================================= */
.chart-pin { }
.chart { margin: 0; }
.chart__svg { width: 100%; height: auto; display: block; overflow: visible; }

.chart__axes line { stroke: var(--ink); stroke-width: 1.4; }
.chart__ticklabels text {
  font-family: "IM Fell English SC", serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  fill: var(--ink-faded);
}
.chart__ticklabels--x text { font-size: 14px; }

.chart__path {
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart__bleed circle { fill: var(--vermillion); mix-blend-mode: multiply; }
.chart__bleed circle:first-child { opacity: 0.55; }

.chart__note-quill {
  font-family: "Monsieur La Doulaise", cursive;
  font-size: 30px;
  fill: var(--vermillion);
}
.chart__note-ink {
  font-family: "IM Fell English SC", serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  fill: var(--ink);
}
.chart__caption {
  font-style: italic;
  text-align: center;
  color: var(--ink-faded);
  font-size: var(--fs-small);
  margin-top: 0.8rem;
}

/* tipped-in plate (ship) */
.tipped-plate {
  margin: clamp(1.8rem, 4vw, 3rem) auto 0;
  max-width: 460px;
  transform: rotate(-1.4deg);
  text-align: center;
}
.tipped-plate__inner {
  border: 1px solid var(--ink);
  padding: 0.6rem;
  background: var(--paper);
}
.tipped-plate img { width: 100%; }
.tipped-plate figcaption {
  font-family: "IM Fell English SC", serif;
  letter-spacing: 0.1em;
  font-size: var(--fs-fine);
  color: var(--ink-faded);
  margin-top: 0.6rem;
}

/* =========================================================
   V. THE CONTRACT
   ========================================================= */
.contract {
  position: relative;
  border: 1px solid var(--ink);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  max-width: 820px;
  margin: 0 auto;
}
.contract__inner {
  border: 1px solid var(--ink-hair);
  padding: clamp(1.4rem, 4vw, 2.6rem);
  text-align: center;
}
.contract__body { font-style: italic; max-width: 56ch; margin: 0 auto 1.6rem; font-size: var(--fs-lede); }

.contract__ca {
  font-family: "IM Fell English", serif;
  font-size: clamp(1.1rem, 0.8rem + 1.6vw, 1.9rem);
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 1.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1em 0.55em;
  word-break: break-all;
}

.contract__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

.btn {
  display: inline-block;
  font-family: "IM Fell English SC", serif;
  letter-spacing: 0.12em;
  font-size: var(--fs-small);
  padding: 0.7em 1.3em;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.1;
  transition: background-color 160ms ease, color 160ms ease;
}
.btn--vermillion { border: 2px solid var(--vermillion); color: var(--vermillion); }
.btn--vermillion:hover { background: var(--vermillion); color: var(--paper); }
.btn--ink { border: 1px solid var(--ink); color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: var(--paper); }
.btn--buy {
  background: var(--vermillion);
  color: var(--paper);
  border: 2px solid var(--vermillion);
}
.btn--buy:hover { background: var(--vermillion-deep); border-color: var(--vermillion-deep); }
.btn--buy:focus-visible { outline-color: var(--vermillion-deep); }

/* inline ink-colored underlined link (notarial, in-body) */
.ink-link { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.ink-link:hover { color: var(--vermillion-deep); }

.wax-seal {
  position: absolute;
  width: clamp(120px, 16vw, 160px);
  bottom: clamp(-52px, -7vw, -70px);
  left: 50%;
  transform: translateX(-50%);
}

/* copied stamp overlay */
.stamp--copied {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-9deg) scale(1.6);
  font-size: clamp(1.6rem, 1.2rem + 2vw, 3rem);
  letter-spacing: 0.14em;
  border-width: 3px;
  padding: 0.28em 0.7em 0.22em;
  color: var(--vermillion);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.stamp--copied.is-shown { animation: stampHit 2.1s ease-out forwards; }
@keyframes stampHit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1.6); }
  12% { opacity: 0.95; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
  70% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
}

/* =========================================================
   VI. INSTRUCTIONS
   ========================================================= */
.notarial { list-style: none; counter-reset: none; margin: 0; padding: 0; max-width: var(--measure); }
.notarial li {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ink-hair);
  align-items: baseline;
}
.notarial li:last-child { border-bottom: 0; }
.notarial__num {
  font-family: "IM Fell English SC", serif;
  color: var(--vermillion);
  letter-spacing: 0.04em;
  min-width: 2.2em;
  flex-shrink: 0;
}
.notarial__text { font-size: var(--fs-body); }

/* =========================================================
   COLOPHON
   ========================================================= */
.colophon { text-align: center; padding: clamp(1.4rem, 4vw, 2.4rem) 0 clamp(0.6rem, 2vw, 1.4rem); }
.colophon__device { margin: 0 auto clamp(0.8rem, 2vw, 1.4rem); }
.colophon__device img {
  width: clamp(170px, 34vw, 200px);
  margin: 0 auto;
}
.colophon__mark {
  font-family: "IM Fell English SC", serif;
  letter-spacing: 0.18em;
  font-size: var(--fs-small);
  color: var(--ink);
  margin: 0 0 1.2rem;
}
.colophon__fine {
  font-size: var(--fs-fine);
  color: var(--ink-faded);
  max-width: 62ch;
  margin: 0 auto 1.2rem;
  line-height: 1.55;
}
.colophon__ca {
  font-family: "EB Garamond", monospace;
  font-size: var(--fs-fine);
  letter-spacing: 0.06em;
  color: var(--ink-faded);
  word-break: break-all;
  margin: 0 0 0.4rem;
}
.colophon__link { font-size: var(--fs-fine); margin: 0; }

/* =========================================================
   MICRO-INTERACTIONS
   ========================================================= */

/* F1. Bubble meter: fixed reading line at the very top of the viewport.
   No-JS: stays scaleX(0) and invisible. Reduced-motion: hidden entirely. */
.bubble-meter {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--vermillion);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 1000;
  pointer-events: none;
}
/* burst state: the line reads as broken/dashed after the crash */
.bubble-meter.is-burst {
  background: repeating-linear-gradient(90deg,
    var(--vermillion) 0 8px, transparent 8px 14px);
}
@media (prefers-reduced-motion: reduce) {
  .bubble-meter { display: none; }
}

/* F2. Buttons: pressed micro-nudge (transform only). */
.btn:active { transform: translateY(1px) scale(0.99); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color 160ms ease, color 160ms ease, transform 120ms ease-out; }
}

/* F3. Wax seal: interactive copy affordance. */
.wax-seal { cursor: pointer; }
.wax-seal:active { transform: translateX(-50%) scale(0.97); }

/* F4. Ledger rows: hover tint + VERKOCHT stamp nudge (transform/color only).
   The stamp base rotation lives in --stamp-rot; GSAP writes its final inline
   transform on the .js-stamp, so we wiggle an inner wrapper span instead to
   avoid fighting that inline transform. */
.stamp--sold .stamp__wiggle { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ledger__table tbody tr { transition: background-color 120ms ease; }
  .ledger__table tbody tr:hover { background: var(--paper-deep); }
  .stamp--sold .stamp__wiggle { transition: transform 160ms ease; }
  .js-row:hover .stamp--sold .stamp__wiggle { transform: rotate(1.5deg); }
}

/* F5. Section heading rules: draw the bottom line in on scroll enter.
   No-JS keeps the static border-bottom; js-ready swaps to an animated
   ::after line so the border can scale in. */
.js-ready .section__head { border-bottom-color: transparent; position: relative; }
.js-ready .section__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--ink-hair);
  transform: scaleX(0);
  transform-origin: left center;
}
.js-ready .section__head.is-drawn::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .js-ready .section__head::after { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .section__head { border-bottom-color: var(--ink-hair); }
  .js-ready .section__head::after { display: none; }
}

/* F6. Specimen callouts: pre-state for scroll-in leader-line draw + label fade.
   Leader lines are the ::before rules; we scale them from their anchored side. */
.js-ready .callout__label { opacity: 0; }
.js-ready .callout::before { transform: scaleX(0); }
.callout--flower::before { transform-origin: right center; }
.callout--leaf::before { transform-origin: left center; }
.callout--bulb::before { transform-origin: right center; }
.js-ready .callout.is-drawn .callout__label { opacity: 1; }
.js-ready .callout.is-drawn::before { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .js-ready .callout__label { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .js-ready .callout::before { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .callout__label { opacity: 1; }
  .js-ready .callout::before { transform: none; }
}

/* F7. Notarial list: fade-up stagger + numeral color settle handled in JS. */
.js-ready .notarial li { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) {
  .js-ready .notarial li { opacity: 1; transform: none; }
}

/* F8. Contract CA: ink-like underline sweep on hover of the paragraph. */
#ca-display span {
  background-image: linear-gradient(var(--vermillion), var(--vermillion));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
}
@media (prefers-reduced-motion: no-preference) {
  #ca-display span { transition: background-size 300ms ease; }
}
#ca-display:hover span { background-size: 100% 1px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 760px) {
  .specimen { grid-template-columns: 1fr; }
  .specimen__plate { max-width: 380px; margin: 0 auto; padding-left: 0; }
  .callout--flower { right: 2%; }
  .callout--leaf { left: 0; }
  .callout--bulb { right: 4%; }

  .ledger { grid-template-columns: 1fr; }
  .medallion { max-width: 300px; margin: 0 auto; }

  .ledger__table { font-size: var(--fs-small); }
  .ledger__table td { padding: 0.55rem 0.4rem; }
  .ledger__table thead th { padding: 0.45rem 0.4rem; }
  .col-name { font-size: var(--fs-fine); }
  .stamp--sold { font-size: 0.66rem; letter-spacing: 0.06em; padding: 0.1em 0.3em; }

  .quill-note {
    position: static; display: block; transform: rotate(-3deg);
    margin: 0.2rem 0 0.4rem auto; text-align: right; max-width: none;
    width: auto; left: auto; top: auto;
  }

  .stamp--ticker {
    top: 0.1rem;
    right: 0.4rem;
    bottom: auto;
    font-size: 1rem;
    border: 2px double var(--vermillion);
    padding: 0.22em 0.55em 0.16em;
    opacity: 1;
  }

  /* the chart SVG uses overflow:visible for its ink-bleed and note wobble on
     desktop; on a narrow viewport its right-edge annotations spill past the
     sheet and widen the document. Clip the SVG's own overflow here, and clip
     the residual painted scroll-width at the sheet so the doc stays == viewport. */
  .chart__svg { overflow: hidden; }
  .chart, .chart-pin { overflow-x: clip; }
  .sheet { overflow-x: clip; }

  /* the copied stamp is scaled 1.6x and, at full size, widens the document
     past the viewport even while invisible. Shrink it so its total width
     stays well under the mobile viewport. */
  .stamp--copied {
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    border-width: 2px;
    padding: 0.24em 0.5em 0.18em;
  }
}

/* =========================================================
   MOTION: pre-animation states only when JS + motion allowed.
   Progressive enhancement: without .js-ready, everything is
   in its final, visible state.
   ========================================================= */
/* Masthead elements are NOT pre-hidden in CSS: if GSAP fails to
   load, the masthead stays fully visible. GSAP hides them with an
   inline .set() the instant before it animates them in. */
.js-ready .js-row { opacity: 0; transform: translateY(14px); }
.js-ready .js-stamp { opacity: 0; transform: scale(1.6) rotate(var(--stamp-rot, -2deg)); }
.js-ready .js-note { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js-ready .js-row,
  .js-ready .js-stamp,
  .js-ready .js-note { opacity: 1; transform: none; }
  .stamp--copied.is-shown { animation: none; opacity: 0.95; }
}