/* ============================================================
   whatjoyismine — a warm, candid diary of modern womanhood
   Display: Cormorant Garamond (soft high-contrast serif)
   Body:    Newsreader (warm, literary, highly readable)
   ============================================================ */
@import url('fonts.css');

:root{
  --paper:#F4E7E0;        /* warm cream, not paper-white */
  --paper-2:#FBEFEA;      /* lifted panel */
  --paper-3:#EFDDD5;      /* recessed band */
  --ink:#2C1219;          /* near-black plum */
  --ink-soft:#5C3540;     /* body prose */
  --ink-mute:#8A6672;     /* meta / captions */
  --berry:#6E2438;        /* primary */
  --berry-deep:#4A1626;   /* hero base */
  --terracotta:#B4573A;   /* warm accent */
  --rose:#A8546A;         /* soft accent */
  --blush:#E8B8AE;        /* light accent */
  --gold:#C08A3E;         /* soft gold detail */
  --gold-soft:#D8A96A;
  --dark:#25101A;         /* supporters / dark backing */
  --dark-2:#190A11;
  --line:#E6D2C9;         /* hairlines on paper */
  --line-soft:#F0DFD8;

  --display:"Cormorant Garamond","Hoefler Text",Baskerville,Garamond,"Times New Roman",serif;
  --body:"Newsreader",Georgia,"Iowan Old Style","Times New Roman",serif;

  --wrap:1200px;
  --measure:68ch;
  --radius:14px;
  --shadow:0 30px 70px -46px rgba(74,22,38,.55);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:var(--berry);text-decoration:none}
a:hover{color:var(--terracotta)}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;color:var(--ink);line-height:1.14;margin:0}
p{margin:0 0 1.1em}
::selection{background:rgba(110,36,56,.20)}
:focus-visible{outline:2px solid var(--berry);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 5vw}
.wrap-wide{max-width:1360px;margin:0 auto;padding:0 5vw}
.kicker{font-family:var(--body);font-weight:700;font-size:13.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--rose)}
.serif-italic{font-family:var(--display);font-style:italic}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* scroll reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------------- MASTHEAD ---------------- */
.masthead{position:sticky;top:0;z-index:50;background:rgba(244,231,224,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 5vw}
.wordmark{font-family:var(--display);font-style:italic;font-size:27px;color:var(--berry);white-space:nowrap}
.wordmark:hover{color:var(--berry)}
.nav{display:flex;gap:6px;align-items:center}
.nav > li{position:relative;list-style:none}
.nav a.nav-link{display:block;padding:10px 15px;font-size:16px;color:var(--ink-soft);border-radius:999px;transition:background .2s,color .2s}
.nav a.nav-link:hover,.nav li:hover > a.nav-link,.nav li:focus-within > a.nav-link{background:var(--paper-3);color:var(--berry)}
.nav ul{list-style:none;margin:0;padding:0}
/* submenu */
.submenu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(6px);min-width:230px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transition:all .22s ease;z-index:60}
.nav li:hover > .submenu,.nav li:focus-within > .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu a{display:block;padding:9px 13px;border-radius:8px;font-size:15.5px;color:var(--ink-soft);line-height:1.35}
.submenu a:hover{background:var(--paper-3);color:var(--berry)}
.submenu .sub-head{font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);padding:8px 13px 4px}
.nav-toggle{display:none}
.menu-btn{display:none;border:1px solid var(--line);background:var(--paper-2);color:var(--berry);border-radius:10px;padding:9px 12px;cursor:pointer}
.menu-btn svg{display:block}

/* ---------------- HERO / FEELING EXPLORER ---------------- */
.hero{background:linear-gradient(180deg,var(--berry) 0%,var(--berry-deep) 100%);color:#F6E5DF;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 500px at 80% -10%,rgba(216,169,106,.14),transparent 60%);pointer-events:none}
.hero-in{position:relative;padding:84px 5vw 72px;text-align:center;max-width:1240px;margin:0 auto}
.hero .kicker{color:var(--blush)}
.hero h1{font-style:italic;font-size:clamp(34px,5.6vw,58px);margin:18px auto 12px;max-width:none;color:#FBEFEA}
.hero-sub{font-size:19px;color:#E8C9C2;margin:0 auto 34px;max-width:48ch}
.feeling-note{font-family:var(--display);font-style:italic;font-size:20px;color:var(--blush);min-height:1.4em;margin-bottom:22px}
.pills{display:flex;gap:10px;flex-wrap:nowrap;justify-content:safe center;max-width:100%;margin:0 auto;overflow-x:auto;padding:2px 4px 8px;scrollbar-width:none;-ms-overflow-style:none}
.pills::-webkit-scrollbar{display:none}
.pill{font-family:var(--body);font-size:15px;letter-spacing:.01em;color:#F0CABF;background:transparent;border:1px solid rgba(246,229,223,.36);border-radius:999px;padding:10px 16px;cursor:pointer;transition:all .26s ease;white-space:nowrap;flex:0 0 auto}
.pill:hover{border-color:#F6E5DF;color:#FBEFEA}
.pill[aria-pressed="true"]{background:#F6E5DF;border-color:#F6E5DF;color:var(--berry);font-weight:400}

/* surfaced story */
.surfaced{background:var(--paper-2);border-bottom:1px solid var(--line-soft)}
.surfaced-in{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center;padding:56px 5vw;max-width:var(--wrap);margin:0 auto}
.surfaced .plate{aspect-ratio:5/4}
.surfaced .invite{font-family:var(--display);font-style:italic;font-size:21px;color:var(--rose);margin-bottom:16px}
.surfaced .s-meta{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--rose);margin-bottom:10px}
.surfaced h2{font-size:clamp(28px,4vw,40px);margin-bottom:14px;color:var(--ink)}
.surfaced .s-ex{font-size:18.5px;color:var(--ink-soft);max-width:50ch;margin-bottom:24px}
.btn{display:inline-block;background:var(--berry);color:#F6E5DF;padding:13px 26px;border-radius:999px;font-size:15.5px;transition:transform .22s,background .22s}
.btn:hover{background:var(--berry-deep);color:#F6E5DF;transform:translateY(-2px)}
.btn-ghost{background:transparent;border:1px solid var(--berry);color:var(--berry)}
.btn-ghost:hover{background:var(--berry);color:#F6E5DF}

/* image plates (faceless placeholders w/ warm fallback) */
.plate{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(150deg,var(--blush),var(--berry));isolation:isolate}
.plate .cap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:15px 16px;font-family:var(--body);font-style:normal;font-size:13px;line-height:1.45;color:#fff;z-index:1;text-shadow:0 1px 3px rgba(30,8,16,.5);background:linear-gradient(0deg,rgba(35,12,22,.62),rgba(35,12,22,.12) 52%,transparent 78%)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
/* parallax needs a little vertical overflow room */
.hero .plate img,.diary-feature .plate img,.article-figure-hero .plate img,.surfaced .plate img{height:126%;top:-13%;will-change:transform}

/* ---------------- DIARY STREAM ---------------- */
.section{padding:76px 0}
.section-head{text-align:center;max-width:60ch;margin:0 auto 44px;padding:0 5vw}
.section-head h2{font-size:clamp(28px,4vw,38px);margin:12px 0 8px}
.section-head p{color:var(--ink-mute);font-size:17px;margin:0}

.diary-list{max-width:1220px;margin:0 auto;padding:0 5vw;display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px}
.diary-item{display:flex;flex-direction:column;margin:0}
.diary-item .plate{aspect-ratio:4/3;margin-bottom:16px}
.diary-item .d-cat{font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin-bottom:8px}
.diary-item h3{font-size:22px;line-height:1.22;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.diary-item h3 a:hover{color:var(--terracotta)}
.diary-item p{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.diary-item .read-meta{font-size:13.5px;color:var(--ink-mute);margin-top:auto}
.diary-more{text-align:center;margin-top:44px}
.more-toggle{display:none}
.diary-item.extra{display:none}
#more-diary:checked ~ .diary-list .diary-item.extra{display:flex}
.more-label{cursor:pointer}
#more-diary:checked ~ .diary-more .more-label{display:none}

/* diary — editorial feature + numbered index */
.diary-feature{position:relative;display:block;max-width:1180px;margin:0 auto 48px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:2/1;color:#F6E5DF}
.diary-feature .plate{position:absolute;inset:0;border-radius:0}
.diary-feature .df-body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(26px,4vw,52px);background:linear-gradient(0deg,rgba(28,10,18,.9),rgba(28,10,18,.35) 55%,transparent)}
.diary-feature .df-kicker{font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--blush)}
.diary-feature h3{font-family:var(--display);font-weight:500;font-size:clamp(30px,4.4vw,50px);line-height:1.08;margin:12px 0 12px;color:#FBEFEA;max-width:20ch}
.diary-feature p{font-size:clamp(16px,1.8vw,19px);line-height:1.6;color:#EAD0CB;margin:0 0 14px;max-width:58ch}
.diary-feature .df-meta{font-family:var(--body);font-size:13.5px;letter-spacing:.06em;color:#D8A9A0}
.diary-feature:hover h3{color:#fff}
.diary-feature .df-tag{position:absolute;top:22px;left:24px;z-index:3;font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#FBEFEA;background:rgba(110,36,56,.6);backdrop-filter:blur(4px);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2)}

.diary-index{list-style:none;max-width:1120px;margin:0 auto;padding:0 5vw}
.di-row{border-bottom:1px solid var(--line)}
.di-row:first-child{border-top:1px solid var(--line)}
.di-row a{display:grid;grid-template-columns:58px 1fr 108px;gap:30px;align-items:center;padding:26px 10px;color:var(--ink);transition:background .25s ease,padding-left .25s ease}
.di-row a:hover{background:var(--paper-2);padding-left:20px}
.di-main{display:block;min-width:0}
.di-no{font-family:var(--display);font-size:32px;font-weight:500;color:var(--gold);line-height:1}
.di-cat{display:block;font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin-bottom:7px}
.di-title{display:block;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,30px);line-height:1.16;margin:0 0 7px;color:var(--ink);transition:color .2s ease}
.di-row a:hover .di-title{color:var(--berry)}
.di-ex{font-size:15.5px;line-height:1.5;color:var(--ink-mute);margin:0;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.di-meta{font-size:12.5px;letter-spacing:.05em;color:var(--ink-mute);margin:9px 0 0}
.di-thumb{width:108px;height:78px;border-radius:11px;overflow:hidden;position:relative;background:linear-gradient(150deg,var(--blush),var(--berry));flex:0 0 auto}
.di-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.di-row a:hover .di-thumb img{transform:scale(1.08)}
.di-row.extra{display:none}
#more-diary:checked ~ .diary-index .di-row.extra{display:block}

/* ---------------- SUPPORTERS ---------------- */
.favourites{background:var(--dark);color:#F1E1DB}
.fav-in{padding:66px 5vw;max-width:1200px;margin:0 auto}
.fav-head{text-align:center;max-width:62ch;margin:0 auto 38px}
.fav-head .serif-italic{font-size:clamp(28px,4vw,34px);color:var(--blush);display:block}
.fav-head p{color:#C8A49D;font-size:16px;margin:12px 0 0}
.fav-featured{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sponsor{display:flex;flex-direction:column;gap:12px;background:var(--dark-2);border:1px solid #3C2029;border-radius:12px;padding:26px;min-height:132px;cursor:pointer;transition:border-color .2s,transform .2s}
.sponsor:hover{border-color:var(--gold);transform:translateY(-3px)}
.sponsor img{height:34px;width:auto;object-fit:contain;opacity:.92}
.sponsor-blurb{font-family:var(--display);font-style:italic;font-size:14px;line-height:1.55;color:#BB9A94}
.sponsor-blurb:empty{min-height:1.5em}
.fav-divider{display:flex;align-items:center;gap:18px;margin:40px auto 26px;max-width:560px;color:#9A7A72;font-family:var(--display);font-style:italic;font-size:16px}
.fav-divider::before,.fav-divider::after{content:"";flex:1;height:1px;background:#3C2029}
.fav-roll{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.fav-roll .sponsor{flex-direction:row;align-items:center;min-height:0;padding:14px 20px;background:transparent;border-color:#33202a}
.fav-roll .sponsor img{height:20px;opacity:.6}
.fav-roll .sponsor:hover img{opacity:.95}
.fav-roll .sponsor-blurb{display:none}

/* ---------------- FOOTER ---------------- */
.footer{background:var(--paper-3);color:var(--ink-soft);padding:52px 5vw 40px}
.footer-in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.footer .wordmark{color:var(--berry);display:inline-block;margin-bottom:12px}
.footer .f-about{max-width:38ch;font-size:15.5px;color:var(--ink-mute)}
.footer h4{font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer ul a{color:var(--ink-soft);font-size:15.5px}
.footer ul a:hover{color:var(--berry)}
.footer-note{max-width:var(--wrap);margin:36px auto 0;padding-top:22px;border-top:1px solid var(--line);font-family:var(--display);font-style:italic;font-size:15px;color:var(--ink-mute);text-align:center}

/* ---------------- ARTICLE ---------------- */
.article-hero{background:linear-gradient(180deg,var(--paper) 0,var(--paper-2) 100%);border-bottom:1px solid var(--line)}
.article-hero-in{max-width:960px;margin:0 auto;padding:64px 5vw 34px;text-align:center}
.article-hero .kicker{color:var(--rose)}
.article-hero h1{font-size:clamp(34px,5.4vw,54px);margin:18px auto 18px;max-width:20ch}
.article-hero .standfirst{font-family:var(--display);font-style:italic;font-size:clamp(19px,2.4vw,23px);color:var(--rose);max-width:44ch;margin:0 auto 18px}
.article-byline{font-size:15px;letter-spacing:.06em;color:var(--ink-mute);text-transform:uppercase}
.article-figure-hero{max-width:1160px;margin:34px auto 0;padding:0 5vw}
.article-figure-hero .plate{aspect-ratio:21/8}

.article-body{max-width:var(--measure);margin:0 auto;padding:52px 5vw 20px;font-size:20px;line-height:1.85;color:var(--ink-soft)}
.article-body > p,.article-body > h2,.article-body > h3,.article-body > ul,.article-body > ol{max-width:none}
.article-body h2{font-size:clamp(25px,3.4vw,33px);color:var(--ink);margin:1.7em 0 .55em;line-height:1.2}
.article-body h2 .sec-no{display:block;font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--gold);margin-bottom:.35em}
.article-body h3{font-size:23px;color:var(--ink);margin:1.4em 0 .5em}
.article-body p{margin:0 0 1.15em}
.article-body a{border-bottom:1px solid rgba(110,36,56,.32)}
.article-body a:hover{border-color:var(--terracotta)}
.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:1.3em}
.article-body li{margin:0 0 .6em}
.article-body ul li::marker{color:var(--gold)}
.article-body strong{color:var(--ink)}
/* drop-cap on the lead */
.article-body .lead{font-size:23px;line-height:1.6;color:var(--ink);margin-bottom:1.1em}
.article-body .lead::first-letter{float:left;font-family:var(--display);font-size:4.4em;line-height:.78;padding:.05em .1em 0 0;color:var(--berry)}

/* end-notes */
.note-marker{font-family:var(--body);font-size:.62em;vertical-align:super;color:var(--berry);font-weight:700;padding:0 .12em;text-decoration:none}
.endnotes{max-width:var(--measure);margin:20px auto 0;padding:26px 5vw 0;border-top:1px solid var(--line)}
.endnotes h2{font-family:var(--display);font-size:24px;margin-bottom:14px}
.endnotes ol{margin:0;padding-left:1.3em;color:var(--ink-soft)}
.endnotes li{margin:0 0 .7em;font-size:16.5px;line-height:1.6}
.endnotes li::marker{color:var(--gold);font-family:var(--body)}
.endnotes .en-term{font-weight:700;color:var(--ink)}

/* related */
.related{max-width:1040px;margin:44px auto 0;padding:40px 5vw 0;border-top:1px solid var(--line)}
.related h2{font-family:var(--display);font-size:26px;text-align:center;margin-bottom:26px}
.related-links,.further-grid,.cat-list{list-style:none;margin:0;padding:0}
.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.related-links a,.further-grid a{display:flex;flex-direction:column;gap:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:22px 24px;min-height:118px;color:var(--ink);transition:border-color .2s,transform .2s}
.related-links a:hover,.further-grid a:hover{border-color:var(--gold);transform:translateY(-3px);color:var(--ink)}
.related-links .rl-cat{font-family:var(--body);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose)}
.related-links .rl-title{font-family:var(--display);font-size:21px;line-height:1.22}

/* article footer disclaimer */
.article-disclaimer{max-width:var(--measure);margin:34px auto 0;padding:0 5vw}
.article-disclaimer .note{margin:0}

/* ============================================================
   PALETTE COMPONENTS (styleguide + article components)
   ============================================================ */
.lead{font-family:var(--body)}
.pullquote{margin:2em 0;padding:0;border:0;text-align:center}
.pullquote p{font-family:var(--display);font-style:italic;font-size:clamp(24px,3.4vw,32px);line-height:1.34;color:var(--berry);margin:0;position:relative}
.pullquote p::before{content:"\201C";display:block;font-size:1.4em;color:var(--gold);line-height:.4;margin-bottom:.1em}

.blockquote{margin:2em 0;padding:20px 26px;border-left:3px solid var(--gold);background:var(--paper-2);border-radius:0 10px 10px 0}
.blockquote p{font-family:var(--display);font-style:italic;font-size:21px;line-height:1.5;color:var(--ink);margin:0 0 .4em}
.blockquote cite{font-family:var(--body);font-style:normal;font-size:15px;color:var(--ink-mute)}

.callout{margin:1.9em 0;padding:22px 26px;background:linear-gradient(180deg,var(--paper-2),var(--paper));border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.callout::before{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-bottom:14px}
.callout p{font-size:18px;line-height:1.6;color:var(--ink);margin:0}

.note{font-size:16px;line-height:1.6;color:var(--ink-mute);font-style:italic;background:var(--paper-3);border-radius:10px;padding:14px 18px;border:1px solid var(--line)}
.note strong{color:var(--berry);font-style:normal}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.9em 0;font-size:16.5px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.versus caption,.datatable caption{caption-side:top;text-align:left;font-family:var(--body);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose);padding:0 0 10px}
.versus th,.datatable th{background:var(--berry);color:#F6E5DF;font-family:var(--display);font-weight:400;font-size:17px;text-align:left;padding:13px 16px}
.versus td,.datatable td{padding:12px 16px;border-top:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.versus tbody tr:nth-child(even) td,.datatable tbody tr:nth-child(even) td{background:rgba(255,255,255,.35)}
.versus th:first-child{background:var(--berry-deep)}
.versus td:first-child{font-weight:700;color:var(--ink);background:var(--paper-3)}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:1.9em 0}
.statblock{display:flex;flex-direction:column;gap:6px;background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:22px 20px;text-align:center}
.stat-num{font-family:var(--display);font-size:clamp(30px,5vw,42px);line-height:1;color:var(--berry)}
.stat-label{font-size:14px;line-height:1.4;color:var(--ink-mute)}

/* timeline */
.timeline{list-style:none;margin:1.9em 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--gold),var(--blush))}
.timeline li{position:relative;padding:0 0 22px 40px}
.timeline li::before{content:"";position:absolute;left:4px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--berry);border:3px solid var(--paper)}
.timeline .t-when{display:block;font-family:var(--body);font-weight:700;font-size:14.5px;letter-spacing:.04em;color:var(--terracotta);margin-bottom:3px}
.timeline .t-what{display:block;font-size:17px;color:var(--ink-soft);line-height:1.5}

/* charts */
.chart{margin:1.9em 0}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-size:14.5px;color:var(--ink-mute);margin-top:12px;text-align:center;font-style:italic}
.chart .bar-rect{fill:var(--berry)}
.chart .bar-rect:nth-child(even){fill:var(--terracotta)}
.chart .bar-label{font-family:var(--body);font-size:13px;fill:var(--ink-soft)}
.chart .bar-val{font-family:var(--display);font-size:14px;fill:var(--ink)}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .line-path{fill:none;stroke:var(--berry);stroke-width:2.5}
.chart .line-area{fill:rgba(110,36,56,.10)}
.chart .line-dot{fill:var(--gold)}

/* figures / gallery */
.article-figure{margin:2em 0}
.article-figure .plate,.gallery .plate{aspect-ratio:16/9}
.article-figure figcaption,.gallery figcaption{font-size:14.5px;color:var(--ink-mute);margin-top:10px;font-style:italic}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:2em 0}
.gallery figure{margin:0}
.gallery .plate{aspect-ratio:4/5}

/* map (frame only — no drawn map) */
.map-figure{margin:2em 0}
.map-slot{aspect-ratio:16/9;border-radius:var(--radius);border:1px dashed var(--rose);background:repeating-linear-gradient(45deg,var(--paper-2),var(--paper-2) 12px,var(--paper-3) 12px,var(--paper-3) 24px);display:flex;align-items:center;justify-content:center;color:var(--ink-mute);font-style:italic;font-size:14px;text-align:center;padding:20px}
.map-figure figcaption{font-size:14.5px;color:var(--ink-mute);margin-top:10px;font-style:italic}

/* profile / org cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:2em 0}
.profile-card{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:24px}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:14px;background:var(--blush)}
.profile-card.no-photo::before{content:"";display:block;width:52px;height:52px;border-radius:50%;background:linear-gradient(150deg,var(--blush),var(--rose));margin-bottom:14px}
.profile-card h3{font-family:var(--display);font-size:22px;margin-bottom:2px}
.profile-card .p-role{font-family:var(--body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--rose);margin-bottom:10px}
.profile-card p{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:0 0 .7em}
.profile-card .p-links a,.profile-card .p-attr{font-size:14.5px}
.entity-ref{white-space:nowrap;border-bottom:1px solid var(--gold)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:2em 0}
.org-card{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:14px 18px;color:var(--ink)}
.org-card:hover{border-color:var(--gold);color:var(--ink)}
.org-logo{width:40px;height:40px;border-radius:8px;object-fit:contain;background:var(--paper-3)}
.org-card.no-logo .org-logo{background:linear-gradient(150deg,var(--blush),var(--rose))}
.org-name{font-family:var(--display);font-size:18px;display:block}
.org-host{font-size:13px;color:var(--ink-mute);display:block}

/* category / archive pages */
.cat-hero{background:linear-gradient(180deg,var(--berry),var(--berry-deep));color:#F6E5DF}
.cat-hero-in{max-width:960px;margin:0 auto;padding:70px 5vw 58px;text-align:center}
.cat-hero .kicker{color:var(--blush)}
.cat-hero h1{font-size:clamp(34px,5.4vw,54px);margin:16px 0 14px;color:#FBEFEA}
.cat-hero p{font-family:var(--display);font-style:italic;font-size:20px;color:#E8C9C2;max-width:46ch;margin:0 auto}
.cat-list{max-width:900px;margin:52px auto;padding:0 5vw;display:flex;flex-direction:column;gap:0}
.cat-list li{border-bottom:1px solid var(--line)}
.cat-list li:first-child{border-top:1px solid var(--line)}
.cat-list a{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:baseline;padding:26px 8px;color:var(--ink)}
.cat-list a:hover{color:var(--berry);background:var(--paper-2)}
.cat-list .cl-no{font-family:var(--display);font-size:20px;color:var(--gold)}
.cat-list .cl-title{font-family:var(--display);font-size:clamp(22px,3vw,28px);line-height:1.2}
.cat-list .cl-title small{display:block;font-family:var(--body);font-size:16px;color:var(--ink-mute);font-style:normal;margin-top:6px;line-height:1.5;max-width:60ch}
.cat-list .cl-meta{font-size:14px;color:var(--ink-mute);white-space:nowrap}

/* simple static content pages */
.page{max-width:var(--measure);margin:0 auto;padding:64px 5vw}
.page h1{font-size:clamp(32px,5vw,46px);margin-bottom:24px}
.page h2{font-size:26px;margin:1.6em 0 .5em}
.page p{font-size:18.5px;line-height:1.8;color:var(--ink-soft);margin:0 0 1.1em}
.page ul{font-size:17.5px;line-height:1.7;color:var(--ink-soft);padding-left:1.3em}
.page li{margin-bottom:.6em}
.page a{border-bottom:1px solid rgba(110,36,56,.3)}
.contact-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:28px 0;list-style:none;padding:0}
.contact-methods li{margin:0}
.contact-methods a,.contact-methods span{display:flex;align-items:flex-start;gap:14px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:18px 20px;color:var(--ink);height:100%;border-bottom:1px solid var(--line)}
.contact-methods .ic{flex:0 0 auto;color:var(--berry)}
.contact-methods .cm-label{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose);display:block;margin-bottom:3px}
.contact-methods .cm-val{font-size:16px;color:var(--ink-soft)}

/* 404 */
.err-page{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px 5vw}
.err-page .big{font-family:var(--display);font-style:italic;font-size:clamp(70px,16vw,150px);color:var(--blush);line-height:.9}
.err-page h1{font-size:32px;margin:14px 0 12px}
.err-page p{color:var(--ink-mute);max-width:40ch;margin:0 auto 26px}

/* styleguide scaffolding */
.sg-nav{position:sticky;top:0;z-index:40;background:var(--dark);color:#F1E1DB;padding:12px 5vw;display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.sg-nav a{color:var(--blush)}
.sg-section{max-width:960px;margin:0 auto;padding:44px 5vw;border-bottom:1px solid var(--line)}
.sg-section > h2.sg-title{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-bottom:22px}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.sw{border-radius:10px;border:1px solid var(--line);overflow:hidden;font-size:12px}
.sw .chip{height:64px}
.sw .meta{padding:8px 10px;background:var(--paper-2);color:var(--ink-soft)}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .footer-in{grid-template-columns:1fr 1fr}
  .surfaced-in{grid-template-columns:1fr;gap:26px}
  .surfaced .plate{aspect-ratio:16/10}
  .diary-list{grid-template-columns:repeat(2,1fr)}
  .fav-featured{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:18px}
  .menu-btn{display:block}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 5vw 20px;box-shadow:var(--shadow);max-height:0;overflow:hidden;transition:max-height .3s ease;padding-top:0;padding-bottom:0}
  .nav-toggle:checked ~ .nav{max-height:80vh;padding-top:10px;padding-bottom:20px}
  .nav > li{width:100%}
  .nav a.nav-link{padding:14px 8px;font-size:18px;border-bottom:1px solid var(--line-soft);border-radius:0}
  .submenu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;background:transparent;padding:0 0 8px 14px;min-width:0}
  .submenu a{font-size:16px}
  .article-body{font-size:18.5px}
  .diary-list{grid-template-columns:1fr}
  .diary-feature{aspect-ratio:3/2}
  .di-row a{grid-template-columns:38px 1fr;gap:16px;padding:20px 6px}
  .di-row a:hover{padding-left:6px}
  .di-thumb{display:none}
  .di-no{font-size:24px}
  .footer-in{grid-template-columns:1fr}
  .cat-list a{grid-template-columns:auto 1fr;gap:14px}
  .cat-list .cl-meta{grid-column:2;white-space:normal}
}
@media (max-width:420px){
  .hero-in{padding:60px 5vw 52px}
  .article-figure-hero .plate{aspect-ratio:4/3}
}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img{object-fit:contain!important}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.fav-roll .sponsor.sponsor img{box-sizing:border-box!important;height:38px!important;display:block!important;width:89px!important;max-width:100%!important;flex:none!important;padding:8px 12px!important;background:#121013!important;box-sizing:border-box!important}

/* op-roll-marks-bigger: operator: the bottom row of logos is way too small. Design's roll chip
   carried a 20px mark — half the featured tier's — in chips with room for more. 40px. */
/* ⚠️ HEIGHT ALONE DID NOTHING VISIBLE: sp-mark-frame pins width:89px with a 8px/12px inset, so
   raising the height to 40 left the artwork 65x24 — still tiny. The plate needs the width too,
   and a smaller inset: 160x56 with 6px/10px gives the artwork 140x44. Design also dims these
   marks to opacity .6; restored to full strength, the same call the operator made on ukcritic's
   grey-out and visitoxford's opacity:.5. */
.fav-roll .sponsor.sponsor img{height:56px!important;width:160px!important;max-width:none!important;max-height:none!important;padding:6px 10px!important;opacity:1!important}
.fav-roll .sponsor:hover img{opacity:1!important}

/* op-footer-compact: the footer printed 10 rows for 10 link(s) in
   2 list(s) — 904px at 390, 15% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 904 -> 692px (23% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(9px,2.5vw,36px)!important;row-gap:9px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1348px at 390, 24% of the whole page. Two columns bring it to
   892px (34% shorter). Checked before writing: no new overflow, smallest mark still
   114px wide, longest blurb 5 lines, tile heights 86-215px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.fav-featured, .fav-roll), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .fav-featured{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .fav-featured > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .fav-featured > * *{min-width:0!important;max-width:100%}
    .fav-featured img,.fav-featured svg{max-width:100%;height:auto}
  .fav-roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .fav-roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .fav-roll > * *{min-width:0!important;max-width:100%}
    .fav-roll img,.fav-roll svg{max-width:100%;height:auto}

}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 406px of tier across
   3 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .fav-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:66px!important;min-height:0!important;overflow:hidden!important}
}

/* op-odd-tier-lead: .fav-featured (3 tiles), .fav-roll (9 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .fav-featured:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
  .fav-roll:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-money-single: at 320 and 360 the two-column money grid gave each mark ~288px of tile while
   the mark itself is pinned wider, so logos were cut off (8 at 320). Operator's call: the
   problematic ones go to ONE LOGO PER ROW, only where two columns genuinely do not fit — so this
   stops at 400: at 390 the marks were still cut (8 of them, the mark pinned wider than its tile),
   so 390 goes single too; wider screens keep two columns. Structural only. */
@media (max-width:400px){
  .fav-roll{grid-template-columns:minmax(0,1fr)!important}
  .fav-roll > *{grid-column:auto!important}
}

/* op-article-width: the article column was capped at 607px (77 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body{--measure:min(85.711ch, 100%)!important}
}
@media (min-width:1600px){
  div.article-body{--measure:min(clamp(85.711ch, 65.694vw, calc(85.711ch * 1.2)), 100%)!important}
  div.article-body > :is(p:not([class])){font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (607px) and was left behind when the text went to 802px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  div.article-hero-in h1{max-width:min(681px, 100%)!important}
  p.standfirst{max-width:min(586px, 100%)!important}
}
@media (min-width:1600px){
  div.article-hero-in h1{max-width:min(calc(clamp(681px, 47.292vw, 817px) + 0px), 100%)!important}
  p.standfirst{max-width:min(calc(clamp(586px, 40.694vw, 703px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.di-thumb > img,
  div.surfaced-in > figure.plate > img,
  figure.article-figure > div.plate > img,
  figure.article-figure-hero > div.plate > img){height:auto}
/* op-img-dims:end */
.nav > li:last-child > .submenu{left:auto!important;right:0!important;transform:translateY(6px)!important}.nav > li:last-child:hover > .submenu,.nav > li:last-child:focus-within > .submenu{transform:translateY(0)!important}
@media (min-width:700px) and (max-width:919px){.fav-featured:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.fav-featured:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}.fav-roll.fav-roll > [data-partner][data-partner] img{background:transparent!important}
.fav-featured .sponsor-blurb{font-size:17px!important;line-height:1.45!important;color:#d6bfb9!important}