:root{
  --bg:#FAFAF7;--ink:#0E0E0E;--muted:#6B7280;--border:#E5E7EB;--paper:#FFFFFF;
}
*{box-sizing:border-box}
html,body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

  /* Prevent any accidental horizontal scroll from sub-pixel math */
  overflow-x: clip;
}
a{color:inherit;text-decoration:none}
.container{max-width:1152px;margin:0 auto;padding:0 16px}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border-bottom:1px solid rgba(0,0,0,.05)}
.header-inner{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:'Playfair Display', Georgia, 'Times New Roman', serif;font-size:20px;letter-spacing:.02em}
.nav{display:none;gap:24px;font-size:14px}
@media(min-width:640px){.nav{display:flex}}
.nav a{opacity:.7}
.nav a.active,.nav a:hover{opacity:1}

/* Banner */
.banner{background:#000;color:#fff;text-align:center;font-size:12px;padding:8px 12px}

/* Typography & layout */
main{display:block}
.h1{font-family:'Playfair Display', Georgia, serif;font-size:38px;line-height:1.1;letter-spacing:.01em}
@media(min-width:768px){.h1{font-size:56px}}
.h2{font-family:'Playfair Display', Georgia, serif;font-size:36px;margin:0 0 16px}
.p{color:#6B7280;max-width:60ch;margin:0 0 6px}
.small{font-size:12px;color:#6B7280}
.section{padding:40px 0}

/* Cards (used by previews elsewhere) */
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4}
.card img{width:100%;height:100%;object-fit:cover;display:block}

/* Marquee */
/* Full-bleed marquee, perfectly centered to viewport */
.marquee{
  inline-size: 100svw;
  max-inline-size: 100svw;
  margin-inline: 0;
  overflow: hidden;

  border-top: 1px solid rgba(0,0,0,.05);
  border-bottom: 1px solid rgba(0,0,0,.05);
  background: rgba(255,255,255,.7);
  margin-top: 24px;
}

.marquee-inner{
  max-width: 1152px;
  margin: 0 auto;
  padding-block: 10px;          /* keep vertical padding */
  padding-inline: 16px;         /* keep safe side gutters */

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;

  color: #6B7280;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.marquee span{ white-space: nowrap; }

/* Footer */
.footer{border-top:1px solid rgba(0,0,0,.05);margin-top:64px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-size:12px;color:#6B7280}
a.uline{text-decoration:underline}

/* ---------- HERO (FULL-BLEED) ---------- */
.hero-bleed{
  inline-size:100svw;           /* true screen width, safe on mobile */
  max-inline-size:100svw;
  margin-inline:0;
  overflow:hidden;              /* clip any spill */
  position:relative;
  background:#000;              /* avoids white flash while image loads */
}

/* Fill height on phones, scale nicely up — mobile-safe units */
.hero-bleed img{
  display:block;
  inline-size:100%;
  block-size:clamp(48vh, 72vh, 80vh);          /* fallback for older browsers */
  object-fit:cover;
  object-position:center center;
  aspect-ratio:5 / 3;                           /* prevents CLS */
}

/* Prefer stable/dynamic viewport units on modern mobile browsers */
@supports (height: 100svh){
  .hero-bleed img{ block-size: clamp(48svh, 72svh, 80svh); }
}
@supports (height: 100dvh){
  .hero-bleed img{ block-size: clamp(48dvh, 72dvh, 80dvh); }
}

/* Centered overlay text aligned to site container width */
.hero-bleed .hero-text{
  position:absolute;
  inset-inline:0;
  bottom:min(8vh, 64px);
  max-width:1152px;
  margin:0 auto;
  padding:0 16px;
  text-align:center;

  color:#fff;
  text-shadow:0 1px 16px rgba(0,0,0,.35);
}

.hero-bleed .h2{
  font-size:clamp(28px, 5vw, 44px);
  margin:0 0 8px;
}
.hero-bleed .p{ color:rgba(255,255,255,.92); }
.hero-bleed .location{ color:rgba(255,255,255,.8); }
/* ---------- PREVIEWS GRID ---------- */
.previews-bleed{
  inline-size:100svw;
  max-inline-size:100svw;
  overflow:hidden;
}

.previews-grid{
  max-width:1152px;      /* align with site container */
  margin:0 auto;
  padding-inline:16px;   /* same safe gutters as header/marquee */
  display:grid;
  gap:12px;
  grid-template-columns:1fr;        /* phones: 1 column */
}

@media (min-width: 768px){
  .previews-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));  /* tablet/desktop: 3 columns */
  }
}

/* ensure images behave inside grid */
.previews-grid img{
  display:block;
  width:100%;
  height:auto;
}
/* ---------- PREVIEWS (FULL-BLEED) ---------- */
.previews-bleed{
  inline-size:100svw;      /* exact viewport width; safe on mobile */
  max-inline-size:100svw;
  margin-inline:0;
  overflow:hidden;         /* prevents accidental horizontal scroll */
}

.previews-grid{
  max-width:1152px;        /* align with site container width */
  margin:0 auto;
  padding-inline:16px;     /* same side gutters as header/marquee */
  display:grid;
  gap:12px;
  grid-template-columns:1fr;
}

@media (min-width:768px){
  .previews-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

/* Make sure images don’t introduce whitespace/overflow */
.previews-grid img{
  display:block;
  width:100%;
  height:auto;
}
/* --- Mobile Nav --- */
.menu-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px;
  margin: 0 -8px 0 8px;   /* tuck to the right edge a bit */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0; white-space: nowrap;
}

/* Default: hide nav on small screens, show button */
.nav { display: none; }
@media (min-width: 640px){
  .menu-toggle { display: none; }   /* hide button on desktop */
  .nav { display: flex; }           /* show inline nav on desktop */
}

/* When open on mobile, show as a dropdown below the header */
.nav.is-open {
  position: absolute;
  inset-inline: 0;
  top: 64px;                          /* same as .header-inner height */
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.05);
  z-index: 49;                        /* under sticky header (50) */
}

.nav.is-open a {
  padding: 10px 4px;
  font-size: 14px;
  opacity: 1;                         /* readable on mobile */
}
/* About page layout: single column on mobile, two columns on wider screens */
#about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start; /* keeps text top-aligned with the image */
}

/* Prevent any overlap: image is a normal block element with reserved space */
#about .media {
  overflow: hidden; /* clips any tiny overflows */
}

#about .media img {
  display: block;   /* removes inline-gap whitespace */
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;  /* reserves vertical space to avoid text jump */
  object-fit: cover;    /* keeps nice crop if container constrains it */
}

/* Two-column layout from tablet up */
@media (min-width: 768px) {
  #about {
    grid-template-columns: minmax(280px, 560px) 1fr;
    gap: clamp(24px, 6vw, 56px);
  }
}

/* Optional: if your sticky header overlaps the first row on very small screens,
   add a little top padding to .section globally or just here. */
#about.section {
  padding-block-start: var(--section-pad, 24px);
}