/* Shared by the landing page: fonts, tokens, the size picker,
   the button, the gap marker and the phone buy bar. Each comp adds its own layout. */
@font-face { font-family: "URW Geometric"; src: url("/fonts/URWGeometric-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "URW Geometric"; src: url("/fonts/URWGeometric-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "URW Geometric"; src: url("/fonts/URWGeometric-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("/fonts/PermanentMarker.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --cream: #FBF5E9; --field: #F4ECDC; --panel: #F3EBDA; --raised: #FFFDF8;
  --ink: #1A1A1A; --deep: #111111; --muted: rgba(26,26,26,.64);
  --yellow: #FFE600; --yellow-field: #FBE300; --warm-white: #F7F4EC;
  --sans: "URW Geometric", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --marker: "Permanent Marker", "Marker Felt", cursive;
  --gutter: clamp(16px, 4vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, fieldset, table { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--yellow); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.mono { font: 500 .74rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--muted); }
.link { text-underline-offset: 3px; }

/* header */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px var(--gutter); }
.top__mark { font: 900 1.05rem/1 var(--sans); letter-spacing: -.02em; text-transform: uppercase; text-decoration: none; }
.top__nav { display: flex; align-items: center; gap: 18px; }
.top__nav a.mono { min-height: 44px; display: inline-flex; align-items: center; }

/* button */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; font: 700 .82rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn--ink { background: var(--ink); color: var(--warm-white); box-shadow: none; }
.btn--ink:hover { transform: none; background: #000; }
.btn--small { min-height: 44px; padding: 0 18px; box-shadow: none; }
.on-dark .btn { border-color: var(--yellow); box-shadow: none; }

/* size picker */
.pick legend { font: 500 .74rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.pick__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 460px; }
.pick label { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick span { display: block; min-height: 60px; padding: 9px 6px 8px; border-radius: 12px; background: rgba(26,26,26,.07); text-align: center; font: 900 1.05rem/1.1 var(--sans); }
.pick small { display: block; margin-top: 4px; font: 500 .62rem/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); }
.pick input:checked + span { background: var(--ink); color: var(--warm-white); }
.pick input:checked + span small { color: rgba(247,244,236,.8); }
.pick input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.on-dark .pick span { background: rgba(247,244,236,.12); }
.on-dark .pick small { color: rgba(247,244,236,.7); }
.on-dark .pick input:checked + span { background: var(--warm-white); color: var(--ink); }
.on-dark .pick input:checked + span small { color: var(--muted); }

.price { font: 500 .82rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; margin: 16px 0 14px; }
.price b { font-weight: 700; font-size: 1.05rem; }
.fine { font-size: .92rem; color: var(--muted); margin-top: 14px; }
.on-dark .fine { color: rgba(247,244,236,.72); }

/* a visible hole that nobody can mistake for content */
.gap { border: 2px dashed var(--ink); border-radius: 12px; padding: 14px 16px; font: 500 .8rem/1.55 var(--mono); max-width: 60ch; }
.gap b { display: block; letter-spacing: .1em; margin-bottom: 4px; }
.on-dark .gap { border-color: var(--warm-white); }

/* size table */
.fit { width: 100%; max-width: 460px; border-collapse: collapse; font: 500 .84rem/1.4 var(--mono); }
.fit th { text-align: left; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; color: var(--muted); padding: 0 0 8px; }
.fit td { padding: 10px 0; border-top: 1px solid rgba(26,26,26,.18); }
.fit td:first-child { font: 900 1.05rem/1 var(--sans); width: 5.5em; }

/* phone buy bar: appears once the hero button has scrolled away */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: none; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--deep); color: var(--warm-white); }
.buybar p { font: 500 .74rem/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.buybar b { display: block; font-size: .95rem; }
.buybar .btn { min-height: 44px; padding: 0 18px; box-shadow: none; border-color: var(--yellow); }
@media (max-width: 760px) { .buybar.is-on { display: flex; } body.has-bar { padding-bottom: 72px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }