/* FIF HOUSE STYLE v1.2.0 (Lane A, 11 Nov 2026). One token set for the whole site: the dark channel (watch.css), the
   academy (academy.css, same values) and the light organisation pages. Loaded after signature.css.
   Colour: ink #0a0a0b, surfaces #121214/#1b1c1f, paper #fff, text on dark #f4f4f2 / #c9c9c4 / #a3a39d (all >= 7:1 on ink),
   signal yellow #ffe600 for actions, focus and progress only. Department colour as a small tape mark only.
   Type: wide Archivo display, Archivo body 17px, IBM Plex Mono labels never below 12px. Spacing on 8px. Targets 44px.
   Carousels: native scroll-snap, visible Prev/Next buttons, role=group + aria-roledescription=carousel, no auto-advance. */
:root{
  --h-ink:#0a0a0b;--h-surface:#121214;--h-raised:#1b1c1f;--h-paper:#fff;
  --h-on-ink:#f4f4f2;--h-on-ink-2:#c9c9c4;--h-on-ink-3:#a3a39d;--h-line-ink:#2a2a2c;--h-line-ink-2:#4a4b50;
  --h-text:#000;--h-text-2:#4a4a4a;--h-line:#d3d3d3;
  --h-signal:#ffe600;--h-proof:#4c9aff;
  --h-mono:Archivo,"Helvetica Neue",Arial,sans-serif;--h-display:"FIF Display","Archivo",Helvetica,Arial,sans-serif;
  --h-s1:8px;--h-s2:16px;--h-s3:24px;--h-s4:32px;--h-s6:48px;--h-s8:64px;--h-s12:96px;
  --h-gut:clamp(16px,4vw,40px);--h-gap:16px;--h-max:84rem;--h-target:44px;
}
/* department tape colours, shared with Watch and Learn and the academy */
.hrail [data-g],.hcard[data-g]{--dc:#9aa0a6}
.hcard[data-g="1"]{--dc:#ff6b57}.hcard[data-g="2"]{--dc:#4ea1ff}.hcard[data-g="3"]{--dc:#2fd4b5}.hcard[data-g="4"]{--dc:#ff9a3c}.hcard[data-g="5"]{--dc:#b18cff}.hcard[data-g="6"]{--dc:#5ee08a}.hcard[data-g="7"]{--dc:#ff6fd8}.hcard[data-g="8"]{--dc:#ff8fa3}.hcard[data-g="9"]{--dc:#8a8a85}.hcard[data-g="10"]{--dc:#d4b483}

/* ---- site carousel (department guides and other organisation lists) ---- */
.hrail{container-type:inline-size;margin:var(--h-s4) 0}
.hrail-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--h-s1) var(--h-s2);margin-bottom:var(--h-s2)}
.hrail-h h2{margin:0;font-size:clamp(24px,1rem + 1.6vw,40px);line-height:1.05;max-width:24ch}
.hrail-ctl{display:flex;align-items:center;gap:var(--h-s1)}
.hrail-n{font:500 12px/1 var(--h-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--h-text-2);margin-right:6px}
.hrail-b{min-width:var(--h-target);min-height:var(--h-target);display:inline-flex;align-items:center;justify-content:center;border:1.5px solid currentColor;background:transparent;color:inherit;font:600 18px/1 var(--h-display);cursor:pointer}
.hrail-b:hover:not(:disabled){background:var(--h-text);color:var(--h-paper)}
.hrail-b:disabled{opacity:.3;cursor:default}
.hrail-t{--n:1.5;list-style:none;margin:0;padding:4px 0 var(--h-s2);display:grid;grid-auto-flow:column;gap:var(--h-gap);grid-auto-columns:calc((100cqw - var(--n) * var(--h-gap)) / var(--n));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
.hrail-t>li{scroll-snap-align:start;min-width:0;display:flex;margin:0;padding:0}
.hrail-t>li::before{content:none}
@container (min-width:560px){.hrail-t{--n:2.4}}
@container (min-width:820px){.hrail-t{--n:3.4}}
@container (min-width:1100px){.hrail-t{--n:4.3}}
.hcard a{display:flex;flex-direction:column;width:100%;color:inherit;text-decoration:none}
.hcard-art{position:relative;display:block;aspect-ratio:4/5;background:#141416;overflow:hidden}
.hcard-art img{width:100%;height:100%;object-fit:cover;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.hcard a:hover .hcard-art img{transform:scale(1.03)}
.hcard-art::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--dc);z-index:2}
.hcard-k{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.78);color:#fff;font:600 12px/1 var(--h-mono);letter-spacing:.14em;padding:6px 8px}
.hcard-k .tape{display:inline-block;width:14px;height:4px;background:var(--dc)}
.hcard-t{font-family:var(--h-display);font-stretch:110%;font-weight:800;letter-spacing:-.02em;font-size:21px;line-height:1.1;margin:12px 0 6px}
.hcard-d{font-size:15.5px;line-height:1.45;color:var(--h-text-2)}
.hcard a:focus-visible{outline:3px solid var(--h-text);outline-offset:4px}
.hcard a:hover .hcard-t{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.hcard-art img{transition:none}.hcard a:hover .hcard-art img{transform:none}}

/* ---- target size (WCAG 2.2 2.5.8, 24px floor; 44px where we can) ---- */
.crumbs a{display:inline-block;padding-block:10px}
.ff-nav a,.ff-util a,.ff-social a{display:inline-block;padding-block:10px}
.next-list a{display:inline-flex;align-items:center;min-height:var(--h-target)}
.pth-b,.st-car-b{min-width:var(--h-target);min-height:var(--h-target)}
/* path stage label + safety gate line on path pages */
.pth-stage{font:600 12px/1.3 var(--h-mono);letter-spacing:.12em;text-transform:uppercase}
.pth-gate{display:flex;gap:10px;align-items:flex-start;margin:8px 0 12px;padding:10px 12px;border:1.5px solid currentColor;font:500 14px/1.4 var(--h-mono);max-width:46rem}
.pth-gate::before{content:"";flex:none;width:22px;height:16px;margin-top:2px;background:repeating-linear-gradient(-45deg,currentColor 0 3px,transparent 3px 7px)}
.hcard-src{position:absolute;inset:0;display:flex;align-items:flex-end;padding:16px 16px 20px 20px;background:linear-gradient(140deg,#2a2a2c 0,#0a0a0b 70%);color:#fff;font-family:var(--h-display);font-stretch:112%;font-weight:800;font-size:24px;line-height:1.05;letter-spacing:-.02em}
.hcard-src::after{content:"";position:absolute;right:-16px;top:-16px;width:90px;height:90px;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.16) 0 6px,transparent 6px 14px)}
.hcard-case .hcard-k{letter-spacing:.1em;text-transform:uppercase}
/* on dark sections the house carousel inverts */
.band-ink .hrail-n,.st-dark .hrail-n,body.watch-dark .hrail-n{color:#a3a39d}
.band-ink .hcard-d,.st-dark .hcard-d,body.watch-dark .hcard-d{color:#c9c9c4}
.fh-help{display:inline-flex;align-items:center;min-height:var(--h-target)}
.fh-logo{display:inline-flex;align-items:center;min-height:var(--h-target)}
.ff-social a{min-width:var(--h-target);text-align:center}
.st-fm a,a.st-yt{display:inline-block;padding-block:4px;min-height:24px}

/* ---- Learn hub (v1.3.0-preview, lane D; S4 #5): three photo doors, then the section index fills its rows ---- */
.learn-hub .tiles-doors{display:grid;gap:20px;grid-template-columns:1fr;border:0;background:none;margin:1.6rem 0 2.4rem}
@media (min-width:760px){.learn-hub .tiles-doors{grid-template-columns:repeat(3,minmax(0,1fr))}}
.learn-hub .tiles-doors .tile-pic{position:relative;border:0;border-radius:18px;overflow:hidden;min-height:340px;color:#fff;background:#111;box-shadow:0 8px 24px -12px rgba(0,0,0,.35)}
.learn-hub .tiles-doors .tile-img{position:absolute;inset:0;aspect-ratio:auto;height:100%}
.learn-hub .tiles-doors .tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 10%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.92))}
.learn-hub .tiles-doors .tile-k,.learn-hub .tiles-doors .tile-t,.learn-hub .tiles-doors .tile-d,.learn-hub .tiles-doors .tile-a{position:relative;z-index:1;color:#fff;padding-inline:20px}
.learn-hub .tiles-doors .tile-k{margin-top:auto;font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.learn-hub .tiles-doors .tile-t{font-size:clamp(22px,1rem + 1vw,28px);margin-top:6px}
.learn-hub .tiles-doors .tile-d{color:rgba(255,255,255,.88);padding-bottom:4px}
.learn-hub .tiles-doors .tile-a{padding-bottom:20px}
@media (min-width:1100px){.learn-hub .tiles-index{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:600px) and (max-width:1099px){.learn-hub .tiles-index{grid-template-columns:repeat(2,minmax(0,1fr))}}