/* =========================================================================
   SYBEM — landing styles
   Idiom: a SYBEM technical drawing sheet. Graphite on cool drafting vellum.
   One source of tokens lives in :root. The accent (--redline) is functional
   only — never a "brand colour" smeared across the page.
   ========================================================================= */

:root {
  /* ---- palette: graphite on vellum (§3.1) ------------------------------ */
  --paper:        #F0F1EC; /* cool drafting vellum — NOT a warm cream */
  --paper-inset:  #E6E7E1; /* inset / card ground, one step darker */
  --graphite-900: #232323; /* hardest line, headings (6B) */
  --graphite-700: #4A4A48; /* running text (AA on paper) */
  --graphite-500: #7E7F7A; /* secondary, construction lines */
  --graphite-300: #B6B7B1; /* drafting grid, guidelines */
  --redline:      #B23B2C; /* corrector's pencil — functional use only */

  /* ---- type ------------------------------------------------------------ */
  --mono: "Spline Sans Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Architects Daughter", "Comic Sans MS", cursive;

  /* fluid type scale (intentional, not default ratios) */
  --step--1: clamp(0.72rem, 0.69rem + 0.14vw, 0.80rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.20vw, 1.05rem);
  --step-1:  clamp(1.12rem, 1.05rem + 0.34vw, 1.34rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.74vw, 1.95rem);
  --step-3:  clamp(1.95rem, 1.65rem + 1.50vw, 3.10rem);
  --step-4:  clamp(2.60rem, 2.05rem + 2.75vw, 4.60rem);

  /* ---- structure ------------------------------------------------------- */
  --rail: 56px;            /* left zone-index rail width */
  --frame-pad: 18px;       /* gap between viewport edge and the sheet frame */
  --content-max: 64ch;     /* prose stays a readable column, never full width */
  --sheet-max: 1200px;     /* centred document; always leaves empty gutters on a desktop monitor */

  /* ---- spacing: shared so like elements stay identical (no drift) ------- */
  --cell-pad: 11px 14px;   /* every cell in a drawn parameter table (spec + titleblock) */
  --row-pad: 18px 0;       /* every row in a stepped index list (reasons + plan) */
}

/* =========================================================================
   reset-ish
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite-700);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  /* very faint drafting grid — restrained, low opacity (§3.3) */
  background-image:
    linear-gradient(to right,  rgba(126,127,122,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(126,127,122,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: rgba(178,59,44,0.18); }

/* keyboard focus must stay visible (§7 a11y) */
:focus-visible {
  outline: 2px solid var(--redline);
  outline-offset: 3px;
}

/* =========================================================================
   the sheet — a thin graphite frame around everything (§3.3)
   The frame is ONE fixed outline registered to the viewport: always closed,
   never doubled. Two opaque margin bars (top + bottom) mask the horizontal
   edges so content scrolls cleanly behind them instead of being sliced — so
   the band above the sticky zone numbers (and below the sticky brand) stays
   constant at every scroll position.
   ========================================================================= */
html::before {                 /* the frame outline: border + inner margin line */
  content: "";
  position: fixed;
  top: var(--frame-pad);
  bottom: var(--frame-pad);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--frame-pad)), var(--sheet-max));
  border: 1.5px solid var(--graphite-900);
  box-shadow: inset 0 0 0 8px var(--paper), inset 0 0 0 9px rgba(126,127,122,0.35);
  pointer-events: none;
  z-index: 30;
}
body::before,                  /* opaque top + bottom margin bars (mask content) */
body::after {
  content: "";
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--frame-pad)), var(--sheet-max));
  height: calc(var(--frame-pad) + 9px);
  background: var(--paper);
  pointer-events: none;
  z-index: 29;
}
body::before { top: 0; }
body::after  { bottom: 0; }
.sheet {
  position: relative;
  min-height: calc(100vh - 2 * var(--frame-pad));
  max-width: var(--sheet-max);
  margin-block: var(--frame-pad);
  /* center past the cap, but never tighter than the edge gap on small screens */
  margin-inline: max(var(--frame-pad), (100% - var(--sheet-max)) / 2);
  display: grid;
  grid-template-columns: var(--rail) 1fr;
}

/* left margin rail: the zone index 01 / 02 / 03 (§3.3) ------------------- */
.rail {
  border-right: 1px solid var(--graphite-300);
  padding: 22px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.rail__brand {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--graphite-500);
  margin-top: auto;
  /* rides along like the numbers, pinned at its at-rest distance from the
     bottom margin so the band below it stays constant too */
  position: sticky;
  bottom: calc(var(--frame-pad) + 22px);
}
.rail__zones {
  display: flex; flex-direction: column; gap: 4px;
  list-style: none; margin: 0; padding: 0;
  /* the numbers ride along while you scroll, pinned at exactly their at-rest
     position (top margin + rail padding) so the band above 01 never changes */
  position: sticky;
  top: calc(var(--frame-pad) + 22px);
}
.zone {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--graphite-500);
  text-decoration: none;
  padding: 6px 4px;
  text-align: center;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.zone:hover, .zone.is-active { color: var(--graphite-900); }
.zone.is-active { border-left-color: var(--redline); }

/* =========================================================================
   document body inside the frame
   ========================================================================= */
.doc {
  padding: clamp(20px, 3.2vw, 52px) clamp(20px, 4vw, 72px) 0;
  min-width: 0; /* let the SVG shrink inside the grid track */
}

/* top line of the sheet: project · machine · rev  +  logo (§3.3 ascii) --- */
.masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--graphite-300);
}
.masthead__id {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite-700);
}
.masthead__logo { width: 58px; height: auto; }
.masthead__logo svg { width: 100%; height: auto; }

/* eyebrow / sheet labels ------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--graphite-500);
  margin: 0 0 14px;
}
.eyebrow b { color: var(--redline); font-weight: 500; }

/* headings --------------------------------------------------------------- */
h1, h2, h3 { color: var(--graphite-900); font-weight: 500; line-height: 1.08; }

/* the hero H1 is a sheet title like any other — same size, weight, rhythm as
   the sheet 02 / 03 titles, so the three sheets read with equal authority */
.display {
  font-family: var(--sans);
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.01em;
  max-width: 24ch;
  margin: 0 0 18px;
}
.lead {
  font-size: var(--step-1);
  color: var(--graphite-700);
  max-width: var(--content-max);
  margin: 0 0 8px;
}
.prose { max-width: var(--content-max); }
.prose p { margin: 0 0 1.1em; }

/* section rhythm — most of the air sits ABOVE each sheet; the bottom stays
   tight so the right-aligned sheet tag hugs the dividing line below it ----- */
.sheet-section {
  padding: clamp(52px, 7vw, 100px) 0 clamp(16px, 2.2vw, 26px);
  border-top: 1px solid var(--graphite-300);
}
/* sheet 01 has no rule above it (the masthead rule serves that role), but it
   keeps the SAME top padding as 02/03 so every title sits the same distance
   below the line above it */
.sheet-section:first-of-type { border-top: 0; }
.section-head { margin-bottom: clamp(22px, 3vw, 38px); }
/* the consistent sheet label: right-aligned, just above the line below it */
.sheet-tag {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-500);
  text-align: right;
  margin: clamp(26px, 3.5vw, 48px) 0 0;
}
.section-title {
  font-size: var(--step-2);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  max-width: 24ch;
}

/* =========================================================================
   HERO drawing — the signature (§3.5). Sits wide, the page's one bold move.
   ========================================================================= */
.hero { position: relative; }
.hero__intro { max-width: 52ch; }
.drawing-wrap {
  margin: clamp(20px, 3vw, 40px) 0 0;
  /* left edge stays on the content datum (the title line) so the SECTION label
     aligns with the sheet title at every width; the drawing still bleeds wider
     than the prose, but only to the right */
  margin-right: calc(-1 * clamp(8px, 2vw, 40px));
}
/* the "… - SECTION" drawing label: a real HTML element (not SVG text) so it
   sits on the content datum like the title and keeps one readable size at every
   width - inside the SVG it scaled with the drawing and shrank on narrow screens */
.drawing-label {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-500);
  margin: 0 0 clamp(10px, 1.4vw, 18px);
}
.hydraulic { width: 100%; height: auto; overflow: visible; }

/* =========================================================================
   flow strip — the demoted five-part path, sat under the pump section
   ========================================================================= */
.flowpath { margin-top: clamp(28px, 4vw, 52px); }
.flow__cap {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-500);
  margin: 0 0 14px;
}
.flowstrip {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch;
  font-family: var(--mono); font-size: var(--step--1);
}
.flowstrip li {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--graphite-300);
  background: var(--paper);
}
.flowstrip li + li { margin-left: 36px; }
.flowstrip li + li::before {        /* the → connector between cells */
  content: "\2192";
  position: absolute; left: -27px; top: 50%;
  transform: translateY(-50%);
  color: var(--graphite-500);
}
.flowstrip .fs-n { color: var(--graphite-500); letter-spacing: 0.04em; }
.flowstrip .fs-l { color: var(--graphite-700); text-transform: uppercase; letter-spacing: 0.08em; }
.flowstrip .is-here { border-color: var(--graphite-900); background: var(--paper-inset); }
.flowstrip .is-here .fs-n { color: var(--redline); }
.flowstrip .is-here .fs-l { color: var(--graphite-900); }

/* =========================================================================
   "why a gear pump" — annotated list, NOT three icon cards (avoids tell)
   ========================================================================= */
.reasons {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 60ch;
}
.reasons li {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: 16px;
  padding: var(--row-pad);
  border-bottom: 1px solid var(--graphite-300);
  align-items: baseline;
}
.reasons li:first-child { border-top: 1px solid var(--graphite-300); }
.reasons .idx {
  font-family: var(--mono);
  font-size: var(--step--1);
  color: var(--graphite-500);
  letter-spacing: 0.04em;
}
.reasons .txt { color: var(--graphite-700); }
.reasons .txt b { color: var(--graphite-900); font-weight: 500; }

/* pump spec callout — drawn like a parameter table, qualities not numbers - */
.spec {
  background: var(--paper-inset);
  border: 1px solid var(--graphite-500);
  padding: 0;
  max-width: 44ch;
  align-self: start;
}
.spec__cap {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-700);
  padding: var(--cell-pad);
  border-bottom: 1px solid var(--graphite-500);
}
.spec dl { margin: 0; }
.spec .row {
  display: grid;
  grid-template-columns: 10em 1fr;
  font-family: var(--mono);
  font-size: var(--step--1);
  border-bottom: 1px solid var(--graphite-300);
}
.spec .row:last-child { border-bottom: 0; }
.spec dt {
  padding: var(--cell-pad);
  color: var(--graphite-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-right: 1px solid var(--graphite-300);
}
.spec dd { margin: 0; padding: var(--cell-pad); color: var(--graphite-900); }

/* two-column layout for sheet 02 (prose | spec) ------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1.4fr 0.9fr; }
}

/* =========================================================================
   the plan — three ordered steps (real sequence, numbering is honest)
   ========================================================================= */
.plan { display: grid; gap: 0; max-width: 62ch; margin-top: 8px; }
.plan__step {
  display: grid;
  grid-template-columns: 3.4em 1fr;
  gap: 20px;
  padding: var(--row-pad);
  border-top: 1px solid var(--graphite-300);
  align-items: baseline;
}
.plan__no {
  font-family: var(--mono);
  font-size: var(--step-1);
  color: var(--graphite-900);
}
.plan__step b { color: var(--graphite-900); font-weight: 500; }
.plan__step span { color: var(--graphite-700); }
.roadmap {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--graphite-500);
  margin-top: 22px;
  text-transform: uppercase;
}

/* =========================================================================
   TITLE BLOCK = footer, bottom-right (§5.4). The credibility stamp.
   ========================================================================= */
.colophon {
  display: flex;
  justify-content: flex-end;
  padding: clamp(32px, 4.5vw, 60px) 0 clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--graphite-300);
}
.titleblock {
  border: 1.5px solid var(--graphite-900);
  font-family: var(--mono);
  font-size: var(--step--1);
  min-width: min(380px, 100%);
  background: var(--paper);
}
.titleblock__stamp {
  display: flex; align-items: center; gap: 12px;
  padding: var(--cell-pad);
  border-bottom: 1.5px solid var(--graphite-900);
}
.titleblock__stamp svg { width: 26px; height: auto; }
.titleblock__stamp .wm {
  letter-spacing: 0.3em; font-weight: 500; color: var(--graphite-900);
}
.titleblock .tb-row {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  border-bottom: 1px solid var(--graphite-300);
}
.titleblock .tb-row:last-child { border-bottom: 0; }
.titleblock dt {
  padding: var(--cell-pad);
  color: var(--graphite-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-right: 1px solid var(--graphite-300);
}
.titleblock dd { margin: 0; padding: var(--cell-pad); color: var(--graphite-900); }
.titleblock a { text-decoration: none; border-bottom: 1px solid var(--graphite-500); }
.titleblock a:hover { color: var(--redline); border-color: var(--redline); }

/* =========================================================================
   the SVG drawing — strokes, components, hover, draw-on animation
   ========================================================================= */
.hydraulic .stroke {
  fill: none;
  stroke: var(--graphite-700);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.hydraulic .heavy { stroke: var(--graphite-900); stroke-width: 2.6; }
.hydraulic .thin  { stroke: var(--graphite-500); stroke-width: 1.4; }
.hydraulic .construction {
  stroke: var(--graphite-300);
  stroke-width: 1;
  stroke-dasharray: 6 3;
}
.hydraulic .datum {
  stroke: var(--graphite-500);
  stroke-width: 1;
  stroke-dasharray: 7 2 1 2;
  fill: none;
}
.hydraulic .water { fill: rgba(126,127,122,0.10); stroke: none; }
/* invisible hover/focus target so the whole component area is interactive */
.hydraulic .hit { fill: transparent; pointer-events: all; }

/* labels on the drawing */
.hydraulic .lbl {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--graphite-700);
}
.hydraulic .note {
  font-family: var(--hand);
  font-size: 17px;
  fill: var(--graphite-700);
}

/* numbered part markers + HTML key: desktop uses the leaders/labels, so both
   are hidden here and swapped in at the phone breakpoint (the in-SVG word
   labels are illegibly small once the drawing is scaled to a phone). */
.hydraulic .partkey { display: none; }
.hydraulic .partkey circle { fill: var(--paper); stroke: var(--graphite-700); stroke-width: 1.5; }
.hydraulic .partkey text {
  font-family: var(--mono); font-size: 30px; font-weight: 500;
  fill: var(--graphite-900); text-anchor: middle;
}
.drawing-key { display: none; }

/* a component lights up on hover/focus: line presses harder, callout reddens */
.hydraulic .component { cursor: default; }
.hydraulic .component:hover .stroke,
.hydraulic .component:focus-visible .stroke {
  stroke: var(--graphite-900);
  stroke-width: 3;
}
.hydraulic .component:hover .lbl,
.hydraulic .component:focus-visible .lbl,
.hydraulic .component:hover .note,
.hydraulic .component:focus-visible .note {
  fill: var(--redline);
}
.hydraulic .component:hover .leader,
.hydraulic .component:focus-visible .leader { stroke: var(--redline); }

/* gear bodies are the hardest line in the drawing (the protagonist) */
.hydraulic .gear { stroke: var(--graphite-900); stroke-width: 2.2; }
/* the carry / rotation arrows stay quiet so the gears lead */
.hydraulic .flow, .hydraulic .rot { stroke: var(--graphite-500); }

/* =========================================================================
   draw-on-load animation (§3.4) — pure CSS via normalized pathLength
   ========================================================================= */
.hydraulic .draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 1s ease forwards;
  animation-delay: var(--d, 0s);
}
.hydraulic .fade {
  opacity: 0;
  animation: fade 0.6s ease forwards;
  animation-delay: calc(var(--d, 0s) + 0.5s);
}
/* end on a solid stroke (dasharray:0): the residual normalized dash interacts
   with non-scaling-stroke and leaves a sub-pixel gap at each path's start
   (the top-left corner of every rect) that drifts with viewport width. */
@keyframes draw {
  0%   { stroke-dashoffset: 100; }
  99%  { stroke-dashoffset: 0; stroke-dasharray: 100; }
  100% { stroke-dashoffset: 0; stroke-dasharray: 0; }
}
@keyframes fade { to { opacity: 1; } }

/* reveal callouts as a section scrolls into view (JS toggles .in-view) */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.in-view .reveal { opacity: 1; transform: none; }
.in-view .reveal:nth-child(2) { transition-delay: .08s; }
.in-view .reveal:nth-child(3) { transition-delay: .16s; }
.in-view .reveal:nth-child(4) { transition-delay: .24s; }

/* =========================================================================
   responsive — the rail folds away; the drawing scales but never clips
   ========================================================================= */

/* the hydraulic flow-strip can't wrap cleanly (the → connectors break across
   rows), so it switches to a vertical stack with ↓ connectors BEFORE it would
   wrap — at ≤1000px, well above the phone breakpoint */
@media (max-width: 1000px) {
  .flowstrip { flex-direction: column; align-items: stretch; }
  .flowstrip li + li { margin-left: 0; margin-top: 32px; }
  .flowstrip li + li::before {
    content: "\2193"; left: 50%; top: -25px; transform: translateX(-50%);
  }
}

@media (max-width: 760px) {
  :root { --frame-pad: 10px; }
  .sheet { grid-template-columns: 1fr; }
  .rail {
    flex-direction: row;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--graphite-300);
    padding: 10px 14px;
    gap: 18px;
    justify-content: flex-start;
  }
  .rail__brand { writing-mode: horizontal-tb; transform: none; margin: 0 0 0 auto; position: static; }
  .rail__zones { flex-direction: row; gap: 14px; position: static; }
  .zone { border-left: 0; border-bottom: 2px solid transparent; padding: 2px 0; }
  .zone.is-active { border-left-color: transparent; border-bottom-color: var(--redline); }
  .colophon { justify-content: stretch; }
  .titleblock { min-width: 100%; }
  .drawing-wrap { margin-inline: 0; }
  /* swap the tiny in-SVG words for numbered balloons (keep the leaders) + readable HTML key */
  .hydraulic .lbl { display: none; }
  .hydraulic .partkey { display: block; }
  .hydraulic .note { font-size: 19px; }

  .drawing-key {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin: 18px 0 34px;
    padding: 0;
    list-style: none;
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--graphite-700);
  }
  .drawing-key li { display: flex; align-items: center; gap: 9px; }
  .drawing-key__n {
    flex: none;
    width: 19px; height: 19px;
    border: 1px solid var(--graphite-700);
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; color: var(--graphite-900);
  }
}

/* =========================================================================
   reduced motion — show the finished drawing, no kinetics (§3.4 / §7)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hydraulic .draw { animation: none; stroke-dashoffset: 0; stroke-dasharray: 0; }
  .hydraulic .fade { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
}