/* S&K Products v2 · "technical drawing catalogue".
   scrollcraft.css is the floor. This page is paper, ink and a drafting grid;
   each product owns exactly one fill colour. */

@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlowc-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlowc-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlowc-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #F1F2EE;
  --sheet: #FBFBF8;
  --ink: #1C2227;
  --ink-soft: #4A535A;
  --blue: #137FB0;
  --blue-ink: #0D6690;
  --blue-fill: #CBE9F6;
  --yellow: #F3CF3A;
  --yellow-ink: #17140C;

  --sc-canvas: var(--paper);
  --sc-surface: var(--sheet);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--ink);
  --sc-accent-ink: var(--sheet);
  --sc-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --sc-font-text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-shadow-color: 205 16% 14%;
  --sc-r-sm: 2px;

  --rail-w: 15.5rem;
  --top-h: 0px;
  --bot-h: 0px;
  --pad: clamp(1rem, 2.4vw, 2.25rem);
}

html { scroll-padding-top: calc(var(--top-h) + 8px); }
body {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(28, 34, 39, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 34, 39, .055) 1px, transparent 1px);
  background-size: 24px 24px;
  font-size: var(--sc-t-base);
  letter-spacing: 0;
  line-height: 1.55;
}
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .7rem 1rem; background: var(--ink); color: var(--sheet); font-weight: 600; transition: transform var(--sc-d-fast) var(--sc-ease-out); }
.skip:focus-visible { transform: translateY(5rem); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 0; }

/* SVG lettering: drafting text, set in the condensed face */
.svg-letter { font: 700 30px "Barlow Condensed", sans-serif; }
.svg-note { font: 600 22px "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; fill: var(--ink); }
.svg-note-sm { font: 600 17px "Barlow Condensed", sans-serif; letter-spacing: .03em; fill: var(--yellow-ink); }
.svg-small { font: 500 15px "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-soft); }
.svg-pencil { font: 600 20px "Barlow Condensed", sans-serif; letter-spacing: .06em; fill: var(--blue); }
.svg-brand { font: 700 34px "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.svg-brand-sub { font: 600 15px "Barlow Condensed", sans-serif; letter-spacing: .12em; }
.svg-gone { font: 600 16px "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; fill: #A3211A; }
.svg-alpha text { font: 600 20px "Barlow", sans-serif; fill: var(--ink); }
.bubbles text, .svg-bubble-num text { font: 600 17px "Barlow Condensed", sans-serif; fill: var(--ink); stroke: none; }

/* the S&K mark, after the business card */
.mark { display: inline-flex; align-items: baseline; font-family: var(--sc-font-display); font-weight: 600; line-height: 1; }
.mark__s { font-size: 1.7em; font-weight: 500; }
.mark__amp { font-size: .6em; margin-inline: .03em .05em; color: var(--blue-ink); }
.mark__k { font-size: 1em; color: var(--blue-ink); }

/* ---------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.3rem;
  background: var(--ink); color: var(--sheet); border: 2px solid var(--ink); border-radius: 0;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 1.12rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 34, 39, .2), 0 8px 14px -8px rgba(28, 34, 39, .45);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn--line { background: transparent; color: var(--ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 3px rgba(28, 34, 39, .2), 0 12px 20px -10px rgba(28, 34, 39, .5); }
  .btn--line:hover { background: rgba(28, 34, 39, .06); }
}
.btn:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ------------------------------------------------------------ rail -- */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: var(--sc-z-chrome); width: var(--rail-w);
  display: flex; flex-direction: column; gap: var(--sc-6);
  padding: var(--sc-6) var(--sc-5) var(--sc-5);
  background: var(--paper); border-right: 1.5px solid var(--ink);
}
.rail__mark { display: inline-flex; align-items: baseline; gap: .45rem; color: var(--ink); text-decoration: none; font-size: 1.5rem; }
.rail__word { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .8rem; }
.rail__h1 { margin: 0; font-family: var(--sc-font-text); font-weight: 500; font-size: .95rem; line-height: 1.45; color: var(--ink-soft); }
.register ol { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.register li { border-bottom: 1px solid rgba(28, 34, 39, .25); }
.register a {
  position: relative; display: grid; gap: .1rem; padding: .7rem 0 .75rem 1.1rem;
  color: var(--ink); text-decoration: none;
}
.register a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: .55rem; height: .55rem; translate: 0 -50%;
  border: 1.5px solid var(--ink); background: transparent;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out);
}
.register a[aria-current]::before { background: var(--ink); }
.register a[data-reg="1"][aria-current]::before { background: var(--blue); border-color: var(--blue); }
.register a[data-reg="2"][aria-current]::before { background: var(--yellow); border-color: var(--yellow-ink); }
.register__no { font-family: var(--sc-font-display); font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.register__name { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.55rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; }
@media (hover: hover) and (pointer: fine) { .register a:hover .register__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; } }
.rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sc-4); }
.rail__ch { margin: 0; display: grid; gap: .1rem; font-size: .85rem; color: var(--ink-soft); }
.rail__ch a { color: var(--ink); font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; }
.lang { display: inline-flex; align-self: flex-start; border: 1.5px solid var(--ink); }
.lang a { min-width: 48px; min-height: 44px; display: inline-grid; place-items: center; text-decoration: none; color: var(--ink); font-family: var(--sc-font-display); font-weight: 600; letter-spacing: .08em; }
.lang a + a { border-left: 1.5px solid var(--ink); }
.lang a.is-current { background: var(--ink); color: var(--sheet); }
@media (hover: hover) and (pointer: fine) { .lang a:not(.is-current):hover { background: rgba(28, 34, 39, .08); } }

.desk { margin-left: var(--rail-w); }

/* ----------------------------------------------------------- sheets -- */
.sheet {
  position: relative; background: var(--sheet); color: var(--ink);
  border: 1.5px solid var(--ink);
  box-shadow: 0 1px 2px rgba(28, 34, 39, .12), 0 22px 40px -26px rgba(28, 34, 39, .45);
  padding: calc(var(--pad) + 14px);
}
.sheet::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--ink); pointer-events: none; }
.sheet--yellow { background: var(--yellow); color: var(--yellow-ink); }
.zones { position: absolute; top: 10px; left: 10px; right: 10px; height: 0; display: flex; justify-content: space-around; pointer-events: none; }
.zones span { translate: 0 -1px; font-family: var(--sc-font-display); font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-soft); background: inherit; padding: 0 .4rem; line-height: 1; }
.sheet--yellow .zones span { color: #4D420F; }
.sheet-flow { padding: var(--pad); }

/* Schriftfeld: the label schema every object on the page shares */
.tblock { width: 100%; border-collapse: collapse; border: 2px solid currentColor; background: inherit; font-size: var(--sc-t-sm); }
.tblock th, .tblock td { border-top: 1px solid currentColor; padding: .55rem .7rem; text-align: left; vertical-align: top; }
.tblock tr:first-child > * { border-top: 0; }
.tblock th {
  width: 7.5rem; border-right: 1px solid currentColor;
  font-family: var(--sc-font-display); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: inherit; opacity: .78;
}
.tblock td { line-height: 1.4; }
.tblock__big { display: block; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.8rem, 1.4rem + 3.6vw, 5.4rem); line-height: .86; text-transform: uppercase; letter-spacing: .005em; }
.tblock__sub { display: block; margin-top: .35rem; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; }
.tblock__name th { vertical-align: middle; }
.tblock__foot td { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--sc-font-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
.tblock a { color: inherit; font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { .tblock a:hover { color: var(--blue-ink); } }

/* ========================================================== BLATT 1 == */
.b1 { padding: var(--pad); min-height: 100svh; display: grid; align-items: center; overflow: clip; }
.b1__scene { position: relative; --mx: 0; --my: 0; }
.plane { will-change: transform; }
.plane--back { position: absolute; inset: 0; pointer-events: none; }
.loose { position: absolute; inset: 1.5% -1% -1.5% 1%; background: #F7F7F3; border: 1.5px solid rgba(28, 34, 39, .5); box-shadow: 0 16px 30px -22px rgba(28, 34, 39, .45); }
.loose--a { rotate: -1.6deg; }
.loose--b { rotate: 1.1deg; inset: -1% 1% 2% -1.2%; background: #F4F5F1; }
.plane--sheet { position: relative; }
.b1__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: end; min-height: calc(100svh - 2 * var(--pad) - 2 * (var(--pad) + 14px) - 4px); }
.b1__drawing { margin: 0; align-self: center; }
.iso { width: 100%; height: auto; }
.b1__side { display: flex; flex-direction: column; gap: var(--sc-5); }
.b1__lede { margin: 0; font-size: var(--sc-t-lg); line-height: 1.4; font-weight: 500; max-width: 26ch; text-wrap: balance; }
.plane--trace {
  position: absolute; top: 4%; left: 26%; width: min(30%, 26rem); aspect-ratio: 4 / 3; z-index: 2; pointer-events: none;
  background: rgba(247, 250, 249, .58); border: 1px solid rgba(28, 34, 39, .2);
  box-shadow: 0 10px 22px -16px rgba(28, 34, 39, .4);
  rotate: 3.5deg;
}
.plane--trace svg { width: 100%; height: 100%; }
.plane--ruler { position: absolute; left: -1.5%; bottom: 7%; width: min(46%, 40rem); z-index: 3; pointer-events: none; rotate: -7deg; filter: drop-shadow(6px 10px 8px rgba(28, 34, 39, .28)); }
.plane--ruler svg { width: 100%; height: auto; }

/* ========================================================= DETAIL X == */
.detail__stage.sc-stage { position: sticky; top: 0; }
.detail__stage.sheet { border: 0; box-shadow: none; background: var(--sheet); padding: calc(var(--top-h) + var(--pad) + 14px) calc(var(--pad) + 14px) calc(var(--bot-h) + var(--pad) + 14px); }
.detail__stage.sheet::before { inset: calc(var(--top-h) + 10px) 10px calc(var(--bot-h) + 10px); }
.detail__stage .zones { top: calc(var(--top-h) + 10px); }
.detail__grid { height: 100%; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.detail__draw { position: relative; }
.detail__frame, .detail__iris { position: relative; }
/* the section line sits outside the iris so the blade never clips the handle;
   it arrives once the detail circle is open */
.cut { opacity: clamp(0, calc((var(--sc-p, 1) - .14) * 12), 1); }
.section { width: 100%; height: auto; display: block; }
.state--before, .state--after { transition: none; }
.bubbles g { transition: opacity var(--sc-d-base) var(--sc-ease-out); }
.bubbles g.is-off { opacity: .15; }

.cut { position: absolute; inset: 0; pointer-events: none; --x: calc((20 + var(--cut) * 960) / 1000 * 100%); }
.cut__line {
  position: absolute; top: 2%; bottom: 2%; left: var(--x); width: 2px; translate: -1px 0;
  background: repeating-linear-gradient(to bottom, var(--blue-ink) 0 18px, transparent 18px 24px, var(--blue-ink) 24px 28px, transparent 28px 34px);
}
.cut__tag, .cut__handle {
  position: absolute; left: var(--x); translate: -50% 0;
  display: grid; place-items: center; border-radius: 50%;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.15rem; line-height: 1;
}
.cut__tag { top: -14px; width: 34px; height: 34px; background: var(--sheet); border: 2px solid var(--blue-ink); color: var(--blue-ink); }
.cut__handle {
  bottom: -26px; width: 52px; height: 52px; pointer-events: auto; touch-action: none; cursor: grab;
  background: var(--blue-ink); color: #fff; border: 2px solid var(--blue-ink);
  box-shadow: 0 6px 14px -6px rgba(13, 102, 144, .55), 0 2px 3px rgba(28, 34, 39, .25);
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.cut__handle::before, .cut__handle::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; translate: 0 -50%; }
.cut__handle::before { left: -16px; border-right-color: var(--blue-ink); }
.cut__handle::after { right: -16px; border-left-color: var(--blue-ink); }
.cut__handle:active { cursor: grabbing; transform: scale(.96); }
.cut__handle:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .cut__handle:hover { transform: scale(1.06); } }

.detail__side { display: flex; flex-direction: column; gap: var(--sc-3); }
.detail__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-2xl); line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.detail__note { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.detail__you { margin: var(--sc-3) 0 0; font-size: var(--sc-t-lg); font-weight: 600; color: var(--blue-ink); line-height: 1.3; }
.detail__lines { display: grid; }
.detail__lines p { grid-area: 1 / 1; margin: 0; font-size: var(--sc-t-base); line-height: 1.5; max-width: 34ch; }
.parts { margin-top: var(--sc-4); border-collapse: collapse; width: 100%; font-size: var(--sc-t-sm); border: 1.5px solid var(--ink); }
.parts caption { text-align: left; font-family: var(--sc-font-display); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding-bottom: .4rem; color: var(--ink-soft); }
.parts th, .parts td { border-top: 1px solid rgba(28, 34, 39, .35); padding: .3rem .55rem; text-align: left; }
.parts th { width: 2.4rem; border-right: 1px solid rgba(28, 34, 39, .35); font-family: var(--sc-font-display); font-weight: 700; text-align: center; }
.parts tr.is-off td { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.parts__accent td { background: var(--blue-fill); }

.detail.is-static .detail__stage { position: relative; height: auto; min-height: 100svh; }
.detail.is-static .detail__lines { display: flex; flex-direction: column; gap: var(--sc-2); }
.detail.is-static .detail__lines p { grid-area: auto; }

/* ============================================================== APPS == */
.apps { padding-top: var(--sc-9); }
.apps__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-4) var(--sc-7); align-items: flex-end; margin-bottom: var(--sc-6); }
.apps__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.4rem, 1.2rem + 3.6vw, 5rem); hyphens: auto; line-height: .9; text-transform: uppercase; letter-spacing: .005em; }
.apps__p { margin: 0; max-width: 54ch; color: var(--ink-soft); font-size: var(--sc-t-lg); line-height: 1.45; }
.apps__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink); }
.tile { position: relative; padding: var(--sc-5); background: var(--sheet); border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); display: flex; flex-direction: column; gap: var(--sc-4); min-height: 17rem; }
.tile__icon { width: 64px; height: 64px; color: var(--blue-ink); }
.tile dl { margin: 0; display: grid; gap: .1rem; }
.tile dt { font-family: var(--sc-font-display); font-weight: 600; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.tile dt + dd + dt { margin-top: .7rem; }
.tile dd { margin: 0; font-size: var(--sc-t-sm); line-height: 1.5; color: var(--ink); }
.tile .tile__name { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.8rem; line-height: 1; text-transform: uppercase; }
.tile--note { background: var(--blue-fill); justify-content: space-between; }
.tile--note .tile__name { font-size: 1.45rem; line-height: 1.05; }
.tile--note .btn { align-self: flex-start; }
@media (max-width: 1180px) { .apps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .apps__head { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .apps__grid { grid-template-columns: 1fr; } .tile { min-height: 0; } }

/* =========================================================== BLATT 2 == */
.b2 { padding-top: var(--sc-9); }
.b2__sheet { --sc-ink: var(--yellow-ink); }
.b2__sheet::before { border-color: var(--yellow-ink); }
.b2__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.b2__drawing { margin: 0; }
.elev { width: 100%; height: auto; max-height: 82svh; }
.b2 { --d: 0; }
.elev .draw path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d)); }
.elev__label, .elev__labeltext { opacity: clamp(0, calc((var(--d) - .82) * 6), 1); }
.elev__callouts, .elev__bubbles, .svg-bubble-num, .elev .svg-note-sm { opacity: clamp(0, calc((var(--d) - .9) * 10), 1); }
.elev__fly { opacity: clamp(0, calc((var(--d) - .4) * 3), 1); }
.b2__side { display: flex; flex-direction: column; gap: var(--sc-5); }
.b2__remark { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.2rem, 1.2rem + 3vw, 4.2rem); line-height: .92; text-transform: uppercase; text-wrap: balance; }
.tblock--yellow th { opacity: .85; }

/* ============================================================= FLOWX == */
.flowx__stage { display: flex; align-items: center; padding-top: var(--top-h); padding-bottom: var(--bot-h); }
/* the engine travels scrollWidth minus the window; the rail column eats part
   of the window, so the rail carries that width as trailing room */
.flowx__rail { align-items: stretch; gap: clamp(1.25rem, 2.4vw, 2.5rem); padding-inline: var(--pad) calc(var(--pad) + var(--rail-w)); }
.flowx__rail > * { flex: none; }
.flowx__lead { width: clamp(16rem, 26vw, 24rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sc-4); }
.flowx__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: .9; text-transform: uppercase; }
.flowx__lead p { margin: 0; color: var(--ink-soft); font-size: var(--sc-t-lg); max-width: 24ch; }
.step { width: min(58vw, 34rem); background: var(--sheet); border: 1.5px solid var(--ink); padding: var(--sc-5); display: flex; flex-direction: column; gap: var(--sc-4); box-shadow: 0 20px 34px -26px rgba(28, 34, 39, .5); }
.step__draw { width: 100%; height: auto; border-bottom: 1px solid rgba(28, 34, 39, .25); padding-bottom: var(--sc-3); }
.step dl { margin: 0; display: grid; gap: .3rem; }
.step dt { font-family: var(--sc-font-display); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.step dd { margin: 0; color: var(--ink-soft); }
.step .step__name { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2rem, 1.2rem + 2vw, 3rem); line-height: .95; text-transform: uppercase; color: var(--ink); }
.flowx__end { width: clamp(16rem, 24vw, 22rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sc-5); padding: var(--sc-6); background: var(--yellow); border: 1.5px solid var(--yellow-ink); color: var(--yellow-ink); }
.flowx__remark { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: 2rem; line-height: .95; text-transform: uppercase; }
.flowx__end .btn { align-self: flex-start; }
@media (prefers-reduced-motion: no-preference) {
  /* only the drawing settles; the step's text stays at full contrast */
  .flowx .step__draw { opacity: clamp(.35, calc(.35 + (var(--sc-p, 0) * 5.2 - var(--i, 0)) * .65), 1); }
}
.flowx.is-static .flowx__stage { position: relative; height: auto; padding-block: var(--sc-8); }
.flowx.is-static .flowx__rail { flex-wrap: wrap; transform: none; row-gap: var(--sc-6); }
.flowx.is-static .step { width: min(100%, 34rem); }

/* =========================================================== BLATT 3 == */
.b3 { padding-top: var(--sc-9); }
.b3__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.b3__intro { display: flex; flex-direction: column; gap: var(--sc-5); }
.b3__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: .9; text-transform: uppercase; text-wrap: balance; }
.b3__intro p { margin: 0; color: var(--ink-soft); max-width: 46ch; }
.years { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .6rem; font-weight: 500; }
.b3__intro .years { color: var(--ink); }
.years__n { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(6rem, 3rem + 9vw, 12rem); line-height: .8; color: var(--blue-ink); }
.years__post { flex-basis: 100%; max-width: 26ch; margin-top: var(--sc-3); color: var(--ink-soft); }
.b3__tables { display: flex; flex-direction: column; gap: var(--sc-6); }
.rev { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); font-size: var(--sc-t-sm); }
.rev caption { text-align: left; font-family: var(--sc-font-display); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding-bottom: .45rem; color: var(--ink-soft); }
.rev th, .rev td { border: 1px solid var(--ink); padding: .6rem .7rem; text-align: left; vertical-align: top; }
.rev th { font-family: var(--sc-font-display); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(28, 34, 39, .05); }
.rev td:first-child { width: 3.2rem; text-align: center; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.1rem; }
.rev td:nth-child(2) { width: 7rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; white-space: nowrap; }
.values { margin: 0; }
.values > div { padding-block: var(--sc-4); border-top: 1px solid rgba(28, 34, 39, .3); }
.values > div:last-child { border-bottom: 1px solid rgba(28, 34, 39, .3); }
.values dt { font-weight: 600; font-size: var(--sc-t-lg); }
.values dd { margin: .3rem 0 0; color: var(--ink-soft); max-width: 56ch; }
.tblock--data th { width: auto; }
@media (max-width: 1100px) { .b3__grid { grid-template-columns: 1fr; } }

/* =========================================================== BLATT 4 == */
.b4 { padding-top: var(--sc-9); padding-bottom: calc(var(--bot-h) + var(--pad)); }
.b4__wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "copy plate" ". actions"; gap: var(--sc-5) clamp(1.5rem, 4vw, 4rem); align-items: end; }
.b4__copy { grid-area: copy; display: flex; flex-direction: column; gap: var(--sc-4); align-self: start; }
.b4__title { margin: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: .9; text-transform: uppercase; }
.b4__copy p { margin: 0; color: var(--ink-soft); font-size: var(--sc-t-lg); line-height: 1.45; max-width: 32ch; }
.plate { grid-area: plate; background: var(--sheet); box-shadow: 0 1px 2px rgba(28, 34, 39, .12), 0 30px 50px -30px rgba(28, 34, 39, .55); }
.tblock--plate { font-size: var(--sc-t-base); }
.tblock--plate .tblock__big { font-size: clamp(2.4rem, 1.4rem + 2.8vw, 4.4rem); }
.tblock--plate td a { font-variant-numeric: tabular-nums; }
.plate__photo { width: 34%; padding: 0 !important; border-left: 1px solid currentColor; vertical-align: middle !important; }
.plate__photo img { width: 100%; height: 100%; aspect-ratio: 560 / 293; object-fit: cover; filter: grayscale(.25) contrast(1.02); }
.b4__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: var(--sc-3); }
.foot { margin-top: var(--sc-9); padding-top: var(--sc-5); border-top: 1.5px solid var(--ink); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-4); font-size: var(--sc-t-sm); color: var(--ink-soft); }
.foot p { margin: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--sc-5); }
.foot__links a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }

/* ----------------------------------------------------------- legal -- */
.legal { padding: calc(var(--top-h) + var(--sc-8)) var(--pad) var(--sc-9); }
.legal__inner { max-width: 46rem; }
.legal h1 { margin: 0 0 var(--sc-6); font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-3xl); line-height: .95; text-transform: uppercase; }
.legal h2 { margin: var(--sc-7) 0 var(--sc-2); font-size: var(--sc-t-lg); }
.legal p { color: var(--ink-soft); }
.legal .todo { background: #FFF1B8; color: #3D3410; padding: .1em .35em; }
.legal__back { margin-top: var(--sc-8); }

/* ================================================== phone and tablet == */
@media (max-width: 1023px) {
  :root { --rail-w: 0px; --top-h: 52px; --bot-h: calc(60px + env(safe-area-inset-bottom, 0px)); --pad: 1rem; }
  .rail {
    inset: 0 0 auto 0; width: auto; height: var(--top-h); padding: 0 var(--pad); padding-top: env(safe-area-inset-top, 0px);
    flex-direction: row; align-items: center; gap: var(--sc-4);
    border-right: 0; border-bottom: 1.5px solid var(--ink);
  }
  .rail__mark { font-size: 1.25rem; }
  .rail__h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rail__foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; }
  .rail__ch { display: none; }
  .lang a { min-height: 38px; min-width: 44px; }
  .register { position: fixed; left: 0; right: 0; bottom: 0; height: var(--bot-h); background: var(--ink); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .register ol { height: 60px; display: grid; grid-template-columns: repeat(4, 1fr); border: 0; }
  .register li { border: 0; border-left: 1px solid rgba(251, 251, 248, .2); }
  .register li:first-child { border-left: 0; }
  .register a { height: 100%; padding: .4rem .3rem .4rem .9rem; align-content: center; color: var(--sheet); }
  .register a::before { left: .3rem; width: .4rem; height: .4rem; border-color: var(--sheet); }
  .register a[aria-current]::before { background: var(--sheet); }
  .register__no { color: #B8C0C5; font-size: .66rem; letter-spacing: .1em; }
  .register__name { font-size: 1.05rem; }
  .desk { padding-top: var(--top-h); }
  .b1 { min-height: 0; padding-top: calc(var(--pad) + 4px); }
  .b1__grid { grid-template-columns: 1fr; min-height: 0; }
  .b1__lede { max-width: none; }
  .plane--trace { top: 3%; left: -3%; width: 46%; rotate: -3deg; }
  .plane--ruler { width: 62%; bottom: auto; top: -10px; left: auto; right: -7%; rotate: 2.5deg; }
  .detail__grid { grid-template-columns: 1fr; align-content: center; gap: var(--sc-5); }
  .detail__draw { order: 1; padding: 0 18px 30px; }
  .detail__side { order: 0; gap: var(--sc-2); }
  .detail__title { font-size: 1.9rem; }
  .detail__you { margin-top: 0; font-size: var(--sc-t-base); }
  .detail__lines p { font-size: var(--sc-t-sm); }
  .parts { display: none; }
  .b2__grid { grid-template-columns: 1fr; }
  .elev { max-height: 60svh; }
  /* On a phone the register jump lands on this sheet with two bars eating the
     window, so the two actions come before the plate instead of after it. */
  .b4 { padding-top: var(--sc-5); }
  .b4__wrap { grid-template-columns: 1fr; grid-template-areas: "copy" "actions" "plate"; }
  .step { width: 82vw; }
  .flowx__lead { width: 72vw; }
  .flowx__end { width: 76vw; }
}
@media (max-width: 560px) {
  .tblock th { width: 5.6rem; font-size: .7rem; padding-inline: .5rem; }
  .tblock td { padding-inline: .55rem; }
  .plate__photo { display: none; }
  .sheet { padding: calc(var(--pad) + 12px) calc(var(--pad) + 6px); }
  .zones { display: none; }
}
@media (max-width: 1023px) and (max-height: 700px) { .detail__note, .detail__you { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .plane { transform: none !important; }
  .b2 { --d: 1 !important; }
}