@font-face {
  font-family: 'Shoulders';
  src: url('shoulders-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Shoulders';
  src: url('shoulders-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Golos';
  src: url('golos-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Golos';
  src: url('golos-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ply-ink: #17130f;
  --ply-ink-soft: #4a4038;
  --ply-hush: #7d7168;
  --ply-page: #f6f5f3;
  --ply-card: #fffefc;
  --ply-tint: #efece7;
  --ply-line: #ded8d0;
  --ply-red: #ae080f;
  --ply-red-dark: #8c060c;
  --ply-red-wash: #fbeceb;
  --ply-dark: #1d1613;
  --ply-dark-soft: #2b211c;
  --ply-sand: #d9cfc2;

  --ply-tts: #1f6b46;
  --ply-tts-wash: #e7f2eb;
  --ply-small: #a4560a;
  --ply-small-wash: #fbeee0;
  --ply-large: #2a5f8f;
  --ply-large-wash: #e6eef6;

  --ply-rail: 1180px;
  --ply-gut: 22px;
  --ply-gap: 22px;
  --ply-round: 3px;
  --ply-shadow: 0 1px 2px rgba(23, 19, 15, .05), 0 8px 22px -14px rgba(23, 19, 15, .3);

  --ply-head: 'Shoulders', 'Arial Narrow', Impact, sans-serif;
  --ply-text: 'Golos', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ply-page);
  color: var(--ply-ink);
  font: 400 17px/1.62 var(--ply-text);
  letter-spacing: .002em;
}

h1, h2, h3, h4 {
  font-family: var(--ply-head);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: .004em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); }
h3 { font-size: 20px; letter-spacing: .01em; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ply-red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ply-red-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .38em; }

table { border-collapse: collapse; width: 100%; }

button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--ply-red);
  outline-offset: 2px;
}

.jumpseam {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--ply-red);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
}
.jumpseam:focus { left: 8px; top: 8px; color: #fff; }

.boltrun {
  width: 100%;
  max-width: var(--ply-rail);
  margin: 0 auto;
  padding: 0 22px;
}

main { display: block; }


.selvagetop {
  background: var(--ply-card);
  border-bottom: 1px solid var(--ply-line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.selvagetop .boltrun {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 74px;
  flex-wrap: wrap;
}

.blazon {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
}
.blazon img { width: 104px; height: auto; }
.overlock {
  font-size: 12px;
  line-height: 1.25;
  color: var(--ply-hush);
  max-width: 132px;
  border-left: 1px solid var(--ply-line);
  padding-left: 12px;
}

.plackettabs { margin-left: auto; }
.plackettabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.plackettabs a {
  color: var(--ply-ink-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.plackettabs a:hover,
.plackettabs a[aria-current='page'] {
  color: var(--ply-red);
  border-bottom-color: var(--ply-red);
}
.tapelink {
  background: var(--ply-red);
  color: #fff !important;
  padding: 7px 14px !important;
  border-radius: var(--ply-round);
  border-bottom: 0 !important;
}
.tapelink:hover { background: var(--ply-red-dark); }

.hemfoot {
  background: var(--ply-dark);
  color: #d9d2cb;
  margin-top: 70px;
  padding: 52px 0 34px;
  font-size: 15px;
}
main:has(> .sendoffband:last-child) + .hemfoot { margin-top: 0; }
.hemfoot a { color: #f0e9e2; text-decoration: none; }
.hemfoot a:hover { color: #fff; text-decoration: underline; }

.footgrid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footgrid h2 {
  font-size: 15px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ply-sand);
  margin-bottom: 14px;
}
.footgrid ul { list-style: none; margin: 0; padding: 0; }
.footgrid li { margin-bottom: .5em; }

.footsign img { width: 118px; margin-bottom: 14px; }
.footsign p { margin-bottom: .5em; }

.hemfoot .hushed { color: #9d938a; }

.stockline {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ply-tts);
  font-weight: 600;
}
.stockline--wait { color: #9a6a21; }
.stockline .hushed { font-weight: 400; color: var(--ply-hush); }

/* Ряд размеров. Чипы ПЕРЕНОСЯТСЯ строками: горизонтальной прокрутки на сайте нет
   нигде, и ряд из девяти размеров на телефоне обязан складываться, а не ехать. */
.sizerack { margin: 4px 0 16px; }
.sizerack-say {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ply-hush);
  margin: 0 0 8px;
}
.sizerack-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sizechip {
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  padding: 9px 13px;
  min-height: 40px;
  background: #fff;
  border: 1px solid var(--ply-line);
  border-radius: 3px;
  color: var(--ply-ink);
  cursor: pointer;
}
.sizechip:hover { border-color: var(--ply-ink); }
.sizechip.is-on {
  background: var(--ply-ink);
  border-color: var(--ply-ink);
  color: #fff;
}

/* Та же вещь в других цветах. Сетка, а не карусель. */
.hueline { margin: 44px 0 0; }
.huegrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 14px;
}
.huegrid a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
  line-height: 1.35;
}
/* ⚠ Снимки листингов разной высоты, и при height:auto подписи цветов в одном ряду
   стояли на разных уровнях — ряд выглядел осыпавшимся. Держим снимок в коробке
   постоянной пропорции, вписывая его целиком. */
.huegrid img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  display: block;
  background: var(--ply-tint);
  border-radius: 3px;
  margin-bottom: 6px;
}
.huegrid span { display: block; }
.huegrid a:hover span:first-of-type { text-decoration: underline; }


.facing { padding: 58px 0; }
.facing--tint { background: var(--ply-tint); }
.facing + .facing { padding-top: 0; }
.facing--tint + .facing,
.facing + .facing--tint { padding-top: 58px; }

.pagerule { max-width: 66ch; margin: 0 0 30px; }
.pagerule h1, .pagerule h2 { margin-bottom: .3em; }

.piping {
  display: block;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ply-red);
  margin: 0 0 .5em;
}
.piping a { text-decoration: none; }

.leadin {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ply-ink-soft);
}

.hushed { color: var(--ply-hush); font-size: 14px; }

.pressplate,
.buyplate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ply-red);
  color: #fff;
  border: 1px solid var(--ply-red);
  border-radius: var(--ply-round);
  padding: 13px 24px;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .03em;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.pressplate:hover,
.buyplate:hover { background: var(--ply-red-dark); border-color: var(--ply-red-dark); color: #fff; }

.pressplate--quiet {
  background: transparent;
  color: var(--ply-red);
}
.pressplate--quiet:hover { background: var(--ply-red-wash); color: var(--ply-red-dark); }

.pressplate--pale {
  background: #fff;
  color: var(--ply-dark);
  border-color: #fff;
}
.pressplate--pale:hover { background: var(--ply-sand); border-color: var(--ply-sand); color: var(--ply-dark); }

.pressplate--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}
.pressplate--outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.buyplate { width: 100%; padding: 15px 24px; font-size: 18px; }
.buyplate--quiet {
  width: auto;
  background: transparent;
  color: var(--ply-red);
  font-size: 17px;
  padding: 13px 24px;
}
.buyplate--quiet:hover { background: var(--ply-red-wash); color: var(--ply-red-dark); }

.buyplate--slim {
  width: 100%;
  padding: 9px 14px;
  font-size: 15px;
  letter-spacing: .02em;
}

.crumbtape { padding: 20px 0 6px; font-size: 14px; }
.crumbtape ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--ply-hush);
}
.crumbtape li + li::before { content: '/'; margin-right: 6px; color: var(--ply-line); }
.crumbtape a { color: var(--ply-hush); text-decoration: none; }
.crumbtape a:hover { color: var(--ply-red); }

.countchip {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ply-hush);
  background: var(--ply-tint);
  border-radius: 999px;
  padding: 2px 11px;
}
.countchip--big {
  display: block;
  background: none;
  border-radius: 0;
  padding: 0;
  color: inherit;
}
.countchip--big strong {
  display: block;
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  color: #fff;
  margin-bottom: 8px;
}
.countchip--big span { display: block; font-size: 15px; color: var(--ply-sand); }

.notionrow { display: flex; flex-wrap: wrap; gap: 10px; }
.notionchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--ply-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.notionchip:hover { border-color: var(--ply-red); color: var(--ply-red); }
.notionchip--go { background: var(--ply-dark); border-color: var(--ply-dark); color: #fff; }
.notionchip--go:hover { background: var(--ply-red); border-color: var(--ply-red); color: #fff; }
.notionrow-ask { margin-bottom: 20px; }

.gaugeboard {
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  font-size: 15px;
  margin-bottom: 1.2em;
}
.gaugeboard caption {
  text-align: left;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ply-hush);
  padding: 0 0 8px;
}
.gaugeboard th, .gaugeboard td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ply-line);
}
.gaugeboard thead th {
  background: var(--ply-tint);
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ply-ink-soft);
}
.gaugeboard tbody th { font-weight: 600; width: 30%; }
.gaugeboard tbody tr:last-child th,
.gaugeboard tbody tr:last-child td { border-bottom: 0; }

.bulletsheet { list-style: none; padding: 0; }
.bulletsheet li {
  position: relative;
  padding-left: 22px;
  margin-bottom: .55em;
}
.bulletsheet li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 2px;
  background: var(--ply-red);
}
.bulletsheet--boxed {
  background: var(--ply-red-wash);
  border-left: 3px solid var(--ply-red);
  padding: 20px 22px;
  margin-bottom: 32px;
  font-size: 16px;
}

.verdictstrip {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--ply-round);
  padding: 3px 9px;
  margin: 0;
}
.vs-tts { background: var(--ply-tts-wash); color: var(--ply-tts); }
.vs-small { background: var(--ply-small-wash); color: var(--ply-small); }
.vs-large { background: var(--ply-large-wash); color: var(--ply-large); }
.verdictstrip--wide {
  display: block;
  padding: 14px 16px;
  border-left: 3px solid currentColor;
  border-radius: 0;
  margin: 18px 0;
  font-size: 16px;
}
.verdictstrip--wide strong { display: block; margin-bottom: 4px; }
.verdictstrip--wide .hushed { color: inherit; opacity: .78; font-size: 13px; }

.tallyline {
  display: block;
  font-size: 13px;
  color: var(--ply-hush);
  margin-bottom: 8px;
}
.tallyline .hushed { color: #c8961f; font-size: 13px; letter-spacing: .5px; }

.pricemark {
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 4px;
}
.pricemark--big { font-size: clamp(28px, 3.4vw, 36px); margin-bottom: 10px; }

.hearsaybed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ply-gap);
}
.saidso {
  margin: 0;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-top: 3px solid var(--ply-red);
  padding: 24px 24px 20px;
}
.saidso blockquote { margin: 0 0 14px; }
.saidso blockquote p { font-size: 16px; line-height: 1.58; }
.saidso figcaption { font-size: 14px; color: var(--ply-hush); }
.saidso figcaption strong { color: var(--ply-ink); }
.saidso .piping { font-size: 12px; }

.alsorail { margin-top: 46px; }
.alsorail h2 { font-size: 26px; }


.swatchbed {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ply-gap);
}

.swatchpin {
  display: flex;
  flex-direction: column;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.swatchpin:hover { border-color: var(--ply-sand); box-shadow: var(--ply-shadow); }

.swatchpin-shot {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border-bottom: 1px solid var(--ply-line);
}
.swatchpin-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.flagpin {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--ply-red);
  color: #fff;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--ply-round);
}

.swatchpin-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.swatchpin-body .piping { font-size: 11px; margin-bottom: .55em; }
.swatchpin-body h3 {
  font-family: var(--ply-text);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0 0 10px;
}
.swatchpin-body h3 a { color: var(--ply-ink); text-decoration: none; }
.swatchpin-body h3 a:hover { color: var(--ply-red); }
.swatchpin-body .tallyline { margin-bottom: 10px; }

.swatchpin-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.swatchpin-foot .verdictstrip { margin: 0; }


.heroband {
  background: var(--ply-dark);
  color: #f2ece6;
  padding: 66px 0 70px;
}
.heroband-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.heroband-say { min-width: 0; }
.heroband h1 { color: #fff; margin-bottom: .3em; }
.heroband .piping { color: var(--ply-sand); }
.heroband .leadin { color: #ccc3ba; max-width: 54ch; }
.heroband-go {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.heroband-go .pressplate--quiet { color: #fff; border-color: rgba(255, 255, 255, .45); }
.heroband-go .pressplate--quiet:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.scrollrail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.scrollrail-pin:nth-child(1),
.scrollrail-pin:nth-child(2) { grid-column: span 3; }
.scrollrail-pin {
  grid-column: span 2;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--ply-round);
  padding: 10px;
  text-decoration: none;
  color: #f2ece6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scrollrail-pin:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.scrollrail-pin img {
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  background: #fff;
  border-radius: 2px;
  padding: 6px;
}
.scrollrail-say { display: block; font-size: 12.5px; line-height: 1.35; }
.scrollrail-say strong { display: block; font-weight: 600; margin-bottom: 3px; }
.scrollrail-say .hushed { color: var(--ply-sand); font-size: 12.5px; }

.bobbinband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  counter-reset: bobbin;
  border-top: 1px solid var(--ply-line);
  border-bottom: 1px solid var(--ply-line);
}
.bobbincell {
  counter-increment: bobbin;
  padding: 26px 26px 26px 0;
}
.bobbincell + .bobbincell {
  border-left: 1px solid var(--ply-line);
  padding-left: 26px;
}
.bobbincell::before {
  content: counter(bobbin, decimal-leading-zero);
  display: block;
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--ply-red);
  margin-bottom: 10px;
}
.bobbincell h2 { font-size: 21px; margin-bottom: .4em; }
.bobbincell p { font-size: 15.5px; color: var(--ply-ink-soft); margin: 0; }

.rackwall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ply-gap);
}
.rackplate {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 14px;
  text-decoration: none;
  color: var(--ply-ink);
}
.rackplate:hover { border-color: var(--ply-red); color: var(--ply-ink); }
.rackplate-shot {
  flex: 0 0 92px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--ply-line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.rackplate-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.rackplate-say { display: block; }
.rackplate-say strong {
  display: block;
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.12;
  margin-bottom: 6px;
}
.rackplate-say .hushed { display: block; font-size: 13.5px; margin-bottom: 8px; }
.rackplate--bare { flex-direction: column; align-items: flex-start; gap: 8px; }
.rackplate--bare h2 { font-size: 19px; margin: 0; }
.rackplate--bare p { font-size: 14px; color: var(--ply-hush); margin: 0; }

.grosgrainlot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ply-gap);
}
.grosgrain {
  display: block;
  padding: 40px 36px;
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  background: var(--ply-card);
  text-decoration: none;
  color: var(--ply-ink);
}
.grosgrain h2 { margin-bottom: .35em; }
.grosgrain p { color: var(--ply-ink-soft); margin-bottom: 18px; }
.grosgrain-go {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ply-red);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.grosgrain--ink { background: var(--ply-dark); border-color: var(--ply-dark); color: #f2ece6; }
.grosgrain--ink h2 { color: #fff; }
.grosgrain--ink p { color: #c5bcb3; }
.grosgrain--ink .grosgrain-go { color: var(--ply-sand); }
.grosgrain:hover { border-color: var(--ply-red); }

.freshrail {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ply-line);
}
.freshslip {
  display: grid;
  grid-template-columns: 74px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--ply-line);
}
.freshslip-shot {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
}
.freshslip-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}
.freshslip-say { min-width: 0; }
.freshslip-say .piping { display: block; font-size: 11px; margin-bottom: .35em; }
.freshslip-say a {
  color: var(--ply-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.35;
}
.freshslip-say a:hover { color: var(--ply-red); }
.freshslip-sum { margin: 0; font-size: 20px; }
.freshslip .buyplate--slim { width: auto; padding: 9px 18px; }

.yokeface { background: var(--ply-red); padding: 50px 0; color: #fff; }
.yokeface-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.yokeface .countchip--big span { color: rgba(255, 255, 255, .82); }

.thimbleset {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.thimble {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  align-items: start;
}
.thimble > h2,
.thimble > p { grid-column: 2; }
.thimble h2 { font-size: 23px; margin-bottom: .4em; }
.thimble p { color: var(--ply-ink-soft); font-size: 16px; margin: 0; }
.thimble-mark {
  display: block;
  color: var(--ply-red);
  padding-top: 2px;
}
.thimble-mark svg { width: 32px; height: 32px; }

.interlining {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.interlining > * { min-width: 0; }
.interlining h2 { font-size: 27px; }
.treadle { counter-reset: tread; list-style: none; padding: 0; margin-bottom: 20px; }
.treadle li {
  counter-increment: tread;
  position: relative;
  padding-left: 46px;
  margin-bottom: 1em;
  font-size: 16px;
  color: var(--ply-ink-soft);
}
.treadle li::before {
  content: counter(tread);
  position: absolute;
  left: 0;
  top: -1px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ply-red);
  color: #fff;
  border-radius: 50%;
  font-family: var(--ply-head);
  font-weight: 800;
  font-size: 17px;
}

.spotlamp {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 44px;
  align-items: center;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 32px;
}
.spotlamp-shot {
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  position: relative;
  background: #fff;
  border: 1px solid var(--ply-line);
  border-radius: 2px;
  overflow: hidden;
}
.spotlamp-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}
.spotlamp-say h2 { font-size: clamp(26px, 3vw, 34px); }
.spotlamp-say h2 a { color: var(--ply-ink); text-decoration: none; }
.spotlamp-say h2 a:hover { color: var(--ply-red); }
.spotlamp-say > p { color: var(--ply-ink-soft); }
.spotlamp-go {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.spotlamp-go .buyplate--quiet { width: auto; }

.laundermark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ply-gap);
}
.laundermark > div {
  border-radius: var(--ply-round);
  padding: 26px 28px;
}
.laundermark-do { background: var(--ply-tts-wash); }
.laundermark-dont { background: var(--ply-red-wash); }
.laundermark h3 {
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.laundermark ul { list-style: none; padding: 0; margin: 0; }
.laundermark li {
  position: relative;
  padding-left: 26px;
  margin-bottom: .6em;
  font-size: 15.5px;
  color: var(--ply-ink-soft);
}
.laundermark li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
}
.laundermark-do h3 { color: var(--ply-tts); }
.laundermark-do li::before { content: '\2713'; color: var(--ply-tts); }
.laundermark-dont h3 { color: var(--ply-red); }
.laundermark-dont li::before { content: '\2715'; color: var(--ply-red); }

.creedband {
  background: var(--ply-dark-soft);
  color: #e8e1da;
  padding: 62px 0;
}
.creedband-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 20px 56px;
  align-items: start;
}
.creedband h2 { color: #fff; margin: 0; }
.creedband p { margin: 0; font-size: 18px; color: #c5bcb3; }

.longstitch { max-width: 84ch; }
.longstitch h2 { font-size: 30px; }
.longstitch h3 { margin-top: 1.4em; }
.longstitch p { color: var(--ply-ink-soft); }
.longstitch .gaugeboard { margin: 26px 0 30px; }

.sendoffband {
  background: var(--ply-dark);
  color: #e8e1da;
  padding: 62px 0;
  text-align: center;
}
.sendoffband h2 { color: #fff; }
.sendoffband p { color: #c5bcb3; max-width: 62ch; margin: 0 auto; font-size: 17.5px; }
.sendoffband-go {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}


.ply-cat .pagerule,
.ply-hub .pagerule,
.ply-fit .pagerule,
.ply-note .pagerule,
.ply-leaf .pagerule,
.ply-lost .pagerule { margin-top: 12px; margin-bottom: 34px; }

.ply-lost .pagerule { max-width: 62ch; }
.ply-lost .rackwall { margin-bottom: 60px; }

.sizeboard {
  margin-top: 46px;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-left: 3px solid var(--ply-red);
  border-radius: var(--ply-round);
  padding: 28px 30px;
}
.sizeboard h2 { font-size: 25px; }
.sizeboard h3 { margin-top: 1.4em; }
.sizeboard > p { color: var(--ply-ink-soft); max-width: 76ch; }
.sizeboard .gaugeboard { margin-top: 20px; margin-bottom: 0; }
.sizeboard .bulletsheet { margin-top: 12px; margin-bottom: 0; }


.rackplate-hero {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 46px;
  align-items: start;
  margin: 14px 0 54px;
}
.rackplate-hero-shot {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  overflow: hidden;
}
.rackplate-hero-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
}
.rackplate-hero-say h1 { font-size: clamp(28px, 3.6vw, 42px); }
.rackplate-hero-say .leadin { font-size: 17.5px; margin-bottom: 20px; }
.rackplate-hero-go { margin: 22px 0 0; max-width: 400px; }

.ply-item section { margin-bottom: 46px; }
.ply-item .runsheet { max-width: 76ch; }
.ply-item .runsheet h2,
.ply-item .featcell-bed h2,
.ply-item .sizeboard h2,
.ply-item .hearsaybed--item h2 { font-size: 26px; }

.featcell-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ply-gap);
}
.featcell {
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 22px 22px 24px;
  border-top: 3px solid var(--ply-sand);
}
.featcell h3 { font-size: 17px; margin-bottom: .5em; }
.featcell p { font-size: 15px; color: var(--ply-ink-soft); margin: 0; }

.hearsaybed--item { display: block; }
.hearsaybed--item .saidso { margin-bottom: var(--ply-gap); }
.hearsaybed--item .saidso blockquote p { font-size: 16.5px; }


.notebed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ply-gap);
  margin-bottom: 20px;
}
.noteplate {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
  background: var(--ply-card);
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 16px;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.noteplate:hover { border-color: var(--ply-sand); box-shadow: var(--ply-shadow); }
.noteplate-shot {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  min-height: 0;
  background: var(--ply-tint);
  border-radius: var(--ply-round);
  overflow: hidden;
}
.noteplate-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.noteplate-say { display: block; min-width: 0; }
.noteplate-say strong {
  display: block;
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 6px 0 8px;
}
.noteplate:hover .noteplate-say strong { color: var(--ply-red); }

.deckline {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ply-hush);
}
.deckline--out {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ply-ink-soft);
  border-top: 1px solid var(--ply-line);
  padding-top: 20px;
  margin-top: 30px;
}

.runsheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 52px;
  align-items: start;
  margin-bottom: 54px;
}
.runsheet { max-width: 680px; }
.runsheet h2 {
  font-size: 25px;
  margin: 34px 0 .5em;
  padding-top: 4px;
}
.runsheet h2:first-child { margin-top: 0; }
.runsheet p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ply-ink-soft);
  margin-bottom: 1em;
}
.runsheet .bulletsheet { margin-bottom: 34px; }

.sidepin {
  position: sticky;
  top: 20px;
  background: var(--ply-tint);
  border-radius: var(--ply-round);
  padding: 22px 22px 24px;
}
.sidepin h2 {
  font-size: 13px;
  font-family: var(--ply-text);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ply-hush);
  margin-bottom: 16px;
}
.sidepin ul { list-style: none; }
.sidepin li {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ply-line);
}
.sidepin li:last-child { border-bottom: 0; }
.sidepin li .piping { margin-bottom: 3px; }
.sidepin li a {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.15;
  color: var(--ply-ink);
}
.sidepin li a:hover { color: var(--ply-red); }
.sidepin > p { margin: 20px 0 0; }
.sidepin .pressplate { width: 100%; justify-content: center; }


.tapeform-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 42px;
  align-items: start;
  margin-bottom: 60px;
}
.tapeform {
  position: sticky;
  top: 20px;
  background: var(--ply-tint);
  border-radius: var(--ply-round);
  padding: 24px 22px 18px;
}
.dropfield { margin-bottom: 20px; }
.dropfield label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ply-ink);
  margin-bottom: 7px;
}
.dropfield select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font: 400 15px/1.3 var(--ply-text);
  color: var(--ply-ink);
  background-color: var(--ply-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237d7168' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  border: 1px solid var(--ply-line);
  border-radius: var(--ply-round);
  padding: 10px 34px 10px 12px;
  cursor: pointer;
}
.dropfield select:focus-visible { outline: 2px solid var(--ply-red); outline-offset: 1px; }
.dropfield .hushed { display: block; margin-top: 6px; font-size: 13px; }
.tapeform-go { margin: 4px 0 0; }
.tapeform-go .pressplate { width: 100%; justify-content: center; }

.tapeout:empty { display: none; }
.tapetally {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 4px;
}
.tapetally em { font-style: normal; color: var(--ply-red); }
.tapeout .hushed { margin-bottom: 20px; }
.tapenone {
  background: var(--ply-red-wash);
  border-left: 3px solid var(--ply-red);
  border-radius: 0 var(--ply-round) var(--ply-round) 0;
  padding: 20px 22px;
  font-size: 16px;
  color: var(--ply-ink-soft);
}
.tapeout .swatchbed { grid-template-columns: repeat(3, 1fr); }


.plainleaf {
  max-width: 700px;
  margin-bottom: 56px;
}
.plainleaf h2 {
  font-size: 24px;
  margin: 36px 0 .55em;
}
.plainleaf h2:first-child { margin-top: 0; }
.plainleaf p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ply-ink-soft);
  margin-bottom: 1em;
}
.plainleaf .pressplate { margin-top: 12px; }

.askbox {
  background: var(--ply-tint);
  border-left: 3px solid var(--ply-red);
  border-radius: 0 var(--ply-round) var(--ply-round) 0;
  padding: 18px 22px;
  margin: 4px 0 1.2em;
}
.askbox a {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--ply-ink);
}
.askbox a:hover { color: var(--ply-red); }

.askbox dt {
  font-weight: 600;
  color: var(--ply-ink);
}
.askbox dd {
  margin: 2px 0 0;
  color: var(--ply-text);
}
.askbox dd + dt { margin-top: 14px; }

address.askbox,
.footpost {
  font-style: normal;
}
address.askbox {
  font-family: var(--ply-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--ply-ink);
}
.footpost {
  margin-top: 6px;
  max-width: 24em;
  line-height: 1.5;
}

.ply-lost .rackwall { grid-template-columns: repeat(3, 1fr); }


@media (max-width: 1024px) {
  .boltrun { padding: 0 var(--ply-gut); }

  .heroband-grid { grid-template-columns: 1fr; gap: 34px; }
  /* ⚠ Здесь была карусель: display:flex + overflow-x:auto. Полоса сбоку на телефоне
     запрещена, а главная беда в том, что за правым краем прятались плитки, которых
     посетитель не видел вовсе. Полка переносится по строкам. */
  .scrollrail { grid-template-columns: repeat(3, 1fr); }
  .scrollrail-pin,
  .scrollrail-pin:nth-child(1),
  .scrollrail-pin:nth-child(2) { grid-column: auto; }

  .bobbinband { grid-template-columns: repeat(2, 1fr); }
  .bobbincell + .bobbincell { border-left: 0; padding-left: 0; }
  .bobbincell:nth-child(2n) { border-left: 1px solid var(--ply-line); padding-left: 26px; }
  .bobbincell:nth-child(n + 3) { border-top: 1px solid var(--ply-line); }
  .rackwall,
  .ply-lost .rackwall { grid-template-columns: repeat(2, 1fr); }
  .swatchbed,
  .tapeout .swatchbed { grid-template-columns: repeat(3, 1fr); }
  .grosgrainlot { grid-template-columns: 1fr; }
  .thimbleset { grid-template-columns: 1fr; }
  .interlining { grid-template-columns: 1fr; gap: 34px; }
  .spotlamp { grid-template-columns: 320px 1fr; gap: 30px; padding: 24px; }
  .hearsaybed { grid-template-columns: 1fr; }
  .footgrid { grid-template-columns: 1fr 1fr; gap: 28px; }

  .rackplate-hero { grid-template-columns: 380px 1fr; gap: 32px; }
  .featcell-row { grid-template-columns: repeat(2, 1fr); }

  .runsheet-grid,
  .tapeform-grid { grid-template-columns: 1fr; gap: 34px; }
  .sidepin,
  .tapeform { position: static; }
  .runsheet { max-width: none; }
  .tapeform { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 22px; }
  .tapeform-go { grid-column: 1 / -1; }
  .tapeform-go .pressplate { width: auto; }
}

@media (max-width: 760px) {
  .selvagetop .boltrun { gap: 10px 16px; padding-top: 12px; padding-bottom: 12px; min-height: 0; }
  .overlock { display: none; }
  .plackettabs { margin-left: 0; width: 100%; }
  .plackettabs ul { gap: 2px 14px; }
  .plackettabs a { font-size: 14px; }

  .facing { padding: 40px 0; }
  .heroband { padding: 44px 0 46px; }
  .yokeface { padding: 36px 0; }
  .yokeface-row { grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
  .bobbinband { grid-template-columns: 1fr; }
  .bobbincell { padding: 22px 0; }
  .bobbincell:nth-child(2n) { border-left: 0; padding-left: 0; }
  .bobbincell + .bobbincell { border-top: 1px solid var(--ply-line); }
  .swatchbed,
  .tapeout .swatchbed,
  .rackwall,
  .ply-lost .rackwall { grid-template-columns: repeat(2, 1fr); }
  .notebed { grid-template-columns: 1fr; }
  .laundermark { grid-template-columns: 1fr; }
  .creedband-grid { grid-template-columns: 1fr; gap: 16px; }

  .freshslip {
    grid-template-columns: 74px 1fr auto;
    gap: 10px 16px;
    align-items: start;
  }
  .freshslip-shot { grid-row: 1 / span 2; }
  .freshslip-say { grid-column: 2 / span 2; }
  .freshslip-sum { grid-column: 2; align-self: center; }
  .freshslip .buyplate--slim { grid-column: 3; }
  .spotlamp { grid-template-columns: 1fr; }
  .featcell-row { grid-template-columns: 1fr; }
  .footgrid { grid-template-columns: 1fr; gap: 24px; }

  .rackplate-hero { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }

  /* ⚠ Здесь было overflow-x:auto — таблица уезжала за край и давала полосу внутри
     блока: сам документ при этом ровно 360/360, и проба по документу молчала.
     Колонки фиксируем и разрешаем слову переноситься — таблица умещается. */
  .gaugeboard { table-layout: fixed; width: 100%; }
  .gaugeboard th, .gaugeboard td { padding: 10px 8px; overflow-wrap: anywhere; }
  .gaugeboard th:first-child, .gaugeboard td:first-child { padding-left: 0; }
  .gaugeboard th:last-child, .gaugeboard td:last-child { padding-right: 0; }

  .tapeform { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  :root { --ply-gut: 16px; }
  .blazon img { width: 88px; }

  h1 { font-size: clamp(28px, 8vw, 34px); }
  .leadin { font-size: 16.5px; }
  .runsheet p,
  .plainleaf p { font-size: 16px; }
  .runsheet h2,
  .plainleaf h2 { font-size: 21px; }
  .longstitch h2 { font-size: 24px; }

  .swatchbed,
  .tapeout .swatchbed { grid-template-columns: 1fr 1fr; gap: 12px; }
  .swatchpin-body { padding: 12px 12px 14px; }
  .rackwall,
  .ply-lost .rackwall { grid-template-columns: 1fr; }
  .yokeface-row { grid-template-columns: 1fr 1fr; }

  .scrollrail { grid-template-columns: 1fr 1fr; }
  .gaugeboard { font-size: 13.5px; }
  .noteplate { grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; }
  .noteplate-say strong { font-size: 18px; }

  .heroband-go,
  .sendoffband-go,
  .grosgrain-go { flex-direction: column; align-items: stretch; }
  .heroband-go .pressplate,
  .sendoffband-go .pressplate,
  .grosgrain-go .pressplate { justify-content: center; }
}