/* Necessary Goose. A dark gallery wall: the photos supply the colour, and the
   words stay out of their way. One theme on purpose, for the photographs. */
:root {
  --wall: #100f0c;
  --wall-2: #1a1814;
  --ink: #f1ebdd;
  --ink-2: #b5ac9b;
  --line: #322e27;
  --amber: #e0a83e;
  --notice: #e0a83e;
  --notice-ink: #1c1405;
  --urgent: #a8301f;
  --wrap: 62rem;
  --wrap-wide: 84rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--wall); color: var(--ink); font: 400 1.0625rem/1.6 var(--font); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 1.25rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
[hidden] { display: none !important; }

.wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: min(100%, var(--wrap-wide)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--wall); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }
.preview-ribbon { background: var(--amber); color: var(--notice-ink); text-align: center; font-size: .85rem; font-weight: 600; padding: .25rem; }

/* The banner, from 2B. */
.site-alert { background: var(--wall-2); border-bottom: 1px solid var(--line); }
.site-alert[data-level="notice"] { background: var(--notice); color: var(--notice-ink); border: 0; }
.site-alert[data-level="urgent"] { background: var(--urgent); color: #fff; border: 0; }
.site-alert-inner { display: flex; flex-wrap: wrap; gap: .15rem .75rem; align-items: baseline; padding-block: .65rem; }
.site-alert-until { opacity: .8; }

/* Header */
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 1.1rem; }
.brand img { border-radius: 7px; }
.site-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; font-size: .95rem; }
.site-nav a { color: var(--ink-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--ink); }
.site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: .35em; }

/* The header photo, with the name across the top of it. The band of shade
   keeps the name readable on whatever photo goes here next. */
.hero { position: relative; background: var(--wall-2); }
.hero-photo { width: 100%; height: auto; max-height: 120vh; max-height: 120dvh; object-fit: cover; object-position: 50% 30%; }
.hero::after { content: ""; position: absolute; inset: 0 0 auto; height: 56%; background: linear-gradient(to bottom, rgb(16 15 12 / .74), rgb(16 15 12 / .4) 45%, rgb(16 15 12 / 0)); pointer-events: none; }
.hero-words { position: absolute; inset: 0 0 auto; z-index: 1; padding-top: clamp(.6rem, 2.4vw, 1.75rem); text-shadow: 0 1px 14px rgb(0 0 0 / .45); }
.hero h1 { font-size: clamp(2.2rem, 10.2vw, 7rem); letter-spacing: -.02em; line-height: 1; }
.hero .tagline { font-size: clamp(.9rem, 2.6vw, 1.6rem); margin-top: clamp(.15rem, 1vw, .6rem); color: #f6c465; }
.welcome { padding-block: clamp(2rem, 6vw, 4rem); }
.welcome .lede { font-family: var(--font-display); font-size: clamp(1.2rem, 2.8vw, 1.6rem); line-height: 1.4; color: var(--ink); max-width: 46rem; margin-inline: auto; }
/* The name is on the photo right below, so the header needn't say it too. */
body:has(.hero) .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Other pages */
.masthead { padding-block: clamp(1.5rem, 5vw, 4rem) clamp(2rem, 6vw, 4.5rem); }
.masthead h1 { letter-spacing: -.02em; line-height: .98; }
.masthead-page h1 { font-size: clamp(2.5rem, 8vw, 5rem); }
.tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(1.2rem, 2.6vw, 1.55rem); color: var(--amber); margin: .9rem 0 0; }

/* The collection. The list runs oldest to newest (2B adds a new photo at the
   end), so it's stacked in reverse: the newest photo is at the top, and each
   photo's number counts up from the first one ever posted. */
.gallery { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: clamp(3.5rem, 9vw, 7rem); counter-reset: plate; }
.gallery li { counter-increment: plate; }
.gallery figure { margin: 0; display: grid; justify-items: center; gap: .5rem; }
.gallery img { order: 0; width: auto; max-width: 100%; max-height: 90vh; max-height: 90dvh; cursor: zoom-in; min-height: min(60vh, 75vw); object-fit: contain; }
.gallery img.is-in { min-height: 0; }
.gallery figure::after { order: 1; content: "No. " counter(plate); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-top: .55rem; }
.gallery figcaption { order: 2; font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.3; text-align: center; max-width: 38rem; text-wrap: balance; }
.collection { padding-bottom: clamp(3rem, 8vw, 6rem); }

/* Goosed Up: other people's geese. The amber rule sets it apart from the collection. */
.goosed { padding-bottom: clamp(3rem, 8vw, 6rem); }
.goosed-head { border-top: 2px solid var(--amber); padding-top: 1.1rem; margin-bottom: 1.75rem; max-width: 46rem; margin-inline: auto; }
.goosed-head h2 { color: var(--amber); margin-bottom: .6rem; }
.goosed-head p { color: var(--ink-2); margin-bottom: .35rem; }
.goosed-send { white-space: nowrap; font-weight: 600; }
.goosed-fine { font-size: .85rem; }
.goosed-empty { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.35rem); text-align: center; padding-block: 1.5rem; border: 1px dashed var(--line); border-radius: 4px; max-width: 46rem; width: 100%; margin-inline: auto; counter-increment: none !important; }
.goosed-list figure::after { content: none; }
.collection-title { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

/* Full screen, and closer still */
.zoom { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; overflow: auto; overscroll-behavior: contain; }
.zoom::backdrop { background: #000; }
.zoom img { width: 100%; height: 100%; max-width: none; object-fit: contain; cursor: zoom-in; }
.zoom.is-zoomed img { width: max(300vw, 2400px); height: auto; cursor: zoom-out; }
.zoom-close { position: fixed; top: max(.75rem, env(safe-area-inset-top)); right: .75rem; font: inherit; font-size: .95rem; color: var(--ink); background: rgb(16 15 12 / .75); border: 1px solid var(--line); border-radius: 999px; padding: .4rem 1rem; cursor: pointer; }

/* Sections */
.section { padding-block: clamp(2.5rem, 7vw, 4.5rem); border-top: 1px solid var(--line); }

/* Notices */
.posts { display: grid; gap: 2.25rem; }
.post { display: grid; gap: 1rem; }
.post-date, .event-date { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.post h3, .event h3 { font-size: 1.5rem; margin: .3rem 0 .45rem; }
.post-text, .event p { color: var(--ink-2); }
.post-photo { border-radius: 4px; }
.more { display: inline-block; margin-top: .5rem; }
@media (min-width: 44rem) { .post:has(.post-photo:not([hidden])) { grid-template-columns: 16rem 1fr; } }

/* Coming up */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.event { display: grid; gap: .25rem 1.5rem; }
.event h3 { margin-top: 0; }
@media (min-width: 44rem) { .event { grid-template-columns: 10rem 1fr; } .event-date { padding-top: .45rem; } }

/* The exhibits */
.exhibits { padding-bottom: clamp(3rem, 8vw, 5rem); }
.exhibits .wrap-wide { display: grid; gap: clamp(3rem, 8vw, 6rem); }
.exhibit { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.exhibit figcaption { font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.3; text-align: center; text-wrap: balance; }
.exhibit figcaption b { font-weight: 400; color: var(--amber); }
.ba { --pos: 50%; position: relative; width: min(100%, 90vh * var(--ratio, 1.333)); max-width: 100%; overflow: hidden; touch-action: pan-y; }
.ba[style*="3/4"] { --ratio: .75; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--ink); box-shadow: 0 0 6px rgb(0 0 0 / .6); pointer-events: none; }
.ba-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem; margin: -1.3rem 0 0 -1.3rem; border-radius: 50%; background: var(--ink) url("/img/goose.svg") center / 68% no-repeat; box-shadow: 0 2px 10px rgb(0 0 0 / .55); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba-range:focus-visible ~ .ba-line, .ba:has(.ba-range:focus-visible) .ba-line { outline: 2px solid var(--amber); }
.ba-tag { position: absolute; top: .65rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; background: rgb(16 15 12 / .72); padding: .2rem .55rem; border-radius: 3px; pointer-events: none; }
.ba-tag-before { left: .65rem; }
.ba-tag-after { right: .65rem; }

/* House rules */
.rules { margin: 0; padding: 0 0 0 1.6em; font-family: var(--font-display); font-size: clamp(1.2rem, 3vw, 1.6rem); line-height: 1.35; display: grid; gap: .55rem; }
.rules li::marker { color: var(--amber); }

.how { max-width: 44rem; }
.how p { color: var(--ink-2); }
.how p:last-child { color: var(--ink); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 1.75rem 2.5rem; font-size: .92rem; color: var(--ink-2); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 2rem; }
.site-footer p { margin: 0; }