/* silverdust.css — вся вёрстка ETCH A SKETCH. Палитра из баннера стора
 * (красный корпус, жёлтая обводка, серый экран с процарапанной линией).
 * Имена классов и переменных — только из _tokens.js (меряет _footprint.js).
 * Тёмные полосы решаются ПЕРЕОПРЕДЕЛЕНИЕМ переменных в .etchdark, а не парными
 * правилами: один и тот же блок живёт на обоих фонах (грабля lomon, 2.52:1). */

@font-face {
  font-family: 'Luckiest Guy';
  font-weight: 400;
  font-display: swap;
  src: url(luckiest-guy.woff2) format('woff2');
}
@font-face {
  font-family: 'Cabin';
  font-weight: 400 700;
  font-display: swap;
  src: url(cabin.woff2) format('woff2');
}

:root {
  --eas-ink: #2b2420;
  --eas-paper: #fdf7ee;
  --eas-dark: #a31a20;
  --eas-red: #d5232a;
  --eas-red-deep: #a31a20;
  --eas-gold: #ffd800;
  --eas-screen: #c9cdc9;
  --eas-line: #4a4a4a;
  --eas-dim: #6d675f;
  --eas-tint: #f4e9da;
  --eas-ink-on-dark: #fdf7ee;
  --eas-kick: #a31a20;
  --eas-gap-s: 10px;
  --eas-gap-m: 22px;
  --eas-gap-l: 46px;
  --eas-gap-grid: 18px;
  --eas-measure: 66ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.etchskin {
  margin: 0;
  font-family: 'Cabin', 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--eas-ink);
  background: var(--eas-paper);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 {
  font-family: 'Luckiest Guy', 'Cabin', sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.12;
  margin: 0 0 var(--eas-gap-s);
}
h1 { font-size: clamp(30px, 5.2vw, 52px); }
h2 { font-size: clamp(23px, 3.4vw, 34px); }
h3 { font-size: 19px; }
p { margin: 0 0 1em; }
.redwrap { max-width: 1160px; margin: 0 auto; padding: 0 22px; }

.tracegap {
  position: absolute; left: -9999px; top: 0;
  background: var(--eas-gold); color: var(--eas-ink);
  padding: 8px 16px; z-index: 99; font-weight: 700;
}
.tracegap:focus { left: 8px; top: 8px; }

/* ---- полосы ---- */
.etchband { padding: var(--eas-gap-l) 0; background: var(--eas-paper); }
.etchtint { background: var(--eas-tint); }
.etchdark {
  background: var(--eas-red-deep);
  color: var(--eas-ink-on-dark);
  --eas-ink: var(--eas-ink-on-dark);
  --eas-dim: #f3d9c9;
  --eas-kick: var(--eas-gold);
}
.kicktrace {
  display: block;
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--eas-kick);
  margin: 0 0 6px;
}
/* ---- шапка ---- */
.knobbar {
  background: var(--eas-red);
  color: var(--eas-paper);
  border-bottom: 4px solid var(--eas-gold);
}
.knobbar .redwrap {
  display: flex; align-items: center; gap: var(--eas-gap-m);
  flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px;
}
.knobstamp { display: inline-flex; }
.knobstamp img { width: 117px; height: 75px; object-fit: contain; }
.knobnav {
  display: flex; gap: 4px 18px; flex-wrap: wrap;
  margin-left: auto; align-items: center;
}
.knobnav a {
  color: var(--eas-paper); text-decoration: none;
  font-weight: 700; font-size: 15.5px; padding: 6px 2px;
  border-bottom: 3px solid transparent;
}
.knobnav a:hover { border-bottom-color: var(--eas-gold); }
.knobnav a.knobpin { border-bottom-color: var(--eas-gold); }
.knobcta {
  background: var(--eas-gold); color: var(--eas-ink);
  border-radius: 999px; padding: 8px 18px;
  border-bottom: 0;
}
.knobnav a.knobcta { border-bottom: 0; color: var(--eas-ink); }
.knobnav a.knobcta:hover { filter: brightness(1.05); }

/* ---- герой ---- */
.screenhero { padding: 54px 0 var(--eas-gap-l); }
.screenlead { font-size: 19px; max-width: var(--eas-measure); color: var(--eas-dim); }
.screencta { display: flex; gap: 12px; flex-wrap: wrap; margin: var(--eas-gap-m) 0; }
.screencta a {
  text-decoration: none; font-weight: 700; border-radius: 999px;
  padding: 12px 24px; display: inline-block;
}
.screencta a:first-child { background: var(--eas-red); color: var(--eas-paper); }
.screencta a:last-child { border: 3px solid var(--eas-red); color: inherit; }
.etchdark .screencta a:first-child { background: var(--eas-gold); color: #2b2420; }
.etchdark .screencta a:last-child { border-color: var(--eas-gold); }
.screenfacts {
  display: flex; gap: 10px 26px; flex-wrap: wrap;
  margin: 0; padding: 0; list-style: none; font-size: 15px;
}
.factknob { display: flex; align-items: center; gap: 8px; }
.factknob::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: var(--eas-gold); border: 3px solid rgba(0,0,0,.25); flex: none;
}
.screenrail {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--eas-gap-grid); margin-top: var(--eas-gap-l);
}
@media (max-width: 980px) {
  .screenrail { grid-template-columns: repeat(5, minmax(190px, 1fr)); overflow-x: auto; }
}

/* ---- карточки товара ---- */
.doodlegrid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--eas-gap-grid);
}
@media (max-width: 980px) { .doodlegrid { grid-template-columns: repeat(2, 1fr); } }
.doodleframe {
  background: #fff;
  border: 3px solid var(--eas-red);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 0;
  color: #2b2420;
}
.railsketch { min-width: 0; }
.railsketch .doodleframe { height: 100%; }
.doodledoor { text-decoration: none; display: block; }
.doodledoor:hover .doodlename { text-decoration: underline; }
.doodlepic {
  display: block;
  background: var(--eas-screen);
  aspect-ratio: 1 / 1;
  position: relative;
}
.doodlepic img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; mix-blend-mode: multiply; padding: 10px;
}
.doodlename {
  display: block;
  font-family: 'Cabin', sans-serif; font-weight: 700;
  font-size: 16px; line-height: 1.3; margin: 12px 14px 4px;
}
.doodletrim { display: block; font-size: 14px; color: #6d675f; margin: 0 14px 8px; }
.startrace { display: block; font-size: 13.5px; color: #6d675f; margin: 0 14px 6px; }
.startrace b { color: #a3720a; letter-spacing: .1em; font-weight: 400; }
.doodlebuy {
  margin-top: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px 14px;
}
.pricetrace { font-size: 15px; }
.pricetrace b { font-size: 19px; }
.pricetrace i {
  display: block; font-style: normal; font-size: 12.5px; color: var(--eas-dim);
  max-width: 52ch;
}
.priceplain b { font-size: 22px; }
.doodleframe .priceplain { margin: auto 14px 10px; }
.knobbtn {
  border: 0; padding: 9px 14px; border-radius: 999px;
  background: var(--eas-red); cursor: pointer;
  display: inline-flex; align-items: center;
  max-width: 100%; min-width: 0;
}
.knobbtn:hover { background: var(--eas-red-deep); }
.knobbtn img { display: block; max-width: 100%; height: auto; }

/* ---- секции главной ---- */
.duotiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--eas-gap-grid); }
@media (max-width: 860px) { .duotiles { grid-template-columns: 1fr; } }
.duopane {
  border-radius: 18px; padding: 30px; text-decoration: none; display: block;
}
.duopane span { font-weight: 700; text-decoration: underline; }
.duopane:first-child { background: var(--eas-red-deep); color: var(--eas-ink-on-dark); }
.duopane:first-child .kicktrace { color: var(--eas-gold); }
.duopane:last-child { background: var(--eas-tint); border: 3px solid var(--eas-red); }

.howscreen {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--eas-gap-grid); counter-reset: knob;
}
@media (max-width: 860px) { .howscreen { grid-template-columns: repeat(2, 1fr); } }
.howstep {
  background: #fff; border-radius: 14px; padding: 20px;
  border-top: 6px solid var(--eas-red); color: #2b2420;
}
.etchdark .howstep { border-top-color: var(--eas-gold); }
.howstep h3 { margin-bottom: 6px; }
.howstep p { margin: 0; font-size: 15.5px; color: #55504a; }

.yearband { border-left: 6px solid var(--eas-red); padding-left: 26px; }
.yearrow { margin: 0 0 var(--eas-gap-m); max-width: var(--eas-measure); }
.yearpin {
  font-family: 'Luckiest Guy', sans-serif; font-size: 24px;
  color: var(--eas-kick); display: block;
}
.yearrow p { margin: 4px 0 0; }

.lineupdeck { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--eas-gap-grid); }
@media (max-width: 860px) { .lineupdeck { grid-template-columns: 1fr; } }
.lineupslab {
  background: #fff; border-radius: 16px; padding: 22px;
  border: 3px solid var(--eas-screen);
  text-decoration: none; display: block; color: #2b2420;
}
.lineupslab:hover { border-color: var(--eas-red); }
.lineupslab p { font-size: 15.5px; color: #55504a; margin: 0; }
.lineuptally {
  display: inline-block; font-size: 13px; font-weight: 700;
  background: var(--eas-screen); border-radius: 999px;
  padding: 2px 12px; margin-bottom: 8px; color: #2b2420;
}
.freshtrace { font-size: 14px; color: var(--eas-dim); margin-top: 8px; }

.numsband { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--eas-gap-grid); }
@media (max-width: 700px) { .numsband { grid-template-columns: repeat(2, 1fr); } }
.numcell { text-align: center; }
.numcell b {
  font-family: 'Luckiest Guy', sans-serif; font-weight: 400;
  font-size: clamp(30px, 4.5vw, 46px); display: block; color: var(--eas-kick);
}
.numcell span { font-size: 15px; color: var(--eas-dim); }

.saidwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--eas-gap-grid); }
@media (max-width: 860px) { .saidwall { grid-template-columns: 1fr; } }
.saidframe {
  background: #fff; border-radius: 14px; padding: 22px;
  border-bottom: 6px solid var(--eas-gold); color: #2b2420;
  margin: 0;
}
.saidframe p { font-size: 16px; }
.saidframe footer { font-weight: 700; font-size: 14px; color: #6d675f; }

.longetch { max-width: 76ch; }
.longetch table { border-collapse: collapse; width: 100%; margin: var(--eas-gap-m) 0; }
.longetch th, .longetch td {
  text-align: left; padding: 9px 12px; font-size: 15px;
  border-bottom: 1px solid rgba(0,0,0,.14);
}
.longetch thead th { border-bottom: 3px solid var(--eas-red); }
.longetch ul { padding-left: 22px; }
.longetch li { margin-bottom: 6px; }

.shakeclose { text-align: center; }
.shakeclose .screenlead { margin: 0 auto 1em; }
.shakeclose .screencta { justify-content: center; }

.safeband {
  background: var(--eas-tint); border: 2px dashed var(--eas-line);
  border-radius: 12px; padding: 12px 18px; font-size: 14.5px; color: #55504a;
}
.etchdark .safeband { background: rgba(255,255,255,.12); color: var(--eas-ink-on-dark); }

.spotknob {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: var(--eas-gap-l); align-items: center;
}
@media (max-width: 860px) { .spotknob { grid-template-columns: 1fr; } }
.spotscreen {
  background: var(--eas-screen); border: 3px solid var(--eas-red);
  border-radius: 18px; padding: 26px;
}
.spotscreen img { mix-blend-mode: multiply; margin: 0 auto; }
.spotlist { list-style: none; margin: 0 0 var(--eas-gap-m); padding: 0; }
.spotlist li { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.1); font-size: 15.5px; }

/* ---- PDP ---- */
.crumbetch { font-size: 13.5px; color: var(--eas-dim); padding: 14px 0 0; }
.crumbetch ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbetch li + li::before { content: '\2192'; margin-right: 6px; }
.crumbetch a { color: inherit; }
.stagepair {
  display: grid; grid-template-columns: minmax(300px, 5fr) 6fr;
  gap: var(--eas-gap-l); align-items: start;
}
@media (max-width: 860px) { .stagepair { grid-template-columns: 1fr; } }
.stagepic {
  background: var(--eas-screen); border: 3px solid var(--eas-red);
  border-radius: 18px; padding: 26px; position: sticky; top: 16px;
}
.stagepic img { mix-blend-mode: multiply; margin: 0 auto; }
.stagebrief .screenlead { margin-bottom: var(--eas-gap-s); }
.unitrow {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  list-style: none; margin: var(--eas-gap-s) 0 var(--eas-gap-m); padding: 0;
  font-size: 15px; color: var(--eas-dim);
}
.unitrow b { color: var(--eas-ink); }
.feattrace { list-style: none; margin: 0 0 var(--eas-gap-m); padding: 0; }
.featknob {
  padding: 10px 0 10px 30px; position: relative;
  border-bottom: 1px solid rgba(0,0,0,.1); font-size: 16px;
}
.featknob::before {
  content: ''; position: absolute; left: 4px; top: 16px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--eas-gold); border: 3px solid var(--eas-red);
}
.kinsketch { margin-top: var(--eas-gap-m); }
.lastknob {
  display: flex; align-items: center; justify-content: center;
  gap: var(--eas-gap-m); flex-wrap: wrap;
}

/* ---- раздел / подборщик / гайды ---- */
.lineupcrown { max-width: var(--eas-measure); margin-bottom: var(--eas-gap-m); }
.dialbench fieldset {
  border: 3px solid var(--eas-red); border-radius: 14px;
  margin: 0 0 var(--eas-gap-m); padding: 14px 18px;
  display: flex; flex-wrap: wrap; gap: 10px;
  background: #fff; color: #2b2420;
}
.dialbench legend {
  font-family: 'Luckiest Guy', sans-serif; font-size: 18px; padding: 0 8px;
}
.dialfield { position: relative; }
.dialfield input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dialfield span {
  display: inline-block; border: 2px solid var(--eas-line);
  border-radius: 999px; padding: 7px 16px; font-size: 15px; font-weight: 700;
}
.dialfield input:checked + span {
  background: var(--eas-red); border-color: var(--eas-red); color: var(--eas-paper);
}
.dialfield input:focus-visible + span { outline: 3px solid var(--eas-gold); }
.matchtrace {
  display: block; font-size: 17px; margin: 0 0 var(--eas-gap-m);
}
.matchtrace b {
  font-family: 'Luckiest Guy', sans-serif; font-size: 30px;
  color: var(--eas-kick); margin-right: 8px;
}
.dialmatch { margin-top: var(--eas-gap-s); }

.doodleleaf {
  background: #fff; border-radius: 16px; padding: 24px;
  border: 3px solid var(--eas-screen); text-decoration: none;
  display: block; color: #2b2420;
}
.doodleleaf:hover { border-color: var(--eas-red); }
.doodleleaf p { margin: 0; font-size: 15.5px; color: #55504a; }
.boardcrown { max-width: var(--eas-measure); margin-bottom: var(--eas-gap-m); }
.boardetch { max-width: 74ch; }
.boardetch h2 { margin-top: var(--eas-gap-m); }

/* ---- сервисные ---- */
.deskpane { max-width: 74ch; }
.deskpane h2 { margin-top: var(--eas-gap-m); }
.deskblock { margin-bottom: var(--eas-gap-m); }
.addrframe {
  font-style: normal; font-weight: 700; display: block;
  border-left: 6px solid var(--eas-red); padding-left: 16px; margin: 0 0 1em;
}

/* ---- подвал ---- */
.framefoot {
  background: #2b2420; color: #d9d2c7;
  --eas-ink: #f3ede2; --eas-dim: #b9b1a4; --eas-kick: var(--eas-gold);
  margin-top: var(--eas-gap-l);
  border-top: 6px solid var(--eas-red);
}
.framefoot a { color: #f3ede2; }
.framecols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--eas-gap-m); padding: var(--eas-gap-l) 0 var(--eas-gap-m);
}
@media (max-width: 860px) { .framecols { grid-template-columns: 1fr 1fr; } }
.framecol a { display: block; margin-bottom: 8px; font-size: 15px; }
.framecol a:first-child { margin-bottom: 12px; }
.frameword {
  font-family: 'Luckiest Guy', sans-serif; font-size: 17px;
  color: var(--eas-gold); display: block; margin-bottom: 10px;
}
.frameaddr { font-style: normal; font-size: 14.5px; color: #b9b1a4; }
.framesign {
  border-top: 1px solid rgba(255,255,255,.18);
  padding: var(--eas-gap-m) 0; font-size: 13.5px; color: #b9b1a4;
}
.framesign img { margin-top: 10px; max-width: min(380px, 100%); }