/* Anodized accent: one hue (--ano-h) drives every accent. It is a registered
   property so gradients fade smoothly when storefront.js picks a new hue. */
@property --ano-h { syntax: '<number>'; inherits: true; initial-value: 205; }
@property --ano-s { syntax: '<number>'; inherits: true; initial-value: 85; }
@property --ano-l { syntax: '<number>'; inherits: true; initial-value: 0; }

/* Storefront "drop" look: dark field, heavy condensed type, anodized-metal accent.
   Loaded only on the storefront; team pages keep each team's own colors. */
@font-face { font-family: 'Anton'; font-weight: 400; font-display: swap; src: url('../fonts/anton-latin-400-normal.woff') format('woff'); }

.drop {
  --ink: #f4f1ec;
  --ink-2: #b9b5ae;
  --ink-3: #8d8983;
  --paper: #0d0d0e;
  --card: #17171a;
  --line: #2a2a2e;
  --team: #0d0d0e;
  --on-team: #f4f1ec;
  --team-accent: #ff5b14;
  --on-accent: #0d0d0e;
  --ano-h: 205;
  --ano-s: 85;
  --ano-l: 0;
  --on-ano: #0d0d0e;
  --heat: hsl(var(--ano-h) calc(var(--ano-s) * 1%) calc((64 + var(--ano-l)) * 1%));
  --heat-2: hsl(calc(var(--ano-h) + 20) calc(var(--ano-s) * 1%) calc((72 + var(--ano-l)) * 1%));
  /* brushed, anodized aluminum: color bands with a hot highlight plus fine machining lines */
  --ano: repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 3px),
         linear-gradient(120deg,
           hsl(var(--ano-h) calc(var(--ano-s) * 0.85%) calc((40 + var(--ano-l)) * 1%)) 0%,
           hsl(var(--ano-h) calc(var(--ano-s) * 1%) calc((63 + var(--ano-l)) * 1%)) 28%,
           hsl(calc(var(--ano-h) + 16) calc(var(--ano-s) * 1%) calc((82 + var(--ano-l) * 0.5) * 1%)) 46%,
           hsl(var(--ano-h) calc(var(--ano-s) * 1%) calc((58 + var(--ano-l)) * 1%)) 62%,
           hsl(var(--ano-h) calc(var(--ano-s) * 0.9%) calc((42 + var(--ano-l)) * 1%)) 100%);
  transition: --ano-h 2.8s ease-in-out, --ano-s 2.8s ease-in-out, --ano-l 2.8s ease-in-out;
  --display: 'Anton', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  color-scheme: dark;
  background: var(--paper);
  color: var(--ink);
}
.drop h1, .drop h2, .drop h3 { font-weight: 400; letter-spacing: 0.005em; text-wrap: balance; }
.drop h1 { font-size: clamp(3rem, 7.4vw, 6.2rem); line-height: 0.92; margin-bottom: 0.3em; }
.drop h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.95; }
.drop h3 { font-size: 1.35rem; letter-spacing: 0.02em; }
.drop .eyebrow { color: var(--heat); font-family: var(--body); font-weight: 800; letter-spacing: 0.22em; font-size: 0.75rem; }
.drop .muted { color: var(--ink-2); }
.drop .hot { color: var(--heat); background: var(--ano); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: 0.06em; }
.drop a:focus-visible, .drop button:focus-visible, .drop input:focus-visible { outline-color: var(--heat-2); }

.announce { background: var(--ano); color: var(--on-ano); text-align: center; font: 800 0.78rem/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase; padding-block: 10px; padding-inline: 16px; }
.drop .site-head { border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; background: rgba(13, 13, 14, 0.92); backdrop-filter: blur(8px); }
.drop .brand-name { font-family: var(--display); font-size: 1.6rem; letter-spacing: 0.04em; }
.drop .nav a { font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.12em; }

.drop .btn { border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; font-size: 0.9rem; padding: 0.95em 1.6em; background: var(--ano); color: var(--on-ano); box-shadow: 4px 4px 0 var(--ink); transition: transform .1s ease, box-shadow .1s ease; }
.drop .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); filter: none; }
.drop .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.drop .btn.secondary { background: transparent; color: var(--ink); border: 2px solid var(--ink); box-shadow: none; }
.drop .btn.secondary:hover { background: var(--ink); color: #0d0d0e; }

/* hero */
.drop .hero { background: radial-gradient(1200px 500px at 85% 20%, hsl(var(--ano-h) calc(var(--ano-s) * 1%) calc((50 + var(--ano-l)) * 1%) / 0.24), transparent 60%), var(--paper); padding-block: 56px 72px; }
.drop .hero .wrap { grid-template-columns: 1.25fr 1fr; gap: 40px; }
.drop .hero p.lead { color: var(--ink-2); font-size: 1.15rem; max-width: 32em; }
.drop .hero .actions { gap: 16px; margin-top: 26px; }
.drop .hero-photo { position: relative; transform: rotate(2deg); }
.drop .hero-photo img { border-radius: 0; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--line); }
.sticker { position: absolute; left: -14px; bottom: 22px; background: var(--ano); color: var(--on-ano); font: 400 1.3rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 14px; transform: rotate(-6deg); box-shadow: 3px 3px 0 #0d0d0e; }
@media (max-width: 820px) { .drop .hero .wrap { grid-template-columns: 1fr; } .drop .hero-photo { transform: rotate(1deg); margin-inline: 8px; } }

/* marquee */
.marquee { overflow: hidden; background: var(--ink); color: #0d0d0e; border-block: 2px solid var(--ink); }
.marquee.alt { background: var(--ano); color: var(--on-ano); }
.marquee .track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee span { font: 400 clamp(1.4rem, 3vw, 2.2rem)/1 var(--display); text-transform: uppercase; padding: 14px 22px; white-space: nowrap; display: flex; align-items: center; gap: 44px; }
.marquee span::after { content: '\2726'; font-size: 0.6em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* sections */
.drop section { padding-block: 72px; }
.drop section.alt { background: #111113; border-color: var(--line); }
.drop .card { background: var(--card); border-color: var(--line); border-radius: 0; }
.drop .card .stage { border-radius: 0; }
.drop .card .stage.light { background: linear-gradient(160deg, #2a2722, #1d1b18); }
.drop .card h3 { font-size: 1.5rem; }
.drop .price { font-size: 2rem; color: var(--heat); background: var(--ano); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.drop .price small { -webkit-text-fill-color: var(--ink-3); }
.drop .chip { border-radius: 0; background: #26262a; color: var(--ink-2); }
.drop .chip.ok { background: var(--ano); color: var(--on-ano); }
.drop .chip.top { background: var(--ano); color: var(--on-ano); }
.drop .chip.warn { background: #26262a; color: var(--heat-2); }
.drop .products .card { transition: transform .15s ease, border-color .15s ease; }
.drop .products .card:hover { transform: translateY(-4px); border-color: var(--heat); }

.drop .sample-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.drop .sample-grid img { border-radius: 0; transition: transform .25s ease; }
.drop .sample-grid figure { overflow: hidden; }
.drop .sample-grid figure:hover img { transform: scale(1.04); }
.drop .sample-grid figcaption strong { font: 400 1.15rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }

.standard h2 { margin-bottom: 36px; }
.standard-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.standard-grid > div { padding: 22px 22px 8px 0; border-bottom: 1px solid var(--line); }
.standard-grid h3 { color: var(--heat); font-size: 1.6rem; margin-bottom: 8px; }
.standard-grid p { color: var(--ink-2); max-width: 26em; }

/* tables, forms, panels */
.drop .table-scroll { background: var(--card); border-color: var(--line); border-radius: 0; }
.drop thead th { background: #1e1e22; color: var(--ink); }
.drop th, .drop td { border-color: var(--line); }
.drop .design-pick label { background: var(--card); border-color: var(--line); border-radius: 0; }
.drop .design-pick label:has(input:checked) { border-color: var(--heat); box-shadow: none; background: hsl(var(--ano-h) calc(var(--ano-s) * 0.4%) 11%); }
.drop input[type=text], .drop input[type=email], .drop input[type=tel], .drop input[type=date], .drop input[type=number], .drop select, .drop textarea {
  background: #121214; color: var(--ink); border-color: #3a3a40; border-radius: 0;
}
.drop .field .hint { color: var(--ink-3); }
.drop .preview-panel { border-radius: 0; background: #1b1b1e; color: var(--ink); }
.drop .preview-panel.light { background: radial-gradient(circle at 50% 35%, #3a3328, #1b1915); color: var(--ink); }
.drop .preview-panel.steel, .drop .card .stage.steel { background: radial-gradient(circle at 50% 30%, #6f757e, #2b2e33 75%); }
@media (max-width: 860px) { .drop #try .preview-panel { order: -1; } .drop #try .preview-panel .stage { min-height: 0; max-height: 360px; } .drop #try .preview-panel .stage svg { max-height: 340px; width: auto; } }
.drop .preview-panel.light .exact { background: rgba(255, 255, 255, 0.08); }
.drop .preview-panel.light .exact code { background: rgba(0, 0, 0, 0.35); }
.drop .steps .card::before { font-family: var(--display); font-size: 2.2rem; color: var(--heat); }
.drop .steps .card { padding-top: 64px; }
.drop .notice.info { background: #141b24; border-color: #25374d; color: var(--ink); }
.drop .notice.bad { background: #2a1210; border-color: #5a2520; color: #ffd9d4; }
.drop .err { color: #ff8a7a; }
.drop .site-foot { border-color: var(--line); color: var(--ink-3); }
.drop .demo-banner { background: #1e1e22 !important; color: var(--ink-2) !important; }

@media (prefers-reduced-motion: reduce) { .drop { transition: none; } .marquee .track { animation: none; } .drop .hero-photo { transform: none; } }
html.drop body { background: #0d0d0e; }
@media (max-width: 700px) {
  .drop .nav a { display: none; }
  .drop .nav a.nav-cta { display: inline-block; }
  .drop .site-head .wrap { flex-wrap: nowrap; }
}

/* public store */
.wordmark { font: 400 1.9rem/1 var(--display); letter-spacing: 0.06em; color: var(--ink); background: var(--ano); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wordmark.small { font-size: 1.1rem; }
.drop .brand { text-decoration: none; }
.drop .nav { align-items: center; }
.drop .nav a.nav-cta { background: var(--ano); color: var(--on-ano); padding: 9px 14px; opacity: 1; }
@media (min-width: 701px) { .drop .nav a[href="#build"]:not(.nav-cta) { display: none; } }
.drop .hero-tag { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; min-height: 480px; cursor: pointer; background: radial-gradient(closest-side, rgba(150,158,170,0.35), transparent 75%); }
.hero-stage { display: flex; justify-content: center; align-items: center; height: 440px; width: 100%; transition: opacity .35s ease, transform .35s ease; }
.drop .hero-tag svg { max-height: 440px; width: auto; transform: rotate(-6deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6)); }
.hero-cap { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); text-align: center; transition: opacity .35s ease; }
.hero-cap strong { color: var(--heat); font-weight: 800; }
.hero-tag.out .hero-stage { opacity: 0; transform: translateY(8px) scale(0.97); }
.hero-tag.out .hero-cap { opacity: 0; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; color: var(--ink-3); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.hero-meta span::before { content: '\2726\00a0'; color: var(--heat); }
@media (max-width: 820px) { .drop .hero-tag { min-height: 0; order: -1; } .hero-stage { height: 300px; } .drop .hero-tag svg { max-height: 300px; } .drop .hero { padding-block: 28px 44px; } }

.split .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 0 28px; }
.split-tile { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border: 1px solid var(--line); background: var(--card); text-decoration: none; transition: border-color .15s ease; }
.split-tile:hover { border-color: var(--heat); }
.split-tile .k { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--heat); }
.split-tile strong { font: 400 1.8rem/1.05 var(--display); text-transform: uppercase; }
.split-tile span:last-child { color: var(--ink-2); font-size: 0.9rem; }
@media (max-width: 520px) { .split-tile { padding: 14px; } .split-tile strong { font-size: 1.4rem; } }

.drop .products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.drop .card .spec { color: var(--ink-3); margin: 0; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; }
.drop .card-foot .btn { padding: 0.6em 1em; font-size: 0.78rem; box-shadow: 3px 3px 0 var(--ink); }
@media (max-width: 520px) { .drop .products { grid-template-columns: 1fr 1fr; gap: 10px; } .drop .products .card { padding: 10px; } .drop .card .stage { height: 170px; } .drop .card h3 { font-size: 1.15rem; } .drop .products .card p.muted { display: none; } .card-foot { flex-direction: column; align-items: stretch; } .drop .price { font-size: 1.5rem; } }

.drop .design-pick { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.drop .design-pick label { align-items: center; text-align: center; padding: 10px 8px; }
.design-pick .thumb { display: flex; justify-content: center; align-items: center; height: 74px; width: 100%; margin-bottom: 4px; }
.design-pick .thumb svg { max-height: 70px; width: auto; }
.drop .preview-panel .caption { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.78rem; }
.buybar { margin-top: 8px; }
.drop .btn.buy { width: 100%; font-size: 1rem; padding: 1.05em; }
.buybar p { margin-top: 10px; }
.dibs { margin-top: 16px; padding: 16px; border: 1px solid var(--line); background: #111113; }
.dibs-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dibs-row input { flex: 1 1 200px; }
.dibs-done { margin: 0; font-weight: 700; }
@media (max-width: 860px) {
  .drop #build .preview-panel { order: -1; position: sticky; top: 64px; z-index: 3; padding: 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.5); }
  .drop #build .preview-panel .stage { min-height: 0; }
  .drop #build .preview-panel .stage svg { max-height: 30vh; width: auto; }
  .drop #build .preview-panel .caption { display: none; }
  .buybar { position: sticky; bottom: 0; z-index: 2; background: #111113; padding: 10px 0; }
  .buybar p { display: none; }
}

.swipe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 23%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.swipe figure { margin: 0; scroll-snap-align: start; }
.swipe img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.swipe figcaption { font: 400 1.05rem/1.2 var(--display); text-transform: uppercase; margin-top: 6px; }
@media (max-width: 700px) { .swipe { grid-auto-columns: 62%; } }

.team-band { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 860px) { .team-band { grid-template-columns: 1fr; gap: 18px; } }
.team-steps { padding-left: 1.2em; margin: 0 0 14px; display: grid; gap: 10px; color: var(--ink-2); }
.team-steps strong { color: var(--ink); }
details.more { margin: 4px 0 16px; border-top: 1px solid var(--line); padding-top: 10px; }
details.more summary, details.faq summary { cursor: pointer; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; }
details.more[open] summary { margin-bottom: 12px; }
details.faq { border-bottom: 1px solid var(--line); padding: 16px 0; }
details.faq summary { font: 400 1.3rem/1.2 var(--display); letter-spacing: 0.02em; }
details.faq p { color: var(--ink-2); margin: 10px 0 0; }
.drop section { padding-block: 56px; }
@media (max-width: 700px) { .drop section { padding-block: 40px; } }

/* lookbook of made-up teams */
.lookbook { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.look { display: flex; flex-direction: column; gap: 2px; text-decoration: none; background: var(--card); border: 1px solid var(--line); padding: 10px 10px 12px; transition: border-color .15s ease, transform .15s ease; }
.look:hover { border-color: var(--heat); transform: translateY(-3px); }
.look .stage { display: flex; justify-content: center; align-items: flex-end; height: 200px; padding: 10px; background: #1b1b1e; margin-bottom: 8px; }
.look .stage.steel { background: radial-gradient(circle at 50% 30%, #6f757e, #2b2e33 75%); }
.look .stage.light { background: linear-gradient(160deg, #2a2722, #1d1b18); }
.look .stage svg { max-height: 100%; width: auto; }
.look strong { font: 400 1.2rem/1.1 var(--display); text-transform: uppercase; }
.look span { color: var(--ink-3); font-size: 0.82rem; }
.look .go { color: var(--heat); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; margin-top: 4px; }
@media (max-width: 520px) { .lookbook { grid-template-columns: 1fr 1fr; gap: 8px; } .look .stage { height: 150px; } }

.icon-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.icon-pick label { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: 8px 10px; border: 1px solid #3a3a40; background: var(--card); font-size: 0.75rem; font-weight: 700; min-width: 58px; }
.icon-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.icon-pick .ico svg { width: 26px; height: 26px; display: block; }
.icon-pick label:has(input:checked) { border-color: var(--heat); color: var(--heat); }
.icon-pick label:has(input:focus-visible) { outline: 2px solid var(--heat-2); outline-offset: 2px; }

.ord-sum { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 4px 0 12px; font-size: 0.9rem; }
.ord-sum dt { color: var(--ink-2); }
.ord-sum dd { margin: 0; text-align: right; }
.ord-sum .tot { font-weight: 800; color: var(--ink); border-top: 1px solid var(--line); padding-top: 6px; }
.dibs-done p { margin: 0 0 8px; }

.hero-photo-shot { max-height: 100%; max-width: 92%; object-fit: contain; transform: rotate(3deg); box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px var(--line); }