/* ONE RED MUG — an eccentric British internet experiment with auction-house taste.
   Shared tokens and primitives first (the operator console builds on these: keep
   them stable), then the public site, scoped under body.site. */

:root {
  --glaze: #c2382a;        /* the mug. the page. */
  --glaze-deep: #93251a;   /* shading, mug body */
  --glaze-dark: #6e1a12;   /* hero depth */
  --paper: #faf7f1;        /* catalogue paper */
  --ink: #221812;          /* warm ink */
  --clay: #8a7666;         /* secondary text on paper */
  --pale: #f2c9bd;         /* secondary text on red */
  --display: "Bodoni Moda", "Didot", serif;
  --body: "Archivo", "Helvetica Neue", sans-serif;
  --mono: "Spline Sans Mono", "SF Mono", monospace;
  --measure: 62ch;
  /* type system: Bodoni Moda for editorial headings and big numerals, Archivo for all reading text and controls, mono for small labels.
     Four reading sizes and one heading size per level, used everywhere. No italic body paragraphs. */
  --t-h3: 1.3rem;       /* every card / column / lot heading */
  --t-lede: 1.2rem;     /* the one introductory paragraph under a heading */
  --t-body: 1rem;       /* reading text inside components */
  --t-note: 0.95rem;    /* captions, qualifications, notes: always this size, always muted, never smaller */
  --t-label: 0.78rem;   /* mono labels: lot numbers, kickers, stamps */
  /* public-site additions */
  --muted: #5f4e41;        /* secondary text on paper, AA at body size */
  --cream: #f3ebdf;        /* alternate section ground */
  --rule: rgba(34, 24, 18, 0.14);
  --wrap: 1080px;
  --narrow: 720px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--glaze); outline-offset: 3px; border-radius: 2px; }
.hero :focus-visible, .offer :focus-visible { outline-color: var(--paper); }

.section-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.wordmark {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
}
.btn {
  display: inline-block;
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em;
  text-decoration: none; text-transform: uppercase;
  padding: 0.85rem 1.5rem; border-radius: 2px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* ======================================================================
   PUBLIC SITE
   ====================================================================== */
.site { font-size: 18px; line-height: 1.65; }
.site p { max-width: 66ch; }
.site .wrap { max-width: var(--wrap); margin: 0 auto; }
.site .wrap-narrow { max-width: var(--narrow); margin: 0 auto; }
.site main section { padding: clamp(2rem, 4.5vw, 3rem) clamp(1.25rem, 5vw, 3rem); }
html { scroll-padding-bottom: 5.5rem; }          /* a focused element is never left hidden behind the sticky call to action */

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink); padding: 0.6rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* type */
.site-h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1;
  margin-bottom: 0.9rem;
}
.site-h3 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; line-height: 1.2; margin: 2.2rem 0 0.6rem; }
.site h3 { font-family: var(--display); font-weight: 600; }
.site .intro { color: var(--muted); font-size: 1.1rem; margin-bottom: 1.8rem; }
.site .quiet { color: var(--muted); font-size: 0.95rem; margin-top: 0.6rem; }
.text-link { color: var(--glaze-deep); font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--glaze); }

/* the one place the catalogue joke lives on */
.lot-tag {
  display: inline-block;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em;
  border: 1px solid currentColor; border-radius: 2px;
  padding: 0.15rem 0.5rem;
}

/* buttons: plain words, no shouting */
.site .btn {
  font-family: var(--body); font-size: 1rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  padding: 0.8rem 1.35rem; border-radius: 3px;
}
.btn-paper { background: var(--paper); color: var(--glaze-deep); }
.btn-paper:hover { background: #fff; }
.btn-line { border: 1px solid rgba(250, 247, 241, 0.7); color: var(--paper); }
.btn-line:hover { background: rgba(250, 247, 241, 0.12); }
.btn-red { background: var(--glaze); color: var(--paper); }
.btn-red:hover { background: var(--glaze-deep); }

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

/* ---------- nav ---------- */
.site-nav {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.8rem 1.5rem; flex-wrap: wrap;
  max-width: var(--wrap); margin: 0 auto;
}
.site-name { font-family: var(--display); font-weight: 600; font-size: 1.25rem; text-decoration: none; }
.site-links { display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: 0.98rem; }
.site-links a { text-decoration: none; opacity: 0.85; }
.site-links a:hover, .site-links a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero ---------- */
.hero {
  background: radial-gradient(120% 120% at 80% 10%, var(--glaze) 55%, var(--glaze-dark) 100%);
  color: var(--paper);
  padding: 1.25rem clamp(1.25rem, 5vw, 3rem) clamp(2.5rem, 6vw, 4rem);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
  max-width: var(--wrap); margin: 0 auto;
  padding-top: clamp(2rem, 6vw, 3.5rem);
}
.hero .lot-tag { color: var(--paper); opacity: 0.9; }
.hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.05rem); line-height: 1.08;
  font-variant-numeric: lining-nums;
  margin: 1rem 0 0.7rem;
}
.hero h1 .hero-from, .hero h1 .hero-to { display: inline-block; white-space: nowrap; }
.hero h1 .arrow { color: var(--pale); }
.hero-tagline { font-family: var(--display); font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.25; margin-bottom: 0.7rem; }
.hero-lede { font-size: clamp(1.05rem, 1.8vw, 1.2rem); max-width: 36ch; }
.hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero-qualifier { display: inline-block; margin-top: 0.9rem; padding: 0.5rem 0.85rem; border: 1px solid rgba(250, 247, 241, 0.55); font-size: var(--t-note); color: var(--paper); max-width: 46ch; }
.hero-qualifier strong { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; display: block; }
.hero-qualifier a { color: var(--paper); }
.hero-micro { margin-top: 0.7rem; font-size: var(--t-note); color: var(--paper); opacity: 0.9; }
.hero-scarcity { margin-top: 1.1rem; font-size: var(--t-body); color: var(--pale); max-width: 44ch; }
.hero-status {
  margin-top: 1.1rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(250, 247, 241, 0.35);
  font-size: 0.95rem; max-width: none;
}

/* ---------- lot figure: illustration now, photo later ---------- */
.lot-figure { justify-self: center; text-align: center; }
.lot-art { --mug-w: min(210px, 46vw); padding-top: 1rem; display: flex; flex-direction: column; align-items: center; }
.lot-art img { display: block; width: min(400px, 74vw); height: auto; outline: 1px solid rgba(34, 24, 18, 0.35); }
.lot-art.plate {
  width: min(260px, 60vw); aspect-ratio: 1; justify-content: center;
  border: 1px dashed rgba(250, 247, 241, 0.6); border-radius: 4px;
  font-family: var(--mono); letter-spacing: 0.12em; color: var(--pale);
}
.lot-figure figcaption { margin-top: 1rem; font-size: var(--t-note); color: var(--pale); max-width: 30ch; }
/* exhibition mount: paper mat, a fine inner rule, a catalogue label and one rubber stamp */
.lot-figure { position: relative; }
.mat { position: relative; display: inline-block; background: var(--paper); padding: 1rem; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.38); }
.mat::before { content: ""; position: absolute; inset: 0.42rem; border: 1px solid rgba(34, 24, 18, 0.22); pointer-events: none; }
.mat .lot-art { padding-top: 0; }
.stamp {
  position: absolute; left: -0.9rem; bottom: 2.1rem; transform: rotate(-7deg);
  font-family: var(--mono); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--glaze-deep); background: rgba(250, 247, 241, 0.94); border: 2px solid var(--glaze-deep); padding: 0.3rem 0.65rem;
  animation: stamp-in 0.5s 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes stamp-in { from { opacity: 0; transform: rotate(-7deg) scale(1.5); } to { opacity: 1; transform: rotate(-7deg) scale(1); } }
.lot-figure figcaption.catalogue { font-style: normal; text-align: left; max-width: 26rem; margin: 1.1rem auto 0; padding-top: 0.7rem; border-top: 1px solid rgba(250, 247, 241, 0.4); color: var(--paper); }
.catalogue .cat-lot { display: block; font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.14em; color: var(--pale); }
.catalogue .cat-title { display: block; font-family: var(--display); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; }
.catalogue .cat-line { display: block; font-size: var(--t-note); color: var(--pale); }
.hero h1 .hero-q { color: var(--pale); font-style: italic; margin-left: 0.04em; }

/* the mug, in CSS (scales with --mug-w) */
.mug { position: relative; width: var(--mug-w, 210px); margin-right: calc(var(--mug-w, 210px) * 0.22); }
.mug-body {
  position: relative; width: 100%; aspect-ratio: 0.94;
  background: linear-gradient(115deg, var(--glaze-deep) 45%, var(--glaze-dark) 100%);
  border-radius: 10px 10px 46% 46% / 10px 10px 18% 18%;
  box-shadow: inset 0 14px 0 rgba(0,0,0,0.14), inset -14px -8px 30px rgba(0,0,0,0.18);
}
.mug-glaze {
  position: absolute; top: 12%; left: 12%; width: 14%; height: 62%;
  background: linear-gradient(rgba(250,247,241,0.5), rgba(250,247,241,0.06));
  border-radius: 40px; transform: rotate(4deg);
}
.mug-handle {
  position: absolute; right: -21%; top: 22%; width: 34%; height: 44%;
  border: calc(var(--mug-w, 210px) * 0.085) solid var(--glaze-dark);
  border-radius: 46% 54% 54% 46%;
}
.mug-shadow {
  width: calc(var(--mug-w, 210px) * 1.15); height: 18px; margin-top: 12px;
  background: radial-gradient(closest-side, rgba(0,0,0,0.28), transparent);
  border-radius: 50%;
}

/* ---------- the journey ---------- */
.trade1 { background: var(--cream); border-bottom: 1px solid var(--rule); }
/* the proposed split: an exhibition-label presentation, qualifications beside every figure */
.proposal { background: var(--paper); border-bottom: 1px solid var(--rule); }
.proposal-flag { border-left: 3px solid var(--glaze); background: #fff; padding: 0.7rem 1rem; margin: 0.3rem 0 1.2rem; max-width: 70ch; font-size: var(--t-body); }
.proposal-flag strong { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--glaze-deep); display: block; margin-bottom: 0.15rem; }
.alloc-bar { display: flex; height: 14px; border-radius: 2px; overflow: hidden; background: rgba(34, 24, 18, 0.08); }
.alloc-bar span:nth-child(1) { background: var(--glaze); } .alloc-bar span:nth-child(2) { background: var(--ink); } .alloc-bar span:nth-child(3) { background: var(--clay); }
.alloc3 { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 1.2rem; margin-top: 1rem; }
.alloc-col { border-top: 3px solid var(--glaze); padding-top: 0.5rem; }
.alloc-col.col-traders { border-top-color: var(--ink); background: #fff; padding: 0.5rem 1rem 1rem; box-shadow: 0 1px 0 var(--rule); }
.alloc-col.col-founder { border-top-color: var(--clay); }
.alloc-n { font-family: var(--display); font-weight: 600; font-size: 2.6rem; line-height: 1; font-variant-numeric: lining-nums; color: var(--glaze-deep); }
.col-traders .alloc-n { color: var(--ink); font-size: 3.2rem; }
.col-founder .alloc-n { color: var(--clay); }
.alloc-col h3 { font-size: var(--t-h3); line-height: 1.25; margin: 0.3rem 0 0.3rem; }
.alloc-col p:last-child { color: var(--muted); font-size: var(--t-note); }
.proposal-text { margin-top: 1.4rem; font-size: var(--t-lede); line-height: 1.5; max-width: 62ch; }
.proposal-fine { margin-top: 0.8rem; color: var(--muted); font-size: var(--t-note); max-width: 70ch; }
.kicker { display: flex; align-items: center; gap: 0.8rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--glaze-deep); margin-bottom: 0.6rem; }
.kicker::after { content: ""; height: 1px; width: 7rem; background: var(--rule); }
.trade1-lede { font-size: var(--t-lede); line-height: 1.5; max-width: 60ch; margin-bottom: 1.5rem; }
.gets { list-style: none; counter-reset: get; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.gets li { counter-increment: get; border-top: 2px solid var(--glaze); padding-top: 0.7rem; }
.gets li::before { content: "No. " counter(get); font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.12em; color: var(--glaze-deep); }
.gets h3 { font-size: var(--t-h3); line-height: 1.2; margin: 0.15rem 0 0.35rem; }
.gets p { color: var(--muted); font-size: var(--t-body); }
.gets li.is-proposed { border-top-style: dashed; }          /* the one benefit that is only a proposal looks provisional */
.trade1-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.4rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.trade1-next h3 { font-size: var(--t-h3); margin-bottom: 0.4rem; }
.trade1-next p { font-size: 1rem; }
.next-steps { margin-left: 1.2rem; font-size: 1rem; }
.next-steps li { margin-bottom: 0.35rem; padding-left: 0.2rem; }
.next-steps li::marker { color: var(--glaze); font-weight: 600; }
.trade1-cta { margin-top: 1.6rem; }
.trade1-status { color: var(--muted); font-size: var(--t-note); margin-top: 0.9rem; max-width: 60ch; }
.trade1-address { font-family: var(--mono); font-size: 0.85rem; margin-top: 0.5rem; }

.journey { background: var(--cream); }
.episodes { list-style: none; margin-top: 0.5rem; position: relative; padding-left: 2.4rem; }
.episodes::before { content: ""; position: absolute; left: 0.5rem; top: 1.9rem; bottom: 2.4rem; width: 2px; background: var(--glaze); }   /* the thread: it lengthens with every trade */
.episode::after { content: ""; position: absolute; left: -2.2rem; top: 1.7rem; width: 16px; height: 16px; border-radius: 50%; background: var(--glaze); border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--glaze); }
.episode.ghost::after { background: var(--paper); box-shadow: 0 0 0 2px var(--glaze); animation: node-pulse 2.6s ease-in-out infinite; }
@keyframes node-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--glaze); } 50% { box-shadow: 0 0 0 6px rgba(194, 56, 42, 0.22); } }
.episode {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule); border-radius: 6px;
  padding: 1.4rem 1.5rem 1.5rem;
  display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.4rem;
}
.episode + .episode { margin-top: 2.6rem; }
.episode + .episode::before {           /* the arrow between lots */
  content: "↓ must be worth more"; position: absolute; left: 0.2rem; top: -2.2rem;
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.6rem; color: var(--glaze-deep);
}
.ep-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ep-lot { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--glaze-deep); }
.ep-value { font-family: var(--display); font-weight: 600; font-size: 1.9rem; line-height: 1; }
.ep-figure { --mug-w: 92px; padding: 0.9rem 0 0.2rem; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.6rem; }
.ep-figure img { width: 140px; max-width: calc(50% - 0.3rem); height: auto; border-radius: 4px; }
.ep-body { padding-top: 0.6rem; min-width: 0; }
.ep-body h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 0.35rem; }
.ep-detail { color: var(--ink); }
.ep-meta { color: var(--muted); font-size: var(--t-note); margin-top: 0.5rem; }
.episode.is-current { border-color: rgba(194, 56, 42, 0.45); box-shadow: 0 2px 0 rgba(194, 56, 42, 0.15); }
.episode.ghost { background: transparent; border-style: dashed; border-color: rgba(34, 24, 18, 0.35); }
.episode.ghost .ep-body { grid-column: 1 / -1; padding-top: 0.3rem; }
.episode.ghost h3 { font-weight: 600; }
.episode.ghost .ghost-lede { font-size: 1.1rem; margin-top: 0.2rem; }
.episode.ghost .ghost-why { color: var(--muted); margin-top: 0.7rem; }
.episode.ghost .btn { margin-top: 1.1rem; }


/* ---------- why ---------- */
.why { background: var(--paper); }
.why p + p { margin-top: 0.9rem; }
.why .sign { font-family: var(--display); font-style: italic; font-size: 1.2rem; }
.metric {
  margin-top: 1.8rem !important; padding-top: 1rem; border-top: 1px solid var(--rule);
  color: var(--muted); font-size: 0.95rem;
}
.metric-label { font-weight: 600; color: var(--ink); }
.metric-label::after { content: ":"; }

/* ---------- rules ---------- */
.basic-rules { margin: 0.4rem 0 1.4rem 1.4rem; font-size: 1.15rem; }
.basic-rules li { padding-left: 0.3rem; margin-bottom: 0.45rem; }
.basic-rules li::marker { color: var(--glaze); font-family: var(--display); font-weight: 600; }

/* ---------- agents gateway ---------- */
.agents-band { border-top: 1px solid var(--rule); }
.site main section.agents-band { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.agents-band .site-h3 { margin-top: 0; }

/* ---------- final call ---------- */
.offer {
  background: radial-gradient(120% 140% at 50% 110%, var(--glaze-dark) 0%, var(--glaze) 55%);
  color: var(--paper); text-align: center;
}
.offer .lot-tag { color: var(--pale); }
.site main section.offer { padding-top: clamp(2.4rem, 5vw, 3.6rem); padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.offer h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1;
  margin: 0 auto 1.3rem; max-width: 18ch;
}
.offer-copy { margin: 1.1rem auto 0; color: var(--pale); }
.offer-pending { font-size: var(--t-body); }

/* ---------- the sticky call to action: one, quiet, never over the footer or the other buttons ---------- */
.sticky-cta {
  position: fixed; z-index: 20; right: 1.25rem; bottom: 1.25rem;
  display: flex; flex-direction: column; gap: 0.1rem; max-width: min(22rem, calc(100vw - 2.5rem));
  padding: 0.7rem 1.1rem; border-radius: 3px; text-decoration: none;
  background: var(--glaze); color: var(--paper); box-shadow: 0 8px 24px rgba(34, 24, 18, 0.28);
}
.sticky-cta[hidden] { display: none; }
.sticky-cta:hover { background: var(--glaze-deep); }
.sticky-cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sticky-main { font-weight: 600; font-size: var(--t-body); line-height: 1.25; }
.sticky-sub { font-size: var(--t-note); color: var(--paper); opacity: 0.92; }

/* ---------- footer ---------- */
.site-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.6rem 1.5rem; flex-wrap: wrap;
  padding: 1.4rem clamp(1.25rem, 5vw, 3rem);
  background: var(--ink); color: var(--paper);
}
.foot-links { font-size: 0.92rem; color: rgba(250, 247, 241, 0.75); }
.foot-links a { color: var(--paper); }

/* ---------- secondary pages ---------- */
.page-head { background: var(--glaze); color: var(--paper); padding: 1.1rem clamp(1.25rem, 5vw, 3rem); }
.page-main { padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem) 4rem; }
.page-title { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.1; margin-bottom: 0.8rem; }
.conditions { margin: 0.6rem 0 2rem 1.4rem; }
.conditions li { padding-left: 0.3rem; margin-bottom: 0.9rem; }
.conditions li::marker { color: var(--glaze); font-weight: 600; }
.file-list { margin: 0.4rem 0 1rem 1.3rem; }
.file-list li { margin-bottom: 0.6rem; padding-left: 0.2rem; }
.file-list a { color: var(--glaze-deep); }
.site code { font-family: var(--mono); font-size: 0.86em; background: rgba(34,24,18,0.07); padding: 0.05rem 0.3rem; border-radius: 3px; }
.raw { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.raw summary { cursor: pointer; color: var(--glaze-deep); font-weight: 600; }
.raw[open] summary { margin-bottom: 0.6rem; }
.facts { margin: 0.4rem 0 0.6rem; }
.facts div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.facts div:first-child { border-top: 1px solid var(--rule); }
.facts dt { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--glaze-deep); padding-top: 0.2rem; }
@media (max-width: 520px) { .facts div { grid-template-columns: 1fr; gap: 0.1rem; } }
.status-note { border-left: 3px solid var(--glaze); padding: 0.2rem 0 0.2rem 1rem; color: var(--muted); margin: 0.8rem 0 1.2rem; }
.feed {
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.6;
  padding: 1.2rem 1.4rem; border-radius: 4px;
  overflow-x: auto; max-height: 34rem; margin-top: 0.4rem;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .sticky-cta { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 0; align-items: center; text-align: center;
    padding: 0.7rem 1.25rem calc(0.7rem + env(safe-area-inset-bottom)); padding-left: calc(1.25rem + env(safe-area-inset-left)); padding-right: calc(1.25rem + env(safe-area-inset-right)); }
  .hero-grid { grid-template-columns: 1fr; }
  .lot-art { --mug-w: min(150px, 40vw); padding-top: 0.5rem; }
  /* phones: the photograph still leads, but smaller, and its catalogue label drops below the copy, so the headline, the proposal,
     its qualifier and the button are all in the first screen. (display: contents lets the mat and the label be placed separately.) */
  .hero-grid { padding-top: 1rem; gap: 1.1rem; }
  .lot-figure { display: contents; }
  .mat { order: -1; justify-self: center; padding: 0.7rem; }
  .mat::before { inset: 0.3rem; }
  .lot-art img { width: min(180px, 50vw); }
  .hero-copy { order: 0; }
  .lot-figure figcaption.catalogue { order: 1; width: 100%; max-width: 26rem; justify-self: center; margin: 0; }
  .stamp { bottom: 1.2rem; }
  .gets, .trade1-next, .alloc3 { grid-template-columns: 1fr; }
  .stamp { left: 0.4rem; bottom: 1.9rem; }
  .lot-figure figcaption.catalogue { max-width: min(26rem, 100%); }
}
@media (max-width: 520px) {
  .site { font-size: 17px; }
  .episode { grid-template-columns: 1fr; padding: 1.2rem; }
  .ep-figure { --mug-w: 76px; padding-top: 0.6rem; }
  .ep-value { font-size: 1.6rem; }
  .episodes { padding-left: 1.8rem; }
  .episodes::before { left: 0.3rem; }
  .episode::after { left: -1.95rem; width: 14px; height: 14px; top: 1.5rem; }
  .site-links { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover { transform: none; }
  .stamp, .episode.ghost::after { animation: none; }
}