@font-face{font-family:"Familjen Grotesk";src:url("/assets/familjengrotesk-latin.414d5dfe.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Public Sans";src:url("/assets/publicsans-latin.5ed4d31c.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}

:root{
  --paper:#f6f5f1; --kraft:#ebe6da; --kraft-2:#e2dbc9; --panel:#ffffff;
  --ink:#16191c; --ink-2:#4a5157; --ink-3:#6d757b;
  --blue:#1a5aa0; --blue-d:#16406f; --rust:#a8471a; --rust-d:#8f3c15;
  --line:#d7d2c4; --line-2:#e8e4d9;
  --wrap:1320px; --gut:44px;
  --sh:0 1px 0 var(--line);
  --ease:cubic-bezier(.2,.6,.2,1);
  --display:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --label-ratio:0.8966;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16.5px/1.62 var(--text);letter-spacing:.002em}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* Headings: a grotesque at 600, tracking at zero or barely negative only on
   the very large sizes, leading never below 1.12. */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.16;
  letter-spacing:0;margin:0}
p{margin:0 0 1em}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--panel);padding:10px 16px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow{font:700 11.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 12px}
.tiny{font-size:13.5px;color:var(--ink-2)}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ---------------------------------------------------------------- topbar */
.oc-topbar{background:var(--ink);color:#f2f0ea;font:600 12px/1 var(--text);
  letter-spacing:.1em;text-transform:uppercase}
.oc-topbar .wrap{display:flex;gap:22px;align-items:center;min-height:36px;flex-wrap:wrap;
  justify-content:space-between}
.oc-topbar b{color:#fff}

/* ---------------------------------------------------------------- header */
.oc-head{background:var(--panel);border-bottom:1px solid var(--line);position:relative;z-index:30}
.oc-head .wrap{display:flex;align-items:center;gap:26px;min-height:72px}
/* The name and the tagline on one baseline come to 358px, and with
   flex:0 0 auto that could neither shrink nor break: under about 376px of
   content width the wordmark stood outside the page and the whole site
   scrolled sideways on a 360px phone. The owner found this on the sister site
   before any audit did, because the sweep here stopped at 390. It wraps now,
   and min-width:0 goes with it: a flex child defaults to min-width:auto and
   refuses to go narrower than its own content (§5). */
.wordmark{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.01em;
  text-decoration:none;line-height:1;flex:0 1 auto;min-width:0;display:flex;
  align-items:baseline;gap:9px;flex-wrap:wrap}
.wordmark small{font:600 10.5px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);white-space:normal}
.oc-nav{display:flex;align-items:center;gap:20px;flex:1 1 0;min-width:0;justify-content:flex-end}
.oc-nav a,.oc-nav button{font:600 13.5px/1 var(--text);letter-spacing:.02em;
  text-decoration:none;color:inherit;background:none;border:0;padding:8px 0;cursor:pointer;
  white-space:nowrap;border-bottom:2px solid transparent}
.oc-nav a:hover,.oc-nav button:hover{color:var(--blue-d);border-bottom-color:var(--blue)}
.oc-nav [aria-current="page"]{border-bottom-color:var(--rust)}
.oc-panel{position:absolute;left:0;right:0;top:100%;background:var(--panel);
  border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(22,25,28,.08);z-index:40}
.oc-panel .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;padding-block:20px}
.oc-panel a{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  text-decoration:none;border-bottom:1px solid var(--line-2);font-size:14.5px}
.oc-panel a:hover{color:var(--blue-d)}
.oc-panel .n{color:var(--ink-3);font-size:13.5px}

/* ------------------------------------------------------------------ hero */
/* Typographic, because the feed tops out at 500px and there is no brand
   photography to fill a full-bleed band (§4.2). The numbers are the picture. */
.hero{background:var(--ink);color:#f4f2ec;padding-block:64px 0;overflow:hidden}
.hero h1{font-size:clamp(34px,5vw,64px);line-height:1.06;letter-spacing:-.015em;max-width:18ch;color:#fff}
.hero .lede{max-width:56ch;margin:20px 0 26px;font-size:18.5px;color:#d9d5cb}
.hero-figures{display:grid;grid-template-columns:repeat(4,auto);gap:0 42px;margin:34px 0 0;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.18);justify-content:start}
.hero-figures div{min-width:0}
.hero-figures .v{font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,38px);
  color:#fff;line-height:1.1}
.hero-figures .k{font:600 11.5px/1.3 var(--text);letter-spacing:.16em;text-transform:uppercase;
  color:#a9b0b6;margin-top:6px}
.hero-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;margin-top:44px}
.hero-strip img{width:100%;background:var(--panel)}

/* ----------------------------------------------------------------- bands */
.band{padding-block:72px}
.band.tight{padding-block:48px}
.band.paper{background:var(--paper)}
.band.kraft{background:var(--kraft)}
.band.panel{background:var(--panel)}
.band.ink{background:var(--ink);color:#e9e6df}
.band.ink h2,.band.ink h3{color:#fff}
/* Тёмных поверхностей на сайте ДВЕ — .hero и .band.ink, — и перекраска мелкого
   текста должна перечислять обе. Пока здесь стоял только .band.ink, надзаголовок
   героя рисовался цветом под светлый грунт (--ink-2 на почти чёрном, 2.19:1) —
   это ловил замер контраста, а не глаз. Заводишь третью тёмную полосу — впиши
   её сюда же, иначе дефект вернётся тихо. */
.band.ink .tiny,.band.ink .eyebrow,.hero .tiny,.hero .eyebrow{color:#a9b0b6}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:30px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:16px}
.band.ink .band-head{border-bottom-color:rgba(255,255,255,.18)}
.band-head h2{font-size:clamp(26px,3vw,40px)}
.band-head p{max-width:60ch;margin:10px 0 0;color:var(--ink-2)}
.band.ink .band-head p{color:#c3c8cc}
.band-head .more{font:600 14.5px/1 var(--text);text-underline-offset:4px;flex:0 0 auto;color:var(--blue-d)}
/* Тёмный синий ссылки рассчитан на бумажный грунт; на чернильной полосе он
   давал 1.68:1. Светлый синий держит 10.2:1 и остаётся синим. */
.band.ink .band-head .more,.hero .band-head .more{color:#a8c8ee}

/* ------------------------------------------------------- department index */
/* A contents page, not a tile wall: seventeen shelves read faster as a dense
   index with counts than as seventeen photographs. */
.index{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.index a{background:var(--panel);padding:18px 18px 16px;text-decoration:none;display:flex;
  flex-direction:column;gap:6px;min-width:0;transition:background .15s var(--ease)}
.index a:hover{background:var(--kraft)}
.index .n{font-family:var(--display);font-weight:700;font-size:22px;color:var(--c,var(--ink))}
.index h3{font-size:16.5px;font-weight:600}
.index p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.45}

/* ----------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
/* Полка главной: колонки ЖЁСТКО 4/2/1 — четыре заполняет ряд нацело на всех
   трёх. Общая .grid считает колонки от ширины, под ровные ряды не годится. */
.grid.shelf-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid.shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid.shelf-grid{grid-template-columns:minmax(0,1fr)}}

.card{display:flex;flex-direction:column;min-width:0;background:var(--panel);
  border:1px solid var(--line)}
.card-media{display:block;position:relative;padding:16px;border-bottom:1px solid var(--line-2)}
.card-media img{margin:0 auto}
.card:hover{border-color:var(--ink-3)}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}
.card-dept{margin:0;font:700 11px/1 var(--text);letter-spacing:.14em;text-transform:uppercase}
.card-dept a{color:var(--c,var(--blue-d));text-decoration:none}
.card-dept a:hover{text-decoration:underline}
.card-name{font-size:16px;line-height:1.32;font-weight:600}
.card-name a{text-decoration:none}
.card-name a:hover{color:var(--blue-d)}
.card-spec{margin:0;font-size:13.5px;color:var(--ink-2)}
.card-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap}
.price{font-family:var(--display);font-size:19px;font-weight:700}
.per{font-size:12.5px;color:var(--ink-2)}
.count-chip{position:absolute;left:12px;top:12px;background:var(--rust);color:#fff;
  font:700 12px/1 var(--text);letter-spacing:.04em;padding:6px 9px}
.count-chip .u{font-weight:600;opacity:.85}

/* rail */
.rail-outer{position:relative}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:22px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:4px;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start;min-width:0}
.rail-foot{display:flex;align-items:center;gap:18px;margin-top:22px}
.rail-bar{flex:1 1 0;min-width:0;height:2px;background:var(--line);position:relative}
.rail-bar span{position:absolute;left:0;top:0;height:2px;background:var(--ink);width:25%;
  transition:left .25s var(--ease),width .25s var(--ease)}
.rail-btn{width:40px;height:40px;border:1px solid var(--line);background:var(--panel);
  color:inherit;cursor:pointer;display:grid;place-items:center}
.rail-btn:hover{border-color:var(--ink-3)}
.rail-btn svg{width:15px;height:15px}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 14.5px/1.1 var(--text);letter-spacing:.02em;text-decoration:none;
  padding:14px 26px;border:2px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-sm{font-size:13px;padding:10px 16px}
.btn-wide{width:100%}
/* The wording is a picture (owner, 2026-08-13), scaled as a fraction of the
   button's own font-size so .btn-sm shrinks it without a second rule. */
.buy-label{height:calc(1em * 0.8966);width:auto;max-width:none}
.buy-label.dark{display:none}
.btn-ghost .buy-label.light{display:none}
.btn-ghost .buy-label.dark{display:block}
.btn-ghost:hover .buy-label.light{display:block}
.btn-ghost:hover .buy-label.dark{display:none}
img.buy-label{background:none!important}

/* ---------------------------------------------------------------- crumbs */
.crumbs{padding:16px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;
  font-size:13px;color:var(--ink-2)}
.crumbs li+li::before{content:"/";margin-right:7px;color:var(--ink-3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* --------------------------------------------------------------- ratings */
/* Styled BEFORE the flag flips: starsHtml is gated by DATA.ratings and the
   collection is at 609 of 1043 as this is written, so the enable day is
   close. Without these rules that day would ship browser-default glyphs, the
   same class of defect as the 21 unstyled blocks on the sister site. The
   fractional star is an OVERLAY of two identical U+2605 rows, never the
   half-star glyph: U+2BE8 renders as tofu on this machine. */
.oc-rating{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);
  flex-wrap:wrap;min-width:0;max-width:100%}
.oc-rating.is-small{font-size:12.5px}
.oc-rating-stars{position:relative;display:inline-block;white-space:nowrap;line-height:1}
/* Deliberately quiet and exempt from the contrast guard by class: the value is
   printed as text beside the scale. Above 2.4:1 so five unfilled stars never
   read as five full ones (the bosmarlin finding). */
/* ---- customer reviews (styled BEFORE DATA.reviews flips, the same rule as
   the stars above: an unstyled flip ships browser-default soup) */
.rev-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
.rev{border:1px solid var(--line);background:var(--panel);padding:16px 18px}
.rev header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rev-stars{color:var(--rust);letter-spacing:2px;font-size:14px;white-space:nowrap}
.review-title{font-size:15.5px;margin:0}
.rev-quote{margin:0 0 10px;padding:0;border:0;background:none}
.rev-quote p{margin:0;font-size:14.5px;line-height:1.6}
.rev footer{color:var(--ink-2)}
.oc-stars-off{color:#c2bcae;display:block}
.oc-stars-on{color:var(--rust);position:absolute;left:0;top:0;overflow:hidden;display:block}
.oc-rating-v{font-family:var(--display);font-weight:700;color:var(--ink)}
.oc-rating-n::before{content:"("}
.oc-rating-n::after{content:")"}

/* --------------------------------------------------------------- product */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;
  padding-block:28px 16px;align-items:start}
.pdp>*{min-width:0}
.pdp-stage{position:sticky;top:18px}
.pdp-photo{border:1px solid var(--line);background:var(--panel);padding:24px;
  display:grid;place-items:center;min-height:300px}
.strip{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.strip button{flex:0 0 auto;width:68px;padding:4px;border:1px solid var(--line);
  background:var(--panel);cursor:pointer}
.strip button[aria-current="true"]{border-color:var(--ink)}
.pdp-col h1{font-size:clamp(24px,2.8vw,36px);margin-bottom:12px;line-height:1.2}
.pdp-price{display:flex;align-items:baseline;gap:14px;margin:0 0 18px;flex-wrap:wrap}
.pdp-price .price{font-size:30px}
.pdp-lede{font-size:16.5px;color:var(--ink-2);max-width:62ch}
.pdp-rule{border:0;border-top:1px solid var(--line);margin:22px 0}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0 0 14px;
  padding:0;list-style:none}
.facts li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line-2);min-width:0}
.facts .k{color:var(--ink-2);font-size:14px}
.facts .v{font-weight:700;text-align:right;font-size:14.5px}
.bullets{margin:0;padding-left:19px}
.bullets li{margin-bottom:7px}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 4px;text-align:center}
.values div{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;
  font:600 12px/1.35 var(--text);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.values svg{width:26px;height:26px;color:var(--blue)}
details.acc{border-top:1px solid var(--line)}
details.acc:last-of-type{border-bottom:1px solid var(--line)}
details.acc summary{list-style:none;cursor:pointer;padding:17px 0;font-family:var(--display);
  font-weight:600;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:12px}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"";width:10px;height:10px;flex:0 0 auto;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease)}
details.acc[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
details.acc .acc-body{padding-bottom:20px}

/* ------------------------------------------------------------ department */
.dept-bar{background:var(--panel);border:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:18px;padding:15px 20px;
  margin-bottom:28px;flex-wrap:wrap}
.dept-bar h1{font-size:24px}
.dept-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.dept-tools select{font:inherit;padding:7px 9px;border:1px solid var(--line);background:var(--panel);
  color:inherit;max-width:100%}

/* --------------------------------------------------------------- gallery */
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.gallery a{display:block;border:1px solid var(--line);background:var(--panel);padding:8px}
dialog#lightbox{border:1px solid var(--line);padding:14px;background:var(--panel);
  max-width:min(92vw,860px)}
dialog#lightbox::backdrop{background:rgba(22,25,28,.76)}

/* -------------------------------------------------------------- editorial */
.prose{max-width:72ch;padding-block:24px 70px}

/* Document pages (the small print, materials, sources). A 72ch column inside a
   1340px grid left the right half of the screen empty, which is the
   half-and-half block the checklist forbids. Two things fix it together: the
   grid itself is narrower here, so the empty space becomes a margin on both
   sides rather than a hole on one; and inside it only the READING elements
   keep the measure, so tables and figures use the full width of the column.
   The breadcrumb sits outside <main>, so it is narrowed by the same rule and
   cannot drift away from the heading under it. */
body.is-doc > .wrap,body.is-doc main > .wrap{max-width:1060px}
body.is-doc .prose{max-width:none}
body.is-doc .prose>p,body.is-doc .prose>ul,body.is-doc .prose>ol,
body.is-doc .prose>h1,body.is-doc .prose>h2,body.is-doc .prose>h3,
body.is-doc .prose>blockquote,body.is-doc .prose>.note{max-width:72ch}
.prose>h1:first-child{margin-bottom:16px}
.prose h2{font-size:clamp(23px,2.4vw,32px);margin:36px 0 12px}
.prose h3{font-size:20px;margin:26px 0 10px}
.prose ul,.prose ol{padding-left:20px}
/* A run of paragraphs each opening with a bold lead-in is a list set as prose,
   and it reads as a wall of text (§4 of the checklist). */
.lead-list{list-style:none;padding-left:0;margin:18px 0;display:grid;gap:12px}
.lead-list li{padding-left:16px;border-left:3px solid var(--rust);margin:0}
.prose li{margin-bottom:8px}
.prose figure{margin:26px 0}
.prose figure img{border:1px solid var(--line);background:var(--panel);padding:10px;margin:0 auto}
.prose figcaption{margin-top:8px;font-size:13.5px;color:var(--ink-2)}
blockquote.q{margin:24px 0;padding:2px 0 2px 20px;border-left:3px solid var(--rust);max-width:62ch}
blockquote.q p{font-family:var(--display);font-size:19px;line-height:1.45;margin:0 0 8px;font-weight:500}
blockquote.q cite{font-style:normal;font-size:13.5px;color:var(--ink-2)}
blockquote.q cite::before{content:"— "}
.note{background:var(--kraft);border-left:3px solid var(--blue);padding:16px 20px;margin:24px 0}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

/* Brand story rows (§9.6). Half-and-half with the text centred left a hole of
   300-400px beside every picture: three paragraphs are shorter than a 500px
   square, and centring puts the emptiness above AND below the words. The text
   column is the wide one, the picture is capped well under its own file
   (500px, never enlarged, §4.2), and both sit on the top edge, so whatever
   height is left over falls at the bottom of the row instead of through it. */
/* Both columns are sized to their content and pushed to the left edge. Letting
   the text take a whole half and capping its measure separately is what opened
   a second hole in the middle of the row: the words stopped at 66ch and the
   picture stayed pinned to the right margin. */
.story-row{display:grid;grid-template-columns:minmax(0,62ch) minmax(0,290px);
  justify-content:start;gap:40px;align-items:start;margin-bottom:38px}
.story-row h3{font-size:clamp(20px,2.2vw,27px);margin-bottom:10px}
.story-row figure{margin:0}
.story-row figure img{width:100%;max-width:290px;height:auto}
.story-row figcaption{margin-top:8px}
@media (max-width:760px){
  /* Picture UNDER its own paragraphs, never above them: a reversed row breaks
     the caption away from the text it belongs to. */
  .story-row{grid-template-columns:1fr;gap:16px}
  .story-row figure img{max-width:100%}
}
/* Цифровая полоса, сравнение и FAQ (задача 18.08). Аккордеон, потому что семь
   развёрнутых ответов — стена текста, а свёрнутый список читается как оглавление. */
.trust{background:var(--paper);border-block:1px solid var(--line)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:26px 44px;justify-content:center;padding-block:18px}
.trust .num{display:block;font-size:24px;line-height:1.1;font-family:var(--display)}
.trust span{font-size:13.5px;color:var(--ink-2)}
.faq{display:grid;gap:10px}
.faq-item{border:1px solid var(--line);background:var(--panel)}
.faq-item summary{cursor:pointer;padding:14px 18px;list-style:none;display:flex;align-items:center;gap:10px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";margin-left:auto;font-weight:700;color:var(--ink-2)}
.faq-item[open] summary::after{content:"–"}
.faq-item summary h3{font-size:16.5px;margin:0}
.faq-a{padding:0 18px 16px}
.faq-a p{margin:0;font-size:15px;line-height:1.65}
.rt-scroll{overflow-x:auto;margin:18px 0}
.rt-scroll .rt{margin:0}
.rt{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px}
.rt th,.rt td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2)}
.rt th{font:700 12px/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid var(--line);background:var(--kraft)}
.rt td.n,.rt th.n{text-align:right;font-variant-numeric:tabular-nums}
.rt tr:nth-child(even) td{background:rgba(235,230,218,.35)}

/* article furniture */
.article-head{background:var(--kraft);border-bottom:1px solid var(--line);padding-block:44px 36px}
.article-head h1{font-size:clamp(28px,4vw,48px);max-width:22ch;line-height:1.12}
.article-head .meta{margin-top:14px;font-size:14px;color:var(--ink-2)}
.article-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;padding-block:34px}
.article-body>*{min-width:0}
.toc{position:sticky;top:18px;border:1px solid var(--line);background:var(--panel);padding:16px 18px}
.toc h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--text);
  color:var(--ink-2);margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0;font-size:14px}
.toc li{margin-bottom:8px;line-height:1.4}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}
.inset{border:1px solid var(--line);background:var(--panel);padding:16px;margin:26px 0;
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center}
.inset img{margin:0}
.inset h3{font-size:16.5px;margin-bottom:4px}
.inset p{margin:0 0 8px;font-size:14px;color:var(--ink-2)}
.inset .price{font-size:17px}
.card-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ---------------------------------------------------------------- footer */
.oc-foot{background:var(--ink);color:#cfd3d6}
.oc-foot .wrap{padding-block:52px 26px}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.oc-foot h3{font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin-bottom:14px;font-family:var(--text)}
.oc-foot p{color:#aeb4b8;font-size:14.5px}
.foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-list a{font-size:14.5px;text-decoration:none;color:#cfd3d6}
.foot-list a:hover{color:#fff;text-decoration:underline}
.oc-foot .wordmark{color:#fff;margin-bottom:12px}
.oc-foot .wordmark small{color:#aeb4b8}
.soc{display:flex;gap:12px;margin-top:20px}
.soc a{width:34px;height:34px;border:1px solid rgba(255,255,255,.28);display:grid;
  place-items:center;color:#fff}
.soc a:hover{background:rgba(255,255,255,.12)}
.soc svg{width:17px;height:17px}
.foot-bot{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.disclosure{font-size:13px;color:#9aa1a6;margin:0;max-width:76ch}
.legal{display:flex;flex-wrap:wrap;gap:16px;font-size:13px}
.legal a{color:#bfc4c8;text-decoration:none}
.legal a:hover{color:#fff;text-decoration:underline}

.center-page{text-align:center;padding-block:96px}
.center-page h1{font-size:clamp(32px,5vw,58px);margin-bottom:12px}

@media (max-width:1100px){
  :root{--gut:30px}
  .grid,.index{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .foot-top{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:minmax(0,1fr);gap:30px}
  .pdp-stage{position:static}
  .article-body{grid-template-columns:minmax(0,1fr)}
  .toc{position:static}
  .oc-panel .wrap{grid-template-columns:repeat(3,1fr)}
  .hero-figures{grid-template-columns:repeat(2,auto);gap:22px 42px}
}
@media (max-width:820px){
  body{font-size:16px}
  .oc-head .wrap{flex-wrap:wrap;min-height:0;padding-block:12px;gap:10px}
  .oc-nav{flex:1 1 100%;justify-content:flex-start;gap:16px;flex-wrap:wrap}
  .band{padding-block:52px}
  .grid,.index,.gallery,.cols2,.card-list,.values{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:1fr}
  .inset{grid-template-columns:96px minmax(0,1fr)}
  .hero-strip{grid-auto-columns:minmax(0,1fr)}
}
/* Two cards to a row on a 320px screen leaves 129px inside a card, and the buy
   button with its drawn wording is 132px: the button stood outside its own
   card. Found by the browser audit only after the sweep was extended below
   390. The button fills the card and loses its side padding rather than
   sticking out, and the wording is allowed to scale with it. */
@media (max-width:360px){
  .card .btn-sm{width:100%;padding-inline:6px;justify-content:center}
  .card .buy-label{max-width:100%}
}
@media (max-width:560px){
  :root{--gut:18px}
  .oc-topbar .wrap span:not(:first-child){display:none}
  .grid,.index,.gallery{grid-template-columns:repeat(2,1fr)}
  .card-list,.cols2{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hero-strip{grid-auto-columns:minmax(0,1fr);grid-template-columns:repeat(4,1fr);grid-auto-flow:row}
  .rt thead{display:none}
  .rt,.rt tbody,.rt tr,.rt td{display:block;width:100%}
  .rt tr{border:1px solid var(--line);margin-bottom:10px;padding:4px 10px;background:var(--panel)}
  .rt td{border:0;display:flex;justify-content:space-between;gap:12px;padding:7px 0}
  .rt td::before{content:attr(data-label);color:var(--ink-2);font-size:13px}
  .rt tr:nth-child(even) td{background:transparent}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}