/* =========================================================
   Tara Badstubner — author site
   Shared visual system: "Immersive" direction
   ---------------------------------------------------------
   Fixed painting backdrop, warm-paper floating panels,
   Cormorant Garamond + EB Garamond + Caveat type stack.
   ========================================================= */

:root{
  --ink:        #1f160c;
  --ink-soft:   #3c2c1a;
  --ink-mid:    #4a3725;
  --umber:      #6b3e1f;
  --sienna:     #b3692c;
  --ochre:      #d6a35a;
  --ochre-deep: #c8924b;
  --burgundy:   #6b2733;
  --moss:       #4a5933;
  --cream:      #f4e9d3;
  --paper:      #efe2c4;
  --paper-deep: #e7d4ad;
  --warm-white: #faf2dd;
  --rule:       rgba(244,233,211,0.22);
  --rule-dk:    rgba(31,22,12,0.18);
  --rule-soft:  rgba(31,22,12,0.10);

  --shadow-lift: 0 50px 90px -30px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.5) inset;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{ background:#1a120a; color:var(--cream); }
body{
  font-family:'EB Garamond', Georgia, serif;
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--ochre); color:var(--ink); }

a{ color:inherit; }

/* ----- type helpers ----- */
.smallcaps{
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:0.28em; font-size:12px; font-weight:500;
}
.hand{ font-family:'Caveat', cursive; font-weight:500; }
.wrap{ max-width:1280px; margin:0 auto; padding:0 64px; }

/* =========================================================
   FIXED PAINTING BACKDROP
   ========================================================= */
.canvas{
  position:fixed; inset:0;
  z-index:0;
  overflow:hidden;
  background:#1a120a;
}
.canvas .painting{
  position:absolute;
  left:0; top:0;
  width:100%;
  height:130%;        /* slack for parallax drift */
  transform: translate3d(0,0,0);
  will-change: transform;
}
.canvas .painting picture{
  display:block; width:100%; height:100%;
}
.canvas .painting img{
  width:100%; height:100%;
  object-fit:cover;
  object-position: center 30%;
  display:block;
  filter: saturate(1.02) contrast(1.02);
}
/* warm vignette so panels don't fight the painting */
.canvas::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 35%, transparent 0%, transparent 55%, rgba(20,12,4,0.45) 100%),
    linear-gradient(180deg, rgba(20,12,4,0.18) 0%, transparent 18%, transparent 70%, rgba(20,12,4,0.55) 100%);
  pointer-events:none;
}

/* everything above the canvas */
.scroller{ position:relative; z-index:2; }

/* =========================================================
   TOP NAV (fixed, glassy)
   ========================================================= */
header.top{
  position:fixed; top:0; left:0; right:0;
  z-index:30;
  padding:24px 0;
  background: linear-gradient(180deg, rgba(20,12,4,0.59) 0%, rgba(20,12,4,0.31) 70%, rgba(20,12,4,0.06) 100%);
  backdrop-filter: blur(2px);
}
header.top .row{
  display:flex; align-items:baseline; justify-content:space-between; gap:32px;
}
.brand{
  font-family:'Cormorant Garamond', serif;
  font-weight:700;
  font-size:26px;
  letter-spacing:0.04em;
  color:var(--warm-white);
  text-decoration:none;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
.brand em{ font-style:italic; color:var(--ochre); font-weight:500; }
nav.primary{ display:flex; gap:28px; }
nav.primary a{
  color:var(--warm-white);
  text-decoration:none;
  font-family:'Cormorant Garamond', serif;
  font-size:14px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition: color .2s, border-color .2s;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
nav.primary a:hover{ color:var(--ochre); border-color:var(--ochre); }
nav.primary a.active{ color:var(--ochre); border-color:rgba(214,163,90,0.55); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:0.22em; font-size:13px; font-weight:500;
  padding:15px 26px;
  border:1px solid var(--warm-white);
  color:var(--warm-white);
  background:rgba(20,12,4,0.30);
  backdrop-filter: blur(3px);
  text-decoration:none;
  transition:background .25s, color .25s, border-color .25s;
  cursor:pointer;
}
.btn:hover{ background:var(--warm-white); color:var(--ink); }
.btn.solid{ background:var(--ochre); border-color:var(--ochre); color:var(--ink); }
.btn.solid:hover{ background:var(--warm-white); border-color:var(--warm-white); color:var(--ink); }

/* dark-on-paper variant (inside cream panels) */
.btn.ink{
  background:var(--ink); border-color:var(--ink); color:var(--cream);
  backdrop-filter:none;
}
.btn.ink:hover{ background:var(--burgundy); border-color:var(--burgundy); color:var(--cream); }
.btn.outline{
  background:transparent; border-color:var(--ink); color:var(--ink);
  backdrop-filter:none;
}
.btn.outline:hover{ background:var(--ink); color:var(--cream); }

/* =========================================================
   FLOATING PANELS (cream paper)
   ========================================================= */
.panel{
  position:relative;
  margin: 90px auto;
  max-width:920px;
  padding:80px 80px;
  background: rgba(244,233,211,0.95);
  color:var(--ink);
  box-shadow: var(--shadow-lift);
  border:1px solid rgba(107,62,31,0.18);
}
.panel.wide{ max-width:1100px; padding:80px 90px; }
.panel.tall{ padding:90px 90px; max-width:980px; }
.panel.narrow{ max-width:760px; }

.panel .kicker{
  font-family:'Caveat', cursive;
  color:var(--sienna);
  font-size:34px; line-height:1; margin-bottom:14px;
}
.panel h2{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:54px;
  line-height:1.05;
  color:var(--ink);
  margin-bottom:24px;
}
.panel h2 em{ font-style:italic; color:var(--umber); }
.panel h3{
  font-family:'Cormorant Garamond', serif;
  font-weight:500; font-size:34px;
  line-height:1.1; color:var(--ink);
  margin-bottom:14px;
}
.panel h3 em{ font-style:italic; color:var(--umber); }
.panel p{
  font-size:20px; line-height:1.62;
  color:var(--ink-soft);
  margin-bottom:18px;
  max-width:680px;
}
.panel p em{ color:var(--ink); font-style:italic; }
.panel .pull{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:30px; line-height:1.35;
  color:var(--umber);
  margin:36px 0 22px;
  padding-left:24px;
  border-left:2px solid var(--sienna);
  max-width:680px;
}
.panel .meta{
  display:flex; align-items:center; gap:14px;
  margin-top:34px;
  color:var(--ink-soft);
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:0.22em; font-size:12px;
}
.panel .meta .line{ flex:0 0 36px; height:1px; background:var(--rule-dk); }
.panel .meta a{ color:var(--umber); border-bottom:1px solid var(--umber); text-decoration:none; }
.panel .meta a:hover{ color:var(--burgundy); border-color:var(--burgundy); }

/* page-hero panel: header text on a darker glassy background */
.page-hero{
  position:relative;
  padding:160px 0 70px;
  color:var(--warm-white);
  text-align:center;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(20,12,4,0.55) 0%, transparent 70%),
    linear-gradient(180deg, rgba(20,12,4,0.45) 0%, transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.page-hero .eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  color:var(--ochre);
  margin-bottom:22px;
}
.page-hero .eyebrow .line{ width:48px; height:1px; background:var(--ochre); opacity:.7; }
.page-hero .eyebrow .label{
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:0.34em; font-size:12px;
}
.page-hero h1{
  font-family:'Cormorant Garamond', serif;
  font-weight:500;
  font-size:84px;
  line-height:1;
  color:var(--warm-white);
  text-shadow: 0 2px 24px rgba(0,0,0,0.6), 0 0 50px rgba(20,12,4,0.4);
  margin-bottom:18px;
}
.page-hero h1 em{ font-style:italic; color:var(--ochre); }
.page-hero p.deck{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:22px;
  color:var(--warm-white);
  opacity:.95;
  max-width:620px; margin:0 auto;
  text-shadow: 0 1px 16px rgba(0,0,0,0.6);
}

/* =========================================================
   FOOTER
   ========================================================= */
footer.bottom{
  position:relative; z-index:3;
  background:#120c06;
  border-top:1px solid rgba(214,163,90,0.18);
  color:var(--warm-white);
  padding:64px 0 36px;
}
footer.bottom .row{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:50px;
  margin-bottom:44px;
}
footer.bottom .brand-foot{
  font-family:'Cormorant Garamond', serif; font-size:26px; font-weight:500;
}
footer.bottom .brand-foot em{ font-style:italic; color:var(--ochre); font-weight:400; }
footer.bottom .tag{
  font-family:'Caveat', cursive; font-size:22px;
  color:var(--ochre); margin-top:8px;
}
footer.bottom .blurb{
  margin-top:14px;
  font-size:15px;
  color:rgba(244,233,211,0.78);
  max-width:280px;
  line-height:1.55;
}
footer.bottom h6{
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:0.22em; font-size:12px;
  color:var(--ochre);
  margin-bottom:16px; font-weight:500;
}
footer.bottom ul{ list-style:none; }
footer.bottom ul li{ margin-bottom:9px; }
footer.bottom a{
  color:var(--warm-white); text-decoration:none;
  border-bottom:1px solid transparent;
  transition: all .2s;
  font-size:17px;
}
footer.bottom a:hover{ color:var(--ochre); border-color:var(--ochre); }
footer.bottom .fine{
  border-top:1px solid rgba(244,233,211,0.12);
  padding-top:22px;
  font-size:13px;
  color:rgba(244,233,211,0.6);
  display:flex; justify-content:space-between; gap:30px;
  font-family:'Cormorant Garamond', serif; letter-spacing:0.08em;
}

/* tiny inline newsletter inside the footer column */
.footnote-form{
  display:flex; gap:0;
  margin-top:6px;
  border:1px solid rgba(244,233,211,0.45);
}
.footnote-form input{
  flex:1; background:transparent; border:0; outline:0;
  padding:11px 12px;
  font-family:'EB Garamond', serif; font-size:15px; color:var(--warm-white);
}
.footnote-form input::placeholder{ color:rgba(244,233,211,0.55); font-style:italic; }
.footnote-form button{
  background:var(--ochre); color:var(--ink); border:0;
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:0.18em; font-size:11px; font-weight:500;
  padding:0 14px;
  cursor:pointer;
}
.footnote-form button:hover{ background:var(--warm-white); }

/* =========================================================
   PRAISE / BLURBS GRID
   ========================================================= */
.praise-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:44px;
}
.praise-grid blockquote{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:22px;
  line-height:1.4;
  color:var(--ink);
}
.praise-grid blockquote::before{
  content:"\201C";
  display:block;
  font-size:56px;
  line-height:0.5;
  color:var(--sienna);
  margin-bottom:14px;
  font-style:normal;
}
.praise-grid cite{
  display:block;
  margin-top:18px;
  font-style:normal;
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:12px;
  color:var(--umber);
}
.praise-grid cite b{ font-weight:500; color:var(--ink); }

/* =========================================================
   CLOSING DARK CTA (against the painting)
   ========================================================= */
.closing{
  position:relative; z-index:2;
  color:var(--warm-white);
  text-align:center;
  padding: 100px 0 130px;
}
.closing::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:0;
  background: radial-gradient(ellipse at 50% 60%, rgba(20,12,4,0.50) 0%, transparent 70%);
  pointer-events:none;
}
.closing > *{ position:relative; }
.closing .hand-greet{
  font-family:'Caveat', cursive;
  font-size:64px;
  line-height:1;
  color:var(--ochre);
  margin-bottom:18px;
  text-shadow: 0 2px 22px rgba(0,0,0,0.55);
}
.closing h3{
  font-family:'Cormorant Garamond', serif;
  font-size:44px;
  font-weight:500;
  margin-bottom:22px;
  text-shadow: 0 2px 22px rgba(0,0,0,0.55);
}
.closing h3 em{ font-style:italic; color:var(--ochre); }
.closing p{
  max-width:560px; margin:0 auto 32px;
  font-size:19px;
  color:var(--warm-white); opacity:0.92;
  text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}

/* =========================================================
   FOX RUNNING / SNAKE ornament dividers
   ========================================================= */
.ornament{
  position:relative; z-index:2;
  text-align:center;
  margin: 30px auto 40px;
}
.ornament img{
  width:230px; opacity:.85;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
  mix-blend-mode:screen;
}
.ornament-snake img{ width:160px; }
.ornament .cap{
  display:block; margin-top:4px;
  color:var(--ochre);
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:0.34em; font-size:11px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Mobile nav toggle — hidden on desktop */
.nav-toggle-input{ display:none; }
.nav-toggle-label{
  display:none;
  flex-direction:column;
  justify-content:space-between;
  width:36px; height:22px;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle-label span{
  display:block; height:1.5px;
  background:var(--warm-white);
  transition: transform .25s, opacity .2s;
}
.nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(1){
  transform: translateY(10.25px) rotate(45deg);
}
.nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(2){
  opacity:0; transform:scaleX(0);
}
.nav-toggle-input:checked ~ .nav-toggle-label span:nth-child(3){
  transform: translateY(-10.25px) rotate(-45deg);
}

/* =========================================================
   Events panel
   ========================================================= */
.events-panel{ max-width:1100px; padding:60px 80px 70px; }
.events-panel .head{ margin-bottom:30px; }
.events-panel .head h2{ font-size:42px; margin:0; }
.events-panel .list{ list-style:none; }
.events-panel .list li{
  display:grid;
  grid-template-columns: 130px 1.8fr 1.2fr auto;
  gap:28px;
  align-items:baseline;
  padding:24px 0;
  border-top:1px solid var(--rule-soft);
}
.events-panel .list li:last-child{ border-bottom:1px solid var(--rule-soft); }
.events-panel .list li.past{ opacity:0.62; }
.events-panel .list .when{
  font-family:'Cormorant Garamond', serif;
  color:var(--ink);
}
.events-panel .list .when .day{
  display:block;
  font-weight:500;
  font-size:30px;
  line-height:1;
}
.events-panel .list .when .day em{ font-style:italic; color:var(--umber); }
.events-panel .list .when .my{
  text-transform:uppercase; letter-spacing:0.22em; font-size:11px;
  color:var(--umber); margin-top:6px; display:block;
}
.events-panel .list .what{
  font-family:'Cormorant Garamond', serif;
  font-weight:500; font-size:22px; line-height:1.25;
  color:var(--ink);
}
.events-panel .list .what em{ font-style:italic; color:var(--umber); }
.events-panel .list .what .sub{
  display:block;
  font-style:italic; font-weight:400;
  font-size:16px; color:var(--ink-soft);
  margin-top:4px;
}
.events-panel .list .where{
  font-family:'Cormorant Garamond', serif;
  font-style:italic; font-size:17px; color:var(--ink-soft);
}
.events-panel .list .where b{ font-weight:500; color:var(--ink); display:block; font-style:normal; }
.events-panel .list .rsvp{
  font-family:'Cormorant Garamond', serif;
  text-transform:uppercase; letter-spacing:0.22em; font-size:11px;
  color:var(--cream);
  background:var(--ink);
  padding:10px 14px;
  text-decoration:none;
  white-space:nowrap;
  transition:all .2s;
}
.events-panel .list .rsvp:hover{ background:var(--burgundy); }
.events-panel .list li.past .rsvp{
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--rule-dk);
}

@media (max-width: 960px){
  .wrap{ padding:0 28px; }
  .panel{ padding:60px 40px; margin:60px auto; }
  .panel.wide{ padding:60px 40px; }
  .panel.tall{ padding:70px 40px; }
  .panel h2{ font-size:44px; }
  .panel h3{ font-size:30px; }
  .page-hero{ padding:140px 0 60px; }
  .page-hero h1{ font-size:60px; }
  .praise-grid{ grid-template-columns:1fr; gap:30px; }
  footer.bottom .row{ grid-template-columns:1fr 1fr; gap:36px; }
  .events-panel{ padding:50px 40px; }
  .events-panel .list li{ grid-template-columns:1fr; gap:10px; }
}

/* Nav collapses to hamburger */
@media (max-width: 760px){
  .nav-toggle-label{ display:flex; }
  header.top{ padding:18px 0; }
  header.top .row{ flex-wrap:wrap; align-items:center; gap:16px; }
  nav.primary{
    display:none;
    flex-direction:column;
    gap:0;
    width:100%;
    padding-top:14px;
    border-top:1px solid var(--rule);
  }
  nav.primary a{
    padding:11px 0;
    font-size:15px;
    letter-spacing:0.2em;
    border-bottom:1px solid var(--rule);
    text-shadow:none;
  }
  nav.primary a:last-child{ border-bottom:none; }
  .nav-toggle-input:checked ~ nav.primary{ display:flex; }
}

/* Phone */
@media (max-width: 600px){
  .wrap{ padding:0 18px; }
  .panel{ padding:38px 22px; margin:36px auto; }
  .panel.wide, .panel.tall, .panel.narrow{ padding:38px 22px; }
  .panel h2{ font-size:34px; }
  .panel h3{ font-size:26px; }
  .panel p{ font-size:18px; }
  .panel .pull{ font-size:22px; padding-left:14px; }
  .panel .kicker{ font-size:28px; }
  .page-hero{ padding:120px 0 40px; }
  .page-hero h1{ font-size:42px; }
  .page-hero p.deck{ font-size:18px; max-width:none; }
  .praise-grid{ gap:20px; }
  .praise-grid blockquote{ font-size:20px; }
  .closing{ padding:64px 0 80px; }
  .closing .hand-greet{ font-size:44px; }
  .closing h3{ font-size:32px; }
  .closing p{ font-size:17px; }
  footer.bottom{ padding:40px 0 24px; }
  footer.bottom .row{ grid-template-columns:1fr; gap:24px; }
  footer.bottom .fine{ flex-direction:column; gap:6px; font-size:11px; }
  .ornament img{ width:150px; }
  .btn{ font-size:12px; padding:13px 20px; letter-spacing:0.18em; }
  .events-panel{ padding:38px 22px; }
  .events-panel .list li{ padding:18px 0; }
  .events-panel .list .when .day{ font-size:24px; }
  .events-panel .list .what{ font-size:19px; }
  .events-panel .list .rsvp{ align-self:flex-start; }
}