/* 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 */
}

*, *::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; }
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;
}
.button:hover { background: var(--brick); border-color: var(--brick); color: var(--cream); }
.button--ghost { background: transparent; color: var(--ink); }
.button--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.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):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);
}
.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; text-align: center; border-bottom: 1px solid var(--ink); }
  body.nav-open .site-nav { display: flex; }
}
@media (max-width: 22.5rem) {
  .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* 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:hover, .room:focus-visible { background: var(--brick); color: var(--cream); }
.room:hover .room__cap, .room:focus-visible .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 tiles of at most 480 px (the narrowest strip photo's width) plus five 2 px gaps, so a very wide
   screen shows no photo larger than its own pixels; tools/check_site.py enforces the sum. */
.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; }
.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; }
.tour-calendar__frame { min-height: 30rem; }
.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;
}
.viewer__button:hover { border-color: var(--gold); color: var(--gold); }
.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; } }
}