/* Jack Spareribs -- design tokens and layout
   Palette v3, 2026-09-01, after Ace called v2 the generic AI look (warm
   cream, terracotta, serif). True black instead of brown-black, one vivid
   flag-red doing the work, gold used sparingly and bright, off-white text
   instead of ivory. Display face is IM Fell English, Ace's own pick off a
   real side-by-side (Rye read Western, not pirate). Old ship's-log
   letterforms, not a literary serif, not a literal "pirate font" clip-art
   face.
   Full-bleed photo scenes instead of boxed image cards, so the page moves
   like a journey instead of a stacked slideshow. Body: Public Sans.
   Utility/labels: Oswald. */

:root {
  --ink: #0a0a0c;
  --ink-2: #16171a;
  --text: #f0f0ee;
  --red: #d7391d;
  --red-deep: #b82d14;
  --gold: #f2b705;
  --fog: #9a9d9f;
  --line: rgba(240, 240, 238, 0.14);

  --bg: var(--ink);
  --panel: var(--ink-2);
  --text-dim: var(--fog);
  --accent: var(--red);
  --accent-strong: var(--gold);
  --accent-deep: var(--red-deep);
  --on-accent: var(--ink);
  --border: var(--line);

  --font-display: "IM Fell English", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", sans-serif;
  --font-label: "Oswald", "Arial Narrow", sans-serif;

  --measure: 62ch;
  --radius: 3px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--accent-strong);
  font-weight: 500;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Skip link / focus ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

/* ---------- Top bar ---------- */

.topbar {
  position: relative;
  z-index: 10;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--ink);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.wordmark img {
  height: 64px;
  width: auto;
  filter: invert(1);
}
.wordmark-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text);
  white-space: nowrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-brand img {
  height: 52px;
  width: auto;
  display: block;
  filter: invert(1);
}
.footer-brand span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
}

/* Real logo, used big and low-opacity as an actual brand element instead of
   hiding it at illegible sizes. Ace, 2026-09-04: "I actually have a fucking
   logo why not use it for branding on my own site." */
.brand-watermark {
  position: absolute;
  top: 50%;
  right: -4%;
  transform: translateY(-50%);
  width: clamp(16rem, 34vw, 26rem);
  height: auto;
  filter: invert(1);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.topbar-phone {
  font-family: var(--font-label);
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.topbar-phone:hover, .topbar-phone:focus-visible { border-color: var(--accent); color: var(--accent-strong); }

/* ---------- Hero ---------- */

/* Hero rebuilt 2026-09-03 from the taller PSD (jack-ship-monkey-layers2.psd,
   6080x4500 vs the original 6080x3072): one continuous art band, no separate
   text block above it. Logo, headline, sub and CTA sit inside a black-to-
   clear fade at the top of the photo itself, the way the old single-photo
   hero worked, adapted to the three-cutout mechanic (ship, Jack, Maynard)
   so each piece can still be positioned independently. No scroll mechanic,
   static positioning only, per Ace directly.
   Character widths use clamp() directly instead of width% + min-width: the
   two-system fight between those (percentage shrinking past a fixed-px
   floor) is what caused Jack and Maynard to stop shrinking and grow into
   each other and the figurehead at phone widths. clamp() alone is
   continuous by construction, so there is no floor to fall off of. */
.hero { background: var(--ink); }

.hero-art {
  position: relative;
  width: 100%;
  height: clamp(39rem, 44vw + 16rem, 58rem);
  overflow: hidden;
  background: var(--ink);
}

.hero-art-ship {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Below ~930px, slide the crop left across the source image (which
     reads on screen as the ship sliding right) so the figurehead tracks
     into the shrinking gap between Jack and Maynard instead of getting
     covered by them as they grow. Continuous, not a breakpoint snap. */
  object-position: clamp(20%, calc(50% - (930px - 100vw) * 0.06), 50%) 68%;
}

.hero-art-jack,
.hero-art-maynard {
  position: absolute;
  bottom: 0;
  height: auto;
  max-height: 90%;
}

.hero-art-jack {
  width: clamp(16rem, 30vw, 27rem);
  aspect-ratio: 1600 / 1625;
  /* Below ~930px, push further off-canvas to the right as the screen
     narrows (crops more of his outstretched arm, keeps his face), the
     same continuous trick used on Maynard, so the two can both grow
     without colliding. */
  right: clamp(-26%, calc(-2% - (930px - 100vw) * 0.09), -2%);
  bottom: -6%;
}

.hero-art-maynard {
  width: clamp(17rem, 33vw, 31rem);
  aspect-ratio: 1600 / 1474;
  left: clamp(-34%, calc(-4% - (930px - 100vw) * 0.13), -4%);
  bottom: -10%;
}

/* Dark vignette along the bottom of the whole art band, so the frame
   itself reads as a deliberate edge rather than the photo just stopping. */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 82%, var(--ink) 100%);
}

/* Slow fade from black at the top down to clear, using the real extra sky
   the taller source photo has, not a short band. Text and logo live in
   this zone. */
.hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(10,10,12,0.94) 0%,
    rgba(10,10,12,0.82) 26%,
    rgba(10,10,12,0.42) 50%,
    rgba(10,10,12,0) 68%);
}

/* Logo moved into the open sky beside the crow's nest, top-right, big
   enough to actually read, phone stacked underneath it. Both scale with
   the viewport instead of a breakpoint, so the logo grows continuously
   into that space rather than jumping sizes, including running up against
   the crow's nest itself at the narrowest widths, per Ace directly. */
.hero-brand-corner {
  position: absolute;
  top: clamp(0.75rem, 2.5vw, 1.5rem);
  right: clamp(0.75rem, 2.5vw, 1.5rem);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}

.hero-logo {
  height: clamp(6rem, 19vw, 13.5rem);
  width: auto;
}

.hero-phone {
  font-family: var(--font-label);
  letter-spacing: 0.04em;
  font-size: clamp(0.72rem, 2vw, 0.85rem);
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(240,240,238, 0.4);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  background: rgba(10,10,12,0.35);
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.hero-phone:hover, .hero-phone:focus-visible { border-color: var(--accent); color: var(--accent-strong); }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: clamp(1.5rem, 4vw, 3rem);
  /* Keeps the headline clear of the logo/phone stack in the opposite
     corner at narrow widths, where the two would otherwise collide. */
  padding-right: clamp(8.75rem, 24vw, 14rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  max-width: 20ch;
  color: var(--text);
}

.hero-sub {
  margin-top: 1.1rem;
  max-width: 48ch;
  font-size: 1.05rem;
  color: rgba(240,240,238, 0.9);
}

.hero-cta-row {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.btn {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  display: inline-block;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--ink);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-strong); transform: translateY(-1px); }

.btn-ghost {
  border-color: rgba(240,240,238, 0.4);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--accent-strong); color: var(--accent-strong); }

/* ---------- Doors: sort by who's booking ---------- */

.doors {
  padding: clamp(3rem, 7vw, 5rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.doors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

@media (min-width: 760px) {
  .doors-grid { grid-template-columns: repeat(2, 1fr); }
}

.door {
  display: block;
  background: var(--ink);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.6rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.door:hover, .door:focus-visible {
  border-top-color: var(--accent-strong);
  transform: translateY(-2px);
}

.door-label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  color: var(--accent-strong);
}

.door-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.1rem;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--accent-strong);
}
.door:hover .door-arrow, .door:focus-visible .door-arrow { text-decoration: underline; }

.door p {
  margin-top: 0.7rem;
  color: var(--text);
  font-size: 0.98rem;
}

.scene-intro {
  padding: 2rem 0 0;
}

/* ---------- The journey: full-bleed scenes (Ship / Show / Where He's Been) ---------- */

.journey {
  border-top: 1px solid var(--border);
}

.scene {
  position: relative;
  min-height: clamp(26rem, 72vh, 44rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}

.scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene.scene-right .scene-img { object-position: 65% 50%; }
.scene.scene-left .scene-img { object-position: 35% 50%; }

/* The Show photo is 4:3, the wide box crops most of its height, and at
   50% (centered) that cut the crowd at the bottom almost entirely.
   Pushed toward the bottom of the frame so the crowd is the thing kept,
   not the sky. */
#the-show .scene-img { object-position: 50% 32%; }

/* The Ship photo is a wide panorama (Ferris wheel left, ship hull and its
   own sign right of center). A narrow tall box can't hold both. Wide keeps
   the 35% crop above, which shows both. Below 700px, where the box turns
   tall and narrow, this switches to the hull/sign instead of losing both
   to a strip of sky. A clamp()/calc() mix (percent + px) here silently
   failed to resolve in testing, plain values only, so this is a real
   breakpoint, not the continuous trick used elsewhere tonight. */
@media (max-width: 700px) {
  #the-ship .scene-img { object-position: 68% 42%; }
}

.scene-scrim {
  position: absolute;
  inset: 0;
}
.scene.scene-left .scene-scrim {
  background:
    linear-gradient(180deg, rgba(10,10,12,0.05) 0%, rgba(10,10,12,0.3) 55%, rgba(10,10,12,0.92) 100%),
    linear-gradient(90deg, rgba(10,10,12,0.65) 0%, rgba(10,10,12,0.05) 50%);
}
.scene.scene-right .scene-scrim {
  background:
    linear-gradient(180deg, rgba(10,10,12,0.05) 0%, rgba(10,10,12,0.3) 55%, rgba(10,10,12,0.92) 100%),
    linear-gradient(270deg, rgba(10,10,12,0.65) 0%, rgba(10,10,12,0.05) 50%);
}

/* Ace, 2026-09-03: the ship's actual color and lit detail were getting
   muted by a gradient that started darkening halfway up the frame. Crushed
   down into a tighter band at the very bottom, near-clear through the
   ship itself, only the vertical (top-to-bottom) gradient touches, the
   horizontal one above still handles left-side text contrast. */
#the-ship .scene-scrim {
  background:
    linear-gradient(180deg, rgba(10,10,12,0.02) 0%, rgba(10,10,12,0.08) 68%, rgba(10,10,12,0.94) 100%),
    linear-gradient(90deg, rgba(10,10,12,0.65) 0%, rgba(10,10,12,0.05) 50%);
}

.scene-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 3rem;
  padding-bottom: 2.75rem;
}
.scene.scene-right .scene-inner { margin-left: auto; text-align: right; }
.scene.scene-right .scene-content .panel-link { margin-left: auto; }

.scene-inner { max-width: 40rem; }

.panel-num {
  font-family: var(--font-label);
  color: var(--accent-strong);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
}

.scene h2 {
  margin-top: 0.6rem;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  color: var(--text);
}

.scene p {
  margin-top: 1.1rem;
  color: rgba(240,240,238, 0.85);
  font-size: 1.05rem;
  max-width: 42ch;
}
.scene.scene-right p { margin-left: auto; }
.scene p strong { color: var(--text); font-weight: 600; }

.panel-link {
  margin-top: 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.panel-link:hover, .panel-link:focus-visible { border-color: var(--accent-strong); }

/* Where He's Been: manifest scene, image plus a long fading list */

.manifest-scene {
  background: var(--panel);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.manifest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 860px) {
  .manifest-grid { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; }
}

.manifest-media img {
  width: 100%;
  border-radius: var(--radius);
}

.manifest-copy h2 {
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  color: var(--text);
}
.manifest-copy > p {
  margin-top: 1.1rem;
  color: var(--text-dim);
  font-size: 1.02rem;
}

.route-scroll {
  margin-top: 1.5rem;
  max-height: 30rem;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 96%);
}

.route-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 1.75rem;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text);
}
#track-list, #track-list-about { will-change: transform; }
.route-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  break-inside: avoid;
}
.route-list li span.tag {
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 400;
}

@media (max-width: 480px) {
  .route-list { columns: 1; column-gap: 1rem; font-size: 1rem; }
}

.route-note {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  font-style: italic;
}

/* ---------- Origin ---------- */

.origin {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.origin em { font-style: italic; }

.origin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 760px) {
  .origin-grid { grid-template-columns: 1.3fr 1fr; }
}

/* Two real vintage prints (1968, own white borders and date stamps
   already baked in), tossed at an angle like actual photos out of a
   drawer, not a tilted content-card pattern. Ace's call after flagging
   the earlier tilted-card treatment: these read differently because
   they're genuine prints. */
.origin-photos {
  position: relative;
  width: 100%;
  max-width: 25rem;
  height: clamp(13rem, 26vw, 18rem);
  margin: 0 auto;
}

/* Fixed rem sizing, not percentage, both photos are close to the same
   size as the box itself, so a percentage shift barely moves the overlap
   point, fixed offsets are the only way to land the cover precisely. */
.origin-photo {
  position: absolute;
  width: 11.5rem;
  height: auto;
  box-shadow: 0 1rem 2.25rem rgba(0,0,0,0.55);
}

.origin-photo-sword {
  left: 6.75rem;
  top: 0.5rem;
  transform: rotate(-9deg);
  z-index: 2;
}

.origin-photo-disney {
  left: 0;
  bottom: 0;
  transform: rotate(6deg);
  z-index: 1;
}

/* ---------- Closing line ---------- */

.closing {
  padding: clamp(3rem, 7vw, 5rem) 0;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.closing p {
  max-width: 46ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--text);
  font-weight: 500;
}

/* ---------- Testimonials ---------- */

.logbook {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.logbook-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2.2rem;
}

@media (min-width: 760px) {
  .logbook-grid { grid-template-columns: 1fr 1fr; }
}

.logbook-entry {
  padding: 2rem;
  background: var(--ink);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.logbook-entry blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--text);
}

.logbook-entry cite {
  display: block;
  margin-top: 1.1rem;
  font-style: normal;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.logbook-entry cite strong {
  display: block;
  color: var(--accent-strong);
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* ---------- Quick specs (fair-buyer strip, second touch) ---------- */

.specs-strip { background: var(--ink-2); }
.specs-list {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  max-width: 46rem;
}
.specs-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 1rem;
}

/* ---------- Footer ---------- */

footer {
  padding: 2.5rem 0 3rem;
}

.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text);
}

.footer-contact {
  font-family: var(--font-label);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-contact a { text-decoration: none; }
.footer-contact a:hover, .footer-contact a:focus-visible { color: var(--accent-strong); }

.footer-note {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  color: var(--fog);
  opacity: 0.7;
}

/* ---------- Buyer-door subpages (Fairs, Corporate, Community, Private) ----------
   Built 2026-09-04 off the Dude's locked copy draft
   (shared/copy-blocks/jack-spareribs-buyer-door-pages.md). Reuses every token and
   most component classes from the home page (.door, .doors-grid, .logbook-entry,
   .route-list, .specs-list, .closing) rather than inventing new patterns, since
   these are utility pages behind the home page's doors, not a second flagship. */

.page-hero {
  position: relative;
  min-height: clamp(20rem, 46vw, 30rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--ink);
}
.page-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0.12) 0%, rgba(10,10,12,0.55) 58%, rgba(10,10,12,0.96) 100%);
}
.page-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.25rem);
}
.page-hero .eyebrow { display: block; margin-bottom: 0.6rem; }
.page-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  color: var(--text);
  max-width: 18ch;
}
.page-hero-sub {
  margin-top: 1rem;
  max-width: 54ch;
  font-size: 1.08rem;
  color: rgba(240,240,238,0.9);
}
.page-hero-cta {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.page-hero-caption {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: 0.9rem;
  margin: 0;
  max-width: 20rem;
  text-align: right;
  font-family: var(--font-label);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  font-style: italic;
  color: rgba(240, 240, 238, 0.65);
}

/* Below ~640px the hero's text stack can grow tall enough that this caption,
   pinned to the hero's own bottom edge, overlaps the CTA button under it.
   Take it out of the overlay entirely and let it flow on its own line. */
@media (max-width: 640px) {
  .page-hero { flex-wrap: wrap; }
  .page-hero-caption {
    position: static;
    width: 100%;
    margin: 1rem 0 0;
    padding: 0 clamp(1.25rem, 4vw, 3rem);
    max-width: none;
    text-align: left;
  }
}

/* No real photo picked yet for this page: plain text band instead of the
   photo-band hero, so nothing here looks like a finished decision. */
.page-hero--text {
  min-height: auto;
  background: var(--ink);
}
.page-hero--text .page-hero-content { padding-top: clamp(3rem, 7vw, 4.5rem); padding-bottom: clamp(3rem, 7vw, 4.5rem); }

/* Fairs hero photo: continuous formula, not a breakpoint. A hard media-query
   swap between the mobile crop and the wide crop snapped visibly at 860px,
   the same "floating" problem the homepage hero's ship/Jack/Maynard
   positioning already solves with a formula instead of a jump. Narrow
   (~400px) wants Jack big and low (scale 1.5, low in frame, text bleeds off
   entirely). Wide (~1600px+) wants the zoom eased off so STATE FAIR reads
   above him. Interpolates smoothly between the two and clamps past them. */
.fair-hero-img {
  object-position: 58% clamp(58%, calc(80% - (100vw - 400px) * 0.01833), 80%);
  transform: scale(clamp(1, calc(1.5 - (100vw - 400px) / 2400px), 1.5));
  transform-origin: 58% clamp(58%, calc(80% - (100vw - 400px) * 0.01833), 80%);
}

.page-section { padding: clamp(3rem, 7vw, 5rem) 0; border-bottom: 1px solid var(--border); }
.page-section.panel { background: var(--panel); }
.page-section.has-watermark { position: relative; overflow: hidden; }
.page-section.has-watermark > .container { position: relative; z-index: 1; }

/* Real, load-bearing claim pulled out of a paragraph into its own line, per
   Ace 2026-09-04: nothing on these pages stood out for someone scanning
   tired on a phone. */
.claim-head {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--accent-strong);
  margin-bottom: 0.6rem;
}
.page-section h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); color: var(--text); }
.page-section .lede { margin-top: 1.1rem; font-size: 1.08rem; color: var(--text); max-width: var(--measure); }

.other-doors .doors-grid { margin-top: 1.5rem; }

.other-doors-links {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}
.other-doors-links a {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.1rem;
}
.other-doors-links a:hover, .other-doors-links a:focus-visible { color: var(--accent-strong); border-color: var(--accent-strong); }

/* Visible "not decided yet" marker for a photo slot Ace hasn't picked, so an
   unpicked slot never reads as a finished choice. Ace, 2026-09-04: reusing a
   real photo in the slot made the page look "very weird" and confusing,
   like a decision had already been made. */
.photo-tbd {
  position: relative;
  min-height: clamp(16rem, 34vw, 22rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, rgba(240,240,238,0.05) 0 14px, transparent 14px 28px),
    var(--ink-2);
  border-bottom: 1px dashed var(--border);
}
.photo-tbd-label {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: center;
  max-width: 26rem;
  padding: 0 1.5rem;
}
.photo-tbd-label strong { display: block; color: var(--accent-strong); font-size: 0.78rem; margin-bottom: 0.4rem; }

/* ---------- Reveal-on-scroll, restrained ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal.js-armed {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.js-armed.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Contact form ---------- */

.enquiry { margin-top: 2rem; max-width: 52rem; }
.enquiry .fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem clamp(1.25rem, 3vw, 2.5rem);
}
.enquiry .f { margin: 0; max-width: none; }
.enquiry .f.wide { grid-column: 1 / -1; }
.enquiry .f label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.5rem;
}
.enquiry .f input, .enquiry .f select, .enquiry .f textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius);
}
.enquiry .f textarea { resize: vertical; line-height: 1.6; }
.enquiry .f input:focus-visible, .enquiry .f select:focus-visible, .enquiry .f textarea:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}
.enquiry .f input::placeholder, .enquiry .f textarea::placeholder { color: var(--text-dim); opacity: 0.8; }
.enquiry .hint {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.enquiry .send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin: 2.25rem 0 0;
}
.enquiry .send button { border: none; cursor: pointer; font-family: inherit; }
.enquiry .send .hint { margin-top: 0; max-width: 24rem; }
.enquiry .formstate { margin: 1.25rem 0 0; max-width: 40rem; color: var(--accent-strong); }
.enquiry .formstate:empty { margin: 0; }
.enquiry[data-sent="1"] .fields, .enquiry[data-sent="1"] .send { display: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }