/* ==========================================================================
   GAIZUTIS — a quiet gallery. The art is the only color; everything else
   stays in a narrow band of near-white and charcoal so the work carries the
   page. Type matches the site's established voice: Marcellus for display and
   the wordmark, PT Serif for reading.
   ========================================================================== */

:root{
  --bg:        #f4f4f2;   /* near-white neutral — nudge this if you want it lighter/darker */
  --text:      #262624;   /* dark, not black */
  --text-dim:  #6f6f6b;   /* muted / captions */
  --line:      rgba(20,20,16,.12);
  --header-bg: rgba(244,244,242,.68);
  --btn:       #26251f;
  --btn-text:  #f4f4f2;
  --btn-hover: #000000;
  --lightbox:  rgba(17,17,15,.965);

  --maxw:      1440px;
  --pad:       clamp(20px, 5vw, 56px);
  --col-gap:   clamp(16px, 2.2vw, 28px);
  --btn-radius: 4px;
  --ease:      cubic-bezier(.2,.6,.35,1);

  --font-display: "Marcellus", "Georgia", "Times New Roman", serif;
  --font-body:    "PT Serif", "Georgia", "Times New Roman", serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;          /* footer locked to the bottom */
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }

::selection{ background:#26251f; color:#f4f4f2; }

/* --------------------------------------------------------- header (sticky, frosted) */
.site-header{
  position:sticky; top:0; z-index:100;
  flex:0 0 auto;
}
.site-header::before{         /* frosting lives here so the header doesn't trap fixed children */
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--header-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad);
  height:66px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.wordmark{
  font-family:var(--font-display);
  font-size:23px;
  letter-spacing:.12em;
  text-decoration:none;
  color:var(--text);
  white-space:nowrap;
}
.site-nav{ display:flex; gap:clamp(20px,3vw,42px); }
.site-nav a{
  font-family:var(--font-display);
  text-decoration:none;
  color:var(--text-dim);
  font-size:16px;
  letter-spacing:.01em;
  padding:6px 0;
  transition:color .25s var(--ease);
}
.site-nav a:hover{ color:var(--text); }
.site-nav a[aria-current="page"]{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-thickness:1px;
}

/* hamburger toggle → X — hidden until mobile */
.nav-toggle{
  display:none;
  width:44px; height:44px; margin-right:-10px;
  border:0; background:transparent; cursor:pointer; position:relative;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:1.5px; background:var(--text);
  transition:top .3s var(--ease), transform .3s var(--ease);
}
.nav-toggle span:nth-child(1){ top:18px; }
.nav-toggle span:nth-child(2){ top:26px; }
body.nav-open .nav-toggle span:nth-child(1){ top:22px; transform:rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ top:22px; transform:rotate(-45deg); }

/* --------------------------------------------------------- layout shells */
main{
  flex:1 0 auto;                  /* fills space so the footer sits at the bottom */
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--pad);
}

.intro{ padding:clamp(40px,7vw,88px) 0 clamp(30px,4vw,48px); text-align:center; }
.intro-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(24px,3.2vw,36px);
  letter-spacing:.005em;
  line-height:1.25;
  color:var(--text);
}
.nowrap{ white-space:nowrap; }

/* --------------------------------------------------------- gallery (square grid) */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--col-gap);
  padding-bottom:clamp(48px,8vw,96px);
}
@media (max-width:1279px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:899px){  .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:559px){  .gallery{ grid-template-columns:1fr; } }

.tile{
  margin:0;
  cursor:zoom-in;
}
.tile-frame{
  position:relative;
  aspect-ratio:1 / 1;             /* square thumbnails */
  overflow:hidden;
  background:#e9e9e7;             /* square corners — no radius */
}
.tile-frame img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease);
  will-change:transform;
}
.tile:hover .tile-frame img{ transform:scale(1.04); }
.tile-caption{
  margin-top:12px;
  font-family:var(--font-body);
  font-size:15px;
  letter-spacing:.005em;
  color:var(--text-dim);
}

/* reveal on load */
.tile{ opacity:0; transform:translateY(14px); }
.tile.in{ opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease); }

/* --------------------------------------------------------- text pages */
.page{
  width:100%;
  max-width:680px;
  margin:0 auto;
  padding:clamp(44px,7vw,92px) 0 clamp(56px,9vw,110px);
}
.page.about{ max-width:880px; }

.page h1{
  margin:0 0 clamp(24px,4vw,40px);
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(32px,4.4vw,46px);
  letter-spacing:.005em;
  line-height:1.12;
}
.page h2{
  margin:2.4em 0 .65em;
  font-family:var(--font-body);
  font-weight:700;
  font-size:19px;
  letter-spacing:.01em;
  color:var(--text);
}
.page h2:first-of-type{ margin-top:0; }
.page p{ margin:0 0 1.1em; color:#35352f; }
.page p.lead{
  font-size:clamp(19px,2.1vw,22px);
  line-height:1.5;
  color:var(--text);
  margin-bottom:1.5em;
}
.page ul{ margin:0 0 1.35em; padding-left:1.15em; color:#35352f; }
.page li{ margin:.35em 0; }
.page a.inline{ color:var(--text); text-underline-offset:3px; }

.qa{ border-top:1px solid var(--line); padding:1.1em 0; }
.qa:last-of-type{ border-bottom:1px solid var(--line); }
.qa .q{ font-weight:700; color:var(--text); margin:0 0 .35em; }
.qa .a{ margin:0; color:var(--text-dim); }

/* --------------------------------------------------------- about portrait */
.about-layout{
  display:grid;
  grid-template-columns:minmax(0,300px) 1fr;
  gap:clamp(28px,5vw,54px);
  align-items:start;
  margin-bottom:clamp(28px,5vw,48px);
}
.portrait{ margin:0; }
.portrait img{ width:100%; height:auto; }   /* natural aspect, square corners */
.about-layout .lead{ margin-top:0; }
@media (max-width:640px){
  .about-layout{ grid-template-columns:1fr; }
  .portrait{ max-width:260px; }
}

/* --------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em;
  padding:13px 26px;
  border:1px solid var(--btn);
  border-radius:var(--btn-radius);
  background:var(--btn); color:var(--btn-text);
  font-family:var(--font-body); font-size:16px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ background:var(--btn-hover); border-color:var(--btn-hover); transform:translateY(-1px); }
.btn.ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn.ghost:hover{ background:transparent; border-color:var(--text); transform:translateY(-1px); }

.contact-cta{ margin-top:2em; }

/* contact page — text links, Heather Day style */
.contact-line{ font-size:clamp(19px,2.1vw,22px); line-height:1.6; margin:0 0 1.4em; }
.contact-line em{ color:var(--text); font-style:italic; }
.email-link{
  color:var(--text);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  transition:color .2s var(--ease);
}
.email-link:hover{ color:var(--text-dim); }
.contact-note{ color:var(--text-dim); font-size:16px; max-width:44ch; }

/* --------------------------------------------------------- footer (bottom-locked) */
.site-footer{ flex:0 0 auto; border-top:1px solid var(--line); }
.footer-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:24px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:14px; letter-spacing:.02em; color:var(--text-dim);
}
.footer-inner a{ text-decoration:none; transition:color .25s var(--ease); }
.footer-inner a:hover{ color:var(--text); }

/* --------------------------------------------------------- lightbox */
.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,56px);
  background:var(--lightbox);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity .32s var(--ease), visibility .32s var(--ease);
}
.lightbox.open{ opacity:1; visibility:visible; }
.lb-figure{
  margin:0; max-width:100%; max-height:100%;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  transform:scale(.985); transition:transform .32s var(--ease);
}
.lightbox.open .lb-figure{ transform:none; }
.lb-img{
  max-width:100%;
  max-height:calc(100vh - 168px);
  object-fit:contain;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.lb-caption{
  display:flex; align-items:baseline; gap:14px;
  color:#e9e9e6; text-align:center;
}
.lb-title{ font-family:var(--font-body); font-size:18px; letter-spacing:.01em; }
.lb-count{ font-family:var(--font-body); font-size:13px; letter-spacing:.12em; color:#8f8f8a; }

.lb-close,.lb-prev,.lb-next{
  position:absolute; z-index:2;
  border:0; background:transparent; color:#d9d9d5; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:color .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.lb-close{ top:14px; right:16px; width:48px; height:48px; font-size:30px; line-height:1; }
.lb-prev,.lb-next{ top:50%; transform:translateY(-50%); width:60px; height:84px; font-size:44px; }
.lb-prev{ left:6px; } .lb-next{ right:6px; }
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ color:#fff; }
body.lb-locked{ overflow:hidden; }

/* --------------------------------------------------------- focus + motion */
:focus-visible{ outline:2px solid #26251f; outline-offset:3px; }
.lightbox :focus-visible{ outline-color:#e9e9e6; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .tile{ opacity:1; transform:none; }
}

/* --------------------------------------------------------- mobile nav */
@media (max-width:719px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:fixed; inset:66px 0 0 0;           /* full-screen overlay below the header */
    display:flex; flex-direction:column;
    justify-content:center; align-items:center; /* links centered vertically */
    gap:clamp(6px,2.4vh,18px);
    background:var(--bg);                         /* solid, opaque */
    padding:24px var(--pad) 40px;
    transform:translateX(100%);                   /* slide in; no opacity fade */
    transition:transform .34s var(--ease);
    pointer-events:none;
  }
  body.nav-open .site-nav{ transform:none; pointer-events:auto; }
  body.nav-open{ overflow:hidden; }               /* lock background scroll */
  .site-nav a{
    padding:10px 0;
    font-family:var(--font-display);
    font-size:clamp(28px,7vw,34px);
    color:var(--text);
    letter-spacing:.01em;
  }
  .site-nav a[aria-current="page"]{ text-decoration:none; color:var(--text-dim); }
  .lb-prev,.lb-next{ width:46px; font-size:34px; }
  .lb-img{ max-height:calc(100vh - 150px); }
}