/* CSY AUCTION teaser. Tokens from the CSY AUCTION design system (industrial auction-house, 2026-10-23). */
@font-face { font-family: "Big Shoulders Display"; src: url("fonts/big-shoulders-display-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --surface-100: #f3f3ef; --plate: #1d2327; --ink: #1d2327; --ink-muted: #56626a; --on-plate: #f3f3ef;
  --on-plate-muted: #c3c9cb; --safety: #f2551a; --safety-ink: #b93a0b; --hazard: #ffc21a; --line-dark: #33404a;
  --font-display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-100); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 25px; }
a { color: var(--safety-ink); }
a:hover { color: var(--ink); }
a:focus-visible { outline: 3px solid var(--safety); outline-offset: 3px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(16px, 4vw); padding-right: max(16px, 4vw); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--hazard); color: var(--ink); padding: 8px 12px; z-index: 10; }

.top { background: var(--plate); color: var(--on-plate); }
.top .wrap { padding-block: 18px; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: 0.02em; color: var(--on-plate); text-decoration: none; }
.wordmark:hover { color: var(--on-plate); }
.o { color: var(--safety); }

.hero .wrap { padding-block: 88px 96px; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.hero-text { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.tape { background: var(--hazard); color: var(--ink); font-weight: 700; font-size: 15px; letter-spacing: 0.24em; padding: 8px 16px; transform: rotate(-2deg); animation: tape-in .6s ease-out both; }
@keyframes tape-in { from { transform: translateX(-24px) rotate(-2deg); opacity: 0; } to { transform: translateX(0) rotate(-2deg); opacity: 1; } }
h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; text-wrap: balance; margin: 0; }
h1 { font-weight: 800; font-size: clamp(56px, 8.5vw, 120px); line-height: 0.88; letter-spacing: 0.01em; }
.lead { margin: 0; font-size: 20px; line-height: 30px; max-width: 30em; }

.tag-wrap { flex: 1 1 280px; min-width: 0; max-width: 340px; position: relative; padding-top: 28px; }
.tag-string { position: absolute; left: 50%; top: 0; width: 2px; height: 40px; background: var(--ink-muted); }
.tag { position: relative; background: var(--plate); color: var(--on-plate); border-radius: 10px; padding: 48px 28px 32px; display: flex; flex-direction: column; gap: 16px; transform: rotate(3deg); }
.tag-hole { position: absolute; left: calc(50% - 11px); top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-100); }
.tag-lot { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; color: var(--safety); }
.tag-rule { height: 3px; background: var(--safety); }
.tag-line { font-family: var(--font-mono); font-size: 15px; line-height: 22px; letter-spacing: 0.06em; }

.hazard { height: 24px; background: repeating-linear-gradient(-45deg, var(--hazard) 0 24px, var(--plate) 24px 48px); }

.steps { list-style: none; margin: 0 auto; padding-block: 88px; display: flex; flex-wrap: wrap; gap: 40px 48px; }
.steps li { flex: 1 1 260px; min-width: 0; border-top: 3px solid var(--ink); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.steps li.last { border-top-color: var(--safety); }
h2.step { font-weight: 700; font-size: 34px; line-height: 1.02; }
.steps p { margin: 0; color: var(--ink-muted); }

.close { background: var(--plate); color: var(--on-plate); }
.close .wrap.body { padding-block: 88px 72px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.close h2 { font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: 0.92; }
.close p { margin: 0; font-size: 19px; line-height: 29px; color: #e4e6e3; }
.close strong { font-weight: 700; }
footer { border-top: 1px solid var(--line-dark); }
footer .wrap { padding-block: 28px 40px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; font-size: 13px; line-height: 20px; color: var(--on-plate-muted); }
footer a { color: var(--on-plate); }
footer a:hover { color: var(--safety); }

.doc .wrap { padding-block: 64px 88px; max-width: 760px; margin-left: max(16px, 4vw); }
.doc h1 { font-size: clamp(44px, 6vw, 72px); margin-bottom: 24px; }
.doc h2 { font-weight: 700; font-size: 28px; line-height: 1.05; margin: 32px 0 8px; }
.doc p, .doc li { max-width: 65ch; }

@media (prefers-reduced-motion: reduce) { .tape { animation: none; } }