/* Shared by every gallery-*.html page. Design rules: see DESIGN.md */
:root {
  --ivory: #F8F7F1;
  --ink: #1A1A1A;
  --cobalt: #2D6CB7;
  --coral: #EF7651;
  --ochre: #D9A95B;
  --mint: #9BBDB6;
  --muted: #5f5d58;
  --hair: rgba(26,26,26,.2);
  --serif: "Fraunces", "Noto Serif Thai", Georgia, serif;
  --sans: "Montserrat", "Noto Sans Thai", system-ui, sans-serif;
  --head: 96px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink); line-height: 1.7;
  background: var(--ivory) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .08  0 0 0 0 .05  .09 0 0 0 -.02'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23p%29'/%3E%3C/svg%3E"); }
img { max-width: 100%; display: block; }
/* deter casual saving: no drag, no iOS long-press menu (see the contextmenu listener) */
img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.01em; margin: 0; }

header { position: sticky; top: 0; z-index: 20; background: inherit; }
.bar { display: flex; align-items: center; justify-content: space-between; height: var(--head); }
.logo img { height: 72px; width: auto; }
.nav { display: flex; gap: 44px; }
.nav a { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current] { color: var(--cobalt); border-color: currentColor; }
details.menu { display: none; position: relative; }
details.menu summary { list-style: none; cursor: pointer; padding: 8px; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu summary span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }
details.menu .nav { position: absolute; right: 0; top: 48px; flex-direction: column; gap: 10px; padding: 20px 28px; background: var(--ivory); border: 1px solid var(--ink); }

section { position: relative; padding: 40px 0 72px; overflow-x: clip; }
.sec-head { display: flex; align-items: baseline; gap: 24px; margin-bottom: 20px; }
.sec-head .line { flex: 1; height: 1px; background: var(--ink); opacity: .5; translate: 0 -.3em; }
.motif { position: absolute; pointer-events: none; z-index: -1; filter: url(#wc); mix-blend-mode: multiply; }

/* category tabs: add one link per new gallery page */
.tabs { display: flex; gap: 32px; margin-bottom: 40px; }
.tabs a { padding: 6px 0; border-bottom: 1px solid transparent; }
.tabs a:hover, .tabs a[aria-current] { color: var(--cobalt); border-color: currentColor; }

/* prints */
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.print { margin: 0; background: #fff; aspect-ratio: 1; padding: 6px; box-shadow: 0 8px 24px rgba(26,26,26,.14); transition: transform .25s; cursor: zoom-in; }
.print img { width: 100%; height: 100%; object-fit: cover; }
.grid a:nth-child(odd) .print { transform: rotate(-1.5deg); }
.grid a:nth-child(even) .print { transform: rotate(1.5deg); }
.grid a:hover .print, .grid a:focus-visible .print { transform: rotate(0) scale(1.03); }

/* guide frames: hold places until photos arrive (see the comment above each .grid) */
.grid > .slot { display: grid; cursor: default; }
.grid > .slot:nth-child(odd) { transform: rotate(-1.5deg); }
.grid > .slot:nth-child(even) { transform: rotate(1.5deg); }
.slot span { display: grid; place-items: center; padding: 8px; text-align: center; border: 1px dashed var(--hair); background: rgba(26,26,26,.03); color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.soon { margin: -16px 0 32px; color: var(--muted); }

.signoff { margin-top: 56px; text-align: center; }
.note { font-family: "Caveat", cursive; color: var(--cobalt); font-size: 36px; transform: rotate(-6deg); display: inline-block; line-height: 1; }

/* lightbox */
html:has(dialog[open]) { overflow: hidden; }
.lb { padding: 0; border: 0; background: none; max-width: 100vw; max-height: 100vh; overflow: visible; }
.lb::backdrop { background: rgba(26,26,26,.9); }
.lb img { max-width: min(92vw, 1000px); max-height: 92vh; background: #fff; padding: 8px; }
.lb button { position: fixed; padding: 16px; border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.lb .x { top: 4px; right: 8px; }
.lb .l { left: 4px; top: 50%; translate: 0 -50%; }
.lb .r { right: 4px; top: 50%; translate: 0 -50%; }

footer { padding: 28px 0 40px; border-top: 1px solid var(--hair); }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); }
.mbar { display: none; }

@media (max-width: 900px) {
  :root { --head: 72px; }
  .logo img { height: 54px; }
  .bar > .nav { display: none; }
  details.menu { display: block; }
  section { padding: 24px 0 52px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
  .tabs { flex-wrap: wrap; gap: 4px 22px; } /* four tabs don't fit one phone row; sections clip overflow, so Event was cut off */
  /* mobile 'LINE' pill: always one tap from ordering/booking. body padding keeps it off the footer. */
  body { padding-bottom: 76px; }
  .pre-page .grid > :nth-child(n+13) { display: none; }
  .mbar { display: flex; justify-content: center; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; padding: 14px; border-radius: 999px; background: var(--ink); color: var(--ivory); font-size: 12px; font-weight: 600; letter-spacing: .06em; box-shadow: 0 8px 24px rgba(26,26,26,.25); }
}

/* pager: 20 prints per page, set in gallery.js */
.grid > [hidden] { display: none; } /* .slot sets display: grid */
.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin-top: 48px; }
.pager a { display: inline-grid; place-items: center; min-width: 36px; min-height: 44px; padding: 0 4px; text-underline-offset: 8px; }
.pager span { color: var(--muted); }
/* before gallery.js paginates, show only page 1 so the grid doesn't jump; keep these counts equal to PER in gallery.js */
.pre-page .grid > :nth-child(n+21) { display: none; }

/* order CTA under each gallery */
.cta { margin-top: 64px; text-align: center; }
.cta p { margin: 0; }
.cta p span { color: var(--muted); }
.btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 28px; margin-top: 24px; }
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; padding: 14px 28px; color: var(--ivory); font-size: 12px; font-weight: 600; letter-spacing: .06em; transition: transform .2s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--ink); filter: url(#wc); transition: background .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:hover::before { background: var(--cobalt); }
.btn-line { position: relative; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid var(--ink); }
.btn-line::after { content: ""; position: absolute; inset: -12px -6px; } /* ~44px tap area */
.btn-line:hover { color: var(--cobalt); border-color: var(--cobalt); }
.pager a:hover, .pager a[aria-current] { color: var(--cobalt); text-decoration: underline; }