/* Concept B — Studio: fonts, tokens, base, buttons, header, menu, drawer, product cards, footer, reveal states. */
@font-face { font-family: "Anybody"; src: url("../../shared/fonts/anybody.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../../shared/fonts/dm-mono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../../shared/fonts/dm-mono-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --chalk: #F4F4F1; --chalk-lo: #E7E7E2; --carbon: #0F0F10; --cobalt: #2E3BFF;
  --bg: var(--chalk); --fg: var(--carbon); --muted: #5E5E5A; --line: rgb(15 15 16 / .12);
  --sans: "Anybody", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: clamp(16px, 3vw, 40px); --header-h: 64px; --radius: 16px;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  --fs-h2: clamp(2.6rem, 1.2rem + 5.4vw, 7rem); --fs-h3: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
}
body[data-theme="cobalt"] { --bg: var(--cobalt); --fg: #FFFFFF; --muted: rgb(255 255 255 / .82); --line: rgb(255 255 255 / .28); }

*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
html.is-locked, html.intro { overflow: hidden; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--fs-md)/1.55 var(--sans); -webkit-font-smoothing: antialiased; transition: background-color .7s var(--ease-out), color .7s var(--ease-out); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
body[data-theme="cobalt"] :focus-visible { outline-color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -64px; z-index: 200; padding: 10px 14px; border-radius: 999px; background: var(--carbon); color: var(--chalk); transition: top .2s; }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.h2 { margin: 0; font: 800 var(--fs-h2)/.86 var(--sans); font-stretch: 70%; letter-spacing: -.01em; text-transform: uppercase; }
.h3 { margin: 0; font: 800 var(--fs-h3)/1 var(--sans); font-stretch: 90%; text-transform: uppercase; }
.section { padding: clamp(64px, 9vw, 140px) var(--gutter); }
.section-head { margin-bottom: clamp(28px, 4vw, 52px); }
.section-head--split { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--carbon); color: var(--chalk); font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .45s var(--spring), background-color .3s, color .3s, box-shadow .3s; }
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--cobalt); }
.btn--accent { background: var(--cobalt); color: #fff; }
.btn--accent:hover { background: var(--carbon); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { background: var(--carbon); color: var(--chalk); box-shadow: inset 0 0 0 1.5px var(--carbon); }
.btn--light { background: #fff; color: var(--carbon); }
.btn--light:hover { background: var(--carbon); color: #fff; }
.btn--block { width: 100%; }

/* ---- header ---- */
.site-header { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; height: var(--header-h); padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid transparent; transition: background-color .7s var(--ease-out), border-color .3s; }
.site-header.is-solid { border-bottom-color: var(--line); }
.site-header__logo { display: block; }
.site-header__logo .logo { height: 13px; width: auto; }
.site-header__nav ul { display: flex; justify-content: center; gap: 22px; margin: 0; padding: 0; list-style: none; font: 400 var(--fs-xs)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.site-header__nav a { position: relative; display: inline-block; padding: 6px 0; text-decoration: none; }
.site-header__nav a::before, .site-header__nav a::after { position: absolute; top: 6px; opacity: 0; transition: opacity .3s, transform .4s var(--ease-out); }
.site-header__nav a::before { content: "["; left: -10px; transform: translateX(-4px); }
.site-header__nav a::after { content: "]"; right: -10px; transform: translateX(4px); }
.site-header__nav a:hover::before, .site-header__nav a:hover::after { opacity: 1; transform: none; }
.site-header__tools { display: flex; align-items: center; gap: 10px; }
.tool { font: 400 var(--fs-xs)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 8px 6px; }
.bag-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font: 400 var(--fs-xs)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.bag-chip:hover { background: var(--fg); color: var(--bg); }
.bag-chip__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cobalt); color: #fff; font-weight: 500; }
body[data-theme="cobalt"] .bag-chip__n { background: #fff; color: var(--cobalt); }
.menu-toggle { position: relative; display: grid; place-content: center; gap: 6px; width: 40px; height: 40px; margin-right: -8px; }
.menu-toggle i { display: block; width: 22px; height: 2px; background: currentColor; }
@media (min-width: 900px) { .menu-toggle { display: none; } }
@media (max-width: 899px) {
  .site-header__nav, .hide-sm { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .site-header__logo .logo { height: 11px; }
}

/* ---- menu (mobile) ---- */
.menu { position: fixed; inset: 0; z-index: 90; }
.menu__panel { display: grid; grid-template-rows: auto 1fr auto; height: 100%; padding: 16px var(--gutter) 28px; overflow-y: auto; background: var(--carbon); color: var(--chalk); transform: translateY(-100%); transition: transform .7s var(--ease-io); }
.menu.is-open .menu__panel { transform: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.menu__top .logo { height: 12px; width: auto; color: var(--chalk); }
.menu__close { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; }
.menu__close svg { width: 16px; height: 16px; }
.menu__links { margin: 8vh 0 0; padding: 0; list-style: none; }
/* Sized so the longest link (ACCESSORIES, 7.44em wide at 100% width / 900 weight) fills the screen without overflowing. */
.menu__links a { display: block; width: max-content; max-width: 100%; text-decoration: none; font: 900 min(6.5rem, calc((100vw - 2 * var(--gutter)) / 7.8))/.92 var(--sans); text-transform: uppercase; font-stretch: 50%; opacity: 0; transition: font-stretch 1s var(--ease-out), opacity .5s, color .3s; transition-delay: calc(.2s + var(--i) * 70ms); }
.menu.is-open .menu__links a { font-stretch: 100%; opacity: 1; }
.menu__links a:hover { color: var(--cobalt); }
.menu__foot { margin: 24px 0 0; opacity: .8; }

/* ---- bag drawer ---- */
.drawer { position: fixed; inset: 0; z-index: 95; color: var(--carbon); }
.drawer__scrim { position: absolute; inset: 0; background: rgb(15 15 16 / .5); opacity: 0; transition: opacity .5s; }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; display: grid; grid-template-rows: auto auto 1fr auto; width: min(440px, 100%); background: var(--chalk); border-radius: var(--radius) 0 0 var(--radius); transform: translateX(100%); transition: transform .6s var(--ease-out); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid rgb(15 15 16 / .12); }
.drawer__title { margin: 0; font: 800 1.6rem/1 var(--sans); font-stretch: 80%; text-transform: uppercase; }
.drawer__title span { font-size: .8rem; vertical-align: middle; }
.drawer__ship { margin: 0; padding: 14px 24px; background: var(--cobalt); color: #fff; }
.drawer__items { margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.line { display: grid; grid-template-columns: 88px 1fr auto; gap: 16px; padding: 20px 24px; border-bottom: 1px solid rgb(15 15 16 / .12); }
.line img { width: 88px; height: 110px; object-fit: cover; border-radius: 10px; }
.line__name { margin: 0 0 6px; font: 700 1rem/1.2 var(--sans); font-stretch: 85%; text-transform: uppercase; }
.line__opts { margin: 0 0 12px; color: var(--muted); }
.line__price { margin: 0; }
.qty { display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(15 15 16 / .2); }
.qty button { width: 32px; height: 32px; }
.qty span { min-width: 20px; text-align: center; }
.drawer__foot { display: grid; gap: 10px; padding: 24px; border-top: 1px solid rgb(15 15 16 / .12); }
.drawer__total { display: flex; justify-content: space-between; margin: 0; font: 700 1.1rem/1.2 var(--sans); text-transform: uppercase; }
.drawer__note { margin: 0 0 6px; color: #5E5E5A; }

/* ---- product card + drag rail (both B pages) ---- */
.pcard { flex: 0 0 clamp(240px, 24vw, 360px); list-style: none; }
.pcard__link { display: block; text-decoration: none; }
.pcard__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--chalk-lo); }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform .9s var(--ease-out); -webkit-user-drag: none; user-select: none; }
.pcard__alt { opacity: 0; }
.pcard__tag { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 999px; background: var(--cobalt); color: #fff; font: 500 11px/1 var(--mono); text-transform: uppercase; }
@media (hover: hover) { .pcard:hover .pcard__alt { opacity: 1; } .pcard:hover .pcard__media img { transform: scale(1.04); } }
.pcard__row { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-weight: 700; font-stretch: 85%; text-transform: uppercase; line-height: 1.2; }
.pcard__price { flex: none; font: 500 var(--fs-sm)/1.4 var(--mono); }
.pcard__sub { display: block; margin-top: 4px; font: 400 var(--fs-xs)/1.4 var(--mono); color: var(--muted); text-transform: uppercase; }
.newin { overflow: hidden; } /* rails bleed to the screen edges */
.rail-wrap { position: relative; }
.rail { display: flex; gap: clamp(12px, 1.4vw, 20px); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; overflow-x: auto; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; }
.rail.is-dragging a { pointer-events: none; }
@media (hover: none) { .rail { scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); } .pcard { scroll-snap-align: start; flex-basis: 72vw; } }
.rail__bar { height: 2px; margin-top: 24px; background: var(--line); }
.rail__bar i { display: block; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(.12); }

/* ---- footer ---- */
.site-footer { overflow: hidden; padding: clamp(56px, 7vw, 100px) var(--gutter) 20px; background: var(--carbon); color: var(--chalk); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 40px; }
@media (max-width: 899px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }
.newsletter .h3 { margin-bottom: 12px; }
.newsletter p { margin: 0 0 20px; opacity: .75; }
.newsletter__row { display: flex; gap: 8px; }
.newsletter__row input { flex: 1; min-width: 0; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .08); color: var(--chalk); font: 400 var(--fs-sm)/1 var(--mono); }
.newsletter__row input::placeholder { color: rgb(244 244 241 / .6); }
.newsletter__row input:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
.newsletter .newsletter__note { min-height: 1.5em; margin: 12px 0 0; opacity: 1; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 559px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
.footer__cols h3 { margin: 0 0 14px; opacity: .6; }
.footer__cols ul { margin: 0; padding: 0; list-style: none; }
.footer__cols a { font-weight: 600; font-stretch: 85%; text-transform: uppercase; line-height: 2; text-decoration: none; }
.footer__cols a:hover { color: #9AA2FF; }
.footer__giant { margin: clamp(40px, 6vw, 88px) 0 16px; font-family: var(--sans); font-variation-settings: 'wdth' 150, 'wght' 800; line-height: .82; transform-origin: 50% 100%; will-change: transform; }
.footer__line { display: block; width: max-content; white-space: nowrap; font-size: 12vw; }
.footer__base { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgb(244 244 241 / .18); opacity: .7; }
.footer__base p { margin: 0; }
.footer__base a { text-decoration: none; }

/* ---- "compare concepts" pill ---- */
.demo-pill { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgb(15 15 16 / .9); color: var(--chalk); font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .3s; }
.demo-pill b { color: #9AA2FF; font-weight: 500; }
@media (max-width: 599px) { .demo-pill { padding: 8px 14px; } .demo-pill span { display: none; } }

/* ---- reveal states (only when JS runs and motion is allowed) + reduced motion ---- */
.js[data-motion="on"] [data-reveal] { opacity: 0; transform: translateY(56px) scale(.98); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.js[data-motion="on"] [data-reveal].is-in { opacity: 1; transform: none; }
.js[data-motion="on"] [data-stagger] > * { opacity: 0; transform: translateY(64px) rotate(1.5deg); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
.js[data-motion="on"] [data-stagger].is-in > * { opacity: 1; transform: none; }
/* transition: none, not a .01ms duration: with the default transition-property "all", a tiny duration turns every
   script-driven style change into a transition, so layout reads (fitText, lineIndex) would see stale values. */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition: none !important; }