/* =============================================================================
   ITDC Systems — the hand-drawn sheets
   Loaded by every page that places one of them (page.render(..., ink=True)),
   after tokens.css and styles.css and before home.css.

   The drawings are inline SVG generated by tools/build_ink_art.py. This sheet is
   the vocabulary they are written in (.ink / .wash / .wc / .ann / .occ / .sk),
   the pigments, and the draw-on: a placed drawing is a figure.ink-fig.reveal,
   main.js marks it .is-in as it scrolls into view, and the strokes draw while
   the washes bloom. The home page's own sections and motion are in home.css.
   ============================================================================= */

/* The sheets paint with a fuller box than the site's wash tokens: glazes for
   shade, the dark of an open window, foliage, timber, rust, road. */
:root {
  --wash-shade: #8C90B4;
  --wash-dark: #56607A;
  --wash-leaf: #86AC72;
  --wash-hill: #B9C6DE;
  --wash-red: #DD7A6C;
  --wash-rust: #C98A5E;
  --wash-wood: #BE9A74;
  --wash-cream: #F1E6CB;
  --wash-capiz: #F3EAD3;
  --wash-road: #CFCABF;
  --wash-denim: #8FA3C4;
  --wash-flagblue: #6F93D2;
  --wash-hair: #3B3A3C;
}

/* --- Drawing vocabulary (scoped to svg: .ink is also a text utility) --------- */
svg .ink { fill: none; stroke: var(--color-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
svg .ink-2 { stroke-width: 1.15; }
svg .ink-3 { stroke-width: 2.4; }
svg .ink-navy { stroke: var(--color-brand-navy); }
svg .ink-faint { fill: none; stroke: var(--color-ink); stroke-width: .9; opacity: .3; }        /* construction lines */
svg .ink.ink-ghost { stroke-width: .8; opacity: .2; }
svg .ink-h { stroke-width: .7; opacity: .82; }                                /* hatching, lattice, anything fine */
svg .ink-far { stroke: var(--color-mute); }                                   /* distance thins the line */
svg .ink-wire { opacity: .6; }
svg .occ { fill: var(--paper-tooth); stroke: none; }                          /* paper laid over what stands behind */
svg .blot { fill: var(--color-ink); stroke: none; opacity: .86; }             /* a solid of ink: a QR module, a microphone head */
svg .blot.ink-navy { fill: var(--color-brand-navy); }
svg .wash { stroke: none; }
.wash-navy { fill: var(--wash-navy); opacity: .55; }
.wash-blue { fill: var(--wash-blue); opacity: .7; }
.wash-sienna { fill: var(--wash-sienna); opacity: .65; }
.wash-gray { fill: var(--wash-gray); opacity: .6; }
.wash-sky { fill: var(--wash-sky); opacity: .75; }
.wash-ochre { fill: var(--wash-ochre); opacity: .62; }
.wash-green { fill: var(--wash-green); opacity: .7; }
.wash-terra { fill: var(--wash-terra); opacity: .6; }
.wash-teal { fill: var(--wash-teal); opacity: .75; }
.wash-shade { fill: var(--wash-shade); opacity: .4; }
.wash-dark { fill: var(--wash-dark); opacity: .62; }
.wash-leaf { fill: var(--wash-leaf); opacity: .6; }
.wash-hill { fill: var(--wash-hill); opacity: .55; }
.wash-red { fill: var(--wash-red); opacity: .72; }
.wash-rust { fill: var(--wash-rust); opacity: .5; }
.wash-wood { fill: var(--wash-wood); opacity: .7; }
.wash-cream { fill: var(--wash-cream); opacity: .8; }
.wash-capiz { fill: var(--wash-capiz); opacity: .7; }
.wash-road { fill: var(--wash-road); opacity: .5; }
.wash-denim { fill: var(--wash-denim); opacity: .75; }
.wash-flagblue { fill: var(--wash-flagblue); opacity: .72; }
.wash-hair { fill: var(--wash-hair); opacity: .7; }
/* A watercolour group: colour laid over the ink, as it is on paper. */
.wc { mix-blend-mode: multiply; }
.fill-navy { fill: var(--color-brand-navy); }
.fill-paper { fill: var(--color-canvas); }
.ann { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; fill: var(--color-mute); }
.ann-navy { fill: var(--color-brand-navy); }
.ann-l { font-size: 13px; }                                               /* the project sketches are drawn on a larger sheet */
.dash { stroke-dasharray: 3 12; animation: hm-travel 2.6s linear infinite; }
.dash-slow { animation-duration: 4.2s; }
@keyframes hm-travel { to { stroke-dashoffset: -30; } }
.led { animation: hm-blink 2.8s steps(1, end) infinite; }
.led:nth-child(2n) { animation-delay: .9s; }
.led:nth-child(3n) { animation-delay: 1.7s; }
@keyframes hm-blink { 0%, 60% { opacity: 1; } 70%, 100% { opacity: .25; } }

/* Generated ink (.sk). --len is the longest stroke in the path: dashes restart
   on every subpath, so all its strokes are drawn together. --d sweeps the pen
   left to right. The gap is longer than the dash so no round cap shows before a
   stroke starts. A sheet draws as it scrolls in (.is-in here, .in on the home page). */
.js .sk { stroke-dasharray: var(--len) calc(var(--len) + 6px); stroke-dashoffset: calc(var(--len) + 3px); transition: stroke-dashoffset 1s var(--ease-out) var(--d, 0s); }
.js .in .sk, .js .is-in .sk { stroke-dashoffset: 0; }
.wc { transition: opacity 1.3s ease calc(var(--d, 1.3s) + .4s); }
/* What moves or labels — travelling dots, LEDs, notes — waits until there is a drawing to belong to. */
.late { transition: opacity 1s ease var(--d, 2s); }
svg .occ { transition: opacity .4s ease .1s; }
.js .ink-fig:not(.is-in) :is(.wc, .late, .occ) { opacity: 0; }
/* The capability map's labels come in last. */
.ink-fig .fade { opacity: 0; transition: opacity .8s ease 1s; }
.ink-fig.is-in .fade, html:not(.js) .ink-fig .fade { opacity: 1; }

/* --- A placed drawing --------------------------------------------------------- */
.ink-fig { margin: 0; }
.ink-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.section--soft .ink-fig .occ { fill: var(--color-canvas-soft); }   /* paper laid on the surface it sits on */
.cta-band .ink-fig .occ { fill: var(--wash-band); }
/* A case study's sketch beside its title: the sketch gets closer to half the width than the hero's aside does. */
.page-hero__grid--art { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
/* A section head with its drawing beside it; the head's bottom margin moves to the pair. */
.ink-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl) var(--space-5xl); align-items: center; margin-bottom: var(--space-5xl); }
.ink-split .section-head { margin-bottom: 0; }
.ink-split:last-child { margin-bottom: 0; }
.ink-split > :not(.ink-fig) > * + * { margin-top: var(--space-xl); }
/* The closing band on the hub pages: the copy keeps its measure, the counter scene sits beside it. */
.cta-band--art { text-align: left; }
.cta-band--art .cta-band__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-3xl) var(--space-5xl); align-items: center; }
.cta-band--art .lead { margin-inline: 0; }
.cta-band--art .btn-row, .cta-band--art .cta-band__sig { justify-content: flex-start; }
@media (max-width: 991px) {
  .ink-split, .cta-band--art .cta-band__grid, .page-hero__grid--art { grid-template-columns: 1fr; }
  .cta-band--art .ink-fig, .page-hero__grid--art .ink-fig { max-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .sk { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .wc, .late, svg .occ, .ink-fig .fade { transition: none !important; }
  .js .ink-fig :is(.wc, .late, .occ, .fade) { opacity: 1 !important; }
  .dash, .led { animation: none !important; }
}
/* Print: the drawings stay, complete. */
@media print {
  .js .sk { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .js .ink-fig :is(.wc, .late, .occ, .fade) { opacity: 1 !important; }
}