*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#ffffff;color:#111111;
  font-family:Helvetica,Arial,sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;
  padding-bottom:96px; /* room for fixed bottom menu bar */
}
a{color:inherit;text-decoration:none}

/* Each page fills the viewport, content centered — clean single page */
.stage{
  min-height:calc(100vh - 96px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px;
}

.wordmark{
  font-family:"EB Garamond",Garamond,serif;
  font-weight:400;
  font-size:clamp(40px,7vw,72px);
  letter-spacing:.06em;
  line-height:1;
}

/* Home landing — photo fills the whole screen */
.stage--home{
  position:relative;
  height:calc(100vh - 96px);
  padding:0;
  overflow:hidden;
  justify-content:flex-start;
}
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;      /* preserve the square ratio — no cropping */
  object-position:center;
}
.stage--home .wordmark{
  position:absolute;
  top:34px;left:0;right:0;
  z-index:2;
  font-size:clamp(34px,5.5vw,58px);
  color:#ffffff;
  text-shadow:0 1px 18px rgba(0,0,0,.35);
}

/* desktop shows square image, mobile shows portrait image */
.hero-photo--mobile{display:none}

/* second scrollable image — mobile only */
.landing-second{display:none}

/* Page content (Bio / Press / Contact) */
.content{max-width:720px;width:100%}
.content h1{
  font-family:"EB Garamond",Garamond,serif;font-weight:400;
  font-size:34px;letter-spacing:.04em;margin:0 0 34px;
}
.ph-line{height:12px;border-radius:2px;background:#f2f1ee;margin:0 auto 12px}
.ph-line.s{width:82%}.ph-line.m{width:94%}.ph-line.xs{width:60%}

/* Bio copy — Taffin-style centered serif */
.content.bio{max-width:620px}
.bio-heading{
  font-family:"EB Garamond",Garamond,serif;
  font-weight:400;
  font-size:clamp(28px,4vw,44px);
  letter-spacing:.05em;
  color:#111111;
  text-align:center;
  margin:0 0 28px;
}
.content.bio p{
  font-family:"EB Garamond",Garamond,serif;
  font-weight:400;
  font-size:19px;
  line-height:1.7;
  letter-spacing:.01em;
  color:#3a3833;
  margin:0 0 24px;
}
.content.bio p:last-child{margin-bottom:0}

/* Contact line — Taffin style: single centered italic grey line */
.contact-line{
  max-width:900px;
  margin:0 auto;
  font-family:"EB Garamond",Garamond,serif;
  font-style:italic;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  letter-spacing:.01em;
  color:#8a877f;
  text-align:center;
}
.contact-line a{color:inherit;transition:color .2s}
.contact-line a:hover{color:#111111}

/* Portfolio — vertical scroll gallery, one large piece per screen */
.stage--portfolio{
  padding:0;
  width:100%;
  max-width:100%;
  min-height:0;
  display:block;
}
.portfolio-heading{
  font-family:"EB Garamond",Garamond,serif;
  font-weight:400;
  font-size:clamp(28px,4vw,44px);
  letter-spacing:.05em;
  color:#111111;
  text-align:center;
  margin:0;
  padding:56px 24px 8px;
}
.gallery{
  width:100%;
  scroll-snap-type:y proximity;
}
.gallery-item{
  margin:0;
  min-height:calc(100vh - 96px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 6vw;
  scroll-snap-align:center;
}
.gallery-item img{
  display:block;
  width:auto;
  max-width:min(92vw,900px);
  height:auto;
  max-height:calc(100vh - 150px);   /* big — fills the screen */
  object-fit:contain;
}

/* Side rail — one tick per piece so visitors see there's more to scroll */
.gallery-rail{
  position:fixed;
  top:50%;
  right:22px;
  transform:translateY(-50%);
  z-index:15;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.rail-dot{
  appearance:none;-webkit-appearance:none;
  border:0;background:transparent;padding:0;margin:0;cursor:pointer;
  width:22px;height:14px;
  display:flex;align-items:center;justify-content:center;
}
.rail-dot::before{
  content:"";
  width:16px;height:1px;
  background:#d8d5cd;
  transition:background .25s,width .25s,height .25s;
}
.rail-dot:hover::before{background:#8a877f}
.rail-dot.active::before{
  background:#8a877f;
  width:22px;height:2px;
}

@media(max-width:640px){
  .gallery-item{min-height:auto;padding:4vh 1.5vw;}
  .gallery-item img{width:97vw;max-width:97vw;height:auto;max-height:none;}
  .gallery-rail{right:8px;gap:9px;}
  .rail-dot{width:16px;height:12px;}
  .rail-dot::before{width:11px;}
  .rail-dot.active::before{width:16px;}
}

/* Bottom menu bar — modeled on the Taffin spread */
.menubar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:#ffffff;
  display:flex;justify-content:center;align-items:flex-start;
  gap:0;
  padding:22px 20px 26px;
}
.menubar a{
  position:relative;
  font-family:"EB Garamond",Garamond,serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:.01em;
  color:#8a877f;                 /* muted grey */
  padding:12px 26px 0;
  transition:color .2s;
}
/* short rule above each item */
.menubar a::before{
  content:"";
  position:absolute;top:0;left:14px;right:14px;
  height:1px;background:#d8d5cd;
  transition:background .2s,height .2s;
}
/* hover: gray bar above + label lighter gray */
.menubar a:hover{color:#b8b5ad}
.menubar a:hover::before{background:#8a877f;height:2px;top:0}
/* active/current page: same treatment */
.menubar a.active{color:#b8b5ad;cursor:default}
.menubar a.active::before{background:#8a877f;height:2px;top:0}

@media(max-width:640px){
  .menubar{flex-wrap:wrap;gap:0 4px}
  .menubar a{padding:12px 16px 0}

  /* Mobile home: images flow continuously, wordmark overlaid on the first */
  .stage--home{
    height:auto;
    min-height:0;
    padding:0;
    display:block;           /* let the image define height, no flex centering */
  }
  .stage--home .wordmark{
    top:26px;
    font-size:32px;
  }
  .hero-photo--desktop{display:none}
  .hero-photo--mobile{
    display:block;
    position:static;         /* flow naturally so it sets the section height */
    inset:auto;
    width:100%;
    height:auto;
    object-fit:contain;
  }

  /* second image butts directly against the first — no gap */
  .landing-second{
    display:block;
    width:100%;
    height:auto;
    margin-top:0;
    vertical-align:bottom;
  }

  /* Home: menu floats over the imagery, no white bar */
  body.home{padding-bottom:0}
  body.home .menubar{
    background:transparent;
    padding-bottom:34px;
  }
  body.home .menubar a{
    color:#ffffff;
    text-shadow:0 1px 10px rgba(0,0,0,.55);
  }
  body.home .menubar a::before{background:rgba(255,255,255,.55)}
  body.home .menubar a:hover,
  body.home .menubar a.active{color:#eaeaea}
  body.home .menubar a:hover::before,
  body.home .menubar a.active::before{background:#ffffff}
}