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

:root { --ink:#20221d; --paper:#f3f0e8; --cream:#e8e2d5; --line:rgba(32,34,29,.18); --red:#a4422c; --olive:#596047; --sun:#c98225; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; }
a { color:inherit; }
img { display:block; width:100%; height:100%; object-fit:cover; }
.skip-link { position:absolute; left:-999px; top:8px; z-index:20; background:#fff; padding:10px; }
.skip-link:focus { left:8px; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); border-bottom:1px solid var(--line); }
.wordmark { display:flex; gap:12px; align-items:center; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; }
.wordmark span { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; font-family:'Playfair Display',serif; letter-spacing:0; }
nav { display:flex; gap:30px; }
nav a { font-size:13px; text-decoration:none; }
.masthead { min-height:calc(100vh - 82px); padding:8vh clamp(22px,7vw,108px) 6vh; display:grid; grid-template-columns:1fr minmax(260px,430px); align-content:center; gap:6vw; position:relative; }
.eyebrow { margin:0 0 20px; font-size:11px!important; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.masthead h1 { margin:0; font:600 clamp(62px,10vw,154px)/.83 'Playfair Display',serif; letter-spacing:0; }
.masthead h1 em { color:var(--red); font-weight:500; }
.intro { align-self:end; margin:0 0 10vh; max-width:400px; font:500 clamp(20px,2vw,30px)/1.35 'Playfair Display',serif; }
.scroll-cue { position:absolute; bottom:28px; left:clamp(22px,7vw,108px); font-size:12px; text-decoration:none; }
.feature { display:grid; grid-template-columns:1.55fr .7fr; min-height:760px; background:var(--ink); color:var(--paper); }
.feature-image { min-height:580px; display:flex; align-items:flex-end; justify-content:space-between; padding:clamp(30px,5vw,78px); background:#a9422e; color:#f3f0e8; overflow:hidden; }
.feature-image>span { align-self:center; margin-left:8%; font:500 clamp(180px,32vw,520px)/.7 'Playfair Display',serif; opacity:.88; }
.feature-image>small { font-size:12px; line-height:1.6; letter-spacing:.1em; text-transform:uppercase; }
.feature-copy { padding:clamp(48px,8vw,124px) clamp(30px,6vw,96px); display:flex; flex-direction:column; justify-content:center; }
.feature h2 { margin:0 0 28px; font:600 clamp(42px,5vw,76px)/1 'Playfair Display',serif; letter-spacing:0; }
.feature-copy>p:not(.eyebrow) { color:#c9c7bf; line-height:1.75; }
.feature-copy>a { margin-top:28px; padding-top:18px; border-top:1px solid #60615b; display:flex; justify-content:space-between; text-decoration:none; }
.journal { padding:120px clamp(22px,7vw,108px); }
.journal>header { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:end; gap:28px; border-bottom:1px solid var(--line); padding-bottom:44px; }
.journal h2,.place h2 { margin:0; font:600 clamp(48px,6vw,90px)/.95 'Playfair Display',serif; letter-spacing:0; }
.journal>header>p:last-child { margin:0; line-height:1.6; }
.filter { display:flex; gap:8px; padding:32px 0; }
.filter button { border:1px solid var(--line); background:transparent; padding:9px 18px; border-radius:2px; cursor:pointer; font:500 12px 'DM Sans'; }
.filter button.active { background:var(--ink); color:var(--paper); }
.story-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:72px 28px; }
.story-card[hidden] { display:none; }
.story-card a { display:grid; grid-template-columns:1fr 1fr; text-decoration:none; background:#ece8df; min-height:370px; }
.story-card:nth-child(3n) { grid-column:1/-1; }
.story-card:nth-child(3n) a { grid-template-columns:1.4fr .6fr; }
.card-image { overflow:hidden; min-height:300px; }
.card-image>span { width:100%; height:100%; display:grid; place-items:center; background:#a9422e; color:#f3f0e8; font:600 90px 'Playfair Display',serif; }
.story-card.sky .card-image>span { background:#527888; }.story-card.rose .card-image>span { background:#985847; }.story-card.sun .card-image>span { background:#c98225; }.story-card.olive .card-image>span { background:#596047; }
.card-image img { transition:transform .6s ease; }
.story-card a:hover img { transform:scale(1.025); }
.card-copy { padding:36px; display:flex; flex-direction:column; }
.card-copy h2 { margin:0 0 20px; font:600 clamp(26px,3vw,42px)/1.08 'Playfair Display',serif; letter-spacing:0; }
.card-copy>p:not(.eyebrow) { color:#56584f; line-height:1.6; }
.card-copy span { margin-top:auto; font-size:12px; font-weight:600; }
.place { display:grid; grid-template-columns:1.2fr 1fr; gap:12vw; align-items:end; padding:120px clamp(22px,7vw,108px); background:#b84d32; color:#fff8ec; }
.place>p { max-width:540px; font-size:18px; line-height:1.75; }
footer { min-height:180px; padding:50px clamp(22px,5vw,76px); display:flex; align-items:center; gap:40px; border-top:1px solid var(--line); font-size:12px; }
footer span { margin-right:auto; color:#686a61; }

.article-page { --accent:var(--red); }
.article-page.sky { --accent:#4b7788; }.article-page.sun { --accent:var(--sun); }.article-page.olive { --accent:var(--olive); }.article-page.rose { --accent:#9f5a4a; }
.article-hero { min-height:740px; display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1px solid var(--line); }
.article-hero-copy { padding:60px clamp(24px,6vw,92px); display:flex; flex-direction:column; justify-content:center; }
.back { margin-bottom:80px; text-decoration:none; font-size:12px; }
.article-hero h1 { margin:0; font:600 clamp(48px,6.5vw,98px)/.94 'Playfair Display',serif; letter-spacing:0; }
.dek { max-width:570px; margin-top:30px; font-size:18px; line-height:1.65; color:#55574f; }
.hero-media { min-height:560px; background:var(--accent); color:#f3f0e8; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.hero-media>span { font:500 clamp(190px,27vw,430px)/1 'Playfair Display',serif; opacity:.9; }
.hero-media>small { position:absolute; right:32px; bottom:28px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
.article-layout { max-width:1260px; margin:auto; display:grid; grid-template-columns:220px minmax(0,760px); gap:8vw; padding:110px 32px 150px; }
.article-layout aside { position:sticky; top:30px; align-self:start; padding-top:18px; border-top:2px solid var(--accent); font-size:12px; }
.article-layout aside span,.article-layout aside strong { display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:.08em; }
.article-layout aside p { color:#77786f; line-height:1.6; }
.article-body>p { font-family:'Playfair Display',serif; font-size:19px; line-height:1.8; }
.article-body>p:first-of-type { font-size:25px; line-height:1.55; }
.article-body h2 { scroll-margin-top:30px; margin:80px 0 20px; padding-top:24px; border-top:1px solid var(--line); font:600 clamp(32px,4vw,52px)/1.05 'Playfair Display',serif; letter-spacing:0; }
.article-image { margin:56px 0; aspect-ratio:16/10; overflow:hidden; }
.article-list { padding-left:20px; font:18px/1.8 'Playfair Display',serif; }
.rating { color:var(--accent); letter-spacing:.08em; font-family:'DM Sans'!important; font-size:16px!important; }
.article-body a { text-decoration-color:var(--accent); text-underline-offset:3px; }

@media(max-width:800px){
  .site-header { height:68px; }.site-header nav { display:none; }
  .masthead { min-height:calc(100svh - 68px); grid-template-columns:minmax(0,1fr); align-content:center; }.masthead>div { min-width:0; }.masthead h1 { font-size:54px; overflow-wrap:anywhere; }.masthead h1 em { display:block; }.intro { align-self:auto; margin:0; max-width:100%; }
  .feature,.article-hero { grid-template-columns:1fr; }.feature-image { min-height:52svh; }.feature-copy { min-height:430px; }
  .journal { padding-top:80px; }.journal>header { grid-template-columns:minmax(0,1fr); }.story-grid { grid-template-columns:minmax(0,1fr); }.story-card { min-width:0; }.story-card:nth-child(3n) { grid-column:auto; }.story-card a,.story-card:nth-child(3n) a { grid-template-columns:minmax(0,1fr); min-width:0; }.card-image { aspect-ratio:4/3; min-width:0; min-height:0; }.card-copy { min-height:330px; min-width:0; }.card-copy h2 { overflow-wrap:anywhere; }
  .place { grid-template-columns:1fr; padding-block:80px; }
  footer { align-items:flex-start; flex-direction:column; gap:16px; }
  .article-hero { min-height:0; }.article-hero-copy { min-height:68svh; padding-block:42px; }.back { margin-bottom:60px; }.hero-media { min-height:52svh; }
  .article-layout { grid-template-columns:1fr; padding-top:70px; }.article-layout aside { position:static; }.article-body>p { font-size:18px; }.article-body>p:first-of-type { font-size:22px; }
}
@media(prefers-reduced-motion:reduce){ html { scroll-behavior:auto; }.card-image img { transition:none; } }