/* =====================================================================
   RSIG DESIGN SYSTEM
   1 tokens  2 base  3 type  4 controls  5 environment  6 header
   7 scrub hero  8 static and phone hero  9 entrances  10 motion gates
   ===================================================================== */

/* ---------- 1. TOKENS (package section 2, locked) ---------- */
:root{
  --canvas:#26201A;                 /* Charcoal Umber. Never pure black. */
  --panel:#3B2B24;                  /* Sepia Ink. Cards and raised surfaces. */
  --folio:#F2E9D8;                  /* Parchment, as the ground of the one folio section */
  --accent:#A8432E;                 /* Sanguine. One fill per viewport, and the full strength construction line. */
  --accent-hover:color-mix(in srgb,#A8432E 88%,#26201A);  /* darker, Parchment label 5.51:1 */
  --line:#A8432E;                   /* signature lines, 1px, non scaling stroke */
  --line-whisper:rgba(168,67,46,.34);   /* the breathing echo only */
  --text-primary:#F2E9D8;           /* Parchment. 13.36:1 on canvas, 11.19:1 on panel */
  --text-secondary:#B9A891;         /* sampled from the logo artwork. 6.96:1 on canvas, 5.83:1 on panel */
  --rule:rgba(242,233,216,.16);     /* hairlines, decorative */
  --rule-strong:#98887A;            /* sampled from the logo artwork. 4.71:1 on canvas, 3.94:1 on panel. Borders only, never text on panel */
  --mote:rgba(242,233,216,.5);      /* particles are Parchment, not red */

  /* the two easing tokens, used everywhere */
  --ease-out:cubic-bezier(.16,1,.3,1);      /* arrivals, hovers, state changes */
  --ease-inout:cubic-bezier(.65,0,.35,1);   /* loops, travels, long fades */

  /* legibility: every scrim and shadow is Charcoal Umber at an alpha */
  --tshadow:0 1px 2px rgba(38,32,26,.95),0 3px 12px rgba(38,32,26,.8),0 10px 44px rgba(38,32,26,.85);
  /* the scrubbed caption bands use the two tight layers only. The wide 44px falloff, blurred per glyph, was the measured cause of the
     dropped frames at every band join; the same darkening now comes from one soft gradient behind each text block (.band__in::before). */
  --tshadow-scrub:0 1px 2px rgba(38,32,26,.95),0 2px 14px rgba(38,32,26,.9);
  --chip-bg:rgba(38,32,26,.62);

  /* faces */
  --f-display:'Antonio','Arial Narrow',sans-serif;
  --f-head:'IBM Plex Sans',system-ui,sans-serif;
  --f-body:'Garet','Garet Fallback',system-ui,sans-serif;
  --f-mono:'IBM Plex Sans',system-ui,sans-serif;   /* the label face (owner batch 8: the brand kit is Antonio, IBM Plex Sans, Garet; no Plex Mono) */

  /* layout */
  --hdr-h:64px;
  --gutter:clamp(20px,5vw,72px);
  --wrap:1240px;
  --ring-gap:var(--canvas);         /* the gap colour inside the double focus ring; the folio section overrides it */
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--canvas)}
body{overflow-x:hidden;overflow-x:clip;margin:0;min-height:100vh;background:var(--canvas);color:var(--text-primary);
  font-family:var(--f-body);font-weight:300;font-size:1.0625rem;line-height:1.6;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
@supports not (view-transition-name:none){body{animation:pageIn .9s var(--ease-out) both}}
html.doors body{animation:pageIn 1.1s var(--ease-out) both}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
strong,b{font-weight:400}
[id]{scroll-margin-top:calc(var(--hdr-h) + 16px)}
[hidden]{display:none !important}
::selection{background:var(--accent);color:var(--text-primary)}
main{position:relative;z-index:0;display:block}
main:focus{outline:none}

.vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* the double focus ring: 2px Parchment inside, 2px Sanguine outside, 3px offset */
:focus-visible{outline:2px solid var(--accent);outline-offset:5px;
  box-shadow:0 0 0 3px var(--ring-gap),0 0 0 5px var(--text-primary);border-radius:1px}

/* ---------- 3. TYPE SCALE (package section 3) ---------- */
.t-title{font-family:var(--f-display);font-weight:400;font-size:clamp(2.6rem,6vw,6rem);line-height:1.04;letter-spacing:.06em;text-transform:uppercase}
.t-num{font-family:var(--f-display);font-weight:300;font-size:clamp(5rem,14vw,13rem);line-height:.9;letter-spacing:0;font-variant-numeric:tabular-nums}
.t-card{font-family:var(--f-head);font-weight:600;font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.3;letter-spacing:.005em}
.t-mono{font-family:var(--f-mono);font-weight:400;font-size:12px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.t-mono--500{font-weight:500}
.t-body{max-width:62ch}
.t-dim{color:var(--text-secondary)}
.lede{font-size:clamp(1.0625rem,1.35vw,1.25rem);max-width:56ch}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto}
.sec{position:relative;padding:clamp(96px,16vh,190px) var(--gutter)}
.fig{display:inline-flex;align-items:baseline;gap:.8em;color:var(--text-secondary)}
.fig::before{content:"";width:28px;height:1px;background:var(--accent);align-self:center}   /* the index tick, the only Sanguine tick */

/* ---------- 4. CONTROLS ---------- */
/* the button: Sanguine fill, Parchment label, four Parchment corner ticks so its edge clears 3:1 */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.82em 1.5em;min-height:46px;border:0;border-radius:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  font-family:var(--f-head);font-weight:600;font-size:.95rem;line-height:1.1;letter-spacing:.04em;
  color:var(--text-primary);background:var(--accent);text-shadow:none;
  transition:background-color .45s var(--ease-out),transform .45s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:-5px;pointer-events:none;--t:var(--text-primary);
  background:
    linear-gradient(var(--t),var(--t)) left top/9px 1px,linear-gradient(var(--t),var(--t)) left top/1px 9px,
    linear-gradient(var(--t),var(--t)) right top/9px 1px,linear-gradient(var(--t),var(--t)) right top/1px 9px,
    linear-gradient(var(--t),var(--t)) left bottom/9px 1px,linear-gradient(var(--t),var(--t)) left bottom/1px 9px,
    linear-gradient(var(--t),var(--t)) right bottom/9px 1px,linear-gradient(var(--t),var(--t)) right bottom/1px 9px;
  background-repeat:no-repeat;transition:transform .45s var(--ease-out)}
.btn:hover{background:var(--accent-hover)}
.btn:hover::before{transform:scale(1.035,1.12)}
.btn:active{transform:translateY(1px)}
.btn--sm{min-height:40px;padding:.6em 1.1em;font-size:.85rem}
.btn--sm::before{inset:-4px}

.link{position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--text-primary);
  font-family:var(--f-head);font-weight:600;font-size:.95rem;letter-spacing:.04em}
.link::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--text-primary);opacity:.55;
  transform-origin:left center;transition:transform .5s var(--ease-out),opacity .5s var(--ease-out)}
.link:hover::after{opacity:1;transform:scaleX(1.04)}

/* the chip scrim, for small text over footage */
.chip{display:inline-flex;align-items:center;gap:.7em;padding:0 14px;min-height:32px;color:var(--text-primary);
  background:var(--chip-bg);border:1px solid var(--rule);border-radius:2px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(38,32,26,.85)}
a.chip,button.chip{min-height:44px;text-decoration:none;cursor:pointer;transition:border-color .45s var(--ease-out),background-color .45s var(--ease-out)}
a.chip:hover,button.chip:hover{border-color:var(--rule-strong);background:rgba(38,32,26,.8)}

.motion{appearance:none;background:none;border:1px solid var(--rule-strong);border-radius:2px;cursor:pointer;
  min-height:36px;padding:0 12px;color:var(--text-primary);white-space:nowrap;
  transition:border-color .45s var(--ease-out),background-color .45s var(--ease-out)}
.motion:hover{border-color:var(--text-primary);background:rgba(242,233,216,.06)}
/* the Sound control: a real toggle button (aria-pressed). The small Parchment lamp before the label fills when sound is on. */
.js-sound::before{content:"";display:inline-block;flex:none;width:6px;height:6px;margin-right:.7em;border-radius:50%;border:1px solid currentColor;vertical-align:.08em;
  transition:background-color .45s var(--ease-out)}
.chip.js-sound::before{margin-right:0}
.js-sound[aria-pressed="true"]::before{background:currentColor}
html.no-js .js-sound{display:none}

/* the red chalk filter lives in one zero sized svg at the top of body: filter:url(#chalk). Page drawn lines only, never the logo. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.chalk{filter:url(#chalk)}

/* ---------- 5. THE FIXED ENVIRONMENT LAYER ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas);--mx:50vw;--my:0px}
.env__glow{position:absolute;left:50%;top:50%;width:130vmax;height:130vmax;margin:-65vmax 0 0 -65vmax;
  background:radial-gradient(closest-side,rgba(168,67,46,.10),rgba(59,43,36,.30) 42%,rgba(38,32,26,0) 72%);
  animation:envDrift 90s var(--ease-inout) -31s infinite alternate}
@keyframes envDrift{
  0%{transform:translate3d(-16vw,-12vh,0) scale(1);opacity:.75}
  50%{transform:translate3d(12vw,6vh,0) scale(1.12);opacity:1}
  100%{transform:translate3d(18vw,-8vh,0) scale(.96);opacity:.6}}
/* the surgical lamp on the pointer: one soft Parchment radial light, moved by transform only */
.env__lamp{position:absolute;left:0;top:0;width:96vmax;height:96vmax;margin:-48vmax 0 0 -48vmax;
  background:radial-gradient(closest-side,rgba(255,214,168,.16),rgba(242,190,140,.06) 42%,rgba(242,233,216,0) 100%);
  transform:translate3d(var(--mx),var(--my),0);will-change:transform}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .91 0 0 0 0 .85 .7 0 0 0 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:240px 240px}

/* ---------- 6. HEADER, SKIP LINKS, PHONE SHEET ---------- */
.skip{position:fixed;left:16px;top:12px;z-index:100;padding:.7em 1.1em;background:var(--canvas);color:var(--text-primary);
  border:1px solid var(--rule-strong);font-family:var(--f-head);font-weight:600;font-size:.9rem;text-decoration:none;
  transform:translateY(-200%);transition:transform .45s var(--ease-out)}
.skip:focus{transform:none}
.skip + .skip:focus{transform:none}

.hdr{position:fixed;left:0;right:0;top:0;z-index:50;height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 var(--gutter);padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.hdr::before{content:"";position:absolute;left:0;right:0;top:0;height:150%;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(38,32,26,.82),rgba(38,32,26,.45) 55%,rgba(38,32,26,0));
  transition:opacity .6s var(--ease-out)}
.hdr::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:rgba(38,32,26,.9);border-bottom:1px solid var(--rule);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:opacity .6s var(--ease-out)}
.hdr--solid::before{opacity:0}
.hdr--solid::after{opacity:1}
.hdr__home{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;
  font-family:var(--f-head);font-weight:600;font-size:1.15rem;letter-spacing:.16em;color:var(--text-primary)}
/* the docked logo: the supplied official logo, untouched. It is laid out at title card size and only ever scaled DOWN by a transform,
   so it stays sharp. Docked it shows at 48px (the user knowingly overruled the 180px minimum for the top bar only).
   In the scrub hero the script scrubs the same transform from the title card position into this corner. */
.hdr__home{position:relative;padding-left:60px}
.hdr__logo{position:absolute;left:0;top:50%;width:48px;height:48px;margin-top:-24px;pointer-events:none}
.hdr__logo img{position:absolute;left:0;top:0;width:230px;height:230px;max-width:none;transform-origin:0 0;
  transform:translate3d(0,0,0) scale(.2087);will-change:transform}
@media (max-width:480px){.hdr__word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hdr__home{padding-left:48px;min-width:48px}}
.hdr__nav{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px)}
.hdr__links{display:flex;align-items:center;gap:clamp(12px,1.8vw,30px)}
.hdr__links > li{position:relative}
.hdr__links > li > a,.dd__btn{position:relative;display:inline-flex;align-items:center;gap:.45em;min-height:44px;text-decoration:none;white-space:nowrap;
  font-family:var(--f-head);font-weight:600;font-size:.92rem;letter-spacing:.03em;color:var(--text-primary)}
.dd__btn{appearance:none;background:none;border:0;padding:0;cursor:pointer}
.hdr__links > li > a::after,.dd__btn::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--text-primary);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out)}
.hdr__links > li > a:hover::after,.hdr__links > li > a[aria-current]::after,.dd__btn:hover::after,.dd__btn[aria-expanded="true"]::after,.dd.is-current .dd__btn::after{transform:scaleX(1)}
.dd__btn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .45s var(--ease-out)}
.dd__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
/* the Departments menu: a disclosure. Click, tap, Enter or Space opens it, the arrow keys move inside it, Escape closes it. */
.dd__menu{position:absolute;left:-18px;top:calc(100% + 2px);min-width:268px;padding:8px 0;background:rgba(38,32,26,.97);border:1px solid var(--rule-strong);border-radius:2px;
  visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s linear .35s}
.dd.open .dd__menu{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s}
.dd__menu a{display:flex;align-items:center;min-height:44px;padding:0 18px;text-decoration:none;font-family:var(--f-head);font-weight:600;font-size:.92rem;letter-spacing:.03em;
  color:var(--text-primary);transition:background-color .35s var(--ease-out),padding .45s var(--ease-out)}
.dd__menu a:hover,.dd__menu a:focus-visible{background:rgba(242,233,216,.07);padding-left:24px}
.dd__menu a:focus-visible{outline-offset:-4px;box-shadow:none}
.dd__menu a[aria-current]{color:var(--text-secondary)}
.dd__menu li:first-child a{border-bottom:1px solid var(--rule);margin-bottom:6px;padding-bottom:6px;min-height:50px}
.hdr__menu{display:none;appearance:none;background:none;border:1px solid var(--rule-strong);border-radius:2px;cursor:pointer;
  min-height:44px;min-width:44px;padding:0 14px;font-family:var(--f-head);font-weight:600;font-size:.9rem;letter-spacing:.04em;color:var(--text-primary);
  transition:border-color .45s var(--ease-out),background-color .45s var(--ease-out)}
.hdr__menu:hover{border-color:var(--text-primary)}

.sheet{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--hdr-h) + 24px) var(--gutter) 40px;background:rgba(38,32,26,.97);
  visibility:hidden;opacity:0;transition:opacity .5s var(--ease-out),visibility 0s linear .5s}
.sheet.open{visibility:visible;opacity:1;transition:opacity .5s var(--ease-out),visibility 0s}
.sheet__list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.sheet{overflow-y:auto;justify-content:flex-start;overscroll-behavior:contain}
.sheet__list a{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--rule);text-decoration:none;
  font-family:var(--f-display);font-weight:400;font-size:1.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary)}
.sheet .sheet__list a{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.sheet.open .sheet__list a{opacity:1;transform:none;transition-delay:calc(var(--i,0)*45ms + 80ms)}
.sheet__list a[aria-current]{color:var(--text-secondary)}
.sheet__list a.sheet__sub{min-height:46px;padding-left:22px;font-family:var(--f-head);font-weight:600;font-size:1rem;letter-spacing:.03em;text-transform:none}
.sheet__list a.sheet__sub::before{content:"";position:absolute;left:0;width:12px;height:1px;background:var(--rule-strong)}
.sheet__list a{position:relative}
.sheet__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px}
.sheet__foot .motion{min-height:44px}
.sheet__foot{flex-wrap:wrap;justify-content:flex-start}
html.sheet-open body{overflow:hidden}

@media (max-width:1240px){.hdr__nav > .hdr__sound{display:none}}
@media (max-width:1000px){
  .hdr__links,.hdr__nav > .motion{display:none}
  .hdr__menu{display:inline-flex;align-items:center;justify-content:center}
  .hdr__nav{gap:12px}
}
@media (min-width:1001px){.sheet{display:none}}

/* ---------- 6b. THE DOOR INTRO: a real pair of hinged doors (owner batch 7, 2026-09-23: "I want the actual door to open, lights and smoke") ----------
   Shown only when the script in the head adds html.doors, so with no script the doors never render.
   The plate (assets/door.jpg, or the portrait cut door-p.jpg on screens taller than 4:3) is laid out like background-size:cover:
   --dw x --dh, placed at --ox, --oy. Three layers share that geometry and stay in register to the pixel:
   1. the WALL: the whole plate with the doorway cut out (clip-path, evenodd), the frame, the lit side panels and the floor;
   2. the ROOM behind the doorway: dark while the doors are shut (so nothing leaks), then the light of the theatre as they open, then
      gone, so the page shows through the open doorway;
   3. the SCENE: a perspective box holding the two LEAVES (each the plate's own portion of the door, hinged on its outer edge, swinging
      away from the visitor with the room's light catching its face and its free edge) and the SPILL of light on the floor.
   The haze in the light is a canvas drawn by hero.js only while the doors move. Transform and opacity only; will-change on the leaves
   only while they move. Motion off (html.doors-light): one fade, no swing. */
.door{display:none;position:fixed;inset:0;z-index:90;overflow:hidden;container-type:size}
html.doors .door{display:block}
html.doors-closed{overflow:hidden;scrollbar-gutter:stable}
.door__set{position:absolute;inset:0;transform-origin:50% 50%;
  --pw:2400;--ph:1340;--x0:.2605;--xs:.5004;--x1:.7405;--y0:.0955;--y1:.847;   /* the plate's size and where its doorway and seam are, as fractions */
  --dw:max(100cqw,calc(100cqh * var(--pw) / var(--ph)));--dh:calc(var(--dw) * var(--ph) / var(--pw));
  --ox:calc((100cqw - var(--dw)) / 2);--oy:calc((100cqh - var(--dh)) / 2);
  --ol:calc(var(--ox) + var(--x0) * var(--dw));--ot:calc(var(--oy) + var(--y0) * var(--dh));
  --ow:calc((var(--x1) - var(--x0)) * var(--dw));--oh:calc((var(--y1) - var(--y0)) * var(--dh));
  --sx:calc(var(--ox) + var(--xs) * var(--dw))}
@media (max-aspect-ratio:3/4){.door__set{--pw:1340;--ph:2532;--x0:.1668;--xs:.5;--x1:.8335;--y0:.19;--y1:.7899}}   /* ROUND2 HOME: the tall doorway of door-pt (below) */
.door__wall,.door__skin{background:url(/assets/door.jpg) 0 0/100% 100% no-repeat}
.door__wall{position:absolute;left:var(--ox);top:var(--oy);width:var(--dw);height:var(--dh);
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,
    calc(var(--x0) * 100%) calc(var(--y0) * 100%),calc(var(--x0) * 100%) calc(var(--y1) * 100%),
    calc(var(--x1) * 100%) calc(var(--y1) * 100%),calc(var(--x1) * 100%) calc(var(--y0) * 100%),calc(var(--x0) * 100%) calc(var(--y0) * 100%))}
.door__room{position:absolute;left:var(--ol);top:var(--ot);width:var(--ow);height:var(--oh)}
.door__room i{position:absolute;inset:0}
.door__dark{background:#17120e}
.door__light{opacity:0;background:radial-gradient(ellipse 62% 78% at 50% 72%,rgba(255,228,196,.96),rgba(255,198,142,.78) 30%,rgba(214,140,86,.4) 62%,rgba(120,70,40,0) 100%)}
.door__bloom{position:absolute;left:calc(var(--sx) - var(--ow) * .9);top:calc(var(--ot) - var(--oh) * .4);width:calc(var(--ow) * 1.8);height:calc(var(--oh) * 1.8);pointer-events:none;opacity:0;
  background:radial-gradient(ellipse closest-side,rgba(255,200,150,.5),rgba(255,180,120,.2) 45%,rgba(255,160,100,0) 100%)}
.door__haze{position:absolute;left:0;top:0;pointer-events:none;opacity:0}   /* placed, sized and drawn by hero.js while the doors move */
.door__scene{position:absolute;inset:0;perspective:clamp(900px,90cqw,1600px);perspective-origin:50% 50%;transform-style:preserve-3d}
.door__leaf{position:absolute;top:var(--ot);height:var(--oh);backface-visibility:hidden}
.door__leaf--l{left:calc(var(--ol) - 1px);width:calc(var(--sx) - var(--ol) + 1px);transform-origin:0 50%}
.door__leaf--r{left:var(--sx);width:calc(var(--ol) + var(--ow) - var(--sx) + 1px);transform-origin:100% 50%}
.door__leaf i{position:absolute;inset:0}
.door__skin{background-size:var(--dw) var(--dh)}
.door__leaf--l .door__skin{background-position:calc(var(--ox) - var(--ol) + 1px) calc(var(--oy) - var(--ot))}
.door__leaf--r .door__skin{background-position:calc(var(--ox) - var(--sx)) calc(var(--oy) - var(--ot))}
/* the soft inner shadow on the seam, the wash of room light on the face as the leaf turns, the lit free edge */
.door__leaf::after{content:"";position:absolute;top:0;bottom:0;width:clamp(18px,2.4vw,40px);pointer-events:none}
.door__leaf--l::after{right:0;background:linear-gradient(to left,rgba(38,32,26,.72),rgba(38,32,26,.22) 45%,rgba(38,32,26,0))}
.door__leaf--r::after{left:0;background:linear-gradient(to right,rgba(38,32,26,.72),rgba(38,32,26,.22) 45%,rgba(38,32,26,0))}
.door__face{opacity:0}
.door__leaf--l .door__face{background:linear-gradient(to left,rgba(255,214,170,.6),rgba(255,204,160,.24) 40%,rgba(255,200,150,0))}
.door__leaf--r .door__face{background:linear-gradient(to right,rgba(255,214,170,.6),rgba(255,204,160,.24) 40%,rgba(255,200,150,0))}
.door__rim{width:3px;left:auto;opacity:0;background:linear-gradient(to bottom,rgba(255,220,180,.25),rgba(255,238,214,.95) 50%,rgba(255,220,180,.25));box-shadow:0 0 10px 2px rgba(255,190,130,.5)}
.door__leaf--l .door__rim{right:0}
.door__leaf--r .door__rim{left:0;right:auto}
.door__spill{position:absolute;left:calc(var(--sx) - var(--ow) * .6);top:calc(var(--ot) + var(--oh) - 2px);width:calc(var(--ow) * 1.2);height:max(38cqh,calc(var(--oh) * .7));
  transform-origin:50% 0;transform:rotateX(64deg) scaleX(.04);opacity:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 50% 0%,rgba(255,226,190,.95),rgba(255,200,150,.55) 35%,rgba(230,150,90,.18) 70%,rgba(200,120,70,0) 100%)}
.door__ui{position:absolute;left:0;right:0;top:50%;display:flex;flex-direction:column;align-items:center;gap:14px;transform:translateY(-50%);
  padding-top:44px;transition:opacity .5s var(--ease-out),transform .9s var(--ease-out)}
.door__btn{position:relative;display:block;width:max(180px,min(44vw,260px));aspect-ratio:1;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .6s var(--ease-out)}
.door__btn img{width:100%;height:100%;border-radius:50%}
.door__btn:hover{transform:scale(1.025)}
.door__btn:active{transform:scale(.985)}
.door__btn:focus-visible{border-radius:50%;outline-offset:18px;box-shadow:0 0 0 14px rgba(38,32,26,.6),0 0 0 16px var(--text-primary)}
.door__ring{position:absolute;left:-8%;top:-8%;width:116%;height:116%;max-width:none;overflow:visible;pointer-events:none;transform:rotate(-90deg)}
.door__ring circle{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
.door__ring .d-track{stroke:rgba(242,233,216,.22)}
.door__ring .d-arc{stroke:var(--text-primary);stroke-dasharray:100 100;stroke-dashoffset:var(--ld,100);transition:stroke-dashoffset .3s linear}
.door__echo{position:absolute;inset:-8%;border-radius:50%;border:1px solid rgba(242,233,216,.4);pointer-events:none;opacity:0;animation:echo 5.5s var(--ease-out) -1.2s infinite}
.door__hint{margin-top:22px;padding:3px 10px;color:var(--text-primary);background:var(--chip-bg);border-radius:2px}
.door__skip{min-width:44px;justify-content:center;padding:0 10px;text-shadow:var(--tshadow)}
.door__sound{appearance:none;font-family:var(--f-mono)}
/* opening: the seam flares, the leaves swing away on their hinges (a heavy door starts slowly), the room's light floods the gap and spills
   onto the floor, the light settles as the eyes adjust, then the whole doorway recedes as the visitor walks through it. About 2.9 s. */
html.doors-opening .door{pointer-events:none}
html.doors-opening .door__ui{opacity:0;transform:translateY(-50%) translateY(12px) scale(.84)}
html.doors-opening .door__leaf{will-change:transform;transition:transform 2.05s cubic-bezier(.55,0,.15,1) .25s}
html.doors-opening .door__leaf--l{transform:rotateY(96deg)}
html.doors-opening .door__leaf--r{transform:rotateY(-96deg)}
html.doors-opening .door__face{opacity:.32;transition:opacity 1.6s var(--ease-out) .45s}
html.doors-opening .door__rim{opacity:1;transition:opacity .5s var(--ease-out) .3s}
html.doors-opening .door__dark{opacity:0;transition:opacity .8s var(--ease-out) .3s}
html.doors-opening .door__light{animation:doorLight 2.5s var(--ease-inout) .1s both}
html.doors-opening .door__bloom{animation:doorBloom 2.5s var(--ease-inout) .15s both}
html.doors-opening .door__spill{will-change:transform,opacity;animation:doorSpill 2.3s cubic-bezier(.55,0,.15,1) .3s both}
html.doors-opening .door__set{opacity:0;transform:scale(1.14);transition:opacity .55s var(--ease-inout) 2.3s,transform 1s var(--ease-inout) 2s}
@keyframes doorLight{0%{opacity:0}28%{opacity:.82}62%{opacity:.42}100%{opacity:0}}
@keyframes doorBloom{0%{opacity:0}40%{opacity:1}100%{opacity:.35}}
@keyframes doorSpill{0%{opacity:0;transform:rotateX(64deg) scaleX(.04)}45%{opacity:.9}100%{opacity:.5;transform:rotateX(64deg) scaleX(1.3)}}
/* the lighter version for Motion off and the other static hero gates: same doors, same button, one simple fade, nothing swings */
html.doors-light .door{transition:opacity .6s var(--ease-out)}
html.doors-light.doors-opening .door{opacity:0}
html.doors-light.doors-opening .door__leaf,html.doors-light.doors-opening .door__set{transition:none;transform:none;opacity:1}
html.doors-light.doors-opening .door__light,html.doors-light.doors-opening .door__bloom,html.doors-light.doors-opening .door__spill{animation:none}
html.doors-light.doors-opening .door__dark{opacity:1;transition:none}
html.doors-light.doors-opening .door__face,html.doors-light.doors-opening .door__rim{opacity:0;transition:none}
@media (forced-colors:active){.door__btn{border:1px solid ButtonText}}

/* ---------- 7. THE SCRUB HERO ---------- */
.hero{position:relative;height:1100vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas);isolation:isolate}
.film{position:absolute;inset:0;z-index:0;--px:0;--py:0;
  transform:translate3d(calc(var(--px)*-.6%),calc(var(--py)*-.6%),0) scale(1.04);will-change:transform}
.film__poster,.film__ending{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.film__ending{opacity:0}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;
  transform:translateZ(0);will-change:transform;transition:opacity 1.1s var(--ease-inout)}
.stage.video-ready .film video{opacity:1}
.stage.video-failed .film video{display:none}
.cons{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cons *{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.stage > .grain{z-index:1;opacity:.13}
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(38,32,26,.5),rgba(38,32,26,0) 22%),
    radial-gradient(ellipse 120% 90% at 50% 45%,rgba(38,32,26,0) 35%,rgba(38,32,26,.66) 100%)}
.motes{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}

/* the opening title card: the supplied official logo, untouched, 180px or larger */
/* the opening title card's place: an empty square the script measures. The logo itself is the header's one logo,
   carried here by a transform at progress 0 and docked into the header as scrolling begins. */
.titlecard{position:absolute;left:50%;bottom:7vh;z-index:4;width:clamp(180px,22vh,230px);aspect-ratio:1;margin-left:calc(clamp(180px,22vh,230px)/-2);pointer-events:none;visibility:hidden}
/* the logo reveal at the settle: the official logo registered to the drawn circle, over a soft Charcoal Umber veil that dims the instruments */
.settle__veil,.settle__logo{position:absolute;left:0;top:0;pointer-events:none;opacity:0;will-change:opacity}
.settle__veil{border-radius:50%;background:radial-gradient(closest-side,rgba(38,32,26,.74),rgba(38,32,26,.5) 52%,rgba(38,32,26,0))}
.settle__logo{max-width:none}
.slogo{position:absolute;left:0;top:0;z-index:3;max-width:none;pointer-events:none;opacity:calc(var(--o,0) * var(--ex,1))}
html.no-js .slogo{display:none}

/* the loader: the logo's Parchment outer ring with a mono percentage */
.ring{position:absolute;left:50%;top:40%;z-index:4;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none;color:var(--text-primary);
  display:grid;place-items:center;--rx:0px;--ry:0px;--rs:1;opacity:0;transition:opacity .8s var(--ease-out)}
.ring.is-on{opacity:1}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring__track{fill:none;stroke:var(--rule);stroke-width:1.5}
.ring__arc{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:var(--ld,100);transition:stroke-dashoffset .3s linear}
.ring__pct{position:relative;text-shadow:var(--tshadow)}
.ring.is-done{opacity:0;transform:translate3d(var(--rx),var(--ry),0) scale(var(--rs));
  transition:transform 1.5s var(--ease-inout),opacity 1s var(--ease-inout) .7s}
.ring.is-done .ring__pct{opacity:0;transition:opacity .4s var(--ease-out)}
.ring.is-cue{top:60%}
.ring.is-cue svg.ring__svg{display:none}
.ring__chev{display:none;width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5}
.ring.is-cue .ring__chev{display:block;animation:cueBob 4.2s var(--ease-inout) -1.2s infinite}
.ring.is-cue .ring__pct{display:none}
@keyframes cueBob{0%,100%{transform:translateY(-4px);opacity:.6}50%{transform:translateY(5px);opacity:1}}

/* HUD */
.hud{position:absolute;inset:0;z-index:6;pointer-events:none;--px:0;--py:0;
  transform:translate3d(calc(var(--px)*-4px),calc(var(--py)*-4px),0)}
.hud > *{pointer-events:auto}
.rail{position:absolute;left:clamp(14px,1.8vw,28px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column}
.rail__b{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:flex;align-items:center;gap:12px;height:44px;min-width:44px;color:var(--text-secondary);text-align:left}
.rail__tick{display:block;width:26px;height:1px;background:currentColor;transform:scaleX(.5);transform-origin:left center;
  transition:transform .6s var(--ease-out),background-color .6s var(--ease-out)}
.rail__l{opacity:0;transform:translateX(-6px);padding:3px 8px;background:var(--chip-bg);border-radius:2px;white-space:nowrap;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.rail__b:hover .rail__l,.rail__b:focus-visible .rail__l,.rail__b[aria-current="true"] .rail__l{opacity:1;transform:none}
.rail__b:hover .rail__tick,.rail__b[aria-current="true"] .rail__tick{transform:scaleX(1)}
.rail__b[aria-current="true"]{color:var(--text-primary)}
.readout{position:absolute;right:clamp(16px,2.4vw,36px);bottom:24px;display:flex;gap:10px;pointer-events:none}
.readout .chip{min-width:9.5em;justify-content:center}
.cue{position:absolute;left:clamp(16px,2.4vw,36px);bottom:24px;display:flex;align-items:center;gap:10px}
.cue__scroll{min-height:44px;transition:opacity .6s var(--ease-out)}
.cue__scroll i{display:block;width:1px;height:14px;background:currentColor;animation:cueBob 4.2s var(--ease-inout) -2s infinite}
.cue__skip{transition:opacity .6s var(--ease-out),visibility 0s,border-color .45s var(--ease-out),background-color .45s var(--ease-out)}
.cue__skip.is-off{opacity:0;visibility:hidden;transition:opacity .6s var(--ease-out),visibility 0s linear .6s}
/* the Sound chip shares SKIP INTRO's width, so when that chip retires it slides exactly into its place */
.cue__skip,.cue__sound{width:11em;padding:0;justify-content:center}
.cue__sound{transition:transform .8s var(--ease-inout),border-color .45s var(--ease-out),background-color .45s var(--ease-out)}
.cue__skip.is-off + .cue__sound{transform:translateX(calc(-100% - 10px))}
@media (max-height:560px){.rail,.readout,.cue,.titlecard{display:none}}

/* the caption bands */
.band{position:absolute;inset:0;z-index:5;display:flex;opacity:0;pointer-events:none;--k:0;text-shadow:var(--tshadow-scrub)}
.band .btn{text-shadow:none}
.band.is-on .band__row{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;opacity:calc(.25 + .75*var(--k,1))}
.band__in{position:relative}
/* the wide falloff that the text shadow used to carry: one cheap gradient behind the text block, rasterised once */
.band__in::before{content:"";position:absolute;inset:-14% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse closest-side,rgba(38,32,26,.46),rgba(38,32,26,.3) 55%,rgba(38,32,26,0))}
.band--left{align-items:center;justify-content:flex-start}
.band--left .band__in{margin-left:max(188px,10vw);width:calc(40vw - max(188px,10vw));min-width:250px;padding-top:var(--hdr-h)}
.band--left::before{background:radial-gradient(ellipse 52% 70% at 20% 52%,rgba(38,32,26,.78) 0%,rgba(38,32,26,.52) 46%,rgba(38,32,26,0) 78%)}
.band--lowleft{align-items:flex-end}
.band--lowleft .band__in{padding-bottom:max(108px,15vh)}
.band--lowleft::before{background:radial-gradient(ellipse 58% 66% at 20% 74%,rgba(38,32,26,.88) 0%,rgba(38,32,26,.66) 48%,rgba(38,32,26,0) 80%)}
.band--low{align-items:flex-end;justify-content:center;text-align:center}
.band--low .band__in{width:min(1280px,92vw);padding-bottom:max(84px,8.5vh)}
.band--low::before{background:radial-gradient(ellipse 70% 46% at 50% 86%,rgba(38,32,26,.8) 0%,rgba(38,32,26,.5) 50%,rgba(38,32,26,0) 80%)}
.band--settle .band__in{padding-bottom:max(30px,4.5vh)}
.band--settle::before{background:radial-gradient(ellipse 78% 36% at 50% 92%,rgba(38,32,26,.86) 0%,rgba(38,32,26,.56) 52%,rgba(38,32,26,0) 82%)}

.band__h1{display:block;font:inherit}
.band__eye{display:block;margin-bottom:1.5em;color:var(--text-primary);opacity:var(--k,0)}
.band__head{display:block;font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;line-height:1.06;
  font-size:clamp(2.6rem,min(4.6vw,9.5vh),5rem)}
.band--low .band__head{font-size:clamp(2.2rem,min(4vw,8vh),4.2rem)}
.band__sub{display:block;margin-top:1.1em;font-size:clamp(1.0625rem,1.3vw,1.2rem);font-weight:400;max-width:46ch;
  --ks:clamp(0,(var(--k,0) - .6)*3,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*10px))}
.band--low .band__sub{margin-inline:auto;max-width:60ch}
.band__row{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,36px);margin-top:1.6em;
  --kb:clamp(0,(var(--k,0) - .78)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}

/* split text: the real string is visually hidden, every visual copy is aria-hidden */
.vis{position:relative;display:block}
.w,.c{display:inline-block;will-change:transform,opacity}
/* THE LAG FIX (measured in a visible Chrome at 2x): every caption piece that fades or moves with --k gets its own compositor layer.
   Without this, each scrubbed frame of a band fade or entrance re-rasterised the text together with its three layer 44px text shadow,
   which cost 50 to 130 ms per frame exactly at the band joins (about 30 to 40 dropped frames per pass). Promoted, the shadowed text is
   rasterised once and the scrub only composites. The other half of the fix is --tshadow-scrub in the tokens. Do not remove these without re-running review/selftest/int2/perf2.mjs. */
.band .vis,.band .sharp,.band .soft,.band__eye,.band__sub,.band__row{will-change:transform,opacity}
.c{white-space:pre}
/* (c) blur to sharp: haze clearing. Two stacked copies, static blur, opacity only */
.e-blur .sharp{display:block;opacity:var(--k,0)}
.e-blur .soft{display:block;position:absolute;inset:0;filter:blur(10px);opacity:calc((1 - var(--k,0))*.85)}
/* (f) drift down: the descent */
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-26px))}
/* sweep up and to the right: the arms leaving through the top right corner */
.e-sweep .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*-34px),calc((1 - var(--kc))*28px))}
/* (g) approach from depth: the push */
.e-depth .vis{transform-origin:left center;--kc:clamp(0,var(--k,0)*1.15,1);opacity:var(--kc);transform:scale(calc(.82 + .18*var(--kc)))}
/* approach from depth stacked with blur to sharp */
.e-depthblur .vis{transform-origin:left bottom;transform:scale(calc(.82 + .18*var(--k,0)))}
.e-depthblur .sharp{display:block;opacity:var(--k,0)}
.e-depthblur .soft{display:block;position:absolute;inset:0;filter:blur(10px);opacity:calc((1 - var(--k,0))*.85)}
/* (a) scatter: motes gathering */
.e-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* (e) word by word rise into a staged settle */
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*.55em))}
.e-rise .band__sub{--ks:clamp(0,(var(--k,0) - .66)*4,1)}

/* ---------- 8. THE STATIC AND PHONE HERO ---------- */
.shero{display:none;position:relative}
.shero__pin{position:relative;height:300vh;height:300svh}
.shero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas);isolation:isolate}
.shero__stills{position:absolute;inset:0}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:var(--o,0);
  transform:scale(var(--s,1));will-change:transform,opacity}
.shot--first{--o:1}
.shero__stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(38,32,26,.62),rgba(38,32,26,0) 20%,rgba(38,32,26,0) 50%,rgba(38,32,26,.78) 78%,var(--canvas) 100%)}
.shero__stage > .grain{z-index:1}
.shero .cons{z-index:3}
.shero .motes{z-index:3}
.scap{position:absolute;left:var(--gutter);right:var(--gutter);bottom:max(56px,9svh);z-index:4;opacity:var(--o,0);text-shadow:var(--tshadow);
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;line-height:1.08;font-size:clamp(2.6rem,6vw,6rem);
  transform:translateY(calc((1 - var(--o,0))*14px))}
.sfinal__h{position:absolute;left:var(--gutter);right:var(--gutter);bottom:max(28px,4svh);z-index:4;text-shadow:var(--tshadow);
  opacity:var(--o,0);transform:translateY(calc((1 - var(--o,0))*14px))}
.sfinal__eye{display:block;margin-bottom:1.2em;color:var(--text-primary)}
.sfinal__head{display:block;font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;line-height:1.08;font-size:clamp(2.6rem,6vw,6rem)}
.sfinal__rest{position:relative;padding:8px var(--gutter) clamp(56px,10vh,110px)}
.sfinal__sub{max-width:52ch;font-weight:400}
.sfinal__row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:1.8em}
@media (min-aspect-ratio:1/1){
  .sfinal__h,.sfinal__rest{text-align:center}
  .sfinal__head{font-size:clamp(2.2rem,min(4vw,8vh),4.2rem)}
  .sfinal__sub{margin-inline:auto}
  .sfinal__row{justify-content:center}
}
html.no-js .shero__stage{background:var(--canvas) url(/assets/phone-4.jpg) center/cover no-repeat}
/* the phone stage: the film as a portrait frame sequence on one canvas (hero.js adds .shero--seq when it runs). The pin is longer, because it carries the whole film. */
.seq{position:absolute;inset:0;width:100%;height:100%;display:none}
.shero--seq .seq{display:block;opacity:0;transition:opacity .6s var(--ease-out)}
.shero--seq.seq-ready .seq{opacity:1}
.shero--seq .shot{display:none}
.shero--seq .shero__pin{height:500vh;height:500svh}

/* ---------- 9. ENTRANCES (shared below the fold) ----------
   Usage: <div class="reveal"> with children .part (set --i:0,1,2 for the stagger).
   JS adds .in when the block enters, then .done to retire the stagger delays. */
.reveal .part{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal .part--left{transform:translateX(-26px)}
.reveal .part--scale{transform:scale(.965)}
.reveal .part--fade{transform:none}
.reveal.in .part{opacity:1;transform:none;transition-delay:calc(var(--i,0)*90ms)}
.reveal.in.done .part{transition-delay:0s !important}
/* one living element per section: scope its animation to .live, which JS toggles while on screen */
.js-live:not(.live),.js-live:not(.live)::before,.js-live:not(.live)::after{animation-play-state:paused !important}

/* ---------- 10. MOTION GATES ---------- */
/* hidden tabs and the Motion control pause every loop, pseudo elements included */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* THE FIVE STATIC HERO GATES. These five strings are character identical to the GATES array in the script. */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .hero{display:none}
  .shero{display:block}
}
/* THE OPT IN: html.motion-on (the visitor clicked "Motion: on" under reduced motion) un-hides the scrub stage despite the fifth gate.
   The other four gates are then re-asserted, so a phone that opted in still gets the phone stage. */
@media (prefers-reduced-motion: reduce){
  html.motion-on{scroll-behavior:smooth}
  html.motion-on .hero{display:block}
  html.motion-on .shero{display:none}
}
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  html.motion-on{scroll-behavior:auto}
  html.motion-on .hero{display:none}
  html.motion-on .shero{display:block}
}
/* the sixth gate: the Motion control (and no script at all) */
html.still,html.no-js{scroll-behavior:auto}
html.still .hero,html.no-js .hero{display:none}
html.still .shero,html.no-js .shero{display:block}

@media (pointer:coarse){
  .btn,.btn--sm,.motion{min-height:44px}
  .btn,.btn--sm{display:inline-flex;align-items:center;justify-content:center}
}

/* REDUCED MOTION, honoured completely: no animation, no transition, no delay, every choreographed element in its final state.
   Every rule is scoped to html:not(.motion-on), so the visitor's explicit "Motion: on" opt in lifts all of it at once. */
@media (prefers-reduced-motion: reduce){
  html:not(.motion-on) *,html:not(.motion-on) *::before,html:not(.motion-on) *::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  html:not(.motion-on) body{animation:none !important}
  html:not(.motion-on) .env__glow{animation:none !important;transform:none !important;opacity:.85 !important}
  html:not(.motion-on) .reveal .part{opacity:1 !important;transform:none !important}
  /* the static hero without the pin: only the last still, the construction drawn, the final block */
  html:not(.motion-on) .shero__pin{height:auto !important}
  html:not(.motion-on) .shero__stage{position:relative !important}
  html:not(.motion-on) .shot{display:none !important}
  html:not(.motion-on) .shot--last{display:block !important;opacity:1 !important;transform:none !important}
  html:not(.motion-on) .scap,html:not(.motion-on) .shero .motes{display:none !important}
  html:not(.motion-on) .sfinal__h{opacity:1 !important;transform:none !important}
  html:not(.motion-on) .cons--static *{stroke-dashoffset:0 !important}
  html:not(.motion-on) .slogo{opacity:1 !important}
}
html.still *,html.still *::before,html.still *::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
html.still body{animation:none !important}
html.still .env__glow{animation:none !important;transform:none !important;opacity:.85 !important}
html.still .env__lamp{transform:translate3d(50vw,0px,0) !important}
html.still .reveal .part,html.no-js .reveal .part{opacity:1 !important;transform:none !important}
html.still .shero__pin,html.no-js .shero__pin{height:auto !important}
html.still .shero__stage,html.no-js .shero__stage{position:relative !important}
html.still .shot,html.no-js .shot{display:none !important}
html.still .shot--last{display:block !important;opacity:1 !important;transform:none !important}
html.still .scap,html.no-js .scap,html.still .shero .motes{display:none !important}
html.still .sfinal__h,html.no-js .sfinal__h{opacity:1 !important;transform:none !important}
html.still .cons--static *{stroke-dashoffset:0 !important}
html.still .slogo{opacity:1 !important}
/* in the unpinned still hero on wide screens the stage is shorter so the button stays on the first screen */
@media (prefers-reduced-motion: reduce) and (min-aspect-ratio:1/1){html:not(.motion-on) .shero__stage{height:78vh !important;height:78svh !important}}
@media (min-aspect-ratio:1/1){html.still .shero__stage,html.no-js .shero__stage{height:78vh !important;height:78svh !important}}

@media (forced-colors:active){.btn{border:1px solid ButtonText}.env,.grain,.motes{display:none}}

/* =====================================================================
   BELOW THE FOLD (builder 2)
   11 shared furniture  12 about  13 what we do  14 take the controls
   15 focus  16 the gap  17 faq  18 register  19 footer
   20 page wide systems  21 gates for everything below the fold
   ===================================================================== */

/* ---------- 11. SHARED FURNITURE ---------- */
.sec{--tick:rgba(242,233,216,.3);--tick-strong:rgba(242,233,216,.55);--hair:var(--rule)}
/* the measured divider: a Parchment alpha rule with ticks and the mono figure label. Only the index tick is Sanguine. */
.divider{display:flex;align-items:flex-end;gap:18px;margin-bottom:clamp(36px,6vh,72px)}
.divider .fig{flex:none}
.divider__rule{flex:1;height:11px;transform-origin:left center;
  background:
    linear-gradient(var(--hair),var(--hair)) left bottom/100% 1px no-repeat,
    repeating-linear-gradient(to right,var(--tick) 0 1px,transparent 1px 40px) left bottom/100% 5px no-repeat,
    repeating-linear-gradient(to right,var(--tick-strong) 0 1px,transparent 1px 200px) left bottom/100% 11px no-repeat}
.reveal .divider__rule{transform:scaleX(0);transition:transform 1.5s var(--ease-inout)}
.reveal.in .divider__rule{transform:none}
/* scroll velocity skew lives on a child, never on the element that carries the entrance */
.skew{display:block;transform:skewY(var(--skew,0deg));transform-origin:left center}
/* citation links */
.cite{display:inline-flex;align-items:center;min-height:32px;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:var(--tick-strong);transition:text-decoration-color .45s var(--ease-out),opacity .45s var(--ease-out)}
.cite:hover{text-decoration-color:currentColor}
/* the quiet state of a button: when another Sanguine fill is on screen, this one hands the fill over */
.btn::after{content:"";position:absolute;inset:0;border:1px solid var(--rule-strong);opacity:0;pointer-events:none;transition:opacity .45s var(--ease-out)}
.btn.btn--quiet{background:rgba(38,32,26,.35)}
.btn.btn--quiet::after{opacity:1}
.btn.btn--quiet:hover{background:rgba(242,233,216,.08)}
/* square instrument buttons */
.ibtn{appearance:none;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;background:none;border:1px solid var(--rule-strong);border-radius:2px;cursor:pointer;color:var(--text-primary);
  transition:border-color .45s var(--ease-out),background-color .45s var(--ease-out),opacity .45s var(--ease-out)}
.ibtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.ibtn:hover{border-color:var(--text-primary);background:rgba(242,233,216,.06)}
.ibtn:disabled{opacity:.32;cursor:default;border-color:var(--rule-strong);background:none}
/* the static construction frame per section: shown only when motion is off */
.tcons{display:none;position:absolute;max-width:none;overflow:visible;pointer-events:none;z-index:2}
.tcons *{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}

/* ---------- 12. FIG. 01 ABOUT: split ---------- */
.about__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,7vw,110px);align-items:start}
.about__title{margin-bottom:clamp(32px,5vh,64px)}
.study{position:relative;padding:10px 10px 0;border:1px solid var(--rule-strong);background:rgba(38,32,26,.5)}
.study::before,.study::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;border:0 solid var(--text-primary)}
.study::before{left:-5px;top:-5px;border-width:1px 0 0 1px}
.study::after{right:-5px;bottom:-5px;border-width:0 1px 1px 0}
.study__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--canvas)}
.study__img img{width:100%;height:100%;object-fit:cover}
.study__glow{position:absolute;left:var(--ex);top:var(--ey);width:26%;aspect-ratio:1;margin:-13% 0 0 -13%;border-radius:50%;pointer-events:none;opacity:.25;
  background:radial-gradient(closest-side,rgba(242,233,216,.34),rgba(242,233,216,0))}
.study__glow.live{animation:emberBreath 6.5s var(--ease-inout) -2.1s infinite alternate}
@keyframes emberBreath{from{opacity:.12;transform:scale(.86)}to{opacity:.6;transform:scale(1.08)}}
.study__leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.study__leaders path{fill:none;stroke:rgba(242,233,216,.42);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.study__leaders circle{fill:none;stroke:rgba(242,233,216,.8);stroke-width:1;vector-effect:non-scaling-stroke}
.reveal .study__leaders path{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-inout) .5s}
.reveal.in .study__leaders path{stroke-dashoffset:0}
.study__labels{position:relative;height:46px}
.study__labels span{position:absolute;top:0;padding-top:14px;transform:translateX(-50%);white-space:nowrap;color:var(--text-secondary)}
.study__labels span::before{content:"";position:absolute;left:50%;top:0;width:1px;height:10px;background:rgba(242,233,216,.62)}
.about__text > p + p{margin-top:1.3em}
.mv{margin:clamp(32px,5vh,56px) 0 0;border-top:1px solid var(--rule)}
.mv > div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule)}
.mv dt{color:var(--text-secondary)}
.mv dd{margin:0;font-weight:400}
.context{margin-top:clamp(32px,5vh,56px);padding-left:20px;border-left:1px solid var(--rule-strong)}
.context p{color:var(--text-secondary)}
.context__cites{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:12px}
@media (max-width:860px){
  .about__grid{grid-template-columns:minmax(0,1fr)}
  .mv > div{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* ---------- 13. FIG. 02 WHAT WE DO: the native horizontal scroll region ---------- */
.wwd{--pad:max(var(--gutter),calc((100vw - var(--wrap))/2))}
.wwd__head{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-bottom:clamp(36px,6vh,64px)}
.wwd__head .t-title{max-width:16ch}
.wwd__head .lede{justify-self:end;color:var(--text-secondary)}
.acts{position:relative;margin-inline:calc(var(--gutter)*-1);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.acts::-webkit-scrollbar{display:none}
.acts:focus-visible{outline-offset:-6px;box-shadow:none}
.acts.is-drag{scroll-snap-type:none;cursor:grabbing;-webkit-user-select:none;user-select:none}
.acts__list{display:flex;gap:clamp(16px,2vw,30px);width:max-content;padding:6px var(--pad) 30px}
.act{position:relative;flex:none;width:min(78vw,390px);min-height:clamp(430px,58vh,540px);display:flex;flex-direction:column;
  padding:0 8px 4px 24px;border-left:1px solid var(--rule);scroll-snap-align:start}
.act__top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-secondary)}
.status{display:inline-flex;align-items:center;gap:.7em;min-height:26px;padding:0 10px;border:1px solid var(--rule);border-radius:2px;color:var(--text-secondary);white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid currentColor}
.status--held{color:var(--text-primary);border-color:var(--rule-strong)}
.status--held::before{background:currentColor}
.act__num{display:block;margin:clamp(28px,5vh,52px) 0 0;color:var(--text-primary);opacity:.3;transition:opacity .9s var(--ease-out)}
.act.is-cur .act__num,html.no-js .act__num{opacity:.92}
.act__steps{width:100%;max-width:220px;height:16px;margin:30px 0 0;overflow:visible}
.act__steps line{stroke:var(--tick-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.act__steps circle{fill:var(--canvas);stroke:var(--tick-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.act__steps circle.on{fill:var(--text-primary);stroke:var(--text-primary)}
.act h3{margin-top:68px}
.act__steps + h3{margin-top:22px}
.act__txt{margin-top:10px;color:var(--text-secondary);max-width:34ch}
.acts__bar{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;margin-top:8px}
.acts__count{min-width:5.2em;color:var(--text-primary)}
.acts__track{position:relative;flex:1 1 160px;height:11px;
  background:linear-gradient(var(--rule),var(--rule)) left center/100% 1px no-repeat}
.acts__thumb{position:absolute;left:0;top:5px;width:calc(100%/var(--n,4));height:1px;background:var(--text-primary);transform:translate3d(var(--tx,0px),0,0)}
.acts__thumb::after{content:"";position:absolute;left:0;right:0;top:-5px;height:11px;opacity:.2;
  background:radial-gradient(closest-side,rgba(242,233,216,.8),rgba(242,233,216,0))}
.acts__thumb.live::after{animation:thumbBreath 5s var(--ease-inout) -1.4s infinite alternate}
@keyframes thumbBreath{from{opacity:.08}to{opacity:.5}}
.acts__hint{flex:1 1 100%;color:var(--text-secondary)}
.wwd__foot{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-top:clamp(36px,6vh,64px);padding-top:26px;border-top:1px solid var(--rule)}
.wwd__note{color:var(--text-secondary);max-width:48ch}
html.no-js .acts__bar{display:none}

/* ---------- 14. FIG. 03 TAKE THE CONTROLS: the full width dark stage ---------- */
.ctl{padding-inline:0;touch-action:pan-y;overflow:hidden;
  background:linear-gradient(to bottom,rgba(38,32,26,0),rgba(38,32,26,.78) 16%,rgba(38,32,26,.78) 84%,rgba(38,32,26,0))}
.ctl__in{position:relative;padding-inline:var(--gutter)}
.ctl .divider{justify-content:center}
.ctl .divider__rule{display:none}
.ctl__title{text-align:center}
.ctl__title .skew{transform-origin:center center}
.ctl__zone{position:relative;display:grid;place-items:center;height:clamp(400px,56vh,480px);padding-top:150px}
.ctl__target{position:relative;width:148px;height:148px}
.hold{position:relative;z-index:1;width:148px;height:148px;display:grid;place-items:center;padding:0 20px;border:0;border-radius:50%;cursor:pointer;text-align:center;
  background:var(--accent);color:var(--text-primary);line-height:1.55;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .6s var(--ease-out),transform .6s var(--ease-out)}
.hold:hover{background:var(--accent-hover)}
.hold:focus-visible{border-radius:50%}
.hold.is-holding{transform:scale(.965)}
.ctl__ring{position:absolute;left:-24px;top:-24px;width:196px;height:196px;max-width:none;pointer-events:none;transform:rotate(-90deg)}
.ctl__ring circle{fill:none}
.ctl__ring .r-track{stroke:var(--rule-strong);stroke-width:1;stroke-dasharray:2 5.875}
.ctl__ring .r-arc{stroke:var(--text-primary);stroke-width:3;stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--hp,0)*100)}
.ctl__echo{position:absolute;inset:-24px;border-radius:50%;border:1px solid var(--line-whisper);pointer-events:none;opacity:0}
.ctl__echo.live{animation:echo 5.5s var(--ease-out) -1.8s infinite}
@keyframes echo{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.42)}}
.ctl.is-done .hold{background:rgba(38,32,26,.4);cursor:default}
.ctl.is-done .ctl__echo{animation:none;opacity:0}
/* the instrument tip: follows the pointer at one third of its movement */
.ctl__tool{position:absolute;left:50%;top:50%;width:520px;height:520px;max-width:none;margin:-470px 0 0 118px;pointer-events:none;overflow:visible;
  transform:translate3d(var(--ix,0px),var(--iy,0px),0);will-change:transform}
.ctl__tool *{fill:none;stroke:rgba(242,233,216,.6);stroke-width:1;vector-effect:non-scaling-stroke}
.ctl__tool .fillc{fill:var(--canvas)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);max-width:var(--wrap);margin:clamp(28px,5vh,56px) auto 0}
.fact{position:relative;padding-top:18px;border-top:1px solid var(--rule);opacity:.44;transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);transform:translateY(8px)}
.fact::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--text-primary);transform:scaleX(0);transform-origin:left center;transition:transform 1.2s var(--ease-inout)}
.fact__n{display:block;margin-bottom:10px;color:var(--text-secondary)}
.ctl.is-done .fact{opacity:1;transform:none}
.ctl.is-done .fact::before{transform:scaleX(1)}
.ctl.is-done .fact:nth-child(2),.ctl.is-done .fact:nth-child(2)::before{transition-delay:.55s}
.ctl.is-done .fact:nth-child(3),.ctl.is-done .fact:nth-child(3)::before{transition-delay:1.1s}
.ctl__end{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:clamp(36px,6vh,64px);text-align:center;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),visibility 0s linear .9s}
.ctl.is-done .ctl__end{opacity:1;visibility:visible;transform:none;transition:opacity .9s var(--ease-out) 1.7s,transform .9s var(--ease-out) 1.7s,visibility 0s}
.ctl__close{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.4rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.15}
.ctl.is-pinned .motion{display:none}
html.no-js .fact{opacity:1;transform:none}
html.no-js .ctl__end{opacity:1;visibility:visible;transform:none}
html.no-js .ctl__zone,html.no-js .ctl__end .motion{display:none}
@media (max-width:860px){
  .facts{grid-template-columns:minmax(0,1fr)}
  .ctl__tool{width:380px;height:380px;margin:-380px 0 0 84px}
}

/* ---------- 15. FIG. 04 FOCUS: asymmetric ---------- */
.focus__head{margin-bottom:clamp(36px,6vh,64px)}
.focus__head .lede{margin-top:22px;color:var(--text-secondary)}
.focus__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:start}
.focus__side{display:grid;gap:clamp(20px,2.6vw,40px)}
.plate{background:var(--panel);border:1px solid var(--rule)}
.plate__img{position:relative;overflow:hidden;background:var(--canvas)}
.plate__img img{width:100%;height:100%;object-fit:cover}
.plate--lead .plate__img{aspect-ratio:1600/1116}
.plate--lead .plate__img img.live{animation:plateDrift 26s var(--ease-inout) -9s infinite alternate}
@keyframes plateDrift{from{transform:scale(1)}to{transform:scale(1.045)}}
.plate--side .plate__img{aspect-ratio:16/9}
.plate__txt{padding:clamp(18px,2.2vw,32px)}
.plate--lead .plate__txt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:12px 32px;align-items:baseline}
.plate--lead h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.plate__txt p{color:var(--text-secondary)}
.plate--side .plate__txt p{margin-top:8px;font-size:1rem}
@media (max-width:860px){
  .focus__grid{grid-template-columns:minmax(0,1fr)}
  .plate--lead .plate__txt{grid-template-columns:minmax(0,1fr)}
}

/* ---------- 16. FIG. 05 THE GAP: the inset Parchment folio ---------- */
.gap{padding-inline:clamp(12px,4vw,72px)}
.folio{position:relative;max-width:1320px;margin-inline:auto;padding:clamp(40px,7vw,96px) clamp(22px,6vw,96px) clamp(36px,6vw,80px);
  background:var(--folio);color:var(--canvas);
  --ring-gap:var(--folio);--tick:rgba(38,32,26,.3);--tick-strong:rgba(38,32,26,.6);--hair:rgba(38,32,26,.3)}
.folio::before{content:"";position:absolute;left:clamp(10px,2.4vw,40px);top:0;bottom:0;width:1px;background:var(--line-whisper);pointer-events:none}
.folio :focus-visible{box-shadow:0 0 0 3px var(--folio),0 0 0 5px var(--canvas)}
.folio ::selection{background:var(--canvas);color:var(--folio)}
.folio .fig{color:var(--accent)}
.folio .t-dim{color:var(--panel)}
.gap__title{max-width:12ch}
.gap__scale{position:relative;margin-top:clamp(56px,9vh,110px)}
.gap__rule{position:relative;height:23px;
  background:
    linear-gradient(var(--canvas),var(--canvas)) left bottom/100% 1px no-repeat,
    repeating-linear-gradient(to right,var(--tick-strong) 0 1px,transparent 1px 10%) left bottom/100% 11px no-repeat,
    repeating-linear-gradient(to right,var(--tick) 0 1px,transparent 1px 2%) left bottom/100% 5px no-repeat;
  border-right:1px solid var(--tick-strong);transform-origin:left center}
.reveal .gap__rule{transform:scaleX(0);transition:transform 1.6s var(--ease-inout)}
.reveal.in .gap__rule{transform:none}
.gap__mark{position:absolute;bottom:0;left:var(--v);width:2px;height:23px;margin-left:-1px;background:var(--canvas)}
.gap__mark.live::after{content:"";position:absolute;left:-6px;top:-10px;width:14px;height:14px;border-radius:50%;border:1px solid var(--canvas);opacity:0;animation:markPulse 6s var(--ease-out) -2.4s infinite}
@keyframes markPulse{0%{opacity:.7;transform:scale(.5)}60%,100%{opacity:0;transform:scale(1.7)}}
.gap__ends{display:flex;justify-content:space-between;margin-top:8px;color:var(--panel)}
.gap__leaders{display:block;width:100%;height:64px;overflow:visible}
.gap__leaders path{fill:none;stroke:rgba(38,32,26,.5);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.reveal .gap__leaders path{stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-inout) .9s}
.reveal.in .gap__leaders path{stroke-dashoffset:0}
.gap__marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.mark{padding-left:16px;border-left:1px solid rgba(38,32,26,.5)}
.mark__num{position:relative;display:block;font-size:clamp(3.6rem,7.4vw,7rem);line-height:1;color:var(--canvas)}
.mark__anim{position:absolute;left:0;top:0;display:none}
.mark__num.is-counting .mark__real{opacity:0}
.mark__num.is-counting .mark__anim{display:block}
.mark__txt{margin-top:16px;max-width:40ch}
.mark .cite{margin-top:10px;color:var(--accent)}
.gap__foot{margin-top:clamp(36px,6vh,64px);padding-top:20px;border-top:1px solid rgba(38,32,26,.3);color:var(--panel)}
@media (max-width:760px){
  .gap__marks{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .gap__leaders{display:none}
  .gap__scale{margin-top:150px}
}

/* ---------- 17. FIG. 06 FAQ: single column disclosure list ---------- */
.faq__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,860px);gap:32px clamp(32px,6vw,96px);align-items:start}
@media (max-width:980px){.faq__grid{grid-template-columns:minmax(0,1fr)}}
.faq__list{position:relative;border-top:1px solid var(--rule-strong)}
.faq__scan{position:absolute;left:-18px;top:0;width:1px;height:64px;background:linear-gradient(to bottom,rgba(242,233,216,0),rgba(242,233,216,.6),rgba(242,233,216,0));pointer-events:none;opacity:.7}
.faq__scan.live{animation:scan 16s var(--ease-inout) -5s infinite alternate}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(420px)}}
.faq__item{border-bottom:1px solid var(--rule-strong)}
.faq__q{margin:0}
.faq__q button{appearance:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:18px 4px;background:none;border:0;cursor:pointer;text-align:left;color:var(--text-primary);
  transition:color .45s var(--ease-out),padding .6s var(--ease-out)}
.faq__q button:hover{padding-left:12px}
.faq__ico{position:relative;flex:none;width:18px;height:18px}
.faq__ico::before,.faq__ico::after{content:"";position:absolute;left:0;top:8.5px;width:18px;height:1px;background:currentColor;transition:transform .6s var(--ease-inout)}
.faq__ico::after{transform:rotate(90deg)}
.faq__item.open .faq__ico::after{transform:rotate(0deg)}
.faq__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .65s var(--ease-inout),visibility 0s linear .65s}
.faq__item.open .faq__a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .65s var(--ease-inout),visibility 0s}
.faq__a > div{min-height:0;overflow:hidden}
.faq__a p{padding:0 4px 28px;max-width:62ch;color:var(--text-secondary);opacity:0;transform:translateY(-6px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.faq__item.open .faq__a p{opacity:1;transform:none;transition-delay:.15s}
html.no-js .faq__a{grid-template-rows:1fr;visibility:visible}
html.no-js .faq__a p{opacity:1;transform:none}
html.no-js .faq__ico{display:none}

/* ---------- 18. FIG. 07 REGISTER: centred inside the full strength construction ---------- */
.reg{text-align:center}
.reg .divider{justify-content:center}
.reg .divider__rule{display:none}
.reg__logo{width:clamp(180px,17vw,230px);height:auto;margin:0 auto clamp(40px,6vh,64px)}
.reg__frame{position:relative;width:min(100%,640px);aspect-ratio:1;margin-inline:auto}
.reg__zone{position:absolute;left:10%;right:10%;top:21%;height:64%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2.4vh,26px)}
.reg__title{font-size:clamp(2.1rem,5.2vw,4.1rem)}
.reg__title .skew{transform-origin:center center}
.reg__zone .lede{max-width:34ch;font-size:clamp(1rem,1.3vw,1.2rem)}
.reg__below{margin-top:clamp(40px,7vh,72px)}
.reg__soon{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-head);font-weight:600;font-size:clamp(1.1rem,1.6vw,1.4rem)}
.reg__dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--text-primary);flex:none}
.reg__dot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--text-primary);opacity:0}
.reg__dot.live::after{animation:echo 4.6s var(--ease-out) -1.1s infinite}
.reg__events{margin:18px auto 0;max-width:46ch;color:var(--text-secondary)}

/* ---------- 19. FOOTER (injected by site.js from one template) ---------- */
.ftr{position:relative;z-index:1;background:var(--canvas);border-top:1px solid var(--rule);padding:clamp(56px,9vh,104px) var(--gutter) 36px}
.ftr__top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.ftr__logo img{width:180px;height:auto}
@media (min-width:480px){.ftr__logo img{width:clamp(400px,32vw,480px)}}
.ftr__side{display:grid;gap:22px;justify-items:start}
.ftr__line{max-width:40ch;font-weight:400}
.ftr__uni{display:flex;align-items:center;gap:16px}
.ftr__uni p{color:var(--text-secondary);max-width:30ch;font-size:.95rem}
/* the Alfaisal University logo: untouched, on a small white tile, never wider than 84px */
.logo-tile{display:inline-block;flex:none;padding:8px 10px;background:#fff;border-radius:2px;line-height:0}
.logo-tile img{width:64px;height:auto;max-width:84px}
.ftr__cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px clamp(20px,2.6vw,44px);margin-top:clamp(40px,6vh,72px);padding-top:clamp(28px,4vh,44px);border-top:1px solid var(--rule)}
.ftr__col h2{margin-bottom:10px;color:var(--text-secondary);font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ftr__col a{position:relative;display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-family:var(--f-head);font-weight:600;font-size:.92rem;letter-spacing:.03em;overflow-wrap:anywhere}
.ftr__col a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--text-primary);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out)}
.ftr__col a:hover::after{transform:scaleX(1)}
.ftr__col li{display:block}
.ftr__addr{margin-top:8px;color:var(--text-secondary);font-size:.95rem;max-width:26ch}
.ftr__ctl{display:flex;flex-wrap:wrap;gap:12px}
.ftr__small{margin-top:clamp(36px,5vh,60px);padding-top:22px;border-top:1px solid var(--rule);color:var(--text-secondary);font-size:.9rem;max-width:none}
@media (max-width:1100px){.ftr__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.ftr__top{grid-template-columns:minmax(0,1fr);justify-items:start}}
@media (max-width:620px){.ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 20. PAGE WIDE SYSTEMS ---------- */
/* the travelling instrument: ONE overlay carrying the construction. It lives in document space, so while it is locked on a
   section's key object it scrolls with the page on the compositor and cannot jitter. Transform and opacity only, delta gated. */
.trav{position:absolute;left:0;top:0;z-index:5;width:2px;height:2px;pointer-events:none;opacity:0;visibility:hidden;will-change:transform,opacity}
.trav.is-on{visibility:visible}
.trav svg{display:block;width:2px;height:2px;overflow:visible}
.trav svg *{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
/* the reticle: an aiming ring that trails the pointer and becomes four corner brackets around the control it locks onto */
.ret{position:fixed;left:0;top:0;z-index:2147483600;width:var(--rw,34px);height:var(--rh,34px);pointer-events:none;opacity:0;color:rgba(255,178,132,.78);
  transform:translate3d(calc(var(--rx,-99px) - var(--rw,34px) / 2),calc(var(--ry,-99px) - var(--rh,34px) / 2),0);
  transition:opacity .35s var(--ease-out),color .3s var(--ease-out);will-change:transform,width,height;
  filter:drop-shadow(0 0 3px rgba(255,120,72,.55)) drop-shadow(0 0 9px rgba(214,86,50,.3))}
.ret__ring{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid currentColor;border-radius:50%;
  transition:transform .45s var(--ease-out),opacity .3s var(--ease-out)}
.ret__ring::before,.ret__ring::after{content:"";position:absolute;background:currentColor}
.ret__ring::before{left:50%;top:-5px;width:1px;height:9px;box-shadow:0 34px 0 currentColor}
.ret__ring::after{top:50%;left:-5px;height:1px;width:9px;box-shadow:34px 0 0 currentColor}
.ret__c{position:absolute;width:10px;height:10px;opacity:0;border:0 solid currentColor;transition:opacity .25s var(--ease-out),transform .3s var(--ease-out)}
.ret__c--tl{left:0;top:0;border-width:1.5px 0 0 1.5px;transform:translate(4px,4px)}
.ret__c--tr{right:0;top:0;border-width:1.5px 1.5px 0 0;transform:translate(-4px,4px)}
.ret__c--bl{left:0;bottom:0;border-width:0 0 1.5px 1.5px;transform:translate(4px,-4px)}
.ret__c--br{right:0;bottom:0;border-width:0 1.5px 1.5px 0;transform:translate(-4px,-4px)}
.ret.is-on{opacity:1}
.ret.is-snap .ret__ring{transform:scale(1.4) rotate(45deg)}
.ret.is-lock{color:#FF8A5B}
.ret.is-lock .ret__ring{opacity:0;transform:scale(.4)}
.ret.is-lock .ret__c{opacity:1;transform:none}
.ret.is-lock.is-fire .ret__c--tl{transform:translate(3px,3px)}
.ret.is-lock.is-fire .ret__c--tr{transform:translate(-3px,3px)}
.ret.is-lock.is-fire .ret__c--bl{transform:translate(3px,-3px)}
.ret.is-lock.is-fire .ret__c--br{transform:translate(-3px,-3px)}
.ret.is-ink{color:rgba(168,67,46,.9);filter:none}
.ret.is-text,.ret.is-away,.ret.is-drag{opacity:0}
/* the neon dot: exactly on the pointer, never trailing */
html.has-cur,html.has-cur *{cursor:none !important}
html.has-cur input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),html.has-cur textarea,html.has-cur [contenteditable],html.has-cur .no-cur,html.has-cur .no-cur *{cursor:auto !important}
.cur{position:fixed;left:0;top:0;z-index:2147483601;width:0;height:0;pointer-events:none;opacity:0;transform:translate3d(-99px,-99px,0);will-change:transform}
.cur::before{content:"";position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:#FFF3E4;
  box-shadow:0 0 2px 1px #FFD3AE,0 0 8px 2px rgba(255,122,70,.95),0 0 18px 5px rgba(232,86,46,.55),0 0 36px 11px rgba(168,67,46,.26);
  transition:transform .22s var(--ease-out),box-shadow .3s var(--ease-out)}
.cur.is-on{opacity:1}
.cur.is-lock::before{transform:scale(.72)}
.cur.is-fire::before{transform:scale(1.6);box-shadow:0 0 3px 2px #FFE2C8,0 0 12px 4px rgba(255,122,70,1),0 0 28px 9px rgba(232,86,46,.7),0 0 52px 16px rgba(168,67,46,.35)}
.cur.is-ink::before{background:#fff;box-shadow:0 0 2px 1px rgba(168,67,46,.95),0 0 7px 2px rgba(168,67,46,.7),0 0 16px 5px rgba(168,67,46,.28)}
.cur.is-text,.cur.is-away{opacity:0}
@media (hover: none), (pointer: coarse), (forced-colors: active){.ret,.cur{display:none}html.has-cur,html.has-cur *{cursor:auto !important}}

/* ---------- 21. GATES FOR EVERYTHING BELOW THE FOLD ---------- */
@media (pointer:coarse){
  .cite{min-height:44px}
  .status{min-height:26px}
}
html.no-js .reveal .divider__rule,html.no-js .reveal .gap__rule{transform:none}
html.no-js .reveal .study__leaders path,html.no-js .reveal .gap__leaders path{stroke-dashoffset:0}
/* motion off: the traveller rests and every section shows its own static construction frame */
@media (prefers-reduced-motion: reduce){
  html:not(.motion-on) .trav{display:none !important}
  html:not(.motion-on) .tcons{display:block}
  html:not(.motion-on) .skew{transform:none !important}
  html:not(.motion-on) .fact{transform:none !important}
  html:not(.motion-on) .ctl__tool{transform:none !important}
  html:not(.motion-on) .study__glow,html:not(.motion-on) .plate__img img{transform:none !important}
  html:not(.motion-on) .ctl__echo,html:not(.motion-on) .faq__scan{display:none}
}
html.still .trav{display:none !important}
html.still .tcons{display:block}
html.still .skew,html.still .fact,html.still .ctl__tool,html.still .study__glow,html.still .plate__img img{transform:none !important}
html.still .ctl__echo,html.still .faq__scan{display:none}
@media (forced-colors:active){.trav,.tcons,.ret{display:none !important}.hold{border:1px solid ButtonText}}

/* =====================================================================
   MULTI PAGE SYSTEM (architect, 2026-09-21)
   22 view transitions  23 page hero and breadcrumb  24 section furniture
   25 cards and numbered rows  26 status chips, filter chips, fields
   27 tabs  28 empty and fallback states  29 people  30 event cards,
   fact panel, gallery  31 home: impact, teaser, showcase, recognition,
   banner  32 gates for all of it
   Class names are documented in review/BUILD-NOTES.md.
   ===================================================================== */

/* ---------- 22. CROSS PAGE CONTINUITY ---------- */
@view-transition{navigation:auto}
/* the root animations are the leaf turn: FX CORE BLOCK (engines) at the end of this file */
html.still::view-transition-group(*),html.still::view-transition-old(*),html.still::view-transition-new(*){animation-duration:.001s !important}
@media (prefers-reduced-motion: reduce){
  html:not(.motion-on)::view-transition-group(*),html:not(.motion-on)::view-transition-old(*),html:not(.motion-on)::view-transition-new(*){animation-duration:.001s !important}
}

/* ---------- 23. PAGE HERO AND BREADCRUMB (every page except home) ---------- */
.phero{position:relative;padding:calc(var(--hdr-h) + clamp(56px,11vh,120px)) var(--gutter) clamp(48px,8vh,96px);border-bottom:1px solid var(--rule);overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 70% 90% at 82% 30%,rgba(59,43,36,.85),rgba(38,32,26,0) 70%)}
.phero__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px clamp(32px,6vw,96px);align-items:end}
.phero__eye{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:clamp(20px,3vh,32px);color:var(--text-secondary)}
.phero__eye::before{content:"";width:28px;height:1px;background:var(--accent)}
.phero h1{max-width:16ch}
.phero__lede{margin-top:clamp(20px,3vh,32px);color:var(--text-secondary)}
.phero__row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:clamp(24px,4vh,40px)}
/* the drawn mark on the right of a page hero: a square box the travelling construction can lock onto (add data-trav to it) */
.phero__mark{position:relative;width:clamp(150px,18vw,240px);aspect-ratio:1;flex:none}
.phero__mark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.phero__mark svg *{fill:none;stroke:var(--rule-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.crumbs{margin-bottom:clamp(20px,3vh,32px)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;color:var(--text-secondary)}
.crumbs li{display:inline-flex;align-items:center;gap:10px}
.crumbs li + li::before{content:"/";opacity:.6}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule-strong)}
.crumbs a:hover{text-decoration-color:currentColor}
@media (max-width:860px){.phero__in{grid-template-columns:minmax(0,1fr)}.phero__mark{display:none}}

/* ---------- 24. SECTION FURNITURE ---------- */
.sec--tight{padding-block:clamp(64px,10vh,120px)}
.sec--panel{background:linear-gradient(to bottom,rgba(59,43,36,0),rgba(59,43,36,.5) 14%,rgba(59,43,36,.5) 86%,rgba(59,43,36,0))}
.sec__head{display:grid;gap:22px;margin-bottom:clamp(36px,6vh,64px)}
.sec__head .t-title{max-width:18ch}
.sec__head .lede{color:var(--text-secondary)}
.sec__head--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:24px clamp(32px,6vw,96px)}
.sec__foot{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-top:clamp(36px,6vh,64px);padding-top:26px;border-top:1px solid var(--rule)}
.sec__foot p{color:var(--text-secondary);max-width:52ch}
.t-sub{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:1.12;letter-spacing:.06em;text-transform:uppercase}
.prose{max-width:66ch}
.prose > * + *{margin-top:1.2em}
.prose h3{margin-top:2em}
.prose ul{display:grid;gap:.7em}
.prose ul li{position:relative;padding-left:26px}
.prose ul li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:1px;background:var(--rule-strong)}
.prose a:not(.btn):not(.link){color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule-strong)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px);align-items:start}
.split--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:860px){.split,.split--even,.sec__head--split{grid-template-columns:minmax(0,1fr)}}
/* a quoted passage from the group's own documents */
.quote{padding-left:22px;border-left:1px solid var(--rule-strong)}
.quote p{font-size:clamp(1.15rem,1.7vw,1.5rem);font-weight:400;line-height:1.5;max-width:40ch}
.quote cite{display:block;margin-top:14px;font-style:normal;color:var(--text-secondary)}

/* ---------- 25. CARDS AND NUMBERED ROWS ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.2vw,32px);background:var(--panel);border:1px solid var(--rule);
  transition:border-color .45s var(--ease-out),transform .6s var(--ease-out)}
.card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-secondary)}
.card p{color:var(--text-secondary)}
.card .t-card{color:var(--text-primary)}
.card__foot{margin-top:auto;padding-top:10px}
a.card{text-decoration:none;color:inherit}
a.card:hover,.card--link:hover{border-color:var(--rule-strong);transform:translateY(-3px)}
/* the whole card is the hit area of its one link */
.card--link .card__go::before{content:"";position:absolute;inset:0}
@media (max-width:1000px){.cards,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards,.cards--2,.cards--4{grid-template-columns:minmax(0,1fr)}}

/* numbered rows: departments, programmes, participation paths */
.nlist{border-top:1px solid var(--rule-strong)}
.nrow{position:relative;display:grid;grid-template-columns:clamp(64px,9vw,150px) minmax(0,4fr) minmax(0,5fr);gap:14px clamp(20px,3vw,56px);align-items:start;
  padding:clamp(24px,4vh,44px) 0;border-bottom:1px solid var(--rule-strong)}
.nrow__num{font-family:var(--f-display);font-weight:300;font-size:clamp(2.6rem,5vw,4.6rem);line-height:.95;color:var(--text-primary);opacity:.34;font-variant-numeric:tabular-nums;
  transition:opacity .7s var(--ease-out)}
.nrow:hover .nrow__num,.nrow:focus-within .nrow__num{opacity:.95}
.nrow__head{display:grid;gap:12px;justify-items:start}
.nrow__head h3{font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.12;letter-spacing:.06em;text-transform:uppercase}
.nrow__head .t-mono{color:var(--text-secondary)}
.nrow__body{display:grid;gap:14px;justify-items:start}
.nrow__body p{color:var(--text-secondary);max-width:58ch}
.nrow__meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;margin:0;color:var(--text-secondary)}
.nrow__meta dt{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-top:.35em}
.nrow__meta dd{margin:0;color:var(--text-primary);font-weight:400}
@media (max-width:860px){.nrow{grid-template-columns:minmax(0,1fr);gap:12px}.nrow__num{font-size:2.4rem}}

/* ---------- 26. STATUS CHIPS, FILTER CHIPS, FIELDS ---------- */
.status--active,.status--open{color:var(--text-primary);border-color:var(--rule-strong)}
.status--active::before,.status--open::before{background:currentColor}
.status--soon{color:var(--text-primary)}
.status--soon::before{background:linear-gradient(to right,currentColor 50%,transparent 50%)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.fchip{appearance:none;display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 16px;background:none;border:1px solid var(--rule-strong);border-radius:2px;cursor:pointer;
  color:var(--text-primary);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:border-color .45s var(--ease-out),background-color .45s var(--ease-out),color .45s var(--ease-out)}
.fchip:hover{border-color:var(--text-primary);background:rgba(242,233,216,.06)}
.fchip[aria-pressed="true"]{background:var(--text-primary);border-color:var(--text-primary);color:var(--canvas)}
.filters{display:flex;flex-wrap:wrap;align-items:end;gap:16px 20px;margin-bottom:clamp(28px,4vh,44px)}
.field{display:grid;gap:8px;flex:1 1 220px;min-width:0}
.field--sm{flex:0 1 190px}
.field label,.field__label{color:var(--text-secondary);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.field input,.field select{appearance:none;width:100%;min-height:48px;padding:0 14px;background:rgba(38,32,26,.6);border:1px solid var(--rule-strong);border-radius:2px;
  color:var(--text-primary);font:inherit;font-weight:400;letter-spacing:.02em;transition:border-color .45s var(--ease-out)}
.field select{padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--text-primary) 50%),linear-gradient(135deg,var(--text-primary) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--canvas);color:var(--text-primary)}
.field input::placeholder{color:var(--text-secondary);opacity:1}
.field input:hover,.field select:hover{border-color:var(--text-primary)}
.count-line{margin-bottom:18px;color:var(--text-secondary)}

/* ---------- 27. TABS ---------- */
.tabs__list{display:flex;flex-wrap:wrap;gap:0 clamp(18px,3vw,40px);margin-bottom:clamp(28px,5vh,52px);border-bottom:1px solid var(--rule-strong)}
.tabs__tab{appearance:none;position:relative;display:inline-flex;align-items:center;gap:.7em;min-height:52px;padding:0 2px;background:none;border:0;cursor:pointer;white-space:nowrap;
  color:var(--text-secondary);font-family:var(--f-head);font-weight:600;font-size:1rem;letter-spacing:.03em;transition:color .45s var(--ease-out)}
.tabs__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--text-primary);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out)}
.tabs__tab:hover{color:var(--text-primary)}
.tabs__tab[aria-selected="true"]{color:var(--text-primary)}
.tabs__tab[aria-selected="true"]::after{transform:scaleX(1)}
.tabs__n{font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.1em;color:var(--text-secondary)}
.tabs__panel:focus-visible{outline-offset:8px}
html.no-js .tabs__panel[hidden]{display:block !important}
html.no-js .tabs__list{display:none}

/* ---------- 28. EMPTY AND FALLBACK STATES ---------- */
.empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:clamp(22px,3vw,36px);border:1px dashed var(--rule-strong);border-radius:2px;color:var(--text-secondary)}
.empty::before{content:"";width:34px;height:34px;border:1px solid var(--rule-strong);border-radius:50%;
  background:linear-gradient(var(--rule-strong),var(--rule-strong)) center/1px 14px no-repeat,linear-gradient(var(--rule-strong),var(--rule-strong)) center/14px 1px no-repeat}
.empty p{max-width:60ch}
.empty strong{display:block;color:var(--text-primary);font-family:var(--f-head);font-weight:600;letter-spacing:.01em}
.fallback{padding:18px 20px;border-left:1px solid var(--accent);background:rgba(59,43,36,.5);color:var(--text-primary);max-width:70ch}
.loading{min-height:80px;color:var(--text-secondary)}
.folio .empty{border-color:rgba(38,32,26,.5);color:var(--panel)}
.folio .empty strong{color:var(--canvas)}

/* ---------- 29. PEOPLE ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(28px,4vw,56px) clamp(20px,3vw,44px)}
.person{display:grid;gap:16px;align-content:start;justify-items:start}
/* the portraits carry a printed ring from the booklet: the circle mask shows the inner 92 percent */
.person__photo{position:relative;width:clamp(132px,14vw,176px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--panel);border:1px solid var(--rule-strong)}
.person__photo img{position:absolute;left:50%;top:50%;width:108.7%;height:108.7%;max-width:none;transform:translate(-50%,-50%);object-fit:cover}
.person__photo--plain img{width:100%;height:100%}
.person__mono{display:grid;place-items:center;font-family:var(--f-display);font-weight:300;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:.08em;color:var(--text-secondary)}
.person__mono::after{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid var(--line-whisper)}
.person__name{font-family:var(--f-head);font-weight:600;font-size:1.12rem;line-height:1.3}
.person__post{display:block;margin-top:4px;color:var(--text-secondary)}
.person__role{color:var(--text-primary);font-weight:400}
.person__titles{display:grid;gap:6px;color:var(--text-secondary);font-size:.95rem;line-height:1.5}
.person--open .person__photo{border-style:dashed}

/* ---------- 30. EVENT CARDS, FACT PANEL, GALLERY ---------- */
.ecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:clamp(16px,2vw,30px)}
.ecard{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule);transition:border-color .45s var(--ease-out),transform .6s var(--ease-out)}
.ecard:hover{border-color:var(--rule-strong);transform:translateY(-3px)}
.ecard__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--canvas)}
.ecard__img img{width:100%;height:100%;object-fit:cover}
/* no photo yet: a drawn date plate, never a stock picture */
.ecard__plate{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  background:radial-gradient(ellipse at 50% 120%,rgba(168,67,46,.18),rgba(38,32,26,0) 60%),var(--canvas)}
.ecard__plate b{display:block;font-family:var(--f-display);font-weight:300;font-size:clamp(3rem,6vw,4.4rem);line-height:1;letter-spacing:.02em}
.ecard__plate span{display:block;margin-top:8px;color:var(--text-secondary)}
.ecard__txt{display:flex;flex-direction:column;gap:12px;flex:1;padding:clamp(18px,2vw,28px)}
.ecard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-secondary)}
.ecard h3 a{text-decoration:none;color:inherit}
.ecard h3 a::before{content:"";position:absolute;inset:0}
.ecard p{color:var(--text-secondary)}
.ecard__meta{display:grid;gap:4px;margin-top:auto;padding-top:12px;border-top:1px solid var(--rule);color:var(--text-secondary)}
.ecard__go{color:var(--text-primary);font-family:var(--f-head);font-weight:600;font-size:.92rem;letter-spacing:.03em}
.factp{margin:0;border:1px solid var(--rule-strong);background:rgba(38,32,26,.5)}
.factp > div{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:16px;align-items:baseline;padding:16px clamp(16px,2vw,26px);border-bottom:1px solid var(--rule)}
.factp > div:last-child{border-bottom:0}
.factp dt{color:var(--text-secondary);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.factp dd{margin:0;font-weight:400}
@media (max-width:520px){.factp > div{grid-template-columns:minmax(0,1fr);gap:4px}}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(10px,1.4vw,20px)}
.gal figure{position:relative;background:var(--panel);border:1px solid var(--rule)}
.gal img{width:100%;height:auto}
.gal--crop img{aspect-ratio:4/3;object-fit:cover}
.gal a{display:block}
.gal figcaption{padding:10px 12px;color:var(--text-secondary);font-size:.9rem}
.gal--pages{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.gal--pages img{background:#fff}

/* ---------- 31. HOME ---------- */
/* the impact strip: four true facts, no counters */
.impact{padding-block:clamp(40px,7vh,84px)}
.impact__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.impact__item{display:grid;gap:12px;align-content:start;padding:clamp(22px,3vw,40px) clamp(14px,2vw,32px);border-left:1px solid var(--rule)}
.impact__item:first-child{border-left:0;padding-left:0}
.impact__big{font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,2.9vw,2.9rem);line-height:1.08;letter-spacing:.05em;text-transform:uppercase}
.impact__item p:last-child{color:var(--text-secondary);font-size:.98rem;max-width:30ch}
@media (max-width:1000px){.impact__list{grid-template-columns:repeat(2,minmax(0,1fr))}.impact__item:nth-child(3){border-left:0;padding-left:0}.impact__item:nth-child(n+3){border-top:1px solid var(--rule)}}
@media (max-width:520px){.impact__list{grid-template-columns:minmax(0,1fr)}.impact__item{border-left:0;padding-left:0}.impact__item + .impact__item{border-top:1px solid var(--rule)}}

/* the about teaser reuses .about__grid and .study from the first build */
.teaser__row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:clamp(28px,4vh,44px)}

/* Inside RSIG: the showcase carousel. The same native scroll region as the first build's activities: drag, arrows, keys. No wheel hijack. */
.show .act{width:min(84vw,860px);min-height:0;padding:0;border-left:0}
.slide__img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--canvas);border:1px solid var(--rule)}
.slide__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.6s var(--ease-out),opacity .9s var(--ease-out);opacity:.62}
.act.is-cur .slide__img img,html.no-js .slide__img img{opacity:1;transform:none}
.slide__img::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(38,32,26,.88),rgba(38,32,26,.2) 46%,rgba(38,32,26,0) 70%)}
.slide__num{position:absolute;left:clamp(16px,2.4vw,32px);top:clamp(12px,2vw,24px);z-index:1;font-family:var(--f-display);font-weight:300;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1;opacity:.9;text-shadow:var(--tshadow)}
.slide__cap{position:absolute;left:clamp(16px,2.4vw,32px);right:clamp(16px,2.4vw,32px);bottom:clamp(14px,2vw,28px);z-index:1;text-shadow:var(--tshadow)}
.slide__cap .t-mono{color:var(--text-primary);opacity:.85}
.slide__cap h3{margin-top:6px;font-family:var(--f-display);font-weight:400;font-size:clamp(1.5rem,3vw,2.6rem);line-height:1.1;letter-spacing:.06em;text-transform:uppercase}
.slide__txt{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 28px;padding:16px 2px 0}
.slide__txt p{color:var(--text-secondary);max-width:52ch}
@media (max-width:640px){.slide__img{aspect-ratio:4/3}}

/* recognition and affiliations */
.recog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
.recog__item{display:grid;gap:12px;align-content:start;padding:clamp(20px,2.4vw,34px) 0 0;border-top:1px solid var(--rule-strong)}
.recog__item .t-mono{color:var(--text-secondary)}
.recog__item p{color:var(--text-secondary)}
@media (max-width:860px){.recog{grid-template-columns:minmax(0,1fr)}}

/* the get involved banner reuses .reg from the first build (the full strength construction frame) */
.reg__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 30px}
.reg__below .reg__row{margin-top:8px}

/* ---------- 32. GATES ---------- */
@media (pointer:coarse){.status{min-height:26px}}
@media (prefers-reduced-motion: reduce){
  html:not(.motion-on) .card,html:not(.motion-on) .ecard,html:not(.motion-on) .slide__img img{transform:none !important}
  html:not(.motion-on) .slide__img img{opacity:1 !important}
}
html.still .card,html.still .ecard,html.still .slide__img img{transform:none !important}
html.still .slide__img img{opacity:1 !important}
@media (forced-colors:active){.fchip[aria-pressed="true"]{border-width:3px}.logo-tile{forced-color-adjust:none}}

/* ---------- 33. NO SCRIPT ---------- */
/* without JavaScript the injected header never arrives: each page ships this plain nav in a <noscript> */
.noscript-nav{position:relative;z-index:60;display:flex;flex-wrap:wrap;gap:4px 22px;padding:12px var(--gutter);background:var(--canvas);border-bottom:1px solid var(--rule)}
.noscript-nav a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-head);font-weight:600;font-size:.95rem}

/* =====================================================================
   EVENTS-INVOLVED BLOCK (events, event detail, get involved, 404). Added by the events-involved page builder, 2026-09-21.
   New classes only. Nothing above is changed.
   ===================================================================== */
/* event header: a long event name gets a smaller title, and the facts sit under it */
.phero h1.t-title--long{max-width:24ch;font-size:clamp(2rem,4.4vw,3.9rem);line-height:1.08}
.evmeta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:clamp(20px,3vh,30px);color:var(--text-secondary)}
.evmeta li{display:inline-flex;align-items:baseline;gap:10px}
.evmeta b{font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.evmeta span{color:var(--text-primary)}
.evrole{margin-top:clamp(28px,4vh,44px);padding:clamp(18px,2vw,28px);border-left:1px solid var(--accent);background:rgba(59,43,36,.5)}
.evrole h3{margin-bottom:10px}
.evrole p{color:var(--text-secondary);max-width:62ch}
.subhead{margin-bottom:clamp(18px,3vh,28px)}
/* one programme booklet: title, note, download link, then the pages */
.prog + .prog{margin-top:clamp(44px,7vh,80px);padding-top:clamp(32px,5vh,56px);border-top:1px solid var(--rule)}
.prog__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(18px,3vh,28px)}
.prog__head p{margin-top:8px;color:var(--text-secondary);max-width:62ch}
.gal a{position:relative;cursor:zoom-in}
.gal a:focus-visible{outline-offset:3px}
.empty .link{margin-top:6px}
#previous-events,#upcoming-events{scroll-margin-top:calc(var(--hdr-h) + 170px)}
.clearf{flex:none;min-height:48px}
.ctc .motion,.empty .motion{min-height:44px}
/* the lightbox: a native <dialog>, so focus stays inside it and Escape closes it */
html.lb-open{overflow:hidden}
.lb{width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(38,32,26,.96);color:var(--text-primary);overflow:hidden}
.lb::backdrop{background:rgba(38,32,26,.9)}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(12px,3vw,28px)}
.lb__count{color:var(--text-secondary)}
.lb__stage{position:relative;display:grid;place-items:center;min-height:0;padding:0 clamp(8px,2vw,24px)}
.lb__stage img{position:absolute;inset:0 clamp(8px,2vw,24px);width:calc(100% - 2*clamp(8px,2vw,24px));height:100%;max-width:none;object-fit:contain}
.lb__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(12px,3vw,28px) calc(12px + env(safe-area-inset-bottom,0px))}
.lb__cap{flex:1;min-width:0;text-align:center;color:var(--text-secondary);font-size:.95rem}
.lb .ibtn{background:rgba(38,32,26,.7)}
.lb .ibtn[hidden]{display:none}
/* get involved: the membership box and the contact block */
.joinbox{display:grid;gap:14px;justify-items:start;padding:clamp(22px,3vw,40px);background:var(--panel);border:1px solid var(--rule)}
.joinbox p{color:var(--text-secondary);max-width:60ch}
.joinbox .t-card{color:var(--text-primary)}
.ctc{margin:0;border-top:1px solid var(--rule-strong)}
.ctc > div{display:grid;grid-template-columns:8em minmax(0,1fr);gap:8px 20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--rule)}
.ctc dt{color:var(--text-secondary);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.ctc dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;font-weight:400}
.ctc dd a{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule-strong)}
.ctc dd a:hover{text-decoration-color:currentColor}
.ctc address{font-style:normal}
@media (max-width:520px){.ctc > div{grid-template-columns:minmax(0,1fr);gap:2px}.factp > div{grid-template-columns:minmax(0,1fr);gap:4px}}
/* 404 */
.nf__list{display:flex;flex-wrap:wrap;gap:4px 30px;margin-top:clamp(24px,4vh,40px)}
/* END EVENTS-INVOLVED BLOCK */

/* =====================================================================
   JOB: ABOUT PAGE (/about/). Added by the about page builder, 2026-09-21.
   New classes only, all prefixed "ab-". No existing rule is changed.
   ===================================================================== */
.ab-side{margin-top:22px;color:var(--text-secondary);max-width:30ch}
.ab-src{color:var(--text-secondary)}
.ab-mvh{margin-bottom:clamp(18px,3vh,28px)}
.ab-evh{margin:clamp(48px,8vh,88px) 0 clamp(24px,4vh,40px)}
.ab-note{margin-bottom:clamp(24px,4vh,40px);color:var(--text-secondary);max-width:60ch}
.ab-note:empty{display:none}
/* the supplied logos, untouched: official at 180px or larger, extended at 400px or wider (so it is left out on screens that cannot give it 400px) */
.ab-logos{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,3vw,44px);margin-top:clamp(48px,8vh,88px)}
.ab-logo{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;margin:0}
.ab-logo__box{display:grid;place-items:center;min-height:clamp(260px,26vw,340px);padding:clamp(24px,3vw,40px);background:var(--canvas);border:1px solid var(--rule-strong)}
.ab-logo__official{width:clamp(180px,17vw,230px);height:auto}
.ab-logo__ext{width:100%;min-width:400px;max-width:520px;height:auto}
.ab-logo figcaption{color:var(--text-secondary)}
@media (max-width:1040px){.ab-logos{grid-template-columns:minmax(0,1fr)}}
@media (max-width:519px){.ab-logo--wide{display:none}}
/* the four palette colours the booklet names, shown from the tokens */
.ab-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px);margin-top:clamp(32px,5vh,56px)}
.ab-sw{display:grid;gap:8px;align-content:start}
.ab-sw p:not(.t-mono){color:var(--text-secondary);font-size:.95rem}
.ab-sw__chip{display:block;height:56px;margin-bottom:6px;border:1px solid var(--rule-strong)}
.ab-sw__chip--sepia{background:var(--panel)}
.ab-sw__chip--sanguine{background:var(--accent)}
.ab-sw__chip--parchment{background:var(--folio)}
.ab-sw__chip--umber{background:var(--canvas)}
@media (max-width:860px){.ab-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (forced-colors:active){.ab-sw__chip{forced-color-adjust:none}}
/* ===================== END JOB: ABOUT PAGE ===================== */

/* =====================================================================
   JOB BLOCK: departments-programs-research (department pages, /programs/, /research/). Added rules only.
   ===================================================================== */
/* space between a text block and the fact panel or legend that follows it */
.dpr-gap{margin-top:clamp(28px,4vh,44px)}
.dpr-gap-s{margin-top:16px}
/* the breadcrumb "Home" link is 36px wide by its text alone: give every breadcrumb link the 44px touch width */
.crumbs a{min-width:44px}
/* END JOB BLOCK: departments-programs-research */

/* =====================================================================
   AFFILIATIONS STRIP (home FIG. 05, about FIG. 06). Added 2026-09-21 on the owner's request:
   the RSS umbrella, the KFSHRC institutional affiliation, and the Alfaisal University home,
   each with its real logo on the same white tile the Alfaisal mark already uses.
   New classes only. Nothing above is changed.
   ===================================================================== */
.affil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px);margin-top:clamp(28px,4vh,48px)}
.affil__item{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,30px) 0 0;border-top:1px solid var(--rule-strong)}
.affil__tile{display:inline-flex;align-items:center;justify-content:center;width:clamp(92px,9vw,116px);height:clamp(92px,9vw,116px);margin-bottom:6px;padding:10px;background:#fff;border-radius:2px;line-height:0}
.affil__tile img{width:100%;height:100%;object-fit:contain}
.affil__kicker{color:var(--text-secondary)}
.affil__item h3{margin:0}
.affil__item p:last-child{color:var(--text-secondary)}
.affil__note{margin-top:clamp(18px,2.4vh,26px);color:var(--text-secondary);font-size:.95rem;max-width:64ch}
@media (max-width:860px){.affil{grid-template-columns:minmax(0,1fr)}}
@media (forced-colors:active){.affil__tile{forced-color-adjust:none}}

/* =====================================================================
   SIG PARITY BLOCK (parity builder, 2026-09-21). Appended only: nothing above is changed.
   The SIG style program card (.sigp), the department blocks (.sigd), the remit list (.sigr),
   the leadership line (.sigl), and the program detail page (.pgv).
   ===================================================================== */
/* program card: number, type kicker, name, long name, summary, "Explore this program", "Led by" */
.sigp{gap:10px}
.sigp__num{font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;color:var(--text-primary);opacity:.4;font-variant-numeric:tabular-nums;transition:opacity .6s var(--ease-out)}
.sigp:hover .sigp__num,.sigp:focus-within .sigp__num{opacity:.95}
.sigp__type{color:var(--text-secondary)}
.card .sigp__long{margin-top:-4px;color:var(--text-primary);font-size:.95rem;line-height:1.45}
.sigp__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 18px;border-top:1px solid var(--rule);margin-top:auto;padding-top:6px}
.card .sigp__led{color:var(--text-secondary)}
/* the whole card is the link's hit area: the link must not be the positioned box, so its underline is drawn with text decoration here */
.sigp .card__go.link{position:static;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--rule-strong)}
.sigp .card__go.link::after{display:none}
.sigp:hover .card__go.link{text-decoration-color:currentColor}
/* department blocks on the overview: three remit points under the paragraph */
.sigd__remit{display:grid;gap:.55em;max-width:58ch;color:var(--text-secondary)}
.sigd__remit li{position:relative;padding-left:26px}
.sigd__remit li::before{content:"";position:absolute;left:0;top:.8em;width:14px;height:1px;background:var(--rule-strong)}
.sigd__lead{margin-top:6px}
/* the full remit on a department page, numbered */
.sigr{display:grid;border-top:1px solid var(--rule-strong)}
.sigr li{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:14px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule)}
.sigr__n{color:var(--text-secondary)}
.sigr p{max-width:62ch}
.sigl__line{font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.15;letter-spacing:.05em;text-transform:uppercase;margin-bottom:clamp(20px,3vh,32px)}
.sig-count{color:var(--text-secondary)}
/* the program detail page */
.pgv__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:clamp(20px,3vh,30px);color:var(--text-secondary)}
.pgv__meta li{display:inline-flex;align-items:center;gap:10px}
.pgv__meta b{font-family:var(--f-mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.pgv__meta span:not(.status){color:var(--text-primary)}
.pgv__long{margin-top:14px;color:var(--text-primary);max-width:60ch}
.pgv__sum{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55;color:var(--text-primary)}
.cards.pgv__path{grid-template-columns:minmax(0,1fr);max-width:560px}
@media (prefers-reduced-motion: reduce){html:not(.motion-on) .sigp__num{transition:none}}
html.still .sigp__num{transition:none}
/* get involved: the Open now board, one group per path */
.gi-path + .gi-path{margin-top:clamp(36px,6vh,64px)}
.subhead .t-mono,.ab-mvh .t-mono{margin-right:.5em;vertical-align:middle;color:var(--text-secondary)}
/* SIG headings are full sentences: a calmer display size so they read in two or three lines */
.t-title.t-title--sent{font-size:clamp(2.1rem,4.1vw,4.1rem);line-height:1.08}
.sec__head .t-title--sent,.wwd__head .t-title--sent{max-width:22ch}
.phero h1.t-title--sent{max-width:22ch}
.reg__title.t-title--sent{font-size:clamp(1.9rem,3.8vw,3.4rem)}
/* END SIG PARITY BLOCK */

/* ---------- DOOR UNDER REDUCED MOTION (2026-09-21): the doors show for everyone arriving from outside the site.
   With reduced motion they never slide: the whole door simply fades, the same as on phones. ---------- */
@media (prefers-reduced-motion: reduce){
  html:not(.motion-on).doors-light .door{transition:opacity .6s ease !important;transition-duration:.6s !important}
}

/* ---------- THE POINTER LIGHT OVER EVERY SECTION (2026-09-21): the environment lamp sits behind the page, so panels with their own
   background hid it. This second light passes over everything below the header, blended with screen, so it only ever adds light. ---------- */
.plight{position:fixed;left:0;top:0;z-index:49;width:62vmax;height:62vmax;margin:-31vmax 0 0 -31vmax;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,168,112,.13),rgba(214,110,70,.05) 45%,rgba(168,67,46,0) 100%);
  transform:translate3d(var(--mx,50vw),var(--my,-60vh),0);will-change:transform;opacity:0;transition:opacity .6s ease}
html.has-cur .plight{opacity:1}
html.still .plight,html.doors-closed .plight{opacity:0}
@media (hover: none), (pointer: coarse), (forced-colors: active){.plight{display:none}}

/* ---------- ONE LOGO FROM DOOR TO HERO (2026-09-21, owner request): the door's RSIG logo and the hero's title card logo share one place and one size,
   dead centre of the screen. When the doors open the logo stays exactly where it is while the leaves slide away, then hands over to the
   identical logo in the hero beneath it, which docks into the header as scrolling begins. ---------- */
:root{--db:max(180px,min(44vw,260px))}
.door__ui{top:calc(50% - var(--db) / 2);transform:none;padding-top:0}
.door__btn{width:var(--db)}
html.doors-opening .door__ui{opacity:1;transform:none}
html.doors-opening .door__hint,html.doors-opening .door__sound,html.doors-opening .door__skip{opacity:0;transition:opacity .35s var(--ease-out)}   /* named, not :not(): a class on html then restyles only these (batch 8, the press frame) */
html.doors-opening .door__ring,html.doors-opening .door__echo{opacity:0;transition:opacity .35s var(--ease-out)}
html.doors-opening .door__btn{transform:none;opacity:0;transition:transform .5s var(--ease-out),opacity .45s var(--ease-out) 1.3s}
html.doors-light.doors-opening .door__btn{transition:none;opacity:1}
.titlecard{top:50%;bottom:auto;width:var(--db);margin:calc(var(--db) / -2) 0 0 calc(var(--db) / -2)}
/* (the header logo rules that stood here moved to the HEADER LOCKUP BLOCK at the end of this file) */

/* =====================================================================
   PAGES BLOCK (pages builder, 2026-09-21). Appended only: nothing above is changed.
   Director's list B: B2 inner hero plate, B3 line studies, B4 social tiles (.soc), B5 type and rhythm, B7 people grid, B8 ledger empty states.
   Also: one logo card per affiliation, the Advisory Board page (/get-involved/advisory-board/) and the Get Involved feature card.
   ===================================================================== */
/* ---- affiliations: every logo tile is one height, width follows the logo, so the wide KFSHRC lockup reads as large as the others ---- */
.affil--logos .affil__tile{justify-self:start;width:auto;height:clamp(84px,7.4vw,100px);padding:12px 16px}
.affil--logos .affil__tile img{width:auto;height:100%;max-width:190px}
.pg-first{display:grid;gap:10px;justify-items:start;max-width:64ch;margin-top:clamp(36px,6vh,64px);padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--rule-strong)}
.pg-first .t-mono,.pg-first p:not(.t-mono){color:var(--text-secondary)}
.pg-first .t-card{color:var(--text-primary)}

/* ---- B2: the inner hero is a plate composition. Text 7 parts, plate 5 parts, no dead band below. ---- */
.phero{display:flex;flex-direction:column;justify-content:center;min-height:min(88vh,860px);padding-bottom:clamp(40px,6vh,72px)}
.phero > .wrap{width:100%}
.phero__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.hplate{position:relative;margin:0;justify-self:end;width:min(100%,calc(62vh * .8),460px)}
.hplate__frame{position:relative;aspect-ratio:4/5;border:1px solid var(--rule);background:rgba(59,43,36,.32);overflow:hidden}
/* Parchment corner ticks, drawn on the frame edge */
.hplate__frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;--k:rgba(242,233,216,.8);
  background:
    linear-gradient(var(--k),var(--k)) left top/16px 1px no-repeat,linear-gradient(var(--k),var(--k)) left top/1px 16px no-repeat,
    linear-gradient(var(--k),var(--k)) right top/16px 1px no-repeat,linear-gradient(var(--k),var(--k)) right top/1px 16px no-repeat,
    linear-gradient(var(--k),var(--k)) left bottom/16px 1px no-repeat,linear-gradient(var(--k),var(--k)) left bottom/1px 16px no-repeat,
    linear-gradient(var(--k),var(--k)) right bottom/16px 1px no-repeat,linear-gradient(var(--k),var(--k)) right bottom/1px 16px no-repeat}
.hplate__frame > img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);max-width:none;object-fit:cover}
.hplate__frame > .lstudy{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
.hplate__cap{display:block;margin-top:12px;color:var(--text-secondary)}
.hplate .tcons{z-index:3}
@media (max-width:860px){
  .phero{min-height:0}
  .phero__in{grid-template-columns:minmax(0,1fr)}
  .hplate{order:-1;justify-self:stretch;width:100%}
  .hplate__frame{aspect-ratio:4/3}
}

/* ---- B3: the Leonardo line studies. Stroke only, 1 px, Parchment .55, construction in Sanguine, hatching at .18 ---- */
.lstudy{display:block;overflow:visible}
.lstudy path:not(.h),.lstudy circle,.lstudy ellipse,.lstudy rect{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.lstudy .l{stroke:rgba(242,233,216,.55)}
.lstudy .w{stroke:rgba(242,233,216,.13)}
.lstudy .d{stroke:rgba(242,233,216,.2);stroke-dasharray:14 5 2 5}
.lstudy .c{stroke:var(--line);opacity:.85}
.lstudy .h{stroke:none}
.lstudy .hp{stroke:rgba(242,233,216,.18)}
.lstudy .t{fill:var(--text-secondary);stroke:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em}

/* ---- B4: the social tiles themselves (.socs > .soc) are the shared component in site.js and its CSS block. Here only their place on a page. ---- */
.pg-soc{margin-top:clamp(28px,4vh,44px)}
.pg-soc > .t-mono{margin-bottom:14px;color:var(--text-secondary)}
.reg .pg-soc{max-width:1000px;margin-inline:auto;text-align:left}
.split .socs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.split .socs{grid-template-columns:minmax(0,1fr)}}

/* ---- B5: type scale and rhythm ---- */
.sec{padding-block:clamp(88px,14vh,160px)}
.sec.sec--tight{padding-block:clamp(64px,10vh,120px)}
.phero h1.t-title{font-size:clamp(3.2rem,7.2vw,7.5rem);line-height:.92;letter-spacing:.04em}
.phero h1.t-title--sent,.phero h1.t-title--long{font-size:clamp(2.6rem,5vw,5.4rem);line-height:.96;letter-spacing:.04em}
.sec__head .t-title:not(.t-title--sent){font-size:clamp(2.4rem,4.6vw,4.5rem);line-height:1}
.phero__lede,.sec__head .lede{font-weight:300;font-size:clamp(1.125rem,1.4vw,1.25rem);line-height:1.55;max-width:44ch;color:rgba(242,233,216,.86)}
.sec__head .lede.t-dim{color:rgba(242,233,216,.86)}
@media (max-width:640px){.sec{padding-block:clamp(64px,10vh,96px)}.sec.sec--tight{padding-block:clamp(56px,8vh,88px)}}

/* ---- B7: people on a whisper Vitruvian square. Board three across, advisors four across. ---- */
.people{gap:48px clamp(24px,3vw,48px)}
.person{position:relative}
.person__photo{width:168px}
.person::before{content:"";position:absolute;left:-12px;top:-12px;width:192px;height:192px;border:1px solid var(--line-whisper);pointer-events:none;
  background:linear-gradient(var(--line-whisper),var(--line-whisper)) center/1px 100% no-repeat,linear-gradient(var(--line-whisper),var(--line-whisper)) center/100% 1px no-repeat;opacity:.7}
.person > *{position:relative}
.person__name{font-size:1.05rem}
.person__role{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}
[data-group="board-of-directors"] .people,[data-group="student-advisors"] .people,[data-group="faculty-advisors"] .people{grid-template-columns:repeat(3,minmax(0,1fr))}
[data-group="advisory-board"] .people,[data-group="department-heads"] .people{grid-template-columns:repeat(4,minmax(0,1fr))}
.people{padding:12px 0 0 12px}
@media (max-width:1100px){[data-group="advisory-board"] .people,[data-group="department-heads"] .people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){[data-group] .people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.person__photo{width:132px}.person::before{width:156px;height:156px}}
@media (max-width:420px){[data-group] .people{grid-template-columns:minmax(0,1fr)}}
.pg-people-h{margin-top:clamp(48px,8vh,88px)}
.person{gap:22px}
.pg-board{margin-top:clamp(64px,10vh,120px);padding-top:clamp(40px,6vh,72px);border-top:1px solid var(--rule)}

/* ---- B8: empty states are a ledger page: ruled every 28 px, a small drawn glyph, a display headline, the honest line ---- */
.empty{border:1px solid var(--rule);border-radius:0;align-items:start;
  background:repeating-linear-gradient(to bottom,rgba(242,233,216,0) 0 27px,rgba(242,233,216,.06) 27px 28px),rgba(38,32,26,.3)}
.empty::before{width:44px;height:44px;border:0;border-radius:0;background:var(--rule-strong);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M22 11C17 8 10 7 4 8v27c6-1 13 0 18 3 5-3 12-4 18-3V8c-6-1-13 0-18 3z'/%3E%3Cpath d='M22 11v27'/%3E%3Cpath d='M26 16h9M26 21h9M26 26h6'/%3E%3Ccircle cx='13' cy='20' r='5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M22 11C17 8 10 7 4 8v27c6-1 13 0 18 3 5-3 12-4 18-3V8c-6-1-13 0-18 3z'/%3E%3Cpath d='M22 11v27'/%3E%3Cpath d='M26 16h9M26 21h9M26 26h6'/%3E%3Ccircle cx='13' cy='20' r='5'/%3E%3C/svg%3E") center/contain no-repeat}
.empty strong{margin-bottom:6px;font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1.1;letter-spacing:.05em;text-transform:uppercase}
.folio .empty{background:repeating-linear-gradient(to bottom,rgba(38,32,26,0) 0 27px,rgba(38,32,26,.08) 27px 28px)}
.folio .empty::before{background:var(--panel)}
@media (max-width:520px){.empty{grid-template-columns:minmax(0,1fr)}}

/* ---- Get Involved: the Advisory Board feature card, and the Advisory Board page ---- */
.pg-feature{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px clamp(28px,5vw,72px);align-items:end;
  margin-top:clamp(28px,4vh,44px);padding:clamp(24px,3.4vw,52px);background:var(--panel);border:1px solid var(--rule-strong)}
.pg-feature::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--accent)}
.pg-feature__t{margin:10px 0 14px;font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.02;letter-spacing:.05em;text-transform:uppercase}
.pg-feature p{color:var(--text-secondary);max-width:56ch}
.pg-feature .t-mono{color:var(--text-secondary)}
.pg-feature__go{display:grid;gap:14px;justify-items:start}
@media (max-width:860px){.pg-feature{grid-template-columns:minmax(0,1fr)}}
.gi-path{scroll-margin-top:calc(var(--hdr-h) + 24px)}
.pg-steps{display:grid;border-top:1px solid var(--rule-strong);counter-reset:st}
.pg-steps li{display:grid;grid-template-columns:clamp(56px,7vw,96px) minmax(0,1fr);gap:8px 20px;align-items:baseline;padding:clamp(20px,3vh,32px) 0;border-bottom:1px solid var(--rule)}
.pg-steps li::before{counter-increment:st;content:counter(st,decimal-leading-zero);font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,3.4vw,3rem);line-height:1;opacity:.45}
.pg-steps h3{margin-bottom:6px}
.pg-steps p{color:var(--text-secondary);max-width:60ch}
.pg-cta{display:grid;justify-items:center;gap:18px;text-align:center;padding:clamp(40px,7vh,80px) clamp(20px,4vw,56px);border:1px solid var(--rule-strong);background:rgba(59,43,36,.45)}
.pg-cta .t-title{max-width:20ch}
.pg-cta p{color:var(--text-secondary);max-width:52ch}
/* END PAGES BLOCK */

/* =====================================================================
   INTERACTION BLOCK (interaction builder, 2026-09-21). Appended only; the rules above are untouched.
   i1 take the controls  i2 header menus  i3 footer band and social tiles  i4 page to page shutter  i5 kinetic headlines
   i6 developing plates and card entrances  i7 card lamp and tilt  i8 gates
   Motion: transform, opacity and filter only. html.still shows every final state at once.
   ===================================================================== */

/* ---------- i1. TAKE THE CONTROLS: the framed field ---------- */
.ctl__stage{position:relative;width:min(100%,1040px);height:clamp(400px,60vh,520px);margin:clamp(24px,4vh,44px) auto 0;
  border:1px solid var(--rule);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background-color:rgba(38,32,26,.55);
  background-image:linear-gradient(rgba(242,233,216,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(242,233,216,.04) 1px,transparent 1px);
  background-size:40px 40px;background-position:center center}
@media (max-width:720px){.ctl__stage{height:auto;aspect-ratio:4/5}}
.ctl__field{position:absolute;inset:0;pointer-events:none}
.ctl__svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:hidden}
.ctl__svg *{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.ctl__svg .c-cons *{stroke:var(--line-whisper)}
.ctl__svg .c-ticks{stroke:rgba(242,233,216,.7)}
.ctl__svg .c-target{opacity:0;transition:opacity .7s var(--ease-out) .35s}
.ctl__svg .c-target *{stroke:rgba(242,233,216,.6)}
.ctl__svg .c-target .c-target__halo{stroke:none;fill:rgba(168,67,46,0);transition:fill .35s var(--ease-out)}
.ctl__stage.is-engaged .c-target{opacity:1}
.ctl__stage.is-grab .c-target *{stroke:var(--accent)}
.ctl__stage.is-grab .c-target .c-target__halo{fill:rgba(168,67,46,.28)}
.ctl__svg .c-inst *{stroke:rgba(242,233,216,.78)}
.ctl__svg .c-inst .i-body{stroke:none;fill:rgba(38,32,26,.92)}
.ctl__svg .c-inst .i-hatch{stroke:rgba(242,233,216,.26)}
.ctl__svg .c-inst circle{fill:rgba(38,32,26,.92)}
.ctl__svg .i-jaw path{transition:stroke .7s var(--ease-out),fill .7s var(--ease-out)}
.ctl__svg .i-jaw path:first-child{fill:rgba(38,32,26,.92)}
.ctl__stage.is-engaged .i-jaw path{stroke:var(--accent)}
.ctl__stage.is-engaged .i-jaw path:first-child{fill:rgba(168,67,46,.24)}
.ctl__hand{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid rgba(242,233,216,.9);border-radius:50%;
  opacity:0;transition:opacity .25s var(--ease-out);will-change:transform}
.ctl__stage.is-driving .ctl__hand{opacity:1}
.ctl__ro{position:absolute;margin:0;color:var(--text-secondary);font-size:11px;letter-spacing:.14em;white-space:nowrap;font-variant-numeric:tabular-nums}
.ctl__ro--tl{left:32px;top:22px}.ctl__ro--tr{right:32px;top:22px}.ctl__ro--bl{left:32px;bottom:20px}.ctl__ro--br{right:32px;bottom:20px}
.ctl__stage.is-engaged .ctl__ro--tl{color:var(--text-primary)}
@media (max-width:480px){.ctl__ro{font-size:10px;letter-spacing:.08em}.ctl__ro--tl,.ctl__ro--bl{left:18px}.ctl__ro--tr,.ctl__ro--br{right:18px}}
/* the control: a 132 px Sanguine disc in a 168 px ring; on completion it docks at the bottom centre in 700 ms */
.ctl__stage .ctl__target{position:absolute;left:50%;top:50%;z-index:2;width:132px;height:132px;margin:-66px 0 0 -66px;
  transition:opacity .9s var(--ease-out),transform .7s cubic-bezier(.16,1,.3,1)}
.ctl__stage.is-engaged .ctl__target{transform:translate3d(0,var(--dock-y,200px),0) scale(.42)}
.ctl__stage .hold{width:100%;height:100%;padding:0 18px;line-height:1.45}
.ctl.is-done .ctl__stage .hold{background:var(--accent);cursor:grab}
.ctl__stage.is-driving .hold{cursor:grabbing}
.hold__l{display:block;max-width:11ch;margin:0 auto;transition:opacity .35s var(--ease-out)}
.ctl__stage.is-engaged .hold__l{opacity:0}
.ctl__stage .ctl__ring{left:-18px;top:-18px;width:168px;height:168px;transform:none;transition:opacity .5s var(--ease-out)}
.ctl__stage .ctl__ring .r-track{stroke-dasharray:2 6}
.ctl__stage .ctl__ring .r-tick{fill:none;stroke:var(--rule-strong);stroke-width:1}
.ctl__stage.is-engaged .ctl__ring{opacity:0}
.ctl__stage .ctl__echo{inset:-18px}
@media (max-width:720px){
  .ctl__stage .ctl__target{width:112px;height:112px;margin:-56px 0 0 -56px}
  .ctl__stage .hold{padding:0 12px;font-size:11px}
  .ctl__stage .ctl__ring{left:-16px;top:-16px;width:144px;height:144px}
  .ctl__stage .ctl__echo{inset:-16px}
}
.ctl__hint{max-width:1040px;margin:14px auto 0;text-align:center;color:var(--text-secondary)}
/* HOME NOTCH (2026-09-24): the facts are never hidden (no void for a visitor who does not press): they rest dimmed at .44 (.fact) and
   light up 550 ms apart when the hold completes */
html.no-js .ctl__hint{display:none}

/* ---------- i2. HEADER MENUS: Departments and Get Involved share one pattern ---------- */
#ddGi .dd__menu{min-width:250px}

/* ---------- i3. FOOTER BAND AND SOCIAL TILES (.soc, reused through data-content="socials") ---------- */
.ftr__band{display:grid;gap:clamp(24px,4vh,40px);padding-bottom:clamp(36px,6vh,64px);margin-bottom:clamp(36px,6vh,64px);border-bottom:1px solid var(--rule)}
.ftr__motto{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,6vw,6rem);line-height:.96;letter-spacing:.04em;text-transform:uppercase;max-width:15ch}
.socs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
@media (max-width:980px){.socs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.socs{grid-template-columns:minmax(0,1fr)}}
.socs > li{display:flex}
.soc{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:72px;padding:14px 18px;border:1px solid var(--rule);background:rgba(59,43,36,.35);
  text-decoration:none;color:var(--text-primary);transition:border-color .45s var(--ease-out),background-color .45s var(--ease-out)}
.soc::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out)}
.soc:hover,.soc:focus-visible{border-color:var(--rule-strong);background:rgba(59,43,36,.6)}
.soc:hover::before,.soc:focus-visible::before{transform:scaleX(1)}
.soc__g{flex:none;width:22px;height:22px;fill:none;stroke:var(--text-primary);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease-out)}
.soc:hover .soc__g,.soc:focus-visible .soc__g{transform:translateY(-2px)}
.soc__t{display:grid;gap:3px;min-width:0}
.soc__l{font-family:var(--f-head);font-weight:600;font-size:1rem;letter-spacing:.03em;line-height:1.2}
.soc__h{color:var(--text-secondary);font-size:12px;letter-spacing:.04em;text-transform:none;line-height:1.35;overflow-wrap:anywhere}
.ftr__logo img{width:180px}
@media (min-width:480px){.ftr__logo img{width:clamp(240px,20vw,300px)}}

/* ---------- i4. PAGE TO PAGE SHUTTER: the header keeps its place, the old page softens away, the new one rises, a Sanguine line crosses ---------- */
.hdr{view-transition-name:hdr}
/* the shutter and the scan line gave way to the leaf turn (engines, S5): FX CORE BLOCK at the end of this file */
::view-transition-group(title){animation-duration:.42s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
@supports not (view-transition-name:none){body{animation-duration:.45s}}

/* ---------- i5. KINETIC HEADLINES: each visual line rises out of its own mask ---------- */
.kin .ln{display:block;clip-path:inset(-.4em -.6em -.14em -.6em)}
.kin .ln__i{display:block;transform:translate3d(0,118%,0);transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--li,0)*70ms)}
.kin.kin-go .ln__i{transform:none}
.kin.kin-done .ln__i{transition:none}
.kin.kin-done .ln{clip-path:none}
.reveal .part.kin{opacity:1;transform:none}

/* ---------- i6. DEVELOPING PLATES AND CARD ENTRANCES ---------- */
.dev__cov{position:absolute;inset:-1px;z-index:3;background:var(--canvas);transform-origin:50% 0;pointer-events:none;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.dev.dev-in .dev__cov{transform:scaleY(0)}
.dev.dev-done .dev__cov{display:none}
.dev img{scale:1.12;filter:sepia(.6) brightness(.7);
  transition:scale 1.4s cubic-bezier(.16,1,.3,1),filter 1.2s cubic-bezier(.16,1,.3,1),transform 1.6s var(--ease-out),opacity .9s var(--ease-out)}
.dev.dev-in img{scale:1;filter:none}
.cin{opacity:0;transform:translate3d(0,28px,0)}
.cin.cin-go{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--ci,0)*60ms)}

/* ---------- i7. CARD LAMP AND TILT (fine pointers only) ---------- */
.person,.soc{position:relative}
.lamp{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s var(--ease-out)}
.is-lit > .lamp{opacity:1}
.lamp__disc{position:absolute;left:0;top:0;width:480px;height:480px;margin:-240px 0 0 -240px;border-radius:50%;will-change:transform;
  background:radial-gradient(closest-side,rgba(242,233,216,.07),rgba(242,233,216,0))}
.has-tilt{perspective:900px}
@media (hover:none),(pointer:coarse){.lamp{display:none}}

/* ---------- i8. GATES: motion off shows every final state at once ---------- */
html.still .kin .ln__i,html.no-js .kin .ln__i{transform:none !important}
html.still .kin .ln{clip-path:none}
html.still .dev__cov{display:none}
html.still .dev img{scale:1;filter:none}
html.still .cin{opacity:1;transform:none}
html.still .lamp{display:none}
html.still .card,html.still .ecard,html.still .person,html.still .nrow,html.still .soc{rotate:none !important}
html.still .ctl__stage .ctl__target{transition:none}
html.still .ctl__stage.is-engaged .ctl__target{transform:translate3d(0,var(--dock-y,200px),0) scale(.42) !important}
@media (prefers-reduced-motion: reduce){
  html:not(.motion-on) .kin .ln__i{transform:none !important}
  html:not(.motion-on) .dev__cov{display:none}
  html:not(.motion-on) .dev img{scale:1;filter:none}
  html:not(.motion-on) .cin{opacity:1;transform:none}
  html:not(.motion-on) .ctl__stage.is-engaged .ctl__target{transform:translate3d(0,var(--dock-y,200px),0) scale(.42) !important}
}
@media (forced-colors:active){.lamp,.dev__cov{display:none}.dev img{filter:none}.ctl__stage{border-color:CanvasText}}

/* ---------- i9. THE SHOWCASE SLIDER (A8): neighbours smaller and darker, the index rolls digit by digit ---------- */
.show.js-carousel .acts .act{transform:scale(calc(1 - .14 * var(--d,0)));filter:brightness(calc(1 - .5 * var(--d,0)));transform-origin:50% 50%;will-change:transform,filter;
  transition:opacity .9s var(--ease-out)}
.acts__count .dg{display:inline-block;height:1.5em;overflow:hidden;vertical-align:top}
.acts__count .dg__c{display:flex;flex-direction:column;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.acts__count .dg__c > span{display:block;height:1.5em;line-height:1.5em}
.acts__count .dg + .dg .dg__c{transition-delay:.06s}
@media (forced-colors:active){.show .act{filter:none}}

/* ---------- i10. THE RETICLE WITHOUT LAYOUT: the box no longer changes width and height each frame. It sits on the point with no size,
   and each corner bracket is carried out to the frame by the individual translate property. The same look, transform only. ---------- */
.ret{width:0;height:0;transform:translate3d(var(--rx,-99px),var(--ry,-99px),0);will-change:transform}
.ret__c--tl,.ret__c--tr,.ret__c--bl,.ret__c--br{left:0;top:0;right:auto;bottom:auto}
.ret__c--tl{translate:calc(var(--rw,34px) / -2) calc(var(--rh,34px) / -2)}
.ret__c--tr{translate:calc(var(--rw,34px) / 2 - 10px) calc(var(--rh,34px) / -2)}
.ret__c--bl{translate:calc(var(--rw,34px) / -2) calc(var(--rh,34px) / 2 - 10px)}
.ret__c--br{translate:calc(var(--rw,34px) / 2 - 10px) calc(var(--rh,34px) / 2 - 10px)}
/* A7: the mono tag beside a locked reticle (OPEN, PDF, NEW TAB, VIEW) */
.ret__tag{position:absolute;left:0;top:0;translate:calc(var(--rw,34px) / 2 + 8px) calc(var(--rh,34px) / -2 - 2px);
  font-family:var(--f-mono);font-style:normal;font-size:11px;line-height:1;letter-spacing:.14em;white-space:nowrap;color:rgba(242,233,216,.7);
  opacity:0;transition:opacity .15s var(--ease-out)}
.ret.is-lock.has-tag .ret__tag{opacity:1}
.ret.is-ink .ret__tag{color:rgba(59,43,36,.8)}
/* END INTERACTION BLOCK */

/* FIXER BLOCK (2026-09-21): review findings. Hit areas, post-nominals, tab deep links, footer motto. */
/* 44 px targets for every pointer, not only touch: stand-alone links, the header controls and the citations */
.nrow__body > .link,.slide__txt .link{display:inline-flex;align-items:center;min-height:44px}
.btn--sm,.motion{min-height:44px}
.btn--sm{display:inline-flex;align-items:center;justify-content:center}
.cite{min-height:44px}
.hdr__links > li > a{min-width:44px;justify-content:center}
/* degrees after a name show exactly as confirmed (PhD, MSc), in the mono face, not forced to capitals */
.person__post{text-transform:none}
/* a deep link to a tab (for example /about/#advisory-board) lands with the tabs below the header */
[data-tabs]{scroll-margin-top:calc(var(--hdr-h) + 16px)}
/* the footer motto is a quiet mono line; the page's own closing section keeps the last display heading */
.ftr__motto.t-mono{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.14em;max-width:none;color:var(--text-secondary)}
.ftr__soc[hidden]{display:none !important}
/* the header spans the full screen (owner batch 5, item 92d): lockup at the left gutter, nav flush to the right gutter, never the centred
   content column; the gutter itself (--hdr-pad, one value for both sides) is set in the HEADER WIDE and HEADER RIGHT blocks */
.hdr{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
/* one Sound control on screen: the film HUD has its own, so the header's steps aside while the HUD is visible */
.hdr__sound{transition:opacity .45s var(--ease-out),visibility 0s linear 0s}
html.hud-sound .hdr__sound{opacity:0;visibility:hidden;transition:opacity .45s var(--ease-out),visibility 0s linear .45s}
/* department hero pictures: the frame is 4:3 (not a tall portrait), so the 16:9 picture keeps 75 % of its width, and each crop keeps its subject */
.hplate--img .hplate__frame{aspect-ratio:4/3}
.hplate--img{width:min(100%,560px)}
.hplate--img img[src*="training-development"]{object-position:68% 50%}
.hplate--img img[src*="research-innovation"]{object-position:85% 50%}
.hplate--img img[src*="awareness"]{object-position:50% 50%}
.hplate--img img[src*="public-relations"]{object-position:12% 50%}
/* the events page opens on previous events when nothing is upcoming, with one line that says so */
.ev-note{margin:0 0 18px;color:var(--text-secondary)}
/* program cards: the footer is always stacked (Led by above the link), so neighbours in a row end alike */
.sigp__foot{flex-direction:column-reverse;align-items:flex-start;justify-content:flex-start;gap:2px}
/* grids never leave one card alone on a row: four program cards sit as two by two */
@media (min-width:641px){.cards.sigp-list:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a single event is one wide card: the picture left, the details right, instead of one third of an empty row */
@media (min-width:861px){
  .ecards:has(> li:only-child){grid-template-columns:minmax(0,1fr)}
  .ecards > .ecard:only-child{flex-direction:row}
  .ecards > .ecard:only-child .ecard__img{flex:0 0 44%;aspect-ratio:auto;min-height:280px}
}
/* the event page plate: a programme cover is a portrait page, so it keeps the 4:5 frame and shows the whole page */
.hplate--img.hplate--ev{width:min(100%,calc(62vh * .8),460px)}
.hplate--img.hplate--ev .hplate__frame{aspect-ratio:4/5}
.hplate--ev .hplate__frame > img{object-fit:contain}
/* programme pages fill the column instead of leaving an empty quarter on the right */
.gal--pages{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.gal--pages:not(:has(> :nth-child(3))){grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),300px))}
/* empty states read as calm body text under their dashed frame, never louder than the real content */
.empty strong{margin-bottom:6px;font-family:var(--f-head);font-weight:600;font-size:1.05rem;line-height:1.35;letter-spacing:.01em;text-transform:none}
/* the Advisory Board plate: four member portraits, two by two, in the usual square-ish frame */
.hplate--img.hplate--quad{width:min(100%,calc(62vh * .8),460px)}
.hplate--quad .hplate__frame{aspect-ratio:1/1}
.hplate__quad{position:absolute;inset:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hplate__quad img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:860px){.hplate--img.hplate--ev,.hplate--img.hplate--quad{width:100%}.hplate--ev .hplate__frame,.hplate--quad .hplate__frame{aspect-ratio:4/3}}
/* an event's own cover photo (landscape) fills a 3:2 plate edge to edge; only the portrait programme page keeps 4:5 and contain */
.hplate--img.hplate--ev.hplate--photo{width:min(100%,520px)}
.hplate--ev.hplate--photo .hplate__frame{aspect-ratio:3/2}
.hplate--ev.hplate--photo .hplate__frame > img,.hplate--ev.hplate--photo .hplate__frame > picture.pic > img{object-fit:cover}
@media (max-width:860px){.hplate--img.hplate--ev.hplate--photo{width:100%}}
/* END FIXER BLOCK */

/* ===================== DEPARTMENTS BLOCK (departments builder, 2026-09-21) ===================== */
/* the Board of Directors section on /departments/ (above the four departments): text left, the boardroom plate right; stacked on phones */
.dp-board__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:center}
.dp-board__in .sec__head{margin-bottom:0}
.dp-board__prose{margin-top:clamp(18px,2.4vh,28px)}
.dp-plate{position:relative;margin:0;width:100%;max-width:640px;justify-self:end}
.dp-plate .hplate__frame{aspect-ratio:16/10}
.dp-plate .hplate__frame > img{object-position:50% 45%}
.dp-board__h{margin-top:clamp(48px,8vh,96px)}
@media (max-width:860px){.dp-board__in{grid-template-columns:minmax(0,1fr)}.dp-plate{justify-self:stretch;max-width:none}.dp-plate .hplate__frame{aspect-ratio:4/3}}
/* the new research picture: keep the open, laparoscopic and robotic instruments and the robot in the 4:3 crop */
.hplate--img img[src*="research-innovation"]{object-position:70% 50%}

/* the portrait ring: every photo tile from RSIG.ui.personTile gets a thin ember ring (Sanguine into warm amber) and a soft outer glow.
   The ring and the glow are pseudo elements; hover and keyboard focus inside the tile change only their opacity and transform (300 ms).
   The photo itself is clipped by clip-path so the glow may spill outside the circle. Monogram and open seat tiles keep their plain frame. */
.person__photo:not(.person__mono){--ember-a:#A8432E;--ember-b:#D98A4B;--ember-c:#EDB877;overflow:visible;border-color:transparent}
.person__photo:not(.person__mono) img{clip-path:circle(46% at 50% 50%)}
.person__photo--plain:not(.person__mono) img{clip-path:circle(50% at 50% 50%)}
.person__photo:not(.person__mono)::before{content:"";position:absolute;inset:-2px;z-index:2;border-radius:50%;padding:1.5px;pointer-events:none;
  background:conic-gradient(from 200deg,var(--ember-a),var(--ember-b) 30%,var(--ember-c) 50%,var(--ember-b) 70%,var(--ember-a));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.92;transition:opacity .3s var(--ease-out)}
.person__photo:not(.person__mono)::after{content:"";position:absolute;inset:-2px;z-index:1;border-radius:50%;pointer-events:none;
  box-shadow:0 0 10px 1px rgba(217,138,75,.48),0 0 30px 6px rgba(168,67,46,.3);
  opacity:.6;transform:scale(1);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.person:hover .person__photo:not(.person__mono)::before,.person:focus-within .person__photo:not(.person__mono)::before{opacity:1}
.person:hover .person__photo:not(.person__mono)::after,.person:focus-within .person__photo:not(.person__mono)::after{opacity:1}
/* ROUND4 DEPARTMENTS (owner: "the outlined soft box when cursor goes on portraits", Safari and Chrome): the hover used to scale the glow to
   1.05, which lifted it off the ring and showed the dark mount inside it as a grey band, an outlined disc. Now nothing moves or grows: a
   second warm glow on the ring's own radius (on the spark element, so the breathing glow's animation is untouched) fades in, in place. */
.person__spark::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out);
  box-shadow:0 0 8px 1px rgba(237,184,119,.42),0 0 24px 4px rgba(217,138,75,.26)}
.person:hover .person__spark::after,.person:focus-within .person__spark::after{opacity:1}
html.still .person__spark::after{transition:none}
html.still .person:hover .person__spark::after,html.still .person:focus-within .person__spark::after{opacity:0}
/* motion off: the same ring, calm and static */
html.still .person__photo:not(.person__mono)::before,html.still .person__photo:not(.person__mono)::after{transition:none}
html.still .person:hover .person__photo:not(.person__mono)::before,html.still .person:focus-within .person__photo:not(.person__mono)::before{opacity:.92}
html.still .person:hover .person__photo:not(.person__mono)::after,html.still .person:focus-within .person__photo:not(.person__mono)::after{opacity:.6;transform:none}
/* END DEPARTMENTS BLOCK */

/* =====================================================================
   RESEARCH BLOCK (research builder, 2026-09-21). Appended only: nothing above is changed.
   The Research page lists (latest paper, archive, advisors' papers, evidence rows, gaps) and the four-mark gap folio on About.
   ===================================================================== */
.rs-intro{margin-top:14px;max-width:60ch;color:var(--text-secondary)}
.rs-lab{display:block;margin-bottom:6px;color:var(--text-secondary)}
.rs-t{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(242,233,216,.4)}
.rs-t:hover{text-decoration-color:currentColor}
.rs-doi{word-break:break-word}
/* the latest paper: one framed entry */
.rs-feat{position:relative;display:grid;gap:14px;padding:clamp(24px,3.4vw,48px);border:1px solid var(--rule);background:rgba(38,32,26,.42)}
.rs-feat::before{content:"";position:absolute;left:-1px;top:-1px;width:28px;height:28px;border-left:1px solid var(--line);border-top:1px solid var(--line);pointer-events:none}
.rs-feat__meta,.rs-feat__venue{color:var(--text-secondary)}
.rs-feat__t{max-width:34ch;text-transform:none;letter-spacing:.01em;line-height:1.18}
.rs-feat__body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,48px);margin-top:8px;padding-top:18px;border-top:1px solid var(--rule)}
.rs-feat__body p:not(.t-mono){max-width:56ch}
.rs-feat__auth{max-width:90ch;font-size:.95rem;color:var(--text-secondary)}
.rs-feat__auth .rs-lab{display:inline;margin-right:.6em}
/* the archive: year, then the record */
.rs-arch{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rs-arch__row{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:clamp(12px,2.4vw,32px);padding:clamp(18px,2.6vw,28px) 0;border-bottom:1px solid var(--rule)}
.rs-arch__y{font-size:14px;color:var(--text-secondary);padding-top:4px}
.rs-arch__k{color:var(--text-secondary);margin-bottom:6px}
.rs-arch__a,.rs-arch__c{margin-top:8px;max-width:90ch;color:var(--text-secondary);font-size:.95rem}
/* the advisors' papers: three groups */
.rs-grp + .rs-grp{margin-top:clamp(40px,6vh,72px)}
.rs-grp__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1em;margin-bottom:clamp(16px,2.4vh,24px)}
.rs-grp__n{color:var(--text-secondary);letter-spacing:.14em}
.rs-paps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,48px);border-top:1px solid var(--rule)}
.rs-pap{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--rule)}
.rs-pap__c{color:var(--text-secondary)}
.rs-pap__t{max-width:52ch}
.rs-pap__a{font-size:.92rem;color:var(--text-secondary)}
.rs-pap__f{max-width:60ch}
.rs-pap p:last-child{margin-top:auto}
.rs-note{margin-top:clamp(28px,4vh,44px);padding:18px 20px;border:1px solid var(--rule);border-left:2px solid var(--line);max-width:84ch}
.rs-note p{color:var(--text-primary)}
.rs-note .rs-lab{display:inline;margin-right:.6em}
/* the evidence rows */
.rs-evs{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.rs-ev{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(16px,2.6vw,40px);padding:clamp(20px,2.8vw,32px) 0 clamp(20px,2.8vw,32px) clamp(14px,1.6vw,22px);border-bottom:1px solid var(--rule)}
.rs-ev--otcoe::before{content:"";position:absolute;left:0;top:clamp(20px,2.8vw,32px);bottom:clamp(20px,2.8vw,32px);width:2px;background:var(--line)}
.rs-ev__head{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.rs-ev__n{color:var(--text-secondary)}
.rs-ev__tags{display:flex;flex-wrap:wrap;gap:6px}
.rs-tag{display:inline-flex;align-items:center;min-height:26px;padding:2px 8px;border:1px solid var(--rule-strong);font-size:11px;letter-spacing:.1em;color:var(--text-primary)}
.rs-tag--d{border-style:dashed}
.rs-tag--otcoe{border-color:var(--line);background:rgba(168,67,46,.18)}
.rs-ev__det{font-size:.92rem;color:var(--text-secondary)}
.rs-ev__dl{display:grid;gap:14px;margin:0}
.rs-ev__dl dt{margin-bottom:4px;color:var(--text-secondary)}
.rs-ev__dl dd{margin:0;max-width:62ch}
.rs-ev__lim dd{color:var(--text-secondary)}
.rs-ev__src{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:var(--text-secondary)}
.rs-ev__src p{overflow-wrap:anywhere}
.rs-gapbox{margin-top:clamp(40px,7vh,80px);padding-top:clamp(24px,4vh,40px);border-top:1px solid var(--rule-strong)}
.rs-gapbox .t-sub{margin-bottom:clamp(16px,2.4vh,24px)}
.rs-gaps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px clamp(20px,3vw,48px);counter-reset:rsg}
.rs-gaps li{position:relative;padding-left:2.6em;max-width:62ch;counter-increment:rsg}
.rs-gaps li::before{content:counter(rsg,decimal-leading-zero);position:absolute;left:0;top:.2em;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--text-secondary)}
@media (max-width:1100px){
  .rs-ev{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
  .rs-ev__src{grid-column:2}
}
@media (max-width:860px){
  .rs-feat__body,.rs-paps,.rs-gaps{grid-template-columns:minmax(0,1fr)}
  .rs-ev{grid-template-columns:minmax(0,1fr)}
  .rs-ev__src{grid-column:auto}
  .rs-arch__row{grid-template-columns:minmax(0,1fr);gap:6px}
}
/* the gap folio with four marks: four columns on wide screens; two by two below 1100 px (the leaders step aside, as they do on phones) */
.mark__who{display:block;margin-bottom:10px;color:var(--panel);letter-spacing:.12em}
.gap__scale--4 .gap__marks{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap__scale--4 .mark__num{font-size:clamp(3rem,5.2vw,5.6rem)}
.gap__scale--4 .mark__txt{max-width:34ch}
@media (max-width:1100px){
  .gap__scale--4 .gap__marks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(28px,4vh,44px);margin-top:36px}
  .gap__scale--4 .gap__leaders{display:none}
}
@media (max-width:760px){
  .gap__scale--4 .gap__marks{grid-template-columns:minmax(0,1fr)}
}
/* END RESEARCH BLOCK */

/* =====================================================================
   INSTRUMENT BLOCK (instrument builder, 2026-09-21). FIG. 06: a robotic instrument entering the body through a port, drawn as a notebook plate.
   The body wall (skin, inner line, 45 degree hatching), the trocar with its seal at the remote centre of motion, the shaft drawn as a
   steel cylinder, the housing with its four drive discs, the two link wrist with pulleys and pins, and the jaws with their serrations.
   Parchment strokes at .6 to .86, hatching at .35; Sanguine only for the target and for the jaws once the controls are engaged.
   ===================================================================== */
.ctl__svg .c-wall .w-band{fill:url(#instFadeF);stroke:none;opacity:.55}
.ctl__svg .c-wall .w-hatch{stroke:url(#instFadeS);opacity:.35}
.ctl__svg .c-wall .w-skin{stroke:url(#instFadeS);opacity:.86}
.ctl__svg .c-wall .w-inner{stroke:url(#instFadeS);opacity:.6}
/* on a phone the scale readout moves under the state readout, clear of the instrument housing at the top right */
.ctl__stage.is-tall .ctl__ro--tr{left:32px;right:auto;top:40px}
@media (max-width:720px){.ctl__stage{aspect-ratio:3/4}}
@media (max-width:480px){.ctl__stage.is-tall .ctl__ro--tr{left:18px}}
.ctl__svg .c-wall .w-tent{stroke:rgba(242,233,216,.7)}
.ctl__svg .c-inst *,.ctl__svg .c-port *{stroke:rgba(242,233,216,.84)}
.ctl__svg .c-inst .i-body{fill:rgba(38,32,26,.97);stroke:none}
.ctl__svg .c-inst .i-solid,.ctl__svg .c-port .i-solid,.ctl__svg .c-port .i-seal{fill:rgba(38,32,26,.97)}
.ctl__svg .c-inst .i-hatch,.ctl__svg .c-port .i-hatch{stroke:rgba(242,233,216,.35)}
.ctl__svg .c-inst .i-hl{stroke:rgba(242,233,216,.42);stroke-width:1.5;stroke-linecap:round}
.ctl__svg .c-inst .i-fine,.ctl__svg .c-port .i-fine{stroke:rgba(242,233,216,.45)}
.ctl__svg .c-inst .i-ring{stroke:rgba(242,233,216,.62)}
.ctl__svg .c-inst .i-cable{stroke:rgba(242,233,216,.4)}
.ctl__svg .c-inst .i-disc circle{fill:rgba(59,43,36,.95);stroke:rgba(242,233,216,.7)}
.ctl__svg .c-inst .i-disc path{stroke:rgba(242,233,216,.55)}
.ctl__svg .c-inst circle.i-pul{fill:rgba(38,32,26,.97)}
.ctl__svg .c-inst circle.i-pin{fill:rgba(242,233,216,.72);stroke:none}
.ctl__svg .c-inst .i-jaw path:first-child{fill:rgba(38,32,26,.97)}
.ctl__svg .c-inst .i-jaw .i-teeth{stroke:rgba(242,233,216,.55)}
.ctl__stage.is-engaged .c-inst .i-jaw path{stroke:var(--accent)}
.ctl__stage.is-engaged .c-inst .i-jaw path:first-child{fill:rgba(168,67,46,.24)}
.ctl__stage.is-engaged .c-inst .i-jaw .i-teeth{stroke:rgba(168,67,46,.8)}
.ctl__svg .c-rcm path{stroke:rgba(242,233,216,.85)}
.ctl__svg .c-rcm .c-rcm__lead{stroke:rgba(242,233,216,.4)}
.ctl__svg .c-rcm text{fill:var(--text-secondary);stroke:none;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em}
/* the target is part of the scene from the start: quiet while locked, full once engaged */
.ctl__svg .c-target{opacity:.62}
.ctl__svg .c-target *{stroke:rgba(168,67,46,.9)}
.ctl__svg .c-target .c-target__halo{stroke:none}
.ctl__stage.is-engaged .c-target{opacity:1}
/* END INSTRUMENT BLOCK */

/* =====================================================================
   DOOR LIFE BLOCK (owner, 2026-09-21): "can the ring around rsig logo at door keep moving and can we have a glow somewhere at the door".
   Three living lights while the doors are shut, all transform and opacity only, all gone as the doors open:
   1. a comet of light that keeps circling the logo on its ring (.door__orbit), 2. a warm amber glow that breathes behind the logo
   (.door__glow), 3. a thin line of warm light through the seam between the leaves (.door__seam), as if the theatre lamps were behind it.
   Each has an outer element that fades on opening and an inner one that loops, so the loop never fights the fade.
   ===================================================================== */
.door__btn img{position:relative}
.door__glow{position:absolute;inset:-46%;pointer-events:none;transition:opacity .6s var(--ease-out)}
.door__glow i{position:absolute;inset:0;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(closest-side,rgba(255,190,134,.5),rgba(226,132,80,.26) 40%,rgba(168,67,46,.11) 60%,rgba(168,67,46,0) 77%);
  animation:doorGlow 5.2s ease-in-out infinite alternate}
@keyframes doorGlow{0%{opacity:.5;transform:scale(.93)}100%{opacity:1;transform:scale(1.07)}}
.door__orbit{position:absolute;inset:-8%;pointer-events:none;will-change:transform;animation:doorOrbit 6.5s linear infinite;transition:opacity .35s var(--ease-out)}
.door__orbit i{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,226,196,0) 0deg,rgba(255,226,196,0) 225deg,rgba(255,206,160,.35) 300deg,rgba(255,236,214,.95) 357deg,rgba(255,236,214,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent 95.3%,#000 96%,#000 97.4%,transparent 98.1%);
          mask:radial-gradient(farthest-side,transparent 95.3%,#000 96%,#000 97.4%,transparent 98.1%)}
.door__orbit b{position:absolute;left:50%;top:1.65%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FFEEDB;
  box-shadow:0 0 8px 2px rgba(255,200,146,.85),0 0 22px 6px rgba(255,160,100,.35)}
@keyframes doorOrbit{to{transform:rotate(360deg)}}
.door__seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;pointer-events:none;transition:opacity .4s var(--ease-out);transform-origin:50% 50%}
.door__seam i{position:absolute;inset:0;will-change:opacity;
  background:linear-gradient(to bottom,rgba(255,200,150,0),rgba(255,200,150,.45) 20%,rgba(255,226,194,.9) 50%,rgba(255,200,150,.45) 80%,rgba(255,200,150,0));
  box-shadow:0 0 12px 2px rgba(255,172,112,.3),0 0 46px 12px rgba(255,150,90,.12);
  animation:doorSeam 5.2s ease-in-out infinite alternate}
@keyframes doorSeam{0%{opacity:.4}100%{opacity:1}}
html.doors-opening .door__orbit{opacity:0}
html.doors-opening .door__seam{opacity:0;transform:scaleX(9);transition:opacity .7s var(--ease-out) .25s,transform .7s var(--ease-out)}
html.doors-light.doors-opening .door__seam{transform:none;transition:opacity .4s var(--ease-out)}
html.doors-opening .door__glow{opacity:0;transition:opacity .9s var(--ease-out)}
@media (forced-colors:active){.door__glow,.door__orbit,.door__seam{display:none}}
/* =====================================================================
   HEADER LOCKUP BLOCK (header builder, 2026-09-21). Owner: "alfaisal logo | RSIG logo on top left but enlarged".
   One lockup on every page: [Alfaisal University logo on a Parchment card] [1 px Parchment divider] [RSIG extended logo, dark].
   It is laid out at its full size and condenses after scrolling with a transform only (about 300 ms); the header box keeps one height,
   so nothing reflows. Sizes: desktop 64 px in a 96 px header, condensed 48 in 72; tablets and small laptops 56 in 84, condensed 46 in 68;
   phones and short landscape screens 44 in 64, condensed 40 in 56. --hdr-h is the full header height (page tops, anchors: never less
   than the header). The door shows only the round RSIG logo; hero.js glides it into the emblem of the extended logo (html.logo-fly,
   html.logo-land, html.door-logo).
   ===================================================================== */
:root{--db:max(170px,min(56vw,calc((50vh - 76px) / 1.04),380px));   /* the door's round logo, up to 380 px (kept from the earlier door rules) */
  --lk:64px;--lks:.75;--hdr-h:96px;--hdr-hc:72px;--hdr-k:.75}
@media (max-width:1200px){:root{--lk:56px;--lks:.8214;--hdr-h:84px;--hdr-hc:68px;--hdr-k:.8095}}
@media (max-width:560px),(max-height:500px){:root{--lk:44px;--lks:.9091;--hdr-h:64px;--hdr-hc:56px;--hdr-k:.875}}

/* the header box: fixed height, only its children take the pointer, so the empty strip under a condensed header never blocks the page */
.hdr{height:var(--hdr-h);pointer-events:none}
.hdr > *{pointer-events:auto}
.hdr::before{transform-origin:50% 0;transition:opacity .6s var(--ease-out),transform .3s var(--ease-inout)}
.hdr::after{bottom:auto;height:var(--hdr-hc);background:rgba(38,32,26,.94)}   /* solid only ever shows once condensed */
.hdr > .hdr__home,.hdr > .hdr__nav{transition:opacity .6s var(--ease-out),transform .3s var(--ease-inout)}

/* the lockup */
.hdr .hdr__home{position:relative;display:flex;align-items:center;height:var(--lk);min-height:44px;min-width:0;padding:0;flex:none;
  transform-origin:0 50%;letter-spacing:0;font-size:1rem;border-radius:3px}
.hdr__lock{display:flex;align-items:center;height:var(--lk);gap:calc(var(--lk) * .22)}
.hdr__af{display:block;flex:none;box-sizing:border-box;height:calc(var(--lk) * .8);padding:calc(var(--lk) * .096);background:#F2E9D8;border-radius:3px;
  box-shadow:0 0 0 1px rgba(242,233,216,.22),0 6px 18px rgba(12,9,7,.42)}
.hdr__af img{display:block;height:100%;width:auto;max-width:none}
.hdr__div{display:block;flex:none;width:1px;height:calc(var(--lk) * .7);background:rgba(242,233,216,.4)}
.hdr__rsig{position:relative;display:block;flex:none;height:var(--lk)}
.hdr__rsig img{display:block;height:100%;width:auto;max-width:none}
.hdr__rsig .hdr__emb{position:absolute;left:0;top:0;display:none;clip-path:inset(0 61.5% 0 0);opacity:0}   /* the emblem alone: only during the handover */

/* condensed: the lockup scales from its left edge and the nav moves up with it, both centred in the condensed height */
html:not(.logo-fly) .hdr--cond > .hdr__home{transform:translate3d(0,calc((var(--hdr-hc) - var(--hdr-h)) / 2),0) scale(var(--lks))}
html:not(.logo-fly) .hdr--cond > .hdr__nav{transform:translate3d(0,calc((var(--hdr-hc) - var(--hdr-h)) / 2),0)}
html:not(.logo-fly) .hdr--cond::before{transform:scaleY(var(--hdr-k))}

/* phones: the lockup and Menu share the row; "Get involved" lives in the phone sheet */
@media (max-width:560px){.hdr__cta{display:none}}

/* ---------- the door to header handover ---------- */
/* the round logo that flies: an empty box at the header's corner; hero.js writes the image's transform (laid out at 380 px, only scaled down) */
.hdr .hdr__logo{position:absolute;left:0;top:0;width:0;height:0;margin:0;display:none;pointer-events:none}
html.logo-fly .hdr .hdr__logo{display:block}
.hdr .hdr__logo img{position:absolute;left:0;top:0;width:380px;height:380px;max-width:none;border-radius:50%;transform-origin:0 0;opacity:0;will-change:transform}
html.door-logo .hdr .hdr__logo img{opacity:1}
html.door-logo .door__btn img{opacity:0}                  /* one logo: the door's own copy steps aside while the header's sits on it */
/* while the doors are shut the header rises above them with only that logo showing */
html.logo-fly .hdr{z-index:95}
html.doors .hdr > .hdr__home,html.doors .hdr > .hdr__nav{opacity:0;pointer-events:none}   /* every child but .hdr__logo, named (batch 8: no whole-page restyle when the doors go) */
html.doors .hdr::before,html.doors .hdr::after{opacity:0}
/* one thing at a time (batch 7): the door swings, the logo glides into the lockup, THEN the nav and the controls fade in around it,
   then the film's HUD and rail rise (hero.js starts the glide from doorDone) */
html.logo-fly:not(.logo-land) .hdr > .hdr__nav{opacity:0;pointer-events:none}
html.logo-land .hdr > .hdr__nav{opacity:1;pointer-events:auto;transition:opacity .6s var(--ease-out) .35s}
html.doors .hud,html.logo-fly:not(.logo-land) .hud{opacity:0}
.hud{transition:opacity .7s var(--ease-out) .6s}
html.doors .band__in,html.logo-fly:not(.logo-land) .band__in{opacity:0}   /* the first caption waits for the lockup, then its focus pull runs */
.band__in{transition:opacity .5s var(--ease-out) .25s}
/* the lockup waits for the round logo, then takes over as it lands: the emblem, the divider, the wordmark, the Alfaisal card */
html.logo-fly .hdr__af,html.logo-fly .hdr__div,html.logo-fly #hdrRsig{opacity:0}
html.logo-fly .hdr__rsig .hdr__emb{display:block}
html.logo-land .hdr .hdr__logo img{opacity:0;transition:opacity .42s var(--ease-inout)}
html.logo-land .hdr__rsig .hdr__emb{opacity:1;transition:opacity .42s var(--ease-inout)}
html.logo-land .hdr__div{opacity:1;transition:opacity .5s var(--ease-out) .12s}
html.logo-land #hdrRsig{opacity:1;transition:opacity .5s var(--ease-out) .24s}
html.logo-land .hdr__af{opacity:1;transition:opacity .5s var(--ease-out) .36s}
@media (forced-colors:active){.hdr__af{border:1px solid CanvasText}.hdr__div{background:CanvasText}}
/* END HEADER LOCKUP BLOCK */

/* =====================================================================
   SPEED BLOCK (speed builder, 2026-09-21). Appended; nothing here changes how the site looks.
   1. The fonts are self-hosted (/assets/fonts, SIL Open Font License, see OFL.txt there): Latin subset, woff2, font-display:swap.
      Antonio and IBM Plex Sans are variable fonts (one file covers every weight); IBM Plex Mono has one file per weight (400, 500). Garet Book (the body) is one file.
   2. Metric-matched fallbacks: until a font arrives, the local fallback is scaled to the same width and line height, so the swap does not
      move the text (size-adjust, ascent-override and descent-override measured from the font files against Arial, Arial Narrow, Courier New).
   3. picture.pic: the WebP wrapper the pages and RSIG.ui.pic() put around an img. display:contents keeps the img laid out exactly as before;
      rules written with "> img" get a twin for "> picture.pic > img".
   4. The door picture is served as WebP where the browser takes it (image-set); anything older keeps the JPEG from the rule above.
   ===================================================================== */
@font-face{font-family:'Antonio';font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/fonts/antonio-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* GARET (owner 2026-09-22: "here is Garet font, just write Garet and use Garet Book"): the brand body face, Garet Book by Type Forward (free desktop and web
   font, see GARET-LICENSE.txt), Latin subset of the owner's file. Book is weight 300, which is the body weight; bold text uses the browser's bold of it.
   size-adjust 94%: Garet is about 20% wider than the old stand-in (Gantari), so it is set a touch smaller to keep every page's measure and line count. */
@font-face{font-family:'Garet';font-style:normal;font-weight:300;font-display:swap;size-adjust:94%;src:url(/assets/fonts/garet-book-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Antonio Fallback';src:local('Arial Narrow'),local('ArialNarrow'),local('Arial');size-adjust:93.63%;ascent-override:123.33%;descent-override:14.86%;line-gap-override:0%}
@font-face{font-family:'Garet Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Roboto');size-adjust:112.85%;ascent-override:100.58%;descent-override:35.72%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Sans Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Roboto');size-adjust:98.3%;ascent-override:104.27%;descent-override:27.98%;line-gap-override:0%}
:root{
  --f-display:'Antonio','Antonio Fallback','Arial Narrow',sans-serif;
  --f-head:'IBM Plex Sans','IBM Plex Sans Fallback',system-ui,sans-serif;
  --f-body:'Garet','Garet Fallback',system-ui,sans-serif;
  --f-mono:'IBM Plex Sans','IBM Plex Sans Fallback',system-ui,sans-serif}   /* DEPTS8B (owner batch 8): labels in IBM Plex Sans, uppercase and tracked as before; measured 0.9 to 1.01 of the old widths, so nothing reflows */
picture.pic{display:contents}
picture.pic > source{display:none}   /* with the wrapper gone, a source must never become a grid or flex item */
.hplate__frame > picture.pic > img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);max-width:none;object-fit:cover}
.hplate--ev .hplate__frame > picture.pic > img{object-fit:contain}
.dp-plate .hplate__frame > picture.pic > img{object-position:50% 45%}
.door__wall,.door__skin{background-image:url(/assets/door.jpg);background-image:image-set(url(/assets/door.webp) type("image/webp"),url(/assets/door.jpg) type("image/jpeg"))}
/* END SPEED BLOCK */

/* =====================================================================
   PORTRAIT LIGHT BLOCK (owner, 2026-09-21): "the golden highlight is not consistent, please make sure it is, and if it can move even better".
   The backlight is now baked identically into every portrait (tools/portrait_grade.mjs UNIFORM=1). Here the ember ring gets a living light:
   the ring's conic gradient carries one bright spark with a warm tail, and the ring turns slowly, so the spark keeps circling every portrait
   (the same language as the door ring). The outer glow breathes. Tiles are phased apart so they never move in step. Transform and opacity
   only, on composited pseudo elements. html.still: the calm static ring.
   ===================================================================== */
.person{--pd:0s;--gd:0s}
.person:nth-child(5n+2){--pd:-1.8s;--gd:-1.1s}.person:nth-child(5n+3){--pd:-3.6s;--gd:-2.9s}.person:nth-child(5n+4){--pd:-5.4s;--gd:-.6s}.person:nth-child(5n+5){--pd:-7.2s;--gd:-3.8s}
.person__photo:not(.person__mono)::before{padding:2px;
  background:conic-gradient(from 0deg,rgba(168,67,46,.85) 0deg,rgba(168,67,46,.5) 140deg,var(--ember-b) 250deg,var(--ember-c) 318deg,#FFF1DE 356deg,rgba(168,67,46,.85) 360deg);
  will-change:transform;animation:portraitOrbit 9s linear var(--pd,0s) infinite}
.person__photo:not(.person__mono)::after{box-shadow:0 0 12px 2px rgba(217,138,75,.55),0 0 36px 8px rgba(168,67,46,.34);animation:portraitBreathe 4.8s ease-in-out var(--gd,0s) infinite alternate}
/* the spark: a small bright light riding the ring at the head of its warm tail (same turn, same phase as the ring) */
.person__spark{position:absolute;inset:-2px;z-index:3;border-radius:50%;pointer-events:none;will-change:transform;animation:portraitOrbit 9s linear var(--pd,0s) infinite}
.person__spark::before{content:"";position:absolute;left:50%;top:0;width:6px;height:6px;margin:-2px 0 0 -3px;border-radius:50%;background:#FFF3E2;
  box-shadow:0 0 6px 2px rgba(255,214,168,.95),0 0 18px 5px rgba(255,166,104,.5),0 0 34px 10px rgba(168,67,46,.28)}
.person--open .person__spark,.person__mono .person__spark{display:none}
@keyframes portraitOrbit{to{transform:rotate(360deg)}}
@keyframes portraitBreathe{0%{opacity:.4}100%{opacity:1}}
html.still .person__photo:not(.person__mono)::before,html.still .person__photo:not(.person__mono)::after,html.still .person__spark{animation:none}

/* =====================================================================
   RINGS EVERYWHERE AND NAMED CONTACTS (owner, 2026-09-21): "make all photos with a ring including advisors and everyone, photos should be
   pleasing" and "in contact at footer add Ahmad Mirza | Director | +966 50 649 8079, Aiko Danish | Director | +966 55 576 1237".
   ===================================================================== */
/* a slim dark mount between every photo and its ring, like a framed miniature */
.person__photo:not(.person__mono)::before,.person__photo:not(.person__mono)::after{inset:-6px}
.person__spark{inset:-6px}
/* the Advisory Board plate: four round portraits with the same moving ring, each phased apart */
.hplate__quad--rings{place-items:center;gap:0;padding:4%}
.hplate__quad--rings .qcell{display:grid;place-items:center;width:100%;height:100%}
.hplate__quad--rings .person__photo{width:min(76%,190px);border:0;background:var(--panel)}
.hplate__quad--rings .person__photo img{width:100%;height:100%}
/* footer: Name | Role | Phone, wrapping gracefully in a narrow column */
.ftr__col li.ftr__person{display:block;margin-top:10px}
.ftr__pwho{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;white-space:nowrap}
.ftr__pname{font-family:var(--f-head);font-weight:600;font-size:.92rem;letter-spacing:.02em;color:var(--text-primary)}
.ftr__prole{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.ftr__sep{color:var(--text-secondary);opacity:.55}
.ftr__col .ftr__pphone{min-height:34px}
/* Get Involved contact: one line per person */
.ctc__person{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;margin:0 0 4px}
.ctc__pname{font-weight:600}
.ctc__prole{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
@media (pointer:coarse){.ftr__col .ftr__pphone{min-height:44px}}
@media (max-width:620px){.ftr__pwho{display:block}.ftr__pwho .ftr__sep{display:none}.ftr__prole{display:block;margin-top:2px}}

/* FX CORE BLOCK (engines) ============================================================================================================
   The shared motion language (review/spectacle-plan.md section 1). S0 motion tokens, S2 ink states, S3 the lamp sweep, S4 living plates
   and the FIG caret, S5 the leaf turn and folio marks, S6 the last frame and the journey rule. Transform, opacity and filter only
   (stroke-dashoffset for the ink). html.still and html.no-js show every final state. forced-colors hides the decoration. */
:root{--ease-pen:cubic-bezier(.65,0,.35,1);--ease-weight:cubic-bezier(.45,0,.2,1);--ease-stamp:cubic-bezier(.3,1.4,.6,1);
  --dur-1:160ms;--dur-2:320ms;--dur-3:600ms;--dur-4:900ms;--dur-5:1400ms;--leaf-dx:2.5vw;--leaf-dir:1}
@media (max-width:767px){:root{--leaf-dx:4vw}}

/* ---- S5. THE LEAF TURN: the old leaf dims and slips left, the new one arrives from the right behind a Parchment edge with a Sanguine
   margin rule. The header, the notebook's spine, never moves. html.vt-back (history back) turns the leaf the other way. ---- */
::view-transition-old(root){animation:leafOut 420ms var(--ease-inout) both}
::view-transition-new(root){animation:leafIn 520ms var(--ease-out) 60ms both}
@keyframes leafOut{to{opacity:0;transform:translate3d(calc(var(--leaf-dx) * var(--leaf-dir) * -1),0,0);filter:brightness(.6)}}
@keyframes leafIn{from{opacity:0;transform:translate3d(calc(var(--leaf-dx) * var(--leaf-dir)),0,0)}}
html.vt-back{--leaf-dir:-1}
::view-transition-group(hdr){animation:none;z-index:3}
::view-transition-old(hdr),::view-transition-new(hdr){animation-duration:240ms}
.leaf-edge{position:fixed;left:0;top:0;width:3px;height:100vh;height:100lvh;opacity:0;pointer-events:none;view-transition-name:leaf}
::view-transition-group(leaf){animation:none;z-index:2}
::view-transition-old(leaf),::view-transition-new(leaf){animation:none;opacity:0}
::view-transition-image-pair(leaf){
  background:linear-gradient(90deg,#A8432E 0 1px,rgba(242,233,216,.92) 1px,rgba(242,233,216,.35) 3px);
  box-shadow:10px 0 34px 6px rgba(255,196,140,.10),-2px 0 14px 1px rgba(168,67,46,.28);
  animation:leafEdge 520ms var(--ease-inout) both}
html.vt-back::view-transition-image-pair(leaf){animation-name:leafEdgeBack}
@keyframes leafEdge{from{transform:translate3d(100vw,0,0)}to{transform:translate3d(-4vw,0,0)}}
@keyframes leafEdgeBack{from{transform:translate3d(-4vw,0,0) scaleX(-1)}to{transform:translate3d(100vw,0,0) scaleX(-1)}}
@media (max-width:767px){.leaf-edge{width:2.5px}
  ::view-transition-image-pair(leaf){background:linear-gradient(90deg,#A8432E 0 1px,rgba(242,233,216,.92) 1px,rgba(242,233,216,.35) 2.5px)}}
/* the folio mark of each leaf, top right of the page hero */
.pfolio{position:absolute;top:calc(var(--hdr-h) + 18px);right:calc(var(--gutter) + max(0px,(100% - 2 * var(--gutter) - var(--wrap)) / 2));z-index:2;
  display:flex;align-items:center;gap:10px;color:var(--text-secondary);font-size:12px;letter-spacing:.16em;text-transform:none;pointer-events:none;view-transition-name:folio}
.pfolio::before{content:"";width:18px;height:1px;background:var(--accent)}
@media (max-width:860px){.pfolio{top:calc(var(--hdr-h) + 10px);font-size:11px}}

/* ---- S2. THE INK: strokes wait unseen, the construction at 20%, until the pen reaches them. ink.js sets the dashes itself. ---- */
.ink-wait :is(.l,.w,.h,.t),.ink-wait :is(path,circle,ellipse,rect,line,polyline,polygon,text):not([class]){opacity:0}
.ink-wait :is(.d,.c){opacity:.2}
.ink-ghost{opacity:.2}
.ink-drawing{will-change:transform}
.ink-nib{position:absolute;left:0;top:0;z-index:4;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:#F2E9D8;pointer-events:none;opacity:0;
  box-shadow:0 0 4px 1px rgba(255,236,214,.9),0 0 10px 4px rgba(255,176,112,.45);will-change:transform,opacity}
.ink-bleed{position:absolute;pointer-events:none;opacity:0;overflow:visible}
.ink-bleed g{filter:url(#chalk)}
/* the FIG rule draws in 700 ms with the pen's easing, then its label settles in (the reveal system starts both) */
html.fx .reveal .divider__rule{transition-duration:.7s;transition-timing-function:var(--ease-pen)}
html.fx :is(.reveal .divider,.divider.reveal) .fig{opacity:0;transform:translate3d(0,4px,0);transition:opacity var(--dur-2) var(--ease-out) .7s,transform var(--dur-2) var(--ease-out) .7s}
html.fx :is(.reveal.in .divider,.divider.reveal.in) .fig{opacity:1;transform:none}

/* ---- S4. THE FIG GAUGE: a 6 px Sanguine caret rides the drawn rule as the section is read (CSS scroll driven animation only) ---- */
@supports (animation-timeline: view()){
  html.fx .sec{view-timeline:--fxsec block}
  html.fx .divider__rule{position:relative;overflow:hidden}
  html.fx .divider__rule::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 5'%3E%3Cpath d='M0 0h6L3 5z' fill='%23A8432E'/%3E%3C/svg%3E") left 0 bottom 1px/6px 5px no-repeat;
    opacity:1;transition:opacity var(--dur-2) var(--ease-out) .8s;animation:fxCaret auto linear both;animation-timeline:--fxsec}
  html.fx .reveal:not(.in) .divider__rule::after{opacity:0}
  @keyframes fxCaret{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(100% - 6px),0,0)}}
}
@media (max-width:479px){html.fx .divider__rule::after{display:none}}
html.still .divider__rule::after{display:none}

/* ---- S4. LIVING PLATES (plates.js): the depth layer and the composited frame ---- */
.hplate.fx-live .hplate__frame{will-change:transform}
.hplate__frame > .pl-depth{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);pointer-events:none}
.lstudy.pl-depth-on :is(.d,.c){visibility:hidden}
html.still .hplate__frame{transform:none !important;opacity:1 !important;filter:none !important}
html.still .pl-depth{display:none}
html.still .lstudy.pl-depth-on :is(.d,.c){visibility:visible}

/* ---- S3. THE LAMP SWEEP: one band of warm light crosses once ---- */
.fx-sweep{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none;border-radius:inherit}
.fx-sweep i{position:absolute;top:-20%;bottom:-20%;left:0;width:100%;will-change:transform;mix-blend-mode:soft-light;
  background:linear-gradient(105deg,rgba(255,196,140,0) 28%,rgba(255,196,140,calc(var(--fx-warm,.18) * .5)) 42%,rgba(255,214,168,var(--fx-warm,.18)) 50%,rgba(255,196,140,calc(var(--fx-warm,.18) * .5)) 58%,rgba(255,196,140,0) 72%)}
@supports not (mix-blend-mode:soft-light){.fx-sweep i{opacity:.6}}
html.still .fx-sweep,html.still .ink-nib{display:none}

/* ---- S6a. THE LAST FRAME: four instruments over one ember, behind the footer's text (at most .22) ---- */
.ftr > .wrap{position:relative;z-index:1}
.lf{position:absolute;left:0;right:0;top:0;height:calc(var(--lf-y,300px) + 90px);overflow:hidden;pointer-events:none;z-index:0}
.lf__fan{position:absolute;left:var(--lf-x,calc(100% - var(--gutter) - 200px));top:calc(var(--lf-y,300px) - 300px);width:0;height:0}   /* the ember is at 0,300 inside */
.lf__lines{position:absolute;left:0;top:0;opacity:.22}
.lf__i{position:absolute;top:-40px;width:24px;transform-origin:12px 0;will-change:transform}
.lf__i svg{display:block;overflow:visible;max-width:none}
.lf :is(path,circle){fill:none;stroke:#F2E9D8;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.lf .w{stroke:rgba(242,233,216,.5)}
.lf__i--1{left:-123.3px;height:336px;transform:rotate(-14deg)}
.lf__i--2{left:-51.5px;height:315px;transform:rotate(-5deg)}
.lf__i--3{left:27.5px;height:315px;transform:rotate(5deg)}
.lf__i--4{left:99.3px;height:336px;transform:rotate(14deg)}
.lf__ember{position:absolute;left:-60px;top:240px;width:120px;height:120px;border-radius:50%;opacity:.5;will-change:opacity;
  background:radial-gradient(closest-side,#FFF1DE 0,#FFE2C2 3%,rgba(255,190,134,.55) 8%,rgba(226,132,80,.2) 28%,rgba(168,67,46,.06) 50%,rgba(168,67,46,0) 70%)}
@media (max-width:767px){.lf__fan{transform:scale(.7);transform-origin:0 300px}}
html.still .lf__i{transform:none;rotate:none}
html.still .lf__i--1{transform:rotate(-14deg) !important}html.still .lf__i--2{transform:rotate(-5deg) !important}
html.still .lf__i--3{transform:rotate(5deg) !important}html.still .lf__i--4{transform:rotate(14deg) !important}
html.still .lf__ember{opacity:.5 !important}

/* ---- S6b. THE JOURNEY RULE: seven leaves from "the back of the room" to "the console" ---- */
.jr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:0 22px}
.jr__end{padding-top:22px;font-size:11px;line-height:1;letter-spacing:.16em;color:var(--text-secondary);white-space:nowrap;transition:opacity .5s var(--ease-out)}
.jr__list{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:28px}
.jr__list::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:rgba(242,233,216,.36);transform-origin:0 50%;transition:transform .9s var(--ease-pen)}
.jr__i{--k:0;position:relative;display:flex;justify-content:center;min-width:0}
.jr__i:nth-child(2){--k:1}.jr__i:nth-child(3){--k:2}.jr__i:nth-child(4){--k:3}.jr__i:nth-child(5){--k:4}.jr__i:nth-child(6){--k:5}.jr__i:nth-child(7){--k:6}
.jr__i a{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:44px;min-height:44px;padding:0 4px 8px;
  color:var(--text-secondary);text-decoration:none;transition:color .45s var(--ease-out)}
.jr__mk{display:block;width:1px;height:12px;background:rgba(242,233,216,.28);transform-origin:50% 0;
  transition:transform .3s var(--ease-out) calc(.9s + var(--k) * 60ms),background-color .45s var(--ease-out)}
.jr__l{font-family:var(--f-head);font-weight:600;font-size:.86rem;line-height:1.2;letter-spacing:.03em;white-space:nowrap}
.jr__f{font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:none;opacity:.75}
.jr__l,.jr__f{transition:opacity .4s var(--ease-out) calc(.9s + var(--k) * 60ms)}
.jr__i.is-seen a{color:var(--text-primary)}
.jr__i.is-seen .jr__mk{background:rgba(242,233,216,.9)}
.jr__i.is-here a{color:var(--text-primary)}
.jr__i.is-here .jr__mk{width:2px;height:18px;margin-bottom:-6px;background:var(--accent)}
.jr__i.is-here .jr__f{color:var(--accent);opacity:1}
.jr__i a:hover{color:var(--text-primary)}
.jr__i a:hover .jr__mk{background:var(--text-primary)}
.jr__here{position:absolute;left:50%;bottom:calc(100% + 10px);translate:-50% 0;font-size:10px;line-height:1;letter-spacing:.16em;color:var(--accent);white-space:nowrap;
  transition:opacity .3s var(--ease-out) 1.36s,transform .3s var(--ease-stamp) 1.36s}
.jr__here::after{content:"";position:absolute;left:50%;top:calc(100% + 2px);width:1px;height:6px;background:var(--accent)}
html.fx .ftr__band:not(.in) .jr__list::before{transform:scaleX(0)}
html.fx .ftr__band:not(.in) .jr__mk{transform:scaleY(0)}
html.fx .ftr__band:not(.in) :is(.jr__l,.jr__f,.jr__end){opacity:0}
html.fx .ftr__band:not(.in) .jr__here{opacity:0;transform:translate3d(0,-8px,0)}
html.fx .ftr__band:not(.in) .jr:focus-within :is(.jr__l,.jr__f,.jr__end,.jr__here){opacity:1}
@media (max-width:1100px){
  .jr{grid-template-columns:minmax(0,1fr) auto}
  .jr__end{padding:0 0 4px}
  .jr__end--b{grid-column:2;grid-row:1;text-align:right}
  .jr__list{grid-column:1 / -1;grid-row:2}
}
@media (max-width:640px){
  .jr{display:block}
  .jr__end{display:block;padding:0 0 6px 34px}
  .jr__end--b{padding:6px 0 0 34px;text-align:left}
  .jr__list{grid-template-columns:minmax(0,1fr);padding:4px 0}
  .jr__list::before{left:14px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:50% 0}
  html.fx .ftr__band:not(.in) .jr__list::before{transform:scaleY(0)}
  .jr__i{justify-content:flex-start}
  .jr__i a{flex-direction:row;align-items:center;gap:12px;width:100%;padding:0}
  .jr__mk{width:12px;height:1px;margin-left:8px;transform-origin:0 50%}
  .jr__i.is-here .jr__mk{width:18px;height:2px;margin-left:5px;margin-bottom:0}
  html.fx .ftr__band:not(.in) .jr__mk{transform:scaleX(0)}
  .jr__l{font-size:.95rem}
  .jr__here{position:static;translate:none;margin-left:auto}
  .jr__here::after{display:none}
  .ftr.lf-row .jr{padding-bottom:380px}   /* ROUND 4: the last frame's own row under the route (lastframe.js places the fan in it) */
}
@media (forced-colors:active){.lf,.ink-nib,.fx-sweep,.ink-bleed,.pl-depth{display:none}.jr__mk,.jr__list::before{background:CanvasText}}

/* ---- THE EMBER EDGE (owner, 2026-09-21 16:15): a warm light travels around the border of every department picture plate.
   .pl-edge is a 1.5 px ring (a mask cuts out its middle) holding a static ember outline; its child turns a conic gradient with one bright
   head and a warm tail, so the light runs round the border. .pl-glow is a soft inner glow that breathes. Both run only while on screen
   (.is-vis from site.js). html.still: the outline stays, the light rests where it is, nothing moves. ---- */
.lf__trav{position:absolute;left:-1px;top:299px;width:2px;height:2px}
.pl-edge{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit;padding:2px;background:rgba(168,67,46,.42);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.pl-edge i{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) rotate(var(--ea,0deg));
  background:conic-gradient(from 0deg,rgba(255,200,150,0) 0deg,rgba(255,200,150,0) 232deg,rgba(168,67,46,.55) 290deg,rgba(226,132,80,.8) 330deg,#FFE6C8 352deg,#FFF6EA 357deg,rgba(255,236,214,0) 360deg);
  will-change:transform;animation:plEdgeTurn 13s linear var(--ed,0s) infinite;animation-play-state:paused}
.pl-edge.is-vis i{animation-play-state:running}
@keyframes plEdgeTurn{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.pl-glow{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:.55;will-change:opacity;
  box-shadow:inset 0 0 0 1px rgba(168,67,46,.22),inset 0 0 26px 2px rgba(217,138,75,.2);
  animation:plGlow 5.2s ease-in-out var(--eg,0s) infinite alternate;animation-play-state:paused}
.pl-glow.is-vis{animation-play-state:running}
@keyframes plGlow{from{opacity:.35}to{opacity:1}}
html.still .pl-edge i,html.still .pl-glow{animation:none}
@media (forced-colors:active){.pl-edge,.pl-glow{display:none}}
/* END FX CORE BLOCK */

/* =====================================================================
   HEADER WIDE BLOCK (engines, owner 2026-09-21 16:15): "keep our original logo everywhere, extended logo only in header alongside alfaisal
   logo, make it bigger and towards the left, the sections events departments home etc towards the right".
   The lockup sits near the left edge of the screen (not the content column) and is larger at every size; the navigation and the
   controls sit at the right edge. It still condenses by a transform only. Sizes (lockup in header, then condensed):
     wide screens from 1301 px   80 in 112, 56 in 78        laptops 1001 to 1300 px   66 in 96, 50 in 70
     tablets 561 to 1000 px      62 in 90, 48 in 68         phones to 560 px          50 in 70, 42 in 60
   The footer shows the original round logo (the extended logo lives only here).
   ===================================================================== */
:root{--lk:80px;--lks:.7;--hdr-h:112px;--hdr-hc:78px;--hdr-k:.6964;--hdr-pad:clamp(20px,2.4vw,44px)}
@media (max-width:1300px){:root{--lk:66px;--lks:.7576;--hdr-h:96px;--hdr-hc:70px;--hdr-k:.7292}}
@media (max-width:1000px){:root{--lk:62px;--lks:.7742;--hdr-h:90px;--hdr-hc:68px;--hdr-k:.7556;--hdr-pad:clamp(16px,3vw,28px)}}
@media (max-width:560px),(max-height:500px){:root{--lk:50px;--lks:.84;--hdr-h:70px;--hdr-hc:60px;--hdr-k:.8571;--hdr-pad:14px}}
.hdr{padding-left:max(var(--hdr-pad),env(safe-area-inset-left));padding-right:max(var(--hdr-pad),env(safe-area-inset-right))}
.hdr > .hdr__nav{margin-left:auto}
@media (min-width:1001px) and (max-width:1300px){.hdr__nav{gap:14px}.hdr__links{gap:18px}}
@media (max-width:360px){.hdr__lock{gap:calc(var(--lk) * .16)}}
.ftr__logo--round img{width:160px;height:auto;border-radius:50%}
@media (min-width:480px){.ftr__logo--round img{width:200px}}
/* END HEADER WIDE BLOCK */

/* DOOR 4K (owner, 2026-09-21: "other images you generated, check them again and make it better"): the door is the upscaled 4K master.
   door.jpg/webp (2400) is rebuilt from it (sharper, lighter); large and Retina screens get door-4k (3840). The seam stays at 50.04 percent. */
@media (min-width:1800px),(min-width:1100px) and (min-resolution:1.75dppx){
  .door__wall,.door__skin{background-image:url(/assets/door-4k.jpg);background-image:image-set(url(/assets/door-4k.webp) type("image/webp"),url(/assets/door-4k.jpg) type("image/jpeg"))}
}
/* DOOR PORTRAIT PLATE (batch 7): screens taller than 4:3 (phones, tablets held upright) get a portrait cut of the same 4K master, centred on
   the seam with the inner edges of the lit side panels in frame, the wall carried up and the floor down (assets/door-p, 1340 x 2532). */
@media (max-aspect-ratio:3/4){
  .door__wall,.door__skin{background-image:url(/assets/door-pt.jpg);background-image:image-set(url(/assets/door-pt.webp) type("image/webp"),url(/assets/door-pt.jpg) type("image/jpeg"))}
  /* ROUND2 HOME (critic: on a portrait phone the doorway read as a cabinet): door-pt is door-p with the doorway band drawn out to a tall
     theatre door (wall 364-845 kept, the doorway 845-1626 carried to 1519 px, the floor 1626-2158 kept; master review/ink-sheet/door-pt-master.png).
     The doorway now runs from .19 to .79 of the plate: about 78 vw by 60 vh on a phone. Slide, ring, glow, seam and timing unchanged. */
}

/* DEPARTMENTS FX BLOCK (wave 2 departments builder, 2026-09-21) ======================================================================
   The Board page's "Setting the Course" (.bdc, fx/compass.js), the Board seal (.dseal, fx/seal.js) and the Instrument Cylinder (.dcyl,
   fx/cylinder.js) on /departments/, the Running Suture (.sut, fx/suture.js), Three Instruments (.tri, fx/triad.js), the Explaining Lens
   (.lens, fx/lens.js) and the Brand, Dimensioned (.spec, fx/specimen.js). Every rule without .fx-live is the calm, finished version:
   no JS, html.still and a module that is switched off all show it. Transform, opacity and filter only; no layout animates. */

/* ---- Setting the Course (Board page #remit) ---- */
.bdc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px);align-items:start}
.bdc__stage{position:sticky;top:calc(var(--hdr-hc,64px) + 36px)}
.bdc__plate{position:relative;width:min(100%,480px);aspect-ratio:1;border:1px solid var(--rule);background:rgba(59,43,36,.28)}
.bdc__plate::before{content:"";position:absolute;inset:10px;border:1px solid rgba(242,233,216,.06);pointer-events:none}
.bdc__svg,.bdc__div{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bdc__svg .bdc__q{fill:url(#bdc-hx);stroke:none}
.bdc__svg pattern path{stroke:rgba(242,233,216,.12);stroke-width:1}
.bdc__svg .bdc__arc{fill:none;stroke:var(--line);stroke-width:2.2;vector-effect:none;stroke-linecap:round}
.bdc__svg .bdc__mk circle{fill:var(--canvas);stroke:var(--rule-strong);stroke-width:1.2;vector-effect:none;transition:fill .4s var(--ease-out),stroke .4s var(--ease-out)}
.bdc__svg .bdc__mk text{fill:var(--text-secondary);font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;transition:fill .4s var(--ease-out)}
.bdc__svg .bdc__mk.is-on circle{fill:var(--accent);stroke:#EDB877}
.bdc__svg .bdc__mk.is-on text{fill:var(--text-primary)}
.bdc__svg .bdc__pin{fill:var(--text-primary);stroke:none}
.bdc__div{transform-origin:50% 50%;will-change:transform}
.bdc__div path,.bdc__div circle{fill:none;stroke:rgba(242,233,216,.82);stroke-width:1.3;stroke-linecap:round}
.bdc__div .bdc__screw{stroke:rgba(242,233,216,.4);stroke-dasharray:2 3}
.bdc__div .bdc__needle{stroke:var(--line);stroke-width:1.2}
.bdc__div .bdc__tip{fill:#EDB877;stroke:none}
.bdc__div .bdc__halo{fill:rgba(237,184,119,.22);stroke:none;opacity:0;transition:opacity .4s var(--ease-out)}
.bdc--draw .bdc__div .bdc__halo{opacity:1}
.bdc__cap{display:flex;justify-content:space-between;gap:12px;width:min(100%,480px);margin-top:12px;color:var(--text-secondary)}
.bdc__list{display:grid;border-top:1px solid var(--rule-strong)}
.bdc__list li{display:grid;grid-template-columns:3.4em minmax(0,1fr);gap:16px;align-items:baseline;padding:clamp(26px,5vh,56px) 0;border-bottom:1px solid var(--rule)}
.bdc__list p{max-width:52ch}
.bdc__list div > p:last-child{font-size:clamp(1.06rem,1.3vw,1.2rem);line-height:1.55}
.bdc__n{color:var(--text-secondary);transition:color .4s var(--ease-out)}
.bdc__k{color:var(--text-secondary);margin-bottom:8px}
.bdc__list li.is-done .bdc__n,.bdc__list li.is-now .bdc__n{color:var(--accent)}
.bdc__list li.is-now .bdc__k{color:var(--text-primary)}
@media (min-width:901px){.bdc__list li{min-height:min(30vh,300px);align-content:center}}
@media (max-width:900px){
  .bdc{grid-template-columns:minmax(0,1fr)}
  .bdc__stage{position:relative;top:auto;justify-self:center;width:min(100%,380px)}
}
html.still .bdc__div .bdc__halo{opacity:0}

/* ---- the Board seal (/departments/ #board) ---- */
.dseal-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.dseal{flex:none;width:clamp(92px,9vw,128px);aspect-ratio:1;margin-top:-6px;transform:rotate(-6deg);transform-origin:50% 50%}
.dseal--wait{opacity:0}
.dseal__svg{width:100%;height:100%;overflow:visible}
.dseal__svg circle,.dseal__svg path{fill:none;stroke-linecap:round}
.dseal__svg .l{stroke:#C0553B;stroke-width:1.6}
.dseal__svg .w{stroke:rgba(192,85,59,.5);stroke-width:1}
.dseal__svg text{fill:#D0694E;stroke:none;font-family:var(--f-mono)}
.dseal__ring{font-size:10.5px;letter-spacing:.12em}
.dseal__num{font-family:var(--f-display) !important;font-size:30px;letter-spacing:.04em;fill:#E08A6C !important}
@media (max-width:560px){.dseal{width:84px}}

/* ---- the Instrument Cylinder (/departments/ #overview). Still: a 2x2 grid of picture links beside the list ---- */
.dcyl-lay{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.dcyl{position:relative;container-type:inline-size}
.dcyl__faces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dcyl__face{position:relative}
.dcyl__a{position:relative;display:block;aspect-ratio:4/5;text-decoration:none;color:var(--text-primary);background:var(--panel)}
.dcyl__frame{position:absolute;inset:0;display:block;overflow:hidden;border:1px solid rgba(242,233,216,.42)}
.dcyl__frame picture,.dcyl__frame img{display:block;width:100%;height:100%;object-fit:cover}
.dcyl__face:nth-child(1) img{object-position:62% 50%}
.dcyl__face:nth-child(2) img{object-position:74% 50%}
.dcyl__face:nth-child(3) img{object-position:52% 50%}
.dcyl__face:nth-child(4) img{object-position:40% 50%}
.dcyl__a::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(38,32,26,.92),rgba(38,32,26,.35) 42%,rgba(38,32,26,0) 70%)}
.dcyl__n{position:absolute;left:12px;bottom:34px;z-index:2;font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,4.2cqi,3rem);line-height:1;letter-spacing:.02em}
.dcyl__t{position:absolute;left:12px;right:10px;bottom:12px;z-index:2;font-size:10.5px;line-height:1.3;color:var(--text-primary)}
.dcyl__a:focus-visible{outline-offset:3px}
.dcyl:not(.dcyl--3d) .dcyl__n{bottom:48px}
.dcyl-lay .nrow{grid-template-columns:clamp(56px,6vw,96px) minmax(0,1fr);transition:background-color .6s var(--ease-out)}
.dcyl-lay .nrow__body{grid-column:2}
.dcyl-lay .nrow::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-out)}
.dcyl-lay .nrow.is-front::before{transform:scaleX(.18)}
.dcyl-lay .nrow.is-front .nrow__num{opacity:.95}
/* the cylinder (wide screens, motion on) */
.dcyl--3d{position:sticky;top:calc(var(--hdr-hc,64px) + 44px)}
.dcyl--3d .dcyl__stage{position:relative;perspective:1200px;perspective-origin:50% 42%}
.dcyl--3d .dcyl__faces{display:block;position:relative;height:96cqi;transform-style:preserve-3d;will-change:transform}
.dcyl--3d .dcyl__face{position:absolute;left:14cqi;top:0;width:72cqi;height:96cqi;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transform:rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--r,150px) + var(--lift,0px)));filter:brightness(.45);
  transition:transform .5s var(--ease-out),filter .6s var(--ease-out)}
.dcyl--3d .dcyl__face.is-front{filter:none}
.dcyl--3d .dcyl__face.is-front:hover,.dcyl--3d .dcyl__face.is-front:focus-within{--lift:10px}
.dcyl--3d .dcyl__a{aspect-ratio:auto;height:100%}
.dcyl--3d .dcyl__n{font-size:clamp(2.6rem,10cqi,4.4rem);left:18px;bottom:44px}
.dcyl--3d .dcyl__t{left:18px;bottom:18px;font-size:12px}
.dcyl__floor{position:relative;height:26cqi;margin-top:6px;overflow:hidden;perspective:1200px;perspective-origin:50% -120%;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.34),rgba(0,0,0,0) 78%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.34),rgba(0,0,0,0) 78%)}
.dcyl--3d .dcyl__refl{position:absolute;left:0;right:0;top:0;transform-origin:50% 50%}
.dcyl--3d .dcyl__refl .dcyl__a::after{display:none}
/* the coverflow row (phones and narrow screens, motion on) */
.dcyl--row .dcyl__faces{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:10px 14% 22px;margin-inline:calc(var(--gutter) * -1);
  perspective:900px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dcyl--row .dcyl__faces::-webkit-scrollbar{display:none}
.dcyl--row .dcyl__face{flex:0 0 72%;scroll-snap-align:center;transform:rotateY(0) scale(.88);transition:transform .5s var(--ease-out)}
.dcyl--row .dcyl__face.is-c{transform:none}
@supports (animation-timeline:view(inline)){
  .dcyl--row .dcyl__face{transition:none;animation:dcylCov linear both;animation-timeline:view(inline)}
}
@keyframes dcylCov{0%{transform:rotateY(-32deg) scale(.86)}50%{transform:none}100%{transform:rotateY(32deg) scale(.86)}}
@media (max-width:900px){
  .dcyl-lay{grid-template-columns:minmax(0,1fr);gap:28px}
  .dcyl__faces{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dcyl__a{aspect-ratio:4/3}
  .dcyl--row .dcyl__a{aspect-ratio:4/5}
  .dcyl-lay .nrow{grid-template-columns:minmax(0,1fr)}
  .dcyl-lay .nrow__body{grid-column:auto}
}
html.still .dcyl__face{transform:none !important;filter:none !important;animation:none !important}

/* ---- the Running Suture (Training and Development #remit) ---- */
.sut{position:relative}
.sut.sut--on{padding-left:var(--sut-pad,64px);padding-bottom:34px}
.sut__edge{position:absolute;width:1px;background:linear-gradient(to bottom,rgba(152,136,122,0),#98887A 30px,#98887A calc(100% - 40px),rgba(152,136,122,0));pointer-events:none;transition:none}
.sut--closed .sut__edge--l{transform:translateX(1px)}
.sut--closed .sut__edge--r{transform:translateX(-1px)}
.sut__svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.sut__svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sut__thread{stroke:#C0553B;stroke-width:1.6}
.sut__under{stroke:rgba(192,85,59,.32);stroke-width:1;stroke-dasharray:2 4}
.sut__knot{fill:none;stroke:#C0553B;stroke-width:1.3;transform-box:fill-box;transform-origin:center}
.sut__st .sut__thread,.sut__st .sut__under,.sut__st .sut__knot{opacity:0}
.sut__st.is-on .sut__thread,.sut__st.is-on .sut__under,.sut__st.is-k .sut__knot{opacity:1}
.sut__sq{opacity:0}
.sut__sq.is-on{opacity:1}
.sut__loop{stroke:#C0553B;stroke-width:1.6}
.sut__tail{stroke:#C0553B;stroke-width:1.3;transition:transform .6s var(--ease-weight,ease)}
.sut__sq.is-tight .sut__tail--l{transform:translate(-3px,1px)}
.sut__sq.is-tight .sut__tail--r{transform:translate(3px,1px)}
.sut__drv{position:absolute;left:0;top:0;z-index:2;pointer-events:none;will-change:transform}
.sut__drv svg{width:100%;height:100%;overflow:visible}
.sut__drv path,.sut__drv circle{fill:none;stroke:rgba(242,233,216,.85);stroke-width:1.4;stroke-linecap:round}
.sut__drv .sut__shaft{stroke:rgba(242,233,216,.6)}
.sut__drv .sut__needle{stroke:#EDB877;stroke-width:1.6}
.sut__drv .sut__pt{fill:#EDB877;stroke:none}
.sut.sut--on .sigr__n{position:relative}

/* ---- Three Instruments, One Question (Research and Innovation #remit) ---- */
.tri{margin-top:clamp(28px,5vh,52px);max-width:620px}
.tri__stage{position:relative;aspect-ratio:960/560;border:1px solid var(--rule);background:radial-gradient(ellipse at 50% 12%,rgba(217,138,75,.10),rgba(59,43,36,.30) 60%)}
.tri__stage::before{content:"";position:absolute;inset:8px;border:1px solid rgba(242,233,216,.05);pointer-events:none}
.tri__stage picture,.tri__still,.tri__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.tri__still{object-fit:contain}
.tri--live .tri__still{visibility:hidden}
.tri:not(.tri--live) .tri__cv{display:none}
.tri__labs li{position:absolute;bottom:5%;transform:translateX(-50%);color:var(--text-secondary);font-size:11px;white-space:nowrap}
.tri__labs li:nth-child(1){left:21%}.tri__labs li:nth-child(2){left:50%}.tri__labs li:nth-child(3){left:79%;color:#D0694E}
.tri__rule{position:relative;display:block;margin-top:0;padding-top:22px;color:var(--text-primary);text-align:center}
.tri__lead{position:absolute;left:0;right:0;top:0;height:14px;border-bottom:1px solid var(--rule-strong)}
.tri__lead i{position:absolute;top:0;width:1px;height:14px;background:var(--rule-strong)}
.tri__lead i:nth-child(1){left:21%}.tri__lead i:nth-child(2){left:50%}.tri__lead i:nth-child(3){left:79%;background:var(--accent)}
@media (max-width:767px){
  .tri{max-width:none}
  .tri__stage{aspect-ratio:360/420}
  .tri__labs li{left:62% !important;bottom:auto;transform:none}
  .tri__labs li:nth-child(1){top:14%}.tri__labs li:nth-child(2){top:45%}.tri__labs li:nth-child(3){top:75%}
  .tri__lead i{display:none}
}

/* ---- The Explaining Lens (Awareness #remit). Still: the annotated drawing whole and the list of captions ---- */
.lens-wrap{margin-top:clamp(56px,10vh,110px)}
.lens-lede{margin-top:12px;max-width:60ch}
.lens{margin-top:clamp(24px,4vh,40px)}
.lens__plate{position:relative;aspect-ratio:3/2;border:1px solid var(--rule);background:radial-gradient(ellipse at 40% 20%,rgba(217,138,75,.08),rgba(59,43,36,.3) 65%);overflow:hidden;touch-action:pan-y}
.lens__plate picture,.lens__plate img{position:absolute;inset:0;width:100%;height:100%;display:block}
.lens__ann{position:absolute;inset:0}
.lens__plain{visibility:hidden}
.lens__leads{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lens__leads path{fill:none;stroke:#C0553B;stroke-width:1.2;vector-effect:non-scaling-stroke}
.lens__note{position:absolute;width:min(21%,230px);padding:8px 10px;border-left:1px solid #C0553B;background:rgba(38,32,26,.72)}
.lens__note--l{border-left:0;border-right:1px solid #C0553B;text-align:right}
.lens__note .t-mono{color:#E08A6C;font-size:10.5px}
.lens__note p + p{margin-top:4px;font-size:.84rem;line-height:1.4;color:var(--text-primary)}
.lens__line{min-height:3.2em;margin-top:14px;max-width:70ch;display:none}
.lens__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;margin-top:18px;border-top:1px solid var(--rule);padding-top:16px}
.lens__list li{display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:8px}
.lens__list span{color:#D0694E;padding-top:.25em}
.lens__list strong{font-weight:400;color:var(--text-primary)}
.lens__list p{color:var(--text-secondary)}
.lens .hplate__cap{margin-top:14px}
.lens__spots{display:none}
/* live: the plain drawing, the glass, the buttons and the live line */
.lens--live .lens__plain{visibility:visible}
.lens--live .lens__plate > .lens__ann{visibility:hidden}
.lens--live .lens__spots{display:block}
.lens--live .lens__line{display:grid}
.lens__say{grid-area:1 / 1;opacity:0;transition:opacity .35s var(--ease-out)}
.lens__say.is-on{opacity:1}
.lens--live .lens__list{display:none}
.lens__glass{position:absolute;left:0;top:0;z-index:2;border-radius:50%;overflow:hidden;overflow:clip;pointer-events:none;will-change:transform;
  box-shadow:0 0 0 1px rgba(168,67,46,.55),0 10px 40px rgba(20,16,12,.6),inset 0 0 30px rgba(20,16,12,.35);background:rgba(38,32,26,.55)}
.lens:not(.lens--live) .lens__glass{display:none}
.lens__in{position:absolute;left:0;top:0;will-change:transform}
.lens__in .lens__ann{visibility:visible}
.lens__rim{position:absolute;inset:0;pointer-events:none}
.lens__rim svg{width:100%;height:100%;overflow:visible}
.lens__rim circle,.lens__rim path{fill:none;stroke:#C0553B;stroke-width:1.2;vector-effect:non-scaling-stroke}
.lens__rim .lens__rim2{stroke:rgba(192,85,59,.35);stroke-dasharray:3 4}
.lens__spot{position:absolute;z-index:3;width:44px;height:44px;margin:-22px 0 0 -22px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.lens__spot span[aria-hidden]{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(242,233,216,.7);background:rgba(38,32,26,.8);
  font-family:var(--f-mono);font-size:11px;color:var(--text-primary);transition:transform .3s var(--ease-out),background-color .3s var(--ease-out),border-color .3s var(--ease-out)}
.lens__spot:hover span[aria-hidden],.lens__spot[aria-pressed="true"] span[aria-hidden]{transform:scale(1.12);background:var(--accent);border-color:#EDB877}
@media (max-width:767px){
  .lens__note{width:34%;padding:5px 7px}
  .lens__note p + p{display:none}
  .lens__list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){.lens__note{display:none}.lens__in .lens__note{display:block;width:44%}}
html.still .lens__glass,html.still .lens__spots,html.still .lens__line{display:none !important}

/* ---- The Brand, Dimensioned (Public Relations #delivers) ---- */
.dseal__svg circle,.dseal__svg path{vector-effect:non-scaling-stroke}
.spec-wrap{margin-top:clamp(56px,10vh,110px)}
.spec-lede{margin-top:12px;max-width:60ch}
.spec{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0;margin-top:clamp(24px,4vh,40px);border:1px solid var(--rule)}
.spec__left{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(18px,3vw,40px);background:#2A221C;border-right:1px solid var(--rule)}
.spec__svg{width:100%;height:auto;overflow:visible}
.spec__svg path,.spec__svg circle,.spec__svg rect{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.spec__cons .d{stroke:rgba(242,233,216,.22);stroke-dasharray:14 5 2 5}
.spec__cons .c{stroke:var(--line);stroke-width:1.4}
.spec__cons .l{stroke:rgba(242,233,216,.8);stroke-width:1.2}
.spec__ln{stroke:rgba(242,233,216,.75);stroke-width:1;transform-box:fill-box;transform-origin:center}
.spec__ext{stroke:rgba(242,233,216,.28);stroke-width:1;stroke-dasharray:2 3}
.spec__svg .spec__ah{fill:rgba(242,233,216,.8);stroke:none;transform-box:fill-box;transform-origin:center}
.spec__lab{fill:var(--text-primary);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em}
.spec__svg .spec__cov{fill:#2A221C;stroke:none;opacity:0}
.spec__logo{width:clamp(110px,13vw,180px);text-align:center}
.spec__logo img{width:100%;height:auto}
.spec__logo .t-mono{margin-top:10px;font-size:10px;color:var(--text-secondary)}
@media (max-width:560px){.spec__logo{width:min(240px,70%)}}
.spec__right{position:relative;padding:clamp(18px,3vw,40px);overflow:hidden}
.spec__h{color:var(--text-secondary);margin-bottom:12px}
.spec__h ~ .spec__h{margin-top:clamp(22px,4vh,34px)}
.spec__sw{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.spec__chip{position:relative;display:block;aspect-ratio:3/4;border:1px solid rgba(242,233,216,.28);overflow:hidden}
.spec__chip i{position:absolute;inset:0;background:var(--c);transform-origin:50% 100%}
.spec__n{margin-top:8px;font-size:.82rem;line-height:1.3}
.spec__hex{min-height:44px;margin-top:2px;padding:0;border:0;background:none;color:var(--text-secondary);cursor:copy;text-align:left;text-decoration:underline;text-decoration-color:rgba(242,233,216,.25);text-underline-offset:4px;user-select:text;-webkit-user-select:text}
.spec__hex:hover{color:var(--text-primary)}
.spec__ty{display:grid;gap:8px}
.spec__m{display:block;overflow:hidden;padding-block:2px}
.spec__f{display:block;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.35;color:var(--text-primary)}
.spec__f--a{font-family:var(--f-display);font-size:clamp(1.4rem,2vw,1.8rem);letter-spacing:.06em;text-transform:uppercase}
.spec__f--p{font-family:var(--f-head);font-weight:600}
.spec__f--g{font-family:var(--f-body);font-weight:300}
.spec__f--x{font-family:var(--f-mono);font-size:.9rem;letter-spacing:.12em;text-transform:uppercase}
.spec__stamp{display:inline-grid;justify-items:center;margin-top:clamp(22px,4vh,34px);padding:10px 16px;border:2px solid #C0553B;outline:1px solid rgba(192,85,59,.5);outline-offset:3px;
  color:#D0694E;font-weight:500;letter-spacing:.2em;transform:rotate(-2deg);transform-origin:50% 50%}
.spec .hplate__cap{grid-column:1 / -1;margin:0;padding:12px clamp(18px,3vw,40px);border-top:1px solid var(--rule)}
/* before the sheet plays (motion on, not yet reached): the parts wait unseen */
.spec--pre .spec__dims,.spec--nodims .spec__dims{opacity:0}
.spec--pre .spec__chip i{transform:scaleY(0)}
.spec--pre .spec__f{transform:translateY(105%)}
.spec--pre .spec__stamp{opacity:0}
@media (max-width:900px){
  .spec{grid-template-columns:minmax(0,1fr)}
  .spec__left{border-right:0;border-bottom:1px solid var(--rule)}
}
@media (max-width:560px){
  .spec__left{grid-template-columns:minmax(0,1fr)}
  .spec__logo{justify-self:center}
  .spec__sw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec__chip{aspect-ratio:2/1}
}
html.still .spec--pre .spec__dims,html.still .spec--nodims .spec__dims,html.still .spec--pre .spec__stamp{opacity:1}
html.still .spec--pre .spec__chip i,html.still .spec--pre .spec__f{transform:none}
/* END DEPARTMENTS FX BLOCK */

/* HOME-ABOUT-PROGRAMS BLOCK ===========================================================================================================
   Wave 2 (home-about-programs, 2026-09-21). Home P1 (arms.js), About P2 (armillary.js, mirror.js, gap.js), Programs (ruler.js), the program
   page P9 (scope.js, gauge.js). Every rule without .fx-live is the calm still version (no script, Motion off, module failure). */

/* ---- HOME: THE CONSOLE AND THE FOUR ARMS ---- */
.arms{position:relative}
.arms__stage{position:relative;height:clamp(300px,56vw,460px);border:1px solid var(--rule);background:radial-gradient(ellipse at 50% 58%,rgba(168,67,46,.10),rgba(59,43,36,.22) 55%,rgba(38,32,26,0) 80%);overflow:hidden}
.arms__still,.arms__still img{position:absolute;inset:0;width:100%;height:100%}
.arms__still img{object-fit:contain;opacity:.92}
.arms__cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s var(--ease-out)}
.arms.fx-live .arms__stage.is-drawn .arms__cv{opacity:1}
.arms.fx-live .arms__stage.is-drawn .arms__still{opacity:0;transition:opacity .6s var(--ease-out)}
.arms__rcm{position:absolute;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(214,96,64,.95) 0 2px,rgba(168,67,46,.45) 3px,rgba(168,67,46,0) 70%);transition:opacity .3s var(--ease-out)}
.arms__rcm.is-on{opacity:1}
.arms__cap{position:absolute;left:14px;bottom:10px;right:14px;margin:0;color:var(--text-secondary);transition:color .4s var(--ease-out)}
.arms__cap.is-fan{color:var(--text-primary)}
.arms:not(.fx-live) .arms__cap,html.still .arms__cap{color:var(--text-secondary)}
.arms__again{margin-top:12px;min-height:44px}
.arms__again.btn{background:transparent;border:1px solid var(--rule-strong);color:var(--text-primary)}
.arms__again.btn:hover{background:rgba(242,233,216,.08)}
.arms__again[hidden]{display:none}
.arms__rows{margin-top:clamp(20px,3vh,32px)}
.arms .nrow::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease-out);pointer-events:none}
.arms .nrow.is-lit::after{transform:scaleX(1)}
.arms .nrow.is-lit .nrow__num{opacity:.95}
@media (min-width:1024px) and (pointer:fine){
  .arms{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:clamp(28px,4vw,64px);align-items:start}
  .arms__stage{position:sticky;top:18vh;height:64vh;min-height:360px}
  .arms__rows{margin-top:0;padding-bottom:34vh}   /* room for the fan while the stage is still held */
  .arms__again{display:none}
  .arms .nrow{grid-template-columns:clamp(56px,6vw,96px) minmax(0,1fr);min-height:34vh;align-content:center}
  .arms .nrow__body{grid-column:2}
}
html.still .arms__cv,html.still .arms__rcm{display:none}
html.still .arms__still{opacity:1 !important}
html.still .arms .nrow::after{transform:scaleX(0)}

/* ---- ABOUT: THE VITRUVIAN ARMILLARY and ARMILLARY SETTLE: replaced by the ARMILLARY 2 BLOCK at the end of this file (2026-09-22) ---- */

/* ---- ABOUT: THE MIRROR NOTE ---- */
.ab-q{display:grid;gap:clamp(24px,4vh,40px);align-content:start}
.mnote-fig{margin:0;max-width:440px}
.mnote{position:relative;overflow:hidden;padding:16px 18px;background:var(--folio);border:1px solid rgba(38,32,26,.45);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.mnote__svg{display:block;width:100%;height:auto}
.mnote path{fill:none;stroke:#3B2B24;stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.mnote__read{position:relative;background:var(--folio)}
.mnote.is-mirror .mnote__glass{position:absolute;inset:16px 18px;overflow:hidden;will-change:transform}
.mnote.is-mirror .mnote__glass > .mnote__read{position:absolute;inset:0;will-change:transform}
.mnote.is-mirror .mnote__glass::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;z-index:2;background:linear-gradient(to bottom,rgba(59,43,36,0),rgba(59,43,36,.85),rgba(59,43,36,0));box-shadow:0 0 10px 2px rgba(255,248,232,.9)}
.mnote__cap{margin-top:10px;color:var(--text-secondary)}
html.still .mnote__mir,html.still .mnote__glass::before{display:none}

/* ---- ABOUT: THE GAP, MEASURED ---- */
.gap.fx-live .folio{transform-origin:50% 0}
.gap.fx-live .mark__num .mark__real{opacity:1 !important}
.gap.fx-live .mark__anim{display:none !important}
.gap-wait .gap__mark,.gap-wait .mark__num{opacity:0}
html.still .gap .folio{transform:none !important}
html.still .gap-wait .gap__mark,html.still .gap-wait .mark__num{opacity:1}

/* ---- PROGRAMS: THE LEADING RULE ---- */
.prule{position:sticky;top:var(--hdr-hc);z-index:6;height:64px;margin:clamp(22px,3.4vh,36px) 0 clamp(20px,3vh,30px);pointer-events:none;background:rgba(38,32,26,.95);box-shadow:0 -14px 0 rgba(38,32,26,.95),0 10px 18px -8px rgba(38,32,26,.95)}
html.no-js .prule{position:relative}
.prule__svg{position:absolute;left:0;top:0;width:100%;height:40px;overflow:visible}
.prule__svg path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.prule__svg .l{stroke:rgba(242,233,216,.5)}
.prule__svg .w{stroke:rgba(242,233,216,.24)}
.prule__st{position:absolute;left:0;right:0;top:44px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none;color:var(--text-secondary);font-size:11px}
.prule__st li{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;transition:color .3s var(--ease-out)}
.prule__st li[data-n]:not([data-n=""])::after{content:" / " attr(data-n);opacity:.7}
.prule__st li.is-on{color:var(--text-primary)}
.prule__bar{position:absolute;left:0;top:24px;width:20%;height:8px;opacity:0;transition:transform .65s var(--ease-weight),opacity .2s linear;will-change:transform}
.prule__bar i{display:block;height:100%;margin:0 16%;background:var(--accent);box-shadow:0 0 14px rgba(168,67,46,.55)}
.prule.has-bar .prule__bar{opacity:1}
.prule__dots i{position:absolute;top:32px;width:1px;height:6px;margin-left:-.5px;background:var(--accent);opacity:.85}
@media (max-width:767px){
  .prule{position:sticky;top:var(--hdr-hc);z-index:6;height:36px;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter);background:rgba(38,32,26,.94);border-bottom:1px solid var(--rule)}
  .prule__svg{left:var(--gutter);width:calc(100% - var(--gutter) * 2);top:0;height:22px}
  .prule__bar{left:var(--gutter);width:calc((100% - var(--gutter) * 2) / 5);top:12px;height:6px}
  .prule__dots{position:absolute;left:var(--gutter);right:var(--gutter);top:0}
  .prule__dots i{top:23px;height:4px}
  .prule__st{left:var(--gutter);right:var(--gutter);top:22px;display:block;height:14px;font-size:10px;line-height:14px;text-align:right}
  .prule__st li{display:none;padding:0}
  .prule__st li.is-on{display:block;text-align:right}
}
.pg-more{margin-top:clamp(28px,5vh,48px);font-size:clamp(1.6rem,3.2vw,2.4rem);color:var(--text-secondary)}
.pg-more[hidden]{display:none}
html.still .prule__bar{opacity:0 !important}

/* ---- PROGRAM PAGE: THROUGH THE SCOPE ---- */
.scope{display:none;position:fixed;inset:0;z-index:49;pointer-events:none;overflow:hidden;contain:strict}
html.scope-on .scope{display:block}
html.still .scope{display:none !important}
.scope__hole{position:absolute;left:0;top:0;width:var(--ss,60vmax);height:var(--ss,60vmax);translate:calc(var(--sx,50vw) - var(--ss,60vmax) / 2) calc(var(--sy,42vh) - var(--ss,60vmax) / 2);
  background:radial-gradient(circle at 50% 50%,rgba(20,16,13,0) 0,rgba(20,16,13,0) var(--sr,9.5vmin),rgba(20,16,13,.6) calc(var(--sr,9.5vmin) + 1.5px),rgba(14,11,9,.975) calc(var(--sr,9.5vmin) + 5px));
  transform:scale(4);will-change:transform,opacity;animation:scopeOpen 1.4s cubic-bezier(.33,0,.2,1) .7s both}
.scope__ret{position:absolute;left:0;top:0;width:var(--rr,76vmin);height:var(--rr,76vmin);translate:calc(var(--sx,50vw) - var(--rr,76vmin) / 2) calc(var(--sy,42vh) - var(--rr,76vmin) / 2);overflow:visible;
  animation:scopeRet 1.4s cubic-bezier(.33,0,.2,1) .7s both}
.scope__ret *{fill:none;stroke:rgba(242,233,216,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.scope__ret .scope__f{stroke:rgba(242,233,216,.18)}
@keyframes scopeOpen{from{transform:scale(4);opacity:1}62%{opacity:1}to{transform:scale(14.4);opacity:0}}
@keyframes scopeRet{from{transform:rotate(0);opacity:.9}to{transform:rotate(20deg) scale(1.5);opacity:0}}
/* PARITY M14: phones hold the scope 700 ms too (the .5s phone delay is gone) */
html.scope-go .scope__hole{animation:scopeOpen .7s cubic-bezier(.33,0,.2,1) 0s both}
html.scope-go .scope__ret{animation:scopeRet .7s cubic-bezier(.33,0,.2,1) 0s both}

/* ---- PROGRAM PAGE: THE STATUS GAUGE ---- */
.pgauge{display:flex;align-items:center;gap:16px;margin-top:clamp(18px,2.6vh,26px)}
.pgauge[hidden]{display:none}
.pgauge__svg{flex:none;width:140px;height:auto;overflow:visible}
.pgauge__svg path,.pgauge__svg circle{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.pgauge__arc{stroke:rgba(242,233,216,.42)}
.pgauge__tk{stroke:rgba(242,233,216,.55)}
.pgauge__n{transform:rotate(var(--ga,-70deg));transform-origin:0 0}
.pgauge__n path{stroke:var(--accent);stroke-width:2}
.pgauge__n circle{fill:var(--accent);stroke:none}
.pgauge.is-waiting .pgauge__n{transform:rotate(-70deg)}
.pgauge__l{display:grid;gap:4px;margin:0;padding:0;list-style:none;color:var(--text-secondary);font-size:11px}
.pgauge__l li{opacity:.55}
.pgauge__l li.is-on{opacity:1;color:var(--text-primary)}
.pgauge__l li.is-on::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:middle}
@media (max-width:767px){.pgauge__svg{width:120px}}
html.still .pgauge.is-waiting .pgauge__n{transform:rotate(var(--ga,-70deg))}
/* the program page's name arrives with the content: its column grows downwards from a fixed top instead of re-centring (no layout shift) */
.phero__in:has(#pg-gauge) > div:first-child{align-self:start}
#program.loading{min-height:100vh}   /* the sections below wait off screen while the program loads */
@media (min-width:861px){
  .hplate--keep.hplate--img{width:min(100%,calc(62vh * .8),460px)}
  .hplate--keep.hplate--img .hplate__frame{aspect-ratio:4/5}
}
/* END HOME-ABOUT-PROGRAMS BLOCK */

/* EVENTS-RESEARCH-INVOLVE FX BLOCK ====================================================================================================
   Wave 2 (events-research-involve, 2026-09-21). Events P10 "Under the Lamp" (fx/lamp.js), the event page P11 "The Programme Opens"
   (fx/booklet.js), Research "The Graft Atlas" (fx/anatomy.js), Get Involved P13 "The Hands Meet" and the honest paths (fx/hands.js,
   fx/paths.js), the Advisory Board P14 "From Study to Portrait" (fx/develop.js) and the 404 P15 "Finish the Study" (fx/unfinished.js).
   Every rule without .fx-live, and html.still, is the calm finished version. Transform, opacity and filter only; loops run only on screen. */

/* ---- the drawing box: a layer that fits a 400 x 500 (or any) viewBox exactly as preserveAspectRatio="meet" does ---- */
.fx-vb{position:absolute;inset:12px;container-type:size;pointer-events:none}
.fx-vb__in{position:absolute;left:50%;top:50%;width:min(100cqw,80cqh);height:min(100cqh,125cqw);transform:translate(-50%,-50%)}
.gx__frame .fx-vb__in{width:min(100cqw,105.2632cqh);height:min(100cqh,95cqw)}

/* ---- P10 EVENTS: UNDER THE LAMP ---- */
.lp-hero{z-index:1}
.lp-cone{position:absolute;left:0;top:12.2%;width:100%;height:81.8%;opacity:.9;will-change:opacity;
  background:radial-gradient(ellipse 31% 4.6% at 50% 89.7%,rgba(255,214,168,.26),rgba(255,214,168,0) 100%),
    conic-gradient(from 159.5deg at 50% 0%,rgba(255,200,146,0) 0deg,rgba(255,204,152,.1) 9deg,rgba(255,222,184,.2) 20.5deg,rgba(255,204,152,.1) 32deg,rgba(255,200,146,0) 41deg,rgba(255,200,146,0) 360deg);
  -webkit-mask:linear-gradient(to bottom,transparent 0,transparent 48.5%,#000 51.5%,#000 90%,rgba(0,0,0,.35) 100%);
          mask:linear-gradient(to bottom,transparent 0,transparent 48.5%,#000 51.5%,#000 90%,rgba(0,0,0,.35) 100%);
  transition:opacity .9s var(--ease-out)}
.lp-hero.lp-wait .lp-cone{opacity:0}
.lp-hero.lp-lit .lp-cone{animation:lpBreath 6.4s ease-in-out 1s infinite alternate;animation-play-state:paused}
.lp-hero.lp-lit.is-vis .lp-cone{animation-play-state:running}
@keyframes lpBreath{from{opacity:.9}to{opacity:.66}}
.lp-motes{position:absolute;left:0;top:12.2%;width:100%;height:81.8%}
/* each mote: the outer i holds its place and brightness, the inner b drifts on one of four fixed keyframes (no var() inside keyframes,
   so the compositor runs them and the main thread does nothing) */
.lp-mote{position:absolute;width:2px;height:2px;margin:-1px}
.lp-mote__d{position:absolute;inset:0;border-radius:50%;background:#FFEAD2;opacity:0;box-shadow:0 0 3px 1px rgba(255,206,160,.45);will-change:transform,opacity;
  animation:lpMote0 12s ease-in-out 0s infinite alternate;animation-play-state:paused}
.lp-mote__d--1{animation-name:lpMote1}.lp-mote__d--2{animation-name:lpMote2}.lp-mote__d--3{animation-name:lpMote3}
.lp-hero.is-vis.lp-lit .lp-mote__d,.lp-beam.is-on .lp-mote__d{animation-play-state:running}
@keyframes lpMote0{0%{transform:translate3d(0,0,0);opacity:0}25%{opacity:1}75%{opacity:.7}100%{transform:translate3d(18px,-30px,0);opacity:0}}
@keyframes lpMote1{0%{transform:translate3d(0,0,0);opacity:0}25%{opacity:1}75%{opacity:.7}100%{transform:translate3d(-22px,-24px,0);opacity:0}}
@keyframes lpMote2{0%{transform:translate3d(0,0,0);opacity:0}25%{opacity:1}75%{opacity:.7}100%{transform:translate3d(9px,-40px,0);opacity:0}}
@keyframes lpMote3{0%{transform:translate3d(0,0,0);opacity:0}25%{opacity:1}75%{opacity:.7}100%{transform:translate3d(-12px,-16px,0);opacity:0}}
/* the beam over the archive: fixed, above the page, below the header; aimed by lamp.js */
.lp-beam{position:fixed;left:0;top:0;z-index:1;pointer-events:none;transform-origin:50% 0;opacity:0;will-change:transform,opacity;contain:strict;
  transition:opacity .8s var(--ease-out)}
.lp-beam.is-on{opacity:1}
.lp-beam__cone{position:absolute;inset:0;
  background:radial-gradient(ellipse 30% 6% at 50% 80%,rgba(255,214,168,.18),rgba(255,214,168,0) 100%),
    conic-gradient(from 164deg at 50% 0%,rgba(255,200,146,0) 0deg,rgba(255,204,152,.07) 7deg,rgba(255,220,178,.15) 16deg,rgba(255,204,152,.07) 25deg,rgba(255,200,146,0) 32deg,rgba(255,200,146,0) 360deg);
  -webkit-mask:linear-gradient(to bottom,rgba(0,0,0,.15),#000 34%,#000 80%,transparent 98%);mask:linear-gradient(to bottom,rgba(0,0,0,.15),#000 34%,#000 80%,transparent 98%)}
.lp-beam__motes{position:absolute;inset:0}
/* the card under the lamp: a warm edge light (and, in the still version, a pool of light resting on the first card) */
.lp-rim{position:absolute;inset:-1px;z-index:3;pointer-events:none;opacity:0;will-change:opacity;border:1px solid rgba(226,150,96,.62);
  box-shadow:0 0 0 1px rgba(168,67,46,.22),0 26px 70px -28px rgba(255,176,112,.42),inset 0 0 46px rgba(255,196,140,.07);transition:opacity .9s var(--ease-out)}
.lp-lit > .lp-rim{opacity:1}
.empty.lp-lit,#evNote.lp-lit{position:relative}
html.still .lp-beam{display:none}
html.still #listings .lp-lit > .lp-rim::before{content:"";position:absolute;left:8%;right:8%;bottom:100%;height:150px;pointer-events:none;
  background:radial-gradient(ellipse 46% 100% at 50% 100%,rgba(255,214,168,.11),rgba(255,214,168,.04) 55%,rgba(255,214,168,0) 75%)}
@media (forced-colors:active){.lp-beam,.lp-hero,.lp-rim{display:none}}

/* ---- P11 EVENT PAGE: THE PROGRAMME OPENS ---- */
.bk,.bk__bar{display:none}
.prog.bk-on .bk,.prog.bk-on .bk__bar{display:block}
.prog.bk-on:not(.bk-grid) .gal--pages{display:none}
.prog.bk-grid .bk{display:none}
.bk__bar{text-align:right;margin:-6px 0 16px}
.bk__all{min-height:44px;padding:0 16px}
.bk__stage{position:relative;margin-inline:auto;width:min(100%,820px);aspect-ratio:4/3;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.bk__stage::before{content:"";position:absolute;left:4%;right:4%;bottom:-22px;height:40px;pointer-events:none;background:radial-gradient(closest-side,rgba(10,7,5,.55),rgba(10,7,5,0))}
.bk--single .bk__stage{width:min(100%,400px);aspect-ratio:2/3}
.bk__book{position:absolute;inset:0;perspective:1900px;perspective-origin:50% 40%}
.bk__leaf{position:absolute;top:0;height:100%;transform-origin:0 50%;transform-style:preserve-3d;will-change:transform}
.bk--spread .bk__leaf{left:50%;width:50%}
.bk--single .bk__leaf{left:0;width:100%}
.bk__face{position:absolute;inset:0;overflow:hidden;background:#F2E9D8;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 14px 34px -16px rgba(0,0,0,.75)}
.bk__face--back{transform:rotateY(180deg)}
.bk__face--board{background:linear-gradient(135deg,#3B2B24,#2E221C)}
.bk__face--paper{background:linear-gradient(to right,#E6DAC4,#F2E9D8 30%)}
.bk__face a{display:block;width:100%;height:100%;cursor:zoom-in}
.bk__face img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.bk__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(24,16,12,.34),rgba(24,16,12,.08) 5%,rgba(24,16,12,0) 12%)}
.bk__face--back .bk__shade{background:linear-gradient(to left,rgba(24,16,12,.34),rgba(24,16,12,.08) 5%,rgba(24,16,12,0) 12%)}
.bk__face a:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.bk__flap{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;visibility:hidden;pointer-events:none}
.bk--spread .bk__leaf.is-turning > .bk__flap{visibility:visible}
.bk__ff,.bk__fb{position:absolute;inset:0;background-color:#F2E9D8;background-size:200% 100%;background-repeat:no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.bk__ff{background-position:100% 0}
.bk__fb{background-position:0 0;transform:rotateY(180deg)}
.bk__fb--board{background:linear-gradient(135deg,#3B2B24,#2E221C)}
.bk--spread .bk__leaf.is-turning > .bk__face:not(.bk__face--back){clip-path:inset(0 50% 0 0)}
.bk--spread .bk__leaf.is-turning > .bk__face--back{clip-path:inset(0 0 0 50%)}
.bk__shadow{position:absolute;top:0;height:100%;width:50%;pointer-events:none;opacity:0}
.bk__shadow--r{left:50%;transform-origin:0 50%;background:linear-gradient(to right,rgba(12,8,6,.6),rgba(12,8,6,0))}
.bk__shadow--l{right:50%;transform-origin:100% 50%;background:linear-gradient(to left,rgba(12,8,6,.6),rgba(12,8,6,0))}
.bk--single .bk__shadow--r{left:0;width:100%}
.bk--single .bk__shadow--l{display:none}
.bk__nav{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px);margin-top:26px}
.bk__btn{display:grid;place-items:center;width:44px;height:44px;padding:0;font-size:1.1rem;line-height:1;color:var(--text-primary)}
.bk__btn:disabled{opacity:.32;cursor:default}
.bk__at{min-width:17ch;margin:0;text-align:center;color:var(--text-secondary);font-size:12px;letter-spacing:.12em}
html.still .prog .bk,html.still .prog .bk__bar{display:none !important}
html.still .prog .gal--pages{display:grid !important}

/* ---- RESEARCH: THE MATCHING BUTTONS, THE GRAFT ATLAS AND THE OFFPRINT LIGHT ---- */
.rs-btns{display:flex;flex-wrap:wrap;gap:14px 18px}
.rs-btns .btn{min-width:min(100%,13.5em)}
/* the owner asked for Research and Publications to be matching, clearly pressable buttons: both keep the Sanguine fill */
.rs-btns .btn.btn--quiet{background:var(--accent)}
.rs-btns .btn.btn--quiet:hover{background:var(--accent-hover)}
.rs-btns .btn.btn--quiet::after{opacity:0}
.gx{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.4vw,72px);align-items:start;margin-top:clamp(8px,2vh,20px)}
.gx__side{position:sticky;top:calc(var(--hdr-hc,70px) + 22px);display:grid;gap:14px}
.gx__plate{margin:0}
.gx__frame{aspect-ratio:400/380;background:rgba(38,32,26,.5)}
.gx__frame > .lstudy{z-index:1}
.gx__wv{z-index:0}
.gx__kv{z-index:2}
.gx__vb{pointer-events:none}
.gx__cap{display:block;margin-top:10px;color:var(--text-secondary)}
.gx__help{max-width:44ch;color:var(--text-secondary);font-size:.95rem}
.gx__say{min-height:1.2em;margin:0;color:var(--text-secondary);font-size:11px;letter-spacing:.12em}
.gx__reset{justify-self:start;min-height:44px;padding:0 16px}
.gx__reset[hidden]{display:none}
.gx-w{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s var(--ease-out);will-change:opacity}
.gx-w path{fill:#A8432E;stroke:none}
.gx-w .gx-cut,.gx-th__w .gx-cut{fill:none;stroke:#D0694E;stroke-width:8;stroke-linecap:round}
.gx__keys{position:absolute;inset:0}
.gx-key{position:absolute;display:flex;align-items:center;gap:0;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--text-primary);cursor:pointer;pointer-events:auto;font:inherit}
.gx-key__ring{flex:none;width:14px;height:14px;margin:15px;border-radius:50%;border:1px solid #D0694E;background:rgba(38,32,26,.92);box-shadow:0 0 0 3px rgba(38,32,26,.6);transition:background-color .3s var(--ease-out),transform .3s var(--ease-stamp)}
.gx-key__t{padding:4px 8px;border:1px solid var(--rule);background:rgba(38,32,26,.86);color:var(--text-secondary);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.gx-key__t b{font-weight:500;color:var(--text-primary)}
.gx-key:hover .gx-key__t,.gx-key:focus-visible .gx-key__t{color:var(--text-primary);border-color:var(--rule-strong)}
.gx-key:hover .gx-key__ring{transform:scale(1.18)}
.gx-key[aria-pressed="true"] .gx-key__ring{background:#A8432E;border-color:#E08A6C}
.gx-key[aria-pressed="true"] .gx-key__t{color:var(--text-primary);border-color:#A8432E}
.gx-key:disabled{opacity:.45;cursor:default}
.gx-key:focus-visible{outline:none}
.gx-key:focus-visible .gx-key__ring{outline:2px solid var(--text-primary);outline-offset:3px}
/* each label sits at the end of its leader: the ring's centre is the leader's outer point (drawing units, viewBox 0 0 400 380) */
.gx-key--donor{left:calc(5.5% - 22px);top:calc(25.26% - 22px)}
.gx-key--right-lobe{left:calc(5.5% - 22px);top:calc(78.95% - 22px)}
.gx-key--left-lobe{right:calc(5.5% - 22px);top:calc(10.53% - 22px);flex-direction:row-reverse}
.gx-key--left-lateral{right:calc(5.5% - 22px);top:calc(62.11% - 22px);flex-direction:row-reverse}
.gx-key--recipient{right:calc(5.5% - 22px);top:calc(89.47% - 22px);flex-direction:row-reverse}
.gx__plate:not(.gx-ready) .gx__keys{visibility:hidden}
.gx-lead{position:absolute;left:0;top:0;z-index:3;width:100px;height:1px;transform-origin:0 50%;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out);will-change:transform}
.gx-lead.is-on{opacity:1}
.gx-lead i{display:block;width:100%;height:1px;transform-origin:0 50%;background:linear-gradient(to right,rgba(208,105,78,.95),rgba(168,67,46,.45))}
.gx-lead::after{content:"";position:absolute;right:-3px;top:-2.5px;width:6px;height:6px;border-radius:50%;background:#D0694E}
.gx .rs-paps{grid-template-columns:minmax(0,1fr)}
.gx .rs-pap[hidden],.gx .rs-grp[hidden]{display:none}
.gx .rs-pap.gx-in{animation:gxIn .45s var(--ease-out) both}
@keyframes gxIn{from{opacity:0}}
.gx-tag{display:flex;align-items:center;gap:10px;margin:0;color:#D0694E;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.gx-th{display:none;position:relative;flex:none;width:46px;height:44px}
.gx-th svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gx-th__w path{fill:#A8432E;opacity:0;transition:opacity .5s var(--ease-out) .5s}
.gx-th-on .gx-th__w path{opacity:.62}
.gx-th__l .l{stroke:rgba(242,233,216,.7)}
@media (max-width:860px){
  .gx{grid-template-columns:minmax(0,1fr)}
  .gx__side{position:relative;top:auto}
  .gx__frame{aspect-ratio:auto;height:300px}
  .gx-th{display:block}
  .gx-lead{display:none}
}
/* the DOI line of the latest paper inks a Sanguine underline */
.rs-feat .rs-doi::before{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:#D0694E;transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-pen)}
.rs-feat .rs-doi.gx-inked::before{transform:scaleX(1)}
html.still .gx-lead{display:none}
html.still .gx-w,html.still .gx-th__w path{transition:none}
@media (forced-colors:active){.gx-w,.gx-lead,.gx-th{display:none}}

/* ---- P13 GET INVOLVED: THE HANDS MEET ---- */
.gh-a,.gh-b{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 49.4%;will-change:transform}
html.motion-on .hplate:not(.fx-off) .gh-a{transform:translate3d(-13.5%,5.2%,0) rotate(-4deg)}
html.motion-on .hplate:not(.fx-off) .gh-b{transform:translate3d(13.5%,-5.2%,0) rotate(-4deg)}
html.still .gh-a,html.still .gh-b{transform:none !important}
.gh-ring{position:absolute;left:50%;top:49.4%;width:40%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.3);
  background:radial-gradient(closest-side,rgba(255,214,168,0) 52%,rgba(255,214,168,.55) 70%,rgba(255,190,134,.18) 84%,rgba(255,190,134,0) 100%)}
/* the honest paths */
#paths .wrap{position:relative}
#paths .wrap > .divider,#paths .wrap > .sec__head,#paths .wrap > .cards,#paths .wrap > .pg-feature{position:relative;z-index:1}
.gp-svg{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none;opacity:0;transition:opacity .4s var(--ease-out)}
#paths.gp-ready .gp-svg{opacity:1}
.gp-svg path{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.gp-svg .gp-line{stroke:rgba(242,233,216,.36)}
.gp-svg .gp-stub{stroke:rgba(242,233,216,.4);stroke-dasharray:3 5}
.gp-origin{position:absolute;left:0;top:0;z-index:0;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border:1px solid #D0694E;border-radius:50%;pointer-events:none;opacity:0;
  background:linear-gradient(#D0694E,#D0694E) center/1px 100% no-repeat,linear-gradient(#D0694E,#D0694E) center/100% 1px no-repeat;transition:opacity .5s var(--ease-out)}
#paths.gp-ready .gp-origin{opacity:.9}
.gp-target{position:absolute;left:0;top:0;z-index:2;width:0;height:0;pointer-events:none}
.gp-target[hidden]{display:none}
.gp-target i{position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;border:1.5px solid #D0694E;opacity:0;transform:scale(1.2);
  background:radial-gradient(circle,#E0744F 0 3px,rgba(224,116,79,0) 3.5px);box-shadow:0 0 0 4px rgba(168,67,46,.18),0 0 20px 3px rgba(226,132,80,.38)}
.gp-target.is-stamped i{opacity:1;transform:none;animation:gpStamp .26s var(--ease-stamp) both,gpBreath 2.4s ease-in-out .26s infinite alternate;animation-play-state:running,paused}
#paths.gp-vis .gp-target.is-stamped i{animation-play-state:running,running}
@keyframes gpStamp{from{opacity:0;transform:scale(1.2)}to{opacity:1;transform:none}}
@keyframes gpBreath{from{opacity:1}to{opacity:.55}}
#paths.gp-stacked .gp-target i{left:-7px;top:-7px;width:14px;height:14px;border-width:1px;background:radial-gradient(circle,#E0744F 0 2px,rgba(224,116,79,0) 2.5px);box-shadow:0 0 0 3px rgba(168,67,46,.18),0 0 12px 2px rgba(226,132,80,.38)}
.gp-note{margin-left:auto;padding:3px 8px;border:1px dashed var(--rule-strong);color:var(--text-secondary);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
html.still .gp-target i{animation:none !important;opacity:1;transform:none}
/* the closed door beside the membership box */
.jb{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.4vw,30px);align-items:center}
.jb-door{position:relative;width:clamp(78px,8.6vw,120px);aspect-ratio:5/8;border:1px solid var(--rule-strong);border-bottom-color:rgba(242,233,216,.4);background:#161210;overflow:visible}
.jb-door::before{content:"";position:absolute;left:-7px;right:-7px;top:-7px;height:6px;border:1px solid var(--rule);border-bottom:0;pointer-events:none}
.jb-door::after{content:"";position:absolute;left:18%;right:18%;bottom:-10px;height:18px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,190,130,.34),rgba(255,190,130,0));opacity:.7}
.jb-door__l,.jb-door__r{position:absolute;top:3px;bottom:0;width:calc(50% - 4px);transition:transform 1.2s var(--ease-weight)}
.jb-door__l{left:3px;background:linear-gradient(to right,#3B2B24,#34271f 70%,#2c211b)}
.jb-door__r{right:3px;background:linear-gradient(to left,#3B2B24,#34271f 70%,#2c211b)}
.jb-door__l::before,.jb-door__r::before{content:"";position:absolute;left:14%;right:14%;top:8%;height:36%;border:1px solid rgba(242,233,216,.1)}
.jb-door__l::after,.jb-door__r::after{content:"";position:absolute;left:14%;right:14%;top:50%;bottom:8%;border:1px solid rgba(242,233,216,.1)}
.jb-door__seam{position:absolute;left:50%;top:3px;bottom:0;width:2px;margin-left:-1px;pointer-events:none}
.jb-door__seam i{position:absolute;inset:0;opacity:.5;will-change:opacity;
  background:linear-gradient(to bottom,rgba(255,200,150,0),rgba(255,200,150,.5) 22%,rgba(255,226,194,.95) 55%,rgba(255,200,150,.5) 85%,rgba(255,200,150,.2));
  box-shadow:0 0 10px 2px rgba(255,172,112,.3),0 0 30px 8px rgba(255,150,90,.1)}
.jb-door.is-vis .jb-door__seam i{animation:jbSeam 4s ease-in-out infinite alternate}
@keyframes jbSeam{from{opacity:.35}to{opacity:.7}}
.jb-door.is-open .jb-door__l{transform:translate3d(-22%,0,0)}
.jb-door.is-open .jb-door__r{transform:translate3d(22%,0,0)}
.jb-door.is-open .jb-door__seam{transform:scaleX(6)}
@media (max-width:560px){.jb{grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start}.jb-door{width:64px}}
html.still .jb-door__seam i{animation:none}
@media (forced-colors:active){.gp-svg,.gp-origin,.gp-target,.jb-door,.gh-ring{display:none}.jb{grid-template-columns:minmax(0,1fr)}}

/* ---- P14 ADVISORY BOARD: FROM STUDY TO PORTRAIT (and the hero picture, framed on the consultant and the student at the console) ---- */
.hplate--ab .hplate__frame img{object-position:34% 50%}
.person.dv{position:relative}
.dv-frame{position:absolute;left:0;top:0;z-index:3;aspect-ratio:1;pointer-events:none;transition:opacity .55s var(--ease-out) .1s}
.dv-frame .dv-study{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dv-study .l{stroke:rgba(242,233,216,.7)}
.dv-study .dv-ci{stroke:#D0694E}
.dv-study .hp{stroke:rgba(242,233,216,.3)}
/* owner: no construction on a photograph. Once the photo develops, the study is gone. */
.dv-dev .dv-frame{opacity:0}
.dv-done .dv-frame{display:none}
.dv-nm{position:relative;display:inline-block}
/* NOTCH (critic 2026-09-24): the photo and its cover live in one round window, so the cover never leaves the circle on any frame. The cover
   is solid over the whole photo at rest (its feathered edge sits above the circle) and slides down and out of the window as the photo develops;
   until then the photo waits under it as a warm dark print. */
.dv-pic{position:absolute;inset:0;z-index:0;display:block;border-radius:50%;overflow:hidden;clip-path:circle(50% at 50% 50%)}
.dv-pic img{transition:filter 1.1s var(--ease-out)}
.dv:not(.dv-dev) .dv-pic img{filter:sepia(.55) brightness(.62)}
.dv-cover{position:absolute;left:0;right:0;top:-26%;height:126%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(38,32,26,0),#26201A 21%);transform:translate3d(0,0,0);transition:transform .6s var(--ease-inout)}
.dv-dev .dv-cover{transform:translate3d(0,101%,0)}
.dv-done .dv-cover{display:none}
.person__name{position:relative}
.dv-ul{position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:#D0694E;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-pen) .15s}
.dv-dev .dv-ul{transform:scaleX(1)}
/* RC1: the first title is always shown (only the photo develops) */
html.still .dv-cover{display:none}
html.still .dv-pic img{filter:none;transition:none}
html.still .dv-frame{display:none}
html.still .dv-ul{transform:none}
html.still .dv .person__titles li:first-child{opacity:1;transform:none}
@media (forced-colors:active){.dv-frame,.dv-cover{display:none}}

/* ---- P15 404: FINISH THE STUDY ---- */
.hplate--nf{touch-action:pan-y}
.hplate__frame > .nf-fin{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);overflow:visible;pointer-events:none}
.nf-fin path,.nf-fin circle{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.nf-fin .l{stroke:rgba(242,233,216,.62)}
.nf-fin .c{stroke:#D0694E}
.nf-tgt{transform-box:fill-box;transform-origin:50% 50%}
html.motion-on .hplate--nf:not(.fx-off):not(.nf-armed) .nf-fin{opacity:0}
.nf-nib{position:absolute;left:13%;top:63.6%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#F2E9D8;opacity:0;pointer-events:none;
  box-shadow:0 0 5px 1px rgba(255,236,214,.9),0 0 14px 5px rgba(255,176,112,.45);transition:opacity .3s var(--ease-out);will-change:opacity}
.nf-wait:not(.nf-going):not(.nf-done) .nf-nib{opacity:.8;animation:nfNib 1.6s ease-in-out infinite alternate;animation-play-state:paused}
.nf-wait.is-vis:not(.nf-going):not(.nf-done) .nf-nib{animation-play-state:running}
@keyframes nfNib{from{opacity:.6}to{opacity:1}}
.nf-slip{position:absolute;right:2%;top:9%;z-index:3;width:min(40%,172px);transform:rotate(3deg);pointer-events:none;transition:opacity .5s var(--ease-out)}
.hplate--nf.fx-live:not(.nf-done) .nf-slip{opacity:0}
.nf-slip .mnote{padding:10px 12px}
.nf-slip .mnote.is-mirror .mnote__glass{inset:10px 12px}
.nf-slip__p{margin:0;padding:10px 12px;background:var(--folio,#F2E9D8);color:#3B2B24;font-size:.9rem;font-style:italic;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.nf-ticks{position:absolute;inset:-10px;pointer-events:none}
.nf-ticks i{position:absolute;width:12px;height:12px;border:0 solid #D0694E;transform:scale(0);animation:nfTick .4s var(--ease-out) forwards}
.nf-ticks i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;transform-origin:0 0}
.nf-ticks i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;transform-origin:100% 0;animation-delay:.08s}
.nf-ticks i:nth-child(3){right:0;bottom:0;border-width:0 2px 2px 0;transform-origin:100% 100%;animation-delay:.16s}
.nf-ticks i:nth-child(4){left:0;bottom:0;border-width:0 0 2px 2px;transform-origin:0 100%;animation-delay:.24s}
@keyframes nfTick{to{transform:none}}
html.still .nf-ticks i{animation:none;transform:none}
html.still .nf-nib{display:none}
@media (max-width:860px){.hplate--nf .hplate__frame{aspect-ratio:auto;height:320px}}
@media (forced-colors:active){.nf-nib,.nf-ticks{display:none}}
/* END EVENTS-RESEARCH-INVOLVE FX BLOCK */

/* FORM FACTOR BLOCK (formfactor builder, stage 3, 2026-09-21) ========================================================================
   Owner: "make sure this website is perfect for any form factor: laptop, iPad, phone. A lot of people use their phones".
   Layout only: safe areas, native touch, type that never overflows, 44 px targets, phone reading sizes, phone grids.
   ===================================================================== */
/* notched phones in landscape: every page gutter clears the notch and the rounded corners (viewport-fit=cover is on every page) */
:root{--gutter:max(clamp(20px,5vw,72px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
.ftr{padding-bottom:calc(36px + env(safe-area-inset-bottom,0px))}
.sheet{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
/* native touch: no double-tap zoom delay on controls, a quiet warm tap flash instead of the grey box */
:where(a,button,summary,label,select,input,textarea,[role="button"],[role="tab"]){touch-action:manipulation}
:where(a,button,[role="button"],[role="tab"]){-webkit-tap-highlight-color:rgba(242,233,216,.08)}
/* headings: balanced lines (no lonely last word), never wider than their box; body text avoids a one-word last line */
:where(h1,h2,h3,h4,.t-title){text-wrap:balance;overflow-wrap:break-word}
:where(p,li,dd,blockquote){text-wrap:pretty}
/* the section index labels (FIG. 03 // ...) wrap on narrow screens instead of running off the edge */
.divider .fig{flex:0 1 auto;min-width:0}
.divider .fig::before{flex:none}
/* the header home link keeps a 44 px hit area when the lockup is condensed (its box is scaled by a transform) */
.hdr .hdr__home::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(100%,56px);transform:translateY(-50%)}
/* inline title links in cards and paper lists: a taller hit area without moving the text */
.t-card > a,.rs-t,.rs-arch a{padding-block:.66em}
@media (max-width:560px){
  /* a long button label wraps inside the button instead of pushing past the screen edge */
  .btn{white-space:normal;text-align:center;max-width:100%}
  /* phone reading sizes: running text at 16 px or more */
  .person__titles,.rs-pap__a,.rs-feat__auth,.gx__help,.card .sigp__long,.scr__cap,.scr__hint,.scr__note{font-size:1rem}
  .rs-pap__a,.rs-feat__auth{line-height:1.5}
  .ab-sw p:not(.t-mono){font-size:1rem}
  /* a text link that wraps onto two lines keeps its underline under each line (the drawn rule crossed the second line) */
  .link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(242,233,216,.55)}
  .link::after{display:none}
  /* the closing call to action box: its links sit centred like its text */
  .pg-cta .phero__row{justify-content:center;text-align:center}
  /* the event filters: search and department full width, type and year side by side, sort full width */
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  .filters .field{grid-column:1 / -1}
  .filters .field:nth-child(3),.filters .field:nth-child(4){grid-column:auto}
}
/* phones: short-titled groups (Board, Student Advisors, Faculty Advisors) sit two to a row, so a group is not one long column */
@media (min-width:561px) and (max-width:760px){
  [data-group="board-of-directors"] .people,[data-group="student-advisors"] .people,[data-group="faculty-advisors"] .people{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  [data-group="board-of-directors"] .people,[data-group="student-advisors"] .people,[data-group="faculty-advisors"] .people,[data-group="department-heads"] .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px}
  [data-group="board-of-directors"] .person__photo,[data-group="student-advisors"] .person__photo,[data-group="faculty-advisors"] .person__photo,[data-group="department-heads"] .person__photo{width:min(118px,100%)}
  [data-group="board-of-directors"] .person::before,[data-group="student-advisors"] .person::before,[data-group="faculty-advisors"] .person::before,[data-group="department-heads"] .person::before{width:142px;height:142px;left:50%;margin-left:-71px}
  /* two across, centred under each portrait; an odd last person sits centred on its own row, so no card is left hanging at one side */
  :is([data-group="board-of-directors"],[data-group="student-advisors"],[data-group="faculty-advisors"],[data-group="department-heads"]) .people{padding-left:0}
  :is([data-group="board-of-directors"],[data-group="student-advisors"],[data-group="faculty-advisors"],[data-group="department-heads"]) .person{justify-items:center;text-align:center}
  :is([data-group="board-of-directors"],[data-group="student-advisors"],[data-group="faculty-advisors"],[data-group="department-heads"]) .person:last-child:nth-child(odd){grid-column:1 / -1}
  [data-group] .person__name{font-size:1rem}
}
/* research on phones: each group of advisor papers shows its first two, then a clear "Show all" button (site.js, RESEARCH BLOCK).
   It folds only while the Graft Atlas filter is off; a chosen label always shows every matching paper. */
.rs-more{display:none}
@media (max-width:900px){
  .rs-grp.is-fold:not(.is-open) .rs-pap:nth-child(n+3){display:none}
  .gx:has(.gx__reset:not([hidden])) .rs-grp.is-fold .rs-pap:not([hidden]){display:flex}
  .rs-grp.is-fold .rs-more{display:flex;align-items:center;justify-content:center;gap:.6em;width:100%;min-height:48px;margin-top:16px;padding:0 18px;
    appearance:none;background:rgba(242,233,216,.03);border:1px solid var(--rule-strong);border-radius:2px;cursor:pointer;color:var(--text-primary);
    font-family:var(--f-head);font-weight:600;font-size:.95rem;letter-spacing:.03em}
  .rs-grp.is-fold .rs-more::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease-out)}
  .rs-grp.is-open .rs-more::after{transform:translateY(2px) rotate(-135deg)}
  .gx:has(.gx__reset:not([hidden])) .rs-more{display:none !important}
}
/* the door on a phone held sideways (short landscape screens): the round logo stays centred on the seam and the hint, the Sound
   control and Skip sit in a column to its right, so all of them fit above the bottom edge (they ran off the screen below it) */
@media (orientation:landscape) and (max-height:500px){
  .door__ui{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:repeat(3,auto);align-items:center;column-gap:28px;row-gap:8px}
  .door__ui > .door__btn{grid-column:2;grid-row:1 / 4}
  .door__ui > .door__hint,.door__ui > .door__sound,.door__ui > .door__skip{grid-column:3;justify-self:start;margin:0}
  .door__ui > .door__hint{grid-row:1;align-self:end}
  .door__ui > .door__sound{grid-row:2}
  .door__ui > .door__skip{grid-row:3;align-self:start}
}
/* the footer contact phone numbers keep a 44 px hit area on every pointer, not only on touch */
.ftr__col .ftr__pphone{min-height:44px}
/* card grids never leave one lonely card on the last row: in two columns an odd last card spans the row; four cards in the
   three-column grid sit two by two */
@media (min-width:641px) and (max-width:1000px){.cards > li:last-child:nth-child(odd){grid-column:1 / -1}}
@media (min-width:641px){.cards--2 > li:last-child:nth-child(odd){grid-column:1 / -1}}
@media (min-width:1001px){.cards:not(.cards--2):not(.cards--4):has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* "Take the controls" on a phone held sideways: the whole field fits between the header and the bottom edge (it was 400 px tall
   on a 390 px screen). site.js section 11 redraws the field to its size. */
@media (orientation:landscape) and (max-height:500px){
  .ctl__stage{height:max(260px,calc(100svh - 96px))}
}
/* the phone sheet on a phone held sideways: the menu reads in two columns, so it is half as long */
@media (orientation:landscape) and (max-height:500px) and (min-width:640px){
  .sheet__list{display:block;column-count:2;column-gap:clamp(28px,5vw,56px);border-top:0}
  .sheet__list a{break-inside:avoid;border-top:1px solid var(--rule);border-bottom:0}
}
/* the phone sheet is fully opaque, so the page title never shows through the menu */
.sheet{background:var(--canvas)}
/* END FORM FACTOR BLOCK */

/* =====================================================================
   FIXER 3 BLOCK (2026-09-22): review findings.
   ===================================================================== */
/* owner request C: the travelling construction never lies over a picture. site.js (renderTrav) adds .is-pic while its circle meets a
   picture; the drawing fades out over 150 ms (opacity only) and comes back when it is clear again. */
.trav svg{transition:opacity .15s ease}
.trav.is-pic svg{opacity:0}
/* owner request C: no square with crosshairs around a portrait photograph. The whisper square stays only on open seats and monogram
   tiles, which are drawn, not photographed; the ember ring and its spark are the portrait frame. */
.person::before{display:none}
.person--open::before,.person:has(.person__mono)::before{display:block}
/* header: the dropdown arrows never shrink away when the navigation is tight (1001 to 1240 px) */
.dd__btn svg{flex:none}
/* header, 1001 to 1240 px (iPad Pro, small laptops): the Sound control stays in the header as a compact 44 px speaker button. Its text
   ("Sound: off" or "Sound: on") is kept as the accessible name at font-size 0; the speaker shows waves when on and a cross when off. */
@media (min-width:1001px) and (max-width:1240px){
  .hdr__nav > .hdr__sound{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:0;font-size:0;letter-spacing:0}
  .hdr__nav > .hdr__sound::before{width:18px;height:18px;margin:0;border:0;border-radius:0;background:currentColor;vertical-align:0;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15.5 9.5l5 5M20.5 9.5l-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15.5 9.5l5 5M20.5 9.5l-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
  .hdr__nav > .hdr__sound[aria-pressed="true"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M17.8 6.5a7.6 7.6 0 0 1 0 11'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M17.8 6.5a7.6 7.6 0 0 1 0 11'/%3E%3C/svg%3E")}
  .hdr__nav{gap:10px}
  .hdr__links{gap:14px}
}
/* 1001 to 1099 px: the header "Get involved" button gives its room to the Sound control; the Get Involved menu next to it and the
   page itself carry the same links, so nothing is lost, and the lockup keeps at least 32 px of air before the navigation */
@media (min-width:1001px) and (max-width:1099px){.hdr__nav > .hdr__cta{display:none}}
/* the Events page's planned list ends with "More to come." (programs.json moreText), set like the Programs page's closing line */
.sigp-more{margin-top:clamp(24px,4vh,40px);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
/* END FIXER 3 BLOCK */

/* =====================================================================
   PR BLOCK (PR builder, 2026-09-22, site-todo 80b): "The Magic Lantern", the Public Relations centrepiece (/departments/public-relations/
   #remit, module /assets/fx/lantern.js). A lantern drawn in ink projects the slide of the remit item being read onto a hanging screen.
   Stage 1000 x 640 units: every HTML layer is placed in percent of that box, so it stays in register with the drawing at any width.
   Desktop (1000 px and wider): the lantern sticks beside the remit list. Narrower: it sticks under the header, edge to edge, and the list
   reads under it. Still by default (no JS, html.still, module off): the lantern lit and the first slide in focus.
   ===================================================================== */
.prl{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.prl__fig{position:sticky;top:calc(var(--hdr-h) + 20px);margin:0;z-index:2}
/* round 2: the plate is the PR ink study (study-lantern, 1025 x 1000), at the standard of the /departments/ console plate */
.prl__stage{position:relative;width:100%;aspect-ratio:1025/1000;overflow:hidden;isolation:isolate;border:1px solid var(--rule);
  background:radial-gradient(ellipse at 52% 46%,rgba(168,67,46,.12),rgba(59,43,36,.30) 56%,rgba(20,16,12,.55) 100%),var(--canvas)}
.prl__stage::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 80px rgba(12,9,6,.6)}
.prl__stage::after{content:"";position:absolute;inset:9px;z-index:3;pointer-events:none;border:1px solid rgba(168,67,46,.5)}
.prl__stage *{pointer-events:none}
.prl__cam{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.6s var(--ease-weight)}
.prl__box{position:absolute;inset:0}
.prl__still,.prl__cv{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen}
.prl__still{max-width:none;opacity:.94}
.prl--on .prl__still{opacity:0}
.prl--noink .prl__still{opacity:.94}
.prl__cv{opacity:0;transition:opacity .6s var(--ease-inout)}
.prl__cv.is-on{opacity:1}
.prl__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.prl__svg :is(path,circle){fill:none;stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.prl__svg .l{stroke:rgba(242,233,216,.5)}
.prl__svg .d{stroke:rgba(242,233,216,.2);stroke-dasharray:14 5 2 5}
.prl__svg .c{stroke:rgba(168,67,46,.72)}
.prl__svg .prl__tg{stroke:#C8563C;stroke-width:1.3}
.prl__svg .prl__td{fill:#EDB877;stroke:none}
.prl__tgt{transform-box:fill-box;transform-origin:50% 50%;filter:drop-shadow(0 0 5px rgba(168,67,46,.6))}
/* the light: the lamp through the lantern's window, the lens, the beam to the sheet (all screen blended, opacity only) */
.prl__lamp,.prl__lensglow,.prl__beam,.prl__lit{position:absolute;display:block;mix-blend-mode:screen}
.prl__lamp{left:4%;top:54.4%;width:18.2%;height:18.7%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,206,140,.5),rgba(236,150,82,.2) 50%,rgba(168,67,46,0))}
.prl__lensglow{left:45.5%;top:42.2%;width:8.4%;height:8.6%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,232,196,.85),rgba(255,204,150,.28) 45%,rgba(255,204,150,0))}
.prl__beam{inset:0;clip-path:polygon(49.7% 46.1%,73.15% 5.91%,92.71% 8.83%,92.41% 46.85%);
  background:radial-gradient(ellipse 60% 70% at 49.7% 46.1%,rgba(255,214,160,.26),rgba(255,214,160,.09) 45%,rgba(255,214,160,.05) 80%)}
/* the sheet: a 280 x 504 box put on the drawn paper by one matrix3d (lantern.js); without JS a close fit in percent */
.prl__screen{position:absolute;left:73.1%;top:6%;width:19.4%;height:39%;color:#F4E6CC}
.prl--on .prl__screen{left:0;top:0;width:280px;height:504px;transform-origin:0 0}
.prl__lit{inset:0;background:radial-gradient(ellipse 70% 60% at 45% 48%,rgba(255,214,160,.13),rgba(255,214,160,.04) 70%,rgba(255,214,160,0))}
.prl__slide{position:absolute;inset:0;opacity:0;visibility:hidden}
.prl__slide.is-on{opacity:1;visibility:visible}
.prl__slide svg{display:block;width:100%;height:100%;overflow:visible}
.prl__detail{position:absolute;z-index:4;left:4%;top:3.4%;margin:0;font-size:10px;line-height:1.4;letter-spacing:.16em;color:var(--text-secondary);white-space:nowrap}
.prl__cap{display:flex;flex-direction:column;gap:4px}
.prl__now{color:var(--text-primary)}
.prl__now--grid{display:grid;justify-items:start}
.prl__now--grid > .prl__say{grid-area:1/1;visibility:hidden}
.prl__now--grid > .prl__say.is-on{visibility:visible}
.prl__say::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 1px 0;border-radius:50%;background:var(--accent);vertical-align:middle}
.prl__now:not(.prl__now--grid)::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 1px 0;border-radius:50%;background:var(--accent);vertical-align:middle}
/* the reading list: the item in focus carries a Sanguine rule, the others step back */
.prl .sigr li{position:relative}
.prl .sigr li::before{content:"";position:absolute;left:-14px;top:18px;bottom:18px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease-out)}
.prl .sigr li.is-lit::before{transform:scaleY(1)}
.prl .sigr li > *{transition:opacity .45s var(--ease-out)}
.prl--focus .sigr li:not(.is-lit) > *{opacity:.5}
.prl .sigr li.is-lit .sigr__n{color:var(--text-primary)}
/* before the arrival: nothing lit, no slide (JS only; still shows the finished plate) */
html:not(.still) .prl--pre :is(.prl__lamp,.prl__lensglow,.prl__beam,.prl__lit,.prl__tgt,.prl__screen .prl__slide){opacity:0}
html.still .prl .sigr li > *,html.still .prl .sigr li::before,html.still .prl__cam,html.still .prl__cv{transition:none}
/* narrower than 1000 px: the lantern sticks under the header, edge to edge, and the list reads beneath it */
@media (max-width:999px){
  .prl{grid-template-columns:minmax(0,1fr);gap:18px}
  .prl__fig{top:var(--hdr-h);margin:0 calc(-1 * var(--gutter));padding:6px 0 10px;background:var(--canvas)}
  .prl__fig::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;background:linear-gradient(var(--canvas),rgba(38,32,26,0));pointer-events:none}
  .prl__stage{max-width:calc(42vh * 1.025);margin:0 auto;border-left:0;border-right:0}
  /* stacked, the view moves in on the lens and the sheet so the slides read (lantern.js sizes the ink for 1.6x) */
  .prl--near .prl__cam{transform:translate3d(-60%,0,0) scale(1.6)}
  .prl__cap{margin-top:8px;padding:0 var(--gutter)}
  .prl .sigr li::before{left:-10px}
}
@media (max-width:999px) and (min-width:640px){.prl__stage{border-left:1px solid var(--rule);border-right:1px solid var(--rule)}}
@media (max-width:640px){.prl__detail{display:none}.prl__cap > span:first-child{display:none}}
/* short landscape screens: the lantern does not stick */
@media (max-width:999px) and (max-height:560px),(max-height:520px){.prl__fig{position:relative;top:auto}}
/* the brand sheet's reading face follows the site's body face (Garet, owner 2026-09-21) */
.spec__f--g{font-family:var(--f-body)}
/* END PR BLOCK */

/* =====================================================================
   VOICES BLOCK (words builder, 2026-09-22). Appended only. site-todo 79c, 79d, 81, 87, 90, 91.
   .vq  "In their words": one advisor per row, the portrait with its moving ember ring on the left, the words on the right. An ink rule draws
        across the top of each row and a short leader draws to the name (INK); a lamp sweep crosses each quote once (LIGHT, R.fx.sweep).
        "written" rows are set as a passage with a margin rule, never as speech.
   .vf  "From the founders": the first founder leads across the full width, the other four in two calm columns. Every line is shown whole.
   .vt  "Overview of the teams" (Board page): the Board at the head, a drawn trunk and bus, the four departments beneath (INSTRUMENT).
   Transform, opacity and filter only. Every ring pauses off screen (.js-live). html.still: everything drawn, nothing moves.
   ===================================================================== */
/* ---- shared: the portrait rings inside the voices, and their pause off screen ---- */
.vq .person__photo,.vf .person__photo{width:clamp(120px,12vw,176px);margin:6px}
.vq:hover .person__photo:not(.person__mono)::before,.vf:hover .person__photo:not(.person__mono)::before{opacity:1}
.vq:hover .person__photo:not(.person__mono)::after,.vf:hover .person__photo:not(.person__mono)::after{opacity:1}
.vq:not(.live) .person__photo::before,.vq:not(.live) .person__photo::after,.vq:not(.live) .person__spark,
.vf:not(.live) .person__photo::before,.vf:not(.live) .person__photo::after,.vf:not(.live) .person__spark{animation-play-state:paused !important}

/* ---- In their words ---- */
.vq__list{display:grid;margin-top:clamp(8px,2vh,24px)}
.vq{position:relative;display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:clamp(28px,4.5vw,80px);align-items:start;
  padding-block:clamp(44px,7vh,84px)}
.vq::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,var(--accent),rgba(217,138,75,.55) 38%,rgba(242,233,216,.12) 78%,rgba(242,233,216,0));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.3s var(--ease-inout)}
.vq.in::before{transform:scaleX(1)}
.vq__who{display:grid;justify-items:center;gap:16px;padding-top:6px}
.vq__n{color:var(--text-secondary)}
.vq__body{position:relative;max-width:980px}
.vq__kind{display:flex;align-items:center;gap:10px;color:var(--text-secondary);margin-bottom:clamp(14px,2vh,22px)}
.vq__kind::before{content:"";width:6px;height:6px;border-radius:50%;background:#D98A4B;box-shadow:0 0 10px 2px rgba(217,138,75,.5)}
.vq__q{position:relative;margin:0}
.vq__q p{max-width:40ch;font-family:var(--f-body);font-weight:300;font-size:clamp(1.3rem,2.3vw,2.1rem);line-height:1.38;letter-spacing:.01em;color:var(--text-primary);text-wrap:pretty}
.vq:not(.vq--written) .vq__q::before{content:"\201C";display:block;height:.46em;margin:0 0 .12em -.04em;font-family:var(--f-display);font-size:clamp(4.2rem,7vw,6.4rem);
  line-height:.9;color:var(--accent);text-shadow:0 0 28px rgba(168,67,46,.45)}
.vq--written .vq__q{padding-left:clamp(18px,2vw,26px);border-left:1px solid rgba(217,138,75,.55)}
.vq--written .vq__q p{color:#E9DDC7;font-size:clamp(1.2rem,2vw,1.8rem)}
.vq__cap{position:relative;display:grid;justify-items:start;gap:4px;margin-top:clamp(22px,3.4vh,34px);padding-left:64px}
.vq__lead{position:absolute;left:0;top:.8em;width:44px;height:1px;background:linear-gradient(90deg,var(--accent),#EDB877);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease-inout) .5s}
.vq.in .vq__lead{transform:scaleX(1)}
.vq__name{font-family:var(--f-head);font-weight:600;font-size:1.08rem;letter-spacing:.01em;color:var(--text-primary)}
.vq__title{font-size:.94rem;line-height:1.5;color:var(--text-secondary)}
.vq__credit{font-size:.9rem;line-height:1.5;color:var(--text-secondary);max-width:58ch}
.vq__src{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;color:#EDB877;text-decoration:underline;text-decoration-color:rgba(237,184,119,.4);
  text-underline-offset:5px;transition:color .3s var(--ease-out),text-decoration-color .3s var(--ease-out)}
.vq__src:hover{color:var(--text-primary);text-decoration-color:var(--text-primary)}
.vq__arr{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.vq__src:hover .vq__arr,.vt__card:hover .vq__arr{transform:translate(2px,-2px)}
@media (max-width:720px){
  .vq{grid-template-columns:minmax(0,1fr);gap:22px;padding-block:44px}
  .vq__who{grid-auto-flow:column;justify-content:start;align-items:center;gap:18px;padding-top:0}
  .vq .person__photo{width:104px}
  .vq__q p{font-size:clamp(1.18rem,5.2vw,1.45rem)}
  .vq--written .vq__q p{font-size:clamp(1.1rem,4.8vw,1.35rem)}
  .vq:not(.vq--written) .vq__q::before{font-size:4rem}
  .vq__cap{padding-left:44px}.vq__lead{width:28px}
}

/* ---- From the founders: one arc, one chorus (NOTCH, owner batch 7 item 4, 2026-09-24) ----
   .vfa  the arc: five portrait rings on one engraved parabola (the first founder in the middle, largest), pinned under the header while the
         chorus is read; on wide screens it gathers to a smaller size once pinned (a transform on .vfa__in, whose own dark ground scales with it,
         so the page is covered only where the arc is).
   .vfc  the chorus: the lines in one column, the first founder's line first and largest, each signed by a Sanguine rule and a name.
   The ring of the line being read lifts (translate, scale, opacity); the others rest. html.still: nothing pins, every ring lit. */
.vfm{position:relative;margin-top:clamp(4px,1.6vh,20px)}
.vfa__pin{display:block;height:1px;margin-bottom:-1px}
.vfa{position:sticky;top:var(--hdr-hc,64px);z-index:4;pointer-events:none}
.vfa__in{position:relative;max-width:1100px;margin-inline:auto;aspect-ratio:1000/250;container-type:inline-size;transform-origin:50% 0;
  transition:transform .8s var(--ease-inout)}
.vfa__in::before{content:"";position:absolute;left:-70%;right:-70%;top:-40px;bottom:-26px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,var(--canvas) 0,var(--canvas) calc(100% - 30px),rgba(38,32,26,0))}
.vfa.is-pinned .vfa__in{transform:scale(.6)}
.vfa__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vfa__line{fill:none;stroke:rgba(242,233,216,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.vfa__ticks{fill:none;stroke:rgba(242,233,216,.3);stroke-width:.8;vector-effect:non-scaling-stroke}
.vfa__idx{fill:#A8432E;filter:drop-shadow(0 0 5px rgba(168,67,46,.7))}
.vfa__rings{list-style:none;margin:0;padding:0}
.vfa__r{--w:clamp(76px,7.6vw,120px);position:absolute;left:var(--x);top:var(--y);width:var(--w);width:min(120px,10.9cqw);
  transform:translate(-50%,-50%);opacity:.6;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.vfa__r--lead{width:clamp(110px,11vw,176px);width:min(176px,16cqw)}
.vfa__r .person__photo{width:100%;margin:0}
.vfa__r.is-here{opacity:1;transform:translate(-50%,-50%) translate3d(0,-4px,0) scale(1.04)}
.vfa__r.is-here .person__photo:not(.person__mono)::before{opacity:1}
.vfa__nm{position:absolute;left:50%;top:100%;margin-top:14px;transform:translateX(-50%);white-space:nowrap;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-secondary);transition:color .7s var(--ease-out)}
.vfa__r.is-here .vfa__nm{color:var(--text-primary)}
.vfa:not(.live) .person__photo::before,.vfa:not(.live) .person__photo::after,.vfa:not(.live) .person__spark{animation-play-state:paused !important}
.vfc{list-style:none;max-width:920px;margin:clamp(40px,6vh,72px) auto 0;padding:0;display:grid;gap:clamp(48px,7.5vh,84px)}
.vfc__fig{margin:0}
.vfc__q{position:relative;margin:0}
.vfc__q p{max-width:62ch;margin:0;font-family:var(--f-body);font-weight:300;font-size:clamp(17px,1.35vw,20px);line-height:1.72;color:var(--text-primary);text-wrap:pretty}
.vfc__l--lead .vfc__q p{max-width:none;font-size:clamp(22px,2.1vw,30px);line-height:1.52;letter-spacing:.01em}
.vfc__l--lead .vfc__q::before{content:"\201C";position:absolute;right:calc(100% + .14em);top:-.1em;font-family:var(--f-display);font-size:clamp(3.6rem,5.4vw,5.6rem);
  line-height:1;color:var(--accent);text-shadow:0 0 28px rgba(168,67,46,.45)}
.vfc__who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:clamp(16px,2.4vh,24px)}
.vfc__rule{flex:none;width:36px;height:1px;background:linear-gradient(90deg,var(--accent),#EDB877);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease-inout) .35s}
.vfc__l.in .vfc__rule{transform:scaleX(1)}
.vfc__name{font-family:var(--f-head);font-weight:600;font-size:1.02rem;letter-spacing:.01em;color:var(--text-primary)}
.vfc__role{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
@media (max-width:1100px){.vfa.is-pinned .vfa__in{transform:scale(.74)}.vfc__l--lead .vfc__q::before{position:static;display:block;height:.5em;margin:0 0 .1em -.04em}}
@media (max-width:720px){
  .vfa{margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .vfa__in{aspect-ratio:1000/290}
  .vfa__in::before{top:-14px;bottom:-18px}
  .vfa.is-pinned .vfa__in{transform:none}
  .vfa__r{width:14cqw}.vfa__r--lead{width:18cqw}
  .vfa__nm{display:none}
  .vfa__ticks{stroke-width:.6}
  .vfc{margin-top:24px;gap:44px}
  .vfc__q p{font-size:1.02rem;line-height:1.68}
  .vfc__l--lead .vfc__q p{font-size:clamp(1.2rem,5.2vw,1.4rem);line-height:1.55}
  .vfc__l--lead .vfc__q::before{font-size:3.6rem}
}
html.still .vfa{position:relative;top:auto}
html.still .vfa__in{transform:none;transition:none}
html.still .vfa__r{opacity:1;transform:translate(-50%,-50%);transition:none}
html.still .vfc__rule{transform:none;transition:none}
@media (forced-colors:active){.vfa__line,.vfa__ticks{stroke:CanvasText}.vfa__idx{fill:CanvasText}.vfc__rule{background:CanvasText}}

/* ---- Overview of the teams (Board page) ---- */
.vt{margin-top:clamp(8px,2vh,24px)}
.vt__board{position:relative;display:flex;align-items:center;gap:clamp(18px,3vw,32px);max-width:760px;margin:0 auto;padding:clamp(20px,3vw,32px) clamp(22px,3.4vw,40px);
  border:1px solid rgba(217,138,75,.45);background:radial-gradient(ellipse 70% 120% at 12% 50%,rgba(217,138,75,.16),rgba(217,138,75,0) 70%),var(--panel)}
.vt__seal{position:relative;flex:none;display:grid;place-items:center;width:clamp(76px,8vw,96px);aspect-ratio:1;border-radius:50%;border:1px solid #D98A4B;
  box-shadow:0 0 18px 2px rgba(217,138,75,.35),inset 0 0 14px rgba(217,138,75,.18)}
.vt__seal span{font-family:var(--f-display);font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;color:#EDB877}
.vt__seal::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed rgba(217,138,75,.5);will-change:transform;animation:vtTurn 48s linear infinite}
.vt__board:not(.live) .vt__seal::before{animation-play-state:paused}
@keyframes vtTurn{to{transform:rotate(360deg)}}
.vt__btxt{display:grid;gap:6px}
.vt__kick{color:#D98A4B}
.vt__bname{font-family:var(--f-display);font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.05;letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary)}
.vt__sum{color:var(--text-secondary);line-height:1.6}
.vt__board .vt__sum{color:var(--text-primary);opacity:.9}
/* the drawn tree: a trunk from the Board, a bus across the four columns, a drop to each card */
.vt__tree{position:relative;height:clamp(40px,6vh,56px)}
.vt__trunk,.vt__bus{position:absolute;display:block;background:#D98A4B;opacity:.8}
.vt__trunk{left:50%;top:0;bottom:0;width:1px;transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--ease-inout)}
.vt__bus{left:12.5%;right:12.5%;bottom:0;height:1px;transform:scaleX(0);transform-origin:50% 50%;transition:transform .9s var(--ease-inout) .55s}
.vt__tree.in .vt__trunk{transform:scaleY(1)}.vt__tree.in .vt__bus{transform:scaleX(1)}
.vt__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.vt__item{position:relative;padding-top:28px}
.vt__item::before{content:"";position:absolute;left:50%;top:0;width:1px;height:28px;background:#D98A4B;opacity:.8;transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s var(--ease-inout) calc(1.2s + var(--k,0)*120ms)}
.vt__item.in::before{transform:scaleY(1)}
.vt__card{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr;background:var(--panel);border:1px solid var(--rule);
  transition:transform .45s var(--ease-out),border-color .45s var(--ease-out)}
.vt__card:hover{transform:translateY(-4px);border-color:rgba(217,138,75,.6)}
.vt__card:focus-within{border-color:var(--text-primary)}
.vt__pic{position:relative;aspect-ratio:16 / 9;overflow:hidden}
.vt__pic .pic,.vt__pic img{display:block;width:100%;height:100%}
.vt__pic img{object-fit:cover;transition:transform .9s var(--ease-out)}
.vt__card:hover .vt__pic img{transform:scale(1.04)}
.vt__num{position:absolute;left:14px;bottom:6px;z-index:3;font-family:var(--f-display);font-size:clamp(2.2rem,3vw,3rem);line-height:1;color:var(--text-primary);
  text-shadow:0 1px 2px rgba(38,32,26,.95),0 4px 18px rgba(38,32,26,.85)}
.vt__txt{display:grid;gap:10px;align-content:start;padding:18px 20px 22px}
.vt__name{margin:0}
.vt__go{text-decoration:none}
.vt__go::after{content:"";position:absolute;inset:0;z-index:5}
.vt__go:focus-visible{outline:none;box-shadow:none}
.vt__card:has(.vt__go:focus-visible){outline:2px solid var(--accent);outline-offset:5px;box-shadow:0 0 0 3px var(--ring-gap),0 0 0 5px var(--text-primary)}
.vt__more{display:inline-flex;align-items:center;gap:8px;margin-top:4px;color:#EDB877}
@media (max-width:1099px){
  .vt__bus,.vt__item::before{display:none}
  .vt__tree{height:36px}
  .vt__list{grid-template-columns:minmax(0,1fr);gap:18px;position:relative;padding-left:26px}
  .vt__list::before{content:"";position:absolute;left:0;top:-1px;bottom:40px;width:1px;background:#D98A4B;opacity:.8}
  .vt__tree{margin-left:0}.vt__trunk{left:0}
  .vt__board{margin:0}
  .vt__item{padding-top:0}
  .vt__item::after{content:"";position:absolute;left:-26px;top:40px;width:26px;height:1px;background:#D98A4B;opacity:.8}
  .vt__card{grid-template-columns:minmax(200px,34%) minmax(0,1fr);grid-template-rows:none}
  .vt__pic{aspect-ratio:auto;min-height:100%}
}
@media (max-width:640px){
  .vt__list{padding-left:18px}.vt__item::after{left:-18px;width:18px}
  .vt__card{grid-template-columns:minmax(0,1fr)}
  .vt__pic{aspect-ratio:16 / 9;min-height:0}
  .vt__board{flex-direction:column;align-items:flex-start;gap:16px}
  .vt__seal{width:64px}.vt__seal span{font-size:1.6rem}
}

/* ---- html.still: every rule drawn, nothing moves ---- */
html.still .vq::before,html.still .vq__lead,html.still .vf__fig::before,html.still .vt__trunk,html.still .vt__bus,html.still .vt__item::before{transform:none;transition:none}
html.still .vt__seal::before{animation:none}
html.still .vt__card,html.still .vt__pic img{transition:none}
html.still .vt__card:hover{transform:none}html.still .vt__card:hover .vt__pic img{transform:none}
/* END VOICES BLOCK */

/* =====================================================================
   CHROME BLOCK (chrome builder, perfection pass 2026-09-22). Appended; site-todo 80c, 79e, 79f and the home h1.
   1. Join the Advisory Board: its own item at the top of the header on every width from 561 px (a two line Sanguine button, "JOIN THE" over
      "Advisory Board"), and a card at the head of the phone sheet. Fit with the lockup, measured at 1024 to 2560 px: at least 40 px of air.
      1001 to 1240 px: the Motion and Sound controls are compact 44 px icon buttons (their words stay the accessible name and show as a
      small label on hover and focus); 1001 to 1079 px: the Home link steps back (the lockup is the home link).
   2. The phone and tablet hero keeps ONE h1 (index.html .shero__h1) that covers the stage exactly, so the captions inside it sit where they
      always did; text-wrap is reset so the first caption breaks as before.
   3. 4K wiring: the film's poster and ending stills on big or dense screens (the same test as the door's 4K picture); the phone stills wait
      for hero.js to set their src.
   ===================================================================== */
/* 1a. header item */
.hdr__ab{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:.4em 1.05em .42em;min-height:44px;line-height:1;text-align:left}
.hdr__abk{display:block;font-size:9.5px;line-height:1;letter-spacing:.22em;opacity:.82}
.hdr__abl{display:block;font-size:.86rem;line-height:1.05;letter-spacing:.03em;white-space:nowrap}
.hdr__ab[aria-current] .hdr__abl{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (min-width:1001px) and (max-width:1099px){.hdr__nav > .hdr__cta.hdr__ab{display:inline-flex}}
@media (min-width:1001px) and (max-width:1079px){.hdr__links > .hdr__li--home{display:none}}
@media (min-width:1301px) and (max-width:1439px){.hdr__nav{gap:14px}.hdr__links{gap:18px}}   /* the wide lockup (80 px) meets the full controls: tighter gaps keep 60 px of air */
/* 1b. compact Motion and Sound, 1001 to 1240 px (the Sound icon rules for 1001 to 1240 px are in the FIXER 3 BLOCK; the same icons here) */
.hdr__nav > .motion{position:relative}
@media (min-width:1001px) and (max-width:1240px){
  .hdr__nav > .motion{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:0;font-size:0;letter-spacing:0}
  .hdr__nav > .motion::before{content:"";display:block;flex:none;width:18px;height:18px;margin:0;border:0;border-radius:0;background:currentColor;vertical-align:0}
  .hdr__nav > .js-motion::before{
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='16' cy='12' r='4.3' fill='black'/%3E%3Cpath d='M2.5 8.2h6.5M1.5 12h7M2.5 15.8h6.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='16' cy='12' r='4.3' fill='black'/%3E%3Cpath d='M2.5 8.2h6.5M1.5 12h7M2.5 15.8h6.5'/%3E%3C/svg%3E") center/contain no-repeat}
  html.still .hdr__nav > .js-motion::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.3'/%3E%3Cpath d='M10 8.8v6.4M14 8.8v6.4'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.3'/%3E%3Cpath d='M10 8.8v6.4M14 8.8v6.4'/%3E%3C/svg%3E")}
  .hdr__nav > .hdr__sound::before{
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15.5 9.5l5 5M20.5 9.5l-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15.5 9.5l5 5M20.5 9.5l-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
  .hdr__nav > .hdr__sound[aria-pressed="true"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M17.8 6.5a7.6 7.6 0 0 1 0 11'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M17.8 6.5a7.6 7.6 0 0 1 0 11'/%3E%3C/svg%3E")}
  /* the word, shown under the icon on hover and keyboard focus */
  .hdr__nav > .motion::after{position:absolute;top:calc(100% + 8px);right:0;padding:5px 9px;font:400 10.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
    white-space:nowrap;color:var(--text-primary);background:rgba(38,32,26,.96);border:1px solid var(--rule-strong);border-radius:2px;
    opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
  .hdr__nav > .js-motion::after{content:"Motion: on"}
  html.still .hdr__nav > .js-motion::after{content:"Motion: off"}
  .hdr__nav > .hdr__sound::after{content:"Sound: off"}
  .hdr__nav > .hdr__sound[aria-pressed="true"]::after{content:"Sound: on"}
  .hdr__nav > .motion:hover::after,.hdr__nav > .motion:focus-visible::after{opacity:1;transform:none}
  .hdr__nav{gap:12px}
  .hdr__links{gap:18px}
}
@media (min-width:1001px) and (max-width:1240px) and (prefers-reduced-motion:reduce){
  html:not(.motion-on) .hdr__nav > .js-motion::after{content:"Motion: off"}
}
/* 1c. the phone sheet's Advisory Board card */
.sheet__ab{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;flex:none;margin:0 0 24px;
  padding:16px 18px 17px;min-height:72px;text-decoration:none;color:var(--text-primary);background:var(--accent);
  opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),background-color .45s var(--ease-out)}
.sheet.open .sheet__ab{opacity:1;transform:none;transition-delay:80ms,80ms,0s}
.sheet__ab:hover{background:var(--accent-hover)}
.sheet__ab::before{content:"";position:absolute;inset:-5px;pointer-events:none;--t:var(--text-primary);
  background:
    linear-gradient(var(--t),var(--t)) left top/9px 1px,linear-gradient(var(--t),var(--t)) left top/1px 9px,
    linear-gradient(var(--t),var(--t)) right top/9px 1px,linear-gradient(var(--t),var(--t)) right top/1px 9px,
    linear-gradient(var(--t),var(--t)) left bottom/9px 1px,linear-gradient(var(--t),var(--t)) left bottom/1px 9px,
    linear-gradient(var(--t),var(--t)) right bottom/9px 1px,linear-gradient(var(--t),var(--t)) right bottom/1px 9px;
  background-repeat:no-repeat}
.sheet__abn{grid-column:1;font-size:11px;opacity:.85}
.sheet__abl{grid-column:1;font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.1;letter-spacing:.06em;text-transform:uppercase}
.sheet__aba{grid-column:2;grid-row:1 / span 2;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .45s var(--ease-out)}
.sheet__ab:hover .sheet__aba{transform:translateX(4px)}
.sheet__ab[aria-current] .sheet__abl{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (orientation:landscape) and (max-height:500px){.sheet__ab{min-height:60px;padding:10px 16px;margin-bottom:16px}.sheet__abl{font-size:1.25rem}}

/* 2. the home phone and tablet hero: one h1 that covers the stage */
.shero__h1{position:absolute;inset:0;z-index:4;margin:0;pointer-events:none}
.shero__h1 > .scap,.shero__h1 > .sfinal__h{display:block}
.shero__h1 > .scap{text-wrap:wrap;overflow-wrap:normal}

/* 3. 4K stills where the film plays on a big or dense screen. hero.js sets the 1080p still inline, only inside its gated path; these rules
   swap in the 3840 px copy at that moment (the attribute test), so nothing loads earlier than before. */
@media (min-width:1800px),(min-width:1100px) and (min-resolution:1.75dppx){
  #poster[style*="hero-poster"]{background-image:image-set(url(/assets/hero-poster-4k.webp) type("image/webp"),url(/assets/hero-poster-4k.jpg) type("image/jpeg")) !important}
  #ending[style*="hero-ending"]{background-image:image-set(url(/assets/hero-ending-4k.webp) type("image/webp"),url(/assets/hero-ending-4k.jpg) type("image/jpeg")) !important}
}
.shero .shot:not([src]){display:none}
/* 4. /research/: Research and Publications as two large, matching, pressable cards (site-todo 80d). Panel ground, a Sanguine edge, a big
   display word, one line, and an arrow in a Sanguine disc that drops toward the section on hover. The whole card is the link (44 px and more). */
.rs-jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(26px,4vh,40px);max-width:640px}
.rs-jump__card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;gap:6px 14px;min-height:148px;
  padding:18px 18px 20px 22px;text-decoration:none;color:var(--text-primary);background:var(--panel);border:1px solid var(--rule-strong);border-radius:2px;
  box-shadow:0 1px 0 rgba(242,233,216,.08) inset,0 10px 26px -14px rgba(0,0,0,.7);
  transition:transform .45s var(--ease-out),border-color .45s var(--ease-out),background-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.rs-jump__card::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--accent);transform-origin:50% 0;transition:transform .45s var(--ease-out)}
.rs-jump__n{grid-column:1;color:var(--text-secondary)}
.rs-jump__t{grid-column:1;font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,2.6vw,2.5rem);line-height:1;letter-spacing:.06em;text-transform:uppercase}
.rs-jump__d{grid-column:1 / -1;align-self:end;max-width:30ch;font-size:.95rem;line-height:1.45;color:var(--text-secondary)}
.rs-jump__a{grid-column:2;grid-row:1 / span 2;align-self:start;width:44px;height:44px;padding:11px;border-radius:50%;background:var(--accent);
  fill:none;stroke:var(--text-primary);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease-out),background-color .45s var(--ease-out)}
.rs-jump__card:hover{transform:translateY(-3px);border-color:var(--text-primary);background:color-mix(in srgb,var(--panel) 88%,var(--text-primary));
  box-shadow:0 1px 0 rgba(242,233,216,.1) inset,0 18px 34px -16px rgba(0,0,0,.8)}
.rs-jump__card:hover .rs-jump__a{transform:translateY(4px);background:var(--accent-hover)}
.rs-jump__card:active{transform:translateY(1px);transition-duration:.12s}
.rs-jump__card:focus-visible{outline-offset:4px}
@media (max-width:560px){.rs-jump{grid-template-columns:minmax(0,1fr);gap:12px}.rs-jump__card{min-height:0;grid-template-rows:auto auto auto;padding:16px 16px 18px 20px}
  .rs-jump__t{font-size:1.9rem}}
/* 5. logos (site-todo 79e): the three affiliation tiles are one identical white card, each logo contained and centred in it, so the
   square RSS seal, the wide KFSHRC lockup and the tall Alfaisal crest read at one optical weight (the RSS file carries its own white margin,
   so its card has less padding). The logos are never recoloured or cropped. */
.affil--logos .affil__tile{justify-self:start;width:clamp(156px,13.4vw,188px);height:clamp(90px,7.6vw,108px);padding:10px 16px}
.affil--logos .affil__tile img{width:100%;height:100%;max-width:none;object-fit:contain}
.affil--logos .affil__tile:has(img[src*="/rss."]){padding:3px 16px}
/* phones and portrait tablets: the words and the two cards come first, the drawn plate follows, so Research and Publications sit near the top */
@media (max-width:860px){.phero__in:has(.rs-jump) > .hplate{order:2}}
@media (forced-colors:active){.rs-jump__card{border:1px solid ButtonText}.rs-jump__a{border:1px solid ButtonText}}
/* END CHROME BLOCK */

/* DRAWINGS BLOCK (drawings builder, 2026-09-22: site-todo 85, 88, 89) =================================================================
   The five ink studies (/assets/drawings/, cream ink on black paper). The modules turn the black paper into transparency in a canvas
   (fx/inkplate.js), and every plate is its own isolated group on the canvas colour, so mix-blend-mode: screen is exact inside it.
   Every rule without .fx-live or a mode class is the calm still version (no script, module failure). */

/* ---- HOME, FIG. 03: FIVE TEAMS, FIVE STUDIES (fx/teams.js). OWNER BATCH 7 (2026-09-23): the sticky plate that changed team with the
   scroll is gone. Every row is its own plate: number, the team's ink study in a fixed 1:1 box on a near-black well (so the cream ink
   reads cream, never tan), the name as the link, one summary. On 1024 px and up the study and the words sit side by side, the study
   alternating left and right down the list (the folio rhythm); on phones the study stands above its words. ---- */
.tms{position:relative}
.tms-fig{grid-column:1/-1;margin:0 0 6px}
.tms-fig__in{position:relative;width:min(100%,520px);aspect-ratio:1;overflow:hidden;isolation:isolate;border:1px solid var(--rule);background:#100c0a}
.tms-fig__still{position:absolute;inset:0;display:block;margin:0;transition:opacity .4s var(--ease-out)}
.tms-fig__still img{display:block;width:100%;height:100%;object-fit:contain}
.tms-fig__in.is-inked .tms-fig__still{opacity:0}
.tms-fig__cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.tms-fig__cv.is-ready{opacity:1}
.tms__nib{position:absolute;left:0;top:0;z-index:4;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,244,222,.95) 0 2px,rgba(255,190,120,.55) 4px,rgba(214,120,70,.18) 9px,rgba(214,120,70,0) 70%);
  transition:opacity .35s var(--ease-out);will-change:transform}
.tms__nib.is-on{opacity:1}
/* the slow warm light: a soft window crosses the finished study; inside it a warm copy of the ink stays registered (both transforms) */
.tms__sweep{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity 1.2s var(--ease-out)}
.tms__sweep.is-on{opacity:.62}
.tms__sweep > i{position:absolute;left:0;top:0;bottom:0;width:40%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%,#000 62%,transparent);mask-image:linear-gradient(90deg,transparent,#000 38%,#000 62%,transparent);
  transform:translate3d(-100%,0,0)}
/* the window and the warm copy are animated together by teams.js (two WAAPI animations with one start time, paused off screen) */
.tms__glint{position:absolute;left:0;top:0;width:250%;max-width:none;height:100%;display:block;transform:translate3d(40%,0,0)}
/* the name is the link (44 px tall), with the site's small arrow */
.tms .nrow__head h3 a{display:inline-flex;align-items:center;gap:.35em;min-height:44px;color:inherit;text-decoration:none}
.tms .nrow__head h3 a:hover,.tms .nrow__head h3 a:focus-visible{color:var(--accent-2,var(--text-primary))}
.nrow__arr{width:.5em;height:.5em;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.tms .nrow__head h3 a:hover .nrow__arr{transform:translate(2px,-2px)}
.tms .nrow__body p{max-width:46ch}
@media (min-width:1024px){
  .tms .nrow{grid-template-columns:clamp(56px,6vw,96px) minmax(0,44fr) minmax(0,56fr);grid-template-areas:"num fig head" "num fig body";
    gap:10px clamp(24px,3.5vw,56px);align-items:center;padding:clamp(28px,4vh,52px) 0}
  .tms .nrow__num{grid-area:num;align-self:start}
  .tms .tms-fig{grid-area:fig;margin:0;justify-self:stretch}
  .tms .tms-fig__in{width:100%;max-width:none}
  .tms .nrow__head{grid-area:head;align-self:end}
  .tms .nrow__body{grid-area:body;align-self:start}
  .tms .nrow:nth-child(even){grid-template-columns:clamp(56px,6vw,96px) minmax(0,56fr) minmax(0,44fr);grid-template-areas:"num head fig" "num body fig"}
}
@media (min-width:768px) and (max-width:1023.98px){.tms .tms-fig__in{width:min(100%,520px)}}
html.still .tms-fig__still{transition:none}
html.still .tms__nib,html.still .tms__sweep{display:none}
@media (forced-colors:active){.tms__sweep,.tms__nib{display:none}}

/* ---- RESEARCH, FIG. 03: THE GRAFT ATLAS, REDRAWN (fx/anatomy.js, site-todo 88) ----
   A transparent anatomical plate: outline and ligaments in ink, the vessels inside as finer lines, the Couinaud segments as dashed
   construction with their numerals, and one leader per label running to its part. The washes are sanguine chalk: a soft fill, fine
   hatching and the part's edge. */
.gx-liver .v{stroke:rgba(242,233,216,.3)}
.gx-liver .gx-hA{stroke:rgba(242,233,216,.2)}
.gx-liver .gx-hB{stroke:rgba(242,233,216,.17)}
.gx-liver .gx-hC{stroke:rgba(242,233,216,.15)}
.gx-liver .gx-cc{stroke:rgba(242,233,216,.1)}
.gx-liver .gx-thin{stroke:rgba(242,233,216,.4)}
.gx-liver .gx-seg{stroke:rgba(242,233,216,.26)}
.gx-liver .gx-ol{stroke:rgba(242,233,216,.78)}
.gx-liver .gx-sn{font-size:9px;letter-spacing:.08em;fill:rgba(242,233,216,.42)}
.gx-liver .gx-vn{font-size:8px;fill:rgba(242,233,216,.38)}
.gx-liver .gx-ldr{stroke:rgba(242,233,216,.22);transition:stroke .35s var(--ease-out)}
.gx-liver .gx-ldr.is-hot{stroke:rgba(224,138,108,.95)}
.gx-liver .gx-dot{fill:rgba(38,32,26,.9);transition:fill .35s var(--ease-out)}
.gx-liver .gx-dot.is-hot{fill:#E08A6C}
.gx-w path.gx-wf{fill:#A8432E;opacity:.26}
.gx-w path.gx-wp{opacity:.62}
.gx-w .gx-wh{stroke:#E08A6C;stroke-width:.9;fill:none}
.gx-w path.gx-we{fill:none;stroke:#E08A6C;stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.8}
.gx-w .gx-cut{fill:none;stroke:#E08A6C;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:1 7;opacity:.95}
.gx-w{transition:opacity .45s var(--ease-out)}
.gx-th__w .gx-cut{stroke-width:14;stroke-dasharray:none}
.gx-key.is-hot .gx-key__t{color:var(--text-primary);border-color:#A8432E}
.gx-key.is-hot .gx-key__ring{transform:scale(1.18);background:rgba(168,67,46,.55)}
.gx-key--right-lobe{left:calc(5.5% - 22px);right:auto;top:calc(83.68% - 22px);flex-direction:row}
.gx-key--donor{left:calc(5.5% - 22px);right:auto;top:calc(93.68% - 22px);flex-direction:row}
.gx-key--left-lobe{right:calc(5.5% - 22px);left:auto;top:calc(10.53% - 22px)}
.gx-key--left-lateral{right:calc(5.5% - 22px);left:auto;top:calc(62.11% - 22px)}
.gx-key--recipient{right:calc(5.5% - 22px);left:auto;top:calc(89.47% - 22px)}
/* a narrow plate (phones, tablets, small laptops): the drawing takes the whole plate and the labels sit under it as a row of chips */
.gx__plate{container:gxp/inline-size}
@container gxp (max-width:420px){
  .gx__frame{aspect-ratio:auto;height:auto;padding:0 0 12px}
  .gx__frame > .lstudy.gx-liver:not(.ink-bleed){position:relative;inset:auto;width:calc(100% - 24px);height:auto;aspect-ratio:400/380;margin:12px}
  .gx__frame > .lstudy.gx-liver.ink-bleed{inset:12px 12px auto;height:auto;aspect-ratio:400/380}
  .gx__wv{inset:12px 12px auto;aspect-ratio:400/380;height:auto}
  .gx__kv{position:relative;inset:auto;container-type:normal;pointer-events:auto;padding:0 12px}
  .gx__kv .fx-vb__in{position:static;transform:none;width:auto;height:auto}
  .gx__keys{position:static;display:flex;flex-wrap:wrap;gap:0 6px}
  .gx-key,.gx-key--right-lobe,.gx-key--donor,.gx-key--left-lobe,.gx-key--left-lateral,.gx-key--recipient{position:relative;left:auto;right:auto;top:auto;flex-direction:row}
  .gx-key__ring{margin:15px 8px 15px 4px}
  .gx-liver .gx-ldr{display:none}
  .gx-liver .gx-dot{r:3.4px}
}
html.still .gx-liver .gx-ldr,html.still .gx-liver .gx-dot{transition:none}
@media (forced-colors:active){.gx-liver .gx-ldr.is-hot{stroke:CanvasText}}

/* ---- /departments/ #together: ONE CONSOLE, FOUR ARMS (fx/helm.js, site-todo 89) ----
   The Board study in the ink of the five drawings. Still by default: the drawing (its black paper disappears through screen blending
   inside the plate's own isolated group) and the list of the five teams. .helm--on: the module's canvases take over. */
.helm{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center;margin:clamp(40px,7vh,88px) 0 0}
.helm__plate{position:relative;aspect-ratio:1;overflow:hidden;isolation:isolate;border:1px solid var(--rule);
  background:radial-gradient(ellipse at 50% 46%,rgba(168,67,46,.10),rgba(59,43,36,.28) 58%,rgba(38,32,26,0) 82%),var(--canvas)}
.helm__cam{position:absolute;inset:0;transform-origin:50% 50%;transition:transform 1.3s var(--ease-weight);will-change:transform}
.helm__still{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen;opacity:.94}
.helm--on .helm__still{display:none}
.helm__cv,.helm__lt{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen}
.helm__cv{opacity:0;transition:opacity .9s var(--ease-inout)}
.helm__cv.is-on{opacity:1}
.helm--focus .helm__cv.is-on{opacity:.5}
.helm__lt{opacity:0;filter:drop-shadow(0 0 5px rgba(255,150,80,.55));transition:opacity .8s var(--ease-inout)}
.helm__lt.is-lit{opacity:1}
.helm__glow{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;margin:-17% 0 0 -17%;border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,178,110,.22),rgba(214,110,62,.08) 45%,rgba(214,110,62,0) 70%);transition:opacity .9s var(--ease-inout)}
.helm__glow.is-on{opacity:1}
.helm__side{display:grid;gap:18px;align-content:start}
.helm__cap{display:grid;gap:6px;margin:0;color:var(--text-secondary);min-height:3.2em}
.helm__cap-b{text-transform:none;letter-spacing:.04em;font-family:var(--f-body);font-size:.98rem;color:var(--text-secondary)}
.helm__key{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.helm__i{position:relative;border-bottom:1px solid var(--rule)}
.helm__i::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out);pointer-events:none}
.helm__i.is-lit::after{transform:scaleX(1)}
.helm__a{display:grid;grid-template-columns:3.2em minmax(0,1fr);align-items:center;gap:12px;min-height:56px;padding:8px 0;color:var(--text-primary);text-decoration:none}
.helm__n{font-family:var(--f-display);font-size:1.7rem;line-height:1;color:var(--text-secondary);transition:color .5s var(--ease-out)}
.helm__t{display:grid;gap:2px}
.helm__name{font-family:var(--f-head);font-weight:600;font-size:1.02rem;letter-spacing:.01em}
.helm__p{font-size:10.5px;color:var(--text-secondary)}
.helm__i.is-lit .helm__n{color:#E08A6C}
.helm__a:hover .helm__name,.helm__a:focus-visible .helm__name{text-decoration:underline;text-underline-offset:4px}
.helm__again{justify-self:start;min-height:44px;padding:0 16px}
.helm__again[hidden]{display:inline-block;visibility:hidden}
.helm:not(.fx-live) .helm__again{display:none}
@media (max-width:860px){
  .helm{grid-template-columns:minmax(0,1fr);gap:18px}
}
html.still .helm__cam,html.still .helm__cv,html.still .helm__lt,html.still .helm__glow,html.still .helm__i::after{transition:none}
@media (forced-colors:active){.helm__glow,.helm__lt{display:none}}

/* =====================================================================
   WORDS5 BLOCK (B5 words builder, 2026-09-22). Appended only: nothing above is changed.
   (f, h) the monogram portrait: a named person with no photo yet (RSIG.ui.personTile, .person__ini). The initials sit in the display face on
   the same dark mount, lit from behind like the graded photos, inside the same moving ember ring and spark as every portrait (the ring
   rules above apply to every .person__photo that is not .person__mono). The whisper square stays off, as for photos.
   (g) the ARM mark on the Training and Development page (.w5arm), and the group titles under Departmental Leadership (.w5-group).
   ===================================================================== */
.person__ini{container-type:inline-size;background:transparent}
.person__ini-in{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 46%,rgba(237,184,119,.22) 0,rgba(217,138,75,.12) 34%,rgba(168,67,46,.07) 58%,transparent 74%),#1E1813;
  box-shadow:inset 0 0 0 1px rgba(242,233,216,.06),inset 0 -18px 36px rgba(0,0,0,.35)}
.person__ini-t{font-family:var(--f-display);font-weight:300;font-size:2.6rem;font-size:30cqw;line-height:1;letter-spacing:.08em;margin-right:-.08em;
  color:var(--text-primary);text-shadow:0 0 18px rgba(217,138,75,.35)}
.person__ini .person__spark{display:block}
/* Departmental Leadership: a titled sub-group (OTCoE Research Coordinators) under the heads, on the About page and the department page */
.w5-group{margin:clamp(40px,6vh,64px) 0 10px;color:var(--text-secondary);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.w5-group + .ab-note{margin-bottom:clamp(18px,3vh,28px)}
.sigl .w5-group{margin-top:clamp(36px,5vh,52px);margin-bottom:clamp(16px,2.4vh,24px)}
.w5-sub{margin-top:0}
.sigl__line.w5-long{font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.3;max-width:34ch}
[data-group="research-coordinators"] .people{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){[data-group="research-coordinators"] .people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  [data-group="research-coordinators"] .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 22px;padding-left:0}
  [data-group="research-coordinators"] .person__photo{width:min(118px,100%)}
  [data-group="research-coordinators"] .person{justify-items:center;text-align:center}
}
/* the ARM mark: a robotic arm drawn in the site's ink line, its three joints lettered A, R and M, beside the word and what it stands for */
.w5arm-box{margin:clamp(8px,2vh,20px) 0 clamp(32px,5vh,56px)}
.w5arm{display:grid;grid-template-columns:minmax(150px,240px) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;
  padding:clamp(20px,3vw,36px);border:1px solid var(--rule);border-left:2px solid var(--accent);background:linear-gradient(100deg,rgba(59,43,36,.55),rgba(59,43,36,0) 70%)}
.w5arm:not(:has(.w5arm__mark)){grid-template-columns:minmax(0,1fr)}
.w5arm__mark{margin:0}
.w5arm__mark svg{display:block;width:100%;height:auto;overflow:visible}
.w5arm__l{fill:none;stroke:var(--text-primary);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.w5arm__c{fill:none;stroke:var(--line-whisper);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.w5arm__j{fill:var(--accent)}
.w5arm__tip{fill:#EDB877;opacity:.85}
.w5arm__t{font-family:var(--f-mono);font-size:13px;fill:var(--accent);letter-spacing:.06em}
.w5arm__fore{transform-box:view-box;transform-origin:140px 56px;transition:transform .9s var(--ease-out)}
.w5arm:hover .w5arm__fore{transform:rotate(-7deg)}
.w5arm__kick{color:var(--text-secondary);letter-spacing:.14em;text-transform:uppercase;font-size:.74rem;margin:0 0 6px}
.w5arm__word{font-family:var(--f-display);font-weight:400;font-size:clamp(3.4rem,8vw,6rem);line-height:.95;letter-spacing:.12em;margin:0;color:var(--text-primary)}
.w5arm__long{font-family:var(--f-head);font-size:clamp(1rem,1.5vw,1.2rem);margin:8px 0 0;color:var(--text-primary)}
.w5arm__long b{font-weight:600;color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.w5arm__lede{margin:14px 0 0;color:var(--text-secondary);max-width:62ch}
@media (max-width:640px){
  .w5arm{grid-template-columns:minmax(0,1fr);gap:14px}
  .w5arm__mark{width:min(200px,60%)}
}
html.still .w5arm__fore{transition:none;transform:none}
@media (forced-colors:active){.w5arm__l,.w5arm__c{stroke:CanvasText}.w5arm__j,.w5arm__t,.w5arm__tip{fill:CanvasText}}
/* portraits develop inside their ring: the cover is round and sits under the ring (z-index 1 < ring 2), and the photo does not grow past
   the circle while it develops (site.js no longer sets overflow:hidden on a portrait frame, which had cut the ring away) */
.person__photo > .dev__cov{border-radius:50%;z-index:1}
.person__photo.dev img{scale:1}
/* END WORDS5 BLOCK */

/* =====================================================================
   HEADER RIGHT BLOCK (owner batch 5, item 92d, 2026-09-22: "the header should be aligned to the right side of screen where it says home
   about etc, that should be on the right side, position everything properly").
   The header spans the full screen at every width: the lockup at the left gutter, the nav flush to the right gutter, one equal gutter
   (--hdr-pad, with the safe-area insets) on both sides; the old centred-column padding is gone (see "the header spans the full screen").
   One even gap between every nav item (links, the Advisory Board button, Motion, Sound). On the home film the header's Sound steps aside
   while the HUD shows its own; the nav then slides right by that slot (--hdr-snd, set in site.js), so it always ends at the right gutter.
   ===================================================================== */
@media (min-width:1001px){
  .hdr .hdr__nav,.hdr .hdr__links{gap:var(--hdr-gap)}
  :root{--hdr-gap:clamp(18px,1.6vw,30px)}
}
@media (min-width:1001px) and (max-width:1439px){:root{--hdr-gap:clamp(14px,calc(14px + (100vw - 1301px) * .12),22px)}}   /* the wide lockup (80 px) meets the full controls from 1301 px: at least 60 px of air */
@media (min-width:1001px) and (max-width:1300px){:root{--hdr-gap:16px}}
html.hud-sound .hdr > .hdr__nav{transform:translate3d(var(--hdr-snd,0px),0,0)}
html.hud-sound:not(.logo-fly) .hdr--cond > .hdr__nav{transform:translate3d(var(--hdr-snd,0px),calc((var(--hdr-hc) - var(--hdr-h)) / 2),0)}
/* END HEADER RIGHT BLOCK */

/* =====================================================================
   PICTURES BLOCK (b5-pictures, 2026-09-22, site-todo 92a and 92b). Appended only.
   The five Leonardo ink studies (/assets/drawings/, cream ink on pure black paper) wherever the teams are presented:
   the Board page's "Overview of the teams" (.vt), the department rows on /departments/ (.sigd__ink) and the "Other departments"
   cards on every department page (.sigo__ink). Markup from RSIG.ui.ink (site.js). mix-blend-mode: screen turns the black paper into the
   surface behind it, so only the ink shows. Arrival: the ink settles in once (opacity, transform, filter); html.still shows it finished.
   ===================================================================== */
.ink{display:block;position:relative;width:100%;height:100%}
.ink img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;opacity:.95}
.reveal .ink img{opacity:0;transform:scale(1.045);filter:blur(6px) brightness(.55);
  transition:opacity 1.3s var(--ease-out) .15s,transform 1.8s var(--ease-out) .15s,filter 1.5s var(--ease-out) .15s}
.reveal.in .ink img{opacity:.95;transform:none;filter:none}

/* Board page: the Board's own study at the head, and each department's study on its card */
.vt__bink{flex:none;width:clamp(128px,15vw,200px);aspect-ratio:1;margin-left:auto;border:1px solid rgba(217,138,75,.3);
  background:radial-gradient(ellipse 62% 58% at 50% 48%,rgba(217,138,75,.13),rgba(217,138,75,0) 72%),#17120F}
.vt__bink .ink{padding:6%;box-sizing:border-box}
.vt__pic--ink{aspect-ratio:4 / 3;background:radial-gradient(ellipse 62% 58% at 50% 48%,rgba(217,138,75,.13),rgba(217,138,75,0) 72%),#17120F}
.vt__pic--ink .ink{padding:6% 8% 4%;box-sizing:border-box}
.vt__card:hover .vt__pic--ink img{transform:scale(1.035)}
.vt__pic--ink .vt__num{z-index:2}
@media (max-width:1099px){.vt__pic--ink{aspect-ratio:auto;min-height:100%}}
@media (max-width:640px){
  .vt__pic--ink{aspect-ratio:4 / 3;min-height:0}
  .vt__bink{margin-left:0;width:min(56vw,200px)}
}

/* /departments/: each department row carries its study beside its name */
.sigd .nrow__head{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(16px,2vw,28px);width:100%}
.sigd .nrow__head > *{grid-column:1}
.sigd .nrow__head > dl{grid-column:1 / -1}
.sigd .nrow__head > .sigd__ink{grid-column:2;grid-row:1 / span 2;align-self:start;width:clamp(112px,11vw,156px);aspect-ratio:1;
  border:1px solid var(--rule);background:radial-gradient(ellipse 62% 58% at 50% 48%,rgba(217,138,75,.12),rgba(217,138,75,0) 72%),#17120F}
.sigd .sigd__ink .ink{padding:6%;box-sizing:border-box}
.sigd:hover .sigd__ink,.sigd.is-front .sigd__ink{border-color:rgba(217,138,75,.55)}
@media (max-width:560px){
  .sigd .nrow__head > .sigd__ink{width:96px}
  .sigd .nrow__meta{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .sigd .nrow__meta dd{margin-bottom:10px}
}

/* department pages: "Other departments" cards open with the team's study, edge to edge */
.card.sigo{overflow:hidden}
.sigo__ink{display:block;aspect-ratio:16 / 10;margin:calc(-1 * clamp(20px,2.2vw,32px)) calc(-1 * clamp(20px,2.2vw,32px)) 4px;
  border-bottom:1px solid var(--rule);background:radial-gradient(ellipse 60% 62% at 50% 50%,rgba(217,138,75,.12),rgba(217,138,75,0) 72%),#17120F}
.sigo__ink{position:relative;flex:none;overflow:hidden}
.sigo__ink .ink{position:absolute;inset:0;padding:5% 0 3%;box-sizing:border-box}
.card.sigo:hover .sigo__ink img{transform:scale(1.035)}

html.still .reveal .ink img{opacity:.95;transform:none;filter:none;transition:none}
html.still .vt__card:hover .vt__pic--ink img,html.still .card.sigo:hover .sigo__ink img{transform:none}
/* END PICTURES BLOCK */

/* ARMILLARY 2 BLOCK (About, FIG. 02 #identity, /assets/fx/armillary.js). Owner, 2026-09-22: "the circular modern futuristic logo can be
   made better and be optimised". No frame: the instrument stands on the section. The official logo sits above one canvas (and a glint
   layer that only a compositor rotation moves once the instrument rests). The inline SVG is the still construction: no script, Motion off,
   and the moment before the first canvas frame. Nothing here animates per frame except the glint layer's rotation and the lamp's blink. */
.ab-logos--arx{grid-template-columns:minmax(0,1fr);justify-items:center}
.arx{width:min(100%,620px)}
.arx__stage{position:relative;width:100%;aspect-ratio:1;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.arx__stage::before{content:"";position:absolute;inset:5%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(38,32,26,.5),rgba(38,32,26,.3) 64%,rgba(38,32,26,0))}   /* the optic well: static */
.arx__still,.arx__cv,.arx__gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.arx__cv,.arx__gl{visibility:hidden;pointer-events:none}
.arx.is-drawn .arx__cv{visibility:visible}
.arx.is-drawn .arx__still{visibility:hidden}
.arx__gl{opacity:0}
.arx.is-drawn.is-parked .arx__gl{visibility:visible;opacity:1}
.arx__ping{position:absolute;inset:28.8%;border-radius:50%;border:1px solid rgba(242,233,216,.7);opacity:0;pointer-events:none}
.arx__logo{position:absolute;inset:30%;z-index:1}
.arx__logo .pic,.arx .ab-logo__official{display:block;width:100%;height:auto;border-radius:50%}
/* the caption row: OFFICIAL LOGO, and opposite it the lamp and the status (rewritten only when its step changes) */
.arx figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;color:var(--text-secondary)}
.arx__stat{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.arx__lamp{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(168,67,46,.2)}
.arx__brg{display:inline-block;width:6em;text-align:right;visibility:hidden;contain:layout paint}
@keyframes arxBlink{0%,40%{opacity:1}55%,90%{opacity:.2}100%{opacity:1}}
html:not(.still) .arx.fx-live.is-cal:not(.is-aligned) .arx__lamp{animation:arxBlink 1.2s linear infinite;background:#C9674F}
@media (hover:hover) and (pointer:fine){html:not(.still) .arx.fx-live.is-aligned .arx__brg{visibility:visible}}
/* the still construction */
.arx__still circle,.arx__still path{fill:none;vector-effect:non-scaling-stroke}
.arx__still .eo{stroke-width:1}
.arx__still .ei{stroke-width:.75}
.arx__still .band{fill-rule:evenodd;stroke:none}
.arx__still .r0.band{fill:#A8432E}.arx__still .r1.band{fill:#3B2B24}.arx__still .r2.band{fill:#26201A}
.arx__still .t0{stroke:rgba(242,233,216,.3);stroke-width:.7}
.arx__still .t1{stroke:rgba(242,233,216,.36);stroke-width:.7}
.arx__still .t2{stroke:rgba(242,233,216,.58);stroke-width:.8}
.arx__still .t3{stroke:rgba(242,233,216,.8);stroke-width:1}
.arx__still .t-z{stroke:rgba(242,233,216,.98);stroke-width:2}
.arx__still .c-ax{stroke:rgba(242,233,216,.3);stroke-width:.75}
.arx__still .c-ga{stroke:rgba(242,233,216,.42);stroke-width:.8}
.arx__still .c-ge{stroke:rgba(242,233,216,.55);stroke-width:1}
.arx__still .c-rg{stroke:rgba(242,233,216,.62);stroke-width:1}
.arx__still .c-cc{stroke:rgba(242,233,216,.4);stroke-width:.75}
.arx__still .fm{stroke:rgba(242,233,216,.6);stroke-width:1}
.arx__still .nd{fill:#A8432E;stroke:rgba(236,160,134,.95);stroke-width:.8}
.arx__still .nd-l{stroke:rgba(200,86,60,.9);stroke-width:1}
.arx__still path.idx{fill:rgba(242,233,216,.95);stroke:none}
.arx__still .gl{stroke-width:1.3;stroke-opacity:.2;stroke-linecap:round}
.arx__still .lab text{font-family:var(--f-mono);font-weight:400;fill:#B9A891;dominant-baseline:central;
  paint-order:stroke;stroke:#2A211C;stroke-width:4px;stroke-linejoin:round}
.arx__still .lab .chip{stroke:rgba(242,233,216,.62);stroke-width:1;vector-effect:non-scaling-stroke}
.arx__still .c-p,.arx__still .lab-p{display:none}
/* the swatches wait, then light in turn once the instrument has locked */
.arx-wait .ab-sw__chip{opacity:.5;transition:opacity .7s var(--ease-out)}
.arx-wait.arx-lit .ab-sw__chip{opacity:1}
.arx-lit .ab-sw:nth-child(2) .ab-sw__chip{transition-delay:.28s}
.arx-lit .ab-sw:nth-child(3) .ab-sw__chip{transition-delay:.56s}
.arx-lit .ab-sw:nth-child(4) .ab-sw__chip{transition-delay:.84s}
/* phones: the instrument takes the full screen width; the status reads in a console row above it, the caption below */
@media (max-width:767px){
  .arx{width:calc(100% + 2 * var(--gutter));max-width:520px;margin-inline:calc(-1 * var(--gutter));grid-template-rows:auto auto auto;gap:8px}
  .arx figcaption{display:contents}
  .arx__stat{order:-1;justify-self:start;padding-inline:var(--gutter)}
  .arx__cap{padding-inline:var(--gutter)}
  .arx__brg{display:none}
  .arx__stage::before{inset:3%}
  .arx__still .c-d,.arx__still .lab-d{display:none}
  .arx__still .c-p,.arx__still .lab-p{display:inline}
}
html.still .arx__cv,html.still .arx__gl{visibility:hidden !important}
html.still .arx__still{visibility:visible !important}
html.still .ab-sw__chip{opacity:1 !important}
/* END ARMILLARY 2 BLOCK */

/* =====================================================================
   PHONE SOUND BLOCK (parity, owner 2026-09-22: "Is it possible to maintain same motion and sound on phone?"; site-todo "phone has to be
   perfect"). The phone gets the same Sound control as the desktop.
   1. Below 1000 px the header keeps its Sound control as the same 44 px speaker button the 1001 to 1240 px header uses (a cross when off,
      waves when on; the words "Sound: off" and "Sound: on" stay the accessible name at font-size 0), left of Menu with a 10 px gap:
      44 + 10 + 69 = 123 px of nav, so the lockup keeps its gap at 360 px. This overrides the older "hide below 1240 px" rule by source
      order (same specificity). On the home film html.hud-sound fades the icon where it is (the nav does not slide on phones, see the end of this block).
      Motion stays in the sheet and the footer: the owner asked for Sound.
   2. The phone sheet: Motion and Sound sit in a row under the Advisory Board card, on the first screen of the sheet (they used to sit in
      .sheet__foot after the whole list, below the fold). Same 44 px buttons and labels, the same entrance as the card.
   ===================================================================== */
@media (max-width:1000px){
  .hdr__nav{gap:10px}
  .hdr__nav > .hdr__sound{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;min-height:44px;padding:0;font-size:0;letter-spacing:0;
    -webkit-tap-highlight-color:transparent}
  .hdr__nav > .hdr__sound::before{content:"";display:block;flex:none;width:18px;height:18px;margin:0;border:0;border-radius:0;background:currentColor;vertical-align:0;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15.5 9.5l5 5M20.5 9.5l-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15.5 9.5l5 5M20.5 9.5l-5 5'/%3E%3C/svg%3E") center/contain no-repeat}
  .hdr__nav > .hdr__sound[aria-pressed="true"]::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M17.8 6.5a7.6 7.6 0 0 1 0 11'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.5 9.5v5h3.5l4.5 3.8V5.7L7 9.5z' fill='black'/%3E%3Cpath d='M15 9a4 4 0 0 1 0 6M17.8 6.5a7.6 7.6 0 0 1 0 11'/%3E%3C/svg%3E")}
  /* the word, shown under the icon on keyboard focus (a phone has no hover; the tap itself answers with the icon change) */
  .hdr__nav > .hdr__sound::after{content:"Sound: off";position:absolute;top:calc(100% + 8px);right:0;padding:5px 9px;font:400 10.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
    white-space:nowrap;color:var(--text-primary);background:rgba(38,32,26,.96);border:1px solid var(--rule-strong);border-radius:2px;
    opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
  .hdr__nav > .hdr__sound[aria-pressed="true"]::after{content:"Sound: on"}
  .hdr__nav > .hdr__sound:focus-visible::after{opacity:1;transform:none}
  .hdr__nav > .hdr__sound[hidden]{display:none}   /* no WebAudio: the engine hides every Sound control */
  /* the sheet's control row */
  .sheet__ctl{display:flex;flex:none;gap:12px;margin:0 0 24px;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
  .sheet.open .sheet__ctl{opacity:1;transform:none;transition-delay:120ms}
  .sheet__ctl .motion{flex:1 1 0;min-height:44px;justify-content:center;display:inline-flex;align-items:center}
  .sheet__ctl .js-sound[hidden]{display:none}
  .sheet__foot{margin-top:28px}
}
@media (max-width:1000px) and (orientation:landscape) and (max-height:500px){.sheet__ctl{margin-bottom:16px}}
/* the narrow phones (389 px and under, measured: the lockup is 216 px at 375 px and 210 px at 360 px): the header's fixed 24 px gap becomes
   a 12 px minimum up to 400 px (the nav is flush right, so the visible gap is what is left), the nav gap goes to 8 px and the Menu button gives up some
   of its padding (14 px to 10 px, 8 px under 375 px), so the Sound control keeps its full 44 px and the lockup keeps its air: 23 px at 390,
   18 px at 375 and 13 px at 360 px with Menu (one px less while it reads Close) */
@media (max-width:400px){.hdr{gap:12px}}
@media (max-width:389px){.hdr__nav{gap:8px}.hdr__menu{padding:0 10px}}
@media (max-width:374px){.hdr__menu{padding:0 8px}}
/* the film HUD on a phone (verifier, 2026-09-24): html.hud-sound does apply there (the HUD Sound chip is on the phone stage), and the
   header icon steps aside as on desktop. The desktop nav then slides right by the icon slot because the icon is its LAST item; on the
   phone the icon sits left of Menu, so that slide would push Menu past the right edge (measured at 390 px: Menu at 361 to 430). The phone
   nav stays put: Menu keeps its place at the gutter and the icon simply fades where it is. */
@media (max-width:1000px){
  html.hud-sound .hdr > .hdr__nav{transform:none}
  html.hud-sound:not(.logo-fly) .hdr--cond > .hdr__nav{transform:translate3d(0,calc((var(--hdr-hc) - var(--hdr-h)) / 2),0)}
}
/* END PHONE SOUND BLOCK */

/* =====================================================================
   PHONE HOME BLOCK (parity, home builder, 2026-09-23; owner 2026-09-22: "Is it possible to maintain same motion and sound on phone?").
   The phone stage (#shero, the frame sequence on a canvas) now carries the same story as the film stage: the same door, the same ten
   screens of scroll, the seven caption bands with their entrances, the HUD (ring, chapter rail, SEQ and DEPTH, the cues and the Sound
   chip) and a lean of the picture from the hand. Everything here is scoped to .shero--seq (hero.js adds it while the sequence plays), so
   the still hero (Motion off, reduced motion, data saver, no script) is untouched. Transform and opacity only.
   ===================================================================== */
/* 1. the scroll story is as long as the desktop hero (.hero is 1100vh): ten screens, the same pacing per pixel */
.shero--seq .shero__pin{height:1100vh;height:1100svh}
/* 2. the picture wrapper: the stills, the canvas, the construction and the logo. At rest it sits at scale 1.04 like the desktop .film,
      and --px and --py (hero.js, from the finger or from the scroll) lean it the same way */
.shero__film{position:absolute;inset:0;z-index:0;--px:0;--py:0}
.shero--seq .shero__film{transform:translate3d(calc(var(--px)*-.6%),calc(var(--py)*-.6%),0) scale(1.04);will-change:transform}
/* 3. the seven caption bands, cloned from the film stage (same classes, same entrance rules). On the phone every band sits low over
      the stage, gutter to gutter, sized like the old phone caption; the band box is its text block, so each band is one small layer */
.sbands{position:absolute;inset:0;z-index:5;pointer-events:none;display:none}
.shero--seq .sbands{display:block}
.shero--seq .sbands .band{top:auto;height:auto;display:block;will-change:opacity}
.shero--seq .sbands .band::before{display:none}   /* the stage's own bottom scrim carries the darkening; .band__in::before stays */
.shero--seq .sbands .band__in{margin:0;width:100%;min-width:0;padding:0 var(--gutter) max(56px,9svh)}
.shero--seq .sbands .band--low .band__in,.shero--seq .sbands .band--settle .band__in{padding-bottom:max(56px,9svh)}
.shero--seq .sbands .band__head{font-size:clamp(2.6rem,6vw,6rem);line-height:1.08}
.shero--seq .sbands .band--low .band__head{font-size:clamp(2.2rem,5vw,4.2rem)}   /* bands 6 and 7 a step smaller, the desktop's own ratio, so band 7 clears the logo on a 360 px phone */
.shero--seq .sbands .band__eye{margin-bottom:1.2em}
.shero--seq .sbands .band__sub{max-width:none}
.shero--seq .sbands .band--low .band__sub{max-width:34ch}
.shero--seq .sbands .band__row{flex-wrap:wrap;gap:16px 26px}
/* the accessible captions stay in the h1 (opacity 0, hero.js no longer drives them); the block under the pin gives way to band 7's row */
.shero--seq .sfinal__rest{display:none}
/* 4. the HUD on the phone stage: SEQ and DEPTH under the header, the chapter rail as four dots down the right edge with the label of the
      current chapter, the cues and the Sound chip along the bottom (the skip and Sound chips a little tighter, the scroll cue bare, so the
      row fits a 360 px screen with the bands' text clear above it). Same elements, same writes, same transforms. */
.shero--seq .readout{left:var(--gutter);right:var(--gutter);top:calc(var(--hdr-h) + 8px);bottom:auto;justify-content:space-between}
.shero--seq .readout .chip{min-width:0;font-size:10px;letter-spacing:.12em;min-height:28px;padding:0 10px}
.shero--seq .rail{left:auto;right:4px;top:44%}
.shero--seq .rail__b{flex-direction:row-reverse;justify-content:flex-start;gap:10px;padding-right:14px;-webkit-tap-highlight-color:transparent}
.shero--seq .rail__tick{width:6px;height:6px;border-radius:50%;transform:scale(.7);transform-origin:center;opacity:.7}
.shero--seq .rail__b[aria-current="true"] .rail__tick,.shero--seq .rail__b:hover .rail__tick{transform:scale(1.25);opacity:1}
.shero--seq .rail__l{font-size:10px;letter-spacing:.12em;transform:translateX(6px)}
.shero--seq .rail__b[aria-current="true"] .rail__l,.shero--seq .rail__b:hover .rail__l,.shero--seq .rail__b:focus-visible .rail__l{transform:none}
.shero--seq .cue{left:16px;right:16px;bottom:max(20px,env(safe-area-inset-bottom,0px));gap:6px}
.shero--seq .cue > *{flex:none;white-space:nowrap}
.shero--seq .cue__skip,.shero--seq .cue__sound{width:auto;padding:0 7px;font-size:10px;letter-spacing:.08em}
.shero--seq .cue__skip.is-off + .cue__sound{transform:translateX(calc(-100% - 6px))}
.shero--seq .cue__scroll{margin-left:auto;padding:0 2px;font-size:10px;letter-spacing:.08em;background:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* 5. the ring on the phone stage sits where it sits on the film stage (left 50%, top 40%) and settles on the lamp of frame 1 (hero.js) */
/* 6. a phone held sideways (the landscape frame set, 390 px tall): the HUD is already hidden under 560 px (the film stage's rule); the
      heads step down and band 7 keeps its head and its row but not its sub line, so the logo (never under 180 px) and the text share the height */
@media (max-height:560px){
  .shero--seq .sbands .band__head,.shero--seq .sbands .band--low .band__head{font-size:clamp(1.9rem,8vh,2.6rem)}
  .shero--seq .sbands .band__in{padding-bottom:max(26px,6svh)}
  .shero--seq .sbands .band--settle .band__sub{display:none}
  .shero--seq .sbands .band--settle .band__row{margin-top:.9em}
}
/* END PHONE HOME BLOCK */

/* ===================================================================== PHONE SCROLL BLOCK (parity T4, traveller-and-scroll builder, 2026-09-24)
   Owner 2026-09-22: "same motion on phone". In-page anchors glide on desktop (html scroll-behavior:smooth, section 2) but the static hero
   gates (section 10) set scroll-behavior:auto, so on phones the research jump cards, SKIP INTRO, the footer journey, the chapter rail and
   every #hash link jumped. The same four screen gates re-assert smooth here (source order wins at equal specificity); reduced motion,
   Motion off (html.still) and no script keep their instant jumps (the rules after this one and in section 10 carry the class). ===== */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  html,html.motion-on{scroll-behavior:smooth}
  html.still,html.no-js{scroll-behavior:auto}
}
@media (prefers-reduced-motion: reduce){
  html:not(.motion-on){scroll-behavior:auto}
}
/* END PHONE SCROLL BLOCK */

/* ===================================================================== PHONE MODULES BLOCK (parity M1..M14, modules builder, 2026-09-24)
   Owner 2026-09-22: "same motion on phone". The fx modules' phone differences that were only layout workarounds are removed here; each
   rule names its item. Transform and opacity only; nothing here runs at rest. ===== */
/* M6 the Board's dividers: the plate is sticky on phones too, compact (36svh, under the header), so the duties read beneath it and each
   one drives its own quarter turn as on desktop. The stage carries the canvas so the list passes under it; a short fade softens its edge.
   A short landscape screen keeps the plate inline (the module then draws the four quarters back to back). */
@media (max-width:900px) and (min-height:561px){
  .bdc__stage{position:sticky;top:calc(var(--hdr-hc,64px) + 8px);z-index:2;width:100%;background:var(--canvas);padding-bottom:10px}
  .bdc__stage::after{content:"";position:absolute;left:0;right:0;top:100%;height:44px;background:linear-gradient(var(--canvas),rgba(38,32,26,0));pointer-events:none}
  .bdc__plate{width:min(100%,380px,36svh);margin:0 auto}
  .bdc__cap{width:min(100%,380px,36svh);margin:10px auto 0}
}
/* M4 the instrument cylinder's phone row: the floor reflection under every face (the bottom quarter of the face, mirrored, fading, the
   same 34% as the cylinder's floor; a paint effect, no script, no layout), with room for it under the row. Firefox for Android has no
   box-reflect and simply shows the row. */
.dcyl--row .dcyl__faces{padding-bottom:calc(14px + 22cqi)}
.dcyl--row .dcyl__face{-webkit-box-reflect:below 6px linear-gradient(rgba(0,0,0,0) 72%,rgba(0,0,0,.34))}
html.still .dcyl--row .dcyl__face{-webkit-box-reflect:none}
/* M1 the hero plates: a finger on the plate leans it (plates.js); vertical flicks still scroll */
.phero .hplate{touch-action:pan-y}
/* M13 the graft atlas on phones: a finger held on a paper pulses the wash of its own thumbnail (the part the paper is about) */
.gx-th-hot .gx-th__w path{animation:gxThHot 1.1s var(--ease-inout) infinite alternate;transition:none}
@keyframes gxThHot{from{opacity:.55}to{opacity:.98}}
html.still .gx-th-hot .gx-th__w path{animation:none}

/* ===================================================================== PHONE TOUCH BLOCK (parity E1..E4, touch-equivalents builder, 2026-09-24)
   Owner 2026-09-22: "Is it possible to maintain same motion and sound on phone?" Where desktop depends on a mouse, the finger is the
   equivalent: the press. Every rule here is the twin of a desktop hover or pointer rule above, with the same transform and glow.
   Transform and opacity only. Nothing here runs at rest. ===== */
/* E1 the touch-light: the neon dot and the aiming reticle show under a coarse pointer only while html.touch-cur is on (site.js section 14
   sets it from the finger down until the fade has ended); both fade over .3 s on the lift. Forced colours keep them off (the rule at
   forced-colors above). The tag sits on the far side of the finger, as beside the mouse. */
@media (hover:none),(pointer:coarse){
  html.touch-cur .ret,html.touch-cur .cur{display:block}
  html.touch-cur .cur{transition:opacity .3s var(--ease-out)}
  html.touch-cur .cur.is-on{transition:none}
  html.touch-cur .ret{transition:opacity .3s var(--ease-out),color .3s var(--ease-out)}
  html.still.touch-cur .cur,html.still.touch-cur .ret{transition:none}
}
@media (forced-colors:active){html.touch-cur .ret,html.touch-cur .cur{display:none}}
/* E2 the pointer light over the page: present on coarse pointers (at opacity 0 it is neither drawn nor kept), lit while a finger is down
   (.is-on from site.js section 7), the same .6 s fade. The environment lamp itself needs no rule: it already moves by --mx and --my. */
@media (hover:none),(pointer:coarse){.plight{display:block}}
.plight.is-on{opacity:1}
html.still .plight.is-on,html.doors-closed .plight.is-on{opacity:0}
/* E3 the card lamp: shown on a coarse pointer once the finger has lit the card (.is-lit), the same disc and fade */
@media (hover:none),(pointer:coarse){.is-lit > .lamp{display:block}}
html.still .is-lit > .lamp{display:none}
/* E4 press twins of the hover rules, under (hover:none): :active where the browser gives it, and .is-press (site.js) so the press reads for
   at least 150 ms and never during a flick. No tap highlight on these: the light is the feedback. */
@media (hover:none){
  a.card,.card--link,.ecard,.person,.vt__card,.rs-jump__card,.scr__ph,.soc,.w5arm,.sheet__ab,.vq,.vf{-webkit-tap-highlight-color:transparent}
  a.card:active,.card--link:active,a.card.is-press,.card--link.is-press{border-color:var(--rule-strong);transform:translateY(-3px)}
  .ecard:active,.ecard.is-press{border-color:var(--rule-strong);transform:translateY(-3px)}
  .nrow.is-press .nrow__num{opacity:.95}
  .person.is-press .person__photo:not(.person__mono)::before,.vq.is-press .person__photo:not(.person__mono)::before,.vf.is-press .person__photo:not(.person__mono)::before{opacity:1}
  .person.is-press .person__photo:not(.person__mono)::after{opacity:1}
  .person.is-press .person__spark::after{opacity:1}
  .vq.is-press .person__photo:not(.person__mono)::after,.vf.is-press .person__photo:not(.person__mono)::after{opacity:1}
  .vt__card:active,.vt__card.is-press{transform:translateY(-4px);border-color:rgba(217,138,75,.6)}
  .vt__card:active .vt__pic img,.vt__card.is-press .vt__pic img{transform:scale(1.04)}
  .vt__card:active .vt__pic--ink img,.vt__card.is-press .vt__pic--ink img{transform:scale(1.035)}
  .vt__card.is-press .vq__arr{transform:translate(2px,-2px)}
  .card.sigo:active .sigo__ink img,.card.sigo.is-press .sigo__ink img{transform:scale(1.035)}
  .rs-jump__card.is-press{transform:translateY(-3px);border-color:var(--text-primary);background:color-mix(in srgb,var(--panel) 88%,var(--text-primary));
    box-shadow:0 1px 0 rgba(242,233,216,.1) inset,0 18px 34px -16px rgba(0,0,0,.8)}
  .rs-jump__card.is-press .rs-jump__a{transform:translateY(4px);background:var(--accent-hover)}
  .scr__ph:active img,.scr__ph.is-press img{opacity:1;transform:scale(1.035)}
  .scr__ph:active,.scr__ph.is-press{border-color:var(--rule-strong)}
  .scr__ph:active::after,.scr__ph.is-press::after{transform:scaleX(1)}
  .scr__ph:active .scr__open,.scr__ph.is-press .scr__open{opacity:1;transform:none}
  .soc:active,.soc.is-press{border-color:var(--rule-strong);background:rgba(59,43,36,.6)}
  .soc:active::before,.soc.is-press::before{transform:scaleX(1)}
  .soc:active .soc__g,.soc.is-press .soc__g{transform:translateY(-2px)}
  .w5arm:active .w5arm__fore,.w5arm.is-press .w5arm__fore{transform:rotate(-7deg)}
  .dcyl--3d .dcyl__face.is-front:active,.dcyl--3d .dcyl__face.is-front.is-press{--lift:10px}
  .sheet__ab:active,.sheet__ab.is-press{background:var(--accent-hover)}
  .sheet__ab:active .sheet__aba,.sheet__ab.is-press .sheet__aba{transform:translateX(4px)}
  /* html.still: the same calm the hover rules keep */
  html.still .person.is-press .person__photo:not(.person__mono)::before{opacity:.92}
  html.still .person.is-press .person__photo:not(.person__mono)::after{opacity:.6;transform:none}
  html.still .person.is-press .person__spark::after{opacity:0}
  html.still .vt__card:active,html.still .vt__card.is-press{transform:none}
  html.still .vt__card:active .vt__pic img,html.still .vt__card.is-press .vt__pic img,html.still .vt__card:active .vt__pic--ink img,html.still .vt__card.is-press .vt__pic--ink img,
  html.still .card.sigo:active .sigo__ink img,html.still .card.sigo.is-press .sigo__ink img,html.still .scr__ph:active img,html.still .scr__ph.is-press img{transform:none}
}
/* END PHONE TOUCH BLOCK */

/* RESEARCH, FIG. 03: TWO PLATES (heart builder, 2026-09-24, owner batch 6c) =====================================================
   The plate tabs (the site's tabs component, laid out as two plate labels), the heart study in the same ink as the liver, the crossfade
   between the plates (opacity and visibility only, never display:none, so the pen can measure the heart), the six heart labels at the
   ends of their leaders, the opener and the close of each list. html.still: no transitions. */
.gx__tabs{grid-column:1/-1;margin:0 0 clamp(4px,1.2vh,12px);gap:0 clamp(24px,4.4vw,64px);border-bottom-color:var(--rule)}
.gx-tab{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:72px;padding:10px 2px 14px;white-space:normal;text-align:left}
.gx-tab::after{height:1px;background:#D0694E}
.gx-tab[aria-selected="true"]::after{height:2px}
.gx-tab__k{font-size:10.5px;letter-spacing:.18em;color:var(--text-secondary);transition:color .45s var(--ease-out)}
.gx-tab__t{font-family:var(--f-display);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.05;letter-spacing:.06em;text-transform:uppercase}
.gx-tab__n{font-size:11px;letter-spacing:.12em;color:var(--text-secondary)}
.gx-tab[aria-selected="true"] .gx-tab__k,.gx-tab[aria-selected="true"] .gx-tab__n{color:#D0694E}
.gx-tab:focus-visible{outline:2px solid var(--text-primary);outline-offset:4px}
/* the plates: the one not chosen fades and steps out of the way (visibility, after the fade) */
.gx__frame > .lstudy{transition:opacity .55s var(--ease-out),visibility 0s 0s}
.gx__frame[data-organ="liver"] > .gx-heart,.gx__frame[data-organ="heart"] > .gx-liver{opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s .4s}
.gx__frame[data-organ="heart"] .pl-depth,.gx__frame[data-organ="heart"] > .ink-bleed{opacity:0;visibility:hidden}
html.still .gx__frame > .lstudy{transition:none}
/* the heart study: the same ink weights as the liver, plus its arteries, valve rings and commissures */
.gx-heart .v{stroke:rgba(242,233,216,.3)}
.gx-heart .gx-hA{stroke:rgba(242,233,216,.2)}
.gx-heart .gx-hB{stroke:rgba(242,233,216,.17)}
.gx-heart .gx-hC{stroke:rgba(242,233,216,.15)}
.gx-heart .gx-thin{stroke:rgba(242,233,216,.4)}
.gx-heart .gx-ol{stroke:rgba(242,233,216,.78)}
.gx-heart .gx-art{stroke:rgba(242,233,216,.72);stroke-width:1.2}
.gx-heart .gx-art--b{stroke:rgba(242,233,216,.5);stroke-width:.9}
.gx-heart .gx-vr{stroke:rgba(242,233,216,.34);stroke-dasharray:4 3}
.gx-heart .gx-com{stroke:rgba(242,233,216,.24)}
.gx-heart .gx-sn{font-size:9px;letter-spacing:.08em;fill:rgba(242,233,216,.42)}
.gx-heart .gx-vn{font-size:8px;fill:rgba(242,233,216,.38)}
.gx-heart .gx-ldr{stroke:rgba(242,233,216,.22);transition:stroke .35s var(--ease-out)}
.gx-heart .gx-ldr.is-hot{stroke:rgba(224,138,108,.95)}
.gx-heart .gx-dot{fill:rgba(38,32,26,.9);transition:fill .35s var(--ease-out)}
.gx-heart .gx-dot.is-hot{fill:#E08A6C}
html.still .gx-heart .gx-ldr,html.still .gx-heart .gx-dot{transition:none}
@media (forced-colors:active){.gx-heart .gx-ldr.is-hot{stroke:CanvasText}}
/* each heart label sits at the end of its leader (the ring's centre is the leader's outer point; drawing units 400 x 380) */
.gx-key--transplant{left:calc(5.5% - 22px);right:auto;top:calc(83.16% - 22px);flex-direction:row}
.gx-key--aortic{left:calc(5.5% - 22px);right:auto;top:calc(34.21% - 22px);flex-direction:row}
.gx-key--ventricles{left:calc(5.5% - 22px);right:auto;top:calc(90.53% - 22px);flex-direction:row}
.gx-key--atrial{right:calc(5.5% - 22px);left:auto;top:calc(31.58% - 22px);flex-direction:row-reverse}
.gx-key--mitral{right:calc(5.5% - 22px);left:auto;top:calc(61.05% - 22px);flex-direction:row-reverse}
.gx-key--coronary{right:calc(5.5% - 22px);left:auto;top:calc(73.68% - 22px);flex-direction:row-reverse}
.gx__keys[data-n="6"] .gx-key__t{font-size:10px}
/* the opener and the close of each list */
.gx__organ{outline-offset:8px}
.gx__kicker{margin:0 0 10px;color:#D0694E;font-size:11px}
.gx__olede{margin:0 0 clamp(24px,3.6vh,40px);max-width:60ch;color:var(--text-secondary);font-size:1.0625rem;line-height:1.55}
.gx-next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:16px;width:100%;min-height:64px;margin-top:clamp(28px,4vh,44px);padding:16px 18px;border:1px solid var(--rule);background:none;color:var(--text-primary);cursor:pointer;text-align:left;font:inherit;transition:border-color .35s var(--ease-out),background-color .35s var(--ease-out)}
.gx-next__k{grid-column:1/3;font-size:10.5px;letter-spacing:.18em;color:var(--text-secondary)}
.gx-next__t{grid-column:1/2;font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.05;letter-spacing:.06em;text-transform:uppercase}
.gx-next__n{grid-column:2/3;font-size:11px;color:var(--text-secondary)}
.gx-next__a{grid-column:3/4;grid-row:1/3;width:26px;height:26px;fill:none;stroke:#D0694E;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease-out)}
.gx-next:hover,.gx-next:focus-visible{border-color:var(--rule-strong);background:rgba(242,233,216,.03)}
.gx-next:hover .gx-next__a{transform:translateX(4px)}
.gx-next:focus-visible{outline:2px solid var(--text-primary);outline-offset:4px}
html.still .gx-next,html.still .gx-next__a{transition:none}
/* a narrow plate (phones, tablets, small laptops): the heart takes the whole plate like the liver, and its labels join the row of chips */
@container gxp (max-width:420px){
  .gx__frame > .lstudy.gx-heart{position:absolute;inset:12px 12px auto;width:calc(100% - 24px);height:auto;aspect-ratio:400/380;margin:0}
  .gx-key--transplant,.gx-key--aortic,.gx-key--ventricles,.gx-key--atrial,.gx-key--mitral,.gx-key--coronary{position:relative;left:auto;right:auto;top:auto;flex-direction:row}
  .gx-heart .gx-ldr{display:none}
  .gx-heart .gx-dot{r:3.4px}
}
@media (max-width:860px){
  .gx__tabs{margin-bottom:0}
  .gx-tab{min-height:64px}
}
/* tablets: the plate is the moment, so it keeps the drawing's proportions instead of the phone's 300 px band (both plates) */
@media (min-width:600px) and (max-width:860px){
  .gx__frame{height:auto;aspect-ratio:400/380;max-height:min(72vh,640px)}
}
@media (max-width:480px){
  .gx__tabs{gap:0 18px}
  .gx-tab{flex:1 1 0;min-width:0}
  .gx-next{grid-template-columns:minmax(0,1fr) auto;padding:14px 16px}
  .gx-next__k{grid-column:1/2}
  .gx-next__t{grid-column:1/2}
  .gx-next__n{grid-column:1/2}
  .gx-next__a{grid-column:2/3;grid-row:1/4}
}
/* END TWO PLATES BLOCK */

/* HOME NOTCH BLOCK (home builder, owner batch 7, 2026-09-24) ==========================================================================
   Home only unless said. Transform and opacity only; html.still is the complete version. */

/* ---- FIG. 04: the programmes as ONE engraved sequence (RSIG.sig programs, data-layout="sequence") ---- */
.seqs{position:relative;--seq-ground:#31261F}   /* the panel section's ground: Sepia Ink at .5 over Charcoal Umber */
.seqs__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 clamp(26px,4vh,40px);color:var(--text-secondary)}
.seqs__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(168,67,46,.22)}
.seqs__note{flex-basis:100%;letter-spacing:.1em;color:var(--text-secondary);opacity:.8}
.seqs__list{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3.4vw,56px)}
/* the hairline that joins the nodes: drawn once, left to right, as the sequence enters */
.seqs__list::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:linear-gradient(90deg,var(--rule-strong),rgba(152,136,122,.5) 70%,rgba(152,136,122,0));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.6s var(--ease-inout) .15s}
.seqs.in .seqs__list::before{transform:none}
.seqs__i{position:relative;padding-top:38px;display:flex;flex-direction:column;gap:10px}
.seqs__node{position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;border:1px solid var(--accent);background:var(--seq-ground);
  transform:scale(0);transition:transform .7s var(--ease-out);transition-delay:calc(.2s + var(--i,0)*.3s)}
.seqs__node::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent)}
.seqs.in .seqs__node{transform:none}
.seqs__n{position:absolute;left:21px;top:0;padding:0 8px;line-height:15px;color:var(--text-secondary);background:var(--seq-ground)}   /* the number sits in a gap of the line */
.seqs__t{margin:0}
.seqs__t{line-height:1.3}
/* inline, so a two-line name keeps its arrow after the last word; the padding makes the target 44 px tall */
.seqs__a{display:inline;padding:9px 0;color:var(--text-primary);text-decoration:none;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(currentColor,currentColor) 0 calc(100% - 7px)/0 1px no-repeat;transition:background-size .5s var(--ease-out)}
.seqs__a:hover,.seqs__a:focus-visible{background-size:100% 1px}
.seqs__a .nrow__arr{display:inline-block;margin-left:.35em;vertical-align:.1em}
.seqs__a:hover .nrow__arr{transform:translate(2px,-2px)}
.seqs__s{margin:0;color:var(--text-secondary);max-width:36ch}
.seqs__meta{margin:0;color:var(--text-secondary)}
@media (max-width:760px){
  .seqs__sep{display:none}
  .seqs__head{display:grid;grid-template-columns:auto 1fr;column-gap:12px}.seqs__head > :not(.seqs__dot){grid-column:2}
  .seqs__list{grid-template-columns:1fr;gap:0}
  .seqs__list::before{left:7px;right:auto;top:7px;bottom:28px;width:1px;height:auto;background:linear-gradient(180deg,var(--rule-strong),rgba(152,136,122,.35));transform:scaleY(0);transform-origin:50% 0}
  .seqs__i{padding:0 0 30px 40px}
  .seqs__n{position:static;line-height:15px;padding:0;background:none}
  .seqs__node{top:0}
}
html.still .seqs__list::before,html.still .seqs__node{transform:none;transition:none}
html.no-js .seqs__list::before,html.no-js .seqs__node{transform:none}
@media (forced-colors:active){.seqs__node,.seqs__node::after{background:CanvasText;border-color:CanvasText}.seqs__list::before{background:CanvasText}}

/* ---- FOOTER: every named contact is one identical stack (name, role, phone), so three contacts never wrap badly at any width ---- */
.ftr__pwho{display:block;white-space:normal}
.ftr__pwho .ftr__sep{display:none}
.ftr__prole{display:block;margin-top:2px}
.ftr__col li.ftr__person{margin-top:14px}

/* ---- FIG. 07: nothing waits behind the red button. The close line reads at rest (dimmed) and brightens after the hold; only
   "Try again" waits for the hold, keeping its space so nothing moves. ---- */
.ctl__end{opacity:.62;visibility:visible;transform:none}
.ctl:not(.is-done) #holdReset{visibility:hidden}
html.still .ctl__end{opacity:1}

/* ---- FIG. 08: the close. Two words, set large inside the construction; the buttons are a matched pair ---- */
#get-involved .reg__title.t-title--sent{font-size:clamp(2.8rem,7vw,5.6rem);line-height:.98}
#get-involved .reg__row .btn{min-width:13.5em;justify-content:center}

/* ---- FIG. 01: the site's one section opener (title, lede), then the picture with the text column centred beside it ---- */
@media (min-width:1024px){#about .about__grid{align-items:center}}

/* ---- FIG. 05 (and About): the partner logos are mounted, not pasted: the white card (the logos are opaque on white and are never
   recoloured) is dimmed to 92% so it stops glaring on the charcoal page, and sits in a parchment mount with a hairline and a soft inner
   shadow, like a plate pasted into the folio ---- */
.affil--logos .affil__tile{filter:brightness(.92);border-radius:1px;
  box-shadow:inset 0 1px 5px rgba(38,32,26,.18),0 0 0 6px #e4d8c2,0 0 0 7px rgba(38,32,26,.55),0 10px 26px -12px rgba(0,0,0,.6);margin:7px 7px 12px}
#recognition .t-title .skew{text-wrap:balance}

/* ---- FIG. 06 "In their words" (home and the Advisory Board page): ONE treatment for every advisor. The words at one size, a small
   hanging opening mark in Parchment grey on spoken lines (a written passage never gets a speech mark: the provenance kicker is the only
   difference), rows 30% shorter, and one hairline joining the four portrait rings so they read as one bench. ---- */
.vq{--rw:clamp(120px,12vw,176px);--pb:clamp(44px,7vh,84px);padding-block:calc(var(--pb) * .7)}
.vq .vq__q p,.vq--written .vq__q p{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5;color:var(--text-primary);max-width:52ch}
.vq--written .vq__q{padding-left:0;border-left:0}
.vq:not(.vq--written) .vq__q::before{position:absolute;left:-.62em;top:0;display:block;height:auto;margin:0;font-family:var(--f-body);font-weight:300;
  font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.5;color:var(--text-secondary);text-shadow:none}
.vq__cap{margin-top:clamp(16px,2.4vh,24px)}
@media (min-width:721px){
  .vq__who{position:relative;align-self:stretch}
  .vq__who::before,.vq__who::after{content:"";position:absolute;left:50%;width:1px;background:linear-gradient(180deg,rgba(242,233,216,.2),rgba(242,233,216,.2));pointer-events:none}
  .vq:not(:first-child) .vq__who::before{top:calc(var(--pb) * -.7);height:calc(var(--pb) * .7 + 12px)}
  .vq:not(:last-child) .vq__who::after{top:calc(var(--rw) + 66px);bottom:calc(var(--pb) * -.7)}   /* starts below the 01 / 04 counter */
}
@media (max-width:720px){.vq{padding-block:32px}.vq:not(.vq--written) .vq__q::before{left:-.58em}}

/* ---- THE FILM'S WORDLESS BEAT (progress .62 to .785): one whisper line, ink on the haze, in the rail's voice (hero.js sets opacity) ---- */
.beat{position:absolute;left:50%;top:50%;z-index:3;margin:0;display:flex;align-items:center;gap:18px;white-space:nowrap;pointer-events:none;opacity:0;
  transform:translate3d(-50%,-50%,0);font-size:13px;letter-spacing:.46em;color:rgba(38,32,26,.78)}
.beat::before,.beat::after{content:"";width:clamp(28px,4vw,56px);height:1px;background:rgba(38,32,26,.5)}
@media (max-width:600px){.beat{top:36%;font-size:11px;letter-spacing:.34em;gap:12px}}   /* above the phone rail's chapter label */
html.still .beat{display:none}
/* while the frame is bright the header's scrim reaches further down (transform only) */
html.film-bright .hdr:not(.hdr--solid)::before{transform:scaleY(1.5)}

/* ---- FILM CAPTIONS (bands 1 to 5, wide screens): each caption set as two or three deliberate lines of a film title instead of a narrow
   ragged stack: a wider measure (never past the frame's left half), one step smaller, balanced ---- */
@media (min-width:1200px){
  #stage .band--left .band__in{width:min(40vw,600px)}
  #stage .band--left .band__head{font-size:clamp(2.6rem,min(4vw,9vh),4.6rem);text-wrap:balance}
}

/* ---- FOOTER last frame: the fan's layer starts at --lf-top (lastframe.js: the rule above the logo row on wide screens, 0 on phones) ---- */
.lf{top:var(--lf-top,0px);height:calc(var(--lf-y,300px) + 90px - var(--lf-top,0px))}
.lf__fan{top:calc(var(--lf-y,300px) - 300px - var(--lf-top,0px))}

/* ---- PHONE HERO: the still-hero captions (.scap) are never a touch target; an invisible one used to sit over the settle's
   "What is RSIG?" button on phones and take its tap ---- */
.scap{pointer-events:none}

/* ---- HEADER: the Advisory Board button crossfades between fill and outline (site.js section 16 adds the hysteresis) ---- */
.hdr__cta{transition:background-color .7s var(--ease-out),box-shadow .7s var(--ease-out),color .7s var(--ease-out),transform .45s var(--ease-out)}

/* ---- a hint says what this hand can do: the mouse and keyboard line on fine pointers, one word on touch ---- */
.hint--touch{display:none}
@media (pointer:coarse){.hint--fine{display:none}.hint--touch{display:inline}}

/* ---- FILM RAIL (wide screens): a real table of contents: every chapter name shows at 40%, the current one at full strength ---- */
@media (min-width:1024px){
  html:not(.still) #stage .rail__l{opacity:.4;transform:none}
  #stage .rail__b[aria-current="true"] .rail__l,#stage .rail__b:hover .rail__l,#stage .rail__b:focus-visible .rail__l{opacity:1}
}

/* ---- IMPACT STRIP: four titles on one baseline, so the four sentences start level ---- */
@media (min-width:1024px){.impact__big{min-height:2.2em;display:flex;align-items:flex-end}}

/* ---- THE SETTLE: the film's Sound chip bows out with the rail (hero.js html.hud-rest, p >= .975) and the header's Sound takes over ---- */
html.hud-rest .cue__sound{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s var(--ease-out),visibility 0s linear .45s,transform .8s var(--ease-inout)}

/* END HOME NOTCH BLOCK */

/* =====================================================================
   RESEARCH-INVOLVE NOTCH BLOCK (2026-09-24, owner batch 7 items 2, 5, 7, 8): /research/, /get-involved/, /404.html, the header,
   the phone sheet, the footer and the page to page transition. Appended; rules above are overridden here only where named.
   ===================================================================== */
/* a number joined to a word by a hyphen never breaks ("1-Year") */
.rs-nw{white-space:nowrap}
/* FIG. 01: the pipeline, said once, in the lede's column so the section reads opener, programs, words */
.rs-pipe{margin-top:clamp(36px,5vh,60px)}
@media (min-width:861px){.rs-pipe{max-width:none;padding-left:calc(50% + clamp(32px,6vw,96px) / 2)}.rs-pipe p{max-width:58ch}}
/* FIG. 02: the latest paper. Wide: title and journal on the left, what it found beside it; the RSIG authors and the list under both */
.rs-feat{gap:18px}
.rs-feat__head{display:grid;gap:12px;align-content:start}
.rs-feat__t{max-width:26ch}
.rs-feat__found p:not(.t-mono),.rs-feat__who p:not(.t-mono){max-width:60ch}
.rs-feat__who,.rs-feat__auth,.rs-feat__doi{grid-column:1 / -1}
.rs-feat__who{padding-top:18px;border-top:1px solid var(--rule)}
@media (min-width:900px){
  .rs-feat{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);row-gap:22px}
  .rs-feat__found{padding-left:clamp(20px,2.4vw,36px);border-left:1px solid var(--rule);align-self:stretch}
  .rs-feat__who{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,2.4vw,36px);align-items:center}
  .rs-feat__who .rs-lab{grid-column:1 / -1}
}
@media (max-width:899px){.rs-feat__found{padding-top:16px;border-top:1px solid var(--rule)}}
/* the RSIG authors' rings: the site's portrait ring, small, overlapping a little like a bench seen from above */
.rs-rings{display:flex;align-items:center;min-height:0}
.rs-rings:empty{display:none}
.rs-ring.person__photo{width:52px;flex:none;border-width:1px}
.rs-ring + .rs-ring{margin-left:-8px}
.rs-ring.person__photo:not(.person__mono)::before{padding:1px}
@media (max-width:899px){.rs-rings{margin:4px 0 12px}}
/* the folded author list: the first six names, then a 44 px "and N more" */
.rs-feat__auth{max-width:90ch}
.rs-authbtn{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:none;font:inherit;color:var(--text-primary);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule-strong)}
.rs-authbtn:hover{text-decoration-color:currentColor}
/* the close: the site's opener, one sentence, one link */
.rs-close .phero__row{margin-top:18px}
/* the header arrives held in its condensed state after a leaf turn (site.js section 6): no transition until it is released */
.hdr--hold,.hdr--hold::before,.hdr--hold::after,.hdr--hold > .hdr__home,.hdr--hold > .hdr__nav{transition:none !important}
/* phones: the breadcrumb is one step back ("← Research and Innovation"); the whole trail stays in the markup for assistive tech */
@media (max-width:560px){
  .crumbs li:not(:nth-last-child(2)){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .crumbs li + li::before{content:none}
  .crumbs li:nth-last-child(2) a::before{content:"\2190";margin-right:10px;text-decoration:none;display:inline-block}
}

/* ---- GET INVOLVED: the one board. Each row is [the ink line's gutter][number][what it is and what is open]; phones drop the number
   column and set the number above the name. The line (fx/paths.js) runs at x = 12 px of the wrap, inside the rows' gutter. ---- */
#opportunities{scroll-margin-top:calc(var(--hdr-h) + 12px)}
#opportunities .wrap{position:relative}
#opportunities .wrap > .divider,#opportunities .wrap > .sec__head,#opportunities .wrap > .gi-rows,#opportunities .wrap > #closedBox{position:relative;z-index:1}
#opportunities.gp-ready .gp-svg{opacity:1}
#opportunities.gp-ready .gp-origin{opacity:.9}
#opportunities.gp-vis .gp-target.is-stamped i{animation-play-state:running,running}
#opportunities.gp-stacked .gp-target i{left:-7px;top:-7px;width:14px;height:14px;border-width:1px;background:radial-gradient(circle,#E0744F 0 2px,rgba(224,116,79,0) 2.5px);box-shadow:0 0 0 3px rgba(168,67,46,.18),0 0 12px 2px rgba(226,132,80,.38)}
.gi-rows{list-style:none;margin:clamp(40px,6vh,64px) 0 0;padding:0}
.gi-row{display:grid;grid-template-columns:40px 64px minmax(0,1fr);scroll-margin-top:calc(var(--hdr-h) + 24px);padding:0 0 clamp(40px,6vh,64px)}
.gi-row + .gi-row{padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--rule)}
.gi-row__n{grid-column:2;margin:0;line-height:26px;color:#D0694E;letter-spacing:.14em}
.gi-row__b{grid-column:3;display:grid;gap:14px;justify-items:start;min-width:0}
.gi-row__t{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1;letter-spacing:.05em;text-transform:uppercase}
.gi-row__s{margin:0;max-width:60ch;color:var(--text-secondary)}
.gi-row__list{width:100%}
.gi-row__list:empty{display:none}
.gi-none{margin:6px 0 0;padding-left:14px;border-left:1px dashed var(--rule-strong);color:var(--text-secondary);font-size:12px;letter-spacing:.12em;line-height:1.7;max-width:62ch}
.gi-opens{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),460px));gap:18px}
.gi-open{display:grid;gap:10px;align-content:start;padding:clamp(20px,2.4vw,28px);border:1px solid var(--rule-strong);background:rgba(38,32,26,.5)}
.gi-open__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.gi-open__c{color:var(--text-secondary);font-size:11px;letter-spacing:.14em}
.gi-open p{color:var(--text-secondary)}
.gi-open__go{margin-top:6px}
/* the Advisory Board panel inside the Apply row */
.gi-feature{width:100%;margin-top:6px}
.gi-feature .pg-feature__t{font-size:clamp(1.7rem,2.8vw,2.6rem)}
/* the not-yet-open items, under the board */
.gi-soon{margin-top:clamp(8px,2vh,24px);padding-left:104px}
.gi-soon__h{margin:0 0 16px;color:var(--text-secondary);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:860px){
  .gi-row{grid-template-columns:40px minmax(0,1fr)}
  .gi-row__n{grid-column:2;line-height:26px}
  .gi-row__b{grid-column:2}
  .gi-soon{padding-left:40px}
}
/* one card never stretches across the page: two fill the row, one sits left at 560 px */
.gi-soon .cards--2{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),560px))}
@media (min-width:641px){.gi-soon .cards--2 > li:last-child:nth-child(odd){grid-column:auto}}
/* ---- the membership door, drawn as a moment rather than an icon: 224 px tall on wide screens, 160 px on phones ---- */
.jb-door{width:clamp(100px,10vw,140px)}
.jb-door__seam::after{content:"";position:absolute;left:50%;top:40%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  border:1px solid rgba(242,233,216,.34);box-shadow:0 0 0 4px rgba(38,32,26,.9),0 0 14px 2px rgba(255,172,112,.18)}
.jb-door.is-open .jb-door__seam::after{opacity:0;transition:opacity .4s}
/* ---- Contact: three people, one identical block each at every width (ring, name, role, phone), then the email and the address ---- */
.ctp{list-style:none;margin:0 0 clamp(22px,3vh,32px);padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:22px 28px}
.ctp__p{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center}
.ctp__r.person__photo{width:64px;border-width:1px}
.ctp__r.person__photo:not(.person__mono)::before{padding:1px}
.ctp__r .person__ini-t{font-size:18px}
.ctp__w{display:grid;gap:2px;min-width:0}
.ctp__n{font-family:var(--f-head);font-weight:600;font-size:1rem;letter-spacing:.02em;color:var(--text-primary)}
.ctp__role{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.ctp__ph{display:inline-flex;align-items:center;min-height:44px;justify-self:start;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule-strong)}
.ctp__ph:hover{text-decoration-color:currentColor}
@media (min-width:861px){
  .ctp{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .ctp__p{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start;justify-items:start}
}

/* ---- GET INVOLVED hero: the hand study (STUDY // TWO HANDS, THE MOMENT BEFORE). Two contour weights (the silhouette full, the lit side and
   the inner contours finer), the searching lines and the tendons as hairlines, hatching only in the shade; one sanguine spark between the
   fingertips while the hands are together. The hands part along their own 33 degree axis (fx/hands.js). ---- */
.lstudy.gh-a .l,.lstudy.gh-b .l{stroke:rgba(242,233,216,.74)}
.lstudy .gh-l1{stroke:rgba(242,233,216,.54)}
.lstudy .gh-l2{stroke:rgba(242,233,216,.42)}
.lstudy .gh-t{stroke:rgba(242,233,216,.24)}
.lstudy .gh-p{stroke:rgba(242,233,216,.17)}
.lstudy .gh-hat{stroke:rgba(242,233,216,.19)}
.lstudy .gh-hat--x{stroke:rgba(242,233,216,.13)}
.lstudy .gh-axis{stroke:rgba(242,233,216,.2)}
html.motion-on .hplate:not(.fx-off) .gh-a{transform:translate3d(-11.8%,6.1%,0) rotate(-4deg)}
html.motion-on .hplate:not(.fx-off) .gh-b{transform:translate3d(11.8%,-6.1%,0) rotate(-4deg)}
.gh-spark{position:absolute;left:50%;top:49.4%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;pointer-events:none;background:#E0744F;
  box-shadow:0 0 0 2px rgba(168,67,46,.22),0 0 12px 3px rgba(226,132,80,.45);opacity:0;transform:scale(.4);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.hplate.is-met .gh-spark{opacity:1;transform:none}
html.still .gh-spark{opacity:1;transform:none;transition:none}
/* phones and tablets: the study square, so the two hands are drawn large, not letterboxed in a wide frame */
@media (max-width:860px){#handsPlate .hplate__frame{aspect-ratio:1/1}}
@media (forced-colors:active){.gh-spark{display:none}}

/* ---- RI NOTCH 2 (2026-09-24, second sitting) ---- */
/* the social tiles two by two on phones: the mark above the name, so a handle never breaks (was four full-width boxes) */
@media (max-width:440px){
  .socs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .soc{flex-direction:column;align-items:flex-start;gap:10px;min-height:96px;padding:14px}
  .soc__h{overflow-wrap:normal;word-break:normal}
}
/* the not-yet-open items: their heading says "Coming soon" once; the chip on each card would say it again */
.gi-soon .card .status--soon{display:none}
/* the phone sheet as the notebook's index: the folio at the right of each leaf, and a close with one person to call */
.sheet__fol{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:none;color:var(--text-secondary);opacity:.8}
.sheet__list a[aria-current] .sheet__fol{color:#D0694E;opacity:1}
.sheet__call{display:grid;gap:0;margin-top:32px;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.sheet.open .sheet__call{opacity:1;transform:none;transition-delay:calc(var(--i,0)*45ms + 80ms)}
.sheet__callh{margin:0 0 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.sheet__row{display:grid;gap:2px;align-content:center;min-height:56px;padding:8px 0;border-top:1px solid var(--rule);text-decoration:none;color:var(--text-primary);
  font-family:var(--f-head);font-weight:600;font-size:1.05rem;letter-spacing:.02em}
.sheet__row:last-child{border-bottom:1px solid var(--rule)}
.sheet__rowl{font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
html.still .sheet__call{opacity:1;transform:none;transition:none}
/* one Sound control at a time: while the sheet is open its own Sound button shows, the header glyph steps back */
html.sheet-open .hdr__nav > .hdr__sound{opacity:0;visibility:hidden}
.sheet__call{justify-content:stretch;grid-template-columns:minmax(0,1fr)}
/* the sheet scrolls under a solid header, so no menu word shows through the lockup */
html.sheet-open .hdr::after{opacity:1;background:var(--canvas)}
html.sheet-open .hdr::before{opacity:0}
/* the sheet opens with the Advisory Board card at its head, so the header's own Advisory Board button steps back while it is open */
html.sheet-open .hdr__nav > .hdr__ab{opacity:0;visibility:hidden}
/* ---- 404: the last frame, unfinished (fx/unfinished.js). Three instruments inked, the fourth in dashed construction until the visitor
   finishes it; the ember lights once the target lands (0 to .95, settling at .6, the film's ending). ---- */
.lstudy--unfinished .nf-fine{stroke:rgba(242,233,216,.3)}
.lstudy--unfinished .nf-hat{stroke:rgba(242,233,216,.2)}
.lstudy--unfinished .nf-ghost{stroke:rgba(242,233,216,.34);stroke-dasharray:3 4}
.lstudy--unfinished .nf-ax{stroke:rgba(242,233,216,.14)}
.lstudy--unfinished .nf-deg{font-size:10px;letter-spacing:.1em}
.nf-nib{left:66.7%;top:25.8%}
.nf-ember{position:absolute;left:50%;top:82%;width:26%;aspect-ratio:1;margin:-13% 0 0 -13%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(255,226,180,1) 0 3.5%,rgba(255,172,112,.8) 8%,rgba(226,132,80,.42) 18%,rgba(168,67,46,.16) 34%,rgba(168,67,46,0) 50%)}
.hplate--nf.nf-done .nf-ember{animation:nfEmber 2.8s cubic-bezier(.45,0,.2,1) forwards}
@keyframes nfEmber{0%{opacity:0;transform:scale(.6)}28%{opacity:.95;transform:scale(1.06)}100%{opacity:.6;transform:none}}
html.still .nf-ember,html:not(.motion-on) .nf-ember{animation:none;opacity:.6}
.nf-hint{margin:10px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);transition:opacity .6s var(--ease-out)}
.hplate--nf.nf-done .nf-hint,html.still .nf-hint{opacity:0}
.nf-slip{right:3%;left:auto;top:auto;bottom:4%;transform:rotate(2deg)}
.nf__list{align-items:center}
.nf__or{flex-basis:100%;margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary)}
.nf__list .link{min-height:44px;display:inline-flex;align-items:center}
/* phones: the words and the button first, the study after them */
@media (max-width:860px){#nfPlate{order:2}.hplate--nf .hplate__frame{height:min(420px,110vw)}}
/* ---- /research/ hero: the notebook open at the liver and the heart (organ contours full, written lines and fore-edges finer) ---- */
.lstudy--notebook .nb-org{stroke:rgba(242,233,216,.72)}
.lstudy--notebook .nb-ink{stroke:rgba(242,233,216,.34)}
.lstudy--notebook .nb-hat{stroke:rgba(242,233,216,.2)}
.lstudy--notebook .nb-fore{stroke:rgba(242,233,216,.24)}
.lstudy--notebook .nb-fine{stroke:rgba(242,233,216,.3)}
/* ---- Research and Innovation, Current leadership (owner batch 7 item 6): the department heads and the OTCoE Research Coordinators on ONE
   level, each group under its own small title, four equal tiles; phones and small tablets two by two ---- */
.sigl__lv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);align-items:start}
.sigl__lv .sigl__g{min-width:0}
.sigl__lv .w5-group{margin-top:0;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.sigl__lv .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,36px)}
@media (max-width:860px){
  .sigl__lv{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vh,40px)}
}

/* =====================================================================
   OPENING BLOCK (owner batch 8, 2026-09-24, site-todo 105). Appended; it overrides the hinged door of 6b and the handover above.
   1. THE SLIDING DOOR ("I want the door to slide open like an OR door"): the two leaves glide sideways INTO the wall. .door__track is the
      doorway itself (overflow hidden), so each leaf vanishes behind the doorway's edge, which stays put and frames the opening. The weight of
      a real automatic door: the lit seam breaks first (0 to .35 s, the pneumatic unlatch), then a slow start, a smooth travel and a gentle
      stop (2.0 s from .32 s); the room's light floods the widening gap, spills onto the floor and lights the haze (hero.js, the same timing).
   2. THE HAND-OFF, one thing at a time: the leaves stop (2.32 s), then the doorway comes toward the visitor and dissolves as they walk
      through it (2.25 to 3.1 s, the poster of the film is the room behind it), then the round logo glides into the header lockup
      (hero.js, from doorDone), then the lockup, the nav, the HUD and the first headline arrive (HEADER LOCKUP BLOCK).
   Transform and opacity only. Motion off (html.doors-light): one fade, nothing slides. ===================================================================== */
.door__track{position:absolute;left:var(--ol);top:var(--ot);width:var(--ow);height:var(--oh);overflow:hidden;pointer-events:none}
.door__track .door__leaf{top:0;height:100%;backface-visibility:visible}
.door__track .door__leaf--l{left:-1px;width:calc(var(--sx) - var(--ol) + 1px)}
.door__track .door__leaf--r{left:calc(var(--sx) - var(--ol));width:calc(var(--ol) + var(--ow) - var(--sx) + 1px)}
/* the pockets: a soft shadow where each leaf passes behind the wall, only while the doors move */
.door__jamb{position:absolute;top:0;bottom:0;width:max(10px,5%);opacity:0;pointer-events:none}
.door__jamb--l{left:0;background:linear-gradient(to right,rgba(16,12,9,.78),rgba(16,12,9,.3) 45%,rgba(16,12,9,0))}
.door__jamb--r{right:0;background:linear-gradient(to left,rgba(16,12,9,.78),rgba(16,12,9,.3) 45%,rgba(16,12,9,0))}
html.doors-opening .door__jamb{opacity:1;transition:opacity .5s var(--ease-out) .3s}
/* the layers the opening moves exist before the press, so the press frame only starts transitions (no layer is built on it) */
html.doors-closed .door__leaf{will-change:transform}
html.doors-closed .door__set{will-change:transform,opacity}
/* the slide: slow start, smooth travel, gentle stop */
html.doors-opening .door__leaf{will-change:transform;transition:transform 2s cubic-bezier(.58,.02,.24,1) .32s}
html.doors-opening .door__leaf--l{transform:translate3d(calc(-100% - 2px),0,0)}
html.doors-opening .door__leaf--r{transform:translate3d(calc(100% + 2px),0,0)}
html.doors-opening .door__face{opacity:0;transition:none}
html.doors-opening .door__rim{opacity:1;transition:opacity .45s var(--ease-out) .26s}
/* the seal breaks first: the seam's light presses out and widens a little, then hands its light to the two rims that part with the leaves */
.door__seam{top:var(--ot)}   /* the seam starts at the head of the doorway (never up the wall above it); below it runs on as the floor's reflection */
html.doors-opening .door__seam{animation:doorSeamOpen .8s var(--ease-out) both;transition:none}
@keyframes doorSeamOpen{0%{opacity:1;transform:scaleX(1)}40%{opacity:1;transform:scaleX(2.6)}100%{opacity:0;transform:scaleX(4)}}
html.doors-opening .door__dark{opacity:0;transition:opacity .9s var(--ease-inout) .38s}
html.doors-opening .door__light{animation:doorLightS 2.8s var(--ease-inout) .3s both}
@keyframes doorLightS{0%{opacity:0}30%{opacity:.64}68%{opacity:.36}100%{opacity:0}}
html.doors-opening .door__bloom{animation:doorBloom 2.6s var(--ease-inout) .32s both}
html.doors-opening .door__spill{will-change:transform,opacity;animation:doorSpillS 2s cubic-bezier(.58,.02,.24,1) .32s both}
@keyframes doorSpillS{0%{opacity:0;transform:rotateX(64deg) scaleX(.04)}40%{opacity:.85}100%{opacity:.55;transform:rotateX(64deg) scaleX(1.25)}}
/* walking through: once the leaves have stopped, the doorway comes toward the visitor (origin on the opening) and dissolves */
.door__set{transform-origin:50% calc(var(--ot) + var(--oh) * .45)}
@media (max-aspect-ratio:3/4){.door__set{transform-origin:50% calc(var(--ot) + var(--oh) * .15)}}   /* upright screens: the bright floor rushes out below first */
html.doors-opening .door__set{will-change:transform,opacity;opacity:0;transform:scale(2.5);
  transition:transform .88s cubic-bezier(.5,0,.78,.46) 2.24s,opacity .42s cubic-bezier(.45,0,.55,1) 2.66s}
/* Motion off and the other static gates: the same doors, one fade, nothing slides */
html.doors-light.doors-opening .door__seam{animation:none;opacity:0}
html.doors-light.doors-opening .door__jamb{opacity:0;transition:none}
html.doors-light.doors-opening .door__set{will-change:auto}
/* END OPENING BLOCK */

/* OPENING BLOCK, FIG. 01 (batch 8): the student's label names him ("AHMAD MIRZA // DIRECTOR"). It reads from its leader line to the right,
   so the longer label never runs off the left of the picture; on phones the role drops under the name. */
.study__labels .study__lab--l{transform:translateX(-14px)}
.study__labels .study__lab--l::before{left:14px}
.study__labels .study__lab--l b{font-weight:inherit;color:var(--text-primary)}
.study__labels .study__lab--l span{position:static;padding:0;transform:none;color:inherit}.study__labels .study__lab--l span::before{content:none}   /* the name is its own editable span */
@media (max-width:560px){.study__labels .study__lab--l{white-space:normal;line-height:1.35}.study__labels .study__lab--l b{display:block}.study__labels{height:58px}}
/* END OPENING BLOCK, FIG. 01 */

/* OPENING BLOCK, FIG. 07 (batch 8, owner: "it looks laparoscopic, make it da Vinci robot"): the patient-side arm, the spar with the carriage
   and the EndoWrist backend, the cannula mount, and DETAIL A (the wrist at 3:1). Cream ink on the dark plate, like FIG. 03. */
.ctl__svg .c-arm .a-body,.ctl__svg .c-port .a-hub,.ctl__svg .c-arm .a-hub{fill:rgba(38,32,26,.97);stroke:rgba(242,233,216,.84)}
.ctl__svg .c-arm .i-hatch{stroke:rgba(242,233,216,.3)}
.ctl__svg .c-arm .i-fine,.ctl__svg .a-joint .i-fine{stroke:rgba(242,233,216,.45)}
.ctl__svg .a-joint .a-hub2{stroke:rgba(242,233,216,.6)}
.ctl__svg .a-joint .a-hub3{fill:rgba(242,233,216,.72);stroke:none}
.ctl__svg .c-port .i-band{fill:rgba(12,10,8,.95);stroke:rgba(242,233,216,.84)}
.ctl__svg .c-loupe .ld-bg{fill:rgba(22,18,15,.96);stroke:none}
.ctl__svg .c-loupe .ld-rim{stroke:rgba(168,67,46,.75)}
.ctl__svg .c-loupe .ld-ticks{stroke:rgba(242,233,216,.5)}
.ctl__svg .c-loupe .ld-mark{stroke:rgba(242,233,216,.6);stroke-dasharray:3 3}
.ctl__svg .c-loupe .ld-lead{stroke:rgba(242,233,216,.4)}
.ctl__svg .c-loupe .ld-text{fill:var(--text-secondary);stroke:none;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-anchor:middle}
.ctl__svg .c-loupe{opacity:.9;transition:opacity .7s var(--ease-out)}
/* END OPENING BLOCK, FIG. 07 */

/* =====================================================================================================================================
   ABOUT8 BLOCK (About builder, owner batch 8, 2026-09-24, site-todo 105 items 8 to 10). Appended; overrides the founders arc above.
   (a) The department board (About, Our people, Departmental Leadership; site.js VOICES BLOCK deptBoard): one row per department, its
       number, name and link, then its heads and any coordinators on ONE level. Phones: the department over its people, two by two.
   (b) From the founders: on wide screens the arc stands upright beside the chorus (held in place, never over a line), with its
       construction; one Sanguine target mark travels to the ring of whoever is being read. Tablets and phones keep the arc above.
   ===================================================================================================================================== */
.dbd{list-style:none;margin:0;padding:0}
.dbd__row{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,3.2fr);gap:clamp(20px,3vw,56px);align-items:start;
  padding:clamp(28px,4.5vh,48px) 0;border-top:1px solid var(--rule)}
.dbd__row:last-child{border-bottom:1px solid var(--rule)}
.dbd__dept{display:grid;gap:8px;align-content:start;padding-top:10px}
.dbd__n{font-family:var(--f-display);font-weight:300;font-size:clamp(2.6rem,4vw,3.6rem);line-height:.9;letter-spacing:.04em;color:rgba(242,233,216,.34)}
.dbd__name{margin:0;font-family:var(--f-head);font-weight:600;font-size:clamp(1.08rem,1.35vw,1.26rem);line-height:1.3}
.dbd__go{display:block;min-height:44px;padding:4px 0;color:var(--text-primary);text-decoration:none}
.dbd__go .vq__arr{display:inline-block;vertical-align:.12em;margin-left:8px;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.4;opacity:.6;transition:transform .5s var(--ease-out),opacity .5s var(--ease-out)}
.dbd__go:hover .vq__arr,.dbd__go:focus-visible .vq__arr{transform:translate3d(2px,-2px,0);opacity:1}
.dbd__go:hover{color:#EDB877}
.dbd__short{margin:0;color:var(--text-secondary);letter-spacing:.14em;font-size:.72rem}
.dbd__seats{display:flex;flex-wrap:wrap;gap:28px clamp(28px,3.4vw,56px);align-items:start}
.dbd__g{min-width:0}
.dbd__g .w5-group{margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--rule);font-size:.72rem}
.dbd .people{display:flex;flex-wrap:wrap;gap:28px clamp(20px,2.4vw,36px);padding:6px 0 0 6px;grid-template-columns:none}
.dbd .person{width:clamp(148px,12vw,172px);gap:14px}
.dbd .person::before{display:none}
.dbd .person__photo{width:clamp(120px,10vw,140px)}
.dbd .person__name{margin:0;font-size:1rem}
@media (max-width:900px){
  .dbd__row{grid-template-columns:minmax(0,1fr);gap:18px}
  .dbd__dept{grid-template-columns:auto 1fr;align-items:center;column-gap:16px;padding-top:0}
  .dbd__n{grid-row:span 2;font-size:2.4rem}
}
@media (max-width:560px){
  .dbd__seats{display:grid;gap:26px}
  .dbd .people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px;padding:4px 0 0}
  .dbd .person{width:auto;justify-items:center;text-align:center}
  .dbd .person__photo{width:min(118px,100%)}
}

/* (b) the founders */
.vfa__svg--v{display:none;overflow:hidden}
.vfa__cc{fill:none;stroke:rgba(242,233,216,.12);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.vfa__ax{fill:none;stroke:rgba(242,233,216,.14);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.vfa__dim{fill:none;stroke:rgba(242,233,216,.34);stroke-width:1;vector-effect:non-scaling-stroke}
.vfa__dt{fill:var(--text-secondary);font-family:var(--f-mono);font-size:9px;letter-spacing:.3em}
.vfa__tgt{position:absolute;left:0;top:0;width:100px;height:100px;z-index:3;pointer-events:none;opacity:0;transform-origin:50px 50px;
  transition:transform 1.1s var(--ease-inout),opacity .6s var(--ease-out)}
.vfa__tgt.is-on{opacity:1}
.vfa__tgt.is-set{transition:none}
.vfa__tgt svg{display:block;width:100%;height:100%;overflow:visible}
.vfa__tgt circle{fill:none;stroke:#A8432E;stroke-width:1.2;vector-effect:non-scaling-stroke}
.vfa__tgt .vfa__tgt-c{stroke:rgba(237,184,119,.35);stroke-width:.8;stroke-dasharray:1 5}
.vfa__tgt path{fill:none;stroke:#C8563C;stroke-width:1.4;vector-effect:non-scaling-stroke}
.vfa__tgt{filter:drop-shadow(0 0 6px rgba(168,67,46,.55))}
.vfa__svg--h .vfa__idx,.vfa__idx{display:none}
@media (min-width:1100px){
  .vfm{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(48px,5.5vw,104px);align-items:start;margin-top:clamp(24px,4vh,48px)}
  .vfa__pin{display:none}
  .vfa{position:sticky;top:calc(var(--hdr-hc,64px) + 3vh);margin:0}
  .vfa__in,.vfa.is-pinned .vfa__in{width:min(340px,calc((100vh - var(--hdr-hc,64px) - 9vh) * 340 / 760));max-width:none;margin:0;aspect-ratio:340/760;transform:none}
  .vfa__in::before{display:none}
  .vfa__svg:not(.vfa__svg--v){display:none}
  .vfa__svg--v{display:block}
  .vfa__r{left:var(--vx);top:var(--vy);width:29cqw}
  .vfa__r--lead{width:43cqw}
  .vfa__nm{margin-top:8px;font-size:.6rem;padding:2px 7px;background:var(--canvas);z-index:1}
  .vfc{margin:0;max-width:780px;padding-top:clamp(8px,2vh,24px)}
}
html.still .vfa__tgt{transition:none}
@media (forced-colors:active){.vfa__tgt circle,.vfa__tgt path,.vfa__cc,.vfa__ax,.vfa__dim{stroke:CanvasText}.vfa__dt{fill:CanvasText}}
/* END ABOUT8 BLOCK */

/* ===================================================================== DEPTS8 BLOCK (departments builder, owner batch 8, 2026-09-25, site-todo 105)
   /departments/, the Board of Directors page and Training and Development. The ink study plates (fx/inkstudy.js: the /departments/ hero and the
   T&D ARM plate), the console key that now carries the old department overview (fx/helm.js), the Board picture framed whole at every width,
   the dividers drawn as an instrument (fx/compass.js, scroll-driven both ways), the suture made by a wristed driver (fx/suture.js). Every rule
   without .fx-live / --on is the calm, finished version (no JS, html.still, module off). Transform, opacity and filter only animate. ===== */

/* ---- the Board picture (three chairs at the desk, 2752 x 1536): a 16:9 frame at every width, so the desk, the three chairs, the lamp and the
   robot always stay in frame (the old 4:3 and 16:10 crops cut the desk ends) ---- */
.hplate--board{width:min(100%,640px)}
.hplate--board .hplate__frame,.dp-plate .hplate__frame{aspect-ratio:16/9}
.hplate--board .hplate__frame > picture.pic > img,.dp-plate .hplate__frame > picture.pic > img{object-position:50% 50%}
@media (max-width:860px){.hplate--board .hplate__frame,.dp-plate .hplate__frame{aspect-ratio:16/9}}

/* ---- ink study plates (fx/inkstudy.js) ---- */
.ist{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 50% 48%,rgba(168,67,46,.12),rgba(59,43,36,.30) 56%,rgba(20,16,12,.55) 100%),var(--canvas)}
.ist::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 70px rgba(12,9,6,.55)}
.ist__cam{position:absolute;inset:12px;transform-origin:50% 50%;transition:transform 1.5s var(--ease-weight);will-change:transform}
.ist__con{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ist__box{position:absolute}
.ist__still,.ist__cv,.ist__lt{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen}
.ist__still{object-fit:fill;opacity:.94}
.ist--on .ist__still{opacity:.16;transition:opacity .8s var(--ease-inout)}
.ist--drawn .ist__still{opacity:0}
.ist__cv{opacity:0;transition:opacity .9s var(--ease-inout)}
.ist__cv.is-on{opacity:1}
.ist--focus .ist__cv.is-on{opacity:.55}
.ist__lt{opacity:0;filter:drop-shadow(0 0 5px rgba(255,150,80,.55));transition:opacity .8s var(--ease-inout)}
.ist__lt.is-lit{opacity:1}
.ist__con .ist__tg{fill:none;stroke:#C8563C;stroke-width:1.3;vector-effect:non-scaling-stroke}
.ist__con .ist__td{fill:#EDB877;stroke:none}
.ist__tgt{filter:drop-shadow(0 0 5px rgba(168,67,46,.6))}
.ist__tgt circle.c{fill:#A8432E;stroke:none}
.ist__lab{position:absolute;z-index:2;font-size:10px;line-height:1.2;letter-spacing:.14em;color:var(--text-secondary);white-space:nowrap;transition:color .5s var(--ease-out)}
.ist__lab--r{text-align:right}
.ist__lab.is-lit{color:#E8A07C}
/* the /departments/ hero: a square plate; on phones it follows the title and the lede */
.hplate--ist .hplate__frame{aspect-ratio:1}
@media (max-width:860px){.phero__in > .hplate--ist{order:2;justify-self:center;width:min(100%,420px)}}
@media (max-width:400px){.ist__lab{font-size:9px;letter-spacing:.1em}}

/* ---- the console key carries the old department overview (fx/helm.js). Every row is always in full; while a part is lit its row comes
   forward and the others step back (opacity only, so nothing moves) ---- */
.helm{align-items:start}
.helm__stick{position:sticky;top:calc(var(--hdr-hc,64px) + 24px)}
.helm__a{grid-template-columns:3.2em minmax(0,1fr) 14px}
.helm__arr{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;opacity:.55;transition:transform .5s var(--ease-out),opacity .5s var(--ease-out)}
.helm__a:hover .helm__arr,.helm__a:focus-visible .helm__arr,.helm__i.is-lit .helm__arr{opacity:1;transform:translate3d(2px,-2px,0)}
.helm__more{padding:0 0 16px calc(3.2em + 12px);transition:opacity .6s var(--ease-out)}
.helm__role{margin:0;font-size:.95rem;line-height:1.55;color:var(--text-primary);max-width:54ch}
.helm__meta{display:grid;gap:4px;margin:10px 0 0}
.helm__meta > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline}
.helm__meta > div[hidden]{display:none}
.helm__meta dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.helm__meta dd{margin:0;font-size:.9rem;line-height:1.45;color:var(--text-secondary)}
.helm--focus .helm__i:not(.is-lit) .helm__more{opacity:.5}
/* never an empty plate: the page's still stays as a faint ghost under the brush until the ink is laid */
.helm--on .helm__still{display:block;opacity:.18;transition:opacity .8s var(--ease-inout)}
.helm--drawn .helm__still{opacity:0}
@media (max-width:860px){
  .helm__stick{top:calc(var(--hdr-hc,64px) + 6px);z-index:2;background:var(--canvas);padding:0 0 10px}
  .helm__stick::after{content:"";position:absolute;left:0;right:0;top:100%;height:36px;background:linear-gradient(var(--canvas),rgba(38,32,26,0));pointer-events:none}
  .helm__plate{width:min(100%,40svh);margin:0 auto}
  .helm__more{padding-left:calc(3.2em + 12px)}
}
@media (max-width:860px) and (max-height:560px){.helm__stick{position:relative;top:auto}}
@media (max-width:560px){.helm__meta > div{grid-template-columns:minmax(0,1fr);gap:1px}.helm__meta > div + div{margin-top:4px}}

/* ---- the Board page: the teams overview shows the four teams only (the Board is the page itself), its line falling from the heading ---- */
#teams .vt__board{display:none}
@media (max-width:900px){
  #teams .vt__tree{display:none}
  #teams .vt__list{border-left:1px solid var(--rule);padding-left:20px}
  #teams .vt__item{position:relative}
  #teams .vt__item::before{content:"";position:absolute;left:-20px;top:40px;width:12px;height:1px;background:var(--rule-strong)}
}

/* ---- Setting the course: the dividers drawn as an instrument; the duties at a reading pace (the arcs follow the scroll both ways) ---- */
.bdc__div .bdc__leg{fill:rgba(242,233,216,.1);stroke:rgba(242,233,216,.86);stroke-width:1.1;stroke-linejoin:round}
.bdc__div .bdc__hx{stroke:rgba(242,233,216,.34);stroke-width:.8}
.bdc__div .bdc__fer{fill:rgba(237,184,119,.22);stroke:#EDB877;stroke-width:1}
.bdc__div .bdc__pen{fill:rgba(168,67,46,.55);stroke:#C8563C;stroke-width:1}
.bdc__div .bdc__hinge{fill:var(--canvas);stroke:rgba(242,233,216,.9);stroke-width:1.2}
.bdc__div .bdc__knurl{stroke:rgba(242,233,216,.6);stroke-width:1}
.bdc__div .bdc__knob{fill:rgba(242,233,216,.5);stroke:none}
.bdc__svg .bdc__q{transition:none}
@media (min-width:901px){.bdc__list li{min-height:min(24vh,230px)}}

/* ---- Training and Development: the suture plate in the section's left column (sticky beside the list; compact sticky plate on phones) ---- */
#remit .split:has(> .sut__plate){grid-template-rows:auto 1fr}
#remit .split > .sut-head{grid-column:1;grid-row:1;margin-bottom:0}
#remit .split > .sut{grid-column:2;grid-row:1 / span 2}
.sut__plate{grid-column:1;grid-row:2;align-self:start;position:sticky;top:calc(var(--hdr-hc,64px) + 28px);margin:clamp(20px,4vh,40px) 0 0;width:min(100%,480px)}
.sut__frame{position:relative;aspect-ratio:480/300;border:1px solid var(--rule);overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 50% 50%,rgba(168,67,46,.10),rgba(59,43,36,.30) 60%,rgba(20,16,12,.5) 100%),var(--canvas)}
.sut__frame::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px rgba(12,9,6,.5);z-index:1}
.sut__frame > .sut__svg,.sut__frame > .sut__ew{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sut__ew{z-index:2}
.sut__svg path.sut__gap{fill:rgba(12,9,6,.55);stroke:none}
.sut__svg .hp{stroke:rgba(242,233,216,.16)}
/* round 2: the tissue pad drawn in ink (hatched cut face, shaded far edges, fibres, hatched lips of the incision) */
.sut__svg .sh{stroke:rgba(242,233,216,.2)}
.sut__svg .hf{stroke:rgba(242,233,216,.34)}
.sut__svg .hl{stroke:rgba(242,233,216,.4)}
.sut__svg path.sut__dims{stroke:rgba(242,233,216,.4)}
.sut__svg path.sut__thread{fill:none;stroke:#C8563C;stroke-width:1.7;vector-effect:non-scaling-stroke}
.sut__svg path.sut__under{fill:none;stroke:rgba(200,86,60,.45);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.sut__svg .sut__pt{fill:#C8563C;stroke:none;opacity:0}
.sut__svg path.sut__knot{fill:none;stroke:#C8563C;stroke-width:1.3}
.sut__st .sut__thread,.sut__st .sut__under,.sut__st .sut__knot,.sut__tail{opacity:0}
.sut__st.is-on .sut__thread,.sut__st.is-on .sut__under,.sut__st.is-on .sut__knot,.sut__st.is-on .sut__pt,.sut__tail.is-on{opacity:1}
.sut__tgt{opacity:0;transition:opacity .5s var(--ease-out),transform .6s var(--ease-weight);filter:drop-shadow(0 0 4px rgba(168,67,46,.6))}
.sut__tgt.is-on{opacity:1}
.sut__tgt circle,.sut__tgt path{fill:none;stroke:#C8563C;stroke-width:1.2;vector-effect:non-scaling-stroke}
.sut__tgt .sut__td{fill:#EDB877;stroke:none}
.sut__ew path,.sut__ew circle{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.sut__ew .ew__body{fill:#2E2620;stroke:none}
.sut__ew .ew__o{fill:none;stroke:rgba(242,233,216,.9);stroke-width:1.1}
.sut__ew .ew__hl{fill:none;stroke:rgba(242,233,216,.5);stroke-width:1}
.sut__ew .ew__sh{fill:none;stroke:rgba(242,233,216,.28);stroke-width:.8}
.sut__ew .ew__cut{fill:none;stroke:rgba(242,233,216,.5);stroke-width:.9;stroke-dasharray:2 2}
.sut__ew .ew__cab{fill:none;stroke:#EDB877;stroke-width:.9}
.sut__ew .ew__ser{fill:none;stroke:rgba(242,233,216,.8);stroke-width:.8}
.sut__ew .ew__pin{fill:#EDB877;stroke:none}
.sut__ew .ew__ndl{fill:none;stroke:#EDB877;stroke-width:1.5}
.sut__ew .ew__swg{fill:none;stroke:#EDB877;stroke-width:2.6}
.sut__ew .ew__thr{fill:none;stroke:#C8563C;stroke-width:1.3}
.sut--live .sut__ew{will-change:transform}
.sut__cap{display:flex;justify-content:space-between;gap:12px;margin-top:12px;color:var(--text-secondary)}
.sut__count{white-space:nowrap}
@media (max-width:900px){
  #remit .split:has(> .sut__plate){display:block}
  #remit .split > .sut-head{margin-bottom:18px}
  .sut__plate{top:calc(var(--hdr-hc,64px) + 6px);z-index:2;width:100%;margin:0 0 22px;padding-bottom:8px;background:var(--canvas)}
  .sut__plate::after{content:"";position:absolute;left:0;right:0;top:100%;height:36px;background:linear-gradient(var(--canvas),rgba(38,32,26,0));pointer-events:none}
  .sut__frame{width:min(100%,calc(27svh * 1.6));margin:0 auto}
  .sut__cap{width:min(100%,calc(27svh * 1.6));margin:8px auto 0}
}
@media (max-width:900px) and (max-height:560px){.sut__plate{position:relative;top:auto}}

/* ---- Training and Development: the ARM plate beside the ARM words ---- */
.d8arm{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center;margin:clamp(8px,2vh,20px) 0 clamp(36px,6vh,64px)}
.d8arm__fig{margin:0}
.d8arm__plate{aspect-ratio:1;border:1px solid var(--rule)}
.d8arm .w5arm-box{margin:0}
.d8arm .w5arm{grid-template-columns:minmax(0,1fr)}
.d8arm .w5arm__mark{display:none}
.d8arm__key{list-style:none;margin:clamp(18px,3vh,28px) 0 0;padding:0;border-top:1px solid var(--rule)}
.d8arm__key li{border-bottom:1px solid var(--rule)}
.ist__k{display:grid;grid-template-columns:3em minmax(0,1fr);align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 0;border:0;background:none;
  color:var(--text-primary);font:inherit;font-family:var(--f-head);font-weight:600;font-size:1rem;text-align:left;cursor:pointer;position:relative}
.ist__k::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out);pointer-events:none}
.ist__k.is-lit::after{transform:scaleX(1)}
.ist__kn{color:var(--text-secondary);transition:color .5s var(--ease-out)}
.ist__k.is-lit .ist__kn{color:#E08A6C}
.ist__k:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:860px){.d8arm{grid-template-columns:minmax(0,1fr);gap:20px}.d8arm__fig{width:min(100%,420px);justify-self:center}.d8arm__txt{display:contents}.d8arm__key{order:2;margin:0}.d8arm .w5arm-box{order:3}}

/* ---- Training and Development: a department with no events yet shows no empty events section; the next figure takes its number ---- */
.d8n-4{display:none}
main:has(#sig-events > .empty) #events{display:none}
main:has(#sig-events > .empty) .d8n-5{display:none}
main:has(#sig-events > .empty) .d8n-4{display:inline}

html.still .ist__cam,html.still .ist__cv,html.still .ist__lt,html.still .ist__still,html.still .helm__more,html.still .helm__still,html.still .sut__tgt,html.still .helm__arr{transition:none}
@media (forced-colors:active){.ist__lt,.ist__tgt{display:none}.ist__k.is-lit{outline:2px solid Highlight}.sut__ew .ew__o,.sut__ew .ew__ndl{stroke:CanvasText}}
/* END DEPTS8 BLOCK */

/* ===================================================================== DEPTS8B BLOCK (departments2 builder, owner batch 8, 2026-09-25, site-todo 105
   items 18 to 21). Research and Innovation: "Three ways in" (fx/triad.js, scroll-driven both ways) and the Current leadership row that keeps
   its spacing when photos arrive. Awareness: the robotic system explained (fx/lens.js). The label face is IBM Plex Sans (the --f-mono
   variable above). Every rule without --live / --on is the calm, finished version (no JS, html.still, module off). ===== */

/* ---- Research and Innovation: Three ways in ---- */
.tri8{margin-top:clamp(64px,10vh,120px)}
.tri8__head{max-width:62ch;margin-bottom:clamp(22px,3.4vh,36px)}
.tri8__pin{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.tri8__fig{margin:0;width:100%;justify-self:center;min-width:0}
.tri8__plate{aspect-ratio:4/3;width:100%;border:1px solid var(--rule)}
.tri8--pt{cursor:pointer}
.tri8__con .tri8__mo :is(path,circle,ellipse){fill:none;stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.tri8__con .tri8__mo .ti{stroke:#C8563C;stroke-width:1.8}
.tri8__con .tri8__mo .tt{stroke:#C8563C;stroke-width:1.2}
.tri8__con .tri8__mo .to{stroke:rgba(237,184,119,.75);stroke-dasharray:3 4}
.tri8__con .tri8__mo .ta{stroke:rgba(237,184,119,.8);stroke-dasharray:6 4}
.tri8__con .tri8__mo .tah{stroke:rgba(237,184,119,.9)}
.tri8__con .tri8__mo .tw{stroke:rgba(242,233,216,.7)}
.tri8__con .tri8__mo .th{stroke:rgba(242,233,216,.26)}
.tri8__con .tri8__mo .tp{stroke:#C8563C;stroke-width:1.4}
.tri8__con .tri8__mo .tf{stroke:rgba(237,184,119,.7);stroke-dasharray:8 5}
.tri8__con .tri8__mo .tf--faint{stroke:rgba(237,184,119,.35)}
.tri8__con .tri8__mo .tw2{stroke:#EDB877;stroke-width:1.5}
.tri8__con .tri8__mo .tg{stroke:rgba(237,184,119,.75);stroke-dasharray:3 3}
.tri8__con .tri8__mo .tj{fill:#EDB877;stroke:none}
.tri8__mo{opacity:.55;transition:opacity .7s var(--ease-out)}
.tri8--focus .tri8__mo{opacity:.1}
.tri8__mo.is-on,.tri8--focus .tri8__mo.is-on{opacity:1}
.tri8--live .tri8__mo:not(.is-on){opacity:0}
.tri8__tgt{transition:transform 1.1s var(--ease-weight)}
/* the key: three approaches with a rail that fills with the scroll */
.tri8__keys{position:relative;display:grid;border-top:1px solid var(--rule);padding-left:18px}
.tri8__rail{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule);display:none;pointer-events:none}
.tri8--live .tri8__rail{display:block}
.tri8__fill{position:absolute;inset:0;background:var(--accent);transform-origin:50% 0;transform:scaleY(var(--tp,0))}
.tri8__k{position:relative;display:grid;grid-template-columns:2.4em minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 0;
  border:0;border-bottom:1px solid var(--rule);background:none;color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;transition:opacity .5s var(--ease-out)}
.tri8__k::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out);pointer-events:none}
.tri8__k.is-lit::after{transform:scaleX(1)}
.tri8__k:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tri8__n{font-family:var(--f-display);font-size:1.75rem;line-height:1;letter-spacing:.02em;color:var(--text-secondary);transition:color .5s var(--ease-out)}
.tri8__k.is-lit .tri8__n{color:#E08A6C}
.tri8__kt{min-width:0}
.tri8__nm{display:block;font-family:var(--f-head);font-weight:600;font-size:1.05rem;line-height:1.3}
.tri8__sb{display:block;margin-top:3px;font-size:10.5px;line-height:1.35;color:var(--text-secondary)}
.tri8--focus .tri8__k:not(.is-lit){opacity:.55}
/* the cards: stacked in the still version; one at a time, in one place, while live */
.tri8__read{display:grid;gap:26px;margin-top:clamp(18px,3vh,28px)}
.tri8__c{min-width:0;padding-left:16px;border-left:1px solid rgba(168,67,46,.7)}
.tri8--live .tri8__read{gap:0}
.tri8--live .tri8__c{grid-area:1/1;opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);pointer-events:none}
.tri8--live .tri8__c.is-on{opacity:1;transform:none;pointer-events:auto}
.tri8__ct{margin:0 0 12px;color:#E8A07C}
.tri8__dl{display:grid;gap:12px;margin:0}
.tri8__dl > div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:12px;align-items:start}
.tri8__dl dt{padding-top:.4em;font-size:10.5px;color:var(--text-secondary)}
.tri8__dl dd{margin:0;font-size:.97rem;line-height:1.55;overflow-wrap:break-word}
.tri8__mo-d{display:flex;gap:12px;align-items:flex-start}
.tri8__g{flex:none;width:54px;height:36px;margin-top:2px}
.tri8__g :is(path,circle){fill:none;stroke:rgba(242,233,216,.8);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.tri8__g .gw{stroke:rgba(242,233,216,.4)}
.tri8__g .gs{stroke:rgba(242,233,216,.92);stroke-width:1.8}
.tri8__g .gf{stroke:rgba(242,233,216,.4);stroke-dasharray:3 3}
.tri8__g .ga{stroke:#EDB877;stroke-dasharray:4 3}
.tri8__g .gh{stroke:#EDB877}
.tri8__g .gt{fill:#C8563C;stroke:none}
.tri8__pc{margin-right:4px;font-family:var(--f-display);font-weight:400;font-size:1.65rem;line-height:1;letter-spacing:.02em;color:#E8A07C;vertical-align:-2px}
.tri8__src{max-width:64ch;margin-top:clamp(18px,3vh,28px);font-size:.84rem;line-height:1.55;color:var(--text-secondary)}
/* pinned while motion is on: the plate and the key stay while the track scrolls past (the step follows the scroll both ways) */
html.fx:not(.still) .tri8__track{height:calc(100vh + 210vh);height:calc(100svh + 210svh)}
html.fx:not(.still) .tri8__pin{position:sticky;top:max(calc(var(--hdr-hc,64px) + 20px),calc(50svh + var(--hdr-hc,64px) / 2 - 290px))}
html.fx:not(.still) .tri8__fig{width:min(100%,max(300px,calc((100svh - var(--hdr-hc,64px) - 150px) * 4 / 3)))}
@media (max-width:900px){
  .tri8__pin{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
  html.fx:not(.still) .tri8__track{height:calc(100vh + 200vh);height:calc(100svh + 200svh)}
  html.fx:not(.still) .tri8__pin{top:calc(var(--hdr-hc,64px) + 8px)}
  html.fx:not(.still) .tri8__fig{width:min(100%,max(240px,calc((100svh - var(--hdr-hc,64px) - 410px) * 4 / 3)))}
  .tri8__plate{border-color:var(--rule)}
  .tri8--live .tri8__keys{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 0 0;border-top:0}
  .tri8--live .tri8__rail{left:0;right:0;top:0;bottom:auto;width:auto;height:1px}
  .tri8--live .tri8__fill{transform-origin:0 50%;transform:scaleX(var(--tp,0))}
  .tri8--live .tri8__k{grid-template-columns:minmax(0,1fr);gap:2px;min-height:52px;padding:4px 6px 8px 0;border-bottom:0}
  .tri8--live .tri8__n{font-size:1.25rem}
  .tri8--live .tri8__nm{font-size:.94rem}
  .tri8--live .tri8__sb{display:none}
  .tri8--live .tri8__read{margin-top:12px}
  .tri8__dl{gap:9px}
  .tri8__dl > div{grid-template-columns:6.4em minmax(0,1fr);gap:10px}
  .tri8__dl dd{font-size:.93rem;line-height:1.5}
  .tri8__g{width:44px;height:30px}
  .tri8__pc{font-size:1.4rem}
}
@media (max-width:400px){.tri8--live .tri8__nm{font-size:.86rem}.tri8__dl > div{grid-template-columns:5.8em minmax(0,1fr)}}
@media (max-height:600px){html.fx:not(.still) .tri8__track{height:auto}html.fx:not(.still) .tri8__pin{position:relative;top:auto}}
html.still .tri8__tgt,html.still .tri8__mo,html.still .tri8__k{transition:none}
@media (forced-colors:active){.tri8__k.is-lit{outline:2px solid Highlight}.tri8__mo{opacity:1}}

/* ---- Current leadership (Research and Innovation, Awareness, Public Relations): the heads and the OTCoE Research Coordinators on one level,
   equal tiles with generous, equal gaps; the portrait size is one variable, so a photo that replaces a monogram takes exactly its place and the
   rings, sparks and glow never touch. Wide screens: the head above, the level across the full width, four across; below 700 px each group
   on its own line, two across. ---- */
.lead8 .split:has(.sigl__lv){grid-template-columns:minmax(0,1fr);gap:clamp(20px,3.4vh,36px)}
.lead8 #sig-lead{--lp:clamp(112px,10.5vw,160px)}
.lead8 #sig-lead .people{padding:14px 0 0 14px;gap:clamp(36px,5vh,52px) clamp(28px,3.6vw,56px)}
.lead8 #sig-lead .person{min-width:0;gap:20px}
.lead8 #sig-lead .person__photo{width:var(--lp)}
.lead8 #sig-lead .person::before{width:calc(var(--lp) + 24px);height:calc(var(--lp) + 24px)}
.lead8 #sig-lead .person__name{overflow-wrap:break-word}
.lead8 .sigl__lv{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vh,44px) clamp(32px,5vw,80px)}
.lead8 .sigl__lv .people{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.lead8 .sigl__lv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.lead8 .sigl__lv{grid-template-columns:minmax(0,1fr)}.lead8 #sig-lead{--lp:min(116px,30vw)}.lead8 #sig-lead .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}}
/* ---- Awareness: the robotic system, explained (fx/lens.js): the plate beside its numbered key, DETAIL A on a leader line ---- */
.lens8{margin-top:clamp(56px,10vh,110px)}
.lens8__fig{margin:clamp(22px,3.4vh,36px) 0 0}
.lens8__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
.lens8__plate{aspect-ratio:1;width:100%;border:1px solid var(--rule)}
.lens8__svg,.lens8__lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lens8__svg{z-index:1}
.lens8__tgt{transition:transform 1.1s var(--ease-weight)}
.lens8__lead{z-index:2}
.lens8__lead path{fill:none;stroke:#C8563C;stroke-width:1.2;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.lens8__lead circle{fill:#EDB877;stroke:none}
.lens8__det{position:absolute;z-index:3;left:4%;top:59%;width:34%}
.lens8__lo{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#0B0907;border:1px solid #A8432E;
  box-shadow:0 0 0 5px rgba(20,16,12,.7),0 0 26px rgba(168,67,46,.35)}
.lens8__lo img{position:absolute;left:-14%;top:9%;width:128%;height:auto;max-width:none;mix-blend-mode:screen;opacity:.95}
.lens8__lo::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 30px rgba(0,0,0,.85);pointer-events:none}
.lens8__dl{display:block;margin-top:8px;text-align:center;font-size:10px;letter-spacing:.14em;color:#E8A07C;white-space:nowrap}
.lens8__lead,.lens8__det{transition:opacity .6s var(--ease-out),transform .8s var(--ease-weight)}
.lens8__det{transform-origin:65% 0}
/* round 2: one loupe per part; without JS and in html.still only D (the 3D view) shows, as before */
.lens8__det[data-part]:not([data-part="view3d"]),.lens8__lead g[data-part]:not([data-part="view3d"]){display:none}
html:not(.still) .lens8__fig.fx-live .lens8__det[data-part]{display:block}
html:not(.still) .lens8__fig.fx-live .lens8__lead g[data-part]{display:inline}
html:not(.still) .lens8__fig.fx-live .lens8__det:not(.is-on){opacity:0;transform:scale(.72)}
html:not(.still) .lens8__fig.fx-live .lens8__lead g:not(.is-on){opacity:0}
.lens8__lead g{transition:opacity .6s var(--ease-out)}
.lens8__det--sq .lens8__lo img{left:0;top:0;width:100%;height:100%;object-fit:cover}
.lens8__key{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.lens8__i{position:relative;padding:4px 0 14px;border-bottom:1px solid var(--rule);transition:opacity .5s var(--ease-out)}
.lens8__i::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out);pointer-events:none}
.lens8__i.is-lit::after{transform:scaleX(1)}
.lens8--focus .lens8__i:not(.is-lit){opacity:.55}
.lens8__k{display:grid;grid-template-columns:2.4em minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:48px;padding:6px 0 2px;border:0;background:none;
  color:var(--text-primary);font:inherit;text-align:left;cursor:pointer}
.lens8__k:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lens8__n{font-family:var(--f-display);font-size:1.75rem;line-height:1;color:var(--text-secondary);transition:color .5s var(--ease-out)}
.lens8__i.is-lit .lens8__n{color:#E08A6C}
.lens8__nm{font-family:var(--f-head);font-weight:600;font-size:1.05rem;line-height:1.3}
.lens8__p{margin:2px 0 0 calc(2.4em + 12px);max-width:44ch;font-size:.95rem;line-height:1.55;color:var(--text-secondary);transition:color .5s var(--ease-out)}
.lens8__i.is-lit .lens8__p{color:var(--text-primary)}
.lens8__again{margin-top:18px;min-height:44px;padding:0 18px;border:1px solid var(--rule-strong);background:none;color:var(--text-primary);cursor:pointer}
.lens8__again:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lens8__again[hidden]{display:none}
@media (max-width:900px){
  .lens8__grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .lens8__plate{width:min(100%,560px);justify-self:center}
  .lens8__p{margin-left:0;font-size:.93rem}
  .lens8__n{font-size:1.4rem}
  .lens8__dl{font-size:9px;letter-spacing:.1em}
}
html.still .lens8__tgt,html.still .lens8__det,html.still .lens8__lead,html.still .lens8__i{transition:none}
@media (forced-colors:active){.lens8__i.is-lit{outline:2px solid Highlight}}
/* END DEPTS8B BLOCK */

/* =====================================================================
   SITE8 BLOCK (owner batch 8, site-todo 105 and 106: the forms open inside the site; the footer; programs and events)
   ===================================================================== */
/* ---- THE FORM PANEL (site.js "THE FORM PANEL"): the dimmed page, a dark plate with a hairline Sanguine frame, the Google Form inside.
   Wider than 720 px: a modal in the middle of the screen. Phones: a sheet that rises from the bottom. Transform and opacity only. */
html.fp-open body{overflow:hidden}
html.fp-over .cur,html.fp-over .ret{opacity:0 !important}
.fp{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px}
.fp[hidden]{display:none}
.fp__veil{position:absolute;inset:0;background:rgba(20,16,12,.82);opacity:0;transition:opacity .38s var(--ease-out)}
.fp.is-open .fp__veil{opacity:1}
.fp__dlg{position:relative;display:flex;flex-direction:column;width:min(820px,100%);height:min(92dvh,1000px);
  background:radial-gradient(120% 80% at 50% 0%,#33271F 0%,var(--canvas) 62%);border:1px solid rgba(168,67,46,.55);
  box-shadow:0 0 0 1px rgba(38,32,26,.9),0 30px 90px rgba(0,0,0,.55);border-radius:4px;
  opacity:0;transform:translate3d(0,26px,0) scale(.985);transition:opacity .34s var(--ease-out),transform .46s var(--ease-out)}
.fp.is-open .fp__dlg{opacity:1;transform:none}
/* the corner ticks of a drawing sheet */
.fp__dlg::before,.fp__dlg::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;border:1px solid var(--accent)}
.fp__dlg::before{left:-5px;top:-5px;border-right:0;border-bottom:0}
.fp__dlg::after{right:-5px;bottom:-5px;border-left:0;border-top:0}
.fp__sent{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}
.fp__head{display:flex;align-items:center;gap:14px;padding:14px 14px 12px 18px;border-bottom:1px solid var(--rule)}
.fp__mk{flex:none;width:44px;height:44px;fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.fp__mk .c{stroke:rgba(242,233,216,.55)}
.fp__mk .d{stroke:rgba(242,233,216,.35)}
.fp__mk .t{stroke:var(--accent);stroke-width:1.4}
.fp__tt{flex:1;min-width:0}
.fp__k{margin:0;color:var(--text-secondary);font-size:11px}
.fp__t{margin:2px 0 0;font-family:var(--f-display);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:var(--text-primary);overflow-wrap:anywhere}
.fp__t:focus{outline:none}
.fp__t:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.fp__x{flex:none;display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--rule-strong);border-radius:999px;
  background:transparent;color:var(--text-primary);cursor:pointer;transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out)}
.fp__x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.fp__x:hover{border-color:var(--accent);background:rgba(168,67,46,.14)}
.fp__xl{font-size:11px}
.fp__sign{margin:0;padding:10px 18px;font-size:.92rem;line-height:1.45;color:var(--text-primary);background:rgba(168,67,46,.16);border-bottom:1px solid rgba(168,67,46,.4)}
.fp__sign[hidden]{display:none}
.fp__plate{position:relative;flex:1;min-height:0;margin:12px;border:1px solid var(--rule);background:#F2E9D8;overflow:hidden}
.fp__if{position:absolute;inset:0;width:100%;height:100%;border:0;background:#F2E9D8;opacity:0;transition:opacity .45s var(--ease-out)}
.fp__if[hidden]{display:none}
.fp.is-ready .fp__if{opacity:1}
/* the loading state: a construction circle on the parchment, the Sanguine target travelling round it while Google answers */
.fp__load{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;
  background:#F2E9D8;color:#3B2B24;opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out),visibility 0s linear .3s}
.fp.is-loading .fp__load{opacity:1;visibility:visible;transition:opacity .3s var(--ease-out)}
.fp__load svg{width:120px;height:120px;fill:none;overflow:visible}
.fp__load .c{stroke:rgba(59,43,36,.45);stroke-width:1}
.fp__load .o{stroke:rgba(59,43,36,.18);stroke-width:1;stroke-dasharray:2 5}
.fp__load .t{stroke:var(--accent);stroke-width:1.4;fill:none}
.fp__orb{transform-origin:60px 60px;transform-box:view-box}
.fp.is-open.is-loading .fp__orb{animation:fp-orb 2.4s var(--ease-inout) infinite}
@keyframes fp-orb{to{transform:rotate(360deg)}}
.fp__load p{margin:0;max-width:34ch;color:#3B2B24;font-size:12px}
.fp.is-slow .fp__orb{animation:none}
.fp__foot{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;padding:0 18px 12px}
.fp__note{margin:0;font-size:.88rem;color:var(--text-secondary)}
.fp__alt{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text-primary);text-decoration:underline;text-decoration-color:rgba(168,67,46,.8);text-underline-offset:4px;font-size:.92rem}
.fp__alt svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6}
.fp__alt:hover{text-decoration-color:var(--accent);color:#fff}
@media (max-width:720px){
  .fp{padding:0;place-items:end stretch}
  .fp__dlg{width:100%;height:calc(100dvh - max(10px,env(safe-area-inset-top)));border-radius:14px 14px 0 0;border-bottom:0;
    transform:translate3d(0,100%,0);opacity:1;transition:transform .48s var(--ease-out)}
  .fp__dlg::before,.fp__dlg::after{display:none}
  .fp__head{padding:10px 10px 10px 14px;gap:10px}
  .fp__head::before{content:"";position:absolute;left:50%;top:5px;width:40px;height:3px;margin-left:-20px;border-radius:2px;background:rgba(242,233,216,.25)}
  .fp__mk{width:36px;height:36px}
  .fp__xl{display:none}
  .fp__x{padding:0;width:44px;justify-content:center}
  .fp__plate{margin:0;border-left:0;border-right:0}
  .fp__foot{padding:4px 14px calc(6px + env(safe-area-inset-bottom))}
  .fp__note{display:none}
}
html.still .fp__veil,html.still .fp__dlg,html.still .fp__if,html.still .fp__load{transition:none}
html.still .fp.is-open.is-loading .fp__orb{animation:none}
@media (forced-colors:active){.fp__dlg{border:2px solid CanvasText}.fp__plate{border:1px solid CanvasText}}
/* ---- membership, open (Get Involved FIG. 02): the drawn door is the moment (it stands open while the form is open, fx/paths.js),
   the box is one call to apply: chip, heading, who, the button and a small line that says the form opens here */
.jb-door{width:clamp(96px,10.6vw,138px)}
.joinbox__go{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:4px 0 0}
.joinbox__hint{color:var(--text-secondary);font-size:11px}
@media (max-width:560px){.jb{grid-template-columns:84px minmax(0,1fr)}.jb-door{width:84px}.joinbox__go .btn{width:100%}}

/* ---- THE FOOTER (owner batch 8: "fix footer as well"). Four rows: the band (motto and journey), the colophon (round logo once, the
   identity line with the social tiles, open ground on the right where the last frame's fan and the construction rest), contact (three
   even people and the email), the index (four columns) and the legal line. .ftr8 scopes every rule to the new template. ---- */
.ftr8 .ftr__band{margin-bottom:clamp(40px,6vh,64px)}
.ftr8 .ftr__top{grid-template-columns:auto minmax(0,1fr) minmax(0,clamp(220px,24vw,340px));align-items:center;gap:clamp(24px,4vw,64px);min-height:220px}
.ftr8 .ftr__rest{align-self:stretch;min-height:200px}
.ftr8 .ftr__side{gap:24px;align-content:center}
.ftr8 .ftr__line{margin:0;max-width:34ch;font-family:var(--f-head);font-weight:500;font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.45;color:var(--text-primary);text-wrap:balance}
.ftr8 .ftr__soc{width:100%}
.ftr8 .ftr__soc .socs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px}
.ftr8 .ftr__soc .soc{min-height:60px;padding:10px 14px}
/* contact: four even cells, each opened by a hairline with a short Sanguine tick (the drawing's dimension mark) */
.ftr8 .ftr__people{margin-top:clamp(40px,6vh,64px);padding-top:clamp(24px,3.5vh,36px);border-top:1px solid var(--rule)}
.ftr8 .ftr__ph{margin:0 0 16px;color:var(--text-secondary);font-size:12px}
.ftr8 .ftr__pl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,44px);margin:0;padding:0;list-style:none}
.ftr8 .ftr__pl > li{position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:0;padding:16px 0 0;border-top:1px solid rgba(242,233,216,.12)}
.ftr8 .ftr__pl > li::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:1px;background:var(--accent)}
.ftr8 .ftr__pwho{display:flex;flex-direction:column;gap:4px;white-space:normal}
.ftr8 .ftr__pname{font-family:var(--f-head);font-weight:600;font-size:1.05rem;letter-spacing:.01em;color:var(--text-primary);line-height:1.25}
.ftr8 .ftr__prole{display:block;margin:0;font-size:11px;letter-spacing:.14em;color:var(--text-secondary)}
.ftr8 .ftr__sep{display:none}
.ftr8 .ftr__pphone,.ftr8 .ftr__pmail{position:relative;display:inline-flex;align-items:center;min-height:44px;margin-top:4px;color:var(--text-primary);text-decoration:none;
  font-family:var(--f-head);font-weight:500;font-size:.98rem;letter-spacing:.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ftr8 .ftr__pmail{white-space:normal;overflow-wrap:anywhere}
.ftr8 .ftr__pphone::after,.ftr8 .ftr__pmail::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:var(--text-primary);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease-out)}
.ftr8 .ftr__pphone:hover::after,.ftr8 .ftr__pmail:hover::after{transform:scaleX(1)}
.ftr8 .ftr__addr{margin:2px 0 0;max-width:none;font-size:.92rem;line-height:1.5;color:var(--text-secondary)}
/* the index */
.ftr8 .ftr__cols{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,5vh,56px)}
.ftr8 .ftr__small{margin-top:clamp(32px,4.5vh,52px)}
@media (max-width:1100px){
  .ftr8 .ftr__top{grid-template-columns:auto minmax(0,1fr) minmax(0,200px)}
  .ftr8 .ftr__pl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
}
@media (max-width:980px){.ftr8 .ftr__top{justify-items:stretch}}
@media (max-width:860px){
  /* tablets: the right column stays open ground for the fan (lastframe.js lands it there down to 641 px); the tiles stand upright */
  .ftr8 .ftr__top{grid-template-columns:auto minmax(0,1fr) minmax(0,210px);gap:24px}
  .ftr8 .ftr__logo--round img{width:150px}
  .ftr8 .ftr__soc .soc{flex-direction:column;align-items:flex-start;gap:8px;padding:12px}
  .ftr8 .ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones: the logo and the line side by side, the tiles under them; each contact one even row (name and role left, phone right) */
@media (max-width:620px){
  .ftr8 .ftr__top{grid-template-columns:96px minmax(0,1fr);align-items:center;min-height:0;gap:18px 18px}
  .ftr8 .ftr__rest{display:none}
  .ftr8 .ftr__logo--round img{width:96px}
  .ftr8 .ftr__side{display:contents}
  .ftr8 .ftr__line{font-size:1rem}
  .ftr8 .ftr__soc{grid-column:1 / -1}
  .ftr8 .ftr__soc .socs{max-width:none}
  .ftr8 .ftr__pl{grid-template-columns:minmax(0,1fr);row-gap:0}
  .ftr8 .ftr__pl > li.ftr__person{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
  .ftr8 .ftr__pl > li.ftr__mail{padding:12px 0 4px}
  .ftr8 .ftr__pphone{margin-top:0}
}
@media (max-width:360px){.ftr8 .ftr__pl > li.ftr__person{flex-direction:column;align-items:flex-start;gap:0}}
/* the fan's construction circle rises about two radii above the ember (the row's middle): the colophon starts a little lower so the circle
   never crosses the band's rule */
@media (min-width:861px){.ftr8 .ftr__band{margin-bottom:20px}.ftr8 .ftr__top{padding-top:56px}}

/* ---- PROGRAMS, THE LEDGER (programs-events critic items 0, 5, 14, 15): groups by the Leading Rule's stations, each program a numbered
   row in the /departments/ row language; the name is the link and its hit area covers the row; a folio arrow instead of a foot phrase. ---- */
.plg{margin-top:clamp(30px,4.5vh,52px)}
.plg:first-child{margin-top:8px}
.plg__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding-bottom:12px;border-bottom:1px solid var(--rule-strong)}
.plg__n{min-width:clamp(44px,5vw,72px);color:var(--accent);font-size:12px}
.plg__t{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.1;letter-spacing:.06em;text-transform:uppercase}
.plg__c{color:var(--text-secondary);font-size:11px}
.plg__go{margin-left:auto;font-size:.9rem;min-height:44px}
.plr-list{margin:0;padding:0;list-style:none}
.plr{position:relative;display:grid;grid-template-columns:clamp(44px,5vw,72px) minmax(0,1fr) auto 22px;gap:6px clamp(14px,2vw,28px);align-items:center;
  padding:18px 0;border-bottom:1px solid var(--rule);transition:background-color .35s var(--ease-out)}
.plr__n{font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;color:var(--text-primary);opacity:.34;font-variant-numeric:tabular-nums;transition:opacity .35s var(--ease-out)}
.plr__b{display:grid;gap:4px;min-width:0}
.plr__k{margin:0;color:var(--text-secondary);font-size:11px}
.plr__t{margin:0;font-family:var(--f-head);font-weight:600;font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.3}
.plr__t a{color:var(--text-primary);text-decoration:none}
.plr__t a::after{content:"";position:absolute;inset:0;z-index:1}
.plr__t a:focus-visible{outline:none}
.plr:focus-within{outline:2px solid var(--accent);outline-offset:4px}
.plr__s{margin:0;max-width:72ch;color:var(--text-secondary);font-size:.95rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plr__m{justify-self:end}
.plr__arr{width:20px;height:20px;fill:none;stroke:var(--text-secondary);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease-out),stroke .35s var(--ease-out)}
@media (hover:hover){
  .plr:hover{background:linear-gradient(90deg,rgba(242,233,216,0),rgba(242,233,216,.045) 14%,rgba(242,233,216,0) 78%)}   /* R4 VERIFY: a light that fades out, never a flat lit rectangle */
  .plr:hover .plr__n{opacity:.95}
  .plr:hover .plr__arr{transform:translate3d(4px,0,0);stroke:var(--accent)}
}
.plr-more{margin:clamp(20px,3vh,32px) 0 0;color:var(--text-secondary)}
.plr-more__n{color:var(--accent)}
@media (max-width:720px){
  .plr{grid-template-columns:34px minmax(0,1fr) 18px;align-items:start;padding:16px 0}
  .plr__n{font-size:1.3rem;padding-top:2px}
  .plr__m{grid-column:2;grid-row:2;justify-self:start}
  .plr__arr{grid-column:3;grid-row:1;margin-top:4px;width:18px;height:18px}
  .plg__n{min-width:34px}
  .plg__go{margin-left:0;flex-basis:100%;justify-content:flex-start}
}
html.still .plr,html.still .plr__n,html.still .plr__arr{transition:none}

/* the Leading Rule reads as an instrument: an opaque ground with one hairline (nothing shows through it), no "/ N" text (the ticks are the
   count, drawn heavier), short station names on tablets so nothing is cut */
.prule{background:var(--canvas);box-shadow:0 -14px 0 var(--canvas),0 1px 0 var(--rule)}
.prule__st li[data-n]:not([data-n=""])::after{content:none}
.prule__dots i{width:1.5px;opacity:1}
@media (max-width:1023px) and (min-width:768px){.prule__st{font-size:10px;letter-spacing:.1em}}
@media (max-width:767px){.prule{background:var(--canvas)}}
/* ---- EVENTS: the planned ledger (the same rows as /programs/, the date column says it is to be posted) and the card's folio arrow ---- */
.plr-list--ev{margin-top:8px;border-top:1px solid var(--rule-strong)}
.plr__date{margin:0;color:var(--text-secondary);font-size:11px;white-space:nowrap}
.ecard__arr{position:absolute;right:18px;bottom:18px;width:20px;height:20px;fill:none;stroke:var(--text-secondary);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:transform .35s var(--ease-out),stroke .35s var(--ease-out)}
@media (hover:hover){.ecard:hover .ecard__arr{transform:translate3d(4px,0,0);stroke:var(--accent)}}
.ecard__meta{padding-right:32px}
html.still .ecard__arr{transition:none}
/* ---- PROGRAM PAGE: the series rail (an ARM workshop among its steps, this one lit), the hero lede ---- */
.pgv__lede{margin:18px 0 4px;max-width:52ch}
.srail{--n:5;position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0 clamp(10px,1.6vw,22px);margin:clamp(8px,2vh,20px) 0 0;padding:0;list-style:none}
.srail::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--rule-strong)}
.srail__i a{position:relative;display:grid;gap:6px;min-height:44px;padding:30px 0 6px;color:var(--text-primary);text-decoration:none}
.srail__mk{position:absolute;left:0;top:3px;width:13px;height:13px;border:1px solid var(--rule-strong);border-radius:50%;background:var(--canvas);transition:transform .35s var(--ease-out),border-color .35s var(--ease-out)}
.srail__n{color:var(--text-secondary);font-size:11px}
.srail__t{font-family:var(--f-head);font-weight:600;font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.3}
.srail__here{color:var(--accent);font-size:11px}
.srail__i.is-here .srail__mk{border-color:var(--accent);box-shadow:0 0 0 4px rgba(168,67,46,.18),inset 0 0 0 3px var(--canvas);background:var(--accent)}
.srail__i.is-here .srail__n{color:var(--text-primary)}
@media (hover:hover){.srail__i:not(.is-here) a:hover .srail__mk{transform:scale(1.25);border-color:var(--text-primary)}.srail__i a:hover .srail__t{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--rule-strong)}}
@media (max-width:760px){
  .srail{grid-template-columns:minmax(0,1fr);gap:0}
  .srail::before{left:6px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .srail__i a{padding:10px 0 10px 30px}
  .srail__mk{top:14px}
}
html.still .srail__mk{transition:none}

/* RELEASE FIXER BLOCK (rc1, 2026-09-25) */
/* an open seat: the portrait ring language, dimmed. Same round mount and moving ring as the monogram tiles, at low light, the plus in the
   middle in a quiet tone; no dashed border and no square box around it. */
.person--open::before{display:none}
.person--open .person__photo.person__seat{border-style:solid;border-color:transparent}
.person--open .person__photo.person__seat::before{opacity:.34}
.person--open .person__photo.person__seat::after{opacity:.16;animation:none}
.person--open .person__seat .person__spark{display:block;opacity:.4}
.person--open .person__seat .person__ini-t{color:var(--text-secondary);font-weight:200;text-shadow:none;opacity:.8}
.person--open .person__name{color:var(--text-secondary)}
/* a link inside running text stays in the sentence: inline, the sentence's own type, underlined; the padding enlarges the tap area
   without moving a line (inline padding does not change layout) */
.link.link--inline{display:inline;min-height:0;padding:10px 0;font:inherit;letter-spacing:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(242,233,216,.55)}
.link.link--inline::after{content:none}
.link.link--inline:hover{text-decoration-color:currentColor}
/* phones: the breadcrumb links that are not the one step back are removed (not only made tiny), so no invisible link takes keyboard focus */
@media (max-width:560px){.crumbs li:not(:nth-last-child(2)):has(a){display:none}}
/* END RELEASE FIXER BLOCK */

/* ROUND1 HOME BLOCK (home builder, improvement round 1, 2026-09-25) ================================================================
   FIG. 04 the programme folio: the needle driver plate (fx/inkstudy.js, data-study="endowrist") beside the programme sequence, which runs
   vertically here at every width (the plate and a numbered list beside it, as in the standard). Phones and tablets: plate first. */
.pgx{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center;margin:0 0 clamp(8px,2vh,20px)}
.pgx__fig{margin:0}
.pgx__plate{aspect-ratio:4/3;border:1px solid var(--rule)}
.pgx .seqs__sep{display:none}
.pgx .seqs__head{display:grid;grid-template-columns:auto 1fr;column-gap:12px}
.pgx .seqs__head > :not(.seqs__dot){grid-column:2}
.pgx .seqs__list{grid-template-columns:1fr;gap:0}
.pgx .seqs__list::before{left:7px;right:auto;top:7px;bottom:28px;width:1px;height:auto;background:linear-gradient(180deg,var(--rule-strong),rgba(152,136,122,.35));transform:scaleY(0);transform-origin:50% 0}
.pgx .seqs__i{padding:0 0 30px 40px}
.pgx .seqs__i:last-child{padding-bottom:0}
.pgx .seqs__n{position:static;line-height:15px;padding:0;background:none}
.pgx .seqs__node{top:0}
@media (max-width:860px){.pgx{grid-template-columns:minmax(0,1fr);gap:clamp(26px,5vw,40px)}.pgx__fig{width:min(100%,540px);justify-self:center}}
/* FIG. 08 the seat: the console study stands in the travelling circle and square (the frame is the traveller's stop); no box of its own, a
   warm light at the centre of the circle, three labels at the square's sides that light with their parts; the title and the lede below. */
.reg__plate.ist{position:absolute;inset:0;overflow:visible;border:0;background:radial-gradient(circle at 50% 56%,rgba(168,67,46,.13),rgba(168,67,46,.04) 34%,rgba(0,0,0,0) 52%)}
.reg__plate.ist::before{content:none}
.reg__plate .ist__cam{inset:0}
.reg__plate .ist__still{opacity:0 !important}   /* the black paper would show without a backdrop to screen against: only the inked canvas is shown */
.reg__frame{width:min(100%,640px,66vh)}
html.no-js .reg__frame{display:none}   /* without scripts there is no traveller and no inked canvas: the close is the title, the line and the buttons */
.reg__lab{display:flex;flex-direction:column;gap:3px;max-width:21%;white-space:normal;text-align:left}
.reg__ln{color:var(--accent);opacity:.9}
.reg__words{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,26px);margin-top:clamp(10px,2vh,24px)}
.reg__words .lede{max-width:34ch;font-size:clamp(1rem,1.3vw,1.2rem)}
@media (max-width:480px){.reg__lab{max-width:21%}}
/* END ROUND1 HOME BLOCK */

/* ROUND1 ABOUT BLOCK (round 1 about builder, 2026-09-25): About FIG. 01 pull line, About close (FIG. 08), Advisory Board role labels
   and member tiles. The gap folio's hinge is in the ABOUT: THE GAP, MEASURED block above. */
/* FIG. 01: the story's strongest sentence set large between paragraphs 1 and 2, between two hairlines the pen draws as it enters */
.ab-pull{position:relative;margin:clamp(30px,4.4vh,48px) 0;padding:clamp(20px,2.8vh,28px) 0;max-width:24ch;font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.6rem,2.7vw,2.35rem);line-height:1.1;letter-spacing:.05em;text-transform:uppercase;color:var(--text-primary);text-wrap:balance}
.ab-pull::before,.ab-pull::after{content:"";position:absolute;left:0;height:1px;background:var(--rule-strong);transform-origin:0 50%}
.ab-pull::before{top:0;width:100%;background:linear-gradient(to right,#D0694E 0 36px,var(--rule-strong) 36px)}
.ab-pull::after{bottom:0;width:62%}
.reveal .ab-pull::before,.reveal .ab-pull::after{transform:scaleX(0);transition:transform 1.4s var(--ease-inout) .2s}
.reveal.in .ab-pull::before,.reveal.in .ab-pull::after{transform:none}
.reveal.in .ab-pull::after{transition-delay:.55s}
html.still .reveal .ab-pull::before,html.still .reveal .ab-pull::after,html.no-js .reveal .ab-pull::before,html.no-js .reveal .ab-pull::after{transform:none;transition:none}
@media (prefers-reduced-motion:reduce){html:not(.motion-on) .reveal .ab-pull::before,html:not(.motion-on) .reveal .ab-pull::after{transform:none;transition:none}}
/* FIG. 08: the close, one sentence and one action; the travelling construction lands in the empty square on the right */
.ab-end__in{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,22vw,300px);grid-template-areas:"t m" "r m";column-gap:clamp(24px,5vw,80px);row-gap:clamp(22px,3.4vh,34px);align-items:center}
.ab-end__in > h2{grid-area:t;align-self:end}
.ab-end__row{grid-area:r;align-self:start}
.ab-end .t-title--sent{max-width:17ch}
.ab-end__mark{grid-area:m;aspect-ratio:1;width:100%}
html.no-js .ab-end__mark{display:none}
@media (max-width:1023px){.ab-end__in{grid-template-areas:"t m" "r r"}}
@media (max-width:767px){.ab-end__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "r"}.ab-end__mark{display:none}}
/* Advisory Board FIG. 01: the four role names read as labels (IBM Plex Sans 600, the brand's bold face), not as body text */
.sigr strong{font-family:var(--f-head);font-weight:600;font-size:.95em;letter-spacing:.01em;color:var(--text-primary)}
/* Advisory Board FIG. 04: every tile said ADVISORY BOARD under a heading that already says it */
#members [data-group="advisory-board"] .person__role{display:none}
/* About FIG. 03: the dividers study across the mission and vision spread (the pen draws it; hatching and the target follow) */
.mvd__fig{margin:clamp(8px,2vh,20px) 0 clamp(26px,4.4vh,48px)}
.mvd{display:block;width:100%;height:auto;overflow:visible}
.mvd .l{stroke:rgba(242,233,216,.78)}
.mvd .hp{stroke:rgba(242,233,216,.34)}
.mvd .w{stroke:rgba(242,233,216,.2)}
.mvd .d{stroke:rgba(242,233,216,.3)}
.mvd .dim{stroke:rgba(242,233,216,.5)}
.mvd .c{stroke:#D0694E;opacity:1}
/* phones and narrow tablets: the statements stack, so the study shows the dividers only (the first 700 units), at 1.7 times the size */
@media (max-width:860px){.mvd__fig{overflow:hidden;padding:6px 0 4px}.mvd{width:172%;max-width:none}}
/* reading a statement lights its leg: Mission the planted leg, Vision the free leg and its target (hover, focus within, or a tap) */
.mvd g{transition:filter .6s var(--ease-out)}
#mission-vision:has(.mv-spread > div:first-child:is(:hover,:focus-within)) .mvd__m,
#mission-vision:has(.mv-spread > div:last-child:is(:hover,:focus-within)) .mvd__v{filter:drop-shadow(0 0 2.5px rgba(255,192,128,.75)) brightness(1.35)}
html.still .mvd g{transition:none}
#apply .pg-cta .t-title{max-width:26ch}
/* END ROUND1 ABOUT BLOCK */
/* ROUND1 DEPARTMENTS BLOCK (2026-09-25, round 1 departments builder). The department pages stop being a template:
   (1) .pidx: the programmes as an engraved index, one row per programme, the whole row one link (site.js programIndex);
   (2) .sigl--open + .seats: two open seats drawn by the pen (site.js seatStudy) instead of two empty portrait circles;
   (3) .tidx: the close, "The other teams": the Board and the other departments as ink plates with their numbers (site.js teamIndex).
   Motion is transform, opacity and filter only; html.still shows everything finished. */
.pidx{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.pidx__i{position:relative;display:grid;grid-template-columns:clamp(52px,6vw,84px) minmax(0,1fr) auto;grid-template-areas:"n b st";column-gap:clamp(14px,2.4vw,36px);
  align-items:start;padding:clamp(22px,2.8vw,32px) 0;border-bottom:1px solid var(--rule)}
.pidx__i::before{content:"";position:absolute;inset:0 calc(-1 * clamp(8px,1.4vw,20px));z-index:0;pointer-events:none;opacity:0;transform:scaleX(.96);transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(168,67,46,.12),rgba(59,43,36,.42) 38%,rgba(59,43,36,0) 92%);transition:opacity .35s var(--ease-out),transform .6s var(--ease-out)}
.pidx__i::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out);pointer-events:none}
.pidx__i > *{position:relative;z-index:1}
.pidx__n{grid-area:n;font-family:var(--f-display);font-size:clamp(30px,3.2vw,46px);font-weight:400;line-height:.9;letter-spacing:.02em;text-transform:none;color:rgba(242,233,216,.34);
  transition:opacity .35s var(--ease-out)}
.pidx__b{grid-area:b;min-width:0}
.pidx__k{margin:0 0 8px;color:var(--text-secondary)}
.pidx__t{margin:0;font-family:var(--f-head);font-weight:600;font-size:clamp(19px,1.75vw,25px);line-height:1.25;letter-spacing:0}
.pidx__a{position:static;color:var(--text-primary);text-decoration:none}
.pidx__a::after{content:"";position:absolute;inset:0;z-index:2}
.pidx__a:focus-visible{outline:none}
.pidx__i:has(.pidx__a:focus-visible){outline:2px solid var(--line);outline-offset:4px}
.pidx__a .nrow__arr{display:inline-block;margin-left:.45em;vertical-align:.12em;color:var(--line)}
.pidx__s{margin:10px 0 0;max-width:64ch;color:var(--text-secondary)}
.pidx__st{grid-area:st;padding-top:4px}
.pidx__i:is(:hover,.is-press)::before{opacity:1;transform:none}
.pidx__i:is(:hover,.is-press)::after{transform:none}
.pidx__i:is(:hover,.is-press) .nrow__arr{transform:translate(3px,-3px)}
@media (max-width:700px){
  .pidx__i{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"n st" "n b";row-gap:12px;padding:22px 0}
  .pidx__n{font-size:28px}
  .pidx__st{padding-top:0}
}
html.still .pidx__i::before,html.still .pidx__i::after,html.still .pidx__a .nrow__arr{transition:none}

.sigl--open{display:grid;gap:clamp(14px,2vh,22px);justify-items:start;align-content:start}
.seats{margin:0;width:min(100%,460px);padding:clamp(10px,1.4vw,18px);border:1px solid rgba(217,138,75,.28);
  background:radial-gradient(ellipse 60% 58% at 50% 52%,rgba(217,138,75,.10),rgba(217,138,75,0) 72%),#17120F;box-sizing:border-box}
.seats__svg{width:100%;height:auto;aspect-ratio:360 / 196}
.seats__svg .l{stroke:rgba(242,233,216,.72)}
.seats__svg .w{stroke:rgba(242,233,216,.2)}
.seats__svg .c{stroke:var(--line);opacity:1}
.seats__svg .hp{stroke:rgba(242,233,216,.26)}
.seats__svg .t{font-size:10px;fill:rgba(242,233,216,.5)}
.seats__cap{margin:0 0 6px;color:var(--text-secondary)}
.sigl--open .sigl__line{margin:0}

.tidx{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.2vw,32px)}
.tidx__a{display:block;min-height:44px;line-height:1.3;color:var(--text-primary);text-decoration:none}
.tidx__pic{position:relative;display:block;aspect-ratio:1;overflow:hidden;border:1px solid rgba(217,138,75,.22);
  background:radial-gradient(ellipse 62% 58% at 50% 48%,rgba(217,138,75,.13),rgba(217,138,75,0) 72%),#17120F}
.tidx__pic .ink{position:absolute;inset:0;padding:7% 7% 12%;box-sizing:border-box}
.tidx__pic .ink img{transition:opacity 1.3s var(--ease-out) .15s,transform 1.1s var(--ease-out),filter .6s var(--ease-out)}
.tidx__n{position:absolute;left:12px;bottom:4px;z-index:3;font-family:var(--f-display);font-size:clamp(1.9rem,2.8vw,2.8rem);line-height:1;color:var(--text-primary);
  text-shadow:0 1px 2px rgba(38,32,26,.95),0 4px 18px rgba(38,32,26,.85)}
.tidx__k{display:block;margin:14px 0 4px;color:var(--text-secondary)}
.tidx__name{display:inline;font-family:var(--f-head);font-weight:600;font-size:clamp(16px,1.35vw,19px);line-height:1.3;
  background:linear-gradient(var(--line),var(--line)) 0 100% / 0 1px no-repeat;transition:background-size .5s var(--ease-out)}
.tidx__name .nrow__arr{display:inline-block;margin-left:.4em;vertical-align:.1em;color:var(--line)}
.tidx__a:is(:hover,.is-press) .ink img{transform:scale(1.05);filter:brightness(1.18)}
.tidx__a:is(:hover,.is-press,:focus-visible) .tidx__name{background-size:100% 1px}
.tidx__a:is(:hover,.is-press) .nrow__arr{transform:translate(3px,-3px)}
@media (max-width:900px){.tidx{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}}
@media (max-width:700px){.tidx__n{font-size:1.9rem;left:10px}.tidx__k{margin-top:10px;font-size:10px}.tidx__name{font-size:15px}}
html.still .tidx__a:is(:hover,.is-press) .ink img{transform:none}
html.still .tidx__name{transition:none}
/* (4) the Board page's dividers, engraved (review/selftest/perfection/r1-departments/gen-board-dividers.mjs): tapered legs with a hatched
   shaded side and a lit edge, collar rings, a knurled hinge boss with its slotted screw, a turned finial, a steel needle and a pencil in
   its ferrule; the plate gets the standard's warm vignette and hairline Sanguine frame. */
.bdc__plate{border-color:rgba(168,67,46,.5);background:radial-gradient(ellipse 64% 60% at 50% 48%,rgba(217,138,75,.12),rgba(217,138,75,0) 72%),#1A1511;
  box-shadow:inset 0 0 90px rgba(0,0,0,.45)}
.bdc__div pattern path{stroke:rgba(242,233,216,.46);stroke-width:.6}
.bdc__div .bdc__leg,.bdc__div .bdc__fin,.bdc__div .bdc__pen{fill:rgba(242,233,216,.07);stroke:rgba(242,233,216,.9);stroke-width:1;stroke-linejoin:round}
.bdc__div .bdc__lsh{fill:url(#bdc-lh);stroke:none}
.bdc__div .bdc__hx{stroke:rgba(255,241,222,.62);stroke-width:.6}
.bdc__div .bdc__ring{stroke:rgba(242,233,216,.72);stroke-width:.75}
.bdc__div .bdc__stl{fill:rgba(168,67,46,.3);stroke:var(--line);stroke-width:1;stroke-linejoin:round}
.bdc__div .bdc__fer{fill:rgba(237,184,119,.16);stroke:#EDB877;stroke-width:.85}
.bdc__div .bdc__hinge,.bdc__div .bdc__knob{fill:#1D1712;stroke:rgba(242,233,216,.88);stroke-width:1}
.bdc__div .bdc__boss{stroke:rgba(242,233,216,.6);stroke-width:.8}
.bdc__div .bdc__knurl{stroke:rgba(242,233,216,.55);stroke-width:.7}
.bdc__div .bdc__slot{stroke:rgba(242,233,216,.92);stroke-width:1.1}
/* END ROUND1 DEPARTMENTS BLOCK */
/* ROUND1 PROGRAMS-EVENTS BLOCK (2026-09-25, round 1 programs-events builder): /programs/, /programs/view/, /events/, /events/view/.
   The ink study camera no longer holds its own layer at rest: with will-change it was a separate blending group, so the black ground of
   the still drawing showed as a dark box (first frames, no JS) instead of screening onto the plate. The browser still promotes it while the
   camera moves. */
.ist__cam{will-change:auto}
/* The event photographs carry the site's warm grade (critic: the summit photos were cold and green in a warm ink world). One static filter
   per picture: painted once, nothing animates it. The viewer (lightbox) keeps the photo as taken. */
.scr__ph img,.ecard__img img,.hplate--ev .hplate__frame img{filter:sepia(.16) saturate(.9) contrast(1.04) brightness(.97)}
/* The programme booklet (fx/booklet.js): the pages are toned like paper under the lamp instead of glaring white, and each paper leaf shows a
   thin stack of page edges on its outer edge (a turned leaf's back face mirrors it to the left). Static: painted once per leaf. */
.bk__face img{filter:sepia(.1) saturate(.9) brightness(.92) contrast(1.02)}
.bk__face--paper,.bk__face:not(.bk__face--board){box-shadow:1.5px 0 0 #D8CBB2,3px 0 0 #2A2019,4.5px 0 0 #CDBFA3,6px 0 0 #2A2019,7.5px 0 0 #C3B498,0 14px 34px -16px rgba(0,0,0,.75)}
.bk__face--back:not(.bk__face--board){box-shadow:-1.5px 0 0 #D8CBB2,-3px 0 0 #2A2019,-4.5px 0 0 #CDBFA3,-6px 0 0 #2A2019,-7.5px 0 0 #C3B498,0 14px 34px -16px rgba(0,0,0,.75)}
/* END ROUND1 PROGRAMS-EVENTS BLOCK */

/* ROUND1 RESEARCH-INVOLVE BLOCK (2026-09-25, round 1 research-involve builder) =================================================
   /get-involved/ FIG. 02 Membership: the theatre door plate (.jd, drawn by the pen; fx/paths.js slides the leaves into the wall with
   scroll while membership is open). Layers, in the plate's own 400 x 500 units: the room beyond the opening (x 120..280, y 150..440),
   (the plate shows y 50..490) the two leaves in a clip of the opening, the wall, track, floor and construction on top, a warm vignette over all. */
.jm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,min(46%,500px));grid-template-rows:1fr auto;grid-template-areas:"head plate" "box plate";
  column-gap:clamp(32px,6vw,96px);row-gap:clamp(22px,3vh,34px);align-items:start}
.jm__head{grid-area:head;align-self:end;margin-bottom:0}
.jm__box{grid-area:box}
.jd{grid-area:plate;margin:0;width:100%}
.jd__frame{position:relative;aspect-ratio:400/440;overflow:hidden;border:1px solid rgba(208,105,78,.42);
  background:radial-gradient(ellipse 72% 60% at 50% 58%,rgba(217,138,75,.07),rgba(217,138,75,0) 70%),#15110E}
.jd__frame::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 90px 12px rgba(8,6,5,.62)}
.jd__room,.jd__gap{position:absolute;left:30%;top:22.727%;width:40%;height:65.909%}
.jd__room{z-index:1;overflow:hidden;background:radial-gradient(ellipse 70% 58% at 50% 44%,rgba(255,202,150,.34),rgba(217,138,75,.13) 46%,rgba(217,138,75,.03) 78%),#120E0C}
.jd__cart{position:absolute;left:-4%;top:13%;width:108%;height:auto;max-width:none;mix-blend-mode:screen;opacity:.15;transform-origin:50% 70%;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 55%,transparent 100%)}
.jd__roomsvg{position:absolute;inset:0;width:100%;height:100%}
.jd__gap{z-index:2;overflow:hidden}
.jd__leaf{position:absolute;top:0;width:50%;height:100%;background:linear-gradient(to right,#1A1411,#17120F 60%,#15110E)}
.jd__leaf--l{left:0}
.jd__leaf--r{right:0;background:linear-gradient(to left,#1A1411,#17120F 60%,#15110E)}
.jd__leaf{-webkit-mask-image:radial-gradient(ellipse 18.75% 5.17% at 50% 28.28%,transparent 94%,#000 100%);mask-image:radial-gradient(ellipse 18.75% 5.17% at 50% 28.28%,transparent 94%,#000 100%)}
.jd.fx-live .jd__leaf,.jd.is-vis .jd__leaf{will-change:transform}
.jd__leafsvg{position:absolute;inset:0;width:100%;height:100%}
.jd__seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;z-index:1;pointer-events:none}
.jd__seam::before{content:"";position:absolute;inset:0;opacity:.55;background:linear-gradient(to bottom,rgba(255,214,168,0),rgba(255,214,168,.9) 18%,rgba(255,214,168,.9) 82%,rgba(255,214,168,0));
  box-shadow:0 0 10px 2px rgba(255,180,120,.45)}
.jd.is-vis.is-shut .jd__seam::before,.jd.is-vis:not(.is-open) .jd__seam::before{animation:jbSeam 4s ease-in-out infinite alternate}
.jd__spill{position:absolute;left:18%;width:64%;top:84%;height:14%;z-index:3;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse 50% 50% at 50% 30%,rgba(255,196,140,.34),rgba(217,138,75,.1) 55%,rgba(217,138,75,0) 100%)}
.jd__svg{position:absolute;inset:0;width:100%;height:100%;z-index:3}
.jd .lstudy .l{stroke:rgba(242,233,216,.74)}
.jd .lstudy .w{stroke:rgba(242,233,216,.24)}
.jd .lstudy .d{stroke:rgba(242,233,216,.2)}
.jd .lstudy .hp{stroke:rgba(242,233,216,.24)}
.jd .lstudy .c{stroke:#D0694E;opacity:1}
.jd .lstudy .t{font-size:9px;fill:rgba(242,233,216,.5)}
.jd__roomsvg .l{stroke:rgba(255,226,190,.5)}
.jd__roomsvg .w{stroke:rgba(255,226,190,.2)}
.jd .hplate__cap{margin-top:12px}
/* no scripts: the static page says membership is open, so the door stands open; html.still: the module sets the rest state */
html.no-js .jd__leaf--l{transform:translate3d(-100%,0,0)}
html.no-js .jd__leaf--r{transform:translate3d(100%,0,0)}
html.no-js .jd__cart{opacity:1}
html.no-js .jd__seam{opacity:0}
html.still .jd__seam::before{animation:none}
@media (max-width:860px){
  .jm{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"head" "plate" "box"}
  .jm__head{align-self:start}
  .jd{width:min(100%,460px);justify-self:center}
}
@media (forced-colors:active){.jd{display:none}.jm{grid-template-areas:"head" "box";grid-template-columns:minmax(0,1fr)}}
/* /get-involved/ board: an open call is an entry on the board, not a box: a Sanguine bar at its left (open), its words, and its button at
   the right end of the line on wide screens (below the words on phones), between the board's own hairlines */
.gi-opens{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--rule);margin-top:clamp(14px,2vh,22px)}
.gi-open{position:relative;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(20px,4vw,56px);row-gap:8px;align-items:center;
  padding:clamp(20px,2.4vw,28px) 0 clamp(20px,2.4vw,28px) clamp(18px,2vw,26px);border:0;border-bottom:1px solid var(--rule);background:none}
.gi-open::before{content:"";position:absolute;left:0;top:clamp(20px,2.4vw,28px);bottom:clamp(20px,2.4vw,28px);width:2px;background:var(--accent)}
.gi-open > *{grid-column:1;margin:0}
.gi-open p{max-width:62ch}
.gi-open .gi-open__go{grid-column:2;grid-row:1 / span 3;align-self:center;margin:0}
@media (max-width:700px){.gi-open{grid-template-columns:minmax(0,1fr)}.gi-open .gi-open__go{grid-column:1;grid-row:auto;margin-top:6px}}
/* footer journey on phones: the "You are here" label sat at the row's right end, across the fan drawing and the travelling circle and square
   that land on it. Phones mark the current leaf by its longer Sanguine tick; the label stays for screen readers. */
@media (max-width:640px){
  .jr__here{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
}
/* END ROUND1 RESEARCH-INVOLVE BLOCK */

/* ROUND2 HOME BLOCK (home builder, improvement round 2, 2026-09-25) ================================================================
   FIG. 03 five teams: each study is a small version of the standard plate. Numbered Sanguine parts on the drawing (departments.json
   "callouts", rendered by RSIG.ui.deptRow), a construction circle and a warm light at the lit part, the camera moving in on it
   (fx/teams.js), and the numbered names under the row lighting with it. The desktop zigzag now starts at 700 px, so tablets get it too. */
.tms__cam{position:absolute;inset:0;transform-origin:50% 50%;transition:transform 1.5s var(--ease-weight)}
.tms__con{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.tms__cg{opacity:0;transition:opacity .8s var(--ease-inout)}
.tms__cg circle,.tms__cg path{fill:none;stroke:#C8563C;stroke-width:1;vector-effect:non-scaling-stroke}
.tms__cg circle{stroke-dasharray:3 4}
.tms__cg.is-lit{opacity:.95}
.tms__lt{position:absolute;z-index:1;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgba(255,176,110,.30),rgba(255,150,80,.10) 55%,rgba(255,150,80,0));opacity:0;transition:opacity .9s var(--ease-inout)}
.tms__lt.is-lit{opacity:1}
.tms__co{position:absolute;z-index:3;width:0;height:0;pointer-events:none;opacity:1;transition:opacity .6s var(--ease-out)}
.tms__co b{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1px solid #C8563C;background:rgba(16,12,10,.82);
  color:#F0DCC4;font:500 11px/26px var(--f-mono);letter-spacing:.04em;text-align:center;font-variant-numeric:tabular-nums}
.tms__co b::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 1px rgba(232,160,124,.9),0 0 16px rgba(255,150,80,.55);opacity:0;transition:opacity .6s var(--ease-out)}
.tms__co em{position:absolute;left:0;top:21px;font:500 11px/18px var(--f-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#EFB08E;
  padding:0 6px;background:rgba(16,12,10,.8);opacity:0;transform:translate3d(-50%,-5px,0);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.tms__co.is-lit b::after,.tms__co.is-lit em{opacity:1}
.tms__co.is-lit em{transform:translate3d(-50%,0,0)}
.tms--focus .tms__co:not(.is-lit){opacity:.38}
/* the rings wait for the ink: hidden while the brush works, shown once the study is drawn (or when the module is off) */
.tms--on .tms-fig__in:not(.is-drawn) .tms__co{opacity:0}
.tms-fig__in.tms--focus .tms-fig__cv.is-done{opacity:.62}
.tms-fig__cv{transition:opacity .9s var(--ease-inout)}
.tms__key{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px;border-top:1px solid var(--rule);padding-top:4px;width:100%}
.tms__k{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--text-primary);font:500 .95rem/1.2 var(--f-head);text-align:left}
.tms__kn{font:500 11px/1 var(--f-mono);letter-spacing:.08em;color:#D4876A;font-variant-numeric:tabular-nums}
.tms__k::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out);pointer-events:none}
.tms__k.is-lit::after{transform:scaleX(1)}
.tms__k.is-lit .tms__kn{color:#F0A080}
.tms__k:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html.still .tms__cam{transform:none !important;transition:none}
html.still .tms__cg{opacity:.8}
html.still .tms__co,html.still .tms__co b::after,html.still .tms__co em{opacity:1;transition:none}
html.still .tms__co em{transform:translate3d(-50%,0,0)}
/* b9: a ring near the left or right edge keeps its name inside the frame, also while the view glides to the next part */
.tms__co--r em{transform:translate3d(calc(-100% + 14px),-5px,0)}
.tms__co--l em{transform:translate3d(-14px,-5px,0)}
.tms__co--r.is-lit em,html.still .tms__co--r em{transform:translate3d(calc(-100% + 14px),0,0)}
.tms__co--l.is-lit em,html.still .tms__co--l em{transform:translate3d(-14px,0,0)}
html.still .tms__lt{display:none}
@media (max-width:400px){.tms__co em{font-size:10px;letter-spacing:.1em}}
@media (forced-colors:active){.tms__lt{display:none}.tms__k.is-lit{outline:2px solid Highlight}}
@media (min-width:700px) and (max-width:1023.98px){
  .tms .nrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto 1fr;grid-template-areas:"fig num" "fig head" "fig body";
    gap:10px clamp(24px,4vw,40px);align-items:start;padding:clamp(24px,3vh,40px) 0}
  .tms .nrow:nth-child(even){grid-template-areas:"num fig" "head fig" "body fig"}
  .tms .nrow__num{grid-area:num;align-self:end;font-size:2.6rem}
  .tms .tms-fig{grid-area:fig;margin:0;justify-self:stretch;align-self:center}
  .tms .tms-fig__in{width:100%;max-width:none}
  .tms .nrow__head{grid-area:head}
  .tms .nrow__body{grid-area:body}
}
/* #impact, "RSIG in four facts": one inked plate (fx/facts.js). Four figures in cream outline with fine hatching on construction circles,
   a hairline Sanguine frame and a warm vignette. 2 x 2 on phones and tablets, four across from 900 px. */
.impx{position:relative;isolation:isolate;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:clamp(8px,1.6vw,22px);border:1px solid rgba(168,67,46,.55);
  background:radial-gradient(ellipse at 50% 45%,rgba(168,67,46,.10),rgba(59,43,36,.26) 58%,rgba(20,16,12,.5) 100%),var(--canvas);box-shadow:inset 0 0 80px rgba(12,9,6,.55)}
.impx__i{display:grid;gap:8px;align-content:start;justify-items:center;text-align:center;padding:clamp(10px,1.6vw,22px) clamp(6px,1.2vw,18px) clamp(16px,2vw,26px);min-width:0}
.impx__i:nth-child(even){border-left:1px solid rgba(242,233,216,.08)}
.impx__i:nth-child(n+3){border-top:1px solid rgba(242,233,216,.08)}
.impx__fig{width:100%;max-width:300px;height:auto;aspect-ratio:320/200}
.impx .impx__t{font-family:var(--f-display);font-weight:300;font-size:146px;letter-spacing:3px;fill:url(#impx-hatch);stroke:#EFE3CF;stroke-width:2.2;paint-order:stroke;stroke-linejoin:round}
.impx .impx__hp{stroke:rgba(242,233,216,.42);stroke-width:1}
.impx .impx__tg{fill:none;stroke:#C8563C;stroke-width:1.3}
.impx .impx__td{fill:#EDB877;stroke:none}
.impx__tgt{filter:drop-shadow(0 0 4px rgba(168,67,46,.65))}
.impx .impact__big{font-size:clamp(1rem,1.7vw,1.5rem);min-height:0;display:block;text-wrap:balance}
.impx__s{color:var(--text-secondary);font-size:clamp(.82rem,1vw,.96rem);line-height:1.5;max-width:30ch;text-wrap:pretty}
.impx--on .impx__t{transform-box:fill-box;transform-origin:50% 60%;transform:scale(1.07);transition:transform 1.4s var(--ease-weight)}
.impx--on .is-drawing .impx__t{transform:none;transition-delay:.45s}
.impx--on .impact__big,.impx--on .impx__s{opacity:0;transform:translate3d(0,8px,0);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.impx--on .is-done .impact__big,.impx--on .is-done .impx__s{opacity:1;transform:none}
.impx--on .is-done .impx__s{transition-delay:.12s}
html.still .impx .impact__big,html.still .impx .impx__s,html.still .impx .impx__t{opacity:1 !important;transform:none !important;transition:none}
@media (min-width:900px){
  .impx{grid-template-columns:repeat(4,minmax(0,1fr))}
  .impx__i:nth-child(n+2){border-left:1px solid rgba(242,233,216,.08)}
  .impx__i:nth-child(n+3){border-top:0}
}
@media (max-width:420px){.impx .impact__big{font-size:.98rem;letter-spacing:.04em}.impx__s{font-size:.8rem}}
@media (forced-colors:active){.impx .impx__t{fill:CanvasText;stroke:CanvasText}.impx__tgt{display:none}}
/* #recognition, FIG. 05: the three ties as one ink diagram (fx/seals.js) and its numbered list */
.afx{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,64px);align-items:center;margin-top:clamp(8px,2vh,20px)}
.afx__plate{position:relative;width:min(100%,560px);aspect-ratio:1;justify-self:center;overflow:hidden;isolation:isolate;border:1px solid rgba(168,67,46,.55);
  background:radial-gradient(ellipse at 50% 52%,rgba(168,67,46,.12),rgba(59,43,36,.30) 56%,rgba(20,16,12,.55) 100%),var(--canvas)}
.afx__plate::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(12,9,6,.55)}
.afx__con{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.afx .afx__tg{fill:none;stroke:#C8563C;stroke-width:1.3}
.afx .afx__td{fill:#EDB877;stroke:none}
.afx__tgt{filter:drop-shadow(0 0 5px rgba(168,67,46,.6))}
.afx__seal{position:absolute;z-index:2;width:30%;aspect-ratio:1;transform:translate3d(-50%,-50%,0);transition:opacity .8s var(--ease-out),transform 1s var(--ease-weight)}
.afx__disc{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 42% 36%,#F7F0E2,#EADCC2 70%,#DCC8A6);box-shadow:inset 0 0 0 1px rgba(120,80,50,.35),0 6px 22px rgba(0,0,0,.45)}
.afx__disc .pic{display:block;width:64%;height:64%}
.afx__seal[data-n="2"] .afx__disc .pic{width:84%}
.afx__disc img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.afx__seal::before{content:"";position:absolute;inset:-7%;border-radius:50%;border:1px solid rgba(242,233,216,.42);pointer-events:none}
.afx__seal::after{content:"";position:absolute;inset:-13%;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px rgba(232,160,124,.95),0 0 26px rgba(255,150,80,.5);opacity:0;transition:opacity .7s var(--ease-out)}
.afx__num{position:absolute;left:-4%;top:-4%;width:26px;height:26px;border-radius:50%;border:1px solid #C8563C;background:rgba(16,12,10,.85);color:#F0DCC4;
  font:500 10.5px/24px var(--f-mono);text-align:center;letter-spacing:.04em;font-variant-numeric:tabular-nums;transition:border-color .5s var(--ease-out)}
.afx__lab{position:absolute;z-index:2;width:36%;transform:translate3d(-50%,-50%,0);text-align:center;font-size:10px;letter-spacing:.14em;line-height:1.35;color:var(--text-secondary);
  transition:opacity .8s var(--ease-out),color .5s var(--ease-out)}
.afx__seal.is-lit::after{opacity:1}
.afx__seal.is-lit .afx__num{border-color:#F0A080}
.afx__lab.is-lit{color:#EFB08E}
.afx--focus .afx__seal:not(.is-lit){opacity:.62}
/* the arrival: the seals wait for the pen, then set in one after another */
.afx--on:not(.afx--seals) .afx__seal{opacity:0;transform:translate3d(-50%,-50%,0) scale(.86)}
.afx--on:not(.afx--seals) .afx__lab{opacity:0}
.afx--on.afx--seals .afx__seal,.afx--on.afx--seals .afx__lab{transition-delay:calc(var(--i,0)*280ms)}
.afx--on.afx--focus .afx__seal,.afx--on.afx--focus .afx__lab{transition-delay:0s}
.afx__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);counter-reset:none}
.afx__i{position:relative;display:grid;gap:6px;padding:4px 0 clamp(16px,2vh,24px);border-bottom:1px solid var(--rule)}
.afx__i::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out);pointer-events:none}
.afx__i.is-lit::after{transform:scaleX(1)}
.afx__k{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:0;border:0;background:none;color:var(--text-secondary);cursor:pointer;text-align:left;justify-self:start}
.afx__kn{font-family:var(--f-display);font-weight:300;font-size:1.7rem;line-height:1;color:var(--text-primary);opacity:.5;transition:opacity .5s var(--ease-out),color .5s var(--ease-out)}
.afx__i.is-lit .afx__kn{opacity:1;color:#F0A080}
.afx__k:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.afx__i h3{margin:0}
.afx__i p{margin:0;color:var(--text-secondary);max-width:60ch}
html.still .afx__seal::after{opacity:1}
html.still .afx__seal,html.still .afx__lab{opacity:1 !important;transform:translate3d(-50%,-50%,0) !important;transition:none}
html.still .afx__kn{opacity:1}
@media (min-width:1024px){.afx{grid-template-columns:minmax(0,11fr) minmax(0,10fr)}}   /* ROUND3 HOME: tablets stack the plate (up to 560 px) above the list, no hole beside it */
@media (max-width:480px){.afx__lab{font-size:9px;letter-spacing:.1em;width:40%}.afx__num{width:22px;height:22px;line-height:20px;font-size:9.5px}}
@media (forced-colors:active){.afx__seal::after,.afx__tgt{display:none}.afx__i.is-lit{outline:2px solid Highlight}}
/* #in-their-words, FIG. 06 on the home page only: pull-quote scale. The words set large behind a Sanguine opening mark (a written
   passage keeps its rule, never a speech mark: the owner's quote rule), inking in as the row arrives (opacity, a short slide and a
   blur that settles); the portrait ring larger with its moving spark; the credit smaller. The order and the words are unchanged. */
#in-their-words .vq{--rw:clamp(150px,13vw,176px);grid-template-columns:minmax(170px,230px) minmax(0,1fr)}
#in-their-words .vq .person__photo{width:var(--rw)}
#in-their-words .vq .vq__q p,#in-their-words .vq--written .vq__q p{font-family:var(--f-body);font-weight:300;font-size:clamp(1.42rem,2.6vw,2.4rem);line-height:1.3;letter-spacing:-.005em;
  max-width:27ch;color:var(--text-primary);text-wrap:balance}
#in-their-words .vq:not(.vq--written) .vq__q::before{content:"\201C";position:absolute;left:-.2em;top:-.02em;z-index:-1;height:auto;margin:0;font-family:var(--f-display);font-weight:400;
  font-size:clamp(6rem,11vw,9.5rem);line-height:1;color:#A8432E;opacity:.55;text-shadow:0 0 30px rgba(168,67,46,.35);pointer-events:none}
#in-their-words .vq__q{isolation:isolate;padding-top:clamp(18px,3vw,34px)}
#in-their-words .vq--written .vq__q{padding-left:clamp(16px,1.8vw,24px);border-left:2px solid rgba(168,67,46,.75)}
#in-their-words .vq__q p{opacity:0;transform:translate3d(-14px,0,0);filter:blur(5px);transition:opacity 1.1s var(--ease-out),transform 1.3s var(--ease-weight),filter 1.1s var(--ease-out);transition-delay:.25s}
#in-their-words .vq.in .vq__q p{opacity:1;transform:none;filter:none}
#in-their-words .vq__cap{gap:2px}
#in-their-words .vq__title{font-size:.86rem}
#in-their-words .vq__credit{font-size:.8rem;opacity:.8}
html.still #in-their-words .vq__q p,html.no-js #in-their-words .vq__q p{opacity:1;transform:none;filter:none;transition:none}
@media (max-width:720px){
  #in-their-words .vq{grid-template-columns:minmax(0,1fr)}
  #in-their-words .vq{--rw:150px}
  #in-their-words .vq .vq__q p,#in-their-words .vq--written .vq__q p{font-size:clamp(1.36rem,6.1vw,1.55rem);line-height:1.34}
  #in-their-words .vq:not(.vq--written) .vq__q::before{font-size:6.6rem;top:-.08em;left:-.06em}
  #in-their-words .vq__q{padding-top:26px}
}
/* #controls, FIG. 07: the three lessons read before the hold (at .78 they keep 4.5:1 on the stage) and light fully one by one after it;
   on phones the docked control settles between the HAND and TIP readouts at the bottom edge, clear of the DETAIL A caption */
#controls .fact{opacity:.78}
#controls.is-done .fact{opacity:1}
@media (max-width:720px){
  .ctl__stage.is-engaged .ctl__target{transform:translate3d(0,calc(var(--dock-y,200px) + 22px),0) scale(.42)}
  html.still .ctl__stage.is-engaged .ctl__target,html:not(.motion-on) .ctl__stage.is-engaged .ctl__target{transform:translate3d(0,calc(var(--dock-y,200px) + 22px),0) scale(.42) !important}
}
/* the folio foot: every home section closes on one designed line: its FIG label on the left, its note, and its link as a quiet button
   with Sanguine corner ticks on the right; the section ends sooner after it, so no screen holds a lone link in empty space */
.sec__foot--folio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px clamp(20px,3vw,40px);margin-top:clamp(28px,4.5vh,48px);padding-top:18px}
.sec__foot--folio .sec__fig{grid-column:1;color:var(--text-secondary);opacity:.8;font-size:11px;max-width:none;white-space:nowrap}
.sec__foot--folio > p:not(.sec__fig){grid-column:2;margin:0}
.sec__foot--folio .sec__go{grid-column:3;justify-self:end;--t:#C8563C;white-space:nowrap;text-align:center}
.sec__go::before{--t:#C8563C}
#inside,#departments,#programs,#recognition,#in-their-words{padding-bottom:clamp(40px,7vh,72px)}
@media (max-width:860px){
  .sec__foot--folio{grid-template-columns:minmax(0,1fr) auto}
  .sec__foot--folio .sec__fig{grid-column:1;grid-row:1}
  .sec__foot--folio > p:not(.sec__fig){grid-column:1 / -1;grid-row:2}
  .sec__foot--folio .sec__go{grid-column:1 / -1;grid-row:3;justify-self:start;margin-left:5px;white-space:normal;max-width:calc(100% - 10px)}
  .sec__foot--folio:not(:has(> p:not(.sec__fig))) .sec__go{grid-row:2}
}
@media (max-width:640px){#inside,#departments,#programs,#recognition,#in-their-words{padding-bottom:36px}}
/* FIG. 02 on phones: the arrows, the counter and the progress line on one row; the peek of the next photo says "swipe" */
@media (max-width:700px){
  #inside .acts__bar{flex-wrap:nowrap;gap:12px}
  #inside .acts__track{flex:1 1 auto;min-width:0}
  #inside .acts__hint{display:none}
}
/* END ROUND2 HOME BLOCK */

/* ROUND2 ABOUT BLOCK (round 2 about builder, 2026-09-25): Advisory Board FIG. 01 two consoles (fx/inkstudy.js "dual") and FIG. 02 the
   cosmographic plate (fx/globe.js); About and Advisory Board refinements below. Appended only. */
/* ---- Advisory Board FIG. 01: the plate beside the four roles (the roles are its numbered key) ---- */
.abr{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.abr__fig{margin:0}
.abr__plate{aspect-ratio:3/2;border:1px solid var(--rule)}
.abr__cap{margin-top:12px;color:var(--text-secondary)}
.abr__key li{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.abr__key li::before{content:"";position:absolute;left:-14px;top:18px;bottom:18px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease-out)}
.abr__key li.is-lit::before{transform:scaleY(1)}
.abr__key li > *{transition:opacity .45s var(--ease-out)}
.ist-host--focus .abr__key li:not(.is-lit) > *{opacity:.5}
.abr__key li.is-lit .sigr__n{color:#E08A6C}
.sigr__k{display:inline;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:0}
.sigr__k:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.abr__key li{padding:16px 0}
.ist__con .ist__pt{transition:stroke .5s var(--ease-out),filter .5s var(--ease-out)}
.ist__con .ist__pt.is-lit{stroke:#F2B98E;filter:drop-shadow(0 0 4px rgba(255,150,80,.7))}
@media (max-width:900px){
  .abr{grid-template-columns:minmax(0,1fr);gap:22px}
  .abr__key li::before{left:-10px}
}
html.still .abr__key li > *,html.still .abr__key li::before,html.still .ist__con .ist__pt{transition:none}

/* ---- Advisory Board FIG. 02: the globe plate, its key and the text ---- */
.glb-host{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"head txt" "fig txt" "fig key";gap:clamp(20px,2.6vw,36px) clamp(32px,5vw,88px);align-items:start}
.glb-host__head{grid-area:head;margin:0}
.glb-host__fig{grid-area:fig;margin:0;align-self:start;position:sticky;top:calc(var(--hdr-hc,72px) + 20px)}
.glb-host__txt{grid-area:txt}
.glb-host__key{grid-area:key}
.glb{position:relative;aspect-ratio:1;overflow:hidden;isolation:isolate;border:1px solid var(--rule);
  background:radial-gradient(ellipse at 50% 48%,rgba(168,67,46,.12),rgba(59,43,36,.30) 56%,rgba(20,16,12,.55) 100%),var(--canvas)}
.glb::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 70px rgba(12,9,6,.55)}
.glb__con{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.glb__cv,.glb__dyn{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen}
.glb__cv{opacity:0;transition:opacity .9s var(--ease-inout)}
.glb__cv.is-on{opacity:1}
.glb__dyn{opacity:0;transition:opacity 1.2s var(--ease-inout)}
.glb--turn .glb__dyn{opacity:1}
.glb__still{transition:opacity .6s var(--ease-out)}
.glb--on .glb__still{opacity:0}
.glb__con .glb__gt{fill:none;stroke:rgba(242,233,216,.22)}
.glb__con .glb__eq{fill:none;stroke:rgba(242,233,216,.46)}
.glb__con .glb__limb{fill:none;stroke:rgba(242,233,216,.92);stroke-width:1.5}
.glb__con .glb__arc{fill:none;stroke:rgba(255,192,128,.6);stroke-width:1.1}
.glb__con .glb__pt{fill:none;stroke:rgba(255,192,128,.95);stroke-width:1.3}
.glb__con .glb__pd{fill:rgba(255,192,128,1);stroke:none}
.glb__con .glb__tn{fill:#E8A07C;font-family:var(--f-mono);font-size:22px;letter-spacing:.1em}
.glb__cap{margin-top:12px;color:var(--text-secondary)}
.glb__kt{color:var(--text-secondary);margin:0 0 10px}
.glb__key{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.glb__key li{border-bottom:1px solid var(--rule)}
.glb__k{display:grid;grid-template-columns:3em minmax(0,1fr);gap:10px;align-items:baseline;width:100%;min-height:48px;padding:12px 0;border:0;background:none;
  color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.glb__k::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out);pointer-events:none}
.glb__k.is-lit::after{transform:scaleX(1)}
.glb__n{color:var(--text-secondary);transition:color .5s var(--ease-out)}
.glb__k.is-lit .glb__n{color:#E08A6C}
.glb__t{display:grid;gap:2px}
.glb__city{color:var(--text-secondary);font-size:11px;transition:color .5s var(--ease-out)}
.glb__k.is-lit .glb__city{color:#E8A07C}
.glb__nm{font-family:var(--f-head);font-weight:600;font-size:.98rem;line-height:1.35;transition:opacity .45s var(--ease-out)}
.glb--focus .glb__k:not(.is-lit) .glb__nm{opacity:.62}
.glb__k:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:900px){
  /* phones and tablets: the words first, then the plate held under the header while the numbered key passes under it */
  .glb-host{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "txt" "fig" "key";gap:22px}
  .glb-host__fig{top:calc(var(--hdr-hc,64px) + 4px);z-index:2;width:100%;padding:8px 0 6px;background:#30261F;display:grid;justify-items:center}
  .glb-host__fig::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(#30261F,rgba(48,38,31,0));pointer-events:none}
  .glb{width:min(100%,38svh,480px)}
  .glb__cap{margin-top:8px;width:min(100%,38svh,480px)}
  .glb-host__key{margin-top:4px}
}
@media (max-width:900px) and (max-height:560px){.glb-host__fig{position:relative;top:auto}}
html.still .glb__cv,html.still .glb__dyn,html.still .glb__still,html.still .glb__k::after,html.still .glb__nm{transition:none}
@media (forced-colors:active){.glb__dyn,.glb__cv{forced-color-adjust:none}.glb__k.is-lit{outline:2px solid Highlight}}

/* ---- Advisory Board FIG. 04: the members as a dossier on phones and tablets (two across, the first title, Credentials opens the rest) ---- */
@media (max-width:899px){
  [data-more="1"] .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;padding:10px 0 0}
  [data-more="1"] .person{gap:12px;align-content:start}
  [data-more="1"] .person__photo{width:min(100%,clamp(96px,27vw,150px))}
  [data-more="1"] .person__name{font-size:1rem;line-height:1.28}
  [data-more="1"] .person__post{font-size:10.5px;letter-spacing:.1em}
  [data-more="1"] .person__titles{font-size:.9rem;line-height:1.45;gap:6px;margin-top:6px}
}
@media (max-width:359px){[data-more="1"] .people{grid-template-columns:minmax(0,1fr)}}
@keyframes advIn{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
html.still .adv-card.is-open .person__titles li{animation:none}

/* ---- Advisory Board FIG. 05: the voices as a deck on phones ---- */
.vqd{display:none}
@media (max-width:759px){
  html:not(.still) .vqs--deck .vq__list{display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html:not(.still) .vqs--deck .vq__list::-webkit-scrollbar{display:none}
  html:not(.still) .vqs--deck .vq{scroll-snap-align:center;scroll-snap-stop:always;align-content:start;padding:26px 18px 22px;border:1px solid var(--rule);background:rgba(59,43,36,.28);gap:16px}
  html:not(.still) .vqs--deck .vq::before{left:18px;right:18px}
  html:not(.still) #in-their-words.vqs--deck .vq{--rw:78px}
  html:not(.still) .vqs--deck .vq__who{grid-auto-flow:column;justify-content:start;align-items:center;gap:14px}
  html:not(.still) .vqs--deck .vq__n{display:none}
  html:not(.still) .vqs--deck .vqd{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
  .vqd__b{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule-strong);border-radius:50%;background:none;color:var(--text-primary);cursor:pointer;
    transition:opacity .3s var(--ease-out),border-color .3s var(--ease-out);-webkit-tap-highlight-color:transparent}
  .vqd__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .vqd__b:disabled{opacity:.32;cursor:default}
  .vqd__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .vqd__dial{position:relative;width:40px;height:40px;flex:none}
  .vqd__dial svg{position:absolute;inset:0;width:100%;height:100%}
  .vqd__ring{fill:none;stroke:rgba(242,233,216,.28);stroke-width:1}
  .vqd__tk{fill:none;stroke:rgba(242,233,216,.5);stroke-width:1}
  .vqd__arm{position:absolute;inset:0;transition:transform .7s var(--ease-weight)}
  .vqd__spark{position:absolute;left:50%;top:5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#EDB877;box-shadow:0 0 8px 2px rgba(217,138,75,.7)}
  .vqd__n{margin:0;min-width:5.2em;text-align:center;color:var(--text-secondary)}
  .vqd__c{color:var(--text-primary)}
}

/* ---- About FIG. 04: the tabs as one rail with one sliding ember bar ---- */
.tabs__list--ink{position:relative}
.tabs__list--ink .tabs__tab::after{display:none}
.tabs__ink{position:absolute;left:0;bottom:-1px;width:1px;height:2px;background:linear-gradient(90deg,var(--accent),#EDB877);transform-origin:0 50%;
  box-shadow:0 0 8px rgba(217,138,75,.45);transition:transform .6s var(--ease-weight);pointer-events:none}
.tabs__ink.is-set{transition:none}
@media (max-width:899px){
  .tabs--rail .tabs__list{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);gap:0 26px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
  .tabs--rail .tabs__list::-webkit-scrollbar{display:none}
  .tabs--rail .tabs__tab{scroll-snap-align:center;flex:none;min-height:48px}
  .tabs--rail .tabs__ink{bottom:0}
}
html.still .tabs__ink{transition:none}

/* ---- About FIG. 05: on phones and tablets each founder's byline stands above the line (the markup keeps its order) ---- */
@media (max-width:899px){
  .vfc__fig{display:flex;flex-direction:column}
  .vfc__who{order:-1;margin:0 0 14px}
  .vfc__l--lead .vfc__who{margin-bottom:6px}
  .vfa__r{opacity:.55}
}

/* ---- About FIG. 02: the palette as four pigment studies on laid paper (assets/brand/pigment-*, drawn in code by
   review/selftest/perfection/r2-about/gen-pigments.mjs); each is laid down left to right as the instrument locks (transform only) ---- */
.ab-sw__chip{position:relative;height:auto;aspect-ratio:4/1;overflow:hidden;background:#2E2620;border-color:rgba(242,233,216,.22);box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
.ab-sw__wash{position:absolute;top:0;bottom:0;left:0;right:-36px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.ab-sw__wash::before{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(100% - 36px);background-size:cover;background-position:50% 50%}
.ab-sw__chip--sepia .ab-sw__wash::before{background-image:url(/assets/brand/pigment-sepia.jpg);background-image:image-set(url(/assets/brand/pigment-sepia.webp) type("image/webp"),url(/assets/brand/pigment-sepia.jpg) type("image/jpeg"))}
.ab-sw__chip--sanguine .ab-sw__wash::before{background-image:url(/assets/brand/pigment-sanguine.jpg);background-image:image-set(url(/assets/brand/pigment-sanguine.webp) type("image/webp"),url(/assets/brand/pigment-sanguine.jpg) type("image/jpeg"))}
.ab-sw__chip--parchment .ab-sw__wash::before{background-image:url(/assets/brand/pigment-parchment.jpg);background-image:image-set(url(/assets/brand/pigment-parchment.webp) type("image/webp"),url(/assets/brand/pigment-parchment.jpg) type("image/jpeg"))}
.ab-sw__chip--umber .ab-sw__wash::before{background-image:url(/assets/brand/pigment-umber.jpg);background-image:image-set(url(/assets/brand/pigment-umber.webp) type("image/webp"),url(/assets/brand/pigment-umber.jpg) type("image/jpeg"))}
.arx-wait .ab-sw__wash{transform:translate3d(-101%,0,0);transition:transform 1.25s var(--ease-inout)}
.arx-wait .ab-sw__wash::before{transform:translate3d(101%,0,0);transition:transform 1.25s var(--ease-inout)}
.arx-wait.arx-lit .ab-sw__wash,.arx-wait.arx-lit .ab-sw__wash::before{transform:none}
.arx-lit .ab-sw:nth-child(2) .ab-sw__wash,.arx-lit .ab-sw:nth-child(2) .ab-sw__wash::before{transition-delay:.28s}
.arx-lit .ab-sw:nth-child(3) .ab-sw__wash,.arx-lit .ab-sw:nth-child(3) .ab-sw__wash::before{transition-delay:.56s}
.arx-lit .ab-sw:nth-child(4) .ab-sw__wash,.arx-lit .ab-sw:nth-child(4) .ab-sw__wash::before{transition-delay:.84s}
html.still .ab-sw__wash,html.still .ab-sw__wash::before{transform:none !important;transition:none}
@media (forced-colors:active){.ab-sw__wash{display:none}}

/* ---- About FIG. 01: from the lecture hall to the console (fx/story.js). Desktop: the plate is held beside the story under the heading;
   phones and tablets: a compact plate held under the header while the story is read ---- */
#our-story .split{grid-template-rows:auto 1fr}
#our-story .split > .prose{grid-column:2;grid-row:1 / span 2}
.sp-fig{grid-column:1;grid-row:2;align-self:start;position:sticky;top:calc(var(--hdr-hc,72px) + 24px);margin:clamp(28px,4vh,44px) 0 0}
.sp{position:relative;aspect-ratio:1000/620;overflow:hidden;isolation:isolate;border:1px solid var(--rule);
  background:radial-gradient(ellipse at 55% 50%,rgba(168,67,46,.12),rgba(59,43,36,.3) 58%,rgba(20,16,12,.55) 100%),var(--canvas)}
.sp::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 60px rgba(12,9,6,.55)}
.sp__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
.sp__console{position:absolute;left:72%;top:24.2%;width:22%;height:58.2%;object-fit:fill;mix-blend-mode:screen;opacity:.82;z-index:1;transition:opacity .9s var(--ease-out)}
.sp.sp--end .sp__console{opacity:1}
.sp__svg .sp-f{fill:#231C16;stroke:none}
.sp__svg .sp-o{stroke:rgba(242,233,216,.78)}
.sp__svg .sp-h{fill:none;stroke:rgba(242,233,216,.3);stroke-width:.8;vector-effect:non-scaling-stroke}
.sp__svg .sp-s{fill:none;stroke:rgba(242,233,216,.42);stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linecap:round}
.sp__svg .sp-under{fill:none;stroke:rgba(242,233,216,.26);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke;stroke-linecap:round}
.sp__svg .sp-route{fill:none;stroke:#F2C9A0;stroke-width:1.7;vector-effect:non-scaling-stroke;stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(255,150,80,.5))}
.sp__svg .sp-nc{fill:#231C16;stroke:rgba(242,233,216,.5);stroke-width:1.1;vector-effect:non-scaling-stroke;transition:stroke .5s var(--ease-out)}
.sp__svg .sp-nd{fill:rgba(242,233,216,.5);transition:fill .5s var(--ease-out)}
.sp__svg .sp-t{font-size:15px;letter-spacing:.16em;fill:var(--text-secondary);transition:fill .5s var(--ease-out)}
.sp__svg .sp-tn{fill:#E08A6C}
.sp--live .sp-n:not(.is-on) .sp-t{fill:rgba(185,168,145,.55)}
.sp__svg .sp-n.is-on .sp-nc,.sp:not(.sp--live) .sp-nc{stroke:#F2B98E}
.sp__svg .sp-n.is-on .sp-nd,.sp:not(.sp--live) .sp-nd{fill:#EDB877}
.sp__svg .sp-n.is-on .sp-t{fill:var(--text-primary)}
.sp__svg .ist__tg{fill:none;stroke:#C8563C;stroke-width:1.4;vector-effect:non-scaling-stroke}
.sp__svg .ist__td{fill:#EDB877;stroke:none}
.sp-tgt{filter:drop-shadow(0 0 5px rgba(168,67,46,.7))}
.sp__cap{margin-top:12px;color:var(--text-secondary)}
@media (max-width:860px){
  #our-story .split{grid-template-rows:none}
  #our-story .split > .prose{grid-column:auto;grid-row:auto}
  .sp-fig{grid-column:auto;grid-row:auto;top:calc(var(--hdr-hc,64px) + 4px);z-index:2;margin:0;padding:8px 0 6px;background:var(--canvas);display:grid;justify-items:center}
  .sp-fig::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--canvas),rgba(38,32,26,0));pointer-events:none}
  .sp{width:min(100%,calc(30svh * 1000 / 620),560px)}
  .sp__cap{margin-top:6px;font-size:10px;width:min(100%,calc(30svh * 1000 / 620),560px)}
  .sp__svg .sp-t{font-size:20px;letter-spacing:.1em}
}
@media (max-width:860px) and (max-height:560px){.sp-fig{position:relative;top:auto}}
html.still .sp__console,html.still .sp__svg *{transition:none}
/* END ROUND2 ABOUT BLOCK */

/* =====================================================================
   ROUND2 DEPARTMENTS BLOCK (departments builder, round 2). The lantern plate is in the PR BLOCK above; the ink tissue pad of the
   running suture next to .sut__svg .hp.
   ===================================================================== */
/* phones and tablets: the sticky plates (the helm on /departments/, the suture, the lantern) dock on an opaque band of page colour, so no
   line of the list shows between the header and the plate; rows already fade out under the plate's lower edge (their ::after) */
@media (max-width:860px){.helm__stick::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;background:var(--canvas);pointer-events:none}}
@media (max-width:900px){.sut__plate::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;background:var(--canvas);pointer-events:none}}
@media (max-width:999px){
  .prl__fig{top:var(--hdr-hc,60px)}
  .prl__fig::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;background:var(--canvas);pointer-events:none}
}
/* the Board page's Overview of the teams: four ink plates at the standard (renderer: site.js team()); 2 x 2 from 1024 px, one column below */
#teams .vt__tree{display:none}
#teams .vt__list{grid-template-columns:minmax(0,1fr);gap:clamp(40px,7vw,64px)}
#teams .vt__item{padding-top:0}
@media (min-width:901px){#teams .vt__item::before{display:none}}
@media (min-width:1024px){
  #teams .vt__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px clamp(36px,4.4vw,72px);padding-left:0}
  #teams .vt__list::before,#teams .vt__item::after{display:none}
}
@media (min-width:640px) and (max-width:1023px){#teams .vt__item{max-width:620px}}
#teams .vt__card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;height:auto;background:none;border:0}
#teams .vt__card:hover,#teams .vt__card:active,#teams .vt__card.is-press{transform:none}
#teams .vt__txt{padding:18px 2px 0;gap:8px}
#teams .vt__sum{max-width:44ch}
.vt__plate{position:relative;aspect-ratio:5/4;overflow:hidden;isolation:isolate;border:1px solid var(--rule);
  background:radial-gradient(ellipse at 50% 48%,rgba(168,67,46,.12),rgba(59,43,36,.30) 56%,rgba(20,16,12,.55) 100%),#17120F}
.vt__plate::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 70px rgba(12,9,6,.6)}
.vt__plate::after{content:"";position:absolute;inset:9px;z-index:3;pointer-events:none;border:1px solid rgba(168,67,46,.5);transition:border-color .9s var(--ease-out)}
.vt__con{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vt__plate .ink{position:absolute;inset:5% 10% 7%;width:auto;height:auto}   /* no z-index or filter here: either would isolate the picture and the black paper would stop screening */
.vt__plate .ink img{object-fit:contain}
.vt__plate .vt__num{left:auto;right:24px;bottom:16px;z-index:4;font-size:clamp(2.8rem,4.2vw,3.8rem);color:rgba(242,233,216,.72);text-shadow:none;transition:color .9s var(--ease-out)}
/* the reading line: the plate in reading is lit (ink at full strength, a warm lamp behind it, the number and frame warm); the others rest */
.vt--live .vt__plate:not(.is-lit) .ink img{filter:brightness(.62)}
.vt__plate .vt__con{transition:opacity .9s var(--ease-out)}
.vt--live .vt__plate:not(.is-lit) .vt__con{opacity:.55}
.vt__plate.is-lit::after{border-color:rgba(200,86,60,.85)}
.vt__plate.is-lit .vt__num{color:#EDB877}
html.still .vt__plate .ink img,html.still .vt__plate .vt__con,html.still .vt__plate::after,html.still .vt__plate .vt__num{filter:none;opacity:1;transition:none}
html.still .vt--live .vt__plate .ink img{filter:none}
html.still .vt--live .vt__plate .vt__con{opacity:1}
/* PR FIG. 03: the construction traced on the official logo (specimen.js); one plate, no separate empty diagram */
.spec__left{grid-template-columns:minmax(0,1fr);justify-items:center;gap:10px;
  background:radial-gradient(ellipse at 50% 46%,rgba(168,67,46,.10),rgba(59,43,36,.26) 58%,rgba(20,16,12,.5) 100%),#1E1814;position:relative}
.spec__left .spec__svg{width:min(100%,560px)}
.spec__img{transform-box:fill-box}
.spec__svg .spec__lab{font-size:24px;letter-spacing:.12em}
.spec__left .spec__svg .spec__cov{fill:#211A16}
.spec__cons :is(.c,.l,.d){transition:opacity 1.6s var(--ease-inout)}
.spec--set .spec__cons .c{opacity:.55}
.spec--set .spec__cons .d{opacity:.6}
.spec__tgt{transform-box:fill-box;transform-origin:50% 50%;filter:drop-shadow(0 0 5px rgba(168,67,46,.6))}
.spec__tgt circle,.spec__tgt path{fill:none;stroke:#C8563C;stroke-width:1.4;vector-effect:non-scaling-stroke}
.spec__tgt .spec__td{fill:#EDB877;stroke:none}
.spec__tag{font-size:10px;color:var(--text-secondary);text-align:center}
html:not(.still) .spec--nologo :is(.spec__img,.spec__tgt){opacity:0}
html.still .spec__cons :is(.c,.l,.d){transition:none}
/* /departments/ hero: the construction stays on the plate like a viewfinder while the camera moves over the drawing, so the circle never
   leaves the frame and no tick crosses a label */
.ist__con.ist__fixed{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);z-index:0}
/* open head seats: the two consoles of the ink study (site.js seatStudy) */
.seats__plate{position:relative;aspect-ratio:400/360}
.seats__img{position:absolute;left:5%;top:11.9%;width:90%;height:79.2%;max-width:none;mix-blend-mode:screen;opacity:.92}
.seats__plate .seats__svg{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.seats__svg .t{font-size:11px}
.seats__svg .seats__td{fill:#EDB877;stroke:none}
.seats__plate .seats__svg{filter:drop-shadow(0 0 4px rgba(168,67,46,.35))}
.seats__plate::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 50px rgba(12,9,6,.55)}
.sigl.reveal .seats__img{opacity:0;transform:scale(1.03);transition:opacity 1.2s var(--ease-out) .2s,transform 1.6s var(--ease-out) .2s}
.sigl.reveal.in .seats__img{opacity:.92;transform:none}
html.still .sigl.reveal .seats__img{opacity:.92;transform:none;transition:none}
/* END ROUND2 DEPARTMENTS BLOCK */

/* ===================== ROUND2 PROGRAMS-EVENTS BLOCK (round 2 programs-events builder) ===================== */
/* ---- the program plate: each program opens on its own ink study (fx/inkstudy.js), a hairline Sanguine frame, the numbered key under it ---- */
.hplate--pv{width:min(100%,calc(64vh * .8),480px);justify-self:end}
.hplate--pv .hplate__frame{aspect-ratio:1;border-color:rgba(168,67,46,.6)}
.pvkey{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--rule)}
.pvkey li{border-bottom:1px solid var(--rule)}
.pvkey .ist__k{font-size:.95rem;transition:opacity .5s var(--ease-out)}
.ist-host--focus .pvkey .ist__k:not(.is-lit){opacity:.6}
@media (max-width:860px){.phero__in > .hplate--pv{order:2;justify-self:stretch;width:100%;max-width:560px}}
.pgv__lede{margin-top:clamp(16px,2.4vh,26px)}
/* Key facts as a keyed list */
.factp--key{border:0;background:none;border-top:1px solid var(--rule)}
.factp--key > div{padding:15px 0;grid-template-columns:12em minmax(0,1fr)}
.factp__n{display:inline-block;width:2.8em;color:#E08A6C}
@media (max-width:520px){.factp--key > div{grid-template-columns:minmax(0,1fr)}}
/* a small plate: the -sm drawing screened on a dark tile */
.pthumb{position:relative;display:block;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,rgba(168,67,46,.14),rgba(20,16,12,.62) 72%),#16120e}
.pthumb img{position:absolute;left:9%;top:9%;width:82%;height:82%;object-fit:contain;mix-blend-mode:screen;transition:opacity .6s var(--ease-out),transform .8s var(--ease-weight)}
/* ---- the ARM series: five small plates, this workshop framed in Sanguine with its target, a rule drawn from plate to plate ---- */
.sser{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.sser__i a{display:block;color:inherit;text-decoration:none;min-height:44px}
.sser__pl{position:relative;display:block;aspect-ratio:1;border:1px solid var(--rule);transition:border-color .5s var(--ease-out)}
.sser__pl .pthumb{position:absolute;inset:0}
.sser__pl .pthumb img{opacity:.5}
.sser__i:not(:last-child) .sser__pl::after{content:"";position:absolute;left:100%;top:50%;width:clamp(12px,1.6vw,24px);height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out) calc(var(--i,0) * .22s + .3s)}
.sser.in .sser__pl::after{transform:scaleX(1)}
.sser__i.is-here .sser__pl{border-color:rgba(200,86,60,.85);box-shadow:0 0 0 1px rgba(168,67,46,.25),0 0 28px rgba(168,67,46,.18)}
.sser__i.is-here .sser__pl .pthumb img{opacity:1}
.sser__i a:hover .sser__pl .pthumb img,.sser__i a:focus-visible .sser__pl .pthumb img{opacity:.9;transform:scale(1.04)}
.sser__i a:hover .sser__pl,.sser__i a:focus-visible .sser__pl{border-color:rgba(200,86,60,.6)}
.sser__i a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sser__tg{position:absolute;right:8px;top:8px;width:30px;height:30px;fill:none;stroke:#C8563C;stroke-width:1.6;filter:drop-shadow(0 0 5px rgba(168,67,46,.6))}
.sser__tg .sser__td{fill:#EDB877;stroke:none}
.sser__n{display:block;margin-top:12px;color:var(--text-secondary);font-size:11px;letter-spacing:.14em}
.sser__i.is-here .sser__n{color:#E08A6C}
.sser__t{display:block;margin-top:4px;font-family:var(--f-head);font-weight:600;font-size:.98rem;line-height:1.3}
.sser__here{display:block;margin-top:6px;color:#E08A6C;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
@media (max-width:760px){
  .sser{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;padding-bottom:10px;scrollbar-width:none;overscroll-behavior-x:contain}
  .sser::-webkit-scrollbar{display:none}
  .sser__i{flex:0 0 min(56vw,240px);scroll-snap-align:start}
  .sser__i:not(:last-child) .sser__pl::after{width:12px}
}
/* ---- the close of a program page: the next program's plate, its name large, where it sits in the series ---- */
.nextplate{display:block}
.nextplate__a{display:grid;grid-template-columns:clamp(88px,13vw,168px) minmax(0,1fr) auto;align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(12px,1.6vw,18px);border:1px solid var(--rule);color:inherit;text-decoration:none;background:rgba(38,32,26,.35);transition:border-color .5s var(--ease-out)}
.nextplate__a .pthumb{aspect-ratio:1}
.nextplate__a:hover,.nextplate__a:focus-visible{border-color:rgba(200,86,60,.7)}
.nextplate__a:hover .pthumb img{transform:scale(1.05)}
.nextplate__a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.nextplate__k{display:block;color:var(--text-secondary);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.nextplate__pos{margin-left:.9em;color:#E08A6C;white-space:nowrap;display:inline-block}
.nextplate__t{display:block;margin-top:10px;font-family:var(--f-display);font-size:clamp(1.55rem,3.4vw,3rem);line-height:1.04;letter-spacing:.05em;text-transform:uppercase}
.nextplate__arr{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .5s var(--ease-out)}
.nextplate__a:hover .nextplate__arr{transform:translateX(6px)}
.nextplate__all{margin-top:18px}
@media (max-width:560px){.nextplate__a{grid-template-columns:84px minmax(0,1fr)}.nextplate__arr{display:none}}
html.still .sser__pl::after{transition:none;transform:scaleX(1)}
html.still .pthumb img,html.still .pvkey .ist__k{transition:none}
/* program page: no dead band between the last section and the close */
#program > section:last-child{padding-bottom:clamp(28px,4.5vh,52px)}
#program + noscript + #continue,#continue{padding-top:clamp(28px,4.5vh,52px)}
.sec__foot.nextplate{display:block;border-top:0;padding-top:0}
/* ---- /programs/: each department opens on its own ink band (a window on its team study, fx/inkstudy.js with data-ist-seq="0") ---- */
.dband{position:relative;margin:0 0 6px;height:clamp(180px,17vw,240px);border:1px solid rgba(168,67,46,.5);container-type:inline-size}
.dband__pl{position:absolute;inset:0;--bw:62cqw}
.dband__pl .ist__cam{inset:0;transition:none}
.dband__box{position:absolute;left:calc(100% - var(--bw));top:50%;width:var(--bw);height:auto;aspect-ratio:var(--ar,1);margin-top:calc(var(--fy) * -1 * var(--bw) / var(--ar,1))}
.dband__con{position:absolute;inset:auto;left:calc(100% - var(--bw) + var(--fx) * var(--bw) - 80px);top:calc(50% - 80px);width:160px;height:160px;z-index:2}
.dband__n{position:absolute;left:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);z-index:2;font-family:var(--f-display);font-size:clamp(4.4rem,9vw,8.4rem);line-height:1;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(242,233,216,.42)}
.dband::after{content:"";position:absolute;left:clamp(16px,3vw,40px);right:calc(62cqw + 16px);top:calc(50% + clamp(2.4rem,5vw,4.6rem));height:1px;background:linear-gradient(90deg,rgba(168,67,46,.8),rgba(168,67,46,0));z-index:2}
@media (max-width:700px){.dband__pl{--bw:100cqw}.dband__n{font-size:3.6rem;top:auto;bottom:10px;transform:none}.dband::after{display:none}.dband{height:190px}}
.plg__h + .dband{margin-top:14px}
.plr__s{display:block;-webkit-line-clamp:unset;overflow:visible}
/* /programs/: one close right after the ledger */
#list{padding-bottom:0}
#next{padding-top:clamp(28px,4vh,44px)}
.pclose{margin-top:0}
.pclose .plr-more{margin:0 0 8px}
/* ---- event page: THE DAY, HOUR BY HOUR. An ink clock rule (the plate, held beside the list) and the numbered list that lights it ---- */
.day{display:grid;grid-template-columns:minmax(250px,4fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);align-items:start}
.day__plate{position:sticky;top:calc(var(--hdr-h) + 20px);height:min(calc(100vh - var(--hdr-h) - 60px),680px);display:flex;flex-direction:column;padding:14px 16px 12px 16px;border:1px solid rgba(168,67,46,.55);
  background:radial-gradient(ellipse at 50% 45%,rgba(168,67,46,.10),rgba(20,16,12,.5) 75%),var(--canvas);box-shadow:inset 0 0 60px rgba(12,9,6,.5)}
.day__hd{display:grid;grid-template-columns:repeat(var(--nt),minmax(0,1fr));gap:10px;margin-left:44px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.day__hd span{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day__rule{position:relative;flex:1;margin:10px 0 6px 44px;display:grid;grid-template-columns:repeat(var(--nt),minmax(0,1fr));gap:10px}
.day__rule::before{content:"";position:absolute;left:-12px;top:0;bottom:0;width:1px;background:rgba(242,233,216,.5);transform:scaleY(0);transform-origin:50% 0;transition:transform 1.4s var(--ease-out)}
.day.in .day__rule::before{transform:none}
.day__h{position:absolute;left:-44px;right:0;height:0;border-top:1px dashed rgba(242,233,216,.12);pointer-events:none}
.day__h b{position:absolute;left:0;top:-7px;font-family:var(--f-mono);font-weight:400;font-size:10px;letter-spacing:.1em;color:var(--text-secondary);line-height:1}
.day__h::after{content:"";position:absolute;left:30px;top:-1px;width:9px;height:1px;background:rgba(242,233,216,.55)}
.day__tr{position:relative}
.day__b{position:absolute;left:0;right:0;display:block;border:1px solid rgba(242,233,216,.55);background:rgba(242,233,216,.05);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .7s var(--ease-out) calc(var(--k,0) * 70ms + .2s),opacity .5s var(--ease-out)}
.day.in .day__b{transform:none}
.day__b--break{border-color:rgba(242,233,216,.22);background:repeating-linear-gradient(135deg,rgba(242,233,216,.2) 0 1px,transparent 1px 5px)}
.day__b em{position:absolute;left:6px;top:4px;font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:rgba(242,233,216,.7)}
.day__b::before{content:"";position:absolute;inset:-1px;border:1px solid #C8563C;background:rgba(200,86,60,.18);box-shadow:0 0 18px rgba(168,67,46,.45);opacity:0;transition:opacity .45s var(--ease-out)}
.day__b::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:1.5px solid #E08A6C;box-shadow:0 0 0 3px rgba(12,9,6,.5),inset 0 0 0 5px rgba(12,9,6,0);background:radial-gradient(circle,#EDB877 0 2.4px,transparent 3px);opacity:0;transform:scale(.6);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.day__b.is-lit::before,.day__b.is-lit::after{opacity:1}
.day__b.is-lit::after{transform:none}
.day__b.is-lit em{color:#F2E9D8}
.day--on .day__b:not(.is-lit):not(.day__b--break){opacity:.55}
.day__cap{margin:6px 0 0 44px;font-size:10px;letter-spacing:.14em;color:var(--text-secondary)}
.day__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.day__i{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:4px 12px;padding:clamp(16px,2.6vh,26px) 0;border-bottom:1px solid var(--rule);position:relative}
.day__i::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease-out)}
.day__i.is-lit::after{transform:none}
.day__n{grid-row:span 2;color:var(--text-secondary);font-size:12px;letter-spacing:.12em;padding-top:3px;transition:color .45s var(--ease-out)}
.day__i.is-lit .day__n{color:#E08A6C}
.day__w{font-size:11px;letter-spacing:.14em;color:var(--text-secondary);text-transform:uppercase}
.day__x{font-family:var(--f-head);font-weight:600;font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.35;transition:color .45s var(--ease-out)}
.day--on .day__i:not(.is-lit) .day__x{color:rgba(242,233,216,.72)}
.day__note{max-width:72ch;margin-top:clamp(20px,3vh,32px);color:var(--text-secondary)}
@media (max-width:760px){
  .day{grid-template-columns:118px minmax(0,1fr);gap:14px}
  .day__plate{padding:10px 8px 8px 6px;height:min(calc(100vh - var(--hdr-h) - 40px),600px)}
  .day__hd{margin-left:26px;gap:5px}.day__hd span{font-size:8px;letter-spacing:.06em}
  .day__rule{margin-left:26px;gap:5px}.day__h{left:-26px}.day__h b{font-size:9px}.day__h::after{left:17px;width:6px}.day__rule::before{left:-6px}
  .day__b em{display:none}.day__b::after{width:14px;height:14px;margin:-7px 0 0 -7px}
  .day__cap{margin-left:26px;font-size:8px;letter-spacing:.06em}
  .day__i{grid-template-columns:minmax(0,1fr);gap:4px}.day__n{grid-row:auto;padding:0}
}
html.still .day__b,html.still .day__rule::before{transform:none;transition:none}
html.still .day__b:not(.day__b--break)::before{opacity:1}
html.still .day__b::after{opacity:1;transform:none;transition:none}
@media (forced-colors:active){.day__b::before,.day__b::after{display:none}.day__b.is-lit{outline:2px solid Highlight}}
/* ---- event page: the cinematic cover plate (an event with its own cover photo) ---- */
.phero--cine{padding-top:calc(var(--hdr-h) + clamp(18px,3vh,32px));min-height:0;justify-content:flex-start}
.phero--cine .phero__in{grid-template-columns:minmax(0,1fr);gap:0}
main .phero--cine .hplate.hplate--img.hplate--cine{order:-1;justify-self:stretch;width:100vw;max-width:100vw;margin:clamp(10px,2vh,20px) calc(50% - 50vw) 0}
main .phero--cine .hplate.hplate--img.hplate--cine .hplate__frame{aspect-ratio:3/2;height:auto;border:0;transform:none !important}
main .phero--cine .hplate.hplate--img.hplate--cine .hplate__frame > img,main .phero--cine .hplate.hplate--img.hplate--cine .hplate__frame > picture.pic > img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform-origin:52% 38%;animation:cinePush 22s var(--ease-out) .3s both}
main .phero--cine .hplate.hplate--img.hplate--cine .hplate__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 80% 90% at 50% 38%,rgba(38,32,26,0) 55%,rgba(20,16,12,.55) 100%),linear-gradient(180deg,rgba(38,32,26,0) 62%,rgba(38,32,26,.9) 97%,var(--canvas))}
main .phero--cine .hplate.hplate--img.hplate--cine .hplate__cap{position:absolute;left:var(--gutter);bottom:clamp(10px,2vh,18px);z-index:3;margin:0;color:rgba(242,233,216,.8)}
.phero--cine .phero__in > div:first-child{position:relative;z-index:2;padding-top:clamp(18px,3vh,30px)}
@keyframes cinePush{from{transform:scale(1.001)}to{transform:scale(1.06)}}
@media (min-width:1100px){
  main .phero--cine .hplate.hplate--img.hplate--cine .hplate__frame{aspect-ratio:auto;height:min(76vh,50vw)}
  main .phero--cine .hplate.hplate--img.hplate--cine .hplate__frame::after{background:radial-gradient(ellipse 80% 90% at 50% 34%,rgba(38,32,26,0) 50%,rgba(20,16,12,.5) 100%),linear-gradient(180deg,rgba(38,32,26,0) 44%,rgba(38,32,26,.62) 64%,rgba(38,32,26,.9) 82%,var(--canvas) 99%)}
  main .phero--cine .hplate.hplate--img.hplate--cine .hplate__cap{left:auto;right:var(--gutter)}
  .phero--cine .phero__in > div:first-child{margin-top:-24vh;padding-top:0;max-width:980px}
  .phero--cine .phero__in > div:first-child .t-title{text-shadow:0 2px 24px rgba(20,16,12,.6)}
}
html.still main .phero--cine .hplate.hplate--img.hplate--cine .hplate__frame img{animation:none}
@media (max-width:760px){.day__hd span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}}
/* ---- /events/ hero: THE ALMANAC (fx/almanac.js), the first year as an ink instrument ---- */
.hplate--alm{width:min(100%,calc(66vh * .8),520px)}
.hplate--alm .hplate__frame{aspect-ratio:1;border-color:rgba(168,67,46,.6)}
@media (max-width:860px){.phero__in > .hplate--alm{order:2;justify-self:stretch;width:100%;max-width:560px}}
.alm__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 50%}
.alm--run .alm__svg{animation:almDrift 46s ease-in-out infinite alternate;will-change:transform}
@keyframes almDrift{0%{transform:rotate(0deg) scale(1)}100%{transform:rotate(-2.4deg) scale(1.035)}}
.alm__hp{stroke:rgba(242,233,216,.28);stroke-width:1}
.alm__hatch{opacity:1;transition:opacity 1.2s var(--ease-out)}
.alm text{font-family:var(--f-mono);fill:rgba(242,233,216,.62);text-anchor:middle;letter-spacing:.14em}
.alm__mo{font-size:25px}
.alm__dim,.alm__trk{font-size:19px;fill:rgba(242,233,216,.45)}
.alm__yr{font-size:20px}
.alm text.alm__yr2{font-family:var(--f-display);font-size:54px;letter-spacing:.06em;fill:#F2E9D8}
.alm__today path{stroke:rgba(242,233,216,.55);stroke-width:1.2;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.alm__today circle{fill:#F2E9D8}
.alm__ld{fill:none;stroke:rgba(200,86,60,.8);stroke-width:1.2;vector-effect:non-scaling-stroke}
.alm__tr{fill:none;stroke:#C8563C;stroke-width:1.6;vector-effect:non-scaling-stroke}
.alm__td{fill:#EDB877}
.alm__tg{filter:drop-shadow(0 0 6px rgba(168,67,46,.65))}
.alm text.alm__tn{font-size:27px;fill:#F2E9D8;letter-spacing:.12em}
.alm text.alm__tdt{font-size:24px;fill:#E08A6C}
.alm__mk circle{fill:rgba(20,16,12,.85);stroke:rgba(242,233,216,.45);stroke-width:1.2;vector-effect:non-scaling-stroke;transition:stroke .45s var(--ease-out),fill .45s var(--ease-out)}
.alm .alm__mk text{font-size:22px;letter-spacing:.06em;fill:rgba(242,233,216,.6);transition:fill .45s var(--ease-out)}
.alm__mk{transition:opacity .45s var(--ease-out),filter .45s var(--ease-out)}
.alm__mk.is-lit circle{stroke:#E08A6C;fill:rgba(168,67,46,.35)}
.alm .alm__mk.is-lit text{fill:#F2E9D8}
.alm__mk.is-lit{filter:drop-shadow(0 0 8px rgba(200,86,60,.8))}
.alm--focus .alm__mk:not(.is-lit){opacity:.5}
/* before the pen has drawn: the labels, targets and markers wait, then arrive in turn */
.alm--live .alm__hatch,.alm--live .alm__lab,.alm--live .alm__tg,.alm--live .alm__today,.alm--live .alm__mks{opacity:0;transition:opacity 1s var(--ease-out)}
.alm--live.alm--drawn .alm__hatch{opacity:1}
.alm--live.alm--drawn .alm__lab{opacity:1;transition-delay:.15s}
.alm--live.alm--drawn .alm__today{opacity:1;transition-delay:.3s}
.alm--live.alm--drawn .alm__tg{opacity:1;transition-delay:.45s}
.alm--live.alm--drawn .alm__mks{opacity:1;transition-delay:.7s}
/* the key rows */
.plr--ev{transition:background-color .45s var(--ease-out)}
.plr--ev.is-lit .plr__n{color:#E08A6C}
.plr--ev.is-lit{background:linear-gradient(90deg,rgba(168,67,46,.12),rgba(168,67,46,0) 70%)}
html.still .alm__svg{animation:none}
@media (forced-colors:active){.alm__tg,.alm__mk.is-lit{filter:none}}
/* /events/: the photo strip runs straight into the close (no dead band) */
#from-our-events{padding-bottom:clamp(36px,5vh,56px)}
#from-our-events + .sec--tight{padding-top:clamp(28px,4vh,44px)}
#from-our-events[hidden] + .sec--tight{padding-top:clamp(64px,10vh,120px)}
#from-our-events + .sec--tight .sec__foot{margin-top:0}
.dband__pl.ist--drawn .ist__still{opacity:.94;transition:opacity 1.2s var(--ease-inout)}
.dband__pl.ist--drawn .ist__cv{opacity:0;transition:opacity 1.2s var(--ease-inout)}
html.still .day__b--break::after{opacity:0}

/* =====================================================================
   ROUND2 RESEARCH-INVOLVE BLOCK (round 2 research-involve builder, 2026-09-25). Appended only.
   1. /research/ and /get-involved/ heroes are ink-study plates (fx/inkstudy.js, data-study "research" and "involve"). The heading words that
      name the research plate's parts (data-ist-words) light with their part: the others dim, the lit one takes a Sanguine rule and a warm
      glow (opacity, transform and filter only). /get-involved/: the three ways in are the plate's numbered key (links to their rows).
      Phones: the research cards become one compact row of two (they stay near the top, site-todo 80d) and the plate follows them;
      the Get Involved key follows its plate.
   ===================================================================== */
.ist__w{position:relative;display:inline;transition:opacity .6s var(--ease-out),filter .6s var(--ease-out)}
.ist__w::after{content:"";position:absolute;left:0;right:.04em;bottom:0;height:max(2px,.055em);background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out);pointer-events:none}
.ist__w.is-lit::after{transform:scaleX(1)}
.ist-host--focus .ist__w:not(.is-lit){opacity:.36}
.ist__w.is-lit{filter:drop-shadow(0 0 14px rgba(200,86,60,.42))}
.gi-hkey{list-style:none;margin:clamp(24px,3.6vh,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px;max-width:540px;border-top:1px solid var(--rule)}
.gi-hkey li{border-bottom:1px solid var(--rule)}
.gi-hkey__k{grid-template-columns:auto minmax(0,1fr);gap:12px;min-height:54px;text-decoration:none;transition:opacity .5s var(--ease-out)}
.gi-hkey__k:hover{color:var(--text-primary)}
.ist-host--focus .gi-hkey__k:not(.is-lit){opacity:.58}
html.still .ist__w,html.still .ist__w::after,html.still .gi-hkey__k{transition:none}
@media (max-width:860px){
  .phero__in--ist{row-gap:0}
  .phero__in--ist > div:first-child{display:contents}
  .phero__in--ist > .hplate--ist{order:2;margin-top:clamp(26px,4vh,36px)}
  .phero__in--ist .gi-hkey{order:1;justify-self:center;width:min(100%,420px)}
}
@media (max-width:560px){
  .phero__in--ist .rs-jump{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .phero__in--ist .rs-jump__card{grid-template-rows:auto auto;min-height:0;padding:12px 12px 14px 16px;gap:8px 8px}
  .phero__in--ist .rs-jump__t{grid-column:1 / -1;font-size:clamp(1.25rem,6vw,1.6rem)}
  .phero__in--ist .rs-jump__a{grid-row:1;grid-column:2}
  .phero__in--ist .rs-jump__d{display:none}
  .gi-hkey{gap:0 10px}
  .gi-hkey__k{grid-template-columns:minmax(0,1fr);gap:2px;min-height:60px;padding:8px 0;font-size:.95rem}
}
/* 2. the phone sheet (header, every page): its ground is opaque within 90 ms and the entries arrive on it (their own stagger), so the menu's
      words never lie over the page's; closing, the entries go first and the ground after them. Sub-links sit two to a row (portrait), so
      every entry fits on one phone screen. A link to another page keeps the sheet open (site.js): it is the curtain the leaf turn lifts. */
.sheet{transition:opacity .2s var(--ease-out) .12s,visibility 0s linear .32s}
.sheet.open{transition:opacity .09s linear,visibility 0s}
.sheet:not(.open) .sheet__list a,.sheet:not(.open) .sheet__ab,.sheet:not(.open) .sheet__ctl,.sheet:not(.open) .sheet__call{transition-duration:.14s;transition-delay:0s}
@media (max-width:1000px) and (min-height:501px){
  .sheet__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .sheet__list a{grid-column:1 / -1;min-height:50px}
  .sheet__list a.sheet__sub{grid-column:auto;min-height:44px;padding:6px 0 6px 18px;font-size:.95rem;line-height:1.2}
  .sheet__list a.sheet__sub::before{width:9px}
}
/* 3. the leaf turn (every page): the old leaf dims, blurs slightly and is gone before the new one arrives, so no frame holds two pages'
      words; the Sanguine seam crosses between them (S5 above). Motion off: instant (the rules at the top of the S5 block). */
::view-transition-old(root){animation:leafOut2 240ms var(--ease-inout) both}
::view-transition-new(root){animation:leafIn 480ms var(--ease-out) 210ms both}
@keyframes leafOut2{to{opacity:0;transform:translate3d(calc(var(--leaf-dx) * var(--leaf-dir) * -.6),0,0);filter:brightness(.55) blur(2px)}}
::view-transition-old(title){animation-duration:.2s}
::view-transition-new(title){animation-delay:.2s;animation-duration:.3s}
html.still::view-transition-new(*),html.still::view-transition-old(*),html:not(.motion-on)::view-transition-new(*){animation-delay:0s !important}
@media (max-width:1000px) and (min-height:501px){
  .sheet{padding-top:calc(var(--hdr-h) + 14px)}
  .sheet__list a{min-height:46px}
  .sheet__ab,.sheet__ctl{margin-bottom:16px}
}
/* the header is the same leaf on both pages: it swaps at once (the Menu/Close label and the current link never cross-fade as two words) */
::view-transition-old(hdr){animation:none;opacity:0}
::view-transition-new(hdr){animation:none}
/* 4. /research/ FIG. 03 atlas, phones and portrait tablets: the docked mini plate (fx/anatomy.js) under the condensed header while the
      list is read: the organ outline with the current paper's part washed in Sanguine, the part's name and "Paper 3 of 14". */
.gx-dock{display:none}
@media (max-width:860px){
  .gx-dock{position:fixed;left:0;right:0;top:var(--hdr-hc);z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;
    width:100%;min-height:76px;margin:0;padding:8px var(--gutter);border:0;border-bottom:1px solid var(--rule);background:var(--canvas);color:var(--text-primary);
    font:inherit;text-align:left;cursor:pointer;box-shadow:0 14px 24px -18px rgba(0,0,0,.8);
    opacity:0;visibility:hidden;transform:translate3d(0,-104%,0);transition:transform .45s var(--ease-out),opacity .3s var(--ease-out),visibility 0s linear .45s;-webkit-tap-highlight-color:transparent;contain:layout paint}
  .gx-dock.is-on{opacity:1;visibility:visible;transform:none;transition:transform .5s var(--ease-out),opacity .3s var(--ease-out),visibility 0s}
  .gx-dock__fig{position:relative;width:64px;height:61px;border:1px solid rgba(168,67,46,.55);background:radial-gradient(circle at 50% 50%,rgba(168,67,46,.1),rgba(0,0,0,0) 70%)}
  .gx-dock__fig svg{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);overflow:visible}
  .gx-dock__w{opacity:0;transition:opacity .45s var(--ease-out)}
  .gx-dock__w.is-lit{opacity:1}
  .gx-dock__w path{fill:#A8432E;opacity:.75}
  .gx-dock__w .gx-cut{fill:none;stroke:#D0694E;stroke-width:12;stroke-linecap:round}
  .gx-dock__l{fill:none;stroke:rgba(242,233,216,.78);stroke-width:5;stroke-linejoin:round}
  .gx-dock__t{display:grid;gap:3px;min-width:0}
  .gx-dock__k{font-size:10px;letter-spacing:.16em;color:var(--text-secondary)}
  .gx-dock__a{font-family:var(--f-head);font-weight:600;font-size:1rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gx-dock__n{font-size:11px;letter-spacing:.1em;color:#E08A6C;white-space:nowrap}
  .gx-dock__up{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
}
@media (max-width:420px){.gx-dock{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}.gx-dock__up{display:none}.gx-dock__n{font-size:10px;letter-spacing:.06em}}
html.still .gx-dock{display:none}
/* the atlas plate a little larger beside its list on wide screens (44 % of the row), so the ink reads at the standard */
@media (min-width:1100px){.gx{grid-template-columns:minmax(0,11fr) minmax(0,14fr)}}
/* 5. header, wide screens: the Departments menu as a small standard plate (site.js ddPlate): the Board study's console and cart in the
      hairline Sanguine frame, the rows numbered 00 to 04 beside it. A row under the pointer or the keyboard lights its part and the view
      eases onto it (:has, transform and opacity only); the plate is brushed in as the menu opens (a soft cover slides away). */
.dd__plate,.dd__n,.dd__s{display:none}
@media (min-width:1100px){
  .dd__menu--plate{display:grid;grid-template-columns:282px minmax(0,1fr);width:600px;padding:6px 0}
  .dd__menu--plate > li{grid-column:2}
  .dd__menu--plate > li.dd__plate{display:block;grid-column:1;grid-row:1 / span 6;align-self:center;position:relative;margin:6px 16px 6px 14px;aspect-ratio:1.3;
    overflow:hidden;border:1px solid rgba(168,67,46,.6);background:#0f0c09;isolation:isolate}
  .dd__plate::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 38px rgba(8,6,4,.85);background:radial-gradient(circle at 60% 48%,rgba(255,170,110,.07),rgba(0,0,0,0) 60%)}
  .dd__plate::before{content:"";position:absolute;inset:-2px -30% -2px -2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(15,12,9,0),#0f0c09 22%);
    transform:translate3d(-8%,0,0);transition:transform 0s linear .4s}
  .dd.open .dd__plate::before{transform:translate3d(105%,0,0);transition:transform 1s var(--ease-inout) .06s}
  .dd__cam{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .9s var(--ease-weight)}
  .dd__cam img{position:absolute;left:-7%;top:-15.2%;width:116.3%;height:auto;max-width:none;mix-blend-mode:screen;opacity:.92;transition:opacity .6s var(--ease-out)}
  .dd__g{position:absolute;width:24%;aspect-ratio:1;border-radius:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;
    background:radial-gradient(circle,rgba(255,170,100,.6),rgba(230,110,60,.2) 42%,rgba(0,0,0,0) 70%);transform:translate(-50%,-50%) scale(.55);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out)}
  .dd__tgt{position:absolute;left:59%;top:61%;width:16px;height:16px;transform:translate(-50%,-50%);fill:none;stroke:#C8563C;stroke-width:1.4;overflow:visible;filter:drop-shadow(0 0 3px rgba(168,67,46,.7))}
  .dd__tgt circle:nth-child(2){fill:#EDB877;stroke:none}
  .dd__con{position:absolute;inset:0;z-index:1;width:100%;height:100%;fill:none;stroke:rgba(242,233,216,.28);stroke-width:.5;vector-effect:non-scaling-stroke;pointer-events:none}
  .dd__menu--plate a{gap:12px;min-height:48px}
  .dd__menu--plate li:first-child a{min-height:54px}
  .dd__n{display:inline-block;flex:none;width:2em;font-size:11px;color:var(--text-secondary);transition:color .4s var(--ease-out)}
  .dd__tx{display:grid;gap:2px}
  .dd__s{display:block;font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
  .dd__menu--plate a:is(:hover,:focus-visible) .dd__n{color:#E08A6C}
  .dd__menu--plate:has(a[data-p]:is(:hover,:focus-visible)) .dd__cam img{opacity:.62}
  .dd__menu--plate:has(a[data-p="all"]:is(:hover,:focus-visible)) .dd__g{opacity:.7;transform:translate(-50%,-50%) scale(.85)}
  .dd__menu--plate:has(a[data-p="all"]:is(:hover,:focus-visible)) .dd__cam img{opacity:.92}
  .dd__menu--plate:has(a[data-p="c"]:is(:hover,:focus-visible)) .dd__cam{transform:translate(25.2%,13.1%) scale(1.45)}
  .dd__menu--plate:has(a[data-p="a1"]:is(:hover,:focus-visible)) .dd__cam{transform:translate(-1.7%,4.4%) scale(1.45)}
  .dd__menu--plate:has(a[data-p="a2"]:is(:hover,:focus-visible)) .dd__cam{transform:translate(-7.8%,0) scale(1.45)}
  .dd__menu--plate:has(a[data-p="a3"]:is(:hover,:focus-visible)) .dd__cam{transform:translate(-13%,0) scale(1.45)}
  .dd__menu--plate:has(a[data-p="a4"]:is(:hover,:focus-visible)) .dd__cam{transform:translate(-20%,4.4%) scale(1.45)}
  .dd__menu--plate:has(a[data-p="c"]:is(:hover,:focus-visible)) .dd__g[data-p="c"],
  .dd__menu--plate:has(a[data-p="a1"]:is(:hover,:focus-visible)) .dd__g[data-p="a1"],
  .dd__menu--plate:has(a[data-p="a2"]:is(:hover,:focus-visible)) .dd__g[data-p="a2"],
  .dd__menu--plate:has(a[data-p="a3"]:is(:hover,:focus-visible)) .dd__g[data-p="a3"],
  .dd__menu--plate:has(a[data-p="a4"]:is(:hover,:focus-visible)) .dd__g[data-p="a4"]{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
html.still .dd__plate::before{display:none}
html.still .dd__cam,html.still .dd__g,html.still .dd__cam img{transition:none}
/* 6. /404.html "Finish the study" (fx/nfstudy.js): the cart study with its fourth arm under a cover (a ghost at 14 %) and its dashed
      construction; the hand's brush lays the arm in on a canvas clipped to the arm; finished, the target on its tip lights and the line
      under the plate changes. Phones: the plate follows the button, before the list of pages. */
.hplate--nf2 .hplate__frame{aspect-ratio:.8;touch-action:pan-y}
.nf2{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 60% 42%,rgba(168,67,46,.12),rgba(59,43,36,.30) 56%,rgba(20,16,12,.55) 100%),var(--canvas)}
.nf2::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 70px rgba(12,9,6,.55)}
.nf2__con{position:absolute;inset:12px;z-index:2;width:calc(100% - 24px);height:calc(100% - 24px);overflow:visible;pointer-events:none}
.nf2__con .nf2__arm{stroke:rgba(242,233,216,.42)}
.nf2__box{position:absolute;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent),linear-gradient(transparent,#000 3%,#000 95%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent),linear-gradient(transparent,#000 3%,#000 95%,transparent);mask-composite:intersect}
.nf2__still,.nf2__cv,.nf2__base{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen}
.nf2--live .nf2__still{opacity:0}
.nf2__still{opacity:.94}
.nf2__hide,.nf2__cv{clip-path:var(--arm)}
.nf2__hide{display:none;position:absolute;inset:0;background:#000;opacity:.86}
.nf2--wait .nf2__hide{display:block}
.nf2__cv{opacity:1}
.nf2__tgt{opacity:.22;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.7);transition:opacity .8s var(--ease-out),transform .9s var(--ease-stamp);filter:drop-shadow(0 0 5px rgba(168,67,46,.6))}
.nf2__con .nf2__tg{fill:none;stroke:#C8563C;stroke-width:1.3}
.nf2__con .nf2__td{fill:#EDB877;stroke:none}
.nf2--done .nf2__tgt{opacity:1;transform:none}
.nf2--done .nf2__arm{stroke:rgba(242,233,216,.16);transition:stroke 1.2s var(--ease-out)}
.hplate--nf2 .nf-hint{display:grid}
.hplate--nf2 .nf-hint > span{grid-area:1 / 1;transition:opacity .6s var(--ease-out)}
.nf2__fin{opacity:0;color:#E08A6C}
.nf2--done .nf2__fin{opacity:1}
.nf2--done .nf2__todo{opacity:0}
html.still .nf2__tgt,html.still .nf-hint > span{transition:none}
html.still .hplate--nf2 .nf-hint{opacity:1}
@media (max-width:860px){
  .phero__in--ist .nf__list{order:3}
  .phero__in--ist > .hplate--nf2{width:min(100%,360px)}
}

/* ===== ROUND3 HOME BLOCK (improvement round 3, home builder) ===== */
/* FIG. 07, THE PROOF: the ink plate that ends the game (site.js section 11). It settles over the field (opacity only), the pen draws the
   hand and the tip, then the answer rises. html.still and no script show it finished. */
.ctl__proof{position:absolute;inset:0;z-index:6;opacity:0;visibility:hidden;
  background:radial-gradient(ellipse 80% 75% at 50% 45%,rgba(44,35,28,.9),rgba(22,18,15,.97));
  transition:opacity .8s var(--ease-out),visibility 0s linear .8s}
.ctl__proof::before{content:"";position:absolute;inset:12px;border:1px solid rgba(168,67,46,.55);pointer-events:none}
.ctl.is-proof .ctl__proof{opacity:1;visibility:visible;transition:opacity .8s var(--ease-out),visibility 0s}
.ctl__psvg{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible}
.ctl__psvg *{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
.ctl__psvg .d{stroke:rgba(242,233,216,.24);stroke-dasharray:3 5}
.ctl__psvg .c{stroke:rgba(242,233,216,.55)}
.ctl__psvg .h{stroke:rgba(242,233,216,.26)}
.ctl__psvg .l{stroke:rgba(242,233,216,.92);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}
.ctl__psvg .s{stroke:var(--accent)}
.ctl__psvg .l.s{stroke:#C4573F}
.ctl__psvg .p{stroke-width:1.8}
.ctl__psvg text{fill:rgba(242,233,216,.82);stroke:none;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em}
.ctl__psvg text.s{fill:#D0694F}
.ctl__psvg text.r{font-size:13px;font-weight:500}
.ctl__pend{position:absolute;left:54%;right:5%;top:62%;bottom:7%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.ctl__stage.is-tall .ctl__pend{left:7%;right:7%;top:73%;bottom:4%;gap:8px}
.ctl__pend > *{margin:0;opacity:0;transform:translate3d(0,10px,0);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.ctl.is-proof .ctl__pend > *{opacity:1;transform:none}
.ctl.is-proof .ctl__answer{transition-delay:2.3s}
.ctl.is-proof .ctl__pnote{transition-delay:2.6s}
.ctl.is-proof .ctl__again{transition-delay:2.9s}
.ctl__answer{font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--text-primary)}
.ctl__pnote{max-width:34ch;font-size:14px;line-height:1.5;color:rgba(242,233,216,.8)}
.ctl__again{min-height:44px;min-width:44px;padding:0 20px}
@media (max-width:560px){.ctl__pnote{display:none}.ctl__answer{font-size:1.9rem}}
.ctl.is-proof #holdReset{visibility:hidden}
html.still .ctl__proof{opacity:1;visibility:visible;transition:none}
html.still .ctl__pend > *{opacity:1;transform:none;transition:none}
html.still .ctl__again{display:none}
html.no-js .ctl__stage{height:auto;aspect-ratio:auto}
html.no-js .ctl__field,html.no-js .ctl__stage .ctl__target{display:none}
html.no-js .ctl__proof{position:relative;opacity:1;visibility:visible;padding-bottom:28px}
html.no-js .ctl__psvg{position:relative;height:auto;aspect-ratio:2/1}
html.no-js .ctl__pend{position:static}
html.no-js .ctl__pend > *{opacity:1;transform:none}
html.no-js .ctl__again{display:none}
@media (forced-colors:active){.ctl__proof::before{border-color:CanvasText}}
/* #impact, the four facts plate: readable captions, the three rows (figure, title, caption) shared by every cell, and a band that hugs the
   plate on wide screens so the film hands straight over to the facts and the facts to FIG. 01 */
.impx .impx__s{font-size:15px;color:rgba(242,233,216,.82)}
@supports (grid-template-rows:subgrid){
  .impx{grid-auto-rows:auto}
  .impx__i{grid-row:span 3;grid-template-rows:subgrid;row-gap:8px}
}
@media (max-width:420px){.impx .impx__s{font-size:14px}}
@media (min-width:1024px){#impact.sec{padding-block:96px 0}}
/* FIG. 01 on phones: both labels on one line under their leaders (the name in cream, the role in Sanguine) */
@media (max-width:560px){
  .study__labels{height:40px}
  .study__labels span{font-size:10.5px;letter-spacing:.07em}
  .study__labels .study__lab--l{white-space:nowrap;line-height:1.5}
  .study__labels .study__lab--l b{display:inline;color:#D0694F}
  .study__labels .study__lab--l span{font-size:inherit;letter-spacing:inherit;color:var(--text-primary)}
}
/* FIG. 02: the link under the slider keeps one line on phones (the short words; the full words stay its name) */
.sec__go .go-s{display:none}
@media (max-width:480px){.sec__go .go-l{display:none}.sec__go .go-s{display:inline}}
/* FIG. 06 IN THEIR WORDS (home only): the portrait ring beside the attribution, the quote inking in word by word, and from 768 px one
   pinned voice stage with a numbered index (site.js ROUND3 HOME voice stage). */
[data-home] #in-their-words .vq{grid-template-columns:minmax(0,1fr);--rw:112px}
[data-home] #in-their-words .vq__who::before,[data-home] #in-their-words .vq__who::after,[data-home] #in-their-words .vq__lead{display:none}
[data-home] #in-their-words .vq__cap{grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,2vw,28px);row-gap:2px;align-items:start;padding-left:0}
[data-home] #in-their-words .vq__cap > :not(.vq__who){grid-column:2}
[data-home] #in-their-words .vq__cap .vq__who{grid-column:1;grid-row:1 / span 6;align-self:start;gap:8px;padding:0}
[data-home] #in-their-words .vq__cap .vq__name{margin-top:10px}
[data-home] #in-their-words .vq__cap .vq__n{font-size:10px}
[data-home] #in-their-words .vq--w .vq__q p{opacity:1;transform:none;filter:none;transition:none}
[data-home] #in-their-words .vw{display:inline-block;opacity:0;transform:translate3d(0,.3em,0);
  transition:opacity .6s var(--ease-out) calc(var(--w,0) * 38ms + .15s),transform .8s var(--ease-out) calc(var(--w,0) * 38ms + .15s)}
[data-home] #in-their-words .vq.in .vw{opacity:1;transform:none}
html.still[data-home] #in-their-words .vw{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important}
.vqx{display:none}
@media (max-width:767px){
  [data-home] #in-their-words .vq{--rw:72px;padding-block:26px;gap:16px}
  [data-home] #in-their-words .vq__cap .vq__n{display:none}
  [data-home] #in-their-words .vq__cap .vq__name{margin-top:4px}
}
@media (min-width:768px){
  html[data-home]:not(.still) #in-their-words.vqs--stage [data-voices]{position:relative;height:calc(100svh - var(--hdr-hc,72px) + var(--vn,4) * 40svh)}
  html:not(.still) .vqs--stage .vqst{position:sticky;top:var(--hdr-hc,72px);height:calc(100svh - var(--hdr-hc,72px));display:grid;
    grid-template-columns:minmax(0,1fr) minmax(190px,250px);gap:clamp(32px,5vw,88px);align-items:center}
  html:not(.still) .vqs--stage .vq__list{display:grid;margin:0;align-items:center}
  html:not(.still) .vqs--stage .vq{grid-area:1 / 1;padding-block:0;opacity:0;transform:translate3d(0,22px,0);pointer-events:none;
    transition:opacity .55s var(--ease-out),transform .9s var(--ease-weight)}
  html:not(.still) .vqs--stage .vq::before{display:none}
  html:not(.still) .vqs--stage .vq.is-on{opacity:1;transform:none;pointer-events:auto}
  html:not(.still) .vqs--stage .vw{filter:blur(4px);transition:opacity .6s var(--ease-out) calc(var(--w,0) * 38ms + .2s),transform .8s var(--ease-out) calc(var(--w,0) * 38ms + .2s),filter .7s var(--ease-out) calc(var(--w,0) * 38ms + .2s)}
  html:not(.still) .vqs--stage .vq.is-on .vw{opacity:1;transform:none;filter:none}
  html:not(.still) .vqs--stage .vq:not(.is-on) .vw{opacity:0;transform:translate3d(0,.3em,0);filter:blur(4px);transition-delay:0s}
  .vqx{display:none}
  html:not(.still) .vqs--stage .vqx{display:grid;align-content:center;gap:0;margin:0;padding:0;list-style:none;border-left:1px solid var(--rule)}
  .vqx__b{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:14px;width:100%;min-height:44px;padding:12px 0 12px 20px;
    border:0;background:none;color:var(--text-secondary);font:inherit;text-align:left;cursor:pointer;transition:color .45s var(--ease-out)}
  .vqx__b::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--accent),#EDB877);
    box-shadow:0 0 10px rgba(217,138,75,.5);transform:scaleY(0);transition:transform .55s var(--ease-weight)}
  .vqx__n{font-family:var(--f-display);font-weight:300;font-size:1.5rem;line-height:1;opacity:.55;transition:opacity .45s var(--ease-out),color .45s var(--ease-out)}
  .vqx__t{font-size:.92rem;line-height:1.35}
  .vqx__b:hover,.vqx__b[aria-current]{color:var(--text-primary)}
  .vqx__b[aria-current]::before{transform:scaleY(1)}
  .vqx__b[aria-current] .vqx__n{opacity:1;color:#F0A080}
  .vqx__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
@media (min-width:768px) and (max-width:1099px){
  html:not(.still) .vqs--stage .vqst{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-content:center;gap:28px;padding-bottom:24px}
  html:not(.still) .vqs--stage .vqx{grid-template-columns:repeat(var(--vn,4),minmax(0,1fr));border-left:0;border-top:1px solid var(--rule)}
  .vqx__b{grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 8px 4px 0}
  .vqx__b::before{left:0;right:8px;top:-1px;bottom:auto;width:auto;height:2px;transform:scaleX(0);transform-origin:0 50%}
  .vqx__b[aria-current]::before{transform:scaleX(1)}
  .vqx__t{font-size:.84rem}
}
@media (forced-colors:active){.vqx__b[aria-current]{outline:2px solid Highlight}}
.vq__big{display:none}
@media (min-width:768px){
  html:not(.still) .vqs--stage .vq{isolation:isolate}
  html:not(.still) .vqs--stage .vq__big{display:block;position:absolute;right:0;top:50%;z-index:-1;margin-top:-.42em;font-family:var(--f-display);font-weight:300;
    font-size:clamp(11rem,21vw,19rem);line-height:.84;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(242,233,216,.13);pointer-events:none;
    transform:translate3d(0,40px,0);transition:transform 1.2s var(--ease-weight)}
  html:not(.still) .vqs--stage .vq.is-on .vq__big{transform:none}
}
@media (max-width:767px){
  [data-home] #in-their-words .vq__cap .vq__credit,[data-home] #in-their-words .vq__cap .vq__src{grid-column:1 / -1}
  [data-home] #in-their-words .vq__cap .vq__credit{margin-top:12px}
  [data-home] #in-their-words .vq__cap .vq__who{grid-row:1 / span 2}
}

/* =====================================================================
   ROUND3 ABOUT BLOCK (round 3 about builder, 2026-09-25): About and the Advisory Board. Every rule without .pp-run / .fx-live / --on is
   the calm, finished version (no JS, html.still, module off). Transform, opacity and filter only animate.
   ===================================================================== */
/* ---- About PLATE 00 // THE GROUP (fx/photoplate.js): a wide 3 : 2 plate, 46vw on desktop, full width on phones ---- */
.phero__in:has(> .hplate--grp){grid-template-columns:minmax(0,1fr) auto}
.hplate--img.hplate--grp{width:min(46vw,640px)}
.hplate--grp .hplate__frame{aspect-ratio:16/9;border-color:rgba(168,67,46,.55);background:#1d1813}
.pp__cam{position:absolute;inset:10px;overflow:hidden;transform-origin:49% 66%;animation:cinePush 24s var(--ease-out) .3s both}
.pp__cam img,.pp__cv{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 60%;display:block;
  filter:sepia(.24) saturate(.84) contrast(1.06) brightness(.88)}
.pp__cam::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 78% 82% at 50% 56%,rgba(38,32,26,0) 42%,rgba(20,16,12,.72) 100%),linear-gradient(180deg,rgba(168,67,46,.07),rgba(168,67,46,0) 40%)}
.pp__tgt{position:absolute;z-index:3;left:49%;top:73%;width:54px;height:54px;max-width:none;margin:-27px 0 0 -27px;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(168,67,46,.7));transition:opacity .9s var(--ease-out) .15s,transform 1.1s var(--ease-weight) .15s}
.pp__tgt .pp__tg{fill:none;stroke:#C8563C;stroke-width:1.4}
.pp__tgt .pp__td{fill:#EDB877}
/* only while the brush runs: the real picture waits under the canvas; a CSS failsafe shows it after 4 s whatever happens */
html:not(.no-js):not(.still) .hplate--pp:not(.pp-done):not(.fx-off) .pp__cam img{opacity:0;animation:ppSafe .4s 4s forwards}
html:not(.no-js):not(.still) .hplate--pp.pp-run:not(.pp-done) .pp__cam img{animation:none}
html:not(.no-js):not(.still) .hplate--pp:not(.pp-done):not(.fx-off) .pp__tgt{opacity:0;transform:scale(1.7) rotate(-45deg);animation:ppSafe .4s 4.2s forwards}
html:not(.no-js):not(.still) .hplate--pp.pp-run:not(.pp-done) .pp__tgt{animation:none}
@keyframes ppSafe{to{opacity:1;transform:none}}
html.still .pp__cam{animation:none;transform:none}
@media (max-width:860px){
  .phero__in:has(> .hplate--grp){grid-template-columns:minmax(0,1fr)}
  .hplate--img.hplate--grp{width:100%}
  .hplate--grp .hplate__frame{aspect-ratio:16/9}
  .pp__cam{inset:8px}
  .pp__tgt{width:40px;height:40px;margin:-20px 0 0 -20px}
}
@media (forced-colors:active){.pp__tgt{display:none}}

/* ---- About FIG. 06: ONE ENGRAVED LEDGER (fx/ledger.js). Desktop: four columns on one hairline; below 1024 px a swipe rail ---- */
.ldg{--tile-h:clamp(84px,7vw,100px);--rule-y:0px;margin-top:clamp(28px,4vh,48px)}
.ldg__ends{display:flex;justify-content:space-between;gap:16px;margin:0 0 12px;color:var(--text-secondary);font-size:11px;letter-spacing:.16em}
.ldg__ends span:first-child{color:#E8A07C}
.ldg__rail{outline-offset:6px}
.ldg__rail:focus-visible{outline:2px solid var(--accent)}
.ldg__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(18px,2.4vw,34px);row-gap:0}
.ldg__e{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;padding-top:34px}
/* the rule: one segment per entry, reaching across the gap to the next tick, inked by scaleX from its own tick */
.ldg__seg{position:absolute;left:0;top:0;right:calc(-1 * clamp(18px,2.4vw,34px));height:1px;background:var(--rule);pointer-events:none}
.ldg__e:last-child .ldg__seg{right:0}
.ldg__ink{position:absolute;inset:0;background:linear-gradient(90deg,rgba(232,160,124,.9),rgba(242,233,216,.7));transform-origin:0 50%;transform:none}
.ldg--on .ldg__ink{transform:scaleX(0);will-change:transform}
.ldg__tk{position:absolute;left:0;top:-6px;width:1px;height:13px;background:rgba(242,233,216,.85);transition:opacity .6s var(--ease-out),transform .7s var(--ease-weight);transform-origin:50% 0}
.ldg__tk::after{content:"";position:absolute;left:-3px;top:3px;width:7px;height:7px;border-radius:50%;background:#EDB877;box-shadow:0 0 8px rgba(237,184,119,.6)}
.ldg__n{position:absolute;left:12px;top:10px;font-size:11px;letter-spacing:.14em;color:var(--text-secondary);transition:color .6s var(--ease-out),opacity .6s var(--ease-out)}
.ldg--on .ldg__e:not(.is-lit) .ldg__tk{opacity:.25;transform:scaleY(.4)}
.ldg--on .ldg__e:not(.is-lit) .ldg__n{opacity:.4}
.ldg__e.is-lit .ldg__n{color:#E8A07C}
.ldg__e--ev .ldg__tk{background:none;width:0}
.ldg__e--ev .ldg__tk::after{display:none}
.ldg__tgt{position:absolute;left:-20px;top:-14px;width:40px;height:40px;max-width:none;overflow:visible;filter:drop-shadow(0 0 6px rgba(168,67,46,.7));transition:opacity .8s var(--ease-out),transform 1s var(--ease-weight)}
.ldg__tgt .ldg__tg{fill:none;stroke:#C8563C;stroke-width:1.4}
.ldg__tgt .ldg__td{fill:#EDB877}
.ldg--on .ldg__e--ev:not(.is-lit) .ldg__tgt{opacity:0;transform:scale(1.7) rotate(-45deg)}
.ldg--on .ldg__e--ev:not(.is-lit) .ldg__tk{opacity:1;transform:none}
.ldg__e--ev .ldg__n{left:26px}
/* the entries: the logo in its cream mount, the kicker, the name, Read */
.ldg .affil__tile{display:inline-flex;align-items:center;justify-content:center;width:clamp(140px,12vw,176px);height:var(--tile-h);padding:10px 16px;margin:7px 7px 6px;
  background:#fff;line-height:0;filter:brightness(.92);border-radius:1px;box-shadow:inset 0 1px 5px rgba(38,32,26,.18),0 0 0 6px #e4d8c2,0 0 0 7px rgba(38,32,26,.55),0 10px 26px -12px rgba(0,0,0,.6)}
.ldg .affil__tile img{width:100%;height:100%;object-fit:contain}
.ldg .affil__tile:has(img[src*="/rss."]){padding:3px 16px}
.ldg .affil__kicker{margin:6px 0 0;color:var(--text-secondary)}
.ldg__e h3{margin:0;text-wrap:balance}
.ldg__p p{margin:0;color:var(--text-secondary)}
.ldg__rd{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;color:#EDB877;font-size:11px;letter-spacing:.14em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ldg__rd[hidden]{display:none}
.ldg__rd i{position:relative;width:14px;height:14px;flex:none;border:1px solid rgba(237,184,119,.6);border-radius:50%}
.ldg__rd i::before,.ldg__rd i::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;margin-top:-.5px;background:currentColor;transition:transform .45s var(--ease-out)}
.ldg__rd i::after{transform:rotate(90deg)}
.ldg__rd[aria-expanded="true"] i::after{transform:rotate(0)}
.ldg__rd-c,.ldg__rd[aria-expanded="true"] .ldg__rd-o{display:none}
.ldg__rd[aria-expanded="true"] .ldg__rd-c{display:inline}
.ldg__rd:hover{color:#F2E9D8}
.ldg__rd:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ldg--fold .ldg__e:not(.is-open) .ldg__p{display:none}
.ldg--fold .ldg__e.is-open .ldg__p{animation:advIn .55s var(--ease-out) both}
/* 04: the latest event, a compact card in the same column */
.ldg__e--ev .loading{width:100%}
.ldg__e--ev .ecards{display:block}
.ldg__e--ev .ecard{flex-direction:column !important;background:none;border:0}
.ldg__e--ev .ecard__img{flex:none !important;width:clamp(154px,13vw,190px);aspect-ratio:16/10 !important;min-height:0 !important;margin:7px 0 6px;box-shadow:0 0 0 1px rgba(168,67,46,.55),0 10px 26px -12px rgba(0,0,0,.6)}
.ldg__e--ev .ecard__txt{padding:6px 0 0;gap:8px}
.ldg__e--ev .ecard__txt > p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;color:var(--text-secondary)}
.ldg__e--ev .ecard__meta{padding:8px 0 0}
.ldg__e--ev .ecard__meta span:nth-child(2){display:none}
@media (max-width:1023px){
  .ldg__rail{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:-22px calc(-1 * var(--gutter)) 0;padding:22px var(--gutter) 6px;scroll-padding-inline:var(--gutter)}
  .ldg__e--ev .ecard__txt > p{display:none}
  .ldg__rail::-webkit-scrollbar{display:none}
  .ldg__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,330px);column-gap:24px;width:max-content}
  .ldg__e{scroll-snap-align:start}
  .ldg__seg{right:-24px}
  .ldg__ends{font-size:10px}
}
html.still .ldg__ink{transform:none !important}
html.still .ldg__rd{display:none}
html.still .ldg .ldg__p{display:block !important;animation:none}
html.still .ldg__e .ldg__tk,html.still .ldg__e .ldg__n,html.still .ldg__tgt{opacity:1 !important;transform:none !important}
@media (forced-colors:active){.ldg__tgt{display:none}.ldg__seg{background:CanvasText}}

/* ---- Advisory Board FIG. 04 (critic item 8): the Credentials toggle at every width. Under the ring: the name, post-nominals and the first
   title line; Credentials opens the rest in place (opacity and transform). Seven even cards: four, then three centred. html.still: all open. ---- */
html:not(.still) .adv-card:not(.is-open) .person__titles li:nth-child(n+2){display:none}
.adv-card.is-open .person__titles li:nth-child(n+2){animation:advIn .55s var(--ease-out) both}
.adv-card.is-open .person__titles li:nth-child(3){animation-delay:.05s}
.adv-card.is-open .person__titles li:nth-child(4){animation-delay:.1s}
.adv-card.is-open .person__titles li:nth-child(n+5){animation-delay:.15s}
.adv-more{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:4px;padding:0;border:0;background:none;color:#EDB877;font-size:11px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.adv-more i{position:relative;width:14px;height:14px;flex:none;border:1px solid rgba(237,184,119,.6);border-radius:50%}
.adv-more i::before,.adv-more i::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;margin-top:-.5px;background:currentColor;transition:transform .45s var(--ease-out)}
.adv-more i::after{transform:rotate(90deg)}
.adv-more[aria-expanded="true"] i::after{transform:rotate(0)}
.adv-more__c,.adv-more[aria-expanded="true"] .adv-more__o{display:none}
.adv-more[aria-expanded="true"] .adv-more__c{display:inline}
.adv-more:hover{color:#F2E9D8}
.adv-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html.still .adv-more{display:none}
@media (min-width:900px){
  [data-more="1"] .people{display:flex;flex-wrap:wrap;justify-content:center;gap:48px 32px}
  [data-more="1"] .people > .person{flex:0 0 calc((100% - 96px) / 4);min-width:0;align-content:start}
}

/* ---- Advisory Board hero (critic item 7): the mentor and the student as a scene. 46vw wide, 16:9, a slow push towards the mentor's
   hand on the student's shoulder, the hairline Sanguine frame and one Sanguine target on that hand ---- */
.phero__in:has(> .hplate--abx){grid-template-columns:minmax(0,1fr) auto}
.hplate--img.hplate--abx{width:min(46vw,720px)}
.hplate--abx .hplate__frame{aspect-ratio:16/9;border-color:rgba(168,67,46,.55)}
.hplate--abx .hplate__frame > picture.pic > img{inset:0;width:100%;height:100%;object-position:50% 50%;transform-origin:37% 54%;animation:cinePush 24s var(--ease-out) .3s both}
.ab-tgt{position:absolute;z-index:3;left:37%;top:54%;width:50px;height:50px;max-width:none;margin:-25px 0 0 -25px;overflow:visible;pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(168,67,46,.7));animation:abTgt 1.2s var(--ease-weight) 1.4s both}
.ab-tgt .pp__tg{fill:none;stroke:#C8563C;stroke-width:1.4}
.ab-tgt .pp__td{fill:#EDB877}
@keyframes abTgt{from{opacity:0;transform:scale(1.7) rotate(-45deg)}to{opacity:1;transform:none}}
html.still .hplate--abx .hplate__frame > picture.pic > img,html.still .ab-tgt{animation:none}
@media (max-width:860px){
  .phero__in:has(> .hplate--abx){grid-template-columns:minmax(0,1fr)}
  .hplate--img.hplate--abx{width:100%}
  .hplate--abx .hplate__frame{aspect-ratio:16/9}
  .ab-tgt{width:40px;height:40px;margin:-20px 0 0 -20px}
}
@media (forced-colors:active){.ab-tgt{display:none}}

/* ---- Advisory Board FIG. 01 on phones (critic item 6): the two-console plate pins under the header while the four roles pass under it;
   each role lights its part as it crosses the reading line (fx/inkstudy.js data-ist-read). Landscape phones: not pinned. ---- */
@media (max-width:860px) and (min-height:561px){
  .abr__fig{position:sticky;top:calc(var(--hdr-hc,64px) + 4px);z-index:2;margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 4px;background:var(--canvas);display:grid;justify-items:center}
  .abr__fig::after{content:"";position:absolute;left:0;right:0;top:100%;height:26px;background:linear-gradient(var(--canvas),rgba(38,32,26,0));pointer-events:none}
  .abr__plate{width:min(100%,calc(27svh * 1.5),340px)}
  .abr__cap{margin-top:4px;font-size:10px}
  .abr__key li{scroll-margin-top:calc(var(--hdr-hc,64px) + 27svh + 40px)}
}

/* ---- Advisory Board close (critic item 3): ONE CLOSING MOMENT, the two steps beside the line, over THE MENTOR'S SEAT ---- */
.abx__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"txt fig" "txt row";column-gap:clamp(32px,5vw,88px);row-gap:6px;align-items:center}
.abx__txt{grid-area:txt}
.abx__fig{grid-area:fig;margin:0;width:100%;max-width:520px;justify-self:end}
.abx__row{grid-area:row;margin-top:0;justify-self:end;width:100%;max-width:520px}
.abx__plate{aspect-ratio:1;border:1px solid rgba(168,67,46,.55)}
.abx__eye{color:var(--text-secondary);margin:0 0 14px}
.abx__steps{list-style:none;margin:clamp(24px,4vh,40px) 0 0;padding:0;border-top:1px solid var(--rule)}
.abx__steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--rule)}
.abx__n{color:#E8A07C;font-size:12px;letter-spacing:.14em;padding-top:5px}
.abx__steps h3{margin:0 0 6px}
.abx__steps p{margin:0;color:var(--text-secondary)}
.abx .ist__lab[data-part="seat"]{white-space:normal;max-width:34%}
@media (max-width:860px){
  .abx__in{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "fig" "row";row-gap:18px}
  .abx__fig{justify-self:center;max-width:460px;margin-top:10px}
  .abx__row{justify-self:start;max-width:none}
}

/* ---- About FIG. 05 on phones and tablets (critic item 5): A READING LIGHT. The speaking founder's ring grows (transform) with its spark, the
   others rest smaller; the line being read is whole, the others dim (opacity); each line opens with its first sentence as a pull line;
   a tap on a face brings its line under the band. html.still: every line whole, the band static. ---- */
.vfa__r{--rs:1}
@media (max-width:899px){
  .vfa__r{width:11.5cqw;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
  .vfa__r--lead{width:14cqw}
  .vfa__r.is-here{--rs:1.6;z-index:2;opacity:1;transform:translate(-50%,-50%) scale(1.6)}
  .vfa__r--lead.is-here{--rs:1.3;transform:translate(-50%,-50%) scale(1.3)}
  .vfc__pull{display:block;margin:0 0 .45em;font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,5.6vw,1.75rem);line-height:1.2;letter-spacing:.01em;color:var(--text-primary);text-wrap:balance}
  .vfc__l--lead .vfc__pull{font-size:clamp(1.5rem,6.6vw,2rem)}
  .vfc__l{scroll-margin-top:calc(var(--hdr-hc,64px) + 34vw + 18px);transition:opacity .6s var(--ease-out)}
  .vfm--reading .vfc__l:not(.is-read){opacity:.45}
}
@media (max-width:720px){.vfa__r{width:11.5cqw}.vfa__r--lead{width:14cqw}}
html.still .vfc__l{opacity:1 !important;transition:none}
html.still .vfa__r.is-here{transform:translate(-50%,-50%)}
html.still .vfa__r{--rs:1}

/* ---- About FIG. 07 (critic item 4): THE INSTRUMENT, sepia ink on the parchment (fx/gap.js draws it with the scroll, both ways) ---- */
.gi{position:relative;height:120px}
.gi__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gi__svg path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.gi__svg path.gi__tk{stroke:rgba(38,32,26,.78);stroke-width:1}
.gi__svg path.gi__arc{stroke:rgba(59,43,36,.38);stroke-width:1}
.gi__svg path.gi__dim{stroke:rgba(38,32,26,.72);stroke-width:1}
.gi__v{position:absolute;left:var(--v);top:var(--y);transform:translate(calc(-100% - 8px),-128%);font-size:11px;line-height:1;letter-spacing:.1em;color:var(--canvas);white-space:nowrap;transition:opacity .6s var(--ease-out)}
.gi.is-on .gi__v{opacity:0}
.gi.is-on .gi__v.is-on{opacity:1}
.gap .gap__rule{height:16px;border:1px solid rgba(38,32,26,.72);background:repeating-linear-gradient(-58deg,rgba(38,32,26,.3) 0 1px,transparent 1px 6px),rgba(59,43,36,.05)}
.gap .gap__mark{bottom:auto;top:-6px;width:16px;height:44px;margin-left:-8px;background:none;z-index:1}
.gap .gap__mark.live::after{display:none}
.gap__jaw{display:block;width:16px;height:44px;max-width:none;overflow:visible}
.gap__jaw path{fill:rgba(242,233,216,.9);stroke:#A8432E;stroke-width:1.2;vector-effect:non-scaling-stroke}
.gap__jaw .gap__jh{fill:none;stroke-width:.8}
.gap__tgt{position:absolute;left:89.4%;top:50%;width:64px;height:64px;max-width:none;margin:-32px 0 0 -32px;overflow:visible;pointer-events:none;z-index:2;
  filter:drop-shadow(0 0 5px rgba(168,67,46,.45));transition:opacity .8s var(--ease-out) 1.7s,transform 1s var(--ease-weight) 1.7s}
.gap__tgt .gap__tg{fill:none;stroke:#A8432E;stroke-width:1.3}
.gap__tgt .gap__td{fill:#A8432E}
.gap-wait .gap__tgt{opacity:0;transform:scale(1.6) rotate(-45deg);transition:none}
@media (max-width:760px){.gi{height:100px}.gi__v{font-size:10px;letter-spacing:.06em}.gap__tgt{width:44px;height:44px;margin:-22px 0 0 -22px}}
html.still .gap__tgt{opacity:1 !important;transform:none !important;transition:none}
html.still .gi .gi__v{opacity:1 !important}
@media (forced-colors:active){.gap__tgt{display:none}}

/* =====================================================================
   ROUND3 DEPARTMENTS BLOCK (departments builder, round 3, 2026-09-25).
   (1) Training and Development FIG. 03: the ARM series scrolled (fx/armseries.js). The ARM plate is sticky beside the programme list from
   861 px (the list sits under the ARM words and the key) and docked above it on phones and tablets, on an opaque band of page colour.
   Each programme row at the reading line shows its own ink study; the ladder I to V on the plate's right edge fills in Sanguine; the
   counter sits top left. Without the module (no JS, html.still) the arm rests and the ladder and counter are hidden.
   ===================================================================== */
.d8arm[data-fx=armseries]{align-items:start}
@media (min-width:861px){
  .d8arm[data-fx=armseries] .d8arm__fig{position:sticky;top:calc(var(--hdr-hc,64px) + 24px);z-index:1}
}
.d8arm #sig-programs{margin-top:clamp(28px,5vh,48px)}
@media (max-width:860px){
  .d8arm[data-fx=armseries]{gap:0}
  .d8arm[data-fx=armseries] .d8arm__fig{position:sticky;top:calc(var(--hdr-hc,64px) + 6px);z-index:2;width:100%;justify-self:stretch;background:var(--canvas);padding:0 0 8px}
  .d8arm[data-fx=armseries] .d8arm__fig::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;background:var(--canvas);pointer-events:none}
  .d8arm[data-fx=armseries] .d8arm__fig::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px;background:linear-gradient(var(--canvas),rgba(38,32,26,0));pointer-events:none}
  .d8arm[data-fx=armseries] .d8arm__plate{width:min(100%,38svh);margin:0 auto}
  .d8arm[data-fx=armseries] .armj__fc{width:min(100%,38svh);margin:8px auto 0;font-size:10px}
  .d8arm[data-fx=armseries] .d8arm__key{margin-top:28px}
  .d8arm[data-fx=armseries] .w5arm-box{margin-top:28px}
  .d8arm #sig-programs{order:4}
}
@media (max-width:860px) and (max-height:560px){.d8arm[data-fx=armseries] .d8arm__fig{position:relative;top:auto}}
html.still .d8arm[data-fx=armseries] .d8arm__fig{position:relative;top:auto}
/* the caption: the rest line, or the study being read (crossfade, same place) */
.armj__fc{position:relative}
.armj__cap{position:absolute;left:0;top:0;right:0;opacity:0;transition:opacity .6s var(--ease-out)}
.armj__rest0{display:block;transition:opacity .6s var(--ease-out)}
.armj--capalt .armj__cap{opacity:1}
.armj--capalt .armj__rest0{opacity:0}
/* the studies laid on the plate (in the camera's box) */
.armj__lay{position:absolute;inset:12px;pointer-events:none;z-index:0}
.armj__st{position:absolute;opacity:0;transform:scale(1.045);transition:opacity .8s var(--ease-inout),transform 2.6s var(--ease-weight)}
.armj__st.is-on{opacity:1;transform:none}
.armj__cv{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:screen}
.armj__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.armj__g{opacity:0;transition:opacity .7s var(--ease-out)}
.armj__g.is-on{opacity:1}
.armj__svg .armj__tg{fill:none;stroke:#C8563C;stroke-width:1.3;vector-effect:non-scaling-stroke}
.armj__svg .armj__td{fill:#EDB877;stroke:none}
.armj__tgt{filter:drop-shadow(0 0 5px rgba(168,67,46,.6))}
/* the arm makes way while another study is shown (its construction circle, axes and frame stay) */
.d8arm__plate .ist__box,.d8arm__plate .ist__con .ist__tgt{transition:opacity .7s var(--ease-inout)}
.armj--alt .ist__box,.armj--alt .ist__con .ist__tgt{opacity:0}
.armj--alt .ist__con g.ist__ink > path.l{visibility:hidden}
.armj--alt .ist__cam{transform:none !important}
/* the ladder I to V, climbing from the bottom, on the plate's right edge */
.armj__lad{display:none;position:absolute;z-index:2;right:14px;top:16%;bottom:16%;width:30px;pointer-events:none}
.fx-live .armj__lad,.d8arm.fx-live .armj__lad{display:block}
.armj__rule,.armj__fill{position:absolute;right:0;top:0;bottom:0;width:1px;background:rgba(242,233,216,.26)}
.armj__fill{width:2px;right:-.5px;background:#C8563C;transform-origin:50% 100%;transform:scaleY(var(--f,0));transition:transform 1s var(--ease-weight);box-shadow:0 0 6px rgba(200,86,60,.55)}
.armj__ticks{position:absolute;inset:0}
.armj__ticks i{position:absolute;right:0;top:var(--y);transform:translateY(-50%);display:block;padding-right:9px;font-style:normal;font-family:var(--f-mono);font-size:10px;line-height:1;letter-spacing:.06em;color:var(--text-primary);opacity:.4;transition:opacity .6s var(--ease-out)}
.armj__ticks i::after{content:"";position:absolute;right:0;top:50%;width:6px;height:1px;background:rgba(242,233,216,.6)}
.armj__ticks i::before{content:"";position:absolute;right:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;border:1px solid #C8563C;background:rgba(237,184,119,.9);box-shadow:0 0 6px rgba(200,86,60,.7);opacity:0;transform:scale(.4);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.armj__ticks i.is-on{opacity:1}
.armj__ticks i.is-cur::before{opacity:1;transform:none}
/* the counter, top left of the plate */
.armj__ct{display:none;position:absolute;z-index:2;left:16px;top:12px;margin:0;font-size:10.5px;line-height:1.3;letter-spacing:.14em;color:var(--text-secondary);max-width:calc(100% - 70px);pointer-events:none}
.d8arm.fx-live .armj__ct{display:block}
.armj--read .armj__ctn{color:var(--text-primary)}
/* the row being read comes forward (the hover look, opacity and transform only) */
.d8arm .pidx__i.is-read::before{opacity:1;transform:none}
.d8arm .pidx__i.is-read::after{transform:none}
html.still .armj__lad,html.still .armj__ct{display:none !important}
@media (forced-colors:active){.armj__lad,.armj__ct,.armj__lay{display:none}}
/* (2) Awareness FIG. 01 "The robotic system, explained" (fx/lens.js): under 901 px the plate is docked above its list on an opaque band of
   page colour (the /departments/ helm's rule), and the row at the reading line lights its part; short landscape screens keep it in flow */
@media (max-width:900px){
  .lens8__stick{position:sticky;top:calc(var(--hdr-hc,64px) + 6px);z-index:2;background:var(--canvas);padding:0 0 10px}
  .lens8__stick::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;background:var(--canvas);pointer-events:none}
  .lens8__stick::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px;background:linear-gradient(var(--canvas),rgba(38,32,26,0));pointer-events:none}
  .lens8__stick .lens8__plate{width:min(100%,42svh);margin:0 auto}
  .lens8__again{display:none !important}
}
@media (max-width:900px) and (max-height:560px){.lens8__stick{position:relative;top:auto}}
html.still .lens8__stick{position:relative;top:auto}
/* (4) the two open head seats at the console standard (site.js seatStudy, fx/inkstudy.js data-study="pair"): the plate carries its own dark
   ground (.ist: warm vignette, isolation), the ember hairline edge, the brush and the pen; seat 01 then seat 02 light with their targets */
.seats--ist{padding:0;border:0;background:none;width:min(100%,480px)}
.seats--ist .seats__plate{aspect-ratio:1000/900}
.seats__plate .ist__con .seats__num{font-size:24px;letter-spacing:.14em;fill:rgba(242,233,216,.6)}
.seats__fix{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);z-index:2;overflow:visible;pointer-events:none}
.seats__fix .seats__eng{font-size:30px;letter-spacing:.1em;fill:#E8A07C}
.seats__plate .seats__fix::before{content:none}
.seats__t{filter:drop-shadow(0 0 5px rgba(168,67,46,.6));transition:opacity .6s var(--ease-out)}
.seats__plate .ist__con .seats__t .ist__tg{fill:none;stroke:#C8563C;stroke-width:1.3;vector-effect:non-scaling-stroke}
.seats__plate .ist__con .seats__t .ist__td{fill:#EDB877;stroke:none}
.seats__plate.ist--focus .seats__t:not(.is-lit){opacity:.28}
html.still .seats__t{transition:none;opacity:1 !important}
@media (forced-colors:active){.seats__t{display:none}}
/* (6) Research and Innovation FIG. 01: the Research Folio (fx/folio.js), in the suture plate's layout (.sut__plate: sticky beside the duties,
   docked above them under 901 px). Cream line on the plate's dark ground, one Sanguine hand per entry, one target on the next entry. */
.fo__frame{background:radial-gradient(ellipse at 50% 52%,rgba(168,67,46,.12),rgba(59,43,36,.30) 56%,rgba(20,16,12,.55) 100%),var(--canvas)}
.fo__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
html.no-js .fo,.fo:not(.fo--on){visibility:hidden}
.fo__svg .fo__cov{stroke:rgba(242,233,216,.22)}
.fo__svg .fo__stk{stroke:rgba(242,233,216,.4)}
.fo__svg .fo__pg{stroke:rgba(242,233,216,.8);fill:rgba(242,233,216,.035)}
.fo__svg .fo__hat{stroke:rgba(242,233,216,.3)}
.fo__svg .fo__fine{stroke:rgba(242,233,216,.45)}
.fo__svg .fo__rule{stroke:rgba(242,233,216,.16)}
.fo__svg .fo__ink{stroke:#D86A4C;stroke-width:1.15}
.fo__n{fill:rgba(242,233,216,.42);font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;transition:opacity .5s var(--ease-out)}
.fo__e.is-on .fo__n{fill:#E8A07C}
.fo__clip{transform:scaleX(0);transition:transform .5s var(--ease-inout) var(--d,0ms)}
.fo__clip.is-on{transform:none;transition:transform 1.1s var(--ease-inout) var(--d,0ms)}
.fo__nib{opacity:0;transform:translate(var(--x0),var(--y))}
.fo__e.is-on .fo__nib{animation:foNib 1.1s var(--ease-inout) var(--d,0ms) 1 both}
@keyframes foNib{0%{opacity:0;transform:translate(var(--x0),var(--y))}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate(var(--x1),var(--y))}}
.fo__svg .fo__q{stroke:rgba(242,233,216,.85)}
.fo__nd{fill:#EDB877;stroke:none}
.fo__tgt{opacity:0;transition:opacity .5s var(--ease-out),transform .9s var(--ease-weight);filter:drop-shadow(0 0 4px rgba(168,67,46,.6))}
.fo__tgt.is-on{opacity:1}
.fo__svg .fo__tg{stroke:#C8563C;stroke-width:1.2}
.fo__td{fill:#EDB877;stroke:none}
.fo--instant .fo__clip,.fo--instant .fo__tgt,html.still .fo__clip,html.still .fo__tgt{transition:none}
.fo--instant .fo__nib,html.still .fo__nib{animation:none;opacity:0}
@media (forced-colors:active){.fo__tgt,.fo__nib{display:none}}
/* (7) Public Relations FIG. 03, the four inks: each ink laid as one brush stroke on a small slip of parchment (the light ink on a charcoal
   slip), with its bristle marks, a dry end and a dimension line; the stroke is laid left to right in turn (fx/specimen.js) */
.spec__chip{--slip:#F2E9D8;border:1px solid rgba(168,67,46,.4);background:var(--slip);
  background:radial-gradient(ellipse 80% 70% at 48% 46%,var(--slip),color-mix(in srgb,var(--slip) 86%,#8a6a45) 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.4),inset 0 0 14px rgba(59,43,36,.28)}
.spec__sw li[style*="--slip"] .spec__chip{background:radial-gradient(ellipse 80% 70% at 48% 46%,#2E2620,#1C1713 100%)}
.spec__brush{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.spec__st,.spec__dry{fill:var(--c);stroke:none}
.spec__br{fill:none;stroke:var(--slip);stroke-width:.8;opacity:.32;vector-effect:non-scaling-stroke;stroke-linecap:round}
.spec__dl{fill:none;stroke:#8a6a45;stroke:color-mix(in srgb,var(--c) 55%,#8a6a45);stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke}
.spec__sw li[style*="--slip"] .spec__dl{stroke:rgba(242,233,216,.5)}
.spec__lay{transform-box:fill-box;transform-origin:0 50%}
.spec--pre .spec__lay{transform:scaleX(0)}
html.still .spec--pre .spec__lay{transform:none}
@media (forced-colors:active){.spec__chip{forced-color-adjust:none}}

/* =====================================================================
   ROUND3 PROGRAMS-EVENTS BLOCK (programs-events builder, round 3, 2026-09-25).
   1. The event page's day: the heart plate (fx/heartday.js) beside a slim clock rule. .day--heart is set by the module only, so without
      it the clock stays as it was. Wide screens: the plate (heart + clock) sticky on the left, the list on the right. Up to 900 px: the
      plate docks under the header above the list (about 260 px) and the list reads beneath it.
   ===================================================================== */
.day__clock{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
.day__hfig{position:relative;margin:0;min-width:0;overflow:hidden;display:flex;flex-direction:column;background:#0A0806}
.day__hfig[hidden]{display:none}
.day__hfig::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 52% 48%,rgba(168,67,46,.14),transparent 62%);pointer-events:none}
.day__hfig::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(10,8,6,.78) 100%);pointer-events:none;z-index:2}
.day__stage{position:relative;flex:1;min-height:0;transition:transform 1.6s cubic-bezier(.16,1,.3,1)}
.day__stage > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.day__shade{opacity:0;transition:opacity 1.6s var(--ease-out) 1.2s}
.day.in .day__shade{opacity:1}
.day__hl{stroke:rgba(242,233,216,.17);stroke-width:.7;fill:none}
.day__hl--x{stroke:rgba(242,233,216,.1)}
.day__w{opacity:0;transition:opacity .7s var(--ease-out)}
.day__w.is-on{opacity:1}
.day__ink .day__dim{stroke:rgba(242,233,216,.34)}
.day__ld path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.day__lg{opacity:0;transition:opacity .5s var(--ease-out)}
.day__lg.is-on{opacity:1;transition-delay:.25s}
.day__lp{stroke:rgba(224,138,108,.9);stroke-width:1}
.day__lt{stroke:#E08A6C;stroke-width:1.4}
.day__num{fill:#E08A6C;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;opacity:0;transition:opacity .4s var(--ease-out)}
.day--part .day__num{opacity:1;transition-delay:.3s}
.day__tg{opacity:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .4s var(--ease-out)}
.day--part .day__tg{opacity:1}
.day__tr{fill:none;stroke:#E08A6C;stroke-width:1.4;vector-effect:non-scaling-stroke}
.day__td{fill:#EDB877}
.day__hcap{position:relative;z-index:3;margin:0;padding:8px 2px 0;font-size:10px;letter-spacing:.14em;color:var(--text-secondary);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.day__hcap b{font-weight:400;display:inline-block;transition:opacity .22s var(--ease-out)}
.day--part .day__hcap b{color:#E08A6C}
.day__hcap b.is-swap{opacity:0}
.day__a{grid-column:2;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(224,138,108,.62);transition:color .45s var(--ease-out)}
.day__i[data-area] .day__n{grid-row:span 3}
.day__i.is-lit .day__a{color:#E08A6C}
.day--heart .day__b::after{display:none}
.day.day--heart{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.day--heart .day__plate{flex-direction:row;gap:12px;padding:12px 12px 10px;height:min(calc(100vh - var(--hdr-h) - 50px),700px);background:#0A0806}
.day--heart .day__hfig{flex:1}
.day--heart .day__clock{flex:0 0 150px;border-left:1px solid var(--rule);padding-left:8px}
.day--heart .day__hd{margin-left:30px;gap:6px}
.day--heart .day__hd span{font-size:9px;letter-spacing:.08em;white-space:normal;line-height:1.25}
.day--heart .day__rule{margin-left:30px;gap:6px}
.day--heart .day__h{left:-30px}
.day--heart .day__h::after{left:20px;width:6px}
.day--heart .day__rule::before{left:-6px}
.day--heart .day__b em{display:none}
.day--heart .day__cap{margin-left:30px;font-size:9px;letter-spacing:.08em}
@media (max-width:900px){
  .day.day--heart{grid-template-columns:minmax(0,1fr);gap:0}
  .day--heart .day__plate{top:var(--hdr-h);z-index:3;height:clamp(236px,31vh,330px);margin-bottom:6px;box-shadow:0 14px 24px -12px rgba(10,8,6,.9)}
  .day--heart .day__plate::before{content:"";position:absolute;left:-20px;right:-20px;bottom:100%;height:14px;background:var(--canvas);pointer-events:none}
  .day--heart .day__clock{flex-basis:clamp(104px,26vw,170px)}
  .day--heart .day__hcap{font-size:9px;letter-spacing:.1em;padding-top:4px}
  .day--heart .day__i{grid-template-columns:3.2em minmax(0,1fr);gap:4px 10px}
  .day--heart .day__n{grid-row:span 2;padding-top:3px}
  .day--heart .day__i[data-area] .day__n{grid-row:span 3}
}
@media (max-width:760px){
  .day--heart .day__clock{padding-left:6px}
  .day--heart .day__hd,.day--heart .day__rule,.day--heart .day__cap{margin-left:22px}
  .day--heart .day__h{left:-22px}.day--heart .day__h::after{left:15px;width:5px}
  .day--heart .day__hd span{font-size:8px;letter-spacing:.04em}
}
html.still .day__w{opacity:.42;transition:none}
html.still .day__shade,html.still .day__stage,html.still .day__lg,html.still .day__tg{transition:none}
html.still .day__shade{opacity:1}
html.still .day__stage{transform:none!important}
html.still .day__tg{opacity:1}
@media (forced-colors:active){.day__hfig{display:none}}
/* 2. The event page's programme on phones: each booklet closed (the events/view script sets .prog--closed under 700 px) */
.prog__book{display:none}
.prog--closed .gal--pages,.prog--closed .bk__bar,.prog--closed .prog__head .link{display:none}
html.still .prog--closed .gal--pages{display:none!important}
.prog--closed .prog__book{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:20px;align-items:end}
.prog__cover{position:relative;display:block;perspective:900px;padding:10px 12px 12px 6px;-webkit-tap-highlight-color:transparent}
.prog__cover::before{content:"";position:absolute;inset:0;border:1px solid rgba(168,67,46,.6);pointer-events:none}
.prog__cover img{display:block;width:100%;height:auto;background:#fff;transform:rotateY(-11deg) rotateX(3deg);transform-origin:0 50%;
  box-shadow:-3px 0 0 #D8CDB8,-5px 1px 0 #B9AE98,16px 22px 30px -10px rgba(0,0,0,.75);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.prog__cover::after{content:"";position:absolute;left:6px;top:10px;bottom:12px;width:14px;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent);transform:rotateY(-11deg);transform-origin:0 50%;pointer-events:none}
.prog__cover:active img,.prog__cover:focus-visible img{transform:rotateY(-3deg) scale(.985)}
.prog__bk{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding-bottom:12px}
.prog__pp{margin:0;font-size:11px;letter-spacing:.16em;color:#E08A6C}
.prog__bk .link{font-size:.92rem}
html.still .prog__cover img,html.still .prog__cover::after{transform:none;transition:none}
/* 3. /programs/: the ARM series as one strip of five ink plates inside the Training ledger */
.plr--arm{padding:22px 0 26px;border-bottom:1px solid var(--rule)}
.arms5__k{margin:0 0 14px;color:var(--text-secondary);font-size:11px;letter-spacing:.16em}
.arms5{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.arms5__i{position:relative;display:flex;flex-direction:column;min-width:0}
.arms5__a{position:relative;display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none;min-height:44px;flex:1}
.arms5__pl{position:relative;display:block;aspect-ratio:1;border:1px solid rgba(168,67,46,.42);background:#070605;transition:border-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.arms5__pl.ist::before{box-shadow:inset 0 0 40px rgba(10,8,6,.75)}
.arms5__pl .ist__cam{inset:6px}
.arms5__pl::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,rgba(168,67,46,.13),transparent 64%)}
.arms5__no{position:relative;display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;color:#E08A6C;font-size:11px;letter-spacing:.16em}
.arms5__no::before{content:"";position:absolute;left:0;right:calc(-1 * clamp(10px,1.4vw,20px));top:0;height:1px;background:rgba(242,233,216,.34);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out) calc(var(--i,0) * 140ms + .3s)}
.arms5__i:last-child .arms5__no::before{right:0}
.arms5__no::after{content:"";position:absolute;left:0;top:-4px;width:1px;height:9px;background:#E08A6C}
.plg.in .arms5__no::before{transform:scaleX(1)}
.arms5__no b{font-weight:400;color:var(--text-secondary)}
.arms5__t{font-family:var(--f-head);font-weight:600;font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.3;color:var(--text-primary)}
.arms5__s{color:var(--text-secondary);font-size:.86rem;line-height:1.45}
.arms5__m{margin-top:10px}
.arms5__a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (hover:hover){
  .arms5__a:hover .arms5__pl{border-color:rgba(200,86,60,.9);box-shadow:0 0 24px rgba(168,67,46,.22)}
  .arms5__a:hover .arms5__t{color:#F2E9D8}
}
.arms5__a:active .arms5__pl{border-color:rgba(200,86,60,.9)}
.arms5__pos{display:none}
@media (max-width:900px){
  .arms5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:4px}
  .arms5::-webkit-scrollbar{display:none}
  .arms5__i{flex:0 0 min(64vw,260px);scroll-snap-align:start}
  .arms5__pos{display:block;position:relative;height:2px;margin-top:14px;background:rgba(242,233,216,.14)}
  .arms5__pos i{position:absolute;left:0;top:0;height:2px;width:20%;background:#E08A6C;will-change:transform}
}
html.still .arms5__no::before{transform:scaleX(1);transition:none}
/* the series thumbs on the program pages: the black paper never shows as a box (the tile is as dark as the paper, the warm light lies over it) */
.pthumb{isolation:isolate;background:#070605}
.pthumb::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,rgba(168,67,46,.14),transparent 62%),radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(10,8,6,.6))}
.sser__pl .pthumb img{opacity:1;filter:brightness(.62)}
.sser__i.is-here .sser__pl .pthumb img{filter:none}
.sser__i a:hover .sser__pl .pthumb img,.sser__i a:focus-visible .sser__pl .pthumb img{opacity:1;filter:brightness(.9)}
/* 4. /events/: the almanac as a working legend (fx/almanac.js round 3) */
.alm__hp{stroke:rgba(242,233,216,.36)}
.alm__hp--x{stroke:rgba(242,233,216,.3)}
.alm::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,rgba(168,67,46,.10),transparent 58%),radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(10,8,6,.55))}
.alm__hand{opacity:0;transform-box:fill-box;transform-origin:50% 50%;transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .4s var(--ease-out)}
.alm--hand .alm__hand{opacity:1}
.alm__hand path{fill:none;stroke:#E08A6C;stroke-width:1.4;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
.alm__hand .alm__hd{fill:#E08A6C;transform:translateY(-64px)}
.alm__hits{position:absolute;inset:0;z-index:2}
.alm__hit{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.alm__hit:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hplate--alm .hplate__cap{transition:opacity .2s var(--ease-out);min-height:2.9em}
.hplate--alm .hplate__cap.alm-cap--swap{opacity:0}
.hplate--alm .hplate__cap.alm-cap--on{color:#E08A6C}
html.still .alm__hand{transition:none}
/* 5. /events/ FROM OUR EVENTS: a contact sheet of six photos (one large, two tall, three small) and one link to all of them */
.csheet{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(110px,12.5vw,190px);gap:clamp(8px,1vw,14px)}
.csheet__i{position:relative;grid-column:span 4;min-width:0}
.csheet__i:nth-child(1){grid-column:span 6;grid-row:span 2}
.csheet__i:nth-child(2),.csheet__i:nth-child(3){grid-column:span 3;grid-row:span 2}
.csheet--1 .csheet__i:nth-child(1){grid-column:span 12}
.csheet__a{position:absolute;inset:0;display:block;overflow:hidden;background:#15110D;outline:1px solid rgba(168,67,46,.45);outline-offset:4px;transition:outline-color .4s var(--ease-out)}
.csheet__a picture,.csheet__a img{display:block;width:100%;height:100%}
.csheet__a img{object-fit:cover;object-position:var(--op,50% 40%);transition:transform .9s var(--ease-weight)}
.csheet__n{position:absolute;left:10px;top:9px;z-index:2;font-size:10px;letter-spacing:.14em;color:rgba(242,233,216,.85);text-shadow:0 1px 6px rgba(0,0,0,.8)}
@media (hover:hover){.csheet__a:hover{outline-color:rgba(200,86,60,.95)}.csheet__a:hover img{transform:scale(1.035)}}
.csheet__a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.csheet__all{margin:clamp(22px,3vh,34px) 0 0}
@media (max-width:700px){
  .csheet{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,38vw,190px);gap:10px}
  .csheet__i,.csheet__i:nth-child(3){grid-column:span 1;grid-row:span 1}
  .csheet__i:nth-child(1){grid-column:span 2;grid-row:span 2}
  .csheet__i:nth-child(2){grid-column:span 1;grid-row:span 2}
  .csheet__a{outline-offset:3px}
}
html.still .csheet__a img{transition:none}
/* 6. Program pages: the close as a page turn (a full-width ink band of the next program), and the quiet empty line */
.nextband__a{display:block;color:inherit;text-decoration:none}
.nextband__band{display:block;margin:0;height:clamp(200px,22vw,300px);transition:border-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.nextband .dband__box{aspect-ratio:var(--ar,1);margin-top:calc(var(--fy) * -1 * var(--bw) / var(--ar,1))}
.nextband .dband__pl{--bw:min(62cqw,420px)}
.nextband .dband__pl::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 70% 50%,rgba(242,186,120,.08),transparent 55%);opacity:0;transition:opacity .6s var(--ease-out)}
.nextband__row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(14px,2vw,22px) 2px 4px;min-height:44px}
.nextband__b{min-width:0}
.nextband__a:hover .nextband__band,.nextband__a:focus-visible .nextband__band,.nextband__a:active .nextband__band{border-color:rgba(200,86,60,.95);box-shadow:0 0 36px rgba(168,67,46,.2)}
.nextband__a:hover .dband__pl::after,.nextband__a:focus-visible .dband__pl::after,.nextband__a:active .dband__pl::after{opacity:1}
.nextband__a:hover .nextplate__arr{transform:translateX(6px)}
.nextband__a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (max-width:560px){.nextband .nextplate__arr{display:block;flex:0 0 28px;width:28px;height:28px}}
.pv-none{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:clamp(22px,3vh,34px) 0 0;padding-top:16px;border-top:1px solid var(--rule);color:var(--text-secondary);font-size:.95rem}
.pv-none > span{display:inline-flex;align-items:center;gap:12px}
.pv-none__m{flex:0 0 34px;width:34px;height:34px;fill:none;stroke:rgba(242,233,216,.45);stroke-width:1;vector-effect:non-scaling-stroke}
.pv-none__m path,.pv-none__m circle{vector-effect:non-scaling-stroke}
.pv-none__h{stroke:#E08A6C;stroke-dasharray:2 2}
.pv-none__d{fill:#E08A6C;stroke:none}
/* 7. /events/ and event pages: the close is the next thing on the calendar (fx/nextcal.js) */
.nxcal{display:grid;grid-template-columns:clamp(120px,14vw,190px) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,56px);margin-top:clamp(12px,2vh,24px);padding:clamp(20px,3vw,36px);
  border:1px solid rgba(168,67,46,.5);background:radial-gradient(ellipse at 14% 50%,rgba(168,67,46,.12),transparent 55%),#0E0B08}
.nxcal__dial{aspect-ratio:1}
.nxcal__dial svg{display:block;width:100%;height:100%;overflow:visible}
.nxcal__dial svg *{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.nxd__c{stroke:rgba(168,67,46,.45)}
.nxd__l{stroke:rgba(242,233,216,.5)}
.nxd__w{stroke:rgba(242,233,216,.2)}
.nxd__tg circle{stroke:#C8563C;stroke-width:1.3}
.nxd__tg .nxd__td,.nxd__hub{fill:#EDB877;stroke:none}
.nxd__dot{fill:#1A1511;stroke:rgba(242,233,216,.55)}
.nxd__dot.is-lit{fill:rgba(168,67,46,.5);stroke:#E08A6C}
.nxd__hand{stroke:#E08A6C;stroke-dasharray:2 2.5}
.nxcal__k{margin:0;color:#E08A6C;font-size:11px;letter-spacing:.18em}
.nxcal__t{margin:10px 0 0;font-family:var(--f-display);font-size:clamp(1.7rem,3.6vw,3.1rem);line-height:1.04;letter-spacing:.05em;text-transform:uppercase;color:var(--text-primary)}
.nxcal__t a{color:inherit;text-decoration:none}
.nxcal__s{margin:10px 0 0;color:var(--text-secondary);font-size:11px;letter-spacing:.16em}
.nxcal__go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(18px,2.6vh,26px)}
.nxcal__go .sec__go{--t:#C8563C}
.nxcal__go .link{min-height:44px;display:inline-flex;align-items:center}
.nxcal__note{margin:18px 0 0;color:var(--text-secondary);max-width:62ch;font-size:.95rem}
@media (max-width:600px){
  .nxcal{grid-template-columns:minmax(0,1fr);justify-items:start;gap:18px}
  .nxcal__dial{width:132px}
}
html.still .day__w[data-area="whole"]{opacity:0}

/* =====================================================================
   ROUND3 RESEARCH-INVOLVE BLOCK (round 3 research-involve builder, 2026-09-25). /research/, /get-involved/, /404.html, header sheet, footer.
   Every rule without .gw-live / .fx-live / an is- state is the calm, finished version (no JS, html.still, module off).
   ===================================================================== */
/* ---- Get Involved FIG. 02, the three ways in (fx/ways.js): a plate per row (the still), one desk plate beside the rows at 1100 px + ---- */
.gi-ways{position:relative;z-index:1;margin-top:clamp(40px,6vh,64px)}
.gi-ways > .gi-rows{margin-top:0}
.gw__frame{position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(168,67,46,.55);background:#1d1813}
.gw__frame--row{aspect-ratio:4/3}
.gw__frame--sq{aspect-ratio:1}
.gw__frame > .ist,.gw__lay > .ist,.gw__frame > .gw__pp,.gw__lay > .gw__pp{position:absolute;inset:0}
.gw__frame .ist{background:radial-gradient(ellipse at 50% 48%,rgba(168,67,46,.13),rgba(59,43,36,.30) 56%,rgba(20,16,12,.6) 100%),#1d1813}
.gw__pp .pp__cam img,.gw__pp .pp__cv{object-position:60% 50%}
.gw__pp .pp__cam{transform-origin:56% 72%}
.gw__pp .pp__tgt{left:55%;top:76%}
.gw__c{display:block;margin-top:12px;color:var(--text-secondary);font-size:11px;letter-spacing:.14em;line-height:1.5}
.gw-row{width:100%;max-width:560px;margin:4px 0 6px}
.gw{display:none;margin:0}
.gw__lay{position:absolute;inset:0;display:none;opacity:0;transform:scale(1.03);transition:opacity .7s var(--ease-inout),transform 1.4s var(--ease-weight)}
.gw__lay.is-on{display:block;opacity:1;transform:none}
.gw__lay.is-out{display:block;opacity:0;transform:scale(.985)}
@starting-style{.gw__lay.is-on{opacity:0;transform:scale(1.03)}}
.gw__cc{display:none}
.gw[data-way="apply"] .gw__cc[data-way="apply"],.gw[data-way="register"] .gw__cc[data-way="register"],.gw[data-way="volunteer"] .gw__cc[data-way="volunteer"]{display:inline}
@media (min-width:1100px){
  html:not(.still) .gi-ways.gw-live{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,4vw,72px);align-items:start}
  html:not(.still) .gw-live > .gi-rows{grid-column:1;grid-row:1}
  html:not(.still) .gw-live > .gw{display:block;grid-column:2;grid-row:1;position:sticky;top:calc(var(--hdr-hc,72px) + 28px)}
  html:not(.still) .gw-live .gw-row{display:none}
  html:not(.still) .gw-live .gi-feature{grid-template-columns:minmax(0,1fr);align-items:start}
  html:not(.still) .gw-live .gi-feature .pg-feature__go{grid-auto-flow:column;align-items:center;gap:14px 28px}
}
/* the row being read: its number glows and its stop on the rail lights (both directions) */
.gi-row__n{transition:color .5s var(--ease-out),text-shadow .5s var(--ease-out)}
.gi-row.is-read .gi-row__n{color:#EDB877;text-shadow:0 0 12px rgba(226,132,80,.55)}
.gp-target.gp-target--node i{background:linear-gradient(rgba(242,233,216,.55),rgba(242,233,216,.55)) center/1px 100% no-repeat,linear-gradient(rgba(242,233,216,.55),rgba(242,233,216,.55)) center/100% 1px no-repeat;
  border:1px solid rgba(242,233,216,.5);box-shadow:none;animation:none !important;transition:border-color .5s var(--ease-out),box-shadow .5s var(--ease-out),transform .6s var(--ease-weight)}
#opportunities.gp-stacked .gp-target.gp-target--node i{left:-7px;top:-7px;width:14px;height:14px;background:linear-gradient(rgba(242,233,216,.55),rgba(242,233,216,.55)) center/1px 100% no-repeat,linear-gradient(rgba(242,233,216,.55),rgba(242,233,216,.55)) center/100% 1px no-repeat;box-shadow:none}
#opportunities[data-way="apply"] .gp-target[data-kind="apply"] i,#opportunities[data-way="register"] .gp-target[data-kind="register"] i,#opportunities[data-way="volunteer"] .gp-target[data-kind="volunteer"] i{
  border-color:#E0744F;transform:scale(1.3);box-shadow:0 0 0 3px rgba(168,67,46,.2),0 0 14px 3px rgba(226,132,80,.5)}
html.still .gi-row.is-read .gi-row__n{color:#D0694E;text-shadow:none}
@media (max-width:700px){.gw__c{font-size:10px;letter-spacing:.12em}}
/* ---- Research FIG. 01, the pipeline plate (fx/pipeline.js): drawn in code, stations from the two pipeline paragraphs. Without .rsp-live
   (no JS, html.still) every station is lit and the target rests on the last. ---- */
.rsp{margin:0}
.rsp--v{display:none}
.rsp--h{margin:clamp(28px,4vh,44px) 0 0;max-width:720px}
.rsp__frame{position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(168,67,46,.55);
  background:radial-gradient(ellipse at 42% 48%,rgba(168,67,46,.12),rgba(59,43,36,.28) 58%,rgba(20,16,12,.6) 100%),#1d1813}
.rsp__frame::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px rgba(12,9,6,.55)}
.rsp--v .rsp__frame{aspect-ratio:2/3}
.rsp--h .rsp__frame{aspect-ratio:1000/460}
.rsp--h .lstudy .c{opacity:.5}
.rsp__ink,.rsp__live{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rsp__g .l{stroke:rgba(242,233,216,.82)}
.rsp__g .hp{stroke:rgba(242,233,216,.34)}
.rsp__g{transition:opacity .6s var(--ease-out),filter .6s var(--ease-out)}
.rsp__fill{fill:none;stroke:#C8563C;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;transform-box:fill-box;transform-origin:0 0;transition:transform 1s var(--ease-weight)}
.rsp__tgt{filter:drop-shadow(0 0 5px rgba(168,67,46,.65));transition:transform 1s var(--ease-weight),opacity .6s var(--ease-out)}
.rsp__tg{fill:none;stroke:#C8563C;stroke-width:1.3;vector-effect:non-scaling-stroke}
.rsp__td{fill:#EDB877}
.rsp__lab{position:absolute;z-index:2;display:flex;gap:10px;align-items:baseline;transform:translateY(-50%);font-family:var(--f-mono);font-size:11px;line-height:1.3;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text);white-space:nowrap;transition:opacity .6s var(--ease-out),color .6s var(--ease-out)}
.rsp__n{color:#D0694E}
.rsp--h .rsp__lab{display:block;width:max-content;max-width:min(124px,30%);white-space:normal;text-align:center;transform:translateX(-50%);font-size:10px;letter-spacing:.1em}
.rsp--h .rsp__n{display:block}
.rsp--h .rsp__lab--up{top:5%}
.rsp--h .rsp__lab--dn{top:60%}
.rsp--h .rsp__lab[data-st="0"]{transform:translateX(-22%);text-align:left}
.rsp--h .rsp__lab[data-st="5"]{transform:translateX(-78%);text-align:right}
.rsp__cap{display:block;margin-top:12px;color:var(--text-secondary);font-size:11px;letter-spacing:.14em}
/* live: stations light as they are read */
.rsp-live .rsp__g:not(.is-on){opacity:.32}
.rsp-live .rsp__lab:not(.is-on){opacity:.45}
.rsp-live .rsp__lab.is-cur{color:#E8A07C}
.rsp-live .rsp__g.is-cur{filter:drop-shadow(0 0 6px rgba(226,132,80,.55))}
/* R4 VERIFY: the pipeline plate is its own layer before it pins, so pinning never rasters a new layer mid-scroll (a first phone scroll at 4x CPU had 1.2 to 2.3 s frames where it pinned and unpinned; 83 ms worst after) */
.rsp--v{will-change:transform}
.rsp-live .rsp--v .rsp__fill{transform:scaleY(var(--f,0))}
.rsp-live .rsp--h .rsp__fill{transform:scaleX(var(--f,0))}
.rsp-live .rsp.is-idle .rsp__tgt{opacity:0}
@media (min-width:1100px){
  .rs-flow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,4vw,72px);align-items:start}
  .rsp--v{display:block;position:sticky;top:calc(var(--hdr-hc,72px) + 28px)}
  .rsp--h{display:none}
  .rs-flow .rs-pipe{padding-left:0}
}
@media (max-width:420px){.rsp--h .rsp__lab{font-size:9px;letter-spacing:.08em}}
/* ---- the footer's last frame in ink (site.js lfInstrument, lfConstruction): the EndoWrist study hung from a hairline shaft; the fan
   geometry and fx/lastframe.js are unchanged. ROUND4 RESEARCH-INVOLVE (owner, site-todo 115: "in footer the robot arms make them thinner"):
   the study and its hairline shaft are drawn at 0.6 of their old size, so each arm reads as a slim 8 mm shaft, a compact wrist and neat jaws;
   the jaws' tip still sits on the span's bottom (76.7% of 152.4 px = 117 px), so the fan still gathers over the ember. The jaws tip sits at 76.7% of the picture's height, on the span's bottom (over the ember). ---- */
.lf__lines{opacity:.58}
.lf__ink{position:absolute;left:-10.7px;top:calc(100% - 117px);width:48px;height:152.4px;max-width:none;display:block;
  filter:drop-shadow(0 0 6px rgba(226,132,80,.18))}
.lf__i::before{content:"";position:absolute;left:3.6px;top:0;width:18.4px;height:calc(100% - 100px);opacity:.5;
  background:linear-gradient(90deg,#F2E9D8 1px,transparent 1px,transparent calc(100% - 1px),#F2E9D8 calc(100% - 1px));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%)}
.lf__con{position:absolute;left:-130px;top:170px;width:260px;height:260px;overflow:visible;max-width:none}
.lf .lf__con .w{stroke:rgba(242,233,216,.2)}
.lf .lf__con .d{stroke:rgba(242,233,216,.16);stroke-dasharray:8 4 2 4}
.lf .lf__con .h8{stroke:rgba(242,233,216,.13)}
.lf .lf__con .tg{stroke:#C8563C;stroke-width:1.2}
.lf .lf__con .td{fill:#EDB877;stroke:none}
.lf__tgt{filter:drop-shadow(0 0 5px rgba(168,67,46,.7))}
/* ---- the footer route as the directory on phones (site.js jrSub): 44 px disclosures, sub-pages in place; the link groups hide ---- */
.jr__tg,.jr__sub{display:none}
.ftr8 .ftr__pl.ftr__pl--short{display:block}
.ftr8 .ftr__pl--short > li.ftr__mail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:0 12px;padding:10px 0 0}
.ftr8 .ftr__pl--short .ftr__pmail{margin-top:0}
@media (max-width:620px){.ftr8 .ftr__soc .soc{flex-direction:row;align-items:center;gap:12px;min-height:56px;padding:8px 12px}}
@media (max-width:640px){
  .ftr8 .ftr__cols{display:none}
  .jr__i{flex-wrap:wrap;align-items:center}
  .jr__i > a{width:auto;flex:1 1 0;min-width:0}
  .jr__tg{position:relative;display:block;flex:0 0 44px;width:44px;height:44px;margin:0;padding:0;border:0;background:none;color:var(--text-secondary);cursor:pointer;z-index:1}
  .jr__tg::before,.jr__tg::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;margin:-.5px 0 0 -5.5px;background:currentColor;transition:transform .35s var(--ease-weight)}
  .jr__tg::after{transform:rotate(90deg)}
  .jr__tg[aria-expanded="true"]{color:var(--accent)}
  .jr__tg[aria-expanded="true"]::after{transform:rotate(0deg)}
  .jr__tg[aria-expanded="true"]::before{transform:rotate(180deg)}
  .jr__sub:not([hidden]){display:block;flex:0 0 100%;list-style:none;margin:0 0 8px;padding:0 0 0 44px;animation:jrSub .4s var(--ease-out) both}
  .jr__sub a{display:flex;align-items:center;min-height:44px;color:var(--text-secondary);font-size:.92rem;line-height:1.25}
  .jr__sub a:hover,.jr__sub a[aria-current]{color:var(--text-primary)}
}
@keyframes jrSub{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
html.still .jr__sub{animation:none}
/* ---- the phone sheet as the contents page (site.js sheetHTML): the route drawn down the left, ticks and folios, the current page lit, a faint
   crop of the console ink study in the lower third. Opening: the line draws down and the entries rise 40 ms apart (about 450 ms in all). ---- */
.sheet::after{content:"";position:fixed;left:0;right:0;bottom:0;height:52%;z-index:-1;pointer-events:none;opacity:.2;mix-blend-mode:screen;
  background:url(/assets/drawings/board-1024.webp) 14% 34% / 250% auto no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 62% 70%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 80% 70% at 62% 70%,#000 30%,transparent 78%);
  transition:opacity .6s var(--ease-out) .15s}
.sheet:not(.open)::after{opacity:0;transition-delay:0s}
.sheet{isolation:isolate}
.sheet__list{position:relative;padding-left:30px;border-top:0}
.sheet__list::before{content:"";position:absolute;left:8px;top:20px;bottom:20px;width:1px;background:rgba(242,233,216,.34);transform-origin:50% 0;transform:scaleY(0);
  transition:transform .45s var(--ease-pen,var(--ease-out))}
.sheet.open .sheet__list::before{transform:none;transition-delay:.05s}
.sheet__end{grid-column:1 / -1;display:block;padding:4px 0 10px;font-size:10.5px;letter-spacing:.16em;color:var(--text-secondary);text-transform:uppercase;
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.sheet__end--b{padding:12px 0 2px}
.sheet.open .sheet__end{opacity:1;transform:none;transition-delay:calc(min(var(--i,0),10) * 40ms + 60ms)}
.sheet.open .sheet__list a{transition-delay:calc(min(var(--i,0),10) * 40ms + 60ms)}
.sheet__list a.sheet__m{justify-content:flex-start;gap:12px;border-bottom:0;border-top:1px solid var(--rule)}
.sheet__tk{position:absolute;left:-22px;top:50%;width:12px;height:1px;background:rgba(242,233,216,.5)}
.sheet__fol{margin-left:auto}
.sheet__here + .sheet__fol{margin-left:12px}
.sheet__here{margin-left:auto;font-size:10px;letter-spacing:.16em;color:#E0744F;text-transform:uppercase}
.sheet__list a[aria-current],.sheet__list a.is-here{color:var(--text-primary)}
.sheet__list a.is-here .sheet__lb{text-shadow:0 0 18px rgba(242,233,216,.25)}
.sheet__list a.is-here .sheet__fol{color:#D0694E;opacity:1}
.sheet__list a.is-here .sheet__tk{left:-26px;width:18px;height:2px;margin-top:-1px;background:var(--accent)}
.sheet__list a.is-here .sheet__tk::after{content:"";position:absolute;left:-7px;top:50%;width:13px;height:13px;margin-top:-6.5px;border:1px solid #D0694E;border-radius:50%;
  background:radial-gradient(circle,#EDB877 0 1.8px,rgba(237,184,119,0) 2.4px);box-shadow:0 0 10px 1px rgba(226,132,80,.45)}
.sheet__list a.sheet__sub[aria-current]{color:var(--text-primary)}
.sheet__list a.sheet__sub[aria-current]::before{background:var(--accent);width:14px}
@media (max-width:600px) and (min-height:501px){
  .sheet__list a.sheet__sub{grid-column:1 / -1;min-height:44px;padding:4px 0 4px 18px}
}
@media (max-width:360px){.sheet__here{display:none}}
.sheet__list a.sheet__sub + a.sheet__m{border-top-color:transparent}
/* ---- Research FIG. 02, the cohort figure (site.js cohort()): the paper's patients as ink dots in a construction circle, the numeral beside ---- */
.rs-coh{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:center;gap:clamp(18px,2.4vw,32px);margin:6px 0 18px}
.rs-coh__f{width:100%;height:auto;aspect-ratio:1}
.rs-coh__grid{stroke:rgba(242,233,216,.07)}
.rs-coh__g{fill:none;stroke:rgba(242,233,216,.78);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:124px 124px;
  transition:opacity .8s var(--ease-out),transform 1.1s var(--ease-weight)}
.rs-coh .tg{fill:none;stroke:#C8563C;stroke-width:1.2}
.rs-coh .td{fill:#EDB877;stroke:none}
.rs-coh__tgt{filter:drop-shadow(0 0 4px rgba(168,67,46,.7))}
.rs-coh__cap{display:grid;gap:10px;justify-items:start}
.rs-coh__n{font-family:var(--f-display);font-size:clamp(3.6rem,6vw,5.6rem);line-height:.9;letter-spacing:.02em;color:var(--text-primary)}
.rs-coh__dim{display:grid;gap:8px;width:100%;max-width:220px}
.rs-coh__ln{position:relative;display:block;height:1px;background:rgba(242,233,216,.45)}
.rs-coh__ln::before,.rs-coh__ln::after{content:"";position:absolute;top:-5px;width:1px;height:11px;background:rgba(242,233,216,.6)}
.rs-coh__ln::before{left:0}.rs-coh__ln::after{right:0}
.rs-coh__y{font-size:11px;letter-spacing:.16em;color:var(--text-secondary);text-transform:uppercase}
.reveal:not(.in) .rs-coh__g{opacity:0;transform:scale(.55) rotate(-30deg)}
.reveal.in .rs-coh__g{transition-delay:calc(var(--k) * 110ms + 350ms)}
.reveal:not(.in) .rs-coh__tgt{opacity:0}
.rs-coh__tgt{transition:opacity .6s var(--ease-out) 1.1s}
html.still .rs-coh__g,html.still .rs-coh__tgt{opacity:1 !important;transform:none !important}
@media (max-width:420px){.rs-coh{grid-template-columns:minmax(0,150px) minmax(0,1fr)}}
/* the RSIG authors on one level, spaced, never overlapping (owner site-todo 105-19) */
.rs-rings{flex-wrap:wrap;gap:10px}
.rs-rings .rs-ring + .rs-ring{margin-left:0}
@media (min-width:900px){.rs-coh{grid-template-columns:minmax(0,230px) minmax(0,1fr)}}
@media (max-width:480px){.rs-rings{gap:8px}.rs-ring.person__photo{width:40px}}
/* ---- Research FIG. 04, the close: the hero's study again, small, only the robotic instrument lit ---- */
.rs-next{margin:clamp(24px,3.4vh,36px) 0 0;max-width:560px}
.rs-next__frame{aspect-ratio:16/10;border:1px solid rgba(168,67,46,.55)}
.rs-next__box{-webkit-mask-image:linear-gradient(155deg,rgba(0,0,0,.2) 53%,#000 59%);mask-image:linear-gradient(155deg,rgba(0,0,0,.2) 53%,#000 59%)}
.rs-next__cap{display:block;margin-top:12px;color:var(--text-secondary);font-size:11px;letter-spacing:.14em}
/* the research hero: air between the lit word's Sanguine underline and the lede */
.phero__in--ist h1[data-ist-words] + .phero__lede{margin-top:clamp(18px,2.4vh,26px)}
.sec__head.rs-close{align-items:start}
/* ---- 404: on phones the caption and the hint come before the plate, so the invitation is read before the drawing ---- */
@media (max-width:700px){
  .hplate--nf2{display:flex;flex-direction:column}
  .hplate--nf2 .hplate__cap{order:-2;margin:0 0 6px}
  .hplate--nf2 .nf-hint{order:-1;margin:0 0 12px}
}
/* BATCH 9 (site-todo 113.1): the fifth fact, the OTCoE ("one of the main reasons we do what we do"). Same drawing and entrance as the
   other four (fx/facts.js reads every li). Five across from 1100 px; below that the four facts keep their 2 x 2 and the OTCoE fact closes
   the plate full width: figure beside its words from 600 px, stacked like the others on phones. */
.impx .impx__t--long{font-size:112px;letter-spacing:1px}
.impx__w{display:contents}
.impx__i--why{grid-column:1/-1;border-top:1px solid rgba(242,233,216,.08);border-left:0}
.impx__i--why .impx__fig{max-width:min(56%,300px)}
@supports (grid-template-rows:subgrid){.impx__i--why{grid-row:auto;grid-template-rows:none}}
@media (min-width:600px) and (max-width:1099px){
  .impx__i--why{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;justify-items:stretch;text-align:left;column-gap:clamp(16px,3vw,40px);padding-block:clamp(14px,2vw,24px)}
  .impx__i--why .impx__fig{max-width:300px;justify-self:end}
  .impx__w{display:grid;gap:8px;align-content:center;justify-items:start}
}
@media (min-width:900px) and (max-width:1099px){
  .impx{grid-template-columns:repeat(2,minmax(0,1fr))}
  .impx__i:nth-child(odd){border-left:0}
  .impx__i:nth-child(n+3){border-top:1px solid rgba(242,233,216,.08)}
}
@media (min-width:1100px){
  .impx{grid-template-columns:repeat(5,minmax(0,1fr))}
  .impx__i--why{grid-column:auto;border-top:0;border-left:1px solid rgba(242,233,216,.08)}
  .impx__i--why .impx__fig{max-width:300px}
}
@media (min-width:1100px){@supports (grid-template-rows:subgrid){.impx__i--why{grid-row:span 3;grid-template-rows:subgrid}}}
/* BATCH 9 (site-todo 113.7: "the photos everywhere of people contain a small box behind them"). Every portrait photograph now sits in its
   own round window: the picture is a circle (radius, overflow and a circular mask, which WebKit also applies to a composited image), so no
   corner of the square photo file, its backdrop or its developing cover can show behind the ring on any browser or frame. The ember ring,
   its glow and the spark are unchanged. An image without a picture wrapper keeps its own circle clip. */
.person__photo:not(.person__mono) > picture.pic,.dv-pic{display:block;position:absolute;inset:0;z-index:0;border-radius:50%;overflow:hidden;
  -webkit-mask-image:radial-gradient(circle closest-side,#000 calc(100% - .6px),transparent 100%);mask-image:radial-gradient(circle closest-side,#000 calc(100% - .6px),transparent 100%)}
.person__photo:not(.person__mono) > .dev__cov{-webkit-mask-image:radial-gradient(circle closest-side,#000 calc(100% - .6px),transparent 100%);mask-image:radial-gradient(circle closest-side,#000 calc(100% - .6px),transparent 100%)}
.person__photo:not(.person__mono){background:transparent}
.person__photo:not(.person__mono) > picture.pic{background:var(--panel)}
/* BATCH 9 (site-todo 113.3): From the founders. All five portraits one size (the first founder's line stays first and largest in type); the
   face zooms inside its ring as its line is read (site.js foundersLive: an inline transform on the image, eased here). */
.vfa__r.vfa__r--lead{width:min(120px,10.9cqw)}
.vfa__r .person__photo > picture.pic > img,.vfa__r .person__photo > img{transition:transform .35s cubic-bezier(.2,.7,.2,1);will-change:transform}
@media (max-width:899px){
  .vfa__r.vfa__r--lead{width:11.5cqw}
  .vfa__r.vfa__r--lead.is-here{--rs:1.6;transform:translate(-50%,-50%) scale(1.6)}
}
@media (min-width:1100px){.vfa__r.vfa__r--lead{width:29cqw}}
html.still .vfa__r .person__photo img{transform:translate(-50%,-50%) !important;transition:none}
/* BATCH 9 (site-todo 113.5): no heading ever breaks inside a word, at any width (site.js HEADING FIT keeps the longest word inside its column) */
h1,h2,h3,h4,h5,h6,.t-title,.person__name{overflow-wrap:normal;word-break:normal;-webkit-hyphens:none;hyphens:none}
.lead8 #sig-lead .person__name{overflow-wrap:normal}
.impx .impx__s{text-wrap:balance}

/* LAMP BOX FIX (owner 2026-09-26: "the outline is still there"): no pointer lamp on portrait tiles or plain rows, so no lit rectangle appears around people. */
.person > .lamp,.nrow > .lamp{display:none !important}

/* =====================================================================
   ROUND4 HOME BLOCK (home builder, improvement round 4, 2026-09-26). FIG. 06 In their words: every voice in its own ink plate, drawn in
   code in the console plate's hand (site.js plateSVG): the portrait (150 to 228 px, ring, spark and backlight kept) inside a construction
   circle with a dial of ticks, a dashed inner circle, a crosshair fading out at its ends, hatching in the lower rim, a dimension line and
   one Sanguine target mark, over a round warm vignette. No square frame around any portrait (owner, site-todo 118 and 120). The quote sits
   beside the plate (under it on phones). The stage box is as tall as its tallest voice and centred under the header, with one hold per
   voice, so no empty screen follows the fourth voice; phones get the same one-voice-at-a-time stage when the tallest voice fits the screen.
   Rules without html:not(.still) are the calm, drawn version (html.still). Animates transform, opacity and stroke-dashoffset only.
   ===================================================================== */
[data-home] #in-their-words .vq{--pw:clamp(250px,26vw,380px);--rw:calc(var(--pw) * .6);grid-template-columns:var(--pw) minmax(0,1fr);
  column-gap:clamp(32px,4.4vw,72px);align-items:center}
[data-home] #in-their-words .vq .person__photo{width:var(--rw)}
[data-home] #in-their-words .vq__cap{grid-template-columns:minmax(0,1fr)}
[data-home] #in-their-words .vq__cap > :is(*,.vq__name){grid-column:1}
[data-home] #in-their-words .vq__cap .vq__name{margin-top:0}
.vqp{position:relative;width:var(--pw);aspect-ratio:200 / 212;isolation:isolate}
.vqp::before{content:"";position:absolute;left:-14%;right:-14%;top:-13%;bottom:-8%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(217,138,75,.16),rgba(168,67,46,.07) 52%,rgba(38,32,26,0) 100%)}
.vqp__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vqp__svg :is(path,circle){fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.vqp__svg :is(path,circle):not(.vqp__x){stroke:rgba(242,233,216,.5)}
.vqp__svg .vqp__c1{stroke:rgba(242,233,216,.5);stroke-dasharray:1 1;stroke-dashoffset:0}
.vqp__svg .vqp__c2{stroke:rgba(242,233,216,.22);stroke-dasharray:7 4 1.5 4}
.vqp__svg .vqp__t{stroke:rgba(242,233,216,.34)}
.vqp__svg .vqp__h{stroke:rgba(242,233,216,.13)}
.vqp__svg .vqp__d{stroke:rgba(242,233,216,.3)}
.vqp__svg .vqp__tg :is(circle,path){stroke:#C8563C;stroke-width:1.2}
.vqp__svg .vqp__tg .vqp__td{fill:#EDB877;stroke:none}
.vqp__svg .vqp__tg{filter:drop-shadow(0 0 4px rgba(168,67,46,.75))}
.vqp__m{position:absolute;left:0;right:0;top:0;height:94.34%;display:grid;place-items:center}
[data-home] #in-their-words .vqp__m .vq__who{padding:0;gap:0;align-self:center}
.vqp__n{position:absolute;left:0;top:0;margin:0;font-size:10px;letter-spacing:.14em}
/* the plate draws itself in when its voice arrives (the stacked list: .in; the stage: .is-on) */
html:not(.still) .vqp__svg .vqp__c1{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-inout) .1s}
html:not(.still) .vqp__svg :is(.vqp__c2,.vqp__h,.vqp__x){opacity:0;transition:opacity .9s var(--ease-out) .45s}
html:not(.still) .vqp__svg .vqp__t{opacity:0;transform:rotate(-16deg);transform-origin:100px 100px;transition:opacity .8s var(--ease-out) .35s,transform 2.6s var(--ease-weight) .15s}
html:not(.still) .vqp__svg .vqp__d{opacity:0;transform:scaleX(.15);transform-origin:100px 204px;transition:opacity .7s var(--ease-out) .8s,transform 1s var(--ease-weight) .8s}
html:not(.still) .vqp__svg .vqp__tg{opacity:0;transform:scale(.3);transform-origin:100px 184px;transition:opacity .5s var(--ease-out) 1.2s,transform .8s var(--ease-weight) 1.2s}
html:not(.still) .vqp__m{transform:scale(.93);transition:transform 1.3s var(--ease-weight)}
html:not(.still) .vq.in .vqp__svg .vqp__c1{stroke-dashoffset:0}
html:not(.still) .vq.in .vqp__svg :is(.vqp__c2,.vqp__h,.vqp__x,.vqp__t,.vqp__d,.vqp__tg){opacity:1;transform:none}
html:not(.still) .vq.in .vqp__m{transform:none}
html:not(.still) .vqs--stage .vq:not(.is-on) .vqp__svg .vqp__c1{stroke-dashoffset:1;transition-delay:0s;transition-duration:.5s}
html:not(.still) .vqs--stage .vq:not(.is-on) .vqp__svg :is(.vqp__c2,.vqp__h,.vqp__x,.vqp__t,.vqp__d,.vqp__tg){opacity:0;transition-delay:0s}
html:not(.still) .vqs--stage .vq:not(.is-on) .vqp__m{transform:scale(.93)}
/* the stage: a box as tall as the tallest voice, centred under the header; one hold per voice */
html[data-home]:not(.still) #in-their-words.vqs--stage [data-voices]{height:calc(var(--vqh,70svh) + var(--vn,4) * 55svh)}
html[data-home]:not(.still) #in-their-words.vqs--stage .vqst{height:auto;
  top:max(var(--hdr-hc,72px),calc(var(--hdr-hc,72px) + (100svh - var(--hdr-hc,72px) - var(--vqh,70svh)) / 2))}
@media (max-width:767px){
  [data-home] #in-their-words .vq{--pw:min(250px,64vw,32svh);grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:14px;padding-block:30px}
  [data-home] #in-their-words .vq__body{justify-self:stretch}
  .vqp__n{font-size:9px}
  html[data-home]:not(.still) #in-their-words.vqs--stage [data-voices]{position:relative}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqst{position:sticky;display:block;--pw:min(250px,64vw,32svh)}
  /* the numbered index stands beside the plate, in the free space on its right, so the voice keeps the whole screen */
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx{position:absolute;right:0;top:calc(var(--pw) * .53 - var(--vn,4) * 22px);z-index:2}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq__list{display:grid;margin:0}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq{grid-area:1 / 1;padding-block:0 4px;opacity:0;transform:translate3d(0,18px,0);pointer-events:none;
    transition:opacity .55s var(--ease-out),transform .9s var(--ease-weight)}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq::before{display:none}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq.is-on{opacity:1;transform:none;pointer-events:auto}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq .vq__q p{font-size:1.3rem;line-height:1.32}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq__cap{margin-top:12px}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq__cap .vq__credit{margin-top:6px}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq:not(.vq--written) .vq__q::before{font-size:5rem}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq__q{padding-top:18px}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq.is-on .vw{opacity:1;transform:none;transition-delay:calc(var(--w,0) * 30ms + .25s)}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vq:not(.is-on) .vw{opacity:0;transform:translate3d(0,.3em,0);transition-delay:0s}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx{display:grid;grid-template-columns:44px;margin:0;padding:0;list-style:none;border-right:1px solid var(--rule)}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx__b{position:relative;display:grid;place-items:center;width:44px;min-height:44px;padding:0;border:0;background:none;
    color:var(--text-secondary);font:inherit;cursor:pointer;transition:color .45s var(--ease-out)}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx__b::before{content:"";position:absolute;right:-1px;top:20%;bottom:20%;width:2px;background:linear-gradient(180deg,var(--accent),#EDB877);
    box-shadow:0 0 10px rgba(217,138,75,.5);transform:scaleY(0);transition:transform .55s var(--ease-weight)}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx__b[aria-current]{color:var(--text-primary)}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx__b[aria-current]::before{transform:scaleY(1)}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx__n{font-family:var(--f-display);font-weight:300;font-size:1.15rem;line-height:1;opacity:.55;transition:opacity .45s var(--ease-out),color .45s var(--ease-out)}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx__b[aria-current] .vqx__n{opacity:1;color:#F0A080}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html[data-home]:not(.still) #in-their-words.vqs--stage .vqx__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
/* FIG. 07 to FIG. 08 (critic: the close line sat alone in an empty screen before the console plate): one section gap between the two, so
   "That is the seat we want you ready for." and the console plate that answers it share one view */
[data-home] #controls{padding-bottom:0}
[data-home] #get-involved{padding-top:clamp(48px,7vh,88px)}
/* END ROUND4 HOME BLOCK */

/* ===================================================================== ROUND4 ABOUT BLOCK (about builder, improvement round 4, 2026-09-26)
   FIG. 05 From the founders, THE READING ENGINE (site.js foundersLive, owner site-todo 116): once the engine runs (.vfm--z) the ring, the face
   and the quote are written by it every frame they move, so their own CSS transitions step aside (the engine carries the easing). */
.vfm--z .vfa__r{transition:none}
.vfm--z .vfa__r .person__photo > picture.pic > img,.vfm--z .vfa__r .person__photo > img{transition:none}
.vfm--z .vfc__l{transition:none}
.vfc__fig{transform-origin:0 50%}
/* the rail name labels (owner: "the outlined soft box when the cursor goes on portraits"): no filled box behind the text ever; a soft halo in
   the page colour keeps the engraved thread from crossing the letters */
.vfa__nm{background:none !important;padding:0 !important;text-shadow:0 0 8px var(--canvas),0 0 3px var(--canvas),0 0 1px var(--canvas)}
/* phones and tablets: the band of faces reads as an instrument, the text dissolving under it instead of crossing it (a longer feathered ground) */
@media (max-width:1099px){
  .vfa__in::before{top:-44px;bottom:-58px;background:linear-gradient(to bottom,rgba(38,32,26,0) 0,var(--canvas) 30px,var(--canvas) calc(100% - 56px),rgba(38,32,26,.72) calc(100% - 34px),rgba(38,32,26,0))}
}
html.still .vfc__fig{transform:none !important}
html.still .vfc__l{opacity:1 !important}
html.still .vfa__r{opacity:1 !important;transform:translate(-50%,-50%) !important}
/* FIG. 07 the gap: the three figures are content and never wait for their markers (fx/gap.js slides only the markers) */
.gap-wait .mark__num{opacity:1}
/* Advisory Board FIG. 04 on phones (critic): one surgeon per row as a dossier line, the ringed portrait on the left and the name, post-nominals,
   role and Credentials on the right, so no name wraps and nobody sits alone in a half-empty row. The order stays as the owner set it. */
@media (max-width:700px){
  [data-more="1"] .people{grid-template-columns:minmax(0,1fr);gap:30px;padding:10px 0 0}
  [data-more="1"] .person{grid-template-columns:clamp(84px,24vw,96px) minmax(0,1fr);column-gap:18px;align-items:start;justify-items:start;text-align:left}
  [data-more="1"] .person__photo{width:100%;margin-top:2px}
  [data-more="1"] .person > div{min-width:0}
}
/* Advisory Board FIG. 05 In their words on phones (owner: no box behind any portrait, site-todo 113.7 and 118): one voice fills the stage, with no
   card border or ground; the next voice waits off stage instead of peeking in cut off, and a swipe carries the words through a feathered
   edge (a mask on the rail, so nothing is ever clipped hard). The dial, the 44 px buttons and the swipe are unchanged. */
@media (max-width:759px){
  html:not(.still) .vqs--deck .vq__list{grid-auto-columns:100%;gap:calc(var(--gutter) * 2);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent 100%)}
  html:not(.still) .vqs--deck .vq{border:0;background:none;padding:22px 0 8px}
  html:not(.still) .vqs--deck .vq::before{left:0;right:0}
}
/* About FIG. 03 THE DIVIDERS AS A PLATE (fx/dividers.js): the drawing in a warm vignette under a hairline Sanguine frame, its construction arc,
   the two points named under the dimension line, and on wide screens pinned beside the two columns it measures */
.mvd__fig{position:relative;padding:clamp(14px,2.2vw,30px) clamp(12px,2vw,28px) clamp(10px,1.6vw,20px);border:1px solid rgba(168,67,46,.42);
  background:radial-gradient(90% 85% at 44% 46%,rgba(92,64,44,.34),rgba(59,43,36,.14) 55%,rgba(38,32,26,0) 82%);box-shadow:inset 0 0 70px rgba(12,9,7,.5)}
.mvd__fig::before,.mvd__fig::after{content:"";position:absolute;width:14px;height:14px;border:1px solid rgba(237,184,119,.5);pointer-events:none}
.mvd__fig::before{left:6px;top:6px;border-right:0;border-bottom:0}
.mvd__fig::after{right:6px;bottom:6px;border-left:0;border-top:0}
.mvd{overflow:hidden}
@media (max-width:860px){.mvd__fig{overflow:visible;padding:10px 8px 6px}.mvd{width:100%;max-width:none}}
.mvd .mvd__arc{stroke:rgba(237,184,119,.34);stroke-dasharray:2 5}
.mvd__lb{fill:var(--text-secondary);font-family:var(--f-body);font-size:17px;letter-spacing:.22em;text-transform:uppercase}
.mvd__lb .mvd__n{fill:#D0694E}
.mvd__fig.reveal .mvd__lb{opacity:0;transition:opacity .9s var(--ease-out) .6s}
.mvd__fig.reveal.in .mvd__lb{opacity:1}
.mvd__tgt{transition:opacity .35s var(--ease-out)}
.mv-spread > div .quote{position:relative}
.mv-spread > div .quote::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--accent),#EDB877);
  box-shadow:0 0 8px rgba(217,138,75,.45);transform:scaleY(0);transform-origin:50% 0;transition:transform .9s var(--ease-inout)}
.mv-spread > div.is-lit .quote::before{transform:none}
#mission-vision:has(.mv-spread > div:first-child.is-lit) .mvd__m,
#mission-vision:has(.mv-spread > div:last-child.is-lit) .mvd__v{filter:drop-shadow(0 0 2.5px rgba(255,192,128,.75)) brightness(1.35)}
@media (min-width:1100px){
  .mvp{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,5vw,96px);align-items:start;margin-top:clamp(12px,2.4vh,28px)}
  .mvp .mvd__fig{position:sticky;top:calc(var(--hdr-hc,64px) + 8vh);margin:0}
  .mvp .mv-spread{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,8vh,88px);margin:0;padding:clamp(8px,4vh,48px) 0 clamp(8px,3vh,32px)}
  .mvp .mv-spread .quote p{max-width:44ch}
}
html.still .mvd__v{transform:none}
html.still .mvd__tgt{opacity:1 !important;transition:none}
html.still .mvd__fig.reveal .mvd__lb{opacity:1;transition:none}
html.still .mv-spread > div .quote::before{transition:none}
@media (forced-colors:active){.mvd__lb{fill:CanvasText}.mvd__fig{border-color:CanvasText}}
/* About FIG. 02 the palette (critic: flat chips under the instrument): each pigment is set as a small plate in the instrument's hand, a hairline
   Sanguine frame, a warm vignette and a sepia construction drawn over the paper (a dashed construction circle with its axes, a graduated
   dimension line and one Sanguine target), laid in after its pigment as the armillary lights it (opacity only). */
.ab-sw__chip{border-color:rgba(168,67,46,.55)}
.ab-sw__chip::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'%3E%3Cg fill='none' stroke='%233B2B24' stroke-width='.8' stroke-opacity='.6'%3E%3Ccircle cx='338' cy='50' r='36' stroke-dasharray='2 3'/%3E%3Ccircle cx='338' cy='50' r='22' stroke-opacity='.35'/%3E%3Cpath d='M292 50H388M338 6V94'/%3E%3Cpath d='M14 88H262M14 83V93M262 83V93M76 88V85M138 88V85M200 88V85'/%3E%3C/g%3E%3Ccircle cx='338' cy='50' r='4' fill='none' stroke='%23A8432E' stroke-width='1.1'/%3E%3C/svg%3E") right 4% center/auto 100% no-repeat,radial-gradient(ellipse at 50% 50%,rgba(59,43,36,0) 52%,rgba(59,43,36,.34) 100%)}
.arx-wait .ab-sw__chip::after{opacity:0;transition:opacity .9s var(--ease-out) .9s}
.arx-wait.arx-lit .ab-sw__chip::after{opacity:1}
.arx-lit .ab-sw:nth-child(2) .ab-sw__chip::after{transition-delay:1.18s}
.arx-lit .ab-sw:nth-child(3) .ab-sw__chip::after{transition-delay:1.46s}
.arx-lit .ab-sw:nth-child(4) .ab-sw__chip::after{transition-delay:1.74s}
html.still .ab-sw__chip::after{opacity:1 !important;transition:none}
@media (forced-colors:active){.ab-sw__chip::after{display:none}}
/* END ROUND4 ABOUT BLOCK */

/* =====================================================================
   ROUND4 PROGRAMS-EVENTS BLOCK (programs-events builder, improvement round 4, 2026-09-26).
   /events/ ARCHIVE FOLIO (.evf): each past event (while the archive is short) as one designed plate: the cover photo developing in a warm
   vignette with a slow camera settle (no square outline around the photo, owner site-todo 118 and 120), the year ruler drawn by the pen
   with one Sanguine target on the date, the numbered key of facts lit at the reading line, and the contact sheet as the folio's strip.
   The contact sheet photos lose their square outline (owner 118; the outlined box that lit under the cursor, 2026-09-26).
   ===================================================================== */
.evfs{display:grid;gap:clamp(56px,9vh,110px)}
.evf__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.evf__pl{margin:0;min-width:0}
.evf__ph{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#15110D;color:inherit}
.evf__ph picture,.evf__ph img{display:block;width:100%;height:100%}
.evf__ph img{object-fit:cover;object-position:50% 40%;transform:scale(1.07);transition:transform 3.2s var(--ease-out)}
.evf__pl.in .evf__ph img{transform:scale(1.001)}
.evf__ph::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(20,12,8,0) 46%,rgba(20,12,8,.6) 100%),linear-gradient(180deg,rgba(242,186,120,.07),rgba(242,186,120,0) 45%)}
.evf__cap{margin:12px 0 0;color:var(--text-secondary);font-size:11px;letter-spacing:.16em}
.evf__b{position:relative;min-width:0}
.evf .lp-rim{display:none}
.evf__kick{margin:0 0 10px;color:#D0694E;font-size:11px;letter-spacing:.16em}
.evf__t{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(1.7rem,2.5vw,2.45rem);line-height:1.06;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
.evf__t a{color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease-out)}
.evf__t a:hover,.evf__t a:focus-visible{background-size:100% 1px}
.evf__s{margin:14px 0 0;color:var(--text-secondary);max-width:52ch}
.evf__ruler{margin:clamp(20px,3vh,30px) 0 4px}
.evf__rule{display:block;width:100%;height:auto;overflow:visible}
.evf__rt{fill:rgba(242,233,216,.55);stroke:none;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.12em;text-anchor:middle}
.evf__rt--y{text-anchor:end;fill:rgba(242,233,216,.4)}
.evf__rt--d{fill:#E08A6A;font-size:9.5px}
.evf__tr{fill:none;stroke:#C8563C;stroke-width:1.2}
.evf__td{fill:#C8563C;stroke:none}
.evf__tg{transition:filter .6s var(--ease-out),opacity .6s var(--ease-out)}
.evf--date .evf__tg{filter:drop-shadow(0 0 3px rgba(255,140,90,.9))}
.evf__key{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid var(--rule)}
.evf__k{display:grid;grid-template-columns:34px 96px minmax(0,1fr);gap:4px 12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)}
.evf__kn{position:relative;color:#D0694E;font-size:11px;letter-spacing:.1em}
.evf__kn::after{content:"";position:absolute;left:-7px;top:50%;width:26px;height:26px;margin-top:-13px;border:1px solid #C8563C;border-radius:50%;opacity:0;transform:scale(.5);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.evf__kl{color:var(--text-secondary);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.evf__kv{font-size:.97rem;line-height:1.45}
.evf--on .evf__k > span{transition:opacity .5s var(--ease-out)}
.evf--on .evf__k:not(.is-lit) > span{opacity:.56}
.evf__k.is-lit .evf__kn::after{opacity:1;transform:none}
.evf__go{margin:clamp(20px,3vh,28px) 0 0}
.evf__sheet{margin-top:clamp(30px,4.5vh,48px)}
.evf__shk{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 16px;padding-top:14px;border-top:1px solid var(--rule);color:var(--text-secondary)}
.evf__shk .t-mono{color:#D0694E;font-size:11px;letter-spacing:.16em}
.evf .csheet__all{margin-top:clamp(18px,2.6vh,26px)}
@media (max-width:900px){
  .evf__top{grid-template-columns:minmax(0,1fr);gap:22px}
  .evf__k{grid-template-columns:32px minmax(0,1fr);padding:12px 0}
  .evf__kl,.evf__kv{grid-column:2}
}
html.still .evf__ph img{transform:none;transition:none}
html.still .evf--on .evf__k > span{opacity:1}
html.still .evf__kn::after{display:none}
.csheet__a{outline:none}
@media (hover:hover){.csheet__a:hover{outline:none}}
@media (forced-colors:active){.evf__kn::after{display:none}}
/* /programs/ THE LEADING RULE: only the stations that lead a programme (fx/ruler.js sets --n and hides the rest); phones read one clear
   current label (12 px) over the bead on a clean track, with no microscopic tick marks */
.prule__st{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.prule__st li[hidden]{display:none !important}
.prule__bar{width:calc(100% / var(--n,5))}
@media (max-width:767px){
  .prule{height:46px}
  .prule__svg{height:20px}
  .prule__bar{width:calc((100% - var(--gutter) * 2) / var(--n,5));top:11px}
  .prule__dots{display:none}
  .prule__st{top:24px;height:18px;font-size:12px;line-height:18px;letter-spacing:.12em;text-align:left;color:var(--text-primary)}
  .prule__st li.is-on{text-align:left}
}
/* /programs/ THE UNFINISHED SHEET (#next): the pen's construction around an empty Sanguine target, moreText in the display type */
#next{padding-bottom:clamp(44px,7vh,88px)}
.pend{display:grid;grid-template-columns:clamp(200px,24vw,320px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding-top:clamp(20px,3vh,32px);border-top:1px solid var(--rule)}
.pend__pl{position:relative;margin:0;aspect-ratio:1}
.pend__pl::before{content:"";position:absolute;inset:-6%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(242,186,120,.07),rgba(242,186,120,0) 62%)}
.pend__svg{position:relative;display:block;width:100%;height:100%;overflow:visible}
.pend__svg path,.pend__svg circle{fill:none;stroke-width:1}
.pend__svg .h{fill:url(#pend-h)}
.pend__tg circle,.pend__tg path{stroke:#C8563C;stroke-width:1.3}
.pend__tg{opacity:0;transform:scale(1.35);transform-box:fill-box;transform-origin:50% 50%;transition:opacity .6s var(--ease-out) 1.5s,transform .6s var(--ease-weight) 1.5s}
.pend.in .pend__tg{opacity:1;transform:none}
.pend__more{margin:0}
.pend__n{display:block;margin-bottom:6px;color:#D0694E;font-size:12px;letter-spacing:.16em}
.pend__t{display:block;font-family:var(--f-display);font-size:clamp(2.6rem,6vw,5.2rem);line-height:.98;letter-spacing:.03em;text-transform:uppercase}
.pend__s{margin:clamp(12px,2vh,18px) 0 0;color:var(--text-secondary);max-width:46ch}
.pend__go{margin:clamp(18px,3vh,26px) 0 0}
@media (max-width:700px){.pend{grid-template-columns:minmax(0,1fr);gap:18px}.pend__pl{width:min(62vw,240px)}}
html.still .pend__tg{opacity:1;transform:none;transition:none}
/* /programs/view/: the facts ledger's status pill and sessions note sit in the row; phones get the site's tighter section rhythm */
.factp--key dd .status{vertical-align:middle}
.factp--key dd .link{margin-left:4px;white-space:nowrap}
@media (max-width:700px){
  #program > .sec--tight{padding-block:clamp(40px,6vh,56px)}
  #program > .sec--tight:first-child{padding-top:clamp(28px,4.5vh,44px)}
  #continue.sec--tight{padding-top:clamp(28px,4.5vh,44px)}
}
/* /events/view/ THE VOLUNTEER TEAM (.ros): the ink plate (hairline Sanguine frame, warm vignette) and its numbered key; lit arc = opacity and filter */
.ros{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "pl" "key";gap:clamp(18px,2.6vh,28px)}
.ros__h{grid-area:h}.ros__pl{grid-area:pl}.ros__b{grid-area:key}
.ros__h .ros__role{margin-bottom:0}
.ros__pl{margin:0}
.ros__fr{position:relative;aspect-ratio:1;border:1px solid rgba(168,67,46,.6);background:#15110D;overflow:hidden}
.ros__fr::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(242,186,120,.08),rgba(242,186,120,0) 55%,rgba(10,6,4,.55) 100%)}
.ros__svg{position:absolute;inset:6%;width:88%;height:88%;overflow:visible}
.ros__svg path,.ros__svg circle{fill:none;stroke-width:1}
.ros__g circle,.ros__g path{stroke:rgba(242,233,216,.8);stroke-width:1.1}
.ros__g .ros__b{fill:url(#ros-h);stroke:rgba(242,233,216,.35);stroke-width:.8}
.ros__g,.ros__no{transition:opacity .5s var(--ease-out),filter .5s var(--ease-out)}
.ros--live .ros__g,.ros--live .ros__no{opacity:.38}
.ros--live .ros__g.is-lit,.ros--live .ros__no.is-lit{opacity:1}
.ros__g.is-lit{filter:drop-shadow(0 0 3px rgba(255,190,130,.55))}
.ros__g.is-lit circle,.ros__g.is-lit path:not(.ros__b){stroke:#F2E9D8}
.ros__no{fill:#E08A6C;stroke:none;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-anchor:middle}
.ros__tot{fill:rgba(242,233,216,.9);stroke:none;font-family:var(--f-display);font-size:44px;text-anchor:middle;letter-spacing:.04em}
.ros__rot{transform-origin:0 0;transition:transform .9s var(--ease-weight)}
.ros__tg circle,.ros__tg path{stroke:#C8563C;stroke-width:1.4}
.ros__tg .ros__td{fill:#C8563C;stroke:none}
.ros__cap{display:block;margin-top:12px;color:var(--text-secondary);font-size:11px;letter-spacing:.16em}
.ros__h h3{margin:0 0 8px}
.ros__role{margin:0 0 14px;color:var(--text-secondary);max-width:52ch}
.ros__key{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.ros__k{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule);outline:none}
.ros__kn{position:relative;color:#E08A6C;font-size:11px}
.ros__kn::after{content:"";position:absolute;left:-7px;top:50%;width:26px;height:26px;margin-top:-13px;border:1px solid #C8563C;border-radius:50%;opacity:0;transform:scale(.5);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.ros__k.is-lit .ros__kn::after{opacity:1;transform:none}
.ros__kc{font-family:var(--f-display);font-size:1.6rem;line-height:1;letter-spacing:.04em}
.ros--live .ros__k > span{transition:opacity .5s var(--ease-out)}
.ros--live .ros__k:not(.is-lit) > span{opacity:.56}
.split.ros-split{grid-template-columns:minmax(0,1fr);gap:clamp(28px,4.5vh,56px)}
.ros-split .prose{max-width:68ch}
@media (min-width:900px){.ros{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"pl h" "pl key";grid-template-rows:1fr auto;column-gap:clamp(32px,4vw,64px);row-gap:18px}.ros__h{align-self:end}.ros__b{align-self:start;margin-bottom:auto}.ros__pl{align-self:center}}
html.still .ros__g,html.still .ros__no,html.still .ros__k > span{opacity:1 !important}
html.still .ros__rot,html.still .ros__g,html.still .ros__kn::after{transition:none}
@media (forced-colors:active){.ros__kn::after{display:none}}
/* END ROUND4 PROGRAMS-EVENTS BLOCK */
/* ROUND4 RESEARCH-INVOLVE BLOCK */
/* ---- THE SOCIAL SEALS (critic: "four generic grey-bordered boxes"; owner: no square outline around anything a cursor visits). Each link
   is an engraved seal in the language of the home affiliations: a hairline cream circle with a fine inner ring, the glyph in line, the name
   and the handle in small capitals beneath. Hover, keyboard focus and a finger press draw a Sanguine ring round the seal, its spark
   travelling up to the top (transform and opacity only). No tile, border, background, lamp or tilt: markup and admin fields unchanged. ---- */
.socs .soc,.ftr8 .ftr__soc .soc{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:8px;min-height:44px;
  padding:4px 2px 6px;border:0;background:none;border-radius:0;outline-offset:4px}
.socs .soc::after,.socs .soc::before{content:"";position:absolute;left:50%;top:4px;right:auto;width:56px;height:56px;margin:0 0 0 -28px;border-radius:50%;box-sizing:border-box;pointer-events:none}
.socs .soc::after{border:1px solid rgba(242,233,216,.42);
  background:radial-gradient(circle,rgba(242,233,216,0) 23px,rgba(242,233,216,.2) 23.5px,rgba(242,233,216,.2) 24.2px,rgba(242,233,216,0) 24.8px);
  transition:opacity .45s var(--ease-out);opacity:.9}
.socs .soc::before{border:1px solid #C8563C;background:radial-gradient(circle at 50% 2px,#FFE9D6 0 1.3px,rgba(236,120,80,.9) 2.3px,rgba(200,86,60,0) 6px) border-box;
  box-shadow:0 0 14px rgba(200,86,60,.35),inset 0 0 10px rgba(200,86,60,.16);opacity:0;transform:rotate(-150deg) scale(.9);transform-origin:50% 50%;
  transition:opacity .45s var(--ease-out),transform .9s var(--ease-out);will-change:auto}
.socs .soc:hover::before,.socs .soc:focus-visible::before,.socs .soc.is-press::before,.socs .soc:active::before{opacity:1;transform:none}
.socs .soc:hover::after,.socs .soc:focus-visible::after,.socs .soc.is-press::after{opacity:.35}
.socs .soc:hover,.socs .soc:focus-visible,.socs .soc.is-press,.socs .soc:active{background:none;border:0}
.socs .soc:focus-visible{outline:none}
.socs .soc:focus-visible .soc__l{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.socs .soc__g{width:22px;height:22px;margin:17px 0 17px}
.socs .soc:hover .soc__g,.socs .soc:focus-visible .soc__g,.socs .soc.is-press .soc__g,.socs .soc:active .soc__g{transform:scale(1.08)}
.socs .soc__t{justify-items:center;gap:4px;width:100%}
.socs .soc__l{font-size:.95rem;letter-spacing:.04em}
.socs .soc__h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);overflow-wrap:anywhere}
.socs,.split .socs,.ftr8 .ftr__soc .socs{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.socs > li{justify-content:center}
@media (min-width:980px){.socs{grid-template-columns:repeat(4,minmax(0,1fr))}.split .socs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ftr8 .ftr__soc .socs{grid-template-columns:repeat(4,minmax(0,1fr));max-width:600px}}
html.still .socs .soc::before{transition:none;transform:none}
@media (forced-colors:active){.socs .soc::after,.socs .soc::before{border-color:CanvasText;background:none;box-shadow:none}}
/* ---- Get Involved, 03 Volunteer (critic: the one ungraded colour photo in a square box broke the ink rhythm): the photograph is graded as a
   warm sepia plate and has no square edge (owner, site-todo 118): it fades into the page through an oval vignette. The desk plate at
   1100 px + lets its frame and ember edge go while the photo is showing. The volunteer team's numbered key lights one line at a time as
   the row reaches the reading line (fx/ways.js sets .is-read); at rest, with no JS and in html.still every line is lit. ---- */
.gw__pp .pp__cam img,.gw__pp .pp__cv{filter:grayscale(1) sepia(.62) saturate(1.12) contrast(1.1) brightness(.84)}
.gw__pp .pp__cam{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,.55) 82%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,rgba(0,0,0,.55) 82%,rgba(0,0,0,0) 100%)}
.gw__frame--pp{border-color:transparent;background:transparent}
.gw__frame--pp .pp__cam{inset:0}
.gw__frame--sq{background:transparent}
.gw__frame--sq > .pl-edge{transition:opacity .7s var(--ease-inout)}
.gw[data-way="volunteer"] .gw__frame--sq{border-color:transparent}
.gw[data-way="volunteer"] .gw__frame--sq > .pl-edge,.gw[data-way="volunteer"] .gw__frame--sq > .pl-glow{opacity:0 !important}
.gw__lay[data-way="volunteer"] .pp__cam{inset:0}
.gw-vk{max-width:560px;margin:4px 0 0}
.gw-vk__h{margin:0 0 8px;color:var(--text-secondary);font-size:11px;letter-spacing:.14em}
.gw-vk__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.gw-vk__l li{position:relative;display:flex;align-items:baseline;gap:10px;min-width:0;padding:10px 0;border-top:1px solid var(--rule);
  font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;color:var(--text-primary);
  transition:opacity .6s var(--ease-out) calc(var(--k,0) * .32s)}
.gw-vk__l li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#C8563C;transform:scaleX(1);transform-origin:left center;
  transition:transform .8s var(--ease-out) calc(var(--k,0) * .32s)}
.gw-vk__n{flex:none;color:#E08A6C;font-variant-numeric:tabular-nums}
html:not(.still) section[data-way] #volunteer:not(.is-read) .gw-vk__l li{opacity:.45;transition-delay:0s}
html:not(.still) section[data-way] #volunteer:not(.is-read) .gw-vk__l li::before{transform:scaleX(0);transition-delay:0s}
@media (max-width:420px){.gw-vk__l{column-gap:16px}.gw-vk__l li{letter-spacing:.08em;gap:8px}}
@media (max-width:380px){.gw-vk__l{grid-template-columns:minmax(0,1fr)}}
/* ---- Get Involved: an empty way is an unfinished notebook entry (site.js-free, drawn by the page script slip()): the dashed construction
   box, two ruled lines, a blank date line and the Sanguine target waiting outside its circle, then one quiet link. Reveal: the box fades,
   the lines draw out from the left, the target turns in (transform and opacity, once, when the row arrives). ---- */
.gi-slip{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;max-width:620px;margin:8px 0 0}
.gi-slip__ink{display:block;width:112px;height:70px;overflow:visible}
.gi-slip__ink path,.gi-slip__ink circle{fill:none;stroke:rgba(242,233,216,.5);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
.gi-slip__box{stroke-dasharray:4 3;stroke:rgba(242,233,216,.34) !important}
.gi-slip__c{stroke:rgba(242,233,216,.22) !important;stroke-dasharray:6 3 1 3}
.gi-slip__t circle,.gi-slip__t path{stroke:#C8563C !important;stroke-width:1.3}
.gi-slip__t .gi-slip__td{fill:#EDB877;stroke:none !important}
.gi-slip__t{filter:drop-shadow(0 0 4px rgba(168,67,46,.6))}
.gi-slip__box,.gi-slip__r,.gi-slip__c,.gi-slip__t{transform-box:fill-box;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.gi-slip__r{transform-origin:left center}
.gi-slip__t{transform-origin:center}
.gi-slip__r2{transition-delay:.12s}.gi-slip__r3{transition-delay:.24s}.gi-slip__c{transition-delay:.3s}.gi-slip__t{transition-delay:.55s}
html:not(.still):not(.no-js) .gi-row.reveal:not(.in) .gi-slip__box,html:not(.still):not(.no-js) .gi-row.reveal:not(.in) .gi-slip__c{opacity:0}
html:not(.still):not(.no-js) .gi-row.reveal:not(.in) .gi-slip__r{transform:scaleX(0)}
html:not(.still):not(.no-js) .gi-row.reveal:not(.in) .gi-slip__t{opacity:0;transform:rotate(-60deg) scale(1.6)}
.gi-slip__b{display:contents}
.gi-slip .gi-none{grid-column:2;margin:0;padding:0;border:0}
.gi-slip__ink{grid-column:1;grid-row:1}
.gi-slip__go{grid-column:2;justify-self:start;display:block;max-width:max-content;padding:11px 0;margin-top:-8px;font-size:1rem;line-height:1.4;color:var(--text-primary);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(200,86,60,.7)}
.gi-slip__go:hover,.gi-slip__go:focus-visible{text-decoration-color:currentColor}
.gi-slip__arr{display:inline-block;vertical-align:middle;margin-left:10px;width:14px;height:1px;background:currentColor;position:relative;transition:transform .45s var(--ease-out)}
.gi-slip__arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg);transform-origin:100% 0}
.gi-slip__go:hover .gi-slip__arr,.gi-slip__go:focus-visible .gi-slip__arr{transform:translateX(4px)}
@media (max-width:560px){.gi-slip{grid-template-columns:88px minmax(0,1fr);gap:10px 16px}.gi-slip__ink{width:88px;height:55px;align-self:start;margin-top:4px}.gi-slip__go{grid-column:1 / -1;margin-top:0}}
@media (forced-colors:active){.gi-slip__ink{display:none}.gi-slip{grid-template-columns:minmax(0,1fr)}}
/* ---- Research FIG. 01 (critic: the phone strip had 8 px labels and the plate was a flat timeline): one tall plate at every width. Each
   station is a round ink window, a crop of an existing study seen through a circle (screen blend on its own dark disc), dim until its
   station lights; the numbered labels are 12 px and never fainter than .6. Below 1100 px the plate docks under the header, compact
   (44svh tall), on a band of page colour with a short fade, while the programmes and the two paragraphs scroll beneath it. ---- */
.rsp--v{display:block}
.rsp__lab{font-size:12px}
.rsp--v .rsp__lab{max-width:44%;white-space:normal}
.rsp-live .rsp__lab:not(.is-on){opacity:.6}
.rsp__win{position:absolute;z-index:1;left:40%;width:17%;aspect-ratio:1;border-radius:50%;overflow:hidden;isolation:isolate;transform:translate(-50%,-50%);
  background:#15110d;box-shadow:0 0 0 1px rgba(242,233,216,.5),0 0 0 5px rgba(21,17,13,.9),0 0 0 6px rgba(242,233,216,.16)}
.rsp__win img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;mix-blend-mode:screen;transition:opacity .7s var(--ease-out)}
.rsp__win::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;box-shadow:inset 0 0 0 1.5px #C8563C,inset 0 0 14px rgba(200,86,60,.45);opacity:0;transition:opacity .6s var(--ease-out)}
.rsp-live .rsp__win:not(.is-on) img{opacity:.45}
.rsp-live .rsp__win.is-cur::after{opacity:1}
.rsp__win--1 img{object-position:50% 50%;transform:scale(2.3);transform-origin:30% 30%}
.rsp__win--2 img{object-position:50% 22%;transform:scale(1.25);transform-origin:50% 30%}
.rsp__win--3 img{transform:scale(3.2);transform-origin:62% 64%}
.rsp__win--4 img{object-position:40% 50%;transform:scale(1.7);transform-origin:45% 65%}
.rsp__win--5 img{transform:scale(2.6);transform-origin:72% 78%}
.rsp__win--6 img{transform:scale(2.5);transform-origin:79% 30%}
.rsp .rsp__tgt{z-index:2}
@media (max-width:1099px){
  .rs-flow{position:relative}
  .rsp--v{position:relative;margin:0 0 clamp(24px,4vh,40px)}
  .rsp--v .rsp__frame{height:min(44svh,560px);width:auto;aspect-ratio:2/3;margin:0 auto}
  .rsp--v .rsp__cap{text-align:center}
}
@media (max-width:1099px) and (min-height:561px){
  html:not(.still) .rsp--v{position:sticky;top:calc(var(--hdr-hc,64px) + 8px);z-index:2;background:var(--canvas);padding-bottom:10px}
  html:not(.still) .rsp--v::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;background:var(--canvas);pointer-events:none}
  html:not(.still) .rsp--v::after{content:"";position:absolute;left:0;right:0;top:100%;height:44px;background:linear-gradient(var(--canvas),rgba(38,32,26,0));pointer-events:none}
}
@media (max-width:420px){.rsp--v .rsp__lab{font-size:11.5px;letter-spacing:.06em;gap:6px}}
@media (forced-colors:active){.rsp__win{display:none}}
html.still .rsp__win img{opacity:1 !important}
html.still .rsp__win::after{opacity:0 !important}
/* ---- 404 (critic): touch screens read "Draw your finger across the study" (pages.json notFound.top.tagTouch) instead of mouse language ---- */
.nf2__todo--t{display:none}
@media (hover:none){.nf2__todo--m{display:none}.nf2__todo--t{display:block}}
/* the plate sinks up to 48 px as it leaves a phone screen (fx/plates.js): the page links below it keep that much clear space */
@media (max-width:860px){main .nf__list{margin-top:52px}}
/* ---- The phone sheet's disclosures (site.js sheetHTML, ROUND4 critic): Departments and Get involved open and close with the footer route's
   + and minus, the section you are in starts open; an opened list fades and slides in (transform and opacity), instant in html.still ---- */
.sheet__grp{position:relative;grid-column:1 / -1;break-inside:avoid}
.sheet__list a.sheet__m.has-tg{padding-right:52px}
.sheet__tg{position:absolute;right:0;top:0;bottom:0;width:48px;min-height:44px;margin:0;padding:0;border:0;background:none;color:var(--text-secondary);cursor:pointer;z-index:1;
  opacity:0;transition:opacity .6s var(--ease-out)}
.sheet.open .sheet__tg{opacity:1;transition-delay:calc(min(var(--i,0),10) * 40ms + 60ms)}
.sheet__tg::before,.sheet__tg::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1px;margin:-.5px 0 0 -6px;background:currentColor;transition:transform .35s var(--ease-weight)}
.sheet__tg::after{transform:rotate(90deg)}
.sheet__tg[aria-expanded="true"]{color:var(--accent)}
.sheet__tg[aria-expanded="true"]::after{transform:rotate(0deg)}
.sheet__tg[aria-expanded="true"]::before{transform:rotate(180deg)}
.sheet__tg:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.sheet__subs{grid-column:1 / -1;break-inside:avoid}
.sheet__subs[hidden]{display:none}
@media (max-width:1000px) and (min-height:501px){.sheet__subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}}
@media (max-width:600px) and (min-height:501px){.sheet__subs{grid-template-columns:minmax(0,1fr)}}
.sheet.open .sheet__subs.is-in a{animation:sheetSubIn .42s var(--ease-out) both;animation-delay:calc(var(--j,0) * 35ms)}
@keyframes sheetSubIn{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}
html.still .sheet__subs a{animation:none !important}
html.still .sheet__tg::before,html.still .sheet__tg::after{transition:none}
/* short phones (iPhone SE and the like): the sheet tightens so the whole route and the contact line still fit one screen */
@media (max-width:600px) and (max-height:740px){
  .sheet{padding-top:calc(var(--hdr-h) + 8px);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .sheet__ab{margin-bottom:12px;min-height:56px;padding:10px 16px}
  .sheet__ab,.sheet__ctl{margin-bottom:12px}
  .sheet__end{padding:0 0 4px}
  .sheet__end--b{padding:4px 0 0}
  .sheet__list a{min-height:44px}
  .sheet__call{margin-top:14px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px}
  .sheet__callh{grid-column:1 / -1;margin:0 0 4px}
  .sheet__call .sheet__row{min-height:48px;padding:4px 0;font-size:.95rem;border-bottom:1px solid var(--rule)}
  .sheet__call .sheet__row .sheet__rowl{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sheet__call .sheet__row > span:last-child{overflow-wrap:anywhere}
}
@media (max-width:420px){.sheet__list a.has-tg .sheet__fol{margin-left:auto}.sheet__list a.has-tg .sheet__here{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
.sheet__list a.sheet__m .sheet__lb{white-space:nowrap}

/* FOUNDERS EVEN (owner 2026-09-27: "the founders quote, mine is too big, keep same size across"): Ahmad's line is set exactly like the other
   four (same size, same measure, no lead-only opening mark); only the order and the scroll zoom still single out the line being read. */
.vfc__l--lead .vfc__q p{max-width:62ch;font-size:clamp(17px,1.35vw,20px)}
.vfc__l--lead .vfc__q::before{content:none}
@media (max-width:720px){.vfc__l--lead .vfc__q p{font-size:1.02rem}}
@media (max-width:899px){.vfc__l--lead .vfc__pull{font-size:clamp(1.3rem,5.6vw,1.75rem)}}

/* FIX-ARM2 (owner 2026-09-27, "as close to the real deal as possible"): the ARM plate shows real-arms, whose arms run out of the top of the
   drawing; the plate's box dissolves them into the paper (plain and lit alike), so no cut edge shows when the camera moves to the arms. */
.d8arm__plate[data-study="arm"]>.ist__cam>.ist__box{-webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.25) 12%,rgba(0,0,0,.8) 30%,#000 40%);mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.25) 12%,rgba(0,0,0,.8) 30%,#000 40%)}