@charset "utf-8";
/* ────────────────────────────────────────────────────────────────
   Harms & Beers · The Family Album                gallery/gallery.css
   Same paper, brass frame, bottle-green band and typefaces as the
   home page. Every photo is a print sitting in a cream mat, the same
   object as the coaster on the front page.
   ──────────────────────────────────────────────────────────────── */

@font-face { font-family: "Alfa Slab One";  font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/AlfaSlabOne-400.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond";    font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/EBGaramond-400.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond";    font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/EBGaramond-400i.woff2") format("woff2"); }
@font-face { font-family: "Archivo Narrow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ArchivoNarrow-600.woff2") format("woff2"); }

/* Palette: identical to index.html so both pages read as one object. */
:root {
  --ink: #14150F; --bottle: #1E3A2B; --paper: #E8E2D0; --cream: #F3EEDE; --brass: #B08A3E; --moss: #4A5D43;
  --ground: var(--paper); --text: var(--ink); --text-soft: var(--moss); --accent: var(--brass); --label-ink: var(--moss);
  --coaster: var(--cream); --coaster-edge: rgba(20, 21, 15, 0.14);
  --coaster-shadow: 0 22px 44px -18px rgba(20, 21, 15, 0.45), 0 6px 14px -8px rgba(20, 21, 15, 0.25);
  --lift-shadow: 0 34px 56px -24px rgba(20, 21, 15, 0.6), 0 12px 20px -12px rgba(20, 21, 15, 0.32);
  --band-bg: var(--bottle); --band-text: #EDE7D5; --hairline: rgba(176, 138, 62, 0.55); --noise-opacity: 0.05;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --slab: "Alfa Slab One", Rockwell, Georgia, serif;
  --narrow: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #131811; --text: #E8E2D0; --text-soft: #A3B399; --accent: #C9A45C; --label-ink: #C9A45C; --coaster: #F3EEDE; --coaster-edge: rgba(20, 21, 15, 0.2); --coaster-shadow: 0 26px 52px -16px rgba(0, 0, 0, 0.75), 0 8px 18px -8px rgba(0, 0, 0, 0.5); --lift-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.85), 0 14px 22px -12px rgba(0, 0, 0, 0.5); --band-bg: #1B2D21; --band-text: #E8E2D0; --hairline: rgba(201, 164, 92, 0.5); --noise-opacity: 0.07; }
}
:root[data-theme="light"] { --ground: #E8E2D0; --text: #14150F; --text-soft: #4A5D43; --accent: #B08A3E; --label-ink: #4A5D43; --coaster: #F3EEDE; --coaster-edge: rgba(20, 21, 15, 0.14); --coaster-shadow: 0 22px 44px -18px rgba(20, 21, 15, 0.45), 0 6px 14px -8px rgba(20, 21, 15, 0.25); --lift-shadow: 0 34px 56px -24px rgba(20, 21, 15, 0.6), 0 12px 20px -12px rgba(20, 21, 15, 0.32); --band-bg: #1E3A2B; --band-text: #EDE7D5; --hairline: rgba(176, 138, 62, 0.55); --noise-opacity: 0.05; }
:root[data-theme="dark"]  { --ground: #131811; --text: #E8E2D0; --text-soft: #A3B399; --accent: #C9A45C; --label-ink: #C9A45C; --coaster: #F3EEDE; --coaster-edge: rgba(20, 21, 15, 0.2); --coaster-shadow: 0 26px 52px -16px rgba(0, 0, 0, 0.75), 0 8px 18px -8px rgba(0, 0, 0, 0.5); --lift-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.85), 0 14px 22px -12px rgba(0, 0, 0, 0.5); --band-bg: #1B2D21; --band-text: #E8E2D0; --hairline: rgba(201, 164, 92, 0.5); --noise-opacity: 0.07; }

/* ── Base, paper grain and the brass frame (as on the home page) ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); }
html.viewer-open { overflow: hidden; }
body { background: var(--ground); color: var(--text); font-family: var(--serif); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.frame { position: fixed; inset: 12px; z-index: 3; pointer-events: none; border: 2px solid var(--accent); box-shadow: 0 0 0 100vmax var(--ground); }
body::after { content: ""; position: fixed; inset: 18px; z-index: 1; pointer-events: none; border: 1px solid var(--hairline); }

main { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 64px 40px calc(72px + env(safe-area-inset-bottom, 0px)); text-align: center; overflow-x: clip; }
.album-head { max-width: 640px; margin: 0 auto; }

/* ── Type, straight from the home page ── */
.neck { display: inline-flex; align-items: center; gap: 14px; background: var(--band-bg); color: var(--band-text); border: 1px solid var(--hairline); padding: 9px 22px 8px; font-family: var(--narrow); font-weight: 600; font-size: 13px; letter-spacing: 0.32em; text-indent: 0.32em; text-transform: uppercase; text-decoration: none; transition: transform 0.25s var(--ease), box-shadow 0.25s, border-color 0.25s; }
a.neck:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 28px -16px rgba(20, 21, 15, 0.6); outline: none; }
.dia { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); opacity: 0.85; flex: 0 0 auto; }
.eyebrow { margin-top: 52px; font-family: var(--narrow); font-weight: 600; font-size: 14px; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--label-ink); }
h1 { margin-top: 18px; font-family: var(--slab); font-weight: 400; font-size: clamp(38px, 9vw, 56px); line-height: 1.08; letter-spacing: 0.01em; text-wrap: balance; }
h1 .amp { display: block; font-family: var(--serif); font-style: italic; font-size: 0.68em; line-height: 1.15; color: var(--accent); }
.datestamp { margin: 22px auto 0; max-width: 44ch; font-style: italic; font-size: 21px; color: var(--text-soft); text-wrap: pretty; }
.rule { display: flex; align-items: center; gap: 14px; margin: 44px auto 0; max-width: 420px; }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1 1 0; background: var(--hairline); }
.rule .dia { color: var(--accent); }
.heart { display: inline-block; width: 12px; height: 12px; margin: 0 auto 14px; position: relative; transform: rotate(45deg); background: var(--accent); }
.heart::before, .heart::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.heart::before { left: -7px; top: 0; }
.heart::after { top: -7px; left: 0; }
footer { margin-top: 58px; font-family: var(--narrow); font-weight: 600; font-size: 13px; letter-spacing: 0.34em; text-indent: 0.34em; text-transform: uppercase; color: var(--accent); }
footer a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
footer a:focus-visible { border-color: currentColor; outline: none; }
.empty { margin: 40px auto 0; max-width: 44ch; font-style: italic; color: var(--text-soft); }
.empty code { font-family: var(--narrow); font-style: normal; font-size: 0.85em; letter-spacing: 0.04em; }

/* ── Filter chips + shuffle ── */
.chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 34px auto 0; }
.chip { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 9px; background: transparent; border: 1px solid var(--hairline); color: var(--label-ink); padding: 8px 12px 7px 16px; font-family: var(--narrow); font-weight: 600; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.chip small { font-size: 10px; letter-spacing: 0.12em; opacity: 0.7; }
.chip:focus-visible { border-color: var(--accent); color: var(--text); outline: none; transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--band-bg); color: var(--band-text); border-color: var(--band-bg); }
.chip svg { width: 14px; height: 14px; flex: 0 0 auto; transition: transform 0.45s var(--ease); }
.chip-shuffle { margin-left: 8px; }
.chip-shuffle:active svg, .chip-shuffle.spin svg { transform: rotate(180deg); }

/* ── The album: prints in cream mats, laid out in columns ── */
.album { margin: 40px auto 0; columns: 3; column-gap: 32px; text-align: left; }
.print { display: inline-block; width: 100%; vertical-align: top; margin: 0 0 32px; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
.print-link { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; outline: none; }
.mat { display: block; position: relative; background: var(--coaster); border: 1px solid var(--coaster-edge); border-radius: 18px; padding: 12px 12px 10px; box-shadow: var(--coaster-shadow); transform: rotate(var(--tilt, 0deg)); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.mat::after { content: ""; position: absolute; inset: 6px; border-radius: 13px; border: 1px solid rgba(176, 138, 62, 0.45); pointer-events: none; }
.mat img { display: block; width: 100%; height: auto; border-radius: 9px; background: #DCD5C2; }
.print-link:focus-visible .mat { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: var(--lift-shadow); }
.print-link:focus-visible .mat { outline: 2px solid var(--accent); outline-offset: 4px; }
.cap-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 6px 0; }
.when { font-family: var(--narrow); font-weight: 600; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #4A5D43; line-height: 1.3; }
.num { font-family: var(--narrow); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; color: #B08A3E; white-space: nowrap; }
.cap { display: block; padding: 2px 6px 4px; font-style: italic; font-size: 17px; line-height: 1.35; color: #14150F; text-wrap: pretty; }

/* ── The viewer (a <dialog>): bottle-green room, print in a cream mat ── */
.viewer { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #E8E2D0; overflow: hidden; }
.viewer::backdrop { background: rgba(19, 24, 17, 0.85); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.viewer-bg { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 8%, #22392B 0%, #131811 72%); }
.viewer-bg::after { content: ""; position: absolute; inset: 0; opacity: 0.09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.viewer-top, .viewer-stage, .viewer-foot { position: relative; }
.viewer-top { display: flex; align-items: center; justify-content: space-between; padding: max(16px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 10px max(20px, env(safe-area-inset-left, 0px)); }
.viewer-count { font-family: var(--narrow); font-weight: 600; font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: #C9A45C; }
.viewer-tools { display: flex; gap: 8px; }
.viewer-btn, .viewer-nav { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(201, 164, 92, 0.5); background: rgba(232, 226, 208, 0.05); color: #E8E2D0; display: grid; place-items: center; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease); }
.viewer-btn:focus-visible, .viewer-nav:focus-visible { background: rgba(232, 226, 208, 0.14); border-color: #C9A45C; outline: none; }
.viewer-btn svg { width: 20px; height: 20px; }
.viewer-play[aria-pressed="true"] { background: #C9A45C; color: #14150F; border-color: #C9A45C; }
.viewer-play .ic-pause { display: none; }
.viewer-play[aria-pressed="true"] .ic-play { display: none; }
.viewer-play[aria-pressed="true"] .ic-pause { display: block; }

.viewer-stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 6px 78px; touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; }
.viewer-mat { position: relative; display: flex; max-width: 100%; max-height: 100%; background: #F3EEDE; padding: 10px; border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 10px 24px -10px rgba(0, 0, 0, 0.5); overflow: hidden; transition: opacity 0.16s ease, transform 0.42s var(--ease); }
.viewer-mat::after { content: ""; position: absolute; inset: 5px; border-radius: 11px; border: 1px solid rgba(176, 138, 62, 0.5); pointer-events: none; z-index: 1; }
.viewer-img { display: block; width: auto; height: auto; -webkit-user-drag: none; -webkit-touch-callout: none; max-width: calc(100vw - 176px); max-height: calc(100vh - 236px); max-height: calc(100dvh - 236px); border-radius: 8px; object-fit: contain; background: #DCD5C2; cursor: zoom-in; transform-origin: 50% 50%; transition: transform 0.28s var(--ease); will-change: transform; }
.viewer-img.no-anim { transition: none; }
.viewer.zoomed .viewer-img { cursor: zoom-out; }
.viewer-stage.swap .viewer-mat { opacity: 0; transform: translateX(calc(var(--dir, 1) * -24px)); }
.viewer-stage.no-anim .viewer-mat { transition: none; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(19, 24, 17, 0.55); }
.viewer-nav:focus-visible { transform: translateY(-50%) scale(1.06); }
.viewer-nav.prev { left: 16px; }
.viewer-nav.next { right: 16px; }
.viewer-nav svg { width: 22px; height: 22px; }

.viewer-foot { text-align: center; padding: 12px max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
.viewer-when { font-family: var(--narrow); font-weight: 600; font-size: 11px; letter-spacing: 0.3em; text-indent: 0.3em; text-transform: uppercase; color: #C9A45C; min-height: 1em; }
.viewer-cap { margin: 6px auto 0; max-width: 60ch; font-style: italic; font-size: 20px; line-height: 1.4; color: #E8E2D0; text-wrap: balance; }
.viewer-actions { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 12px; font-family: var(--narrow); font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; }
.viewer-actions a, .viewer-actions button { appearance: none; -webkit-appearance: none; background: none; border: 0; border-bottom: 1px solid rgba(201, 164, 92, 0.45); color: rgba(232, 226, 208, 0.82); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; padding: 6px 2px 4px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.viewer-actions a:focus-visible, .viewer-actions button:focus-visible { color: #FFFFFF; border-color: #C9A45C; outline: none; }
.viewer-nav-sm { display: none; }

/* ── Motion (skipped entirely for reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(16px); animation: rise 0.85s var(--ease) forwards; }
  .d1 { animation-delay: 0.08s; } .d2 { animation-delay: 0.18s; } .d3 { animation-delay: 0.3s; } .d4 { animation-delay: 0.4s; }
  .d5 { animation-delay: 0.5s; } .d6 { animation-delay: 0.6s; } .d7 { animation-delay: 0.7s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .print { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }
  .print.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mat, .chip, .neck, .viewer-img, .viewer-mat, .viewer-btn, .viewer-nav { transition: none; }
}

/* ── Hover effects only where a pointer can hover (touch screens skip them) ── */
@media (hover: hover) {
  a.neck:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 14px 28px -16px rgba(20, 21, 15, 0.6); }
  footer a:hover { border-color: currentColor; }
  .chip:hover { border-color: var(--accent); color: var(--text); transform: translateY(-1px); }
  .print-link:hover .mat { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: var(--lift-shadow); }
  .viewer-btn:hover, .viewer-nav:hover { background: rgba(232, 226, 208, 0.14); border-color: #C9A45C; }
  .viewer-nav:hover { transform: translateY(-50%) scale(1.06); }
  .viewer-actions a:hover, .viewer-actions button:hover { color: #FFFFFF; border-color: #C9A45C; }
}

/* ── Smaller screens ── */
@media (max-width: 1024px) {
  main { padding: 56px 28px 64px; }
  .album { columns: 2; column-gap: 26px; }
  .print { margin-bottom: 26px; }
}
@media (max-width: 720px) {
  .viewer-stage { padding: 6px 16px; }
  .viewer-nav { display: none; }
  .viewer-nav-sm { display: inline-block; }
  .viewer-img { max-width: calc(100vw - 52px); max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); }
  .viewer-cap { font-size: 17px; }
}
@media (max-width: 600px) {
  .frame { inset: 8px; }
  body::after { inset: 14px; }
  main { padding: 48px 22px calc(56px + env(safe-area-inset-bottom, 0px)); }
  .neck { gap: 10px; padding: 8px 14px 7px; font-size: 11.5px; letter-spacing: 0.24em; text-indent: 0.24em; }
  .album { columns: 1; margin-top: 30px; }
  .chips { gap: 8px; margin-top: 28px; }
  .chip { min-height: 40px; padding: 10px 11px 9px 14px; font-size: 11px; letter-spacing: 0.2em; }
  .datestamp { font-size: 19px; }
  .viewer-actions { gap: 12px; }
  .viewer-actions a, .viewer-actions button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 8px 8px; }
}

/* ── Phones held sideways: keep the photo big, tuck the chrome in ── */
@media (max-height: 520px) and (orientation: landscape) {
  .viewer-top { padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: 4px; }
  .viewer-btn { width: 38px; height: 38px; }
  .viewer-stage { padding: 4px 70px; }
  .viewer-img { max-width: calc(100vw - 160px); max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
  .viewer-foot { padding-top: 6px; }
  .viewer-when { display: none; }
  .viewer-cap { margin-top: 0; font-size: 15px; }
  .viewer-actions { margin-top: 2px; gap: 18px; }
  .viewer-actions a, .viewer-actions button { min-height: 0; padding: 6px 4px 4px; }
}