/* ==========================================================================
   Tanura · Ürün Kataloğu 2026 · "Adım adım" — print design system
   Page = 210 × 210 mm; all geometry in mm / pt, so screen = print.
   Brand: Tanura kurumsal kimlik kiti (Ana #202D64, İkincil #2A3A80, Aksan #7B8DB8, Urbanist) and the packaging itself:
   the navy + grey number tiles, the "SKIN CARE" band, the outlined logo box. The book's light is first light (Tanura =
   gün doğumu), carried by one warm accent, used sparingly.
   ========================================================================== */
:root {
  --navy: #202D64;
  --cover: #13216A;          /* the brand's own cover blue (Tanura catalogue 2026, protocol book) */
  --navy-2: #2A3A80;
  --navy-d: #161F48;
  --peri: #7B8DB8;
  --peri-l: #CBD2E4;
  --mist: #E8ECF2;
  --mist-2: #F1F3F7;
  --paper: #F8F8F6;
  --stone: #EEEAE3;
  --ink: #15192B;
  --text: #393E52;
  --mute: #7D8296;
  --line: #D5D8DF;     /* navy at 16 % on paper, opaque: a translucent stroke leaves PDF stroke alpha set and Poppler fills later gradients with it */
  --line-2: #B3B7C7;   /* navy at 32 % on paper */
  --g1: #A3A5AB;
  --g2: #6D6F75;
  --dawn: #EBC08B;
  --dawn-l: #F7E6CF;
  --dawn-d: #B9834C;
  --c4: #111215;
  --exo: #B07A60;
  --exo-l: #F4ECE5;
  --spirulina: #5F9C7B;
  --bilberry: #5E4F96;
  --dragon: #C3364F;
  --f: 'Urbanist', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- page frame ---------- */
.page {
  position: relative; width: 210mm; height: 210mm; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: var(--f); font-size: 8.2pt; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-kerning: normal; font-variant-ligatures: common-ligatures; font-variant-numeric: lining-nums;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.page * { box-sizing: border-box; }
:where(.page) :where(p, h1, h2, h3, h4, h5, ol, ul, dl, dd, dt, figure, blockquote, table) { margin: 0; padding: 0; }
:where(.page) :where(ol, ul) { list-style: none; }
:where(.page) :where(a) { color: inherit; text-decoration: none; cursor: pointer; }
:where(.page) :where(img) { display: block; }
.abs { position: absolute; }
.bleed { position: absolute; inset: -3mm; }
.bg-navy { background: var(--navy); color: #fff; }
.bg-deep { background: var(--navy-d); color: #fff; }
.bg-mist { background: var(--mist); }
.bg-stone { background: var(--stone); }
.bg-white { background: #fff; }
.bg-c4 { background: var(--c4); color: #fff; }
.bg-exo { background: var(--exo-l); }
.page.dark { color: #fff; }

/* images */
.full-img { position: absolute; inset: -3mm; overflow: hidden; background: var(--mist); }
.full-img img, .img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-img { position: absolute; top: -3mm; height: 216mm; width: 426mm; overflow: hidden; background: var(--mist); }
.sp-img.left { left: -3mm; }
.sp-img.right { left: -213mm; }
.sp-img img { width: 100%; height: 100%; object-fit: cover; }
.img { position: absolute; overflow: hidden; background: var(--mist); }
.img.bleed-l { margin-left: -3mm; }
.pack { position: absolute; z-index: 3; }
.cshadow { position: absolute; z-index: 2; background: url(../img/fx/shadow.png) center / 100% 100% no-repeat; opacity: var(--o, .3); }
.shade-l { position: absolute; inset: -3mm; background: linear-gradient(90deg, rgba(10, 14, 34, .55), rgba(10, 14, 34, 0) 58%); }
.shade-b { position: absolute; inset: -3mm; background: linear-gradient(0deg, rgba(10, 14, 34, .58), rgba(10, 14, 34, 0) 48%); }
.shade-t { position: absolute; inset: -3mm; background: linear-gradient(180deg, rgba(10, 14, 34, .42), rgba(10, 14, 34, 0) 40%); }

/* ---------- brand devices ---------- */
/* number tiles — exactly the pack's pair: navy step + grey variant */
.tiles { display: inline-flex; gap: 0; --t: 7mm; vertical-align: middle; flex: none; }
.tiles i { width: var(--t); height: var(--t); display: grid; place-items: center; color: #fff; font: 300 calc(var(--t) * .78)/1 var(--f); font-style: normal; letter-spacing: -.02em; }
.tiles i:first-child { background: linear-gradient(140deg, #3A4A94, #1F2B65 70%); }
.tiles i:last-child { background: linear-gradient(140deg, #A6A8AE, #6C6E74 80%); }
.tiles.one i:last-child { display: none; }
.tiles.xs { --t: 3.6mm; } .tiles.s { --t: 5.2mm; } .tiles.m { --t: 9mm; } .tiles.l { --t: 16mm; } .tiles.xl { --t: 34mm; } .tiles.xxl { --t: 52mm; }
.tile { display: inline-grid; place-items: center; width: var(--t, 7mm); height: var(--t, 7mm); background: linear-gradient(140deg, #3A4A94, #1F2B65 70%); color: #fff; font: 300 calc(var(--t, 7mm) * .78)/1 var(--f); }
.tile.grey { background: linear-gradient(140deg, #A6A8AE, #6C6E74 80%); }
.tile.outline { background: none; color: var(--navy); box-shadow: inset 0 0 0 .35mm var(--navy); }
.tile.red, .tiles.red i:first-child { background: linear-gradient(140deg, #D84C64, #A92742 80%); }   /* step 4 on the number page (review 2026-10-21) */
x-en { display: contents; }   /* English words in the Turkish book (capitals): no box of their own */
x-en.raw { text-transform: none !important; }   /* web addresses and handles keep their case inside upper-cased lines */
.approach p + .bullets, .approach .bullets + p { margin-top: 2.2mm; }
.bullets { list-style: none; margin: 0; padding: 0; }
.bullets li { position: relative; padding-left: 4mm; }
.bullets li + li { margin-top: .7mm; }
.bullets li::before { content: ''; position: absolute; left: 0; top: .62em; width: 1.25mm; height: 1.25mm; background: var(--navy); }
.vr { width: .3mm; background: var(--line-2); }

/* the "SKIN CARE" band: a hairline with a dark tab — used as the book's eyebrow */
.band { display: flex; align-items: center; gap: 0; font: 700 5.7pt/1 var(--f); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.band::before { content: ''; width: 6mm; height: .35mm; background: var(--g2); flex: none; }
.band span { background: linear-gradient(180deg, #9EA0A6, #7C7E84); color: #111; padding: 1.15mm 2.4mm 1mm; }
.band::after { content: ''; flex: 1; height: .35mm; background: var(--g2); min-width: 4mm; }
.band.short::after { flex: none; width: 6mm; }
.band.light::before, .band.light::after { background: rgba(255, 255, 255, .55); }
.band.light span { background: rgba(255, 255, 255, .88); color: var(--navy); }
.band.navy span { background: var(--navy); color: #fff; }
.band.navy::before, .band.navy::after { background: var(--navy); }
.band.none::before, .band.none::after { display: none; }

/* the outlined logo box */
.frame { border: .5mm solid currentColor; padding: 1.6mm 2.6mm; display: inline-block; }
.logo { display: block; height: auto; }

/* first light: a warm ray */
.ray { position: absolute; height: .5mm; background: linear-gradient(90deg, rgba(235, 192, 139, 0), var(--dawn) 40%, rgba(235, 192, 139, 0)); transform-origin: left center; }
.glow { position: absolute; background: url(../img/fx/glow-warm.png) center / 100% 100% no-repeat; }

/* ---------- typography ---------- */
.kicker { font: 600 6pt/1.2 var(--f); letter-spacing: .2em; text-transform: uppercase; color: var(--navy); }
.kicker.light { color: rgba(255, 255, 255, .86); }
.kicker.mute { color: var(--mute); }
.d0 { font: 300 76pt/.9 var(--f); letter-spacing: -.045em; }
.d1 { font: 300 52pt/.94 var(--f); letter-spacing: -.04em; }
.d2 { font: 300 36pt/1 var(--f); letter-spacing: -.032em; }
.d3 { font: 300 27pt/1.04 var(--f); letter-spacing: -.026em; }
.h2 { font: 400 20pt/1.1 var(--f); letter-spacing: -.02em; }
.h3 { font: 500 14pt/1.15 var(--f); letter-spacing: -.012em; }
.h4 { font: 600 9.6pt/1.25 var(--f); letter-spacing: -.004em; }
.lead { font: 300 11.6pt/1.4 var(--f); letter-spacing: -.006em; color: var(--ink); text-wrap: pretty; }
.lead.s { font-size: 10.2pt; }
.body { font-size: 8.2pt; line-height: 1.52; color: var(--text); text-wrap: pretty; }
.body + .body { margin-top: 2.2mm; }
.small { font-size: 7pt; line-height: 1.45; color: var(--text); }
.tiny { font-size: 6pt; line-height: 1.4; color: var(--mute); }
.light-t { color: #fff; }
.light-t .body, .light-t .small, .light-t .lead { color: rgba(255, 255, 255, .88); }
.navy-t { color: var(--navy); }
.mute-t { color: var(--mute); }
.balance { text-wrap: balance; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.dot-sep::before { content: '·'; margin: 0 1.2mm; color: var(--mute); }

/* AI credit beside every generated picture */

/* ---------- product block ---------- */
.pr { position: absolute; z-index: 5; }
.pr-top { display: flex; align-items: center; gap: 2.2mm; margin-bottom: 1.4mm; }
.pr-name { font: 600 12pt/1.12 var(--f); letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.pr.l .pr-name { font: 500 19pt/1.04 var(--f); letter-spacing: -.024em; }
.pr.m .pr-name { font: 600 13.6pt/1.1 var(--f); letter-spacing: -.016em; }
.pr.s .pr-name { font: 600 10pt/1.15 var(--f); }
.pr.xs .pr-name { font: 600 8.4pt/1.18 var(--f); letter-spacing: 0; }
.pr-sub { font: 400 7.6pt/1.3 var(--f); color: var(--mute); margin-top: .9mm; }
.pr.l .pr-sub { font-size: 9pt; margin-top: 1.4mm; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 1mm 1.2mm; margin-top: 2.2mm; align-items: center; }
.chip { font: 600 5.9pt/1 var(--f); letter-spacing: .06em; padding: 1.05mm 1.8mm .95mm; border: .25mm solid var(--line-2); color: var(--navy); white-space: nowrap; }
.chip.size { background: var(--navy); border-color: var(--navy); color: #fff; letter-spacing: .03em; }
.chip.kabin { background: none; }
.chip.ev { background: var(--mist); border-color: var(--mist); }
.chip.ph { border-style: dashed; }
.chip.new { background: var(--dawn); border-color: var(--dawn); color: var(--ink); }
.pr-txt { font-size: 8pt; line-height: 1.5; color: var(--text); margin-top: 2.4mm; text-wrap: pretty; }
.pr.l .pr-txt { font: 300 10pt/1.45 var(--f); color: var(--ink); }
.pr.s .pr-txt, .pr.xs .pr-txt { font-size: 7.3pt; margin-top: 1.6mm; }
.pr-dl { margin-top: 2.4mm; display: grid; grid-template-columns: 21mm 1fr; gap: 1.2mm 2mm; font-size: 7.1pt; line-height: 1.42; color: var(--text); }
.pr-dl dt { font: 700 5.6pt/1.9 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--navy); }
.pr.s .pr-dl, .pr.xs .pr-dl { grid-template-columns: 1fr; gap: .4mm; }
.pr.s .pr-dl dd + dt, .pr.xs .pr-dl dd + dt { margin-top: 1mm; }
.pr-meta { margin-top: 2.2mm; font: 500 5.6pt/1.3 var(--f); letter-spacing: .06em; color: var(--mute); font-variant-numeric: tabular-nums; }
.pr-meta b { font-weight: 700; color: var(--navy); }
.dark .pr-name, .light-t .pr-name { color: #fff; }
.dark .pr-sub, .light-t .pr-sub, .dark .pr-meta, .light-t .pr-meta { color: rgba(255, 255, 255, .72); }
.dark .pr-txt, .dark .pr-dl, .light-t .pr-txt, .light-t .pr-dl { color: rgba(255, 255, 255, .88); }
.dark .pr-dl dt, .light-t .pr-dl dt { color: var(--dawn); }
.dark .chip, .light-t .chip { color: #fff; border-color: rgba(255, 255, 255, .45); }
.dark .chip.size, .light-t .chip.size { background: #fff; color: var(--ink); border-color: #fff; }
.dark .chip.ev, .light-t .chip.ev { background: rgba(255, 255, 255, .14); border-color: transparent; }

/* ---------- page furniture ---------- */
.folio { position: absolute; bottom: 8.2mm; z-index: 20; display: flex; align-items: baseline; gap: 2.4mm; font: 500 5.7pt/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.folio b { font: 700 7.6pt/1 var(--f); letter-spacing: .02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.page.left .folio { left: 13mm; }
.page.right .folio { right: 13mm; flex-direction: row-reverse; }
.folio.light, .folio.light b { color: rgba(255, 255, 255, .86); }
/* thumb index on the outer edge: a step tile, or a word, by section — click goes to the contents */
.tab { position: absolute; z-index: 21; width: 10.5mm; display: grid; place-items: center; background: var(--navy); color: #fff; font: 300 12pt/1 var(--f); cursor: pointer; }
.page.right .tab { right: -3mm; padding-right: 3mm; }
.page.left .tab { left: -3mm; padding-left: 3mm; }
.tab.word { font: 700 5.2pt/1 var(--f); letter-spacing: .22em; text-transform: uppercase; }
.tab.word span { writing-mode: vertical-rl; transform: rotate(180deg); }
.page.right .tab.word span { transform: none; }
.tab.grey { background: linear-gradient(140deg, #A6A8AE, #6C6E74 80%); }
.tab.light { background: #fff; color: var(--navy); }

/* ---------- lists, rules, tables ---------- */
.rule { position: absolute; height: .3mm; background: var(--line-2); }
.rule.v { width: .3mm; height: auto; }
.hair { border-top: .25mm solid var(--line); }
.steps { counter-reset: s; }
.steps li { display: grid; grid-template-columns: 8mm 1fr; gap: 0 2.6mm; padding: 2.3mm 0; border-top: .25mm solid var(--line); }
.steps li:last-child { border-bottom: .25mm solid var(--line); }
.steps .n { font: 300 15pt/1 var(--f); color: var(--navy); letter-spacing: -.02em; }
.steps h5 { font: 700 7.8pt/1.3 var(--f); color: var(--ink); }
.steps p { font-size: 7.4pt; line-height: 1.45; color: var(--text); margin-top: .5mm; }
.dark .steps li, .light-t .steps li { border-color: rgba(255, 255, 255, .22); }
.dark .steps .n, .light-t .steps .n { color: var(--dawn); }
.dark .steps h5, .light-t .steps h5 { color: #fff; }
.dark .steps p, .light-t .steps p { color: rgba(255, 255, 255, .82); }

.tbl { width: 100%; border-collapse: collapse; font-size: 6.6pt; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tbl th { font: 700 5.4pt/1.2 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); text-align: left; padding: 0 1.6mm 1.6mm 0; border-bottom: .35mm solid var(--navy); white-space: nowrap; }
.tbl td { padding: 1.05mm 1.6mm 1.05mm 0; border-bottom: .2mm solid var(--line); vertical-align: top; color: var(--text); }
.tbl td.nm { color: var(--ink); font-weight: 600; }
.tbl tr.group td { font: 700 5.6pt/1.2 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--navy); padding-top: 2.6mm; border-bottom: .25mm solid var(--line-2); }

/* leader line from a label to a point on a photo — a hairline ending in a dot (no arrows) */
.leader { position: absolute; z-index: 8; pointer-events: none; overflow: visible; }
.leader line { stroke: currentColor; stroke-width: .25; }
.leader circle { fill: currentColor; }
.callout { position: absolute; z-index: 9; font: 600 6.4pt/1.3 var(--f); color: var(--navy); }
.callout small { display: block; font: 400 6.3pt/1.35 var(--f); color: var(--text); margin-top: .5mm; letter-spacing: 0; text-transform: none; }
.callout.light { color: #fff; } .callout.light small { color: rgba(255, 255, 255, .84); }
.callout.r { text-align: right; }

/* links inside the book */
[data-goto] { cursor: pointer; }
.pg { font: 700 6pt/1 var(--f); color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* ---------- print-only adjustments ----------
   Chromium writes blurred box-shadows into a PDF as soft-masked images, and Apple's PDF engine (Preview, iOS) paints those
   as flat boxes. In print every shadow is a drop-shadow on its own layer instead (blur = half the box-shadow blur). */
.lift { box-shadow: 0 1mm 4mm rgba(20, 26, 50, .14); }
html.print-mode .lift { box-shadow: none; filter: drop-shadow(0 1mm 2mm rgba(20, 26, 50, .14)); }

/* ---------- numbered pairs (1-1 / 1-2 …) ---------- */
.pr.pair .vars { display: grid; grid-template-columns: 1fr 1fr; gap: 0 5mm; margin-top: 3mm; }
.pr.pair .var { border-top: .35mm solid var(--navy); padding-top: 2.4mm; }
.pr.pair .var .pr-top { gap: 2.4mm; }
.var-skin { font: 700 6pt/1.25 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.var-act { font-size: 7pt; line-height: 1.42; color: var(--text); margin-top: 1.6mm; }
.var-act b { font: 700 5.6pt/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); margin-right: 1mm; }
.pair-note { font: 300 9.4pt/1.4 var(--f); color: var(--ink); margin-top: 2.6mm; }
.pr.pair .pr-txt { margin-top: 2mm; }
.pr.pair .pr-dl { margin-top: 3.4mm; }

/* ---------- the six-step strip ---------- */
.strip { display: inline-flex; gap: .6mm; --t: 4.2mm; vertical-align: middle; }
.strip i { width: var(--t); height: var(--t); display: grid; place-items: center; font: 500 calc(var(--t) * .58)/1 var(--f); font-style: normal; color: var(--g2); box-shadow: inset 0 0 0 .25mm var(--line-2); }
.strip i.on { background: linear-gradient(140deg, #3A4A94, #1F2B65 70%); color: #fff; box-shadow: none; }
.light-t .strip i, .dark .strip i { color: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 .25mm rgba(255, 255, 255, .4); }
.light-t .strip i.on, .dark .strip i.on { background: #fff; color: var(--navy); }

/* ---------- front matter ---------- */
.facts { display: grid; grid-template-columns: repeat(5, 1fr); border-top: .35mm solid var(--navy); }
.facts > div { padding: 3mm 3mm 0 0; }
.facts b { display: block; font: 300 20pt/1 var(--f); letter-spacing: -.03em; color: var(--navy); font-variant-numeric: lining-nums; }
.facts span { display: block; font: 600 5.8pt/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-top: 1.6mm; }

.toc-part { display: flex; align-items: baseline; gap: 2.4mm; padding-bottom: 2.4mm; border-bottom: .35mm solid var(--navy); margin-bottom: 1.6mm; }
.toc-part b { font: 300 15pt/1 var(--f); color: var(--navy); }
.toc-part span { font: 600 10.5pt/1 var(--f); color: var(--ink); }
.toc-part em { font: 400 7pt/1 var(--f); font-style: normal; color: var(--mute); margin-left: auto; }
.abs.toc-part { width: 96mm; }
.toc-step { display: grid; grid-template-columns: 7.4mm 52mm 1fr 10mm; align-items: center; gap: 0 5mm; padding: 2.3mm 0; border-bottom: .2mm solid var(--line); }
.toc-step .tile { font-size: 12pt; }
.toc-step .tile.outline { font-size: 8.4pt; letter-spacing: -.02em; }
.toc-step .nm { font: 600 9.6pt/1.15 var(--f); color: var(--ink); }
.toc-step .ds { font: 400 7.4pt/1.35 var(--f); color: var(--mute); }
.toc-step .pg { text-align: right; }
.toc-step.last { border-bottom: 0; margin-top: 1.2mm; }
.toc-classic { display: flex; gap: 3mm; align-items: baseline; padding: 2.4mm 3mm; border: .35mm solid var(--navy); font: 600 7.4pt/1 var(--f); color: var(--navy); }
.toc-col .toc-row, .toc-short a { display: flex; align-items: center; gap: 2.4mm; padding: 1.85mm 0; border-bottom: .2mm solid var(--line); font: 500 7.8pt/1.2 var(--f); color: var(--ink); }
.toc-row span, .toc-short a span { flex: 1; }
.toc-row .sw { width: 3.2mm; height: 3.2mm; flex: none; }
.toc-row .strip { flex: none; }
.toc-short > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 6mm; margin-top: 2mm; }

.matrix { border-top: .35mm solid var(--navy); }
.mrow { display: grid; grid-template-columns: 30mm 1fr; gap: 3mm; padding: 2.2mm 0; border-bottom: .2mm solid var(--line); align-items: start; }
.mstep { display: flex; align-items: center; gap: 2.2mm; font: 600 8pt/1.1 var(--f); color: var(--ink); }
.mvars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8mm 3mm; }
.mvar { display: grid; grid-template-columns: auto 1fr; gap: .2mm 1.8mm; align-items: center; }
.mvar b { font: 600 7pt/1.15 var(--f); color: var(--ink); }
.mvar span { grid-column: 2; font: 400 6.2pt/1.2 var(--f); color: var(--mute); }

/* ---------- part I ---------- */
.box-stone { background: var(--stone); }
.pr.row .pr-name { display: inline; }
.between { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 4mm; counter-reset: b; }
.between li { counter-increment: b; border-top: .35mm solid var(--g2); padding-top: 2mm; }
.between li::before { content: counter(b); font: 300 13pt/1 var(--f); color: var(--g2); display: block; margin-bottom: 1.4mm; }
.between b { display: block; font: 600 8pt/1.2 var(--f); color: var(--ink); }
.between span { display: block; font-size: 7pt; color: var(--text); margin-top: .6mm; }
.ritual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 4mm; }
.ritual li { border-top: .35mm solid var(--navy); padding-top: 2mm; }
.ritual b { font: 300 15pt/1 var(--f); color: var(--navy); }
.ritual h5 { font: 700 7.8pt/1.2 var(--f); margin-top: 1.4mm; }
.ritual p { font-size: 7.2pt; line-height: 1.45; color: var(--text); margin-top: .6mm; }
.paper-band { background: var(--paper); }
.classic { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 3.4mm; }
.classic li { border-top: .5mm solid var(--navy); padding-top: 2.4mm; min-height: 80mm; }
.classic li.dev { border-top-color: var(--g1); }
.classic li > b { font: 300 22pt/1 var(--f); letter-spacing: -.03em; color: var(--navy); }
.classic li.dev > b { color: var(--g1); }
.classic h5 { font: 700 8pt/1.2 var(--f); color: var(--ink); margin-top: 2mm; }
.classic p { font-size: 7pt; line-height: 1.45; color: var(--text); margin-top: .8mm; }
.cl-prods { display: flex; flex-wrap: wrap; gap: 1mm; margin-top: 2.4mm; }
.cl-prods > span:not(.tiles) { font: 600 5.6pt/1.25 var(--f); color: var(--navy); border: .2mm solid var(--line-2); padding: .6mm 1mm; }
.before { border: .35mm solid var(--navy); padding: 4mm 5mm; }
.before ul { columns: 2; column-gap: 8mm; margin-top: 2mm; }
.before li { font-size: 7.4pt; line-height: 1.45; color: var(--text); padding-left: 3mm; position: relative; break-inside: avoid; margin-bottom: 1mm; }
.before li::before { content: ''; position: absolute; left: 0; top: 1.6mm; width: 1.4mm; height: .35mm; background: var(--navy); }
.classic { position: relative; }
.classic li { position: relative; min-height: 70mm; }
.classic li .dot { position: absolute; left: 0; top: -1.6mm; width: 2.8mm; height: 2.8mm; border-radius: 50%; background: var(--navy); }
.classic li.dev .dot { background: var(--g1); }
.classic h5 { font-size: 9pt; }
.classic p { font-size: 7.6pt; }
.bridge { display: block; border-left: .8mm solid var(--dawn); padding: 1mm 0 1mm 5mm; }
.bridge .lead { margin-top: 1.6mm; }

/* ---------- part II ---------- */
.page.c4p { background: #18191D; }
.c4-bg { background: radial-gradient(120% 90% at 50% 30%, #26272C 0%, #18191D 60%, #121316 100%); }
.c4p .glow { background-image: url(../img/fx/glow-c4.png); }
.c4p .pr-meta b { color: #fff; }
.c4-line { height: .3mm; background: linear-gradient(90deg, rgba(235, 192, 139, .7), rgba(235, 192, 139, .35)); }
.c4-proto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm 4mm; }
.c4-proto li { border-top: .3mm solid rgba(255, 255, 255, .3); padding-top: 1.6mm; }
.c4-proto b { display: block; font: 600 7.6pt/1.2 var(--f); color: #fff; }
.c4-proto span { display: block; font-size: 6.8pt; line-height: 1.4; color: rgba(255, 255, 255, .72); margin-top: .6mm; }
.c4-safe { border-left: .6mm solid var(--dawn); padding-left: 3.4mm; }
.c4-safe .small { color: rgba(255, 255, 255, .8); margin-top: 1.4mm; }
.c4-n { font: 300 15pt/1 var(--f); color: var(--dawn); }
.flow > .pr { position: relative; left: auto; top: auto; width: auto; }
.flow > .pr + .pr { margin-top: 4.2mm; }
.fam-bar { height: 1.2mm; }
.fam-name b { display: block; font: 600 10pt/1.15 var(--f); color: var(--ink); }
.fam-name span { display: block; font-size: 7pt; color: var(--mute); margin-top: .4mm; }
.ritual.xs b { font-size: 12pt; }
.ritual.xs h5 { font-size: 7.4pt; margin-top: 1mm; }
.ritual.xs p { font-size: 6.7pt; line-height: 1.42; }
.ph-band { position: absolute; width: 426mm; height: 60mm; background: var(--stone); }
.ph-band::after { content: ''; position: absolute; left: 23mm; right: 21mm; top: 19mm; height: 1.6mm; background: linear-gradient(90deg, #C9774F, #E2B677 30%, #DCD3B8 55%, #B9C7D9 80%, #8EA3C8); }
.ph-tick { width: 8mm; text-align: center; font: 600 5.6pt/1 var(--f); color: var(--mute); }
.ph-mark { width: 0; height: 0; }
.ph-mark::before { content: ''; position: absolute; left: -.15mm; width: .3mm; background: var(--navy); }
.ph-mark b, .ph-mark span { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.ph-mark b { font: 700 7pt/1 var(--f); color: var(--navy); }
.ph-mark span { font: 500 5.8pt/1 var(--f); color: var(--text); }
.ph-mark.up::before { top: -6mm; height: 6mm; }
.ph-mark.up b { top: -13.6mm; } .ph-mark.up span { top: -9.6mm; }
.ph-mark.dn::before { top: 1.6mm; height: 8.4mm; }
.ph-mark.dn b { top: 11mm; } .ph-mark.dn span { top: 14.8mm; }
.ph-mark.dn2::before { top: 1.6mm; height: 15.4mm; }
.ph-mark.dn2 b { top: 18mm; } .ph-mark.dn2 span { top: 21.8mm; }
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 5mm; }
.tl > div { position: relative; }
.tl em { display: block; font: 300 17pt/1 var(--f); font-style: normal; letter-spacing: -.02em; color: var(--navy); height: 9mm; }
.tl i { display: block; position: relative; height: .35mm; background: var(--navy); margin: 0 -5mm 0 0; }
.tl > div:last-child i { margin-right: 0; }
.tl i::before { content: ''; position: absolute; left: 0; top: -1.2mm; width: 2.7mm; height: 2.7mm; border-radius: 50%; background: var(--dawn); }
.tl b { display: block; font: 600 6pt/1 var(--f); letter-spacing: .16em; color: var(--mute); margin-top: 4mm; }
.tl h5 { font: 700 8.2pt/1.2 var(--f); color: var(--ink); margin-top: 1.4mm; }
.tl p { font-size: 7.2pt; line-height: 1.45; color: var(--text); margin-top: .8mm; }
.carb-n { font: 300 13pt/1 var(--f); color: var(--navy); }
.carb-end { border-top: .35mm solid var(--navy); padding-top: 2mm; }
.carb-end .small { margin-top: 1.2mm; }
.pr.flat .pr-chips, .pr.flat .pr-meta { display: inline-flex; }
.proto-table > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4mm 4mm; margin-top: 2.4mm; }
.proto-table p { border-top: .3mm solid var(--navy); padding-top: 1.4mm; }
.proto-table b { display: block; font: 600 8pt/1.2 var(--f); color: var(--ink); }
.proto-table span { display: block; font-size: 6.8pt; color: var(--mute); margin-top: .4mm; }

/* ---------- part III ---------- */
.pr.in { position: relative; left: auto; top: auto; width: auto; z-index: auto; }
.flist { display: grid; align-items: start; }
.flist.rel { position: relative; }
.fcell { display: grid; gap: 4mm; align-items: start; }
.fcell.top { grid-template-columns: 1fr; gap: 3mm; }
.pkin { position: relative; display: flex; align-items: flex-end; justify-content: center; flex: none; }
.pkin img { position: relative; z-index: 1; display: block; }
.pkin i { position: absolute; z-index: 0; left: 14%; right: 14%; bottom: -1mm; height: 2.2mm; background: url(../img/fx/shadow.png) center / 100% 100% no-repeat; opacity: .22; }
.hb { z-index: 6; }
.hb h2 { margin-top: 1.8mm; text-wrap: balance; }
.hb > .body, .hb > .small, .hb > .lead, .hb > .tiny { margin-top: 3.4mm; color: var(--ink); }
.hb > .tiny { color: var(--mute); }
.hb .stripbox { margin-top: 4.2mm; }
.veil-top { background: linear-gradient(180deg, rgba(250, 248, 244, .82) 0%, rgba(250, 248, 244, .55) 22%, rgba(250, 248, 244, 0) 40%); z-index: 1; }
.stepchip { display: inline-flex; align-items: center; gap: 1.2mm; font: 600 5.6pt/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.stepchip i { width: 3.8mm; height: 3.8mm; display: grid; place-items: center; font: 400 6pt/1 var(--f); font-style: normal; letter-spacing: 0; color: #fff; background: linear-gradient(140deg, #3A4A94, #1F2B65 70%); }
.pr.xs .pr-top { margin-bottom: 1.6mm; }
.stripbox { display: flex; align-items: center; gap: 2.2mm; }
.stripbox span { font: 600 5.6pt/1 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.stripbox.light-t span { color: rgba(255, 255, 255, .8); }
.ev-legend { border-top: .35mm solid var(--navy); padding-top: 2.4mm; }
.ev-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2mm; margin: 2.6mm 0 2.4mm; }
.ev-steps span { display: grid; justify-items: start; gap: 1.2mm; }
.ev-steps em { font: 600 5.8pt/1.1 var(--f); font-style: normal; color: var(--ink); }
.lrows .lrow { display: grid; grid-template-columns: 18mm 48mm 1fr 42mm; gap: 0 5mm; align-items: start; border-top: .3mm solid var(--line); padding: 2.6mm 0; }
.lrows .lrow:first-child { border-top-color: var(--navy); }
.lrows.tight .lrow { padding: 1.6mm 0; }   /* p. 66: three-word skin chips (Russian) need the room, 2026-10-20 */
/* «™»: Urbanist draws it as two full-size letters (pages.js wraps it), so it is set small and raised like «®» */
.tm { font-size: .6em; line-height: 0; vertical-align: .62em; letter-spacing: .02em; }
.lrow .pr-name { font: 600 9.2pt/1.15 var(--f); margin-top: 1.4mm; }
.lrow .pr-txt { margin-top: 0; font-size: 7.4pt; }
.lrow .pr-dl { margin-top: 1.8mm; grid-template-columns: 1fr; gap: .4mm; font-size: 6.8pt; }
.lrow > div:last-child .pr-dl { margin-top: 0; }
.hero { display: grid; justify-items: start; gap: 5mm; }
.finder { border-collapse: collapse; font-size: 6.8pt; }
.finder th { font: 600 5.4pt/1.15 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-align: center; padding: 0 1mm 2mm; vertical-align: bottom; width: 17mm; }
.finder th:first-child { width: auto; }
.finder td { border-top: .2mm solid var(--line); padding: 1.5mm 1mm; text-align: center; vertical-align: middle; }
.finder tr { cursor: pointer; }
.finder td:first-child { text-align: left; }
.finder td b { font: 600 7.2pt/1.2 var(--f); color: var(--ink); }
.finder td small { display: block; font: 500 5.4pt/1.2 var(--f); letter-spacing: .06em; color: var(--mute); }
.finder td i { display: inline-block; width: 2.8mm; height: 2.8mm; border-radius: 50%; background: var(--navy); }
.finder td.pg { width: 10mm; font: 700 7pt/1 var(--f); color: var(--navy); }
.sunrules { border-top: .35mm solid var(--navy); padding-top: 2mm; }
.sunrules p:not(.kicker) { margin-top: 2mm; }
.sunrules b { display: block; font: 600 8pt/1.2 var(--f); color: var(--ink); }
.sunrules span { display: block; font-size: 6.8pt; line-height: 1.4; color: var(--text); }
.suntable { border-collapse: collapse; table-layout: fixed; }
.suntable th { vertical-align: top; text-align: left; padding: 0 1.6mm 2.4mm; }
.suntable th:first-child { width: 24mm; }
.suntable th .pkin { margin-bottom: 2.4mm; }
.suntable th b { display: block; font: 600 7.4pt/1.15 var(--f); color: var(--ink); }
.suntable th small { display: block; font: 400 6.2pt/1.25 var(--f); color: var(--mute); margin-top: .6mm; }
.suntable td { border-top: .25mm solid var(--line); padding: 2mm 1.6mm; font-size: 6.9pt; line-height: 1.35; color: var(--text); vertical-align: top; }
.suntable td:first-child { font: 600 5.6pt/1.3 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.suntable tbody tr:first-child td { border-top-color: var(--navy); }
.suntable td.cd { font-size: 5.8pt; color: var(--mute); font-variant-numeric: tabular-nums; }
.scrub { display: grid; grid-template-columns: 1fr; gap: 2.4mm; align-items: start; justify-items: start; }
.scrub > div > b { display: block; font: 600 7.6pt/1.2 var(--f); color: var(--ink); }   /* the scent name, not the code in .pr-meta */
.scrub .pr-chips { margin-top: 1mm; }
.scrub .pr-meta { margin-top: 1mm; }
.dn-label { font: 400 italic 11.5pt/1 var(--f); letter-spacing: .01em; color: var(--ink); }
.dn-label.night { color: var(--navy); }
.fgroups > .kicker { margin: 5mm 0 2.6mm; padding-top: 2mm; border-top: .3mm solid var(--navy); }
.fgroups > .kicker:first-child { margin-top: 0; }
/* ---------- ek ---------- */
.needs .nh, .needs .nr { display: grid; grid-template-columns: 36mm 1fr 1fr; gap: 0 6mm; }
.needs .nh span { font: 600 5.8pt/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding-bottom: 2mm; }
.needs .nr { border-top: .3mm solid var(--navy); padding: 2.4mm 0 3mm; }
.needs .nr b { font: 600 9pt/1.2 var(--f); color: var(--ink); }
.needs ul { list-style: none; }
.needs li { display: flex; align-items: baseline; gap: 2mm; font-size: 7.4pt; line-height: 1.5; color: var(--text); cursor: pointer; }
.needs li > span { flex: 1; display: inline-flex; align-items: center; gap: 1.4mm; }
.needs li em { font: 700 7pt/1 var(--f); font-style: normal; color: var(--navy); }
.needs ul.ev li > span::before { content: ''; width: 1.6mm; height: 1.6mm; box-shadow: inset 0 0 0 .25mm var(--navy); flex: none; }
.bridge-t { border-collapse: collapse; }
.bridge-t th { font: 600 5.6pt/1.2 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-align: left; padding: 0 1.4mm 2mm; vertical-align: bottom; }
.bridge-t td { border-top: .25mm solid var(--line); padding: 2.4mm 1.4mm; vertical-align: top; font-size: 6.6pt; line-height: 1.35; color: var(--text); }
.bridge-t td:first-child { width: 24mm; }
.bridge-t td:first-child span:not(.tile) { display: block; font: 600 6.8pt/1.2 var(--f); color: var(--ink); margin-top: 1mm; }   /* the step name; the number tile keeps its own style */
.bridge-t td.kab { width: 20mm; }
.bridge-t td.kab .tiles { margin: 0 .8mm .8mm 0; }
.bridge-t .cd { display: block; }
.bridge-t .cd + .cd { margin-top: .8mm; }
.bridge-t td i { font-style: normal; color: var(--line-2); }
.plan { border-collapse: collapse; }
.plan th { font: 600 5.6pt/1.2 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: left; padding: 0 1.6mm 2mm; }
.plan td { border-top: .2mm solid var(--line); padding: 1.7mm 1.6mm; font-size: 7pt; line-height: 1.25; color: var(--text); vertical-align: middle; }
.plan tr { cursor: pointer; }
.plan td b { font: 600 7.4pt/1.2 var(--f); color: var(--ink); }
.plan th.c1, .plan td.dur { width: 52mm; }
.plan td.dur { position: relative; }
.plan td.dur i { display: inline-block; height: 2.6mm; vertical-align: middle; background: linear-gradient(90deg, var(--navy), #7B8DB8); }
.plan td.dur span { font: 600 6.6pt/1 var(--f); color: var(--navy); margin-left: 1.6mm; vertical-align: middle; }
.plan td.winter { color: var(--navy); font-weight: 600; }
.plan .pg { width: 10mm; text-align: right; }
.plan td.pg { font: 700 7pt/1 var(--f); color: var(--navy); }   /* the number only; its column head stays like the others */
.faq { columns: 2; column-gap: 8mm; }
.faq > div { break-inside: avoid; border-top: .3mm solid var(--navy); padding: 2mm 0 3mm; }
.faq h5 { font: 600 8pt/1.25 var(--f); color: var(--ink); }
.faq p { font-size: 7pt; line-height: 1.45; color: var(--text); margin-top: 1mm; }
.guide > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8mm; margin-top: 2mm; }
.guide > div > div { display: grid; grid-template-columns: 24mm 1fr; gap: 3mm; align-items: center; border-top: .2mm solid var(--line); padding: 2mm 0; }
.guide p { font-size: 6.8pt; line-height: 1.4; color: var(--text); }
.ixcols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6mm; }
.ixr { display: grid; grid-template-columns: 12mm 1fr 12mm 17mm 5.5mm; gap: 0 1.4mm; align-items: center; border-top: .2mm solid var(--line); height: 8.15mm; font-size: 6.3pt; line-height: 1.15; color: var(--text); cursor: pointer; }
.ixr b { font: 700 6pt/1.2 var(--f); color: var(--ink); display: flex; align-items: center; gap: 1mm; }
.ixr b::before { content: ''; width: 1.5mm; height: 1.5mm; flex: none; box-shadow: inset 0 0 0 .25mm var(--navy); }
.ixr.kabin b::before { background: var(--navy); box-shadow: none; }
.ixr .nm { color: var(--ink); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ixr .sz, .ixr .bc { font-variant-numeric: tabular-nums; font-size: 5.7pt; }
.ixr .pg { text-align: right; font: 700 6.4pt/1 var(--f); color: var(--navy); }
.kunye { display: grid; grid-template-columns: 70mm 1fr; gap: 10mm; }
.kunye .kb p:not(.kicker) { margin-top: 2.6mm; }
.kunye b { display: block; font: 600 6pt/1.2 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.kunye .kb span { display: block; font-size: 7.4pt; line-height: 1.45; color: var(--ink); margin-top: .6mm; }
.kunye .kt p { font-size: 7.2pt; line-height: 1.5; color: var(--text); margin-top: 1.2mm; }
.kunye .kt p.kicker { margin-top: 4mm; }
.kunye .kt p.kicker:first-child { margin-top: 0; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm 10mm; }
.contact p { border-top: .3mm solid rgba(255, 255, 255, .35); padding-top: 2mm; }
.contact b { display: block; font: 600 6pt/1.2 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--dawn); }
.contact span { display: block; font-size: 8.4pt; line-height: 1.45; color: #fff; margin-top: .8mm; }
.back-veil { background: linear-gradient(180deg, rgba(14, 18, 40, 0) 45%, rgba(14, 18, 40, .55) 75%, rgba(14, 18, 40, .78) 100%); }

.pr.tight .pr-chips { margin-top: 1.4mm; }
.pr.tight .pr-txt { margin-top: 1.2mm; font-size: 7pt; }
.pr.tight .pr-meta { margin-top: 1.4mm; }
.fgroups .flist + .kicker { margin-top: 4mm; }

.suntable tr.desc td { font-size: 6.5pt; line-height: 1.4; }
.suntable tr.desc td:first-child { font-size: 5.6pt; }
.fcell.top .pkin { justify-content: flex-start; }
.retl { border-top: .35mm solid var(--navy); padding-top: 2mm; }
.retl .segs { display: grid; grid-template-columns: 20fr 10fr 14fr; gap: 0 1.2mm; margin-top: 2.4mm; }
.retl .segs i { display: block; height: 2.4mm; background: linear-gradient(90deg, #3A4A94, #1F2B65); }
.retl .segs .s0 i { background: repeating-linear-gradient(90deg, var(--navy) 0 2.2mm, transparent 2.2mm 3.6mm); }
.retl .segs .s2 i { background: var(--dawn); }
.retl .segs b { display: block; font: 600 7pt/1.2 var(--f); color: var(--ink); margin-top: 1.6mm; }
.retl .segs span { display: block; font-size: 6.6pt; line-height: 1.4; color: var(--text); margin-top: .4mm; }
.c4-after { border-top: .3mm solid rgba(235, 192, 139, .6); padding-top: 2mm; }
.c4-after > div { display: grid; grid-template-columns: 1fr 1fr 2fr 1.6fr; gap: 0 5mm; margin-top: 2mm; }
.c4-after b { display: block; font: 600 7.6pt/1.2 var(--f); color: #fff; }
.c4-after span { display: block; font-size: 6.8pt; line-height: 1.45; color: rgba(255, 255, 255, .78); margin-top: .6mm; }

/* the numbers: step (row) x product (column) */
.ngrid { display: grid; grid-template-columns: 31mm repeat(5, 1fr); border-top: .35mm solid var(--navy); }
.ngrid > div { border-bottom: .2mm solid var(--line); padding: 2.4mm 2.4mm 2.4mm 0; }
.ng-head { display: flex; align-items: center; gap: 2mm; padding: 2mm 2.4mm 2mm 0 !important; }
.ng-head em { font: 700 5.6pt/1.2 var(--f); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.ng-head .tile { font-size: 9pt; }
.ng-step { display: flex; align-items: center; gap: 2.4mm; }
.ng-step .tile { font-size: 12pt; }
.ng-step b { font: 600 8.2pt/1.15 var(--f); color: var(--ink); }
.ng-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 1mm; min-height: 12.4mm; }
.ng-cell b { font: 600 7.2pt/1.15 var(--f); color: var(--ink); }
.ng-cell .sk { font: 400 6.2pt/1.25 var(--f); color: var(--mute); }
.ng-cell.none .sk { font-style: italic; }

/* a stone box that grows with its content */
.flowbox { display: grid; grid-template-columns: 34mm 1fr; gap: 0 7mm; align-items: center; padding: 5mm 6mm; }
.flowbox .kicker { margin-bottom: 1.6mm; }

/* folio on a photograph: a small paper tag, so every page shows its number */
.folio.tag { background: rgba(248, 248, 246, .93); padding: 1.5mm 2.4mm; bottom: 6.7mm; }
.page.left .folio.tag { left: 10.6mm; }
.page.right .folio.tag { right: 10.6mm; }
.folio.light.tag { background: rgba(16, 18, 26, .55); }

/* p24 — the photo at its own 3:2 ratio (a full-width band cut the jars), one product beside it, three below */
.s5grid { left: -3mm; top: -3mm; width: 199mm; display: grid; grid-template-columns: 140mm 1fr; gap: 9mm 7mm; align-items: start; }
.s5grid > .img { position: relative; height: 94mm; }
.s5grid > .pr { margin-top: 20mm; }
.s5grid > .flist { grid-column: 1 / -1; margin-left: 17mm; grid-template-columns: repeat(3, 1fr); gap: 5mm 6mm; }

/* cover and back cover: the brand's own language - navy, the boxed logo, tracked capitals */
.cover-t, .cover-y, .cover-b, .back-l, .back-c, .back-e { text-align: center; color: #fff; text-transform: uppercase; }
.cover-t { font: 500 13pt/1 var(--f); letter-spacing: .62em; padding-left: .62em; }
.cover-y { font: 300 11pt/1 var(--f); letter-spacing: .62em; padding-left: .62em; color: #C9CCDA; }
.cover-b { font: 500 6.6pt/1 var(--f); letter-spacing: .48em; padding-left: .48em; color: #C9CCDA; }
.back-c { font: 600 7pt/1 var(--f); letter-spacing: .14em; }
.back-l { font: 400 7pt/1 var(--f); letter-spacing: .08em; text-transform: none; color: #DADCE6; }
.back-e { font: 400 5.6pt/1 var(--f); letter-spacing: .3em; color: #9EA3BF; }
.back-s { text-align: center; font: 400 5.8pt/1 var(--f); letter-spacing: .06em; color: #9EA3BF; }
.back-rule { border-top: .3mm solid #666F9E; }   /* white at 35 % on --cover, opaque: an rgba line leaves its alpha in the PDF state */

/* 28-29: the classic protocol as rows - number, name and note, the products as names (no tiles: the row has its number) */
.csteps { display: flex; flex-direction: column; }
.crow { display: grid; grid-template-columns: 14mm 56mm 1fr; column-gap: 4mm; border-top: .35mm solid var(--navy); padding: 2.4mm 0 2.8mm; }
.crow.dev { border-top-color: var(--line-2); }
.crow > b { font: 300 19pt/1 var(--f); letter-spacing: -.03em; color: var(--navy); }
.crow.dev > b { color: var(--g1); }
.crow h5 { font: 700 8.2pt/1.2 var(--f); color: var(--ink); }
.crow p { font-size: 7pt; line-height: 1.45; color: var(--text); margin-top: .7mm; }
.crow ul { list-style: none; margin: .4mm 0 0; padding: 0; }
.crow li { display: grid; grid-template-columns: 7mm auto 1fr; column-gap: 1.6mm; font: 400 7pt/1.55 var(--f); color: var(--ink); }
.crow li em { font-style: normal; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.crow li b { font-weight: 600; }
.crow li span { color: var(--mute); }
.crow li.amps { grid-template-columns: 7mm 1fr; }
.crow li.amps b { grid-column: 2; }
.crow li.amps span { grid-column: 2; }
.nw { white-space: nowrap; }

/* Arabic (viewer.js marks every mostly-Arabic element dir="rtl"): no tracking, which breaks the joins of Arabic letters,
   and the table headings set to the left in the other languages follow the text to the right */
.page [dir="rtl"], .page [dir="rtl"] * { letter-spacing: 0 !important; }
.page :is(.tbl th, .suntable th, .bridge-t th, .plan th, .finder td:first-child)[dir="rtl"] { text-align: right; }

/* the viewer's colours, faces and corners (katalog-motoru/viewer.css reads them; README there lists every one) */
:root {
  --ui-bg: #E9ECF2; --ui-bg-hi: #F5F6F9; --ui-bg-lo: #DCE1EA;
  --ui-ink: #202D64; --ui-ink-hover: #2A3A80; --ui-mute: #6E7590;
  --ui-card: rgba(255, 255, 255, .8); --ui-line: rgba(32, 45, 100, .12);
  --ui-shadow-rgb: 20, 28, 64; --ui-spine-rgb: 16, 22, 50;
  --ui-font: 'Urbanist', 'Helvetica Neue', Arial, sans-serif;
  --ui-title: 500 14px/1 'Urbanist', sans-serif; --ui-title-tracking: .02em;
  --ui-heading: 700 14.5px/1.15 'Urbanist', sans-serif;
  --ui-grid-heading: 600 18px/1 'Urbanist', sans-serif;
  --ui-btn-tracking: .02em; --ui-pos: 700 13px/1 'Urbanist', sans-serif;
  --ui-logo-h: 26px;
  --ui-menu-hover: #F1F3F8; --ui-mi: #202D64; --ui-mi-ink: #fff; --ui-mi2: #8C8E95; --ui-mi2-ink: #fff;
  --ui-r-btn: 3px; --ui-r-pill: 6px; --ui-r-menu: 8px; --ui-r-item: 6px;
}