/* Interactive gallery: an endless wall of photos and films (logic in /js/gallery.js).
   Uses the page's own tokens (--bg, --ink, --gold, --glass ...) with the site defaults as fallbacks,
   so it looks at home on any page. Include with:
   <link rel="stylesheet" href="/css/gallery.css"> and <script src="/js/gallery.js" defer></script> */

.fg{
  --fg-gold:var(--gold,#C9A96E); --fg-ink:var(--ink,#1c1b19); --fg-mute:var(--mute,#5d5a52);
  --fg-line:var(--line,rgba(28,27,25,.12)); --fg-card:var(--card,#f6f2ea); --fg-glass:var(--glass,rgba(255,255,255,.55));
  --fg-bg:var(--bg,#F0EBE1); --fg-grad:var(--grad,linear-gradient(90deg,#d9c39a,#efc4c0,#b9b7e0));
  --fg-display:var(--display,'Josefin Sans',system-ui,sans-serif); --fg-body:var(--body,Jost,system-ui,sans-serif);
  --fg-ease:cubic-bezier(.2,.8,.2,1); --fg-edge:var(--fg-bg);
  position:relative;overflow:hidden;isolation:isolate;color:var(--fg-ink);font-family:var(--fg-body)
}
.fg-inline{height:clamp(440px,74vh,760px);border-radius:22px;border:1px solid var(--fg-line);background:var(--fg-card);--fg-edge:var(--fg-card)}
.fg-full{position:fixed;inset:0;z-index:1}
.fg-err{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;color:var(--fg-mute)}

/* the wall */
.fg-stage{position:absolute;inset:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;border-radius:inherit}
.fg-stage.is-dragging{cursor:grabbing}
.fg-stage.is-dragging .fg-tile{pointer-events:none}
.fg-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--fg-gold)}
@media (pointer:coarse){.fg-inline .fg-stage{touch-action:pan-y}}
.fg-world{position:absolute;inset:0;transform-origin:50% 50%}
/* soft edges so the wall melts into the page */
.fg-stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 70px 24px var(--fg-edge)}
.fg-full .fg-stage::after{box-shadow:inset 0 0 120px 40px var(--fg-edge)}

.fg-tile{position:absolute;left:0;top:0;display:block;padding:0;margin:0;border:1px solid var(--fg-line);border-radius:16px;overflow:hidden;background:var(--fg-glass);cursor:inherit;color:inherit;will-change:transform;box-shadow:0 10px 30px rgba(60,45,20,.08);-webkit-tap-highlight-color:transparent;font:inherit}
.fg-tile img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;opacity:0;transition:opacity .5s ease,transform .8s var(--fg-ease)}
.fg-tile img.is-in{opacity:1}
@media (hover:hover){.fg-tile:hover img{transform:scale(1.045)}.fg-tile:hover{box-shadow:0 18px 44px rgba(60,45,20,.16)}}
.fg-tile:focus-visible{outline:2px solid var(--fg-gold);outline-offset:3px}
.fg-badge{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;padding:6px 10px 5px 7px;border-radius:99px;font:600 11px/1 var(--fg-display);letter-spacing:.14em;text-transform:uppercase;background:rgba(20,20,22,.52);color:#f4efe6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.fg-badge svg{width:13px;height:13px;margin-top:-1px;fill:currentColor}

/* grid view: the same items as a plain scrolling grid */
.fg-grid{display:none}
.fg.is-grid .fg-stage{display:none}
.fg.is-grid .fg-grid{display:grid;position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;grid-template-columns:repeat(auto-fill,minmax(min(220px,42vw),1fr));gap:clamp(10px,1.4vw,16px);align-content:start;padding:20px 20px 96px}
.fg-full.is-grid .fg-grid{padding:calc(env(safe-area-inset-top,0px) + 96px + var(--fg-headh,0px)) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 104px) max(16px,env(safe-area-inset-left,0px))}
.fg-grid .fg-tile{position:relative;width:100%;height:0;padding-bottom:calc(100% / var(--fg-ar,1.333));cursor:zoom-in}
.fg-grid .fg-tile img{position:absolute;inset:0}

/* title card (full-page mode) */
.fg-head{position:absolute;z-index:3;left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 84px);width:min(420px,calc(100% - 32px));padding:22px 24px 20px;border-radius:22px;background:color-mix(in srgb,var(--fg-bg) 84%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--fg-line);box-shadow:0 18px 50px rgba(40,30,15,.1)}
.fg-head .eye{margin:0;font:600 12px/1.5 var(--fg-display);letter-spacing:.22em;text-transform:uppercase;color:var(--fg-mute)}
.fg-head h1{font:700 clamp(38px,4.6vw,58px)/1 var(--fg-display);letter-spacing:-.02em;margin:8px 0 10px;padding-top:.06em;background:var(--fg-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fg-lede{margin:0;color:var(--fg-mute);font-size:15.5px;line-height:1.55}
.fg-link{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-weight:500;font-size:15px;color:var(--fg-ink);text-decoration:none}
.fg-link span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--fg-gold);color:#1c1b19;transition:transform .3s}
.fg-link:hover span{transform:translateX(3px)}
.fg-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.fg-tags button{flex:none;font:500 13.5px var(--fg-body);padding:6px 13px;border-radius:99px;border:1px solid var(--fg-line);background:var(--fg-glass);color:var(--fg-mute);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.fg-tags button:hover{color:var(--fg-ink);border-color:var(--fg-gold)}
.fg-tags button[aria-pressed="true"]{background:var(--fg-gold);border-color:transparent;color:#1c1b19}
@media (max-width:640px){
  .fg-head{top:calc(env(safe-area-inset-top,0px) + 72px);padding:16px 18px 14px;border-radius:18px}
  .fg-head h1{font-size:34px;margin:6px 0 6px}
  .fg-lede{font-size:14.5px}
  .fg-tags{flex-wrap:nowrap;overflow-x:auto;margin:12px -18px 0;padding:0 18px 2px;scrollbar-width:none}
  .fg-tags::-webkit-scrollbar{display:none}
  /* once someone starts exploring, the card shrinks to its title and filters */
  .fg.is-explored:not(.is-grid) .fg-lede,.fg.is-explored:not(.is-grid) .fg-link{display:none}
}

/* controls */
.fg-bar{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:2px;padding:5px;border-radius:99px;background:var(--fg-glass);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--fg-line);box-shadow:0 12px 40px rgba(40,30,15,.12);max-width:calc(100% - 24px)}
.fg-inline .fg-bar{bottom:14px}
.fg-zooms{display:flex;gap:2px}
.fg-bar button,.fg-bar a{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:500 14px var(--fg-body);color:var(--fg-mute);background:none;border:0;border-radius:99px;padding:7px 14px;min-height:36px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s}
.fg-bar button:hover,.fg-bar a:hover{color:var(--fg-ink)}
.fg-zooms [aria-pressed="true"]{background:var(--fg-gold);color:#1c1b19}
.fg-sep{width:1px;height:20px;background:var(--fg-line);margin:0 4px;flex:none}
.fg-bar svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fg-short{display:none}
@media (max-width:640px){
  .fg-long{display:none}.fg-short{display:inline}
  .fg-zooms .fg-short{display:inline}.fg-zooms .fg-long{display:none}
  .fg-bar button,.fg-bar a{padding:7px 12px}
}
.fg-hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);transform:translateX(-50%);z-index:3;padding:8px 14px 7px;border-radius:99px;background:rgba(20,20,22,.58);color:#f4efe6;font:600 11.5px/1.3 var(--fg-display);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .6s}
.fg-inline .fg-hint{bottom:76px}
.fg-hint.is-gone,.fg.is-grid .fg-hint{opacity:0}

/* full-size view (always dark, like the photo lightbox) */
dialog.fg-view{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#f4efe6;overflow:hidden;outline:none;font-family:Jost,system-ui,sans-serif;color-scheme:dark}
dialog.fg-view::backdrop{background:rgba(14,13,12,.92);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
dialog.fg-view[open]::backdrop{animation:fg-fade .35s ease}
dialog.fg-view[open] .fg-vpanel{animation:fg-rise .55s cubic-bezier(.2,.8,.2,1) .08s both}
dialog.fg-view.is-closing,dialog.fg-view.is-closing::backdrop{opacity:0;transition:opacity .2s ease}
@keyframes fg-fade{from{opacity:0}}
@keyframes fg-rise{from{opacity:0;transform:translateY(14px)}}
.fg-vwrap{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) min(400px,34vw);grid-template-rows:minmax(0,1fr)}
.fg-vstage{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:calc(env(safe-area-inset-top,0px) + 76px) 28px calc(env(safe-area-inset-bottom,0px) + 36px) max(28px,env(safe-area-inset-left,0px));touch-action:pan-y pinch-zoom}
.fg-vmedia{display:block;background-size:cover;background-position:center;max-width:100%;max-height:100%;border-radius:12px;background:#0d0d0e;box-shadow:0 30px 80px rgba(0,0,0,.45);object-fit:contain;-webkit-user-drag:none}
.fg-ghost{position:fixed;z-index:2;object-fit:cover;border-radius:12px;pointer-events:none;transform-origin:0 0}
.fg-vpanel{align-self:center;margin:calc(env(safe-area-inset-top,0px) + 76px) max(20px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 36px) 0;padding:28px 28px 24px;max-height:calc(100% - 112px);overflow:auto;border-radius:22px;background:rgba(40,40,44,.55);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.14)}
.fg-vnum{margin:0;font:700 13px/1.5 'Josefin Sans',system-ui,sans-serif;letter-spacing:.16em;color:rgba(244,239,230,.62);font-variant-numeric:tabular-nums}
.fg-vtag{margin:14px 0 0;font:600 12px/1.5 'Josefin Sans',system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#D6BC85}
.fg-vtag:empty{display:none}
.fg-vtitle{margin:6px 0 0;padding-top:.06em;font:700 clamp(28px,2.8vw,40px)/1.04 'Josefin Sans',system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance;background:linear-gradient(90deg,#e6d2a8,#f2cdc8,#c9c7ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.fg-vcap{margin:14px 0 0;font-size:16px;line-height:1.6;color:rgba(244,239,230,.84);text-wrap:pretty}
.fg-vnav{display:flex;gap:8px;margin-top:22px}
.fg-vbtn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(40,40,44,.55);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);color:#f4efe6;cursor:pointer;transition:background .2s,transform .2s}
.fg-vbtn:hover{background:rgba(70,70,76,.7)}
.fg-vbtn:active{transform:scale(.94)}
.fg-vbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fg-vbtn:focus-visible{outline:2px solid #D6BC85;outline-offset:3px}
.fg-vclose{position:absolute;z-index:3;top:calc(env(safe-area-inset-top,0px) + 14px);right:max(14px,env(safe-area-inset-right,0px))}
@media (max-width:860px){
  .fg-vwrap{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .fg-vstage{padding:calc(env(safe-area-inset-top,0px) + 70px) max(12px,env(safe-area-inset-right,0px)) 12px max(12px,env(safe-area-inset-left,0px))}
  .fg-vpanel{align-self:end;margin:0 max(12px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) max(12px,env(safe-area-inset-left,0px));padding:16px 18px;max-height:38vh;border-radius:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
  .fg-vpanel>*{grid-column:1}
  .fg-vnav{grid-column:2;grid-row:1/span 4;align-self:start;margin:0}
  .fg-vtag{margin-top:8px}
  .fg-vtitle{font-size:23px}
  .fg-vcap{font-size:15px;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .fg-tile img{transition:opacity .2s}
  dialog.fg-view[open]::backdrop,dialog.fg-view[open] .fg-vpanel{animation:none}
}

/* polish pass: touch targets meet the 44pt minimum */
@media (pointer:coarse){
  .fg-bar button,.fg-bar a,.fg-tags button{min-height:44px;min-width:44px}
}