:root { --ink:#211622; --paper:#fffaf6; --cream:#f8efe9; --wine:#6e263c; --coral:#ff756f; --line:#ded2ce; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--wine); }
a:focus-visible, button:focus-visible { outline:3px solid var(--coral); outline-offset:5px; }
[hidden] { display:none!important; }
.story-button { display:inline-flex; padding:14px 22px; border:1px solid currentColor; border-radius:30px; font-size:14px; }
.story-button:hover { background:var(--wine); color:var(--paper); }
.stories-hero, .story-hero { padding:64px clamp(22px,7vw,110px); background:var(--cream); }
.eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--wine); }
h1 { max-width:1050px; margin:24px 0; font:400 clamp(40px,6vw,82px)/1.06 Georgia,serif; letter-spacing:-.045em; }
.standfirst { max-width:740px; font-size:clamp(18px,2vw,23px); line-height:1.6; color:#6c5862; }
.story-meta { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:32px; font-size:12px; color:#6c5862; }
.story-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:clamp(40px,7vw,100px); max-width:1200px; margin:auto; padding:64px 28px 90px; }
.story-body { min-width:0; }
.story-body p { font-size:18px; line-height:1.85; white-space:pre-line; }
.story-body h2 { font:400 clamp(27px,3vw,38px)/1.2 Georgia,serif; letter-spacing:-.025em; margin:52px 0 20px; }
.story-body section:first-of-type h2 { margin-top:0; }
.story-cover { width:100%; max-height:440px; object-fit:cover; margin-bottom:42px; border-radius:4px; }
.story-quote { margin:48px 0; padding:30px 0 30px 28px; border-left:3px solid var(--coral); }
.story-quote p { font:400 clamp(24px,3vw,34px)/1.4 Georgia,serif; margin:0 0 22px; }
.story-quote cite { font-style:normal; font-size:13px; line-height:1.6; }
.story-sidebar { align-self:start; position:sticky; top:132px; padding:28px; background:var(--cream); border-top:3px solid var(--wine); }
.story-sidebar h2 { font:400 26px Georgia,serif; margin:0 0 20px; }
.story-sidebar dl { margin:0; }
.story-sidebar dt { font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--wine); margin-top:22px; }
.story-sidebar dd { margin:7px 0 0; font-size:15px; line-height:1.6; white-space:pre-line; }
.story-sidebar .story-button { margin-top:28px; }
.story-sidebar img { max-width:160px; max-height:80px; object-fit:contain; margin-bottom:22px; }
.story-cta { padding:60px clamp(22px,7vw,110px); background:var(--ink); color:var(--paper); }
.story-cta h2 { font:400 clamp(32px,4vw,52px)/1.15 Georgia,serif; max-width:750px; margin:0 0 24px; }
.story-cta p { max-width:620px; line-height:1.7; color:#d9cfd5; }
.story-cta a { margin-top:14px; }
.story-footer { padding:28px clamp(22px,5vw,76px); display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; font-size:12px; color:#6c5862; }
.stories-list { max-width:1200px; margin:auto; padding:60px 28px 90px; min-height:320px; }
.story-card { display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; align-items:center; padding:36px 0; border-bottom:1px solid var(--line); }
.story-card:first-child { border-top:1px solid var(--line); }
.story-card > div { min-width:0; }
.story-body, .story-sidebar, .story-card, .stories-hero, .story-hero, .story-cta { overflow-wrap:anywhere; }
.story-card img { width:180px; height:130px; object-fit:cover; }
.story-card .card-mark { width:180px; height:130px; display:grid; place-items:center; background:var(--cream); color:var(--wine); font:italic 44px Georgia,serif; }
.story-card h2 { font:400 clamp(25px,3vw,37px)/1.2 Georgia,serif; margin:12px 0; }
.story-card p { color:#6c5862; line-height:1.7; margin:0; }
.story-state { max-width:750px; margin:auto; padding:70px 28px; line-height:1.7; }
.story-state h2 { font:400 34px Georgia,serif; }
.story-state button { padding:12px 22px; border:1px solid var(--wine); background:transparent; color:var(--wine); cursor:pointer; font:inherit; border-radius:30px; }
.skeleton { height:140px; margin:20px 0; background:var(--cream); animation:pulse 1.5s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity:.45; } }
@media(max-width:800px) { .story-layout { grid-template-columns:1fr; padding-top:40px; } .story-sidebar { position:static; } .stories-hero,.story-hero { padding-top:44px; } .story-card { grid-template-columns:100px 1fr; gap:20px; } .story-card img,.story-card .card-mark { width:100px; height:100px; } }
@media(max-width:540px) {
  .stories-hero, .story-hero { padding:36px 22px; }
  h1 { font-size:clamp(34px,9vw,48px); line-height:1.12; margin-block:20px; }
  .standfirst { font-size:17px; }
  .stories-list, .story-layout { padding:36px 22px 56px; }
  .story-card { grid-template-columns:minmax(0,1fr); gap:18px; padding-block:28px; }
  .story-card img { width:100%; height:auto; aspect-ratio:16 / 9; }
  .story-card h2 { font-size:28px; }
  .story-body p { font-size:16px; line-height:1.75; }
  .story-body h2 { margin-top:36px; }
  .story-cover { margin-bottom:28px; }
  .story-quote { margin-block:32px; padding:20px 0 20px 18px; }
  .story-quote p { font-size:24px; line-height:1.4; }
  .story-sidebar { padding:24px; }
  .story-cta { padding:40px 22px; }
  .story-button, .story-state button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
  .story-cta .story-button, .story-sidebar .story-button { width:100%; }
  .story-state { padding:40px 22px; }
  .stories-list .story-state { padding-inline:0; }
  .story-hero > a.eyebrow { display:inline-flex; align-items:center; min-height:44px; }
  .story-state h2 { font-size:28px; }
  .story-footer { padding:24px 22px; flex-direction:column; gap:12px; }
  .story-footer a { display:inline-flex; align-items:center; min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }