/* Hero, light (picked by the owner 2026-10-20; was the light preview).
   The hero on the paper ground, the drawn dashboard as white plates with soft
   shadows, warm grey lines, light grey text blocks, and colour where it means
   something (blue bars, status chips, ink figures). Loaded after style.css;
   changes only the hero. Notes: NOTES-hero.md. */

/* Full-bleed hero on paper: a light band between the blue header and the
   charcoal fact strip. Both edges are straight cuts of ground, nothing else. */
.hero.hero-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(540px, calc(100vh - 210px), 760px);
  padding: clamp(64px, 7vw, 104px) 0;
  background: var(--paper);
  color: var(--ink);
}
.hero-field .hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-field .hero-inner { position: relative; }
.hero-field .hero-copy { max-width: 46rem; }
.hero-field h1 { color: var(--ink); }
.hero-field .hero-sub { color: var(--body-p); }

/* Buttons keep their style; the outline one takes ink on paper. Edge
   #77756E on paper 4.1:1, words ink 16.6:1. */
.hero-field .btn-outline { color: var(--ink); box-shadow: inset 0 0 0 1.5px #77756E; }
.hero-field .btn-outline:hover { background: var(--paper2); }

@media (max-width: 1023px) {
  .hero.hero-field { padding-bottom: 176px; }
}
@media (max-width: 640px) {
  .hero.hero-field { min-height: 0; padding: 48px 0 176px; }
}

/* The shadow layer: one empty box per card under the SVG. Only the outer
   shadow paints; the plate itself is drawn in the SVG above it, and the calm
   overlays in the SVG wash the shadows near the text along with the plates. */
.hero-sh {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
.hero-sh i {
  position: absolute;
  display: block;
  box-shadow: 0 1px 2px rgba(21, 22, 26, .07), 0 12px 30px -12px rgba(21, 22, 26, .2);
}
.hero-sh i.lift, .hero-sh i.act {
  box-shadow: 0 2px 4px rgba(21, 22, 26, .08), 0 20px 40px -14px rgba(21, 22, 26, .3);
}

/* The drawing. Solid colours only, so crossings never double up. */
.hero-bp {
  --bp-plate: #FAF9F5;
  --bp-plate-hi: #FFFFFF;
  --bp-line: #D9D5CC;
  --bp-text: #DCD8CF;
  --bp-sunk: #EFEDE7;
  --bp-band: #F2F0EA;
  --bp-fig: #15161A;
  --bp-bar: #A9CBF1;
  --bp-line-hi: #CFCBC1;
  --bp-text-hi: #D2CEC4;
  --bp-sunk-hi: #ECE9E2;
  --bp-band-hi: #F0EEE7;
  /* Parts within 90px (m) and 28px (d) of the text. */
  --bp-line-m: #E2DFD7;
  --bp-line-d: #EAE7E0;
  --bp-text-m: #E4E1D9;
  --bp-sunk-m: #F1EFE9;
  --bp-sunk-d: #F3F1EC;
  --bp-band-m: #F4F2ED;
  --bp-band-d: #F5F3EF;
  --bp-fig-m: #A3A19A;
  --bp-bar-m: #CFE0F4;
  --bp-bar-d: #E3EBF4;
  --bp-z2: .32;
  --bp-z1: .45;
  --bp-blue-fill: rgba(14, 111, 214, .14);
  /* Status tints and inks, the same values as the dashboard screen. */
  --ok: #3F8A56;   --ok-t: #DCEDE0;   --ok-i: #245E38;
  --wait: #BF7F18; --wait-t: #F6E7CB; --wait-i: #77490A;
  --late: #C64A3E; --late-t: #F7DEDA; --late-i: #9B2F25;
}

.hero-bp path {
  fill: none;
  stroke: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
.hero-bp .fr { fill: var(--bp-plate); }
.hero-bp .ln { stroke: var(--bp-line); stroke-width: 1; }
.hero-bp .bx { fill: var(--bp-sunk); }
.hero-bp .tx { stroke: var(--bp-text); stroke-width: 6; }
.hero-bp .tk { stroke-width: 4; }
.hero-bp .tf { stroke-width: 14; }
.hero-bp .tx.fg { stroke: var(--bp-fig); }
.hero-bp .rw { fill: rgba(14, 111, 214, 0); }
.hero-bp .rw.bd { fill: var(--bp-band); }
.hero-bp .bv {
  fill: var(--bp-bar);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.hero-bp .bf { fill: var(--blue); opacity: 0; }

/* Status chips: tint ground, base dot, ink word block. */
.hero-bp .ck.ok { fill: var(--ok-t); }
.hero-bp .ck.wait { fill: var(--wait-t); }
.hero-bp .ck.late { fill: var(--late-t); }
.hero-bp .cd.ok { fill: var(--ok); }
.hero-bp .cd.wait { fill: var(--wait); }
.hero-bp .cd.late { fill: var(--late); }
.hero-bp .ci.ok { stroke: var(--ok-i); }
.hero-bp .ci.wait { stroke: var(--wait-i); }
.hero-bp .ci.late { stroke: var(--late-i); }

/* Calm zones: flat ground-colour overlays, 90px and 28px around the text. */
.hero-bp .z2 { fill: var(--paper); fill-opacity: var(--bp-z2); }
.hero-bp .z1 { fill: var(--paper); fill-opacity: var(--bp-z1); }

/* Pointer lift and the card holding the moving blue: pure white plate, a
   deeper shadow (in the shadow layer), inner parts one step firmer. */
.hero-bp .fr.lift, .hero-bp .fr.act { fill: var(--bp-plate-hi); }
.hero-bp .lift .ln, .hero-bp .act .ln { stroke: var(--bp-line-hi); }
.hero-bp .lift .bx, .hero-bp .act .bx { fill: var(--bp-sunk-hi); }
.hero-bp .lift .tx:not(.fg):not(.ci), .hero-bp .act .tx:not(.fg):not(.ci) { stroke: var(--bp-text-hi); }
.hero-bp .lift .rw.bd, .hero-bp .act .rw.bd { fill: var(--bp-band-hi); }

/* Parts near the text: one shade per part. */
.hero-bp .c .ln.m { stroke: var(--bp-line-m); }
.hero-bp .c .ln.d { stroke: var(--bp-line-d); }
.hero-bp .c .tx.m { stroke: var(--bp-text-m); }
.hero-bp .c .tx.fg.m { stroke: var(--bp-fig-m); }
.hero-bp .c .bx.m { fill: var(--bp-sunk-m); }
.hero-bp .c .bx.d { fill: var(--bp-sunk-d); }
.hero-bp .c .rw.bd.m { fill: var(--bp-band-m); }
.hero-bp .c .rw.bd.d { fill: var(--bp-band-d); }
.hero-bp .c .bv.m { fill: var(--bp-bar-m); }
.hero-bp .c .bv.d { fill: var(--bp-bar-d); }
.hero-bp .c .ck.m { fill-opacity: .55; }
.hero-bp .c .ck.d { fill: var(--bp-sunk-d); fill-opacity: 1; }
.hero-bp .c .cd.m { fill-opacity: .5; }
.hero-bp .c .ci.m { stroke-opacity: .5; }

/* The one blue: a row takes a blue tint, a bar fills full blue, a figure
   block turns blue. */
.hero-bp g.on .bl { stroke: var(--blue); }
.hero-bp .c g.on .rw { fill: var(--bp-blue-fill); }
.hero-bp g.on .bf { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .hero-bp .fr, .hero-bp .ln, .hero-bp .tx, .hero-bp .bx, .hero-bp .rw.bd {
    transition: stroke .2s ease, fill .2s ease;
  }
  .hero-sh i { transition: box-shadow .3s ease; }
  .hero-bp .bl, .hero-bp g[data-g] .rw { transition: stroke .5s ease-in-out, fill .5s ease-in-out; }
  .hero-bp .bf { transition: opacity .5s ease-in-out; }
  .hero-bp g.on .bl, .hero-bp g.on .rw, .hero-bp g.on .bf { transition-delay: .25s; }

  /* Draw-in, first load only: plates and their shadows fade up, inner lines
     ink, boxes and chips fade, bars grow, text blocks fade. */
  .js .hero-sh.draw i {
    animation: bp-fade .45s cubic-bezier(.4, .1, .2, 1) both;
    animation-delay: var(--d, 0s);
  }
  .js .hero-bp.draw .fr {
    animation: bp-plate .45s cubic-bezier(.4, .1, .2, 1) both;
    animation-delay: var(--d, 0s);
  }
  .js .hero-bp.draw .ln {
    stroke-dasharray: 1 1;
    animation: bp-ink .5s cubic-bezier(.3, .6, .2, 1) both;
    animation-delay: var(--d, 0s);
  }
  .js .hero-bp.draw .bx, .js .hero-bp.draw .tx, .js .hero-bp.draw .cd {
    animation: bp-fade .3s ease both;
    animation-delay: var(--d, 0s);
  }
  .js .hero-bp.draw .rw {
    animation: bp-fade .5s ease both;
    animation-delay: var(--d, 0s);
  }
  .js .hero-bp.draw .bv {
    animation: bp-grow .6s cubic-bezier(.2, .7, .1, 1) both;
    animation-delay: var(--d, 0s);
  }
}
@keyframes bp-plate {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}
@keyframes bp-ink {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes bp-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes bp-grow {
  from { transform: scaleY(0); }
  to { transform: none; }
}