/* Le Baccanti public site — home page (loaded after base.css, before site.css). */
.home-journal{padding:75px clamp(24px,6vw,100px);background:var(--cream)}
.home-journal-top{display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:30px}
.home-journal-top .text-link{flex:none;white-space:nowrap}
.home-journal h2{font:400 42px/1.15 'Playfair Display',Georgia,serif;margin:15px 0 0}
.home-readings{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:30px}
.home-reading img{width:100%;height:230px;object-fit:cover}
.home-reading h3{font:400 27px/1.2 'Playfair Display',Georgia,serif;margin:15px 0}
.home-reading h3 a{text-decoration:none}
.home-reading span{display:block;font-size:13px;color:var(--taupe-ink);margin-top:15px}
.home-reading .text-link{font-size:14px}
@media(max-width:700px){.home-readings{grid-template-columns:1fr;gap:35px}.home-journal{padding:55px 24px}.home-journal-top{display:block}.home-journal-top .text-link{margin-top:20px}.home-reading img{height:260px}}
/* Home cards: the journeys ticked "Show on the home page" (photo on top, coloured banner below). */
.journeys .cards{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.journeys .card{grid-column:span 2;display:flex;flex-direction:column;justify-content:flex-start;min-height:0;padding:0;background:none;color:#fff;overflow:hidden}
.journeys .card:before{display:none}
.journeys .card .journey-photo{display:block;width:100%;height:290px;object-fit:cover;filter:none;flex:none}
.journeys .journey-banner{padding:26px 28px 30px;background:var(--olive);flex:1}
.journeys .card:nth-child(3n+2) .journey-banner{background:var(--taupe)}
.journeys .card:nth-child(3n) .journey-banner{background:var(--anthracite)}
.journeys .card h3{font-size:32px;line-height:1.12;margin:12px 0 16px;text-wrap:balance}
/* 901-1000px: the three banners are only ~200px wide, so long German or Spanish words would split at 32px. */
@media(min-width:901px) and (max-width:1000px){.journeys .card h3{font-size:clamp(28px,3.2vw,32px)}}
.journeys .card p{margin:0;font-size:16px;max-width:300px;color:#fff}
.journeys .card span{font-size:14px;font-weight:400;letter-spacing:.12em;color:#fff}
.journeys .card:focus-visible{outline-color:var(--anthracite);outline-offset:3px}
/* A journey without a photo (class set by the template, no :has() needed): the banner fills the card, its text sits at the bottom. */
.journeys .card-plain .journey-banner{display:flex;flex-direction:column;justify-content:flex-end;min-height:220px}
.journeys-more{margin:35px 0 16px}
/* Any number of cards: rows of three; two or four cards go two by two, five end with a row of two, one alone lies on its side. */
@media(min-width:901px){
.journeys .card:first-child:nth-last-child(2),.journeys .card:first-child:nth-last-child(2)~.card,
.journeys .card:first-child:nth-last-child(4),.journeys .card:first-child:nth-last-child(4)~.card,
.journeys .card:nth-child(4):nth-last-child(2),.journeys .card:nth-child(5):last-child{grid-column:span 3}
.journeys .card:first-child:nth-last-child(2) .journey-photo,.journeys .card:first-child:nth-last-child(2)~.card .journey-photo,
.journeys .card:first-child:nth-last-child(4) .journey-photo,.journeys .card:first-child:nth-last-child(4)~.card .journey-photo,
.journeys .card:nth-child(4):nth-last-child(2) .journey-photo,.journeys .card:nth-child(5):last-child .journey-photo{height:340px}
.journeys .card:only-child{grid-column:1/-1;flex-direction:row;align-items:stretch}
.journeys .card:only-child .journey-photo{width:58%;height:auto;min-height:420px}
.journeys .card:only-child .journey-banner{display:flex;flex-direction:column;justify-content:center;padding:48px clamp(32px,4vw,60px)}
.journeys .card:only-child h3{font-size:clamp(32px,3vw,44px)}
}
@media(min-width:651px) and (max-width:900px){
.journeys .card{grid-column:span 3}
.journeys .card:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:650px){.journeys .cards{grid-template-columns:minmax(0,1fr)}.journeys .card,.journeys .card:last-child{grid-column:auto}.journeys .card .journey-photo{height:280px}.journeys .journey-banner{padding:24px}.journeys .card h3{font-size:31px}}
/* Additions to the mockup */
/* Fewer than three stories on the home page: no empty columns. */
@media(min-width:701px){.home-readings-2{grid-template-columns:1.35fr 1fr}.home-readings-1{grid-template-columns:minmax(0,640px)}}
/* A team member without a photo keeps the place of the portrait, so names stay aligned. */
.person-plain:before{content:'';display:block;width:100%;max-width:160px;aspect-ratio:1;border-radius:50%;background:var(--cream);margin:0 auto}

/* ---- Task #871: brand palette on the home page (yellow, olive, taupe, anthracite).
   Hero, buttons, quote and closing band take their colours from base.css. ---- */
/* "More than an itinerary": one rule above the 01 — a hairline that starts with a short yellow segment. */
.intro p{color:var(--anthracite-soft)}
.intro .detail{position:relative;display:flex;align-items:baseline;gap:clamp(18px,2vw,28px);margin-top:44px;padding-top:30px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--anthracite)}
.intro .detail:before,.process .step:before{content:'';position:absolute;left:0;top:-2px;width:72px;height:3px;background:var(--yellow)}
.intro .detail .numeral{flex:none}
/* Journeys */
.journeys .section-top p{color:var(--anthracite-soft)}
/* People */
.people-head p{color:var(--anthracite-soft)}
.person p{color:var(--grey)}
/* The mockup's inline portrait leaves ~24px above the name; the image here is a block, so the margin carries it. */
.person h3{margin-top:24px}
/* The portraits stay round when the column is narrower than 160px (the height attribute would stretch them). */
.person img{display:block;height:auto;margin:0 auto;background:var(--cream)}
/* How we work: big numerals over each step */
.process-header p{color:var(--anthracite-soft)}
.process .step{position:relative}
.process .step .numeral{display:block}
.process .step p{color:var(--anthracite-soft)}
/* Journal teaser. The 13px category label uses the taupe a shade darker (as .bio-role in people.css):
   --taupe on cream is only 4.15:1, #75685a reaches WCAG AA (4.75:1). */
.home-reading span{color:#75685a;margin-top:23px}
.home-reading img{display:block}
@media(max-width:900px){.intro .detail{margin-top:34px}}
@media(max-width:650px){.intro .detail{padding-top:26px}}