/* ==========================================================================
   Terrible Love Coffee — concept
   Every colour here was sampled out of their own photographs rather than
   picked: the field is the green of their front door, the pink is the heart
   painted on it, the sky is the hand-painted sign. A coffee shop page
   defaults to cream, and cream would have been somebody else's shop.
   ========================================================================== */
:root {
  --field: #2E3325;   /* the door, deepened enough to set type on */
  --field-2: #262A1F;
  --sage: #727A63;    /* the door's actual paint, for fills and rules */
  /* The paint colour itself only reaches 2.9:1 on the field, so anything set
     in it was failing. Same hue and saturation, lifted until it clears 4.5. */
  --sage-ink: #949C85;
  --bone: #EDE7DA;
  --bone-dim: #B9B7A5;
  --pink: #F8AACA;    /* their wordmark, exactly */
  --sky: #CBEAFF;     /* the sky behind the painted sign */
  --navy: #273C6E;    /* the sign's own lettering */
  --ink: #161412;
  --rule: rgba(237, 231, 218, 0.16);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;

  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --max: 76rem;
  --section: clamp(4.5rem, 11vh, 8rem);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--field); color: var(--bone);
  font-family: var(--body); font-size: clamp(1rem, 0.97rem + 0.16vw, 1.08rem);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* height:auto matters more than it looks. Every img carries width/height
   attributes so the space is reserved before the file lands, but those map to
   a used height, and aspect-ratio only applies when one axis is auto - so
   every crop below was silently ignored and the photos rendered at full
   height. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 0.98;
  letter-spacing: -0.025em; margin: 0; }

.skip {
  position: absolute; top: 0; left: 0; z-index: 99;
  background: var(--pink); color: var(--ink); padding: 0.7rem 1.1rem;
  font-family: var(--mono); font-size: 0.85rem; min-height: 34px;
  /* Clipped, not parked off-screen: -9999px still counts as part of the
     document box, which is why it showed up as the one element overflowing
     on every width. */
  clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden;
  white-space: nowrap;
}
.skip:focus {
  clip-path: none; width: auto; height: auto; overflow: visible;
  top: 0.5rem; left: 0.5rem;
}
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* The label that runs the page. It is a tape label: mono, small caps, wide,
   with a rule running off it, so every section is announced the way a side
   of a cassette is. ---------------------------------------------------- */
.tape-label {
  font-family: var(--mono); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink);
  margin: 0 0 0.9rem; display: flex; align-items: center; gap: 0.85rem;
}
.tape-label::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

/* Header ------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: clamp(0.8rem, 3vw, 2rem);
  padding: 0.75rem var(--gutter);
  background: rgba(46, 51, 37, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
/* flex:none, or the bar squeezes the mark to nothing before it wraps the
   links: on a phone the logo had simply vanished. */
.nav-mark {
  flex: none; display: grid; place-items: center;
  min-width: 34px; min-height: 34px;
}
.nav-mark img { width: 28px; height: auto; }
.nav-links { display: flex; gap: clamp(0.7rem, 2.2vw, 1.6rem); margin-right: auto; }
.nav-links a {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--bone-dim);
  /* 34px tall for a thumb, without changing where the text sits. */
  padding: 0.62rem 0; transition: color .2s;
}
.nav-links a:hover { color: var(--pink); }

/* On a phone the four section links wrapped onto a second line and pushed
   the status off the right edge. This is one page and people scroll it, so
   the bar keeps the two things that earn their space: the mark, and whether
   the shop is open. */
@media (max-width: 46rem) {
  .nav-links a:not(:first-child) { display: none; }
  .nav { gap: 0.9rem; }
  .status { font-size: 0.7rem; letter-spacing: 0.04em; }
  .scroll-cue { display: none; }
}

.status[hidden] { display: none; }
.status {
  display: flex; align-items: center; gap: 0.5rem; margin: 0;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--bone-dim); white-space: nowrap;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--bone-dim);
  flex: none;
}
.status.is-open .status-dot { background: var(--sky); box-shadow: 0 0 0 3px rgba(203,234,255,0.18); }
.status.is-open { color: var(--sky); }

/* Hero -------------------------------------------------------------------- */
.hero { position: relative; min-height: 92svh; display: grid; align-items: end; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 32% 50%; z-index: 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--field) 2%, rgba(46,51,37,0.60) 34%, rgba(46,51,37,0) 72%),
    linear-gradient(to right, rgba(46,51,37,0.62) 0%, rgba(46,51,37,0.12) 52%, rgba(46,51,37,0) 78%);
}
.hero-body {
  position: relative; z-index: 2;
  padding: 0 var(--gutter) clamp(3rem, 8vh, 5rem);
  width: min(100%, var(--max)); margin-inline: auto;
}
.hero-title {
  font-size: clamp(3.6rem, 15vw, 11rem); margin: 0 0 1.1rem;
  display: grid; text-transform: none;
}
.hero-title .l2 { color: var(--pink); margin-left: clamp(1.5rem, 7vw, 6rem); }
.heart { font-size: 0.45em; vertical-align: 0.55em; margin-left: 0.1em; }
.hero-lede {
  max-width: 34ch; font-size: clamp(1.02rem, 1vw + 0.8rem, 1.3rem);
  color: var(--bone); margin: 0 0 1.2rem;
}
.hero-meta { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; margin: 0; }
.hero-meta a {
  color: var(--sky); text-underline-offset: 4px;
  display: inline-block; padding-block: 0.45rem;
}
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: clamp(3rem, 8vh, 5rem); z-index: 2;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--bone-dim);
  writing-mode: vertical-rl; margin: 0;
}

/* Section furniture ------------------------------------------------------- */
.side, .counter, .partners, .find {
  padding: var(--section) var(--gutter);
  width: min(100%, var(--max)); margin-inline: auto;
}
.side-head { margin-bottom: clamp(2rem, 5vh, 3.2rem); }
.side-head h2 { font-size: clamp(2.1rem, 6vw, 4rem); }
.side-note { color: var(--bone-dim); max-width: 46ch; margin: 0.7rem 0 0; }

/* The signature: the menu as a tracklist -----------------------------------
   The room is a tape deck and the shop is named after a song, so the menu is
   a tracklist rather than a grid of cards. The numbering is the one kind
   that is honest, because a tracklist genuinely is a sequence. ------------ */
.tracks { display: grid; gap: clamp(2.2rem, 5vh, 3.4rem); }
@media (min-width: 62rem) {
  .tracks { grid-template-columns: 1fr 1fr; gap: 3rem clamp(3rem, 6vw, 5rem); align-items: start; }
}
.track-col { display: grid; gap: clamp(2.2rem, 5vh, 3.4rem); align-content: start; }
.track-h {
  font-size: 1.06rem; font-family: var(--mono); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone);
  padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); margin-bottom: 0.3rem;
}
.track-h em {
  font-style: normal; color: var(--bone-dim); letter-spacing: 0.1em;
  font-size: 0.78em; text-transform: none;
}
.track-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.track-list li {
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline;
  gap: 0 0.6rem; padding: 0.62rem 0; border-bottom: 1px solid rgba(237,231,218,0.07);
}
.track-list .n {
  font-family: var(--mono); font-size: 0.74rem; color: var(--sage-ink);
  letter-spacing: 0.06em;
}
.track-list .t { font-size: 1.06rem; font-weight: 500; }
.track-list .d {
  grid-column: 2; font-size: 0.86rem; color: var(--bone-dim);
  line-height: 1.45; margin-top: 0.15rem;
}
.track-foot {
  font-family: var(--mono); font-size: 0.74rem; color: var(--bone-dim);
  letter-spacing: 0.04em; margin: 0.9rem 0 0; line-height: 1.6;
}

/* On the counter ---------------------------------------------------------- */
.counter { background: var(--navy); width: 100%; max-width: none; }
.counter > * { width: min(100%, var(--max)); margin-inline: auto; }
.counter-grid {
  list-style: none; margin-inline: auto; margin-block: 0; padding: 0;
  display: grid; gap: clamp(1.6rem, 4vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.counter-grid img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px;
  margin-bottom: 1rem;
}
.counter-grid h3 { font-size: 1.3rem; margin-bottom: 0.45rem; }
.counter-grid p { color: var(--bone-dim); font-size: 0.92rem; margin: 0; }
.flag {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink); background: var(--pink);
  padding: 0.22rem 0.5rem; border-radius: 2px; vertical-align: 0.28em;
  font-weight: 700;
}

/* Who is in the hopper ---------------------------------------------------
   Written, not photographed. Their roasters rotate and the site they have
   still names the one before last, which is exactly what a wall of bag
   photographs does to you. --------------------------------------------- */
.pour-list {
  list-style: none; margin-inline: auto; margin-block: 0; padding: 0;
  display: grid; gap: clamp(1.4rem, 3.5vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
}
.pour-list li { border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.pour-way {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pink); margin: 0 0 0.55rem;
  display: flex; justify-content: space-between; gap: 0.6rem;
}
.pour-price { color: var(--sky); }
.pour-list h3 { font-size: 1.25rem; margin-bottom: 0.85rem; }
.pour-list h3 em {
  display: block; font-style: normal; font-weight: 500;
  font-size: 0.74em; color: var(--bone-dim); margin-top: 0.2rem;
  letter-spacing: 0;
}
.pour-list dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: 0.3rem 0.9rem; font-size: 0.88rem;
}
.pour-list dt {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--sage-ink); padding-top: 0.12rem;
}
.pour-list dd { margin: 0; color: var(--bone-dim); }
.partners-top { display: grid; gap: 1.5rem; }
@media (min-width: 56rem) {
  .partners-top { grid-template-columns: 1fr auto; align-items: end; }
  .partners-top .side-head { margin-bottom: 0; }
}
.pour-bag {
  margin: 0 0 clamp(2rem, 5vh, 3.2rem); display: flex; align-items: center;
  gap: 1.1rem;
}
.pour-bag img { width: 5.5rem; flex: none; }
.pour-bag figcaption {
  font-family: var(--mono); font-size: 0.78rem; color: var(--sage-ink);
  max-width: 9rem; line-height: 1.5;
}

/* Side B, the room -------------------------------------------------------- */
.room-lay { display: grid; gap: clamp(1.4rem, 3.5vw, 2.2rem); }
@media (min-width: 54rem) {
  .room-lay { grid-template-columns: 0.85fr 1fr; align-items: start; }
  .room-tall { grid-row: span 2; }
}
.room-lay figure { margin: 0; }
.room-tall img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 2px;
  /* the near edge of the rack is out of focus; the readable spines are to
     the right of centre, so the crop is pulled across to find them */
  object-position: 72% 50%;
}
.room-wide img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.room-lay figcaption {
  font-family: var(--mono); font-size: 0.72rem; color: var(--sage-ink);
  margin-top: 0.7rem; line-height: 1.55;
}
.room-copy .big {
  font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--bone); margin: 0 0 1.1rem;
}
.room-copy p { color: var(--bone-dim); max-width: 44ch; }
.btn {
  display: inline-block; margin-top: 0.9rem;
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; font-weight: 700;
  color: var(--ink); background: var(--pink);
  padding: 0.85rem 1.5rem; border-radius: 2px;
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--sky); transform: translateY(-2px); }

/* Find us ----------------------------------------------------------------- */
.find-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 54rem) { .find-grid { grid-template-columns: 1.1fr 0.9fr; } }
@media (min-width: 74rem) { .find-grid { grid-template-columns: 1fr auto auto; } }
.find h2 { font-size: clamp(2.2rem, 6vw, 3.6rem); margin-bottom: 0.6rem; }
.addr { color: var(--bone-dim); margin: 0 0 1.1rem; }
.status-big { font-size: 0.8rem; margin-bottom: 1.2rem; }
.find-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0;
  font-family: var(--mono); font-size: 0.78rem; }
.find-links a {
  color: var(--sky); text-underline-offset: 4px;
  display: inline-block; padding-block: 0.45rem;
}

.hours { border-collapse: collapse; font-size: 0.9rem; min-width: 15rem; }
.hours caption { text-align: left; }
.hours th, .hours td { padding: 0.5rem 0; text-align: left; font-weight: 400; }
.hours th { padding-right: 2.5rem; color: var(--bone-dim); }
.hours td { font-family: var(--mono); font-size: 0.82rem; }
.hours tr { border-bottom: 1px solid rgba(237,231,218,0.07); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--pink); }
.find-sign {
  width: 100%; max-width: 20rem; aspect-ratio: 3 / 4; object-fit: cover;
  object-position: 56% 44%; border-radius: 2px;
}

/* Footer ------------------------------------------------------------------ */
.foot {
  border-top: 1px solid var(--rule); padding: clamp(3rem, 7vh, 4.5rem) var(--gutter);
  text-align: center;
}
.foot img { width: min(72%, 26rem); margin: 0 auto 1.6rem; }
.foot p { font-family: var(--mono); font-size: 0.74rem; color: var(--bone-dim); margin: 0.4rem 0; }
.foot a { color: var(--sky); }
.foot-demo { color: var(--sage-ink); font-size: 0.74rem; }

/* Reveals. Transform and opacity only, so they cost nothing to run. ------- */
/* Hidden only when the document has said it is scripted. No script, no
   hiding: the page is fully readable without a line of JavaScript. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js.ready [data-reveal] { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Bites sits under Coffee in the left column, so it needs the gap a sibling
   group would have had from the column's own grid. */
.track-group-sub { margin-top: clamp(2.2rem, 5vh, 3.4rem); }

/* Prices ------------------------------------------------------------------
   A tracklist carries times down its right edge, so the column was always
   going to be there. Filling it with the prices off the board is the reason
   the device earns its place rather than being a costume. -------------- */
.track-sizes {
  display: grid; grid-template-columns: 2.4rem 1fr 3.3rem 3.3rem;
  gap: 0 0.6rem; margin: 0 0 0.15rem;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em;
  color: var(--sage-ink); text-transform: uppercase;
}
.track-sizes span { text-align: right; }
.track-sizes span:first-child { grid-column: 3; }
.track-sizes span:last-child { grid-column: 4; }

.track-list.two li { grid-template-columns: 2.4rem 1fr 3.3rem 3.3rem; }
.track-list.one li { grid-template-columns: 2.4rem 1fr auto; }
.track-list .d { grid-column: 2 / -1; }
.track-list .p {
  font-family: var(--mono); font-size: 0.92rem; text-align: right;
  color: var(--bone); white-space: nowrap;
}
.track-list .p em {
  display: block; font-style: normal; font-size: 0.78em; margin-top: 0.15rem;
  color: var(--sage-ink); letter-spacing: 0.02em;
}
.track-list .p.wide { grid-column: 3 / -1; font-size: 0.82rem; color: var(--sky); }

/* The strip along the bottom of their printed menu, where half the useful
   answers actually live. */
.addons {
  list-style: none; margin: clamp(1.6rem, 4vh, 2.2rem) 0 0;
  padding: 1.1rem 1.25rem; border: 1px solid var(--rule); border-radius: 3px;
  display: grid; gap: 0.6rem;
}
.addons li {
  display: flex; justify-content: space-between; gap: 1.2rem;
  align-items: baseline; font-size: 0.86rem; color: var(--bone-dim);
}
.addons b {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
  color: var(--pink); white-space: nowrap;
}

/* The seasonal board runs under the three cards rather than standing in as
   one of them. It changes weekly and they do not, so it reads as a notice
   pinned below the shelf instead of a drink with no photograph. */
.board {
  margin-top: clamp(1.8rem, 4.5vh, 2.8rem);
  border: 1px solid rgba(237, 231, 218, 0.28); border-left: 3px solid var(--pink);
  border-radius: 2px; padding: 1.15rem clamp(1.1rem, 3vw, 1.8rem);
  display: grid; gap: 0.5rem;
}
.board .tape-label { margin: 0; }
.board .tape-label::after { display: none; }
.board-line {
  margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.15; color: var(--bone);
}
.board-line span { position: relative; }
.board-line span + span::before {
  content: "&"; position: absolute; left: -1rem; color: var(--sage-ink);
  font-family: var(--mono); font-weight: 400; font-size: 0.72em;
}
.board-note {
  margin: 0; font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky);
}
.board-note em {
  font-style: normal; text-transform: none; letter-spacing: 0.02em;
  color: var(--bone-dim); margin-left: 0.7rem;
}

/* ==========================================================================
   Liner notes - the drift wall
   Their room has a wooden rack of a few hundred cassettes in a strict grid,
   and the whole page is built on that rack, so the gallery is the same shape:
   equal slots, evenly spaced. The tiles lean away from the pointer and the
   one under it comes forward, which gives the wall depth without anything
   moving on its own.
   ========================================================================== */
.wall { perspective: 1000px; }
.wall-grid {
  list-style: none; margin: 0; padding: 0; display: grid;
  gap: clamp(0.5rem, 1.2vw, 0.85rem);
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  transform-style: preserve-3d;
}
.tile {
  position: relative; overflow: hidden; border-radius: 2px;
  background: var(--field-2);
  /* Set by script from the pointer. Declared here so the tiles have somewhere
     to sit before any pointer arrives, and so the whole effect switches off
     by simply never writing them. */
  --dx: 0; --dy: 0; --lift: 0;
  transform: translate3d(calc(var(--dx) * 1px), calc(var(--dy) * 1px), calc(var(--lift) * 34px));
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.tile img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  filter: saturate(0.92) brightness(0.86);
  transition: filter .45s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.tile-cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 1.6rem 0.7rem 0.6rem;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.35;
  color: var(--bone); letter-spacing: 0.01em;
  background: linear-gradient(to top, rgba(14,16,10,0.88), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}

/* Hover only where there is a pointer to hover with. */
@media (hover: hover) and (pointer: fine) {
  .tile:hover img, .tile:focus-within img { filter: none; transform: scale(1.06); }
  .tile:hover .tile-cap, .tile:focus-within .tile-cap { opacity: 1; transform: none; }
  .tile:hover { z-index: 3; }
}

/* A phone gets a plain grid: no drift, nothing wired up, bigger slots so the
   photographs are actually legible at arm's length. */
@media (max-width: 46rem) {
  .wall-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .tile { transform: none !important; transition: none; will-change: auto; }
  .tile img { filter: saturate(0.95) brightness(0.94); }
  .tile-cap { opacity: 1; transform: none; font-size: 0.74rem; padding: 1.4rem 0.6rem 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tile { transform: none !important; transition: none; }
  .tile img { transition: none; }
}

/* The map, as a card ------------------------------------------------------
   White, deliberately. Their sign is navy and pink on white, so a light card
   sitting on the green reads as their own signage rather than as a panel
   somebody forgot to style, and it sidesteps the inverted-embed problem
   entirely: no scrim to flash, no API key to wait for.
   ========================================================================== */
.find-map {
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  background: var(--bone); border-radius: 3px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.find-map iframe {
  display: block; width: 100%; height: clamp(15rem, 40vh, 24rem);
  border: 0;
  /* The embed is a touch bright against the page; a hair of warmth settles
     it without touching contrast the way a brightness cap would. */
  filter: saturate(0.9) contrast(1.02);
}
.find-map figcaption {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem clamp(0.9rem, 2.5vw, 1.4rem);
  background: var(--bone); color: var(--ink);
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em;
  border-top: 1px solid rgba(22, 20, 18, 0.12);
}
.find-map figcaption a {
  color: var(--navy); font-weight: 700; text-underline-offset: 3px;
  display: inline-block; padding-block: 0.4rem;
}
.find-map figcaption a:hover { color: #B0286A; }

.foot-social { margin-top: 0.2rem; }
.foot-social a {
  font-family: var(--mono); font-size: 0.8rem; color: var(--pink);
  text-underline-offset: 4px; display: inline-block; padding-block: 0.5rem;
}

/* ==========================================================================
   Reviews, on the back of the sleeve
   A record carries its press quotes on the back, and this page is a tape all
   the way down, so the reviews sit there. The counted bars beside them are
   the part that matters: read from the reviews rather than asserted, so the
   page can name the drink people actually order.
   ========================================================================== */
.press-lay { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 60rem) { .press-lay { grid-template-columns: 1.15fr 0.85fr; } }

.press-quotes { display: grid; gap: clamp(1.4rem, 3vh, 2rem); }
.press-quotes blockquote {
  margin: 0; padding-left: clamp(0.9rem, 2vw, 1.3rem);
  border-left: 2px solid var(--rule);
}
.press-quotes blockquote:nth-child(odd) { border-left-color: var(--pink); }
.press-quotes p {
  margin: 0 0 0.55rem; color: var(--bone);
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.16rem); line-height: 1.5;
}
.press-quotes cite {
  font-style: normal; font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: 0.06em; color: var(--bone-dim); display: block;
}
.press-quotes cite span { color: var(--sage-ink); }
.press-quotes cite span::before { content: " · "; }

.press-count {
  border: 1px solid var(--rule); border-radius: 3px;
  padding: clamp(1.2rem, 3vw, 1.8rem);
}
.score { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.4rem; }
.score b {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1; color: var(--pink);
}
.score span {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bone-dim);
}
.count-lede { margin: 0 0 1.3rem; color: var(--bone-dim); font-size: 0.92rem; }

.bars { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.6rem; }
.bars li {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.35rem 0.8rem;
}
.b-name { font-size: 0.9rem; color: var(--bone); }
.b-num {
  font-family: var(--mono); font-size: 0.82rem; color: var(--pink);
  grid-row: 1; grid-column: 2;
}
/* The bar is scaled by transform rather than by width, so it animates on the
   compositor and cannot force a layout pass while the reveal runs. */
.b-bar {
  grid-column: 1 / -1; height: 4px; border-radius: 2px;
  background: var(--sage); opacity: 0.34;
  transform-origin: left center;
  transform: scaleX(calc(var(--n) / 24));
}
.count-foot {
  margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--bone-dim);
  border-top: 1px solid var(--rule); padding-top: 0.9rem;
}

/* The three things reviewers keep telling each other: where you sit, where
   you park, and that it is card only. Answering them here saves somebody a
   trip they would otherwise make on a wrong assumption. */
.know {
  list-style: none; margin: 0 0 1.2rem; padding: 0;
  display: grid; gap: 0.4rem;
}
.know li {
  position: relative; padding-left: 1.1rem;
  font-size: 0.9rem; color: var(--bone-dim);
}
.know li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--pink);
}