/* ==========================================================================
   SHELTER BLOG — GLOBAL STYLES
   base · layout · header · footer · buttons · cards · forms · TOC ·
   modal · progress bar · sticky mobile CTA · placeholders
   ========================================================================== */

/* ---------- RESET / BASE ------------------------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; }
}
body {
  font-family: var(--font);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-body);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg,video { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font: inherit; }
h1,h2,h3,h4,h5,h6 { font-weight: var(--fw-bold); line-height: var(--lh-head); color: var(--c-ink); }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Skip link */
.skip-link {
  position:absolute; left:-999px; top:0; z-index:9999;
  background:var(--c-ink); color:var(--c-on-dark);
  padding:12px 20px; font-weight:var(--fw-bold); font-size:var(--fs-caption);
}
.skip-link:focus { left:8px; top:8px; }

/* ---------- LAYOUT PRIMITIVES ------------------------------------------ */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section   { padding-block: var(--section-y); }
.band-dark  { background:var(--c-ink);   color:var(--c-on-dark); }
.band-dark h1,.band-dark h2,.band-dark h3 { color:var(--c-on-dark); }
.band-paper2{ background:var(--c-paper-2); }

.eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--c-mute);
  margin-bottom: var(--sp-3);
  display: block;
}
.band-dark .eyebrow { color: var(--c-on-dark-mute); }

.section-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--sp-4); margin-bottom: var(--sp-6); flex-wrap:wrap;
}
.section-head h2 { font-size: var(--fs-h2); }
.link-more {
  font-size:var(--fs-caption); font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:var(--tracking-nav);
  border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color var(--t);
}
.link-more:hover { border-color: var(--cta); }

/* ---------- BUTTONS ----------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:var(--fw-bold); font-size:var(--fs-caption);
  text-transform:uppercase; letter-spacing:var(--tracking-nav);
  padding:15px 30px; min-height:52px;
  border:2px solid transparent; border-radius:var(--radius);
  transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t-fast);
  white-space:nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary   { background:var(--cta); color:var(--cta-text); border-color:var(--cta); }
.btn--primary:hover { background:var(--cta-hover); border-color:var(--cta-hover); }
.btn--secondary { background:var(--c-ink-soft); color:var(--c-on-dark); border-color:var(--c-ink-soft); }
.btn--secondary:hover { background:transparent; color:var(--c-ink-soft); }
.band-dark .btn--secondary { border-color:var(--c-on-dark); color:var(--c-on-dark); background:transparent; }
.band-dark .btn--secondary:hover { background:var(--c-on-dark); color:var(--c-ink); }
.btn--sm { padding:10px 18px; min-height:40px; }
.btn--ghost { background:transparent; }
:is(.btn--primary):focus-visible { outline-color: var(--c-ink); }

/* text link with lime underline reveal */
.ulink { border-bottom:2px solid transparent; transition:border-color var(--t); }
.ulink:hover { border-color:var(--cta); }

/* ---------- IMAGE PLACEHOLDER (real photo on top of gradient) ---------- */
.ph {
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:var(--ph-grad);
  aspect-ratio: 4/5;
}
.ph[data-ar="16x9"]{ aspect-ratio:16/9; }
.ph[data-ar="3x2"] { aspect-ratio:3/2; }
.ph[data-ar="1x1"] { aspect-ratio:1/1; }
.ph[data-ar="4x3"] { aspect-ratio:4/3; }
.ph > img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform var(--t-slow) var(--ease-out);
}
.ph::after { /* faint editorial label, hidden once img covers it visually */
  content:attr(data-label); position:absolute; left:12px; bottom:10px; z-index:0;
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-on-dark-mute); pointer-events:none;
}

/* ==========================================================================
   HEADER  → wp: header.php
   ========================================================================== */
.site-header { position:sticky; top:0; z-index:var(--z-header); background:var(--c-paper); }
.site-header.is-stuck { box-shadow:var(--shadow-hair); }

/* utility row */
.header-utility {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding-block:var(--sp-3); border-bottom:1px solid var(--c-line);
}
.wordmark { display:inline-flex; flex-direction:column; line-height:1; }
.wordmark b {
  font-size:26px; font-weight:var(--fw-bold); letter-spacing:.06em; color:var(--c-ink);
}
.wordmark span {
  font-size:9px; letter-spacing:var(--tracking-wordmark); color:var(--c-mute);
  margin-top:5px; text-transform:uppercase; text-align:left;
}
.header-icons { display:flex; align-items:center; gap:var(--sp-2); }
.icon-btn {
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--c-ink); border-radius:var(--radius); transition:background var(--t);
  position:relative;
}
.icon-btn:hover { background:var(--c-paper-2); }
.icon-btn svg { width:22px; height:22px; }
.cart-count {
  position:absolute; top:6px; right:6px; min-width:16px; height:16px; padding:0 4px;
  background:var(--cta); color:var(--cta-text); border-radius:var(--radius-pill);
  font-size:10px; font-weight:var(--fw-bold); display:flex; align-items:center; justify-content:center;
}

/* store nav (bridge back to shop) */
.nav-store { border-bottom:1px solid var(--c-line); }
.nav-store ul { display:flex; gap:var(--sp-6); align-items:center; }
.nav-store a {
  display:inline-block; padding-block:var(--sp-3);
  font-size:var(--fs-caption); font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:var(--tracking-nav); color:var(--c-ink);
  border-bottom:3px solid transparent; margin-bottom:-1px; transition:border-color var(--t);
}
.nav-store a:hover { border-color:var(--c-line); }
.nav-store a[aria-current="page"] { border-color:var(--cta); }

/* blog topic nav */
.nav-topics ul { display:flex; gap:var(--sp-5); align-items:center; flex-wrap:wrap; }
.nav-topics a {
  display:inline-block; padding-block:var(--sp-3);
  font-size:var(--fs-caption); color:var(--c-mute); transition:color var(--t);
}
.nav-topics a:hover { color:var(--c-ink); }

/* compact when stuck */
.site-header.is-stuck .nav-topics,
.site-header.is-stuck .wordmark span { display:none; }
.site-header.is-stuck .header-utility { padding-block:var(--sp-2); }

/* mobile nav toggle */
.nav-toggle { display:none; }
@media (max-width: 900px) {
  .nav-store, .nav-topics { display:none; }
  .nav-store.is-open, .nav-topics.is-open { display:block; }
  .nav-store.is-open ul, .nav-topics.is-open ul { flex-direction:column; gap:0; align-items:stretch; }
  .nav-store.is-open a, .nav-topics.is-open a { padding-block:var(--sp-3); border-bottom:1px solid var(--c-line); }
  .nav-toggle { display:inline-flex; }
}

/* ---------- SEARCH panel (predictive, no plugin) ---------------------- */
.search-panel { display:none; background:var(--c-paper); border-bottom:1px solid var(--c-line); }
.search-panel.is-open { display:block; animation:search-in var(--t) var(--ease-out); }
@keyframes search-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.search-form { display:flex; align-items:center; gap:var(--sp-3); padding-block:var(--sp-4); }
.search-form > svg { width:22px; height:22px; color:var(--c-mute); flex:none; }
.search-input { flex:1; min-width:0; border:0; background:transparent; color:var(--c-ink);
  font-family:var(--font); font-size:var(--fs-h4); padding:8px 0; }
.search-input::placeholder { color:var(--c-mute); }
.search-input:focus { outline:none; }
.search-close { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--c-ink); border-radius:var(--radius); flex:none; }
.search-close:hover { background:var(--c-paper-2); }
.search-results { display:none; padding-bottom:var(--sp-4); }
.search-results.has-items { display:block; }
.search-result { display:flex; align-items:baseline; gap:var(--sp-3); padding:10px var(--sp-3);
  border-radius:var(--radius); }
.search-result:hover, .search-result.is-active { background:var(--c-paper-2); }
.search-result__cat { font-size:var(--fs-micro); font-weight:var(--fw-bold); text-transform:uppercase;
  letter-spacing:.12em; color:var(--c-mute); flex:none; min-width:104px; }
.search-result__title { font-size:var(--fs-caption); color:var(--c-ink); line-height:1.35; }
.search-result mark { background:rgba(202,235,53,.55); color:inherit; padding:0 1px; border-radius:2px; }
.search-result--all { border-top:1px solid var(--c-line); margin-top:6px; padding-top:14px; }
.search-result--all .search-result__title { font-weight:var(--fw-bold); }
.search-hint { font-size:var(--fs-micro); color:var(--c-mute); padding:0 var(--sp-3) var(--sp-4);
  text-transform:uppercase; letter-spacing:.06em; }
.search-hint kbd { border:1px solid var(--c-line); border-radius:3px; padding:1px 6px; margin:0 2px;
  font-family:var(--font); font-size:10px; color:var(--c-ink); }
@media (max-width:560px){ .search-result__cat { min-width:0; display:block; margin-bottom:2px; } .search-result { flex-direction:column; gap:2px; } }

/* ==========================================================================
   HERO (home)
   ========================================================================== */
.hero { background:var(--c-ink); color:var(--c-on-dark); overflow:hidden; }
.hero__inner {
  display:grid; grid-template-columns:1.05fr 1fr; align-items:center;
  gap:var(--sp-8); min-height:min(56vh, 500px);
  max-width:var(--container); margin-inline:auto; padding:var(--sp-8) var(--gutter);
}
.hero__title { font-size:var(--fs-display); color:var(--c-on-dark); letter-spacing:-.01em; }
.hero__dek { font-size:var(--fs-lead); line-height:var(--lh-lead); color:var(--c-line); margin-top:var(--sp-4); max-width:34ch; }
.hero__byline { display:flex; align-items:center; gap:10px; margin-top:var(--sp-5); font-size:var(--fs-caption); color:var(--c-on-dark-mute); }
.hero__cta { margin-top:var(--sp-6); display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; }
.hero__anchor { margin-top:var(--sp-6); font-size:var(--fs-caption); color:var(--c-on-dark-mute); max-width:40ch; font-style:italic; }
.hero__media .ph { border-radius:var(--radius); }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns:1fr; gap:var(--sp-6); min-height:0; padding-block:var(--sp-7); }
  .hero__media { order:-1; }
}

/* avatar */
.avatar { border-radius:50%; object-fit:cover; background:var(--ph-grad); flex:none; }
.avatar--sm { width:32px; height:32px; }
.avatar--md { width:44px; height:44px; }
.avatar--lg { width:72px; height:72px; }

/* ==========================================================================
   GUIDE STRIP
   ========================================================================== */
.guide { text-align:center; }
.guide p { font-size:var(--fs-h4); max-width:var(--content); margin-inline:auto; color:var(--c-on-dark); line-height:1.4; }

/* ==========================================================================
   POST GRID (home)  → wp: loop
   ========================================================================== */
.post-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5);
}
.card { display:flex; flex-direction:column; }
.card__media { margin-bottom:var(--sp-3); }
.card__media .ph { aspect-ratio:4/5; }
.card__cat { font-size:var(--fs-micro); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--c-mute); }
.card__title { font-size:var(--fs-h4); margin-top:var(--sp-2); }
.card__title a { border-bottom:2px solid transparent; transition:border-color var(--t); }
.card:hover .card__title a { border-color:var(--cta); }
.card__dek { font-size:var(--fs-caption); color:var(--c-mute); margin-top:var(--sp-2); line-height:1.5; }
.card__meta { font-size:var(--fs-caption); color:var(--c-mute); margin-top:var(--sp-3); }

/* featured card spans 2×2 — the media fills the taller column beside it,
   so the card never ends up shorter than the two stacked cards (no gap). */
.card--featured { grid-column:span 2; grid-row:span 2; display:flex; flex-direction:column; }
.card--featured .card__media { flex:1 1 auto; min-height:0; }
.card--featured .card__media .ph { height:100%; aspect-ratio:auto; }
.card--featured .card__title { font-size:var(--fs-h2); }
.card--featured .card__dek { font-size:var(--fs-body); }

@media (max-width: 900px) {
  .post-grid { grid-template-columns:repeat(2,1fr); }
  /* no row-span on tablet → restore a normal fixed-ratio image */
  .card--featured { grid-column:span 2; grid-row:auto; }
  .card--featured .card__media { flex:0 0 auto; }
  .card--featured .card__media .ph { height:auto; aspect-ratio:3/2; }
}
@media (max-width: 560px) {
  .post-grid { grid-template-columns:1fr; }
  .card--featured { grid-column:auto; }
}

/* ==========================================================================
   CATEGORY STRIPS (home)
   ========================================================================== */
.cat-strip + .cat-strip { margin-top: var(--sp-7); }
.strip-scroll {
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px, 1fr);
  gap:var(--sp-4); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--sp-3); scrollbar-width:thin;
}
.strip-scroll > .card { scroll-snap-align:start; }
@media (min-width: 901px) {
  .strip-scroll { grid-template-columns:repeat(4,1fr); grid-auto-flow:row; overflow:visible; }
}

/* ==========================================================================
   NEWSLETTER (inline block)
   ========================================================================== */
.newsletter { text-align:center; }
.newsletter__inner { max-width:var(--content-narrow); margin-inline:auto; }
.newsletter h2 { font-size:var(--fs-h2); }
.newsletter p { margin-top:var(--sp-3); color:var(--c-mute); }
.form-inline {
  display:flex; gap:var(--sp-2); margin-top:var(--sp-5);
}
.form-inline input[type="email"] {
  flex:1; min-width:0; padding:15px 18px; border:2px solid var(--c-ink);
  border-radius:var(--radius); background:var(--c-paper); color:var(--c-ink);
}
.form-inline input::placeholder { color:var(--c-mute); }
.form-microcopy { margin-top:var(--sp-3); font-size:var(--fs-micro); color:var(--c-mute); text-transform:uppercase; letter-spacing:.08em; }
.form-note { color:var(--cta-hover); font-weight:var(--fw-bold); }
@media (max-width:560px){ .form-inline { flex-direction:column; } }

/* ==========================================================================
   SHOP BRIDGE (home)
   ========================================================================== */
.shop-bridge { text-align:center; }
.shop-tiles {
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
  margin-block:var(--sp-6); text-align:left;
}
.product { display:flex; flex-direction:column; }
.product .ph { aspect-ratio:1/1; background:linear-gradient(135deg,#f0f0f0,#dcdcdc); }
.band-dark .product .ph { background:var(--ph-grad); }
.product__name { font-size:var(--fs-caption); font-weight:var(--fw-bold); margin-top:var(--sp-3); }
.product__price { font-size:var(--fs-caption); color:var(--c-on-dark-mute); margin-top:2px; }
.product__link { font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.1em; margin-top:var(--sp-2); border-bottom:2px solid var(--cta); display:inline-block; width:max-content; padding-bottom:2px; }
@media (max-width:700px){ .shop-tiles { grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   COMMUNITY / IG GRID (home)
   ========================================================================== */
.community { text-align:center; }
.ig-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-2); margin-block:var(--sp-6); }
.ig-grid .ph { aspect-ratio:1/1; }
@media (max-width:700px){ .ig-grid { grid-template-columns:repeat(3,1fr); } }

/* ==========================================================================
   FOOTER  → wp: footer.php
   ========================================================================== */
.site-footer { background:var(--c-ink); color:var(--c-on-dark); padding-top:var(--sp-8); }
.footer-cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.6fr; gap:var(--sp-6); }
.footer-col h4 { font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-nav); color:var(--c-on-dark); margin-bottom:var(--sp-4); }
.footer-col li { margin-bottom:var(--sp-2); }
.footer-col a { color:var(--c-on-dark-mute); font-size:var(--fs-caption); transition:color var(--t); }
.footer-col a:hover { color:var(--c-on-dark); }
.footer-brand .wordmark b { color:var(--c-on-dark); }
.footer-brand p { color:var(--c-on-dark-mute); font-size:var(--fs-caption); margin-top:var(--sp-3); max-width:32ch; }
.footer-social { display:flex; gap:var(--sp-2); margin-top:var(--sp-4); }
.footer-social a { width:40px; height:40px; border:1px solid rgba(250,250,250,.2); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius); transition:border-color var(--t), background var(--t); }
.footer-social a:hover { border-color:var(--cta); }
.footer-social svg { width:18px; height:18px; }
.footer-bottom { border-top:1px solid rgba(250,250,250,.12); margin-top:var(--sp-8); padding-block:var(--sp-4); display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.footer-bottom p { font-size:var(--fs-micro); color:var(--c-on-dark-mute); text-transform:uppercase; letter-spacing:.08em; }
.footer-badges { display:flex; gap:var(--sp-2); }
.footer-badges span { font-size:var(--fs-micro); border:1px solid rgba(250,250,250,.2); padding:4px 10px; border-radius:var(--radius); color:var(--c-on-dark-mute); }
@media (max-width:900px){ .footer-cols { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-cols { grid-template-columns:1fr; } }

/* ==========================================================================
   READING PROGRESS BAR (post)
   ========================================================================== */
.progress { position:fixed; top:0; left:0; height:3px; width:0%; background:var(--cta); z-index:var(--z-progress); transition:width var(--t-fast) linear; }

/* ==========================================================================
   POST LAYOUT
   ========================================================================== */
.article-wrap { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.article-grid {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0, var(--content)) minmax(0,1fr);
  gap:var(--sp-6); align-items:start; margin-top:var(--sp-6);
}
/* the whole content column is ONE grid item → sits beside the sticky rail,
   so the tall rail can't push the title into its own row (fixes the top gap). */
.article-main { grid-column:2; min-width:0; }
.article-rail { grid-column:1; position:sticky; top:120px; align-self:start; }
.article-rail--right { grid-column:3; }
@media (max-width:1080px){
  .article-grid { grid-template-columns:1fr; }
  .article-main { grid-column:1; max-width:var(--content); margin-inline:auto; width:100%; }
  .article-rail { display:none; }
}

.breadcrumb { padding-top:var(--sp-5); }
.breadcrumb ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  gap:8px; font-size:var(--fs-caption); color:var(--c-mute); }
.breadcrumb li { list-style:none; display:inline-flex; align-items:center; }
.breadcrumb li::after { content:"›"; margin-left:8px; color:var(--c-mute); }
.breadcrumb li:last-child::after { content:none; }
.breadcrumb li[aria-current] { color:var(--c-ink); }
.breadcrumb a { color:var(--c-mute); }
.breadcrumb a:hover { color:var(--c-ink); }

.article-head { padding-top:var(--sp-4); }
.article-head .eyebrow { color:var(--c-ink-soft); }
.article-head h1 { font-size:var(--fs-h1); letter-spacing:-.01em; }
.byline { display:flex; align-items:center; gap:12px; margin-top:var(--sp-4); font-size:var(--fs-caption); color:var(--c-mute); }
.byline b { color:var(--c-ink); font-weight:var(--fw-bold); }
.byline .sep::before { content:"·"; margin:0 6px; }

/* ---------- TABLE OF CONTENTS (desktop rail) --------------------------- */
.toc__label { font-size:var(--fs-micro); font-weight:var(--fw-bold); text-transform:uppercase; letter-spacing:var(--tracking-eyebrow); color:var(--c-mute); margin-bottom:var(--sp-3); }
.toc ol { counter-reset:toc; }
.toc li { margin-bottom:2px; }
.toc a {
  display:block; padding:8px 0 8px 14px; font-size:var(--fs-caption); color:var(--c-mute);
  border-left:2px solid var(--c-line); transition:color var(--t), border-color var(--t);
  line-height:1.35;
}
.toc a:hover { color:var(--c-ink); }
.toc a.is-active { color:var(--c-ink); border-color:var(--cta); font-weight:var(--fw-bold); }

/* ---------- TOC mobile (collapsible) ----------------------------------- */
.toc-mobile { display:none; }
@media (max-width:1080px){
  .toc-mobile { display:block; max-width:var(--content); margin:var(--sp-5) auto 0; border:1px solid var(--c-line); border-radius:var(--radius); }
  .toc-mobile > summary { list-style:none; cursor:pointer; padding:var(--sp-3) var(--sp-4); font-weight:var(--fw-bold); font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-nav); display:flex; justify-content:space-between; align-items:center; }
  .toc-mobile > summary::-webkit-details-marker { display:none; }
  .toc-mobile > summary::after { content:"▾"; transition:transform var(--t); }
  .toc-mobile[open] > summary::after { transform:rotate(180deg); }
  .toc-mobile ol { padding:0 var(--sp-4) var(--sp-4); }
  .toc-mobile a { border-left:2px solid var(--c-line); }
}

/* ==========================================================================
   INLINE MODULES (post)
   ========================================================================== */
/* shop the products mentioned */
.shop-inline { border:1px solid var(--c-line); background:var(--c-paper-2); border-radius:var(--radius); padding:var(--sp-5); margin-block:var(--sp-6); }
.shop-inline .eyebrow { margin-bottom:var(--sp-4); }
.shop-row { display:flex; align-items:center; gap:var(--sp-4); padding-block:var(--sp-3); border-top:1px solid var(--c-line); }
.shop-row:first-of-type { border-top:0; }
.shop-row .ph { width:72px; height:72px; aspect-ratio:1/1; flex:none; background:linear-gradient(135deg,#f0f0f0,#dcdcdc); border-radius:var(--radius); }
.shop-row__info { flex:1; min-width:0; }
.shop-row__info b { display:block; font-size:var(--fs-caption); color:var(--c-ink); }
.shop-row__info span { font-size:var(--fs-caption); color:var(--c-mute); }

/* right-rail "shop the look" card (sticky, MECLABS: Incentive + low Friction) */
.rail-card { border:1px solid var(--c-line); border-radius:var(--radius); padding:var(--sp-4); }
.rail-card .eyebrow { margin-bottom:var(--sp-3); }
.rail-card .ph { aspect-ratio:1/1; background:linear-gradient(135deg,#f0f0f0,#dcdcdc);
  margin-bottom:var(--sp-3); }
.rail-card__name { display:block; font-size:var(--fs-caption); font-weight:var(--fw-bold); color:var(--c-ink); }
.rail-card__price { display:block; font-size:var(--fs-caption); color:var(--c-mute); margin:2px 0 var(--sp-3); }
.rail-card .btn { width:100%; }
.rail-card__trust { font-size:var(--fs-micro); color:var(--c-mute); text-align:center;
  margin-top:var(--sp-3); line-height:1.4; text-transform:uppercase; letter-spacing:.06em; }

/* E-E-A-T authority seal (rail) — only sourced/defensible signals, no fabricated awards or numbers */
.rail-eeat { margin-top:var(--sp-4); border:1px solid var(--c-line); border-radius:var(--radius); padding:var(--sp-4); }
.eeat-badge { display:flex; gap:10px; align-items:center; padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--c-line); margin-bottom:var(--sp-3); }
.eeat-badge svg { width:30px; height:30px; color:var(--c-ink); flex:none; }
.eeat-badge__k { display:block; font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.14em; color:var(--c-mute); }
.eeat-badge b { font-size:var(--fs-caption); color:var(--c-ink); line-height:1.15; }
.eeat-points { display:flex; flex-direction:column; gap:var(--sp-2); }
.eeat-points li { position:relative; padding-left:20px; font-size:var(--fs-micro); color:var(--c-body); line-height:1.5; }
.eeat-points li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--c-ink); font-weight:var(--fw-bold); }
.eeat-author { display:flex; align-items:center; gap:10px; margin-top:var(--sp-3); padding-top:var(--sp-3);
  border-top:1px solid var(--c-line); font-size:var(--fs-micro); color:var(--c-mute); line-height:1.4; }
.eeat-author b { color:var(--c-ink); font-size:var(--fs-caption); }
.eeat-author:hover b { border-bottom:2px solid var(--cta); }

/* in-content newsletter (mid-article capture) */
.nl-inline { background:var(--c-ink); color:var(--c-on-dark); border-radius:var(--radius); padding:var(--sp-5); margin-block:var(--sp-7); }
.nl-inline .eyebrow { color:var(--cta); }
.nl-inline__title { font-size:var(--fs-h4); color:var(--c-on-dark); margin-bottom:var(--sp-1); }
.nl-inline p.nl-inline__sub { color:var(--c-on-dark-mute); font-size:var(--fs-caption); margin:0 0 var(--sp-4); }
.nl-inline .form-inline { margin-top:0; }
.nl-inline .form-inline input[type="email"] { border-color:transparent; }
.nl-inline .form-microcopy { color:var(--c-on-dark-mute); margin-top:var(--sp-3); }
.nl-inline .form-note { color:var(--cta); }

/* author bio */
.author-bio { display:flex; gap:var(--sp-4); align-items:flex-start; border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding-block:var(--sp-5); margin-block:var(--sp-6); }
.author-bio__body h4 { font-size:var(--fs-h4); }
.author-bio__role { font-size:var(--fs-caption); color:var(--c-mute); margin-top:2px; }
.author-bio__body p { font-size:var(--fs-caption); color:var(--c-body); margin-top:var(--sp-3); line-height:1.6; }
.author-bio__links { display:flex; gap:var(--sp-4); margin-top:var(--sp-3); font-size:var(--fs-micro); text-transform:uppercase; letter-spacing:.1em; }
.author-bio__links a { border-bottom:2px solid var(--cta); padding-bottom:2px; }

/* related posts */
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
@media (max-width:700px){ .related-grid { grid-template-columns:1fr; } }

/* more-from-blog columns */
.more-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.more-col h4 { font-size:var(--fs-caption); text-transform:uppercase; letter-spacing:var(--tracking-nav); padding-bottom:var(--sp-3); border-bottom:2px solid var(--c-ink); margin-bottom:var(--sp-3); }
.more-col ol { counter-reset:rank; }
.more-col li { counter-increment:rank; display:flex; gap:12px; padding-block:var(--sp-3); border-bottom:1px solid var(--c-line); }
.more-col li::before { content:counter(rank,decimal-leading-zero); font-weight:var(--fw-bold); color:var(--c-mute); font-size:var(--fs-caption); flex:none; }
.more-col a { font-size:var(--fs-caption); line-height:1.4; transition:color var(--t); }
.more-col a:hover { color:var(--cta-hover); }
.more-col li small { display:block; color:var(--c-mute); font-size:var(--fs-micro); margin-top:2px; }
@media (max-width:800px){ .more-columns { grid-template-columns:1fr; } }

/* end CTA */
.end-cta { text-align:center; }
.end-cta h2 { font-size:var(--fs-h2); color:var(--c-on-dark); max-width:20ch; margin-inline:auto; }
.end-cta .end-cta__actions { margin-top:var(--sp-5); display:flex; gap:var(--sp-4); justify-content:center; align-items:center; flex-wrap:wrap; }
.end-cta a.ulink { color:var(--c-on-dark-mute); }

/* ==========================================================================
   STICKY MOBILE CTA (post)
   ========================================================================== */
.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky-cta);
  background:var(--c-ink); color:var(--c-on-dark);
  display:flex; align-items:center; gap:var(--sp-3); padding:10px var(--gutter);
  transform:translateY(110%); transition:transform var(--t) var(--ease);
  box-shadow:0 -6px 24px rgba(10,10,10,.25);
}
.sticky-cta.is-visible { transform:translateY(0); }
.sticky-cta .ph { width:44px; height:44px; aspect-ratio:1/1; flex:none; border-radius:var(--radius); }
.sticky-cta__info { flex:1; min-width:0; font-size:var(--fs-caption); }
.sticky-cta__info b { display:block; color:var(--c-on-dark); }
.sticky-cta__info span { color:var(--c-on-dark-mute); font-size:var(--fs-micro); }
@media (min-width:901px){ .sticky-cta { display:none; } }

/* ==========================================================================
   NEWSLETTER MODAL (exit-intent)
   ========================================================================== */
.modal { position:fixed; inset:0; z-index:var(--z-modal); display:none; align-items:center; justify-content:center; padding:var(--gutter); }
.modal.is-open { display:flex; }
.modal__backdrop { position:absolute; inset:0; background:rgba(10,10,10,.6); backdrop-filter:blur(2px); }
.modal__dialog {
  position:relative; z-index:1; width:100%; max-width:760px; background:var(--c-paper);
  border-radius:var(--radius-modal); overflow:hidden; box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1fr 1fr;
  animation:modal-in var(--t-slow) var(--ease-out);
}
@keyframes modal-in { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
.modal__aside { background:var(--c-ink); color:var(--c-on-dark); padding:var(--sp-6); display:flex; flex-direction:column; justify-content:space-between; }
.modal__aside .wordmark b { color:var(--c-on-dark); }
.modal__aside p { font-size:var(--fs-h4); line-height:1.3; color:var(--c-on-dark); margin-top:var(--sp-6); }
.modal__body { padding:var(--sp-6); }
.modal__body h3 { font-size:var(--fs-h3); }
.modal__body > p { color:var(--c-mute); margin-top:var(--sp-2); font-size:var(--fs-caption); }
.modal__body .form-stack { margin-top:var(--sp-4); }
.modal__body input[type="email"] { width:100%; padding:15px 18px; border:2px solid var(--c-ink); border-radius:var(--radius); }
.modal__body .btn { width:100%; margin-top:var(--sp-3); }
.modal__close { position:absolute; top:10px; right:10px; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; color:var(--c-ink); z-index:2; }
.modal__success { display:none; text-align:center; padding:var(--sp-4) 0; }
.modal.is-success .form-stack { display:none; }
.modal.is-success .modal__success { display:block; }
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:640px){ .modal__dialog { grid-template-columns:1fr; } .modal__aside { display:none; } }

/* utility */
.mt-0 { margin-top:0; }
.center { text-align:center; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }