/* ==========================================================================
   PHOTOGRAPHER PORTFOLIO — CORE STYLESHEET
   Design system: "Darkroom" — editorial minimalism grounded in film/EXIF
   vernacular. Verdigris accent (oxidised brass/lens-coating), a warm paper
   ground, Fraunces for display, Manrope for body, IBM Plex Mono for the
   EXIF-style metadata strips that run under every image.
   ========================================================================== */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,400&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---- Design tokens ---- */
:root{
  /* Light (default) */
  --paper:#F7F6F2;
  --paper-dim:#EFEEE8;
  --ink:#141412;
  --graphite:#6B6963;
  --hairline:#DEDCD3;
  --accent:#3F5C54;        /* verdigris */
  --accent-soft:#DCE5E1;
  --surface:#FFFFFF;
  --shadow: 0 12px 32px rgba(20,20,18,0.08);
  --radius: 2px;
  --max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
}

[data-theme="dark"]{
  --paper:#111110;
  --paper-dim:#171715;
  --ink:#F2F1EC;
  --graphite:#9B9A93;
  --hairline:#2A2A26;
  --accent:#7FAA9C;        /* verdigris, lifted for dark */
  --accent-soft:#1D2B27;
  --surface:#161615;
  --shadow: 0 12px 32px rgba(0,0,0,0.4);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .4s ease, color .4s ease;
}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:400;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
}

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

.wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }

/* ---- Eyebrow / mono utility text (EXIF vernacular) ---- */
.mono{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--graphite);
}

/* ---- Header / Nav ---- */
#site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  max-width:var(--max); margin:0 auto;
}
.nav__mark{
  font-family:'Fraunces', serif; font-size:20px; letter-spacing:0.01em;
}
.nav__links{ display:flex; gap:32px; align-items:center; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:13px; letter-spacing:0.05em; text-transform:uppercase;
  padding-bottom:4px; border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}
.nav__links a:hover, .nav__links a.active{ border-color:var(--accent); color:var(--accent); }
.nav__right{ display:flex; align-items:center; gap:18px; }
.theme-toggle{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--hairline); background:transparent; color:var(--ink);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, transform .2s ease;
}
.theme-toggle:hover{ border-color:var(--accent); transform:rotate(20deg); }
.nav__burger{ display:none; background:none; border:0; cursor:pointer; }
.nav__burger span{ display:block; width:22px; height:1px; background:var(--ink); margin:5px 0; }

@media (max-width: 860px){
  .nav__links{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px); height:100vh;
    background:var(--surface); flex-direction:column; align-items:flex-start;
    padding:100px 32px; gap:26px; transform:translateX(100%);
    transition:transform .4s cubic-bezier(.7,0,.2,1); border-left:1px solid var(--hairline);
  }
  .nav__links.open{ transform:translateX(0); }
  .nav__burger{ display:block; }
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  padding:14px 26px; border:1px solid var(--ink); border-radius:var(--radius);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn--accent{ border-color:var(--accent); color:var(--accent); }
.btn--accent:hover{ background:var(--accent); color:var(--surface); }
.btn--ghost{ border-color:var(--hairline); color:var(--graphite); }
.btn--ghost:hover{ background:transparent; color:var(--ink); border-color:var(--ink); }

/* ---- Hero (editorial, asymmetric) ---- */
.hero{
  display:grid; grid-template-columns: 1.1fr 1fr; align-items:end; gap:var(--gutter);
  max-width:var(--max); margin:0 auto; padding:64px var(--gutter) 0;
  min-height:78vh;
}
.hero__text{ padding-bottom:56px; }
.hero__eyebrow{ margin-bottom:22px; display:block; }
.hero__title{ font-size:clamp(40px, 6vw, 84px); }
.hero__title em{ font-style:italic; color:var(--accent); }
.hero__lede{ max-width:44ch; color:var(--graphite); margin-top:22px; font-size:17px; }
.hero__cta{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.hero__frame{
  position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.ph{ /* placeholder image block — swap background-image for real photography */
  width:100%; height:100%;
  background:
    linear-gradient(155deg, rgba(20,20,18,.05), rgba(20,20,18,.35)),
    repeating-linear-gradient(115deg, #3F5C54 0 2px, #46524C 2px 4px);
  background-size:cover;
}
[data-theme="dark"] .ph{
  background:
    linear-gradient(155deg, rgba(0,0,0,.1), rgba(0,0,0,.5)),
    repeating-linear-gradient(115deg, #2E4A42 0 2px, #23231F 2px 4px);
}

@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; padding-top:40px; min-height:auto; }
  .hero__frame{ order:-1; aspect-ratio:3/4; }
}

/* ---- Section scaffolding ---- */
.section{ padding:120px var(--gutter); max-width:var(--max); margin:0 auto; }
.section--tight{ padding-top:64px; padding-bottom:64px; }
.section--dim{ background:var(--paper-dim); }
.section__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
.section__title{ font-size:clamp(28px, 3.4vw, 44px); }
.section__link{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.05em; text-transform:uppercase; border-bottom:1px solid var(--accent); color:var(--accent); padding-bottom:2px; }

/* ---- EXIF strip: the site's signature element ---- */
.exif{
  display:flex; flex-wrap:wrap; gap:2px 22px;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.03em;
  color:var(--graphite); padding-top:10px; border-top:1px solid var(--hairline); margin-top:14px;
}
.exif span b{ color:var(--ink); font-weight:500; }

/* ---- Image grid / gallery ---- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 960px){ .grid, .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 560px){ .grid, .grid--2, .grid--4{ grid-template-columns:1fr; } }

.card{ display:block; cursor:pointer; }
.card__frame{ position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:var(--radius); }
.card__frame .ph{ transition:transform .8s cubic-bezier(.2,.7,0,1); }
.card:hover .card__frame .ph{ transform:scale(1.045); }
.card__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.45), transparent 45%);
  opacity:0; transition:opacity .3s ease;
}
.card:hover .card__frame::after{ opacity:1; }
.card__view{
  position:absolute; left:18px; bottom:16px; color:#fff;
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;
}
.card:hover .card__view{ opacity:1; transform:translateY(0); }
.card__cap{ margin-top:14px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.card__cap h3{ font-size:19px; }
.card__cap span{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--graphite); white-space:nowrap; }

/* ---- Fullscreen grid (no captions) — for the pure-grid gallery pages ---- */
.puregrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.puregrid .card__frame{ aspect-ratio:1/1; border-radius:0; }
@media (max-width: 860px){ .puregrid{ grid-template-columns:repeat(2,1fr); } }

/* ---- Category filter pills ---- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.filters button{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--hairline); border-radius:20px; background:transparent; color:var(--graphite);
  cursor:pointer; transition:all .2s ease;
}
.filters button:hover, .filters button.active{ border-color:var(--accent); color:var(--accent); }

/* ---- Pillars / feature cards (Home "what I do") ---- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.pillar{ background:var(--paper); padding:44px 36px; transition:background .3s ease; }
.pillar:hover{ background:var(--paper-dim); }
.pillar .mono{ display:block; margin-bottom:18px; }
.pillar h3{ font-size:24px; margin-bottom:12px; }
.pillar p{ color:var(--graphite); font-size:15px; margin:0; }
@media (max-width: 760px){ .pillars{ grid-template-columns:1fr; } }

/* ---- Timeline (About) ---- */
.timeline{ border-top:1px solid var(--hairline); }
.timeline__row{
  display:grid; grid-template-columns:120px 1fr; gap:32px;
  padding:28px 0; border-bottom:1px solid var(--hairline);
}
.timeline__row .mono{ padding-top:4px; }
.timeline__row h4{ font-size:20px; margin-bottom:6px; }
.timeline__row p{ color:var(--graphite); margin:0; max-width:60ch; }

/* ---- Two column text block ---- */
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; gap:36px; } }
.prose p{ color:var(--graphite); margin:0 0 18px; max-width:60ch; }
.prose p:last-child{ margin-bottom:0; }

/* ---- Video embeds ---- */
.video{ position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--paper-dim); }
.video iframe{ width:100%; height:100%; border:0; }
.video-cap{ display:flex; justify-content:space-between; margin-top:14px; }
.video-cap h3{ font-size:18px; }
.video-cap span{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--graphite); }

/* ---- Gear list ---- */
.gear-group{ border-top:1px solid var(--hairline); padding:40px 0; }
.gear-group__title{ font-size:22px; margin-bottom:24px; }
.gear-item{ display:grid; grid-template-columns:72px 1fr; gap:20px; align-items:center; padding:14px 0; }
.gear-item__thumb{ width:72px; height:72px; border-radius:var(--radius); overflow:hidden; }
.gear-item h4{ font-family:'Manrope',sans-serif; font-weight:600; font-size:15px; margin:0 0 2px; }
.gear-item span{ color:var(--graphite); font-size:13px; }

/* ---- Forms ---- */
.form{ display:grid; gap:20px; max-width:560px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--graphite); }
.field input, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--hairline);
  padding:10px 2px; font-family:'Manrope',sans-serif; font-size:16px; color:var(--ink);
  transition:border-color .2s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:120px; }

.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ border-top:1px solid var(--hairline); padding:20px 0; display:flex; justify-content:space-between; align-items:center; }
.contact-list li:last-child{ border-bottom:1px solid var(--hairline); }
.contact-list a:hover{ color:var(--accent); }

/* ---- Journal / Blog placeholder cards ---- */
.journal-card{ border-top:1px solid var(--hairline); padding:34px 0; display:grid; grid-template-columns:160px 1fr; gap:28px; }
.journal-card__tag{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.journal-card h3{ font-size:22px; margin:8px 0 8px; }
.journal-card p{ color:var(--graphite); margin:0; font-size:14px; }
@media (max-width: 640px){ .journal-card{ grid-template-columns:1fr; gap:10px; } }

/* ---- Footer ---- */
#site-footer{ border-top:1px solid var(--hairline); margin-top:80px; }
.footer{ max-width:var(--max); margin:0 auto; padding:64px var(--gutter) 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer h5{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--graphite); margin:0 0 18px; }
.footer__mark{ font-family:'Fraunces', serif; font-size:26px; margin-bottom:14px; }
.footer__note{ color:var(--graphite); font-size:14px; max-width:36ch; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer a:hover{ color:var(--accent); }
.footer__bottom{
  max-width:var(--max); margin:0 auto; padding:20px var(--gutter) 32px;
  display:flex; justify-content:space-between; color:var(--graphite); font-size:12px;
  font-family:'IBM Plex Mono', monospace; border-top:1px solid var(--hairline); flex-wrap:wrap; gap:10px;
}
@media (max-width: 760px){ .footer{ grid-template-columns:1fr; } }

/* ---- Reveal-on-scroll ---- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; background:rgba(10,10,9,.94); z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.lightbox.open{ opacity:1; pointer-events:all; }
.lightbox__frame{ max-width:1100px; width:100%; }
.lightbox__frame .ph{ aspect-ratio:3/2; border-radius:var(--radius); }
.lightbox__cap{ display:flex; justify-content:space-between; color:#EDEDE8; margin-top:16px; flex-wrap:wrap; gap:10px; }
.lightbox__cap .exif{ border-top:none; color:#B8B7B0; padding-top:0; margin-top:0; }
.lightbox__close, .lightbox__nav{
  position:absolute; background:none; border:1px solid rgba(255,255,255,.25); color:#EDEDE8;
  border-radius:50%; width:44px; height:44px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease;
}
.lightbox__close{ top:28px; right:28px; }
.lightbox__nav:hover, .lightbox__close:hover{ border-color:#fff; }
.lightbox__prev{ left:28px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:28px; top:50%; transform:translateY(-50%); }
@media (max-width: 640px){ .lightbox__prev, .lightbox__next{ display:none; } }

/* ---- Page intro (used on interior pages instead of full hero) ---- */
.page-intro{ padding:70px var(--gutter) 30px; max-width:var(--max); margin:0 auto; }
.page-intro h1{ font-size:clamp(34px,5vw,58px); }
.page-intro p{ color:var(--graphite); max-width:56ch; margin-top:18px; font-size:16px; }

/* ---- Privacy / plain text page ---- */
.legal{ max-width:760px; margin:0 auto; padding:70px var(--gutter) 120px; }
.legal h2{ font-size:24px; margin:40px 0 14px; }
.legal p, .legal li{ color:var(--graphite); font-size:15px; }