/* ==========================================================================
   sk:p — Page compositions
   ========================================================================== */

/* --- Home: hero ---------------------------------------------------------- */
.hero { position: relative; background: var(--paper); overflow: hidden; }
.hero__inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  min-height: min(86vh, 820px);
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; min-height: 0; } }
.hero__copy {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-16) var(--gutter) var(--s-12);
  gap: var(--s-10);
}
.hero__title { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 0.94; letter-spacing: var(--tracking-tightest); }
.hero__title em { font-style: italic; color: var(--skp-blue); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.hero__meta div { min-width: 130px; }
.hero__meta dt { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--ink-faint); margin-bottom: var(--s-1); }
.hero__meta dd { font-size: var(--fs-sm); }
.hero__visual { position: relative; background: var(--skp-blue); overflow: hidden; }
/* Direct children only — the inset figure sizes itself. */
.hero__visual > img, .hero__visual > svg { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .hero__visual { aspect-ratio: 4/5; } }
/* The hero panel carries the mark and nothing else. ":p" is already the
   tongue-out face — set it upright and let the reader tilt their head, the
   way they have been doing since 1982. */
.hero__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* The glyphs live on a child. Centring on the element that holds the text
   turns <i>:</i> and the p into two separate grid items, stacked. */
.hero__wordmark {
  display: block;
  font-family: var(--font-display);
  font-style: var(--display-slant);
  font-size: clamp(7rem, 40vw, 36rem);
  line-height: 0.78;
  letter-spacing: -0.055em;
  color: #fff;
  white-space: nowrap;
  user-select: none;
}
.hero__wordmark i { font-style: inherit; color: var(--skp-lime); }
@media (max-width: 900px) {
  .hero__wordmark { font-size: clamp(8rem, 62vw, 30rem); }
}

.hero__tag {
  position: absolute; left: var(--s-6); bottom: var(--s-6);
  background: var(--skp-lime); color: var(--blue-900);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: var(--s-8);
  display: none; align-items: center; gap: var(--s-3);
  font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: #fff; mix-blend-mode: difference;
}
@media (min-width: 900px) { .hero__scroll { display: flex; } }
.hero__scroll i { display: block; width: 46px; height: 1px; background: currentColor; transform-origin: left; animation: scroll-line 2.4s var(--ease) infinite; }
@keyframes scroll-line { 0%,100% { transform: scaleX(0.2); } 50% { transform: scaleX(1); } }

/* --- Home: value ticker -------------------------------------------------- */
.ticker { background: var(--ink); color: #fff; padding-block: var(--s-3); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); }
.ticker span { display: inline-flex; align-items: center; gap: var(--s-10); white-space: nowrap; }
.ticker b { font-weight: 400; color: var(--skp-lime); }

/* --- Home: category split ------------------------------------------------ */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 820px) { .cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .cats { grid-template-columns: 1fr; } }
.cat {
  position: relative; background: #fff; padding: var(--s-8);
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3/4; overflow: hidden;
}
.cat__bg { position: absolute; inset: 0; z-index: 0; }
.cat__bg img, .cat__bg svg { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.cat:hover .cat__bg img, .cat:hover .cat__bg svg { transform: scale(1.05); }
.cat__body { position: relative; z-index: 1; }
.cat__num { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-faint); }
.cat__name { font-family: var(--font-display); font-size: var(--fs-xl); margin-top: var(--s-2); }
.cat__count { font-size: var(--fs-2xs); color: var(--ink-muted); margin-top: var(--s-1); }

/* --- Home: manifesto ----------------------------------------------------- */
.manifesto { text-align: center; }
.manifesto__quote {
  font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1.18; letter-spacing: var(--tracking-tight);
  max-width: 20ch; margin-inline: auto; text-wrap: balance;
}
.manifesto__quote em { font-style: italic; }
.manifesto__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-10); margin-top: var(--s-16); text-align: left; }
@media (max-width: 820px) { .manifesto__cols { grid-template-columns: 1fr; gap: var(--s-8); } }
.manifesto__col h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding-bottom: var(--s-3); border-bottom: 1px solid currentColor; margin-bottom: var(--s-4); }
.manifesto__col p { font-size: var(--fs-sm); line-height: var(--lh-loose); opacity: 0.85; }

/* --- Home: lookbook split ------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) { .split--reverse .split__media { order: 0; } }
.split__media { background: var(--paper); overflow: hidden; }
.split__media img, .split__media svg { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.split__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 6rem); gap: var(--s-5); }
.split__title { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.05; letter-spacing: var(--tracking-tight); }

/* --- Home: editorial trio ------------------------------------------------ */
.jgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
@media (max-width: 900px) { .jgrid { grid-template-columns: 1fr; } }
.jcard figure { background: var(--paper); aspect-ratio: 3/2; overflow: hidden; }
.jcard figure img, .jcard figure svg { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.jcard:hover figure img, .jcard:hover figure svg { transform: scale(1.04); }
.jcard__meta { display: flex; gap: var(--s-3); font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-faint); margin-top: var(--s-4); }
.jcard__title { font-family: var(--font-display); font-size: var(--fs-lg); margin-top: var(--s-2); letter-spacing: var(--tracking-tight); }
.jcard__excerpt { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: var(--s-2); }

/* --- Collection: header + toolbar --------------------------------------- */
.coll-head { padding-block: var(--s-8) var(--s-6); }
.coll-head__title { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: var(--tracking-tight); }
.coll-head__intro { max-width: 56ch; margin-top: var(--s-3); color: var(--ink-muted); font-size: var(--fs-sm); line-height: var(--lh-loose); }

.toolbar {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
  padding-block: var(--s-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.toolbar__left, .toolbar__right { display: flex; align-items: center; gap: var(--s-3); }
.toolbar__count { font-size: var(--fs-2xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.density { display: none; gap: 2px; border: 1px solid var(--line); padding: 2px; }
@media (min-width: 820px) { .density { display: flex; } }
.density button { width: 30px; height: 26px; display: grid; place-items: center; gap: 2px; }
.density button.is-active { background: var(--paper-alt); }
.density i { display: block; width: 2px; height: 12px; background: var(--ink-faint); }
.density button.is-active i { background: var(--ink); }
.density button span { display: flex; gap: 2px; }

.coll-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-12); align-items: start; padding-block: var(--s-8); }
@media (max-width: 1000px) { .coll-layout { grid-template-columns: 1fr; gap: var(--s-6); } .coll-layout__aside { display: none; } }

.fgroup { border-bottom: 1px solid var(--line-soft); padding-bottom: var(--s-5); margin-bottom: var(--s-5); }
.fgroup:last-child { border-bottom: 0; }
.fgroup__title { display: flex; justify-content: space-between; width: 100%; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--s-4); }
.fopt { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-sm); color: var(--ink-soft); cursor: pointer; padding-block: 5px; }
.fopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.fopt__box {
  width: 14px; height: 14px; border: 1px solid var(--ink-faint);
  display: grid; place-items: center; flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fopt input:checked + .fopt__box { background: var(--skp-blue); border-color: var(--skp-blue); }
.fopt input:checked + .fopt__box::after { content: ""; width: 7px; height: 4px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.fopt input:focus-visible + .fopt__box { outline: 2px solid var(--skp-blue); outline-offset: 2px; }
.fopt:hover { color: var(--ink); }
.fopt__n { margin-left: auto; font-size: var(--fs-3xs); color: var(--ink-faint); }
.fopt__dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(11,13,15,0.16); }
.fopt input:checked ~ .fopt__dot { box-shadow: 0 0 0 1px var(--ink); }

.active-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-bottom: var(--s-5); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px var(--s-3); background: var(--paper-alt);
  font-size: var(--fs-2xs); letter-spacing: var(--tracking-tight);
}
.chip button { line-height: 0; color: var(--ink-muted); }
.chip button:hover { color: var(--ink); }

.empty-state { padding-block: var(--s-20); text-align: center; }
.empty-state h3 { font-family: var(--font-display); font-size: var(--fs-xl); }
.empty-state p { color: var(--ink-muted); font-size: var(--fs-sm); margin-top: var(--s-2); }

/* --- Product detail ------------------------------------------------------ */
.pdp { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--s-12); align-items: start; padding-bottom: var(--s-20); }
@media (max-width: 1000px) { .pdp { grid-template-columns: 1fr; gap: var(--s-8); } }

.gallery { display: grid; grid-template-columns: 72px 1fr; gap: var(--s-4); }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr; } }
.gallery__thumbs { display: flex; flex-direction: column; gap: var(--s-2); position: sticky; top: calc(var(--header-h) + var(--s-6)); }
@media (max-width: 700px) { .gallery__thumbs { flex-direction: row; order: 2; position: static; overflow-x: auto; } }
.gallery__thumb {
  width: 72px; aspect-ratio: 4/5; background: var(--paper); overflow: hidden;
  border: 1px solid transparent; flex-shrink: 0;
  transition: border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  opacity: 0.65;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active, .gallery__thumb:hover { opacity: 1; border-color: var(--ink); }
.gallery__main { position: relative; background: var(--paper); aspect-ratio: 4/5; overflow: hidden; cursor: zoom-in; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease); }
.gallery__main.is-zoomed img { transform: scale(1.7); cursor: zoom-out; }
.gallery__dots { position: absolute; bottom: var(--s-4); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.gallery__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(11,13,15,0.2); transition: background var(--dur-fast); }
.gallery__dots i.is-active { background: var(--ink); }

.pdp__info { position: sticky; top: calc(var(--header-h) + var(--s-8)); display: flex; flex-direction: column; gap: var(--s-5); }
@media (max-width: 1000px) { .pdp__info { position: static; } }
.pdp__title { font-family: var(--font-display); font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); line-height: 1.1; }
.pdp__price { display: flex; align-items: baseline; gap: var(--s-3); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.pdp__price del { color: var(--ink-faint); font-size: var(--fs-sm); }
.pdp__tax { font-size: var(--fs-2xs); color: var(--ink-muted); }

.opt { display: flex; flex-direction: column; gap: var(--s-3); }
.opt__head { display: flex; justify-content: space-between; align-items: baseline; }
.opt__name { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); }
.opt__value { font-size: var(--fs-2xs); }
.opt__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.swatch {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(11,13,15,0.14);
  position: relative; cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.swatch:hover { transform: scale(1.06); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 1px #fff inset, 0 0 0 1.5px var(--ink); }

.size-btn {
  min-width: 52px; padding: 0.6rem var(--s-3);
  border: 1px solid var(--line); background: #fff;
  font-size: var(--fs-xs); letter-spacing: var(--tracking-tight);
  cursor: pointer; position: relative;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.size-btn:hover { border-color: var(--ink); }
.size-btn[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.size-btn[data-stock="out"] { color: var(--ink-faint); border-style: dashed; cursor: not-allowed; }
.size-btn[data-stock="out"]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top left, transparent 47.5%, var(--line) 47.5%, var(--line) 52.5%, transparent 52.5%);
}
.size-btn[data-stock="low"]::before {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--skp-blue);
}

.stock-note { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-2xs); color: var(--ink-soft); }
.stock-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.stock-note.is-low i { background: var(--skp-blue); }
.stock-note.is-out i { background: var(--ink-faint); }

.pdp__usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); padding-block: var(--s-5); border-block: 1px solid var(--line-soft); }
.pdp__usp div { font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); display: flex; flex-direction: column; gap: var(--s-2); }
.pdp__usp svg { color: var(--ink); }

.sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: rgba(255,255,255,0.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: var(--s-3) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease);
}
.sticky-atc.is-visible { transform: none; }
.sticky-atc__info { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.sticky-atc__thumb { width: 40px; aspect-ratio: 4/5; background: var(--paper); overflow: hidden; flex-shrink: 0; }
.sticky-atc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sticky-atc__title { font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__price { font-size: var(--fs-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* Size guide table */
.size-table th, .size-table td { padding: var(--s-3); text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--line-soft); }
.size-table thead th { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); }
.size-table tbody tr:hover { background: var(--paper); }

/* --- Cart page ----------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: var(--s-12); align-items: start; padding-block: var(--s-8) var(--s-20); }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; gap: var(--s-8); } }
.cart-summary { background: var(--paper); padding: var(--s-8); position: sticky; top: calc(var(--header-h) + var(--s-8)); }
@media (max-width: 900px) { .cart-summary { position: static; } }
.discount-row { display: flex; gap: var(--s-2); margin-block: var(--s-5); }
.discount-row .input { flex: 1; }

/* --- Editorial / article ------------------------------------------------- */
.article-hero { position: relative; aspect-ratio: 21/9; background: var(--paper); overflow: hidden; }
@media (max-width: 700px) { .article-hero { aspect-ratio: 4/3; } }
.article-hero img, .article-hero svg { width: 100%; height: 100%; object-fit: cover; }
.prose { max-width: 68ch; margin-inline: auto; font-size: var(--fs-md); line-height: 1.75; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.4em; }
.prose h2 { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink); letter-spacing: var(--tracking-tight); margin-top: 2em; }
.prose blockquote {
  font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink);
  border-left: 2px solid var(--skp-blue); padding-left: var(--s-6); margin-block: 2em;
  line-height: 1.35;
}
.prose figure { margin-block: 2.4em; }
.prose figcaption { font-size: var(--fs-2xs); color: var(--ink-muted); margin-top: var(--s-3); }
.prose strong { color: var(--ink); font-weight: 500; }

/* --- About --------------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
@media (max-width: 780px) { .stat-row { grid-template-columns: 1fr 1fr; } }
.stat { background: #fff; padding: var(--s-8) var(--s-6); }
.stat__num { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; letter-spacing: var(--tracking-tight); }
.stat__label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-muted); margin-top: var(--s-3); }

.timeline { border-left: 1px solid var(--line); padding-left: var(--s-8); }
.timeline__item { position: relative; padding-bottom: var(--s-10); }
.timeline__item::before {
  content: ""; position: absolute; left: calc(var(--s-8) * -1 - 3px); top: 7px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--skp-blue);
  box-shadow: 0 0 0 4px #fff;
}
.timeline__year { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--skp-blue); }
.timeline__title { font-family: var(--font-display); font-size: var(--fs-lg); margin-block: var(--s-2); }
.timeline__text { font-size: var(--fs-sm); color: var(--ink-muted); max-width: 56ch; line-height: var(--lh-loose); }

/* --- Account ------------------------------------------------------------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); padding-block: var(--s-16) var(--s-24); }
@media (max-width: 820px) { .auth { grid-template-columns: 1fr; gap: var(--s-10); } }
.auth__panel { max-width: 420px; }
.auth__panel h2 { font-family: var(--font-display); font-size: var(--fs-xl); margin-bottom: var(--s-2); }

/* --- 404 ----------------------------------------------------------------- */
.nf { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: var(--s-20); }
.nf__code { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 14rem); line-height: 0.85; color: var(--skp-blue); }

/* --- Page hero (generic) ------------------------------------------------- */
.phero { padding-block: var(--s-16) var(--s-10); border-bottom: 1px solid var(--line); }
.phero__title { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: var(--tracking-tightest); line-height: 1; }
.phero__sub { margin-top: var(--s-4); color: var(--ink-muted); max-width: 56ch; font-size: var(--fs-sm); line-height: var(--lh-loose); }

/* --- Checkout ------------------------------------------------------------ */
.checkout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-16); align-items: start; padding-bottom: var(--s-24); }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; gap: var(--s-8); } }
.checkout__main { max-width: 620px; }
.checkout__aside { background: var(--paper); padding: var(--s-8); position: sticky; top: calc(var(--header-h) + var(--s-8)); }
@media (max-width: 900px) { .checkout__aside { position: static; order: -1; } }
.checkout fieldset { border: 0; padding: 0; }
.checkout legend { padding: 0; }
.checkout__express { padding-block: var(--s-6) var(--s-4); }
.checkout__express-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-top: var(--s-4); }
.checkout__express .btn { background: var(--ink); color: #fff; border-color: var(--ink); }
@media (max-width: 520px) { .checkout__express-row { grid-template-columns: 1fr; } }
.checkout__or { position: relative; text-align: center; margin-block: var(--s-8); }
.checkout__or::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--line); }
.checkout__or span { position: relative; background: #fff; padding-inline: var(--s-4); font-size: var(--fs-2xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.ship-opt {
  display: flex; align-items: center; gap: var(--s-4);
  border: 1px solid var(--line); padding: var(--s-4) var(--s-5);
  cursor: pointer; margin-bottom: -1px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.ship-opt:hover { background: var(--paper); }
.ship-opt:has(input:checked) { border-color: var(--skp-blue); background: var(--blue-50); position: relative; z-index: 1; }
.ship-opt input { accent-color: var(--skp-blue); width: 16px; height: 16px; flex-shrink: 0; }
.ship-opt__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ship-opt__body b { font-weight: 500; font-size: var(--fs-sm); }
.ship-opt__body span { font-size: var(--fs-2xs); color: var(--ink-muted); }
.ship-opt__price { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }


/* ==========================================================================
   Display typography — Anton, slanted 7deg
   Loaded last so it wins over the per-component tracking set further up.
   Anton is condensed with a tall x-height: it wants looser tracking and a
   tighter leading than the serif it replaced.
   ========================================================================== */
.display,
.t-display,
.hero__title,
.phero__title,
.nf__code,
.section-head__title,
.split__title,
.manifesto__quote,
.coll-head__title,
.pdp__title,
.jcard__title,
.timeline__title,
.stat__num,
.footer__brand,
.mnav__trigger,
.logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: var(--display-slant);
  letter-spacing: 0.005em;
  line-height: 0.98;
  text-transform: uppercase;
}

/* Anton renders visually larger than a serif at the same size — pull the
   biggest settings back so the hero still breathes. */
.hero__title { font-size: clamp(2.5rem, 6vw, 5.25rem); }
.phero__title { font-size: clamp(2.25rem, 5vw, 4.25rem); }
.manifesto__quote { font-size: clamp(1.75rem, 4vw, 3.25rem); max-width: 22ch; line-height: 1.02; }
.split__title { line-height: 1; }
.hero__title em, .manifesto__quote em { font-style: var(--display-slant); }
.hero__title em { color: var(--skp-blue); }

/* The wordmark stays lowercase — the brand is written sk:p, and the ascender
   of the k against the descender of the p is half of what makes it a mark. */
.logo { letter-spacing: 0.01em; text-transform: lowercase; }
.header__logo { font-size: 1.6rem; }
@media (max-width: 480px) { .header__logo { font-size: 1.35rem; } }
.footer__brand { font-size: clamp(2.5rem, 5vw, 3.75rem); }

/* Product titles stay in the UI face — Anton is a poster type, not a list
   type, and sixteen condensed uppercase names in a grid is unreadable. */
.card__title { font-family: var(--font-sans); font-style: normal; text-transform: none; }