/* Le Baccanti public site — the Journal: the list of stories (/blog) and the story page (/blog/{slug}). Loaded after base.css. */

/* Header: as in the design mockup of every page */
nav{gap:22px}
nav a{letter-spacing:.04em}
@media(min-width:651px) and (max-width:1050px){header{padding-inline:24px}.logo{font-size:25px}nav{gap:15px}nav a{font-size:13px}}
@media(max-width:650px){nav{gap:18px}}
@media(max-width:900px){.menu{display:block}header nav{display:none;position:absolute;top:88px;left:0;right:0;background:var(--paper);padding:22px 26px;box-shadow:0 14px 18px #0002;flex-direction:column;align-items:flex-start;gap:18px}header nav.open{display:flex}}
@media(max-width:650px){header nav{top:75px}}
@media(min-width:901px){header nav{gap:16px}header nav a{font-size:13px}}
@media(max-width:1050px){.menu{display:block}header nav{display:none;position:absolute;top:88px;left:0;right:0;background:var(--paper);padding:22px 26px;box-shadow:0 14px 18px #0002;flex-direction:column;align-items:flex-start;gap:18px}header nav.open{display:flex}}
@media(max-width:650px){header nav{top:75px}}

/* ---------- Masthead ---------- */
.journal-masthead{margin:0 clamp(24px,6vw,100px);padding:clamp(40px,5.5vw,76px) 0 clamp(30px,3.6vw,46px);text-align:center;border-bottom:1px solid var(--line);position:relative}
.journal-masthead::after{content:"";position:absolute;left:50%;bottom:-2px;width:72px;height:3px;margin-left:-36px;background:var(--yellow)}
.journal-masthead .eyebrow{display:block;color:var(--taupe-ink)}
.journal-masthead h1{font:400 clamp(46px,7.4vw,104px)/1 'Playfair Display',Georgia,serif;letter-spacing:-.035em;color:var(--anthracite);margin:14px 0 0;overflow-wrap:break-word}
.journal-masthead p{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--anthracite-soft);max-width:520px;margin:22px auto 0;text-wrap:balance}
/* Chinese: the sentence fits one line on a wide screen, and never leaves a lone character on the last one */
.journal-masthead p:lang(zh){max-width:640px;margin-top:clamp(22px,2.6vw,34px)}

/* ---------- Shared pieces of a story ---------- */
.journal-content{padding:clamp(32px,4vw,56px) clamp(24px,6vw,100px) clamp(60px,6.5vw,96px)}
.journal-copy{min-width:0;overflow-wrap:anywhere}
.journal-copy>*{max-width:100%}
.journal-picture{display:block;overflow:hidden;background:var(--cream)}
/* a story without a photo */
.journal-picture-empty{display:flex;align-items:center;justify-content:center;background:var(--olive);text-decoration:none}
.journal-picture-empty::before{content:attr(data-initial);font:400 clamp(72px,9vw,128px)/1 'Playfair Display',Georgia,serif;color:var(--yellow)}
.journal-picture img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.journal-feature:hover .journal-picture img,.journal-card:hover .journal-picture img{transform:scale(1.04)}
/* story page head: category — date, with a short rule in the gap before the date (cards and the latest story show them apart, see below) */
.journal-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 46px;margin:0 0 14px;overflow:hidden}
.journal-meta>*{min-width:0}
.journal-category{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-ink)}
.journal-date{font-size:13px;color:var(--grey)}
.journal-category+.journal-date{position:relative}
.journal-category+.journal-date::before{content:"";position:absolute;left:-32px;top:50%;width:18px;height:1px;background:var(--yellow-deep)}
/* story cards and the latest story, as in the design mockup: the category alone above the title, the date under the excerpt */
.journal-copy>.journal-category{display:block;margin:0 0 12px}
.journal-copy>.journal-date{display:block;margin:15px 0 0}
.journal-feature h2,.journal-card h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;color:var(--anthracite);margin:0;hyphens:auto;hyphenate-limit-chars:14 5 5}
.journal-feature h2 a,.journal-card h3 a{text-decoration:none;color:inherit;background:linear-gradient(var(--yellow),var(--yellow)) 0 100%/0 2px no-repeat;transition:background-size .35s}
/* hover and keyboard focus stay in separate rules: a browser that does not know :focus-visible (Safari before 15.4) drops the whole list */
.journal-feature h2 a:hover,.journal-card h3 a:hover{background-size:100% 2px}
.journal-feature h2 a:focus-visible,.journal-card h3 a:focus-visible{background-size:100% 2px}
.journal-copy a:focus-visible{outline:2px solid var(--anthracite);outline-offset:3px}
.journal-copy p{color:var(--anthracite-soft);margin:14px 0 0}

/* ---------- The latest story ---------- */
.journal-feature{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);background:var(--cream)}
.journal-feature .journal-picture{min-height:clamp(360px,36vw,540px)}
.journal-feature .journal-copy{align-self:center;padding:clamp(28px,4vw,60px)}
/* the latest story without a photo: the text is centred in the panel */
.journal-feature>.journal-copy:only-child{grid-column:1/-1;width:100%;max-width:900px;margin-inline:auto;text-align:center}
.journal-flag{display:inline-block;background:var(--taupe);color:#fff;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;margin:0 0 22px}
.journal-feature h2{font-size:clamp(30px,3.1vw,46px);line-height:1.12;letter-spacing:-.02em}
.journal-feature .journal-copy p{font-size:17px;line-height:1.65}
/* the date on the cream panel: the lighter grey would fall below the AA contrast there (4.25:1) */
.journal-feature .journal-date{color:var(--anthracite-soft)}
.journal-feature .button{margin-top:28px}

/* ---------- Section label ---------- */
.journal-section-label{display:flex;align-items:center;gap:22px;margin:clamp(44px,5vw,72px) 0 clamp(26px,3vw,38px);font:700 12px/1.6 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe-ink)}
.journal-section-label::after{content:"";flex:1 1 40px;height:1px;background:var(--line)}
.journal-section-label span{min-width:0}

/* ---------- The other stories ---------- */
.journal-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(40px,4.2vw,60px) clamp(24px,2.6vw,38px)}
.journal-card{grid-column:span 2;min-width:0;display:flex;flex-direction:column}
.journal-card-wide{grid-column:span 3}
.journal-card .journal-picture{aspect-ratio:4/3;margin-bottom:22px}
.journal-card-wide .journal-picture{aspect-ratio:3/2}
.journal-card .journal-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto}
.journal-card h3{font-size:clamp(23px,1.9vw,28px);line-height:1.2}
.journal-card-wide h3{font-size:clamp(25px,2.4vw,34px);line-height:1.16}
.journal-card .journal-copy p{font-size:16px;line-height:1.6;max-width:560px}
.journal-card .text-link{margin-top:auto}
.journal-card .journal-copy p+.text-link,.journal-card h3+.text-link{margin-top:auto}
/* the space above "Read the story" is a margin, so its focus ring hugs the text */
.journal-card .journal-copy>:nth-last-child(2){margin-bottom:20px}
/* one story only: picture and text side by side */
.journal-card-wide:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,48px);align-items:center}
.journal-card-wide:only-child .journal-picture{margin-bottom:0}
.journal-card-wide:only-child .journal-copy{display:block}
/* here the link sits on a text line: aligned to its top, the gap above it stays the 20px margin */
.journal-card-wide:only-child .text-link{vertical-align:top}
.journal-card-wide:only-child>.journal-copy:only-child{grid-column:1/-1}

/* ---------- Empty journal ---------- */
.journal-empty{max-width:720px;margin:10px auto 0;padding:clamp(40px,6vw,72px) 24px;text-align:center;background:var(--cream);border-top:3px solid var(--yellow);font:400 clamp(24px,2.4vw,30px)/1.3 'Playfair Display',Georgia,serif;color:var(--anthracite)}

.journal-footer-link{margin:clamp(36px,4vw,52px) 0 0;text-align:center}

@media(max-width:1000px){
.journal-feature{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.journal-card,.journal-card-wide{grid-column:auto}
.journal-card-wide .journal-picture{aspect-ratio:4/3}
.journal-card-wide h3{font-size:clamp(23px,3vw,28px)}
/* an odd story at the end takes the whole row */
.journal-grid:not(.journal-grid-more)>.journal-card:last-child:nth-child(odd){grid-column:1/-1}
.journal-grid:not(.journal-grid-more)>.journal-card:last-child:nth-child(odd) .journal-picture{aspect-ratio:2/1}
}
@media(max-width:700px){
.journal-feature{grid-template-columns:minmax(0,1fr)}
.journal-feature .journal-picture{min-height:0;aspect-ratio:4/3}
.journal-feature .journal-copy{padding:28px 22px 32px}
.journal-feature h2{font-size:clamp(27px,7.6vw,34px)}
.journal-section-label{display:block;letter-spacing:.16em;padding-bottom:14px;border-bottom:1px solid var(--line)}
.journal-section-label::after{content:none}
.journal-grid,.journal-card-wide:only-child{grid-template-columns:minmax(0,1fr)}
.journal-grid{gap:44px}
.journal-card .journal-picture,.journal-card-wide .journal-picture,.journal-grid:not(.journal-grid-more)>.journal-card:last-child:nth-child(odd) .journal-picture{aspect-ratio:4/3;margin-bottom:18px}
.journal-card-wide:only-child .journal-picture{margin-bottom:0}
.journal-card h3,.journal-card-wide h3{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
.journal-picture img,.journal-feature h2 a,.journal-card h3 a{transition:none}
.journal-feature:hover .journal-picture img,.journal-card:hover .journal-picture img{transform:none}
}

/* ---------- Story page ---------- */
.story-back{margin:28px clamp(24px,6vw,100px) 0}
.story{padding-bottom:clamp(55px,6vw,84px)}
.story-head{max-width:920px;margin:0 auto;padding:clamp(30px,4vw,54px) 24px clamp(34px,4vw,52px);text-align:center;overflow-wrap:break-word}
.story-head .journal-meta{justify-content:center;margin-bottom:22px;overflow:visible}
.story-head h1{font:400 clamp(34px,4.6vw,64px)/1.1 'Playfair Display',Georgia,serif;letter-spacing:-.03em;color:var(--anthracite);margin:0}
.story-lede{font:400 clamp(18px,1.6vw,22px)/1.55 'DM Sans',sans-serif;color:var(--anthracite-soft);max-width:680px;margin:24px auto 0}
.story-head::after{content:"";display:block;width:72px;height:3px;background:var(--yellow);margin:clamp(28px,3vw,40px) auto 0}
/* capped at a reading-friendly width so that a small source photo is not blown up; the height follows the photo up to a limit */
.story-picture{width:calc(100% - 2*clamp(24px,6vw,100px));max-width:980px;margin:0 auto;overflow:hidden;background:var(--cream)}
.story-picture img{width:100%;height:auto;max-height:clamp(240px,62vw,620px);object-fit:cover;display:block}
.story-body{display:flow-root;max-width:768px;margin:0 auto;padding:0 24px;font-size:18px;line-height:1.75;color:var(--anthracite-soft);overflow-wrap:break-word}
.story-picture+.story-body{margin-top:clamp(40px,4.5vw,64px)}
.story-body>:first-child{margin-top:0}
.story-body>:last-child{margin-bottom:0}
.story-body p{margin:0 0 24px}
.story-body h1,.story-body h2,.story-body h3,.story-body h4,.story-body h5,.story-body h6{color:var(--anthracite);font-family:'Playfair Display',Georgia,serif;font-weight:400}
.story-body h1,.story-body h2{font-size:34px;line-height:1.2;letter-spacing:-.02em;margin:52px 0 18px}
.story-body h3{font-size:26px;line-height:1.25;margin:40px 0 14px}
.story-body h4{font-size:21px;line-height:1.3;margin:32px 0 12px}
.story-body h5,.story-body h6{font-size:18px;line-height:1.35;margin:28px 0 10px}
.story-body a{color:var(--anthracite);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:4px}
.story-body a:hover{text-decoration-color:var(--anthracite)}
.story-body strong,.story-body b{font-weight:600;color:var(--anthracite)}
.story-body ul,.story-body ol{margin:0 0 24px;padding-left:24px}
.story-body li{margin:0 0 10px;padding-left:6px}
.story-body li::marker{color:var(--yellow-deep)}
.story-body li>ul,.story-body li>ol{margin:10px 0 0}
.story-body blockquote{margin:44px 0;padding:4px 0 4px 26px;border-left:3px solid var(--yellow);font:400 27px/1.4 'Playfair Display',Georgia,serif;color:var(--anthracite)}
.story-body blockquote p{margin:0 0 14px}
.story-body blockquote>:last-child{margin-bottom:0}
.story-body img,.story-body video,.story-body iframe{max-width:100%}
.story-body img{height:auto}
.story-body p>img:only-child,.story-body>img{display:block;margin:40px 0}
.story-body figure{margin:40px 0}
.story-body figure img{display:block;margin-inline:auto}
.story-body figcaption{margin-top:12px;font-size:13px;line-height:1.5;color:var(--grey)}
.story-body hr{border:0;border-top:1px solid var(--line);margin:48px 0}
.story-body table{width:100%;max-width:100%;border:0;border-collapse:collapse;margin:0 0 28px;font-size:16px;line-height:1.5}
.story-body th,.story-body td{padding:12px 14px 12px 0;border:solid var(--line);border-width:0 0 1px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.story-body th{font-weight:600;color:var(--anthracite)}
.story-body pre{margin:0 0 24px;padding:16px 18px;background:var(--cream);font-size:15px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word}
.story-body [data-oembed-url]{margin:40px 0}
/* Story text as the admin editor writes it: pictures with a size or an alignment, highlighted text */
.story .story-body img{height:auto!important}
.story .story-body img[style*="float:left"],.story .story-body img[style*="float: left"]{margin:6px 28px 16px 0}
.story .story-body img[style*="float:right"],.story .story-body img[style*="float: right"]{margin:6px 0 16px 28px}
/* the first line is for browsers without color-mix() (Safari before 16.2): a pen stroke on the lower half of the line */
.story-body .marker{background:linear-gradient(to top,var(--yellow) 46%,transparent 46%);background:color-mix(in srgb,var(--yellow) 38%,transparent)}
/* More stories */
.story-more{border-top:1px solid var(--line);margin-top:0}
.story-more .journal-section-label{margin-top:0}
.journal-grid-more{grid-template-columns:repeat(3,minmax(0,1fr))}
.journal-grid-more .journal-card{grid-column:auto}
@media(max-width:1000px){.journal-grid-more{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* one or two other stories: they share the whole row (two halves, or one horizontal card) instead of leaving it empty */
.journal-grid-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.journal-grid-single{grid-template-columns:minmax(0,1fr)}
@media(max-width:700px){
.story-back{margin:22px 24px 0}
.journal-grid-more{grid-template-columns:minmax(0,1fr)}
.story-picture{width:calc(100% - 48px)}
.story-body{font-size:17px;line-height:1.7}
.story-body h1,.story-body h2{font-size:29px;margin-top:42px}
.story-body h3{font-size:24px;margin-top:34px}
.story-body blockquote{font-size:23px;margin:34px 0;padding-left:20px}
.story .story-body img[style*="float"]{float:none!important;display:block;margin:30px 0!important}
}

/* Story header on phones: when the category and the date do not fit on one line they stack, without the dash between them. */
@media(max-width:650px){.story-head .journal-meta{flex-direction:column;align-items:center;gap:6px}.story-head .journal-category+.journal-date::before{display:none}}