/* components.css — one definition per module, variants as modifiers.
   Rules: tokens only (var(--*)); no raw colors, sizes, or fonts.
   Responsive behaviour uses @container page — wrap body content in <div class="page">.
   Demo-only state classes (.is-hover / .is-focus) mirror :hover / :focus-visible so
   the component sheet can show states statically. Never use them in production markup. */

/* ============ base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--c-bg); background-image: var(--c-texture);
  color: var(--c-ink); font-family: var(--font-body); font-size: var(--text-base);
  line-height: var(--leading-normal); -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--c-link); text-decoration-thickness: var(--border-1); text-underline-offset: 3px; }
a:hover { color: var(--c-link-hover); }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
[data-skin="gb"] h1, [data-skin="gb"] h2, [data-skin="gb"] h3, [data-skin="gb"] h4 { font-weight: var(--weight-semibold); letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
/* Honeypot wrapper (contact + newsletter forms): off-screen for people, still filled in by form bots. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: calc(-1 * var(--space-9)); z-index: var(--z-toast); padding: var(--space-3) var(--space-4); background: var(--c-ink); color: var(--c-ink-inverse); border-radius: var(--radius-ctl); }
.skip-link:focus { top: var(--space-4); }

/* ============ layout ============ */
/* Containment lives on .page__main, NOT .page. inline-size containment makes the element the
   containing block for position:fixed descendants, so anything fixed/sticky-to-viewport
   (.site-header, .announcement, .progress, .back-to-top, .modal, .nav__drawer) must be a child
   of .page, outside .page__main. .site-header is sticky relative to .page's scroll parent (the
   viewport in production; the frame in previews). */
.page { min-height: 100vh; display: flex; flex-direction: column; background: var(--c-bg); background-image: var(--c-texture); color: var(--c-ink); position: relative; }
.page__main { flex: 1; container: page / inline-size; }
.site-header, .site-footer { container: chrome / inline-size; }
.container { width: 100%; max-width: var(--container-default); margin-inline: auto; padding-inline: var(--gutter-wide); }
.container--narrow { max-width: var(--container-narrow); }
.container--prose { max-width: var(--container-prose); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
.section--flush { padding-block: 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); padding-bottom: var(--space-2); border-bottom: var(--rule-heading); }
.section__title { font-size: var(--text-xl); }
.section__action { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }
.stack--loose { gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 280px)), 1fr)); }
.grid--cards { --grid-min: 280px; }
.grid--compact { --grid-min: 220px; gap: var(--space-4); }
.grid--wide { --grid-min: 340px; }
.kicker { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-muted); font-weight: var(--weight-semibold); }
.kicker--accent { color: var(--c-accent); }
.lede { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--c-ink-soft); max-width: var(--measure); }
.accent { font-family: var(--font-accent); font-style: italic; font-weight: var(--weight-medium); }
@container page (max-width: 900px) {
  .container { padding-inline: var(--gutter); }
  .section { padding-block: var(--space-6); }
}
@container chrome (max-width: 900px) { .container { padding-inline: var(--gutter); } }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--ctl-height); padding: 0 var(--space-5); border-radius: var(--radius-ctl);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; position: relative;
  border: var(--border-1) solid transparent; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-ink); color: var(--c-ink-inverse); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--c-primary); color: var(--c-primary-ink); }
.btn--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--accent:hover, .btn--accent.is-hover { background: var(--c-accent-hover); color: var(--c-accent-ink); }
.btn--green { background: var(--c-primary); color: var(--c-primary-ink); }
.btn--green:hover, .btn--green.is-hover { background: var(--c-primary-hover); color: var(--c-primary-ink); }
.btn--secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--c-ink); color: var(--c-ink-inverse); }
.btn--ghost { background: transparent; color: var(--c-ink); }
.btn--ghost:hover, .btn--ghost.is-hover { background: var(--c-bg-alt); }
.btn--sm { min-height: var(--ctl-height-sm); padding-inline: var(--space-4); font-size: var(--text-xs); }
.btn--lg { min-height: calc(var(--ctl-height) + var(--space-2)); padding-inline: var(--space-6); font-size: var(--text-base); }
.btn--block { width: 100%; }
.btn.is-focus { outline: var(--border-2) solid var(--c-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn--loading { color: transparent !important; pointer-events: none; }
.btn--loading::after { content: ""; position: absolute; width: 1em; height: 1em; border: var(--border-2) solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); color: var(--c-ink-inverse); animation: spin .7s linear infinite; }
.btn--accent.btn--loading::after, .btn--green.btn--loading::after { color: var(--c-primary-ink); }
.btn--secondary.btn--loading::after, .btn--ghost.btn--loading::after { color: var(--c-ink); }
.btn--icon { width: var(--ctl-height); padding: 0; border-radius: var(--radius-pill); font-size: var(--text-lg); font-weight: var(--weight-regular); }
.btn--icon.btn--sm { width: var(--ctl-height-sm); }
@keyframes spin { to { transform: rotate(360deg); } }

/* theme toggle — a pill with a sliding knob */
.theme-toggle { display: inline-flex; align-items: center; width: 52px; height: 28px; padding: 3px; border-radius: var(--radius-pill); background: var(--c-bg-alt); border: var(--border-1) solid var(--c-line); position: relative; cursor: pointer; }
.theme-toggle__knob { width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--c-ink); transition: transform var(--dur-base) var(--ease-out); }
[data-theme="dark"] .theme-toggle__knob, .theme-toggle[aria-pressed="true"] .theme-toggle__knob { transform: translateX(24px); background: var(--c-highlight); }
.theme-toggle:hover { border-color: var(--c-line-strong); }

/* ============ links ============ */
.link { color: var(--c-link); text-decoration: underline; text-underline-offset: 3px; }
.link:hover, .link.is-hover { color: var(--c-link-hover); text-decoration-thickness: var(--border-2); }
.link--quiet { text-decoration: none; color: var(--c-ink); }
.link--quiet:hover, .link--quiet.is-hover { text-decoration: underline; color: var(--c-link); }
.link--arrow { text-decoration: none; font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-1); }
.link--arrow::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
.link--arrow:hover::after, .link--arrow.is-hover::after { transform: translateX(3px); }
.link--on-dark { color: var(--c-highlight); }
.link--on-dark:hover { color: var(--c-ink-inverse); }

/* ============ badges + tags ============ */
.badge { --badge-color: var(--c-badge-standard); display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; line-height: 1.2; color: var(--badge-color); background: color-mix(in srgb, var(--badge-color) 13%, transparent); white-space: nowrap; }
.badge--guide { --badge-color: var(--c-badge-guide); }
.badge--comparison { --badge-color: var(--c-badge-comparison); }
.badge--seasonal { --badge-color: var(--c-badge-seasonal); }
.badge--beginner { --badge-color: var(--c-badge-beginner); }
.badge--buying-guide { --badge-color: var(--c-badge-buying-guide); }
.badge--infographic { --badge-color: var(--c-badge-infographic); }
.badge--standard { --badge-color: var(--c-badge-standard); }
.badge--solid { background: var(--badge-color); color: var(--c-surface-alt); }
.badge--outline { background: transparent; border: var(--border-1) solid color-mix(in srgb, var(--badge-color) 40%, transparent); }
.badge--code { font-family: var(--font-ui); letter-spacing: .06em; --badge-color: var(--c-accent); background: transparent; padding-inline: 0; }

.tag { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--ctl-height-sm); padding: 0 var(--space-4); border-radius: var(--radius-chip); background: var(--c-bg); border: var(--border-1) solid var(--c-line); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--c-ink); text-decoration: none; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.tag:hover, .tag.is-hover { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }
.tag--active, .tag[aria-pressed="true"] { background: var(--c-ink); color: var(--c-ink-inverse); border-color: var(--c-ink); }
.tag__count { font-size: var(--text-xs); color: var(--c-muted); }
.tag--active .tag__count, .tag:hover .tag__count { color: inherit; opacity: .8; }
.tag__remove { font-size: var(--text-xs); opacity: .7; }
.tag:disabled { opacity: .45; cursor: not-allowed; }

/* ============ cards ============ */
.card { display: flex; flex-direction: column; background: var(--c-surface); border: var(--border-1) solid var(--c-line); border-radius: var(--radius-card); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base), transform var(--dur-base) var(--ease-out); min-width: 0; position: relative; }
a.card:hover, .card.is-hover { box-shadow: var(--shadow-card-hover); border-color: var(--c-line-strong); transform: translateY(-2px); }
[data-skin="gb"] a.card:hover, [data-skin="gb"] .card.is-hover { transform: none; border-color: var(--c-primary); }
.card.is-focus { outline: var(--border-2) solid var(--c-focus); outline-offset: 2px; }
.card__media { aspect-ratio: var(--card-media-ratio); background: var(--c-bg-alt); overflow: hidden; position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media--placeholder { display: flex; align-items: flex-end; padding: var(--space-3); border-bottom: var(--border-1) dashed var(--c-line-strong); font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--c-muted); }
.card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); }
.card__title { font-size: var(--text-lg); line-height: var(--leading-snug); }
.card__excerpt { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--c-ink-soft); }
.card__footer { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card__price { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.card__price-note { font-size: var(--text-xs); color: var(--c-muted); font-weight: var(--weight-regular); }
/* variants */
.card--article .card__title { font-family: var(--font-accent); font-weight: var(--weight-semibold); }
[data-skin="asg"] .card--article .card__title { font-style: normal; }
.card--article-related { flex-direction: row; align-items: stretch; }
.card--article-related .card__media { width: 112px; aspect-ratio: auto; flex: none; }
.card--article-related .card__body { padding: var(--space-4); gap: var(--space-1); }
.card--article-related .card__title { font-size: var(--text-base); }
.card--article-related .card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card--article-compact { border: 0; border-radius: 0; background: transparent; border-bottom: var(--border-1) dotted var(--c-line); }
.card--article-compact .card__body { padding: var(--space-3) 0; flex-direction: row; align-items: baseline; gap: var(--space-3); }
.card--article-compact .card__date { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); min-width: 4.5em; }
.card--article-compact .card__title { font-size: var(--text-base); font-weight: var(--weight-medium); }
a.card--article-compact:hover, .card--article-compact.is-hover { box-shadow: none; transform: none; background: var(--c-surface); }
.card--product .card__media { aspect-ratio: 1; background: var(--c-surface-alt); }
.card--product .card__title { font-size: var(--text-base); }
.card--space { position: relative; min-height: 220px; justify-content: flex-end; color: var(--c-ink-surface-text); background: var(--c-ink-surface); border: 0; }
.card--space .card__media { position: absolute; inset: 0; aspect-ratio: auto; opacity: .55; }
.card--space .card__body { position: relative; z-index: 1; background: linear-gradient(to top, var(--c-overlay), transparent); }
.card--space .card__title { color: var(--c-ink-surface-text); }
.card--space .card__excerpt { color: var(--c-ink-surface-text); opacity: .85; }
.card--zone { align-items: center; text-align: center; padding: var(--space-4); gap: var(--space-1); min-height: var(--space-9); justify-content: center; cursor: pointer; }
.card--zone .card__value { font-family: var(--font-ui); font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: 1; }
.card--zone .card__label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--c-muted); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.card--zone[aria-selected="true"], .card--zone.is-active { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
.card--zone[aria-selected="true"] .card__label { color: var(--c-primary-ink); opacity: .8; }
/* skeleton */
.skeleton { background: var(--c-skeleton); border-radius: var(--radius-sm); position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--c-skeleton-shine), transparent); animation: shimmer 1.4s infinite; }
.skeleton--line { height: var(--space-3); width: 100%; }
.skeleton--line-short { height: var(--space-3); width: 55%; }
.skeleton--title { height: var(--space-5); width: 80%; }
.skeleton--badge { height: var(--space-4); width: 64px; }
.skeleton--media { aspect-ratio: var(--card-media-ratio); border-radius: 0; }
.card--skeleton { pointer-events: none; }
.card--skeleton .card__body { gap: var(--space-3); }
.card--product.card--skeleton .skeleton--media { aspect-ratio: 1; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ============ callouts ============ */
.callout { --co-color: var(--c-ink-soft); --co-bg: var(--c-surface); display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); padding: var(--space-5); border-radius: var(--radius-callout); background: var(--co-bg); border: var(--border-1) solid color-mix(in srgb, var(--co-color) 30%, transparent); margin-block: var(--space-6); }
.callout__icon { width: var(--space-6); height: var(--space-6); border-radius: var(--radius-pill); background: var(--co-color); color: var(--c-surface-alt); display: grid; place-items: center; font-family: var(--font-ui); font-weight: var(--weight-bold); font-size: var(--text-sm); }
.callout__title { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-bold); color: var(--co-color); align-self: center; }
.callout__body { grid-column: 2; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--c-ink); }
.callout__body p + p { margin-top: var(--space-3); }
.callout__actions { grid-column: 2; display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.callout--tip { --co-color: var(--c-success); --co-bg: var(--c-success-soft); }
.callout--warning { --co-color: var(--c-warning); --co-bg: var(--c-warning-soft); }
.callout--note { --co-color: var(--c-info); --co-bg: var(--c-info-soft); }
.callout--source { --co-color: var(--c-muted); --co-bg: var(--c-bg-alt); }
.callout--source .callout__body { font-size: var(--text-sm); color: var(--c-ink-soft); }
.callout--source .callout__body ol { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.callout--calc { --co-color: var(--c-accent); --co-bg: var(--c-accent-soft); grid-template-columns: 1fr auto; align-items: center; }
.callout--calc .callout__icon { display: none; }
.callout--calc .callout__title { grid-column: 1; }
.callout--calc .callout__body { grid-column: 1; }
.callout--calc .callout__actions { grid-column: 2; grid-row: 1 / span 2; }
.callout--email { --co-color: var(--c-primary); --co-bg: var(--c-primary-soft); grid-template-columns: 1fr; }
.callout--email .callout__icon { display: none; }
.callout--email .callout__body, .callout--email .callout__actions { grid-column: 1; }
@container page (max-width: 640px) {
  .callout--calc { grid-template-columns: 1fr; }
  .callout--calc .callout__actions { grid-column: 1; grid-row: auto; }
}

/* ============ email capture ============ */
.email-capture { background: var(--c-ink-surface); color: var(--c-ink-surface-text); border-radius: var(--radius-tile); padding: var(--space-6); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: center; }
.email-capture__title { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.email-capture__title em { font-family: var(--font-accent); font-style: italic; color: var(--c-highlight); font-weight: var(--weight-medium); }
.email-capture__text { color: var(--c-ink-surface-text); opacity: .8; font-size: var(--text-sm); }
.email-capture__form { display: flex; gap: var(--space-2); background: var(--c-surface-alt); border-radius: var(--radius-ctl); padding: var(--space-1); }
.email-capture__form .field__input { border: 0; background: transparent; flex: 1; min-width: 0; color: var(--c-ink); }
.email-capture__fine { font-family: var(--font-ui); font-size: var(--text-xs); opacity: .65; margin-top: var(--space-2); }
.email-capture--inline { grid-template-columns: 1fr; padding: var(--space-5); background: var(--c-primary); color: var(--c-primary-ink); }
.email-capture--inline .email-capture__text { color: var(--c-primary-ink); }
.email-capture--inline .email-capture__title { font-size: var(--text-lg); }
.email-capture--page { grid-template-columns: 1fr; text-align: center; padding: var(--space-8) var(--space-6); max-width: var(--container-narrow); margin-inline: auto; }
.email-capture--page .email-capture__title { font-size: var(--text-2xl); }
.email-capture--page .email-capture__form { max-width: 480px; margin-inline: auto; width: 100%; }
.email-capture--page .email-capture__text { margin-inline: auto; max-width: var(--measure); }
.email-capture__success { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); color: var(--c-highlight); }
@container page (max-width: 760px) { .email-capture { grid-template-columns: 1fr; } }

/* ============ announcement bar ============ */
.announcement { background: var(--c-ink-surface); color: var(--c-ink-surface-text); font-family: var(--font-ui); font-size: var(--text-sm); text-align: center; padding: var(--space-2) var(--space-4); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-1) var(--space-3); }
.announcement a { color: var(--c-highlight); font-weight: var(--weight-semibold); white-space: nowrap; }
.announcement--accent { background: var(--c-accent); color: var(--c-accent-ink); }
.announcement--accent a { color: var(--c-accent-ink); }
.announcement__close { margin-left: var(--space-2); opacity: .7; min-width: var(--hit-min); min-height: var(--hit-min); display: inline-grid; place-items: center; color: inherit; }
.announcement__close:hover { opacity: 1; }

/* ============ header + nav ============ */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--c-bg); background-image: var(--c-texture); border-bottom: var(--border-1) solid var(--c-line); }
.site-header__inner { min-height: var(--header-height); display: flex; align-items: center; gap: var(--space-6); }
.brand { display: inline-flex; align-items: baseline; gap: var(--space-3); text-decoration: none; color: var(--c-ink); white-space: nowrap; }
.brand__name { font-family: var(--font-ui); font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: var(--tracking-tight); }
.brand__dot { color: var(--c-accent); }
.brand__tag { font-family: var(--font-accent); font-style: italic; font-size: var(--text-sm); color: var(--c-muted); }
[data-skin="gb"] .brand__name { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: 0; font-weight: var(--weight-semibold); }
[data-skin="gb"] .brand__name em { font-style: italic; color: var(--c-primary); font-weight: var(--weight-medium); }
.nav { display: flex; align-items: center; flex: 1; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); }
[data-skin="gb"] .nav__list { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--hit-min); padding: 0 var(--space-1); color: var(--c-ink); text-decoration: none; border-bottom: var(--border-2) solid transparent; }
.nav__link:hover, .nav__item:focus-within > .nav__link, .nav__link.is-active, .nav__link.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.nav__item--has-menu > .nav__link::after { content: "▾"; font-size: var(--text-2xs); opacity: .6; }
.nav__menu { position: absolute; top: 100%; left: calc(-1 * var(--space-4)); z-index: var(--z-dropdown); min-width: 520px; display: none; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-6); padding: var(--space-5); background: var(--c-surface-alt); border: var(--border-1) solid var(--c-line); border-radius: var(--radius-card); box-shadow: var(--shadow-float); text-transform: none; letter-spacing: 0; }
.nav__item--has-menu:hover > .nav__menu, .nav__item--has-menu:focus-within > .nav__menu, .nav__item--has-menu.is-open > .nav__menu { display: grid; }
.nav__menu::before { content: ""; position: absolute; top: calc(-1 * var(--space-3)); left: 0; right: 0; height: var(--space-3); } /* hover bridge */
.nav__group { display: flex; flex-direction: column; gap: var(--space-1); }
.nav__group-title { font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-muted); font-weight: var(--weight-bold); margin-bottom: var(--space-1); padding-inline: var(--space-3); }
.nav__group a { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--c-ink); text-decoration: none; font-weight: var(--weight-regular); font-size: var(--text-sm); }
[data-skin="gb"] .nav__group a { font-family: var(--font-body); font-size: var(--text-base); }
.nav__group a:hover { background: var(--c-bg); color: var(--c-primary); }
.nav__group a small { color: var(--c-muted); font-size: var(--text-xs); }
.nav__featured { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--c-primary-soft); color: var(--c-primary); font-weight: var(--weight-semibold); font-size: var(--text-sm); text-decoration: none; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.nav__toggle { display: none; width: var(--hit-min); height: var(--hit-min); border-radius: var(--radius-ctl); place-items: center; color: var(--c-ink); }
.nav__toggle:hover { background: var(--c-bg-alt); }
.nav__burger { width: 20px; height: var(--border-2); background: currentColor; position: relative; border-radius: var(--radius-xs); transition: background var(--dur-fast); }
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; left: 0; width: 20px; height: var(--border-2); background: currentColor; border-radius: var(--radius-xs); transition: transform var(--dur-base) var(--ease-out); }
.nav__burger::before { top: -6px; } .nav__burger::after { top: 6px; }
.nav--open .nav__burger { background: transparent; }
.nav--open .nav__burger::before { transform: translateY(6px) rotate(45deg); }
.nav--open .nav__burger::after { transform: translateY(-6px) rotate(-45deg); }
/* mobile drawer */
.nav__drawer { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-drawer); max-height: calc(100vh - var(--header-height)); overflow: auto; background: var(--c-surface-alt); border-bottom: var(--border-1) solid var(--c-line); box-shadow: var(--shadow-float); padding: var(--space-3) var(--gutter) var(--space-6); }
.nav--open .nav__drawer { display: block; }
.nav__drawer-link { display: flex; align-items: center; justify-content: space-between; min-height: var(--hit-min); padding: var(--space-2) 0; border-bottom: var(--border-1) solid var(--c-line); color: var(--c-ink); text-decoration: none; font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-base); }
.nav__drawer-group { border-bottom: var(--border-1) solid var(--c-line); }
.nav__drawer-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: var(--hit-min); padding: var(--space-2) 0; font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-base); cursor: pointer; }
.nav__drawer-group summary::-webkit-details-marker { display: none; }
.nav__drawer-group summary::after { content: "+"; color: var(--c-muted); font-size: var(--text-lg); }
.nav__drawer-group[open] summary::after { content: "–"; }
.nav__drawer-sub { display: grid; gap: var(--space-1); padding: 0 0 var(--space-3) var(--space-4); }
.nav__drawer-sub a { display: flex; align-items: center; min-height: var(--hit-min); color: var(--c-ink-soft); text-decoration: none; font-size: var(--text-sm); }
.nav__drawer-sub a:hover { color: var(--c-primary); }
.nav__drawer-cta { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
@container chrome (max-width: 900px) {
  .nav__list { display: none; }
  .nav__toggle { display: grid; }
  .brand__tag { display: none; }
  .site-header__actions .btn:not(.btn--icon) { display: none; }
  .site-header__inner { gap: var(--space-3); }
}

/* ============ search ============ */
.search { display: flex; align-items: center; gap: var(--space-3); min-height: var(--ctl-height); padding: 0 var(--space-2) 0 var(--space-4); background: var(--c-surface-alt); border: var(--border-1) solid var(--c-line-strong); border-radius: var(--radius-ctl); }
.search:focus-within, .search.is-focus { border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 25%, transparent); }
.search__icon { color: var(--c-muted); flex: none; }
.search__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; min-height: calc(var(--ctl-height) - 2px); color: var(--c-ink); }
[data-skin="gb"] .search__input { font-family: var(--font-body); font-style: italic; font-size: var(--text-md); }
.search--hero { min-height: calc(var(--ctl-height) + var(--space-2)); border-width: var(--border-2); border-color: var(--c-ink); }
.search__kbd { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--c-muted); border: var(--border-1) solid var(--c-line); border-radius: var(--radius-sm); padding: 2px var(--space-1); }
.search-results { display: grid; gap: var(--space-1); }
.search-result { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; color: var(--c-ink); border-bottom: var(--border-1) dotted var(--c-line); }
.search-result:hover, .search-result.focused, .search-result.is-hover { background: var(--c-surface); }
.search-result__title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.search-result__excerpt { font-size: var(--text-sm); color: var(--c-ink-soft); }
.search-result__excerpt mark { background: color-mix(in srgb, var(--c-highlight) 45%, transparent); color: inherit; }
.search-hint, .search-empty { padding: var(--space-4); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--c-muted); text-align: center; }

/* ============ footer ============ */
.site-footer { margin-top: auto; background: var(--c-bg-alt); border-top: var(--border-2) solid var(--c-ink); color: var(--c-ink); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); padding-block: var(--space-7); }
.site-footer__about { font-size: var(--text-sm); color: var(--c-ink-soft); max-width: 34ch; }
.site-footer__col-title { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-muted); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.site-footer__links { display: grid; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.site-footer__links a { color: var(--c-ink); text-decoration: none; font-size: var(--text-sm); display: inline-flex; min-height: var(--space-6); align-items: center; }
.site-footer__links a:hover { color: var(--c-primary); text-decoration: underline; }
.site-footer__legal { border-top: var(--border-1) solid var(--c-line); padding-block: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); }
.sister-brands { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-block: var(--space-4); border-top: var(--border-1) solid var(--c-line); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); }
.sister-brands a { color: var(--c-ink); font-weight: var(--weight-semibold); text-decoration: none; }
.sister-brands a:hover { color: var(--c-primary); }
@container chrome (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@container chrome (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ============ trust bar ============ */
.trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-7); padding: var(--space-4) var(--space-5); border-top: var(--border-1) solid var(--c-line); border-bottom: var(--border-1) solid var(--c-line); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--c-ink-soft); }
.trust-bar__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust-bar__item strong { color: var(--c-ink); }
.trust-bar--card { border: var(--border-1) solid var(--c-line); background: var(--c-surface-alt); border-radius: var(--radius-card); }

/* ============ breadcrumbs ============ */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; margin: 0; padding: var(--space-4) 0; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-primary); text-decoration: underline; }
.breadcrumbs li + li::before { content: "›"; margin-right: var(--space-2); }
.breadcrumbs [aria-current] { color: var(--c-ink); }
[data-skin="gb"] .breadcrumbs { letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* ============ sidebar TOC + progress + back to top ============ */
.toc { display: none; position: sticky; top: calc(var(--header-height) + var(--space-5)); width: var(--toc-width); align-self: start; font-family: var(--font-ui); transition: opacity var(--dur-base); }
.toc__title { font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-muted); font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.toc__nav { display: flex; flex-direction: column; border-left: var(--border-2) solid var(--c-line); max-height: calc(100vh - var(--header-height) - var(--space-9)); overflow: auto; }
.toc__nav a { display: block; padding: var(--space-2) var(--space-3); margin-left: calc(-1 * var(--border-2)); border-left: var(--border-2) solid transparent; color: var(--c-ink-soft); text-decoration: none; font-size: var(--text-sm); line-height: var(--leading-snug); }
.toc__nav a:hover { color: var(--c-ink); }
.toc__nav a.active, .toc__nav a.is-active { color: var(--c-primary); border-left-color: var(--c-primary); font-weight: var(--weight-semibold); }
.toc__nav a[data-level="3"] { padding-left: var(--space-5); font-size: var(--text-xs); }
.toc.is-visible { display: block; }
@container page (max-width: 1200px) { .toc, .toc.is-visible { display: none; } }
.progress { position: fixed; top: 0; left: 0; height: var(--border-3); width: 0; background: var(--c-accent); z-index: var(--z-toast); transition: width var(--dur-fast) linear; }
.back-to-top { position: fixed; right: var(--space-5); bottom: var(--space-5); width: var(--hit-min); height: var(--hit-min); border-radius: var(--radius-pill); background: var(--c-ink); color: var(--c-ink-inverse); display: none; place-items: center; box-shadow: var(--shadow-float); z-index: var(--z-sticky); }
.back-to-top:hover { background: var(--c-primary); color: var(--c-primary-ink); }
.back-to-top.is-visible { display: grid; }

/* layout with sticky sidebar (article + calculators) */
.with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); align-items: start; }
@container page (min-width: 1200px) { .with-sidebar { grid-template-columns: var(--toc-width) minmax(0, 1fr); } .with-sidebar .toc { display: block; } }
.with-sidebar--right { grid-template-columns: minmax(0, 1fr); }
@container page (min-width: 1200px) { .with-sidebar--right { grid-template-columns: minmax(0, 1fr) var(--toc-width); } }

/* ============ pagination / load more / sort / filter / share ============ */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-block: var(--space-7); }
.pager__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); border: var(--border-1) solid var(--c-line); border-radius: var(--radius-card); background: var(--c-surface); text-decoration: none; color: var(--c-ink); min-width: 0; }
.pager__item:hover, .pager__item.is-hover { border-color: var(--c-primary); }
.pager__item--next { text-align: right; align-items: flex-end; }
.pager__dir { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-muted); }
.pager__title { font-weight: var(--weight-semibold); font-size: var(--text-base); line-height: var(--leading-snug); }
@container page (max-width: 640px) { .pager { grid-template-columns: 1fr; } .pager__item--next { text-align: left; align-items: flex-start; } }
.load-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding-block: var(--space-6); }
.load-more__count { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); }
.sort-control { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--c-muted); }
.sort-control .field__select { min-height: var(--ctl-height-sm); padding-block: 0; font-size: var(--text-sm); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-1) solid var(--c-line); margin-bottom: var(--space-5); }
.filter-bar__count { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--c-muted); }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-block: var(--space-4); border-top: var(--border-1) solid var(--c-line); border-bottom: var(--border-1) solid var(--c-line); font-family: var(--font-ui); }
.share-row__label { font-size: var(--text-xs); color: var(--c-muted); margin-right: var(--space-2); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-bold); }

/* ============ accordion (FAQ) ============ */
.accordion { border-top: var(--border-1) solid var(--c-line); }
.accordion__item { border-bottom: var(--border-1) solid var(--c-line); }
.accordion__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--hit-min); padding: var(--space-4) 0; cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-md); }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after { content: "+"; flex: none; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-pill); border: var(--border-1) solid var(--c-line-strong); display: grid; place-items: center; font-size: var(--text-md); color: var(--c-muted); transition: transform var(--dur-base) var(--ease-out); }
.accordion__item[open] summary::after { content: "–"; color: var(--c-primary); border-color: var(--c-primary); }
.accordion__item summary:hover { color: var(--c-primary); }
.accordion__panel { padding: 0 0 var(--space-5); color: var(--c-ink-soft); max-width: var(--measure); }

/* ============ long-form prose ============ */
.prose { max-width: var(--measure); font-size: var(--text-md); line-height: var(--leading-loose); color: var(--c-ink); }
[data-skin="asg"] .prose { font-size: var(--text-base); line-height: var(--leading-loose); }
.prose > * + * { margin-top: var(--space-5); }
.prose h1 { font-size: var(--text-3xl); margin-top: 0; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-8); padding-bottom: var(--space-2); border-bottom: var(--rule-heading); }
.prose h3 { font-size: var(--text-lg); margin-top: var(--space-7); }
.prose h4 { font-size: var(--text-md); margin-top: var(--space-6); font-family: var(--font-ui); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--text-xs); color: var(--c-muted); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--space-4); }
.prose ul, .prose ol { padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.prose li::marker { color: var(--c-accent); }
.prose blockquote { margin-inline: 0; padding: var(--space-1) 0 var(--space-1) var(--space-5); border-left: var(--border-3) solid var(--c-primary); font-family: var(--font-accent); font-style: italic; font-size: var(--text-lg); color: var(--c-ink-soft); }
.prose blockquote cite { display: block; margin-top: var(--space-2); font-style: normal; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); }
.prose figure { margin: var(--space-7) 0; }
.prose figure img, .prose figure .placeholder { border-radius: var(--radius-card); }
.prose figcaption { margin-top: var(--space-2); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); }
.prose hr { border: 0; border-top: var(--border-1) solid var(--c-line); margin-block: var(--space-7); }
.prose code { font-family: ui-monospace, monospace; font-size: .9em; background: var(--c-bg-alt); padding: 0 var(--space-1); border-radius: var(--radius-xs); }
.prose a { text-decoration-thickness: var(--border-1); }
.prose--article-head { max-width: none; }
.placeholder { border: var(--border-1) dashed var(--c-line-strong); background: var(--c-bg-alt); display: flex; align-items: flex-end; padding: var(--space-3); font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--c-muted); min-height: 160px; }

/* ============ media ============
   One image block with a fixed box; the img fills it with object-fit so existing ASG article
   images (mixed sizes, mostly 1200×675 and 800×600) all render consistently.
   Markup:
     <figure class="media media--16x9">
       <img src="…-800.jpg" srcset="…-400.jpg 400w, …-800.jpg 800w, …-1200.jpg 1200w"
            sizes="(min-width: 900px) 720px, 100vw" loading="lazy" decoding="async" alt="…">
       <figcaption class="media__caption">…</figcaption>
     </figure>
   Hero images: loading="eager" fetchpriority="high". Everything below the fold: loading="lazy".
   If only one source size exists, omit srcset — the box still holds its ratio and object-fit crops. */
.media { --media-ratio: 16 / 9; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.media__frame, .media > img, .media > .placeholder { aspect-ratio: var(--media-ratio); width: 100%; border-radius: var(--radius-card); overflow: hidden; background: var(--c-bg-alt); }
.media > img, .media__frame > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--media-focus, center); }
.media > .placeholder { min-height: 0; }
.media--16x9 { --media-ratio: 16 / 9; }
.media--4x3 { --media-ratio: 4 / 3; }
.media--1x1 { --media-ratio: 1; }
.media--3x2 { --media-ratio: 3 / 2; }
.media--product { --media-ratio: 1; }
.media--product > img, .media--product .media__frame > img { object-fit: contain; background: var(--c-surface-alt); padding: var(--space-4); }
.media--contain > img { object-fit: contain; }
.media--flush, .media--flush > img, .media--flush .media__frame { border-radius: 0; }
.media--hero { --media-ratio: 21 / 9; }
.media__caption { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); line-height: var(--leading-snug); }
.media__credit { color: var(--c-muted); opacity: .8; }
.media__credit::before { content: " · "; }
.media--skeleton > .media__frame { position: relative; }
.card__media.media { gap: 0; }
.card__media.media > img, .card__media .media__frame { border-radius: 0; }
@container page (max-width: 640px) { .media--hero { --media-ratio: 4 / 3; } }

/* table */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-family: var(--font-ui); }
[data-skin="gb"] .table { font-family: var(--font-body); font-size: var(--text-base); }
.table th, .table td { padding: var(--space-3) var(--space-3); text-align: left; vertical-align: top; border-bottom: var(--border-1) solid var(--c-line); }
.table th { font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-muted); font-weight: var(--weight-bold); border-bottom: var(--border-2) solid var(--c-ink); font-family: var(--font-ui); }
.table tbody tr:hover { background: var(--c-surface); }
.table--striped tbody tr:nth-child(even) { background: var(--c-surface); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============ forms ============ */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field__label { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-muted); }
.field__label--plain { letter-spacing: 0; text-transform: none; font-size: var(--text-sm); color: var(--c-ink); }
.field__required { color: var(--c-accent); }
.field__input, .field__select, .field__textarea { width: 100%; min-height: var(--ctl-height); padding: var(--space-2) var(--ctl-pad-x); background: var(--c-surface-alt); border: var(--border-1) solid var(--c-line-strong); border-radius: var(--radius-ctl); color: var(--c-ink); font-family: var(--font-ui); font-size: var(--text-base); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
[data-skin="gb"] .field__input, [data-skin="gb"] .field__textarea { font-family: var(--font-body); font-size: var(--text-md); }
.field__input::placeholder, .field__textarea::placeholder { color: var(--c-muted); }
.field__input:hover, .field__select:hover, .field__textarea:hover { border-color: var(--c-ink-soft); }
.field__input:focus, .field__select:focus, .field__textarea:focus, .field__input.is-focus { border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 25%, transparent); }
.field__input:disabled, .field__select:disabled, .field__textarea:disabled { opacity: .5; cursor: not-allowed; background: var(--c-bg-alt); }
.field__textarea { min-height: calc(var(--ctl-height) * 2.5); resize: vertical; line-height: var(--leading-normal); }
.field__select { appearance: none; -webkit-appearance: none; padding-right: var(--space-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - var(--space-5)) 50%, calc(100% - var(--space-5) + 5px) 50%; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
.field__input--num { text-align: center; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.field__hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); }
.field__error { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-danger); font-weight: var(--weight-semibold); display: none; }
.field--error .field__input, .field--error .field__select, .field--error .field__textarea { border-color: var(--c-danger); }
.field--error .field__error { display: block; }
.field--error .field__hint { display: none; }
.field__unit { position: relative; }
.field__unit .field__input { padding-right: var(--space-8); }
.field__unit-label { position: absolute; right: var(--ctl-pad-x); top: 50%; transform: translateY(-50%); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--c-muted); pointer-events: none; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--space-4); }
.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); cursor: pointer; min-height: var(--hit-min); align-items: center; }
.checkbox__input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; border: var(--border-2) solid var(--c-line-strong); border-radius: var(--radius-sm); background: var(--c-surface-alt); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); }
.checkbox__input:checked { background: var(--c-primary); border-color: var(--c-primary); }
.checkbox__input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--c-primary-ink); border-width: 0 var(--border-2) var(--border-2) 0; transform: translateY(-1px) rotate(45deg); }
.checkbox__input:disabled { opacity: .5; cursor: not-allowed; }
.checkbox--radio .checkbox__input { border-radius: var(--radius-pill); }
.checkbox--radio .checkbox__input:checked::after { width: 8px; height: 8px; border: 0; border-radius: var(--radius-pill); background: var(--c-primary-ink); transform: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding-top: var(--space-2); }
.form-status { font-family: var(--font-ui); font-size: var(--text-sm); padding: var(--space-3) var(--space-4); border-radius: var(--radius-ctl); }
.form-status--success { background: var(--c-success-soft); color: var(--c-success); }
.form-status--error { background: var(--c-danger-soft); color: var(--c-danger); }

/* ============ modal ============ */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-5); }
.modal[open], .modal.is-open, .modal--inline { display: flex; }
.modal--inline { position: relative; inset: auto; padding: var(--space-6); background: var(--c-overlay); border-radius: var(--radius-card); }
.modal__backdrop { position: absolute; inset: 0; background: var(--c-overlay); }
.modal--inline .modal__backdrop { display: none; }
.modal__panel { position: relative; width: 100%; max-width: 560px; max-height: 100%; overflow: auto; background: var(--c-surface-alt); border-radius: var(--radius-card); box-shadow: var(--shadow-float); display: flex; flex-direction: column; }
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-3); border-bottom: var(--border-1) solid var(--c-line); }
.modal__title { font-size: var(--text-lg); }
.modal__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.modal__footer { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-5); }
.modal__list { display: grid; gap: var(--space-1); max-height: 320px; overflow: auto; }
.modal__option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); border-radius: var(--radius-md); text-align: left; min-height: var(--hit-min); }
.modal__option:hover { background: var(--c-bg); }
.modal__option-thumb { width: var(--space-7); height: var(--space-7); border-radius: var(--radius-md); background: var(--c-bg-alt); flex: none; }

/* ============ comparison table ============ */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-ui); font-size: var(--text-sm); }
.compare th, .compare td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-1) solid var(--c-line); vertical-align: top; text-align: left; }
.compare thead th { vertical-align: bottom; border-bottom: var(--border-2) solid var(--c-ink); }
.compare__product { display: flex; flex-direction: column; gap: var(--space-2); }
.compare__thumb { aspect-ratio: 1; border-radius: var(--radius-md); background: var(--c-bg-alt); }
.compare__name { font-weight: var(--weight-bold); font-size: var(--text-base); font-family: var(--font-body); }
.compare__price { color: var(--c-ink-soft); }
.compare__spec { font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-muted); font-weight: var(--weight-bold); width: 22%; }
.compare__best { background: var(--c-success-soft); color: var(--c-success); font-weight: var(--weight-semibold); }
.compare__empty { color: var(--c-muted); }
.compare__slot { display: grid; place-items: center; gap: var(--space-2); aspect-ratio: 1; border: var(--border-2) dashed var(--c-line-strong); border-radius: var(--radius-md); color: var(--c-muted); font-size: var(--text-xs); }
.compare-wrap { overflow-x: auto; }
@container page (max-width: 640px) { .compare { min-width: 560px; } }

/* ============ calculator shell ============ */
.calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.calc__inputs { background: var(--c-surface); border: var(--border-1) solid var(--c-line); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.calc__results { background: var(--c-primary); color: var(--c-primary-ink); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(var(--header-height) + var(--space-5)); }
.calc__results .kicker { color: var(--c-primary-ink); opacity: .75; }
.calc__value { font-family: var(--font-ui); font-size: var(--text-display); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.calc__unit { font-size: var(--text-base); opacity: .85; }
.calc__secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-1) solid color-mix(in srgb, var(--c-primary-ink) 25%, transparent); }
.calc__secondary dt { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .75; }
.calc__secondary dd { margin: 0; font-family: var(--font-ui); font-size: var(--text-lg); font-weight: var(--weight-bold); }
.calc__results .btn--secondary { border-color: var(--c-primary-ink); color: var(--c-primary-ink); }
.calc__results .btn--secondary:hover { background: var(--c-primary-ink); color: var(--c-primary); }
.calc__sources { grid-column: 1 / -1; }
.calc__fix { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-card); background: var(--c-warning-soft); border: var(--border-1) solid color-mix(in srgb, var(--c-warning) 35%, transparent); }
.calc__fix--ok { background: var(--c-success-soft); border-color: color-mix(in srgb, var(--c-success) 35%, transparent); }
.calc__fix-badge { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-bold); color: var(--c-warning); padding-top: var(--space-1); }
.calc__fix--ok .calc__fix-badge { color: var(--c-success); }
.calc__fix-title { font-weight: var(--weight-semibold); font-size: var(--text-md); margin-bottom: var(--space-1); }
.calc__fix-steps { margin: var(--space-3) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--c-ink-soft); }
.calc__fix-steps strong { color: var(--c-ink); }
.cite { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--c-ink-soft); }
.cite li::marker { color: var(--c-accent); font-family: var(--font-ui); font-size: var(--text-xs); }
.cite__title { font-style: italic; }
.cite__pub { color: var(--c-muted); }
.cite a { font-family: var(--font-ui); font-size: var(--text-xs); margin-left: var(--space-1); }
.cite__accessed { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--c-muted); }
.scrollspy-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) 0; position: sticky; top: var(--header-height); background: var(--c-bg); background-image: var(--c-texture); z-index: var(--z-dropdown); border-bottom: var(--border-1) solid var(--c-line); }
@container page (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc__results { position: static; } .calc__fix { grid-template-columns: 1fr; } }

/* ============ bento (ASG homepage) ============ */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 176px; gap: var(--space-4); }
.tile { border-radius: var(--radius-tile); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3); overflow: hidden; position: relative; min-width: 0; color: inherit; text-decoration: none; }
.tile--primary { background: var(--c-primary); color: var(--c-primary-ink); grid-column: span 2; grid-row: span 2; padding: var(--space-6); }
.tile--accent { background: var(--c-accent); color: var(--c-accent-ink); grid-column: span 2; }
.tile--paper { background: var(--c-surface); border: var(--border-1) solid var(--c-line); }
.tile--ink { background: var(--c-ink-surface); color: var(--c-ink-surface-text); }
.tile--wide { grid-column: span 2; }
.tile__kicker { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: .8; }
.tile--ink .tile__kicker, .tile--primary .link--on-dark { color: var(--c-highlight); opacity: 1; }
.tile--paper .tile__kicker { color: var(--c-muted); opacity: 1; }
.tile__title { font-size: var(--text-3xl); line-height: var(--leading-tight); max-width: 12ch; }
.tile__title em { font-family: var(--font-accent); font-style: italic; font-weight: var(--weight-medium); color: var(--c-highlight); }
.tile__text { font-size: var(--text-sm); line-height: var(--leading-normal); opacity: .8; max-width: 38ch; }
.tile__headline { font-family: var(--font-accent); font-weight: var(--weight-semibold); font-size: var(--text-md); line-height: var(--leading-snug); }
.tile__art { position: absolute; right: calc(-1 * var(--space-7)); top: calc(-1 * var(--space-7)); width: 150px; height: 150px; border-radius: var(--radius-pill); border: var(--border-1) dashed color-mix(in srgb, currentColor 30%, transparent); display: flex; align-items: center; justify-content: center; padding: var(--space-5); font-family: var(--font-ui); font-size: var(--text-2xs); opacity: .5; text-align: center; pointer-events: none; }
.tile__title { position: relative; }
.tile__value { font-family: var(--font-ui); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1; letter-spacing: var(--tracking-tight); }
.tile__value-note { font-size: var(--text-xs); opacity: .85; }
.tile--accent .field__input { background: var(--c-surface-alt); border-color: transparent; color: var(--c-ink); min-height: var(--ctl-height-sm); padding-inline: var(--space-2); }
.tile--paper .field__select { min-height: var(--ctl-height-sm); }
@container page (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; } .tile--primary { grid-column: span 2; grid-row: span 1; min-height: 360px; } }
@container page (max-width: 640px) { .bento { grid-template-columns: 1fr; } .tile--primary, .tile--accent, .tile--wide { grid-column: span 1; } .tile { min-height: 150px; } }

/* ============ zone picker ============ */
.zone-picker { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.zone-chip { flex: 1 1 36px; min-width: 36px; min-height: var(--ctl-height-sm); display: grid; place-items: center; border-radius: var(--radius-md); border: var(--border-1) solid color-mix(in srgb, currentColor 45%, transparent); font-family: var(--font-ui); font-weight: var(--weight-medium); cursor: pointer; opacity: .85; color: inherit; transition: background var(--dur-fast), opacity var(--dur-fast); }
.zone-chip:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.zone-chip[aria-selected="true"] { background: var(--c-surface-alt); color: var(--c-primary); border-color: var(--c-surface-alt); font-weight: var(--weight-bold); opacity: 1; }
.zone-readout { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-ctl); background: color-mix(in srgb, currentColor 12%, transparent); font-size: var(--text-sm); }
.zone-readout strong { font-weight: var(--weight-bold); }

/* ============ quick calc (tile) ============ */
.tile--calc { flex-direction: row; align-items: center; }
.quick-calc__switch { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-weight: var(--weight-bold); font-size: var(--text-md); cursor: pointer; position: relative; }
.quick-calc__switch::after { content: "▾"; font-size: var(--text-xs); opacity: .8; }
.quick-calc__inputs { display: flex; gap: var(--space-2); }
.quick-calc__inputs .field__input { width: 56px; text-align: center; }
.quick-calc__legend { font-family: var(--font-ui); font-size: var(--text-2xs); opacity: .8; }
.quick-calc__result { text-align: right; flex: none; }
@container page (max-width: 640px) { .tile--calc { flex-direction: column; align-items: stretch; } .quick-calc__result { text-align: left; } .tile__art { display: none; } }

/* ============ hero (article / category / product heads) ============ */
.page-head { padding-block: var(--space-6) var(--space-5); border-bottom: var(--rule-heading); margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.page-head__title { font-size: var(--text-3xl); max-width: 20ch; }
.page-head__title--serif { font-family: var(--font-accent); font-weight: var(--weight-semibold); }
.page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-family: var(--font-ui); font-size: var(--text-sm); color: var(--c-muted); }
.page-head__meta strong { color: var(--c-ink); }

/* ============ product detail ============ */
.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.product__gallery { display: grid; gap: var(--space-3); position: sticky; top: calc(var(--header-height) + var(--space-5)); }
.product__hero { border: var(--border-1) solid var(--c-line); }   /* compose with .media.media--product */
.product__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); }
.product__thumb { aspect-ratio: 1; border-radius: var(--radius-md); background: var(--c-bg-alt); border: var(--border-2) solid transparent; cursor: pointer; overflow: hidden; padding: 0; }
.product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product__thumb[aria-selected="true"] { border-color: var(--c-ink); }
.product__info { display: flex; flex-direction: column; gap: var(--space-4); }
.product__price { font-family: var(--font-ui); font-size: var(--text-2xl); font-weight: var(--weight-bold); display: flex; align-items: baseline; gap: var(--space-3); }
.product__price small { font-size: var(--text-sm); color: var(--c-muted); font-weight: var(--weight-regular); }
.product__specs { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); font-family: var(--font-ui); padding: var(--space-4) 0; border-top: var(--border-1) solid var(--c-line); border-bottom: var(--border-1) solid var(--c-line); }
.product__specs dt { color: var(--c-muted); }
.product__specs dd { margin: 0; }
.option-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.option { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--ctl-height); padding: 0 var(--space-4); border-radius: var(--radius-ctl); border: var(--border-1) solid var(--c-line-strong); background: var(--c-surface-alt); font-family: var(--font-ui); font-size: var(--text-sm); cursor: pointer; }
.option:hover { border-color: var(--c-ink); }
.option[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-ink-inverse); }
.option__price { color: var(--c-muted); font-size: var(--text-xs); }
.option[aria-pressed="true"] .option__price { color: inherit; opacity: .8; }
@container page (max-width: 900px) { .product { grid-template-columns: 1fr; } .product__gallery { position: static; } }

/* ============ GB-specific (unchanged from v1, tokenized) ============ */
.entry-card { background: var(--c-surface); border: var(--border-1) solid var(--c-line); border-radius: var(--radius-tile); padding: var(--space-6) var(--space-7); box-shadow: var(--shadow-card); position: relative; }
.entry-headword { font-family: var(--font-accent); font-size: var(--text-3xl); font-weight: var(--weight-semibold); }
.entry-pron { font-family: var(--font-ui); color: var(--c-muted); font-size: var(--text-base); }
.entry-pos { font-family: var(--font-accent); font-style: italic; color: var(--c-primary); }
.entry-def { font-family: var(--font-accent); font-size: var(--text-md); line-height: var(--leading-loose); color: var(--c-ink-soft); }
.entry-xrefs { border-top: var(--border-1) dotted var(--c-line); padding-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: baseline; }
.entry-xrefs a { font-family: var(--font-accent); font-style: italic; }
.stacks-drawer { background: var(--c-surface); border: var(--border-1) solid var(--c-line); border-radius: var(--radius-tile); padding: var(--space-3) var(--space-4); cursor: pointer; box-shadow: var(--shadow-inset-top); }
.stacks-drawer:hover { border-color: var(--c-primary); }
.stacks-pull { width: 34px; height: 7px; border: var(--border-1) solid var(--c-line-strong); border-radius: var(--radius-xs); margin: 0 auto; }
.ref-stamp { border: var(--border-2) solid color-mix(in srgb, var(--c-accent) 25%, transparent); color: var(--c-accent); font-family: var(--font-ui); font-weight: var(--weight-bold); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transform: rotate(-6deg); opacity: .85; display: inline-block; }
.alpha-index { display: flex; justify-content: center; gap: var(--space-1); font-family: var(--font-ui); flex-wrap: wrap; }
.alpha-index a { padding: var(--space-1) var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); border-radius: var(--radius-sm); text-decoration: none; min-width: var(--space-6); text-align: center; }
.alpha-index a:hover, .alpha-index a[aria-current] { background: var(--c-primary); color: var(--c-primary-ink); }