/* spencer-taylor.com — static site stylesheet
   Layers: reset → tokens → base → layout → components → utilities
   Every value is a token. Nothing renders below 1rem. */
@layer reset, tokens, base, layout, components, utilities;

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body { min-height: 100svh; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul, ol { list-style: none; padding: 0; }
  h1, h2, h3, h4, p { overflow-wrap: break-word; }
  a { color: inherit; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    /* brand */
    --c-charcoal: #222222;
    --c-ink: #12141a;
    --c-white: #ffffff;
    --c-amber: #ffc966;
    --c-amber-1: #ffb733;
    --c-amber-tint: #ffedcc;
    --c-blue: #4082d0;        /* fills only */
    --c-blue-text: #2c69b1;   /* 5.58:1 on white */
    --c-blue-1: #92b8e4;
    --c-blue-2: #bbd2ee;
    --c-blue-3: #e4edf8;
    --c-peach: #fbe4d7;
    --c-gray-1: #f7f7f7;
    --c-gray-2: #efefef;

    /* semantic — light */
    --bg: var(--c-white);
    --bg-alt: var(--c-blue-3);
    --bg-tint: var(--c-amber-tint);
    --bg-dark: var(--c-charcoal);
    --fg: var(--c-charcoal);
    --fg-on-dark: var(--c-white);
    --link: var(--c-blue-text);
    --link-on-dark: var(--c-amber);
    --accent: var(--c-amber);
    --accent-fg: var(--c-charcoal);
    --rule: var(--c-gray-2);
    --glass-bg: rgba(255,255,255,.58);
    --glass-border: rgba(255,255,255,.85);
    --glass-shadow: 0 10px 28px rgba(34,34,34,.08), 0 1px 2px rgba(34,34,34,.06), inset 0 1px 0 rgba(255,255,255,.9);
    --glass-bg-dark: rgba(255,255,255,.06);
    --glass-border-dark: rgba(255,255,255,.22);
    --glass-shadow-dark: 0 10px 28px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.18);
    --blob-blue: var(--c-blue-2);
    --blob-amber: var(--c-amber);
    --blob-opacity: .55;
    --field-bg: var(--c-white);
    --field-border: var(--c-blue-1);
    --header-bg: rgba(255,255,255,.86);
    --card-bg: var(--c-white);
    --shadow: 0 6px 18px rgba(34,34,34,.08);

    /* type — Perfect Fourth, fluid 390→1440 */
    --font: "Ubuntu Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-base: clamp(1.0625rem, 1.039rem + 0.0952vw, 1.125rem);
    --fs-md:   clamp(1.25rem, 1.155rem + 0.381vw, 1.5rem);
    --fs-lg:   clamp(1.5rem, 1.31rem + 0.762vw, 2rem);
    --fs-xl:   clamp(1.875rem, 1.575rem + 1.206vw, 2.667rem);
    --fs-2xl:  clamp(2.25rem, 1.754rem + 1.99vw, 3.556rem);
    --fw-body: 500;
    --fw-strong: 700;
    --lh-body: 1.65;
    --lh-tight: 1.15;
    --ls-heading: -0.015em;

    /* space — fluid scale (min at 390, max at 1440) */
    --sp-1: clamp(0.5rem, 0.45rem + 0.2vw, 0.625rem);
    --sp-2: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
    --sp-3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
    --sp-4: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --sp-5: clamp(3rem, 2.2rem + 3.2vw, 5rem);
    --sp-6: clamp(4rem, 2.8rem + 4.8vw, 7rem);
    --gutter: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);

    /* widths, radii, misc */
    --w-site: 80rem;
    --w-mid: 64rem;
    --w-text: 44rem;
    --r-card: 12px;
    --r-pill: 999px;
    --ratio-wide: 16 / 10;
    --t-fast: .2s ease;
    --header-h: 4.5rem;
  }
  :root[data-theme="dark"] {
    --bg: var(--c-ink);
    --bg-alt: #1a1d25;
    --bg-tint: #1f1a12;
    --bg-dark: #0b0c10;
    --fg: #f3f5f9;
    --link: var(--c-amber);
    --rule: #2a2e38;
    --glass-bg: rgba(255,255,255,.06);
    --glass-border: rgba(255,255,255,.18);
    --glass-shadow: var(--glass-shadow-dark);
    --blob-opacity: .18;
    --field-bg: #1a1d25;
    --field-border: #3a4a66;
    --header-bg: rgba(18,20,26,.86);
    --card-bg: #1a1d25;
    --shadow: 0 6px 18px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
@layer base {
  @font-face {
    font-family: "Ubuntu Sans";
    font-style: normal;
    font-weight: 100 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("/assets/fonts/ubuntu-sans-latin.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: "Ubuntu Sans";
    font-style: normal;
    font-weight: 100 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("/assets/fonts/ubuntu-sans-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  html { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 100%; }
  body { font-size: var(--fs-base); font-weight: var(--fw-body); line-height: var(--lh-body); background: var(--bg); color: var(--fg); transition: background-color var(--t-fast), color var(--t-fast); }
  h1, h2, h3, h4 { font-weight: var(--fw-strong); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); text-wrap: balance; }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
  h3 { font-size: var(--fs-md); }
  h4 { font-size: var(--fs-base); }
  p, li { max-width: var(--w-text); }
  strong { font-weight: var(--fw-strong); }
  a:not([class]) { color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--c-amber); transition: color var(--t-fast); }
  a:not([class]):hover { color: var(--fg); }
  :focus-visible { outline: 3px solid var(--c-amber); outline-offset: 3px; border-radius: 4px; }
  .on-dark :focus-visible { outline-color: var(--c-amber); }
  ::selection { background: var(--c-amber); color: var(--c-charcoal); }
}

/* ---------- layout ---------- */
@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--w-site)); margin-inline: auto; }
  .wrap--mid { max-width: var(--w-mid); }
  .section { padding-block: var(--sp-6); position: relative; }
  .section--alt { background: var(--bg-alt); }
  .section--tint { background: var(--bg-tint); }
  .section--dark { background: var(--bg-dark); color: var(--fg-on-dark); }
  .section--flush-top { padding-top: 0; }
  .section__intro { max-width: var(--w-text); margin-bottom: var(--sp-4); }
  .section__intro--center { margin-inline: auto; text-align: center; }
  .section__intro--center p { margin-inline: auto; }
  .section__intro p { margin-top: var(--sp-2); }
  .grid { display: grid; gap: var(--sp-3); align-items: stretch; }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  @media (min-width: 40rem) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
  }
  .split { display: grid; gap: var(--sp-4); align-items: center; }
  @media (min-width: 56.25rem) { .split { grid-template-columns: 1.1fr .9fr; } .split--rev > :first-child { order: 2; } }
  .stack > * + * { margin-top: var(--sp-2); }
  @media (min-width: 56.25rem) { .split--even { grid-template-columns: 1fr 1fr; } }
  .checks--panel { padding: var(--sp-3); border-radius: var(--r-card); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
  .checks--panel li { max-width: none; }
  .section--dark .checks--panel { background: var(--glass-bg-dark); border-color: var(--glass-border-dark); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  .skip { position: absolute; left: var(--sp-2); top: -100px; z-index: 1000; background: var(--c-amber); color: var(--c-charcoal); padding: .75rem 1.25rem; border-radius: var(--r-pill); font-weight: var(--fw-strong); }
  .skip:focus { top: var(--sp-2); }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- components ---------- */
@layer components {
  /* buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.5rem; border-radius: var(--r-pill); background: var(--c-amber); color: var(--c-charcoal) !important; border: 2px solid var(--c-charcoal); font-weight: var(--fw-strong); font-size: 1.0625rem; text-decoration: none; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
  .btn:hover, .btn:focus-visible { background: var(--c-charcoal); color: var(--c-white) !important; border-color: var(--c-white); transform: translateY(-1px); }
  .btn--ghost { background: transparent; color: var(--fg) !important; border-color: currentColor; }
  .btn--ghost:hover, .btn--ghost:focus-visible { background: var(--c-amber); color: var(--c-charcoal) !important; border-color: var(--c-charcoal); }
  .on-dark .btn--ghost, .section--dark .btn--ghost, .hero .btn--ghost { color: var(--c-white) !important; }
  .on-dark .btn--ghost:hover, .section--dark .btn--ghost:hover, .hero .btn--ghost:hover, .hero--light .btn--ghost:hover, .on-dark .btn--ghost:focus-visible, .section--dark .btn--ghost:focus-visible, .hero .btn--ghost:focus-visible, .hero--light .btn--ghost:focus-visible { color: var(--c-charcoal) !important; }
  [data-theme="dark"] .btn:hover, [data-theme="dark"] .btn:focus-visible { background: var(--c-white); color: var(--c-charcoal) !important; border-color: var(--c-charcoal); }
  .link-arrow { font-weight: var(--fw-strong); color: var(--link); display: inline; padding: .1rem .3rem; margin: -.1rem -.3rem; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color var(--t-fast), color var(--t-fast); }
  /* the arrow is decorative: inline-block so the underline never reaches it, glued to the last word so it never wraps alone */
  .link-arrow::after { content: "\2192"; display: inline-block; margin-left: .35em; text-decoration: none; }
  .link-arrow { text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .section--dark .link-arrow, .hero .link-arrow, .cta-band .link-arrow { color: var(--c-amber); }
  .link-arrow:hover, .link-arrow:focus-visible, .section--dark .link-arrow:hover, .hero .link-arrow:hover, .cta-band .link-arrow:hover, .section--dark .link-arrow:focus-visible, .hero .link-arrow:focus-visible, .cta-band .link-arrow:focus-visible { background: var(--c-amber); color: var(--c-charcoal); text-decoration-color: transparent; }

  /* header */
  .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border-bottom: 1px solid var(--rule); }
  .site-header > .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: var(--header-h); }
  .logo { flex: 0 0 auto; }
  .logo img { width: clamp(10rem, 8rem + 6vw, 14.5rem); height: auto; }
  .site-header > .wrap .theme-switch { display: none; }
  @media (min-width: 64rem) { .site-header > .wrap .theme-switch { display: inline-flex; } }
  .nav-panel .theme-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-weight: var(--fw-strong); }
  [data-theme="dark"] .logo img { filter: brightness(0) invert(1); }
  .nav { display: none; }
  .nav ul { display: flex; align-items: center; gap: clamp(.75rem, .4rem + 1vw, 1.5rem); }
  .nav ul > li { display: flex; align-items: center; }
  .nav ul a { color: var(--fg); text-decoration: none; font-weight: var(--fw-strong); padding: .5rem .25rem; border-bottom: 2px solid transparent; transition: border-color var(--t-fast); }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--c-amber); }
  .nav .has-sub { position: relative; gap: .1rem; }
  .nav .has-sub::after { content: ""; position: absolute; left: -1rem; right: -1rem; top: 100%; height: 1.25rem; }
  .nav .sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 6px; color: var(--fg); }
  .nav .sub-toggle svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast); }
  .nav .sub-toggle:hover, .nav .sub-toggle:focus-visible { background: var(--c-amber-tint); color: var(--c-charcoal); }
  .nav .has-sub[data-open="true"] .sub-toggle svg { transform: rotate(180deg); }
  .nav .sub { position: absolute; top: calc(100% + .9rem); left: -.75rem; z-index: 110; display: none; grid-template-columns: repeat(2, max-content); gap: .1rem var(--sp-3); padding: var(--sp-2); border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--rule); box-shadow: var(--shadow); }
  .nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub, .nav .has-sub[data-open="true"] .sub { display: grid; }
  .nav .sub a { display: block; white-space: nowrap; padding: .5rem .6rem; border-bottom: 0; border-radius: 6px; border-left: 2px solid transparent; }
  .nav .sub a:hover, .nav .sub a:focus-visible, .nav .sub a[aria-current="page"] { background: var(--c-amber-tint); color: var(--c-charcoal); border-left-color: var(--c-amber); }
  .nav-panel .m-sub summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; padding: .8rem 0; font-weight: var(--fw-strong); border-bottom: 1px solid var(--rule); }
  .nav-panel .m-sub summary::-webkit-details-marker { display: none; }
  .nav-panel .m-sub summary svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast); }
  .nav-panel .m-sub[open] summary svg { transform: rotate(180deg); }
  .nav-panel .sub { padding: 0 0 .5rem 1rem; display: grid; }
  .nav-panel .sub a { padding: .6rem 0; font-weight: var(--fw-body); }
  .nav-panel .sub-toggle { display: none; }
  .header-actions { display: flex; align-items: center; gap: var(--sp-1); }
  .header-actions .btn { min-height: 2.75rem; padding-block: .5rem; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 8px; border: 2px solid var(--fg); color: var(--fg); }
  .nav-toggle svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  .nav-toggle .ico-close, .nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
  .nav-toggle[aria-expanded="true"] .ico-close { display: block; }
  .nav-panel { display: none; border-top: 1px solid var(--rule); background: var(--bg); }
  .nav-panel[data-open="true"] { display: block; }
  .nav-panel ul { padding: var(--sp-2) 0; display: grid; }
  .nav-panel ul a { color: var(--fg); display: block; padding: .8rem 0; font-weight: var(--fw-strong); text-decoration: none; border-bottom: 1px solid var(--rule); }
  @media (min-width: 64rem) { .nav { display: block; } .nav-toggle { display: none; } .nav-panel { display: none !important; } }

  /* theme switch */
  .theme-switch { display: inline-flex; border: 2px solid var(--fg); border-radius: var(--r-pill); padding: 2px; gap: 2px; }
  .theme-switch button { width: 2.25rem; height: 2.25rem; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--fg); transition: background-color var(--t-fast), color var(--t-fast); }
  .theme-switch button svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .theme-switch button[aria-pressed="true"] { background: var(--c-amber); color: var(--c-charcoal); }
  .theme-switch button:hover { background: var(--c-amber-tint); color: var(--c-charcoal); }

  /* hero */
  .hero { background: var(--bg-dark); color: var(--fg-on-dark); position: relative; overflow: hidden; isolation: isolate; padding-block: var(--sp-6); }
  .hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(48px); pointer-events: none; opacity: .18; }
  .hero::before { width: 34rem; height: 34rem; left: -10rem; top: -8rem; background: radial-gradient(circle, var(--c-blue-2) 0%, var(--c-blue-3) 40%, transparent 70%); }
  .hero::after { width: 28rem; height: 28rem; right: -8rem; bottom: -10rem; background: radial-gradient(circle, var(--c-amber) 0%, var(--c-amber-tint) 40%, transparent 70%); }
  .hero__grid { display: grid; gap: var(--sp-4); align-items: center; }
  @media (min-width: 56.25rem) { .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .hero__grid > .hero__art { display: flex; align-items: center; } .hero__grid .hero__art > img, .hero__grid .hero__art > svg { width: 100%; max-width: none; margin: 0; } .hero__grid .hero__photo { height: auto; aspect-ratio: 4 / 3; object-fit: cover; } }
  .hero h1 { max-width: 22ch; }
  .hero .lede { font-size: var(--fs-md); margin-top: var(--sp-2); max-width: 46ch; }
  .hero--center > .wrap { text-align: center; }
  .hero--center h1, .hero--center .lede, .hero--center p { max-width: 52rem; margin-inline: auto; }
  .hero--center .cluster { justify-content: center; }
  .hero .lede + p { margin-top: var(--sp-2); max-width: 46ch; }
  .hero .cluster { margin-top: var(--sp-3); }
  .hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin-top: var(--sp-3); font-weight: var(--fw-strong); }
  .hero__meta li { display: inline-flex; align-items: center; gap: .4rem; }
  .hero__meta li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c-amber); }
  .hero__art svg { width: 100%; max-width: 30rem; margin-inline: auto; }
  .hero p, .section--dark p { color: var(--fg-on-dark); }
  .hero a:not([class]), .section--dark a:not([class]) { color: var(--c-amber); text-decoration-color: var(--c-amber); }
  .hero a:not([class]):hover, .section--dark a:not([class]):hover { color: var(--c-white); }
  /* obfuscated phone/email links (text + href are injected by site.js) read as links everywhere; buttons keep .btn styling */
  a.js-phone:not(.btn), a.js-email:not(.btn) { color: var(--link); text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; padding: .05em .2em; margin: -.05em -.2em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color var(--t-fast), color var(--t-fast); }
  .hero a.js-phone:not(.btn), .hero a.js-email:not(.btn), .section--dark a.js-phone:not(.btn), .section--dark a.js-email:not(.btn), .cta-band a.js-phone:not(.btn), .cta-band a.js-email:not(.btn), .site-footer a.js-phone:not(.btn), .site-footer a.js-email:not(.btn) { color: var(--c-amber); }
  a.js-phone:not(.btn):hover, a.js-email:not(.btn):hover, a.js-phone:not(.btn):focus-visible, a.js-email:not(.btn):focus-visible { background: var(--c-amber); color: var(--c-charcoal); text-decoration-color: transparent; }

  /* glass cards (light or dark section) */
  .glass-field { position: relative; isolation: isolate; overflow: hidden; }
  .glass-field::before, .glass-field::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(44px); pointer-events: none; opacity: var(--blob-opacity); }
  .glass-field::before { width: 30rem; height: 30rem; left: -8rem; top: 4rem; background: radial-gradient(circle, var(--blob-blue) 0%, var(--c-blue-3) 45%, transparent 72%); }
  .glass-field::after { width: 26rem; height: 26rem; right: -6rem; bottom: -4rem; background: radial-gradient(circle, var(--blob-amber) 0%, var(--c-amber-tint) 40%, transparent 72%); }
  .section--dark.glass-field { --blob-opacity: .16; --glass-bg: var(--glass-bg-dark); --glass-border: var(--glass-border-dark); --glass-shadow: var(--glass-shadow-dark); }
  .card { display: flex; flex-direction: column; height: 100%; padding: var(--sp-3); border-radius: var(--r-card); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); transition: transform var(--t-fast), box-shadow var(--t-fast); }
  .card:hover { transform: translateY(-3px); }
  @supports not (backdrop-filter: blur(1px)) { .card { background: var(--card-bg); } }
  .card h3 { margin-bottom: var(--sp-1); }
  .card p { flex: 1 1 auto; }
  .card .btn, .card .link-arrow { margin-top: var(--sp-2); align-self: flex-start; }
  .card .link-arrow, .post-card .link-arrow, .review--more .link-arrow { display: block; width: fit-content; max-width: 100%; }
  .card__icon { width: 2.5rem; height: 2.5rem; margin-bottom: var(--sp-2); }
  .card__icon svg { width: 100%; height: 100%; stroke: var(--c-blue-text); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .section--dark .card__icon svg, [data-theme="dark"] .card__icon svg { stroke: var(--c-amber); }
  .card--step { counter-increment: step; }
  .card--step::before { content: counter(step, decimal-leading-zero); font-size: var(--fs-lg); font-weight: var(--fw-strong); line-height: 1; color: var(--c-blue-text); margin-bottom: var(--sp-2); letter-spacing: -.02em; }
  .section--dark .card--step::before, [data-theme="dark"] .card--step::before { color: var(--c-amber); }
  .steps { counter-reset: step; }

  /* audience split */
  .audience { display: grid; gap: var(--sp-3); }
  @media (min-width: 48rem) { .audience { grid-template-columns: 1fr 1fr; } }

  /* feature (image + text rows) */
  .feature { display: grid; gap: var(--sp-4); align-items: center; }
  @media (min-width: 56.25rem) { .feature { grid-template-columns: 1fr 1fr; } .feature--rev > :first-child { order: 2; } }
  .feature__media { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: var(--ratio-wide); background: var(--bg-alt); }
  .feature__media img { width: 100%; height: 100%; object-fit: cover; }
  .feature__media--tall { aspect-ratio: 4 / 5; max-width: 26rem; margin-inline: auto; }
  .feature__media--square { aspect-ratio: 1; max-width: 26rem; margin-inline: auto; }
  .map-embed { aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-alt); }
  .map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
  .nap { display: grid; gap: var(--sp-2); }
  .nap dt { font-weight: var(--fw-strong); }
  .nap dd { margin: 0; }

  /* stats */
  .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
  .stats li { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 6.5rem; padding: var(--sp-2); border-radius: var(--r-card); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
  .stats strong { font-size: var(--fs-lg); line-height: 1; color: var(--c-blue-text); }
  [data-theme="dark"] .stats strong, .section--dark .stats strong { color: var(--c-amber); }
  .stats span { display: block; margin-top: .35rem; }

  /* headshot */
  .headshot { width: clamp(10rem, 8rem + 8vw, 15rem); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid var(--c-amber); box-shadow: var(--shadow); }

  /* quote */
  .quote { border-left: 4px solid var(--c-amber); padding-left: var(--sp-3); font-size: var(--fs-md); max-width: var(--w-text); }
  .quote footer { font-size: var(--fs-base); margin-top: var(--sp-2); font-weight: var(--fw-strong); }

  /* form */
  .form { display: grid; gap: var(--sp-2); }
  @media (min-width: 40rem) { .form { grid-template-columns: 1fr 1fr; } .form .field--full { grid-column: 1 / -1; } }
  .field { display: grid; gap: .4rem; }
  .field label { font-weight: var(--fw-strong); }
  .field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: .7rem .9rem; border-radius: 8px; border: 2px solid var(--field-border); background: var(--field-bg); color: var(--fg); transition: border-color var(--t-fast); }
  .field textarea { min-height: 9rem; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-amber); outline: none; box-shadow: 0 0 0 3px rgba(255,201,102,.45); }
  .field .hint { font-size: var(--fs-base); }
  .form__status { grid-column: 1 / -1; padding: var(--sp-2); border-radius: 8px; border: 2px solid var(--c-blue-1); background: var(--bg-alt); display: none; }
  .form__status[data-state="error"] { border-color: #b3261e; }
  .form__status[data-state="ok"], .form__status[data-state="error"] { display: block; }
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .contact-aside { display: grid; gap: var(--sp-3); align-content: start; }
  .contact-aside dl { display: grid; gap: var(--sp-2); }
  .contact-aside dt { font-weight: var(--fw-strong); }


  /* ---- inner pages ---- */
  .hero--light { background: var(--bg-alt); color: var(--fg); }
  .hero--light p, .hero--light .lede { color: var(--fg); }
  .hero--light .btn--ghost { color: var(--fg) !important; }
  .hero--light .hero__meta li::before { background: var(--c-blue-text); }
  [data-theme="dark"] .hero--light .hero__meta li::before { background: var(--c-amber); }
  .hero--light a:not([class]) { color: var(--link); }
  .hero__photo { width: 100%; max-width: 30rem; margin-inline: auto; border-radius: var(--r-card); box-shadow: var(--shadow); aspect-ratio: var(--ratio-wide); object-fit: cover; }
  .hero__photo--round { max-width: 18rem; aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--c-amber); }
  .hero__art img { width: 100%; max-width: 26rem; margin-inline: auto; }
  .hero .h2-lede { font-size: var(--fs-md); font-weight: var(--fw-body); line-height: var(--lh-body); margin-top: var(--sp-2); max-width: 36ch; letter-spacing: 0; }
  .icon-card .card__img { width: 5.5rem; height: 5.5rem; margin-bottom: var(--sp-2); }
  .icon-card .card__img img { width: 100%; height: 100%; object-fit: contain; }
  .section--dark .card h3, .section--dark .card p { color: var(--fg-on-dark); }
  .card--link { text-decoration: none; color: inherit; }
  .card--link h3 > span { padding: 0 .15em; margin: 0 -.15em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .card--link h3 { text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .card--link:hover h3 { text-decoration-color: transparent; }
  .card--link:hover h3 > span { background: var(--c-amber); color: var(--c-charcoal); }
  .faq { display: grid; gap: var(--sp-1); max-width: var(--w-text); margin-inline: auto; }
  .faq details { border-radius: var(--r-card); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
  @supports not (backdrop-filter: blur(1px)) { .faq details { background: var(--card-bg); } }
  .faq summary { cursor: pointer; padding: var(--sp-2) var(--sp-3); padding-right: 3.25rem; font-weight: var(--fw-strong); font-size: var(--fs-md); line-height: 1.3; position: relative; list-style: none; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; position: absolute; right: var(--sp-3); top: 50%; width: .8rem; height: .8rem; border-right: 3px solid var(--c-amber); border-bottom: 3px solid var(--c-amber); transform: translateY(-70%) rotate(45deg); transition: transform var(--t-fast); }
  .faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
  .faq summary:hover { color: var(--link); }
  .faq .faq__a { padding: 0 var(--sp-3) var(--sp-3); }
  .faq .faq__a > * + * { margin-top: var(--sp-2); }
  .faq--center summary { text-align: left; }
  .price { text-align: center; }
  .price .price__amount { font-size: var(--fs-2xl); font-weight: var(--fw-strong); line-height: 1; color: var(--c-blue-text); margin: var(--sp-1) 0; }
  [data-theme="dark"] .price .price__amount, .section--dark .price .price__amount { color: var(--c-amber); }
  .price .price__amount small { font-size: var(--fs-base); font-weight: var(--fw-body); }
  .price ul { display: grid; gap: .5rem; text-align: left; margin: var(--sp-2) 0; flex: 1 1 auto; }
  .price li { padding-left: 1.6rem; position: relative; max-width: none; }
  .price li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .4rem; border-left: 3px solid var(--c-amber); border-bottom: 3px solid var(--c-amber); transform: rotate(-45deg); }
  .price .btn { align-self: center; }
  .price--feature { border: 2px solid var(--c-amber); }
  .price__flag { display: inline-block; background: var(--c-amber); color: var(--c-charcoal); font-weight: var(--fw-strong); padding: .25rem .9rem; border-radius: var(--r-pill); margin-bottom: var(--sp-1); align-self: center; }
  .table-wrap { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--field-border); max-width: var(--w-mid); margin-inline: auto; }
  .table { width: 100%; min-width: 40rem; border-collapse: separate; border-spacing: 0; background: var(--card-bg); }
  .table th, .table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
  .table thead th { background: var(--bg-alt); font-weight: var(--fw-strong); }
  .table tbody th { font-weight: var(--fw-body); }
  .table tr:last-child th, .table tr:last-child td { border-bottom: 0; }
  .table .yes { color: var(--c-blue-text); font-weight: var(--fw-strong); }
  [data-theme="dark"] .table .yes { color: var(--c-amber); }
  .towns { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; margin-top: var(--sp-3); }
  .towns li { padding: .45rem 1rem; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-border); font-weight: var(--fw-strong); }
  .cta-band { background: var(--bg-dark); color: var(--fg-on-dark); padding-block: var(--sp-5); text-align: center; }
  .cta-band p { color: var(--fg-on-dark); margin-inline: auto; }
  .cta-band h2 { margin-bottom: var(--sp-2); }
  .cta-band .cluster { justify-content: center; margin-top: var(--sp-3); }
  .cta-band .btn--ghost { color: var(--c-white) !important; }
  .cta-band .btn--ghost:hover, .cta-band .btn--ghost:focus-visible { color: var(--c-charcoal) !important; }
  .prose > * + * { margin-top: var(--sp-2); }
  .prose h2 { margin-top: var(--sp-4); }
  .prose h3 { margin-top: var(--sp-3); }
  .prose ul, .prose ol { padding-left: 1.4rem; display: grid; gap: .4rem; }
  .prose ul { list-style: disc; } .prose ol { list-style: decimal; }
  .prose blockquote { border-left: 4px solid var(--c-amber); padding-left: var(--sp-3); font-size: var(--fs-md); }
  .checks { display: grid; gap: .5rem; }
  .checks li { padding-left: 1.6rem; position: relative; }
  .checks li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7rem; height: .4rem; border-left: 3px solid var(--c-amber); border-bottom: 3px solid var(--c-amber); transform: rotate(-45deg); }
  .logos { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: center; margin-top: var(--sp-3); }
  .logos img { height: 2.25rem; width: auto; }
  .logos .logo--tall { height: 3.5rem; }
  [data-theme="dark"] .logos img { filter: brightness(0) invert(1); opacity: .85; }
  /* portfolio */
  .filters { display: flex; flex-wrap: wrap; gap: var(--sp-1); justify-content: center; margin-bottom: var(--sp-4); }
  .filters button { padding: .5rem 1rem; border-radius: var(--r-pill); border: 2px solid var(--fg); font-weight: var(--fw-strong); color: var(--fg); min-height: 2.75rem; transition: background-color var(--t-fast), color var(--t-fast); }
  .filters button[aria-pressed="true"], .filters button:hover { background: var(--c-amber); color: var(--c-charcoal); border-color: var(--c-charcoal); }
  .tiles { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
  .tile { display: flex; flex-direction: column; border-radius: var(--r-card); overflow: hidden; background: var(--card-bg); border: 1px solid var(--rule); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform var(--t-fast), box-shadow var(--t-fast); }
  .tile:hover { transform: translateY(-3px); }
  .tile[hidden] { display: none; }
  .tile img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
  .tile__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  .tile h3 { display: inline; padding: 0 .15em; margin: 0 -.15em; border-radius: 3px; font-size: var(--fs-md); text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .tile:hover h3 { background: var(--c-amber); color: var(--c-charcoal); text-decoration-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .tile__cats { display: block; margin-top: .6rem; color: var(--fg); }
  .tile__cats span + span::before { content: " · "; }
  /* contact page */
  .contact-cards { display: grid; gap: var(--sp-3); }
  @media (min-width: 48rem) { .contact-cards { grid-template-columns: 1fr 1fr; } }

  /* footer */
  .site-footer { background: var(--bg-dark); color: var(--fg-on-dark); padding-block: var(--sp-6) var(--sp-4); }
  .site-footer a:not([class]) { color: var(--c-amber); text-decoration-color: var(--c-amber); }
  .site-footer a:not([class]):hover { color: var(--c-white); }
  .site-footer h2 { text-align: center; margin-bottom: var(--sp-4); }
  .ft-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  @media (min-width: 64rem) { .ft-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .ft-grid > li { display: flex; }
  .ft-card { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .8rem; min-height: 7rem; padding: 1.2rem .9rem; border-radius: var(--r-card); background: var(--glass-bg-dark); border: 1px solid var(--glass-border-dark); box-shadow: var(--glass-shadow-dark); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); color: var(--c-white) !important; text-decoration: none !important; transition: transform var(--t-fast), background-color var(--t-fast), border-color var(--t-fast); }
  .ft-card svg { width: 2rem; height: 2rem; stroke: var(--c-amber); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .ft-card span { font-weight: var(--fw-strong); text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; padding: 0 .15em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color var(--t-fast), color var(--t-fast); }
  .ft-card:hover, .ft-card:focus-visible { transform: translateY(-3px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
  .ft-card:hover span, .ft-card:focus-visible span { background-color: var(--c-amber); color: var(--c-charcoal); text-decoration-color: transparent; }
  .footer-cols { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.18); }
  @media (min-width: 48rem) { .footer-cols { grid-template-columns: 1.2fr 1fr 1fr; } }
  .footer-cols h3 { margin-bottom: var(--sp-2); }
  .footer-cols ul { display: grid; gap: .5rem; }
  .footer-cols p { color: var(--fg-on-dark); }
  .social { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); }
  .social a { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 8px; background: var(--c-amber); color: var(--c-charcoal); transition: background-color var(--t-fast), color var(--t-fast); }
  .site-footer .social a { color: var(--c-charcoal); }
  .site-footer .social a:hover { background: var(--c-white); color: var(--c-charcoal); }
  .social svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
  .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,.18); }
  .footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

  /* ---------- article (dt-*) — ported from the Divi Tips WPMT sheet ---------- */
  .dt-article { max-width: var(--w-text); margin-inline: auto; line-height: 1.75; }
  .dt-article > * + * { margin-top: 1.25em; }
  .dt-article h2 { margin-top: var(--sp-4); line-height: 1.2; }
  .dt-article h3 { margin-top: var(--sp-3); }
  .dt-article ul, .dt-article ol { padding-left: 1.5rem; display: grid; gap: 1rem; }
  .dt-article ul { list-style: square; } .dt-article ol { list-style: decimal; }
  .dt-article li { max-width: none; }
  .dt-article a:not([class]) { color: var(--fg); text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; padding: .05em .15em; margin: -.05em -.15em; border-radius: 3px; transition: background-color var(--t-fast), color var(--t-fast); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .dt-article a:not([class]):hover, .dt-article a:not([class]):focus-visible { background: var(--c-amber); color: var(--c-charcoal); text-decoration-color: transparent; }
  .dt-callout a:not([class]), .dt-settings a:not([class]), .dt-quick-ref a:not([class]), .dt-callout strong { color: var(--c-charcoal); }
  .dt-callout a:not([class]):hover { background: var(--c-charcoal); color: var(--c-white); }
  .dt-article code { font-family: "SF Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace; font-size: 1em; background: var(--rule); color: var(--link); padding: .125rem .375rem; border-radius: 3px; }
  .dt-article pre { background: var(--c-ink); color: var(--c-gray-2); padding: 1.25rem 1.5rem; border-radius: var(--r-card); overflow-x: auto; line-height: 1.65; }
  .dt-article pre code { background: transparent; color: inherit; padding: 0; font-size: inherit; }
  .dt-article img, .dt-article figure img { width: 100%; height: auto; border-radius: var(--r-card); box-shadow: var(--shadow); }
  .dt-article figure { margin: var(--sp-3) 0; }
  .dt-article figcaption { margin-top: .5rem; text-align: center; font-size: var(--fs-base); color: var(--fg); }
  .dt-article figure img { display: block; }
  .dt-intro { font-size: var(--fs-md); line-height: 1.6; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--rule); max-width: none; }
  .dt-phase { margin-top: var(--sp-4); }
  .dt-phase > * + * { margin-top: 1.25em; }
  .dt-phase-label { letter-spacing: .12em; text-transform: uppercase; color: var(--link); font-weight: var(--fw-strong); display: flex; align-items: center; gap: .75rem; }
  .dt-phase-label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
  .dt-phase-label + h2 { margin-top: .5rem; }
  .dt-steps { display: grid; margin: var(--sp-3) 0; }
  .dt-step { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 1rem; align-items: start; padding: 1.125rem 0; border-bottom: 1px solid var(--rule); }
  .dt-step:last-child { border-bottom: 0; }
  .dt-step__num { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--c-amber-tint); color: var(--c-charcoal); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-strong); margin-top: .125rem; }
  .dt-step__title { font-weight: var(--fw-strong); }
  .dt-step__desc { margin-top: .25rem; line-height: 1.65; }
  .dt-callout { background: var(--c-amber-tint); color: var(--c-charcoal); border-left: 3px solid var(--c-amber); padding: 1rem 1.25rem; border-radius: 0 var(--r-card) var(--r-card) 0; margin-block: var(--sp-3); }
  .dt-callout__label { font-weight: var(--fw-strong); letter-spacing: .15em; text-transform: uppercase; margin-bottom: .375rem; }
  .dt-callout p { color: var(--c-charcoal); line-height: 1.65; }
  .dt-callout p + p { margin-top: .75rem; }
  .dt-settings { background: var(--c-blue-3); color: var(--c-charcoal); border: 1px solid var(--c-blue-1); border-radius: var(--r-card); overflow: hidden; margin-block: var(--sp-3); }
  .dt-settings table { width: 100%; border-collapse: collapse; }
  .dt-settings th { letter-spacing: .15em; text-transform: uppercase; font-size: var(--fs-base); background: var(--c-blue-2); padding: .625rem 1rem; text-align: left; border-bottom: 1px solid var(--c-blue-1); }
  .dt-settings td { padding: .625rem 1rem; border-bottom: 1px solid var(--c-blue-1); vertical-align: top; }
  .dt-settings td + td, .dt-settings th + th { border-left: 1px solid var(--c-blue-1); }
  .dt-settings tr:last-child td { border-bottom: 0; }
  .dt-settings td:first-child { font-weight: var(--fw-strong); width: 42%; }
  .dt-settings code { background: var(--c-white); }
  .dt-key-step { background: var(--c-charcoal); color: var(--c-white); border-radius: var(--r-card); padding: 1.5rem 1.75rem; margin-block: var(--sp-3); }
  .dt-key-step__label { letter-spacing: .18em; text-transform: uppercase; color: var(--c-amber); font-weight: var(--fw-strong); margin-bottom: .5rem; }
  .dt-key-step h3, .dt-key-step p { color: var(--c-white); margin-top: .625rem; }
  .dt-key-step a:not([class]) { color: var(--c-white); }
  .dt-quick-ref { background: var(--c-blue-2); color: var(--c-charcoal); border: 1px solid var(--c-blue-text); border-radius: var(--r-card); padding: 1.75rem; margin-block: var(--sp-3); }
  .dt-quick-ref h3 { letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-base); margin: 0 0 1.25rem; color: var(--c-charcoal); }
  .dt-qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.75rem), 1fr)); gap: .625rem; }
  .dt-qr-item { background: var(--c-blue-3); border: 1px solid var(--c-blue-1); border-radius: 4px; padding: .75rem .875rem; }
  .dt-qr-setting { letter-spacing: .05em; text-transform: uppercase; font-weight: var(--fw-strong); margin-bottom: .25rem; }
  .dt-flow { display: grid; margin-block: var(--sp-3); }
  .dt-flow__item { display: flex; gap: 1rem; align-items: flex-start; }
  .dt-flow__connector { display: flex; flex-direction: column; align-items: center; align-self: stretch; flex-shrink: 0; }
  .dt-flow__dot { width: .625rem; height: .625rem; background: var(--c-amber); border-radius: 50%; margin-top: .4rem; flex-shrink: 0; }
  .dt-flow__line { width: 1px; min-height: 1.5rem; flex: 1; background: var(--rule); }
  .dt-flow__item:last-child .dt-flow__line { display: none; }
  .dt-flow__text { padding-bottom: 1.5rem; line-height: 1.65; }
  .dt-flow__text > strong:first-child { display: block; margin-bottom: .125rem; }
  .dt-live-btn { display: inline-flex; text-decoration: underline; text-decoration-color: transparent; align-items: center; gap: .4rem; background: var(--c-amber); color: var(--c-charcoal) !important; padding: .7rem 1.2rem; border-radius: var(--r-pill); font-weight: var(--fw-strong); line-height: 1; transition: background-color var(--t-fast), transform var(--t-fast); }
  .dt-live-btn:hover { background: var(--c-charcoal); color: var(--c-white) !important; transform: translateY(-1px); }
  [data-theme="dark"] .dt-article code { background: rgba(255,255,255,.1); color: var(--c-amber); }
  [data-theme="dark"] .dt-settings code { background: var(--c-white); color: var(--c-blue-text); }
  [data-theme="dark"] .dt-key-step { background: var(--glass-bg-dark); border: 1px solid var(--glass-border-dark); }
  [data-theme="dark"] .dt-live-btn:hover { background: var(--c-white); color: var(--c-charcoal) !important; }
  /* post header + author + archive */
  .post-head { text-align: center; }
  .post-head .kicker { display: inline-block; text-decoration: underline; text-decoration-color: transparent; font-weight: var(--fw-strong); letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-base); color: var(--c-amber); border: 1px solid var(--c-amber); padding: .25rem .7rem; border-radius: 3px; margin-bottom: var(--sp-2); }
  .post-head .kicker:hover { background: var(--c-amber); color: var(--c-charcoal); }
  .post-head h1 { max-width: 24ch; margin-inline: auto; }
  .post-head .meta { margin-top: var(--sp-2); margin-inline: auto; max-width: none; text-align: center; color: var(--fg-on-dark); }
  .post-head .meta a { color: var(--c-amber); }
  .author-card { max-width: var(--w-text); margin: var(--sp-4) auto 0; display: flex; gap: var(--sp-3); align-items: flex-start; flex-wrap: wrap; padding: var(--sp-3); border-radius: var(--r-card); background: var(--c-charcoal); color: var(--c-white); }
  .author-card img { width: 7rem; height: 7rem; border-radius: 50%; object-fit: cover; border: 3px solid var(--c-amber); flex-shrink: 0; }
  .author-card > div { flex: 1 1 16rem; min-width: 0; }
  .author-card .eyebrow-label { letter-spacing: .18em; text-transform: uppercase; color: var(--c-amber); font-weight: var(--fw-strong); font-size: var(--fs-base); }
  .author-card h2 { color: var(--c-white); font-size: var(--fs-md); margin-top: .5rem; }
  .author-card p { color: var(--c-white); margin-top: .75rem; }
  .author-card .btn { margin-top: var(--sp-2); }
  [data-theme="dark"] .author-card { background: var(--glass-bg-dark); border: 1px solid var(--glass-border-dark); }
  .post-list { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
  .post-card { display: flex; flex-direction: column; gap: .6rem; }
  .post-card .kicker-sm { font-weight: var(--fw-strong); letter-spacing: .1em; text-transform: uppercase; font-size: var(--fs-base); color: var(--link); }
  .post-card h2 { font-size: var(--fs-md); }
  .post-card h2 a { color: var(--fg); text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .post-card h2 a:hover { color: var(--link); }
  .post-card time { color: var(--fg); }
  .post-card .link-arrow { margin-top: auto; }
  /* reviews */
  .rating-badge { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-3); }
  .rating-badge strong { font-size: var(--fs-xl); line-height: 1; color: var(--c-amber); }
  .rating-badge a { color: inherit; }
  .stars { color: #9a5a00; letter-spacing: .1em; font-size: var(--fs-md); line-height: 1; white-space: nowrap; }
  [data-theme="dark"] .stars, .hero .stars, .section--dark .stars, .cta-band .stars { color: var(--c-amber); }
  .review { gap: .75rem; }
  .review header { display: flex; align-items: center; gap: .75rem; }
  .review__avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-amber); color: var(--c-charcoal); display: flex; align-items: center; justify-content: center; font-weight: var(--fw-strong); flex-shrink: 0; }
  .review header > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .review header a { color: var(--fg); font-weight: var(--fw-strong); }
  .review header time { color: var(--fg); }
  .review__src { font-weight: var(--fw-strong); letter-spacing: .08em; text-transform: uppercase; font-size: var(--fs-base); }
  .review .stars { font-size: var(--fs-base); }
  .review p { max-width: none; }
  .review--more { justify-content: center; }
  .review--more .link-arrow { align-self: flex-start; }
  /* closing contact card */
  .talk-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-card); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); max-width: 24rem; margin-inline: auto; }
  .talk-card .headshot { width: clamp(8rem, 6rem + 6vw, 11rem); }
  .talk-card__name { font-weight: var(--fw-strong); font-size: var(--fs-md); line-height: 1.2; }
  .talk-card__role { margin-top: .25rem; }
  .talk-card__list { display: grid; gap: .5rem; justify-items: center; margin-top: var(--sp-1); }
  .talk-card__list li { display: inline-flex; align-items: center; gap: .5rem; max-width: none; }
  .talk-card__list svg { width: 1.1rem; height: 1.1rem; stroke: var(--c-amber); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
  .talk-card__rating { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; padding-top: var(--sp-1); border-top: 1px solid var(--rule); width: 100%; }
  .talk-card__rating .stars { font-size: var(--fs-base); }
  .section--dark .talk-card { background: var(--glass-bg-dark); border-color: var(--glass-border-dark); }
  .section--dark .talk-card__rating { border-top-color: rgba(255,255,255,.15); }
  .g-badge { display: inline-flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-radius: 8px; background: var(--c-white); border: 1px solid #e0e0e0; box-shadow: 0 4px 6px rgba(34,34,34,.06); text-decoration: underline; text-decoration-color: transparent; color: var(--c-charcoal); text-align: left; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
  .g-badge:hover, .g-badge:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(34,34,34,.12); border-color: #4285F4; color: var(--c-charcoal); }
  .g-badge__mark { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
  .g-badge__text { display: flex; flex-direction: column; line-height: 1.25; }
  .g-badge__text strong { color: var(--c-charcoal); }
  .g-badge__text span { color: var(--c-charcoal); text-decoration: underline; text-decoration-color: var(--c-amber); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .g-badge:hover .g-badge__text span { text-decoration-color: var(--c-charcoal); }
  .site-footer .ft-rating { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: var(--sp-2); }
  .site-footer .ft-rating .stars { font-size: var(--fs-base); color: var(--c-amber); }
}

/* ---------- utilities ---------- */
@layer utilities {
  .mt-2 { margin-top: var(--sp-2); }
  .mt-3 { margin-top: var(--sp-3); }
  .mt-4 { margin-top: var(--sp-4); }
  .center { text-align: center; }
  p.center, .center p, .center .cluster { margin-inline: auto; justify-content: center; }
}