/* Duck Dive Tavern: badge navy, sign cream, wagon red. Caprasimo (their sign and posters) + Hanken Grotesk. */
:root {
  --navy: #243C54; --navy-d: #1B2E41; --ink: #15212E;
  --cream: #E7D6B4; --paper: #F5EEDF; --rule: #CDBF9E;
  --red: #D2502F; --red-t: #B23F22; --red-on-navy: #E86A45;
  --muted: #4A5363; --on-navy: #CDD5DE; --soft-on-navy: rgba(245, 238, 223, .74);
  --disp: 'Caprasimo', 'Cooper Black', Georgia, serif;
  --text: 'Hanken Grotesk', system-ui, sans-serif;
  --g: 20px; --r: 4px;
  --m-dur: .85s; --m-rise: 26px;
}
@media (max-width: 719px) { :root { --m-dur: .7s; --m-rise: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--navy); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.6 var(--text); color: var(--ink); background: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2, h3, figure, blockquote, dl, dd, ul, ol, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: 1376px; margin-inline: auto; padding-inline: var(--g); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 16px; background: var(--paper); color: var(--ink); border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* the small label: caps, tracked, on a red rule (used once, for the reviews) */
.label { font: 600 .8125rem/1.2 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--red-t); }
.label.rule { display: flex; align-items: center; gap: 14px; }
.label.rule::after { content: ""; flex: 1; height: 2px; background: currentColor; max-width: 120px; }
h2 { font: 400 clamp(2.6rem, 10vw, 4.5rem)/1 var(--disp); letter-spacing: -.005em; color: var(--navy); }
.ul { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.ul:hover { text-decoration: none; }

/* buttons: one radius, one weight; red fill passes AA with cream text */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1.5px solid var(--red-t); border-radius: var(--r); background: var(--red-t); color: #FFF8EC; font: 700 1.0625rem/1 var(--text); text-decoration: none; }
.btn:hover { border-color: #9E361C; }
.btn.ghost { background: transparent; border-color: var(--cream); color: var(--paper); --m-fill: rgba(231, 214, 180, .16); }

/* header */
.top { position: sticky; top: 0; z-index: 30; background: var(--navy); color: var(--paper); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.brand img { width: 92px; }
.nav { display: none; }
.top .btn.ghost { min-height: 46px; padding: 0 18px; font-size: 1rem; }

/* hero */
.hero { display: flex; flex-direction: column; background: var(--navy); color: var(--paper); padding: 4px 0 48px; overflow: clip; }
.hero .info { order: 2; margin-top: 40px; }
.info { display: flex; flex-direction: column; gap: 8px; padding-block: 14px; border-block: 1px solid rgba(231, 214, 180, .45); background-clip: content-box; }
.info p { font: 600 .8125rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.hero .info { border: 0; position: relative; }
.hero .info::before, .hero .info::after { content: ""; position: absolute; left: var(--g); right: var(--g); height: 1px; background: rgba(231, 214, 180, .45); }
.hero .info::before { top: 0; } .hero .info::after { bottom: 0; }
.stage { position: relative; }
.frame { position: relative; width: 100%; aspect-ratio: 1.18; }
.badge { position: absolute; inset: 0; clip-path: url(#badge); }
.badge .m-frame { height: 100%; }
.badge .m-frame img { object-position: 52% 50%; }
.badge .m-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 78%, rgba(27, 46, 65, .82)); }
.outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.outline .closed { display: none; }
.outline path { fill: none; stroke: var(--cream); stroke-width: 6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
/* the entrance, one sequence on one ease (about 1.6 s): the outline is there from the first frame and the room
   opens inside it from the arch down (a curved edge, never a raw cut), the name rises line by line through the break,
   then slogan, copy, button, tonight, and the info rules last. The photo starts partly shown: it's the LCP image. */
@media (prefers-reduced-motion: no-preference) {
  .in-photo { animation: in-photo 1.2s cubic-bezier(.2, .7, .2, 1) both; }
  .in-l1, .in-l2 { animation: in-line .9s cubic-bezier(.2, .7, .2, 1) .45s both; }
  .in-l2 { animation-delay: .57s; }
  .in-up { animation: in-up .8s cubic-bezier(.2, .7, .2, 1) .8s both; }
  .fact.in-up { animation-delay: .88s; }
  .btn.in-up { animation-delay: .96s; }
  .tonight.in-up { animation-delay: 1.04s; }
  .in-info::before, .in-info::after { transform-origin: left; animation: in-rule .7s cubic-bezier(.65, 0, .35, 1) 1.1s both; }
  .in-info p { animation: in-fade .6s ease 1.3s both; }
}
@keyframes in-photo { from { clip-path: circle(58% at 50% 0); scale: 1.06; } to { clip-path: circle(115% at 50% 0); scale: 1; } }
@keyframes in-line { 0% { translate: 0 150%; opacity: 0; } 17% { opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
@keyframes in-up { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes in-rule { from { transform: scaleX(0); } to { transform: none; } }
@keyframes in-fade { from { opacity: 0; } }
.copy { position: relative; z-index: 2; margin-top: -.62em; font-size: clamp(3.2rem, 15.5vw, 4.4rem); }
h1 { font: 400 1em/.94 var(--disp); letter-spacing: -.01em; color: var(--paper);
  -webkit-text-stroke: .15em var(--navy); paint-order: stroke fill; }
h1 > span { display: block; }
/* each line rises from behind its own edge (the mask leaves room for the navy halo) */
h1 .ln { padding-top: .12em; margin-top: -.12em; clip-path: inset(-.5em -.3em -.14em -.3em); }
h1 .ln > span { display: block; }
.hero-more { font-size: 1rem; }
.slogan { margin-top: 16px; font: 400 clamp(1.3rem, 5.4vw, 1.75rem)/1.2 var(--disp); color: var(--cream); }
.fact { margin-top: 12px; max-width: 40ch; color: var(--on-navy); }
.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 24px; }
.tonight { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--cream); }

/* menu: a price board on cream, with the dishes they photograph */
.menu { background: var(--cream); padding: 80px 0 64px; }
.menu-note { margin-top: 16px; max-width: 36ch; color: var(--muted); }
.plates { margin-top: 36px; --m-item: 74%; --m-gap: 14px; margin-inline: calc(-1 * var(--g)); }
.plates .m-track { --m-pad: var(--g); }
.plate .m-frame { aspect-ratio: 3 / 4; border-radius: var(--r); background: #D9C69F; }
.plate figcaption { flex: none; display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--navy); font-weight: 600; color: var(--ink); }
.plate.burger img { object-position: 36% 50%; }
.plate .p, .board-menu .p { font-variant-numeric: tabular-nums; font-weight: 600; }

/* menu sections: plain jump links, sticky on phones; the strip fades at both ends instead of cutting a word */
.cats { position: sticky; top: 0; z-index: 3; margin: 64px calc(-1 * var(--g)) 0; background: var(--cream); border-bottom: 2px solid var(--navy); }
.cats-in { position: relative; display: flex; gap: 20px; padding: 0 var(--g); overflow-x: auto; scrollbar-width: none; scroll-padding-inline: 20px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.cats-in::-webkit-scrollbar { display: none; }
.cats a { flex: none; display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; font-size: .9375rem; color: var(--navy); text-decoration: none;
  text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cats a.is-active, .cats a:hover { text-decoration-line: underline; color: var(--red-t); }

.board-menu { margin-top: 8px; }
.mcol + .mcol { margin-top: 28px; }
.cat { scroll-margin-top: 56px; }
.cat + .cat { margin-top: 28px; }
.cat h3 { padding: 20px 0 10px; border-bottom: 2px solid var(--navy); font: 400 1.75rem/1.1 var(--disp); color: var(--red-t); }
.cat li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; line-height: 1.4; border-bottom: 1px solid var(--rule); }
.cat li::after { content: ""; order: 1; flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted rgba(36, 60, 84, .45); translate: 0 -5px; }
.cat .n { font-weight: 600; }
.cat .p { order: 2; }
.cat small { margin-left: 6px; font-weight: 400; font-size: .9375rem; color: var(--muted); }
/* phones: the short lists (sides, dessert) set compact; sides in two columns */
@media (max-width: 719px) {
  .sides li, #m-dessert li { padding: 8px 0; font-size: 1rem; }
  .sides ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 20px; }
  .sides li { gap: 6px; }
  .sides .n { white-space: nowrap; }
  .sides li::after { min-width: 8px; }
}

/* Live @ the Dive: their weekly poster, navy, centered */
.week { background: var(--navy); color: var(--paper); padding: 88px 0 64px; text-align: center; overflow: clip; }
.week h2 { font-size: 3.5rem; line-height: .98; color: var(--paper); text-wrap: balance; }
.week h2 em { font-style: normal; color: var(--red-on-navy); }
.board { max-width: 760px; margin: 40px auto 0; }
.row { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 0 22px; }
.row + .row { border-top: 1px solid rgba(231, 214, 180, .22); }
.day { font: 400 2.5rem/.95 var(--disp); color: var(--cream); }
.night { max-width: 30ch; font-weight: 500; font-size: 1.0625rem; line-height: 1.4; color: var(--paper); text-wrap: balance; }
.night > span { display: block; }
.hrs { margin-top: 2px; font-weight: 500; font-size: 1rem; font-variant-numeric: tabular-nums; color: rgba(245, 238, 223, .85); }
/* today: a red band (full-bleed on phones) that wipes across from the left after the days are in */
.row.is-today { border-top-color: transparent; }
.row.is-today::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); background: var(--red-t); transform-origin: left; }
.board .row.is-today.is-in { clip-path: none; }
@media (prefers-reduced-motion: no-preference) {
  @media (scripting: enabled) {
    .row.is-today::before { transform: scaleX(0); transition: transform .8s cubic-bezier(.65, 0, .35, 1) .62s; }
    .row.is-today.is-in::before { transform: none; }
  }
}
.row.is-today + .row { border-top-color: transparent; }
.row.is-today .day, .row.is-today .night { color: #FFF8EC; }
.row.is-today .hrs { color: rgba(255, 248, 236, .86); }
.board-note { max-width: 52ch; margin: 36px auto 0; color: var(--soft-on-navy); font-size: 1rem; }

/* reviews: paper, one big quote */
.reviews { background: var(--paper); padding: 88px 0 64px; }
.q-lead { margin-top: 36px; }
.q-lead p { font: 400 clamp(1.625rem, 6.67vw, 3.5rem)/1.16 var(--disp); color: var(--navy); text-wrap: balance; }
.reviews figcaption { margin-top: 18px; font: 600 .8125rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.reviews figcaption span { color: var(--muted); font-weight: 500; }
/* the other two set like the price board: a 2px navy rule, the name on it, the quote under */
.q-pair { display: grid; gap: 40px; margin-top: 56px; }
.q figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--navy);
  font: 400 1.75rem/1.1 var(--disp); letter-spacing: 0; text-transform: none; color: var(--red-t); }
.q figcaption span { font: 500 .8125rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; }
.q p { font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.q p + p { margin-top: .6em; }
.nw { white-space: nowrap; }

/* the bar: navy, the shaker tins full height */
.room { display: grid; background: var(--navy); color: var(--on-navy); }
.room-photo { aspect-ratio: 1 / 1; width: 100%; }
.room-photo img { object-position: 50% 22%; }
.room-text { padding: 64px var(--g) 64px; }
.room h2 { color: var(--paper); }
.notes { margin-top: 32px; border-top: 2px solid var(--cream); }
.notes > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid rgba(231, 214, 180, .25); }
.notes dt { font: 600 .8125rem/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); }
.notes > div { gap: 6px; padding: 20px 0; }
.notes dd { margin: 0; font-size: 1.1875rem; line-height: 1.5; color: var(--paper); }
.notes a { color: var(--paper); }

/* visit */
.visit { background: var(--paper); padding-bottom: 64px; }
.sign { aspect-ratio: 1740 / 750; width: 100%; border-bottom: 2px solid var(--navy); }
.sign picture { display: contents; }
.sign img { object-position: 50% 50%; }
.visit-grid { display: grid; gap: 28px; padding-top: 64px; }
.where { margin-bottom: 20px; }
.street { display: block; font: 400 clamp(2rem, 8vw, 2.5rem)/1.05 var(--disp); color: var(--navy); }
address span:not(.street) { display: block; margin-top: 8px; font-weight: 500; font-size: 1.25rem; line-height: 1.4; color: var(--ink); }
address .kitchen { margin-top: 8px; font-size: 1.125rem; color: var(--navy); }
.visit-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 32px; }
.social { display: flex; gap: 32px; font-weight: 600; }
.social a { display: inline-flex; align-items: center; min-height: 44px; }
.hours h3 { padding-bottom: 12px; border-bottom: 2px solid var(--navy); }
.tt li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.tt .d { font: 400 1.5rem/1.1 var(--disp); color: var(--navy); }
.tt .t { font-weight: 600; font-variant-numeric: tabular-nums; }
.tt li.is-today { background: var(--red-t); color: #FFF8EC; margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); border-bottom-color: var(--red-t); }
.tt li.is-today .d { color: #FFF8EC; }

/* footer */
.foot { background: var(--navy); color: var(--on-navy); padding: 72px 0 calc(96px + env(safe-area-inset-bottom)); text-align: center; }
.foot-badge { width: 220px; margin-inline: auto; }
.foot-info { margin-top: 40px; align-items: center; }
.foot-hours span { display: block; }
.foot-addr span + span::before { content: "·"; margin: 0 14px; }
.foot-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 32px; margin-top: 28px; font-weight: 600; color: var(--paper); }
.foot-social a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 20px; margin-top: 32px; font-size: .9375rem; }
.foot-row > * { display: inline-flex; align-items: center; min-height: 44px; }
.foot-row > .copy-line { display: block; flex-basis: 100%; min-height: 0; padding-block: 12px; }
.credits { margin-top: 16px; font-size: 1rem; color: #AAB6C3; }

/* phone action bar */
.actionbar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--navy); border-top: 1px solid rgba(231, 214, 180, .5); padding-bottom: env(safe-area-inset-bottom); }
.actionbar a { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--paper); font-weight: 600; text-decoration: none; --m-fill: rgba(231, 214, 180, .14); }
.actionbar a + a { border-left: 1px solid rgba(231, 214, 180, .25); }
.actionbar .primary { background: var(--red-t); color: #FFF8EC; }

/* tablet and up */
@media (min-width: 720px) {
  :root { --g: 40px; }
  .q-pair { grid-template-columns: 1fr 1fr; gap: 48px; }
  .plates { --m-item: 40%; }
  .info:not(.foot-info) { flex-direction: row; justify-content: space-between; }
  .foot-info { flex-direction: row; justify-content: center; gap: 0; }
  .foot-hours span { display: inline; }
  .foot-info p + p::before, .foot-hours span + span::before { content: "·"; margin: 0 14px; }
  .cats { display: none; }
  .board-menu { columns: 2; column-gap: 56px; margin-top: 56px; }
  .mcol { display: contents; }
  .cat { break-inside: avoid; padding-bottom: 40px; }
  .cat + .cat { margin-top: 0; }
  .cat h3 { padding-top: 0; }
  .week h2 { font-size: clamp(4.5rem, 9vw, 7.5rem); }
  .day { font-size: 3.5rem; }
  .night { max-width: 40ch; font-size: 1.25rem; }
  .sign { aspect-ratio: 3; }
}

/* desktop */
@media (min-width: 900px) {
  :root { --g: 48px; }
  .top .wrap { height: 96px; }
  .brand img { width: 120px; }
  .nav { display: flex; gap: 36px; margin-left: auto; font-weight: 600; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .top .btn.ghost { min-height: 56px; padding: 0 24px; font-size: 1.0625rem; }
  .outline .closed { display: inline; } .outline .open { display: none; }

  /* the hero fills the first screen under the header, so the fold always lands in navy */
  .hero { min-height: min(calc(100svh - 96px), 980px); padding: 0 0 48px; }
  .hero .info { order: 0; margin: 0 auto; }
  .hero .info p { font-size: .75rem; }
  /* capped at 720px so the 1360px photo stays sharp on retina */
  /* the frame's left edge sits half a letter inside the end of "Dive" (the name is 5.17em wide), so the name
     clearly crosses the outline; the navy halo masks the outline behind the glyphs */
  .stage { --F: clamp(5.5rem, 10vw, 9.5rem); --fw: min(60vw, 760px, calc((100svh - 220px) * 1.18)); display: flex; align-items: center; min-height: calc(var(--fw) / 1.18 + 48px); }
  .stage { flex: 1; }
  .frame { position: absolute; top: 50%; translate: 0 -50%; left: calc(var(--g) + 4.5 * var(--F)); width: var(--fw); }
  .badge .m-frame img { object-position: 40% 50%; }
  .badge .m-frame::after { background: linear-gradient(to right, rgba(27, 46, 65, .5), transparent 18%), linear-gradient(to bottom, transparent 82%, rgba(27, 46, 65, .5)); }
  .copy { margin: 0; font-size: clamp(5.5rem, 10vw, 9.5rem); width: 100%; }
  h1 { -webkit-text-stroke-width: .12em; }
  .hero-more { max-width: 36rem; }
  .slogan { margin-top: 24px; font-size: 2.375rem; }
  .fact { max-width: 31rem; font-size: 1.3125rem; line-height: 1.5; color: #DCE2E9; }
  .hero-acts { align-items: center; gap: 14px 24px; margin-top: 32px; }
  .hero-acts .btn { min-height: 60px; padding: 0 30px; font-size: 1.125rem; }
  .tonight { font-size: 1.125rem; font-weight: 500; color: var(--paper); }

  .menu { padding: 112px 0 96px; }
  .mcol > .cat:last-child { padding-bottom: 0; }
  .menu .sec-head h2 { font-size: clamp(4.5rem, 7vw, 6rem); }
  /* the note sits on the heading's baseline, right-aligned over columns 8-12 */
  .sec-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: last baseline; }
  .sec-head h2 { grid-column: 1 / 8; }
  .menu-note { grid-column: 8 / 13; justify-self: end; margin: 0; max-width: 36ch; font-size: 1.25rem; line-height: 1.5; text-align: right; color: var(--ink); }
  /* the dishes as one art-directed row on the 12-column grid */
  .plates { margin: 48px 0 0; }
  /* one top line and one caption line: the tall frames take the tuna's 4:5 height; wings + burger split it */
  .plates .m-track { --m-pad: 0px; --cw: min(100vw - 96px, 1280px); --th: calc(((var(--cw) - 264px) / 12 * 5 + 96px) * 1.25);
    height: calc(var(--th) + 52px); grid-auto-flow: row; grid-template-columns: repeat(12, 1fr); grid-auto-columns: auto; grid-template-rows: 1fr 1fr;
    column-gap: 24px; row-gap: 24px; overflow: visible; cursor: auto; }
  .plate { display: flex; flex-direction: column; min-height: 0; }
  .plate .m-frame { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
  .plate figcaption { height: 40px; margin-top: 12px; font-size: 1.125rem; }
  .plate.tuna { grid-column: 1 / 6; grid-row: 1 / 3; }
  .plate.wings { grid-column: 6 / 9; grid-row: 1; }
  .plate.burger { grid-column: 6 / 9; grid-row: 2; }
  .plate.fish { grid-column: 9 / 13; grid-row: 1 / 3; }
  .board-menu { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 56px; columns: auto; margin-top: 96px; }
  .mcol { display: block; container-type: inline-size; }
  .mcol + .mcol { margin-top: 0; }
  .cat li { font-size: 1.125rem; line-height: 1.45; padding: 12px 0; }

  .week { padding: 136px 0 128px; }
  .board { margin-top: 64px; }
  .row { padding: 26px 0; }
  .day { font-size: 4rem; }
  .board-note { margin-top: 44px; }

  .reviews { padding: 136px 0 112px; }
  .q-lead { margin-top: 48px; max-width: calc((100% - 11 * 24px) / 12 * 10 + 9 * 24px); }
  .q-lead p { font-size: clamp(2.75rem, 3.9vw, 3.5rem); }
  .q-pair { grid-template-columns: repeat(12, 1fr); gap: 24px; margin-top: 80px; }
  .q figcaption { margin-bottom: 20px; }
  .q:first-child { grid-column: 1 / 6; }
  .q:last-child { grid-column: 7 / 13; }
  .q p { font-size: 1.25rem; line-height: 1.6; }

  .room { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .room-photo { aspect-ratio: auto; height: 720px; }
  .room-photo img { position: absolute; inset: 0; object-position: 50% 12%; }
  .room-text { width: min(100% - 2 * var(--g), 640px); justify-self: center; padding: 96px 0; }
  .notes dt { font-size: .875rem; }
  .notes dd { font: 500 1.5rem/1.45 var(--text); }

  .visit { padding-bottom: 112px; }
  .sign { aspect-ratio: 3.6; }
  .sign img { object-position: 50% 30%; }
  .visit-grid { grid-template-columns: repeat(12, 1fr); gap: 40px 24px; padding-top: 88px; }
  .visit-grid h2 { grid-column: 1 / -1; font-size: 4.5rem; }
  .where { grid-column: 1 / 6; align-self: start; margin: 0; }
  .street { font-size: 2.5rem; }
  .hours { grid-column: 7 / 13; align-self: start; }
  .tt .d { font-size: 1.875rem; }
  .tt .t { font-size: 1.25rem; }
  .tt li.is-today { margin-inline: 0; padding-inline: 16px; }

  .foot { padding: 104px 0 56px; }
  .foot-badge { width: 280px; }
  .foot-row { justify-content: flex-start; margin-top: 48px; padding-top: 16px; border-top: 1px solid rgba(231, 214, 180, .3); font-size: .875rem; gap: 0 28px; }
  .foot-row .copy-line { flex-basis: auto; margin-right: auto; }
  .credits { text-align: left; margin-top: 4px; font-size: .875rem; }
  .actionbar { display: none; }
}
/* Sides in two short columns when the menu column is wide enough */
@container (min-width: 370px) {
  .sides ul { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 24px; }
  .sides .n { white-space: nowrap; }
  .sides li::after { min-width: 8px; }
}

/* the week as a poster grid: Mon-Thu, then Fri-Sun centered under it */
@media (min-width: 1100px) {
  .week { padding: 96px 0 88px; }
  .week h2 { font-size: 6rem; }
  /* one rule system: a full-width hairline above each row of days, no cell borders */
  .board { display: grid; grid-template-columns: repeat(8, 1fr); max-width: none; margin-top: 56px; border-top: 1px solid rgba(245, 238, 223, .18); }
  .row { grid-column: span 2; justify-content: flex-start; gap: 8px; padding: 32px 16px; }
  /* today's red cell fills its row, its lines centered in it */
  .row.is-today { align-self: stretch; justify-content: center; padding-inline: 28px; }
  .row + .row { border-top: 0; }
  /* the hairline between the two rows of days belongs to the board, so a short today cell never breaks it */
  .board { grid-template-rows: auto 1px auto; }
  .board::before { content: ""; grid-column: 1 / -1; grid-row: 2; background: rgba(245, 238, 223, .18); }
  .row { grid-row: 1; }
  .row[data-day="5"], .row[data-day="6"], .row[data-day="0"] { grid-row: 3; }
  .row[data-day="5"] { grid-column: 2 / span 2; }
  .row.is-today::before { inset: 0; }
  .day { font-size: clamp(2.5rem, 3.2vw, 3rem); }
  .night { font-size: 1.125rem; font-weight: 500; }
  .board-note { max-width: 62ch; margin-top: 40px; font-size: 1.125rem; line-height: 1.55; color: var(--paper); }
  .hrs, .row.is-today .hrs { font-size: 1.125rem; font-weight: 600; margin-top: 4px; color: var(--paper); }
}

/* phones and tablets: the week as a timetable with one hard left edge, day and hours on one baseline, the nights under */
@media (max-width: 1099px) {
  .board { text-align: left; }
  .row { display: grid; grid-template-columns: 1fr auto; align-items: last baseline; gap: 6px 16px; padding: 18px 0; }
  .day { grid-row: 1; font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1; }
  .hrs, .row.is-today .hrs { grid-row: 1; grid-column: 2; margin: 0; font-weight: 600; font-size: 1rem; text-align: right; white-space: nowrap; color: var(--paper); }
  .night { grid-column: 1 / -1; max-width: none; font-size: 1.0625rem; line-height: 1.4; text-wrap: wrap; }
  .board-note { max-width: 760px; margin-top: 32px; text-align: left; }
}

/* 404 */
.lost { background: var(--navy); }
.lost-main { background: var(--navy); color: var(--paper); padding: 72px 0 120px; min-height: 70svh; }
.lost-main h1 { margin-top: 20px; max-width: 12ch; font-size: clamp(3rem, 11vw, 6.5rem); line-height: .98; -webkit-text-stroke: 0; }
.lost-main .fact { margin-top: 20px; font-size: 1.125rem; }
.lost .foot { padding-top: 32px; border-top: 1px solid rgba(231, 214, 180, .3); }