/*
 * Columbia Vibes: the lineup poster look (docs/design/round4/round4.html, approved 11-02), in look A,
 * Flood, from the 11-03 design pass: the day's color floods the top of every page edge to edge and
 * comes back as the weekend band at the bottom, with cool white between. The day headings print on
 * the tilted labels from look B, Sticker Wall (Matt, 11-03). The beige paper is gone everywhere.
 *
 * The server sets <html data-theme="day|night" data-accent="cobalt|pink"> from Columbia's sunset
 * and the Eastern day of the week (worker/src/layout.ts). Every device follows it, whatever its own
 * light or dark setting (Matt, 11-03); the accent always follows the day of the week.
 * Every color pair here passes WCAG: the design pass checked 172 text and edge pairs across day,
 * night, and both Wednesday looks with 0 failures, lowest text pair 4.74:1.
 */

/* ---------------------------------------------------------------- Fonts (OFL, see fonts/README.txt) */

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url("/fonts/big-shoulders-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url("/fonts/big-shoulders-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- Color tokens */

/* Day look with the everyday cobalt accent: the default, and what data-theme="day" means. */
:root {
  color-scheme: light;
  --paper: #F3F5FA;
  --tile: #FFFFFF;
  --line: #D3D8E5;
  --ink: #0D1022;
  --ink-2: #4A5068;
  --spot: #2340FF;
  --on-spot: #FFFFFF;
  /* The daily pick prints in reverse. */
  --pick-bg: #0D1022;
  --pick-ink: #FFFFFF;
  --pick-ink-2: #AEB5CC;
  --pick-spot: #5A82FF;
  /* The masthead and weekend bands: the day's color, edge to edge, in every theme. */
  --band: #2340FF;
  --on-band: #FFFFFF;
  --band-ink-2: #DCE2FF;
  /* The hard shadow under a day heading's tilted label. */
  --label-shadow: #0D1022;
}

/* Night look, after sunset in Columbia: a cool blue-black, never the old warm brown. */
:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #080A14;
  --tile: #131729;
  --line: #2B3250;
  --ink: #F2F4FA;
  --ink-2: #AAB1C8;
  --spot: #5A82FF;
  --on-spot: #080A14;
  --pick-bg: #F2F4FA;
  --pick-ink: #0D1022;
  --pick-ink-2: #4A5068;
  --pick-spot: #2340FF;
  --band: #2340FF;
  --label-shadow: #3C4470;
}

/* Pink Wednesdays: the accent, the bands, and the logo turn pink, by day and by night. */
:root[data-accent="pink"] {
  --spot: #D4006F;
  --on-spot: #FFFFFF;
  --pick-spot: #FF5FAE;
  --band: #D4006F;
  /* Pale pink on the pink band measured 4.26:1; white measures 5.21:1. */
  --band-ink-2: #FFFFFF;
}

:root[data-theme="night"][data-accent="pink"] {
  --spot: #FF5FAE;
  --on-spot: #080A14;
  --pick-spot: #D4006F;
  --band: #D4006F;
}

/* ---------------------------------------------------------------- Base */

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

html,
body {
  margin: 0;
}

/* Clipped at the root as well as the body: on a phone, the body alone still lets anything a few pixels
 * too wide widen the page, and the whole site slides sideways under a thumb (Matt, 11-03). */
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--spot);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Read by screen readers, never drawn. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- Page shell */

/* One column measure everywhere: 720 on a phone, 1120 from 960 wide, 1280 from 1440 wide (the
 * design pass: 295px tiles at 1440 and up, and no wider, since past that a tile is mostly empty). */
:root {
  --wrap: 720px;
  --gut: 16px;
}

@media (min-width: 960px) {
  :root {
    --wrap: 1120px;
    --gut: 32px;
  }
}

@media (min-width: 1440px) {
  :root {
    --wrap: 1280px;
  }
}

.mh-in,
main,
.wk-in {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* The masthead: the day's color edge to edge, the logo and everything under it on the band. Inside
 * it the accent and the paper trade places. */
.masthead {
  background: var(--band);
  color: var(--on-band);
  padding-bottom: 22px;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-top: 14px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 8px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.site-nav svg {
  flex: none;
}

/* On the narrowest phones the logo and the word Search do not fit side by side; the word stays for
 * screen readers and the magnifier stays on screen. */
@media (max-width: 359px) {
  .site-nav a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--spot);
}

.masthead .site-nav a {
  color: var(--on-band);
}

.masthead .site-nav a:hover {
  color: var(--on-band);
  text-decoration: underline;
}

.masthead :focus-visible,
.masthead .qbar:focus-within {
  outline-color: #FFFFFF;
}

main {
  padding-top: 4px;
  padding-bottom: 20px;
}

/* The weekend band closes the page, so nothing sits between it and the footer. */
main:has(> .weekend:last-child) {
  padding-bottom: 0;
}

/* One line on what the site is, and the four ways in. */
/* Its top rule is drawn as a background so it spans the content, not the gutters (it ran 32px wider
 * than the content on desktop). */
.site-footer {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px var(--gut) 32px;
  background: linear-gradient(var(--ink), var(--ink)) center top / calc(100% - 2 * var(--gut)) 2px no-repeat;
  font-size: 15px;
  color: var(--ink-2);
}

/* A page that ends on the weekend band needs no rule above the footer: the band's edge is one
 * (once-over 11-03). Pages that end on paper keep it. */
main:has(> .weekend:last-child) + .site-footer {
  background: none;
  padding-top: 28px;
}

.site-footer p {
  margin: 0 0 6px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 18px;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- Logos (worker/src/logo.ts) */

/* The logo is a link home: mark (when the logo has one) beside the name, in the accent. */
.lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--spot);
}

.lockup .mark {
  flex: none;
}

/* On the band the logo prints white: a white sticker with the V in the band's color. */
.masthead .lockup {
  color: var(--on-band);
}

.masthead .mark path:nth-of-type(1) {
  fill: #FFFFFF;
  stroke: #FFFFFF;
}

.masthead .mark path:nth-of-type(2) {
  fill: var(--band);
}

.masthead .mark path:nth-of-type(4) {
  fill: var(--band-ink-2);
}

.wordmark {
  line-height: 1;
  white-space: nowrap;
}

/* Eyes first and Sticker V: the name in poster capitals. */
.wm-caps {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: 30px;
}

/* Headliner: COLUMBIA small and spread in ink over a big VIBES in the accent. */
.wm-head {
  display: inline-grid;
  font-family: "Big Shoulders Display", Impact, sans-serif;
  text-transform: uppercase;
}

.wm-head .sup {
  display: flex;
  justify-content: space-between;
  margin: 0 0.02em 2px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  color: var(--ink);
}

.wm-head .sup i {
  font-style: normal;
}

.wm-head .main {
  padding-bottom: 3px;
  font-weight: 900;
  font-size: 50px;
  line-height: 0.82;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------- Home page (worker/src/pages/home.ts) */

.dateline {
  font-size: 15px;
  font-weight: 700;
  color: var(--band-ink-2);
  margin: 6px 0 12px;
}

/* The question bar: a plain search form whose example shows what to type (look review finding 1). */
/* On the band in every theme, so its colors are fixed: white field, ink text. */
.qbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 2px 2px 2px 16px;
  background: #FFFFFF;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  color: #4A5068;
}

.qbar svg {
  flex: none;
}

.qbar-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  background: transparent;
  color: #0D1022;
  font: inherit;
  font-size: 16px;
}

.qbar-input::placeholder {
  color: #4A5068;
  opacity: 1;
}

.qbar-input:focus {
  outline: none;
}

.qbar:focus-within {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

.qbar-go {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0D1022;
  color: #FFFFFF;
}

/* The chip row: white outlines on the band, one row that scrolls sideways on a phone. Filters opens
 * a tool while the rest go straight to a list, so it is solid ink; Tonight and This weekend carry
 * their counts. */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -16px 4px;
  padding: 2px 40px 6px 16px;
  /* The row fades out at the right edge on a phone, so it reads as more to swipe (once-over 11-03). */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid #FFFFFF;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  color: #FFFFFF;
}

.chip:hover {
  background: #FFFFFF;
  color: var(--band);
}

.chip .n {
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--band);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Its edge stays white: ink against the cobalt band measures 2.92:1, under the 3:1 a control's
 * edge needs, and white measures 6.46:1. */
.chip-filters,
.chip-filters:hover {
  background: #0D1022;
  color: #FFFFFF;
}

.day {
  margin-top: 32px;
}

.day:first-of-type {
  margin-top: 26px;
}

/* No rule under the heading: the tilted label is the divider, with room under it (Matt and the
 * designer, once-over 11-03). */
.dayhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 20px;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Every day heading prints on a tilted label in the day's color, look B's sticker (Matt, 11-03).
 * The label adds padding, so on a phone the name steps down to keep the date and count on one line. */
.dayhead h2 {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 34px;
  line-height: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  padding: 6px 12px 2px;
  border-radius: 8px;
  background: var(--spot);
  color: var(--on-spot);
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--label-shadow);
}

.dayhead .d {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}

.dayhead .count {
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.day-empty {
  font-size: 15px;
  color: var(--ink-2);
  margin: 12px 2px;
}

/* The daily pick, printed in reverse. Its photo shows only when the listing has one; a broken
 * photo link collapses to nothing rather than leaving a placeholder box. */
.pick {
  display: block;
  position: relative;
  background: var(--pick-bg);
  color: var(--pick-ink);
  border-radius: 18px;
  margin-bottom: 8px;
  overflow: hidden;
}

/* A narrow photo sits on the card itself, never between two bars (look review finding 3). */
.pick-photo-frame {
  background: var(--pick-bg);
}

/* Never stretched past its own width: some sources' photos are small. */
.pick-photo {
  display: block;
  max-width: 100%;
  max-height: 240px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.pick-in {
  padding: 14px 16px 16px;
}

.plabel {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pick-spot);
}

.ptime {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 72px;
  line-height: 0.85;
  color: var(--pick-spot);
  margin: 8px 0 6px;
}

.ptime small,
.time small {
  font-size: 0.42em;
  margin-left: 3px;
}

.ptitle {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  overflow-wrap: anywhere;
}

.pmeta {
  font-size: 16px;
  font-weight: 600;
  color: var(--pick-ink-2);
  margin-top: 8px;
}

.why {
  font-size: 17px;
  font-weight: 700;
  margin: 6px 0 0;
}

/* Tiles: two across, time order. An odd last tile runs full width. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  min-height: 176px;
}

.tile .body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* "Kind of thing" is a small word, never a badge. */
.kind {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  min-height: 15px;
}

.time {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 48px;
  line-height: 0.9;
  color: var(--spot);
  margin: 8px 0 6px;
}

.tile.nokind .time {
  margin-top: 2px;
}

/* "All day" set as two words in poster capitals, not a huge ALL and a small day. */
.time.time-word {
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  padding-top: 8px;
}

.ptime.time-word {
  font-size: 52px;
  text-transform: uppercase;
}

.ltime.time-word {
  font-size: 64px;
  text-transform: uppercase;
}

.title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.22;
  margin: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.meta {
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-2);
  margin-top: auto;
  padding-top: 8px;
}

.facts {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 2px;
}

.body .title + .facts {
  margin-top: auto;
  padding-top: 8px;
}

.tile.wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  column-gap: 12px;
  min-height: 0;
}

.tile.wide .kind {
  grid-column: 1 / -1;
}

.tile.wide .time {
  margin: 6px 0 0;
}

.tile.wide .body {
  padding-top: 8px;
}

.tile.wide .meta {
  margin-top: 6px;
  padding-top: 0;
}

.tile.wide.nokind .time {
  margin-top: 0;
}

.tile.wide.nokind .body {
  padding-top: 2px;
}

/* The "+N more" teaser: a white card edged in the accent, the count big in the accent, three real
 * things it hides, and one filled button. */
.more-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 12px;
  margin: 12px 0 6px;
  padding: 14px 16px 16px;
  border: 2px solid var(--spot);
  border-radius: 18px;
  background: var(--tile);
  color: var(--ink);
}

.ms-count {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 60px;
  line-height: 0.85;
  letter-spacing: -0.01em;
  color: var(--spot);
}

.ms-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ms-head {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ms-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
}

.ms-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  text-decoration: none;
}

a.ms-item:hover {
  text-decoration: underline;
  text-decoration-color: var(--spot);
  text-underline-offset: 3px;
}

.ms-item b {
  font-weight: 800;
  color: var(--spot);
}

/* On a phone a long name gets two lines rather than a cut-off word (design check 11-03). */
@media (max-width: 599px) {
  /* A bigger tap target (once-over 11-03). A transparent border, not padding: the clamp clips at the
   * padding edge, so padding would show a sliver of the third line. */
  .ms-item {
    border-block: 6px solid transparent;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
  }
}

.ms-go {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--spot);
  color: var(--on-spot);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.ms-go:hover {
  filter: brightness(1.08);
}

/* The Regulars: a quiet labelled card that names the weekly classes and opens to the list. */
.fold {
  margin: 8px 0 0;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.fold summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}

.fold summary::-webkit-details-marker {
  display: none;
}

.fold-label {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spot);
}

.fold-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.fold-main b {
  font-size: 17px;
}

.fold-main span {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 2px;
}

.fold summary svg {
  flex: none;
}

.fold[open] summary svg {
  transform: rotate(180deg);
}

.fold-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.fold .fold-list {
  padding: 0 16px 8px;
}

.fold-item {
  display: flex;
  gap: 12px;
  padding: 10px 2px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}

.ftime {
  flex: none;
  width: 64px;
  font-weight: 700;
  color: var(--spot);
}

.ftitle {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  min-width: 0;
}

.fmeta {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 2px;
}

/* The This Weekend band: the masthead's color again, edge to edge, so the page opens and closes on
 * it; four real weekend things with their photos. */
.weekend {
  margin: 36px calc(50% - 50vw) 0;
  padding: 26px 0 30px;
  background: var(--band);
  color: #FFFFFF;
}

.weekend :focus-visible {
  outline-color: #FFFFFF;
}

.wk-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 14px;
}

.wk-head h2 {
  margin: 0;
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 52px;
  line-height: 0.88;
  text-transform: uppercase;
}

.wk-d {
  font-size: 16px;
  font-weight: 700;
  color: var(--band-ink-2);
}

.wk-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gut));
  padding: 4px var(--gut) 10px;
  scroll-padding-inline: var(--gut);
  scroll-snap-type: x mandatory;
}

.wk-grid::-webkit-scrollbar {
  display: none;
}

.wk-card {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  background: #FFFFFF;
  color: #0D1022;
}

.wk-photo {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #DCE2FF;
}

.wk-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wk-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 12px 14px 16px;
}

.wk-when {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4A5068;
}

.wk-when b {
  margin-left: 4px;
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 0;
  color: var(--band);
}

.wk-when small {
  margin-left: 2px;
  font-size: 0.5em;
}

.wk-title {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.wk-meta {
  margin-top: auto;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #4A5068;
}

.wk-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin-top: 14px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--band);
  font-size: 16px;
  font-weight: 800;
}

/* ---------------------------------------------------------------- Filters page (worker/src/pages/filters.ts) */

/* The mockup's filter sheet as a plain form: white card, poster heading, option pills. */
.sheet {
  margin-top: 10px;
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 8px;
}

.sheet-head h1 {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0;
}

.clear {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sheet-body {
  padding: 0 20px;
}

.fgroup {
  border: 0;
  margin: 0 0 14px;
  padding: 0;
  min-width: 0;
}

.fgroup legend {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 8px;
  padding: 0;
}

.fopts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Each option is a radio inside a pill; the radio itself is hidden but still takes focus. */
.fopt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.fopt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.fopt .c {
  font-weight: 600;
  color: var(--ink-2);
}

.fopt:has(input:checked) {
  background: var(--ink);
  color: var(--tile);
}

.fopt:has(input:checked) .c {
  color: var(--tile);
}

.fopt:has(input:focus-visible) {
  outline: 3px solid var(--spot);
  outline-offset: 2px;
}

/* A group default that would show nothing with the other choices kept: dimmed, still selectable.
 * Any other option at zero is left out of the page. */
.fopt.zero:not(:has(input:checked)) {
  border-style: dashed;
  border-color: var(--ink-2);
  color: var(--ink-2);
}

/* The submit button stays in reach while the form scrolls past. */
.sheet-foot {
  position: sticky;
  bottom: 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 24px 24px;
  background: var(--tile);
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border-radius: 999px;
  background: var(--spot);
  color: var(--on-spot);
  font-size: 16px;
  font-weight: 800;
}

.results {
  margin-top: 28px;
  scroll-margin-top: 12px;
}

.rhead {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 44px;
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.rsub {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0 0 4px;
}

.nowrap {
  white-space: nowrap;
}

/* The search count reads under the Find things button, with room to breathe (once-over 11-03). */
.ask + .rsub {
  margin-top: 12px;
}

.more-note {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
  padding: 14px 2px;
  border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------------- Listing page (worker/src/pages/listing.ts) */

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
}

/* Natural size up to the column width, never stretched (ruling R32): a small photo stays small. */
/* A dark frame centers the photo, so a small or tall one still sits in a clean box (once-over 11-03). */
.listing-photo-frame {
  display: flex;
  justify-content: center;
  background: #0D1022;
  border-radius: 12px;
  overflow: hidden;
  margin: 4px 0 14px;
}

.listing-photo {
  display: block;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
}

.poster {
  margin: 6px 0 14px;
}

.ltime {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 96px;
  line-height: 0.82;
  color: var(--spot);
  margin: 10px 0 8px;
}

.ltime small {
  font-size: 0.42em;
  margin-left: 3px;
}

.ltitle {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 44px;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  overflow-wrap: anywhere;
}

.lmeta {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 8px;
}

.rows {
  margin: 16px 0 6px;
  border-top: 1px solid var(--line);
}

.rows .row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.rows .ic {
  flex: none;
  color: var(--ink-2);
  padding-top: 2px;
}

.rows .lab {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.rows .val {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.rows .val span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 2px;
}

.btn-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  font-size: 15px;
  font-weight: 700;
  margin-top: 12px;
}

.desc {
  font-size: 15px;
  line-height: 1.5;
  margin: 16px 0 4px;
}

.desc p {
  margin: 0 0 10px;
  overflow-wrap: anywhere;
}

/* The ended and not-found pages: a heading and the two ways onward. */
.dead-end {
  margin-top: 24px;
}

.dead-end .rhead {
  margin-bottom: 18px;
}

/* The place and host names on a listing page link to their pages (ruling R34). */
.rows .val a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* An empty topic page's alternatives: what is booked further out, or the parent kind's things. */
.alt {
  margin-top: 18px;
}

.alt-head {
  font-family: "Big Shoulders Display", Impact, sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 4px;
}

/* ---------------------------------------------------------------- Place and provider pages (worker/src/pages/place.ts, provider.ts) */

.hub {
  margin-bottom: 8px;
}

.hub .rhead {
  margin-top: 6px;
  overflow-wrap: anywhere;
}

/* Google's embedded map of the venue, under the Directions button (Matt, 11-03). The full width
 * of the column at a fixed shape, so nothing moves when it loads, rounded like the photo frame. */
.place-map {
  margin-top: 14px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--line);
}

.place-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------- About, Contact, Privacy, and Terms (worker/src/pages/sitePages.ts) */

.site-page {
  max-width: 640px;
  font-size: 16px;
  line-height: 1.55;
}

.site-page .rhead {
  margin-top: 6px;
}

.site-page h2 {
  font-size: 17px;
  font-weight: 800;
  margin: 22px 0 4px;
}

.site-page p {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

.site-page .rsub {
  margin-bottom: 14px;
}

.site-page ul {
  margin: 0 0 12px;
  padding-left: 22px;
}

.site-page li {
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.site-page p a,
.site-page li a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.site-page-lead {
  font-size: 18px;
  margin-top: 12px;
}

/* ---------------------------------------------------------------- Ask page (worker/src/pages/ask.ts) */

.ask {
  margin-top: 14px;
}

.ask-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ask-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ask-input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  /* 7.30:1 by day and 9.24:1 by night against the paper: the field's edge must reach 3:1. */
  border: 1.5px solid var(--ink-2);
  border-radius: 999px;
  background: var(--tile);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.ask-go {
  height: 52px;
  border: 0;
  border-radius: 999px;
  background: var(--spot);
  color: var(--on-spot);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.ask-examples {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.ask-examples .rsub {
  flex-basis: 100%;
  margin: 0;
}

.ask-example {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tile);
  font-size: 14px;
  font-weight: 700;
}

/* ---------------------------------------------------------------- Desktop (look review finding 3) */

/* A wide window gets a wider column, four tiles across (eight a day fill two rows), the pick split
 * beside its photo, and type that grows past phone sizes (design pass 11-03), rather than a phone
 * page floating in empty paper. */
@media (min-width: 960px) {
  .masthead {
    padding-bottom: 30px;
  }

  .masthead .dateline {
    font-size: 17px;
  }

  .qbar {
    max-width: 640px;
  }

  .chips {
    margin-inline: 0;
    padding-inline: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Phone-width controls keep a phone-like width rather than stretch across the column. */
  .ask,
  .dead-end {
    max-width: 640px;
  }

  .hub > .btn-2 {
    max-width: 400px;
  }

  /* A wide column gets a wide, shorter map rather than one taller than the screen. */
  .place-map {
    aspect-ratio: 21 / 9;
  }

  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .tile {
    padding: 16px;
    min-height: 200px;
  }

  .tile.wide {
    grid-column: span 2;
  }

  .kind {
    font-size: 13px;
  }

  .time {
    font-size: 56px;
  }

  .time.time-word {
    font-size: 40px;
    padding-top: 10px;
  }

  .title {
    font-size: 18px;
  }

  .meta,
  .facts {
    font-size: 15px;
  }

  .pick:has(.pick-photo-frame) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .pick-photo {
    max-height: 360px;
  }

  .ptime {
    font-size: 104px;
  }

  .ptime.time-word {
    font-size: 72px;
  }

  .ptitle {
    font-size: 48px;
  }

  .why {
    font-size: 20px;
  }

  .day {
    margin-top: 44px;
  }

  .dayhead {
    gap: 14px;
    margin-bottom: 28px;
  }

  .dayhead h2 {
    font-size: 56px;
  }

  .more-strip {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 24px;
    padding: 18px 22px;
  }

  .ms-count {
    font-size: 80px;
  }

  .ms-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 22px;
    font-size: 16px;
  }

  .ms-go {
    grid-column: auto;
  }

  .wk-head h2 {
    font-size: 72px;
  }

  .wk-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .wk-all {
    display: inline-flex;
    padding: 0 28px;
  }

  /* The listing page in two columns: photo and poster on the left; the sign-up button, the When,
   * Where, and Cost rows, and directions on the right, capped near 400px, instead of a page-wide
   * button under a small photo. The listing's own words run under the left column. */
  .listing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    column-gap: 48px;
    align-items: start;
  }

  .listing > .crumb {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .l-lead {
    grid-column: 1;
    grid-row: 2;
  }

  .l-facts {
    grid-column: 2;
    grid-row: 2 / span 2;
    padding-top: 4px;
  }

  .listing > .desc {
    grid-column: 1;
    grid-row: 3;
  }
}

/* From 1440 wide the column reaches 1280px, and the biggest type grows with it. */
@media (min-width: 1440px) {
  .dayhead h2 {
    font-size: 64px;
  }

  .ptime {
    font-size: 120px;
  }

  .ptitle {
    font-size: 56px;
  }
}