/* Kiss & Make-Up — site styles
   Palette DNA: soft blush base, berry-plum accent #7E3B54, soft gold #C9A15C
   Type: Petrona (display serif) + Karla (text sans) */

:root{
  --paper:#FBF1EC;
  --card:#FFF9F5;
  --white:#FFFFFF;
  --ink:#43242F;
  --ink-soft:#4A2C38;
  --muted:#7C5A66;
  --berry:#7E3B54;
  --berry-deep:#632C41;
  --gold:#C9A15C;
  --gold-soft:#EFD9A9;
  --line:#ECD5CB;
  --rose:#F4DED4;
  --plum-dark:#2E1522;
  --plum-mid:#4A2A3C;
  --footer:#43242F;
  --serif:"Petrona",Georgia,serif;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;
  --measure:70ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--berry);text-decoration:none}
a:hover{color:var(--berry-deep)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;color:var(--ink);text-wrap:pretty}
p{margin:0}

.wrap{max-width:1280px;margin:0 auto;padding-inline:clamp(18px,4vw,56px)}

/* ---------- top bar + header ---------- */
.topbar{background:var(--berry);color:#F6DFD6;text-align:center;font:500 13.5px/1.45 var(--sans);letter-spacing:.05em;padding:10px 18px}
.site-head{background:var(--paper);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px;position:relative}
.masthead{font:600 clamp(24px,2.6vw,32px)/1 var(--serif);color:var(--ink);white-space:nowrap}
.masthead em{font-style:italic;color:var(--gold)}
.masthead:hover{color:var(--ink)}

.nav-toggle{display:none}
.nav-burger{display:none}

.site-nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.site-nav>ul>li{position:relative}
.site-nav a[data-nav]{display:block;font:700 15px/1 var(--sans);letter-spacing:.03em;color:var(--ink);padding:12px 13px;border-radius:999px}
.site-nav a[data-nav]:hover{color:var(--berry);background:var(--rose)}
.site-nav a[data-nav].is-here{color:var(--berry);background:var(--rose)}
.site-nav .nav-browse a[data-nav]{color:var(--berry);border:1.5px solid var(--line);background:var(--card)}

/* dropdowns — CSS only, no dead hover gap: panel is flush to the item */
.nav-sub{list-style:none;margin:0;padding:12px 0 10px;position:absolute;top:100%;left:0;min-width:280px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(67,36,47,.14);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease,visibility .14s;z-index:60}
.nav-sub:empty{display:none}
.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-sub li a{display:block;font:600 15px/1.35 var(--sans);color:var(--ink-soft);padding:9px 20px}
.nav-sub li a:hover{color:var(--berry);background:var(--rose)}
.nav-sub .sub-all a{color:var(--berry);font-weight:700;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}

.head-aside{font:700 14px/1 var(--sans)}
.head-aside a{color:var(--muted)}
.head-aside a:hover{color:var(--berry)}

/* mobile nav */
@media (max-width:980px){
  .nav-burger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:10px;border:1.5px solid var(--line);border-radius:10px;background:var(--card)}
  .nav-burger span{display:block;width:22px;height:2.5px;background:var(--ink);border-radius:2px}
  .site-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 20px 40px rgba(67,36,47,.15);z-index:70;max-height:min(72vh,640px);overflow:auto}
  .nav-toggle:checked ~ .site-nav{display:block}
  .site-nav>ul{flex-direction:column;align-items:stretch;gap:0;padding:10px 0}
  .site-nav a[data-nav]{padding:14px clamp(18px,4vw,56px);border-radius:0;font-size:17px}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:3px solid var(--rose);border-radius:0;margin:0 0 6px clamp(18px,4vw,56px);padding:0 0 4px;min-width:0;background:transparent}
  .has-sub::after{display:none}
  .head-aside{display:none}
}

/* ---------- hero ---------- */
.hero{background:var(--paper)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:center;padding-top:clamp(34px,5vw,60px);padding-bottom:clamp(34px,5vw,60px)}
.kicker{font:700 13px/1.3 var(--sans);letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
.hero h1{font-size:clamp(34px,4.2vw,54px);line-height:1.08;margin-bottom:18px}
.hero h1 a{color:var(--ink)}
.hero h1 a:hover{color:var(--berry)}
.hero .dek{font-size:clamp(17px,1.5vw,19.5px);line-height:1.6;color:var(--muted);max-width:34em;margin-bottom:26px}
.hero-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--berry);color:var(--paper);font:700 15.5px/1 var(--sans);padding:16px 27px;border-radius:999px}
.btn:hover{background:var(--berry-deep);color:var(--paper)}
.link-underline{font:700 15px/1.4 var(--sans);color:var(--berry);border-bottom:2px solid var(--gold);padding-bottom:3px}
.hero-media{position:relative}
.hero-media img{width:100%;height:clamp(280px,32vw,430px);object-fit:cover;border-radius:18px}
.badge-tested{position:absolute;right:-10px;bottom:-12px;background:var(--gold);color:var(--ink);font:700 12.5px/1.35 var(--sans);letter-spacing:.08em;padding:12px 16px;border-radius:12px;box-shadow:0 8px 20px rgba(67,36,47,.18)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .badge-tested{right:8px;bottom:-12px}
}

/* ---------- section bands ---------- */
.band{padding-block:clamp(40px,5.5vw,64px)}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.band-head h2{font-size:clamp(26px,2.8vw,33px)}
.band-sub{font-size:17px;color:var(--muted);margin-bottom:30px;max-width:46em}
.band-more{font:700 15px/1 var(--sans);white-space:nowrap}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.a-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
.a-card:hover{color:var(--ink);box-shadow:0 12px 28px rgba(67,36,47,.10)}
.a-card figure{margin:0;aspect-ratio:16/9.5;overflow:hidden}
.a-card figure img{width:100%;height:100%;object-fit:cover}
.a-card .c-pad{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.c-tag{display:block;font:700 12px/1 var(--sans);letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.a-card h3{font-size:22px;line-height:1.25;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.a-card:hover h3{color:var(--berry)}
.c-dek{font-size:15.5px;line-height:1.55;color:var(--muted);margin-bottom:16px;flex:1}
.c-meta{margin-top:auto;font:700 14px/1.4 var(--sans);color:var(--berry)}
.c-meta .by{color:var(--muted);font-weight:600}
@media (max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.card-grid{grid-template-columns:1fr}}

/* CSS-only "more" expander */
.more-toggle{display:none}
.more-cards{display:none}
.more-toggle:checked ~ .card-grid .more-cards{display:flex}
.more-label{display:inline-block;margin-top:26px;font:700 15px/1 var(--sans);color:var(--berry);border:1.5px solid var(--berry);border-radius:999px;padding:13px 22px;cursor:pointer}
.more-label:hover{background:var(--berry);color:var(--paper)}
.more-toggle:checked ~ .more-label .when-closed{display:none}
.more-toggle:not(:checked) ~ .more-label .when-open{display:none}

/* ---------- routine (signature) ---------- */
.routine{background:var(--rose)}
.routine-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.routine-card{background:var(--card);border-radius:18px;padding:28px 30px}
.r-label{font:700 13px/1 var(--sans);letter-spacing:.16em;margin-bottom:20px;display:flex;align-items:center;gap:9px}
.r-label svg{flex:none}
.r-steps{display:grid;gap:18px;margin:0;padding:0;list-style:none}
.r-steps li{display:flex;gap:16px;align-items:flex-start}
.r-num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--berry);color:var(--paper);font:700 15px/34px var(--sans);text-align:center}
.r-num.gold{background:var(--gold);color:var(--ink)}
.r-steps b{display:block;font:700 16.5px/1.35 var(--sans);color:var(--ink)}
.r-steps span{display:block;font:400 15px/1.5 var(--sans);color:var(--muted);margin-top:2px}
.r-steps .r-num{flex:none;width:34px;height:34px;border-radius:50%;background:var(--berry);color:var(--paper);font:700 15px/34px var(--sans);text-align:center;margin-top:0}
.r-steps .r-num.gold{background:var(--gold);color:var(--ink)}
.skin-match{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 30px}
.skin-match>h3{font-size:21px;margin-bottom:18px}
.skin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.skin-cell{display:flex;flex-direction:column;background:var(--paper);border-radius:14px;padding:18px 20px;color:var(--ink)}
.skin-cell b{display:block;font:700 16.5px/1.2 var(--sans);margin-bottom:8px}
.skin-cell p{font-size:14.5px;line-height:1.5;color:var(--muted);flex:1}
.skin-cell .go{display:block;font:700 14px/1.3 var(--sans);color:var(--berry);margin-top:12px}
.skin-cell:hover{box-shadow:0 8px 18px rgba(67,36,47,.10)}
.skin-cell:hover .go{color:var(--berry-deep)}
@media (max-width:980px){.routine-cols{grid-template-columns:1fr}.skin-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.skin-grid{grid-template-columns:1fr}}

/* ---------- The Edit cards ---------- */
.edit-card .verdict{align-self:flex-start;font:700 12px/1.3 var(--sans);letter-spacing:.08em;color:var(--ink);background:var(--gold-soft);border-radius:999px;padding:8px 13px;margin-top:auto}
.edit-card .verdict.quiet{background:var(--rose)}
.edit-card .c-dek{flex:1}
.edit-card h3{min-height:2.5em}

/* ---------- sponsors (woven) ---------- */
.shelf-slot{padding-block:clamp(34px,4.5vw,52px)}
.sponsor{display:flex;align-items:center;gap:24px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 24px;color:var(--ink)}
.sponsor:hover{box-shadow:0 10px 24px rgba(67,36,47,.10);color:var(--ink)}
.sponsor img{flex:none;width:190px;height:76px;object-fit:contain;background:var(--plum-dark);border-radius:10px;padding:10px 14px}
.sponsor .sponsor-blurb{font:400 15.5px/1.55 var(--sans);color:var(--muted);display:block}
.sponsor .sponsor-blurb:empty{display:none}
.shelf-kicker{font:700 11.5px/1.3 var(--sans);letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.shelf-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shelf-row .sponsor{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
.shelf-row .sponsor img{width:100%;height:64px}
.shelf-row .sponsor .sponsor-blurb{font-size:14px}
@media (max-width:900px){.shelf-row{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.shelf-row{grid-template-columns:1fr}}
.backpages{background:var(--paper);border-top:1px solid var(--line)}
.backpages-head{max-width:56em;margin-bottom:28px}
.backpages-head h2{font-size:clamp(24px,2.4vw,30px);margin-bottom:8px}
.backpages-head p{font-size:16px;color:var(--muted)}
.backpages-list{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
.backpages-list .sponsor{padding:14px 18px;gap:18px}
.backpages-list .sponsor img{width:150px;height:60px}
@media (max-width:900px){.backpages-list{grid-template-columns:1fr}}
@media (max-width:620px){.sponsor{flex-direction:column;align-items:flex-start}.sponsor img{width:100%;height:84px}}

/* ---------- newsletter (inert) ---------- */
.touchup{background:var(--berry)}
.touchup .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:clamp(40px,5vw,58px)}
.touchup h2{color:var(--paper);font-size:clamp(26px,2.8vw,33px);margin-bottom:10px}
.touchup p{color:#E9C6CF;font-size:16.5px;line-height:1.55}
.touchup-row{display:flex;gap:12px}
.faux-field{flex:1;background:var(--paper);border-radius:999px;padding:16px 22px;font:400 15px/1.2 var(--sans);color:#A88793}
.faux-btn{background:var(--gold);color:var(--ink);border-radius:999px;padding:16px 26px;font:700 15px/1.2 var(--sans);white-space:nowrap}
.touchup .fine{font-size:13.5px;margin-top:12px;color:#D9A9B8}
@media (max-width:900px){.touchup .wrap{grid-template-columns:1fr}.touchup-row{flex-wrap:wrap}}

/* ---------- footer ---------- */
.site-foot{background:var(--footer);color:#B99AA6}
.site-foot .wrap{padding-block:44px;display:grid;grid-template-columns:1.2fr .8fr;gap:36px}
.foot-brand{font:600 22px/1 var(--serif);color:var(--paper);margin-bottom:12px}
.foot-brand em{color:var(--gold);font-style:italic}
.site-foot p{font-size:14px;line-height:1.65;max-width:36em}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px;align-content:flex-start;justify-content:flex-end}
.foot-nav a{font:700 14px/1.6 var(--sans);color:#E9C6CF}
.foot-nav a:hover{color:var(--gold-soft)}
.foot-legal{border-top:1px solid rgba(233,198,207,.18)}
.foot-legal .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-block:18px}
.foot-legal span{font-size:13.5px;color:#9A7A87}
@media (max-width:820px){.site-foot .wrap{grid-template-columns:1fr}.foot-nav{justify-content:flex-start}}

/* ---------- category pages ---------- */
.cat-hero{border-bottom:1px solid var(--line)}
.cat-hero .wrap{padding-block:clamp(36px,5vw,58px)}
.cat-hero h1{font-size:clamp(38px,5vw,58px);margin-bottom:12px}
.cat-hero .dek{font-size:clamp(17px,1.6vw,19.5px);color:var(--muted);max-width:38em}
.cat-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,44px);align-items:center;background:var(--rose);border-radius:20px;padding:clamp(22px,3vw,36px);margin-bottom:44px}
.cat-feature figure{margin:0}
.cat-feature img{width:100%;height:clamp(220px,26vw,320px);object-fit:cover;border-radius:14px}
.cat-feature h2{font-size:clamp(25px,2.8vw,33px);margin-bottom:12px}
.cat-feature h2 a{color:var(--ink)}
.cat-feature h2 a:hover{color:var(--berry)}
.cat-feature p{font-size:16.5px;line-height:1.6;color:var(--muted);margin-bottom:18px}
.cat-list{list-style:none;margin:0;padding:0}
@media (max-width:860px){.cat-feature{grid-template-columns:1fr}}

/* sections hub */
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.hub-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px 30px;color:var(--ink)}
.hub-card:hover{box-shadow:0 12px 28px rgba(67,36,47,.10);color:var(--ink)}
.hub-card h2{font-size:26px;margin-bottom:8px}
.hub-card:hover h2{color:var(--berry)}
.hub-card p{font-size:15.5px;color:var(--muted);line-height:1.55;flex:1}
.hub-card .go{margin-top:16px;font:700 14.5px/1 var(--sans);color:var(--berry)}
@media (max-width:760px){.hub-grid{grid-template-columns:1fr}}

/* ---------- article / post pages ---------- */
.post-hero{border-bottom:1px solid var(--line)}
.post-hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:center;padding-block:clamp(34px,5vw,56px)}
.post-hero h1{font-size:clamp(33px,4vw,52px);line-height:1.1;margin-bottom:16px}
.post-hero .dek{font-size:clamp(17.5px,1.6vw,20px);line-height:1.6;color:var(--muted);margin-bottom:20px;max-width:32em}
.post-meta{font:700 15px/1.5 var(--sans);color:var(--ink)}
.post-meta a{color:var(--berry)}
.post-meta .sep{color:var(--gold);padding:0 6px}
.post-hero figure{margin:0}
.post-hero img{width:100%;height:clamp(260px,30vw,420px);object-fit:cover;border-radius:18px}
.post-hero figcaption{font-size:14px;color:var(--muted);margin-top:10px;font-style:italic}
@media (max-width:900px){.post-hero .wrap{grid-template-columns:1fr}}

/* off-centre reading grid: prose sits left of centre, breakouts reach right */
.post-body{display:grid;grid-template-columns:minmax(clamp(18px,6vw,110px),1fr) min(var(--measure),calc(100% - 36px)) minmax(clamp(18px,10vw,340px),1.6fr);padding-block:clamp(34px,4.5vw,54px);counter-reset:sec}
.post-body>*{grid-column:2;min-width:0}
.post-body>.wide{grid-column:2/4;padding-right:clamp(0px,4vw,56px)}
.post-body>.full{grid-column:1/4}
.post-body p{font-size:19px;line-height:1.75;color:var(--ink-soft);margin-bottom:26px}
.post-body p b,.post-body p strong{color:var(--ink)}
.post-body ul,.post-body ol{font-size:19px;line-height:1.7;color:var(--ink-soft);margin:0 0 26px;padding-left:26px}
.post-body li{margin-bottom:10px}
.post-body h2{font-size:clamp(26px,2.6vw,31px);margin:26px 0 16px;counter-increment:sec}
.post-body h2::before{content:counter(sec,decimal-leading-zero);display:block;font:600 17px/1 var(--serif);color:var(--gold);letter-spacing:.1em;margin-bottom:8px}
.post-body h3{font-size:21px;margin:10px 0 12px}

.lead{font-size:clamp(20px,1.9vw,22.5px)!important;line-height:1.7!important;color:var(--ink)!important}
.lead::first-letter{font-family:var(--serif);font-weight:600;font-size:3.4em;line-height:.82;float:left;color:var(--berry);padding:6px 12px 0 0}

.pullquote{margin:38px 0;border:0;border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:26px 10px;text-align:center}
.pullquote p{font:500 italic clamp(23px,2.3vw,27px)/1.45 var(--serif);color:var(--berry);margin:0!important}
.blockquote{margin:38px 0;border-left:3px solid var(--gold);background:var(--card);border-radius:0 14px 14px 0;padding:22px 26px}
.blockquote p{font:500 italic 20px/1.6 var(--serif);color:var(--ink);margin:0 0 10px!important}
.blockquote cite{font:700 14px/1.4 var(--sans);font-style:normal;color:var(--muted)}

.callout{margin:34px 0;background:var(--rose);border-radius:16px;padding:24px 28px}
.callout::before{content:"Worth remembering";display:block;font:700 12px/1 var(--sans);letter-spacing:.16em;color:var(--berry);text-transform:uppercase;margin-bottom:10px}
.callout p{font-size:17.5px!important;line-height:1.65!important;color:var(--ink)!important;margin:0!important}
.note{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;font-size:16.5px!important;line-height:1.6!important;color:var(--muted)!important}
.note b{color:var(--ink)}

/* by-the-numbers */
.statrow{display:flex;flex-wrap:wrap;gap:16px;margin:38px 0}
.statrow::before{content:"By the numbers";flex:100% 0 0;font:700 12px/1 var(--sans);letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.statblock{flex:1 1 150px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.stat-num{font:600 clamp(30px,3vw,38px)/1 var(--serif);color:var(--berry)}
.stat-label{font:700 13.5px/1.4 var(--sans);color:var(--muted)}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:36px 0;font-size:16.5px;line-height:1.55;background:var(--card);border-radius:16px;overflow:hidden}
.versus caption,.datatable caption{caption-side:top;text-align:left;font:600 20px/1.3 var(--serif);color:var(--ink);padding:0 2px 14px}
.versus th,.datatable th{font:700 13px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-align:left;color:var(--paper);background:var(--berry);padding:13px 18px}
.versus td,.datatable td{padding:14px 18px;border-top:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.versus td:first-child,.datatable td:first-child{font-weight:700;color:var(--ink)}
.versus tr:nth-child(even) td{background:var(--paper)}
.table-scroll{overflow-x:auto;margin:36px 0}
.table-scroll .versus,.table-scroll .datatable{margin:0;min-width:520px}

/* timeline */
.timeline{list-style:none;margin:38px 0;padding:0 0 0 26px;border-left:2px solid var(--gold)}
.timeline li{position:relative;padding:0 0 24px 22px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-32px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--berry);border:2.5px solid var(--paper);box-shadow:0 0 0 2px var(--gold)}
.t-when{display:block;font:600 20px/1.3 var(--serif);color:var(--berry)}
.t-what{display:block;font-size:16.5px;line-height:1.6;color:var(--ink-soft);margin-top:4px}

/* charts */
.chart{margin:38px 0;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px 18px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:14.5px;color:var(--muted);margin-top:12px;font-style:italic}

/* figures */
.article-figure{margin:38px 0}
.article-figure img{width:100%;border-radius:16px;max-height:520px;object-fit:cover}
.article-figure figcaption{font-size:14.5px;color:var(--muted);margin-top:12px;font-style:italic}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:38px 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1/1.05;object-fit:cover;border-radius:12px}
.gallery figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}
@media (max-width:640px){.gallery{grid-template-columns:1fr 1fr}}

/* map frame (frame + caption only; slot stays empty for injection) */
.map-figure{margin:38px 0}
.map-figure .map-slot{background:var(--rose);border:1.5px dashed var(--gold);border-radius:16px;min-height:300px}
.map-figure figcaption{font-size:14.5px;color:var(--muted);margin-top:12px;font-style:italic}

/* profile / org / entity */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:38px 0}
.profile-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column}
.profile-card .p-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;margin-bottom:14px}
.profile-card.no-photo::before{content:"";width:44px;height:5px;border-radius:3px;background:var(--gold);margin-bottom:16px}
.profile-card h3{font-size:20px;margin:0 0 4px}
.profile-card .p-role{font:700 13px/1.45 var(--sans);letter-spacing:.06em;color:var(--berry);text-transform:uppercase;margin-bottom:10px}
.profile-card p{font-size:15px;line-height:1.6;color:var(--muted)}
.profile-card .p-links{margin-top:auto;padding-top:12px}
.profile-card .p-links a{font:700 14px/1.5 var(--sans);margin-right:14px}
.p-attr{font-size:12.5px;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:38px 0}
.org-card{display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--ink)}
.org-card:hover{box-shadow:0 8px 18px rgba(67,36,47,.10);color:var(--ink)}
.org-card .org-logo{width:44px;height:44px;object-fit:contain;background:var(--plum-dark);border-radius:9px;padding:6px;margin-bottom:8px}
.org-card.no-logo::before{content:"";width:34px;height:34px;border-radius:9px;background:var(--rose);border:1.5px solid var(--gold);margin-bottom:8px}
.org-card .org-name{font:700 16px/1.3 var(--sans);color:var(--ink)}
.org-card .org-host{font:600 13.5px/1.4 var(--sans);color:var(--muted)}
.entity-ref{font-weight:700;border-bottom:1.5px dotted var(--gold);white-space:nowrap}

/* further reading / related */
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:38px 0}
.further-grid a{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;font:600 17px/1.4 var(--serif);color:var(--ink)}
.further-grid a:hover{color:var(--berry);box-shadow:0 8px 18px rgba(67,36,47,.10)}
.further-grid a small{font:700 11.5px/1 var(--sans);letter-spacing:.16em;color:var(--gold);text-transform:uppercase}

.related{background:var(--rose)}
.related .wrap{padding-block:clamp(36px,4.5vw,52px)}
.related h2{font-size:clamp(23px,2.4vw,28px);margin-bottom:22px}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.related-links li{display:flex}
.related-links a{display:flex;flex-direction:column;gap:8px;flex:1;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;color:var(--ink)}
.related-links a:hover{color:var(--berry);box-shadow:0 10px 22px rgba(67,36,47,.10)}
.related-links .r-tag{font:700 11.5px/1 var(--sans);letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.related-links .r-title{font:600 19px/1.35 var(--serif)}
.related-links .r-mins{font:700 13.5px/1 var(--sans);color:var(--muted);margin-top:auto;padding-top:8px}

/* honesty note */
.honesty{margin:38px 0;background:var(--paper);border:1.5px solid var(--gold);border-radius:16px;padding:22px 26px}
.honesty::before{content:"Honesty note";display:block;font:700 12px/1 var(--sans);letter-spacing:.18em;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.honesty p{font-size:16px!important;line-height:1.6!important;color:var(--muted)!important;margin:0!important}

/* plain pages */
.page-plain .wrap{padding-block:clamp(40px,6vw,72px)}
.page-plain h1{font-size:clamp(36px,4.6vw,54px);margin-bottom:18px}
.page-plain .page-body{max-width:70ch}
.page-plain .page-body p{font-size:19px;line-height:1.75;color:var(--ink-soft);margin-bottom:24px}

/* styleguide helpers */
.sg-section{border-top:2px solid var(--line);padding-top:34px;margin-top:44px}
.sg-section>h2{font-size:26px;margin-bottom:6px}
.sg-note{font-size:15px;color:var(--muted);margin-bottom:24px}

@media (max-width:640px){
  .post-body{grid-template-columns:1fr}
  .post-body>*{grid-column:1;padding-inline:clamp(18px,5vw,28px)}
  .post-body>.wide,.post-body>.full{grid-column:1;padding-right:clamp(18px,5vw,28px)}
  .post-body p{font-size:18px}
  .statrow{gap:12px}
  .statblock{flex:1 1 130px}
}

.cat-list li{display:flex}
.cat-list .a-card{flex:1}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* op-money-columns: the supporters block ran one tile per row — 10 tiles,
   1679px at 390, 19% of the whole page. Two columns bring it to
   883px (47% shorter). Checked before writing: no new overflow, smallest mark still
   134px wide, longest blurb 3 lines, tile heights 171-171px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. Only the tier(s) that were one-per-row are touched (.shelf-row), 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){
  .shelf-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .shelf-row > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .shelf-row > * *{min-width:0!important;max-width:100%}
    .shelf-row img,.shelf-row svg{max-width:100%;height:auto}
  .shelf-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 748px (86 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(clamp(18px,6vw,110px),1fr) min(var(--measure),calc(100% - 36px)) minmax(clamp(18px,10vw,340px),1.6fr)" (declared in .post-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 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  div.post-body{grid-template-columns:minmax(clamp(18px,6vw,110px),1fr) min(885px, 100%) minmax(clamp(18px,10vw,340px),1.6fr)!important}
}
@media (min-width:1600px){
  div.post-body{grid-template-columns:minmax(clamp(18px,6vw,110px),1fr) min(clamp(885px, 61.458vw, 1062px), 100%) minmax(clamp(18px,10vw,340px),1.6fr)!important}
  div.post-body > :is(p:not([class])), div.post-body > :is(ol.timeline.wide) > li{font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .shelf-row 5 rows at 1024). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .shelf-row .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.a-card > figure > img,
  a.a-card.edit-card > figure > img,
  a.a-card.more-cards > figure > img,
  div.cat-feature > figure > img,
  div.wrap > div.hero-media > img,
  div.wrap > figure > img){height:auto}
/* op-img-dims:end */
@media (min-width:910px) and (max-width:1439px){.shelf-row.shelf-row:has(> [data-partner]){grid-template-columns:repeat(auto-fit,minmax(min(208px,calc(50% - 7px)),1fr))!important;justify-content:stretch!important}.shelf-row.shelf-row > [data-partner]{width:auto!important;max-width:none!important}}
@media (min-width:641px) and (max-width:899px){.post-body.post-body{grid-template-columns:20px minmax(0,1fr) 20px!important}}