.article-hero{position:relative;display:grid;min-height:760px;align-items:end;overflow:hidden;color:var(--color-white)}
.preview-banner{position:sticky;z-index:20;top:0;display:flex;min-height:48px;padding:.65rem var(--space-4);align-items:center;justify-content:center;flex-wrap:wrap;gap:.25rem var(--space-3);background:var(--color-mustard);color:var(--color-ink);font-size:.78rem}.preview-banner strong{text-transform:uppercase;letter-spacing:.08em}.preview-banner a{font-weight:600;text-decoration:underline;text-underline-offset:3px}.preview-banner form{display:flex;margin:0}.preview-banner__state{font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-forest-dark)}
.article-hero__image,.article-hero__shade{position:absolute;inset:0;width:100%;height:100%}
.article-hero__image{object-fit:cover}
.article-hero__shade{background:linear-gradient(0deg,rgba(13,28,21,.96),rgba(13,28,21,.15) 78%)}
.article-hero__inner{position:relative;z-index:1;padding-block:7rem 4rem}
.article-hero h1{max-width:13ch;margin:.8rem 0 1.25rem;font-size:clamp(4rem,9vw,8rem);line-height:.9}
.article-hero__lead{max-width:58ch;margin:0 0 2rem;font-size:var(--step-1)}
.author-byline--hero{display:flex;align-items:center;gap:.8rem}
.author-byline--hero>img{width:52px;height:52px;border:2px solid rgba(255,255,255,.72);border-radius:50%;object-fit:cover}
.author-byline--hero>.story-author__avatar{display:grid;width:52px;height:52px;flex:0 0 52px;place-items:center;border:2px solid rgba(255,255,255,.72);border-radius:50%;background:var(--color-coral);color:var(--color-white);font-weight:600}
.author-byline--hero>span{display:grid;gap:.05rem}
.author-byline--hero small{color:rgba(255,255,255,.65);font-size:.58rem;text-transform:uppercase;letter-spacing:.1em}
.author-byline--hero strong{font-size:.85rem}
.author-byline--hero>span>span{color:rgba(255,255,255,.7);font-size:.66rem}
.article-deck{width:min(66%,860px);padding:clamp(2rem,4vw,3rem) 0 1rem}
.article-deck p{max-width:40ch;margin:0;font:500 clamp(1.35rem,2vw,1.8rem)/1.4 var(--font-display)}
.article-layout{display:block;width:min(66%,860px);padding:2rem 0 clamp(3.5rem,5vw,5rem)}
.article-copy{font-family:var(--font-body);font-size:1.18rem;line-height:1.8}
/* The global anchor reset strips decoration, so links inside editorial text need their own affordance. */
.article-copy a,.article-deck a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;font-weight:500}
.article-copy a:hover,.article-copy a:focus-visible,.article-deck a:hover,.article-deck a:focus-visible{text-decoration-thickness:2px}
.article-copy__opening{font-size:1.08rem;line-height:1.75}
.article-copy p+p{margin-top:1.4rem}
.article-copy h2{margin:2.75rem 0 1rem;font-size:clamp(2rem,3vw,3rem);line-height:1.08}
.article-copy>h2:first-child{margin-top:0}

/* Images written into a body sit beside the text at half the column and reach out to the page edge the
   rest of the site uses, so they line up with the hero and the sections below. A heading starts clean.
   The bleed is half the difference between the shell and the reading column, and both are centred;
   it must be resolved where it is used, because a percentage in a custom property is not. */
.media-inline{display:block;width:50%;margin-block:.45rem 1.4rem;--media-inline-bleed:max(0px, calc((min(1180px, 100vw - 3rem) - 100%) / 2))}
.media-inline img{display:block;width:100%;height:auto;border:1px solid var(--color-line)}
.media-inline__caption{display:block;margin-top:.6rem;padding-left:.7rem;border-left:3px solid var(--color-mustard);color:var(--color-ink-soft);font:600 .62rem/1.4 var(--font-body);text-transform:uppercase;letter-spacing:.08em}
.media-inline--right{float:right;margin-left:2rem;margin-right:calc(-1 * var(--media-inline-bleed,4rem))}
.media-inline--left{float:left;margin-right:2rem;margin-left:calc(-1 * var(--media-inline-bleed,4rem))}
.media-inline--wide{float:none;width:100%;margin:2rem 0}
/* A prose column starts at the page edge already and is not centred, so there is nothing to reach into. */
.prose .media-inline{--media-inline-bleed:0px}
:is(.article-copy,.prose) :is(h2,h3){clear:both}
@media(max-width:900px){.media-inline{--media-inline-bleed:0rem;width:45%}}
@media(max-width:620px){.media-inline,.media-inline--left,.media-inline--right{float:none;width:100%;margin:1.75rem 0}}
.media-figure{margin:2.5rem 0}
.media-figure img{width:100%;max-height:600px;object-fit:cover}
.media-figure figcaption,.media-gallery figcaption{margin-top:.55rem;color:var(--color-ink-soft);font:600 .62rem var(--font-body);text-transform:uppercase;letter-spacing:.08em}
.media-figure--offset{width:100%;margin-inline:auto}
.media-figure--offset img{aspect-ratio:16/9}
.pull-quote,.article-copy>blockquote{position:relative;padding:3.6rem 2.5rem 2.25rem;margin:3rem 0;border:0;background:var(--color-mustard);color:var(--color-ink);font:500 clamp(1.4rem,2vw,2rem)/1.28 var(--font-display);text-align:center}
.pull-quote::before,.article-copy>blockquote::before{position:absolute;top:.55rem;left:50%;color:var(--color-ink);font:500 4rem/1 var(--font-display);content:"“";transform:translateX(-50%);opacity:.42}
.pull-quote>span,.pull-quote>p,.article-copy>blockquote>p{display:block;width:100%;max-width:none;margin:0 auto}
.pull-quote--accent{background:var(--color-mustard)}
.pull-quote--accent::before{color:var(--color-ink)}
.article-copy--interlude{width:min(66%,860px);padding-block:clamp(2rem,4vw,3.5rem)}
.media-fullbleed{position:relative;width:100%;height:min(82vh,880px);margin:0;overflow:hidden}
.media-fullbleed img{width:100%;height:100%;object-fit:cover}
.media-fullbleed::after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,28,21,.74),transparent 55%);content:""}
.media-fullbleed figcaption{position:absolute;z-index:1;right:var(--space-6);bottom:var(--space-6);left:var(--space-6);display:grid;max-width:650px;color:var(--color-white)}
.media-fullbleed figcaption span{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.media-fullbleed figcaption strong{margin-top:.3rem;font:500 var(--step-2)/1.2 var(--font-display)}
.media-gallery{display:grid;width:min(1500px,calc(100% - 3rem));margin-inline:auto;grid-template-columns:1.4fr .6fr;grid-template-rows:260px 260px;gap:1rem}
.media-gallery figure{position:relative;margin:0;overflow:hidden}
.media-gallery__main{grid-row:1/3}
.media-gallery img{width:100%;height:100%;object-fit:cover}
.media-gallery figcaption{position:absolute;right:1rem;bottom:1rem;left:1rem;margin:0;padding:.55rem .7rem;background:rgba(13,28,21,.8);color:var(--color-white)}
.video-feature{display:grid;margin-block:clamp(3.5rem,7vw,6rem);align-items:center;grid-template-columns:1.35fr .65fr;background:var(--color-ink);color:var(--color-white)}
.video-feature__poster{position:relative;min-height:520px;overflow:hidden}
.video-feature__poster img{position:absolute;width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.video-feature__poster button{position:absolute;top:50%;left:50%;display:grid;width:82px;height:82px;place-items:center;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:rgba(13,28,21,.45);color:var(--color-white);font-size:1.2rem;transform:translate(-50%,-50%)}
.video-feature__poster button:hover{background:var(--color-coral)}
.video-feature__copy{padding:clamp(2rem,5vw,4rem)}
.video-feature__copy>span{color:var(--color-mustard);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.video-feature__copy h2{margin:.65rem 0 1rem;font-size:var(--step-3)}
.video-feature__copy p{color:rgba(255,255,255,.7)}
.video-feature__copy small{display:block;margin-top:1.5rem;color:rgba(255,255,255,.48);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em}
.place-collection{padding-block:clamp(3.5rem,7vw,6rem)}
.place-collection>header{display:block;margin-bottom:3rem}
.place-collection>header>div{max-width:620px}
.place-collection>header h2{max-width:11ch;font-size:var(--step-4)}
/* Any number of places has to look deliberate, so the row fills itself and only the lead tile is wider. */
.place-collection__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
/* From five places on there is enough material for a mosaic: fixed rows, mixed spans, gaps filled by dense flow. */
.place-collection__grid--mosaic{grid-auto-flow:dense;grid-auto-rows:210px;grid-template-columns:repeat(4,minmax(0,1fr))}
.place-collection__grid--mosaic .place-collection__card{min-height:0}
.place-collection__grid--mosaic .place-collection__card:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.place-collection__grid--mosaic .place-collection__card:nth-child(6n+4){grid-column:span 2}
.place-collection__grid--mosaic .place-collection__card:nth-child(6n+5){grid-row:span 2}
.place-collection__card{position:relative;min-height:340px;overflow:hidden;background:var(--color-ink);color:var(--color-white)}
.place-collection__card--featured{grid-column:span 2;min-height:430px}
.place-collection__card>img{position:absolute;width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.place-collection__card::after{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,28,21,.92),transparent 70%);content:""}
.place-collection__card>div{position:absolute;z-index:1;right:1.5rem;bottom:1.5rem;left:1.5rem}
.place-collection__grid span{color:var(--color-mustard);font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.place-collection__grid h3{margin:.3rem 0;font-size:var(--step-2);line-height:1.05}
.place-collection__card--featured h3{font-size:var(--step-3)}
.place-collection__grid p{max-width:38ch;margin:.4rem 0 0;color:rgba(255,255,255,.76);font-size:.75rem;line-height:1.5}
.place-collection__card:hover>img,.place-collection__card:focus-visible>img{transform:scale(1.04)}
.article-layout--closing{display:block}
.related-story{padding:2rem;margin-top:4rem;background:var(--color-mist);font-family:var(--font-body)}
.related-story>span{color:var(--color-coral);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.related-story h3{margin:.45rem 0;font:500 var(--step-2) var(--font-display)}
.related-story p{margin:0 0 1.25rem;color:var(--color-ink-soft);font-size:.82rem;line-height:1.55}
.diary-cta{padding-block:var(--space-7);background:var(--color-mustard)}
.diary-cta__inner{display:grid;grid-template-columns:1.3fr .7fr;align-items:end;gap:clamp(3rem,10vw,9rem)}
.diary-cta h2{font-size:clamp(3rem,7vw,6.3rem)}
.diary-cta__inner>div:last-child p{margin-bottom:1.5rem}
@media(max-width:900px){.article-layout,.article-deck,.article-copy--interlude{width:min(78%,760px)}.video-feature{grid-template-columns:1fr}.video-feature__poster{min-height:460px}.place-collection__card--featured{grid-column:1/-1}.place-collection__grid--mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px}.diary-cta__inner{grid-template-columns:1fr;gap:2rem}}
@media(max-width:620px){.article-hero{min-height:680px}.article-hero__inner{padding-block:6rem 3rem}.article-hero h1{font-size:clamp(3.6rem,16vw,5.4rem)}.article-deck,.article-copy--interlude{width:var(--shell)}.article-deck p{font-size:clamp(1.3rem,6vw,1.7rem)}.article-layout{width:var(--shell);padding:1.5rem 0 3.5rem}.article-copy{font-size:1.05rem}.media-figure--offset{width:100%;margin-left:0}.pull-quote{padding:3.2rem 1.25rem 2rem;font-size:clamp(1.5rem,7vw,2.1rem)}.media-fullbleed{height:70vh}.media-fullbleed figcaption{right:1.5rem;bottom:1.5rem;left:1.5rem}.media-gallery{grid-template-columns:1fr;grid-template-rows:420px 240px 240px}.media-gallery__main{grid-row:auto}.video-feature{width:100%;margin-block:3.5rem}.video-feature__poster{min-height:330px}.place-collection>header{grid-template-columns:1fr}.place-collection__grid{grid-template-columns:1fr}.place-collection__card--featured{grid-column:auto}.place-collection__grid--mosaic{grid-template-columns:1fr;grid-auto-rows:auto}/* Same specificity as the span rules above, so one column really is one column. */.place-collection__grid--mosaic .place-collection__card:nth-child(n){min-height:300px;grid-column:auto;grid-row:auto}.place-collection__card,.place-collection__card--featured{min-height:330px}.diary-cta h2{font-size:clamp(3rem,15vw,5rem)}}