@charset "utf-8";
/* site.css — lev4ig.ru v2 · «Приводка / In Register»
   A press proof sheet: three inks (TECH blue, MECH red, COMM yellow), a
   chamfered tile system, and a masonry stated openly as an ad waterfall.
   Load order: site.css (this file, halftone appended) -> motion.css.
   No @import, no external URL, no remote anything. */

/* ============================================================ 1. FONTS
   Latin and Cyrillic are split by unicode-range, so a Russian reader never
   downloads a latin file for prose. Martian Mono ships one variable file
   per subset covering 400–600. */

@font-face{font-family:'Fira Sans Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/fira-sans-condensed-700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/fira-sans-condensed-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fira Sans Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/fira-sans-condensed-800-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Fira Sans Condensed';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/fira-sans-condensed-800-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/golos-text-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/golos-text-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/martian-mono-var-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/martian-mono-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* =========================================================== 2. TOKENS
   Every colour is declared here as its LIGHT value. The dark block below
   only overrides. Nothing is ever defined for the first time in a media
   query, and no type on the page depends on a blend mode to be readable. */

:root{
  /* ground and surfaces */
  --ground:#DEDCD3;        /* cool press proofing stock */
  --tile:#E9E7DF;          /* a sheet laid on the sheet */
  --tile-2:#F2F0E9;        /* hover surface + the two full-bleed bands */
  --text:#1B1512;
  --tint:#5D5F57;          /* captions, ticks, mono tags — 4.71:1 on --ground */
  --knockout:#F5F4EF;      /* paper showing through — same in both themes */
  --knockout-soft:rgba(245,244,239,.92);
  --knockout-mute:rgba(245,244,239,.4);
  --rule:#B9B7AE;          /* structural only, never decoration */

  /* the three inks */
  --tech:#0F4C96;
  --mech:#C4211B;
  --comm:#E8C500;          /* pigment: identical in both themes, never type */
  --comm-text:#6E5C00;     /* the legible stand-in when COMM must carry type */
  --on-comm:#1B1512;       /* overprint black, for type sitting on a COMM bar */
  --halftone:rgba(27,21,18,.14);
  --focus:var(--mech);

  /* ink FIELDS (a whole tile flooded with one ink, or a bar carrying knockout
     type). The light values are the inks themselves; the dark values are the
     same inks printed on dark stock, deepened so knockout type keeps 4.5:1
     without ever touching --knockout. Fills only. */
  --field-tech:#0F4C96;
  --field-mech:#C4211B;

  /* the same two inks as TYPE. Light: the pigment is already legible on the
     page ground. Dark: lightened until a 9px label clears 7:1 on --tile.
     Never used as a fill — a fill uses --tech / --mech / --field-*. */
  --tech-text:#0F4C96;
  --mech-text:#C4211B;

  /* the SEAM tile's ghost word: 8% of --text on paper reads heavier when
     --text is near-white on dark stock, so the dark block pulls it back */
  --ghost-a:.08;

  /* type */
  --f-display:'Fira Sans Condensed','Fira Sans','Arial Narrow',sans-serif;
  --f-body:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-hero:clamp(56px,11.5vw,168px);
  --t-mega:clamp(72px,14vw,190px);
  --t-h2:clamp(21px,2.1vw,27px);
  --t-h3:18px;
  --t-quote:clamp(20px,2.4vw,30px);
  --t-lead:clamp(18px,2.1vw,25px);
  --t-body:17px;
  --t-small:13px;
  --t-cap:12px;
  --t-tag:10px;
  --t-tick:9px;
  --t-eyebrow:11px;

  /* layout */
  --pad:16px;              /* page margin */
  --tile-pad:16px;
  --chamfer:12px;
}

@media (prefers-color-scheme:dark){
  :root{
    --ground:#1B1512;      /* overprint black: what the three inks make */
    --tile:#241D19;
    --tile-2:#2C2420;
    --text:#F5F4EF;
    --tint:#9A9C93;
    --rule:#3A312C;
    --tech:#3D7BC8;
    --mech:#E4463D;
    --comm-text:#E8C500;
    --halftone:rgba(245,244,239,.12);
    --field-tech:#123F77;
    --field-mech:#A82D26;
    --tech-text:#7FAEE6;
    --mech-text:#F08D86;
    --ghost-a:.06;
  }
}

@media (min-width:600px){ :root{ --pad:20px; --tile-pad:20px } }
@media (min-width:900px){ :root{ --pad:24px } }
@media (min-width:1200px){ :root{ --pad:32px } }
@media (min-width:1600px){ :root{ --pad:40px } }
@media (max-width:899px){ :root{ --t-body:16px } }
@media (max-width:360px){ :root{ --pad:14px } }

/* ============================================================= 3. BASE */

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; overflow-x:clip }
body{
  margin:0;
  background:var(--ground);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.5;
  font-weight:400;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700}
button{font:inherit;color:inherit;margin:0}

/* Both languages are pre-rendered; CSS decides which one is printed. The
   rule is !important so no later display rule (including inside the inlined
   SVGs) can ever leave both languages overprinted. */
html[lang="ru"] [lang="en"],
html[lang="en"] [lang="ru"]{display:none !important}

.ma-defs{position:absolute;width:0;height:0;overflow:hidden}

.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ========================================================= 4. TYPOGRAPHY */

.h2{
  font-family:var(--f-display);font-weight:700;font-size:var(--t-h2);
  line-height:1.04;letter-spacing:.005em;text-transform:uppercase;
}
.h3{
  font-family:var(--f-display);font-weight:700;font-size:var(--t-h3);
  line-height:1.08;letter-spacing:.01em;text-transform:uppercase;
}
.lead{font-size:var(--t-lead);line-height:1.36;max-width:44ch}
.body{font-size:var(--t-body);line-height:1.5;max-width:46ch}
.body--wide{max-width:62ch}
.small{font-size:var(--t-small);line-height:1.45;max-width:46ch}
.cap{font-size:var(--t-cap);line-height:1.4;color:var(--tint);max-width:46ch}
.honesty{font-size:var(--t-cap);line-height:1.4;color:var(--tint)}
.tag{
  font-family:var(--f-mono);font-weight:500;font-size:var(--t-tag);
  line-height:1;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.tick{
  font-family:var(--f-mono);font-weight:400;font-size:var(--t-tick);
  line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
}
.eyebrow{
  font-family:var(--f-mono);font-weight:600;font-size:var(--t-eyebrow);
  line-height:1;letter-spacing:.10em;text-transform:uppercase;color:var(--tint);
}
.soft{color:var(--tint)}

/* ============================================================ 5. LAYOUT */

.wrap{
  width:100%;
  max-width:calc(1560px + var(--pad) * 2);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* the two full-bleed bands */
.band{position:relative;background:var(--tile-2)}
.band--hero{
  padding-block:56px 32px;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
}
.band--strip{padding-block:26px 30px;margin-top:var(--pad)}

/* registration crosses at the hero band's corners, trim marks at the
   control strip's — printer's marks, drawn structurally, never decoration */
/* .band .x, not .x: halftone.css sets position:relative on every direct
   child of an .atmo box, and it is appended after this file. */
.band .regmark,.band .trim{position:absolute;width:14px;height:14px;overflow:visible;z-index:2}
.regmark--tl,.trim--tl{top:12px;left:12px}
.regmark--tr,.trim--tr{top:12px;right:12px}
.regmark--bl,.trim--bl{bottom:12px;left:12px}
.regmark--br,.trim--br{bottom:12px;right:12px}
.trim--tr{transform:rotate(90deg)}
.trim--br{transform:rotate(180deg)}
.trim--bl{transform:rotate(270deg)}

/* hero -------------------------------------------------------------- */
.hero-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.hero-top .tag-fmt{color:var(--tint)}
/* The billboard holds 970:250 while the name still fits across it on one
   line. Below 600px that would print the signature at a 75px sliver, so the
   block swaps to a second, portrait plate — same three datasets, scaled to a
   970:560 field, name broken over two lines — and the cap height goes back up
   above the 56px floor instead of down to 40. Two authored viewBoxes, no JS:
   a viewBox cannot be changed from CSS, and stretching one would distort the
   wordmark. */
.reg-block{margin-block:20px 18px}
.reg-block svg{display:block;width:100%;height:auto}
.reg-block--narrow{display:none}
@media (max-width:599px){
  .reg-block--wide{display:none}
  .reg-block--narrow{display:block}
  /* the 970×250 lock does not hold on the portrait plate, so the format
     stops being printed rather than being printed wrongly */
  .band--hero .tag-fmt{display:none}
}
.hero-in .chips{margin-bottom:18px}

.chips{display:block}
.chips > [lang]{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--tint)}
/* the separator is the only thing carrying the field structure of a chip
   row, so it has to be seen: --rule measured 1.2:1 and read as absent */
.chips .sep{font-family:var(--f-mono);font-size:var(--t-tag);line-height:1;color:var(--tint)}
.chips--tick > [lang]{gap:7px}

/* the sheet: a waterfall packer. DOM order is call order and never changes;
   dense only lets a tile move up a column, which is what a passthrough is. */
.sheet{
  --cols:1;--gutter:12px;
  display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:var(--gutter);
  grid-auto-flow:dense;
  grid-auto-rows:auto;            /* no-JS / pre-JS state: a plain grid */
  padding-block:var(--pad);
}
html.js-masonry .sheet{grid-auto-rows:8px}

@media (min-width:600px){ .sheet{--cols:2;--gutter:14px} }
@media (min-width:900px){ .sheet{--cols:3;--gutter:18px} }
@media (min-width:1200px){ .sheet{--cols:4;--gutter:20px} }
@media (min-width:1600px){ .sheet{--cols:5;--gutter:20px} }

/* BID -> column span. The bid is printed on the tile, so the rule is
   visible rather than decorative. */
.tile{grid-column:span var(--w,1)}
html.js-masonry .tile{grid-row:span var(--h,1)}

@media (min-width:600px){ .tile[data-bid="5"]{--w:2} }
@media (min-width:1200px){ .tile[data-bid="4"]{--w:2} }

/* the two documented exceptions, each printed on its own tile. Declared last
   so they win at equal specificity in every breakpoint.
   1. a skyscraper's claim is height, not width — bids 5, takes width 1;
   2. a leaderboard's claim is width, not height — bids 2, takes width 2. */
.tile.tile--sky{--w:1}
@media (min-width:900px){ .tile.tile--leader{--w:2} }

/* ========================================================= 6. TILE CHROME
   Surface and hover live in motion.css (--tile-bg / --tag-c / ::after).
   Nothing here may out-specify them. */

/* WARNING: clip-path clips an element's outline as well as its box, and the
   focus ring is drawn 3px OUTSIDE the border box. No tile contains a
   focusable element today. The day one does, move this chamfer onto a
   ::before that paints the surface and leave .tile itself unclipped —
   see .lang-btn for the gradient version of the same cut. */
.tile{
  position:relative;
  clip-path:polygon(0 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% 100%,0 100%);
  min-width:0;
}
.tile-in{position:relative;padding:var(--tile-pad)}
.tile-in > * + *{margin-top:12px}
.tile-in > .fig{margin-top:16px}
.tile-in > .h2{margin-top:14px}
.tile-in > .honesty{margin-top:14px}
.tile-in > .tag-row{margin-top:0}
/* most tiles no longer carry a gutter tag, so whatever comes first must not
   inherit the spacing that assumed one above it */
.tile-in > :first-child{margin-top:0}

.tag-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-right:6px}
.tag-fmt{color:var(--tint)}
.tag-bid{color:var(--tint)}

.note{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.note .tag{color:var(--tint)}

.fig{margin:0}
.fig svg{display:block;width:100%;height:auto}

/* ink fields: a tile flooded with one ink, type reversed out of it.
   --text / --tint / --rule are re-pointed on the tile itself so the tag
   colour motion.css computes from them lands knocked out, not grey. */
.tile--field{
  --text:var(--knockout);
  --tint:var(--knockout-soft);
  --rule:var(--knockout-mute);
  color:var(--knockout);
}
/* the field is painted on the tile, never on .tile-in: .tile-in is the
   element the masonry pass measures, and a 100%-height child would feed its
   own row span back into the next measurement. */
.tile--field::before{content:"";position:absolute;inset:0;background:var(--field);z-index:0}
.tile--field .tile-in{z-index:1}
.tile--field-tech{--field:var(--field-tech)}
.tile--field-mech{--field:var(--field-mech);container-type:inline-size}

.regmark-in{position:absolute;width:16px;height:16px;overflow:visible}
.regmark-in--tl{top:10px;left:10px}
.regmark-in--tr{top:10px;right:10px}
.regmark-in--bl{bottom:10px;left:10px}
.regmark-in--br{bottom:10px;right:10px}

/* CALL 02 — the quote */
.quote{margin:0}
.quote-t{font-size:var(--t-quote);line-height:1.3;letter-spacing:-.005em;max-width:34ch}
.quote-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-top:16px}
.quote-by .tag{color:var(--knockout-soft)}
.quote-by .cap{color:var(--knockout-soft)}

/* CALL 04 — CEO, cropped by the tile's right edge: a deliberate trim.
   The size is set against the tile, not the viewport, so the crop stays
   the same fraction of the word at every column count. */
.ceo-crop{overflow:hidden;margin-top:14px;margin-right:calc(var(--tile-pad) * -1)}
.ceo-word{
  display:block;
  font-family:var(--f-display);font-weight:800;
  font-size:var(--t-mega);
  font-size:clamp(72px,80cqw,540px);
  line-height:.8;letter-spacing:-.02em;
  white-space:nowrap;margin-left:-.04em;color:var(--knockout);
}

/* CALL 10 — the seam. The word is printed once more behind the copy at 8%,
   sized against the tile so it never becomes a row of clipped slabs. */
.tile--seam{container-type:inline-size}
.seam-head{
  --ghost:clamp(56px,40cqw,200px);
  position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:calc(var(--ghost) * .8);
}
/* the ghost is the SAME string as the heading, set once more and left-aligned
   to it, so it reads as one word printed twice rather than a leftover
   element. Where the word out-measures the tile it is cropped by the tile
   edge — a trim, which is the page's own vocabulary. */
.seam-ghost{
  position:absolute;top:50%;left:-.03em;transform:translateY(-50%);
  font-family:var(--f-display);font-weight:800;font-size:var(--ghost);
  line-height:.8;letter-spacing:-.02em;white-space:nowrap;
  color:var(--text);opacity:var(--ghost-a);pointer-events:none;
}
.seam-head .h2{position:relative}

/* ==================================================== 7. LANGUAGE TOGGLE */

/* clear of the hero band's top-right registration cross (right 12–26px), so
   all four printer's marks stay visible and symmetric */
.lang-chip{
  position:fixed;top:12px;right:36px;z-index:50;
  display:flex;gap:2px;
}
/* The chamfer is drawn as a corner gradient, NOT with clip-path: clip-path
   clips an element's outline too, and outline-offset puts the focus ring
   3px outside the border box — i.e. entirely inside the clipped-away region.
   These four buttons are the only interactive elements on the page, so a
   clipped ring means the page has no keyboard focus indication at all. */
.lang-btn{
  min-width:44px;min-height:32px;padding:0 8px;
  border:0;border-radius:0;cursor:pointer;
  font-family:var(--f-mono);font-weight:600;font-size:var(--t-tag);
  letter-spacing:.06em;text-transform:uppercase;
  --btn-bg:var(--tile-2);
  color:var(--tint);
  background:linear-gradient(225deg,transparent 0 6px,var(--btn-bg) 6px);
}
/* the deepened field ink, not the raw pigment: knockout on dark --mech
   measures 3.64:1, on --field-mech it is 6.21:1 */
.lang-btn.is-active{--btn-bg:var(--field-mech);color:var(--knockout)}
@media (hover:hover){ .lang-btn:hover{color:var(--text)} .lang-btn.is-active:hover{color:var(--knockout)} }

/* ===================================================== 8. CONTROL STRIP */

.strip-in > * + *{margin-top:14px}
.strip-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px}
.strip-bar{flex:1 1 320px;min-width:0;max-width:720px}
.strip-fig{width:100%;min-width:0}
.strip-patches{display:flex;gap:2px;align-items:flex-end}
.patch{ width:44px;height:32px;display:inline-block }
/* on the band the inactive patch needs a surface of its own, one step off
   --tile-2, or it disappears into the strip */
.strip-patches .lang-btn:not(.is-active){--btn-bg:var(--tile)}
/* the slot the client fills later: a blank patch, no placeholder text.
   Not focusable, so the chamfer may be a real clip here. */
.patch--blank{
  background:var(--tile);border:0;opacity:.55;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);
}
.band--strip .chips > [lang]{color:var(--tint)}

/* The control-strip ink names live in HTML, not in the 676-unit viewBox:
   inside it they rendered at 3.9px on a phone. The columns track the SVG's
   own geometry — patches start at 12/676 and each ink group is 162/676 wide
   — so a label still sits under its own patch at every width. */
.strip-labels{
  display:grid;
  grid-template-columns:repeat(3,23.96%) auto;
  padding-left:1.78%;
  margin-top:6px;
  color:var(--tint);
}
.strip-labels .tick{color:var(--tint)}

/* ======================================================= 9. FINE PRINT */

@media (max-width:599px){
  .band--hero{padding-block:52px 26px}
  .quote-t{max-width:none}
}

/* Reduced motion: the authored state is already the final composition, so
   nothing is lost. motion.css carries the per-element detail. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ============================================ 10. HALFTONE (img/halftone.css)
   Appended verbatim by _build/assemble.mjs: the blend model every .plate
   obeys, plus the CSS-only halftone fields. */

/* halftone.css — lev4ig.ru v2 · the ink/atmosphere layer
   Load AFTER site.css and BEFORE motion.css.
   Two things live here and nothing else:
     1. the blend model every .plate obeys;
     2. the halftone fields — CSS only, no DOM, no images, no requests.
   Nothing in this file is load-bearing for readability: every field is a
   decorative layer behind content, and all type passes contrast with every
   plate removed. */

/* ---------------------------------------------------------- blend model
   Light: ink on paper. Dark: light through film. No blend support: flat.
   Colours are never first defined in a media query — only the blend mode
   is overridden here.

   Overprint is only CONTENT in the two places where plates land on top of
   each other: the hero registration block and its counter-image, the seam.
   Inside the tiles the inks never overlap, so a blend there buys nothing and
   costs an isolated compositing layer per group — about forty of them on a
   page the audience opens on a phone. So the blend is scoped, not global. */

.plate { mix-blend-mode: normal; }

#g-register .plate,
#g-register-n .plate,
#g-seam .plate { mix-blend-mode: multiply; }

@media (prefers-color-scheme: dark) {
  #g-register .plate,
  #g-register-n .plate,
  #g-seam .plate { mix-blend-mode: screen; }
}

@supports not (mix-blend-mode: multiply) {
  #g-register .plate,
  #g-register-n .plate,
  #g-seam .plate { mix-blend-mode: normal; opacity: .72; }
}

/* ------------------------------------------------------- halftone fields
   .atmo is any positioned box that wants a field; .tone is the field.
   The tone never intercepts a pointer and is never announced. */

.atmo { position: relative; }

.atmo > .tone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.atmo > * { position: relative; z-index: 1; }

.tone {
  --pitch: 7px;          /* screen ruling */
  --r: 1.6px;            /* dot radius — the only density control */
  --a: .5;               /* field strength */
  --c1: var(--halftone);
  --c2: var(--halftone);
  --c3: transparent;
  display: block;
  opacity: var(--a);
  mix-blend-mode: multiply;
  background-repeat: repeat, repeat, repeat;
  background-size: var(--pitch) var(--pitch),
                   var(--pitch) var(--pitch),
                   var(--pitch) var(--pitch);
  /* three screens, offset a fraction of the pitch: a real overprint rosette
     rather than three coincident dot grids */
  background-position: 0 0, 2.3px 1.4px, 1.1px 3.4px;
  background-image:
    radial-gradient(circle at 50% 50%, var(--c1) 0 var(--r), transparent calc(var(--r) + .6px)),
    radial-gradient(circle at 50% 50%, var(--c2) 0 var(--r), transparent calc(var(--r) + .6px)),
    radial-gradient(circle at 50% 50%, var(--c3) 0 var(--r), transparent calc(var(--r) + .6px));
}

@media (prefers-color-scheme: dark) {
  .tone { mix-blend-mode: screen; }
}

@supports not (mix-blend-mode: multiply) {
  .tone { mix-blend-mode: normal; opacity: calc(var(--a) * .72); }
}

/* density ramp: a mask, so the dots themselves stay the same size and the
   field genuinely fades the way a screened tint does */
.tone--fade-b { -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
                        mask-image: linear-gradient(to bottom, #000, transparent); }

/* One screen survives, on the control strip, and it is a single neutral ink.
   The hero used to carry a three-ink rosette directly behind the signature:
   three coincident dot grids offset by 1–2px flowered across the whole band
   and competed with the one element the page exists for. The three real
   plates already supply every bit of ink texture that band needs. */
.band-tone {
  --pitch: 12px; --r: 1.9px; --a: .10;
  --c1: var(--halftone); --c2: transparent; --c3: transparent;
}

/* Reduced motion changes nothing here: a halftone field does not move.
   Kept explicit so a future edit does not quietly add one. */
@media (prefers-reduced-motion: reduce) {
  .tone { transition: none; animation: none; }
}

/* ------------------------------------------------- 11. AFTER THE HALFTONE
   Tunings that must out-rank the block above, so they live below it. */

/* CALL 01 is a 160×600 skyscraper in a one-column slot: the graphic takes
   the full column width rather than shrinking its tick labels further */
.tile--sky .fig{margin-inline:calc(var(--tile-pad) * -1)}


/* The portrait plate is a second element, so motion.js — which reads and
   writes only #g-register — never reaches its ticks or its spend curve.
   Those two values are data, not decoration, so they are written here:
   --len is the curve length in the 970:560 field, and each --d is that
   tick's own latency at the same 1:3 time scale the wide plate uses, so
   the auction genuinely runs on a phone too. */
#g-register-n [data-draw]{--len:2130}
#g-register-n [data-ms="7"]{--d:21ms}
#g-register-n [data-ms="12"]{--d:36ms}
#g-register-n [data-ms="18"]{--d:54ms}
#g-register-n [data-ms="23"]{--d:69ms}
#g-register-n [data-ms="27"]{--d:81ms}
#g-register-n [data-ms="31"]{--d:93ms}
#g-register-n [data-ms="34"]{--d:102ms}
#g-register-n [data-ms="36"]{--d:108ms}
#g-register-n [data-ms="38"]{--d:114ms}
#g-register-n [data-ms="39"]{--d:117ms}
#g-register-n [data-ms="41"]{--d:123ms}
#g-register-n [data-ms="42"]{--d:126ms}
#g-register-n [data-ms="43"]{--d:129ms}
#g-register-n [data-ms="44"]{--d:132ms}
#g-register-n [data-ms="45"]{--d:135ms}
#g-register-n [data-ms="46"]{--d:138ms}
#g-register-n [data-ms="47"]{--d:141ms}
#g-register-n [data-ms="48"]{--d:144ms}
#g-register-n [data-ms="49"]{--d:147ms}
#g-register-n [data-ms="50"]{--d:150ms}
#g-register-n [data-ms="51"]{--d:153ms}
#g-register-n [data-ms="52"]{--d:156ms}
#g-register-n [data-ms="53"]{--d:159ms}
#g-register-n [data-ms="54"]{--d:162ms}
#g-register-n [data-ms="55"]{--d:165ms}
#g-register-n [data-ms="56"]{--d:168ms}
#g-register-n [data-ms="57"]{--d:171ms}
#g-register-n [data-ms="58"]{--d:174ms}
#g-register-n [data-ms="59"]{--d:177ms}
#g-register-n [data-ms="61"]{--d:183ms}
#g-register-n [data-ms="63"]{--d:189ms}
#g-register-n [data-ms="65"]{--d:195ms}
#g-register-n [data-ms="67"]{--d:201ms}
#g-register-n [data-ms="69"]{--d:207ms}
#g-register-n [data-ms="72"]{--d:216ms}
#g-register-n [data-ms="75"]{--d:225ms}
#g-register-n [data-ms="79"]{--d:237ms}
#g-register-n [data-ms="83"]{--d:249ms}
#g-register-n [data-ms="87"]{--d:261ms}
#g-register-n [data-ms="91"]{--d:273ms}
#g-register-n [data-ms="95"]{--d:285ms}
#g-register-n [data-ms="98"]{--d:294ms}

/* the hero field prints at 22%; the opacity lives on the container, not on
   the three .plate groups, so the load animation's own opacity ramp cannot
   overrun it and flash the field at full strength */
.reg-field{opacity:.22}