/* Red Spur, the surviving bar direction, shares the portfolio's font files and base reset.
   The page selects its self-contained visual system through body data-study.

   Red Spur is a printed playbill. One tall sheet of aged stock carries the
   whole night in woodtype: the sign, the bill, the plates. The sheet is
   tacked over the room, so the photograph reads as the wall behind the
   poster. Red is press ink and appears only where a press would hit: the
   sign's rule, the On now stamp, the one action. */
:root {
  --bar-space-1: .5rem;
  --bar-space-2: 1rem;
  --bar-space-3: 1.5rem;
  --bar-space-4: 2rem;
  --bar-space-5: 3rem;
  --bar-space-6: 4rem;
  --bar-space-7: 6rem;
  --bar-space-8: 8rem;
  --bar-rule: 1px;
  --bar-focus: 3px;
  --bar-ease: cubic-bezier(.16, 1, .3, 1);
  --bar-mobile-hero-height: min(32rem, 52svh);
  --bar-room-height: clamp(26rem, 58vh, 38rem);
  --bar-sheet-overlap: 9rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { text-underline-offset: .22em; text-decoration-thickness: .08em; }
a:focus-visible { outline: var(--bar-focus) solid currentColor; outline-offset: .25rem; }
header a {
  align-items: center;
  display: inline-flex;
  min-block-size: 24px;
}
.skip-link { position: fixed; top: var(--bar-space-2); left: var(--bar-space-2); z-index: 10; padding: var(--bar-space-2); transform: translateY(-200%); }
body[data-study] .skip-link:focus { transform: none; }

/* Palette. Paper contrast: ink 10.8:1, soft ink 6.2:1, red 5.0:1 on paper;
   paper 12.7:1 on the room. Brass never carries text. */
body[data-study="red-spur"] {
  /* Hearth Room is always night: the shared chrome renders charcoal here. */
  color-scheme: dark;
  --spur-room: #1b1410;
  --spur-room-deep: #120d0a;
  --spur-paper: #e7d4a6;
  --spur-paper-deep: #d3ba82;
  --spur-ink: #241a11;
  --spur-ink-soft: #5b4732;
  --spur-red: #a8231a;
  --spur-brass: #b08a3e;
  --spur-rule: color-mix(in srgb, var(--spur-ink) 22%, transparent);
  --spur-rule-heavy: color-mix(in srgb, var(--spur-ink) 78%, transparent);
  --font-display: var(--business-font-red-spur);
  --font-gothic: "League Spartan", "Futura", "Avenir Next Condensed", sans-serif;
  background: var(--spur-room);
  color: var(--spur-paper);
  font-family: var(--font-body);
  font-synthesis: none;
  line-height: 1.5;
}

[data-study="red-spur"] .skip-link { background: var(--spur-paper); color: var(--spur-ink); }
.spur-shell { width: var(--qb-content-width); margin-inline: auto; }

/* Woodtype gothic: the labels a jobbing printer would set in sans caps. */
.spur-gothic,
.spur-kicker,
.spur-rule-title,
.spur-set-kind,
.spur-menu-board h3,
.spur-colophon,
.spur-bridge-kicker,
.spur-topline p,
.spur-sign span {
  font-family: var(--font-gothic);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Topline: paper type on the room, above the poster. */
.spur-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--bar-space-3); padding-block: var(--bar-space-3); font-size: .875rem; position: relative; z-index: 3; }
.spur-topline a, .spur-topline p { margin: 0; color: var(--spur-paper); }
.spur-topline p { font-size: .72rem; }

/* The room: the photograph is the wall; the sheet hangs over it. */
.spur-room {
  isolation: isolate;
  padding-top: calc(var(--bar-room-height) - var(--bar-sheet-overlap));
  position: relative;
}
.spur-room .study-hero-media {
  display: block;
  height: var(--bar-room-height);
  inset: 0 0 auto;
  overflow: hidden;
  position: absolute;
  z-index: 0;
}
.spur-room .study-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.spur-room::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--spur-room) 55%, transparent), transparent 28%, color-mix(in srgb, var(--spur-room) 12%, transparent) 62%, var(--spur-room) 100%),
    radial-gradient(120% 90% at 50% 30%, transparent 55%, color-mix(in srgb, var(--spur-room-deep) 70%, transparent) 100%);
  content: "";
  height: var(--bar-room-height);
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.spur-room > .spur-shell { position: relative; z-index: 2; }

/* The sheet. Aged stock, a deckled head, one brass tack, and a hair of tilt
   so it reads as tacked to a wall rather than laid out on a screen. */
.spur-sheet {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--spur-paper-deep) 45%, var(--spur-paper)) 0, var(--spur-paper) 6rem),
    var(--spur-paper);
  box-shadow:
    0 1.6rem 3rem color-mix(in srgb, var(--spur-room-deep) 70%, transparent),
    0 .2rem .4rem color-mix(in srgb, var(--spur-room-deep) 50%, transparent);
  color: var(--spur-ink);
  margin-inline: auto;
  max-width: 54rem;
  padding: var(--bar-space-6) clamp(var(--bar-space-3), 6vw, var(--bar-space-7)) var(--bar-space-5);
  position: relative;
  transform: rotate(-.35deg);
  transform-origin: 50% 0;
}
.spur-sheet::before {
  background:
    linear-gradient(-45deg, var(--spur-paper-deep) .52rem, transparent 0) 0 0 / 1.05rem 1.05rem repeat-x,
    linear-gradient(45deg, var(--spur-paper-deep) .52rem, transparent 0) 0 0 / 1.05rem 1.05rem repeat-x,
    linear-gradient(-45deg, var(--spur-paper-deep) .3rem, transparent 0) .35rem .25rem / .7rem .7rem repeat-x,
    linear-gradient(45deg, var(--spur-paper-deep) .3rem, transparent 0) .35rem .25rem / .7rem .7rem repeat-x;
  content: "";
  height: 1.05rem;
  left: 0;
  position: absolute;
  right: 0;
  top: -1rem;
}
.spur-tack {
  background: radial-gradient(circle at 35% 30%, #efd89a, var(--spur-brass) 45%, #6f5220 100%);
  border-radius: 50%;
  box-shadow: 0 .18rem .3rem color-mix(in srgb, var(--spur-room-deep) 55%, transparent);
  display: block;
  height: .9rem;
  left: 50%;
  position: absolute;
  top: 1.15rem;
  transform: translateX(-50%);
  width: .9rem;
}

/* The head of the bill: the sign. */
.spur-head { display: grid; justify-items: center; text-align: center; }
.spur-kicker { color: var(--spur-ink-soft); display: flex; flex-wrap: wrap; font-size: .7rem; gap: .6em; justify-content: center; margin: 0 0 var(--bar-space-4); }
.spur-kicker span + span::before { color: var(--spur-brass); content: "\25C6"; font-size: .55em; margin-right: .9em; position: relative; top: -.2em; }
.spur-sign {
  color: var(--spur-ink);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 9vw, 8.2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: .82;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.spur-sign span {
  color: var(--spur-ink);
  display: block;
  font-size: .26em;
  letter-spacing: .34em;
  line-height: 1;
  margin: .35em auto 0;
  padding-left: .34em;
  width: max-content;
}
.spur-sign span::before {
  background: var(--spur-red);
  content: "";
  display: block;
  height: .22em;
  margin: 0 auto .5em;
  transform-origin: center;
  width: 100%;
}
.spur-lede { color: var(--spur-ink); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.5; margin: var(--bar-space-4) auto 0; max-width: 30rem; }
.spur-head .spur-action { margin-top: var(--bar-space-4); }

/* Actions: one press impression. */
.spur-action {
  align-items: center;
  border: .12rem solid var(--spur-ink);
  color: var(--spur-ink);
  display: inline-flex;
  font-weight: 700;
  min-height: 3rem;
  padding: .75rem var(--bar-space-3);
  text-decoration: none;
  transition: background-color 120ms var(--bar-ease), color 120ms var(--bar-ease), transform 120ms var(--bar-ease);
}
.spur-action--solid { background: var(--spur-red); border-color: var(--spur-red); color: var(--spur-paper); }
.spur-action:hover { background: var(--spur-ink); border-color: var(--spur-ink); color: var(--spur-paper); }
.spur-action:active { transform: scale(.97); }

/* Section titles set between rules, the way a playbill breaks its columns. */
.spur-rule-title {
  align-items: center;
  color: var(--spur-ink);
  display: grid;
  font-size: .82rem;
  gap: var(--bar-space-2);
  grid-template-columns: 1fr auto 1fr;
  margin: 0;
}
.spur-rule-title::before,
.spur-rule-title::after {
  border-block: var(--bar-rule) solid var(--spur-ink);
  content: "";
  display: block;
  height: .32rem;
}
.spur-rule-title span { display: inline-block; padding-inline: .2em; }

/* The bill. */
.spur-program { margin-top: var(--bar-space-7); }
.spur-now {
  color: var(--spur-ink-soft);
  font-family: var(--font-mono);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  margin: var(--bar-space-3) 0 0;
  text-align: center;
}
.spur-program-list { border-top: .18rem solid var(--spur-ink); margin-top: var(--bar-space-3); }
.spur-set {
  align-items: baseline;
  border-bottom: var(--bar-rule) solid var(--spur-rule);
  display: grid;
  gap: var(--bar-space-2) var(--bar-space-3);
  grid-template-columns: minmax(8.5rem, .28fr) minmax(0, 1fr) auto;
  padding-block: var(--bar-space-4);
}
.spur-set:last-child { border-bottom: .18rem solid var(--spur-ink); }
.spur-set time {
  color: var(--spur-ink);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .9;
  transition: color 300ms var(--bar-ease);
}
.spur-set p { margin: 0; min-width: 0; }
.spur-set strong {
  color: var(--spur-ink);
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  transition: color 300ms var(--bar-ease);
}
.spur-set p span { color: var(--spur-ink-soft); display: block; margin-top: .5rem; max-width: 30rem; }
.spur-set-kind { color: var(--spur-ink-soft); font-size: .66rem; justify-self: end; text-align: right; }
.spur-set[data-state="past"] time,
.spur-set[data-state="past"] strong { color: var(--spur-ink-soft); }

/* The stamp. A real rotated impression, filled for the set on now, outlined
   for the next one. Appended inside the title by the clock script. */
.spur-set p .spur-set-chip {
  background: var(--spur-red);
  border: .12rem solid var(--spur-red);
  color: var(--spur-paper);
  display: inline-block;
  font-family: var(--font-gothic);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  margin-left: .55em;
  padding: .4em .55em .3em;
  text-transform: uppercase;
  transform: rotate(-6deg) translateY(-.35em);
  vertical-align: middle;
}
.spur-set[data-state="next"] p .spur-set-chip { background: transparent; color: var(--spur-red); }
.spur-program-note,
.spur-menu-note { color: var(--spur-ink-soft); font-family: var(--font-mono); font-size: .8rem; margin: var(--bar-space-3) 0 0; text-align: center; }

/* Plates and glasses. */
.spur-menu { margin-top: var(--bar-space-7); }
.spur-menu-board { display: grid; gap: var(--bar-space-4) var(--bar-space-6); grid-template-columns: 1fr 1fr; margin-top: var(--bar-space-4); }
.spur-menu-board h3 { border-bottom: var(--bar-rule) solid var(--spur-ink); color: var(--spur-ink); font-size: .68rem; margin: 0; padding-bottom: .6rem; }
.spur-menu dl { display: grid; gap: var(--bar-space-2); margin: var(--bar-space-2) 0 0; }
.spur-menu dl div { display: grid; grid-template-columns: auto minmax(1.5rem, 1fr) auto; gap: var(--bar-space-2); align-items: baseline; }
.spur-menu dl div::after { align-self: end; border-bottom: .14rem dotted var(--spur-rule-heavy); content: ""; grid-column: 2; grid-row: 1; margin-bottom: .38em; }
.spur-menu dt, .spur-menu dd { margin: 0; }
.spur-menu dt { color: var(--spur-ink); grid-column: 1; grid-row: 1; }
.spur-menu dd { color: var(--spur-ink); font-family: var(--font-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; font-weight: 700; grid-column: 3; grid-row: 1; letter-spacing: -.02em; line-height: 1; }

.spur-colophon { border-top: var(--bar-rule) solid var(--spur-rule); color: var(--spur-ink-soft); display: flex; flex-wrap: wrap; font-size: .6rem; gap: .6em; justify-content: center; margin: var(--bar-space-6) 0 0; padding-top: var(--bar-space-3); }
.spur-colophon span + span::before { color: var(--spur-brass); content: "\25C6"; font-size: .6em; margin-right: .9em; position: relative; top: -.15em; }

/* The bridge: below the sheet, on the wall, the one place the study speaks
   as itself. Same red impression as the sign and the action. */
.spur-bridge-wrap { padding-block: var(--bar-space-8) var(--bar-space-8); }
.spur-bridge {
  align-items: end;
  border-top: .3rem solid var(--spur-red);
  display: grid;
  gap: var(--bar-space-4) clamp(var(--bar-space-5), 8vw, var(--bar-space-8));
  grid-template-columns: minmax(0, 1.3fr) auto;
  padding-top: var(--bar-space-5);
}
.spur-bridge-copy { max-width: 36rem; }
.spur-bridge-kicker { color: var(--spur-red); font-size: .7rem; margin: 0 0 var(--bar-space-3); }
.spur-bridge h2 { color: var(--spur-paper); font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3.4rem); letter-spacing: -.04em; line-height: .92; margin: 0; }
.spur-bridge-copy > p:last-child { color: color-mix(in srgb, var(--spur-paper) 84%, var(--spur-room)); line-height: 1.5; margin: var(--bar-space-3) 0 0; max-width: 30rem; }
.spur-bridge .spur-action { justify-self: start; }
.spur-bridge .spur-action:hover { background: var(--spur-paper); border-color: var(--spur-paper); color: var(--spur-ink); }

@media (max-width: 48rem) {
  :root { --bar-room-height: var(--bar-mobile-hero-height); --bar-sheet-overlap: 4rem; }
  .spur-sheet { padding: var(--bar-space-5) var(--bar-space-3) var(--bar-space-4); transform: none; }
  .spur-sign { font-size: clamp(3rem, 14vw, 4.4rem); }
  .spur-set { grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr); padding-block: var(--bar-space-3); }
  .spur-set-kind { grid-column: 2; justify-self: start; text-align: left; }
  .spur-menu-board { grid-template-columns: 1fr; }
  .spur-bridge { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  .spur-kicker { font-size: .62rem; }
  .spur-topline { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (prefers-reduced-motion: no-preference) {
  .spur-room [data-world-object] img { transition: transform 1200ms var(--bar-ease); }
  .spur-room [data-world-object].is-inview img { transform: scale(1.02); }
  .spur-sign span::before { animation: spur-impression 520ms var(--bar-ease) both; }
  .spur-set p .spur-set-chip { animation: spur-stamp 240ms cubic-bezier(.2, .9, .3, 1.15) both; }
}

@keyframes spur-impression {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes spur-stamp {
  from { opacity: 0; transform: rotate(-6deg) translateY(-.35em) scale(1.25); }
  to { opacity: 1; transform: rotate(-6deg) translateY(-.35em) scale(1); }
}