/* ==========================================================================
   SARA JIN PHOTOGRAPHY — SHARED STYLESHEET
   ==========================================================================
   Used by every page (index.html, business.html, branding.html, seniors.html,
   families.html, and any page added later). Change the palette once, here,
   in the TOKENS block below, and it updates the whole site.

   Structure:
     TOKENS        → colors, fonts, spacing — the only place to touch to
                      restyle the site.
     BASE           → resets, container, generic type helpers.
     PLACEHOLDER IMAGERY → the labeled gray boxes standing in for real photos.
     NAVIGATION     → sticky header + mobile menu (same on every page).
     HERO           → full-bleed photo hero. `.hero--page` is the shorter
                      variant used on the four category pages.
     INTRO          → centered "philosophy" / "hey there" text block.
     CATEGORIES     → the homepage's four-panel "Choose Your Session" grid.
     PORTFOLIO      → the dense many-image grid (homepage: mixed categories;
                      category pages: one category's own work).
     BOOK CTA       → the pricing/booking block that ends each category page.
     FOOTER         → same on every page.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --white:#FFFFFF;
  --paper:#FAFAF8;
  --line:#E3E1DC;
  --black:#131211;
  --ink:#1B1A18;
  --ink-soft:#55524C;
  --gray:#8B887F;
  --gray-light:#C8C5BD;
  --display:'Jost', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
  --sans:'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --max:1440px;
  --gutter:clamp(20px, 5vw, 64px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:82px;
}

/* ============ BASE ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
/* Site-wide orphan/widow control: headings balance across lines, body copy
   avoids leaving a short straggler on the last line. This is a baseline —
   browsers without text-wrap support just ignore it — so short fragments
   (1-2 words, or a short clause before a comma) are additionally hand-fixed
   with &nbsp; / <br> directly in each page's copy where needed. */
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
/* Manual responsive line break: hidden by default, only forces a break on
   phone-width screens — use <br class="br-mobile"> in copy where a specific
   mobile wrap is needed without affecting desktop/tablet. */
.br-mobile{ display:none; }
@media (max-width: 700px){
  .br-mobile{ display:inline; }
}
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; background:none; border:none; cursor:pointer; }
[hidden]{ display:none !important; }

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

.eyebrow{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:500;
}

[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

/* ============ PLACEHOLDER IMAGERY ============ */
.ph{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background-size:cover !important;
  background-position:center !important;
}
.ph-label{
  display:inline-block;
  margin:14px;
  padding:7px 11px;
  background:rgba(255,255,255,.88);
  color:var(--ink);
  font-size:.6rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.4;
  max-width:calc(100% - 28px);
  opacity:0;
  transition:opacity .3s var(--ease);
}
.ph.always-label .ph-label{ opacity:1; }
.ph:hover .ph-label,
.ph:focus-within .ph-label{ opacity:1; }
.ph.dark .ph-label{
  background:rgba(19,18,17,.6);
  color:var(--white);
}
.ph-tag{
  position:absolute;
  top:14px; left:14px;
  font-size:.58rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--white);
  background:rgba(19,18,17,.55);
  padding:5px 9px;
  z-index:1;
}

/* neutral, desaturated placeholder tones — no warm beige/blush */
.ph-hero{ background:linear-gradient(150deg,#0E0D0C 0%, #3C3A36 40%, #6E6B64 72%, #9A968C 100%); }
.ph-business-1{ background:linear-gradient(160deg,#161514 0%, #4A4844 60%, #78756C 100%); }
.ph-business-2{ background:linear-gradient(150deg,#2B2A27 0%, #57544D 100%); }
.ph-seniors-1{ background:linear-gradient(160deg,#5C5952 0%, #918D82 60%, #C7C3B8 100%); }
.ph-seniors-2{ background:linear-gradient(150deg,#79766C 0%, #B4B0A3 100%); }
.ph-branding-1{ background:linear-gradient(160deg,#3A3833 0%, #736F64 55%, #A8A398 100%); }
.ph-branding-2{ background:linear-gradient(150deg,#514E48 0%, #8A8579 100%); }
.ph-families-1{ background:linear-gradient(160deg,#84806F 0%, #B8B4A6 55%, #E4E1D8 100%); }
.ph-families-2{ background:linear-gradient(150deg,#6E6B60 0%, #A7A398 100%); }
.ph-about-1{ background:linear-gradient(160deg,#2A2924 0%, #6B675D 55%, #A39E90 100%); }
.ph-mix-a{ background:linear-gradient(160deg,#201F1C 0%, #504D46 100%); }
.ph-mix-b{ background:linear-gradient(150deg,#4E4B44 0%, #8B8779 100%); }
.ph-mix-c{ background:linear-gradient(160deg,#8D897C 0%, #D2CEC2 100%); }
.ph-mix-d{ background:linear-gradient(150deg,#33312D 0%, #6B675D 100%); }

/* ============ NAVIGATION ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:200;
  background:var(--white);
  border-bottom:1px solid var(--line);
  height:var(--nav-h);
  display:flex;
  align-items:center;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
}
.logo{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--black);
  white-space:nowrap;
  text-transform:uppercase;
}
.logo span{ font-weight:500; }

.brand-logo{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--black);
  white-space:nowrap;
}
.brand-logo-mark{
  display:block;
  height:34px;
  width:auto;
}
.brand-logo-text{
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--black);
}

.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(16px, 2.2vw, 34px);
}
.main-nav a{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--black);
  position:relative;
  padding-bottom:4px;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:0;
  height:1px;
  background:currentColor;
  transition:right .35s var(--ease);
}
.main-nav a:hover::after{ right:0; }
.main-nav a[aria-current="page"]::after{ right:0; }

.btn-book{
  display:inline-block;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  padding:12px 26px;
  border:1px solid var(--black);
  color:var(--black);
  transition:background .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn-book:hover{ background:var(--black); color:var(--white); }
.btn-book.on-dark{ border-color:var(--white); color:var(--white); }
.btn-book.on-dark:hover{ background:var(--white); color:var(--black); }

.nav-actions{ display:flex; align-items:center; gap:26px; }

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:28px;
  height:22px;
}
.hamburger span{
  display:block;
  height:1px;
  width:100%;
  background:var(--black);
  transition:transform .35s var(--ease), opacity .3s var(--ease);
}
.hamburger.is-active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position:fixed;
  inset:0;
  top:var(--nav-h);
  background:var(--black);
  z-index:150;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.mobile-menu.is-open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear 0s;
}
.mobile-menu a{
  font-family:var(--display);
  font-size:1.85rem;
  color:var(--white);
}
.mobile-menu a[aria-current="page"]{ color:var(--gray-light); }
.mobile-menu .btn-book{ margin-top:10px; padding:10px 22px; font-size:.62rem; }

@media (max-width: 1080px){
  .main-nav{ display:none; }
  .nav-actions .btn-book{ display:none; }
  .hamburger{ display:flex; }
}

/* Floating "Book Now" — mobile/tablet only, stays put while scrolling */
.floating-book{
  display:none;
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
  padding:15px 26px;
  background:var(--black);
  color:var(--white);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  border-radius:999px;
  box-shadow:0 10px 28px rgba(10,10,9,.28);
}
@media (max-width: 1080px){
  .floating-book{ display:block; }
}
@media (max-width: 480px){
  .floating-book{ right:16px; bottom:16px; padding:13px 22px; font-size:.64rem; }
}

/* ============ HERO ============ */
.hero{
  position:relative;
  /* height grows with viewport height as before, but on wide/short windows
     it also grows with viewport WIDTH (55vw) so the banner never gets so
     short and wide that hero photos get cropped down to a thin sliver —
     this keeps the same photo crop consistent from phone to ultra-wide. */
  height:max(calc(100vh - var(--nav-h)), 55vw);
  height:max(calc(100svh - var(--nav-h)), 55vw);
  min-height:520px;
  display:flex;
  align-items:flex-end;
}
/* shorter variant for the four category pages */
.hero.hero--page{
  height:max(78vh, 44vw);
  height:max(78svh, 44vw);
  min-height:440px;
}
.hero-media{ position:absolute; inset:0; }
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,10,9,.66) 0%, rgba(10,10,9,.08) 42%, rgba(10,10,9,0) 60%);
}
.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding:0 var(--gutter) clamp(48px, 8vh, 96px);
  color:var(--white);
}
.hero-inner{ max-width:740px; }
.hero-eyebrow{ color:var(--gray-light); margin-bottom:16px; }
.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.4rem, 6.2vw, 5.2rem);
  line-height:1.05;
}
.hero.hero--page h1{ font-size:clamp(2.2rem, 5.4vw, 4.4rem); }
.hero:not(.hero--page) h1{
  text-transform:uppercase;
  letter-spacing:.02em;
}
/* centered, title-only variant — About page */
.hero.hero--about{
  height:max(56vh, 31vw);
  height:max(56svh, 31vw);
  min-height:360px;
  align-items:center;
}
.hero.hero--about .hero-content{ text-align:center; padding-bottom:0; }
.hero.hero--about .hero-inner{ max-width:none; margin:0 auto; }
.hero.hero--about h1{ font-size:clamp(2.4rem, 6vw, 4.6rem); }
.hero-sub{
  margin-top:20px;
  max-width:640px;
  font-size:clamp(1.3rem, 2.4vw, 1.9rem);
  line-height:1.4;
  font-weight:700;
  color:var(--white);
}
.hero-meta{
  margin-top:18px;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:rgba(255,255,255,.75);
}
.hero-actions{ margin-top:34px; }
.hero-actions .btn-book{ padding:15px 32px; }

.scroll-cue{
  position:absolute;
  right:var(--gutter);
  bottom:32px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.7);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.scroll-cue .line{ width:1px; height:32px; background:rgba(255,255,255,.5); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--white);
  animation:scrollcue 2.4s ease-in-out infinite;
}
@keyframes scrollcue{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media (max-width: 640px){ .scroll-cue{ display:none; } }

/* ============ INTRO ============ */
.intro{
  padding:clamp(84px, 12vw, 150px) var(--gutter) clamp(72px, 10vw, 130px);
  max-width:880px;
  margin:0 auto;
  text-align:center;
}
.intro-rule{ width:40px; height:1px; background:var(--black); margin:0 auto 24px; }
.intro h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.65rem, 3.5vw, 2.5rem);
  line-height:1.28;
  color:var(--ink);
}
.intro p{
  margin-top:26px;
  font-size:clamp(1rem, 1.3vw, 1.1rem);
  line-height:1.85;
  font-weight:300;
  color:var(--ink-soft);
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
}
.intro p + p{ margin-top:20px; }
.intro-home{ padding-top:clamp(42px, 6vw, 75px); padding-bottom:clamp(36px, 5vw, 65px); }
.intro-home h2{
  font-family:'Cormorant Garamond', serif;
  font-style:normal;
  font-weight:500;
  font-size:clamp(2.1rem, 4.8vw, 3.2rem);
  line-height:1.2;
  margin-bottom:10px;
  text-wrap:balance;
}
.intro-home .intro-lead{
  font-family:'Cormorant Garamond', serif;
  font-style:normal;
  font-weight:500;
  font-size:clamp(1.35rem, 2.4vw, 1.7rem);
  color:var(--ink);
}
.intro-home .intro-lead + .intro-lead{ margin-top:6px; }
.intro-home p{
  margin-top:14px;
  font-weight:600;
  font-size:clamp(1.1rem, 1.6vw, 1.3rem);
  line-height:1.7;
  color:var(--ink);
  text-wrap:pretty;
}
.intro-sign{
  margin-top:28px;
  font-family:var(--display);
  font-size:1.2rem;
  color:var(--ink);
}

/* ============ ABOUT STORY ============ */
.about-story{
  padding:clamp(84px, 12vw, 140px) var(--gutter) clamp(100px, 12vw, 150px);
  max-width:820px;
  margin:0 auto;
}
.about-story .eyebrow{
  display:block;
  text-align:center;
  color:var(--gray);
  margin-bottom:32px;
}
.about-story p{
  font-size:clamp(1rem, 1.3vw, 1.1rem);
  line-height:1.9;
  font-weight:300;
  color:var(--ink-soft);
}
.about-story p + p{ margin-top:22px; }
.about-story .intro-sign{ text-align:center; }

/* ============ LEGAL (Privacy Policy) ============ */
.legal{
  padding:clamp(64px, 9vw, 100px) var(--gutter) clamp(100px, 12vw, 150px);
  max-width:760px;
  margin:0 auto;
}
.legal-head{ text-align:center; margin-bottom:clamp(48px, 6vw, 72px); }
.legal-head .eyebrow{ color:var(--gray); }
.legal-head h1{
  margin-top:14px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  color:var(--ink);
}
.legal-head .legal-updated{
  margin-top:14px;
  font-size:.85rem;
  color:var(--gray);
}
.legal-body h2{
  font-family:var(--display);
  font-weight:500;
  font-size:1.3rem;
  color:var(--ink);
  margin-top:44px;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{
  margin-top:16px;
  font-size:.98rem;
  line-height:1.8;
  font-weight:300;
  color:var(--ink-soft);
}
.legal-body ul{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.legal-body ul li{
  font-size:.98rem;
  line-height:1.7;
  font-weight:300;
  color:var(--ink-soft);
  padding-left:20px;
  position:relative;
}
.legal-body ul li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--gray);
}
.legal-body a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.legal-body a:hover{ color:var(--gray); }

/* ============ CONTACT FORM ============ */
.contact-section{
  padding:0 var(--gutter) clamp(100px, 12vw, 150px);
  max-width:760px;
  margin:0 auto;
}
.contact-head{
  text-align:center;
  padding-top:clamp(84px, 12vw, 140px);
  margin-bottom:clamp(48px, 6vw, 72px);
}
.contact-head .eyebrow{ color:var(--gray); }
.contact-head h1{
  margin-top:14px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  color:var(--ink);
}
.contact-head p{
  margin-top:18px;
  font-size:1rem;
  line-height:1.75;
  font-weight:300;
  color:var(--ink-soft);
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
}

.contact-form{ display:flex; flex-direction:column; gap:26px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:9px; }
.field label{
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink);
}
.field label .req{ color:var(--gray); font-weight:400; text-transform:none; letter-spacing:0; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  padding:13px 16px;
  transition:border-color .25s var(--ease);
  appearance:none;
  -webkit-appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355524C' stroke-width='1.4'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px;
  padding-right:40px;
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.6; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--gray); }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-color:var(--black); }

.field-hp{ position:absolute; left:-9999px; opacity:0; pointer-events:none; }

.btn-submit{
  align-self:flex-start;
  display:inline-block;
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  padding:15px 40px;
  border:1px solid var(--black);
  background:var(--black);
  color:var(--white);
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.btn-submit:hover{ background:var(--white); color:var(--black); }
.btn-submit:disabled{ opacity:.5; cursor:default; }

.form-consent{
  font-size:.78rem;
  line-height:1.6;
  font-weight:300;
  color:var(--gray);
}

.form-status{
  font-size:.95rem;
  line-height:1.7;
  font-weight:300;
  padding:20px 0;
}
.form-status.is-success{ color:var(--ink); }
.form-status.is-error{ color:#8A3B2E; }

/* ============ CATEGORIES (homepage "Choose Your Session") ============ */
.categories{ padding:0 0 clamp(80px, 10vw, 130px); }
.categories-head{
  padding:0 var(--gutter);
  display:flex;
  align-items:baseline;
  justify-content:center;
  text-align:center;
  gap:24px;
  max-width:var(--max);
  margin:0 auto clamp(22px, 3vw, 40px);
}
.categories-head h2{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(1.9rem, 4vw, 3rem);
  color:var(--ink);
}
.categories-head .eyebrow{ color:var(--gray); }

.category-grid{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px, 2vw, 28px);
  align-items:stretch;
}
.category{
  display:grid;
  grid-template-rows:auto auto 1fr auto;
}

.category-image{ display:block; width:100%; aspect-ratio:3/4; overflow:hidden; cursor:pointer; }

.category h3{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.45rem, 2.3vw, 1.85rem);
  color:var(--ink);
  margin-top:24px;
}
.category p{
  margin-top:10px;
  font-size:.94rem;
  line-height:1.65;
  font-weight:300;
  color:var(--ink-soft);
  max-width:34ch;
  text-wrap:pretty;
}
.category-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--black);
  border-bottom:1px solid var(--black);
  padding-bottom:4px;
  transition:gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.category-link svg{ width:14px; height:14px; flex-shrink:0; }
.category-link:hover{ gap:16px; color:var(--gray); border-color:var(--gray); }

@media (max-width: 1180px){
  .category-grid{ grid-template-columns:repeat(2, 1fr); gap:32px 28px; }
}
@media (max-width: 900px){
  .categories-head{ flex-direction:column; align-items:center; gap:10px; }
  .categories{ padding-bottom:clamp(40px, 5vw, 65px); }
}
@media (max-width: 480px){
  .category-grid{ gap:20px 14px; }
  .category h3{ font-size:1.1rem; margin-top:14px; }
  .category p{ font-size:.78rem; line-height:1.5; margin-top:6px; }
  .category-link{ font-size:.62rem; letter-spacing:.1em; margin-top:12px; }
}

/* ============ PORTFOLIO (many-picture grid) ============ */
.portfolio{
  padding:0 0 clamp(90px, 11vw, 140px);
  background:var(--paper);
  padding-top:clamp(80px, 10vw, 120px);
}
.portfolio-head{
  text-align:center;
  max-width:640px;
  margin:0 auto clamp(40px, 5vw, 64px);
  padding:0 var(--gutter);
}
.portfolio-head .eyebrow{ color:var(--gray); }
.portfolio-head h2{
  margin-top:14px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.9rem, 4vw, 3rem);
  color:var(--ink);
}
.portfolio-head p{
  margin-top:16px;
  font-size:.98rem;
  line-height:1.7;
  font-weight:300;
  color:var(--ink-soft);
}

.portfolio-grid{
  max-width:900px;
  margin:0 auto;
  padding:0 var(--gutter);
  column-count:1;
  column-gap:14px;
}
.portfolio-item{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin-bottom:14px;
}
.portfolio-item img{
  display:block;
  width:100%;
  height:auto;
}

.portfolio-more{
  margin:clamp(40px, 5vw, 60px) auto 0;
  text-align:center;
}

@media (max-width: 640px){
  .portfolio-grid{ max-width:var(--max); column-count:1; column-gap:8px; }
  .portfolio-item{ margin-bottom:8px; }
}

@media (min-width: 641px){
  .portfolio-grid{
    max-width:1000px;
    display:block;
    column-count:2;
    column-gap:14px;
  }
  .portfolio-item{ margin-bottom:14px; }
}

/* ============ BOOK CTA (category pages end here) ============ */
.book-cta{ padding:clamp(84px, 10vw, 130px) 0; }
.book-cta .container{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:clamp(40px, 6vw, 88px);
  align-items:start;
}
.book-cta-head .eyebrow{ font-size:.78rem; color:var(--ink-soft); }
.book-cta-head h2{
  margin-top:14px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  color:var(--ink);
}
.book-cta-head .lead{
  margin-top:18px;
  font-size:1.05rem;
  line-height:1.75;
  font-weight:400;
  color:var(--ink);
  max-width:52ch;
}
.book-cta-list{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.book-cta-list li{
  display:flex;
  gap:14px;
  font-size:.95rem;
  line-height:1.6;
  font-weight:300;
  color:var(--ink);
}
.book-cta-list li::before{ content:"—"; color:var(--ink-soft); flex:none; }

.book-card{
  border:1px solid var(--line);
  padding:clamp(32px, 4vw, 48px) clamp(28px, 3vw, 36px);
  text-align:left;
}
.book-card .eyebrow{ font-size:.78rem; color:var(--ink-soft); }
.book-card .price{
  margin-top:16px;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(2.4rem, 5vw, 3.2rem);
  color:var(--ink);
  line-height:1;
}
.book-card .price-note{
  margin-top:6px;
  font-size:.9rem;
  color:var(--ink);
  font-weight:400;
}
.book-card .btn-book{
  margin-top:28px;
  width:100%;
  text-align:center;
}

@media (max-width: 900px){
  .book-cta .container{ grid-template-columns:1fr; }
}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--white);
  padding:clamp(60px, 8vw, 92px) 0 26px;
  border-top:1px solid var(--line);
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:52px;
}
.footer-brand .logo{ color:var(--black); font-size:1.3rem; }
.footer-brand p{
  margin-top:16px;
  font-size:.9rem;
  line-height:1.7;
  color:var(--ink-soft);
  font-weight:300;
  max-width:32ch;
}
.footer-col h4{
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--gray);
  margin-bottom:18px;
}
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ font-size:.92rem; color:var(--ink-soft); transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--black); }

.footer-cta .btn-book{ margin-top:6px; }

/* email "choose how to open" dropdown */
.email-item{ position:relative; }
.email-trigger{
  font-family:inherit;
  font-size:.92rem;
  color:var(--ink-soft);
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  transition:color .3s var(--ease);
}
.email-trigger:hover,
.email-trigger[aria-expanded="true"]{ color:var(--black); }
.email-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:20;
  min-width:200px;
  background:var(--white);
  border:1px solid rgba(19,18,17,.1);
  box-shadow:0 14px 34px rgba(19,18,17,.12);
  padding:8px;
  display:flex;
  flex-direction:column;
}
.email-menu[hidden]{ display:none; }
.email-menu a,
.email-menu button{
  font-family:inherit;
  font-size:.85rem;
  text-align:left;
  color:var(--ink);
  background:none;
  border:none;
  padding:9px 10px;
  margin:0;
  cursor:pointer;
  border-radius:2px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.email-menu a:hover,
.email-menu button:hover{ background:var(--paper); color:var(--black); }
.email-copy.is-copied{ color:var(--black); font-weight:500; }

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:.74rem;
  color:var(--ink-soft);
  flex-wrap:wrap;
}
.footer-legal a{ color:var(--ink-soft); transition:color .3s var(--ease); }
.footer-legal a:hover{ color:var(--black); }

@media (max-width: 900px){
  .site-footer{ padding-top:clamp(30px, 4vw, 46px); }
  .footer-top{ grid-template-columns:1fr 1fr; row-gap:38px; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width: 560px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:30px 20px; }
}