/* ============================================================
   Linda Shanson — painterly, full-bleed site
   Palette drawn from Linda's own paintings + the teal she likes
   ============================================================ */

:root{
  /* painting palette */
  --night:      #141B4D;   /* deep night-sky blue (album cover) */
  --night-2:    #1E2A6E;
  --teal-deep:  #06514C;   /* her signature teal */
  --teal:       #02938B;
  --turq:       #22A7C4;
  --rose:       #D6246E;
  --magenta:    #E8558F;
  --gold:       #F4B81E;
  --orange:     #EC6033;
  --purple:     #6B4E9E;
  --green:      #46A24B;

  --cream:      #F5CBD6;   /* pastel pink paper */
  --cream-2:    #EFB9C8;
  --ink:        #24243A;
  --ink-soft:   #4d4c63;

  --font: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  --wrap: 1200px;
  --wrap-narrow: 780px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-weight:560;
  line-height:1.06;
  margin:0 0 .5em;
  color:var(--teal-deep);
  letter-spacing:-.01em;
}
h1{ font-size:clamp(3rem,8vw,6.5rem); font-weight:600; }
h2{ font-size:clamp(2rem,5vw,3.6rem); }
h3{ font-size:clamp(1.35rem,2.6vw,1.9rem); font-weight:500; }

p{ margin:0 0 1.2em; }
a{ color:var(--teal); text-decoration:none; transition:color .2s; }
a:hover{ color:var(--rose); }
img{ max-width:100%; display:block; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.narrow{ max-width:var(--wrap-narrow); margin-left:auto; margin-right:auto; }

.kicker{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:600;
  margin-bottom:1.1em;
}
.kicker::after{
  content:"";
  display:block;
  width:46px; height:3px;
  margin-top:.7em;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  border-radius:3px;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  transition:background .4s ease, box-shadow .4s ease, padding .3s ease;
  background:rgba(251,247,239,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(6,81,76,.12);
}
/* transparent variant used over a full-bleed hero */
.site-header.over-hero{
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
}
.site-header.over-hero.scrolled{
  background:rgba(20,27,77,.86);
  backdrop-filter:blur(10px);
  box-shadow:0 2px 24px rgba(0,0,0,.25);
}
.nav-bar{
  max-width:var(--wrap); margin:0 auto;
  padding:20px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:var(--font-display);
  font-weight:600; font-size:1.4rem; letter-spacing:.01em;
  color:var(--teal-deep);
}
.over-hero .brand,
.over-hero .nav-links a{ color:#fff; }
.over-hero.scrolled .brand,
.over-hero.scrolled .nav-links a{ color:#fff; }
.brand:hover{ color:var(--rose); }

.nav-links{
  display:flex; align-items:center; gap:30px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  color:var(--teal-deep); font-size:.94rem; letter-spacing:.02em;
  padding:6px 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:linear-gradient(90deg,var(--rose),var(--gold));
  transition:right .28s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after{ right:0; }
.nav-links a:hover,
.over-hero .nav-links a:hover{ color:var(--gold); }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background:#fff; border-radius:10px; padding:8px 0; min-width:230px;
  box-shadow:0 18px 44px rgba(20,27,77,.22);
  display:none; flex-direction:column;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ display:flex; }
.dropdown a{ padding:11px 20px; color:var(--ink)!important; font-size:.9rem; }
.dropdown a::after{ display:none; }
.dropdown a:hover{ background:var(--cream-2); color:var(--rose)!important; }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:26px; height:2px; margin:5px 0; background:currentColor; color:var(--teal-deep); transition:.25s; }
.over-hero .nav-toggle span{ color:#fff; }

@media (max-width:860px){
  .nav-toggle{ display:block; color:var(--teal-deep); }
  .over-hero .nav-toggle{ color:#fff; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:2px;
    background:var(--night); padding:14px 28px 22px; display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ color:#fff; width:100%; padding:11px 0; }
  .has-dropdown .dropdown{
    position:static; transform:none; display:none; box-shadow:none;
    background:transparent; padding:0 0 6px 14px; min-width:0;
  }
  .has-dropdown.open .dropdown{ display:flex; }
  .dropdown a{ color:#cbd3f5!important; padding:8px 0; }
}

/* ============================================================
   FULL-BLEED HERO (painting background)
   ============================================================ */
.hero-full{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  color:#fff;
}
.hero-full .bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position:center 42%;
  z-index:0;
  transform:scale(1.05);
  animation:slowzoom 24s ease-out forwards;
}
@keyframes slowzoom{ to{ transform:scale(1); } }
.hero-full::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(20,27,77,.35) 0%, rgba(20,27,77,0) 30%),
    linear-gradient(0deg, rgba(20,27,77,.86) 0%, rgba(20,27,77,.20) 46%, rgba(20,27,77,.10) 100%);
}
.hero-full .hero-inner{
  position:relative; z-index:2;
  max-width:var(--wrap); margin:0 auto; width:100%;
  padding:0 28px 12vh;
}
.hero-full h1{
  color:#fff; margin-bottom:.15em;
  text-shadow:0 4px 40px rgba(0,0,0,.35);
}
.hero-poem{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.3rem,3.2vw,2.1rem);
  color:#fff; max-width:22ch; line-height:1.3;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
  margin:0 0 1.6em;
}
.hero-poem em{ font-style:italic; font-weight:500; color:var(--gold); }
.hero-roles{
  text-transform:uppercase; letter-spacing:.32em; font-size:.78rem;
  color:rgba(255,255,255,.85); margin-bottom:2em;
}
.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:2; color:rgba(255,255,255,.8); font-size:.7rem;
  letter-spacing:.25em; text-transform:uppercase; text-align:center;
}
.scroll-cue span{ display:block; width:1px; height:40px; margin:10px auto 0;
  background:linear-gradient(180deg,#fff,transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ============================================================
   PAGE HERO (inner pages) — sits under the fixed header
   ============================================================ */
.page-hero{
  position:relative; overflow:hidden;
  padding:calc(90px + 6vh) 0 6vh;
  color:#fff;
  background:var(--night);
}
.page-hero.tall{ padding:calc(120px + 8vh) 0 8vh; }
.page-hero .bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; opacity:.5;
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(20,27,77,.9), rgba(20,27,77,.55) 70%, rgba(20,27,77,.35));
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; }
.page-hero .kicker{ color:var(--gold); }
.page-hero p{ max-width:60ch; color:rgba(255,255,255,.92); }
/* gradient variants for image-less heroes */
.page-hero.grad-rose{ background:linear-gradient(120deg,var(--night),var(--rose)); }
.page-hero.grad-teal{ background:linear-gradient(120deg,var(--night),var(--teal-deep)); }
.page-hero.grad-purple{ background:linear-gradient(120deg,var(--night),var(--purple)); }
.page-hero.grad-gold{ background:linear-gradient(120deg,var(--teal-deep),var(--orange)); }

/* ============================================================
   PANELS / SECTIONS
   ============================================================ */
.panel{ padding:clamp(70px,11vw,140px) 0; position:relative; }
.panel.pad-sm{ padding:clamp(48px,7vw,84px) 0; }

.panel.cream{ background:var(--cream); }
.panel.cream-2{ background:var(--cream-2); }
.panel.night{ background:var(--night); color:#fff; }
.panel.night h1,.panel.night h2,.panel.night h3{ color:#fff; }
.panel.teal{ background:var(--teal-deep); color:#fff; }
.panel.teal h1,.panel.teal h2,.panel.teal h3{ color:#fff; }
.panel.teal .kicker,.panel.night .kicker{ color:var(--gold); }

.section-head{ max-width:640px; margin:0 0 clamp(36px,5vw,60px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .kicker::after{ margin-left:auto; margin-right:auto; }

/* ============================================================
   FULL-BLEED IMAGE BANDS
   ============================================================ */
.bleed{
  position:relative; width:100%;
  min-height:clamp(340px,60vh,620px);
  display:flex; align-items:center;
  overflow:hidden; color:#fff;
}
.bleed .bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.bleed.tint::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(20,27,77,.72) 0%, rgba(20,27,77,.35) 55%, rgba(20,27,77,.1) 100%);
}
.bleed .bleed-text{
  position:relative; z-index:2; max-width:var(--wrap);
  margin:0 auto; width:100%; padding:0 28px;
}
.bleed .bleed-text h2{ color:#fff; }
.bleed blockquote{ margin:0; }
/* pure image band (no text) */
.bleed-strip{ width:100%; height:clamp(300px,46vh,540px); overflow:hidden; }
.bleed-strip img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   TWO-COLUMN INTRO
   ============================================================ */
.split{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,6vw,80px); align-items:center;
}
.split.narrow-img{ grid-template-columns:1.2fr .8fr; }
.split .media img{ border-radius:14px; box-shadow:0 30px 70px -30px rgba(20,27,77,.55); }
.split figcaption{ margin-top:.7em; font-size:.82rem; color:var(--ink-soft); }
@media (max-width:820px){
  .split{ grid-template-columns:1fr; }
  .split .media{ max-width:460px; margin:0 auto; }
}

/* ============================================================
   CARDS
   ============================================================ */
.grid{ display:grid; gap:26px; }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; } }

.card{
  background:#fff; border-radius:16px; padding:34px;
  box-shadow:0 18px 50px -34px rgba(20,27,77,.5);
  border-top:4px solid transparent;
  transition:transform .25s, box-shadow .25s;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(20,27,77,.5); }
.card h3{ color:var(--teal-deep); margin-bottom:.35em; }
.card .read-more{ font-weight:600; }
.card.c-rose{ border-top-color:var(--rose); }
.card.c-gold{ border-top-color:var(--gold); }
.card.c-turq{ border-top-color:var(--turq); }
.card.c-purple{ border-top-color:var(--purple); }
.card.c-orange{ border-top-color:var(--orange); }
.card.c-green{ border-top-color:var(--green); }

/* ============================================================
   QUOTES / PRESS
   ============================================================ */
.quote-block{
  border-left:4px solid var(--gold);
  padding:2px 0 2px 22px; margin:0 0 26px;
  font-style:italic; font-size:1.12rem; color:inherit;
}
.night .quote-block,.teal .quote-block,.bleed .quote-block{ border-left-color:var(--gold); color:#fff; }
.quote-block cite{
  display:block; margin-top:.6em; font-style:normal;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rose);
}
.night .quote-block cite,.bleed .quote-block cite{ color:var(--gold); }
.press-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:700px){ .press-grid{ grid-template-columns:1fr; } }

.pull{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.28; color:#fff; max-width:16ch;
}
.pull cite{ display:block; margin-top:.5em; font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; font-style:normal; color:var(--gold); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block; padding:14px 32px; border-radius:40px;
  font-size:.94rem; letter-spacing:.02em; cursor:pointer;
  border:2px solid var(--teal); color:var(--teal); background:transparent;
  transition:.22s;
}
.btn:hover{ background:var(--teal); color:#fff; }
.btn.solid{ background:var(--rose); border-color:var(--rose); color:#fff; }
.btn.solid:hover{ background:var(--teal-deep); border-color:var(--teal-deep); color:#fff; }
.btn.light{ border-color:#fff; color:#fff; }
.btn.light:hover{ background:#fff; color:var(--night); }
.btn.light.solid{ background:var(--gold); border-color:var(--gold); color:var(--night); }
.btn.light.solid:hover{ background:#fff; color:var(--night); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
.center .btn-row,.text-center .btn-row{ justify-content:center; }

/* ============================================================
   ART GALLERY (masonry-ish)
   ============================================================ */
.gallery{ column-count:3; column-gap:18px; }
@media (max-width:900px){ .gallery{ column-count:2; } }
@media (max-width:560px){ .gallery{ column-count:1; } }
.gallery figure{ margin:0 0 18px; break-inside:avoid; position:relative; border-radius:12px; overflow:hidden; }
.gallery img{ width:100%; border-radius:12px; transition:transform .5s ease; }
.gallery figure:hover img{ transform:scale(1.04); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 16px 12px; font-size:.82rem; color:#fff;
  background:linear-gradient(0deg,rgba(20,27,77,.82),transparent);
  opacity:0; transition:opacity .3s;
}
.gallery figure:hover figcaption{ opacity:1; }

/* ============================================================
   MISC CONTENT
   ============================================================ */
figure{ margin:0; }
figcaption{ font-size:.84rem; color:var(--ink-soft); }

.extract{
  background:#fff; border-radius:16px; padding:38px 42px;
  font-size:1.05rem; box-shadow:0 18px 50px -34px rgba(20,27,77,.5);
}
.extract .signoff{ font-weight:600; color:var(--rose); margin-top:1.4em; }
.lyric{ white-space:pre-line; font-family:var(--font-display); font-weight:400; font-style:italic; font-size:1.2rem; color:var(--teal-deep); }

.fact-list{ list-style:none; margin:0; padding:0; }
.fact-list li{ padding:15px 0; border-bottom:1px solid rgba(6,81,76,.14); font-size:.95rem; }
.fact-list li strong{ display:block; color:var(--teal-deep); font-weight:600; margin-bottom:2px; }

.bio-columns{ display:grid; grid-template-columns:1fr 330px; gap:56px; align-items:start; }
@media (max-width:900px){ .bio-columns{ grid-template-columns:1fr; } }

.with-side-image{ display:grid; grid-template-columns:1fr 280px; gap:44px; align-items:start; }
.with-side-image figure img{ border-radius:12px; box-shadow:0 22px 50px -30px rgba(20,27,77,.55); }
@media (max-width:700px){
  .with-side-image{ grid-template-columns:1fr; }
  .with-side-image figure{ max-width:280px; margin:0 auto; order:-1; }
}

.text-center{ text-align:center; }
.mt-lg{ margin-top:56px; }
.small{ font-size:.86rem; opacity:.82; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--night); color:#cdd4f0; padding:64px 0 32px; }
.site-footer h3{ color:#fff; }
.site-footer a{ color:#fff; }
.site-footer a:hover{ color:var(--gold); }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; margin-bottom:34px; }
.footer-nav{ list-style:none; margin:0; padding:0; display:flex; gap:24px; flex-wrap:wrap; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.16); padding-top:22px;
  font-size:.84rem; opacity:.72;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* Reveal is a progressive enhancement: only hide when JS is confirmed
   active (html.js set by an inline head script). Without JS, content shows. */
html.js .reveal{ opacity:0; transform:translateY(28px); }
.reveal{ transition:opacity .8s ease, transform .8s ease; }
html.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  .hero-full .bg{ animation:none; transform:none; }
}