:root {
  --paper: #eeefe8;
  --ink: #191a16;
  --acid: #d5fd40;
  --stone: #dcdbd4;
  --line: #c9cbc0;
  --muted: #5d6055;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 24px }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0 }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 14px; z-index: 30 }
.skip-link:focus { top: 12px }

/* Header */
.header { height: 84px; display: flex; justify-content: space-between; align-items: center; padding: 0 4%; border-bottom: 1px solid var(--ink) }
.wordmark, .footer-logo { font: 800 28px/1 var(--body); font-stretch: 112%; letter-spacing: -.04em; display: flex; align-items: center; gap: 10px }
.wordmark span, .footer-logo span { font-weight: 400; font-size: 1.2em }
nav { display: flex; align-items: center; gap: 32px; font-weight: 600; font-size: 15px }
.shop-link:hover { text-decoration: underline; text-underline-offset: 4px }
.bag-button { display: flex; gap: 10px; align-items: center; font-weight: 600; padding: 8px 0 }
.bag-button > span { min-width: 30px; height: 30px; padding: 0 8px; border: 1.5px solid var(--ink); border-radius: 15px; display: grid; place-items: center; font-size: 13px; transition: background .2s }
.bag-button.has-items > span { background: var(--acid) }
.bag-button.bump > span { animation: bump .45s var(--ease) }
@keyframes bump { 40% { transform: scale(1.3) } }

/* Buttons */
.primary { background: var(--ink); color: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 56px; padding: 0 22px; font-weight: 700; font-size: 15px; font-stretch: 108%; transition: background .2s, color .2s, transform .1s }
.primary:hover { background: var(--acid); color: var(--ink) }
.primary:active { transform: translateY(1px) }
.primary:disabled { opacity: .35; cursor: not-allowed; background: var(--ink); color: var(--paper) }
.primary .price { font-weight: 500; opacity: .75 }
.text-link { font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px }
.text-link:hover { text-decoration-color: transparent }

/* Hero: the panel takes on the selected colorway */
.hero { --bg: var(--ink); --fg: var(--paper); --mark-bg: var(--acid); --mark-fg: var(--ink); --btn-bg: var(--paper); --btn-fg: var(--ink); display: grid; grid-template-columns: 1fr 1fr; min-height: min(760px, calc(100svh - 84px)); background: var(--bg); color: var(--fg); transition: background .5s var(--ease), color .5s var(--ease) }
.hero[data-tone="white"] { --bg: var(--paper); --fg: var(--ink); --btn-bg: var(--ink); --btn-fg: var(--paper) }
.hero[data-tone="acid"] { --bg: var(--acid); --fg: var(--ink); --mark-bg: var(--ink); --mark-fg: var(--acid); --btn-bg: var(--ink); --btn-fg: var(--acid) }
.hero-copy { padding: 56px 8%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 44px }
.hero h1 { font: 400 clamp(76px, 11vw, 190px)/.9 var(--display); letter-spacing: -.02em; margin: 0 }
.hero h1 .line { display: block }
.hero mark { background: var(--mark-bg); color: var(--mark-fg); display: inline-block; line-height: .84; padding: .07em .06em 0; margin: .06em 0 0 -.06em; transition: background .5s var(--ease), color .5s var(--ease) }
.hero-picker { display: flex; gap: 8px; flex-wrap: wrap }
.hero-picker button { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 10px; border: 1.5px solid color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 21px; font-weight: 600; font-size: 14px; transition: border-color .2s }
.hero-picker button:hover { border-color: var(--fg) }
.hero-picker button[aria-checked="true"] { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg) }
.hero-picker i { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); border: 1.5px solid var(--ink) }
.hero[data-tone="black"] .hero-picker i { border-color: color-mix(in srgb, var(--paper) 55%, transparent) }
.hero-copy :focus-visible { outline-color: var(--fg) }
.hero-note { margin: -20px 0 0; font-size: 14px; opacity: .7 }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap }
.hero-actions .primary { background: var(--btn-bg); color: var(--btn-fg); min-width: 250px }
.hero-actions .primary:hover { background: var(--mark-bg); color: var(--mark-fg) }
.hero[data-tone="black"] .hero-actions .primary:hover { background: var(--acid); color: var(--ink) }
.hero-image:focus-visible, .product-photo:focus-visible { outline-offset: -6px; outline-color: var(--paper); box-shadow: inset 0 0 0 8px var(--ink) }
.hero-image { position: relative; overflow: hidden; background: var(--stone); display: block; border-left: 1px solid var(--ink) }
.hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s var(--ease), transform .9s var(--ease) }
.hero-image img.shown { opacity: 1; transform: scale(1) }
.hero-image:hover img.shown { transform: scale(1.02) }

/* Marquee */
.type-strip { border-block: 1px solid var(--ink); background: var(--acid); overflow: hidden; padding: 12px 0 }
.type-track { display: flex; align-items: center; width: max-content }
@supports (animation-timeline: scroll()) {
  .type-track { animation: marquee linear both; animation-timeline: scroll(root); animation-range: 0 100vh }
}
.type-track span { font: 400 28px/1.1 var(--display); padding: 0 28px }
.type-track b { font-weight: 400; font-size: 30px; line-height: 1 }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-25%) } }

/* Collection */
.collection { padding: 80px 4% 96px }
.collection-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 36px }
h2 { margin: 0; font: 400 44px/1 var(--display); letter-spacing: -.01em }
.collection-header p { margin: 0; max-width: 36ch; color: var(--muted) }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px }
.product-visual { position: relative; overflow: hidden; background: var(--stone); aspect-ratio: 4 / 5 }
.product-photo { width: 100%; height: 100%; display: block }
.product-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease) }
.product-photo:hover img { transform: scale(1.03) }
.product-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; font-weight: 600; font-size: 17px }
.product-meta button:hover { text-decoration: underline; text-underline-offset: 4px }
.product-meta .color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 9px; border: 1px solid var(--ink); vertical-align: 0 }
.quick-sizes { display: flex; gap: 6px; margin-top: 14px }
.quick-sizes button { flex: 1; height: 40px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, color .15s }
.quick-sizes button:hover { border-color: var(--ink) }
.quick-sizes button.added { background: var(--ink); border-color: var(--ink); color: var(--acid) }

/* Footer */
footer { border-top: 1px solid var(--ink); padding: 36px 4%; display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap }
.footer-logo { font-size: 24px }
.footer-note { margin: 0; color: var(--muted); font-size: 14px }
.footer-links { display: flex; gap: 32px; align-items: center; font-size: 14px }
.footer-links button { font-weight: 600 }
.footer-links button:hover { text-decoration: underline; text-underline-offset: 4px }
.back-top { border: 1.5px solid var(--ink); width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px; transition: background .2s }
.back-top:hover { background: var(--acid) }

/* Dialogs */
dialog { background: var(--paper); color: var(--ink); padding: 0; border: 1px solid var(--ink); max-height: 90dvh }
dialog::backdrop { background: rgba(22, 24, 18, .5); backdrop-filter: blur(4px) }
dialog[open] { animation: rise .3s var(--ease) }
@keyframes rise { from { opacity: 0; transform: translateY(12px) } }
body:has(dialog[open]) { overflow: hidden }
.close-button { position: absolute; top: 14px; right: 16px; z-index: 2; font: 300 32px/1 var(--body); width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: background .2s }
.close-button:hover { background: var(--acid) }
.product-dialog { width: min(960px, 94vw) }
.product-dialog[open] { display: grid; grid-template-columns: 1.05fr 1fr }
.product-modal-image { background: var(--stone); min-height: 540px }
.product-modal-image img { width: 100%; height: 100%; max-height: 660px; object-fit: cover; display: block }
.product-modal-info { padding: 64px 36px 36px }
.product-modal-info h2 { font-size: 52px }
.detail-price { font-size: 18px; font-weight: 600; margin: 14px 0 36px }
fieldset { padding: 0; border: 0; margin: 0 0 28px }
legend { width: 100%; font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 12px }
legend span { margin-left: 8px; color: var(--muted); font-weight: 400 }
.color-options { display: flex; gap: 10px }
.color-options button { height: 32px; width: 32px; border-radius: 50%; background: var(--swatch); border: 1.5px solid var(--ink) }
.color-options button.selected { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink) }
.sizes { display: flex; gap: 6px }
.sizes button { flex: 1; border: 1px solid var(--line); font-weight: 600; font-size: 14px; height: 46px; transition: border-color .15s }
.sizes button:hover { border-color: var(--ink) }
.sizes button.selected { background: var(--ink); border-color: var(--ink); color: var(--paper) }
.size-field { margin-bottom: 0 }
.size-message { font-size: 14px; color: var(--muted); min-height: 21px; margin: 12px 0 20px }
.product-modal-info > .primary { width: 100% }
.preview-note { font-size: 13px; text-align: center; color: var(--muted); margin: 14px 0 0 }
.bag-dialog { width: min(480px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-block: 0; border-right: 0 }
.bag-dialog[open] { display: flex; flex-direction: column; animation: slide .35s var(--ease) }
@keyframes slide { from { transform: translateX(40px); opacity: 0 } }
.drawer-header { padding: 28px 24px; border-bottom: 1px solid var(--line) }
.drawer-header h2 { font-size: 32px }
.drawer-header h2 span { font: 500 15px var(--body); vertical-align: middle; margin-left: 8px; color: var(--muted) }
.drawer-header .close-button { top: 22px }
.bag-items { flex: 1; overflow: auto; padding: 0 24px }
.empty-bag { padding: 48px 0; font-size: 16px }
.empty-bag p { margin: 0 0 24px; color: var(--muted) }
.empty-bag .primary { width: 100% }
.bag-item { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line) }
.bag-item img { width: 92px; height: 116px; object-fit: cover; background: var(--stone) }
.bag-item-main { display: flex; flex-direction: column; gap: 4px; position: relative }
.bag-item-main h3 { margin: 0; font-size: 16px; font-weight: 600; padding-right: 32px }
.bag-item-main p { margin: 0; font-size: 14px; color: var(--muted) }
.remove-item { position: absolute; right: -8px; top: -8px; font-size: 22px; width: 32px; height: 32px; border-radius: 50% }
.remove-item:hover { background: var(--acid) }
.item-controls { display: flex; align-items: center; justify-content: space-between; margin-top: auto }
.quantity { display: flex; align-items: center; border: 1px solid var(--line); font-size: 14px }
.quantity button { width: 34px; height: 34px }
.quantity button:hover { background: var(--stone) }
.quantity > span { width: 24px; text-align: center }
.item-total { font-weight: 600 }
.bag-bottom { border-top: 1px solid var(--line); padding: 24px }
.subtotal { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 20px }
.bag-bottom .primary { width: 100% }
.small-dialog { width: min(470px, 92vw); padding: 56px 32px 32px }
.small-dialog h2 { font-size: 36px; margin-bottom: 20px }
.small-dialog p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 16px 0 }
.small-dialog .primary { width: 100%; margin-top: 28px }
.checkout-row { font-size: 15px; display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.checkout-row:last-child { font-weight: 700; padding-top: 18px; border: 0 }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 8px 8px 8px 20px; display: flex; align-items: center; gap: 20px; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); z-index: 20; white-space: nowrap }
.toast.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto }
.toast button { background: var(--acid); color: var(--ink); font-weight: 700; font-size: 14px; height: 38px; padding: 0 14px }
.toast.plain { padding: 15px 20px }
.toast.plain button { display: none }

@media (max-width: 1000px) {
  .product-grid { gap: 16px }
  .quick-sizes { gap: 4px }
  .collection { padding-block: 56px 64px }
  .product-modal-info { padding: 60px 24px 28px }
  .product-modal-info h2 { font-size: 42px }
}
@media (max-width: 760px) {
  .header { height: 68px; padding: 0 16px }
  .wordmark { font-size: 23px; gap: 7px }
  nav { gap: 20px }
  .shop-link { display: none }
  .hero { grid-template-columns: 1fr; min-height: 0 }
  .hero-copy { padding: 40px 16px 36px; gap: 30px }
  .hero h1 { font-size: 23vw }
  .hero-image { order: -1; border-left: 0; border-bottom: 1px solid var(--ink); aspect-ratio: 1 / 1 }
  .hero-actions { width: 100%; gap: 20px }
  .hero-actions .primary { flex: 1; min-width: 0 }
  .type-strip { padding: 9px 0 }
  .type-track span { font-size: 22px; padding: 0 20px }
  .type-track b { font-size: 24px }
  .collection { padding: 44px 16px 56px }
  .collection-header { margin-bottom: 24px }
  h2 { font-size: 36px }
  .product-grid { grid-template-columns: 1fr; gap: 44px }
  .product-visual { aspect-ratio: 1 / 1 }
  footer { padding: 28px 16px }
  .footer-links { width: 100%; justify-content: space-between; gap: 16px }
  .product-dialog { max-height: 94dvh; width: 94vw }
  .product-dialog[open] { display: block; overflow-y: auto }
  .product-modal-image { min-height: 0; height: 300px }
  .product-modal-image img { height: 300px; object-position: center 47% }
  .product-modal-info { padding: 28px 20px }
  .product-modal-info h2 { font-size: 38px }
  .detail-price { margin: 10px 0 24px }
  .product-dialog > .close-button { background: var(--paper); position: sticky; float: right; top: 12px; margin: 12px 12px -52px 0 }
  .small-dialog { padding: 52px 20px 24px }
  .small-dialog h2 { font-size: 30px }
  .toast { bottom: 16px; width: calc(100% - 32px); justify-content: space-between; white-space: normal }
  .toast span { min-width: 0 }
  .toast button { flex-shrink: 0 }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .type-track { animation: none }
  *, *::before, *::after { transition: none !important; animation: none !important }
}

/* 404 */
.not-found { background: var(--acid); min-height: 100svh; display: grid; place-items: center; padding: 32px 16px }
.not-found h1 { font: 400 clamp(72px, 16vw, 180px)/.9 var(--display); margin: 0 0 32px }
.not-found mark { background: var(--ink); color: var(--acid); display: inline-block; line-height: .84; padding: .07em .06em 0; margin: .06em 0 0 -.06em }
.not-found p { font-size: 18px; margin: 0 0 32px }
.not-found .primary { display: inline-flex }