/* 811 Events at The Cook Building
   Tokens come from the venue's own logo (cream, ink, antique gold) and the
   building (brick, wood). The one signature element is the building diagram
   in the hero: three floors, five rooms, drawn as the navigation.
   Headings are Fraunces, a soft serif chosen on 2026-09-24 when the owner
   asked for a main font that is easier to read than Bodoni Moda. */

:root {
  --cream: #F5F0E8;
  --cream-2: #ECE5D6;
  --line: #D8CEBB;
  --ink: #17130F;
  --ink-2: #3F352C;
  --plank: #6B5137;
  --brick: #8B3A2B;
  --brick-deep: #6E2D21;
  --gold: #B3925C;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --max: 76rem;
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  /* The page column's side padding on a full-width box: the header bar and the tinted bands. */
  --edge: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
  --gap: clamp(1.5rem, 3vw, 3rem);
  --radius: 2px;
  --tap: 2.75rem;      /* 44 px: the smallest tap target */
  --tap-pad: 0.7rem;   /* invisible hit area above and below an inline link */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);  /* starts fast, so a response is felt at once */
  --press: scale 120ms var(--ease-out);        /* the transition every pressable shares; its :active rule sets the scale */
}

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

html {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body { margin: 0; }

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }

a { color: inherit; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* Hover colours are for a mouse. A touch screen keeps :hover on whatever was tapped last, so there the tapped link would stay brick. */
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: var(--brick); } }

:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 5vw, 4rem); line-height: 1.04; font-variation-settings: "opsz" 96; }
.h1-line { display: block; }
h2 { font-size: clamp(2.125rem, 4vw, 3.25rem); line-height: 1.08; font-variation-settings: "opsz" 72; }
h3 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.12; font-variation-settings: "opsz" 48; }
p { margin: 0 0 1rem; }
::selection { background: var(--brick); color: var(--cream); }
.nowrap { white-space: nowrap; }
ul, ol { margin: 0; padding: 0; }

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--ink); color: var(--cream); padding: 0.75rem 1rem; z-index: 100;
}
.skip:focus { top: 1rem; }

/* Small uppercase labels share one rule; each use sets only its colour or spacing. */
.eyebrow, .floor__label, .space__meta, .packages thead th {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--plank);
}
.eyebrow { letter-spacing: 0.16em; margin: 0 0 1rem; }

.button {
  display: inline-block; padding: 0.9rem 1.5rem; border: 1px solid var(--ink);
  background: var(--ink); color: var(--cream); font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em; text-decoration: none; border-radius: var(--radius);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, var(--press);
}
.button--ghost { background: transparent; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--brick); border-color: var(--brick); color: var(--cream); }
  .button--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
}
.button:active, .nav-toggle:active { scale: 0.97; }
.button--small { padding: 0.6rem 1rem; font-size: 0.85rem; }

/* Header ----------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  /* The bar spans the window; its contents line up with the page column, like the tinted bands. */
  padding: 0.9rem var(--edge);
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none;
}
.wordmark__logo { display: block; height: 3rem; width: auto; }

.site-nav { display: flex; align-items: center; gap: 1.6rem; font-size: 0.92rem; font-weight: 500; }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }
.site-nav a:not(.button) { transition: color 160ms ease; }  /* not `.site-nav a`: that would replace the Book a tour button's own transitions */
@media (hover: hover) and (pointer: fine) { .site-nav a:not(.button):hover { color: var(--brick); } }
/* Past the phone menu (1 px above its max-width: 52rem), the links sit centred in the space between the
   logo and the tour button. */
@media (min-width: 52.0625rem) {
  .site-nav { flex: 1; }
  .site-nav > a:first-child, .site-nav > .button { margin-left: auto; }
}

.nav-toggle {
  display: none; align-items: center; gap: 0.6rem; min-height: var(--tap); background: none; border: 1px solid var(--line);
  padding: 0.5rem 0.8rem; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink); border-radius: var(--radius);
  transition: var(--press);
}
.header-call { display: none; }
.nav-toggle__bar { width: 18px; height: 1px; background: var(--ink); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); }

@media (max-width: 52rem) {
  .nav-toggle { display: inline-flex; }
  .site-header { gap: 0.75rem; }
  .header-call { display: inline-flex; align-items: center; min-height: var(--tap); margin-left: auto; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--pad) 1.25rem;
    background: var(--cream); border-bottom: 1px solid var(--line);
  }
  .site-nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
  .site-nav .button { margin-top: 1rem; justify-content: center; border-bottom: 1px solid var(--ink); }  /* `.site-nav a` makes the button a flex box, which `text-align` cannot centre */
  body.nav-open .site-nav { display: flex; animation: menu-in 200ms var(--ease-out); }
  body.nav-closing .site-nav { display: flex; animation: menu-out 150ms var(--ease-out) forwards; }
  /* #81: until site.js marks <html> with `js` (the script not loaded, or failed before the menu was wired) the
     links are one scrollable row between the wordmark and the Call link, at the toggle's height, and the toggle
     keeps its box, invisible, at the end. When the script arrives the row leaves the flow and the toggle shows in
     the box it already had, so the header, the Call link and everything below stay where they were. The row is a
     scroll container, which clips whatever hangs outside it, so a focused link's ring sits inside the link. Only
     the nav, the toggle and the Call link's order are styled: privacy.html's header has no menu. */
  html:not(.js) .nav-toggle { visibility: hidden; order: 2; }
  html:not(.js) .header-call { order: 1; }
  html:not(.js) .site-nav {
    display: flex; position: static; flex: 1; min-width: 0; flex-direction: row; align-items: center; gap: 1rem;
    padding: 0; overflow-x: auto; background: none; border-bottom: 0; scrollbar-width: none;
  }
  html:not(.js) .site-nav a:not(.button) { padding: 0; border-bottom: 0; }
  html:not(.js) .site-nav a { white-space: nowrap; }
  html:not(.js) .site-nav .button { margin-top: 0; padding: 0.6rem 1rem; }  /* its own padding, not the menu's 0.8rem 0 */
  html:not(.js) .site-nav a:focus-visible { outline-offset: -3px; }
  /* #95: the Book a tour button's ring now sits on its dark fill, where brick is 2.4:1; cream is about 16:1. */
  html:not(.js) .site-nav .button:focus-visible { outline-color: var(--cream); }
  /* #95: a browser that draws permanent scrollbars and lacks `scrollbar-width` (Chrome before 121, Safari before 18.2) would add the
     scrollbar's height to the row and make the header taller than it is with the script. Those browsers know this pseudo-element. */
  html:not(.js) .site-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 22.5rem) {
  .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* The phone menu fades in, with a small drop unless the visitor asked for less motion, and fades out a little quicker. The fade-out is
   an animation that site.js starts with a class on <body> when the menu closes, not a transition on the closed menu: the closed
   menu is the state the no-script row (#81) changes into when site.js adds `js`, and a transition there would paint the row first and
   fade it out under the header at load. `forwards` keeps the menu faded out until site.js takes the class off, 200 ms after it put it on. */
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-out { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes menu-in { from { opacity: 0; translate: 0 -0.4rem; } }
  @keyframes menu-out { to { opacity: 0; translate: 0 -0.4rem; } }
}

/* Hero ------------------------------------------------------------------- */

.hero {
  max-width: var(--max); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--pad) clamp(2rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); gap: var(--gap); align-items: center;
}
.hero__text .eyebrow { margin-bottom: 1.5rem; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-2); max-width: 36em; margin-top: 1.5rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.actions__alt { margin: 1rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
.actions__alt a { display: inline-block; padding-block: var(--tap-pad); margin-block: calc(-1 * var(--tap-pad)); }

@media (max-width: 60rem) {
  .hero { grid-template-columns: 1fr; }
}

/* The building diagram: three floors of rooms as navigation. */

.building {
  --frame: var(--ink);
  max-width: 26rem; margin: 0 auto; width: 100%;
  font-size: 0.9rem;
}
.building__cornice {
  height: 0.9rem; background: var(--frame); margin: 0 -0.35rem;
  clip-path: polygon(0 100%, 0 45%, 2% 45%, 2% 0, 98% 0, 98% 45%, 100% 45%, 100% 100%);
}
.building__floors {
  list-style: none; border: 1px solid var(--frame); border-top: 0; border-bottom: 0; background: var(--cream-2);
}
.floor {
  display: grid; grid-template-columns: 5rem 1fr; border-bottom: 1px solid var(--frame);
}
.floor__label {
  font-size: 0.72rem; padding: 0.9rem 0.6rem; border-right: 1px dashed var(--line); display: flex; align-items: center;
}
.floor__rooms { display: grid; grid-template-columns: 1fr; }
.floor__rooms--three { grid-template-columns: repeat(3, 1fr); }
.floor__rooms--ground { grid-template-columns: 2fr 1fr; }
.room {
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  min-height: 5.6rem; padding: 0.9rem 0.9rem; text-decoration: none;
  border-left: 1px solid var(--line);
  transition: background-color 160ms ease, color 160ms ease;
}
.floor__rooms > .room:first-child { border-left: 0; }
.room__name { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.05; font-variation-settings: "opsz" 48; }
.room__cap { font-size: 0.82rem; color: var(--plank); }
.room:focus-visible { background: var(--brick); color: var(--cream); }
.room:focus-visible .room__cap { color: var(--cream-2); }
@media (hover: hover) and (pointer: fine) {
  .room:hover { background: var(--brick); color: var(--cream); }
  .room:hover .room__cap { color: var(--cream-2); }
}
/* After the hover rules, so a press shows under a mouse as well: a shade deeper than the hover brick. */
.room:active { background: var(--brick-deep); color: var(--cream); }
.room:active .room__cap { color: var(--cream-2); }
.room--studio .room__name { font-size: 1.05rem; }
.building__base {
  background: var(--frame); color: var(--cream); padding: 0.9rem 1rem 1.1rem; display: flex; justify-content: center;
}
.building__door { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.5rem 1.6rem; border: 1px solid var(--gold); }
.building__num { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--gold); letter-spacing: 0.04em; }
.building__street { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-2); }

@media (max-width: 36rem) {
  .floor { grid-template-columns: 4.25rem 1fr; }
  .floor__rooms, .floor__rooms--three, .floor__rooms--ground { grid-template-columns: 1fr; }
  .room { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 0.75rem; min-height: 0; padding: 0.8rem 0.9rem; border-left: 0; border-top: 1px solid var(--line); }
  .floor__rooms > .room:first-child { border-top: 0; }
  .room__name { font-size: 1.2rem; }
  .room--studio .room__name { font-size: 1.2rem; }
  .actions .button { flex: 1 1 100%; text-align: center; }
}
@media (max-width: 22.5rem) {
  .room { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .building { animation: rise 700ms cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* Photo strip ------------------------------------------------------------ */

.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream-2); }
/* max-width: six 480 px tiles plus five 2 px gaps; at 4 / 3 a tile is 480x360 px, below every strip photo's own
   pixels (the smallest photo, 595x458, is shown at 0.81x). tools/check_site.py derives the tile from this max-width,
   the gap and the li aspect-ratio and checks each photo's object-fit: cover scale (#67). */
.strip__list {
  list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  max-width: 2890px; margin-inline: auto;
}
.strip__list li { aspect-ratio: 4 / 3; overflow: hidden; }
.strip__list img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 60rem) {
  .strip__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 36rem) {
  .strip__list { grid-template-columns: repeat(2, 1fr); }
}

/* Sections --------------------------------------------------------------- */

.section { max-width: var(--max); margin: 0 auto; padding: clamp(3.5rem, 8vw, 7rem) var(--pad); }
.section--band {
  max-width: none; background: var(--cream-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-left: var(--edge);
  padding-right: var(--edge);
}
.section__head { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.section__lede { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--ink-2); margin-top: 1.25rem; }
/* Long-form text pages (privacy): a readable measure and document-sized headings. */
.prose { max-width: 44rem; }
.prose h2 { font-size: clamp(1.35rem, 2vw, 1.6rem); margin: 2.25rem 0 0.75rem; }

/* Spaces ----------------------------------------------------------------- */

.space {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--gap);
  align-items: start; padding: clamp(2rem, 4vw, 3.5rem) 0; border-top: 1px solid var(--gold);
}
.space--flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.space--flip .space__text { order: 2; }
.space__text { position: sticky; top: 5.5rem; }
.space__meta { color: var(--brick); margin-bottom: 0.75rem; }
.space__text h3 { margin-bottom: 1rem; }
.facts { list-style: none; margin: 1.25rem 0 1.25rem; display: grid; gap: 0.35rem; }
.facts li { padding-left: 1.1rem; position: relative; color: var(--ink-2); font-size: 0.95rem; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.5rem; height: 1px; background: var(--gold); }
.plans { font-size: 0.9rem; color: var(--plank); margin-top: calc(-1 * var(--tap-pad)); }
.plans a { display: inline-block; padding-block: var(--tap-pad); }

/* width: 100% keeps a flipped gallery (justify-self start or end) from shrinking to nothing before its photos load. */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; width: 100%; max-width: 40rem; }
.gallery picture { overflow: hidden; background: var(--cream-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.gallery > :first-child { grid-column: 1 / -1; }
.gallery > :first-child img { aspect-ratio: 3 / 2; }
.gallery--two > :first-child { grid-column: auto; }
.gallery--two > :first-child img { aspect-ratio: 4 / 3; }
.gallery--one { grid-template-columns: 1fr; max-width: 40rem; }
.gallery--one > :first-child img { aspect-ratio: 4 / 3; }
.space--flip .gallery { justify-self: end; }

/* A ruled list of 44 px link rows: the phone price index. */
.ruled-list { list-style: none; border-top: 1px solid var(--line); }
.ruled-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: var(--tap); border-bottom: 1px solid var(--line); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ruled-list a:hover { color: var(--brick); } }

@media (max-width: 60rem) {
  .space { grid-template-columns: 1fr; }
  .space--flip .space__text { order: 0; }
  .space__text { position: static; }
  .space--flip .gallery { justify-self: start; }
}

.studio {
  margin-top: clamp(2rem, 4vw, 3.5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--gold);
  max-width: 40rem;
}
.studio h3 { margin-bottom: 0.75rem; }
.studio p:last-child { margin-bottom: 0; }

/* Wedding day ------------------------------------------------------------ */

.day {
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
}
.day__step { border-top: 1px solid var(--gold); padding-top: 1.25rem; }
/* Each step shows its room: the photo (a .zoom button once site.js runs) comes first. */
.day__step > :first-child { max-width: 40rem; margin-bottom: 1.25rem; }
.day__step picture { overflow: hidden; background: var(--cream-2); }
.day__step img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.day__step h3 { margin-bottom: 0.6rem; }
.day__step p { color: var(--ink-2); margin: 0; }
.day__included { margin-top: clamp(2rem, 4vw, 3rem); max-width: 38rem; color: var(--ink-2); }
@media (max-width: 60rem) {
  .day { grid-template-columns: 1fr; }
}

/* Prices: the three set-ups ---------------------------------------------- */

.setup-index { display: none; }
.setups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
/* One card per set-up, so each photo, price and list reads as one choice: a short photo cropped to the
   table, then the name and price, what's included (level across the three cards), then the price rows. */
.setup { background: var(--cream-2); border: 1px solid var(--line); }
.setup picture { overflow: hidden; }
.setup img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; object-position: 50% 58%; }
.setup__body { padding: 1.25rem 1.25rem 1.5rem; }
.setup h3 { margin-bottom: 0.35rem; }
.setup__price { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin-bottom: 0.9rem; font-variation-settings: "opsz" 48; }
.setup__tiers { list-style: none; margin: 0; display: grid; gap: 0.3rem; font-size: 0.92rem; color: var(--ink-2); }
.setup__tiers li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
.setup__tiers li span:last-child { white-space: nowrap; color: var(--ink); }
.setup__includes { color: var(--ink-2); font-size: 0.95rem; margin: 0 0 1.1rem; }
.packages__next { margin-top: clamp(2rem, 4vw, 3rem); }
.packages__next p { margin: 0; color: var(--ink-2); }
.packages__next .actions { margin-top: 1.25rem; }
@media (max-width: 60rem) {
  .setups { grid-template-columns: 1fr; }
  .setup { max-width: 30rem; }
  .setup-index { display: grid; margin: 0 0 clamp(2rem, 5vw, 3rem); }
  .setup-index a { font-family: var(--font-display); font-size: 1.2rem; font-variation-settings: "opsz" 48; }
  .setup-index span { font-family: var(--font-body); font-size: 0.95rem; color: var(--ink-2); }
}

/* What we host: the kinds of event, as the hero names them --------------- */

.host { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.host__item { border-top: 1px solid var(--line); padding-top: 1rem; }
.host__item h3 { margin-bottom: 0.4rem; }
.host__item p { color: var(--ink-2); margin: 0 0 0.6rem; }
.host__setups { font-size: 0.9rem; }
@media (max-width: 60rem) {
  .host { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem var(--gap); }
}
@media (max-width: 36rem) {
  .host { grid-template-columns: 1fr; }
}

/* About ------------------------------------------------------------------ */

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.about__text p { color: var(--ink-2); max-width: 36em; }
.about__text h2 { margin-bottom: 1.25rem; }
.about__gallery { max-width: none; }
/* Both building-section tiles are 3:4 frames. The exterior is portrait and shows whole, with its sign and lettering; the landscape street photo is cropped to fit, the couple centred. */
.gallery--two.about__gallery picture img { aspect-ratio: 3 / 4; }
@media (max-width: 60rem) { .about { grid-template-columns: 1fr; } }

/* Tours ------------------------------------------------------------------ */

.tours { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--gap); align-items: start; }
.tours__text h2 { margin-bottom: 0.5rem; }
.contact { font-style: normal; border: 1px solid var(--gold); padding: clamp(1.5rem, 3vw, 2.25rem); align-self: stretch; }
.contact p { margin: 0; }
.contact .contact__name { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; margin-bottom: 0.75rem; text-wrap: balance; font-variation-settings: "opsz" 48; }
.contact a { display: inline-flex; align-items: center; min-height: var(--tap); }
/* No box of its own: the widget draws its own card, and a border or a lighter frame around it showed as an outline and an empty band above it. */
.tour-calendar { grid-column: 1 / -1; scroll-margin-top: 6rem; }
.tour-calendar:focus { outline: none; }
.tour-calendar h3 { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; margin-bottom: 1rem; font-variation-settings: "opsz" 48; }
/* The loading line and the frame share one grid cell, the frame on top, so the line going away at load moves nothing. */
.tour-calendar__frame { display: grid; min-height: 30rem; }
.tour-calendar__frame > * { grid-area: 1 / 1; }
.tour-calendar__frame iframe { display: block; width: 100%; min-height: 30rem; border: 0; }
.tour-calendar__status { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--ink-2); }
.tour-calendar__fallback { margin: 1rem 0 0; font-size: 0.95rem; color: var(--ink-2); }
.tour-calendar__fallback a { display: inline-block; padding-block: var(--tap-pad); margin-block: calc(-1 * var(--tap-pad)); }
.tour-calendar[hidden] { display: none; }
@media (max-width: 60rem) { .tours { grid-template-columns: 1fr; } }

/* Footer ----------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line); padding: clamp(2.5rem, 5vw, 4rem) var(--pad); text-align: center;
  font-size: 0.92rem; color: var(--ink-2);
}
/* The logo JPG's own background is #EAE6DE; brightness(1.047) lifts it onto the page cream. */
.site-footer__logo { margin: 0 auto 1.25rem; width: 160px; filter: brightness(1.047); }
.site-footer a { display: inline-block; padding-block: var(--tap-pad); margin-block: calc(-1 * var(--tap-pad)); }
.site-footer__small { color: var(--plank); font-size: 0.82rem; margin: 0; }

/* Photo viewer ------------------------------------------------------------ */
/* site.js wraps each gallery photo in a .zoom button and opens the <dialog>
   below. Without JavaScript neither exists and the photos stay in the page. */

.zoom { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
/* An ink ring and a cream ring, so focus shows on any photo; the transparent outline is what forced-colours mode draws. */
.zoom:focus-visible { outline: 2px solid transparent; outline-offset: -2px; }
.zoom:focus-visible::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 6px var(--cream); pointer-events: none; }
/* In a gallery the grid row sets the photo height through the wrapper, as it did through the bare <picture>. */
.gallery > .zoom, .gallery > .zoom > picture { height: 100%; }

body.viewer-open { overflow: hidden; }

.viewer {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgba(23, 19, 15, 0.96); color: var(--cream); font-family: var(--font-body);
  touch-action: pan-y;
}
.viewer::backdrop { background: transparent; }
.viewer [hidden] { display: none; }
.viewer__figure { position: absolute; inset: 3.5rem 4.75rem 2.25rem; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; }
.viewer__figure picture { flex: 0 1 auto; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
/* A photo is never shown larger than its file. The 10rem (13rem on phones) is the figure's top and bottom inset plus the caption. */
.viewer__figure img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 10rem); max-height: calc(100dvh - 10rem); object-fit: contain; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.viewer__caption { flex: none; max-width: 46rem; margin: 0; padding: 0 0.5rem; text-align: center; font-size: 0.9rem; line-height: 1.45; color: var(--cream-2); text-wrap: balance; }
.viewer__count { position: absolute; top: 1.35rem; left: 1.5rem; margin: 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.viewer__button {
  position: absolute; width: 2.75rem; height: 2.75rem; padding: 0; margin: 0;
  border: 1px solid rgba(245, 240, 232, 0.4); border-radius: 50%;
  background: rgba(23, 19, 15, 0.55); color: var(--cream); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 160ms ease, color 160ms ease, var(--press);
}
@media (hover: hover) and (pointer: fine) { .viewer__button:hover { border-color: var(--gold); color: var(--gold); } }
/* `scale` composes with the arrows' `transform: translateY(-50%)`, so a press does not move them off centre. */
.viewer__button:active { scale: 0.95; }
.viewer__button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.viewer__button svg { width: 1.15rem; height: 1.15rem; }
.viewer__close { top: 0.9rem; right: 1rem; }
.viewer__arrow { top: 50%; transform: translateY(-50%); }
.viewer__arrow--prev { left: 1rem; }
.viewer__arrow--next { right: 1rem; }
@media (max-width: 40rem) {
  .viewer__figure { inset: 3.5rem 0.75rem 4.75rem; }
  .viewer__figure img { max-height: calc(100vh - 13rem); max-height: calc(100dvh - 13rem); }
  .viewer__arrow { top: auto; bottom: 0.9rem; transform: none; }
  .viewer__count { top: auto; bottom: 1.8rem; left: 50%; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] { animation: viewer-in 180ms ease-out; }
  @keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }
}