/* ============================================================
   The Daily Blend — Bowl & Blend direction
   Playful, breakfast-forward. Berry / mango / green on cream.
   ============================================================ */


:root{
  --paper:#FFF4E4;
  --paper-2:#FBE8D0;
  --paper-3:#F6DcBd;
  --card:#FFFFFF;
  --ink:#33202A;
  --ink-soft:#715662;
  --ink-faint:#9a8390;
  --line:rgba(51,32,42,.12);
  --berry:#C43A6A;
  --mango:#E08A2C;
  --green:#6AA84B;
  --terra:#B4552E;
  --brown:#8C6A3B;
  --dark:#2A141C;

  --display:'Fredoka',system-ui,sans-serif;
  --body:'Nunito',system-ui,sans-serif;

  --r-lg:30px;
  --r-md:22px;
  --r-sm:14px;
  --pill:999px;

  --shadow:0 24px 50px -34px rgba(51,32,42,.5);
  --shadow-sm:0 12px 30px -22px rgba(51,32,42,.55);

  --wrap:1240px;
  --gutter:clamp(20px,5vw,56px);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:var(--berry);text-decoration:none;}
a:hover{color:var(--terra);}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.05;margin:0;color:var(--ink);}
p{margin:0 0 1em;text-wrap:pretty;}
::selection{background:var(--berry);color:#fff;}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}
.wrap-wide{max-width:1440px;margin:0 auto;padding-inline:var(--gutter);}
.icon{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.15em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:var(--pill);border:0;cursor:pointer;
  background:var(--berry);color:#fff;transition:transform .15s ease,background .15s ease;
}
.btn:hover{background:var(--terra);color:#fff;transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);}
.btn.ghost:hover{background:var(--ink);color:var(--paper);}
.btn.on-dark{background:#fff;color:var(--berry);}
.btn.on-dark:hover{background:var(--paper);color:var(--terra);}

/* kickers / tags */
.kicker{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--berry);}
.tag{
  display:inline-flex;align-items:center;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.03em;
  padding:6px 13px;border-radius:var(--pill);color:#fff;background:var(--berry);white-space:nowrap;
}
.tag.smoothies{background:var(--berry);}
.tag.bowls{background:var(--mango);}
.tag.juices{background:var(--green);}
.tag.ingredients{background:var(--terra);}
.tag.everyday{background:var(--brown);}

/* recipe meta (time · servings · ingredients) */
.rmeta{display:flex;flex-wrap:wrap;gap:16px;font-family:var(--body);font-weight:700;font-size:15px;color:var(--ink-soft);list-style:none;margin:0;padding:0;}
.rmeta li{display:inline-flex;align-items:center;gap:7px;}
.rmeta .icon{color:var(--berry);}

/* =================== HEADER / NAV =================== */
.masthead{position:sticky;top:0;z-index:50;background:rgba(255,244,228,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.masthead .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:25px;color:var(--ink);}
.brand:hover{color:var(--ink);}
.brand .mark{width:40px;height:40px;border-radius:13px;background:var(--mango);color:#fff;display:grid;place-items:center;font-size:22px;transform:rotate(-6deg);}
.brand b{color:var(--berry);font-weight:700;}
.nav{display:flex;align-items:center;gap:4px;font-family:var(--display);font-weight:500;font-size:16.5px;}
.nav a{color:var(--ink);padding:9px 15px;border-radius:var(--pill);transition:background .15s;}
.nav a:hover{background:var(--paper-2);color:var(--ink);}
.nav a[aria-current="page"]{background:var(--berry);color:#fff;}
.nav-toggle,.nav-toggle-label{display:none;}

@media(max-width:900px){
  .nav-toggle-label{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--paper-2);cursor:pointer;}
  .nav-toggle-label .icon{width:26px;height:26px;}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:2px;background:var(--paper);border-bottom:1px solid var(--line);padding:12px var(--gutter) 20px;box-shadow:var(--shadow-sm);display:none;}
  .nav a{padding:13px 16px;font-size:19px;}
  .nav-toggle:checked ~ .nav{display:flex;}
}

/* =================== FOOTER =================== */
.site-footer{background:var(--dark);color:var(--paper);margin-top:80px;}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:56px 0 40px;}
@media(max-width:760px){.site-footer .cols{grid-template-columns:1fr;gap:30px;padding:44px 0 32px;}}
.site-footer h4{color:#fff;font-size:19px;margin-bottom:14px;}
.site-footer .brand{color:#fff;font-size:27px;margin-bottom:14px;}
.site-footer .brand .mark{background:var(--berry);}
.site-footer p{color:rgba(255,244,228,.72);font-size:16px;}
.footlinks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footlinks a{color:rgba(255,244,228,.82);font-family:var(--display);font-weight:500;}
.footlinks a:hover{color:#fff;}
.legal{border-top:1px solid rgba(255,255,255,.14);padding:22px 0;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;}
.legal p{margin:0;font-size:14.5px;color:rgba(255,244,228,.6);}

/* =================== SECTION HEADINGS =================== */
.section{padding-block:clamp(48px,7vw,84px);}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:34px;}
.section-head h2{font-size:clamp(30px,4vw,44px);}
.section-head .more{font-family:var(--display);font-weight:600;color:var(--berry);white-space:nowrap;}
.lede{font-size:20px;color:var(--ink-soft);max-width:60ch;}

/* =================== CARD GRID (even height) =================== */
.grid{display:grid;gap:26px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease;height:100%;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);color:var(--ink);}
.card-media{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--paper-2);}
.card-media img{width:100%;height:100%;object-fit:cover;}
.card-media .tag{position:absolute;top:14px;left:14px;}
.card-body{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;flex:1;}
.card-title{font-size:22px;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.24em;}
.card-dek{color:var(--ink-soft);font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;}
.card .rmeta{margin-top:auto;padding-top:6px;}

/* section browse tiles */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.tile{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/4;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow-sm);}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,15,20,.82),rgba(30,15,20,.05) 60%);}
.tile .tile-label{position:relative;z-index:2;padding:18px;display:flex;flex-direction:column;gap:2px;}
.tile .tile-no{font-family:var(--display);font-weight:600;font-size:13px;opacity:.8;letter-spacing:.1em;}
.tile .tile-name{font-family:var(--display);font-weight:600;font-size:22px;}
.tile:hover{color:#fff;}
.tile:hover img{transform:scale(1.05);transition:transform .4s ease;}

@media(max-width:1000px){
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-3{grid-template-columns:repeat(2,1fr);}
  .tiles{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:620px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr;}
  .tiles{grid-template-columns:repeat(2,1fr);}
}

/* =================== HERO — recipe of the moment =================== */
.hero{padding-top:clamp(30px,5vw,56px);}
.hero-card{display:grid;grid-template-columns:1.02fr 1fr;gap:0;background:var(--berry);border-radius:var(--r-lg);overflow:hidden;color:#fff;box-shadow:var(--shadow);}
.hero-copy{padding:clamp(30px,4vw,58px);display:flex;flex-direction:column;gap:20px;justify-content:center;min-width:0;}
.hero-copy .kicker{color:#FBE8D0;}
.hero-copy h1{color:#fff;font-size:clamp(38px,5.2vw,64px);}
.hero-copy p{font-size:clamp(18px,2vw,21px);color:rgba(255,255,255,.94);max-width:34ch;margin:0;}
.hero-copy .rmeta{color:rgba(255,255,255,.9);}
.hero-copy .rmeta .icon{color:#FBE8D0;}
.hero-badge{align-self:flex-start;background:#F5D23B;color:var(--dark);font-family:var(--display);font-weight:600;font-size:14px;padding:8px 16px;border-radius:var(--pill);transform:rotate(-2deg);}
.hero-media{position:relative;min-height:420px;min-width:0;}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media(max-width:860px){
  .hero-card{grid-template-columns:1fr;}
  .hero-media{min-height:280px;order:-1;}
}

/* =================== BUILD YOUR OWN =================== */
.byo{background:var(--green);border-radius:var(--r-lg);overflow:hidden;color:#fff;box-shadow:var(--shadow);}
.byo-head{padding:clamp(28px,3.5vw,44px) clamp(28px,3.5vw,44px) 6px;}
.byo-head h2{color:#fff;font-size:clamp(28px,3.6vw,40px);}
.byo-head .kicker{color:rgba(255,255,255,.85);}
.byo-head p{color:rgba(255,255,255,.92);font-size:18px;max-width:56ch;margin:10px 0 0;}
.byo-inner{display:grid;grid-template-columns:1.45fr 1fr;gap:26px;align-items:start;padding:clamp(24px,3vw,40px);}
.byo-steps{display:flex;flex-direction:column;gap:20px;}
.byo-step .step-label{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:10px;}
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{font-family:var(--display);font-weight:500;font-size:15.5px;padding:9px 16px;border-radius:var(--pill);border:1.5px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:all .15s;line-height:1;}
.chip:hover{background:rgba(255,255,255,.2);}
.chip[aria-pressed="true"]{background:#fff;color:var(--green);border-color:#fff;font-weight:600;}
.byo-result{background:#fff;color:var(--ink);border-radius:var(--r-md);padding:28px;box-shadow:var(--shadow-sm);position:sticky;top:96px;}
.byo-result .kicker{color:var(--green);}
.byo-result .blend-name{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.05;margin:6px 0 4px;}
.byo-result .blend-tag{color:var(--ink-soft);font-size:16px;margin:0 0 16px;}
.byo-result h4{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-family:var(--body);font-weight:800;margin-bottom:10px;}
.byo-result ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px;}
.byo-result li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16.5px;}
.byo-result li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;}
.byo-shuffle{background:var(--dark);color:var(--paper);font-family:var(--display);font-weight:600;font-size:15px;padding:12px 18px;border:0;border-radius:var(--pill);cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.byo-shuffle:hover{background:var(--berry);}
@media(max-width:820px){.byo-inner{grid-template-columns:1fr;}.byo-result{position:static;}}

/* =================== INGREDIENT SPOTLIGHT =================== */
.spotlight{background:var(--paper-2);border-radius:var(--r-lg);padding:clamp(28px,3.5vw,48px);}
.spotlight .kicker{color:var(--terra);}
.spotlight h2{font-size:clamp(28px,3.6vw,42px);margin:8px 0 6px;}
.spot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:26px;}
.spot-card{background:var(--card);border-radius:var(--r-md);padding:24px 22px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px;border-top:5px solid var(--berry);}
.spot-card:nth-child(1){border-color:var(--mango);}
.spot-card:nth-child(2){border-color:var(--mango);}
.spot-card:nth-child(3){border-color:var(--berry);}
.spot-card:nth-child(4){border-color:var(--berry);}
.spot-card:nth-child(5){border-color:var(--terra);}
.spot-card h3{font-size:23px;}
.spot-card p{margin:0;color:var(--ink-soft);font-size:16.5px;line-height:1.5;}
@media(max-width:1000px){.spot-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.spot-grid{grid-template-columns:1fr;}}

/* =================== SPONSOR BLOCKS =================== */
.friends{background:var(--dark);border-radius:var(--r-lg);padding:clamp(30px,3.5vw,46px);color:var(--paper);}
.friends .kicker{color:#F5D23B;}
.friends h2{color:#fff;font-size:clamp(26px,3.2vw,36px);margin:8px 0 6px;}
.friends .lede{color:rgba(255,244,228,.75);}
.sponsor-row{display:grid;gap:16px;margin-top:26px;}
.sponsor-row.four{grid-template-columns:repeat(4,1fr);}
.sponsor-row.three{grid-template-columns:repeat(3,1fr);}
.sponsor{display:flex;flex-direction:column;gap:10px;background:#1c0d13;border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);padding:20px;transition:border-color .15s,transform .15s;}
.sponsor:hover{border-color:rgba(245,210,59,.5);transform:translateY(-2px);}
.sponsor img{width:100%;height:56px;object-fit:contain;border-radius:6px;opacity:1;}
.sponsor-blurb{color:rgba(255,244,228,.62);font-size:14.5px;line-height:1.45;min-height:1px;}
.friends-note{margin-top:22px;font-size:14.5px;color:rgba(255,244,228,.5);}
@media(max-width:900px){.sponsor-row.four{grid-template-columns:repeat(2,1fr);}.sponsor-row.three{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.sponsor-row.four,.sponsor-row.three{grid-template-columns:1fr;}}

/* footer partners variant */
.site-footer .friends{background:transparent;border-radius:0;padding:0;}
.site-footer .friends h2{font-size:22px;}
.site-footer .sponsor{background:rgba(255,255,255,.04);}

/* ============================================================
   ARTICLE COMPONENTS (styleguide + posts)
   ============================================================ */
.article-body{font-size:20px;line-height:1.72;color:var(--ink);}
.article-body > p,.article-body > ul,.article-body > ol,.article-body > h2,.article-body > h3{max-width:70ch;}
.article-body h2{font-size:clamp(26px,3vw,34px);margin:1.6em 0 .5em;}
.article-body h3{font-size:23px;margin:1.4em 0 .4em;}
.article-body > ul,.article-body > ol{padding-left:1.3em;}
.article-body li{margin:.4em 0;}
.article-body a{color:var(--berry);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:rgba(196,58,106,.35);}
.article-body a:hover{color:var(--terra);text-decoration-color:currentColor;}

/* lead + drop cap */
.lead{font-size:clamp(21px,2.4vw,26px);line-height:1.5;color:var(--ink);font-weight:600;font-family:var(--body);}
.has-dropcap > p:first-of-type::first-letter,
p.dropcap::first-letter{float:left;font-family:var(--display);font-weight:700;font-size:3.4em;line-height:.78;padding:.06em .12em 0 0;color:var(--berry);}

/* pullquote */
.pullquote{margin:1.6em 0;padding:0;border:0;}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,38px);line-height:1.12;color:var(--berry);margin:0;max-width:none;text-wrap:balance;}
.pullquote p::before{content:"\201C";}
.pullquote p::after{content:"\201D";}

/* sourced blockquote */
.blockquote{margin:1.6em 0;padding:22px 26px;background:var(--paper-2);border-left:6px solid var(--mango);border-radius:0 var(--r-sm) var(--r-sm) 0;}
.blockquote p{font-size:21px;font-style:italic;margin:0 0 .4em;color:var(--ink);}
.blockquote cite{font-style:normal;font-family:var(--display);font-weight:600;font-size:16px;color:var(--ink-soft);}

/* callout */
.callout{margin:1.6em 0;padding:24px 26px 24px 62px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);position:relative;box-shadow:var(--shadow-sm);max-width:none;}
.callout::before{content:"";position:absolute;left:22px;top:26px;width:24px;height:24px;background:var(--berry);border-radius:7px;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0-4 10c.7.7 1 1.2 1 2v1h6v-1c0-.8.3-1.3 1-2a6 6 0 0 0-4-10z'/><path d='M9 21h6'/></svg>") center/16px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0-4 10c.7.7 1 1.2 1 2v1h6v-1c0-.8.3-1.3 1-2a6 6 0 0 0-4-10z'/><path d='M9 21h6'/></svg>") center/16px no-repeat;}
.callout p{margin:0;font-size:18.5px;}
.callout p + p{margin-top:.6em;}

/* note */
.note{margin:1.4em 0;padding:14px 18px;background:rgba(106,168,75,.12);border-radius:var(--r-sm);font-size:17px;color:var(--ink);max-width:none;}
.note::before{content:"Tip — ";font-family:var(--display);font-weight:600;color:var(--green);}

/* versus */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:17.5px;max-width:none;overflow:hidden;border-radius:var(--r-sm);background:#fff;box-shadow:var(--shadow-sm);}
.versus th,.versus td,.datatable th,.datatable td{padding:14px 16px;text-align:left;vertical-align:top;}
.versus thead th{background:var(--berry);color:#fff;font-family:var(--display);font-weight:600;font-size:16px;}
.versus tbody th{background:var(--paper-2);font-family:var(--display);font-weight:600;width:34%;}
.versus tbody tr + tr th,.versus tbody tr + tr td{border-top:1px solid var(--line);}
.datatable thead th{background:var(--dark);color:var(--paper);font-family:var(--display);font-weight:600;}
.datatable tbody tr:nth-child(even){background:var(--paper-2);}
.datatable caption,.chart figcaption,.article-figure figcaption{caption-side:bottom;}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:1.6em 0;max-width:none;}
.statblock{background:#fff;border-radius:var(--r-sm);padding:22px;box-shadow:var(--shadow-sm);border-bottom:5px solid var(--mango);display:flex;flex-direction:column;gap:4px;}
.stat-num{font-family:var(--display);font-weight:700;font-size:40px;line-height:1;color:var(--berry);}
.stat-label{font-size:15.5px;color:var(--ink-soft);}

/* timeline */
.timeline{list-style:none;margin:1.6em 0;padding:0 0 0 26px;border-left:3px solid var(--line);max-width:none;display:flex;flex-direction:column;gap:22px;}
.timeline li{position:relative;}
.timeline li::before{content:"";position:absolute;left:-33px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--berry);border:3px solid var(--paper);}
.t-when{display:block;font-family:var(--display);font-weight:600;font-size:16px;color:var(--berry);margin-bottom:2px;}
.t-what{display:block;font-size:17.5px;color:var(--ink);max-width:60ch;}

/* charts */
.chart{margin:1.8em 0;max-width:none;}
.chart svg{width:100%;height:auto;display:block;overflow:visible;}
.chart figcaption{font-size:15.5px;color:var(--ink-soft);margin-top:12px;}
.bar-label{font-family:var(--body);font-weight:700;font-size:13px;fill:var(--ink-soft);}
.bar-val{font-family:var(--display);font-weight:600;font-size:13px;fill:var(--ink);}

/* figures + gallery */
.article-figure{margin:1.8em 0;max-width:none;}
.article-figure img{width:100%;border-radius:var(--r-md);}
.article-figure figcaption,.gallery figcaption{font-size:15.5px;color:var(--ink-soft);margin-top:10px;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.8em 0;max-width:none;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm);}
@media(max-width:640px){.gallery{grid-template-columns:repeat(2,1fr);}}

/* map figure — frame only */
.map-figure{margin:1.8em 0;max-width:none;}
.map-slot{aspect-ratio:16/9;border:2px dashed var(--line);border-radius:var(--r-md);background:var(--paper-2) repeating-linear-gradient(45deg,transparent,transparent 12px,rgba(51,32,42,.03) 12px,rgba(51,32,42,.03) 24px);display:grid;place-items:center;color:var(--ink-faint);font-family:var(--display);font-weight:600;}
.map-slot::after{content:"map";}
.map-figure figcaption{font-size:15.5px;color:var(--ink-soft);margin-top:10px;}

/* profile cards */
.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.8em 0;max-width:none;}
.profile-card{background:#fff;border-radius:var(--r-md);padding:24px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px;}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:6px;}
.profile-card.no-photo{border-top:5px solid var(--green);}
.profile-card h3{font-size:21px;}
.p-role{font-family:var(--display);font-weight:600;color:var(--green);font-size:15px;margin:0;}
.profile-card p{font-size:16.5px;color:var(--ink-soft);margin:.3em 0;}
.p-links{margin-top:auto!important;font-size:15.5px;}
.p-attr{font-size:13.5px;color:var(--ink-faint);}
@media(max-width:560px){.profile-grid{grid-template-columns:1fr;}}

/* org cards */
.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.8em 0;max-width:none;}
.org-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:18px;color:var(--ink);box-shadow:var(--shadow-sm);}
.org-card:hover{color:var(--ink);transform:translateY(-2px);transition:transform .15s;}
.org-logo{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--paper-2);}
.org-card.no-logo .org-logo{display:grid;place-items:center;}
.org-name{font-family:var(--display);font-weight:600;font-size:17px;}
.org-host{font-size:14px;color:var(--ink-faint);}
@media(max-width:640px){.org-grid{grid-template-columns:1fr 1fr;}}

/* inline entity ref */
.entity-ref{white-space:nowrap;font-weight:700;}

/* further reading + related */
.further-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.4em 0;max-width:none;}
.further-grid a{background:var(--paper-2);border-radius:var(--r-sm);padding:18px 20px;font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.further-grid a::after{content:"→";color:var(--berry);}
.further-grid a:hover{background:var(--berry);color:#fff;}
.further-grid a:hover::after{color:#fff;}
.related-links{list-style:none;margin:1em 0 0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:70ch;}
.related-links a{font-family:var(--display);font-weight:600;font-size:18px;}
@media(max-width:640px){.further-grid{grid-template-columns:1fr;}}

/* =================== CATEGORY / ARCHIVE PAGES =================== */
.cat-hero{color:#fff;padding-block:clamp(40px,6vw,72px);}
.cat-hero .wrap{display:flex;flex-direction:column;gap:10px;}
.cat-hero .crumb{font-family:var(--display);font-weight:600;font-size:14px;color:rgba(255,255,255,.8);}
.cat-hero .crumb a{color:rgba(255,255,255,.8);}
.cat-hero .crumb a:hover{color:#fff;}
.cat-hero .kicker{color:rgba(255,255,255,.85);}
.cat-hero h1{color:#fff;font-size:clamp(42px,7vw,72px);}
.cat-hero p{font-size:clamp(19px,2.2vw,23px);color:rgba(255,255,255,.94);max-width:60ch;margin:6px 0 0;}
.cat-hero .count{font-family:var(--display);font-weight:600;font-size:16px;color:rgba(255,255,255,.85);margin-top:4px;}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:26px;grid-template-columns:repeat(3,1fr);}
@media(max-width:1000px){.cat-list{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.cat-list{grid-template-columns:1fr;}}

/* =================== ARTICLE / POST PAGES =================== */
.post-header{padding-block:clamp(34px,5vw,60px) clamp(20px,3vw,30px);}
.post-header .crumb{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink-soft);margin-bottom:16px;display:block;}
.post-header .tag{margin-bottom:16px;}
.post-header h1{font-size:clamp(38px,6vw,68px);max-width:20ch;text-wrap:balance;}
.post-dek{font-size:clamp(20px,2.4vw,26px);line-height:1.4;color:var(--ink-soft);font-family:var(--body);font-weight:600;max-width:52ch;margin:18px 0 0;}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px;font-family:var(--display);font-weight:500;font-size:16px;color:var(--ink-soft);}
.byline .dot{color:var(--ink-faint);}
.byline .rmeta{margin-left:auto;}
.post-hero-figure{margin:0 0 clamp(30px,4vw,48px);}
.post-hero-figure img{width:100%;height:clamp(300px,46vw,560px);object-fit:cover;border-radius:var(--r-lg);}
.post-hero-figure figcaption{font-size:15.5px;color:var(--ink-soft);margin-top:12px;max-width:70ch;}

/* wide full-bleed prose: centred measure, breakout components */
.article-body{display:grid;grid-template-columns:1fr min(68ch, calc(100% - 2*var(--gutter))) 1fr;}
.article-body > *{grid-column:2;max-width:none;}
.article-body > .breakout{grid-column:1/-1;justify-self:center;width:min(1060px, calc(100% - 2*var(--gutter)));}
.article-body > h2{grid-column:2;font-size:clamp(27px,3.4vw,38px);margin:1.7em 0 .5em;display:flex;align-items:baseline;gap:14px;}
.secno{font-family:var(--display);font-weight:700;font-size:.62em;color:#fff;background:var(--berry);border-radius:9px;padding:.14em .42em;flex:none;}
hr.rule{grid-column:2;border:0;border-top:2px dashed var(--line);margin:1.8em 0;}

/* key-facts panel */
.keyfacts{background:var(--paper-2);border-radius:var(--r-md);padding:26px 30px;margin:2em 0;}
.keyfacts h4{font-family:var(--display);font-weight:700;font-size:20px;margin:0 0 14px;display:flex;align-items:center;gap:9px;}
.keyfacts h4 .icon{color:var(--berry);width:1.2em;height:1.2em;}
.keyfacts dl{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 30px;margin:0;}
.keyfacts dt{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);}
.keyfacts dd{margin:2px 0 0;font-size:16px;color:var(--ink-soft);line-height:1.45;}
@media(max-width:640px){.keyfacts dl{grid-template-columns:1fr;}}

/* recipe card (in-post) */
.recipe-card{background:#fff;border-radius:var(--r-md);box-shadow:var(--shadow);overflow:hidden;margin:2em 0;}
.recipe-card .rc-head{background:var(--berry);color:#fff;padding:24px 28px;}
.recipe-card .rc-head .kicker{color:rgba(255,255,255,.85);}
.recipe-card .rc-head h3{color:#fff;font-size:27px;margin:4px 0 0;}
.recipe-card .rc-body{padding:26px 28px;}
.recipe-card .rmeta{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.recipe-card ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 24px;}
.recipe-card li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;}
.recipe-card li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--berry);flex:none;}
@media(max-width:560px){.recipe-card ul{grid-template-columns:1fr;}}

/* related */
.post-related{border-top:2px dashed var(--line);margin-top:clamp(40px,6vw,64px);padding-top:36px;}
.post-related h2{font-size:clamp(26px,3vw,34px);margin-bottom:6px;}

/* =================== SIMPLE PAGES (about / contact / 404) =================== */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:2em 0;list-style:none;padding:0;}
.contact-grid li{background:#fff;border-radius:var(--r-md);padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px;}
.contact-grid .ci{width:44px;height:44px;border-radius:12px;background:var(--paper-2);display:grid;place-items:center;color:var(--berry);}
.contact-grid .ci .icon{width:24px;height:24px;}
.contact-grid h3{font-size:20px;}
.contact-grid p{margin:0;color:var(--ink-soft);font-size:16.5px;}
.contact-grid a{font-family:var(--display);font-weight:600;}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;}}
.page-404{min-height:56vh;display:grid;place-items:center;text-align:center;padding-block:clamp(50px,9vw,110px);}
.page-404 .big{font-family:var(--display);font-weight:700;font-size:clamp(90px,20vw,190px);line-height:.9;color:var(--berry);}
.page-404 h1{font-size:clamp(30px,4vw,44px);margin:10px 0 8px;}
.page-404 p{font-size:20px;color:var(--ink-soft);max-width:44ch;margin:0 auto 24px;}
.page-404 .links{display:flex;flex-wrap:wrap;gap:12px;justify-content: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-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.sp-domain.sp-domain{color:rgb(211,105,142)!important;opacity:1!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. */
.sponsor-row.four .sponsor.sponsor img{background:#121013!important;box-sizing:border-box!important;padding:9px 15px!important}

/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.legal{padding-inline:var(--gutter)}
}

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

/* op-page-overflow: the page scrolled sideways at 320 — a.sp-domain reached
   279px in a 320px screen (+19px), inside
   div.sponsor. Remedy: let the words break. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  a.sp-domain,a.sp-domain *{overflow-wrap:anywhere!important;min-width:0!important}
}

/* op-name-wrap: on the live page a brand name or domain label ran out of its money tile (one unbreakable word in a narrow tile, measured 2026-09-23). The name wraps instead (a brand on two lines is better than half a word). Money tiles only. */
[data-partner] .sp-domain{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important}
/* op-name-wrap:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-row.four 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){
  .sponsor-row.four .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 */
h3:where(.rt-h4){font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0px; color: var(--ink);}
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0px; color: var(--ink);}
.site-footer h3:where(.rt-h4){color: rgb(255, 255, 255); font-size: 19px; margin-bottom: 14px;}
.byo-result h3:where(.rt-h4){font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--body); font-weight: 800; margin-bottom: 10px;}
.article-body h2:where(.rt-h3){font-size: 23px; margin: 1.4em 0px 0.4em;}
.keyfacts h3:where(.rt-h4){font-family: var(--display); font-weight: 700; font-size: 20px; margin: 0px 0px 14px; display: flex; align-items: center; gap: 9px;}
.keyfacts h3:where(.rt-h4) .icon{color: var(--berry); width: 1.2em; height: 1.2em;}
.contact-grid h2:where(.rt-h3){font-size: 20px;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:1299px){
  div.wrap.bar{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
@media (min-width:901px) and (max-width:1299px){
  div.wrap.legal{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.card-media > img,
  article.hero-card > div.hero-media > img,
  div.article-body.wrap-wide > figure.breakout.post-hero-figure > img,
  div.breakout.gallery > figure > img,
  div.tiles > a.tile > img){height:auto}
/* op-img-dims:end */

/* op-domain-line-fit — the partner's domain line broke mid-word wherever its column was narrower than the domain.
   The tile that carries one is the size container; the domain scales down only as far as the column needs
   (12px floor), and a break that is still needed falls at the dot (<wbr>), never inside the name */
.sponsor:has(> .sp-domain){container-type:inline-size}
.sponsor .sp-domain .sp-dn{font-size:max(11px,min(1em,100cqi / var(--n)))}
/* op-domain-line-fit:end */
[data-partner] img{background:transparent!important}
:root body [data-partner][data-partner] img{background:transparent!important}
.sponsor-row.four .sponsor.sponsor img{background:transparent!important}