/* ============================================================
   SOFRENA — INTERIOR PAGE STYLE
   The homepage brand in daylight: cream/ivory ground, deep
   aubergine headlines, antique gold (aged brass) accents.
   Same fonts as the homepage. The homepage (index.html) keeps
   its own inline styles — this sheet is for interior pages.
   ============================================================ */
:root{
  /* daylight ground */
  --bg:        #FAF5EC;   /* ivory page background            */
  --bg-tint:   #F3EBDC;   /* warmer tinted section            */
  --panel:     #FFFDF8;   /* card / panel surface             */

  /* the homepage darks, used for headlines + nav/footer bands */
  --night:     #190E29;   /* deep purple-black                */
  --night-2:   #2A183F;
  --plum:      #43275C;   /* aubergine                        */
  --ink:       #2F1B45;   /* headline aubergine               */

  /* text on light ground */
  --text:      #564A6B;   /* body                             */
  --text-dim:  #8A7D9C;   /* muted                            */

  /* brand gold — same aged brass as the homepage */
  --gold:        #C0982F;
  --gold-bright: #DCB85A; /* for use on dark bands only       */
  --gold-deep:   #A8841F; /* hover / pressed on light ground  */

  /* homepage light tones, for the dark bands */
  --cream:     #F2ECE2;
  --lilac:     #CFC3DC;
  --lilac-dim: #A99CBA;

  --line:      rgba(192,152,47,.42);
  --line-soft: rgba(67,39,92,.16);
  --glow: 0 26px 60px -34px rgba(42,24,63,.35);

  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Hanken Grotesk", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.container{ width:min(1140px, 90vw); margin-inline:auto; }
.container-narrow{ width:min(720px, 90vw); margin-inline:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--night); }

/* ---------- NAV — dark band echoing the homepage ---------- */
nav.site{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px clamp(20px,5vw,56px);
  background:linear-gradient(165deg, var(--plum) 0%, var(--night) 100%);
  box-shadow:0 1px 0 rgba(192,152,47,.3);
}
nav.site .brand{
  font-family:var(--display); font-weight:500; font-size:24px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-bright);
  padding-left:.34em;
}
.nav-links{ display:flex; align-items:center; gap:clamp(14px,3vw,28px); }
.nav-links a{
  font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lilac); transition:color .25s ease; white-space:nowrap;
}
.nav-links a:hover{ color:var(--gold-bright); }
.nav-links a[aria-current="page"]{ color:var(--cream); }

/* ---------- BUTTONS ---------- */
.btn{
  font-family:var(--body); font-weight:600; font-size:14.5px; letter-spacing:.06em;
  cursor:pointer; padding:13px 26px; border-radius:100px;
  background:var(--gold); color:var(--night); border:1.5px solid var(--gold);
  transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
  display:inline-block;
}
.btn:hover{
  transform:translateY(-2px); background:var(--gold-deep); border-color:var(--gold-deep);
  box-shadow:0 12px 30px -12px rgba(192,152,47,.5);
}
.btn-outline{ background:transparent; color:var(--gold-deep); }
.btn-outline:hover{ background:var(--gold); color:var(--night); }

/* ---------- PAGE HEAD ---------- */
.page-head{ padding:90px 0 50px; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:12.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:26px;
}
.eyebrow::before, .eyebrow::after{ content:""; width:30px; height:1px; background:var(--gold); opacity:.7; }
h1{
  font-family:var(--display); font-weight:500; color:var(--ink);
  font-size:clamp(44px, 7vw, 84px); line-height:1; letter-spacing:-.01em;
  margin-bottom:24px;
}
h1 em{ font-style:italic; font-weight:500; color:var(--gold-deep); }
.lede{
  font-family:var(--display); font-size:clamp(20px,2.4vw,26px); font-weight:400;
  line-height:1.45; max-width:34ch; margin:0 auto; color:var(--plum);
}

/* ---------- gold lane divider (as on the homepage) ---------- */
.lane{ display:flex; align-items:center; justify-content:center; gap:18px; padding:54px 0; }
.lane .road{ height:1.5px; flex:1; max-width:240px; background:repeating-linear-gradient(90deg,var(--gold) 0 20px, transparent 20px 38px); opacity:.6; }
.lane .label{ font-size:11.5px; letter-spacing:.32em; text-transform:uppercase; color:var(--text-dim); white-space:nowrap; }

/* ---------- BLOG LIST ---------- */
.post-list{ display:flex; flex-direction:column; gap:24px; padding-bottom:40px; }
.post-card{
  display:block; background:var(--panel);
  border:1px solid var(--line-soft); border-radius:22px;
  padding:38px clamp(26px,4vw,46px);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.post-card:hover{ transform:translateY(-5px); border-color:var(--line); box-shadow:var(--glow); }
.post-meta{
  font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:12px;
}
.post-card h2{
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:clamp(26px,3.4vw,36px); letter-spacing:-.01em; line-height:1.15;
  margin-bottom:12px;
}
.post-card p{ color:var(--text); max-width:62ch; }
.read-more{
  display:inline-block; margin-top:18px;
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); border-bottom:1.5px solid var(--line); padding-bottom:3px;
}

/* ---------- ARTICLE ---------- */
article.post{ padding:80px 0 30px; }
article.post header{ text-align:center; margin-bottom:54px; }
article.post header .lede{ margin-top:6px; }
article.post h2{
  font-family:var(--display); font-weight:600; color:var(--plum);
  font-size:clamp(28px,3.6vw,38px); letter-spacing:-.01em; line-height:1.15;
  margin:46px 0 16px;
}
article.post p{ margin-bottom:20px; }
article.post p b, article.post p strong{ color:var(--ink); }
article.post blockquote{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(22px,2.8vw,28px); line-height:1.4; color:var(--plum);
  border-left:3px solid var(--gold); padding:6px 0 6px 26px; margin:38px 0;
}
.post-end{ text-align:center; color:var(--gold); font-size:18px; padding:26px 0 10px; letter-spacing:.6em; }

/* ---------- SIGNUP (Kit form, daylight version) ---------- */
.signup-panel{
  background:var(--bg-tint); border:1px solid var(--line);
  border-radius:26px; padding:clamp(36px,5vw,54px); text-align:center;
  margin:50px 0 80px;
}
.signup-panel h2{
  font-family:var(--display); font-weight:500; color:var(--ink);
  font-size:clamp(28px,4vw,42px); letter-spacing:-.01em; margin-bottom:10px;
}
.signup-panel > p{ color:var(--text); max-width:46ch; margin:0 auto 28px; }
.signup{ display:flex; gap:10px; flex-wrap:wrap; max-width:480px; margin-inline:auto; justify-content:center; }
.signup input{
  flex:1 1 240px; min-width:0; font-family:var(--body); font-size:16px;
  padding:15px 22px; border-radius:100px; color:var(--ink);
  border:1.5px solid var(--line); background:#FFFFFF; outline:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.signup input::placeholder{ color:var(--text-dim); }
.signup input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(192,152,47,.15); }
.signup .btn{ flex:0 0 auto; }
.formnote{ font-size:14px; color:var(--gold-deep); font-weight:600; margin-top:14px; min-height:1em; }

/* ---------- SURVEY / PAGE INTRO ---------- */
.page-intro{
  max-width:58ch; margin:0 auto 44px; text-align:center;
  font-size:19px; color:var(--text);
}
.page-intro b{ color:var(--ink); }
.survey-frame{
  background:var(--panel); border:1px solid var(--line-soft);
  border-radius:26px; padding:clamp(18px,3vw,38px);
  box-shadow:var(--glow);
}
.survey-close{
  text-align:center; font-family:var(--display); font-style:italic;
  font-size:clamp(20px,2.6vw,26px); color:var(--plum);
  padding:44px 0 80px;
}
.survey-close::before{ content:"✦"; display:block; color:var(--gold); font-style:normal; font-size:15px; margin-bottom:16px; }

/* ---------- ABOUT / BIOS ---------- */
.bios{ display:flex; flex-direction:column; gap:64px; padding:20px 0 10px; }
.bio{
  display:grid; grid-template-columns:minmax(240px,340px) 1fr;
  gap:clamp(28px,5vw,56px); align-items:center;
  max-width:980px; margin-inline:auto;
}
.bio.flip{ grid-template-columns:1fr minmax(240px,340px); }
.bio.flip .bio-photo{ order:2; }
.bio-photo{
  width:100%; height:auto; display:block;
  border-radius:22px; border:1.5px solid var(--gold);
  box-shadow:var(--glow);
}
.bio h2{
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:clamp(30px,4vw,42px); letter-spacing:-.01em; margin-bottom:14px;
}
.bio p{ margin-bottom:16px; }
@media(max-width:760px){
  .bio, .bio.flip{ grid-template-columns:1fr; max-width:440px; }
  .bio.flip .bio-photo{ order:0; }
}

/* ---------- SERIES PAGE ---------- */
.parts{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding-top:10px; }
@media(max-width:760px){ .parts{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }
.part{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:22px;
  padding:40px 34px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.part:hover{ transform:translateY(-5px); border-color:var(--line); box-shadow:var(--glow); }
.part .num{ font-family:var(--display); font-style:italic; font-weight:500; font-size:46px; color:var(--gold); line-height:1; margin-bottom:14px; }
.part h3{ font-family:var(--display); font-weight:600; font-size:28px; color:var(--ink); letter-spacing:-.01em; margin-bottom:10px; }
.part p{ font-size:16.5px; }

.who{ padding:30px 0 10px; }
.who ul{ list-style:none; max-width:620px; margin:30px auto 0; display:flex; flex-direction:column; gap:16px; }
.who li{ font-size:17.5px; line-height:1.5; padding-left:30px; position:relative; color:var(--text); }
.who li::before{ content:"\2726"; position:absolute; left:0; top:2px; color:var(--gold); font-size:14px; }

.section-head{ text-align:center; margin:70px 0 40px; }
.section-head .kick{ font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-deep); font-weight:600; }
.section-head h2{ font-family:var(--display); font-weight:500; color:var(--ink); font-size:clamp(34px,4.8vw,56px); letter-spacing:-.01em; margin-top:10px; }

/* dark CTA panel — a piece of the homepage carried inside */
.cta-night{
  margin:70px 0 90px; padding:clamp(44px,6vw,76px); text-align:center;
  border-radius:30px; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(192,152,47,.12), transparent 55%),
    linear-gradient(160deg, #36214F 0%, #1F1230 100%);
  border:1.5px solid rgba(192,152,47,.45);
  box-shadow:0 44px 100px -46px rgba(25,14,41,.55), 0 0 70px -30px rgba(192,152,47,.25);
}
.cta-night .kick{ font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-bright); font-weight:600; }
.cta-night h2{ font-family:var(--display); font-weight:500; color:var(--cream); font-size:clamp(34px,5.4vw,62px); line-height:1.05; letter-spacing:-.01em; margin:14px 0 16px; }
.cta-night h2 em{ font-style:italic; color:var(--gold-bright); }
.cta-night p{ color:var(--lilac); max-width:52ch; margin:0 auto 18px; }
.cta-night .ticket-note{ font-weight:600; color:var(--gold-bright); max-width:50ch; margin:0 auto 30px; line-height:1.55; }
.cta-night .btn{ background:#CDB378; color:var(--night); border-color:#CDB378; }
.cta-night .btn:hover{ background:#DCC596; box-shadow:0 14px 34px -14px rgba(205,179,120,.5); }

/* ---------- FOOTER — dark band echoing the homepage ---------- */
footer.site{
  background:linear-gradient(165deg, var(--night-2) 0%, var(--night) 100%);
  border-top:1px solid rgba(192,152,47,.3);
  padding:48px clamp(20px,5vw,56px) 58px;
}
footer.site .foot-grid{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; width:min(1140px,90vw); margin-inline:auto; }
footer.site .brand{
  font-family:var(--display); font-weight:500; font-size:24px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-bright); padding-left:.34em;
}
footer.site .foot-tag{ font-family:var(--display); font-style:italic; font-size:24px; color:var(--gold-bright); }
footer.site .foot-meta{ font-size:12.5px; color:var(--lilac-dim); letter-spacing:.06em; text-transform:uppercase; }

@media(max-width:680px){
  nav.site{ flex-wrap:wrap; justify-content:center; row-gap:6px; }
  nav.site .brand{ font-size:20px; letter-spacing:.26em; }
  .nav-links{ flex-wrap:wrap; justify-content:center; gap:6px 12px; }
  .nav-links a{ font-size:11px; letter-spacing:.12em; }
  .page-head{ padding:64px 0 40px; }
}