/* ==========================================================================
   The Bridal Journey — homepage
   Grammar measured off net-a-porter.com/en-us/porter at 1600px:
     band 160/1280            -> min(90vw, 1280px)
     lead backdrop            -> band-wide, 3:2
     lead image 610 square    -> 47.656% of band, inset 30px (2.344%), centred
     lead text col at l=850   -> starts 53.906% into the band, 40.625% wide
     lead headline            -> Chronicle Display 30/37.5
     lead standfirst          -> italic, grey, 16/26
     story cards              -> 3:4, varied widths, staggered downward
   Chronicle Display -> Libre Caslon Display; AkkuratPro -> Inter.
   ========================================================================== */

.tbj-home{
  --home-band:min(90vw,1280px);
  --lead-inset:2.344%;     /* 30 of 1280  */
  --lead-media:47.656%;    /* 610 of 1280 */
  --lead-text-x:53.906%;   /* 690 of 1280 */
  --lead-text-w:40.625%;   /* 520 of 1280 */

  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.625;
  -webkit-font-smoothing:antialiased;
}
.tbj-home *{box-sizing:border-box}
.tbj-home img{display:block;max-width:100%;height:auto}
.tbj-home p{margin:0}
.tbj-home a{color:inherit;text-decoration:none}

.tbj-home .band{width:var(--home-band);margin-inline:auto;position:relative}

/* ---------- lead story ---------- */
.tbj-home .lead{position:relative;margin-top:clamp(1rem,3vh,2rem)}
.tbj-home .lead-back{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden}
.tbj-home .lead-back img{width:100%;height:100%;object-fit:cover}
/* the backdrop is atmosphere, not the subject — hold it back so the inset
   frame and the type stay the focus, exactly as Porter does */
.tbj-home .lead-back::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.5)}

.tbj-home .lead-media{
  position:absolute;top:50%;left:var(--lead-inset);transform:translateY(-50%);
  width:var(--lead-media);aspect-ratio:1/1;overflow:hidden;
}
.tbj-home .lead-media img{width:100%;height:100%;object-fit:cover}

.tbj-home .lead-text{
  position:absolute;top:50%;transform:translateY(-50%);
  left:var(--lead-text-x);width:var(--lead-text-w);
}
.tbj-home .lead-kicker{
  font-family:var(--util);font-weight:400;font-size:.75rem;letter-spacing:.25em;
  text-transform:uppercase;margin:0 0 1.5rem;
}
.tbj-home .lead-h{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,2.35vw,1.875rem);   /* 30px at 1280 band */
  line-height:1.25;margin:0 0 1.4rem;text-wrap:balance;
}
.tbj-home .lead-h em{font-family:var(--body);font-style:italic}
.tbj-home .lead-sf{
  font-family:var(--body);font-style:italic;font-size:1rem;line-height:1.625;
  color:var(--ink-soft);margin:0 0 2.2rem;
}
.tbj-home .readlink{
  display:inline-block;font-family:var(--util);font-weight:300;font-size:.75rem;
  letter-spacing:.083em;border-bottom:1px solid var(--ink);padding-bottom:3px;
}
.tbj-home .lead-date{
  font-family:var(--util);font-weight:300;font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:1.9rem;
}

/* ---------- story cards: varied widths, staggered down ---------- */
.tbj-home .stories{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:2.5%;margin-top:clamp(3.5rem,9vh,7rem);align-items:start;
}
.tbj-home .card-1{grid-column:1 / span 4;margin-top:0}
.tbj-home .card-2{grid-column:5 / span 4;margin-top:56px}
.tbj-home .card-3{grid-column:9 / span 3;margin-top:112px}

.tbj-home .card figure{margin:0;aspect-ratio:3/4;overflow:hidden}
.tbj-home .card img{width:100%;height:100%;object-fit:cover}
.tbj-home .card-kicker{
  font-family:var(--util);font-weight:400;font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;margin:1.15rem 0 .55rem;
}
.tbj-home .card-h{
  font-family:var(--display);font-weight:400;font-size:1.375rem;line-height:1.28;
  margin:0;
}
.tbj-home .card:hover .card-h{text-decoration:underline;text-underline-offset:.18em}
.tbj-home .card-date{
  font-family:var(--util);font-weight:300;font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.7rem;
}
.tbj-home .card a:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* ---------- mobile: the lead unstacks, cards go single file ---------- */
@media (max-width:900px){
  .tbj-home{--home-band:88vw}
  .tbj-home .lead-back{display:none}
  .tbj-home .lead-media{position:static;transform:none;width:100%}
  .tbj-home .lead-text{position:static;transform:none;left:auto;width:100%;margin-top:1.75rem}
  .tbj-home .stories{grid-template-columns:1fr;row-gap:clamp(2.5rem,7vh,4rem)}
  .tbj-home .card-1,.tbj-home .card-2,.tbj-home .card-3{grid-column:1;margin-top:0}
}