/* ═══════════════════════════════════════════
   INGREDIENTBASE — v2 Stylesheet
   Charcoal · Warm off-white · Muted blue · Earth tone
   No gradients · No gloss · No oversaturation
   ═══════════════════════════════════════════ */

:root {
  --bg: #F5F5F3;
  --surface: #ECEAE6;
  --card: #FFFFFF;
  --border: #D5D1CB;
  --border-light: #E8E5E0;
  --ink: #1A1A1A;
  --ink-soft: #333333;
  --ink-muted: #6B6B6B;
  --ink-faint: #999999;
  --blue: #4A6FA5;
  --blue-light: rgba(74,111,165,.07);
  --blue-border: rgba(74,111,165,.18);
  --earth: #C26A3D;
  --earth-light: rgba(194,106,61,.06);
  --earth-border: rgba(194,106,61,.18);
  --green: #4A7C59;
  --green-light: rgba(74,124,89,.06);
  --green-border: rgba(74,124,89,.16);
  --amber: #B8860B;
  --radius: 8px;
  --radius-lg: 12px;
  --font-d: 'Instrument Serif', Georgia, serif;
  --font-b: 'Source Sans 3', 'Segoe UI', sans-serif;
  --font-m: 'JetBrains Mono', monospace;
  --max-site: 1140px;
  --max-recipe: 900px;
  --max-text: 680px;
  --g: clamp(1.25rem, 4vw, 2.5rem);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background:var(--bg); color:var(--ink); font-family:var(--font-b); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; display:block; }

@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.anim-1{animation:fadeUp .5s ease both}
.anim-2{animation:fadeUp .5s ease .06s both}
.anim-3{animation:fadeUp .5s ease .12s both}
.anim-4{animation:fadeUp .5s ease .18s both}
.anim-5{animation:fadeUp .5s ease .24s both}
.anim-6{animation:fadeUp .5s ease .3s both}

/* ─── SITE HEADER ─── */
.site-header { padding:1rem var(--g); border-bottom:1px solid var(--border-light); max-width:var(--max-site); margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.logo { display:flex; align-items:center; text-decoration:none; }
.logo img { height:28px; width:auto; }
.logo-text { font-family:var(--font-d); font-size:1.3rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.logo-text span { color:var(--blue); }
.site-nav { display:flex; gap:1.5rem; list-style:none; }
.site-nav a { font-size:.85rem; font-weight:500; color:var(--ink-muted); text-decoration:none; transition:color .2s; }
.site-nav a:hover { color:var(--ink); }

/* ─── HOMEPAGE: HERO ─── */
.hero { max-width:var(--max-site); margin:0 auto; padding:5rem var(--g) 3.5rem; text-align:center; }
.hero h1 { font-family:var(--font-d); font-size:clamp(2.2rem,5vw,3rem); font-weight:400; line-height:1.15; letter-spacing:-.02em; margin-bottom:1rem; }
.hero-text { font-size:1.05rem; color:var(--ink-muted); max-width:580px; margin:0 auto; line-height:1.65; }

/* ─── HOMEPAGE: PILLARS ─── */
.pillars { max-width:var(--max-site); margin:0 auto; padding:0 var(--g) 4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.pillar { padding:1.75rem 1.5rem; border:1px solid var(--border-light); border-radius:var(--radius-lg); background:var(--card); }
.pillar-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1rem; margin-bottom:1rem; font-weight:600; }
.pillar-icon.blue { background:var(--blue-light); color:var(--blue); }
.pillar-icon.earth { background:var(--earth-light); color:var(--earth); }
.pillar-icon.green { background:var(--green-light); color:var(--green); }
.pillar h3 { font-family:var(--font-d); font-size:1.1rem; font-weight:400; margin-bottom:.4rem; }
.pillar p { font-size:.88rem; color:var(--ink-muted); line-height:1.55; }

/* ─── HOMEPAGE: SECTION HEADER ─── */
.section-header { max-width:var(--max-recipe); margin:0 auto; padding:0 var(--g) 1.5rem; display:flex; align-items:baseline; justify-content:space-between; }
.section-header h2 { font-family:var(--font-d); font-size:1.5rem; font-weight:400; }
.section-header a { font-size:.85rem; font-weight:600; color:var(--blue); text-decoration:none; }
.section-header a:hover { color:var(--ink); }

/* ─── RECIPE CARDS ─── */
.recipe-grid { max-width:var(--max-recipe); margin:0 auto; padding:0 var(--g); display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; margin-bottom:2rem; }
.recipe-grid.full-width { max-width:var(--max-site); }
.recipe-card { background:var(--card); border:1px solid var(--border-light); border-radius:var(--radius-lg); text-decoration:none; display:block; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.recipe-card:hover { border-color:var(--border); box-shadow:0 2px 12px rgba(0,0,0,.04); }
.recipe-card-img { width:100%; height:180px; background:var(--surface); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.recipe-card-img img { width:100%; height:100%; object-fit:cover; }
.recipe-card-img .ph { font-size:.78rem; color:var(--ink-faint); font-style:italic; }
.recipe-card-body { padding:1.15rem 1.25rem 1.25rem; }
.recipe-card h3 { font-family:var(--font-d); font-size:1.1rem; font-weight:400; color:var(--ink); margin-bottom:.35rem; line-height:1.3; }
.recipe-card p { font-size:.85rem; color:var(--ink-muted); margin-bottom:.65rem; line-height:1.5; }
.recipe-card-meta { display:flex; gap:.4rem; flex-wrap:wrap; }
.recipe-card-pill { font-size:.7rem; font-weight:600; color:var(--ink-faint); background:var(--bg); padding:.2rem .5rem; border-radius:4px; }

/* ─── CTA ─── */
.cta-row { max-width:var(--max-recipe); margin:0 auto; padding:0 var(--g) 4rem; text-align:center; }
.btn-primary { display:inline-block; font-family:var(--font-b); font-size:.9rem; font-weight:600; color:#fff; background:var(--ink); padding:.75rem 2rem; border-radius:var(--radius); text-decoration:none; border:none; cursor:pointer; transition:background .2s; }
.btn-primary:hover { background:var(--blue); }

/* ─── EXPLAINER ─── */
.explainer { max-width:var(--max-site); margin:0 auto; padding:3rem var(--g) 4rem; border-top:1px solid var(--border-light); }
.explainer h2 { font-family:var(--font-d); font-size:1.5rem; font-weight:400; text-align:center; margin-bottom:2rem; }
.explainer-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; }
.explainer-step-num { font-family:var(--font-m); font-size:.75rem; color:var(--blue); margin-bottom:.4rem; }
.explainer-step h3 { font-family:var(--font-d); font-size:1.05rem; margin-bottom:.35rem; }
.explainer-step p { font-size:.85rem; color:var(--ink-muted); line-height:1.55; }

/* ─── RECIPES LISTING PAGE ─── */
.page-header { max-width:var(--max-site); margin:0 auto; padding:3rem var(--g) 2rem; }
.page-header h1 { font-family:var(--font-d); font-size:clamp(1.8rem,4vw,2.4rem); font-weight:400; margin-bottom:.5rem; }
.page-header p { font-size:1rem; color:var(--ink-muted); max-width:560px; }

/* ─── RECIPE PAGE ─── */
.recipe-header { max-width:var(--max-text); margin:0 auto; padding:3rem var(--g) 1.5rem; }
.breadcrumb { font-size:.78rem; font-weight:500; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; margin-bottom:1rem; }
.breadcrumb a { color:var(--ink-faint); text-decoration:none; }
.breadcrumb a:hover { color:var(--blue); }
h1 { font-family:var(--font-d); font-size:clamp(1.9rem,5vw,2.5rem); font-weight:400; line-height:1.15; letter-spacing:-.015em; margin-bottom:.5rem; }
.recipe-subtitle { font-size:.95rem; color:var(--blue); font-weight:500; margin-bottom:.75rem; }
.recipe-intro { font-size:1rem; color:var(--ink-soft); line-height:1.65; margin-bottom:1.5rem; }

.recipe-hero-img { max-width:var(--max-recipe); margin:0 auto 1.5rem; padding:0 var(--g); }
.recipe-hero-img img { width:100%; border-radius:var(--radius-lg); aspect-ratio:16/9; object-fit:cover; }
.recipe-hero-img .img-placeholder { width:100%; aspect-ratio:16/9; background:var(--surface); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:.82rem; color:var(--ink-faint); font-style:italic; }

.meta-bar { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.5rem; }
.meta-pill { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:500; color:var(--ink-muted); background:var(--card); border:1px solid var(--border-light); padding:.35rem .75rem; border-radius:100px; }
.meta-pill svg { width:14px; height:14px; stroke:var(--ink-faint); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; padding:.4rem .85rem; border-radius:100px; }
.badge-clean { color:var(--green); background:var(--green-light); border:1px solid var(--green-border); }
.badge-clean svg { width:14px; height:14px; stroke:var(--green); fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.badge-lean { color:var(--blue); background:var(--blue-light); border:1px solid var(--blue-border); }

.btn-outline { font-family:var(--font-b); font-size:.82rem; font-weight:600; color:var(--ink-muted); background:none; border:1.5px solid var(--border); border-radius:6px; padding:.5rem 1rem; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:.4rem; }
.btn-outline:hover { border-color:var(--ink-faint); color:var(--ink); }
.btn-outline svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

/* Controls */
.controls-row { max-width:var(--max-text); margin:0 auto; padding:0 var(--g); display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.control-group { display:flex; align-items:center; gap:.6rem; }
.control-label { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); }
.toggle-group, .servings-control { display:flex; background:var(--card); border:1px solid var(--border-light); border-radius:6px; overflow:hidden; }
.toggle-group button { font-family:var(--font-b); font-size:.82rem; font-weight:600; padding:.4rem .85rem; border:none; background:transparent; color:var(--ink-muted); cursor:pointer; transition:all .2s; }
.toggle-group button.active { background:var(--ink); color:#fff; }
.servings-btn { font-family:var(--font-b); width:34px; height:34px; border:none; background:transparent; color:var(--ink-muted); font-size:1.1rem; font-weight:600; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; }
.servings-btn:hover { background:var(--ink); color:#fff; }
.servings-btn:disabled { opacity:.3; cursor:not-allowed; }
.servings-btn:disabled:hover { background:transparent; color:var(--ink-muted); }
.servings-display { font-family:var(--font-m); font-size:.85rem; color:var(--ink); padding:0 .5rem; min-width:24px; text-align:center; user-select:none; line-height:34px; }

/* Macro profiles */
.macro-section { max-width:var(--max-text); margin:0 auto; padding:0 var(--g); margin-bottom:1.5rem; }
.macro-tabs { display:flex; gap:.5rem; flex-wrap:wrap; }
.macro-tab { font-family:var(--font-b); font-size:.82rem; font-weight:600; padding:.6rem 1.15rem; border-radius:100px; border:1.5px solid var(--border); background:var(--card); color:var(--ink-muted); cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:.5rem; line-height:1.3; }
.macro-tab:hover { border-color:var(--ink-faint); color:var(--ink); }
.macro-tab .macro-cal { font-family:var(--font-m); font-size:.72rem; opacity:.6; }
.macro-tab.active.light { background:var(--green); color:#fff; border-color:var(--green); }
.macro-tab.active.balanced { background:var(--ink); color:#fff; border-color:var(--ink); }
.macro-tab.active.fuelled { background:var(--earth); color:#fff; border-color:var(--earth); }
.macro-note { font-size:.82rem; color:var(--ink-muted); margin-top:.65rem; line-height:1.55; }
.macro-note strong { color:var(--ink-soft); }
.macro-changes { font-size:.8rem; color:var(--ink-muted); margin-top:.5rem; padding:.5rem .75rem; background:var(--card); border:1px solid var(--border-light); border-radius:6px; line-height:1.5; display:none; }
.macro-changes .changed { font-weight:600; color:var(--earth); }

/* Section labels */
.section-label { max-width:var(--max-text); margin:0 auto; padding:0 var(--g); font-family:var(--font-d); font-size:1.4rem; color:var(--ink); margin-bottom:1rem; }
.section-label-sub { font-family:var(--font-b); font-size:.78rem; font-weight:500; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }

/* Ingredients */
.ingredients-list { max-width:var(--max-text); margin:0 auto; padding:0 var(--g); list-style:none; margin-bottom:2.5rem; }
.ingredient-item { border-bottom:1px solid var(--border-light); }
.ingredient-item:last-child { border-bottom:none; }
.ingredient-row { display:flex; align-items:center; padding:.85rem 0; gap:.75rem; }
.ingredient-subhead { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); padding:1rem 0 .25rem; }
.ingredient-check { width:20px; height:20px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; background:transparent; }
.ingredient-check.checked { background:var(--blue); border-color:var(--blue); }
.ingredient-check.checked::after { content:''; width:6px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translate(-1px,-1px); }
.ingredient-check.checked+.ingredient-text { text-decoration:line-through; color:var(--ink-faint); }
.ingredient-text { flex:1; font-size:.95rem; color:var(--ink-soft); transition:color .2s; }
.ingredient-qty { font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.ingredient-qty.adjusted { color:var(--earth); }

.expand-btn { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--earth-border); background:var(--earth-light); color:var(--earth); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .2s; font-size:.75rem; font-weight:700; }
.expand-btn:hover { background:var(--earth); color:#fff; border-color:var(--earth); }
.expand-btn[aria-expanded="true"] { background:var(--earth); color:#fff; border-color:var(--earth); transform:rotate(45deg); }
.ingredient-detail { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.ingredient-detail.open { max-height:700px; }
.detail-card { background:var(--card); border:1px solid var(--border-light); border-left:3px solid var(--earth); border-radius:0 var(--radius) var(--radius) 0; padding:1rem 1.15rem; margin:0 0 .85rem 2.5rem; font-size:.88rem; line-height:1.6; color:var(--ink-soft); }
.detail-card strong { color:var(--ink); font-weight:600; }
.detail-card p+p { margin-top:.5rem; }
.detail-heading { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--earth); margin-bottom:.3rem; }
.detail-pick { display:flex; align-items:flex-start; gap:.6rem; margin-top:.65rem; padding-top:.65rem; border-top:1px dashed var(--border-light); }
.detail-pick-icon { width:18px; height:18px; stroke:var(--green); fill:none; stroke-width:2; stroke-linecap:round; flex-shrink:0; margin-top:2px; }
.detail-pick-text { font-size:.84rem; color:var(--ink-soft); }
.detail-pick-text strong { color:var(--green); }
.detail-avoid { display:flex; align-items:flex-start; gap:.5rem; margin-top:.5rem; font-size:.82rem; color:var(--ink-muted); }
.detail-avoid-icon { color:var(--earth); font-weight:700; flex-shrink:0; margin-top:1px; }

/* Method */
.method-list { max-width:var(--max-text); margin:0 auto; padding:0 var(--g); list-style:none; counter-reset:step; margin-bottom:2.5rem; }
.method-step { display:flex; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--border-light); }
.method-step:last-child { border-bottom:none; }
.step-num { counter-increment:step; font-family:var(--font-d); font-size:1.5rem; color:var(--ink-faint); line-height:1.4; flex-shrink:0; width:2rem; text-align:center; }
.step-num::before { content:counter(step); }
.step-text { font-size:.95rem; color:var(--ink-soft); line-height:1.7; }
.step-text strong { color:var(--ink); font-weight:600; }
.step-tip { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:500; color:var(--blue); background:var(--blue-light); padding:.25rem .65rem; border-radius:4px; margin-top:.5rem; }

/* Nutrition */
.nutrition-section { max-width:var(--max-text); margin:0 auto; padding:0 var(--g); margin-bottom:2.5rem; }
.nutrition-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:.5rem; }
.nutrition-item { background:var(--card); border:1px solid var(--border-light); border-radius:var(--radius); padding:.75rem; text-align:center; }
.nutrition-val { font-family:var(--font-m); font-size:1.05rem; color:var(--ink); }
.nutrition-label { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-top:.15rem; }
.nutrition-note { font-size:.75rem; color:var(--ink-faint); margin-top:.5rem; font-style:italic; }

/* Rating */
.rating-section { max-width:var(--max-text); margin:0 auto; padding:0 var(--g); margin-bottom:2.5rem; }
.rating-box { background:var(--card); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:1.5rem; display:flex; align-items:center; gap:2rem; flex-wrap:wrap; }
.rating-avg-block { text-align:center; min-width:80px; }
.rating-avg { font-family:var(--font-m); font-size:2rem; color:var(--ink); line-height:1; }
.rating-avg-stars { display:flex; justify-content:center; gap:.1rem; margin:.3rem 0; }
.rating-avg-stars svg { width:14px; height:14px; fill:var(--amber); stroke:var(--amber); stroke-width:1; }
.rating-count { font-size:.75rem; color:var(--ink-faint); }
.rating-action { flex:1; min-width:200px; }
.rating-title { font-family:var(--font-d); font-size:1rem; margin-bottom:.4rem; }
.rating-stars { display:flex; gap:.2rem; margin-bottom:.35rem; }
.rating-star { width:28px; height:28px; cursor:pointer; transition:transform .15s; }
.rating-star:hover { transform:scale(1.15); }
.rating-star svg { width:100%; height:100%; stroke:var(--border); fill:none; stroke-width:1.5; transition:all .2s; }
.rating-star.active svg, .rating-star.hovered svg { fill:var(--amber); stroke:var(--amber); }
.rating-thanks { font-size:.82rem; color:var(--green); font-weight:500; display:none; }
.feedback-link { display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--ink-muted); text-decoration:none; transition:color .15s; }
.feedback-link:hover { color:var(--blue); }

/* Recipe footer */
.recipe-footer { max-width:var(--max-text); margin:0 auto; padding:2rem var(--g) 4rem; border-top:1px solid var(--border-light); }
.footer-note { font-size:.85rem; color:var(--ink-muted); line-height:1.65; margin-bottom:1.5rem; }
.footer-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.footer-tag { font-size:.75rem; font-weight:500; color:var(--ink-muted); background:var(--card); border:1px solid var(--border-light); padding:.3rem .7rem; border-radius:4px; text-decoration:none; transition:all .15s; }
.footer-tag:hover { border-color:var(--blue-border); color:var(--blue); }

/* About */
.about-content { max-width:var(--max-recipe); margin:0 auto; padding:3rem var(--g); }
.about-content h2 { font-family:var(--font-d); font-size:1.4rem; margin-top:2rem; margin-bottom:.75rem; }
.about-content p { font-size:1rem; color:var(--ink-soft); line-height:1.65; margin-bottom:1rem; }

/* Site footer */
.site-footer { max-width:var(--max-site); margin:0 auto; padding:1.5rem var(--g); border-top:1px solid var(--border-light); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.site-footer p { font-size:.78rem; color:var(--ink-faint); }
.site-footer a { color:var(--ink-muted); text-decoration:none; font-size:.78rem; }

/* Contact form */
.contact-content { max-width:var(--max-recipe); margin:0 auto; padding:3rem var(--g); }
.contact-content h1 { margin-bottom:.75rem; }
.contact-intro { font-size:1rem; color:var(--ink-soft); line-height:1.65; margin-bottom:2rem; }
.form-group { margin-bottom:1.25rem; }
.form-label { display:block; font-size:.82rem; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem; }
.form-input, .form-textarea, .form-select { width:100%; font-family:var(--font-b); font-size:.95rem; padding:.7rem .85rem; border:1.5px solid var(--border-light); border-radius:var(--radius); background:var(--card); color:var(--ink); transition:border-color .2s; outline:none; }
.form-input:focus, .form-textarea:focus, .form-select:focus { border-color:var(--blue); }
.form-textarea { resize:vertical; min-height:140px; line-height:1.6; }
.form-select { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; }
.form-submit { font-family:var(--font-b); font-size:.9rem; font-weight:600; padding:.75rem 2rem; border:none; border-radius:var(--radius); background:var(--ink); color:#fff; cursor:pointer; transition:background .2s; }
.form-submit:hover { background:var(--blue); }
.form-note { font-size:.78rem; color:var(--ink-faint); margin-top:1.5rem; line-height:1.55; }

/* Print */
@media print {
  .site-header, .site-footer, .controls-row, .expand-btn, .ingredient-detail, .btn-outline, .badge, .footer-tags, .site-nav, .macro-section, .macro-changes, .rating-section, .feedback-link, .recipe-hero-img { display:none !important; }
  body { background:#fff; font-size:12pt; }
  .recipe-header { padding-top:1rem; }
  h1 { font-size:20pt; }
}

/* Responsive */
@media (max-width:768px) {
  .pillars { grid-template-columns:1fr; }
  .explainer-steps { grid-template-columns:1fr; gap:1.5rem; }
}
@media (max-width:520px) {
  .site-nav { gap:1rem; }
  .detail-card { margin-left:1.25rem; }
  .nutrition-grid { grid-template-columns:repeat(3,1fr); }
  .controls-row { flex-direction:column; align-items:flex-start; }
  .macro-tabs { gap:.35rem; }
  .macro-tab { font-size:.78rem; padding:.45rem .8rem; }
  .rating-box { flex-direction:column; text-align:center; }
}