/* ==========================================================================
   EMBERLY — A1 SITE THEME  ·  "Soft Warmth"
   --------------------------------------------------------------------------
   A1-exclusive visual theme. This file is loaded AFTER the shared skeleton
   (style.css / pages.css / articles.css) and only does two things:

     1. Overrides design tokens in :root (warm amber palette, oversized
        radii, feather-soft diffusion shadows, warmer ink greys).
     2. Applies a small set of component refinements (pill buttons, cream
        badges, rounded hero frame, 1px warm stroke on card corners).

   Rules honoured here:
     · style.css is never edited — the skeleton stays identical across sites.
     · No raw colour literals inside component rules: every colour, radius
       and shadow resolves through a custom property declared below.
   Do not load this file on the sister sites (A2–A6).
   ========================================================================== */

:root {
  --font-body: Inter, sans-serif;
  /* ---- palette: warm amber replaces the shared teal ------------------- */
  --color-bg: #fdf8f4;
  --color-bg-alt: #f8efe6;
  --color-surface: #fffdfb;
  --color-surface-soft: #fcf4ec;
  --color-ink: #2c2320;
  --color-ink-soft: #5a4b43;
  --color-muted: #8c7a70;
  --color-accent: #c9784a;
  --color-accent-deep: #9a5530;
  --color-accent-soft: #f6e4d4;
  --color-accent-wash: #fdf3ea;
  --color-hairline: rgba(120, 72, 44, 0.12);
  --color-hairline-strong: rgba(120, 72, 44, 0.2);
  --color-highlight: rgba(255, 255, 255, 0.92);
  --color-warm: #e0a163;

  /* ---- theme-only tokens (the only place colour literals live) -------- */
  --color-cream: #fbf0e1;                       /* badge / eyebrow base   */
  --color-on-accent: #fff8f1;                   /* text on amber          */
  --color-card-edge: rgba(201, 120, 74, 0.26);  /* 1px card outline       */
  --color-corner-edge: rgba(201, 120, 74, 0.52);/* card corner stroke     */
  --color-accent-tint: rgba(201, 120, 74, 0.07);
  --color-glass: rgba(255, 253, 251, 0.92);     /* floating glass panels  */
  --color-glass-soft: rgba(255, 255, 255, 0.16);
  --color-glass-hover: rgba(255, 255, 255, 0.26);
  --color-glow-fade: rgba(253, 243, 234, 0);
  --color-nav-shadow: 0 18px 42px -34px rgba(120, 72, 44, 0.5);
  --shadow-accent: 0 18px 40px -22px rgba(154, 85, 48, 0.55);
  --shadow-accent-hover: 0 26px 56px -24px rgba(154, 85, 48, 0.62);

  /* ---- radii: oversized, pill-leaning -------------------------------- */
  --radius-sm: 1rem;
  --radius-md: 1.75rem;
  --radius-lg: 2.5rem;
  --radius-xl: 3rem;

  /* ---- shadows: feather-soft, warm-tinted diffusion ------------------- */
  --shadow-ambient: 0 34px 80px -44px rgba(120, 72, 44, 0.3);
  --shadow-lift: 0 46px 96px -46px rgba(120, 72, 44, 0.42);
  --shadow-inset: inset 0 1px 1px var(--color-highlight);
}/* ==========================================================================
   EMBERLY — A1 SITE THEME  ·  "Soft Warmth"
   --------------------------------------------------------------------------
   A1-exclusive visual theme. This file is loaded AFTER the shared skeleton
   (style.css / pages.css / articles.css) and only does two things:

     1. Overrides design tokens in :root (warm amber palette, oversized
        radii, feather-soft diffusion shadows, warmer ink greys).
     2. Applies a small set of component refinements (pill buttons, cream
        badges, rounded hero frame, 1px warm stroke on card corners).

   Rules honoured here:
     · style.css is never edited — the skeleton stays identical across sites.
     · No raw colour literals inside component rules: every colour, radius
       and shadow resolves through a custom property declared below.
   Do not load this file on the sister sites (A2–A6).
   ========================================================================== */

/* ==========================================================================
   EMBERLY — A1 SITE THEME  ·  "Soft Warmth"
   --------------------------------------------------------------------------
   A1-exclusive visual theme. This file is loaded AFTER the shared skeleton
   (style.css / pages.css / articles.css) and only does two things:

     1. Overrides design tokens in :root (warm amber palette, oversized
        radii, feather-soft diffusion shadows, warmer ink greys).
     2. Applies a small set of component refinements (pill buttons, cream
        badges, rounded hero frame, 1px warm stroke on card corners).

   Rules honoured here:
     · style.css is never edited — the skeleton stays identical across sites.
     · No raw colour literals inside component rules: every colour, radius
       and shadow resolves through a custom property declared below.
   Do not load this file on the sister sites (A2–A6).
   ========================================================================== */

/* ==========================================================================
   EMBERLY — A1 SITE THEME  ·  "Soft Warmth"
   --------------------------------------------------------------------------
   A1-exclusive visual theme. This file is loaded AFTER the shared skeleton
   (style.css / pages.css / articles.css) and only does two things:

     1. Overrides design tokens in :root (warm amber palette, oversized
        radii, feather-soft diffusion shadows, warmer ink greys).
     2. Applies a small set of component refinements (pill buttons, cream
        badges, rounded hero frame, 1px warm stroke on card corners).

   Rules honoured here:
     · style.css is never edited — the skeleton stays identical across sites.
     · No raw colour literals inside component rules: every colour, radius
       and shadow resolves through a custom property declared below.
   Do not load this file on the sister sites (A2–A6).
   ========================================================================== */



/* ==========================================================================
   1. Typography — heavier display weight, slightly tighter tracking
   ========================================================================== */
h1,
h2,
h3 {
  font-weight: 850;
  letter-spacing: -0.02em;
}

.hero-title,
.section-title {
  font-weight: 850;
  letter-spacing: -0.02em;
}

.brand-name,
.cap-title,
.product-name,
.cert-mark,
.insight-card h3,
.stat-value {
  font-weight: 850;
  letter-spacing: -0.02em;
}

.hero-title {
  line-height: 1.03;
}

/* ==========================================================================
   2. Buttons — fully pill, warm amber fill, soft glass inner icon
   ========================================================================== */
/* Geometry is attached to every button variant because parts of the shared
   markup omit the base `.btn` class (e.g. `class="btn-primary"`). */
.btn,
.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-pill);
  padding: 0.8rem 0.8rem 0.8rem 1.6rem;
}

/* Keep the skeleton's compact sizing for `.btn-sm` (cascade order matters). */
.btn-sm {
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent-hover);
}

.btn-ghost {
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-card-edge);
}

.btn-icon {
  background: var(--color-glass-soft);
}

.btn:hover .btn-icon {
  background: var(--color-glass-hover);
}

/* On the amber fill the icon becomes a cream disc with an amber glyph so the
   arrow stays legible (the skeleton's white-on-white disc washed out). */
.btn-primary .btn-icon,
.nav-cta .btn-icon {
  background: var(--color-on-accent);
  color: var(--color-accent-deep);
}

.btn-primary:hover .btn-icon,
.nav-cta:hover .btn-icon {
  background: var(--color-on-accent);
  color: var(--color-accent);
}

.rail-btn {
  border: 1px solid var(--color-card-edge);
}

/* The skeleton's nav CTA is marked `.btn-primary.btn-sm.nav-cta` without the
   base `.btn` class, so it would stay square. Restore the pill geometry here
   instead of touching style.css. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}

.nav-cta:hover {
  background: var(--color-accent-deep);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent-hover);
}

/* ==========================================================================
   3. Badges & eyebrows — cream base, warm border instead of solid ink
   ========================================================================== */
.brand-badge,
.eyebrow {
  background: var(--color-cream);
  color: var(--color-accent-deep);
  box-shadow: inset 0 0 0 1px var(--color-card-edge);
}

.brand-badge {
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.62rem;
  letter-spacing: 0.14em;
}

.eyebrow {
  border-radius: var(--radius-pill);
  letter-spacing: 0.18em;
}

/* ==========================================================================
   4. Hero — warm halo, rounded frame, glass float card
   ========================================================================== */
.hero::before {
  background: radial-gradient(
    circle,
    var(--color-accent-wash) 0%,
    var(--color-glow-fade) 68%
  );
}

.hero-frame {
  /* sits inside .bezel, so stay one hair smaller than the outer radius */
  border-radius: calc(var(--radius-xl) - 0.5rem);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-card-edge);
  box-shadow: var(--shadow-ambient), var(--shadow-inset);
}

.hero-frame img,
.hero-fallback {
  border-radius: inherit;
}

.hero-float {
  border-radius: var(--radius-md);
  background: var(--color-glass);
  border: 1px solid var(--color-card-edge);
  box-shadow: var(--shadow-lift), var(--shadow-inset);
}

.nav-inner.is-scrolled {
  box-shadow: var(--color-nav-shadow);
}

.bezel--flat {
  background: var(--color-accent-tint);
}

/* ==========================================================================
   5. Cards — 1px warm outline + 1px warm stroke on the top-right corner
   ========================================================================== */
.bezel-core,
.bento-card,
.product-card,
.cap-card,
.cert-card,
.insight-card,
.related-card,
.quote-form,
.spec-table {
  position: relative;
  border: 1px solid var(--color-card-edge);
}

.bezel-core::after,
.bento-card::after,
.product-card::after,
.cap-card::after,
.cert-card::after,
.insight-card::after,
.related-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(2.5rem, 34%, 5rem);
  aspect-ratio: 1 / 1;
  border-top: 1px solid var(--color-corner-edge);
  border-right: 1px solid var(--color-corner-edge);
  border-top-right-radius: inherit;
  pointer-events: none;
}

.product-card:hover,
.insight-card:hover,
.bento-card:hover {
  border-color: var(--color-corner-edge);
}

.product-media {
  background: var(--color-surface-soft);
}

/* ==========================================================================
   6. Dark surfaces — warm ink, amber highlights (no leftover teal)
   ========================================================================== */
.stat-value span,
.battery-list svg,
.hero-proof-item svg,
.product-tag,
.insight-tag {
  color: var(--color-warm);
}

.product-tag,
.insight-tag,
.cap-num {
  letter-spacing: 0.16em;
}

/* ==========================================================================
   7. Forms — cream fields, soft focus ring
   ========================================================================== */
.quote-form input,
.quote-form select,
.quote-form textarea {
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
}

.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}


/* ==========================================================================


/* ==========================================================================
   DE-AI TYPOGRAPHY — self-hosted (no external requests)
   ========================================================================== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Fraunces-400-0.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Fraunces-400-1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Fraunces-400-2.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Fraunces-500-3.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Fraunces-500-4.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Fraunces-500-5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Fraunces-600-6.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Fraunces-600-7.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Fraunces-600-8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Fraunces-900-9.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Fraunces-900-10.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Fraunces-900-11.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   FORCE REQUESTED DISPLAY FONTS (appended last to win the cascade)
   ========================================================================== */
:root {
  --font-display: "Fraunces", "Plus Jakarta Sans", Georgia, serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
}
html body { font-family: "Plus Jakarta Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, h4, .hero-title, .section-title, .stat-value, .cap-title, .product-name, .bento-title, .insight-card h3, .cert-mark, .about-meta-value, .insight-title, .pdp-h2 { font-family: "Fraunces", "Plus Jakarta Sans", Georgia, serif; }

/* ==========================================================================
   A1 — EDITORIAL MAGAZINE REDESIGN
   --------------------------------------------------------------------------
   Fraunces display serif + Plus Jakarta Sans body. Asymmetric 60/40 hero,
   offset stat spread, inline editorial figures, numbered margin notes.
   ========================================================================== */
:root {
  --font-display: "Fraunces", "Plus Jakarta Sans", Georgia, serif;
  --font-body: "Plus Jakarta Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
}

body { font-family: var(--font-body); }

h1, h2, h3, h4,
.hero-title, .section-title, .stat-value, .cap-title, .product-name,
.bento-title, .insight-card h3, .cert-mark, .about-meta-value {
  font-family: var(--font-display);
}

/* ---- hero: 60/40 with a giant folio + quotation mark -------------------- */
.hero.is-magazine { padding-block: clamp(3rem, 7vw, 6rem); }
.hero.is-magazine::before {
  background: radial-gradient(circle at 88% 8%, var(--color-accent-wash) 0%, var(--color-glow-fade) 62%);
}
.magazine-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.magazine-copy .eyebrow { display: inline-block; }
.magazine-note {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-ink-soft);
  max-width: 44ch;
}
.magazine-note span {
  display: block;
  margin-top: 0.3rem;
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.magazine-visual { position: relative; padding-left: clamp(1rem, 3vw, 2.5rem); }
.magazine-folio {
  position: absolute;
  top: -0.6rem;
  left: -0.2rem;
  font-size: clamp(6.5rem, 15vw, 12rem);
  line-height: 0.8;
  color: var(--color-accent-soft);
  font-variant-numeric: tabular-nums;
  z-index: 0;
}
.magazine-quote {
  position: absolute;
  right: -0.4rem;
  bottom: -2.2rem;
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: 0.7;
  color: var(--color-accent);
  opacity: 0.35;
  z-index: 0;
}
.magazine-caption {
  margin-top: var(--space-4);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--color-muted);
  max-width: 42ch;
}

/* ---- asymmetric stat spread ------------------------------------------- */
.stats-asym { background: var(--color-ink); color: var(--color-highlight); padding-block: clamp(3rem, 6vw, 5rem); }
.stats-asym-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
}
.as-item { display: flex; flex-direction: column; gap: 0.35rem; }
.as-item--xl { grid-column: 1 / span 5; padding-top: 1.5rem; }
.as-item--xl .as-num { font-size: clamp(3.5rem, 7vw, 6rem); }
.as-item--sm { grid-column: 7 / span 3; margin-top: 3.2rem; }
.as-item--sm .as-num { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.as-item--mid { grid-column: 10 / span 3; }
.as-item--mid .as-num { font-size: clamp(1.8rem, 2.6vw, 2.4rem); color: var(--color-accent-soft); }
.as-item--wide { grid-column: 2 / span 6; margin-top: 1.2rem; }
.as-item--wide .as-num { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.as-item--tiny { grid-column: 9 / span 4; margin-top: -1.6rem; }
.as-item--tiny .as-num { font-size: 1.35rem; color: var(--color-accent-soft); }
.as-num { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.as-item--xl .as-num span, .as-item--sm .as-num span { color: var(--color-accent-soft); }
.as-label {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  max-width: 22ch;
}
.stats-asym .trust-note { margin-top: var(--space-7); }

/* ---- editorial spread ------------------------------------------------- */
.editorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.editorial-lede { position: sticky; top: 6rem; }
.editorial-body p { font-size: 1.06rem; line-height: 1.75; color: var(--color-ink-soft); margin-block: 0 1.2rem; }
.editorial-body p.reveal { max-width: 62ch; }
.inline-fig { margin: 0 0 var(--space-7) clamp(0rem, 3vw, 2.5rem); }
.inline-fig--right { margin-left: auto; margin-right: clamp(0rem, 3vw, 2.5rem); }
.inline-fig img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-hairline);
  display: block;
}
.inline-fig figcaption {
  margin-top: 0.7rem;
  font-size: var(--fs-small);
  color: var(--color-muted);
  font-style: italic;
  font-family: var(--font-display);
}
.editorial-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.editorial-link svg { width: 16px; height: 16px; }

/* ---- numbered margin notes -------------------------------------------- */
.notes-list { list-style: none; padding: 0; counter-reset: none; }
.notes-item {
  display: grid;
  grid-template-columns: clamp(2.5rem, 5vw, 4rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: var(--space-7);
  border-top: 1px solid var(--color-hairline);
}
.notes-item:last-child { border-bottom: 1px solid var(--color-hairline); }
.notes-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 500;
  color: var(--color-accent);
  line-height: 1;
}
.notes-item h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.notes-item p { margin-top: 0.5rem; color: var(--color-ink-soft); max-width: 58ch; }

/* ---- inline compliance index ------------------------------------------ */
.editorial-cert .cert-layout { align-items: start; }
.cert-inline { list-style: none; padding: 0; margin-top: var(--space-8); }
.cert-inline li {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: 0.85rem;
  border-top: 1px solid var(--color-hairline);
}
.cert-inline li:last-child { border-bottom: 1px solid var(--color-hairline); }
.cert-mark { flex: 0 0 auto; min-width: 5.5rem; font-family: var(--font-display); }
.cert-text { font-size: var(--fs-small); color: var(--color-ink-soft); }

@media (max-width: 900px) {
  .magazine-grid, .editorial-grid { grid-template-columns: 1fr; }
  .editorial-lede { position: static; }
  .as-item--xl, .as-item--sm, .as-item--mid, .as-item--wide, .as-item--tiny {
    grid-column: 1 / -1; margin-top: 0;
  }
  .as-item--tiny { margin-top: 0; }
}