/* Flair — mamasgotflair.com · design tokens + component system */
:root{
  --paper:#FBF5ED; --card:#FFFDF9; --ink:#26181F; --muted:#5C4A52; --meta:#7A6570;
  --berry:#9E2B5E; --berry-deep:#7A2148; --gold:#C9973B;
  --dark:#26181F; --cream:#F6E9DA; --dust:#B99BA8;
  --hairline:rgba(38,24,31,.22); --hairline-soft:rgba(38,24,31,.13);
  --acc-beauty:#9E2B5E; --acc-style:#7A2148; --acc-love:#B0407A; --acc-home:#8C6A3B; --acc-opinion:#3E3A44;
  --serif:'Bodoni Moda',Georgia,serif; --display:'Newsreader',Georgia,serif; --sans:'Hanken Grotesk',system-ui,sans-serif;
}
*{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:19px;line-height:1.65;text-rendering:optimizeLegibility}
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(--display);font-weight:700;letter-spacing:-.005em;line-height:1.1;margin:0;text-wrap:pretty}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:clamp(20px,4vw,56px)}

/* ---------- accents ---------- */
.acc-beauty{--acc:var(--acc-beauty)} .acc-style{--acc:var(--acc-style)} .acc-love{--acc:var(--acc-love)} .acc-home{--acc:var(--acc-home)} .acc-opinion{--acc:var(--acc-opinion)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--acc,var(--berry))}
.kicker-gold{font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.meta{font-size:15px;font-weight:600;color:var(--meta)}
.meta .sep{color:var(--gold);padding:0 8px}

/* ---------- header / footer ---------- */
.berrybar{height:6px;background:var(--berry)}
.topbar{display:flex;justify-content:space-between;gap:16px;padding-block:14px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);flex-wrap:wrap}
.masthead{text-align:center;border-bottom:1px solid var(--hairline)}
.masthead .wordmark{font-family:var(--serif);font-style:italic;font-weight:800;font-size:clamp(64px,9vw,104px);line-height:1;letter-spacing:-.02em;color:var(--ink);display:inline-block}
.wordmark .dot{color:var(--berry)}
.masthead .tagline{font-size:13px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--meta);margin:8px 0 18px}
.mainnav{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 36px;padding-block:15px;border-top:1px solid var(--hairline);font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.mainnav a{color:var(--ink)}
.mainnav a:hover,.mainnav a[aria-current]{color:var(--berry)}
.mainnav a.nav-opinion{color:var(--berry)}
.sitebar{display:flex;justify-content:space-between;align-items:center;gap:14px 28px;padding-block:16px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.sitebar .wordmark{font-family:var(--serif);font-style:italic;font-weight:800;font-size:34px;color:var(--ink)}
.sitebar nav{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sitebar nav a{color:var(--ink)}
.sitebar nav a:hover,.sitebar nav a[aria-current]{color:var(--berry)}
.sitefoot{background:var(--dark);color:var(--dust);margin-top:64px}
.sitefoot .inner{display:flex;justify-content:space-between;align-items:center;gap:20px 36px;padding-block:38px;flex-wrap:wrap}
.sitefoot .wordmark{font-family:var(--serif);font-style:italic;font-weight:800;font-size:34px;color:var(--cream)}
.sitefoot .motto{font-size:15px;line-height:1.6;max-width:44ch}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sitefoot nav a{color:var(--cream)}
.sitefoot nav a:hover{color:var(--gold)}

/* ---------- homepage rooms ---------- */
.hero{display:grid;grid-template-columns:1fr 600px;gap:60px;align-items:center;padding-block:56px 64px}
.hero h1{font-weight:700;font-size:clamp(40px,5vw,66px);letter-spacing:-.01em;margin:18px 0 22px}
.hero .dek{font-size:21px;line-height:1.6;color:var(--muted);margin:0 0 26px;max-width:52ch}
.hero-art{box-shadow:18px 18px 0 var(--berry)}
.hero-art img{width:100%;height:470px;object-fit:cover}
.readlink{display:inline-block;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:3px solid var(--berry);padding-bottom:6px}
.readlink:hover{color:var(--berry)}
.roomhead{display:flex;align-items:baseline;gap:20px;border-top:1px solid var(--hairline);padding-top:28px;margin-bottom:28px}
.roomhead h2{font-family:var(--sans);font-weight:800;font-size:27px;letter-spacing:-.01em}
.roomhead .rule{flex:1;height:1px;background:var(--hairline-soft)}
.roomhead .all{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* cards — even height, clamped titles */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch}
.story-card{display:flex;flex-direction:column;border:1px solid var(--hairline);background:var(--card)}
.story-card .art{aspect-ratio:3/2;overflow:hidden}
.story-card .art img{width:100%;height:100%;object-fit:cover}
.story-card .body{display:flex;flex-direction:column;flex:1;padding:24px 24px 20px}
.story-card h3{font-weight:700;font-size:26px;line-height:1.15;margin:10px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.3em}
.story-card h3 a{color:var(--ink)}
.story-card h3 a:hover{color:var(--berry)}
.story-card .dek{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 16px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.story-card .foot{font-size:14px;font-weight:600;color:var(--meta);border-top:1px solid var(--hairline-soft);padding-top:12px}
/* CSS-only expander */
.more-box{display:none}
.more-grid{display:none;margin-top:32px}
.more-box:checked ~ .more-grid{display:grid}
.more-label{display:inline-block;margin-top:30px;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1px solid var(--ink);padding:12px 26px;cursor:pointer}
.more-label:hover{background:var(--ink);color:var(--cream)}
.more-box:checked ~ .more-label{display:none}

/* honest take band */
.take-band{background:var(--dark);color:var(--cream);margin-top:52px}
.take-band .inner{padding-block:52px}
.take-band .bandhead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:34px;flex-wrap:wrap}
.take-band .bandhead .kicker-gold{color:var(--gold)}
.take-band .bandhead a{color:var(--cream);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.take-band .bandhead a:hover{color:var(--gold)}
.takes{display:grid;grid-template-columns:1fr 1fr;gap:44px 60px}
.take .q{font-family:var(--serif);font-size:60px;line-height:.4;color:var(--gold)}
.take p{font-family:var(--serif);font-style:italic;font-size:27px;line-height:1.35;margin:0 0 16px}
.take .who{font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}

/* the edit */
.edit-room{padding-block:52px 8px}
.edit-caps{display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:stretch;margin-top:26px}
.capsule{border:1px solid var(--hairline);background:var(--card);padding:32px 36px}
.capsule .cap-title{font-family:var(--sans);font-weight:800;font-size:23px;margin-bottom:4px}
.capsule .cap-dek{font-size:15.5px;color:var(--meta);margin:0 0 22px}
.pick{display:flex;gap:16px;align-items:baseline;padding-block:14px;border-top:1px solid var(--hairline-soft)}
.pick .no{font-family:var(--serif);font-size:24px;color:var(--gold);min-width:44px}
.pick .name{font-size:17px;font-weight:800}
.pick .verdict{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--berry);margin:2px 0 0}

/* sponsors — "The Company We Keep" (featured) + "The Back of the Book" (regulars) */
.sponsor{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--dark);padding:26px 22px;min-height:120px;text-align:center}
.sponsor img{max-height:54px;width:auto;max-width:80%;object-fit:contain}
.sponsor:hover{outline:2px solid var(--gold);outline-offset:2px}
.sponsor-blurb{font-size:14.5px;line-height:1.5;color:var(--dust);min-height:1em}
.sponsor-blurb:empty{display:none}
.company-room{padding-block:52px 12px}
.company-room .roomdek{font-size:16px;color:var(--meta);margin:-18px 0 26px}
.company-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.backpages{border-top:1px solid var(--hairline);padding-block:34px 10px}
.backpages .bp-head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.backpages .bp-title{font-family:var(--sans);font-weight:800;font-size:19px}
.backpages .bp-dek{font-size:14.5px;color:var(--meta)}
.backpages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.backpages .sponsor{min-height:0;padding:18px 16px;align-items:flex-start;text-align:left}
.backpages .sponsor img{max-height:40px;align-self:flex-start}
.backpages .sponsor-blurb{display:block;text-align:left}

/* inert newsletter strip */
.news-strip{border:1px solid var(--hairline);margin-block:44px 0;padding:26px 30px;display:flex;justify-content:space-between;align-items:center;gap:16px 28px;flex-wrap:wrap}
.news-strip .n-title{font-family:var(--sans);font-weight:800;font-size:21px}
.news-strip .n-dek{font-size:15.5px;color:var(--meta)}
.news-strip .n-mark{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* ---------- section index / archive ---------- */
.cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-block:52px 36px;flex-wrap:wrap}
.cat-head h1{font-weight:800;font-size:clamp(48px,7.5vw,96px);line-height:.95;border-bottom:8px solid var(--acc,var(--berry));padding-bottom:16px}
.cat-head .cat-blurb{max-width:440px;padding-bottom:10px}
.cat-head .cat-blurb p{font-size:19px;line-height:1.55;color:var(--muted);margin:0 0 10px}
.cat-feature{display:grid;grid-template-columns:560px 1fr;gap:52px;align-items:center;padding-bottom:52px}
.cat-feature .art{box-shadow:14px 14px 0 var(--gold)}
.cat-feature .art img{width:100%;height:390px;object-fit:cover}
.cat-feature h2{font-weight:700;font-size:clamp(30px,3.4vw,44px);margin:14px 0 16px}
.cat-feature .dek{font-size:18px;line-height:1.6;color:var(--muted);margin:0 0 20px;max-width:52ch}
ul.cat-list{list-style:none;margin:0;padding:0}
ul.cat-list li{border-top:1px solid var(--hairline);padding-block:26px;display:grid;grid-template-columns:1fr 200px;gap:28px;align-items:center}
ul.cat-list li:last-child{border-bottom:1px solid var(--hairline)}
ul.cat-list h3{font-weight:700;font-size:28px;line-height:1.12;margin:8px 0}
ul.cat-list h3 a{color:var(--ink)}
ul.cat-list h3 a:hover{color:var(--berry)}
ul.cat-list .dek{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 10px}
ul.cat-list .thumb img{width:100%;height:126px;object-fit:cover}

/* ---------- article ---------- */
.post-head{padding-block:52px 34px;border-bottom:1px solid var(--hairline)}
.post-head .kicker{margin-bottom:16px;display:inline-block}
.post-head h1{font-weight:700;font-size:clamp(38px,4.6vw,62px);letter-spacing:-.01em;max-width:22ch}
.post-head .lead{margin-top:20px}
.post-head .byline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:24px;font-size:15px;font-weight:600;color:var(--meta)}
.lead{font-size:23px;line-height:1.55;color:var(--muted);font-weight:400;max-width:56ch;margin:0}
.post-hero{margin:0;padding-block:36px 0}
.post-hero img{width:100%;max-height:560px;object-fit:cover}
.post-hero figcaption{font-size:15px;font-style:italic;color:var(--meta);text-align:right;padding-top:10px}
.post-grid{display:grid;grid-template-columns:minmax(170px,230px) minmax(0,1fr);gap:24px clamp(36px,5vw,76px);padding-block:44px 0;align-items:start}
.post-rail{font-size:15px;color:var(--meta);border-top:3px solid var(--acc,var(--berry));padding-top:16px;display:flex;flex-direction:column;gap:14px}
.post-rail .r-label{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--acc,var(--berry))}
.post-rail .r-item{line-height:1.5}
.post-rail .r-item strong{color:var(--ink)}
.post-body{max-width:72ch;padding-inline:0}
.post-body p{font-size:20.5px;line-height:1.75;color:#372A31;margin:0 0 28px}
.post-body h2{font-size:32px;margin:44px 0 18px}
.post-body h2 .sec-no{font-family:var(--serif);font-style:italic;color:var(--gold);font-weight:600;margin-right:14px}
.post-body h3{font-size:24px;margin:34px 0 14px}
.post-body a{border-bottom:2px solid rgba(158,43,94,.35)}
.post-body a:hover{border-bottom-color:var(--berry)}
.post-body em{font-family:inherit}
.dropcap::first-letter{float:left;font-family:var(--serif);font-weight:800;font-size:76px;line-height:.78;color:var(--berry);padding:8px 12px 0 0}
.endmark::after{content:"✦";color:var(--gold);margin-left:10px;font-size:.8em}
/* endnote markers + notes */
.enref{font-family:var(--sans);font-size:.62em;font-weight:800;color:var(--berry);vertical-align:super;margin-left:2px;border-bottom:none!important}
.endnotes{border-top:1px solid var(--ink);margin-top:52px;padding-top:22px}
.endnotes .en-title{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--berry);margin-bottom:16px}
.endnotes ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.endnotes li{font-size:16.5px;line-height:1.6;color:var(--muted)}
.endnotes li::marker{font-weight:800;color:var(--gold)}
.endnotes li strong{color:var(--ink)}

/* ---------- palette components ---------- */
.pullquote{margin:40px 0;padding:26px 0;border:0;text-align:center}
.pullquote::before{content:"✦ ✦ ✦";display:block;color:var(--gold);font-size:16px;letter-spacing:.4em;padding-bottom:14px}
.pullquote p{font-family:var(--serif);font-style:italic;font-size:31px;line-height:1.3;color:var(--berry);margin:0}
.blockquote{margin:36px 0;padding:6px 0 6px 28px;border-left:4px solid var(--gold)}
.blockquote p{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.45;color:var(--ink);margin:0 0 10px}
.blockquote cite{font-style:normal;font-size:14.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
.callout{background:var(--card);border:1px solid var(--ink);padding:26px 30px;margin:36px 0}
.callout::before{content:"The takeaway";display:block;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--berry);margin-bottom:10px}
.callout p{font-size:18.5px!important;line-height:1.6!important;margin:0!important}
.note{background:none;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);padding:16px 4px;margin:32px 0;font-size:17px!important;line-height:1.6!important;color:var(--muted)!important}
.note::before{content:"Note — ";font-weight:800;letter-spacing:.06em;color:var(--gold)}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:36px 0;font-size:16.5px}
.versus caption,.datatable caption{caption-side:top;text-align:left;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--berry);padding-bottom:12px}
.versus th,.datatable th{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:left;color:var(--ink);border-bottom:2px solid var(--ink);padding:10px 14px 10px 0}
.versus td,.datatable td{border-bottom:1px solid var(--hairline-soft);padding:12px 14px 12px 0;vertical-align:top;color:var(--muted)}
.versus td:first-child,.datatable td:first-child{font-weight:700;color:var(--ink)}
.versus thead th:nth-child(2){color:var(--berry)}
.versus thead th:nth-child(3){color:var(--meta)}

/* stats */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:36px 0}
.statblock{border:1px solid var(--hairline);background:var(--card);padding:22px 20px;display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--serif);font-weight:700;font-size:40px;line-height:1;color:var(--berry)}
.stat-label{font-size:14.5px;line-height:1.45;color:var(--meta);font-weight:600}

/* timeline */
.timeline{list-style:none;margin:36px 0;padding:0;border-left:3px solid var(--gold)}
.timeline li{position:relative;padding:0 0 26px 28px}
.timeline li:last-child{padding-bottom:4px}
.timeline li::before{content:"";position:absolute;left:-8px;top:8px;width:13px;height:13px;background:var(--paper);border:3px solid var(--berry);border-radius:50%}
.t-when{display:block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--berry);margin-bottom:4px;overflow-wrap:break-word}
.t-what{display:block;font-size:17.5px;line-height:1.55;color:var(--muted)}

/* charts */
.chart{margin:36px 0;padding:0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-size:15px;font-style:italic;color:var(--meta);padding-top:10px;text-align:right}
.chart .c-bar{fill:var(--berry)}
.chart .c-bar.alt{fill:var(--gold)}
.chart .c-line{fill:none;stroke:var(--berry);stroke-width:3}
.chart .c-grid{stroke:rgba(38,24,31,.15);stroke-width:1}
.chart text{font-family:var(--sans);font-size:13px;fill:var(--meta)}
.chart text.c-val{font-weight:800;fill:var(--ink)}

/* figures / media */
.article-figure{margin:36px 0}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption{font-size:15px;font-style:italic;color:var(--meta);padding-top:10px;text-align:right}
.article-figure.breakout{margin-inline:calc(-1*clamp(0px,6vw,120px))}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:36px 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-size:14px;font-style:italic;color:var(--meta);padding-top:8px}
.map-figure{margin:36px 0;border:1px solid var(--hairline);background:var(--card);padding:14px}
.map-slot{min-height:320px;background:repeating-linear-gradient(45deg,rgba(38,24,31,.04) 0 12px,transparent 12px 24px);display:flex;align-items:center;justify-content:center}
.map-slot::after{content:"Map appears here";font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--meta)}
.map-figure figcaption{font-size:15px;font-style:italic;color:var(--meta);padding:12px 6px 4px}

/* profile / org / refs */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:36px 0}
.profile-card{border:1px solid var(--hairline);background:var(--card);padding:26px}
.profile-card .p-photo{width:84px;height:84px;border-radius:50%;object-fit:cover;margin-bottom:14px}
.profile-card.no-photo::before{content:"✦";display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:var(--dark);color:var(--gold);font-size:24px;margin-bottom:14px}
.profile-card h3{font-size:23px;margin-bottom:2px}
.profile-card .p-role{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--berry);margin:4px 0 12px}
.profile-card p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 10px}
.profile-card .p-links a{font-weight:700;font-size:15px;margin-right:14px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:36px 0}
.org-card{display:flex;align-items:center;gap:14px;border:1px solid var(--hairline);background:var(--card);padding:16px 18px;color:var(--ink)}
.org-card:hover{border-color:var(--berry)}
.org-logo{width:44px;height:44px;object-fit:contain;background:var(--dark);padding:6px}
.org-card.no-logo::before{content:"❦";display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--dark);color:var(--gold);font-size:18px;flex:none}
.org-name{font-weight:800;font-size:16px;display:block}
.org-host{font-size:13.5px;color:var(--meta);display:block}
.org-card span{display:flex;flex-direction:column}
.entity-ref{font-weight:700;border-bottom:2px solid rgba(201,151,59,.5)}
.entity-ref:hover{border-bottom-color:var(--gold)}

/* related / further */
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin:26px 0}
.further-grid a{border:1px solid var(--hairline);background:var(--card);padding:20px 22px;font-weight:800;font-size:18px;line-height:1.35;color:var(--ink)}
.further-grid a:hover{color:var(--berry);border-color:var(--berry)}
.related{border-top:1px solid var(--hairline);margin-top:56px;padding-top:30px}
.related .rel-title{font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
ul.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
ul.related-links .r-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--berry);margin-bottom:6px}
ul.related-links a{font-weight:800;font-size:19px;line-height:1.35;color:var(--ink)}
ul.related-links a:hover{color:var(--berry)}

/* ---------- utility pages ---------- */
.page-plain{max-width:820px;padding-block:56px 20px}
.page-plain h1{font-weight:700;font-size:clamp(40px,5vw,58px);margin-bottom:22px}
.page-plain p{font-size:20px;line-height:1.7;color:#372A31;margin:0 0 24px}
.contact-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;margin:36px 0}
.way{border:1px solid var(--hairline);background:var(--card);padding:26px}
.way svg{width:28px;height:28px;color:var(--berry);margin-bottom:12px}
.way h3{font-size:22px;margin-bottom:8px}
.way p{font-size:16px!important;line-height:1.55!important;color:var(--muted)!important;margin:0 0 10px!important}
.way a{font-weight:700}
.err-hero{text-align:center;padding-block:80px 60px}
.err-hero .err-code{font-family:var(--serif);font-style:italic;font-weight:800;font-size:clamp(100px,18vw,200px);line-height:1;color:var(--berry)}
.err-hero h1{font-size:clamp(30px,4vw,44px);margin:10px 0 14px}
.err-hero p{font-size:19px;color:var(--muted);margin:0 0 30px}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .hero{grid-template-columns:1fr;gap:36px}
  .hero-art{box-shadow:12px 12px 0 var(--berry)}
  .hero-art img{height:auto;aspect-ratio:3/2}
  .cat-feature{grid-template-columns:1fr;gap:30px}
  .cat-feature .art img{height:auto;aspect-ratio:3/2}
  .cardgrid,.more-grid{grid-template-columns:1fr 1fr}
  .company-grid{grid-template-columns:1fr 1fr}
  .backpages-grid{grid-template-columns:repeat(4,1fr)}
  .edit-caps{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr;gap:34px}
  .post-rail{flex-direction:row;flex-wrap:wrap;gap:10px 28px;border-top-width:3px}
}
@media (max-width:680px){
  body{font-size:18px}
  .cardgrid,.more-grid{grid-template-columns:1fr}
  .takes{grid-template-columns:1fr;gap:34px}
  .backpages-grid{grid-template-columns:1fr 1fr}
  .company-grid{grid-template-columns:1fr}
  ul.cat-list li{grid-template-columns:1fr}
  ul.cat-list .thumb{order:-1}
  ul.cat-list .thumb img{height:auto;aspect-ratio:3/2}
  .post-body p{font-size:19px}
  .lead{font-size:20px}
  .article-figure.breakout{margin-inline:0}
  .statrow{grid-template-columns:1fr 1fr}
  .sitefoot .inner{flex-direction:column;text-align:center;align-items:center}
}

/* 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}

/* 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. */
.company-grid .sponsor .sp-logo.sp-logo{padding:8px 12px!important;box-sizing:border-box!important;height:41px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.company-grid .sponsor .sp-logo.sp-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.company-grid .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.backpages-grid .sponsor .sp-logo.sp-logo{padding:8px 12px!important;box-sizing:border-box!important;height:38px!important;width:100%!important;display:flex!important;align-items:center!important;justify-content:center!important}
.backpages-grid .sponsor .sp-logo.sp-logo img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0!important;padding:0!important;background:transparent!important;display:block!important;max-width:none!important;max-height:none!important}
.backpages-grid .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}

/* op-backpages-marks-larger: operator asked for bigger logos in the back-of-the-book rows. The
   plate there is 38px against the company room's 41px, in tiles that have the room for more.
   ⚠️ .backpages .sponsor img carries max-height:40px, which caps the image's height:100% whatever
   the !important says — the cap has to be released or the plate grows and the artwork does not. */
.backpages-grid .sponsor .sp-logo.sp-logo{height:64px!important}
.backpages-grid .sponsor .sp-logo.sp-logo img{max-height:none!important}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   1565px at 390, 19% of the whole page. Two columns bring it to
   1264px (19% shorter). Checked before writing: no new overflow, smallest mark still
   100px wide, longest blurb 5 lines, tile heights 168-219px.
   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 (.company-grid), 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){
  .company-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:26px!important}
    .company-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .company-grid > * *{min-width:0!important;max-width:100%}
    .company-grid img,.company-grid svg{max-width:100%;height:auto}
  .company-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 901px of tier across
   8 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){
  .backpages-grid .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-article-width: the article column was capped at 766px (85 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 72ch (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. The layout has no room to grow above 1600, so this width holds there. Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  main.acc-style article.post-body{max-width:min(922px, 100%)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .backpages-grid 5 rows at 900). 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){
  .backpages-grid .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-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; letter-spacing: -0.005em; line-height: 1.1; margin: 0px; text-wrap: pretty;}
.profile-card h2:where(.rt-h3){font-size: 23px; margin-bottom: 2px;}
.way h2:where(.rt-h3){font-size: 22px; margin-bottom: 8px;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.acc-beauty.story-card > a.art > img,
  article.acc-home.story-card > a.art > img,
  article.acc-love.story-card > a.art > img,
  article.acc-opinion.story-card > a.art > img,
  article.acc-style.story-card > a.art > img,
  div.cat-feature > a.art > img,
  li > a.thumb > img,
  main.acc-beauty.wrap > figure.post-hero > img,
  main.acc-home.wrap > figure.post-hero > img,
  main.acc-love.wrap > figure.post-hero > img,
  main.acc-opinion.wrap > figure.post-hero > img,
  main.acc-style.wrap > figure.post-hero > img,
  section.acc-style.hero.wrap > a.hero-art > img){height:auto}
/* op-img-dims:end */