/* ============================================================
   Human Body Hub — the shelf
   Left: the specimen, on dark, so the lit organ carries.
   Right: paper, where the reading happens.
   The two are one surface — the ground slides from ink to paper
   across the middle of the screen, with no seam.
   ============================================================ */
:root{
  /* the ground */
  --ink-0:#0A141C; --ink-1:#0D1E29; --paper:#F7F6F2; --paper-2:#FFFFFF;
  --chalk:#EDF4F8; --chalk-dim:#A9BECB;
  --text:#1B2226; --text-2:#515D68; --text-3:#616C77; --rule:#DDDAD1;

  /* glow colours — for the lit organ on the dark side */
  --g-coordination:#B388FF; --g-gas-exchange:#4FC3F7; --g-circulation:#FF5C5C;
  --g-digestion:#F5A623;    --g-excretion:#4ADE80;    --g-immunity:#2DD4BF;
  --g-reproduction:#F472B6; --g-respiration:#A3E635;  --g-drugs:#94A3B8;

  /* ink colours — the same systems, readable on paper */
  --i-coordination:#6231B8; --i-gas-exchange:#0B6A8C; --i-circulation:#B0332D;
  --i-digestion:#8F5D09;    --i-excretion:#1C7442;    --i-immunity:#0C6E63;
  --i-reproduction:#A33569; --i-respiration:#566F12;  --i-drugs:#465768;

  --serif:Fraunces,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 1px 2px rgba(40,48,55,.05), 0 8px 24px rgba(40,48,55,.07);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--text);
  -webkit-font-smoothing:antialiased;
  background:var(--paper);
}
h1,h2,h3{margin:0;font-weight:400;line-height:1.15}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.eyebrow{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#4A5661
}

/* ============ the shell ============ */
.shell{height:100dvh;display:grid;grid-template-columns:minmax(340px,52%) minmax(0,1fr)}

/* ============ left: the specimen ============ */
.plate{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:22px 10px 12px;min-height:0
}
/* The dark slab the specimen lies on.
   Not a fade-to-transparent: fading near-black over paper reaches mid-grey
   within a few pixels and reads as a hard band. This is an opaque ramp with
   hand-picked steps, roughly even in perceived lightness, drifting from cold
   ink through sage into the warm paper — so it looks like light falling
   across the page rather than two panels butted together. */
.plate::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36% 38% at 40% 42%, rgba(72,152,182,.22), transparent 70%),
    linear-gradient(90deg,
      #0A141C 0%,    #0B1720 40%,   #0C1B24 62%,   #10222A 70%,
      #16282E 73.6%, #223739 77.5%, #32474A 81.4%, #47595A 85%,
      #5F6E6B 88.6%, #7C877F 91.4%, #9BA69A 93.9%, #B4BDAF 95.7%,
      #CBD0C5 97.1%, #DFE1D8 98.4%, #EFEEE8 99.3%, var(--paper) 100%)
}

.plate__mark{
  position:absolute;top:20px;left:30px;z-index:2;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:#C2D6E2;
  background:rgba(7,15,21,.68);border-radius:999px;padding:5px 12px;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)
}
.plate__frame{position:relative;flex:1;min-height:0;display:flex;align-items:center;width:100%;justify-content:center}
.plate svg{height:100%;max-height:min(68vh,740px);width:auto;display:block}
.plate .sweep{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;overflow:hidden;
  background:linear-gradient(180deg,transparent 44%,rgba(120,215,255,.085) 50%,transparent 56%);
  animation:sweep 11s linear infinite
}
@keyframes sweep{0%{transform:translateY(-56%)}100%{transform:translateY(56%)}}

/* the label that pins itself to the lit organ */
.tag{
  position:absolute;z-index:3;pointer-events:none;opacity:0;transform:translate(-50%,-100%) scale(.96);
  transition:opacity .22s ease,transform .22s ease;white-space:nowrap
}
.tag.on{opacity:1;transform:translate(-50%,-100%) scale(1)}
/* beside the organ, when there is no room above it — see pinTag() in js/hub.js */
.tag.tag--side{transform:translate(0,-50%) scale(.96)}
.tag.on.tag--side{transform:translate(0,-50%) scale(1)}
.tag__pill{
  display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:#08121A;background:var(--c);padding:5px 11px;border-radius:2px;
  box-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent)
}

/* the caption below the plate */
.said{
  position:relative;z-index:6;text-align:center;min-height:52px;padding:6px 18px 2px;
  text-shadow:0 0 10px rgba(5,10,14,.9)
}
.said__name{display:block;font-family:var(--serif);font-size:20px;color:var(--c,var(--chalk))}
.said__note{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:#B6C9D5;margin-top:6px}

/* body, bones, organs */
.skinlayer{fill:#12303D !important;opacity:.95;stroke:#7FE4F5;stroke-width:2.4;stroke-opacity:.24}
.bone{opacity:.34;filter:saturate(.1) brightness(1.7)}
.organ{
  opacity:calc(var(--op,1) * .6);filter:grayscale(.7) brightness(.74);
  transition:opacity .35s ease,filter .35s ease
}
svg[data-focus] .organ{opacity:calc(var(--op,1) * .13);filter:grayscale(1) brightness(.4)}
svg[data-focus] .organ.is-on{
  opacity:var(--op,1);
  filter:drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 28px var(--c)) saturate(1.2) brightness(1.12)
}
.hotspot{fill:transparent;cursor:pointer}
.hotspot:focus,.hotspot:focus-visible{outline:none}

#o-heart{transform-box:fill-box;transform-origin:50% 50%;animation:beat 1.3s ease-in-out infinite}
@keyframes beat{0%,58%,100%{transform:scale(1)}10%{transform:scale(1.06)}22%{transform:scale(1.005)}32%{transform:scale(1.035)}}
#o-lungs{transform-box:fill-box;transform-origin:50% 16%;animation:breathe 5.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.022,1.038)}}
svg[data-focus="digestion"] #o-intestines{transform-box:fill-box;transform-origin:50% 50%;animation:churn 3.6s ease-in-out infinite}
@keyframes churn{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(1.1%) scale(1.012)}}

/* ============ right: the paper ============ */
.sheet{
  min-height:0;overflow:auto;padding:clamp(24px,3.4vh,38px) clamp(26px,3.6vw,56px) 20px;
  display:flex;flex-direction:column;gap:clamp(12px,1.8vh,20px)
}
/* the way back (14 Oct 2026, Daniel: pupils missed it): a solid pill in this site's own colours */
.up{display:inline-flex;align-items:center;flex:none;white-space:nowrap;min-height:34px;margin:0 0 10px;padding:0 16px 0 13px;font:650 14px/1 var(--sans,Inter,system-ui,sans-serif);letter-spacing:0;text-transform:none;color:#fff;background:var(--i-gas-exchange);border:0;border-radius:999px;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.up:hover,.up:focus-visible{background:#08536E;color:#fff;text-decoration:none}
.masthead h1{font-family:var(--serif);font-size:clamp(28px,3.2vw,40px);letter-spacing:-.015em}
.masthead h1 em{font-style:italic;color:var(--i-gas-exchange)}
.masthead .eyebrow{margin-top:6px;display:block}
.switch{
  display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;color:var(--i-gas-exchange);border-bottom:1px solid rgba(11,106,140,.35)
}
.switch::after{content:" →"}
.switch:hover{color:#08536E;border-bottom-color:#08536E}
.lede{margin:0;max-width:56ch;color:#414D58;font-size:15px}

.band{display:flex;align-items:center;gap:12px}
.band::after{content:"";flex:1;height:1px;background:var(--rule)}
.band .count{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--text-3)}

/* each open lab, in its own system's ink (--c, set on .hero by hub.js and body3d.js) */
.hero{
  display:block;position:relative;background:var(--paper-2);border:1px solid var(--rule);
  border-left:4px solid var(--c,var(--i-digestion));border-radius:4px;padding:16px 20px 17px;
  box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease
}
.hero:hover,.hero:focus-visible{transform:translateY(-2px);box-shadow:0 3px 8px rgba(40,48,55,.08),0 16px 36px rgba(40,48,55,.12);outline:none}
.hero__no{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;color:var(--c,var(--i-digestion))}
.hero__name{font-family:var(--serif);font-size:26px;letter-spacing:-.01em;margin-top:2px}
.hero__sub{font-size:14px;color:var(--text-2);margin:1px 0 8px}
.hero__blurb{font-size:14px;margin:0;max-width:52ch}
.hero__foot{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.hero__go{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  background:var(--c,var(--i-digestion));color:#fff;padding:8px 15px;border-radius:2px
}
.hero:hover .hero__go{background:color-mix(in srgb,var(--c,var(--i-digestion)) 82%,#000)}
.hero__stat{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--text-3)}

/* how far this browser has got in the open lab — absent until it has been opened,
   so a student who has never touched it sees no empty bar. The colour is the lab's
   own system ink (--c, set on .hero), not a fifth accent. */
.hero__prog{display:flex;align-items:center;gap:10px;margin-top:13px;padding-top:12px;border-top:1px solid var(--rule)}
.hero__prog .pbar{flex:1 1 auto;min-width:70px;height:4px;border-radius:2px;background:#E6E4DC;overflow:hidden}
.hero__prog .pbar__fill{display:block;height:100%;background:var(--c);border-radius:2px;transition:width .5s ease}
.hero__prog b{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--c);letter-spacing:.04em}
.hero__prog small{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.hero__prog .pbar__fill{transition:none}}

/* the eight still to come */
.queue{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 18px}
.q__btn{
  display:flex;gap:11px;align-items:baseline;width:100%;text-align:left;
  padding:9px 10px;border-radius:3px;transition:background .18s ease
}
.q__btn:hover,.q__btn:focus-visible{background:#EFEDE7;outline:none}
.q__dot{
  flex:none;width:9px;height:9px;border-radius:50%;background:var(--c);
  align-self:center;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent)
}
.q__no{font-family:var(--mono);font-size:11px;color:var(--text-3);flex:none;width:19px}
.q__txt{min-width:0}
.q__lab{display:block;font-family:var(--serif);font-size:16.5px;color:var(--text)}
.q__btn:hover .q__lab{color:var(--c)}
.q__title{display:block;font-size:12.5px;color:var(--text-2);margin-top:0}

.byline{
  margin:0 0 2px;font-size:12.5px;color:var(--text);
}
.byline strong{font-weight:500}
.byline a{color:var(--i-gas-exchange);border-bottom:1px solid rgba(11,106,140,.4)}
.byline a:hover{color:#08536E}

/* the maker's mark, set down the edge of the specimen slab */
.wm{
  position:absolute;left:14px;bottom:26px;transform-origin:left bottom;
  transform:rotate(-90deg);white-space:nowrap;z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:#9FB6C4;text-shadow:0 0 7px rgba(5,10,14,.95),0 0 2px rgba(5,10,14,.95)
}

.colophon{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;line-height:1.85;
  text-transform:none;color:#5D6771
}
.colophon a{color:#3D4954;border-bottom:1px solid #C9C6BC}
.colophon a:hover{color:var(--text)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,12px);z-index:30;
  background:#1B2226;color:#fff;padding:10px 18px;border-radius:2px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ============ narrow ============ */
@media (max-width:900px){
  .plate::before{inset:0;-webkit-mask-image:none;mask-image:none;
    background:
      radial-gradient(52% 30% at 50% 36%, rgba(72,152,182,.22), transparent 72%),
      linear-gradient(180deg,
        #0A141C 0%,     #0B1720 46%,   #0C1B24 70%,   #10222A 76%,
        #16282E 78.9%,  #223739 82%,   #32474A 85.1%, #47595A 88%,
        #5F6E6B 90.9%,  #7C877F 93.1%, #9BA69A 95.2%, #B4BDAF 96.6%,
        #CBD0C5 97.7%,  #DFE1D8 98.8%, #EFEEE8 99.4%, var(--paper) 100%)}
  .plate svg{margin-right:0}
  .plate .sweep{inset:0}
  .shell{height:auto;min-height:100dvh;grid-template-columns:1fr}
  .plate{padding:16px 10px 150px}
  .plate svg{height:42vh;max-height:400px}
  .plate__mark{position:static;text-align:center;margin-bottom:6px}
  .tag__pill{font-size:10px;letter-spacing:.09em;padding:4px 9px}   /* room is tight beside a head */
  .sheet{overflow:visible;padding:8px 20px 26px}
  .queue{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* the maker's name, wherever it appears: a quiet link out to who made this. Same dotted
   underline the header credit already uses, so it reads as a link without shouting. */
.by-me{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
.by-me:hover,.by-me:focus-visible{border-bottom-style:solid}