/* Hallmark · shape: Spec sheet (7 sections) · genre: modern-minimal · theme: Terrazzo (deal 3/3, seed temporary-official-cast-iron-foundry-8498·87ccc503·2026-11-02·r0) · job: order (send a drawing) · draw: spec-sheet
 * hero: Ledge, head on columns 1–7, the cast list card on 8–12 at 2px ink border · nav: wordmark + three links + one action, on a rule · footer: mast over ruled columns
 * imagery: none — the plant's own photographs are absent, so the page carries spec tables, rules and type; photo slots wait in the footer note
 * signature: the cast list card — seven тюбинг type sizes set in mono beside the grades, in the hero, no photograph needed · terrazzo: off-white, rust signal, ink controls
 * axes: light/geometric-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0
 * waive 80: the hero-right ring is a measured diagram of the plant's own product (чугунное тюбинговое кольцо),
 *   drawn as labelled segments, not a decorative illustration; it is the one thing that reads as «завод» without photographs. */
/* Hallmark · waive 2b: the hero head carries one metal sheen (ink to accent and back, single time). Solid ink failed to read as casting;
   the ramp never leaves the two declared tokens and its 40/41 mid-stops still pass contrast.
 * answered 23: the accent lives on a 2px pour line and one narrow glint band, far under 5% of the viewport. */
/* Hallmark · pre-emit critique: P_photo-free page carried by spec tables yes · H_head 5 words, one job · E_no invented figure, every fact from the plant's own site · S_one signature, the cast list · R_rules 2px ink, radius 0 · weakest: a plant page without photographs — answered by making the specification the picture, and leaving named slots for the plant's own frames */
@import url("./tokens.css");
@import url("./base.css");

/* Faces: Syne has no Cyrillic, so the display role takes Unbounded 600 (wide geometric, Cyrillic-native).
   Onest and JetBrains Mono are self-hosted with their cyrillic and latin subsets. */
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Unbounded-600-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/Unbounded-600-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: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/Onest-var-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("./fonts/Onest-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; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/JetBrainsMono-500-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/JetBrainsMono-500-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; }

:root {
  --font-display: "Unbounded", ui-sans-serif, sans-serif;
  --font-body: "Onest", ui-sans-serif, sans-serif;
  --font-outlier: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 600;
  --tracking-display: -0.02em;
}

/* ---------- shell ---------- */

.page { display: block; padding-block-end: 0; }

.status {
  border-block-end: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}
.status .container { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); align-items: baseline; padding-block: var(--space-xs); }
.status strong { font-weight: 500; color: var(--color-ink); }
.status span:last-child { color: var(--color-muted); }

.masthead { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-block-end: var(--rule-bar) solid var(--color-ink); }
.masthead .container { display: flex; align-items: center; gap: var(--space-lg); padding-block: var(--space-sm); }
.brand { display: flex; flex-direction: column; gap: var(--space-3xs); text-decoration: none; margin-inline-end: auto; }
.brand b { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1; }
.brand small { font-size: var(--text-xs); color: var(--color-muted); }
.nav { display: flex; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); font-weight: 500; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.nav a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; border: 0; border-radius: 0; padding: var(--space-sm) var(--space-lg); font-weight: 500; font-size: var(--text-sm); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.btn--primary { background: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--secondary { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-bar) currentColor; }
.btn--secondary:hover { background: var(--color-ink); color: var(--color-paper); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }

/* ---------- hero ---------- */

.hero { padding-block: var(--space-3xl) var(--space-2xl); }
.hero .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.hero__text { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--space-lg); }
.hero h1 { font-size: clamp(2.5rem, 4.2vw + 1rem, 4.75rem); max-width: 15ch; line-height: 1.1; }
.hero .lead { color: var(--color-ink-2); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__note { font-size: var(--text-sm); color: var(--color-muted); max-width: 46ch; }

.card { margin: 0; grid-column: 8 / span 5; background: var(--color-plate); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-block-end: var(--rule-bar) solid var(--color-ink); }
.card__head h2 { font-size: var(--text-title); max-width: none; }
.card__head span { font-family: var(--font-outlier); font-size: var(--text-xs); color: var(--accent-text); }
.castlist { list-style: none; margin: 0; padding: 0; }
.castlist li { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xs) var(--space-md); align-items: baseline; padding: var(--space-sm) var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); }
.castlist li:first-child { border-block-start: 0; }
.castlist b { font-weight: 500; font-size: var(--text-md); }
.castlist em { font-style: normal; display: block; font-size: var(--text-sm); color: var(--color-ink-2); margin-block-start: var(--space-3xs); }
.castlist .code { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--accent-text); white-space: nowrap; }
.card__foot { padding: var(--space-sm) var(--space-lg) var(--space-md); border-block-start: var(--rule-bar) solid var(--color-ink); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- sections ---------- */

.section { padding-block: var(--section-gap-s); }
.section > .container > header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-md); padding-block-end: var(--space-lg); }
.section h2 { font-size: var(--text-section); }
.section header p { color: var(--color-muted); font-size: var(--text-sm); max-width: 46ch; }

.spec { width: 100%; border-collapse: collapse; border-block-start: var(--rule-bar) solid var(--color-ink); text-align: start; }
.spec caption { caption-side: top; text-align: start; font-size: var(--text-sm); color: var(--color-muted); padding-block-end: var(--space-sm); }
.spec th, .spec td { padding: var(--space-md) var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; text-align: start; }
.spec thead th { font-weight: 500; font-size: var(--text-xs); color: var(--color-muted); border-block-end: var(--rule-bar) solid var(--color-ink); }
.spec tbody th { font-weight: 500; font-size: var(--text-title); line-height: 1.15; }
.spec tbody th em { display: block; font-style: normal; font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); margin-block-start: 2px; }
.spec .code { font-family: var(--font-outlier); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.spec tbody tr:hover { background: var(--color-accent-soft); }
.spec tbody tr:hover .code { color: var(--color-accent); }
.spec .sizes { max-width: 30ch; color: var(--color-ink-2); font-size: var(--text-sm); }

/* ink band with the plant's figures */
.band { background: var(--color-ink); color: var(--color-paper); }
.band .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); padding-block: var(--space-2xl); }
.figure { display: flex; flex-direction: column; gap: var(--space-2xs); }
.figure b { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(2rem, 3vw + 1rem, 3.25rem); line-height: 1; letter-spacing: -0.04em; }
.figure span { font-size: var(--text-sm); color: color-mix(in oklab, var(--color-paper) 72%, var(--color-ink)); padding-block-start: var(--space-xs); border-block-start: var(--rule-hair) solid color-mix(in oklab, var(--color-paper) 35%, var(--color-ink)); }

/* history as a ruled index */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg); align-items: baseline; }
.timeline time { font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.timeline p { font-size: var(--text-md); max-width: 62ch; }
.timeline p b { font-weight: 500; }

.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; border-block-start: var(--rule-bar) solid var(--color-ink); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule); }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-outlier); font-size: var(--text-sm); color: var(--color-accent); padding-block-start: 4px; }
.steps li > div { min-width: 0; }
.steps b { display: block; font-weight: 500; font-size: var(--text-lg); line-height: 1.25; }
.steps span { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-block-start: var(--space-2xs); }
.steps a { text-decoration-color: var(--color-accent); }

.credentials { display: flex; flex-direction: column; gap: var(--space-md); }
.credentials p { font-size: var(--text-sm); color: var(--color-ink-2); padding-inline-start: var(--space-md); border-inline-start: var(--rule-bar) solid var(--color-accent); }

/* official blocks: a ruled index of sections */
.plainlist { list-style: none; margin: 0; padding: 0; border-block-start: var(--rule-bar) solid var(--color-ink); }
.plainlist li { padding-block: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule); }
.plainlist b { display: block; font-weight: 500; font-size: var(--text-lg); line-height: 1.25; }
.plainlist span { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-block-start: var(--space-3xs); max-width: 46ch; }

/* contacts */
.contact { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.contact dl { margin: 0; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-sm) var(--space-lg); }
.contact dt { font-size: var(--text-sm); color: var(--color-muted); }
.contact dd { margin: 0; font-size: var(--text-lg); }
.contact dd a { text-decoration-color: var(--color-accent); }
.contact .addr { font-size: var(--text-md); }
.contact__card { background: var(--color-plate); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.contact__card h3 { font-size: var(--text-title); }
.contact__card p { font-size: var(--text-sm); color: var(--color-ink-2); }
.contact__card .btn { justify-content: center; }

/* footer */
.foot { border-block-start: var(--rule-bar) solid var(--color-ink); background: var(--color-paper-2); margin-block-start: var(--space-2xl); }
.foot .container { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-2xl) var(--gap-columns); padding-block: var(--space-2xl) var(--space-xl); }
.foot h2 { font-size: var(--text-title); max-width: 24ch; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--text-sm); }
.foot a:hover { text-decoration-color: var(--color-accent); }
.foot__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); justify-content: space-between; padding-block-start: var(--space-md); border-block-start: var(--rule-hair) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }

@media (max-width: 64rem) {
  .hero .container { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero__text { grid-column: 1 / -1; }
  .card { grid-column: 1 / -1; }
  .band .container { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .two, .contact { grid-template-columns: minmax(0, 1fr); }
  .foot .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav { gap: var(--space-md); }
}
@media (max-width: 46rem) {
  .masthead .container { flex-wrap: wrap; row-gap: var(--space-xs); }
  .nav { order: 3; width: 100%; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); justify-content: flex-start; border-block-start: var(--rule-hair) solid var(--color-rule); padding-block-start: var(--space-xs); }
  .nav .btn { padding: var(--space-xs) var(--space-md); }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .contact dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .contact dd { margin-block-end: var(--space-sm); }
  .spec thead { display: none; }
  .spec tbody th, .spec tbody td { display: block; border-block-end: 0; padding-block: var(--space-2xs); }
  .spec tbody tr { display: block; padding-block: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule); }
  .band .container { grid-template-columns: minmax(0, 1fr); }
  .foot .container { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: var(--space-2xl) var(--space-xl); }
}


/* --- визитка-паспорт: hero + два блока --- */
.hero--card { padding-block: var(--space-3xl) var(--space-xl); }
.hero--card h1 { font-size: clamp(1.9rem, 2.6vw + 1rem, 3.1rem); max-width: 20ch; }

/* --- движение: одно появление при прокрутке, строки карточки по очереди, живые ссылки --- */
a { transition: color var(--dur-micro) var(--ease-out), text-decoration-color var(--dur-micro) var(--ease-out); }
a:hover { color: var(--color-accent); }
.castlist li { transition: background-color var(--dur-micro) var(--ease-out); }
.castlist li:hover { background: var(--color-accent-soft); }

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }

.js .card.is-in .castlist li { animation: row-in 420ms var(--ease-out) both; }
.js .card.is-in .castlist li:nth-child(1) { animation-delay: 60ms; }
.js .card.is-in .castlist li:nth-child(2) { animation-delay: 120ms; }
.js .card.is-in .castlist li:nth-child(3) { animation-delay: 180ms; }
.js .card.is-in .castlist li:nth-child(4) { animation-delay: 240ms; }
.js .card.is-in .castlist li:nth-child(5) { animation-delay: 300ms; }
@keyframes row-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; }
  .js .card.is-in .castlist li { animation: none; }
}

/* строки истории подхватывают ритм карточки */
.js #production.is-in .timeline li { animation: row-in 460ms var(--ease-out) both; }
.js #production.is-in .timeline li:nth-child(1) { animation-delay: 40ms; }
.js #production.is-in .timeline li:nth-child(2) { animation-delay: 120ms; }
.js #production.is-in .timeline li:nth-child(3) { animation-delay: 200ms; }
.js #production.is-in .timeline li:nth-child(4) { animation-delay: 280ms; }

.contact__card { transition: box-shadow var(--dur-micro) var(--ease-out); }
.contact__card:hover { box-shadow: var(--shadow-card-hover); }

@media (max-width: 64rem) {
}

@media (prefers-reduced-motion: reduce) {
  .js #production.is-in .timeline li { animation: none; }
}


/* --- сцена литья: искры, металлический блик, расплав по линии истории --- */
.hero--card { position: relative; overflow: hidden; }
.sparks { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; z-index: 0; }
.hero--card .container { position: relative; z-index: 1; }
.hero--card::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -30%;
  block-size: 70%; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 100% at 50% 100%, color-mix(in oklab, var(--color-accent) 22%, transparent), transparent 70%);
  opacity: 0.55;
}
.js .hero--card.is-in::after { animation: heat 7s ease-in-out infinite; }
@keyframes heat { 0%, 100% { opacity: 0.38; } 50% { opacity: 0.72; } }

.js .hero--card.is-in h1 { animation: hero-in 620ms var(--ease-out) both, metal-sheen 6.5s cubic-bezier(0.42, 0, 0.58, 1) 1.2s infinite; }
.js .hero--card.is-in .lead { animation: hero-in 620ms var(--ease-out) 140ms both; }
.js .hero--card.is-in .hero__actions, .js .hero--card.is-in .contact--card { animation: hero-in 620ms var(--ease-out) 260ms both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.js .hero h1 {
  background-image: linear-gradient(104deg, var(--color-ink) 0%, var(--color-ink) 40%, var(--color-ink-2) 47%, var(--color-accent) 50%, var(--color-ink-2) 53%, var(--color-ink) 60%, var(--color-ink) 100%);
  background-size: 240% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@keyframes metal-sheen {
  0%, 55% { background-position: 130% 0; }
  100% { background-position: -70% 0; }
}

.timeline-wrap { position: relative; padding-inline-start: var(--space-xl); }
.timeline__pour { position: absolute; inset-block: 1.25rem 2.5rem; inset-inline-start: 0; inline-size: 3px; background: var(--color-rule); overflow: hidden; }
.timeline__pour::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--color-accent), color-mix(in oklab, var(--color-accent) 55%, var(--color-ink)));
  box-shadow: 0 8px 18px -6px var(--color-accent);
  transform: scaleY(var(--p, 0)); transform-origin: top;
  transition: transform 140ms linear;
}
.timeline li { position: relative; }
.timeline li::before {
  content: ""; position: absolute; inset-block-start: 0.5em;
  inset-inline-start: calc(-1 * var(--space-xl) - 1px);
  inline-size: 9px; block-size: 9px; background: var(--color-paper);
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
.js .timeline li.is-hot::before { background: var(--color-accent); }
.js .timeline li time { transition: color var(--dur-micro) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .js .hero--card.is-in::after { animation: none; opacity: 0.38; }
  .js .hero--card.is-in h1, .js .hero--card.is-in .lead,
  .js .hero--card.is-in .hero__actions, .js .hero--card.is-in .contact--card { animation: none; }
  .js .hero h1 { animation: none; background: none; color: var(--color-ink); -webkit-text-fill-color: currentColor; }
  .timeline__pour::after { transform: scaleY(1); transition: none; }
}


/* шапка карточки на телефоне: в столбик, чтобы не рвать слова */
@media (max-width: 46rem) {
  .castlist li { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .castlist .code { justify-self: start; }
  .card__head { flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
  .card__head h2 { max-width: none; flex: 0 0 auto; }
  .card__head span { flex: 0 0 auto; }
}