/* ================= Ginevra Abeti — Photography ================= */
/* Clean, editorial, minimal — condensed bold display (font.png), serif decks
   (font.png subhead), clean sans body (fonts.png), white ground */

/* ===== Self-hosted fonts (no external requests, GDPR-friendly) =====
   Latin subset only. Downloaded from Google Fonts 2026-08-28. */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../assets/fonts/inter.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/inter.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../assets/fonts/oswald-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/lora-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/fonts/spacemono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../assets/fonts/spacemono-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#ffffff;
  --fg:#121110;
  --fg-soft:#55565c;
  --fg-faint:#9a9ba3;
  --bg-soft:#f3f4f6;
  --line:#e4e5e9;
  --accent:#4c8dc7;

  /* the long gradient that runs behind everything except the white homepage hero */
  --gradient-long: linear-gradient(180deg, #16213e 0%, #123246 22%, #0d3b3a 42%, #16283f 62%, #2a1f45 82%, #130a1e 100%);

  /* condensed bold sans for headlines / wordmark (font.png).
     Fallbacks are also condensed so the layout barely shifts if Oswald is
     slow/blocked (matters for the header wordmark alignment). */
  --font-display: 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', 'Inter', sans-serif;
  /* editorial serif for decks, lead paragraphs and bylines (font.png subhead) */
  --font-serif: 'Lora', 'Georgia', serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'SF Mono', 'SFMono-Regular', 'Space Mono', Menlo, monospace;

  --maxw: 1320px;
}

/* Dark, gradient+grain zones — scoped variable overrides so descendant
   text (which already reads var(--fg)/var(--fg-soft) etc.) turns light
   automatically, without touching every rule individually. Grain is a
   second background layer (not a positioned pseudo-element), so it can
   never sit above real content or fight the fixed header's z-index. */
.page-gradient, body.dark-page{
  --bg: transparent;
  --fg:#ffffff;
  --fg-soft:rgba(255,255,255,.82);
  --fg-faint:rgba(255,255,255,.55);
  --bg-soft:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.16);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--gradient-long);
  background-blend-mode:overlay;
  background-repeat:repeat, no-repeat;
  background-size:180px 180px, 100% 100%;
}
.page-gradient .eyebrow, body.dark-page .eyebrow,
.page-gradient .display, body.dark-page .display{ color:#fff; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* hide the host's injected "Powered by ..." badge */
#nl-badge-frame,
.netlify-badge,
[class*="netlify-badge"]{ display:none !important; }

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 6vw;
}

::selection{ background:var(--fg); color:var(--bg); }

/* Subtle analog film-grain texture, site-wide */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:999;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 6vw;
  color:var(--fg);
  background:var(--bg);
}
/* On dark-gradient pages, keep the fixed header legible over whatever
   photo/content scrolls beneath it, rather than fully transparent. */
body.dark-page .site-header{
  background:rgba(8,10,20,.55);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.brand{
  font-family:var(--font-display);
  font-size:1.35rem;
  font-weight:600;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--fg);
}

/* Homepage header: name on the left, nav right-aligned */
.site-header.home{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.header-brand-stack{
  text-align:left;
  line-height:1.3;
  margin-top:.9rem;
}
.header-brand-stack{ width:max-content; }
.header-name{
  display:block;
  font-family:var(--font-display);
  font-weight:600;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:1.6rem;
  white-space:nowrap;
  color:var(--fg);
}
/* The tagline is one flex row of per-letter spans, justified edge to edge so
   it always spans exactly the same width as the name above it — no JS, no
   font-metric luck. The name is the wider line and sets the box width; the
   letters distribute across it. Real text is on aria-label for screen
   readers. (Markup + rationale also noted in PROGRESS.md.) */
.header-tagline{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family:var(--font-mono);
  font-weight:400;
  text-transform:uppercase;
  font-size:.64rem;
  color:var(--fg-faint);
  margin-top:.35rem;
  white-space:nowrap;
}
.header-tagline .sp{ flex:0 0 .5em; }

.back-link{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--fg-soft);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.back-link:hover{ color:var(--fg); }

/* IT / EN language switch */
.lang-link{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg-soft);
  transition:color .25s;
}
.lang-link:hover{ color:var(--accent); }
.nav-lang a{ letter-spacing:.1em; }

.main-nav{ display:flex; align-items:center; gap:2.6rem; }
.main-nav ul{
  list-style:none;
  display:flex;
  gap:2.4rem;
  margin:0; padding:0;
}
.main-nav a{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:400;
  color:currentColor;
  padding:.3rem 0;
  border-bottom:1px solid transparent;
  transition:opacity .25s, border-color .25s;
  opacity:.85;
}
.main-nav a:hover, .main-nav a:focus-visible{ opacity:1; color:var(--accent); border-color:var(--accent); }

.nav-insta{
  width:18px; height:18px;
  color:currentColor;
  transition:opacity .25s, transform .25s;
  opacity:.85;
}
.nav-insta:hover{ opacity:1; transform:scale(1.08); }

/* Instagram link that lives inside the nav <ul> — only shown in the mobile
   overlay menu (desktop uses the standalone .nav-insta icon instead). */
.nav-social{ display:none; }

.nav-toggle{
  display:none;
  background:none; border:0; color:currentColor;
  width:30px; height:22px;
  position:relative;
  cursor:pointer;
  z-index:60;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:1px; background:currentColor;
  transition:transform .3s, opacity .3s;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:10px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle.open span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6.5rem 1.5vw 3.5rem;
  background:var(--bg);
}

.hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  width:100%;
}
.collage-image{
  width:100%;
  max-width:2000px;
  height:auto;
  margin:0 auto;
  display:block;
}
.hero-statement{
  font-family:var(--font-serif);
  font-size:clamp(1.1rem, 1.7vw, 1.45rem);
  line-height:1.55;
  color:var(--fg-soft);
  max-width:40ch;
  margin:2.4rem auto 0;
  text-align:center;
  text-wrap:balance;
}

/* ---------- Section shared ---------- */
section{ position:relative; }
.section-head{
  margin-bottom:3.4rem;
  padding-top:6.5rem;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:400;
  margin:0 0 .8rem;
}
.display{
  font-family:var(--font-display);
  font-weight:600;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.015em;
  font-size:clamp(2.6rem, 5vw, 4rem);
  line-height:1.04;
  margin:0;
  color:var(--accent);
}

/* ---------- About ---------- */
.about{ padding:6.5rem 0 7rem; }
.about-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:5rem;
  align-items:center;
}
.about-photo{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg-soft, #f5f4f0);
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-text .eyebrow{ margin-bottom:.6rem; }
.about-text .display{ margin-bottom:1.6rem; }
.about-text p{
  font-family:var(--font-serif);
  font-size:1.16rem;
  line-height:1.6;
  color:var(--fg-soft);
  font-weight:400;
  max-width:46ch;
  margin:0 0 1.3rem;
}
.about-text p:last-child{ margin-bottom:0; }

/* ---------- Work: small thumbnail + text, sitting on the long page gradient ---------- */
.work{ padding:2rem 0; }
.work-block{
  display:block;
  border-top:1px solid var(--line);
}
/* no bottom rule on the last work block — the .contact border-top is the
   single divider between the work list and the contact section */

.work-copy{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:3rem;
  align-items:center;
  padding:3.2rem 0;
}
.work-thumb{
  width:180px;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:2px;
}
.work-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.work-block:hover .work-thumb img{ transform:scale(1.06); }

.work-copy-text{ max-width:480px; }
.work-index{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  color:var(--fg);
  font-weight:400;
  display:block;
  margin-bottom:.6rem;
}
.work-title{
  font-family:var(--font-display);
  font-weight:600;
  font-style:normal;
  text-transform:uppercase;
  letter-spacing:.015em;
  font-size:clamp(2.1rem, 3.8vw, 3.1rem);
  line-height:1.02;
  margin:0 0 .9rem;
  color:var(--fg);
}
.work-desc{
  font-family:var(--font-serif);
  color:var(--fg-soft);
  font-size:1.08rem;
  line-height:1.5;
  max-width:44ch;
  margin:0 0 1.4rem;
  font-weight:400;
}
.work-link{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--fg);
  padding-bottom:.3rem;
  border-bottom:1px solid var(--fg-faint);
  transition:gap .3s, color .3s, border-color .3s;
}
.work-block:hover .work-link{ gap:1.1rem; color:var(--accent); border-color:var(--accent); }

/* ---------- Contact / Footer ---------- */
.contact{
  text-align:center;
  padding:7rem 0 6rem;
  border-top:1px solid var(--line);
}
.contact .eyebrow{ margin-bottom:.8rem; }
.contact .display{ max-width:20ch; margin:0 auto 2rem; }
/* button — opens the contact form modal (no mailto, works without a mail app) */
.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:3.2rem;
  padding:.9rem 2.1rem;
  border:1px solid var(--fg);
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg);
  transition:background .3s, color .3s;
}
.contact-btn:hover{ background:var(--fg); color:#fff; }

/* ---------- Contact form modal ---------- */
.contact-modal{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,9,8,.62);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:5vh 5vw;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.contact-modal.open{ opacity:1; pointer-events:auto; }
.contact-modal-box{
  position:relative;
  background:var(--bg);
  width:100%; max-width:440px;
  max-height:90vh; overflow-y:auto;
  padding:3.2rem 2.6rem 2.6rem;
  text-align:left;
  transform:translateY(14px);
  transition:transform .3s ease;
}
.contact-modal.open .contact-modal-box{ transform:translateY(0); }
.contact-modal-close{
  position:absolute; top:1.1rem; right:1.3rem;
  background:none; border:0; cursor:pointer;
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg-faint);
}
.contact-modal-close:hover{ color:var(--fg); }
.contact-modal-title{
  font-family:var(--font-display);
  font-weight:600; text-transform:uppercase; letter-spacing:.015em;
  font-size:1.7rem; line-height:1;
  margin:0 0 1.7rem;
  color:var(--fg);
}

/* ---------- Contact form fields ---------- */
.contact-form .field{ margin-bottom:1.4rem; }
.contact-form label{
  display:block;
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fg-faint);
  margin-bottom:.5rem;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:300;
  color:var(--fg);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:.5rem 0;
  border-radius:0;
  transition:border-color .25s;
}
.contact-form textarea{ resize:vertical; min-height:4.5rem; line-height:1.6; }
.contact-form input:focus,
.contact-form textarea:focus{ outline:none; border-color:var(--accent); }
.contact-form .hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}
.contact-form .form-consent{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin:.2rem 0 1.4rem;
  font-family:var(--font-sans);
  font-size:.82rem;
  font-weight:300;
  line-height:1.55;
  color:var(--fg-soft);
  text-transform:none;
  letter-spacing:0;
  cursor:pointer;
}
.contact-form .form-consent input{
  width:auto;
  margin-top:.2rem;
  flex:0 0 auto;
  accent-color:var(--accent);
}
.contact-form .form-consent a{ color:var(--fg); border-bottom:1px solid var(--fg-faint); }
.contact-form .form-consent a:hover{ color:var(--accent); border-color:var(--accent); }
.form-submit{
  display:inline-flex;
  align-items:center;
  margin-top:.4rem;
  padding:.8rem 1.9rem;
  border:1px solid var(--fg);
  background:transparent;
  -webkit-appearance:none; appearance:none;
  cursor:pointer;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--fg);
  transition:background .3s, color .3s, opacity .3s;
}
.form-submit:hover:not(:disabled){ background:var(--fg); color:#fff; }
.form-submit:disabled{ opacity:.5; cursor:default; }
.form-status{
  margin:1rem 0 0;
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.02em;
  line-height:1.5;
  min-height:1em;
}
.form-status.is-ok{ color:var(--accent); }
.form-status.is-error{ color:#c0392b; }

.contact-meta{
  margin-top:.5rem;
  text-align:center;
}
/* icon flows inline with the text so it stays glued to "Location" when the
   line wraps on narrow screens */
.contact-meta-item{
  max-width:34ch;
  margin:0 auto;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.03em;
  line-height:1.7;
  color:var(--fg-soft);
}
.contact-meta-item svg{
  display:inline-block;
  width:13px; height:13px;
  vertical-align:-2px;
  margin-right:.4rem;
  color:var(--accent);
}
.contact-meta-item strong{
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--fg);
}

footer.site-footer{
  padding:2.6rem 0;
  text-align:center;
  border-top:1px solid var(--line);
}
.site-footer p{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--fg-faint);
  letter-spacing:.02em;
  margin:.3rem 0;
}
.site-footer a{
  color:var(--fg-soft);
  border-bottom:1px solid var(--line);
  transition:color .25s, border-color .25s;
}
.site-footer a:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------- Legal / Privacy page ---------- */
.legal-text{
  max-width:64ch;
  padding:3.4rem 0 7rem;
}
.legal-text h2{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:1.15rem;
  margin:2.6rem 0 .8rem;
  color:var(--fg);
}
.legal-text h2:first-child{ margin-top:0; }
.legal-text p,
.legal-text li{
  font-family:var(--font-serif);
  font-size:1.05rem;
  line-height:1.65;
  color:var(--fg-soft);
}
.legal-text p{ margin:0 0 1rem; }
.legal-text ul{ margin:0 0 1rem; padding-left:1.2rem; }
.legal-text li{ margin:0 0 .5rem; }
.legal-text a{
  color:var(--fg);
  border-bottom:1px solid var(--fg-faint);
  transition:color .25s, border-color .25s;
}
.legal-text a:hover{ color:var(--accent); border-color:var(--accent); }
.legal-text strong{ color:var(--fg); font-weight:400; }
.legal-updated{
  margin-top:2.4rem !important;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--fg-faint);
}

/* ---------- Gallery pages ---------- */
.gallery-hero{
  padding:9.5rem 0 2.5rem;
  border-bottom:1px solid var(--line);
}
.gallery-hero .display{ margin-bottom:.8rem; }
.gallery-hero p{
  font-family:var(--font-serif);
  color:var(--fg-soft);
  max-width:54ch;
  font-size:1.2rem;
  line-height:1.55;
}
/* True masonry: photos keep their native proportions and interlock —
   rows are not forced to hold the same count, no cropping. */
.gallery-grid{
  columns:3 260px;
  column-gap:1.1rem;
  padding:3.4rem 0 7rem;
}
.gallery-grid figure{
  margin:0 0 1.1rem;
  break-inside:avoid;
  overflow:hidden;
  border-radius:2px;
  cursor:zoom-in;
}
.gallery-grid img{
  width:100%; height:auto; display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.gallery-grid figure:hover img{ transform:scale(1.04); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,9,8,.96);
  display:flex; align-items:center; justify-content:center;
  padding:4vh 4vw;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{
  max-width:100%; max-height:92vh;
}
.lightbox-close{
  position:absolute; top:2rem; right:2.4rem;
  font-family:var(--font-mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:none; border:0; cursor:pointer;
  opacity:.85;
  z-index:2;
}
.lightbox-close:hover{ opacity:1; }

.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:3.4rem; height:3.4rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif);
  font-size:2.4rem; line-height:1;
  color:#fff;
  background:none; border:0; cursor:pointer;
  opacity:.6;
  transition:opacity .25s;
  z-index:2;
}
.lightbox-nav:hover{ opacity:1; }
.lightbox-nav.prev{ left:.8rem; }
.lightbox-nav.next{ right:.8rem; }
@media (max-width:640px){
  .lightbox-nav{ font-size:2rem; opacity:.85; }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .main-nav ul{
    position:fixed; inset:0;
    background:#fff;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2.2rem;
    transform:translateX(100%);
    transition:transform .35s ease;
  }
  .main-nav ul.open{ transform:translateX(0); }
  .main-nav ul a{ font-size:.95rem; color:var(--fg); }
  .nav-toggle{ display:block; }
  .nav-insta.desktop-only{ display:none; }
  .nav-social{ display:block; margin-top:.4rem; }
  .nav-social a{ display:block; padding:.3rem; border-bottom:0; opacity:.85; }
  .nav-social a:hover{ opacity:1; }
  .nav-social svg{ width:27px; height:27px; display:block; color:var(--fg); }

  .about-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .about-photo{ max-width:360px; }

  .work-copy{ grid-template-columns:120px 1fr; gap:1.6rem; padding:2.4rem 0; }
  .work-thumb{ width:120px; }

  .gallery-grid{ columns:2 180px; column-gap:.8rem; }
  .gallery-grid figure{ margin-bottom:.8rem; }

  .header-name{ font-size:1.3rem; letter-spacing:0; }
  .header-tagline{ font-size:.58rem; }
}

@media (max-width:640px){
  .hero{ padding:8rem 0 2rem; }
  /* collage runs wider than the text column on phones (bumped twice on
     request: 110% → 132%) */
  .collage-image{ width:132%; max-width:none; margin:0 -16%; }
  .hero-statement{ padding:0 5vw; }
  .site-footer p{ font-size:.62rem; }
  .contact-meta-item{ font-size:.68rem; }
}