/* What's On Lewes. The direction David chose on 2 Nov 2026: a Downs-green shell, the evening as a twitten you
   walk down (a lane of times, a line where now is), and the gold coin of his moodboard as the vote, with the
   town's own old postcards beside the listings. The palette is his (PRODUCT.md); every text pair is measured
   (WCAG 2.2 AA) and the ratio written beside its token. Pages: pb_hooks/views/. */
@font-face {
  font-family: "Shantell Sans";
  src: url("/fonts/shantell-sans-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  --ground: #F7F6F1;      /* Downs chalk: the banner's own paper (ink on it 16.1:1, muted 6.8:1) */
  --field: #E9E6DD;       /* a tone step for fields: ink on it 13.91:1, muted 5.88:1 */
  --ink: #1C1A17;         /* 15.64:1 on chalk */
  --muted: #6B5139;       /* Ouse mud, darkened for text: 6.61:1 on chalk */
  --shell: #2E5A36;       /* South Downs green: chalk on it 7.19:1; on chalk as text 7.19:1 */
  --on-shell: #F4F3EF;
  --on-shell-muted: #D8E3D4; /* 6.03:1 on the green */
  --time: #2E5A36;
  --lane: #8C6D4F;        /* Ouse mud: the lane itself, never text */
  --now: #A82424;         /* 6.43:1 on chalk */
  --link: #2E5A36;
  --coin: #D9A036;        /* gold: never text on chalk (2.09:1); ink on it 7.47:1 */
  --on-coin: #1C1A17;
  --focus: #A82424;
  --ink-line: #1C1A17;    /* the banner's ink line, on controls and the lane's stops */
  --display: "Shantell Sans", "Comic Neue", "Trebuchet MS", sans-serif;
  --ui: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #14201A;      /* night on the Downs */
    --field: #1C2C23;       /* chalk on it 13.5:1 */
    --ink: #F4F3EF;         /* 15.12:1 on night */
    --muted: #B9C2B6;       /* 9.15:1 */
    --shell: #1E3A25;       /* chalk on it 11.21:1 */
    --on-shell-muted: #C9D6C4; /* 8.24:1 */
    --time: #8FC79A;        /* 8.63:1 on night */
    --now: #D9A036;         /* red fails on night (2.35:1), so now is gold: 7.22:1 */
    --link: #D9A036;
    --focus: #D9A036;
    --ink-line: #F4F3EF;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.55 var(--ui); -webkit-text-size-adjust: 100%; }
::selection { background: var(--coin); color: var(--on-coin); }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }
.skip { position: absolute; left: var(--gl); top: -100px; background: var(--coin); color: var(--on-coin); padding: 8px 16px; z-index: 10; }
.skip:focus { top: 8px; }
.addr { font-weight: 700; user-select: all; }

/* The masthead: David's banner, the full width of the page, and the way round under it */
.masthead { background: #F7F6F1; padding-top: env(safe-area-inset-top, 0px); }
.banner-link { display: block; }
.banner { display: block; width: 100%; height: auto; min-height: 120px; max-height: 280px; object-fit: cover; object-position: 50% 78%; }
.frame, .foot-in { width: min(76rem, 100% - var(--gl) - var(--gr)); margin-inline: auto; }
.top { display: none; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 4px var(--gr) 20px var(--gl); }
.top a { min-height: 48px; display: inline-flex; align-items: center; padding: 8px 22px; border-radius: 24px; border: 2.5px solid #1C1A17;
  background: #F7F6F1; color: #1C1A17; font: 700 1.0625rem/1 var(--display); text-decoration: none;
  transition: background-color 150ms var(--ease), transform 120ms var(--ease); }
.top a:hover { background: #E9E6DD; }
.top a:active { transform: translateY(1px); }
.top a[aria-current="page"] { background: var(--coin); }

/* The page frame: a lead, then the listings beside the town's own pictures */
.frame { padding-top: 32px; }
.lead h1 { margin: 0; font: 700 clamp(2.25rem, 6.2vw, 4.75rem)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.lead .sub { margin: 16px 0 0; font-size: 1.1875rem; max-width: 46ch; }
.daynav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
/* Controls in the banner's ligne claire: one ink line on everything, a flat fill, the hand-lettered face */
.step { width: 48px; height: 48px; border-radius: 50%; background: var(--shell); color: var(--on-shell); display: grid; place-items: center;
  border: 2.5px solid var(--ink-line); transition: transform 120ms var(--ease), background-color 150ms var(--ease); }
.step:hover { background: color-mix(in srgb, var(--shell) 82%, var(--ink-line)); }
.step:active { transform: translateY(1px) scale(0.96); }
.step svg, .vote svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chip { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 20px; border-radius: 24px; background: var(--ground); color: var(--ink);
  border: 2.5px solid var(--ink-line); font: 700 1.0625rem/1.1 var(--display); text-decoration: none;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease); }
.chip:hover { background: var(--field); }
.chip:active { transform: translateY(1px); }
.chip.on { background: var(--coin); color: var(--on-coin); }
.cols { display: grid; gap: 48px; margin-top: 32px; }
.main { min-width: 0; }
.side { min-width: 0; }
.side h2 { font: 700 1.5rem/1.2 var(--display); margin: 32px 0 12px; }
.picture { margin: 0; }
.picture img { display: block; width: 100%; height: auto; }
.picture figcaption { margin-top: 8px; color: var(--muted); font-size: 1rem; }
.kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kinds a { display: inline-flex; gap: 10px; align-items: baseline; min-height: 48px; padding: 10px 18px; border-radius: 24px; background: var(--ground); color: var(--ink);
  border: 2.5px solid var(--ink-line); text-decoration: none; font: 700 1.0625rem/1.2 var(--display); transition: background-color 150ms var(--ease); }
.kinds a:hover { background: var(--field); }
.kinds li { display: contents; }
.kinds span { display: none; }

/* The twitten: one lane down the day, a stop for each thing on it */
.lane, .list { list-style: none; margin: 0; padding: 0 0 0 32px; position: relative; }
.lane::before { content: ""; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 6px; border-radius: 3px; background: var(--lane); }
.list { padding-left: 0; }
.group h3 { margin: 28px 0 4px; font: 700 1.0625rem/1.3 var(--ui); color: var(--muted); }
.group:first-child h3 { margin-top: 0; }
.stop { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0 18px; }
.lane .stop::before { content: ""; position: absolute; left: -29px; top: 19px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--coin); border: 3px solid var(--ink-line); transition: background-color 300ms var(--ease); }
.lane .stop.past::before { background: var(--ground); }
.stop.past .title, .stop.past .time { color: var(--muted); }
.what { min-width: 0; }
.head { margin: 0; display: flex; gap: 10px; align-items: baseline; }
.time { flex: none; min-width: 3.1rem; color: var(--time); font-weight: 700; font-variant-numeric: tabular-nums; }
.title { font: 700 1.1875rem/1.3 var(--display); }
.when { margin: 0 0 4px; color: var(--time); font-weight: 700; }
.venue { margin: 4px 0 0; }
.venue a { color: var(--muted); font-weight: 600; text-decoration: none; }
.venue a:hover { text-decoration: underline; }
.details { margin: 6px 0 0; max-width: 60ch; }
.meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; color: var(--muted); font-size: 1rem; }
.price { color: var(--ink); font-weight: 700; }
.dogs { background: var(--ground); color: var(--ink); border: 2px solid var(--ink-line); border-radius: 14px; padding: 0 10px; text-decoration: none; font-weight: 600; }
a.dogs:hover { text-decoration: underline; }
.now { position: relative; list-style: none; margin: 6px 0; height: 26px; }
.now::before { content: ""; position: absolute; left: -28px; right: 0; top: 12px; height: 3px; border-radius: 2px; background: var(--now); }
.now span { position: relative; background: var(--ground); color: var(--now); font-weight: 700; font-size: 1rem; padding-right: 10px; font-variant-numeric: tabular-nums; }
.empty, .status { color: var(--muted); }
.status:empty { display: none; }
.mostdays { margin-top: 40px; background: var(--field); padding: 28px 28px 12px; }
.mostdays h2 { font: 700 1.5rem/1.2 var(--display); margin: 0 0 8px; }
.weekgrid { margin-top: 56px; }
.weekgrid .dayblock { min-width: 0; break-inside: avoid; margin-bottom: 56px; }
.dayblock h2, .main section > h2 { font: 700 1.5rem/1.2 var(--display); margin: 0 0 16px; }
.dayblock h2 a { color: var(--ink); text-decoration: none; }
.dayblock h2 a:hover { text-decoration: underline; }
.main section + section { margin-top: 48px; }

/* The coin: the score in gold, between a vote up and a vote down */
.vote { display: grid; justify-items: center; align-content: start; gap: 2px; }
.vote button { width: 44px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--muted); display: grid; place-items: center;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), transform 100ms var(--ease); }
.vote button:hover { background: var(--field); color: var(--ink); }
.vote button:active { transform: scale(0.92); }
.vote button[aria-pressed="true"].up { background: var(--shell); color: var(--on-shell); }
.vote button[aria-pressed="true"].down { background: var(--muted); color: var(--ground); }
.vote button:disabled { cursor: progress; }
.coin { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--coin); color: var(--on-coin);
  font: 700 1.0625rem/1 var(--display); font-variant-numeric: tabular-nums;
  border: 2.5px solid var(--on-coin); outline: 1.5px solid var(--on-coin); outline-offset: -7px; }
.coin.bump { animation: bump 320ms var(--ease); }
@keyframes bump { 40% { transform: scale(1.14) rotate(-8deg); } 100% { transform: none; } }

/* Around the town: the way into the rest of the site, through the town's own pictures */
.around { margin-top: 120px; }
.around h2 { font: 700 2.5rem/1.05 var(--display); margin: 0 0 24px; }
.around-grid { display: grid; gap: 24px; }
.tile { display: grid; gap: 4px; color: var(--ink); text-decoration: none; overflow: hidden; }
.tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 400ms var(--ease); }
.tile.big img { aspect-ratio: 3 / 2; }
.tile:hover img { transform: scale(1.03); }
.tile-name { margin-top: 10px; font: 700 1.5rem/1.2 var(--display); text-decoration: underline 3px var(--coin); text-underline-offset: 6px; }
.tile-line { color: var(--muted); font-size: 1rem; }

/* What's on, by kind */
.kindlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
.kindlist h2 { margin: 0; font: 700 2.5rem/1.05 var(--display); }
.kindlist h2 a { color: var(--ink); text-decoration-color: var(--coin); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.kindlist p { margin: 8px 0 0; max-width: 52ch; font-size: 1.1875rem; }
.kindlist .meta { font-size: 1rem; }

/* Venues A to Z */
.letter + .letter { margin-top: 32px; }
.letter h2 { font: 700 2.5rem/1 var(--display); color: var(--time); margin: 0 0 12px; }
.venues { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px 32px; }
.venues a { font: 700 1.1875rem/1.3 var(--display); color: var(--ink); text-decoration: none; }
.venues a:hover { text-decoration: underline; }
.venues span { display: block; color: var(--muted); font-size: 1rem; }

/* A venue */
.facts { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 16px 40px; }
.facts dt { color: var(--muted); font-size: 1rem; }
.facts dd { margin: 2px 0 0; font-weight: 600; }

/* About */
.prose section + section { margin-top: 40px; }
.prose h2 { font: 700 1.5rem/1.2 var(--display); margin: 0 0 12px; }
.prose p { max-width: 62ch; margin: 0; }

/* The close: the name again, at full width */
.foot { margin-top: 120px; background: var(--field); padding-block: 56px calc(100px + env(safe-area-inset-bottom, 0px)); }
.foot-name { margin: 0 0 32px; font: 700 clamp(2.75rem, 11vw, 9.5rem)/0.95 var(--display); letter-spacing: -0.03em; color: var(--time); }
.foot-cols { display: grid; gap: 24px; }
.foot-cols p { margin: 0 0 12px; max-width: 64ch; font-size: 1rem; }

/* The way round on a phone, where a thumb reaches */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--ground); box-shadow: /* taste-skill-ignore: a sticky bar that floats over the page */ 0 -1px 0 color-mix(in srgb, var(--ink) 12%, transparent), 0 -8px 24px -12px rgba(0, 0, 0, 0.25);
  padding: 0 var(--gr) env(safe-area-inset-bottom, 0px) var(--gl); z-index: 5; }
.tabs { transition: transform 220ms var(--ease); }
.tabs.away { transform: translateY(110%); }
.tabs a { position: relative; flex: 1; min-height: 60px; display: grid; place-items: center; color: var(--muted); font-weight: 700; text-decoration: none; transition: color 150ms var(--ease); }
.tabs a[aria-current="page"] { color: var(--time); }
.tabs a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 4px; border-radius: 0 0 4px 4px; background: var(--time); }

/* One entrance (added by app.js): the listings rise in, in order */
.rise { animation: rise 520ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (min-width: 48rem) {
  .top { display: flex; }
  .tabs { display: none; }
  .foot { padding-bottom: 56px; }
  .frame { padding-top: 32px; }
  .venues { grid-template-columns: 1fr 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 48px; }
  .frame { padding-top: 48px; }
  .around-grid { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: start; }
}
@media (min-width: 64rem) {
  .weekgrid { columns: 2; column-gap: 72px; }
  .mostdays .list { columns: 2; column-gap: 72px; }
  .mostdays .stop { break-inside: avoid; }
  .cols { grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem); gap: 72px; }
  .side { position: sticky; top: 24px; align-self: start; }
  .kinds span { display: inline; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
}
@media (max-width: 63.99rem) {
  .side .picture { max-width: 40rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { transition: none !important; animation: none !important; }
}