/* Brown Today — cards over a campus. The map is fixed behind the page; the page is a deck
   of viewport-tall slides that snap into place, and the camera follows. Everything readable
   lives in a frosted card. The tabs in the header re-deal the deck — dining, libraries, gyms,
   services, events — and the first card of each is its board: the whole tab, all at once. */

:root {
  --paper: #f5f1e8;
  --ink: #1a1512;
  --muted: #6d6358;
  --line: rgba(26, 21, 18, 0.12);
  --crimson: #b8102a;
  --crimson-deep: #8f0c21;
  --amber: #c58a15;
  --blue: #1c6dd0;
  --card: rgba(251, 248, 242, 0.86);
  --card-solid: #fbf8f2;
  --card-border: rgba(26, 21, 18, 0.09);
  --card-shadow: 0 24px 70px -34px rgba(26, 21, 18, 0.45);
  --tag: rgba(251, 248, 242, 0.94);
  --sans: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --gutter: 32px;
  --header-h: 54px;
  --card-w: 470px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14171e;
    --ink: #f1ebe0;
    --muted: #a49b8f;
    --line: rgba(241, 235, 224, 0.14);
    --crimson: #e04a5f;
    --crimson-deep: #f07a8a;
    --amber: #e0a93a;
    --blue: #5b9cf5;
    --card: rgba(22, 25, 32, 0.82);
    --card-solid: #171a21;
    --card-border: rgba(241, 235, 224, 0.1);
    --card-shadow: 0 24px 70px -30px rgba(0, 0, 0, 0.7);
    --tag: rgba(22, 25, 32, 0.92);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The page snaps slide by slide: a flick moves exactly one, and it clicks into place. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-snap-type: y mandatory; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
body.is-explore { overflow: hidden; }

a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { color: var(--crimson); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 4px; }

/* ---------- the scene ---------- */

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  background: var(--paper);
  /* Wherever no card covers it, the map takes the pointer: drag to move, right-drag to turn. */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* On the tour a finger on the map still scrolls the deck (the controls set touch-action
     inline, hence the !important); in explore mode the map has the touches to itself. */
  touch-action: pan-y !important;
}
.is-explore #scene { touch-action: none !important; }
#scene.is-over { cursor: pointer; }
#scene:active { cursor: grabbing; }
.no-scene #scene, .no-scene .tags, .no-scene .explore-btn { display: none !important; }
.no-scene body, body.no-scene {
  background:
    radial-gradient(ellipse at 70% 20%, rgba(184, 16, 42, 0.08), transparent 55%),
    var(--paper);
}

/* ---------- tags on the buildings ---------- */

.tags { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tag {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  will-change: transform;
  transition: opacity 0.35s ease;
}
.tag.is-hidden { opacity: 0; pointer-events: none; }
.tag-card {
  background: var(--tag);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 6px 10px 7px;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.45);
  max-width: 230px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tag b { display: block; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-status { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-foods {
  display: none;
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.3;
  margin-top: 4px;
  color: var(--ink);
  text-wrap: pretty;
}
.tag-stem { width: 1.5px; height: 22px; background: var(--muted); opacity: 0.8; }
.tag-pin {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  background: var(--card-solid);
  margin-top: -1px;
}
.tag.is-open .tag-pin, .tag.is-closing .tag-pin { background: var(--crimson); border-color: var(--crimson); }
.tag.is-soon .tag-pin { background: var(--amber); border-color: var(--amber); }
.tag.is-open .tag-status, .tag.is-closing .tag-status { color: var(--crimson); font-weight: 600; }
.tag.is-closed .tag-card { opacity: 0.86; }
.tag:hover .tag-card { border-color: var(--ink); }

/* The reader, once they share a location: a blue dot where they stand, above every tag but a peeked one. */
.you { position: absolute; left: 0; top: 0; z-index: 15000; pointer-events: none; will-change: transform; }
.you i {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 3px 10px rgba(0, 0, 0, 0.35);
}
.you span {
  position: absolute;
  left: 0;
  top: 13px; /* under the dot: the halls' tags stand above their pins */
  transform: translateX(-50%);
  padding: 2px 8px 3px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

/* Over the whole campus the board carries the detail, so the tags keep to a name and a status
   and the map reads as one: crimson is open. Closed halls are a name; the dishes open up for
   the hall being pointed at, on the map or on the board. Explore reads the same way. */
:is([data-view="hero"], .is-explore) .tag.is-closed .tag-status { display: none; }
:is([data-view="hero"], .is-explore) .tag.is-closed .tag-card { padding: 4px 8px; }
:is([data-view="hero"], .is-explore) .tag.is-closed b { font-size: 11.5px; font-weight: 600; }
.tag.is-peek .tag-foods:not(:empty), .tag:hover .tag-foods:not(:empty) { display: block; }
.tag.is-peek .tag-status, .tag:hover .tag-status { display: block !important; }
/* "Near me": the halls the map has closed in on say how far they are. (A phone's strip only has room for their names.) */
@media (min-width: 761px) { .tag.is-near .tag-status { display: block !important; } }
.tag.is-peek, .tag:hover { z-index: 20000 !important; }
.tag.is-peek .tag-card { border-color: var(--ink); opacity: 1; }

/* An event's pin is a venue's name until it is pointed at; then it says what is on there. */
.tag[data-kind="event"]:not(.is-peek):not(:hover) .tag-status { display: none; }
.tag[data-kind="event"]:not(.is-peek):not(:hover) .tag-card { padding: 4px 8px; max-width: 180px; }
.tag[data-kind="event"]:not(.is-peek):not(:hover) b { font-size: 11.5px; font-weight: 600; }

/* While a hall's chapter is open, its own tag is just a pin with a name — the card says the
   rest — and the others step back to names. */
.tag.is-dim .tag-status, .tag.is-dim .tag-foods { display: none; }
.tag.is-dim .tag-card { padding: 4px 8px; opacity: 0.8; }
.tag.is-dim b { font-size: 11.5px; font-weight: 600; }
.tag.is-dim .tag-stem { height: 14px; }
.tag.is-focus .tag-status, .tag.is-focus .tag-foods { display: none; }
.tag.is-focus .tag-card { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag.is-focus .tag-stem { background: var(--ink); opacity: 1; height: 30px; }
.tag.is-focus .tag-pin { width: 14px; height: 14px; }

/* ---------- header ---------- */

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--paper) 74%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand em { font-style: normal; font-weight: 500; color: var(--muted); }
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crimson);
  flex: none;
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.6); opacity: 0.55; }
}
.clock { margin: 0; font-family: var(--serif); font-style: italic; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The tabs: one view of the campus each, with its live count beside its name. */
.tabbar { display: flex; align-items: center; gap: 2px; margin-right: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); background: var(--line); }
.tab.is-current, .tab.is-current:hover { background: var(--ink); color: var(--paper); }
.tab b { font-size: 11.5px; font-weight: 700; color: var(--crimson); font-variant-numeric: tabular-nums; }
.tab b:empty { display: none; }
.tab b.is-none { color: inherit; font-weight: 500; opacity: 0.7; }
.tab.is-current b { color: inherit; opacity: 0.75; }

/* Under the header, over the map: the open tab's places by name, in their live colours, and a
   step either way. The board lists the same places in full, so there it stands down. */
.subnav {
  position: fixed;
  top: calc(var(--header-h) + 10px);
  right: var(--gutter);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 5px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
[data-view="hero"] .subnav, .is-explore .subnav { display: none; }
.step {
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.step:hover { color: var(--crimson); border-color: var(--crimson); }
.step:disabled { opacity: 0.35; cursor: default; }
.step:disabled:hover { color: var(--muted); border-color: var(--line); }
.chips { display: flex; align-items: center; gap: 4px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.chip i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.chip.is-open, .chip.is-closing { color: var(--ink); font-weight: 650; }
.chip.is-open i, .chip.is-closing i { background: var(--crimson); border-color: var(--crimson); }
.chip.is-closing i { animation: breathe 1.6s ease-in-out infinite; }
.chip.is-soon i { background: var(--amber); border-color: var(--amber); }
.chip:hover { border-color: var(--line); color: var(--ink); }
.chip.is-current, .chip.is-current:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dots-label { display: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

/* ---------- buttons ---------- */

.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.btn-small { padding: 6px 13px; font-size: 12.5px; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: transparent; color: var(--crimson); border-color: var(--crimson); }
.near-btn { gap: 6px; }
.near-btn[aria-pressed="true"], .near-btn[aria-pressed="true"]:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.linkish {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}
.linkish:hover { color: var(--crimson); }

/* ---------- chapters & cards ---------- */

/* The slides sit over the tags, so a tag never covers a card; only the cards take the pointer,
   and everywhere else it falls through to the tags. */
.story { position: relative; z-index: 2; pointer-events: none; }
.card { pointer-events: auto; }
.is-explore .story { visibility: hidden; }

/* The map's own buttons, top right of it; in explore mode they stand clear of the drawer. */
.map-tools { position: fixed; z-index: 3; top: calc(var(--header-h) + 12px); right: var(--gutter); display: flex; gap: 8px; transition: right 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.map-tools .btn { background: var(--card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); }
.no-scene .map-tools { display: none; }
@media (min-width: 761px) { .is-explore:not(.is-bare) .map-tools { right: calc(min(100%, 430px) + 16px); } }
/* On a place's slide the strip of chips holds that corner, so the tools sit under it. */
@media (min-width: 761px) { body:not([data-view="hero"]):not(.is-explore) .map-tools { top: calc(var(--header-h) + 60px); } }

/* Each chapter is one slide: exactly a viewport tall, so the snap lands it whole. A card
   that outgrows its slide — a full menu unfolded — scrolls inside itself. */
.chapter {
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: flex-start;
  padding: calc(var(--header-h) + 6vh) var(--gutter) 6vh;
}
.card {
  width: min(100%, var(--card-w));
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  background: var(--card);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 26px 28px 28px;
  box-shadow: var(--card-shadow);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.chapter.is-in .card { opacity: 1; transform: none; }
/* A click on the map puts the cards away; the next one brings them back. */
.is-bare .chapter .card { opacity: 0; transform: translateY(26px); pointer-events: none; transition-duration: 0.3s, 0.45s; }
/* Pushing on from the last card turns the deck back to its board: the cards go on up the way the
   scroll was headed, and the board — which comes back the same way — fades in over the campus. */
.is-turning .chapter .card { opacity: 0; transform: translateY(-22px); pointer-events: none; transition-duration: 0.22s, 0.26s; }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lede { font-family: var(--serif); font-size: 16px; color: var(--muted); margin: 10px 0 0; }
.note { font-size: 12.5px; color: var(--muted); }
.card-foot { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }

/* the board */
.chapter-board { padding-top: calc(var(--header-h) + 3vh); padding-bottom: 3vh; }
.card-board { width: min(100%, clamp(560px, 48vw, 700px)); padding: 20px 26px 18px; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.headline {
  font-weight: 700;
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 8px 0 0;
  text-wrap: balance;
}
.headline-small { font-size: clamp(30px, 3.6vw, 44px); line-height: 0.96; margin-top: 0; }
.deck {
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.4;
  margin: 6px 0 0;
  color: var(--muted);
  text-wrap: pretty;
}
.hint { margin: 0 0 0 auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.hint-scroll {
  width: 18px;
  height: 28px;
  border: 1.5px solid var(--muted);
  border-radius: 9px;
  position: relative;
  flex: none;
}
.hint-scroll::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--muted);
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(9px); opacity: 0.2; }
}
#retry { margin-top: 12px; }

/* the lanes: a hall per row — its state, what it's serving, and its day from 6 AM to 2 AM */
/* (The column widths sit on the card, not the timeline: the events skeleton borrows them.) */
.card-board { --namecol: clamp(290px, 23vw, 330px); --tl-gap: 16px; }
.timeline { margin-top: 12px; }
.tl-axis {
  display: grid;
  grid-template-columns: var(--namecol) minmax(0, 1fr);
  gap: 0 var(--tl-gap);
  align-items: end;
  height: 18px;
}
.tl-ticks {
  position: relative;
  height: 100%;
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.tl-ticks span { position: absolute; bottom: 0; white-space: nowrap; transform: translateX(-50%); }
.tl-ticks .is-start { transform: none; }
.tl-ticks .is-end { transform: translateX(-100%); }
.tl-ticks .is-minor { display: none; }
.tl-lanes { position: relative; padding-top: 4px; margin-bottom: 18px; }
.tl-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: var(--namecol) minmax(0, 1fr);
  gap: 0 var(--tl-gap);
  pointer-events: none;
}
.tl-overlay-track { position: relative; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); font-style: normal; }
.tl-now span {
  position: absolute;
  bottom: -17px;
  left: 1px;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tl-row {
  display: grid;
  grid-template-columns: var(--namecol) minmax(0, 1fr);
  gap: 0 var(--tl-gap);
  padding: 7px 8px;
  margin: 0 -8px;
  border-top: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.tl-row:hover, .tl-row.is-peek { background: rgba(184, 16, 42, 0.08); color: inherit; }
.tl-row.is-closed { opacity: 0.62; }
.tl-row.is-closed:hover, .tl-row.is-closed.is-peek { opacity: 0.95; }
.tl-name { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: baseline; min-width: 0; padding-left: 17px; position: relative; }
.tl-loc { font-weight: 650; font-size: 14.5px; letter-spacing: -0.01em; }
.tl-loc i { position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); }
.is-open > .tl-name i, .is-closing > .tl-name i { background: var(--crimson); border-color: var(--crimson); }
.is-closing > .tl-name i { animation: breathe 1.6s ease-in-out infinite; }
.is-soon > .tl-name i { background: var(--amber); border-color: var(--amber); }
.tl-loc, .tl-status, .tl-foods { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-status { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.is-open > .tl-name .tl-status, .is-closing > .tl-name .tl-status { color: var(--crimson); font-weight: 600; }
.is-soon > .tl-name .tl-status { color: var(--amber); font-weight: 600; }
.tl-foods { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin-top: 1px; }
.tl-foods.is-food { font-family: var(--serif); font-size: 13px; color: var(--ink); opacity: 0.8; }
.tl-track { position: relative; height: 12px; align-self: center; }
.tl-bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.tl-bar.is-live { background: var(--crimson); }
.tl-bar.is-done { background: var(--line); }
.tl-bar.is-future { border: 1.5px solid var(--muted); }
/* A library's late hours — open, but only to a Brown ID — are hatched rather than solid. */
.tl-bar.is-access { border: 1.5px solid var(--muted); background: repeating-linear-gradient(135deg, var(--muted) 0 1.5px, transparent 1.5px 5px); opacity: 0.85; }
.tl-bar.is-access.is-live { border-color: var(--crimson); background: repeating-linear-gradient(135deg, var(--crimson) 0 2px, transparent 2px 5px); opacity: 1; }
.tl-bar.is-access.is-done { border: 1.5px dashed var(--line); background: none; }
.tl-skel { display: grid; grid-template-columns: var(--namecol) minmax(0, 1fr); gap: 0 var(--tl-gap); align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.tl-skel i {
  display: block;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--line) 25%, transparent 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* "Now": every tab in brief — a count, then each place by name in its live colour */
.overview { margin-top: 14px; margin-bottom: 14px; }
.ov-cat { border-top: 1px solid var(--line); padding: 10px 0 12px; }
.ov-head { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.ov-head h2 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; }
.ov-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-count b { color: var(--crimson); font-weight: 700; }
.ov-count b.is-none { color: inherit; font-weight: inherit; }
.ov-head i {
  width: 7px;
  height: 7px;
  margin-left: auto;
  align-self: center;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}
.ov-head:hover i { border-color: var(--crimson); transform: translateX(3px) rotate(-45deg); }
.ov-places { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 8px; }
.ov-place {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ov-place i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; align-self: center; }
.ov-place small { font-size: 11.5px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.ov-place small:empty { display: none; }
.ov-place.is-open i, .ov-place.is-closing i { background: var(--crimson); border-color: var(--crimson); }
.ov-place.is-closing i { animation: breathe 1.6s ease-in-out infinite; }
.ov-place.is-soon i { background: var(--amber); border-color: var(--amber); }
.ov-place.is-closed { color: var(--muted); font-weight: 500; }
.ov-place:hover, .ov-place.is-peek { border-color: var(--ink); color: var(--ink); background: rgba(184, 16, 42, 0.06); }
.ov-wait { margin: 8px 0 0; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--muted); }
.ov-events { margin-top: 6px; }
.ov-events .ag-row:first-child { border-top: 0; }

/* "Events": an agenda, a day at a time */
.agenda { margin-top: 12px; margin-bottom: 14px; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters:empty { display: none; }
.filter {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ag-day h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 6px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ag-day h2 small { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ag-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: baseline;
  padding: 8px;
  margin: 0 -8px;
  border-top: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.ag-day h2 + .ag-row { border-top: 0; }
.ag-row:hover, .ag-row.is-peek { background: rgba(184, 16, 42, 0.08); color: inherit; }
.ag-time { font-variant-numeric: tabular-nums; }
.ag-time b { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ag-time small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ag-row.is-live:not(.is-allday) .ag-time b { color: var(--crimson); }
.ag-row.is-allday .ag-time b { color: var(--muted); font-weight: 500; }
.ag-row.is-soon .ag-time b { color: var(--amber); }
.ag-main { min-width: 0; }
.ag-title { display: block; font-family: var(--serif); font-size: 15.5px; line-height: 1.25; text-wrap: pretty; }
.ag-main small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-main small:empty { display: none; }
.ag-flags { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.flag {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 7px;
}
.flag.is-food { color: var(--crimson); border-color: color-mix(in srgb, var(--crimson) 40%, transparent); }
.drawer-list .ag-day:first-child h2 { margin-top: 12px; }

/* a place */
.kicker { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.hall-name { font-weight: 700; font-size: 34px; line-height: 0.98; letter-spacing: -0.03em; margin: 8px 0 0; text-wrap: balance; }
.hall-sub { font-family: var(--serif); font-size: 15px; color: var(--muted); margin: 10px 0 0; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.pill.is-open, .pill.is-closing { color: var(--crimson); border-color: color-mix(in srgb, var(--crimson) 40%, transparent); }
.pill.is-open i, .pill.is-closing i { background: var(--crimson); }
.pill.is-closing i { animation: breathe 1.6s ease-in-out infinite; }
.pill.is-soon { color: var(--amber); }
.pill.is-soon i { background: var(--amber); }
.sentence { font-family: var(--serif); font-size: 18.5px; line-height: 1.32; margin: 16px 0 0; text-wrap: pretty; }
.sentence:empty { display: none; }
.progress { margin-top: 14px; height: 2px; background: var(--line); }
.progress i { display: block; height: 100%; background: var(--ink); transition: width 1s linear; }
.progress.is-closing i { background: var(--crimson); }
.progress-text { margin: 7px 0 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-text:empty { display: none; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.tabs:empty { display: none; }
.meal {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  padding: 6px 12px 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.meal:hover { border-color: var(--ink); color: var(--ink); }
.meal[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.meal-mark { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.meal.is-live .meal-mark { background: var(--crimson); border-color: var(--crimson); }
.meal-range { font-variant-numeric: tabular-nums; font-size: 11.5px; opacity: 0.75; }

.menu { margin-top: 20px; }
.menu-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.menu-head h3 { margin: 0; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.menu-count { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.menu-note { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--muted); }
.stations { column-width: 185px; column-gap: 24px; margin-top: 16px; }
.station { break-inside: avoid; margin-bottom: 20px; }
.station.is-off { opacity: 0.42; }
.station h3 {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.station h3 small { font-weight: 400; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.station ul { list-style: none; margin: 0; padding: 0; font-family: var(--serif); font-size: 15px; line-height: 1.32; }
.station li { padding: 3px 0; border-top: 1px solid var(--line); }
.badge { margin-left: 6px; }
.badge.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 0.1em; }
.badge.v { background: var(--crimson); }
.badge.vg { border: 1.5px solid var(--ink); }
.badge.letter { font-family: var(--sans); font-size: 10.5px; font-weight: 600; color: var(--muted); }
/* The card leads with the mains; the full station-by-station menu is folded underneath and
   unfolds in place, so the toggle never rebuilds the DOM. */
.mains { list-style: none; margin: 12px 0 0; padding: 0; }
.mains li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.3;
}
.mains li span { text-wrap: pretty; }
.mains li small {
  flex: none;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.expand {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 11px 2px 11px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}
.expand:hover { color: var(--crimson); }
.expand i {
  width: 8px;
  height: 8px;
  margin: -4px 4px 0 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.is-expanded .expand i { transform: rotate(-135deg); margin-top: 4px; }
.is-expanded .expand { border-bottom-color: transparent; }
.menu-full { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.menu-full-inner { min-height: 0; overflow: hidden; }
.is-expanded .menu-full { grid-template-rows: 1fr; }
.menu-full .stations { margin-top: 6px; }
.legend { margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; }
.legend > span { display: inline-flex; align-items: center; }
.legend .badge:first-child { margin-left: 0; margin-right: 6px; }
.legend b { font-weight: 600; color: var(--ink); margin-right: 5px; }
.legend em { font-family: var(--serif); }
.blank { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--muted); padding: 30px 0; text-align: center; margin: 0; }
.hours { margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.hours li span:last-child { font-variant-numeric: tabular-nums; }
.hours li.is-today { color: var(--ink); font-weight: 600; }
.hours-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); font-family: var(--serif); font-style: italic; text-wrap: pretty; }
.hours-note a { font-family: var(--sans); font-style: normal; font-weight: 600; white-space: nowrap; }
.hours li span:last-child { text-align: right; }

/* the end slide is empty — reaching it opens Explore — unless there is no map, when it carries the credits */
.card-end { width: min(100%, 560px); }
.card-end .credits { margin-top: 0; padding-top: 0; border-top: 0; }
.credits { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }

/* ---------- the closed slide ---------- */

/* Every place that is shut, a row each: its name, when it opens, and the hours in question.
   A row unfolds into the place's own card. Gold is the map's colour for these buildings. */
:root { --gold: #a87a08; }
@media (prefers-color-scheme: dark) { :root { --gold: #f0c04a; } }
.card-closed { width: min(100%, 520px); }
.card-closed .kicker { color: var(--gold); font-weight: 700; }
.closed-headline { font-weight: 700; font-size: 30px; line-height: 1.02; letter-spacing: -0.03em; margin: 8px 0 0; text-wrap: balance; }
.card-closed > .sentence { margin-top: 10px; font-size: 16.5px; color: var(--muted); }
.cl-list { margin-top: 16px; border-top: 1px solid var(--line); }
.cl-item { border-bottom: 1px solid var(--line); }
.cl-row {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 12px;
  grid-template-areas: 'dot name when fold' '. hours hours fold';
  align-items: baseline;
  column-gap: 12px;
  row-gap: 1px;
  padding: 9px 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.cl-row i { grid-area: dot; align-self: center; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--gold); }
.cl-row.is-soon i { background: var(--amber); border-color: var(--amber); }
.cl-row.is-open i, .cl-row.is-closing i { background: var(--crimson); border-color: var(--crimson); }
.cl-name { grid-area: name; font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-when { grid-area: when; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-row.is-soon .cl-when { color: var(--amber); }
.cl-row.is-open .cl-when, .cl-row.is-closing .cl-when { color: var(--crimson); }
.cl-hours { grid-area: hours; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-fold { grid-area: fold; align-self: center; width: 7px; height: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform 0.25s ease; }
.cl-row[aria-expanded="true"] .cl-fold { transform: translateY(2px) rotate(-135deg); }
.cl-row:hover, .cl-row.is-peek { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.cl-row:hover .cl-fold, .cl-row[aria-expanded="true"] .cl-fold { border-color: var(--ink); }
.cl-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Unfolded, a row is the head of the place's card: the name and the state are already said. */
.cl-detail { padding: 0 4px 16px 26px; }
.cl-detail .kicker, .cl-detail .hall-name, .cl-detail .pill { display: none; }
.cl-detail .hall-sub { margin-top: 2px; font-size: 14px; }
.cl-detail .sentence { margin-top: 10px; font-size: 16.5px; }
.cl-detail .tabs { margin-top: 14px; }
.cl-detail .menu { margin-top: 14px; }
.cl-note { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.cl-note i { flex: none; width: 14px; height: 10px; border-radius: 2px; border: 2px solid #f0b323; box-shadow: inset 0 0 0 1px #fff4d2; }
/* On the map the places this slide lists say when they open, in its gold. */
[data-view="closed"]:not(.is-explore) .tag:not(.is-dim, .is-focus) .tag-card { opacity: 1; border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
[data-view="closed"]:not(.is-explore) .tag:not(.is-dim, .is-focus) .tag-status { color: var(--gold); font-weight: 600; }
[data-view="closed"]:not(.is-explore) .tag:not(.is-dim) .tag-pin { border-color: #f0b323; }
.cl-detail .hours { margin-top: 0; }
/* The chips of the places this slide speaks for. */
.chip.is-among { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--ink); }

/* ---------- explore drawer ---------- */

.drawer {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  width: min(100%, 430px);
  z-index: 4;
  background: var(--card);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border-left: 1px solid var(--card-border);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 40px;
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.is-explore .drawer { transform: none; }
.is-explore.is-bare .drawer { transform: translateX(100%); }
.drawer-top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.drawer-list { margin-top: 14px; border-top: 1px solid var(--line); }
.dl-row {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.dl-row:hover { color: var(--crimson); }
.dl-row[aria-pressed="true"] { font-weight: 700; }
.dl-row i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted); }
.dl-row.is-open i, .dl-row.is-closing i { background: var(--crimson); border-color: var(--crimson); }
.dl-row.is-soon i { background: var(--amber); border-color: var(--amber); }
.dl-row.is-closed { opacity: 0.65; }
.dl-name { display: flex; flex-direction: column; min-width: 0; }
.dl-name small { font-size: 11.5px; color: var(--muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-dist { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.drawer-detail { margin-top: 22px; }
.drawer-detail .hall-name { font-size: 28px; }

/* ---------- narrow ---------- */

/* Too narrow for eight names beside a card: the chips fall back to dots, with the current place named beside them. */
@media (max-width: 1240px) {
  .chip.is-among i { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px color-mix(in srgb, var(--gold) 70%, transparent); }
  .clock { display: none; }
  .chips { gap: 7px; padding: 0 4px; }
  .chip { padding: 0; border: 0; }
  .chip span { display: none; }
  .chip i { width: 10px; height: 10px; }
  .chip.is-current, .chip.is-current:hover { background: none; }
  .chip.is-current i { transform: scale(1.45); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
  .dots-label { display: block; }
  .dots-label:empty { display: none; }
}
@media (max-width: 1040px) {
  .tl-ticks .is-tight { display: none; } /* 10 AM and 10 PM sit too close to the ends of a short lane */
  .tab { padding: 6px 9px; }
}
/* A short laptop screen: the board gives up its deck and its breathing room before it gives
   up a lane. */
@media (max-height: 820px) and (min-width: 761px) {
  .chapter-board { padding-top: calc(var(--header-h) + 10px); padding-bottom: 10px; }
  .card-board { padding-top: 16px; padding-bottom: 14px; }
  .card-board:not(.is-waiting) .deck { display: none; }
  .tl-row { padding-top: 5px; padding-bottom: 5px; }
}
@media (max-height: 660px) and (min-width: 761px) {
  .tl-foods { display: none; }
}

@media (max-width: 760px) {
  /* A phone's header is two rows: the name, then the tabs, which scroll sideways. */
  :root { --gutter: 14px; --header-h: 86px; }
  .top { flex-wrap: wrap; align-content: center; gap: 4px 12px; }
  .clock, .subnav { display: none; }
  .explore-btn { margin-left: auto; padding: 4px 11px; }
  .tabbar { order: 3; flex: 0 0 calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .tab { padding: 5px 9px; font-size: 13px; }
  /* Six tabs don't fit a phone: the row scrolls, and fades at the edge where there is more. */
  .tabbar { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); padding-right: 34px; }
  .tabbar.is-end { -webkit-mask-image: none; mask-image: none; }
  .ag-row { grid-template-columns: 74px minmax(0, 1fr); }
  .ag-flags { grid-column: 2; flex-direction: row; justify-content: flex-start; margin-top: 4px; }
  .ag-title { font-size: 15px; }
  /* A phone's slide is a sheet under the building: the card gets the lower two thirds, and
     what it can't fit scrolls inside it. The address and the tab wrap go, so the mains land
     above the fold. */
  .chapter { padding-top: 33vh; padding-top: 33svh; padding-bottom: 4vh; padding-bottom: 4svh; }
  /* The board is the point of a phone visit: all eight lanes must fit without scrolling the
     card, so it takes most of the screen and each lane is a single line over a thin track. */
  .chapter-board { padding-top: 25vh; padding-top: 25svh; padding-bottom: 2vh; padding-bottom: 2svh; }
  .card.card-board { padding: 14px 16px 12px; }
  .card-board .headline { font-size: 22px; margin-top: 5px; }
  .card-board .deck { font-size: 13.5px; line-height: 1.35; margin-top: 4px; }
  .tl-foods, .hint, .tl-axis { display: none; }
  .tl-loc { font-size: 14px; }
  .tl-loc i { top: 5px; }
  .tl-track { height: 5px; }
  .tl-bar { border-radius: 3px; }
  .tl-bar.is-future { border-width: 1px; }
  .tl-overlay { display: none; }
  .has-now .tl-track::after { content: ''; position: absolute; left: var(--now); top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
  .tl-lanes { margin-bottom: 10px; }
  /* In the strip above the board the map is a status light: pins in the halls' colours. The
     names are on the board right under it. */
  [data-view="hero"]:not(.is-explore):not(.is-bare) .tag:not(.is-peek, .is-near) :is(.tag-card, .tag-stem) { display: none; }
  [data-view="hero"]:not(.is-explore):not(.is-bare) .tag.is-near:not(.is-peek) .tag-status { display: none; }
  [data-view="hero"]:not(.is-explore):not(.is-bare) .tag.is-near:not(.is-peek) .tag-card { padding: 3px 8px 4px; }
  .card-foot { padding-top: 10px; }
  .card { width: 100%; padding: 18px 20px 20px; border-radius: 16px; }
  .card-hall .hall-sub { display: none; }
  .card-hall .pill { margin-top: 10px; }
  .card-hall .sentence { margin-top: 12px; font-size: 16px; }
  .card-hall .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 16px -20px 0; padding: 0 20px; }
  .card-hall .tabs::-webkit-scrollbar { display: none; }
  .card-hall .meal { flex: none; }
  .card-hall .menu { margin-top: 14px; }
  /* This slide is about the map as much as the list: its sheet starts lower, so the strip can hold every place it names. */
  .chapter-closed { padding-top: 42vh; padding-top: 42svh; }
  .closed-headline { font-size: 24px; }
  .card-closed > .sentence { font-size: 15px; margin-top: 8px; }
  .cl-list { margin-top: 12px; }
  .cl-detail { padding-left: 4px; }
  /* The strip over the sheet holds the whole tab's closed places: names only, or they bury each other. */
  [data-view="closed"]:not(.is-explore):not(.is-bare) .tag:not(.is-peek, .is-focus) .tag-status { display: none; }
  .headline-small { font-size: 30px; }
  .hall-name { font-size: 30px; }
  .sentence { font-size: 17px; }
  .card-board { --namecol: 0px; --tl-gap: 0px; }
  .tl-row, .tl-skel, .tl-axis, .tl-overlay { grid-template-columns: minmax(0, 1fr); }
  .tl-axis { height: auto; row-gap: 6px; }
  .tl-ticks { height: 16px; }
  .tl-row { row-gap: 5px; padding: 7px 8px 8px; }
  .tl-overlay > span:first-child, .tl-axis > span:first-child { display: none; }
  .stations { column-width: auto; column-count: 1; }
  /* Eight full tags will not fit on a phone: closed halls keep just their name. */
  .tag-foods, .tag.is-closed .tag-status { display: none; }
  .tag-card { max-width: 170px; padding: 5px 8px 6px; }
  .tag b { font-size: 12px; }
  .tag-stem { height: 16px; }
  .drawer {
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 54vh;
    border-left: 0;
    border-top: 1px solid var(--card-border);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    padding: 16px 18px 30px;
  }
  .is-explore.is-bare .drawer { transform: translateY(100%); }
}

/* A short phone: give the board the map's strip too, and drop the deck. */
@media (max-width: 760px) and (max-height: 740px) {
  .chapter-board { padding-top: calc(var(--header-h) + 8px); }
  .card-board:not(.is-waiting) .deck { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live-dot, .tl-skel i, .hint-scroll::after, .pill i, .chip i, .tl-loc i, .ov-place i { animation: none; }
  .progress i, .card, .drawer, .menu-full, .expand i, .ov-head i, .cl-fold { transition: none; }
}