/* ═══════════════════════════════════════════════════════════════
   Miora — authenticity record
   Palette  #872236 maroon · #c95465 rose · #1A1714 ink
            #F7F1E6 cream  · #e7e2d6 sand
   Type     Fraunces (display) · Space Mono (body + labels)
   ═══════════════════════════════════════════════════════════════ */

/* The hidden attribute must always win. The browser's own rule for it is
   the weakest kind there is, so any component that sets its own display —
   .btn is inline-flex, .filter is flex — quietly draws itself anyway even
   while the code believes it is hidden. That has now caused the same bug
   three separate times (the city filter, the city switcher, the Try again
   button), so it is settled here once for every page. */
[hidden] { display: none !important; }

:root {
  --maroon: #872236;
  --rose:   #c95465;
  --ink:    #1A1714;
  --cream:  #F7F1E6;
  --sand:   #e7e2d6;

  --ink-70: rgba(26, 23, 20, .70);
  /* .62 is the lightest this tint can go and still clear WCAG AA (4.5:1) on
     both cream and sand at the small sizes it is used at. */
  --ink-45: rgba(26, 23, 20, .62);
  --rule:   rgba(26, 23, 20, .13);
  --rule-strong: rgba(26, 23, 20, .50);   /* 3:1+ on cream and sand, for control borders */

  --gut: clamp(20px, 5vw, 48px);
  --shell: 1060px;
  --measure: 54ch;

  --r-pill: 999px;
  --r-card: 18px;
  --r-soft: 12px;

  --display: "Fraunces", Georgia, serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: var(--cream); padding: 12px 18px; z-index: 99; }
.skip:focus { left: 12px; top: 12px; }

/* ── layout shell ────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.shell--center { text-align: center; }

.shell__head { margin-bottom: 40px; }
.shell--center .shell__head, .shell__head--center { text-align: center; }
.shell--center .lede, .shell__head--center .lede { margin-inline: auto; }

.hero    { padding: clamp(56px, 9vw, 104px) 0 clamp(60px, 8vw, 96px); }
.record  { padding: clamp(56px, 8vw, 92px) 0; border-top: 1px solid var(--rule); }
.machine { padding: clamp(56px, 8vw, 92px) 0; border-top: 1px solid var(--rule); background: var(--sand); }
.host    { padding: clamp(56px, 8vw, 92px) 0 clamp(64px, 9vw, 104px); border-top: 1px solid var(--rule); }

/* The masthead is sticky, so an anchor jump would otherwise park the section
   heading underneath it. */
.record, .machine, .host, #main { scroll-margin-top: 80px; }

.allergen {
  max-width: var(--measure);
  margin: 16px auto 0;
  font-size: 11px; letter-spacing: .04em; line-height: 1.75;
  color: var(--ink-45);
}
.allergen strong { color: var(--ink-70); font-weight: 400; }

.machine__still { border-radius: var(--r-card); margin-inline: auto; }

/* ── shared type ─────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 20px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--maroon);
}

.section-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0;
}

.lede {
  max-width: var(--measure);
  margin: 18px 0 0;
  color: var(--ink-70);
}

/* ── seal + wordmark ─────────────────────────────────────────── */

.seal { width: 36px; height: 36px; color: var(--maroon); flex: none; }
.seal__ring { fill: none; stroke: currentColor; stroke-width: 4; }
.seal__ring--thin { stroke-width: 1.6; opacity: .45; }
.seal__monogram {
  fill: currentColor;
  font-family: var(--display);
  font-size: 46px; font-weight: 700;
  text-anchor: middle; dominant-baseline: middle;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 0;
}

.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__word {
  font-family: var(--display);
  font-size: 25px; font-weight: 700; letter-spacing: -.01em;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0;
}
.brand--light .seal { color: var(--rose); }

/* ── masthead ────────────────────────────────────────────────── */

.masthead {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: blur(12px);
}
.masthead__inner {
  display: flex; align-items: center; gap: clamp(16px, 4vw, 40px);
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding: 16px var(--gut);
}

.nav { display: flex; gap: clamp(16px, 3vw, 30px); margin-right: auto; }
.nav a {
  text-decoration: none; color: var(--ink-70);
  font-size: 12.5px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--maroon); border-bottom-color: var(--maroon); }

/* ── buttons ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--mono); font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--maroon); color: var(--cream); border-color: var(--maroon); }
.btn--primary:hover { background: #6d1b2c; border-color: #6d1b2c; }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(26,23,20,.25); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(26,23,20,.04); }
.btn--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--dark:hover { background: var(--maroon); border-color: var(--maroon); }
/* Small in look, not in target. This is Sign out in the staff masthead and
   Host a machine on the public page — the two things people reach for on a
   phone — and 38px was under the mark at every width. */
.btn--sm { padding: 11px 22px; font-size: 12px; min-height: 44px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn__icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }

/* ── hero ────────────────────────────────────────────────────── */

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 4.4rem);
  line-height: 1.03;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 0;
}

.hero__proof { margin-top: clamp(44px, 6vw, 68px); }

/* latest entry card */

.latest {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 30px);
  align-items: center;
  text-align: left;
  max-width: 560px;
  margin-inline: auto;
  padding: 18px;
  background: var(--sand);
  border-radius: var(--r-card);
}
.latest__photo { border-radius: var(--r-soft); overflow: hidden; }

.latest__kicker {
  margin: 0 0 8px;
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--maroon);
}
.latest__kicker::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-right: 8px;
  border-radius: 50%; background: var(--rose);
  vertical-align: middle;
}

.latest__brand {
  margin: 0;
  font-family: var(--display);
  font-size: 1.45rem; font-weight: 700; line-height: 1.15;
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0;
}

.latest__rows { margin: 12px 0 0; display: grid; gap: 2px; }
.latest__rows div { display: flex; gap: 10px; font-size: 11px; line-height: 1.6; }
.latest__rows dt { color: var(--ink-45); min-width: 58px; margin: 0; flex: none; }
.latest__rows dd { margin: 0; color: var(--ink-70); }

/* ── the record ──────────────────────────────────────────────── */

.filter { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 40px; }
.filter__label { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-45); }
.filter select {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  /* The city picker is the control the owner uses most — it is how you get
     from Vijayawada to Hyderabad — and a 35px select is a poor target on a
     phone. It costs a desktop nothing. */
  padding: 9px 34px 9px 16px; min-height: 44px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.weeks { display: grid; gap: 44px; }

.week {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

.week__frames {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--maroon) var(--sand);
}
.week__frames::-webkit-scrollbar { height: 3px; }
.week__frames::-webkit-scrollbar-track { background: var(--sand); border-radius: 999px; }
.week__frames::-webkit-scrollbar-thumb { background: var(--maroon); border-radius: 999px; }

/* the stamp — signature element */

.stamp { width: 112px; height: 112px; color: var(--maroon); transform: rotate(-5deg); }
.stamp__ring { fill: none; stroke: currentColor; stroke-width: 2.2; opacity: .85; }
.stamp__ring--inner { stroke-width: 1; opacity: .4; }
.stamp__arc { fill: currentColor; font-family: var(--mono); font-size: 8.4px; letter-spacing: .2em; }
.stamp__num {
  fill: currentColor;
  font-family: var(--display);
  font-size: 29px; font-weight: 700;
  text-anchor: middle;
  font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 0;
}
.stamp__dates { fill: currentColor; font-family: var(--mono); font-size: 7.4px; letter-spacing: .06em; text-anchor: middle; opacity: .75; }

/* photo frame */

.frame {
  flex: 0 0 auto;
  width: 152px;
  scroll-snap-align: start;
  background: var(--sand);
  border-radius: var(--r-soft);
  overflow: hidden;
}
.frame__img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; background: var(--sand); }
.frame__cap { padding: 10px 12px 13px; }
.frame__brand { display: block; font-size: 11px; line-height: 1.4; }
.frame__batch { display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: .05em; color: var(--ink-45); }
.frame__city { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--maroon); }
.frame__flavour { display: block; font-size: 10px; color: var(--ink-70); margin-top: 1px; }
.frame__checked { display: block; margin-top: 5px; font-size: 9px; color: var(--ink-45); line-height: 1.4; }

/* the authenticity photo is the strongest thing here — make it openable */
.frame__link { position: relative; display: block; text-decoration: none; }
.frame__proof {
  position: absolute; left: 8px; right: 8px; bottom: 8px;
  background: color-mix(in srgb, var(--ink) 84%, transparent);
  color: var(--cream);
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  text-align: center; padding: 5px 6px; border-radius: 999px;
}
.frame__link:hover .frame__proof { background: var(--maroon); }

.weeks__more { display: block; margin: 8px auto 0; }

.empty { padding: 36px 0; color: var(--ink-45); font-size: 12px; }

/* ── machine / AR ────────────────────────────────────────────── */

.ar__note { margin: 18px auto 0; font-size: 11px; color: var(--ink-45); max-width: 46ch; }

.config {
  display: inline-flex; gap: 4px;
  padding: 4px; margin-bottom: 26px;
  background: rgba(26, 23, 20, .06);
  border-radius: var(--r-pill);
}
.config__opt {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px;
  /* 44px at every width — tablets are touch devices too, and a
     comfortable target costs a desktop nothing. */
  padding: 12px 20px; min-height: 44px;
  border-radius: var(--r-pill);
  color: var(--ink-70);
  transition: background .18s ease, color .18s ease;
}
.config__opt:hover { color: var(--ink); }
.config__opt[aria-pressed="true"] { background: var(--maroon); color: var(--cream); }

.viewer {
  display: block;
  width: 100%;
  height: clamp(380px, 56vh, 560px);
  background: transparent;
  border-radius: var(--r-card);
  --poster-color: transparent;

  /* The viewer sits mid-page, so scrolling past it must never be caught by
     it. `pan-y` hands vertical gestures back to the page and leaves only
     horizontal drag (turning the machine) to the model. This has to be real
     CSS — as an attribute alone it never reaches the host element. */
  touch-action: pan-y;
}
.viewer::part(default-progress-bar) { background: var(--maroon); }
/* Before the library upgrades the element, its slotted button would show
   as a bare control that does nothing. */
model-viewer:not(:defined) [slot="ar-button"] { display: none; }
.viewer [slot="ar-button"] { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* ── host terms + form ───────────────────────────────────────── */

.host__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.terms { list-style: none; margin: 0; padding: 0; }
.terms li {
  display: flex; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-70);
}
.terms li:first-child { border-top: 1px solid var(--rule); }
.terms span {
  flex: 0 0 120px;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--maroon);
  padding-top: 3px;
}

.form {
  padding: clamp(22px, 3vw, 32px);
  background: var(--sand);
  border-radius: var(--r-card);
  display: grid; gap: 15px;
}

.field { display: grid; gap: 6px; }
.field--split { grid-template-columns: 1fr 1fr; gap: 12px; }
.field--split > div { display: grid; gap: 6px; }

.field label { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-70); }
.field .opt { letter-spacing: .08em; color: var(--ink-45); text-transform: none; }

.field input, .field textarea, .field select {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-soft);
  /* 44px so a thumb lands in the box and not between two of them. Padding
     alone left these at 41px. */
  padding: 12px 14px; min-height: 44px;
  width: 100%;
  resize: vertical;
}
/* Never cancel the outline for keyboard users — :focus-visible must win. */
.field input:focus, .field textarea:focus { border-color: var(--maroon); }
.field input:focus:not(:focus-visible),
.field textarea:focus:not(:focus-visible) { outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--rose); }

/* Off-screen rather than display:none — some bots skip hidden fields. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin: 0; min-height: 1.4em; font-size: 11.5px; color: var(--maroon); }
.form__status[data-state="ok"] { color: var(--ink); }

.form__alt { margin: 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 11px; color: var(--ink-45); }
.form__alt a { color: var(--maroon); }

/* ── colophon ────────────────────────────────────────────────── */

.colophon { background: var(--ink); color: var(--cream); padding: 44px 0; }
.colophon__inner { display: flex; align-items: center; gap: clamp(20px, 5vw, 56px); flex-wrap: wrap; }
.colophon__legal { display: flex; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap; margin: 0; }
.colophon__legal dt { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; margin-bottom: 2px; }
.colophon__legal dd { margin: 0; font-size: 11.5px; }
.colophon__tag { margin-left: auto; font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--rose); }

/* ── responsive ──────────────────────────────────────────────── */

@media (max-width: 860px) {
  .host__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .nav { display: none; }
  .masthead__inner { justify-content: space-between; }
  .brand__word { font-size: 22px; }
  .seal { width: 32px; height: 32px; }

  .latest { grid-template-columns: 112px minmax(0, 1fr); padding: 14px; gap: 16px; }

  .week { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .week__stamp { display: flex; align-items: center; }
  .stamp { width: 86px; height: 86px; }

  .week__frames {
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
  }

  .btn-row .btn { flex: 1 1 100%; }

  .config__opt { padding: 12px 16px; }
}

@media (max-width: 440px) {
  .field--split { grid-template-columns: 1fr; }
  .terms li { flex-direction: column; gap: 2px; }
  .terms span { flex: none; }
  .colophon__tag { margin-left: 0; }
}

/* ── the record: weeks and cards ──────────────────────────────── */

.week { margin-bottom: 46px; }

.week__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.week__no {
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--maroon);
  font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 0;
}
.week__when { font-size: 10.5px; color: var(--ink-45); }
.week__head hr { flex: 1; border: 0; border-top: 1px solid var(--rule); }

.week__summary { margin: 0 0 16px; font-size: 11px; color: var(--ink-45); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.card { margin: 0; background: var(--sand); border-radius: var(--r-card); overflow: hidden; }
.card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sand); }
.card__body { padding: 12px 14px 15px; }
.card__name { margin: 0; font-size: 12.5px; line-height: 1.35; }
.card__flavour {
  display: inline-block; margin-top: 6px;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--maroon); background: rgba(135, 34, 54, .1);
  padding: 2px 9px; border-radius: 999px;
}
.card__meta { display: block; margin-top: 6px; font-size: 10px; color: var(--ink-45); }
.card__meta--faint { opacity: .8; }
.card__machines {
  display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 11px; line-height: 1.45;
}
.card__machines em {
  display: block; font-style: normal; margin-bottom: 2px;
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45);
}

.weeks__more { display: block; margin: 8px auto 0; }

/* ── the complaint page ───────────────────────────────────────── */

.report { padding: clamp(40px, 7vw, 80px) 0 clamp(60px, 9vw, 100px); }
.shell--narrow { max-width: 620px; }
.hero__title--sm { font-size: clamp(2rem, 6vw, 3rem); }
.form--report { margin-top: 34px; }

.field__label {
  display: block; margin-bottom: 10px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-45);
}

/* Six big targets, because the person tapping these is annoyed and
   probably standing up. */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 460px) { .reasons { grid-template-columns: 1fr; } }
.reason {
  display: grid; gap: 3px; text-align: left;
  padding: 15px 16px; min-height: 72px;
  background: var(--sand); border: 1px solid transparent;
  border-radius: var(--r-soft); cursor: pointer;
  font-family: var(--mono);
}
.reason b { font-size: 13px; font-weight: 400; color: var(--ink); }
.reason span { font-size: 11px; color: var(--ink-45); }
.reason:hover { border-color: rgba(26,23,20,.22); }
.reason--on { background: var(--maroon); border-color: var(--maroon); }
.reason--on b, .reason--on span { color: var(--cream); }
.reason--serious b { color: var(--maroon); }
.reason--serious.reason--on b { color: var(--cream); }

.urgent {
  margin-top: 16px; padding: 16px 18px;
  background: rgba(135, 34, 54, .07);
  border-left: 3px solid var(--maroon); border-radius: var(--r-soft);
}
.urgent strong { display: block; font-size: 14px; color: var(--maroon); }
.urgent p { margin: 7px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-70); }

.field select {
  width: 100%; font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--cream); border: 1px solid var(--rule-strong);
  border-radius: var(--r-soft); padding: 12px 14px; min-height: 44px;
}
.colophon__report { margin: 14px 0 0; font-size: 11.5px; }
.colophon__report a { color: var(--rose); }

/* The way out for someone whose shake was wrong. In the masthead, so it
   is reachable from anywhere without scrolling — plain text, so it never
   competes with the record itself.

   flex: none matters. Without it this whole group is a shrinkable flex
   item, and on a narrow phone the brand squeezes the Host button to
   nothing — a button that is there, clickable, and zero pixels wide. */
.masthead__end {
  margin-left: auto;
  display: flex; align-items: center; gap: clamp(14px, 3vw, 26px);
  flex: none;
}
.masthead__wrong {
  font-size: 12px; color: var(--ink-45); text-decoration: none;
  white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
}
.masthead__wrong:hover { color: var(--maroon); border-bottom-color: var(--maroon); }

/* Below this the masthead genuinely cannot hold both, so the hero shows
   it instead — one or the other, never both.

   680px, not 560. The full wording is 235px wide against 118px for the
   short version, and at 561px the brand, the link and the button together
   overran the content box and pushed the page sideways. Measured, not
   guessed: it needs about 590px to fit at all, so this leaves room. */
.hero__wrong { display: none; margin: 26px 0 0; font-size: 12px; }
.hero__wrong a {
  color: var(--ink-45); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 3px;
}
.hero__wrong a:hover { color: var(--maroon); border-bottom-color: var(--maroon); }

@media (max-width: 680px) {
  .masthead__wrong { display: none; }
  .hero__wrong { display: block; }
}

/* ═══════════════════════════════════════════════════════════════
   THE PUBLIC PAGE, ON PAPER

   Everything here hangs off .paper on <body>, which only index.html
   carries — the staff and owner screens are tools and stay plain.

   The idea is restraint: no cursor tricks, almost no motion. What
   makes it feel considered is the surface, the air, and the size of
   the type — not movement. A record people are meant to trust should
   not be busy.
   ═══════════════════════════════════════════════════════════════ */

.paper__grain, .paper__vignette {
  position: fixed; inset: 0;
  pointer-events: none;              /* never intercepts a tap */
  z-index: 90;
}

/* Noise as a background image, not an SVG filter on an empty element —
   a filter needs something to filter, and an <svg> would not transition
   reliably. This is the boring approach that works everywhere. */
.paper__grain {
  opacity: .30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Barely there. Just enough that the page reads as a sheet with edges
   rather than a colour that runs off the screen. */
.paper__vignette {
  z-index: 89;
  background: radial-gradient(125% 95% at 50% 38%, transparent 56%, rgba(26, 23, 20, .085));
}

/* ── air ─────────────────────────────────────────────────────── */
.paper .hero { padding: clamp(76px, 11vw, 148px) 0 clamp(70px, 9vw, 116px); }
.paper .hero__title { font-size: clamp(2.6rem, 7.4vw, 4.9rem); }
.paper .lede { font-size: 14.5px; line-height: 2.0; }
.paper .record, .paper .machine, .paper .host { padding-block: clamp(64px, 9vw, 104px); }
.paper .cards { gap: clamp(22px, 3vw, 34px); }

/* ── the two things that move ────────────────────────────────── */

/* The return journey is eased; the follow is not, or the button feels
   like it is dragging behind the cursor rather than leaning toward it. */
.paper .btn { transition: background .18s ease, color .18s ease,
                          border-color .18s ease, transform .28s cubic-bezier(.2,.8,.3,1); }

.paper .card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.paper .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(26, 23, 20, .07);
}

/* The seal pressed into the paper rather than sitting on it. */
.paper .seal {
  filter: drop-shadow(0 1px 0 rgba(247, 241, 230, .9))
          drop-shadow(0 -1px 0 rgba(26, 23, 20, .16));
}

/* The record arrives rather than appearing. Nothing else fades. */
.paper .weeks { animation: paper-settle .8s ease both; }
@keyframes paper-settle { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .paper .weeks { animation: none; }
  .paper .card { transition: none; }
}