/* 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 */
/* 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(--color-accent); }
.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(--color-accent); 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; border-block-start: var(--rule-bar) solid var(--color-ink); }
.timeline li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-md); border-block-end: var(--rule-hair) solid var(--color-rule); 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--card { display: flex; align-items: center; min-height: calc(100dvh - 200px); padding-block: var(--space-2xl); }
.hero--card .container { display: block; }
.hero--card h1 { font-size: clamp(1.9rem, 3vw + 1rem, 3.4rem); max-width: 24ch; }
.hero--card .lead { margin-block-start: var(--space-md); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 42ch; }
.contact--card dt { color: var(--color-ink-2); }
.contact--card { margin-block-start: var(--space-2xl); max-width: 760px; background: var(--color-plate); border: var(--rule-bar) solid var(--color-ink); box-shadow: var(--shadow-card); padding: var(--space-xl); }
.contact--card dl { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-sm) var(--space-lg); }
.contact--card dd { font-size: var(--text-lg); }
.foot--card { margin-block-start: 0; }
.foot--card .container { display: block; padding-block: var(--space-lg); }
@media (max-width: 46rem) {
  .hero--card { min-height: auto; padding-block: var(--space-2xl); }
  .contact--card { padding: var(--space-lg); }
  .contact--card dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .contact--card dd { margin-block-end: var(--space-sm); font-size: var(--text-lg); }
}