/* ============================================================
   MARTHA ADELINE PHOTOGRAPHY — Shared Stylesheet
   Palette:  Parchment #F5EFE6 · Terracotta #9E6650 (softened Nov 2026 from #B5643A) · Deep Clay #7A4A32
             Ink #2B2420 · Blush #E8DACB · Gold Thread #A88456
   Type:     Cormorant Garamond (display) + Jost (body/labels)
   ============================================================ */

/* Fonts are loaded from the page head (base.njk) so they start downloading sooner. */

:root{
  --parchment:#F5EFE6;
  --parchment-dark:#ECE3D3;
  --blush:#E8DACB;
  --terracotta:#9E6650;
  --terracotta-deep:#84503C;
  --clay:#7A4A32;
  --ink:#2B2420;
  --ink-soft:#5A4B3F;
  --gold:#A88456;
  --cream-white:#FFFCF7;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;

  --max-w: 1240px;
  --pad: clamp(1.5rem, 5vw, 5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--parchment);
  color:var(--ink);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 var(--pad); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* Netlify injects a floating "Powered by Netlify" badge on the live site. Paid plans may hide it
   (Netlify's own script only forces it on the free tier). The owner-only toolbar (#nl-hud-frame) is untouched. */
#nl-badge-frame{ display:none !important; }

/* Skip link: visible only when focused by keyboard */
.skip-link{ position:absolute; left:1rem; top:-4rem; z-index:3000; background:var(--ink); color:var(--cream-white); padding:0.8rem 1.2rem; border-radius:2px; font-size:0.85rem; transition:top 0.2s ease; }
.skip-link:focus{ top:1rem; }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-body);
  font-size:0.7rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--terracotta-deep);
  font-weight:500;
  display:inline-block;
  margin-bottom:1rem;
}
.eyebrow.light{ color:rgba(255,252,247,0.85); }

/* ---------- Headings ---------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:400; color:var(--ink); line-height:1.1; }
.script{ font-style:italic; font-weight:400; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:1.6rem 0;
  transition:background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
#site-header.scrolled{
  background:rgba(245,239,230,0.92);
  backdrop-filter:blur(10px);
  padding:1rem 0;
  box-shadow:0 1px 0 rgba(43,36,32,0.08);
}
#site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }

.brand-mark{ display:flex; flex-direction:column; line-height:1; }
.brand-mark .brand-script{ font-family:var(--font-display); font-style:italic; font-size:1.6rem; color:var(--ink); }
.brand-mark .brand-sub{ font-family:var(--font-body); font-size:0.58rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--terracotta-deep); margin-top:2px; }
#site-header.on-dark:not(.scrolled) .brand-mark .brand-script{ color:var(--cream-white); }
#site-header.on-dark:not(.scrolled) .brand-mark .brand-sub{ color:var(--blush); }

nav#main-nav{ display:flex; align-items:center; gap:2.4rem; }
nav#main-nav a{
  font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:400;
  position:relative; padding-bottom:4px; color:var(--ink);
}
#site-header.on-dark:not(.scrolled) nav#main-nav a{ color:var(--cream-white); }
nav#main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--terracotta);
  transition:width 0.3s ease;
}
nav#main-nav a:hover::after, nav#main-nav a.active::after{ width:100%; }
nav#main-nav a.nav-cta{
  border:1px solid currentColor; padding:0.6rem 1.4rem; border-radius:2px;
}
nav#main-nav a.nav-cta:hover{ background:var(--terracotta); border-color:var(--terracotta); color:var(--cream-white); }
nav#main-nav a.nav-cta::after{ display:none; }

#nav-toggle{ display:none; flex-direction:column; gap:5px; z-index:1100; }
#nav-toggle span{ width:26px; height:1px; background:var(--ink); transition:all 0.3s ease; }
#site-header.on-dark:not(.scrolled) #nav-toggle span{ background:var(--cream-white); }

@media (max-width: 880px){
  nav#main-nav{
    position:fixed; inset:0; background:var(--parchment); flex-direction:column; justify-content:center;
    transform:translateX(100%); transition:transform 0.45s ease; gap:2.2rem;
  }
  nav#main-nav.open{ transform:translateX(0); }
  nav#main-nav a{ font-size:1.1rem; color:var(--ink) !important; }
  #nav-toggle{ display:flex; }
  #nav-toggle.open span{ background:var(--ink) !important; }
  #nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  #nav-toggle.open span:nth-child(2){ opacity:0; }
  #nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--font-body); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  padding:1rem 2.2rem; border:1px solid var(--ink); border-radius:2px; color:var(--ink);
  transition:all 0.35s ease;
}
.btn:hover{ background:var(--ink); color:var(--cream-white); }
.btn-solid{ background:var(--terracotta); border-color:var(--terracotta); color:var(--cream-white); }
.btn-solid:hover{ background:var(--terracotta-deep); border-color:var(--terracotta-deep); }
.btn-light{ border-color:rgba(255,252,247,0.7); color:var(--cream-white); }
.btn-light:hover{ background:var(--cream-white); color:var(--ink); }

/* ============================================================
   IMAGE PLACEHOLDER SYSTEM
   Every placeholder shows the expected filename & folder so
   Martha can drop in real photos with zero code edits.
   ============================================================ */
.ph{
  position:relative; overflow:hidden; background:
    linear-gradient(155deg, #BCA588 0%, #A9865F 45%, #8B6644 100%);
  display:flex; align-items:center; justify-content:center;
}
.ph::before{
  content:''; position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.045) 0 2px, transparent 2px 14px);
}
.ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph-label{
  position:relative; z-index:1; text-align:center; padding:1rem;
  font-family:var(--font-body); font-size:0.68rem; letter-spacing:0.08em;
  color:rgba(255,252,247,0.92); background:rgba(43,36,32,0.28);
  border:1px dashed rgba(255,252,247,0.55); border-radius:3px; padding:0.9rem 1.3rem;
  max-width:88%;
}
.ph-label b{ display:block; font-size:0.72rem; letter-spacing:0.02em; margin-bottom:0.25rem; font-weight:500; }

/* ============================================================
   JUSTIFIED GALLERY — rows keep each photo's true shape and
   read left-to-right, so the order in portfolio.json holds.
   ============================================================ */
.jg{ display:flex; flex-wrap:wrap; gap:1rem; }
.jg-item{ --r:0.6667; flex:calc(var(--r) * 100) 1 calc(var(--r) * 300px); max-width:calc(var(--r) * 560px); }
.jg-item.landscape{ --r:1.5; }
.jg-item.square{ --r:1; }
.jg-item .ph{ aspect-ratio:var(--r); border-radius:2px; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Sections only start hidden once the script has confirmed it is running (html.js). */
.reveal{ transition:opacity 0.9s ease, transform 0.9s ease; }
.js .reveal{ opacity:0; transform:translateY(28px); }
.js .reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-delay-1.in-view{ transition-delay:0.12s; }
.reveal-delay-2.in-view{ transition-delay:0.24s; }
.reveal-delay-3.in-view{ transition-delay:0.36s; }

/* ============================================================
   SECTION SPACING
   ============================================================ */
section{ padding:clamp(4rem,9vw,7.5rem) 0; }
.section-head{ max-width:640px; margin-bottom:3.5rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; margin-top:1rem; }

hr.thread{ border:none; height:1px; background:linear-gradient(to right, transparent, var(--gold), transparent); margin:0 auto; width:120px; }

/* ============================================================
   HERO (shared skeleton — page-specific sizing in page CSS)
   ============================================================ */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; }
.hero .ph{ position:absolute; inset:0; }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,10,5,0.78) 0%, rgba(20,10,5,0.42) 55%, rgba(20,10,5,0.5) 100%); }
.hero-content h1, .hero-content .eyebrow, .hero-content .hero-sub, .hero-content p{ text-shadow:0 1px 18px rgba(20,10,5,0.55), 0 1px 3px rgba(20,10,5,0.35); }
/* Vintage touch: soft film grain and a warm wash over photo headers */
.hero::after, .cta-band::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px; opacity:0.22; mix-blend-mode:overlay; }
.hero::before, .cta-band::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(20,10,5,0.28) 100%), rgba(168,132,86,0.08); }
/* Photo call-to-action band (home, about) */
.cta-band{ position:relative; text-align:center; color:var(--cream-white); }
.cta-band .ph{ position:absolute; inset:0; }
.cta-band .cta-scrim{ position:absolute; inset:0; background:rgba(20,10,5,0.55); }
.cta-band h2{ color:var(--cream-white); font-size:clamp(2.2rem,4.4vw,3.4rem); max-width:700px; margin:0 auto 2rem; }
section.cta-band > .wrap{ position:relative; z-index:2; }
.hero-content{ position:relative; z-index:2; padding:0 var(--pad) 5rem; width:100%; color:var(--cream-white); }
.hero-content h1{ font-size:clamp(2.6rem, 6vw, 5rem); color:var(--cream-white); max-width:820px; }
.hero-content .hero-sub{ font-size:1.05rem; color:rgba(255,252,247,0.85); max-width:540px; margin-top:1.4rem; }
.hero-scroll-cue{
  position:absolute; bottom:2.4rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0.5rem; color:rgba(255,252,247,0.75);
}
.hero-scroll-cue span{ font-size:0.62rem; letter-spacing:0.3em; text-transform:uppercase; }
.hero-scroll-cue i{ width:1px; height:34px; background:rgba(255,252,247,0.6); animation:cue-pulse 2s ease-in-out infinite; }
@keyframes cue-pulse{ 0%,100%{opacity:0.3;} 50%{opacity:1;} }

/* ============================================================
   TESTIMONIAL CAROUSEL
   ============================================================ */
.testimonial-carousel{ position:relative; max-width:760px; margin:0 auto; text-align:center; min-height:220px; }
.t-slide{ display:none; }
.t-slide.active{ display:block; animation:fadeSlide 0.7s ease; }
@keyframes fadeSlide{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
.t-slide q{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.35rem,2.6vw,1.9rem); line-height:1.5; color:var(--ink); quotes:none; }
.t-slide cite{ display:block; margin-top:1.6rem; font-style:normal; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--terracotta); }
.t-dots{ display:flex; justify-content:center; gap:0.6rem; margin-top:2.4rem; }
.t-dots button{ width:7px; height:7px; border-radius:50%; background:var(--gold); opacity:0.35; transition:opacity 0.3s ease, transform 0.3s ease; }
.t-dots button.active{ opacity:1; transform:scale(1.3); }

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer{ background:var(--ink); color:rgba(255,252,247,0.75); padding:5rem 0 0; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; padding-bottom:3.5rem; border-bottom:1px solid rgba(255,252,247,0.12); }
.footer-brand .footer-script{ font-family:var(--font-display); font-style:italic; font-size:1.7rem; color:var(--cream-white); display:block; }
.footer-brand .footer-sub-label{ font-size:0.58rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--blush); }
.footer-tagline{ margin-top:1rem; max-width:280px; font-size:0.92rem; }
/* ---------- Lightbox (portfolio, home album) ---------- */
#lightbox{ position:fixed; inset:0; background:rgba(15,8,5,0.94); z-index:2000; display:none; align-items:center; justify-content:center; padding:2rem; }
#lightbox.open{ display:flex; }
#lightbox img{ max-width:88vw; max-height:80vh; object-fit:contain; border-radius:2px; }
.lightbox-caption{ position:absolute; bottom:2rem; left:0; right:0; text-align:center; color:rgba(255,252,247,0.8); font-size:0.85rem; }
.lightbox-close, .lightbox-next, .lightbox-prev{
  position:absolute; color:var(--cream-white); font-size:1.6rem; background:rgba(255,252,247,0.1);
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background 0.3s ease;
}
.lightbox-close:hover, .lightbox-next:hover, .lightbox-prev:hover{ background:rgba(255,252,247,0.2); }
.lightbox-close{ top:1.6rem; right:1.6rem; }
.lightbox-prev{ left:1.6rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:1.6rem; top:50%; transform:translateY(-50%); }
/* Lightbox: hide the photo while the next one loads */
#lightbox img{ transition:opacity 0.2s ease; }
#lightbox.is-loading img{ opacity:0; }
#lightbox.is-loading::after{ content:''; position:absolute; top:50%; left:50%; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:2px solid rgba(255,252,247,0.25); border-top-color:rgba(255,252,247,0.85); border-radius:50%; animation:lb-spin 0.8s linear infinite; }
@keyframes lb-spin{ to{ transform:rotate(360deg); } }
/* Vintage stamp */
.footer-stamp{ display:block; width:96px; height:96px; margin-top:1.6rem; color:var(--blush); opacity:0.75; }
.footer-stamp text{ font-family:var(--font-body); font-size:9.2px; letter-spacing:2.6px; text-transform:uppercase; fill:currentColor; }
.footer-stamp .stamp-mid{ font-family:var(--font-display); font-style:italic; font-size:22px; letter-spacing:0; text-transform:none; }
.footer-col-title{ display:block; font-size:0.68rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--blush); margin-bottom:1.2rem; }
.footer-col ul li{ margin-bottom:0.7rem; font-size:0.9rem; }
.footer-col ul li a:hover, .footer-col address a:hover{ color:var(--cream-white); text-decoration:underline; text-underline-offset:3px; }
.footer-col address a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,252,247,0.35); }
/* Comfortable tap targets on phones */
@media (max-width:760px){
  .footer-col ul li{ margin-bottom:0; }
  .footer-col ul li a, .footer-social a, .footer-copy a, .footer-col address a{ display:inline-block; padding:0.75rem 0; }
}
.footer-col address{ font-style:normal; font-size:0.9rem; line-height:1.9; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:1.8rem 0; font-size:0.78rem; flex-wrap:wrap; gap:1rem; }
.footer-social{ display:flex; gap:1.4rem; }
.footer-social a{ font-size:0.78rem; letter-spacing:0.05em; }
.footer-social a:hover{ color:var(--cream-white); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:760px){
  .footer-top{ grid-template-columns:1fr; gap:2.4rem; }
}

/* ============================================================
   UTILITY GRID HELPERS used across pages
   ============================================================ */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
@media (max-width:900px){ .grid-2, .grid-3{ grid-template-columns:1fr; } }

.tag-line{ font-family:var(--font-display); font-style:italic; font-size:1.4rem; color:var(--clay); }