/* =========================================================================
   Aidan Scheuneman, Bar/Marketing Consultant · zefren.com
   Refined production stylesheet.
   Design system (palette / type / sections) preserved from the handoff;
   rebuilt mobile-first + fluid so a single file serves 375px → 1440px+.
   ========================================================================= */

:root{
  /* Brand palette (unchanged) */
  --forest:#3f4a32; --forest-deep:#2d3526; --moss:#5c6b48; --sage:#8a9476;
  --gold:#bfa86a; --tan:#d8c7a8; --sand:#e7dcc6; --cream:#f5efe3; --paper:#faf6ec;
  --bark:#4a3f33; --bark-deep:#372e25; --ink:#2a2620; --muted:#6e6555;
  --line:rgba(58,52,42,.14);

  /* Accessibility-only tweaks: marginally lighter shades used solely for
     small labels on dark backgrounds, so they clear WCAG AA. */
  --gold-label:#d2bd85;   /* eyebrow.gold / pillar-num; 4.83 on the pillar surface */
  --sage-label:#9aa487;   /* contact note on bark-deep */

  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Work Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Utility/metadata face. Neo-serif display paired with monospace labels is
     the current editorial convention; it also visually separates data
     (dates, locations, counts) from prose at a glance. Mono carries wider
     sidebearings than sans, so every mono role drops its letter-spacing. */
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius:14px;
  --header-h:72px;
  --shadow-card:0 18px 50px rgba(42,38,32,.16);
  --shadow-deep:0 30px 70px rgba(42,38,32,.22);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}

.text-muted{color:var(--muted)}

html{scroll-behavior:smooth}

body{
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}

/* Sections target their own id below a sticky header */
:where(section[id]){scroll-margin-top:calc(var(--header-h) + 12px)}

/* Visible focus for keyboard users */
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:6px}

/* Skip link */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:100;
  background:var(--forest);color:var(--cream);
  padding:10px 18px;border-radius:100px;font-size:14px;font-weight:600;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:12px}

/* Layout primitives */
.container{
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}
.section{padding-block:clamp(64px,9vw,128px)}

/* Shared type roles */
.eyebrow{
  font-family:var(--mono);
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:var(--moss);margin-bottom:clamp(12px,1.4vw,16px);
}
.eyebrow.gold{color:var(--gold-label)}
.eyebrow.light{color:var(--tan)}

.section-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.875rem,4.6vw,3rem);
  line-height:1.08;letter-spacing:-.01em;
}
.section-title.light{color:#fff}
.section-lede{
  color:var(--muted);max-width:560px;margin-top:16px;
  font-size:clamp(.95rem,1.3vw,1.125rem);
}
.section-lede.light{color:rgba(245,239,227,.82)}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:500;
  padding:14px 26px;border-radius:100px;
  min-height:48px;
  transition:transform .18s var(--ease), background-color .18s var(--ease),
             border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn-primary{background:var(--tan);color:var(--bark-deep)}
.btn-primary:hover{background:#e3d4b6;transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(245,239,227,.6);color:var(--cream)}
.btn-ghost:hover{border-color:var(--cream);background:rgba(245,239,227,.08);transform:translateY(-2px)}
.btn-outline{border:1.5px solid var(--forest);color:var(--forest);font-weight:600;white-space:nowrap}
.btn-outline:hover{background:var(--forest);color:var(--cream);transform:translateY(-2px)}
.btn-lg{padding:16px 34px;font-size:17px;min-height:54px}

/* =====================  HEADER  ===================== */
.site-header{
  position:sticky;top:0;z-index:50;
  min-height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(250,246,236,.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header.scrolled{box-shadow:0 6px 22px rgba(42,38,32,.10);background:rgba(250,246,236,.94)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px}

.brand{display:flex;align-items:center;gap:11px;color:var(--forest);min-height:44px;padding-block:4px}
.brand svg{flex:none}
.brand-mark{color:var(--forest);transition:transform .3s var(--ease)}
.brand:hover .brand-mark{transform:translateY(-1px) scale(1.04)}
.site-header.scrolled .brand-mark{transform:scale(.94)}
.brand-name{font-family:var(--serif);font-weight:600;font-size:clamp(15px,1.55vw,19px);color:var(--ink);white-space:nowrap}
/* Zefren is the middle name, and the domain. Give it its own colour so the
   connection between the person and zefren.com reads at a glance. */
.brand-mid{font-style:italic;font-weight:500;color:var(--forest)}
.nowrap{white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.nav{display:none}                 /* shown ≥880px */
/* Seven items have to clear 880px, so the gap tightens before the labels wrap. */
.nav a{position:relative;font-size:15px;color:var(--muted);padding:6px 2px;transition:color .15s var(--ease)}
.nav a:not(.cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--forest);border-radius:2px;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover:not(.cta)::after{transform:scaleX(.4)}
.nav a[aria-current="true"]{color:var(--forest);font-weight:600}
.nav a[aria-current="true"]:not(.cta)::after{transform:scaleX(1)}
.nav .cta{
  background:var(--forest);color:var(--cream);
  padding:10px 22px;border-radius:100px;font-weight:500;min-height:42px;
  display:inline-flex;align-items:center;
  transition:background-color .18s var(--ease),transform .18s var(--ease);
}
.nav .cta:hover{background:#4b5a3c;transform:translateY(-1px);color:var(--cream)}

/* Hamburger */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;color:var(--forest);
  border:1px solid var(--line);
}
.nav-toggle:hover{background:rgba(58,52,42,.05)}
.nav-toggle .bar{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.nav-toggle .bar + .bar{margin-top:5px}
.site-header.menu-open .nav-toggle .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.menu-open .nav-toggle .bar:nth-child(2){opacity:0}
.site-header.menu-open .nav-toggle .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile panel */
.mobile-nav{
  position:fixed;left:0;right:0;top:var(--header-h);z-index:49;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:8px clamp(20px,5vw,40px) 28px;
  display:grid;gap:4px;
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 22px 40px rgba(42,38,32,.14);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
.mobile-nav.open{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.mobile-nav a{
  font-family:var(--serif);font-size:22px;color:var(--ink);
  padding:14px 4px;border-bottom:1px solid var(--line);
}
.mobile-nav a:last-child{border-bottom:none}
.mobile-nav .cta{
  margin-top:14px;background:var(--forest);color:var(--cream);text-align:center;
  border-radius:100px;font-family:var(--sans);font-size:16px;font-weight:500;
  padding:15px;border-bottom:none;
}
.scroll-lock{overflow:hidden}

/* =====================  HERO  ===================== */
.hero{
  position:relative;
  min-height:clamp(560px,82vh,760px);
  display:flex;align-items:center;
  overflow:hidden;
}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{
  position:absolute;inset:0;
  /* mobile: bottom-weighted for legibility under centred text */
  background:linear-gradient(180deg,rgba(26,32,22,.76) 0%,rgba(28,34,24,.83) 52%,rgba(26,32,22,.93) 100%);
}
.hero-content{position:relative;z-index:2;color:var(--cream);padding-block:48px}
.hero-status{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);
  font-size:clamp(11px,1vw,13px);letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  color:var(--cream);background:rgba(245,239,227,.12);
  border:1px solid rgba(245,239,227,.30);
  padding:8px 16px;border-radius:100px;margin-bottom:clamp(24px,3vw,32px);
}
.status-dot{width:8px;height:8px;border-radius:50%;background:#9ec27a;box-shadow:0 0 0 4px rgba(158,194,122,.22)}
.hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.8125rem,8.8vw,5.5rem);
  line-height:1.0;letter-spacing:-.02em;color:#fff;
}
.hero-title .line{display:block}
.hero-title .accent{color:var(--tan);font-style:italic}
.hero-lede{
  margin-top:clamp(20px,2.4vw,28px);max-width:560px;
  font-size:clamp(1rem,1.6vw,1.25rem);color:rgba(245,239,227,.94);font-weight:300;
}
.hero-actions{display:flex;flex-direction:column;gap:14px;margin-top:clamp(30px,3.4vw,40px)}
/* The forwardable asset. Quiet in the hero so it doesn't compete with the two
   buttons, but reachable without scrolling 16,000px to the contact block. */
.hero-resume{margin-top:18px}
.hero-resume a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:rgba(245,239,227,.82);
  border-bottom:1px solid rgba(245,239,227,.34);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.hero-resume a:hover{color:#fff;border-bottom-color:#fff}

/* =====================  ABOUT  ===================== */
.about{background:var(--cream)}
.about-grid{display:grid;gap:clamp(36px,5vw,80px)}
/* Signature lockup. The AS monogram plus the full name, so the domain
   reads as the middle name rather than a random word. */
.signature{margin-bottom:clamp(26px,3vw,34px)}
.signature-mark{color:var(--ink);opacity:.92;display:block}
.signature-name{
  font-family:var(--serif);font-size:clamp(1.0625rem,1.5vw,1.25rem);
  margin-top:14px;color:var(--ink);letter-spacing:.005em;
}
.signature-name em{font-style:italic;color:var(--forest)}
.signature-note{
  margin-top:5px;font-size:13px;color:var(--muted);
  border-left:2px solid var(--sand);padding-left:11px;
}
.about-body p{margin-bottom:18px;color:#403a30}
.about-body p:last-of-type{margin-bottom:0}
.about-body strong{color:var(--forest);font-weight:600}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,3vw,32px)}
.tags li{font-size:13px;background:var(--paper);border:1px solid var(--line);padding:8px 16px;border-radius:100px;color:var(--bark)}

/* =====================  WORK  ===================== */
.work-head{margin-bottom:clamp(40px,5vw,64px);max-width:680px}

.feature{
  display:grid;border-radius:var(--radius);overflow:hidden;
  background:var(--cream);box-shadow:var(--shadow-card);margin-bottom:clamp(24px,3vw,48px);
}
.feature-media{position:relative;min-height:240px;overflow:hidden}
.feature-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feature-content{padding:clamp(32px,4vw,56px)}
.case-meta{font-family:var(--mono);font-size:clamp(11px,1vw,13px);letter-spacing:.07em;text-transform:uppercase;color:var(--moss);font-weight:500;margin-bottom:8px}
.case-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:16px;line-height:1.1}
.feature-content>p{color:var(--muted)}
.points{list-style:none;margin-top:24px;display:grid;gap:9px}
.points li{position:relative;padding-left:22px;font-size:15px;color:var(--bark)}
.points li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--moss);transform:rotate(45deg)}

.case-grid{display:grid;grid-template-columns:1fr;gap:clamp(20px,2.6vw,32px)}
.card{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card-body{padding:clamp(28px,3.4vw,40px)}
.case-link{position:relative;display:inline-flex;align-items:center;gap:6px;margin-top:22px;font-size:15px;font-weight:600;color:var(--forest);border-bottom:1.5px solid var(--forest);padding-bottom:2px;align-self:flex-start;transition:gap .18s var(--ease)}
.case-link:hover{gap:11px}
/* The underline has to sit tight against the text, so the 44px touch target
   is added as an invisible overlay instead of by padding the link out. */
.case-link::after{
  content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px;
}

/* Branded media tile (placeholder for a real venue photo. Swap the markup
   for an <img> when one is available; see the comments in index.html). */
.card-media{
  position:relative;aspect-ratio:16/10;min-height:170px;overflow:hidden;
  display:flex;align-items:flex-end;padding:22px;
  border-bottom:1px solid var(--line);
}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-media .mark{position:absolute;top:18px;left:20px;opacity:.72;color:var(--sand)}
.card-media .tile-label{
  position:relative;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.25rem,2vw,1.6rem);color:rgba(245,239,227,.96);
}
.card-media.tile-forest{background:radial-gradient(120% 140% at 0% 0%,#566542 0%,var(--forest) 42%,var(--forest-deep) 100%)}
.card-media.tile-bark{background:radial-gradient(120% 140% at 0% 0%,#5a4d3e 0%,var(--bark) 45%,var(--bark-deep) 100%)}

/* Photo tile with the venue's own mark laid over it (Zynda's). The scrim keeps
   the cream logo legible no matter how bright the top of the photo is. */
.card-media.tile-photo{padding:clamp(16px,2.4vw,22px)}
.card-media.tile-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,14,8,.05) 30%,rgba(20,14,8,.78) 100%);
}
.card-media .tile-logo{
  position:relative;z-index:2;
  width:clamp(130px,46%,200px);height:auto;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.55));
}

/* Logo lockup tile. A real brand mark on a light surface (Elite Golf). */
.card-media.tile-mark{
  background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,3vw,30px);
}
.card-media.tile-mark img{
  position:static;width:auto;height:100%;max-width:78%;
  object-fit:contain;
}

/* =====================  LIGHTBOX TRIGGERS  ===================== */
/* Every enlargeable image is wrapped in a real <button> so it is
   keyboard reachable and announced; the hint chip appears on hover/focus. */
.lb-trigger{
  display:block;position:relative;width:100%;padding:0;
  background:none;border:0;cursor:zoom-in;overflow:hidden;
}
.lb-trigger img{transition:transform .5s var(--ease)}
.lb-trigger:hover img,.lb-trigger:focus-visible img{transform:scale(1.035)}
.lb-hint{
  position:absolute;right:12px;bottom:12px;z-index:2;
  font-family:var(--mono);
  font-size:11px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  color:var(--bark-deep);background:rgba(250,246,236,.94);
  padding:6px 12px;border-radius:100px;
  opacity:0;transform:translateY(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease);
  pointer-events:none;
}
.lb-trigger:hover .lb-hint,.lb-trigger:focus-visible .lb-hint{opacity:1;transform:none}

/* Feature card media: the button fills the media well */
.feature-media .lb-trigger--cover{position:absolute;inset:0;height:100%}

/* =====================  GALLERY  ===================== */
.gallery-head{margin-top:clamp(56px,7vw,88px);margin-bottom:clamp(28px,3.4vw,40px);max-width:680px}
.gallery-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.8vw,2.125rem);line-height:1.12}
.gallery-head .section-lede{margin-top:12px}

.gallery{display:grid;grid-template-columns:1fr;gap:clamp(12px,1.6vw,18px)}
.shot{
  border-radius:var(--radius);overflow:hidden;
  background:var(--sand);box-shadow:var(--shadow-card);
}
.shot--p{aspect-ratio:4/5}
.shot--h,.shot--wide2,.shot--wide4,.shot--full{aspect-ratio:3/2}
.shot img{width:100%;height:100%;object-fit:cover}
/* Gallery heading that carries a venue's own logo alongside the copy. The
   dark logo variant is used here because the section sits on --paper. */
.gallery-head--brand{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px)}
.gallery-brand-logo{width:clamp(150px,20vw,210px);height:auto;flex:none}
@media (min-width:600px){
  .gallery-head--brand{flex-direction:row;align-items:flex-start;max-width:820px}
  .gallery-brand-logo{margin-top:6px;width:clamp(120px,14vw,180px)}
}

.gallery-credit{
  margin-top:clamp(16px,2vw,22px);
  margin-bottom:clamp(8px,1.4vw,12px);
  font-size:13px;color:var(--muted);
}
.gallery-credit a{border-bottom:1px solid var(--line)}
.gallery-credit a:hover{color:var(--forest);border-bottom-color:var(--forest)}

/* =====================  MENUS  ===================== */
.menus{background:var(--cream)}
.menu-group{margin-bottom:clamp(48px,6vw,80px)}
.menu-group:last-child{margin-bottom:0}
.menu-group-head{
  display:flex;flex-direction:column;gap:20px;
  padding-bottom:clamp(20px,2.4vw,26px);margin-bottom:clamp(22px,2.6vw,30px);
  border-bottom:1px solid var(--line);
}
.menu-group-intro{display:flex;align-items:flex-start;gap:clamp(14px,2vw,22px)}
.menu-logo{width:clamp(44px,4.4vw,56px);height:auto;flex:none;margin-top:4px}
.menu-logo--wide{width:clamp(48px,4.8vw,62px)}
.menu-group-title{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.625rem);line-height:1.15}
.menu-group-note{margin-top:8px;color:var(--muted);font-size:15px;max-width:62ch}

.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,20px)}
.menu-grid--single{grid-template-columns:1fr}
.menu-split{display:grid;gap:clamp(22px,3vw,40px);align-items:start}
.menu-facts{list-style:none;display:grid;gap:16px}
.menu-facts li{position:relative;padding-left:22px;font-size:15px;color:var(--muted);line-height:1.6}
.menu-facts li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;background:var(--moss);transform:rotate(45deg)}
.menu-facts strong{color:var(--bark);font-weight:600}

.menu-tile{
  border-radius:var(--radius);overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(42,38,32,.10);
  display:block;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease);
}
.menu-tile:hover{box-shadow:var(--shadow-card);transform:translateY(-3px)}
.menu-tile img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top center}
.menu-tile--wide img{aspect-ratio:4/3;object-position:center}
.menu-tile-label{
  display:block;padding:12px 14px;text-align:left;
  font-family:var(--mono);
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;
  color:var(--bark);border-top:1px solid var(--line);background:var(--paper);
}
.menu-tile .lb-hint{bottom:auto;top:12px}

/* Brand-section menu page: shown whole, not cropped */
.brand-detail-media.has-page{aspect-ratio:auto;background:var(--cream);padding:clamp(14px,1.8vw,22px)}
.brand-detail-media .lb-trigger--page{position:static;border-radius:6px}
.brand-detail-media .lb-trigger--page img{position:static;width:100%;height:auto;object-fit:contain}
.brand-cta{margin-top:clamp(26px,3vw,34px)}

/* =====================  LIGHTBOX  ===================== */
.lightbox{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,44px);
}
.lightbox[hidden]{display:none}
.lightbox{cursor:zoom-out}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(24,22,18,.93)}
.lightbox-img{cursor:default}
.lightbox-frame{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:min(1100px,100%);max-height:100%;
}
.lightbox-img{
  max-width:100%;max-height:calc(100vh - 170px);
  width:auto;height:auto;object-fit:contain;
  border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.55);background:#fff;
}
.lightbox-caption{
  color:rgba(245,239,227,.86);font-size:14px;text-align:center;
  max-width:60ch;line-height:1.5;
}
.lightbox-close,.lightbox-nav{
  position:absolute;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  color:var(--cream);background:rgba(245,239,227,.12);
  border:1px solid rgba(245,239,227,.28);
  transition:background-color .18s var(--ease),transform .18s var(--ease);
}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(245,239,227,.26)}
.lightbox-close{top:14px;right:14px}
.lightbox-nav{top:50%;transform:translateY(-50%)}
.lightbox-nav:hover{transform:translateY(-50%) scale(1.06)}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}
.lightbox-nav[hidden]{display:none}
.lb-open{overflow:hidden}

/* =====================  BRAND  ===================== */
.brand-section{background:var(--forest);color:var(--cream)}
.brand-intro{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.brand-intro p{font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:300;color:rgba(245,239,227,.92);line-height:1.6}
.brand-intro em{color:var(--tan);font-style:italic}
.pillars{display:grid;grid-template-columns:1fr;gap:clamp(16px,2vw,24px);margin-bottom:clamp(56px,8vw,96px)}
.pillar{border:1px solid rgba(245,239,227,.16);border-radius:var(--radius);padding:clamp(28px,3vw,32px);background:rgba(245,239,227,.02)}
.pillar-num{font-size:clamp(11px,1vw,13px);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-label);font-weight:600}
.pillar h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.625rem,2.4vw,1.875rem);margin-top:6px;color:#fff}
.pillar-sub{font-style:italic;color:var(--tan);font-size:15px;margin-bottom:12px}
.pillar>p:last-child{font-size:15px;color:rgba(245,239,227,.78)}

.brand-detail{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,64px);align-items:center}
.brand-detail-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-deep);aspect-ratio:4/3}
.brand-detail-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.brand-detail-text h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,1.875rem);color:#fff;margin-bottom:22px}
.brand-list{list-style:none;display:grid;gap:22px}
.brand-list li{font-size:15px;color:rgba(245,239,227,.84);padding-left:21px;position:relative;line-height:1.6}
.brand-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.brand-list strong{color:#fff;font-weight:600}

/* =====================  BROADCAST CAMPAIGN  =====================
   Sits at the foot of the forest-green brand section. Videos are
   self-hosted and preload="none", so nothing downloads until a play. */
.campaign{
  margin-top:clamp(56px,7vw,96px);
  padding-top:clamp(40px,5vw,64px);
  border-top:1px solid rgba(245,239,227,.16);
  display:grid;gap:clamp(28px,4vw,52px);align-items:start;
}
.campaign-text h3{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.5rem,2.4vw,1.875rem);color:#fff;
  margin:6px 0 18px;line-height:1.15;
}
.campaign-text p{color:rgba(245,239,227,.84);font-size:15px;line-height:1.65}
.campaign-note{
  margin-top:14px;font-size:13px !important;
  color:rgba(245,239,227,.72) !important;
  border-left:2px solid rgba(191,168,106,.5);padding-left:12px;
}
.case-link--light{color:var(--tan);border-bottom-color:var(--tan)}
.case-link--light:hover{color:#fff;border-bottom-color:#fff}
.campaign .case-link{margin-top:24px}

.spots{display:grid;gap:clamp(14px,2vw,20px)}
.spot{
  border-radius:var(--radius);overflow:hidden;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(245,239,227,.16);
  box-shadow:var(--shadow-deep);
}
.spot video{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;background:#000;object-fit:cover;
}
.spot figcaption{
  padding:11px 14px;
  font-family:var(--mono);
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:500;
  color:rgba(245,239,227,.7);
  border-top:1px solid rgba(245,239,227,.14);
}

.web{background:var(--bark-deep)}

/* =====================  WEB / SITE TILES  =====================
   Each tile is a single link themed to the brand it points at, using the
   palette pulled from that live site. */
.site-tiles{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px)}
.site-tile{
  display:flex;flex-direction:column;
  border-radius:var(--radius);overflow:hidden;
  background:var(--cream);border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.site-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-deep)}
.site-tile-art{
  position:relative;aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,3.4vw,36px);overflow:hidden;
}
.site-tile-art::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(110% 120% at 22% 8%,rgba(255,255,255,.12),transparent 62%);
}
.site-tile-art img{
  position:relative;z-index:2;
  width:auto;max-width:78%;max-height:100%;height:auto;object-fit:contain;
  transition:transform .3s var(--ease);
}
.site-tile:hover .site-tile-art img{transform:scale(1.04)}
.site-tile-mark{max-width:none !important;width:clamp(76px,9vw,104px) !important}

.site-tile--zyndas .site-tile-art{background:linear-gradient(152deg,#2f2013 0%,#190e06 58%,#0d0703 100%)}
.site-tile--verseau .site-tile-art{background:linear-gradient(152deg,#1c2f5b 0%,#101c39 60%,#0a1226 100%)}
.site-tile--troop   .site-tile-art{background:linear-gradient(152deg,#0b57ad 0%,#043c84 58%,#02295c 100%)}

/* Typographic mark for the troop tile: their own numerals rather than the
   Scouting America emblem, which is not mine to redraw. */
.troop-mark{position:relative;z-index:2;display:grid;justify-items:center;color:var(--cream);text-align:center;line-height:1}
.troop-mark-top,.troop-mark-sub{
  font-family:var(--mono);
  font-size:clamp(9px,1vw,11px);letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:rgba(245,239,227,.86);
}
.troop-mark-num{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(3.25rem,7vw,4.5rem);
  color:#fff;margin:6px 0 8px;letter-spacing:.02em;
}
.troop-mark-sub{color:rgba(245,239,227,.76);letter-spacing:.16em}

.site-tile-body{padding:clamp(24px,2.8vw,30px);display:flex;flex-direction:column;flex:1}
.site-tile-url{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--moss)}
.site-tile-name{font-family:var(--serif);font-size:clamp(1.1875rem,1.9vw,1.375rem);margin-top:7px;line-height:1.2;color:var(--ink)}
.site-tile-note{margin-top:11px;font-size:15px;color:var(--muted);flex:1;line-height:1.6}
.site-tile-go{
  position:relative;margin-top:20px;font-size:15px;font-weight:600;color:var(--forest);
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  border-bottom:1.5px solid var(--forest);padding-bottom:2px;
  transition:gap .18s var(--ease);
}
.site-tile:hover .site-tile-go{gap:11px}

/* =====================  EXPERIENCE  ===================== */
.experience{background:var(--cream)}
.timeline{display:grid;max-width:920px}
.tl-item{display:grid;grid-template-columns:1fr;gap:8px;padding:clamp(24px,3vw,32px) 0;border-top:1px solid var(--line)}
.tl-item:last-child{border-bottom:1px solid var(--line)}
.tl-date{font-family:var(--mono);font-size:clamp(11px,1vw,13px);letter-spacing:.05em;text-transform:uppercase;color:var(--moss);font-weight:500}
.tl-body h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.1875rem,1.6vw,1.25rem);margin-bottom:4px;line-height:1.2}
.tl-org{font-size:15px;color:var(--forest);font-weight:500;margin-bottom:8px}
.tl-body p:last-child{color:var(--muted);font-size:15px}

/* =====================  CONTACT  ===================== */
.contact{background:var(--bark-deep);color:var(--cream);text-align:center}
.contact-inner{max-width:720px;margin-inline:auto}
.contact-title{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;margin-bottom:22px;color:#fff}
.contact-lede{color:rgba(245,239,227,.82);margin-bottom:clamp(36px,4vw,48px);font-weight:300;font-size:clamp(1rem,1.3vw,1.125rem)}
.contact-emails{display:grid;gap:14px;justify-items:center}
.contact-emails .btn{width:100%;max-width:360px}
@media (min-width:600px){
  .contact-emails{grid-template-columns:auto auto;justify-content:center;align-items:center}
  .contact-emails .btn{width:auto;min-width:250px}
  .contact-emails .contact-alt{grid-column:1 / -1;margin-top:4px}
}
.contact-alt{font-size:15px;color:rgba(245,239,227,.62)}
.contact-alt a{color:var(--tan);border-bottom:1px solid rgba(216,199,168,.4)}
.contact-alt a:hover{border-bottom-color:var(--tan)}
.contact-note{margin-top:30px;font-family:var(--mono);font-size:clamp(11px,1vw,13px);letter-spacing:.09em;text-transform:uppercase;color:var(--sage-label)}

/* =====================  FOOTER  ===================== */
.footer{background:var(--bark-deep);color:rgba(245,239,227,.62);border-top:1px solid rgba(245,239,227,.1)}
.footer .container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding-block:30px;font-size:14px}
.footer-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);color:var(--cream);font-size:17px}
.footer-brand em{font-style:italic;color:var(--tan)}
.footer-mark{color:var(--tan);flex:none}
.footer-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.footer a:hover{color:var(--cream)}

/* =========================================================================
   SCROLL & MOTION SYSTEM
   Every animated element is readable and correctly positioned before any
   script runs. Initial hidden states live inside @media (scripting: enabled)
   so a browser with JS switched off never gets a blank page, and the whole
   system collapses to "everything visible, nothing moves" under
   prefers-reduced-motion. Only opacity/transform are animated.
   ========================================================================= */

/* ---- Reading progress ---- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  background:rgba(58,52,42,.07);
  opacity:0;transition:opacity .3s var(--ease);
}
.scroll-progress.is-on{opacity:1}
.scroll-progress-fill{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--moss) 0%,var(--forest) 45%,var(--gold) 100%);
  transform:scaleX(var(--progress,0));transform-origin:0 50%;
}

/* ---- Reveals ---- */
.reveal{transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---- Staggered children ---- */
[data-stagger]>*{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 65ms)}
[data-stagger].is-visible>*{opacity:1;transform:none}

/* ---- Counters ----
   These four numbers are the only hard evidence on the page, so the band
   gets real vertical weight rather than acting as a divider. */
.stats-band{background:var(--bark-deep);color:var(--cream);padding-block:clamp(56px,7vw,92px)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,4vw,48px)}
.stat{border-top:1px solid rgba(245,239,227,.18);padding-top:clamp(16px,2vw,22px)}
.stat-num{
  font-family:var(--serif);font-weight:500;line-height:1;
  font-size:clamp(2.625rem,6.4vw,4rem);color:var(--tan);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;
}
.stat-label{
  margin-top:12px;font-size:clamp(12px,1.05vw,14px);
  color:rgba(245,239,227,.76);line-height:1.45;max-width:24ch;
}

/* ---- Proof strip: who the work was for, and what backs it ----
   Replaces the missing third-party validation on a page where every other
   claim is self-reported. Real venue marks carry more weight than a badge. */
.proof-strip{background:var(--paper);border-bottom:1px solid var(--line);padding-block:clamp(40px,5vw,60px)}
.proof-label{
  font-family:var(--mono);font-size:clamp(11px,1vw,13px);
  letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:var(--moss);text-align:center;margin-bottom:clamp(24px,3vw,34px);
}
.venue-row{
  list-style:none;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:clamp(28px,6vw,72px);
}
.venue-row img{
  height:clamp(52px,7vw,82px);width:auto;
  opacity:.78;filter:saturate(.9);
  transition:opacity .25s var(--ease);
}
.venue-row li:hover img{opacity:1}
.venue-row .venue-wordmark img{height:clamp(34px,4.6vw,54px)}

.credentials{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;margin-top:clamp(28px,3.4vw,38px);
}
.credentials li{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--bark);
  background:var(--cream);border:1px solid var(--line);
  padding:8px 15px;border-radius:100px;
}

/* ---- Back to top ---- */
.to-top{
  position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:55;
  width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--forest);color:var(--cream);
  box-shadow:0 10px 26px rgba(42,38,32,.26);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background-color .2s var(--ease);
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:#4b5a3c;transform:translateY(-2px)}

/* ---- Lightbox entrance ---- */
.lightbox{opacity:0;transition:opacity .25s var(--ease)}
.lightbox.is-open{opacity:1}
.lightbox-frame{transform:scale(.965);transition:transform .3s var(--ease)}
.lightbox.is-open .lightbox-frame{transform:none}

/* ---- Initial states: only when JS can undo them ---- */
@media (scripting: enabled){
  .reveal{opacity:0;transform:translateY(22px)}
  .reveal--right,
  .reveal--left{transform:translateY(22px)}
  [data-stagger]>*{opacity:0;transform:translateY(16px)}
  .gallery[data-stagger]>*,
  .menu-grid[data-stagger]>*{transform:translateY(26px) scale(.975)}

  /* Hero entrance. Runs once on load, independent of scroll */
  .hero-content>*{opacity:0;transform:translateY(18px);animation:heroIn .9s var(--ease) forwards}
  .hero-status{animation-delay:.12s}
  .hero-title{animation-delay:.20s}
  .hero-lede{animation-delay:.34s}
  .hero-actions{animation-delay:.46s}
  .hero-title .line{display:block;opacity:0;transform:translateY(26px);animation:heroIn .95s var(--ease) forwards}
  .hero-title .line:nth-child(1){animation-delay:.22s}
  .hero-title .line:nth-child(2){animation-delay:.32s}
  .hero-title .line:nth-child(3){animation-delay:.42s}
}
/* Only once the viewport is wider than the 1180px container plus its
   gutters is there room to slide sideways without overflowing. */
@media (scripting: enabled) and (min-width:1260px){
  .reveal--right{transform:translateY(22px) translateX(26px)}
  .reveal--left{transform:translateY(22px) translateX(-26px)}
}

@keyframes heroIn{to{opacity:1;transform:none}}

/* Parallax targets. JS writes the transform; declaring will-change here keeps
   both layers on the compositor instead of repainting. */
.hero-img{will-change:transform}
.hero-content{will-change:transform,opacity}

/* ---- Reduced motion: show everything, animate nothing ---- */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal--left,
  .reveal--right,
  [data-stagger]>*,
  .gallery[data-stagger]>*,
  .menu-grid[data-stagger]>*,
  .hero-content>*,
  .hero-title .line{opacity:1 !important;transform:none !important;animation:none !important}
  .scroll-progress{display:none}
  .to-top{transition:none}
  .lightbox{opacity:1}
  .lightbox-frame{transform:none}
  .hero-img{transform:none !important}
}

/* =====================  RESPONSIVE  ===================== */
@media (min-width:560px){
  .hero-actions{flex-direction:row;flex-wrap:wrap}
  .hero-actions .btn{flex:0 0 auto}
}

@media (min-width:560px){
  .spots{grid-template-columns:1fr 1fr}
}

@media (min-width:600px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .shot--wide2,.shot--wide4{grid-column:span 2;aspect-ratio:2/1}
  .shot--full{grid-column:span 2;aspect-ratio:5/2}
  .shot--h{aspect-ratio:4/3}
  .menu-grid--pair{grid-template-columns:1fr 1fr;align-items:start}
}

@media (min-width:720px){
  .case-grid{grid-template-columns:1fr 1fr}
  .tl-item{grid-template-columns:200px 1fr;gap:32px}
  .footer .container{flex-direction:row;justify-content:space-between;align-items:center}
  .stats{grid-template-columns:repeat(4,1fr)}
  .menu-grid{grid-template-columns:repeat(3,1fr)}
  .menu-grid--single{grid-template-columns:1fr}
  .menu-grid--pair{grid-template-columns:repeat(3,1fr)}
  .menu-tile--wide{grid-column:span 2}
  .menu-split{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .menu-group-head{
    flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px;
  }
  .site-tiles{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:880px){
  :root{--header-h:80px}
  .nav-toggle{display:none}
  .nav{display:flex;align-items:center;gap:clamp(13px,2vw,28px)}
  .nav a{white-space:nowrap}
  .about-grid{grid-template-columns:1fr 1.3fr}
  .feature{grid-template-columns:1fr 1fr}
  .feature-media{min-height:420px}
  .pillars{grid-template-columns:repeat(3,1fr)}
  .brand-detail{grid-template-columns:1fr 1fr}
  .campaign{grid-template-columns:1fr 1.15fr;align-items:center}
  .hero-scrim{background:linear-gradient(100deg,rgba(24,30,20,.96) 0%,rgba(26,32,22,.93) 36%,rgba(28,34,24,.81) 64%,rgba(38,45,32,.44) 100%)}
  .gallery{grid-template-columns:repeat(6,1fr)}
  .shot--p{grid-column:span 2;aspect-ratio:3/4}
  .shot--h,.shot--wide2{grid-column:span 3;aspect-ratio:3/2}
  /* Wider slots so a row of 6 columns always closes cleanly. */
  .shot--wide4{grid-column:span 4;aspect-ratio:16/9}
  .shot--full{grid-column:span 6;aspect-ratio:5/2}
}

@media (min-width:1024px){
  body{font-size:17px}
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

@media print{
  .site-header,.mobile-nav,.hero-actions,.scroll-progress,.to-top,.lb-hint,
  .spot,.header-cta,.gallery-more,.hero-resume{display:none}
  /* Nothing may be hidden or dimmed on paper. */
  .gallery--collapsed.is-collapsed .shot.is-extra{display:block}
  .brand-intro .kw{opacity:1 !important}
  .pillar:nth-child(2),.pillar:nth-child(3){margin-top:0}
  .spot-desc[open] summary,.spot-desc summary{display:none}
  .spot-desc p{display:block}
  *{color:#000 !important;background:#fff !important;box-shadow:none !important}
}

/* =========================================================================
   ASYMMETRY PASS
   Every offset below earns its place: it either improves the reading
   measure, encodes a real hierarchy, or expresses sequence. Each one
   collapses to a plain stack below its breakpoint.
   ========================================================================= */

/* Header: a compact conversion path that survives on a phone. The desktop
   nav already carried Contact; on mobile it was hidden in the hamburger,
   so there was no visible way to convert at any scroll depth. */
.header-actions{display:flex;align-items:center;gap:10px}
.header-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border-radius:100px;
  background:var(--forest);color:var(--cream);
  font-size:14px;font-weight:500;white-space:nowrap;
  transition:background-color .18s var(--ease),transform .18s var(--ease);
}
.header-cta:hover{background:#4b5a3c;color:var(--cream);transform:translateY(-1px)}
/* Above 880 the primary nav carries its own Contact pill, so the compact
   one would be a duplicate and overflow the bar. */
@media (min-width:880px){ .header-cta{display:none} }
/* Narrow phones: the middle name drops out of the header lockup so the
   name, the CTA and the toggle all fit. HTML collapses the surrounding
   whitespace, so it reads "Aidan Scheuneman". Zefren still appears in the
   About signature, the Contact copy and the footer. */
@media (max-width:439px){
  .brand-mid{display:none}
  .brand-name{font-size:15px}
  .header-cta{padding:0 14px;font-size:13px}
  .site-header .container{gap:10px}
}
/* iPhone SE class. The wordmark yields to the monogram so the Contact pill
   and the menu button both stay reachable; the mark still links home and
   carries an accessible name. */
@media (max-width:359px){
  .brand-name{display:none}
  .container{padding-inline:16px}
  .header-cta{padding:0 12px}
}
.mobile-resume{
  font-family:var(--mono) !important;font-size:13px !important;
  letter-spacing:.04em;color:var(--muted) !important;
  text-align:center;padding-top:16px !important;border-bottom:none !important;
}

/* Collapsed gallery. Default (and no-JS) state is every photo visible;
   app.js opts in to collapsing, so nothing is ever hidden without a control. */
.gallery--collapsed.is-collapsed .shot.is-extra{display:none}
.gallery-more{display:flex;justify-content:center;margin-top:clamp(18px,2.4vw,26px)}
.gallery-more-btn[hidden]{display:none}

@media (min-width:880px){
  /* Feature card: 5/7 rather than 1/1. At 1440 an even split gave the case
     copy a ~34em measure, well past comfortable reading. */
  .feature{grid-template-columns:5fr 7fr}

  /* The three brand pillars step down the page. The menu is described as
     three movements, so a stepped rhythm reads as sequence where three
     equal boxes read as a table of equals. */
  .pillars{align-items:start}
  .pillar:nth-child(2){margin-top:40px}
  .pillar:nth-child(3){margin-top:80px}
  .pillars{margin-bottom:clamp(56px,8vw,96px)}

  /* The brand statement sits off the left edge and runs wider than the
     body measure, so it reads as a pull quote rather than a paragraph. */
  .brand-intro{
    max-width:min(860px,86%);
    margin-left:auto;margin-right:0;
    padding-left:clamp(24px,4vw,56px);
    border-left:1px solid rgba(245,239,227,.22);
  }
}

@media (min-width:900px){
  /* Zynda's takes more width because it carries more: the bar program, the
     campaign, and the site. The grid encodes that instead of flattening it. */
  .site-tiles{grid-template-columns:1.32fr 1fr 1fr}
}

/* Kinetic type: the brand statement lights up word by word as it scrolls
   through. Words rest at full opacity, so the readable state is the
   default and the effect only ever adds. */
.brand-intro .kw{transition:opacity .45s var(--ease)}
@media (scripting: enabled){
  .brand-intro.is-kinetic .kw{opacity:.42}
}
@media (prefers-reduced-motion: reduce){
  .brand-intro .kw{opacity:1 !important;transition:none}
  .pillar:nth-child(2),.pillar:nth-child(3){margin-top:0}
}

/* Spot descriptions: the written stand-in until real caption files exist. */
.spot figcaption{display:flex;flex-direction:column;gap:8px}
.spot-label{display:block}
.spot-desc summary{
  cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:0;text-transform:none;
  color:var(--tan);
  display:inline-flex;align-items:center;gap:7px;min-height:32px;
}
.spot-desc summary::-webkit-details-marker{display:none}
.spot-desc summary::before{content:"+";font-family:var(--mono);font-size:14px;line-height:1}
.spot-desc[open] summary::before{content:"\2212"}
.spot-desc summary:hover{color:#fff}
.spot-desc p{
  font-family:var(--sans);font-size:13.5px;line-height:1.6;
  letter-spacing:0;text-transform:none;
  color:rgba(245,239,227,.82);padding-bottom:4px;
}

/* =========================================================================
   ROLE LINE, PHOTO CREDIT, MUTED-VIDEO LABEL
   All three reuse the existing three faces: Playfair for display, Work Sans
   for prose, IBM Plex Mono for labels. No new families.
   ========================================================================= */

/* The job title, sitting between the headline and the lede. Mono because it
   is a label, not a sentence. */
.hero-role{
  font-family:var(--mono);
  font-size:clamp(12px,1.15vw,14px);
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--tan);
  margin-top:clamp(16px,1.8vw,22px);
}
.signature-role{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  color:var(--moss);margin-top:6px;
}

/* Photo credit badge. A camera mark plus the name, sized like a caption so
   it reads as an attribution rather than a heading. */
.photo-credit{
  margin-top:clamp(16px,2vw,22px);
  margin-bottom:clamp(8px,1.4vw,12px);
}
.photo-credit-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;
  color:var(--bark);
  background:var(--cream);border:1px solid var(--line);
  padding:8px 15px 8px 13px;border-radius:100px;
}
.photo-credit-badge svg{flex:none;color:var(--moss)}

/* "Starts muted" sits inside the figcaption label. */
.spot-mute{
  display:inline-block;margin-left:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;
  color:rgba(245,239,227,.62);
  border:1px solid rgba(245,239,227,.26);
  border-radius:100px;padding:2px 8px;
  vertical-align:middle;
}

/* Four money figures need a touch more room than the old short ones. */
.stat-num{font-size:clamp(2.25rem,5.6vw,3.5rem)}

/* Contact meta row: phone and LinkedIn as peers under the two buttons.
   Mono, like every other label on the site. */
.contact-links{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 14px;
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;
  color:rgba(245,239,227,.82);
}
.contact-links a{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;
  color:var(--tan);
  border-bottom:1px solid rgba(216,199,168,.42);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.contact-links a:hover{color:#fff;border-bottom-color:#fff}
.contact-sep{color:rgba(245,239,227,.34)}
.li-mark{flex:none}
.contact-emails .contact-links{grid-column:1 / -1;margin-top:2px}