@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{--paper:#f5f2ec;--ink:#211e20;--muted:#625d5c;--line:#c9c3bb;--plum:#33202e;--gold:#d8ae48;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration-color:var(--gold)}
a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.skip{position:absolute;top:-100px;left:1rem;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:10}
.skip:focus{top:1rem}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.25rem clamp(1.25rem,4.5vw,5rem);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:.8rem;white-space:nowrap}
.brand-name{font-family:var(--serif);font-size:1.65rem;font-weight:600;letter-spacing:-.055em;line-height:1}
.brand-mark{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.main-nav{display:flex;gap:clamp(1rem,2.4vw,2.6rem);font-size:.84rem;font-weight:600;letter-spacing:.025em}
.main-nav a,.footer-nav a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.35em;transition:text-decoration-color .2s}
.main-nav a:hover,.footer-nav a:hover{text-decoration-color:var(--gold)}
.page-shell{max-width:1600px;margin:auto}
.opening{padding:clamp(3rem,7vw,7rem) clamp(1.25rem,6vw,6.5rem) clamp(2.5rem,5vw,5rem)}
.eyebrow,.kicker,.image-caption,.article-meta,.section-label{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.eyebrow{display:flex;align-items:center;gap:.75rem;color:#746d6b}
.eyebrow:before{content:'';width:1.6rem;height:1px;background:currentColor}
.opening h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.35rem,8.2vw,9rem);line-height:1.06;letter-spacing:-.065em;margin:1.35rem 0 2.3rem;max-width:1100px}
.opening h1 em{color:#8b553d;font-weight:400}
.opening-bottom{display:flex;align-items:end;justify-content:space-between;gap:2rem;border-top:1px solid var(--ink);padding-top:1.2rem}
.opening-bottom p{margin:0;max-width:28rem;font-size:1.04rem;line-height:1.5}
.text-link{display:inline-flex;align-items:center;gap:.85rem;white-space:nowrap;font-size:.83rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;border-bottom:1px solid currentColor;padding-bottom:.35rem;transition:gap .2s,border-color .2s}
.text-link:hover{gap:1.25rem;border-color:var(--gold)}
.text-link .arrow{font-size:1.25rem;font-weight:400;line-height:1}
.lead-story{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(19rem,.75fr);background:var(--plum);color:#fbf8f2;margin:0 clamp(1.25rem,3vw,3.4rem)}
.lead-visual{margin:0;min-height:30rem;position:relative;overflow:hidden}
.lead-visual img{height:100%;object-fit:cover;aspect-ratio:1.48}
.lead-visual figcaption{position:absolute;left:1rem;bottom:1rem;color:#fff;background:rgba(28,24,27,.72);padding:.3rem .6rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.lead-copy{padding:clamp(2rem,4.6vw,5rem);display:flex;flex-direction:column;justify-content:center;align-items:start}
.lead-copy .kicker{color:var(--gold)}
.lead-copy h2{font-family:var(--serif);font-size:clamp(2.45rem,4vw,4.5rem);line-height:1.13;letter-spacing:-.045em;font-weight:400;margin:1.4rem 0 1.3rem}
.lead-copy p{font-size:1.02rem;line-height:1.7;color:#e9e2e4;max-width:25rem;margin:0 0 2.3rem}
.lead-copy .text-link{color:#fff}
.journal-section{padding:clamp(4rem,7vw,7rem) clamp(1.25rem,6vw,6.5rem) clamp(5rem,8vw,8rem)}
.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid var(--ink);padding-bottom:1.2rem;margin-bottom:2rem}
.section-heading h2{font-family:var(--serif);font-size:clamp(2.4rem,4vw,4rem);font-weight:400;letter-spacing:-.045em;line-height:1.1;margin:0}
.section-heading span{color:var(--muted)}
.story-grid{display:grid;grid-template-columns:1.07fr .93fr;gap:clamp(2rem,6vw,7rem)}
.story-card{min-width:0}
.story-card figure{margin:0;overflow:hidden;background:#e8e1d7}
.story-card img{transition:transform .5s ease;object-fit:cover}
.story-card a:hover img{transform:scale(1.025)}
.story-card.photo img{aspect-ratio:1.22;object-fit:contain;background:#fff}
.story-card.music{padding-top:5.5rem}
.story-card.music img{aspect-ratio:1.38;object-position:center 56%}
.story-details{border-top:1px solid var(--ink);margin-top:1.25rem;padding-top:1rem}
.story-details .kicker{color:#8b553d}
.story-details h3{font-family:var(--serif);font-size:clamp(2rem,3vw,3.25rem);font-weight:400;letter-spacing:-.045em;line-height:1.18;margin:.9rem 0 .8rem}
.story-details p{max-width:30rem;color:var(--muted);margin:0 0 1.4rem}
.journal-note{border-top:1px solid var(--line);padding:2.2rem clamp(1.25rem,6vw,6.5rem) 4rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.archive-section{padding:0 clamp(1.25rem,6vw,6.5rem) clamp(5rem,7vw,7rem)}
.archive-list{border-top:1px solid var(--line)}
.archive-row{display:grid;grid-template-columns:minmax(7rem,.6fr) minmax(0,2fr) minmax(8rem,.7fr);gap:1.2rem;align-items:baseline;padding:1.2rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.archive-row span{font-size:.79rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.archive-row span:last-child{text-align:right}
.archive-row strong{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2vw,2rem);letter-spacing:-.035em;line-height:1.25}
.archive-row:hover strong{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.2em}
.journal-note .section-label{color:#8b553d}
.journal-note p{margin:0;font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.4rem);letter-spacing:-.035em;line-height:1.4;max-width:32rem}
.site-footer{border-top:1px solid var(--ink);background:var(--ink);color:#f6f2ed;padding:2rem clamp(1.25rem,4.5vw,5rem)}
.footer-inner{max-width:1600px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:2rem}
.footer-title{font-family:var(--serif);font-size:1.6rem;letter-spacing:-.05em}
.footer-nav{display:flex;gap:1.4rem;font-size:.85rem}
.copyright{font-size:.76rem;color:#bbb3b3}

/* Story pages */
.article-main{max-width:1600px;margin:auto;padding:0 clamp(1.25rem,6vw,6.5rem)}
.back-link{display:inline-flex;gap:.6rem;align-items:center;text-transform:uppercase;letter-spacing:.13em;font-size:.75rem;font-weight:700;margin:2.7rem 0 4rem}
.back-link span{font-size:1.25rem;font-weight:400;line-height:1}
.article-head{max-width:1030px;margin:0 auto 3.5rem}
.article-head .kicker{color:#8b553d}
.article-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.6rem,7.8vw,7.5rem);line-height:1.06;letter-spacing:-.06em;margin:1.1rem 0 1.6rem}
.article-deck{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.45;max-width:47rem;color:#484042;margin:0 0 2rem}
.article-meta{color:var(--muted);border-top:1px solid var(--line);padding-top:1rem}
.article-hero{margin:0 auto 4rem;max-width:1330px}
.article-hero img{max-height:760px;object-fit:cover}
.article-hero.square{max-width:900px}
.article-hero.square img{object-fit:contain;max-height:none}
.article-hero figcaption{text-align:right;color:var(--muted);font-size:.75rem;padding-top:.65rem}
.article-content{max-width:740px;margin:0 auto 6rem;font-family:var(--serif);font-size:clamp(1.15rem,1.45vw,1.35rem);line-height:1.9}
.article-content p{margin:0 0 1.7em}
.article-content ul{margin:0 0 1.7em;padding-left:1.5em}
.article-content li{padding-left:.2em;margin:.3em 0}
.article-content p:first-child:first-letter{float:left;font-size:4.2em;line-height:.79;padding:.13em .1em 0 0;color:#8b553d}
.article-content blockquote{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.4;letter-spacing:-.035em;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:1.5rem 0;margin:2.7rem 0;font-style:italic}
.article-next{border-top:1px solid var(--ink);padding:2rem 0 5rem;max-width:1030px;margin:auto;display:flex;justify-content:space-between;gap:2rem;align-items:baseline}
.article-next small{display:block;color:var(--muted);font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;margin-bottom:.5rem}
.article-next a{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.3rem);letter-spacing:-.035em;line-height:1.3}

@media(max-width:850px){.lead-story{grid-template-columns:1fr}.lead-visual{min-height:0}.lead-visual img{aspect-ratio:1.5}.lead-copy{padding:2.5rem}.story-grid{gap:2rem}.story-card.music{padding-top:3rem}}
@media(max-width:620px){.site-header{align-items:start;flex-direction:column;gap:1rem;padding:1.15rem 1.25rem}.brand-name{font-size:1.55rem}.main-nav{width:100%;justify-content:space-between;gap:.6rem;font-size:.8rem}.opening{padding-top:3.7rem}.opening h1{font-size:clamp(3rem,14vw,5.3rem);margin-bottom:2rem}.opening-bottom{align-items:start;flex-direction:column;gap:1.4rem}.opening-bottom p{font-size:1rem}.lead-story{margin:0}.lead-visual img{aspect-ratio:1.25}.lead-copy{padding:2.3rem 1.25rem 2.8rem}.lead-copy h2{font-size:2.65rem}.journal-section{padding-top:4rem;padding-bottom:4rem}.section-heading{align-items:end}.section-heading span{font-size:.8rem}.story-grid{grid-template-columns:1fr;gap:3.5rem}.story-card.music{padding-top:0}.story-card.photo img{aspect-ratio:1}.story-card.music img{aspect-ratio:1.35}.archive-row{grid-template-columns:1fr auto;gap:.25rem 1rem}.archive-row strong{grid-column:1 / -1;grid-row:2}.archive-row span:last-child{grid-column:2;grid-row:1}.journal-note{grid-template-columns:1fr;gap:1rem;padding-bottom:3rem}.footer-inner{align-items:start;flex-direction:column;gap:1.3rem}.footer-nav{flex-wrap:wrap}.article-main{padding:0 1.25rem}.back-link{margin:2rem 0 3rem}.article-head{margin-bottom:2.2rem}.article-head h1{font-size:clamp(3.2rem,13vw,5rem)}.article-hero{margin:0 -1.25rem 2.5rem}.article-hero figcaption{padding:.6rem 1.25rem}.article-content{font-size:1.13rem;line-height:1.8}.article-next{flex-direction:column;gap:1.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-card img,.text-link{transition:none}}
