/* M4ART — base: reset, typography, layout, controls, header, footer.
   Shared by every template. Depends on tokens.css. No third-party code. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--ff-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
p, h1, h2, h3, h4, figure, dl, dd { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-signal); color: var(--c-ink); }
[hidden] { display: none !important; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: var(--s-3) var(--s-4); border-radius: var(--r-control); background: var(--c-ink); color: var(--c-gallery); text-decoration: none; }
.skip-link:focus { top: var(--s-4); }

/* ---------- Typography ---------- */
.t-h1, .t-h2 { font-family: var(--ff-serif); font-weight: 400; letter-spacing: var(--ls-serif); text-wrap: balance; }
.t-h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.02; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-muted); }
.t-eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-muted); }
.t-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }
.t-muted { color: var(--fg-muted); }
.measure { max-width: var(--measure); }
.link { color: var(--fg); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.link:hover { text-decoration-color: var(--fg-muted); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--max-w) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }
.section-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-12); }
.section-head--num { grid-template-columns: 1fr auto; align-items: end; }
.section-head--num > .num { grid-column: 2; grid-row: 1 / span 4; font-family: var(--ff-serif); font-size: clamp(96px, 14vw, 200px); line-height: .8; letter-spacing: -.04em; color: var(--line); font-variant-numeric: lining-nums; user-select: none; }
@media (max-width: 767px) {
  .section-head { margin-bottom: var(--s-8); }
  .section-head--num { grid-template-columns: 1fr; }
  .section-head--num > .num { display: none; }
}

/* Definition list as a facts table: label / value rows */
.facts { display: grid; border-top: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.facts dt, .stats dt, .state__key, .story__kicker, .transcript__label { font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); }
.facts dt { padding-top: 3px; }
.facts dd { font-size: 16px; line-height: 24px; }
.facts--grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3) var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.facts--grid > div { display: block; padding: 0; border: 0; }
.facts--grid dd { margin-top: 2px; }
.facts--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .facts--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .facts > div { grid-template-columns: 1fr; gap: var(--s-1); } .facts--grid, .facts--4 { grid-template-columns: 1fr; } }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--control-h); padding: var(--s-3) var(--s-6); border-radius: var(--r-control); border: 1px solid var(--c-ink); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover); }
.btn--primary { background: var(--c-signal); color: var(--c-ink); }
.btn--primary:hover { background: var(--c-signal-hover); }
.btn--secondary { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--secondary:hover { background: var(--bg-muted); }
.btn--ink { background: var(--c-ink); color: var(--c-gallery); }
.btn--ink:hover { background: var(--c-dark-surface); }
.btn--danger { color: var(--c-error); border-color: var(--c-error); }
.btn--danger:hover { background: color-mix(in srgb, var(--c-error) 8%, transparent); }
.btn--lg { min-height: 56px; padding-inline: var(--s-8); }
.btn--sm { min-height: 40px; padding-inline: var(--s-4); font-size: 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: default; pointer-events: none; }
.btn .icon { width: 20px; height: 20px; }

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--filled { fill: currentColor; stroke: none; }
.icon--sm { width: 16px; height: 16px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--fg); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: 600; }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ink); }
.badge--muted { background: var(--c-surface); color: var(--fg-muted); }

.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--fg); transition: background-color var(--t-hover), border-color var(--t-hover), color var(--t-hover); }
.chip span { font-size: var(--fs-eyebrow); color: var(--fg-muted); font-variant-numeric: lining-nums; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-gallery); }
.chip[aria-pressed="true"] span { color: var(--c-dark-secondary); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.field { width: 100%; min-height: var(--control-h); padding: 0 var(--s-4); border-radius: var(--r-control); border: 1px solid var(--c-ink); background: var(--c-paper); color: var(--c-ink); }
.field::placeholder { color: var(--c-secondary); }
.field:focus { outline: none; box-shadow: 0 0 0 3px var(--c-signal), 0 0 0 5px var(--c-ink); }
.field--area { min-height: 160px; padding-block: var(--s-3); resize: vertical; line-height: 24px; }
select.field { padding-right: var(--s-8); }

.switch { position: relative; display: inline-block; width: 48px; height: 28px; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 14px; background: var(--c-line); transition: background-color var(--t-hover); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-paper); box-shadow: 0 1px 2px rgba(23,26,24,.2); transition: transform var(--t-hover); }
.switch input:checked + i { background: var(--c-ink); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* Forms */
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form__field { display: grid; gap: var(--s-2); }
.form__field label { font-size: 14px; font-weight: 600; }
.form__label-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font-size: 14px; }
.form__check { display: flex; align-items: flex-start; gap: var(--s-2); font-size: 14px; color: var(--fg-muted); }
.form__check input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-ink); }
.form__msg { min-height: var(--lh-caption); }
.form__msg.is-error { color: var(--c-error); }
.form .btn { justify-self: start; }
@media (max-width: 599px) { .form__row { grid-template-columns: 1fr; } .form .btn { width: 100%; } }

/* ---------- Header ---------- */
.header { position: -webkit-sticky; position: sticky; top: 0; z-index: 50; height: var(--header-h); background: color-mix(in srgb, var(--c-gallery) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); color: var(--c-ink); --logo-ink: var(--c-ink); }
.header__inner { height: 100%; display: flex; align-items: center; gap: var(--s-6); }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo svg { width: var(--logo-w); height: auto; }
.logo__ink { fill: var(--logo-ink); }
.nav { display: flex; gap: var(--s-6); margin-left: var(--s-8); }
.nav a { position: relative; padding: var(--s-2) 0; font-weight: 600; text-decoration: none; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-hover) var(--ease); }
.nav a:hover::after, .nav a.is-active::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.lang { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 var(--s-3); border-radius: var(--r-control); font-weight: 600; }
.lang .icon { width: 16px; height: 16px; }
.lang:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.menu-btn { display: none; width: var(--tap-min); height: var(--tap-min); align-items: center; justify-content: center; border-radius: var(--r-control); }
.menu-btn .icon path { transition: transform var(--t-reveal) var(--ease), opacity var(--t-hover); transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { opacity: 0; }
.menu-btn[aria-expanded="true"] .l3 { transform: translateY(-5px) rotate(-45deg); }
.mobile-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: var(--s-2) var(--gutter) var(--s-6); background: var(--c-gallery); color: var(--c-ink); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(23,26,24,.3); }
.mobile-nav[data-open="true"] { display: block; animation: fade-in var(--t-reveal) var(--ease) both; }
.mobile-nav a { display: flex; align-items: center; min-height: 56px; text-decoration: none; border-bottom: 1px solid var(--line); font-family: var(--ff-serif); font-size: 26px; line-height: 1.1; }
.mobile-nav .btn { margin-top: var(--s-6); width: 100%; font-family: var(--ff-sans); font-size: var(--fs-body); }
@media (max-width: 1199px) { .nav, .header__cta { display: none; } .menu-btn { display: inline-flex; } }

/* User menu (account pages) */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--c-ink); color: var(--c-gallery); display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.avatar--lg { width: 44px; height: 44px; font-size: 16px; }
.usermenu { position: relative; }
.usermenu__btn { cursor: pointer; transition: box-shadow var(--t-hover); }
.usermenu__btn:hover, .usermenu__btn[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--c-signal); }
.usermenu__pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 240px; padding: var(--s-2); display: grid; gap: 2px; border-radius: var(--r-card); background: var(--c-paper); border: 1px solid var(--line); box-shadow: 0 24px 48px -16px rgba(23,26,24,.35); }
.usermenu__head { display: grid; gap: 2px; padding: var(--s-3); margin-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.usermenu__pop a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-control); font-weight: 600; text-decoration: none; color: var(--fg); }
.usermenu__pop a:hover, .usermenu__pop a:focus-visible { background: var(--c-surface); }
.usermenu__out { margin-top: var(--s-2); border-top: 1px solid var(--line); color: var(--c-error) !important; }

/* ---------- Footer (dark surface) ---------- */
.footer { padding-block: var(--s-16) var(--s-6); }
.footer__top { display: grid; grid-template-columns: 5fr 2fr 2fr 2fr; gap: var(--s-8) var(--col-gap); align-items: start; }
.footer__brand { display: grid; gap: var(--s-4); max-width: 440px; }
.footer__logo { display: block; width: 176px; --logo-ink: var(--c-gallery); }
.footer__logo svg { width: 100%; }
.footer__tagline { font-family: var(--ff-serif); font-size: 32px; line-height: 1.1; letter-spacing: var(--ls-serif); }
.footer__tagline::after { content: ""; display: inline-block; width: .28em; height: .28em; margin-left: .12em; border-radius: 50%; background: var(--c-signal); }
.footer__desc { font-size: 15px; line-height: 23px; color: var(--fg-muted); }
.footer__col { display: grid; gap: var(--s-3); align-content: start; }
.footer__col .t-eyebrow { margin-bottom: var(--s-1); }
.footer__col a { width: fit-content; text-decoration: none; transition: color var(--t-hover); }
.footer__col a:hover { color: var(--c-signal); }
.footer__col a[aria-disabled="true"] { color: var(--fg-muted); }
.credits { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg-muted); }
.credits summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap-min); cursor: pointer; font-weight: 600; color: var(--fg); }
.credits ul { display: grid; gap: var(--s-2); padding-top: var(--s-3); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--fg-muted); }
.footer__links { display: inline-flex; gap: var(--s-4); }
.footer__links a { text-decoration: none; color: var(--fg-muted); }
.footer__links a:hover { color: var(--fg); }
@media (max-width: 1023px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .footer { padding-block: var(--s-12) var(--s-6); }
  .footer__top { gap: var(--s-6) var(--s-4); }
  .footer__brand { max-width: none; }
  .footer__tagline { font-size: 28px; }
  .footer__col { gap: 0; }
  .footer__col a, .footer__links a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer__col--wide { grid-column: 1 / -1; display: block; }
  .footer__col--wide .t-eyebrow { display: flex; margin-bottom: var(--s-2); }
  .footer__col--wide a { margin-right: var(--s-4); }
  .credits { margin-top: var(--s-8); }
  .footer__bottom { justify-content: flex-start; }
}

/* Store buttons (CTA) and store links (footer) share the data; only the CTA has the button look */
.stores { display: grid; grid-template-columns: repeat(3, max-content); gap: var(--s-3); }
.store { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 56px; min-width: 176px; padding: 0 var(--s-4) 0 var(--s-3); border-radius: var(--r-control); border: 1px solid var(--c-ink); background: var(--c-ink); color: var(--c-gallery); text-decoration: none; transition: background-color var(--t-hover); }
.store:hover { background: var(--c-dark-surface); }
.store[aria-disabled="true"] { cursor: default; }
.store .icon { width: 26px; height: 26px; }
.store span { display: grid; line-height: 1.1; }
.store small { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; opacity: .75; }
.store strong { font-size: 18px; font-weight: 600; }
@media (max-width: 1279px) { .stores { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 767px) { .stores { grid-template-columns: 1fr; gap: var(--s-2); } .store { min-width: 0; } }

/* ---------- Motion ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .logo--assemble [id^="facet-"] { animation: facet-in var(--t-assemble) var(--ease) both; }
  .logo--assemble #facet-upper  { --dx: -6px; --dy: -6px; }
  .logo--assemble #facet-lower  { --dx: -6px; --dy:  6px; animation-delay: var(--t-assemble-stagger); }
  .logo--assemble #facet-center { --dx: -4px; --dy:  0;   animation-delay: calc(var(--t-assemble-stagger) * 2); }
  .logo--assemble #facet-right  { --dx:  8px; --dy:  0;   animation-delay: calc(var(--t-assemble-stagger) * 3); }
  .logo--assemble #wordmark { animation: fade-in var(--t-reveal) var(--ease) both; animation-delay: calc(var(--t-assemble-stagger) * 4); }
  @keyframes facet-in { from { transform: translate(var(--dx), var(--dy)); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Touch: tap targets ≥ 44 px, no hover-only effects */
@media (max-width: 767px) {
  .btn, .chip { min-height: 44px; }
  .link { display: inline-block; padding-block: 6px; }
  .container { padding-inline: var(--gutter); }
}