/* =========================================================
   HE BECOMES — shared styles (every page)
   ========================================================= */
:root{
  --paper:#fff; --ink:#000;
  --type:"Courier Prime","Courier New",monospace;
  --display:Futura,"Jost",sans-serif;
  --gutter:6.2%;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--paper);color:var(--ink);font-family:var(--type);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- header ---------- */
.site-header{padding:40px 6% 0 var(--gutter);display:flex;flex-direction:row;align-items:center;gap:7%;position:relative;z-index:50}   /* logo and menu on one line */
.logo img{display:block;height:42px;width:auto;margin-left:6px}
.nav{flex:1;display:flex;justify-content:space-between;align-items:center}
.nav a[href$="index.html"]{display:none}   /* the logo is the link to the gallery */
.nav a{font-size:18px;letter-spacing:.18em;white-space:nowrap}
.nav a.active{font-weight:700;font-size:20px;letter-spacing:.14em}
.nav a:hover{font-weight:700}
.menu-btn,.section-label{display:none}

/* ---------- burger (three lines) ---------- */
.burger{position:relative;display:block;width:18px;height:12px;transition:transform .22s cubic-bezier(.4,0,.2,1) .14s}
.burger i{position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);transition:transform .16s cubic-bezier(.4,0,.2,1),opacity .1s linear}
.burger i:nth-child(1){top:0} .burger i:nth-child(2){top:5.25px} .burger i:nth-child(3){top:10.5px}
/* open: outer lines fold into the middle one, then it turns upright and becomes the menu line */
.menu-open .burger{transform:rotate(90deg)}
.menu-open .burger i:nth-child(1){transform:translateY(5.25px)}
.menu-open .burger i:nth-child(3){transform:translateY(-5.25px)}
/* closing runs it backwards: rotate first, then unfold */
.menu-closing .burger{transition-delay:0s}
.menu-closing .burger i{transition-delay:.2s}

/* ---------- mobile menu: a line drawn down the middle; each item's divider sits on it.
   The first item, GALLERY, sits level with the header logo (both link home). ---------- */
.mobile-menu{position:fixed;inset:0;z-index:300;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .2s ease .3s}
.mobile-menu.open{opacity:1;pointer-events:auto;transition-delay:.3s}
.mobile-menu.closing{transition-delay:.3s}
.mobile-menu .close{display:none}
.menu-open .site-header,.menu-open .site-header .bar{pointer-events:none}   /* header stays on top of the open menu, but only the logo + burger take taps (GALLERY sits beside them) */
.menu-open .site-header .logo,.menu-open .site-header .menu-btn{pointer-events:auto}
@media (max-width:899px){ .menu-open .menu-btn{padding:12px 3px;margin:-12px -3px} }   /* slimmer tap area while open, clear of GALLERY */
.mm-line{position:absolute;left:var(--mm-x,50%);top:var(--mm-top,60px);width:1.5px;margin-left:-.75px;height:18px;background:linear-gradient(to bottom,#000 0,#000 18px,rgba(0,0,0,0) 100%);
         transform-origin:top center;transform:scaleY(1);transition:height .5s cubic-bezier(.65,0,.35,1)}
.mobile-menu.open .mm-line{height:calc(100% - var(--mm-top,60px));transition-delay:.32s}
.mm-shut{position:absolute;left:var(--mm-x,50%);top:calc(var(--mm-top,60px) - 22px);width:30px;height:64px;margin-left:-15px;background:none;border:0;cursor:pointer}   /* narrow, so it doesn't cover GALLERY beside it */
.mm-items{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;padding-top:var(--mm-top,60px);gap:20px;pointer-events:none}
.mm-items a{pointer-events:none;display:grid;grid-template-columns:calc(var(--mm-x,50%) - .525em) 1fr;column-gap:1.05em;font-size:min(13.6px,calc((100vw - var(--mm-x,50vw)) / 11.5));line-height:18px;letter-spacing:.18em;white-space:nowrap}
.mm-items a.active{font-weight:700}
.mobile-menu.open .mm-items a{pointer-events:auto}   /* links only clickable while the menu is open (they were catching taps on the gallery) */
.mm-items a.mm-logo{display:block;align-self:center;position:relative;z-index:1;background:var(--paper);padding:6px 14px;margin-bottom:6px;
                    clip-path:inset(0 50% 0 50%);transition:clip-path .38s cubic-bezier(.65,0,.35,1)}
.mm-items a.mm-logo img{height:29px;width:auto}
.mobile-menu.open .mm-items a.mm-logo{clip-path:inset(0 0 0 0);transition-delay:.62s}
.mobile-menu.closing .mm-items a.mm-logo{transition-duration:.22s;transition-delay:.12s}
.mm-items .l{text-align:right;margin-right:-.18em;clip-path:inset(0 0 0 100%)}
.mm-items .r{text-align:left;clip-path:inset(0 100% 0 0)}
.mm-items .l,.mm-items .r{transition:clip-path .38s cubic-bezier(.65,0,.35,1)}
.mobile-menu.open .mm-items .l,.mobile-menu.open .mm-items .r{clip-path:inset(0 0 0 0);transition-delay:calc(.62s + var(--i) * .09s)}
.mobile-menu.closing .mm-items .l,.mobile-menu.closing .mm-items .r{transition-duration:.22s;transition-delay:calc((4 - var(--i)) * .03s)}
.mobile-menu.closing .mm-line{transition-duration:.3s;transition-delay:.12s}
/* choosing an item: it turns bold and stays; the others fold away and the line draws back up into the burger
   (the opening animation in reverse), then the new page loads */
.mm-items a.chosen{font-weight:700}
.mobile-menu.open.leaving .mm-items a:not(.chosen) .l,.mobile-menu.open.leaving .mm-items a:not(.chosen) .r{clip-path:inset(0 0 0 100%);transition-duration:.24s;transition-delay:calc((4 - var(--i)) * .03s)}
.mobile-menu.open.leaving .mm-items a:not(.chosen) .r{clip-path:inset(0 100% 0 0)}
.mobile-menu.open.leaving .mm-line{height:18px;transition-duration:.45s;transition-delay:.16s}
@media (prefers-reduced-motion: reduce){ .burger,.burger i,.mm-line,.mm-items .l,.mm-items .r,.mobile-menu{transition-duration:.01s!important;transition-delay:0s!important} }

/* desktop header scales with the window below 1440px wide, so a smaller window looks like the full-screen view
   shrunk down (logo never squeezed, menu spacing and type keep their proportions); above 1440 it stays at full size */
@media (min-width:900px){
  .site-header{padding-top:min(40px,2.778vw)}
  .site-header .logo{flex:none}
  .logo img{height:min(42px,2.917vw);width:auto;max-width:none;margin-left:min(6px,.417vw)}
  .nav a{font-size:min(18px,1.25vw)}
  .nav a.active{font-size:min(20px,1.389vw)}
}

@media (max-width:899px){
  .site-header{padding:calc(14px + env(safe-area-inset-top)) 20px 0;gap:14px;flex-direction:column}
  .site-header .nav{display:none}
  .bar{display:flex;justify-content:space-between;align-items:center}
  .logo img{height:28px;margin:0}
  .menu-btn{display:flex;align-items:center;gap:8px;font:700 13px var(--type);letter-spacing:.2em;background:none;border:0;cursor:pointer;color:var(--ink)}
  /* every page on mobile (as in Paper): small logo centred, the three-line burger centred under it, always on top of the photos */
  /* logo and burger side by side, centred as one unit; the header sits above the open menu, so the logo
     stays put while the burger turns into the line beside it */
  .site-header{padding:calc(10px + env(safe-area-inset-top)) 0 16px;gap:0;align-items:center;z-index:320}
  .site-header .bar{justify-content:center;align-items:center;gap:14px;width:100%}
  .site-header .logo img{height:21.6px;margin:0}
  .site-header .section-label{display:none}
  .menu-btn{position:relative;padding:12px;margin:-12px}
  .menu-btn .mb-label{display:none}
  .section-label{display:block;font-weight:700;font-size:13px;letter-spacing:.18em;padding-bottom:10px;border-bottom:1px solid var(--ink)}
}

/* ---------- film-grain overlay: loops over every page ----------
   overlay blend = grain shows in photos and type; white stays clean.
   The file is boosted ×3 (so it survives compression) — 0.33 opacity = original strength. */
.grain{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:400;pointer-events:none;
       mix-blend-mode:overlay;opacity:.33}
/* still frame of the same grain, shown until the video actually starts playing — so phones that block autoplay
   (e.g. iPhone Low Power Mode) never show the browser's play-button overlay, just a static grain */
.grain-still{position:fixed;inset:0;z-index:400;pointer-events:none;mix-blend-mode:overlay;opacity:.33;
       background:url(../assets/grain-still.jpg) center/cover no-repeat}
.grain-still.off{display:none}
video.grain{visibility:hidden}
video.grain.on{visibility:visible}
video.grain::-webkit-media-controls,video.grain::-webkit-media-controls-start-playback-button,
video.grain::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0}
@media (prefers-reduced-motion: reduce){ video.grain{display:none} }

/* ---------- shared page typography ---------- */
/* page titles: same type as the nav / menu (overrides the old spread-out display titles) */
.page-title{display:block!important;font-family:var(--type)!important;font-weight:400!important;font-size:18px!important;line-height:24px!important;letter-spacing:.18em}
@media (max-width:899px){ .page-title{font-size:13.6px!important;line-height:18px!important} }
.spread{display:flex;justify-content:space-between;font-family:var(--display);font-weight:500;color:var(--ink)}
.justify{text-align:justify;text-align-last:justify}
.page{padding:0 var(--gutter) 120px}