/* PARENTS STORY v6 — "The Interview" layout, Warm White & Coral palette.
   v6 changes from v5:
   - Added .story-subdivider: a small centered rule used only within
     "A Letter to Them," marking the shift between the sections addressed
     to Dad, to Mom, and to both. The address lines themselves ("Dad,"
     "Mom,") are now bold.
   Still namespaced under .parents-story. Hero is untouched. */

.parents-story{
  --ink:#221d1a;
  --ink-soft:#5c5349;
  --cream:#faf6f1;
  --paper:#fffdfa;
  --rust:#a83a1c;
}

.parents-story{
  padding:0 0 100px;
  background:var(--cream);
  color:var(--ink);
}

.story-toc{
  max-width:1180px;
  margin:0 auto;
  padding:52px 7vw 40px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  align-items:start;
  border-bottom:3px solid var(--ink);
  /* reset in case a global nav{} rule elsewhere on the site sets these */
  text-transform:none;
  letter-spacing:normal;
  font-size:1rem;
}

.story-toc-item{
  position:relative;
  text-decoration:none;
  color:var(--ink-soft);
  padding:0 22px 20px 0;
  border-right:1px solid color-mix(in srgb, var(--ink) 20%, transparent);
}
.story-toc-item:last-child{ border-right:0; padding-right:0; }

.story-toc-item .num{
  display:block;
  color:var(--rust);
  font:700 .72rem/1 Arial,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.story-toc-item .t{
  display:block;
  color:var(--rust);
  font:400 1.35rem/1.1 Georgia,serif;
  letter-spacing:-.01em;
  text-transform:none;
}

.story-body{
  max-width:1180px;
  margin:0 auto;
  padding:0 7vw;
}

/* dividers removed — spacing alone separates chapters now */
.story-chapter{
  padding:76px 0;
}

.story-chapter-open{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:end;
  margin-bottom:44px;
}
.story-kicker{
  color:var(--rust);
  font:700 .78rem/1 Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 18px;
}
.story-chapter-open h3{
  margin:0;
  color:var(--ink);
  font:400 var(--type-section)/1.06 Georgia,serif;
  letter-spacing:-.03em;
}
.story-lede{
  margin:0;
  color:var(--ink-soft);
  font:italic 400 clamp(1.3rem,1.6vw,1.55rem)/1.4 Georgia,serif;
  border-left:3px solid var(--rust);
  padding-left:22px;
}

.story-text{ max-width:760px; }
.story-text p{
  margin:0 0 1.2em;
  color:var(--ink-soft);
  font:400 1.1rem/1.8 Georgia,serif;
}
.story-text p:first-of-type:first-letter{
  float:left;
  font:400 4.6rem/.78 Georgia,serif;
  color:var(--rust);
  padding:5px 10px 0 0;
}
.story-text p:nth-of-type(2){ clear:left; }
.story-text strong{ color:var(--ink); font-weight:700; }
.story-text em{ color:var(--rust); font-style:italic; }

/* pull-quote: no rules above/below, same size as body text — bold + accent color carries it */
.story-pull{
  margin:28px 0!important;
  padding:0!important;
  max-width:none;
  background:none;
  border:0!important;
  color:var(--rust)!important;
  font:700 1.1rem/1.8 Georgia,serif!important;
}
.story-pull strong{ color:var(--rust); font-weight:700; }

.story-closing{
  margin-top:34px!important;
  padding:0!important;
  background:none!important;
  border:0!important;
  color:var(--ink-soft)!important;
  font:italic 400 1.2rem/1.6 Georgia,serif!important;
}

.story-chapter.is-empty{ padding:56px 0; }
.story-chapter.is-empty .story-chapter-open{
  grid-template-columns:1fr;
  gap:14px;
  align-items:baseline;
  margin-bottom:0;
}
.story-chapter.is-empty h3{
  font-size:clamp(2rem,3vw,2.8rem)!important;
  color:var(--ink-soft);
}
.story-chapter.is-empty .story-lede{
  border-left-color:color-mix(in srgb, var(--ink) 30%, transparent);
  color:var(--ink-soft);
}

@media(max-width:900px){
  .story-toc{ grid-template-columns:1fr 1fr; gap:20px; }
  .story-toc-item{ border-right:0; padding:0; }
  .story-chapter-open{ grid-template-columns:1fr; gap:18px; }
  .story-chapter-open .story-lede{
    border-left:0;
    border-top:3px solid var(--rust);
    padding-left:0;
    padding-top:14px;
  }
}

/* small divider marking a shift in who the letter is addressing */
.story-subdivider{
  width:44px;
  height:2px;
  margin:40px 0 32px;
  background:var(--rust);
  border:0;
}

/* Dad letter margin artwork
   Abstract, non-figurative graphite/rust strains sit outside the reading column.
   They are decorative only and never change the letter's measure or flow. */
.letter-dad-block{
  position:relative;
  isolation:isolate;
}
.letter-dad-block::before,
.letter-dad-block::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.90;
}
.letter-dad-block::before{
  width:210px;
  height:760px;
  left:-195px;
  top:115px;
  background-image:url('../images/family/letter-dad-strokes-left-v1.svg');
}
.letter-dad-block::after{
  width:300px;
  height:860px;
  right:-295px;
  top:500px;
  background-image:url('../images/family/letter-dad-strokes-right-v1.svg');
}

@media(max-width:1180px){
  .letter-dad-block::before{ left:-145px; opacity:.62; }
  .letter-dad-block::after{ right:-205px; opacity:.62; }
}
@media(max-width:980px){
  .letter-dad-block::before,
  .letter-dad-block::after{ display:none; }
}