/* ============================================================
   BEYOND THE CORE FOUR — SHARED SITE STYLES
   One file, every page. Edit brand tokens in :root below.
   ============================================================ */

:root{
  /* --- Brand tokens (change these to re-skin the whole site) --- */
  --dark:#232323;          /* charcoal — headers/footers */
  --dark-2:#2d2d2d;        /* raised charcoal panels */
  --bg:#FAF8F5;            /* warm off-white page background */
  --text:#333333;          /* body text */
  --muted:#6b6b6b;         /* secondary text */
  --line:#e2ddd6;          /* hairline borders */
  --accent:#B2402F;        /* rust red — links, labels, buttons */
  --accent-soft:#e8b3a5;   /* rust tint for dark backgrounds */

  /* Section "scene" accents — used by the animated background */
  --scene: var(--accent);

  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1080px;
  --radius:3px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent)}

.serif{font-family:var(--serif)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
.center{text-align:center}
.lead{font-size:1.12rem;color:var(--muted);max-width:680px}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:13px 26px;border-radius:var(--radius);text-decoration:none;font-size:.92rem;font-weight:600;transition:transform .15s ease,opacity .15s ease}
.btn-accent{background:var(--accent);color:#fff}
.btn-ghost{border:1px solid #8a837b;color:#fff}
.btn-outline{border:1px solid var(--accent);color:var(--accent)}
.btn:hover{opacity:.92;transform:translateY(-1px)}
.btn + .btn{margin-left:12px}

/* ---------- Navigation ---------- */
nav{background:var(--dark);position:sticky;top:0;z-index:100}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.nav-brand{color:#fff;text-decoration:none;font-family:var(--serif);font-size:1.05rem;letter-spacing:.02em;line-height:1.2}
.nav-brand span{color:#c9c4bc;font-size:.72rem;display:block;letter-spacing:.14em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;flex-wrap:wrap}
.nav-links a{color:#d8d4cd;text-decoration:none;font-size:.85rem;margin-left:22px;padding:4px 0;position:relative}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent)}
.nav-toggle{display:none;background:none;border:1px solid #4a4a4a;color:#fff;border-radius:var(--radius);padding:6px 10px;cursor:pointer;font-size:1.1rem;line-height:1}

@media(max-width:820px){
  .nav-toggle{display:block}
  .nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;margin-top:10px}
  .nav-links.open{display:flex}
  .nav-links a{margin:0;padding:10px 0;width:100%;border-bottom:1px solid #333}
  .nav-inner{flex-wrap:wrap}
}

/* ---------- Animated background layers ---------- */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:.9}
.bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(1200px 600px at 70% -10%,rgba(178,64,47,.05),transparent 60%)}

/* ---------- Hero ---------- */
header.hero{position:relative;color:#fff;padding:104px 0 92px;overflow:hidden;
  background:linear-gradient(160deg,#1c1c1c 0%,#2e2a26 55%,#4a3328 100%)}
header.hero.short{padding:72px 0 60px}
.hero-parallax{position:absolute;inset:0;z-index:0;opacity:.5}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.22;max-width:860px;margin:18px 0 22px}
.hero .hook{font-size:1.15rem;color:#e8e2da;max-width:660px;margin-bottom:34px}
.hero .eyebrow{color:var(--accent-soft)}

/* --- Drop-in hero photo ---------------------------------------------
   1) add class "has-photo" to <header class="hero has-photo">
   2) add as first child: <div class="hero-photo" data-parallax="0.15"
        style="background-image:url('img/hero-quarry.jpg')"></div>
   The dark overlay keeps white headline text legible over any image. */
header.hero.has-photo{background:#1c1c1c}
.hero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.06)}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(28,28,28,.88) 0%,rgba(46,42,38,.74) 55%,rgba(74,51,40,.66) 100%)}

/* --- Motion hero: continuous slow pan/zoom + scroll parallax ---------
   Layered so the Ken Burns transform (inner) and the scroll-parallax
   transform (outer, set by JS via data-parallax) never collide.
   The outer is oversized so parallax translation never reveals an edge. */
.hero-photo--motion{top:-20%;height:140%;transform:none}
.hero-photo--motion .hero-photo__img{position:absolute;inset:0;
  background-size:cover;background-position:center;will-change:transform;
  animation:heroDrift 18s ease-in-out infinite alternate}
@keyframes heroDrift{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.18) translate3d(-2%,-2.5%,0)}
}

/* --- Optional section photo band ------------------------------------
   add class "photo-band" to a <section> and, as first child:
   <div class="band-photo" style="background-image:url('img/marina.jpg')"></div> */
.photo-band{position:relative;overflow:hidden}
.photo-band .band-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.16}
.photo-band>.wrap{position:relative;z-index:2}
.dark-section.photo-band .band-photo{opacity:.30}

/* --- Photo strip (horizontal image gallery) ------------------------- */
.photo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:32px}
.photo-strip figure{position:relative;overflow:hidden;margin:0;border-radius:2px}
.photo-strip img{width:100%;height:190px;object-fit:cover;display:block;filter:saturate(.9) contrast(1.02);
  will-change:transform;animation:stripDrift 22s ease-in-out infinite alternate}
.photo-strip figure:nth-child(2) img{animation-delay:-5s}
.photo-strip figure:nth-child(3) img{animation-delay:-10s}
.photo-strip figure:nth-child(4) img{animation-delay:-15s}
.photo-strip figure:nth-child(5) img{animation-delay:-19s}
.photo-strip figure:hover img{filter:saturate(1.08) brightness(1.05)}
@keyframes stripDrift{from{transform:scale(1.03)}to{transform:scale(1.12)}}
.strip-note{font-size:.74rem;color:#8f8a82;margin-top:12px;font-style:italic}
@media(prefers-reduced-motion:reduce){.photo-strip figure:hover img{transform:none}}

/* ---------- Generic sections ---------- */
section{padding:74px 0;position:relative}
section.tight{padding:52px 0}
h2.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3vw,2.1rem);margin:12px 0 10px;line-height:1.25}
.section-sub{color:var(--muted);max-width:720px}
.dark-section{background:var(--dark);color:#fff}
.dark-section .section-sub{color:#c9c4bc}
.dark-section h2.section-title{color:#fff}

/* ---------- Audience doors ---------- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:34px}
.door{background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent);padding:30px 28px;transition:transform .2s ease,box-shadow .2s ease}
.door:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(35,35,35,.08)}
.door h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin-bottom:12px}
.door p{font-size:.94rem;color:var(--muted);margin-bottom:14px}
.door ul{list-style:none;font-size:.92rem}
.door li{padding:6px 0;border-bottom:1px solid var(--line)}
.door li:last-child{border-bottom:none}
.door .more{color:var(--accent);text-decoration:none;font-weight:600;font-size:.9rem;display:inline-block;margin-top:14px}

/* ---------- Asset grid (with animated line-icons) ---------- */
.asset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:34px}
.asset{background:var(--dark-2);padding:22px 20px;color:#e8e2da;border-left:3px solid var(--accent);display:flex;gap:14px;align-items:center;transition:background .2s ease,transform .2s ease}
.asset:hover{background:#363636;transform:translateY(-2px)}
.asset svg{flex:0 0 40px;width:40px;height:40px}
.asset .a-name{font-size:.92rem;line-height:1.35}
.asset .a-name small{display:block;color:#a9a49c;font-size:.78rem;margin-top:2px}
/* stroke draw-in animation */
.asset svg [data-draw]{stroke-dasharray:var(--len,240);stroke-dashoffset:var(--len,240)}
.asset.revealed svg [data-draw]{animation:draw 1.3s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Editions / cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px;margin-top:34px}
.edition{background:#fff;border:1px solid var(--line);padding:26px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.edition:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(35,35,35,.08)}
.pillar{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.edition h3{font-family:var(--serif);font-weight:400;font-size:1.12rem;line-height:1.4;margin:10px 0 12px}
.edition p{font-size:.9rem;color:var(--muted)}
.edition .more{color:var(--accent);text-decoration:none;font-weight:600;font-size:.88rem;margin-top:auto;padding-top:14px}

/* ---------- Pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:34px}
.pillar-card{background:#fff;border:1px solid var(--line);padding:26px;border-left:4px solid var(--accent)}
.pillar-card .n{font-family:var(--serif);font-size:1.5rem;color:var(--accent);opacity:.5}
.pillar-card h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:6px 0 10px}
.pillar-card p{font-size:.92rem;color:var(--muted)}

/* ---------- Experience / matters ---------- */
.matters{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-top:34px}
.matter{background:#fff;border:1px solid var(--line);padding:24px;border-top:3px solid var(--accent)}
.matter .m-class{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.matter h3{font-family:var(--serif);font-weight:400;font-size:1.08rem;margin:8px 0 8px;line-height:1.35}
.matter p{font-size:.9rem;color:var(--muted)}
.matter .scale{font-size:.82rem;color:var(--text);font-weight:600;margin-top:10px}

/* ---------- Credentials strip ---------- */
.creds{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.creds-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;text-align:center}
.cred .big{font-family:var(--serif);font-size:1.7rem;color:var(--dark)}
.cred .small{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- Subscribe / CTA band ---------- */
.subscribe{background:linear-gradient(140deg,#2e2a26,#4a3328);color:#fff;text-align:center}
.subscribe h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,1.95rem);max-width:720px;margin:14px auto 12px}
.subscribe p{color:#e0dad2;max-width:620px;margin:0 auto 28px}
.embed-slot{max-width:520px;margin:0 auto 22px}

/* ---------- Prose (article/bio bodies) ---------- */
.prose{max-width:740px}
.prose p{margin-bottom:16px}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:26px 0 10px}
.prose ul{margin:0 0 16px 20px}
.prose li{margin-bottom:8px}

/* two-column bio */
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
.factbox{background:#fff;border:1px solid var(--line);padding:26px;border-top:4px solid var(--accent)}
.factbox h4{font-family:var(--serif);font-weight:400;font-size:1.1rem;margin-bottom:12px}
.factbox ul{list-style:none;font-size:.9rem}
.factbox li{padding:7px 0;border-bottom:1px solid var(--line)}
.factbox li:last-child{border-bottom:none}

/* ---------- Footer ---------- */
footer{background:var(--dark);color:#a9a49c;padding:48px 0 40px;font-size:.82rem;position:relative;z-index:1}
footer .cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
footer a{color:#d8d4cd;text-decoration:none}
footer a:hover{color:#fff}
footer strong{color:#fff}
.social a{margin-right:16px;display:inline-block;margin-top:4px}
.disclosure{margin-top:28px;padding-top:20px;border-top:1px solid #3a3a3a;max-width:860px;line-height:1.7;font-size:.78rem;color:#8f8a82}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.revealed{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---------- Accessibility: respect reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .asset svg [data-draw]{stroke-dashoffset:0;animation:none}
  #bg-canvas{display:none}
  .hero-photo__img{animation:none}
  .btn:hover,.door:hover,.edition:hover,.asset:hover{transform:none}
}