/* Page styles. All values come from tokens.css / DESIGN.md. */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-inline: var(--gutter);
  padding-block: var(--gutter);
  font: 400 var(--type-body) / 1.5 var(--font-text);
  color: var(--color-chalk);
  background-color: var(--color-sheet);
  font-synthesis: none;
  caret-color: var(--color-pencil);
}

/* Uneven cyanotype coating: a baked noise tile, never strong enough to change text contrast. */
body, .header, .assembly {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .14 0 0 0 0 .3 0 0 0 .22 -.05'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--color-pencil); color: var(--color-ink); }

h1, h2, p, ol, dl, dd { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { display: block; }

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

.skip-link {
  position: absolute; left: var(--space-4); top: var(--space-2); z-index: 20;
  padding: var(--space-3) var(--space-4);
  background: var(--color-pencil); color: var(--color-ink);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.skip-link:hover { background-color: var(--color-chalk); }

/* ── The sheet: one continuous drawing frame ─────────────────────────────── */
.sheet {
  max-width: var(--sheet-max);
  margin-inline: auto;
  border: var(--line-frame) solid var(--color-chalk);
}

.section {
  border-top: var(--line-frame) solid var(--color-chalk);
  padding: var(--section-gap) var(--pad);
}

/* ── Side rails: stock photos, held in view while the sheet scrolls ──────── */
.rail { display: none; }
@media (min-width: 1536px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(var(--rail-min), 1fr) minmax(0, var(--sheet-max)) minmax(var(--rail-min), 1fr);
    column-gap: var(--gutter);
    align-items: start;
  }
  .sheet { width: 100%; min-width: 0; }
  /* The rail stretches with the page so its contents have room to stick. */
  .rail { display: block; align-self: stretch; }
  .rail--left { justify-self: end; }
  .rail--right { justify-self: start; }
  .rail__inner {
    position: sticky;
    top: var(--gutter);
    width: clamp(var(--rail-min), calc((100vw - var(--sheet-max)) / 2 - var(--gutter) * 2), var(--rail-max));
    height: calc(100svh - var(--gutter) * 2);
    display: flex; flex-direction: column; gap: var(--gutter);
  }
}
/* Short windows keep two photos, so each stays tall enough to read. */
@media (min-width: 1536px) and (max-height: 700px) {
  .rail__inner img:nth-child(3) { display: none; }
}
.rail__inner img {
  flex: 1 1 0;
  display: block;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  border: var(--line-frame) solid var(--color-chalk);
  background-color: var(--color-sheet-deep);
}

/* ── Type roles ─────────────────────────────────────────────────────────── */
.t-display {
  font: 600 var(--type-display) / 1.04 var(--font-head);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.t-h2 {
  font: 600 var(--type-h2) / 1.08 var(--font-head);
  text-wrap: balance;
}
.t-value { font: 500 var(--type-value) / 1.15 var(--font-head); font-variant-numeric: tabular-nums; }
.t-lead { font-size: var(--type-lead); line-height: 1.35; }
.t-label { font-size: var(--type-label); line-height: 1.25; color: var(--color-chalk-muted); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-inline: var(--pad);
  background-color: var(--color-sheet);
  border-bottom: var(--line-hair) solid var(--color-line);
}
.brand {
  font: italic 400 var(--type-lead) / 1 var(--font-head);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--space-3);
}
.nav { display: none; }
@media (min-width: 768px) { .nav { display: block; } }
.nav a {
  display: inline-flex; align-items: center; min-height: var(--control-sm);
  text-decoration: none; color: var(--color-chalk-muted);
}
.nav a:hover, .map-link:hover { color: var(--color-pencil); }
.brand:hover { color: var(--color-pencil); }
.nav ul { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.nav li { display: flex; }
.header__end { display: flex; align-items: center; gap: var(--space-4); }
@media (min-width: 768px) { .header__end { gap: var(--space-6); } }
/* Language switch: a plain link at the sheet's right edge, with a full-size target. */
.lang {
  display: inline-flex; align-items: center; justify-content: flex-end;
  min-width: var(--control-sm); min-height: var(--control-sm);
  text-decoration: none; color: var(--color-chalk-muted);
}
.lang:hover { color: var(--color-pencil); }
/* Phone: the hero's own call button is on screen, so the header's joins only after it scrolls away. */
.header__tel { transition-property: transform, background-color, color, box-shadow, filter, outline-offset, outline-color, opacity, visibility; }
@media (max-width: 599px) {
  [data-hero-call-visible] .header__tel { opacity: 0; visibility: hidden; }
}
.header__num { display: none; }
@media (min-width: 480px) { .header__num { display: inline; } .header__call { display: none; } }
/* Narrowest phones: icon only, the name stays for assistive technology. */
@media (max-width: 359px) { .header__end { gap: var(--space-2); } }
@media (max-width: 419px) {
  html[lang="uk"] .header__call { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[lang="uk"] .header .btn--sm { padding-inline: var(--space-3); }
}
@media (max-width: 359px) {
  .header__call { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .header .btn--sm { padding-inline: var(--space-3); }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-lg);
  padding: 0 var(--space-6);
  border: var(--line-hair) solid transparent;
  font: 500 var(--type-body) / 1 var(--font-text);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  text-box: trim-both cap alphabetic;
  cursor: pointer;
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn--sm { min-height: var(--control-sm); padding-inline: var(--space-4); font-size: var(--type-small); }
.btn--primary { background-color: var(--color-pencil); color: var(--color-ink); }
.btn--secondary { border-color: var(--color-chalk); color: var(--color-chalk); }
.icon { width: var(--icon-sm); height: var(--icon-sm); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ── Hero: tall drawing field, heading on the base line, title block in the corner ── */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__head { padding: var(--space-8) var(--pad) var(--space-6); }
.hero__sentence { margin-top: var(--space-3); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__actions .btn { flex: 1 1 100%; }

.hero__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0 var(--pad) var(--space-6);
}
.view { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.view--section, .view--detail { display: none; }

/* Title block (основний напис): heavy outside, thin inside, a small label in each cell */
.stamp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--line-frame) solid var(--color-chalk);
  background-color: var(--color-sheet-deep);
}
.stamp__cell {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--pad);
  border-top: var(--line-hair) solid var(--color-line);
}
.stamp__cell:first-child { border-top: 0; }
.stamp__cell--wide { grid-column: 1 / -1; }
.stamp__cell + .stamp__cell--half { border-left: var(--line-hair) solid var(--color-line); }
.stamp__value { font: 500 var(--type-lead) / 1.25 var(--font-head); font-variant-numeric: tabular-nums; }
.nb { white-space: nowrap; }
/* Taller tap target without changing the cell height; the underline stays on the text. */
.stamp__value a {
  display: inline-block;
  padding-block: var(--space-3);
  margin-block: calc(var(--space-3) * -1);
  text-decoration: none;
  background-position: 0 calc(100% - var(--space-3));
}

/* Narrowest phones: the two phone numbers stack so neither is clipped. */
@media (max-width: 399px) {
  .stamp__cell--half { grid-column: 1 / -1; }
  .stamp__cell + .stamp__cell--half { border-left: 0; }
}

/* ── Drawing lines: ISO 128 / ГОСТ 2.303 line types are the page's only ornament ── */
.dw { --sw-thick: 1.1; --sw-thin: 0.5; overflow: visible; }
.dw * { vector-effect: none; }
.l-thick { fill: none; stroke: var(--color-chalk); stroke-width: var(--sw-thick); stroke-linejoin: round; stroke-linecap: round; }
.l-thin { fill: none; stroke: var(--color-line); stroke-width: var(--sw-thin); }
.l-center { fill: none; stroke: var(--color-line); stroke-width: var(--sw-thin); stroke-dasharray: 14 2.5 2 2.5; }
.l-phantom { fill: none; stroke: var(--color-line); stroke-width: var(--sw-thin); stroke-dasharray: 10 2 1.5 2 1.5 2; }
.l-cut { fill: none; stroke: var(--color-chalk); stroke-width: 1.6; }
.dw-arrow { fill: var(--color-line); stroke: none; }
.dw-arrow--cut { fill: var(--color-chalk); }
.dw-text { font: italic 400 8.5px var(--font-head); fill: var(--color-chalk); font-variant-numeric: tabular-nums; }
.dw-text--title { font-size: 11px; }
.dw-hatch-line { stroke: var(--color-line); stroke-width: 0.45; }

/* ── Plotter: the outline is drawn once, at a plotter's constant pace ───────── */
.plot { stroke-dasharray: 1.02 1.02; stroke-dashoffset: 0; animation: plot var(--motion-plot) linear both; }
.pen { display: none; }
.late { animation: late 500ms var(--ease-standard) calc(var(--motion-plot) * 0.8) both; }
@keyframes plot { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes late { from { opacity: 0; } to { opacity: 1; } }
@keyframes pen-run {
  0% { offset-distance: 0%; opacity: 1; }
  97% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.pen {
  display: block;
  fill: var(--color-pencil);
  offset-rotate: 0deg;
  opacity: 0;
  animation: pen-run var(--motion-plot) linear both;
}

/* Callouts appear only when the view they point to is on the sheet. */
.callout-section, .callout-detail { display: none; }
@media (min-width: 600px) { .callout-section { display: block; } }
@media (min-width: 1024px) { .callout-detail { display: block; } }

/* ── Parts: assembly drawing keyed to the parts list ────────────────────── */
@media (max-width: 599px) {
  /* Phone: the drawing shrinks to 70%, so balloons grow to stay readable. */
  .balloon circle { r: 12.5px; }
  .balloon text { font-size: 14.5px; }
}
.parts__grid { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.assembly {
  position: sticky; top: var(--header-h); z-index: 5;
  margin-inline: calc(var(--pad) * -1);
  padding: var(--space-3) var(--pad);
  background-color: var(--color-sheet);
  border-bottom: var(--line-hair) solid var(--color-line);
}
.assembly svg { width: 100%; height: auto; --sw-thick: 1.5; --sw-thin: 0.8; }

.part { cursor: pointer; }
.part__hl { opacity: 0; transition: opacity var(--motion-small) var(--ease-standard); }
.part.is-on .part__hl { opacity: 1; }
.part__hl .l-thick { stroke: var(--color-pencil); stroke-width: calc(var(--sw-thick) * 1.5); }
.part__hl .dw-hatch-line { stroke: var(--color-pencil); }
.balloon circle { fill: var(--color-sheet); stroke: var(--color-chalk); stroke-width: var(--sw-thin); transition: fill var(--motion-small) var(--ease-standard), stroke var(--motion-small) var(--ease-standard); }
.balloon text { font: italic 500 10.5px var(--font-head); fill: var(--color-chalk); text-anchor: middle; dominant-baseline: central; transition: fill var(--motion-small) var(--ease-standard); }
.balloon.is-on circle { fill: var(--color-pencil); stroke: var(--color-pencil); }
.balloon.is-on text { fill: var(--color-ink); }
.leader { fill: none; stroke: var(--color-line); stroke-width: var(--sw-thin); transition: stroke var(--motion-small) var(--ease-standard); }
.leader-dot { fill: var(--color-line); transition: fill var(--motion-small) var(--ease-standard); }
.leader.is-on { stroke: var(--color-pencil); }
.leader-dot.is-on { fill: var(--color-pencil); }

.spec { border: var(--line-frame) solid var(--color-chalk); align-self: start; }
.spec__row {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) var(--space-4);
}
.spec__head { border-bottom: var(--line-frame) solid var(--color-chalk); padding-block: var(--space-2); }
.spec__head .spec__use { display: none; }
.spec li + li { border-top: var(--line-hair) solid var(--color-line); }
.spec button {
  width: 100%; border: 0; background-color: transparent;
  text-align: left; cursor: pointer;
  min-height: var(--control-lg);
}
.spec button[aria-pressed="true"] { background-color: var(--color-sheet-deep); }
.spec__pos {
  font: italic 500 var(--type-lead) / 1.25 var(--font-head);
  font-variant-numeric: tabular-nums;
}
/* Selection reads without colour: the position number gains a ring, as a balloon on the drawing. */
.spec button .spec__pos {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  margin-inline-start: -5px;
  border: var(--line-hair) solid transparent;
  transition: background-color var(--motion-small) var(--ease-standard), color var(--motion-small) var(--ease-standard);
}
.spec button[aria-pressed="true"] .spec__pos { background-color: var(--color-pencil); color: var(--color-ink); }
.spec__name { font: 500 var(--type-value) / 1.15 var(--font-head); display: block; }
.spec__use { display: block; grid-column: 2; margin-top: var(--space-1); font-size: var(--type-small); line-height: 1.4; color: var(--color-chalk-muted); }
.parts__ask { margin-top: var(--space-4); display: flex; }
.parts__ask .btn { flex: 1 1 auto; }

/* ── Request: a real sequence, ruled like the notes on a drawing ───────────── */
.request__top { display: grid; gap: var(--space-6); align-items: end; }
.request__top .btn { justify-self: start; }
.notes { display: grid; margin-top: var(--space-8); border: var(--line-hair) solid var(--color-line); counter-reset: note; }
.notes li {
  counter-increment: note;
  display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); column-gap: var(--space-2);
  padding: var(--space-4);
  font: 500 var(--type-value) / 1.15 var(--font-head);
}
.notes li + li { border-top: var(--line-hair) solid var(--color-line); }
.notes li::before {
  content: counter(note) ".";
  font: italic 500 var(--type-value) / 1.1 var(--font-head);
}

/* ── Contacts: the page's end, a full-width title block ─────────────────────── */
.contact { padding: 0; }
.contact__name { padding: var(--section-gap) var(--pad) var(--space-8); }
.ledger {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--color-sheet-deep);
  border-top: var(--line-frame) solid var(--color-chalk);
}
.ledger__cell {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4) var(--pad);
  border-top: var(--line-hair) solid var(--color-line);
}
.ledger__cell:first-child { border-top: 0; }
.ledger__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.ledger__row a { text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.ledger address { font-style: normal; }

.copy {
  flex: none;
  display: inline-grid; place-items: center;
  width: var(--control-sm); height: var(--control-sm);
  border: var(--line-hair) solid var(--color-line);
  background-color: transparent;
  cursor: pointer;
}
.copy[data-state="error"] { border-color: var(--color-alert); color: var(--color-alert); }
.copy__status { min-height: 1.25em; font-size: var(--type-label); line-height: 1.25; color: var(--color-chalk-muted); }
.copy__status[data-state="error"] { color: var(--color-alert); }
.map-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-sm); }

.footnote {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-6);
  padding: var(--space-3) var(--pad);
  border-top: var(--line-hair) solid var(--color-line);
  font-size: var(--type-label); line-height: 1.25;
  color: var(--color-chalk-muted);
}
.footnote small { font-size: inherit; }

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .hero__actions .btn { flex: 0 0 auto; }
  .hero__field {
    grid-template-columns: 250fr 120fr;
    grid-template-rows: minmax(0, 1fr);
    height: min(60vw, 440px);
  }
  .view--section { display: block; }
  .request__top { grid-template-columns: minmax(0, 1fr) auto; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notes li + li { border-top: 0; }
  .notes li:nth-child(even) { border-left: var(--line-hair) solid var(--color-line); }
  .notes li:nth-child(n + 3) { border-top: var(--line-hair) solid var(--color-line); }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger__cell--address, .ledger__cell--email { grid-column: 1 / -1; }
  .ledger__cell:nth-child(3) { border-left: var(--line-hair) solid var(--color-line); }
  .spec__row { grid-template-columns: var(--space-8) minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
  .spec__use { grid-column: auto; margin-top: 0; }
  .spec__head .spec__use { display: block; }
  .parts__ask .btn { flex: 0 0 auto; }
}

/* ── Desktop: the composition of a real sheet ───────────────────────────── */
@media (min-width: 1024px) {
  :root { --header-h: 64px; }
  .hero { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .hero__field {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: 250fr 120fr 250fr;
    grid-template-rows: minmax(0, 1fr);
    height: clamp(280px, calc(100svh - 416px), 560px);
    padding-top: var(--space-4);
    padding-bottom: 0;
  }
  .view--detail { display: block; }
  .hero__head { grid-row: 2; grid-column: 1; align-self: end; }
  .stamp {
    grid-row: 2; grid-column: 2; align-self: end;
    border-left: var(--line-frame) solid var(--color-chalk);
  }
  .stamp__cell { padding-inline: var(--space-4); }

  .assembly { position: static; margin: 0; padding: 0; border: 0; background: none; }
  .assembly svg { max-height: 480px; --sw-thick: 0.8; --sw-thin: 0.4; }
  .assembly .dw-hatch-line { stroke-width: 0.35; }

  /* Diptych: the heading and action hold the left, the notes run as ruled lines on the right. */
  .request { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: start; }
  .request__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .notes { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .notes li { grid-template-columns: var(--space-12) minmax(0, 1fr); padding: var(--space-6); }
  .notes li:nth-child(even) { border-left: 0; }
  .notes li + li { border-top: var(--line-hair) solid var(--color-line); }

  .ledger { grid-template-columns: 5fr 4fr 4fr; }
  .ledger__cell { padding: var(--space-6) var(--pad); border-top: 0; }
  .ledger__cell:nth-child(n + 2) { border-left: var(--line-hair) solid var(--color-line); }
  .ledger__cell--address { grid-column: 1; grid-row: 1 / span 2; }
  .ledger__cell--email { grid-column: 2 / -1; border-top: var(--line-hair) solid var(--color-line); }
}

/* Small landscape tablets carry a taller title block, so the drawing gives up the height. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hero { grid-template-columns: minmax(0, 1fr) 390px; }
  .hero__field { height: clamp(240px, calc(100svh - 440px), 560px); }
}

/* Full-width drawing with the parts list as a strip under it, so a selection never leaves the view. */
@media (min-width: 1200px) {
  .spec__head { display: none; }
  .spec ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .spec li + li { border-top: 0; border-left: var(--line-hair) solid var(--color-line); }
  .spec button { height: 100%; }
  .spec__row { grid-template-columns: var(--space-8) minmax(0, 1fr); align-items: baseline; align-content: start; padding: var(--space-4); }
  .spec__use { grid-column: 1 / -1; margin-top: var(--space-2); }
}

/* Short laptop screens: keep the actions above the fold by trimming the drawing, never the text. */
@media (min-width: 1024px) and (max-height: 700px) {
  .hero__field { height: 280px; }
}

@media (hover: hover) and (pointer: fine) {
  .spec button:hover:not([aria-pressed="true"]) .spec__pos { border-color: var(--color-chalk); }
  .copy:hover { border-color: var(--color-chalk); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .plot, .late { animation: none; }
  .pen { display: none; }
}

@media (forced-colors: active) {
  .spec button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .part.is-on .part__hl .l-thick { stroke: Highlight; }
}