/* JRoySales, v2: a sneaker reseller's pop-up stall. Cool grey concrete,
   black type, white spec tags with hard edges, blue price stickers stuck on
   at an angle, tape strips. The flame blue from his logo is the one colour.
   Type: Big Shoulders Display (condensed, loud) over Onest. */
@font-face { font-family: 'Shoulders'; src: url(../fonts/bigshoulders.woff2) format('woff2'); font-weight: 700 900; font-display: swap; }
@font-face { font-family: 'Onest'; src: url(../fonts/onest.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --concrete: #c3c6c8; --concrete-2: #b2b6b9; --ink: #111214; --ink-2: #1c1e21;
  --tag: #f6f6f3; --blue: #1f5cff; --blue-2: #1647cc; --ice: #8fd0ff;
  --muted: #3f4449; --muted-l: #a8adb2;
  --wrap: min(1180px, 100% - 2 * var(--gut)); --gut: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --display: 'Shoulders', 'Arial Narrow', Impact, sans-serif;
  --hard: 6px 6px 0 var(--ink);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--concrete); color: var(--ink); font: 400 clamp(16px, .9vw + 12px, 18px)/1.6 'Onest', system-ui, sans-serif; overflow-x: clip; -webkit-font-smoothing: antialiased; }
/* Concrete grain: a fixed overlay, so it never repaints while scrolling */
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 .28 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.06 0 0 0 0 0.07 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); }
main, .foot, .nav { position: relative; z-index: 1; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .005em; line-height: .88; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
.wrap { width: var(--wrap); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Buttons: flat blocks with a hard shadow that presses in */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.3rem; border: 2px solid var(--ink); border-radius: 2px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 4px 4px 0 var(--ink); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--blue); }
.btn--ink:hover { box-shadow: 6px 6px 0 var(--blue); }
.btn--ink:active { box-shadow: 1px 1px 0 var(--blue); }
.btn--blue { background: var(--blue); color: #fff; }
.btn--sm { min-height: 42px; padding: 0 1rem; font-size: .95rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--lg { min-height: 58px; padding: 0 1.8rem; font-size: 1.08rem; }

/* Tape and stickers */
.tape { display: inline-block; margin: 0; padding: .45rem 1rem; font: 700 .82rem/1.2 'Onest'; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: rgba(246,246,243,.78); box-shadow: 0 1px 2px rgba(0,0,0,.18); transform: rotate(-1.5deg); clip-path: polygon(1% 4%, 99% 0, 100% 96%, 0 100%); }
.tape i { font-style: normal; color: var(--blue); margin: 0 .35rem; }
.sticker { display: inline-block; padding: .3rem .6rem .35rem; background: var(--blue); color: #fff; font: 900 1.9rem/1 var(--display); border-radius: 4px; transform: rotate(-4deg); box-shadow: 2px 3px 0 rgba(17,18,20,.35); }

/* Nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding: 10px var(--gut); transition: background .25s, box-shadow .25s; }
.nav.is-solid { background: rgba(195,198,200,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 2px 0 var(--ink); }
.nav__brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font: 900 1.5rem/1 var(--display); text-transform: uppercase; }
.nav__brand img { border-radius: 4px; border: 2px solid var(--ink); }
.nav__links { display: none; gap: 1.6rem; margin-left: auto; font-weight: 700; }
.nav__links a { text-decoration: none; }
.nav__links a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--blue); text-underline-offset: 5px; }
.nav .btn { margin-left: auto; }
@media (min-width: 900px) { .nav__links { display: flex; } .nav .btn { margin-left: 0; } }
@media (max-width: 420px) { .nav__brand span { display: none; } }

/* Hero */
.hero { padding: calc(76px + clamp(28px, 6vw, 72px)) 0 clamp(48px, 7vw, 90px); }
.hero__in { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .hero__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.hero h1 { font-size: clamp(4rem, 11vw, 9.2rem); margin-top: 1.2rem; }
.hero h1 span { color: var(--blue); }
.hero__sub { font-size: clamp(1.08rem, 1vw + .7rem, 1.3rem); max-width: 34ch; margin: 1.4rem 0 0; color: var(--ink-2); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__side { position: relative; justify-self: center; width: min(100%, 460px); }
.sticker-logo { width: 100%; height: auto; border: 10px solid var(--tag); border-radius: 6px; box-shadow: 0 2px 0 rgba(0,0,0,.08), 10px 14px 0 rgba(17,18,20,.28); transform: rotate(3deg); }
.sticker--big { position: absolute; left: -18px; bottom: 26px; font-size: clamp(1.6rem, 3vw, 2.3rem); padding: .45rem .8rem .5rem; transform: rotate(-7deg); }
.vidbox { border: 2px solid var(--ink); box-shadow: var(--hard); background: var(--ink); aspect-ratio: 4 / 5; overflow: hidden; }
.vidbox video { width: 100%; height: 100%; object-fit: cover; }

/* Facts: a black band */
.facts { background: var(--ink); color: #fff; }
.facts ul { margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts li { padding: 1.1rem 0; display: grid; gap: .15rem; }
.facts li:nth-child(even) { padding-left: 1.2rem; border-left: 1px solid rgba(255,255,255,.18); }
.facts li:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.18); }
@media (min-width: 760px) { .facts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .facts li + li { padding-left: 1.2rem; border-left: 1px solid rgba(255,255,255,.18); } .facts li:nth-child(n+3) { border-top: 0; } }
.facts b { font: 900 clamp(2rem, 3.4vw, 2.7rem)/1 var(--display); }
.facts li:nth-child(2) b { color: var(--ice); }
.facts span { color: var(--muted-l); font-size: .92rem; }

/* Sections */
.sec { padding: clamp(72px, 10vw, 130px) 0; }
.h2 { font-size: clamp(3rem, 7vw, 5.6rem); }
.head { display: grid; gap: .8rem; margin-bottom: 2.6rem; max-width: 640px; }
.head p, .lede { color: var(--ink-2); font-size: 1.1rem; max-width: 52ch; }

/* Pairs: white spec tags with tape */
.pairs { display: grid; gap: 34px 26px; }
@media (min-width: 760px) { .pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pair { position: relative; background: var(--tag); border: 2px solid var(--ink); box-shadow: var(--hard); display: flex; flex-direction: column; }
.pair::before { content: ''; position: absolute; top: -14px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(246,246,243,.7); box-shadow: 0 1px 2px rgba(0,0,0,.15); transform: rotate(-3deg); z-index: 2; }
.pair:nth-child(2)::before { transform: rotate(2deg); }
.pair__media { position: relative; aspect-ratio: 4 / 3; border-bottom: 2px solid var(--ink); background: var(--concrete-2); display: grid; place-items: center; overflow: hidden; }
.pair__media img { width: 100%; height: 100%; object-fit: cover; }
.pair__stamp { font: 900 clamp(2.6rem, 5vw, 3.6rem)/.9 var(--display); text-transform: uppercase; text-align: center; color: transparent; -webkit-text-stroke: 2px var(--ink); transform: rotate(-6deg); padding: 0 1rem; opacity: .85; }
.pair__note { position: absolute; bottom: 10px; left: 12px; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.pair__body { padding: 1.2rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.pair h3 { font-size: 2.3rem; }
.pair h3 span { display: block; font: 700 .9rem/1.3 'Onest'; text-transform: none; letter-spacing: 0; color: var(--muted); margin-bottom: .35rem; }
.pair__spec { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 2px solid var(--ink); }
.pair__spec div { padding: .5rem 0; border-bottom: 1px solid rgba(17,18,20,.18); }
.pair__spec div:nth-child(odd) { padding-right: .6rem; border-right: 1px solid rgba(17,18,20,.18); }
.pair__spec div:nth-child(even) { padding-left: .7rem; }
.pair__spec dt { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pair__spec dd { margin: .1rem 0 0; font-weight: 700; }
.pair__spec em { font-style: normal; font-size: .7rem; color: #fff; background: var(--ink); padding: .1rem .3rem; margin-left: .2rem; vertical-align: 2px; }
.pair__buy { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .4rem; }
.more { display: inline-flex; gap: .4rem; margin-top: 2.4rem; font-weight: 700; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--blue); text-underline-offset: 6px; }

/* Condition: a ruler */
.sec--cond { background: var(--concrete-2); border-block: 2px solid var(--ink); }
.cond { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 960px) { .cond { grid-template-columns: .8fr 1.2fr; gap: 4rem; } }
.cond .lede { margin-top: 1rem; }
.ruler { background: var(--tag); border: 2px solid var(--ink); box-shadow: var(--hard); padding: 1.2rem 1.2rem 1.4rem; }
.ruler__scale { position: relative; height: 54px; margin: 0 6px 1.2rem; border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px calc(25% / 2)) bottom / 100% 14px no-repeat,
              repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 25%) bottom / 100% 26px no-repeat; }
.ruler__scale span { position: absolute; top: 0; transform: translateX(-50%); font: 900 1.4rem/1 var(--display); }
.ruler__scale span:nth-child(1) { left: 0; } .ruler__scale span:nth-child(2) { left: 25%; } .ruler__scale span:nth-child(3) { left: 50%; } .ruler__scale span:nth-child(4) { left: 75%; } .ruler__scale span:nth-child(5) { left: 100%; }
.ruler__marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ruler__marks li { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: center; position: relative; padding: .55rem 0; border-top: 1px solid rgba(17,18,20,.15); }
.ruler__marks li::after { content: ''; position: absolute; top: -1.6rem; left: calc(var(--at) * 1% - 6px); width: 12px; height: 12px; background: var(--blue); transform: rotate(45deg); display: none; }
.ruler__marks b { font: 900 2.3rem/1 var(--display); color: var(--blue); }

/* Steps */
.steps { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.steps li { counter-increment: s; padding: 1.3rem; background: var(--ink); color: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--blue); display: grid; gap: .45rem; }
.steps li::before { content: counter(s); font: 900 3.6rem/.9 var(--display); color: transparent; -webkit-text-stroke: 2px #fff; }
.steps b { font-size: 1.15rem; }
.steps span { color: var(--muted-l); }

/* Buy / Sell / Trade */
.bst { background: var(--ink); color: #fff; padding: clamp(72px, 10vw, 130px) 0; }
.bst__in { display: grid; gap: 2.4rem; align-items: end; }
@media (min-width: 900px) { .bst__in { grid-template-columns: 1.1fr .9fr; } }
.bst__big { font-size: clamp(5rem, 15vw, 12rem); line-height: .82; }
.bst__big span { color: var(--blue); }
.bst__copy p { font-size: 1.15rem; color: #d7dadd; max-width: 40ch; }
.bst .btn { box-shadow: 4px 4px 0 #fff; border-color: #fff; margin-top: .8rem; }
.bst .btn:hover { box-shadow: 6px 6px 0 #fff; }

/* Footer */
.foot { background: var(--concrete-2); border-top: 2px solid var(--ink); padding: 2.2rem 0 2.6rem; }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.foot__in img { border: 2px solid var(--ink); border-radius: 4px; }
.foot__in p { margin: 0; }
.foot a { font-weight: 700; }
.foot__credit { margin-left: auto !important; font-size: .88rem; }

/* Reveals: visible by default, animated only once the script says so */
.js [data-rv] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js [data-rv].is-in { opacity: 1; transform: none; }
.js .hero__side[data-rv] { transform: translateY(18px) rotate(-2deg); }
.js .hero__side[data-rv].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-rv] { opacity: 1; transform: none !important; transition: none; } .btn { transition: none; } }

/* Real photos on the tags */
.pair__media { aspect-ratio: auto; display: block; overflow: visible; }
.pair__media .pair__main { height: auto; }
.pair__main { display: block; width: 100%; aspect-ratio: 1 / .92; object-fit: cover; }
.pair__thumbs { display: flex; gap: 6px; padding: 8px; border-top: 2px solid var(--ink); background: var(--tag); }
.pair__thumbs button { flex: 1; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.pair__thumbs button[aria-pressed="true"] { border-color: var(--blue); }
.pair__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* Hero: a taped-up photo of his pair with the logo sticker slapped on top */
.hero__side { width: min(100%, 470px); padding: 0 0 40px 20px; }
.polaroid { margin: 0; background: var(--tag); padding: 12px 12px 14px; border: 2px solid var(--ink); box-shadow: var(--hard); transform: rotate(-3deg); position: relative; }
.polaroid::before { content: ''; position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; margin-left: -55px; background: rgba(246,246,243,.72); box-shadow: 0 1px 2px rgba(0,0,0,.15); transform: rotate(4deg); }
.polaroid img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.polaroid figcaption { margin-top: .6rem; padding-right: 50%; font: 900 1.25rem/1.05 var(--display); text-transform: uppercase; }
.hero__side .sticker-logo { position: absolute; right: -14px; bottom: -6px; width: 44%; border-width: 6px; transform: rotate(8deg); }
.hero__side .sticker--big { left: -6px; top: 34px; bottom: auto; }

/* ---------- Buying on the site (2 Oct 2026) ---------- */
.pair h3 a { text-decoration: none; }
.pair h3 a:hover { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.pair__media > a { display: block; }
.pair.is-sold .pair__main { filter: grayscale(1) contrast(.9); opacity: .7; }
.sold-stamp { position: absolute; top: 18px; right: 14px; z-index: 2; padding: .2rem .7rem .3rem; border: 3px solid #d0202a; color: #d0202a; background: rgba(246,246,243,.9); font: 900 2rem/1 var(--display); text-transform: uppercase; transform: rotate(8deg); }
.btn.is-off { opacity: .45; pointer-events: none; }
.btn--wide { width: 100%; }
.more-row { margin: 2.4rem 0 0; font-weight: 700; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.more-row .more { margin: 0; }
.bst__alt { margin-top: 1.2rem; font-size: 1rem !important; }
.bst__alt a { font-weight: 700; color: #fff; }
.foot__links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.fine { font-size: .9rem; color: var(--muted); margin: .6rem 0 0; }
.fine a { font-weight: 700; }

/* Inner page head */
.pagehead { padding: calc(76px + clamp(28px, 5vw, 64px)) 0 clamp(20px, 3vw, 36px); }
.h1 { font-size: clamp(3.4rem, 9vw, 7rem); margin-top: 1rem; }
.h1 span { color: var(--blue); }
.pagehead .lede { margin-top: 1.2rem; }
.sec--form { padding-top: clamp(24px, 4vw, 48px); }
.sec--prose { padding-top: clamp(16px, 3vw, 32px); }
.sec--more { padding-top: clamp(40px, 6vw, 80px); }

/* Product page */
.pdp { padding: calc(76px + clamp(18px, 3vw, 36px)) 0 clamp(24px, 4vw, 48px); }
.crumbs { display: flex; gap: .6rem; font-weight: 700; margin-bottom: 1.4rem; }
.crumbs a { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.crumbs span { color: var(--muted); }
.pdp__in { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .pdp__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .pdp__media { position: sticky; top: 90px; } }
.pdp__media.pair::before { display: block; }
.pdp__media .pair__main { aspect-ratio: 1 / .9; }
.pdp__h { font-size: clamp(3.4rem, 8vw, 6rem); margin: 1rem 0 0; }
.pdp__price { display: flex; align-items: center; gap: .9rem; margin: 1.2rem 0 1.4rem; }
.pdp__price span { color: var(--muted); font-weight: 700; }
.pdp__info .pair__spec { margin-bottom: 1.6rem; }
.pdp__info > .btn { margin-top: .2rem; }
.pdp__trust { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .7rem; }
.pdp__trust li { position: relative; padding-left: 1.6rem; }
.pdp__trust li::before { content: ''; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--blue); transform: rotate(45deg); }
.pdp__trust a { font-weight: 700; }
.soldnote { padding: 1rem 1.2rem; background: var(--tag); border: 2px solid var(--ink); }

/* Forms: white tags, like the pair cards */
.form { background: var(--tag); border: 2px solid var(--ink); box-shadow: var(--hard); padding: clamp(18px, 3vw, 30px); display: grid; gap: 1.1rem; }
.form--reserve { margin-top: .4rem; }
.form__h { font-size: 2.2rem; }
.form fieldset { border: 0; margin: 0; padding: 0 0 1.2rem; border-bottom: 1px solid rgba(17,18,20,.18); display: grid; gap: .9rem; min-width: 0; }
.form legend { padding: 0; margin-bottom: .9rem; font: 900 1.9rem/1 var(--display); text-transform: uppercase; }
.form__grid { display: grid; gap: .9rem 1rem; }
@media (min-width: 620px) { .form__grid { grid-template-columns: 1fr 1fr; } .form__grid .span2 { grid-column: 1 / -1; } }
.form label { display: grid; gap: .35rem; font-weight: 700; font-size: .95rem; }
.form label small { font-weight: 400; color: var(--muted); }
.form input:not([type=radio]):not([type=file]), .form select, .form textarea { width: 100%; font: inherit; font-weight: 400; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 2px; padding: .7rem .8rem; min-height: 50px; }
.form textarea { resize: vertical; min-height: 96px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 3px solid var(--blue); outline-offset: 1px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { margin: 0; font-weight: 700; }
.form__msg:empty { display: none; }
.form__msg.is-err { color: #b00020; }
.form button[disabled] { opacity: .6; cursor: wait; }
.form__done { background: var(--ink); color: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--blue); padding: clamp(20px, 3vw, 32px); display: grid; gap: .4rem; outline: 0; }
.form__done b { font: 900 3rem/1 var(--display); text-transform: uppercase; color: var(--ice); }

/* Photo picker */
.drop { position: relative; display: grid !important; justify-items: start; gap: .5rem; padding: 1.2rem; border: 2px dashed var(--ink); background: #fff; cursor: pointer; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--blue); }
.drop:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }
.drop__hint { font-weight: 400; color: var(--muted); }
.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.previews:empty { display: none; }
.previews img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); }
.previews__note { grid-column: 1 / -1; margin: 0; font-size: .9rem; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chips label { display: block; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chips span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 1.1rem; border: 2px solid var(--ink); background: #fff; cursor: pointer; font-weight: 700; }
.chips input:checked + span { background: var(--blue); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.chips input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Sell page layout */
.formwrap { display: grid; gap: 28px; align-items: start; }
@media (min-width: 960px) { .formwrap { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); } .formside { position: sticky; top: 96px; } }
.formwrap--narrow > .form { max-width: 760px; }
@media (min-width: 960px) { .formwrap--narrow { grid-template-columns: 1fr; } }
.formside { background: var(--ink); color: #fff; padding: clamp(20px, 3vw, 28px); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--blue); }
.formside h2 { font-size: 2.2rem; margin-bottom: 1rem; }
.formside ol { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .9rem; counter-reset: f; }
.formside li { counter-increment: f; display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .6rem; }
.formside li::before { content: counter(f); grid-row: span 2; font: 900 2.4rem/.9 var(--display); color: transparent; -webkit-text-stroke: 1.5px #fff; }
.formside span { color: var(--muted-l); }
.formside p { margin: 0; color: var(--muted-l); }
.formside a { color: #fff; font-weight: 700; }

/* Policy pages */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(2rem, 4vw, 2.6rem); margin: 2.2rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose a:not(.btn) { font-weight: 700; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
/* "optional" sits beside the label, so paired fields line up */
.form label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; row-gap: .35rem; }
.form label > input, .form label > select, .form label > textarea { flex: 1 0 100%; }
.form label.drop { display: grid; }
.sec--more .h2 { margin-bottom: 2.6rem; }