/* =========================================================
   STOPZY — style guide publication (stopzy.com)
   Own design: ink + paper + vermilion, serif headlines.
   ========================================================= */
:root {
  --bg-primary: #F5F5F2;
  --bg-secondary: #ECEBE6;
  --white: #fff;
  --ink: #101114;
  --text-primary: #111111;
  --text-secondary: #4B4B50;
  --text-tertiary: #85858B;
  --accent-gold: #C8321A;
  --accent-gold-light: #F6D9D2;
  --accent-gold-dark: #A32611;
  --border-light: rgba(0,0,0,0.08);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.4s var(--ease-out);
  --radius-full: 999px;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--text-primary); background: var(--bg-primary); line-height: 1.6; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
button { font-family: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; }
:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; border-radius: 4px; }
.sz-wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Header ---------- */
.sz-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-light); transition: box-shadow .2s; }
.sz-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,0.06); }
.sz-header-inner { max-width: 1180px; margin: 0 auto; padding: 0.9rem 1.5rem; display: flex; align-items: center; gap: 2rem; }
.sz-brand { font-family: var(--serif); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.sz-brand span { color: var(--accent-gold); }
.sz-nav { display: flex; gap: 1.75rem; margin-left: auto; align-items: center; }
.sz-nav a { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: color .2s; }
.sz-nav a:hover, .sz-nav a[aria-current="page"] { color: var(--ink); }
.sz-nav a[aria-current="page"] { box-shadow: 0 2px 0 var(--accent-gold); }
.sz-header-cta { display: flex; align-items: center; gap: 0.75rem; }
.sz-burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; padding: 0; position: relative; }
.sz-burger span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s, top .25s; }
.sz-burger span:nth-child(1) { top: 14px; } .sz-burger span:nth-child(2) { top: 19px; } .sz-burger span:nth-child(3) { top: 24px; }
.sz-burger.active span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.sz-burger.active span:nth-child(2) { opacity: 0; }
.sz-burger.active span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
.sz-mobile { display: none; position: fixed; top: 62px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--border-light); padding: 0.5rem 1.5rem 1.25rem; z-index: 999; flex-direction: column; }
.sz-mobile.active { display: flex; }
.sz-mobile a { padding: 0.9rem 0; font-weight: 600; border-bottom: 1px solid var(--border-light); font-size: 1.0625rem; }
.sz-mobile a:last-child { border-bottom: 0; color: var(--accent-gold); }

/* ---------- Buttons ---------- */
.sz-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.35rem; border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem; border: 1.5px solid transparent; transition: transform .2s, background .2s, border-color .2s, color .2s; cursor: pointer; line-height: 1.2; }
.sz-btn:hover { transform: translateY(-2px); }
.sz-btn--red { background: var(--accent-gold); color: #fff; }
.sz-btn--red:hover { background: var(--accent-gold-dark); }
.sz-btn--dark { background: var(--ink); color: #fff; }
.sz-btn--dark:hover { background: #2a2b30; }
.sz-btn--line { border-color: rgba(255,255,255,0.35); color: #fff; }
.sz-btn--line:hover { border-color: #fff; }
.sz-btn--lg { padding: 0.95rem 1.7rem; font-size: 1rem; }

/* ---------- Footer ---------- */
.sz-footer { background: var(--ink); color: rgba(255,255,255,0.62); margin-top: 0; }
.sz-footer-inner { max-width: 1180px; margin: 0 auto; padding: 3.5rem 1.5rem 2rem; }
.sz-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sz-footer .sz-brand { color: #fff; font-size: 1.9rem; }
.sz-footer-about { margin: 0.9rem 0 0; max-width: 300px; font-size: 0.9rem; line-height: 1.65; }
.sz-footer h4 { margin: 0 0 0.9rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.sz-footer ul { list-style: none; display: grid; gap: 0.6rem; }
.sz-footer ul a { font-size: 0.9rem; color: rgba(255,255,255,0.7); transition: color .2s; }
.sz-footer ul a:hover { color: #fff; }
.sz-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; font-size: 0.8125rem; }

/* ---------- Home / hub ---------- */
.sz-hero { position: relative; overflow: hidden; background: var(--ink); color: #F7F4EE; padding: 5.5rem 0 5rem; }
.sz-hero::before { content: ''; position: absolute; right: -180px; top: -200px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(224,74,46,0.55), rgba(224,74,46,0) 65%); pointer-events: none; }
.sz-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.sz-hero .sz-wrap { position: relative; z-index: 1; }
.sz-kicker { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #FF8A73; margin-bottom: 1.25rem; }
.sz-hero h1 { margin: 0 0 1.25rem; font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: 1.02; letter-spacing: -0.03em; font-weight: 600; max-width: 14ch; color: #fff; }
.sz-hero h1 em { font-style: italic; color: #FF8A73; }
.sz-hero p.sz-lead { max-width: 560px; font-size: 1.15rem; line-height: 1.7; color: rgba(255,255,255,0.72); margin: 0 0 2rem; }
.sz-hero-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.sz-hero-stats { display: flex; gap: 2.5rem; margin-top: 3rem; flex-wrap: wrap; }
.sz-hero-stats div strong { display: block; font-family: var(--serif); font-size: 2rem; color: #fff; line-height: 1; }
.sz-hero-stats div span { font-size: 0.8125rem; color: rgba(255,255,255,0.55); }

.sz-section { padding: 4.5rem 0 0; }
.sz-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.sz-section-head h2 { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.1; }
.sz-section-head a { font-weight: 600; font-size: 0.9rem; color: var(--accent-gold); }
.sz-section-head a:hover { text-decoration: underline; }

.sz-feature { display: grid; grid-template-columns: 1.25fr 1fr; background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px var(--border-light), 0 20px 50px rgba(0,0,0,0.06); transition: transform .3s var(--ease-out), box-shadow .3s; margin-top: -3rem; position: relative; z-index: 2; }
.sz-feature:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--border-light), 0 28px 60px rgba(0,0,0,0.1); }
.sz-feature-body { padding: 2.5rem; display: flex; flex-direction: column; justify-content: center; }
.sz-feature-body h3 { margin: 0.4rem 0 0.8rem; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.12; }
.sz-feature-body p { margin: 0 0 1.5rem; color: var(--text-secondary); line-height: 1.7; }
.sz-feature-meta { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; font-size: 0.8125rem; color: var(--text-tertiary); margin-bottom: 1.4rem; }
.sz-chip { display: inline-block; padding: 0.3rem 0.75rem; border-radius: var(--radius-full); background: var(--accent-gold-light); color: var(--accent-gold-dark); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sz-feature-cta { font-weight: 700; font-size: 0.9rem; display: inline-flex; gap: 0.5rem; align-items: center; }
.sz-feature:hover .sz-feature-cta { color: var(--accent-gold); }
.sz-feature-art { display: grid; grid-template-columns: repeat(8, 1fr); min-height: 280px; }
.sz-feature-art i { display: block; transition: transform .5s var(--ease-out); }
.sz-feature:hover .sz-feature-art i:nth-child(odd) { transform: translateY(-10px); }
.sz-feature:hover .sz-feature-art i:nth-child(even) { transform: translateY(10px); }

.sz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.sz-card { display: flex; flex-direction: column; background: #fff; border-radius: 20px; padding: 1.6rem; box-shadow: 0 0 0 1px var(--border-light); transition: transform .3s var(--ease-out), box-shadow .3s; }
.sz-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(200,50,26,0.35), 0 18px 40px rgba(0,0,0,0.08); }
.sz-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.sz-card-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-gold-light); color: var(--accent-gold); }
.sz-card-icon svg { width: 22px; height: 22px; }
.sz-card-meta { font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.04em; }
.sz-card h3 { margin: 0 0 0.6rem; font-size: 1.3rem; line-height: 1.22; }
.sz-card p { margin: 0 0 1.25rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.65; flex: 1; }
.sz-card-cta { font-size: 0.85rem; font-weight: 700; color: var(--ink); display: inline-flex; gap: 0.4rem; align-items: center; }
.sz-card:hover .sz-card-cta { color: var(--accent-gold); }

.sz-banner { background: var(--ink); color: #fff; border-radius: 28px; padding: 2.75rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; position: relative; overflow: hidden; }
.sz-banner::before { content: ''; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(224,74,46,0.5), transparent 68%); pointer-events: none; }
.sz-banner > * { position: relative; }
.sz-banner h3 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; line-height: 1.15; }
.sz-banner p { margin: 0; color: rgba(255,255,255,0.7); max-width: 520px; }
.sz-banner-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sz-banner-wrap { padding: 4rem 0 4.5rem; }

.sz-about { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: start; padding-bottom: 1rem; }
.sz-about h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.sz-about p { margin: 0 0 1rem; color: var(--text-secondary); line-height: 1.8; font-size: 1.0625rem; }
.sz-about a { color: var(--accent-gold); font-weight: 600; }
.sz-about a:hover { text-decoration: underline; }

.sz-pagehead { background: #fff; border-bottom: 1px solid var(--border-light); padding: 3.5rem 0 2.5rem; }
.sz-pagehead h1 { margin: 0.4rem 0 0.8rem; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -0.025em; }
.sz-pagehead p { margin: 0; max-width: 600px; color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7; }
.sz-crumbs { display: flex; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-tertiary); margin-bottom: 1rem; }
.sz-crumbs a { color: var(--accent-gold); font-weight: 600; }

@media (max-width: 900px) {
  .sz-grid { grid-template-columns: repeat(2, 1fr); }
  .sz-feature { grid-template-columns: 1fr; margin-top: -2rem; }
  .sz-feature-art { min-height: 150px; order: -1; }
  .sz-footer-grid { grid-template-columns: 1fr 1fr; }
  .sz-about { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 760px) {
  .sz-nav, .sz-header-cta .sz-btn { display: none; }
  .sz-burger { display: block; margin-left: auto; }
  .sz-header-cta { margin-left: auto; }
  .sz-hero { padding: 3.5rem 0 4rem; }
  .sz-hero h1 { max-width: none; }
  .sz-hero-stats { gap: 1.75rem; }
  .sz-banner { padding: 2rem 1.5rem; }
  .sz-feature-body { padding: 1.75rem 1.4rem; }
}
@media (max-width: 600px) {
  .sz-grid { grid-template-columns: 1fr; }
  .sz-footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .sz-wrap, .sz-header-inner, .sz-footer-inner { padding-left: 1.1rem; padding-right: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* ===== ARTICLES / GUIDES ===== */
    /* === ARTICLES PAGE === */
    .articles-hero {
      text-align: center;
      padding: 10rem 2rem 4rem;
      background: linear-gradient(160deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
      position: relative;
      overflow: hidden;
    }
    .articles-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 800px 500px at 50% 0%, rgba(200,50,26,0.06) 0%, transparent 70%);
      pointer-events: none;
    }

    .articles-breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      justify-content: center;
      margin-bottom: 2rem;
      font-size: 0.8125rem;
      color: var(--text-tertiary);
    }
    .articles-breadcrumb a {
      color: var(--accent-gold);
      font-weight: 500;
      transition: color var(--transition-fast);
    }
    .articles-breadcrumb a:hover { color: var(--text-primary); }
    .articles-breadcrumb span { color: var(--text-tertiary); }

    .articles-hero-title {
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.03em;
      color: #000;
      margin-bottom: 1rem;
    }
    .articles-hero-desc {
      font-size: 1.0625rem;
      line-height: 1.7;
      color: var(--text-secondary);
      max-width: 560px;
      margin: 0 auto;
    }

    /* Featured banner */
    .articles-featured-banner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 2rem;
    }
    .articles-featured-card {
      background: var(--white);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-xl);
      padding: 2rem 2.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
      transition: all var(--transition-base);
    }
    .articles-featured-card:hover {
      border-color: var(--accent-gold);
      box-shadow: var(--shadow-md);
    }
    .articles-featured-eyebrow {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--accent-gold);
      margin-bottom: 0.5rem;
    }
    .articles-featured-title {
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      margin-bottom: 0.375rem;
      line-height: 1.3;
    }
    .articles-featured-desc {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    .articles-featured-arrow {
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      white-space: nowrap;
      flex-shrink: 0;
      transition: gap var(--transition-fast);
    }
    .articles-featured-card:hover .articles-featured-arrow { gap: 0.875rem; }

    /* Article grid */
    .articles-grid-section {
      padding: 4rem 2rem 8rem;
    }
    .articles-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
    }

    .article-card {
      background: var(--white);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-xl);
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      position: relative;
      overflow: hidden;
      transition: all var(--transition-base);
      text-decoration: none;
      color: inherit;
      min-height: 300px;
    }
    .article-card:hover {
      border-color: var(--accent-gold);
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }
    .article-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--accent-gold);
      opacity: 0;
      transition: opacity var(--transition-fast);
    }
    .article-card:hover::before { opacity: 1; }

    .article-card-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, rgba(200,50,26,0.08), rgba(200,50,26,0.03));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-gold);
      flex-shrink: 0;
    }
    .article-card-title {
      font-size: 1.125rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      line-height: 1.3;
    }
    .article-card-desc {
      font-size: 0.875rem;
      line-height: 1.7;
      color: var(--text-secondary);
      flex: 1;
    }
    .article-card-cta {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: auto;
      transition: gap var(--transition-fast);
    }
    .article-card:hover .article-card-cta { gap: 0.875rem; color: var(--accent-gold); }

    .article-card-badge {
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.25rem 0.625rem;
      border-radius: var(--radius-full);
      background: rgba(200,50,26,0.1);
      color: var(--accent-gold);
    }

    /* CTA Banner */
    .articles-cta-section {
      padding: 0 2rem 8rem;
    }
    .articles-cta-banner {
      max-width: 1200px;
      margin: 0 auto;
      background: #1A1A1A;
      border-radius: var(--radius-xl);
      padding: 3.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2rem;
    }
    .articles-cta-content h3 {
      font-size: 1.5rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #fff;
      margin-bottom: 0.5rem;
    }
    .articles-cta-content p {
      font-size: 0.9375rem;
      color: rgba(255,255,255,0.5);
      line-height: 1.6;
    }
    .articles-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.875rem 1.75rem;
      background: #fff;
      color: #1A1A1A;
      font-size: 0.875rem;
      font-weight: 600;
      border-radius: var(--radius-full);
      transition: all var(--transition-base);
      flex-shrink: 0;
      text-decoration: none;
    }
    .articles-cta-btn:hover {
      background: var(--accent-gold-light);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }

    /* Responsive */
    @media (max-width: 900px) {
      .articles-grid { grid-template-columns: repeat(2, 1fr); }
      .articles-featured-card { flex-direction: column; align-items: flex-start; }
      .articles-cta-banner { flex-direction: column; text-align: center; padding: 2.5rem; }
    }
    @media (max-width: 640px) {
      .articles-hero { padding: 8rem 1.25rem 3rem; }
      .articles-grid { grid-template-columns: 1fr; }
      .articles-grid-section { padding: 3rem 1.25rem 5rem; }
      .articles-cta-section { padding: 0 1.25rem 5rem; }
      .articles-cta-banner { padding: 2rem; }
      .articles-cta-content h3 { font-size: 1.25rem; }
      .article-card { min-height: auto; }
    }
  

    /* === GUIDE ARTICLE === */
    .guide-hero { padding-bottom: 2.5rem; }
    .guide-hero .articles-hero-title { font-size: clamp(1.75rem, 4.2vw, 2.9rem); max-width: 860px; margin-left:auto; margin-right:auto; }
    .guide-meta { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--text-tertiary); letter-spacing: 0.02em; }
    .guide-body { max-width: 760px; margin: 0 auto; padding: 1rem 2rem 4rem; font-size: 1.0625rem; line-height: 1.8; color: var(--text-secondary); }
    .guide-intro { font-size: 1.25rem; line-height: 1.7; color: var(--text-primary); margin-bottom: 2.5rem; }
    .guide-body h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #000; margin: 2.75rem 0 0.9rem; line-height: 1.25; }
    .guide-body p { margin: 0 0 1.1rem; }
    .guide-body ul, .guide-body ol { margin: 0 0 1.25rem 1.25rem; padding: 0; }
    .guide-body ul { list-style: disc; } .guide-body ol { list-style: decimal; }
    .guide-body li { margin-bottom: 0.55rem; padding-left: 0.25rem; }
    .guide-body strong { color: var(--text-primary); font-weight: 600; }
    .guide-callout { margin: 1.5rem 0; padding: 1.1rem 1.35rem; border-left: 3px solid var(--accent-gold); background: var(--bg-secondary); border-radius: 0 12px 12px 0; font-size: 1rem; line-height: 1.7; }
    .guide-takeaway { margin-top: 3rem; padding: 1.5rem 1.75rem; border-radius: 16px; background: var(--bg-secondary); }
    .guide-takeaway h2 { margin: 0 0 0.5rem; font-size: 1.125rem; }
    .guide-takeaway p { margin: 0; color: var(--text-primary); }
    .guide-related { max-width: 760px; margin: 0 auto; padding: 0 2rem 4rem; }
    .guide-related h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; color:#000; }
    .guide-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .guide-related a { display:block; padding: 1.1rem 1.25rem; border-radius: 14px; border: 1px solid rgba(0,0,0,0.08); font-weight: 600; color: var(--text-primary); line-height: 1.4; transition: border-color .2s, transform .2s; }
    .guide-related a:hover { border-color: var(--accent-gold); transform: translateY(-2px); }
    @media (max-width: 640px) { .guide-hero { padding-top: 8rem; } .guide-body { padding: 0.5rem 1.25rem 3rem; font-size: 1rem; } .guide-related { padding: 0 1.25rem 3rem; } .guide-related-grid { grid-template-columns: 1fr; } }
  

/* ===== GUIDE: headings, table, button, featured card ===== */
.guide-body h3 { font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.01em; color: var(--text-primary); margin: 2rem 0 0.6rem; line-height: 1.35; }
.guide-table-wrap { overflow-x: auto; margin: 1.5rem 0; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; }
.guide-body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.guide-body th, .guide-body td { text-align: left; padding: 0.8rem 1.1rem; border-bottom: 1px solid rgba(0,0,0,0.06); }
.guide-body th { background: var(--bg-secondary); color: var(--text-primary); font-weight: 600; }
.guide-body tr:last-child td { border-bottom: 0; }
.guide-body td:first-child { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.guide-btn { display: inline-flex; align-items: center; padding: 0.85rem 1.6rem; border-radius: 999px; background: #000; color: #fff !important; font-weight: 600; font-size: 0.9375rem; transition: transform .2s, background .2s; }
.guide-btn:hover { transform: translateY(-2px); background: #222; }
.article-card--featured { grid-column: 1 / -1; }
.article-card--featured .article-card-title { font-size: 1.625rem; max-width: 760px; }
.article-card--featured .article-card-desc { max-width: 720px; }

/* ===== GUIDE: table of contents ===== */
.guide-toc { margin: 0 0 2.5rem; padding: 1.25rem 1.5rem; border-radius: 16px; background: var(--bg-secondary); }
.guide-toc-title { margin: 0 0 0.5rem !important; font-weight: 700; color: var(--text-primary); font-size: 0.9375rem; letter-spacing: 0.02em; }
.guide-toc ol { margin: 0 0 0 1.1rem; font-size: 0.9375rem; line-height: 1.6; }
.guide-toc li { margin-bottom: 0.3rem; }
.guide-toc a, .guide-body p a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 3px; }
.guide-toc a:hover, .guide-body p a:hover { color: var(--text-primary); }
.guide-body h2[id] { scroll-margin-top: 6rem; }

/* ===== GUIDE: colour palette board ===== */
.palette-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 1.75rem 0 1.25rem; }
.palette-chip { aspect-ratio: 4 / 3; border-radius: 14px; display: flex; align-items: flex-end; padding: 0.7rem 0.8rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.palette-chip { position:relative; overflow:hidden; }
.palette-chip::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0) 55%); pointer-events:none; }
.palette-chip--light::after { background:linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); }
.palette-chip span { position:relative; z-index:1; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: #fff; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.palette-chip--light span { color: #1A1A1A; text-shadow:none; }
.swatch-dot { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 50%; margin-right: 0.6rem; vertical-align: -0.1rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
@media (max-width: 640px) { .palette-board { grid-template-columns: repeat(2, 1fr); } }

/* ===== GUIDE DECORATIONS (CSS + inline SVG only) ===== */
.guide-hero::after { content:''; position:absolute; right:-140px; top:-140px; width:520px; height:520px; border-radius:50%; pointer-events:none;
  background: repeating-radial-gradient(circle at center, transparent 0 46px, rgba(200,50,26,0.10) 46px 47px); mask-image: radial-gradient(circle, #000 25%, transparent 70%); -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%); }
.guide-hero::before { background: radial-gradient(ellipse 700px 420px at 15% 100%, rgba(200,50,26,0.09) 0%, transparent 70%), radial-gradient(ellipse 800px 500px at 50% 0%, rgba(200,50,26,0.06) 0%, transparent 70%) !important; }
.guide-hero > * { position: relative; z-index: 1; }
.guide-hero-icon { width: 64px; height: 64px; margin: 0 auto 1.5rem; border-radius: 20px; display:flex; align-items:center; justify-content:center; color: var(--accent-gold);
  background: linear-gradient(145deg, #fff, #F8E5E0); box-shadow: 0 0 0 1px rgba(200,50,26,0.18), 0 10px 30px rgba(200,50,26,0.14); }
.guide-hero-icon svg { width: 28px; height: 28px; }
.guide-pills { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; margin-top: 1.5rem; }
.pill { display:inline-flex; align-items:center; gap:0.4rem; padding:0.35rem 0.85rem; border-radius:999px; font-size:0.75rem; font-weight:600; letter-spacing:0.04em; background: rgba(0,0,0,0.05); color: var(--text-secondary); }
.pill--gold { background: rgba(200,50,26,0.12); color: var(--accent-gold); text-transform: uppercase; letter-spacing: 0.1em; }
.guide-body h2::before { content:''; display:block; width:36px; height:3px; border-radius:2px; background: var(--accent-gold); margin-bottom: 0.9rem; }
.guide-takeaway { border-left: 3px solid var(--accent-gold); }
.guide-related a { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.guide-related a::after { content:'\2192'; color: var(--accent-gold); font-weight:700; flex-shrink:0; }

.info-box { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border-radius: 16px; background: linear-gradient(135deg, rgba(200,50,26,0.10), rgba(200,50,26,0.04)); border: 1px solid rgba(200,50,26,0.22); }
.info-box-label { display:block; margin-bottom: 0.4rem; font-size:0.6875rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--accent-gold); }
.info-box p { margin: 0 !important; color: var(--text-primary); font-size: 1.0625rem; line-height: 1.7; }

.stat-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 2rem 0; }
.stat-card { padding: 1.25rem 1rem; text-align:center; border-radius: 18px; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04); }
.stat-value { display:block; font-size: 2.5rem; font-weight:700; letter-spacing:-0.03em; line-height:1; color: var(--accent-gold); }
.stat-label { display:block; margin-top: 0.5rem; font-size: 0.8125rem; font-weight:600; color: var(--text-secondary); letter-spacing: 0.02em; }

.flow-diagram { display:flex; align-items:stretch; gap:0.4rem; margin: 2rem 0; }
.flow-step { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:0.5rem; }
.flow-step-box { width:100%; padding: 1rem 0.6rem; border-radius: 16px; background:#fff; box-shadow: 0 0 0 1px rgba(200,50,26,0.22), 0 6px 18px rgba(200,50,26,0.08); }
.flow-step-num { display:block; margin: 0 auto 0.4rem; width:26px; height:26px; line-height:26px; border-radius:50%; font-size:0.75rem; font-weight:700; background: var(--accent-gold); color:#fff; }
.flow-step-label { display:block; font-weight:700; font-size: 0.9375rem; color: var(--text-primary); line-height:1.3; }
.flow-step-cap { font-size: 0.78rem; line-height:1.45; color: var(--text-tertiary); }
.flow-arrow { align-self:flex-start; margin-top: 1.9rem; color: var(--accent-gold); font-weight:700; flex-shrink:0; }
.diagram-label { text-align:center; font-size:0.6875rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--text-tertiary); margin: 2rem 0 -1rem; }

.piece { position:relative; margin: 1.1rem 0; padding: 1.25rem 1.5rem 0.4rem 4.25rem; border-radius: 18px; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 6px 20px rgba(0,0,0,0.03); }
.piece-num { position:absolute; left:1.15rem; top:1.2rem; width:2.2rem; height:2.2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9375rem; color:#fff; background: linear-gradient(145deg, #E04A2E, var(--accent-gold)); box-shadow: 0 4px 10px rgba(200,50,26,0.3); }
.guide-body .piece h3 { margin: 0.2rem 0 0.5rem; }
.piece-chips { position:absolute; right:1.25rem; top:1.35rem; display:flex; }
.piece-chips i { width:1.5rem; height:1.5rem; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14), 0 0 0 2px #fff; }
.piece-chips i + i { margin-left:-0.45rem; }
.piece--outfit h3 { padding-right: 4rem; }

.faq-item { margin: 0.7rem 0; border-radius: 16px; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); overflow:hidden; }
.faq-item summary { cursor:pointer; list-style:none; padding: 1.1rem 3rem 1.1rem 1.4rem; font-weight:600; color: var(--text-primary); position:relative; line-height:1.45; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; position:absolute; right:1.3rem; top:50%; transform:translateY(-50%); font-size:1.5rem; font-weight:400; color: var(--accent-gold); transition: transform .2s; }
.faq-item[open] summary::after { content:'\2212'; }
.faq-item p { margin: 0 !important; padding: 0 1.4rem 1.25rem; }

.guide-cta-card { margin: 2rem 0 0; padding: 2rem 1.75rem; text-align:center; border-radius: 24px; color:#fff; background: radial-gradient(ellipse 500px 300px at 85% 0%, rgba(224,74,46,0.35), transparent 70%), #1A1A1A; }
.guide-cta-card p { color: rgba(255,255,255,0.92) !important; font-size:1.25rem; font-weight:600; line-height:1.4; margin: 0 0 1.25rem !important; }
.guide-cta-card .guide-btn { background:#fff; color:#000 !important; }
.guide-cta-card .guide-btn:hover { background:#F3EBDD; }

@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
  .flow-diagram { flex-direction:column; align-items:stretch; }
  .flow-arrow { align-self:center; margin:0; transform: rotate(90deg); }
  .piece { padding-left: 3.75rem; padding-right: 1.1rem; }
  .piece-chips { right:1rem; }
}

.guide-takeaway h2::before { display: none; }

/* ===== GUIDE: first-hand voice ===== */
.my-take { margin: 1.5rem 0; padding: 1.1rem 1.35rem; border-radius: 0 16px 16px 0; border-left: 3px solid var(--accent-gold); background: linear-gradient(90deg, rgba(200,50,26,0.10), rgba(200,50,26,0.02)); }
.my-take-label { display:block; margin-bottom:0.4rem; font-size:0.6875rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color: var(--accent-gold); }
.my-take p { margin: 0 0 0.7rem !important; color: var(--text-primary); font-size: 1rem; line-height: 1.7; font-style: italic; }
.my-take p:last-child { margin-bottom: 0 !important; }
.piece .my-take { margin-bottom: 1.1rem; }
.author-box { display:flex; gap:1.1rem; align-items:flex-start; margin-top: 3rem; padding: 1.4rem 1.5rem; border-radius: 20px; background:#fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04); }
.author-avatar { flex-shrink:0; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; color: var(--accent-gold); background: linear-gradient(145deg, #fff, #F8E5E0); box-shadow: 0 0 0 1px rgba(200,50,26,0.22); }
.author-box p { margin: 0 !important; font-size: 0.9688rem; line-height: 1.7; }

/* ===== GUIDE: named author ===== */
.author-photo { flex-shrink:0; width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:center 20%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(200,50,26,0.35); }
.author-name { font-weight:700; color: var(--text-primary); font-size:1.0625rem; margin: 0 0 0.35rem !important; }
.pill--author { padding-left:0.3rem; background: rgba(0,0,0,0.05); color: var(--text-primary); }
.pill--author img { width:20px; height:20px; border-radius:50%; object-fit:cover; object-position:center 20%; }


/* =========================================================
   STOPZY — guide page overrides (editorial, left-aligned)
   ========================================================= */
.guide-hero { text-align: left; background: #fff !important; border-bottom: 1px solid var(--border-light); padding: 3rem max(1.25rem, calc((100% - 760px) / 2)) 2.25rem !important; overflow: visible; }
.guide-hero::before, .guide-hero::after { display: none !important; }
.guide-hero .articles-breadcrumb { justify-content: flex-start; margin-bottom: 1.5rem; font-size: 0.8125rem; }
.guide-hero .guide-hero-icon { margin: 0 0 1.25rem; width: 52px; height: 52px; border-radius: 15px; background: var(--accent-gold-light); box-shadow: none; }
.guide-hero .guide-hero-icon svg { width: 24px; height: 24px; }
.guide-hero .articles-hero-title { font-family: var(--serif); text-align: left; max-width: none; margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; color: var(--ink); }
.guide-hero .articles-hero-desc { margin: 0; max-width: 640px; text-align: left; font-size: 1.1rem; }
.guide-hero .guide-pills { justify-content: flex-start; }
.pill--gold { background: var(--accent-gold-light); color: var(--accent-gold-dark); }
.guide-body h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; }
.guide-body h3 { font-family: var(--serif); font-weight: 600; }
.guide-intro { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.65; }
.guide-takeaway h2 { font-size: 1.15rem; }
.guide-cta-card { background: radial-gradient(ellipse 500px 300px at 85% 0%, rgba(224,74,46,0.4), transparent 70%), var(--ink); }
.guide-btn { background: var(--accent-gold); }
.guide-btn:hover { background: var(--accent-gold-dark); }
.guide-cta-card .guide-btn { background: #fff; }
.guide-related h2 { font-family: var(--serif); font-size: 1.3rem; }
.guide-related a { background: #fff; }
.sz-banner-wrap .sz-wrap { max-width: 1180px; }

.sz-feature-body .sz-chip { align-self: flex-start; }

/* ---------- Featured card v3: flat, detailed ---------- */
.sz-hero { padding-bottom: 5rem; }
.sz-hero + .sz-wrap { padding-top: 3.5rem; }
.sz-feature { grid-template-columns: 1.25fr 1fr; margin-top: 0 !important; box-shadow: 0 0 0 1px var(--border-light), 0 8px 24px rgba(0,0,0,0.04); }
.sz-feature:hover { transform: none; box-shadow: 0 0 0 1px rgba(200,50,26,0.35), 0 14px 34px rgba(0,0,0,0.07); }
.sz-feature-body { padding: 2.5rem 2.75rem; }
.sz-feature-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.sz-feature-body .sz-chip { align-self: auto; display: inline-flex; align-items: center; gap: 0.4rem; }
.sz-feature-read { font-size: 0.8125rem; font-weight: 600; color: var(--text-tertiary); }
.sz-feature-body h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.12; margin: 0 0 0.8rem; }
.sz-feature-body p { font-size: 1rem; margin: 0 0 1.5rem; }
.sz-feature-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.6rem; }
.sz-feature-stats > div { padding: 0.9rem 1rem; border-radius: 14px; background: var(--bg-primary); box-shadow: inset 0 0 0 1px var(--border-light); }
.sz-feature-stats strong { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--accent-gold); }
.sz-feature-stats span { display: block; margin-top: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.02em; }
.sz-feature-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: 1.35rem; border-top: 1px solid var(--border-light); }
.sz-feature-author { display: flex; align-items: center; gap: 0.7rem; }
.sz-feature-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--border-light); }
.sz-feature-who { display: flex; flex-direction: column; line-height: 1.25; }
.sz-feature-who strong { font-size: 0.875rem; color: var(--text-primary); font-weight: 600; }
.sz-feature-who small { font-size: 0.75rem; color: var(--text-tertiary); }
.sz-feature-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.3rem; border-radius: var(--radius-full); background: var(--ink); color: #fff; font-weight: 600; font-size: 0.875rem; transition: background .2s; }
.sz-feature:hover .sz-feature-btn { background: var(--accent-gold); }
.sz-feature-panel { position: relative; overflow: hidden; padding: 2rem 2rem 1.75rem; background: var(--bg-secondary); display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.sz-feature-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0%, rgba(224,74,46,0.16), transparent 55%); pointer-events: none; }
.sz-panel-label { position: relative; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
.sz-panel-note { position: relative; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--text-secondary); }
.sz-swatches { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; padding-bottom: 14px; }
.sz-sw { aspect-ratio: 3 / 4; border-radius: 14px; display: flex; align-items: flex-end; padding: 0.55rem; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.08); transition: transform .4s var(--ease-out); }
.sz-sw:nth-child(even) { transform: translateY(14px); }
.sz-sw b { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; line-height: 1.1; }
.sz-sw.sw-l b { color: #1A1A1A; }
.sz-feature:hover .sz-sw:nth-child(odd) { transform: translateY(-6px); }
.sz-feature:hover .sz-sw:nth-child(even) { transform: translateY(8px); }
@media (max-width: 900px) { .sz-feature { grid-template-columns: 1fr; } .sz-feature-panel { order: -1; padding: 1.5rem 1.4rem 1.4rem; } .sz-feature-body { padding: 1.75rem 1.4rem; } }
@media (max-width: 600px) { .sz-sw b { display: none; } .sz-hero { padding-bottom: 3.5rem; } .sz-hero + .sz-wrap { padding-top: 2.25rem; } .sz-feature-stats { gap: 0.5rem; } .sz-feature-stats > div { padding: 0.75rem 0.7rem; } .sz-feature-stats strong { font-size: 1.6rem; } }

/* =========================================================
   Theme toggle button
   ========================================================= */
.sz-theme { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border-light); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .2s, border-color .2s; flex-shrink: 0; }
.sz-theme:hover { background: var(--bg-secondary); border-color: rgba(128,128,128,0.4); }
.sz-theme svg { width: 20px; height: 20px; }
.sz-theme .ic-sun { display: none; }
:root[data-theme="dark"] .sz-theme .ic-sun { display: block; }
:root[data-theme="dark"] .sz-theme .ic-moon { display: none; }
.sz-header-cta { gap: 0.5rem; }
body { transition: background-color .25s, color .25s; }

/* =========================================================
   DARK MODE
   ========================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #14161A;
  --bg-secondary: #1E2127;
  --surface: #1B1E24;
  --ink: #F1EFEA;
  --text-primary: #F1EFEA;
  --text-secondary: #B3B2AC;
  --text-tertiary: #8A8A84;
  --accent-gold: #FF7A5C;
  --accent-gold-light: rgba(255,122,92,0.16);
  --accent-gold-dark: #FFA08A;
  --border-light: rgba(255,255,255,0.1);
}
:root[data-theme="dark"] .sz-header { background: rgba(20,22,26,0.92); }
:root[data-theme="dark"] .sz-header.scrolled { box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
:root[data-theme="dark"] .sz-mobile { background: #1B1E24; }
:root[data-theme="dark"] .sz-hero, :root[data-theme="dark"] .sz-footer, :root[data-theme="dark"] .sz-banner { background-color: #0B0C0F; }
:root[data-theme="dark"] .sz-banner { background: #0B0C0F; box-shadow: 0 0 0 1px var(--border-light); }
:root[data-theme="dark"] .guide-cta-card { background: radial-gradient(ellipse 500px 300px at 85% 0%, rgba(224,74,46,0.4), transparent 70%), #0B0C0F; box-shadow: 0 0 0 1px var(--border-light); }
:root[data-theme="dark"] .sz-btn--dark, :root[data-theme="dark"] .sz-feature-btn { background: #F1EFEA; color: #101114; }
:root[data-theme="dark"] .sz-btn--dark:hover { background: #fff; }
:root[data-theme="dark"] .sz-btn--red { background: #FF7A5C; color: #14161A; }
:root[data-theme="dark"] .sz-btn--red:hover { background: #FF9078; }
:root[data-theme="dark"] .sz-feature:hover .sz-feature-btn { background: #FF7A5C; color: #14161A; }
:root[data-theme="dark"] .guide-btn { background: #F1EFEA; color: #101114 !important; }
:root[data-theme="dark"] .guide-btn:hover { background: #fff; }
:root[data-theme="dark"] .sz-feature, :root[data-theme="dark"] .sz-card, :root[data-theme="dark"] .sz-pagehead,
:root[data-theme="dark"] .piece, :root[data-theme="dark"] .stat-card, :root[data-theme="dark"] .flow-step-box,
:root[data-theme="dark"] .faq-item, :root[data-theme="dark"] .author-box, :root[data-theme="dark"] .guide-related a { background: var(--surface); }
:root[data-theme="dark"] .sz-feature, :root[data-theme="dark"] .sz-card, :root[data-theme="dark"] .piece, :root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .flow-step-box, :root[data-theme="dark"] .faq-item, :root[data-theme="dark"] .author-box, :root[data-theme="dark"] .guide-related a { box-shadow: 0 0 0 1px var(--border-light); }
:root[data-theme="dark"] .sz-card:hover, :root[data-theme="dark"] .sz-feature:hover { box-shadow: 0 0 0 1px rgba(255,122,92,0.5), 0 14px 34px rgba(0,0,0,0.4); }
:root[data-theme="dark"] .guide-hero { background: var(--surface) !important; }
:root[data-theme="dark"] .guide-hero .guide-hero-icon { background: var(--accent-gold-light); box-shadow: inset 0 0 0 1px rgba(255,122,92,0.25); }
:root[data-theme="dark"] .guide-hero .articles-hero-title, :root[data-theme="dark"] .guide-body h2, :root[data-theme="dark"] .guide-related h2 { color: var(--text-primary); }
:root[data-theme="dark"] .guide-body strong { color: var(--text-primary); }
:root[data-theme="dark"] .pill { background: rgba(255,255,255,0.08); color: var(--text-secondary); }
:root[data-theme="dark"] .pill--gold { background: var(--accent-gold-light); color: var(--accent-gold-dark); }
:root[data-theme="dark"] .pill--author { color: var(--text-primary); }
:root[data-theme="dark"] .guide-body th, :root[data-theme="dark"] .guide-body td { border-bottom-color: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .guide-table-wrap { border-color: rgba(255,255,255,0.1); }
:root[data-theme="dark"] .author-photo, :root[data-theme="dark"] .sz-feature-author img { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border-light); }
:root[data-theme="dark"] .piece-chips i { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 0 0 2px var(--surface); }
:root[data-theme="dark"] .sz-sw { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 16px rgba(0,0,0,0.35); }
:root[data-theme="dark"] .sz-feature-panel::before { background: radial-gradient(circle at 100% 0%, rgba(255,122,92,0.14), transparent 55%); }
:root[data-theme="dark"] .guide-toc a, :root[data-theme="dark"] .guide-body p a { color: var(--accent-gold); }
:root[data-theme="dark"] .guide-callout, :root[data-theme="dark"] .my-take { color: var(--text-primary); }
:root[data-theme="dark"] .sz-hero::before { opacity: 0.9; }

/* ---------- Dark mode: contact / privacy / terms (older stylesheet) ---------- */
:root[data-theme="dark"] { --white: #1B1E24; }
:root[data-theme="dark"] .text-display, :root[data-theme="dark"] .section-title,
:root[data-theme="dark"] .hero-title, :root[data-theme="dark"] .hero-desc { color: var(--text-primary); }
:root[data-theme="dark"] .card { box-shadow: 0 0 0 1px var(--border-light); }
:root[data-theme="dark"] .contact-sidebar { background: #0F1013; box-shadow: 0 0 0 1px var(--border-light); }
:root[data-theme="dark"] .contact-type-btn.is-active { background: rgba(255,122,92,0.12); }
:root[data-theme="dark"] .contact-type-btn:hover { background: rgba(255,122,92,0.08); }
:root[data-theme="dark"] .contact-input:focus { box-shadow: 0 0 0 3px rgba(255,122,92,0.18); }
:root[data-theme="dark"] .btn-primary { background: #F1EFEA; color: #101114; }
:root[data-theme="dark"] .btn-primary::before { background: #fff; }
:root[data-theme="dark"] .section-cream { background: var(--bg-secondary); }

/* Outfit illustrations (men's guide) */
.piece--art { display:grid; grid-template-columns: minmax(0,1fr) 168px; column-gap:1.4rem; align-items:start; padding-bottom:1.1rem; }
.piece--art > :not(.outfit-art):not(.piece-num) { grid-column:1; }
.piece--art .outfit-art { grid-column:2; grid-row:1 / span 4; width:100%; height:auto; border-radius:16px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
.piece--art h3 { padding-right:0 !important; }
@media (max-width: 560px) {
  .piece--art { grid-template-columns: 1fr; }
  .piece--art .outfit-art { grid-column:1; grid-row:auto; order:5; max-width:220px; margin:.4rem auto .6rem; }
}
:root[data-theme="dark"] .piece--art .outfit-art { box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }

/* Featured panel with outfit illustrations */
.sz-outfit-fan { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; align-items:end; }
.sz-outfit-fan img { width:100%; height:auto; border-radius:16px; box-shadow:0 0 0 1px rgba(0,0,0,.07), 0 12px 26px rgba(0,0,0,.14); transition:transform .4s var(--ease-out, ease); }
.sz-outfit-fan img:nth-child(2) { transform:translateY(-14px); }
.sz-feature:hover .sz-outfit-fan img:nth-child(odd) { transform:translateY(-6px); }
.sz-feature:hover .sz-outfit-fan img:nth-child(2) { transform:translateY(-20px); }
@media (max-width:600px){ .sz-outfit-fan { gap:.4rem; } .sz-outfit-fan img { border-radius:12px; } }

/* Guide figures */
.guide-fig { margin:1.6rem 0; }
.guide-fig img { display:block; width:100%; height:auto; border-radius:20px; box-shadow:0 0 0 1px rgba(0,0,0,0.06), 0 10px 28px rgba(0,0,0,0.08); }
.guide-fig figcaption { margin-top:.6rem; font-size:.8125rem; color:var(--text-tertiary); text-align:center; }
.fig-pair { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin:2rem 0; }
.fig-pair .guide-fig { margin:0; }
:root[data-theme="dark"] .guide-fig img { box-shadow:0 0 0 1px rgba(255,255,255,0.10), 0 14px 34px rgba(0,0,0,0.45); filter:brightness(.94); }
@media (max-width:520px){ .fig-pair { gap:.75rem; } .guide-fig figcaption { font-size:.75rem; } .guide-fig img { border-radius:14px; } }

/* Compact outfit cards */
.piece--outfit.piece--art { grid-template-columns:minmax(0,1fr) 148px; column-gap:1.25rem; margin:.9rem 0; padding:1.1rem 1.2rem 1rem 3.9rem; border-radius:18px; align-items:center; }
.piece--outfit.piece--art .piece-num { left:1rem; top:1.1rem; width:2rem; height:2rem; font-size:.875rem; }
.guide-body .piece--outfit.piece--art h3 { margin:0 0 .4rem; font-size:1.12rem; line-height:1.3; }
.piece--outfit.piece--art p { margin:0 0 .6rem; font-size:1rem; line-height:1.65; }
.piece--outfit.piece--art p:last-of-type { margin-bottom:0; }
.piece--outfit.piece--art .outfit-art { grid-row:1 / span 4; border-radius:14px; }
@media (max-width:640px){
  .piece--outfit.piece--art { grid-template-columns:minmax(0,1fr) 96px; column-gap:.85rem; padding:.9rem .9rem .85rem 3.2rem; margin:.75rem 0; }
  .piece--outfit.piece--art .piece-num { left:.7rem; top:.9rem; width:1.75rem; height:1.75rem; }
  .piece--outfit.piece--art .outfit-art { grid-column:2; grid-row:1 / span 4; order:0; max-width:none; margin:0; border-radius:12px; }
  .guide-body .piece--outfit.piece--art h3 { font-size:1rem; }
  .piece--outfit.piece--art p { font-size:.9rem; line-height:1.55; }
}

/* Outfit card grid (image-top cards, desktop/tablet) */
@media (min-width:641px){
  .outfit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; width:min(1040px, calc(100vw - 4rem)); margin:1.6rem 0 1.6rem 50%; transform:translateX(-50%); }
  .outfit-grid .piece--outfit.piece--art { display:flex; flex-direction:column; margin:0; padding:.7rem .7rem 1.1rem; border-radius:22px; align-items:stretch; box-shadow:0 0 0 1px rgba(0,0,0,0.06), 0 10px 28px rgba(0,0,0,0.05); }
  .outfit-grid .piece--outfit.piece--art .outfit-art { order:-1; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 40%; border-radius:16px; margin:0; max-width:none; }
  .outfit-grid .piece--outfit.piece--art .piece-num { left:1.3rem; top:1.3rem; width:auto; min-width:2rem; height:2rem; padding:0 .6rem; border-radius:999px; font-size:.8125rem; z-index:2; background:var(--ink, #14161A); box-shadow:0 4px 12px rgba(0,0,0,.25); }
  .outfit-grid .piece--outfit.piece--art h3 { margin:.95rem .5rem .35rem; font-size:1.08rem; line-height:1.3; }
  .outfit-grid .piece--outfit.piece--art p { margin:0 .5rem .5rem; font-size:.9375rem; line-height:1.6; }
  .outfit-grid .piece--outfit.piece--art p:last-of-type { margin-bottom:0; }
}
@media (min-width:641px) and (max-width:960px){
  .outfit-grid { grid-template-columns:repeat(2,1fr); width:100%; margin-left:0; transform:none; }
}
:root[data-theme="dark"] .outfit-grid .piece--outfit.piece--art .piece-num { background:#F1EFEA; color:#14161A; }

/* Outfit photos inside classic outfit cards */
.piece--outfit .outfit-photo { display:block; width:100%; max-width:340px; height:auto; margin:.9rem 0 1.1rem; border-radius:14px; box-shadow:0 0 0 1px rgba(0,0,0,.06), 0 8px 22px rgba(0,0,0,.08); }
:root[data-theme="dark"] .piece--outfit .outfit-photo { box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 10px 26px rgba(0,0,0,.4); filter:brightness(.95); }
@media (max-width:520px){ .piece--outfit .outfit-photo { max-width:100%; } }

/* Outfit cards: text left, photo right */
@media (min-width:641px){
  .piece--outfit:has(.outfit-photo) { display:grid; grid-template-columns:1fr 230px; column-gap:1.5rem; align-items:start; padding-bottom:1.25rem; }
  .piece--outfit:has(.outfit-photo) > :not(.outfit-photo):not(.piece-num):not(.piece-chips) { grid-column:1; }
  .piece--outfit:has(.outfit-photo) .outfit-photo { grid-column:2; grid-row:1 / span 6; margin:.2rem 0 0; max-width:none; }
  .piece--outfit:has(.outfit-photo) .piece-chips { display:none; }
  .piece--outfit:has(.outfit-photo) h3 { padding-right:0; }
}

/* Women / men notes */
.gender-note { font-size:.9rem !important; line-height:1.6; margin:.6rem 0 1rem !important; padding:.6rem .85rem; border-radius:10px; background:rgba(193,154,107,.14); color:var(--text-secondary); }
.gender-note strong { color:var(--text-primary); }
:root[data-theme="dark"] .gender-note { background:rgba(255,255,255,.06); }

/* Featured card: fabric swatches */
.sz-sw { position:relative; overflow:hidden; }
.sz-sw::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%); pointer-events:none; }
.sz-sw.sw-l::after { background:linear-gradient(to top, rgba(255,255,255,.55), rgba(255,255,255,0) 55%); }
.sz-sw b { position:relative; z-index:1; text-shadow:0 1px 5px rgba(0,0,0,.35); }
.sz-sw.sw-l b { text-shadow:none; }

/* Hero art: line-drawn hanger with stitched rings */
.sz-hero-art { position:absolute; right:0; top:50%; transform:translateY(-50%); width:min(34%,400px); aspect-ratio:1/1; pointer-events:none; }
.sz-hero-art svg { width:100%; height:100%; display:block; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.sz-hero-art svg .ring { transform-origin:200px 205px; animation:szspin 120s linear infinite; }
@keyframes szspin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .sz-hero-art svg .ring { animation:none; } }
/* Measuring-tape ticks along the bottom edge of the hero */
.sz-hero .sz-tape { position:absolute; left:0; right:0; bottom:0; height:22px; z-index:1; opacity:.5; background:repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, transparent 1px 12px) bottom/100% 8px no-repeat, repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 1px, transparent 1px 60px) bottom/100% 16px no-repeat; pointer-events:none; }
@media (max-width:1100px){ .sz-hero-art { display:none; } }

/* Sewing machine replaces the hanger */
.sz-hero-art svg .ring { animation:none; }
.sew-wheel { transform-origin:0 0; animation:sewspin 1.6s linear infinite; }
.sew-needle { animation:sewneedle 1.6s ease-in-out infinite; }
.sew-stitch { animation:sewfeed 1.6s linear infinite; }
.sew-thread { animation:sewthread 1.6s linear infinite; }
@keyframes sewspin { to { transform:rotate(360deg); } }
@keyframes sewneedle { 0%,100% { transform:translateY(0); } 50% { transform:translateY(9px); } }
@keyframes sewfeed { to { stroke-dashoffset:-14; } }
@keyframes sewthread { to { stroke-dashoffset:-10; } }
@media (prefers-reduced-motion:reduce){ .sew-wheel,.sew-needle,.sew-stitch,.sew-thread { animation:none; } }
.sz-hero::before { display:none; }
.sz-hero-art { width:min(42%,500px); right:-3%; }

.sz-hero-art svg { filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)); }

.sz-hero-art { width:min(42%,500px); right:-2%; }
.sz-hero-art svg { filter:none; }

/* Patent-sheet hero art */
.sz-hero-art { width:min(44%,560px); aspect-ratio:560/400; right:-1%; }
.sz-hero-art svg { filter:none; }
.pat-spin { animation:sewspin 8s linear infinite; transform-origin:0 0; }
.pat-spin2 { animation:sewspin 10s linear infinite reverse; transform-origin:0 0; }
@media (prefers-reduced-motion:reduce){ .pat-spin,.pat-spin2 { animation:none; } }
.sz-hero-art { width:min(37%,500px); right:-1%; }
@media (max-width:1250px){ .sz-hero-art { width:min(34%,440px); } }
@media (max-width:1250px){ .sz-hero-art { right:2%; width:min(33%,420px); } }

/* Blueprint art: no card, fills the right side of the hero */
.sz-hero-art.sz-blueprint { top:0; bottom:0; right:0; transform:none; width:auto; height:100%; aspect-ratio:4/3; max-width:56%; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%); mask-image:linear-gradient(90deg, transparent 0, #000 10%); }
.sz-blueprint svg { width:100%; height:100%; }
@media (max-width:1250px){ .sz-hero-art.sz-blueprint { right:0; width:auto; max-width:50%; } }
.sz-hero-art.sz-blueprint { right:2%; }
/* Blueprint art: scale with screen width, sit at the right edge */
.sz-hero .sz-hero-art.sz-blueprint { top:50%; bottom:auto; right:3%; height:auto; max-width:none; width:min(40vw,780px); aspect-ratio:4/3; transform:translateY(-50%); }
.sz-hero .sz-hero-art.sz-blueprint svg { width:100%; height:100%; }
.sz-hero .sz-hero-art.sz-blueprint { width:min(32vw,620px); right:5%; }

/* Light mode hero */
:root[data-theme="light"] .sz-hero { background: #F1EEE7; color: var(--ink); }
:root[data-theme="light"] .sz-hero::after { background-image: linear-gradient(rgba(16,17,20,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(16,17,20,0.06) 1px, transparent 1px); }
:root[data-theme="light"] .sz-hero h1 { color: var(--ink); }
:root[data-theme="light"] .sz-hero h1 em { color: var(--accent-gold); }
:root[data-theme="light"] .sz-hero .sz-kicker { color: var(--accent-gold); }
:root[data-theme="light"] .sz-hero p.sz-lead { color: var(--text-secondary); }
:root[data-theme="light"] .sz-hero .sz-btn--line { color: var(--ink); border-color: rgba(16,17,20,0.35); background: transparent; }
:root[data-theme="light"] .sz-hero .sz-btn--line:hover { background: rgba(16,17,20,0.06); }
:root[data-theme="light"] .sz-hero .sz-tape { opacity: .55; filter: invert(1); }
:root[data-theme="light"] .sz-hero-art svg { filter: invert(1) hue-rotate(180deg); }