/* ============================================================================
   frieber.com — SHARED gallery chrome.  SINGLE SOURCE OF TRUTH for all galleries.
   Every gallery page links this file. Change spacing/layout HERE once → all 15
   galleries on all 3 devices update. No more per-page inline <style>.
   Spacing knobs live in the DEVICE BANDS at the bottom.
   ============================================================================ */

@font-face{font-family:'Web437 SeequaCm-2y';src:url('/Web437_SeequaCm-2y.woff') format('woff');}
@view-transition{navigation:auto;}
@keyframes fadein{from{opacity:0}to{opacity:1}}

*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#000;--text:#fff;--hl:#39ff14;--green:#48FF00}   /* --green = the official Frieber.com green (#48FF00) — single source for every link hover */
html{font-size:16px;-webkit-font-smoothing:none}

/* scroll-lock: the document itself never scrolls — scrolling lives in #scroller,
   so nothing rides the iOS pull-to-refresh rubber-band (no document scroll = none) */
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:'Web437 SeequaCm-2y',monospace;
     font-size:1rem;line-height:2;animation:fadein .35s ease both}
#scroller{height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}   /* the topbar is the FIRST CHILD in here and position:sticky — it scrolls with this layer, so its tap hit-region never goes stale (the old fixed-over-this-scroller setup was the 2-tap bug). NO -webkit-overflow-scrolling:touch — momentum is default on modern iOS anyway. */

a{color:var(--text);text-decoration:underline;text-underline-offset:4px}
@media(hover:hover) and (pointer:fine){a:hover{color:var(--green)}}
::selection{background:var(--hl);color:#000}

/* ---- topbar (sticky inside #scroller; fades on scroll) ---- */
.topbar{position:sticky;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:1.2rem 2rem;transition:opacity .5s ease;text-shadow:-1px -1px 0 var(--bg),0 -1px 0 var(--bg),1px -1px 0 var(--bg),-1px 0 0 var(--bg),1px 0 0 var(--bg),-1px 1px 0 var(--bg),0 1px 0 var(--bg),1px 1px 0 var(--bg),2px 0 0 var(--bg),2px 1px 0 var(--bg),0 2px 0 var(--bg),1px 2px 0 var(--bg),2px 2px 0 var(--bg)}   /* STICKY, not fixed — and it now lives INSIDE #scroller (first child). A fixed bar layered over a nested overflow scroller leaves its tap hit-region stale on iOS after the scroller moves → dead first-tap. Sticky rides the scroller's own layer so the hit-region stays in sync. NO translateZ/will-change: promoting it to its own GPU layer re-creates the very stale-hit-region we're escaping. */
.topbar.hide{opacity:0}   /* fades out but STAYS clickable — no pointer-events toggle */
.topbar .home{line-height:0;display:block;flex:0 0 auto;text-decoration:none;position:relative}
.topbar .home .mark{display:block;height:30px;width:auto;overflow:visible;filter:drop-shadow(1px 1px 0 var(--bg))}
.topbar .home .mark path{fill:var(--text);stroke:var(--bg);stroke-width:2;vector-effect:non-scaling-stroke;paint-order:stroke}
@media(hover:hover) and (pointer:fine){.topbar .home:hover .mark path{fill:var(--green)}}
.topbar .navr{display:flex;gap:2rem;align-items:center}
.topbar .navr .cur{color:var(--text);position:relative;white-space:nowrap}
.topbar .navr .navroles{position:absolute;top:calc(100% + 1.2rem + 6vw + 4px);right:0;display:flex;flex-direction:column;gap:0.15rem;font-size:1rem;line-height:1.4;text-align:right;white-space:nowrap}   /* roles right-aligned under the title; TOP-anchored at the description's top edge (navbar bottom + 6vw topspace) so the first role lines up with the paragraph's first line; list grows downward; fade with the bar on scroll */
.topbar .navr .navroles:empty{display:none}
.topbar .navr a{text-decoration:none;position:relative}
/* invisible tap-target expansion: arrows/logo render only ~21px wide; this grows the HITTABLE area to ~45px without moving anything (::after is out of flow, so zero layout/flex shift). First-tap reliability on touch. */
.topbar .home::after,.topbar .navr a::after{content:'';position:absolute;inset:-12px}
.topbar .navr .pn{text-decoration:underline;text-underline-offset:4px}
/* colour escape hatch (gallery.js §7): [RESET COLORS]/[FLIP COLORS] sit right of the home icon,
   absolutely positioned so the space-between flex layout never shifts. Shown only when the bar
   has .recolored (visitor changed the palette) AND the icon (or the buttons) is hovered.
   visibility lingers .5s on mouse-out so the pointer can cross the gap from icon to buttons. */
.topbar .homeacts{position:absolute;left:calc(2rem + 30px + 1.2rem);top:calc(50% + 3px);transform:translateY(-50%);display:flex;gap:2ch;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .5s}
.topbar.recolored .home:hover+.homeacts,.topbar.recolored .homeacts:hover{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.topbar .homeacts .hact{font-size:12px;letter-spacing:1px;line-height:1;text-decoration:none;cursor:pointer;color:var(--text);white-space:nowrap}
@media(hover:hover) and (pointer:fine){.topbar .homeacts .hact:hover{color:var(--green)}}
.topbar .navr .ar{display:inline-block;position:relative;top:-3px;vertical-align:middle;font-weight:bold;font-size:calc(1rem + 3px);-webkit-text-stroke:0.4px currentColor}

/* ---- content ---- */
.topspace{height:6vw}   /* header space between the bar and the description */
.intro{padding:0 40vw 0 8.5vw;margin-bottom:5rem;font-size:1.7em;line-height:1.6;color:var(--text)}   /* left-aligned to the 83vw content block; 40vw right padding; 5rem below = gap above the link line / images */
.grole{padding:0 40vw 0 8.5vw;margin-bottom:2.5rem;font-size:1rem;line-height:1.4;color:var(--text)}   /* role blurb: left-aligned above the paragraph; 2.5rem gap below = matches the paragraph's 2.5rem gap below it */
.grole:empty{display:none}
.plinks{display:flex;flex-wrap:nowrap;gap:3.2rem;padding:0 2rem 0 8.5vw;font-size:clamp(16px, calc(1.4vw + 3px), 21px);line-height:1.4}   /* aligned with the description column; sits in the paragraph's 2.5rem bottom gap */
.plinks a{color:var(--text);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
@media(hover:hover) and (pointer:fine){.plinks a:hover{color:var(--green)}}   /* the plain a:hover loses to .plinks a (same specificity, later) — this re-asserts the green hover on the gallery link line */
.plinks:empty{display:none}
.plinks.plinks-btm{padding-top:10rem;padding-bottom:14rem}   /* duplicated links at page bottom, lots of air above + below */
.plinks.stacked{flex-direction:column;align-items:flex-start;gap:0.4rem}   /* JS adds .stacked the moment the one-line links would overflow → all snap to a vertical list at once */
.croles{display:none;padding:0 2rem 0 8.5vw;margin-top:5rem;font-size:1rem;line-height:1.4;color:var(--text)}   /* role list collapsed to a comma line, shown ONLY <1200px, under the links line; 5rem above = same gap the links line has above it (the intro's 5rem bottom margin) */
.croles span:not(:last-child)::after{content:", "}   /* join the roles with commas */

.shots{display:flex;flex-direction:column;align-items:center;--igap:6vw;gap:var(--igap);padding:5rem 2rem 14rem;overflow-x:clip}   /* 5rem top — same air above the cover as the links bar gets above it (the intro's 5rem bottom margin) */
.shots img,.shots video{width:83vw;height:auto;display:block}   /* the magic number — no max-height (that was the iPad squash) */
.shots img.tall,.shots video.tall{width:83vw}   /* tall/portrait: SAME 83vw, no height cap → scrolls. Only two widths allowed: 83vw + full. */
.shots img.fw,.shots video.fw{width:100vw;max-width:100vw;max-height:none;align-self:flex-start;margin-left:-2rem}   /* true full-width, edge to edge */
.shots img.fw + img.fw,.shots video.fw + video.fw,.shots img.fw + video.fw,.shots video.fw + img.fw{margin-top:calc(-1 * var(--igap))}   /* adjacent full-width shots touch */
.shots .adwrap.isfw + .adwrap.isfw{margin-top:calc(-1 * var(--igap))}
.shots .grp.fw + .grp.fw,.shots img.fw + .grp.fw,.shots video.fw + .grp.fw,.shots .adwrap.isfw + .grp.fw,.shots .grp.fw + img.fw,.shots .grp.fw + video.fw,.shots .grp.fw + .adwrap.isfw{margin-top:calc(-1 * var(--igap))}
.shots .cover{margin-bottom:0}   /* leading cover: full-bleed (.fw) banner */
.shots .cover + *{margin-top:calc(-1 * var(--igap))}   /* kill the gap UNDER the cover so the next shot sits flush */
.allhead{font-size:1rem;color:var(--text);opacity:.6;padding:6rem 2rem 0;text-align:center}
.grp{display:flex;gap:4rem;width:83vw;align-items:flex-start;margin:0 auto}   /* pair/triplet: justified row at 83vw (NOT 900px) */
.scram{white-space:pre}
.grp-2{grid-template-columns:repeat(2,1fr)}
.grp-3{grid-template-columns:repeat(3,1fr)}
.grp-4{grid-template-columns:repeat(4,1fr)}
.grp img,.grp video{flex:1 1 0;min-width:0;height:auto;display:block}
.grp.fw{width:100vw;max-width:100vw;margin-left:-2rem;gap:0;align-self:flex-start}   /* full-bleed pair/triplet: edge to edge */
.grp.fw img,.grp.fw video{max-height:none}

/* ==========================================================================
   DEVICE BANDS — the spacing knobs. Tune each device independently HERE.
   Cascade: desktop (above) → iPad (≤1024) → mobile (≤640).
   ========================================================================== */

/* ---------- below 1200px: role stack leaves the toolbar, becomes a comma line under the LINKS BAR (plinks) in the content ---------- */
@media(max-width:1199px){
  .topbar .navr .navroles{display:none}   /* roles leave the toolbar */
  .croles{display:block}                  /* and show under the link line instead */
  .intro{font-size:20px}                  /* tablet notch: between desktop 1.7em(27px) and mobile 17px, leaning mobile — fixes iPad landscape inheriting desktop size */
}

/* ---------- iPad  (≤1024px) ---------- */
@media(max-width:1024px){
  .topbar{padding:1rem}
  .topbar .home .mark{height:24px;width:auto}
  .topbar .homeacts{left:calc(1rem + 24px + 1rem)}   /* track the tighter iPad bar padding + smaller mark */
  .topbar .navr{gap:1.1rem}
  .topbar .navr .pn{display:none}
  .topbar .navr .ar{top:-4px}
  .intro{margin:0 auto 5rem;max-width:90vw;padding:2.5rem 1rem 0}
  .grole{margin:0 auto 2.5rem;max-width:90vw;padding:5rem 1rem 0}
  .plinks{padding:0 1rem 0;margin:0 auto;max-width:90vw;gap:2.4rem}
  .plinks.plinks-btm{padding-top:6rem;padding-bottom:8rem}
  .croles{padding:0 1rem;margin:5rem auto 0;max-width:90vw}   /* match the centered iPad content column; keep the 5rem top gap */
  .shots{--igap:9vw;padding:5rem 0 8rem}   /* keep the same 5rem above the cover as desktop — matches the links bar's gap */
  .shots img.fw,.shots video.fw{margin-left:0;width:100vw}
  .grp{gap:8vw}                              /* width stays 83vw (base) — only the gap changes per device */
  .grp.fw{margin-left:0;gap:0}
}

/* ---------- Mobile  (≤640px) ---------- */
@media(max-width:640px){
  :root{--bg:#000!important;--text:#fff!important}
  .intro{padding-top:2rem;font-size:17px}   /* nav type is 16px — description sits exactly 1px above it on phones */
  .croles{font-size:14px;line-height:1.6}   /* roles: down 2px from base 16, a touch more air between lines */
  .croles span{display:block}   /* phones: roles stack as a LIST under the links row… */
  .croles span:not(:last-child)::after{content:""}   /* …so kill the comma joiners (desktop/iPad keep the comma line) */
  .shots{--igap:12vw;padding-top:12vw}   /* air ABOVE the leading photo — same rhythm as the inter-photo gap (was 0/flush) */
}