/* ===========================================================================
   Automatic Wins — gallery / catalog

   Championship Crimson, revised 2026-08-26. The first cut used the brand's
   warm cream, brass and espresso as written down, and it read drab, for two
   reasons worth keeping on the record:

   1. The accent never owned a region. Crimson appeared only on 10px lane
      labels and the open chair, which taste.md calls confetti.
   2. Cream, sand and card sat within a few percent of each other, so the whole
      page was one narrow value band with a single dark room.

   The fix is both: cool the paper off the warm artisan cream that taste.md
   warns is the default reach for every craft brief, take crimson up to a true
   championship red, drop brass to a neutral rule colour, and give crimson a
   whole room to own.

   Two families only: Bricolage Grotesque (display), Instrument Sans (text).
   Grounds are painted per room and hard cut. Nothing drifts.
   =========================================================================== */

:root {
  --sc-canvas:     #F3F2EE;
  --sc-surface:    #FFFFFF;
  --sc-ink:        #14100E;
  --sc-ink-soft:   #5A574F;
  --sc-accent:     #C8102E;
  --sc-accent-ink: #FFFFFF;

  --sc-font-display: var(--font-display, "Bricolage Grotesque"), system-ui, sans-serif;
  --sc-font-text:    var(--font-body, "Instrument Sans"), system-ui, sans-serif;

  /* Brand roles that are not accent roles. What was brass is now a neutral
     rule colour and never carries text at any size. */
  --aw-paper:      #F3F2EE;
  --aw-alt:        #E4E3DD;
  --aw-card:       #FFFFFF;
  --aw-ink:        #14100E;
  --aw-ink-2:      #1E1917;
  --aw-rule-line:  #9A9790;
  --aw-faint:      #8C8981;

  --aw-crimson:      #C8102E;
  --aw-crimson-deep: #A00D24;
  /* On a dark or crimson ground #C8102E fails; this is the same hue lifted. */
  --aw-crimson-lift: #FF6A7F;

  --aw-rule:        rgba(20, 16, 14, 0.13);
  --aw-rule-strong: rgba(20, 16, 14, 0.26);

  --sc-shadow-color: 20 16 14;
}

/* The engine's own progress element. */
[data-sc-progress] { color: var(--sc-accent); }

body { background: var(--aw-paper); }

/* --------------------------------------------------------------- ROOMS
   Hard cut grounds. Several short objects can be part way through at once
   here, which is exactly the condition under which drift arrives late and
   reads as a bug, so each room paints its own opaque ground instead. */
.aw-room { position: relative; }

.aw-room--paper    { background: var(--aw-paper); }
.aw-room--alt     { background: var(--aw-alt); }

/* Two inverted rooms now, not one. `color` is restated alongside the tokens in
   BOTH because it is inherited as a COMPUTED value: redefining --sc-ink alone
   leaves every line under the subtree still carrying the body's ink, and the
   room renders at about 1.15:1 while the harness grades it the wrong way. */
.aw-room--crimson {
  background: var(--aw-crimson);
  --sc-ink: #FFFFFF;
  --sc-ink-soft: #FFD9DE;
  --sc-accent: #FFFFFF;
  --aw-rule: rgba(255, 255, 255, 0.28);
  --aw-rule-strong: rgba(255, 255, 255, 0.46);
  color: var(--sc-ink);
}
.aw-room--crimson .sc-body { color: var(--sc-ink-soft); }

.aw-room--ink {
  background: var(--aw-ink);
  --sc-ink: #F3F2EE;
  --sc-ink-soft: #C6C3BB;
  --aw-rule: rgba(243, 242, 238, 0.16);
  --aw-rule-strong: rgba(243, 242, 238, 0.30);
  /* Two stop accent: one hue, two lightnesses, keyed to the ground.
     #C8102E measures about 2:1 on this ground and fails. This is the same hue
     lifted. */
  --sc-accent: var(--aw-crimson-lift);
  --sc-accent-ink: var(--aw-ink);
  color: var(--sc-ink);
}
.aw-room--ink .sc-body { color: var(--sc-ink-soft); }
/* A surface inside an inverted room must invert too. The entry plate kept
   --aw-card (white) while its text inherited the room's light ink, which
   measured 1.17:1: light type on a white card. This is the same computed-value
   trap as `color`, one level down, and it is invisible until measured. */
.aw-room--ink .aw-entry { background: var(--aw-ink-2); }

/* A flow room directly after a pinned act takes reduced padding: the pinned
   stage already needs a full viewport to scroll off. */
.aw-room--after-pin { padding-block: clamp(3rem, 7vh, 5.5rem); }

.aw-wrap {
  width: min(100% - 2 * var(--sc-gutter), var(--sc-maxw));
  margin-inline: auto;
}

/* Pinned stages paint their own ground: the stage is what the reader sees
   while the section behind it travels. */
[data-sc-act="pin"] > [data-sc-stage] { background: inherit; }

/* ================================================================= INDEX
   The gallery's nav is an index of objects, and every entry jumps.
   No wordmark and CTA bar: that belongs to the filmic grammar. */
.aw-index {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--sc-z-chrome);
  width: 15rem;
  height: 100dvh;
  padding: var(--sc-6) var(--sc-5);
  display: flex;
  flex-direction: column;
  gap: var(--sc-4);
  background: color-mix(in srgb, var(--aw-paper) 82%, transparent);
  backdrop-filter: blur(10px);
  border-inline-end: 1px solid var(--aw-rule);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.aw-index__mark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-tight);
  color: var(--aw-ink);
  text-decoration: none;
}
.aw-index__mark-ring {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border-radius: 50%;
  border: 2px solid var(--sc-accent);
  flex: none;
}
.aw-index__note {
  font-size: var(--sc-t-xs);
  line-height: 1.5;
  color: var(--aw-ink);
  opacity: 0.72;
  margin: 0;
}

/* The one self-serve path on the page, so it is the only thing in the index
   that reads as a control rather than as a listing. */
.aw-index__visit {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: start;
  padding: 0.5rem 0.85rem;
  min-block-size: 2.75rem;
  border-radius: var(--sc-r-pill);
  background: var(--aw-crimson);
  color: #FFFFFF;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--sc-track-snug);
  text-decoration: none;
  transition: background 140ms var(--sc-ease-out);
}
.aw-index__visit:hover { background: var(--aw-crimson-deep); }
.aw-index__visit:active { transform: translateY(1px); }
.aw-index__visit-mark { font-size: 0.9em; }

.aw-index__head {
  margin: var(--sc-4) 0 var(--sc-2);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sc-track-wide);
  color: var(--aw-ink);
  opacity: 0.55;
}
.aw-index__head span { opacity: 0.7; font-weight: 400; text-transform: none; letter-spacing: 0.04em; }

.aw-index__list { list-style: none; margin: 0; padding: 0; }
.aw-index__list a {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.34rem 0;
  border-block-end: 1px solid var(--aw-rule);
  text-decoration: none;
  color: var(--aw-ink);
  transition: color 140ms var(--sc-ease-out);
}
.aw-index__list li:last-child a { border-block-end: 0; }
.aw-index__lane { font-size: 0.78rem; line-height: 1.25; }
.aw-index__who {
  font-size: 0.75rem;
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--aw-ink);
  opacity: 0.5;
}
.aw-index__list--rooms a { flex-direction: row; font-size: 0.78rem; }
.aw-index__list li.is-open a { color: var(--sc-accent); }
.aw-index__list li.is-open .aw-index__who { color: var(--sc-accent); opacity: 0.8; }

.aw-index__toggle { display: none; }

@media (hover: hover) and (pointer: fine) {
  .aw-index__list a:hover { color: var(--sc-accent); }
}

/* Below the rail's width the index collapses to a bar with a disclosure. It
   is still an index, not a marketing bar: no CTA rides in it. */
@media (max-width: 1179px) {
  .aw-index {
    inline-size: 100%;
    block-size: auto;
    max-block-size: 100dvh;
    flex-direction: column;
    gap: var(--sc-2);
    padding: var(--sc-3) var(--sc-gutter);
    border-inline-end: 0;
    border-block-end: 1px solid var(--aw-rule);
  }
  .aw-index__note { display: none; }
  .aw-index__visit {
    align-self: stretch;
    justify-content: center;
    margin-inline-end: 7rem;
  }
  .aw-index__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    inset-block-start: var(--sc-3);
    inset-inline-end: var(--sc-gutter);
    min-block-size: 2.75rem;
    padding-inline: 0.75rem;
    background: none;
    border: 1px solid var(--aw-rule-strong);
    border-radius: var(--sc-r-sm);
    color: var(--aw-ink);
    font: inherit;
    font-size: 0.7rem;
    letter-spacing: var(--sc-track-wide);
    text-transform: uppercase;
    cursor: pointer;
  }
  .aw-index__toggle-mark {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms var(--sc-ease-out);
  }
  .aw-index__toggle[aria-expanded="true"] .aw-index__toggle-mark { transform: translateY(1px) rotate(225deg); }
  .aw-index__body { display: none; padding-block-end: var(--sc-3); }
  .aw-index__toggle[aria-expanded="true"] + .aw-index__body { display: block; overflow-y: auto; }
  .aw-index__list--rooms { columns: 2; }
}

/* Push the page clear of the index. */
@media (min-width: 1180px) { main { margin-inline-start: 15rem; } }
@media (max-width: 1179px) { main { padding-block-start: 4.25rem; } }

/* =========================================================== THE LABEL
   The five line schema every object on the page carries, with no
   exceptions. Held or open, board or member: the schema is what makes
   this a collection instead of a leaderboard. */
.aw-label { margin: 0; }
.aw-label__row {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: var(--sc-2);
  padding-block: 0.4rem;
  border-block-start: 1px solid var(--aw-rule);
}
.aw-label__row:first-child { border-block-start: 0; }
.aw-label dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink);
  opacity: 0.45;
  padding-block-start: 0.12rem;
}
.aw-label dd {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--sc-ink);
  text-wrap: pretty;
}
/* The underline has to be declared, not assumed. Tailwind's preflight sets
   `a { text-decoration: inherit }`, so inside the app these inherited `none`
   from their parent and rendered as plain ink: on a page whose whole job is
   sending traffic to member sites, the outbound links did not look like links.
   The lab page, which has no Tailwind, underlined them by browser default,
   which is exactly why eyeballing the lab build missed it. */
.aw-label dd a {
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sc-ink) 35%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.aw-label dd a:hover { text-decoration-color: var(--sc-accent); }
.aw-label dd a:hover { color: var(--sc-accent); }

/* A blank field is printed, not omitted. The gap in the room is the most
   useful thing this page knows about itself. */
.aw-label dd.is-blank { min-block-size: 1.25rem; }
.aw-label dd.is-blank::after {
  content: "";
  display: block;
  inline-size: min(9rem, 60%);
  block-size: 1px;
  margin-block-start: 0.6rem;
  background: repeating-linear-gradient(90deg, var(--aw-rule-strong) 0 5px, transparent 5px 10px);
}

/* ====================================================== THE SEAT CARD */
.aw-seat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sc-3);
  padding: var(--sc-5);
  background: var(--aw-card);
  border: 1px solid var(--aw-rule);
  border-radius: var(--sc-r-md);
  box-shadow: 0 18px 40px -28px rgb(var(--sc-shadow-color) / 0.5);
}
.aw-seat-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background: var(--sc-edge);
  border-start-start-radius: var(--sc-r-md);
  border-start-end-radius: var(--sc-r-md);
}
.aw-seat-card__lane {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-accent);
}
.aw-seat-card__face {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: var(--sc-r-sm);
  display: grid;
  place-items: center;
  background: var(--aw-crimson);
  color: #FFFFFF;
  overflow: hidden;
}
.aw-seat-card__face img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.aw-seat-card__face--empty {
  background: none;
  border: 1px dashed var(--aw-rule-strong);
}
.aw-mono {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.aw-seat-card--open { border-color: color-mix(in srgb, var(--sc-accent) 45%, transparent); background: transparent; box-shadow: none; }
.aw-seat-card--open::before { display: none; }

/* ================================================== 1 · ARRIVAL (reveal) */
.aw-arrival { padding-block: clamp(5rem, 16vh, 11rem); }
.aw-collection-line {
  max-inline-size: 34ch;
  margin: 0 0 var(--sc-6);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  text-wrap: balance;
}
.aw-arrival__plate {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
}
.aw-seat-card--large { padding: var(--sc-6); }
.aw-seat-card--large .aw-label dd { font-size: 0.92rem; }
.aw-arrival__aside {
  max-inline-size: 42ch;
  margin: 0;
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  color: var(--sc-ink-soft);
  text-wrap: pretty;
}

/* ================================================ 2 · THE COLLECTION (pan) */
.aw-rail {
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  padding-inline: var(--sc-gutter);
  will-change: transform;
}
.aw-rail__lead,
.aw-rail__tail {
  flex: none;
  inline-size: clamp(17rem, 25vw, 22rem);
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--sc-3);
}
.aw-rail__lead .sc-body,
.aw-rail__tail .sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.aw-rail .aw-seat-card {
  flex: none;
  inline-size: clamp(16rem, 21vw, 19rem);
  align-self: center;
}
.aw-rail .aw-label dd { font-size: 0.82rem; }

/* A staggered settle driven from --sc-p: lateral travel alone reads as a
   slideshow, items arriving in sequence read as a drawer being pulled. The
   opacity floor keeps a not yet settled card reading as arriving rather than
   as failing to load. */
@media (prefers-reduced-motion: no-preference) {
  .aw-rail .aw-seat-card {
    --t: clamp(0, (var(--sc-p, 1) * 10 - var(--n, 0) + 0.6) / 1.6, 1);
    opacity: calc(0.55 + 0.45 * var(--t));
    transform: translateY(calc((1 - var(--t)) * 0.9rem));
  }
}

/* ==================================================== 3 · THE TABLE (pin)
   The peak, and the signature move.

   Three properties are doing the work and each one is deliberate:
   1. A circle has no head, so rank is geometrically unavailable.
   2. The eight arrive on ONE frame at equal weight. A staggered entrance
      would smuggle an order back in through the arrival sequence.
   3. The ninth chair does not turn. It holds at the near edge, facing the
      reader, and it is empty. */
.aw-table-stage {
  --p: var(--sc-p, 0);
  --draw:      clamp(0, (var(--p) - 0.04) / 0.28, 1);
  --arrive:    clamp(0, (var(--p) - 0.34) / 0.09, 1);
  --spin:      clamp(0, (var(--p) - 0.44) / 0.38, 1);
  --open-lit:  clamp(0, (var(--p) - 0.80) / 0.10, 1);
  --aw-ring-a: calc(var(--spin) * 200deg);
  /* Angular step follows the seat count, so the ring stays evenly spaced when
     the roster changes. --aw-seats is declared on .aw-ring in the markup. */
  --aw-step: calc(360deg / var(--aw-seats, 8));
  --aw-R: clamp(6.25rem, 24.5vmin, 13.75rem);

  /* NOTE: never set `position` or a block-size here. The engine adds .sc-stage
     to this element and relies on `position: sticky; height: 100vh` to pin it;
     overriding either silently unpins the act, and the whole 4.2vh stage then
     lays out in flow with the ring adrift somewhere in the middle of it.
     scrollcraft.js warns about this at mount, which is worth reading. */
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-inline: var(--sc-gutter);
}

/* Copy holds its own column, so it never competes with the table for space.
   The three windows overlap by roughly 15% and cross fade in one place, which
   is the cue contract for a pinned act. */
.aw-table__copy-col {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  min-block-size: 12rem;
}
.aw-table__copy {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  translate: 0 -50%;
  max-inline-size: 30ch;
}
.aw-table { grid-column: 2; grid-row: 1; justify-self: center; }

.aw-table {
  position: relative;
  inline-size: calc(2 * var(--aw-R) + 9rem);
  /* Taller than it is wide: the ninth chair hangs below the disc and the box
     has to contain it, or grid centring puts it through the stage floor. */
  block-size: calc(2 * var(--aw-R) + 20rem);
  display: grid;
  place-items: center;
}

.aw-table__disc {
  position: absolute;
  inline-size: calc(2 * var(--aw-R) + 1.5rem);
  block-size: calc(2 * var(--aw-R) + 1.5rem);
  overflow: visible;
}
/* No `fill` here: `.aw-table__disc circle` outranks `.aw-table__inner` on
   specificity, so a fill declared at this level silently wins over the
   tabletop's own. Each circle sets its own. */
.aw-table__disc circle {
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
/* The brass rim is what draws. */
.aw-table__edge {
  fill: none;
  stroke: var(--aw-crimson-deep);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw));
}
/* The table itself is the act's GROUND and is on screen from the first frame,
   because a pinned stage is fully visible roughly a viewport before its own
   progress leaves 0. Gating this too left a blank screen for that whole
   travel, which the harness does not call dead scroll and the reader does. */
.aw-table__inner {
  stroke: var(--aw-rule-strong);
  stroke-width: 1;
  /* The table IS the brand, so it carries the brand colour. This is the page's
     largest saturated field and it lands on the peak, which is where the asset
     budget belongs. White chair plates read hard against it, and the one empty
     chair sits off the disc entirely, on the paper, which is exactly what it
     means. */
  fill: var(--aw-crimson);
  stroke: var(--aw-crimson-deep);
}
.aw-table__disc { filter: drop-shadow(0 10px 20px rgb(var(--sc-shadow-color) / 0.14)); }

.aw-ring {
  position: absolute;
  inset: 0;
  transform: rotate(var(--aw-ring-a));
  opacity: var(--arrive);
}

.aw-chair {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 0;
  block-size: 0;
  transform: rotate(calc(var(--i) * var(--aw-step))) translateY(calc(-1 * var(--aw-R)));
}

/* The counter rotation. Positions travel; labels stay upright and readable. */
.aw-chair__plate {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  /* Derived, not fixed. The chord between adjacent seat centres is
     2R*sin(pi/N), so a plate width pinned in rem overlaps as soon as the
     viewport shrinks R via vmin. 0.46R keeps clearance at every size the ring
     is drawn at. */
  inline-size: auto;
  translate: -50% -50%;
  transform: rotate(calc(-1 * var(--i, 0) * var(--aw-step) - var(--aw-ring-a)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.5rem;
  text-align: center;
  background: var(--aw-card);
  border: 1px solid var(--aw-rule);
  border-radius: var(--sc-r-sm);
  box-shadow: 0 10px 24px -18px rgb(var(--sc-shadow-color) / 0.6);
}
.aw-chair__plate .aw-mono {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 5px;
  background: var(--aw-crimson);
  color: #FFFFFF;
  font-size: 0.75rem;
}
/* At ten seats the lane cannot ride the ring. A two line lane makes a tall box,
   and tall boxes collide diagonally at 36 degrees however narrow they are. The
   ring carries the monogram and the surname; the lane lives in the rail and the
   index, which is where it is actually read. The whole table is aria-hidden, so
   nothing is lost to assistive tech. */
.aw-ring .aw-chair__plate b { display: none; }
.aw-chair__plate b {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sc-ink);
  text-wrap: balance;
}
.aw-chair__plate i {
  font-style: normal;
  white-space: nowrap;
  font-size: 0.75rem;
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink);
  opacity: 0.5;
}

/* The ninth chair. Outside .aw-ring, so nothing rotates it, and pulled to a
   larger radius so it reads as drawn up to the near edge rather than seated
   in the ring. It cannot collide with a turning seat. */
.aw-chair--open {
  --i: 0;
  transform: translateY(calc(var(--aw-R) + 7.25rem));
  opacity: var(--arrive);
}
.aw-chair--open .aw-chair__plate {
  transform: none;
  inline-size: 8.25rem;
  /* The empty chair has to hold its own against a saturated red table, because
     it is the point of the whole act. Solid card, a real dashed edge, and a
     shadow so it reads as drawn UP to the table rather than printed on the
     floor behind it. */
  background: var(--aw-card);
  border: 2px dashed color-mix(in srgb, var(--sc-accent) calc(45% + var(--open-lit) * 55%), var(--aw-rule-strong));
  box-shadow: 0 12px 26px -16px rgb(var(--sc-shadow-color) / 0.45);
}
.aw-chair--open .aw-mono--empty {
  background: none;
  border: 2px dashed color-mix(in srgb, var(--sc-accent) calc(40% + var(--open-lit) * 60%), var(--aw-rule-strong));
}
.aw-chair--open b { color: color-mix(in srgb, var(--sc-accent) calc(var(--open-lit) * 100%), var(--sc-ink)); }
.aw-chair--open i { color: var(--sc-accent); opacity: calc(0.35 + 0.65 * var(--open-lit)); }

.aw-table__punch { color: var(--sc-ink); font-weight: 500; }

/* ================================================== 4 · THE HOUR (flow) */
.aw-hour__head { max-inline-size: var(--sc-measure); }
.aw-hour__list {
  list-style: none;
  margin: var(--sc-7) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  border-block-start: 1px solid var(--aw-rule);
}
.aw-hour__list li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: var(--sc-4) var(--sc-4) var(--sc-5) 0;
  border-block-end: 1px solid var(--aw-rule);
}
.aw-hour__list b {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-base);
  font-weight: 600;
  color: var(--sc-ink);
}
.aw-hour__list span {
  font-size: var(--sc-t-sm);
  line-height: var(--sc-leading-body);
  color: var(--sc-ink-soft);
  max-inline-size: 42ch;
}
.aw-hour__formats {
  margin: var(--sc-6) 0 0;
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent);
}

/* ======================================= 5 · CONDITIONS OF ENTRY (reveal) */
.aw-room--alt[data-sc-act="reveal"] { padding-block: clamp(5rem, 15vh, 10rem); }
.aw-entry {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--aw-card);
  border: 1px solid var(--aw-rule);
  border-radius: var(--sc-r-lg);
}
.aw-entry__head { display: flex; flex-direction: column; gap: var(--sc-3); }
.aw-entry__head .sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.aw-entry__list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--sc-5);
}
.aw-entry__list li {
  break-inside: avoid;
  padding-block: 0.55rem;
  border-block-end: 1px solid var(--aw-rule);
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--sc-ink);
}

/* ================================================== 6 · INQUIRY (pin) */
/* Same rule as the table stage: no `position`, no block-size. The engine owns
   both on .sc-stage.

   Two rows rather than a centred stack: the plate takes the free space and the
   footer anchors to the floor of the stage. Centring the pair as one group left
   the bottom third of the closing screen empty, which reads as the page
   trailing off rather than resolving. */
.aw-close {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--sc-5);
  padding-block: clamp(2rem, 6vh, 4rem);
}
.aw-close > .aw-close__inner { align-self: center; }
.aw-close__inner {
  width: min(100% - 2 * var(--sc-gutter), 34rem);
  margin-inline: auto;
}
.aw-seat-card--inquiry { padding: var(--sc-6); }
/* Register sits above the ask: it is the path that actually works without a
   mail client. */
.aw-label__row--visit { border-block-start: 1px solid var(--aw-rule-strong); padding-block-start: var(--sc-3); }
.aw-visit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-block-size: 2.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sc-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.aw-visit:hover { color: var(--aw-crimson-deep); }
.aw-visit:active { transform: translateY(1px); }
.aw-visit__note {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  color: var(--sc-ink-soft);
}

.aw-label__row--ask { border-block-start: 1px solid var(--aw-rule-strong); padding-block: var(--sc-3) 0.4rem; }

/* The ask is set as a label field, not as a button island. The close is the
   collection's own schema, so the request reads as part of the catalog. */
.aw-ask {
  display: inline-block;
  min-block-size: 2.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sc-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  transition: color 140ms var(--sc-ease-out);
}
.aw-ask:hover { color: var(--aw-crimson-deep); }

/* A mailto is the whole call to action on this page, and a mailto silently does
   nothing for anyone on webmail or without a mail handler configured. The
   address is therefore also printed, selectable, and copyable, so the ask still
   works when the protocol handler does not. */
.aw-ask__alt {
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: var(--sc-ink-soft);
}
.aw-ask__copy {
  font: inherit;
  font-size: 0.8rem;
  color: var(--sc-ink);
  background: none;
  border: 0;
  border-block-end: 1px dashed var(--aw-rule-strong);
  padding: 0 0 1px;
  cursor: pointer;
  min-block-size: 0;
}
.aw-ask__copy:hover { color: var(--sc-accent); border-block-end-color: var(--sc-accent); }
.aw-ask__copy:active { transform: translateY(1px); }
.aw-ask__said {
  margin-inline-start: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent);
}
.aw-ask:active { transform: translateY(1px); }

.aw-foot {
  width: min(100% - 2 * var(--sc-gutter), var(--sc-maxw));
  margin-inline: auto;
  padding-block-start: var(--sc-4);
  border-block-start: 1px solid var(--aw-rule);
  display: flex;
  flex-direction: column;
  gap: var(--sc-2);
}
.aw-foot p { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--sc-ink); opacity: 0.62; }
.aw-foot__row { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); justify-content: space-between; }
.aw-foot a {
  color: var(--sc-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sc-ink) 40%, transparent);
  text-underline-offset: 3px;
}
.aw-foot a:hover { color: var(--sc-accent); }

/* ====================================================== FOCUS + STATES */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ========================================================== PHONE
   The hero type steps down a rung, the rail plates narrow, and the ring
   shrinks rather than becoming a list: the table is the signature move and
   it has to survive the small screen. */
@media (max-width: 860px) {
  .aw-arrival__plate { grid-template-columns: 1fr; }
  .aw-collection-line { font-size: var(--sc-t-base); max-inline-size: none; }
  .aw-entry { grid-template-columns: 1fr; }
  .aw-entry__list { columns: 1; }
  /* One column: the table centres and the copy holds a fixed band beneath it,
     still cross fading in one place. */
  .aw-table-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: var(--sc-4);
    padding-block: clamp(1.5rem, 5vh, 3rem);
  }
  .aw-table { grid-column: 1; grid-row: 1; }
  .aw-table__copy-col { grid-column: 1; grid-row: 2; min-block-size: 8.5rem; }
  .aw-table__copy { max-inline-size: none; }
}

@media (max-width: 700px) {
  .aw-rail .aw-seat-card,
  .aw-rail__lead,
  .aw-rail__tail {
    min-block-size: 62vh;
    justify-content: center;
  }
  .aw-rail .aw-seat-card { inline-size: min(76vw, 21rem); }
}

@media (max-width: 560px) {
  .aw-table-stage { --aw-R: clamp(4.5rem, 22vmin, 7rem); }
  .aw-chair__plate {
    inline-size: auto;
    padding: 0.3rem;
    border-radius: 7px;
  }
  .aw-ring .aw-chair__plate b,
  .aw-ring .aw-chair__plate i { display: none; }
  .aw-chair__plate .aw-mono { inline-size: 1.6rem; block-size: 1.6rem; font-size: 0.75rem; }
  .aw-chair--open .aw-chair__plate { inline-size: 6.5rem; }
  .aw-chair--open .aw-chair__plate i { display: block; }
  .aw-table__copy--lead .sc-display { font-size: var(--sc-t-2xl); }
  .aw-label__row { grid-template-columns: 4.5rem 1fr; }
}

/* ================================================== REDUCED MOTION
   Fewer and gentler, not zero. The ring holds still, fully drawn, with the
   open chair still at the near edge: nothing is lost but the rotation. */
@media (prefers-reduced-motion: reduce) {
  .aw-table-stage {
    --draw: 1;
    --arrive: 1;
    --open-lit: 1;
    --spin: 0;
    --aw-ring-a: 0deg;
  }
  .aw-rail .aw-seat-card { opacity: 1; transform: none; }
}

/* HIG pass · Sep 5 2026 · hit areas. Vertical padding on inline links paints and
   hit-tests without moving the line; the mark and index entries get a 44px box. */
.aw-seat-card a, dd a, p a, li a, a[href^="mailto:"] { padding-block: 0.9rem; }
.aw-index__mark { min-block-size: 2.75rem; display: inline-flex; align-items: center; }
.aw-index__list a { padding-block: 0.6rem; }
a[href^="mailto:"] { display: inline-block; padding-block: 0.75rem; }
.aw-ask__copy { min-block-size: 2.75rem; padding-block: 0.6rem; }