/* ============================================================
   YOUNG MEDICAL ENGINEERS — shared stylesheet
   Flat, dark, sharp. One family of charcoals, accents drawn
   quietly from the logo (red / navy / steel / gray).
   ============================================================ */

:root{
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --display: "Italiana", "Cormorant Garamond", Garamond, serif;
  --sans: "Archivo", "Segoe UI", Helvetica, Arial, sans-serif;

  /* logo palette */
  --logo-red: #B24740;
  --logo-navy: #3D537A;
  --logo-steel: #8B92AB;
  --logo-gray: #737373;

  --wrench: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'><path fill='%23e9e6df' stroke='%23141414' stroke-width='0.9' d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/></svg>") 3 3, auto;
  --wrench-hot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'><path fill='%23c4685f' stroke='%23141414' stroke-width='0.9' d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/></svg>") 3 3, pointer;
}

/* ---- per-page palette: flat color, one accent ----------------- */
body[data-room="threshold"]{ --bg:#0f1012; --ink:#e9e7e2; --dim:#96938c; --accent:#c4685f; }
body[data-room="mission"]  { --bg:#14100f; --ink:#efe9e2; --dim:#a3958d; --accent:#c4685f; }
body[data-room="about"]    { --bg:#101114; --ink:#e8e8e6; --dim:#96989e; --accent:#8b92ab; }
body[data-room="programs"] { --bg:#121211; --ink:#eae8e3; --dim:#9c9a92; --accent:#a8a49c; }
body[data-room="impact"]   { --bg:#0f1113; --ink:#e9e9e6; --dim:#94989c; --accent:#c4685f; }
body[data-room="board"]    { --bg:#101013; --ink:#e9e8e6; --dim:#97969e; --accent:#7e93bd; }
body[data-room="tutoring"] { --bg:#0f1218; --ink:#e7e9ee; --dim:#8f97a8; --accent:#7e93bd; }
body[data-room="volunteer"]{ --bg:#121210; --ink:#eae8e2; --dim:#9d9a8f; --accent:#a8a49c; }
body[data-room="donate"]   { --bg:#150f0e; --ink:#efe8e1; --dim:#a4938a; --accent:#c4685f; }
body[data-room="contact"]  { --bg:#0f1312; --ink:#e7eae8; --dim:#93a09a; --accent:#8b92ab; }

body{
  --rule: color-mix(in srgb, var(--ink) 14%, transparent);
  --panel: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* ---- reset / base ---------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; border-radius:0 !important; }
html,body{ height:100%; }
body{
  font-family:var(--sans);
  font-weight:300;
  background:var(--bg);
  color:var(--ink);
  cursor:var(--wrench);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body.scroll{ overflow-y:auto; overflow-x:hidden; }
a, button, select, label, input[type="submit"], .dot{ cursor:var(--wrench-hot); }
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:var(--bg); }

/* ---- texture (flat tone + faint grain, no gradients) ----------- */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.05; mix-blend-mode:overlay;
}

/* ---- entrance / exit shutter --------------------------------------- */
.shutter{
  position:fixed; inset:0; z-index:90; background:#050505; pointer-events:none;
  animation:shutterOut .5s ease .05s both;
}
@keyframes shutterOut{ from{opacity:1} to{opacity:0} }
body.dramatic .shutter{ animation:shutterOut 1.3s cubic-bezier(.3,0,.2,1) .1s both; }
body.exit .shutter{ animation:none; opacity:1; transition:opacity .35s; }
body[data-room="threshold"].exit .shutter{ transition-duration:.75s; }
body[data-room="threshold"].exit .stage{ transition:opacity .6s, transform .6s; opacity:0; transform:scale(1.04); }

/* ---- frame: header ----------------------------------------------- */
.top{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.3rem 2.6rem;
  border-bottom:1px solid var(--rule);
  background:var(--bg);
}
.brand{ display:flex; align-items:center; gap:.9rem; text-decoration:none; color:var(--ink); min-width:0; }
.brand img{ height:36px; width:auto; flex:none; max-width:none; }
.brand span{
  font-family:var(--serif); font-size:1.18rem; font-weight:500;
  white-space:nowrap; letter-spacing:.01em;
}
.top nav{ display:flex; gap:2rem; flex-wrap:wrap; justify-content:flex-end; }
.top nav a{
  font-size:.92rem; font-weight:400; letter-spacing:.015em;
  text-decoration:none; color:var(--dim);
  padding-left:.075rem; padding-bottom:.3rem; border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.top nav a:hover{ color:var(--ink); }
.top nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }

/* ---- frame: footer ------------------------------------------------ */
.foot{
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1rem 2.6rem;
  border-top:1px solid var(--rule);
  background:var(--bg);
  font-size:.8rem;
}
.foot a{ color:var(--dim); text-decoration:none; transition:color .25s; }
.foot a:hover{ color:var(--ink); }
.foot .sep{ color:var(--rule); margin:0 .7rem; }
.ig{ display:inline-flex; align-items:center; gap:.45em; vertical-align:bottom; }
.ig svg{ width:1.05em; height:1.05em; flex:none; }
.foot .ig:hover{ color:var(--accent); }
.next{
  color:var(--ink) !important; font-weight:400; white-space:nowrap;
}
.next .arrow{
  display:inline-block; margin-left:.55em; color:var(--accent);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.next:hover .arrow{ transform:translateX(.5em); }

/* ---- stage ---------------------------------------------------------- */
.stage{
  position:fixed; inset:0; z-index:10;
  padding:6.4rem 2.6rem 5.6rem;
  display:flex; flex-direction:column; justify-content:center;
  animation:roomEnter .8s cubic-bezier(.2,.7,.2,1) both;
}
body.scroll .stage{
  position:static; min-height:100vh; display:block;
  padding:7.2rem 2.6rem 6.4rem;
}
.measure{ max-width:1180px; margin:0 auto; width:100%; }
@keyframes roomEnter{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
body.dramatic .stage{ animation:dramaticEnter 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes dramaticEnter{
  from{ opacity:0; transform:translateY(30px) scale(.985); }
  to{ opacity:1; transform:none; }
}
body.exit .stage{ transition:opacity .3s, transform .3s; opacity:0; transform:translateY(-12px); }

/* ---- typography ------------------------------------------------------ */
.kicker{
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--accent); margin-bottom:1.4rem;
}
h1{
  font-family:var(--serif); font-weight:400; line-height:1.05;
  font-size:clamp(2.5rem, 4.8vw, 4.2rem);
  margin-bottom:1.6rem; text-wrap:balance;
}
h1 em{ font-style:italic; color:var(--accent); }
h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.4rem,2.2vw,2rem);
  line-height:1.15; margin-bottom:1rem;
}
.lede{
  font-size:clamp(.93rem, 1.1vw, 1.05rem); line-height:1.75; color:var(--dim);
  max-width:56ch; font-weight:300;
}
.lede strong{ color:var(--ink); font-weight:500; }
.lede a{ color:var(--accent); text-decoration:none; border-bottom:1px solid var(--rule); }

/* ---- layout helpers --------------------------------------------------- */
.cols{ display:grid; gap:2.4rem; }
.cols.c2{ grid-template-columns:1.15fr .85fr; }
.cols.c3{ grid-template-columns:repeat(3,1fr); }
.rule-top{ border-top:1px solid var(--rule); padding-top:1.5rem; }

.card{
  background:var(--panel);
  border:1px solid var(--rule);
  padding:1.9rem 2rem;
  transition:border-color .3s, transform .3s;
}
.card:hover{ border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.card h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; margin-bottom:.7rem; }
.card p, .card li{ font-size:.86rem; line-height:1.68; color:var(--dim); }
.card ul{ list-style:none; }
.card li{ padding:.4rem 0; border-bottom:1px solid var(--rule); }
.card li:last-child{ border-bottom:none; }
.num{
  font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--accent);
  display:block; margin-bottom:1rem;
}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-block; text-decoration:none; border:1px solid var(--ink);
  font-family:var(--sans); font-size:.88rem; font-weight:500; letter-spacing:.01em;
  color:var(--bg); background:var(--ink);
  padding:.9rem 2.2rem;
  transition:background .25s, color .25s, border-color .25s, transform .2s;
  will-change:transform;
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn:disabled{ opacity:.3; pointer-events:none; }
button.btn{ font-family:var(--sans); }
.actions{ display:flex; gap:1.1rem; margin-top:2.2rem; flex-wrap:wrap; align-items:center; }

/* ---- forms --------------------------------------------------------------- */
form{ display:grid; gap:1.3rem; }
.field label{
  display:block; font-size:.78rem; font-weight:500;
  color:var(--dim); margin-bottom:.5rem;
}
.field label::after{ content:" *"; color:var(--accent); }
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none; outline:none;
  border-bottom:1px solid var(--rule);
  color:var(--ink); font-family:var(--sans); font-weight:300;
  font-size:.95rem; padding:.5rem .1rem .65rem;
  transition:border-color .3s;
  cursor:var(--wrench-hot);
}
.field textarea{ resize:none; min-height:4.2rem; }
.field select{ appearance:none; }
.field select option{ background:var(--bg); color:var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color:var(--accent); }
.field input::placeholder, .field textarea::placeholder{ color:color-mix(in srgb, var(--dim) 55%, transparent); }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 2.1rem; }
.form-note{ font-size:.74rem; color:var(--dim); }
.form-err{ display:none; font-size:.82rem; color:var(--accent); }
.form-err a{ color:var(--accent); }
.form-err.show{ display:block; }
.form-done{ display:none; border:1px solid var(--accent); padding:2.2rem; background:var(--panel); }
.form-done h3{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin-bottom:.6rem; }
.form-done p{ color:var(--dim); font-size:.9rem; line-height:1.7; }
.sent .form-done{ display:block; }
.sent form{ display:none; }

/* ---- internal panels (programs) ------------------------------------------- */
.panels{ position:relative; overflow:hidden; }
.track{ display:flex; transition:transform .65s cubic-bezier(.65,0,.2,1); }
.panel{ min-width:100%; padding:0 .2rem; }
.pcontrols{ display:flex; align-items:center; gap:1.5rem; margin-top:2.4rem; }
.dot{
  background:none; border:none; padding:.55rem .2rem;
  font-family:var(--sans); font-size:.82rem; font-weight:400; color:var(--dim);
  border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.dot[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
.pcontrols .line{ flex:1; height:1px; background:var(--rule); }
.parrow{
  background:none; border:1px solid var(--rule); color:var(--ink);
  width:2.7rem; height:2.7rem; font-size:1rem; font-family:var(--sans);
  transition:border-color .3s, color .3s;
}
.parrow:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- landing (the threshold) ------------------------------------------------ */
#screws{ position:fixed; inset:0; z-index:1; display:block; }
body[data-room="threshold"] .stage{ z-index:10; pointer-events:none; animation:none; }
.hero-center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-center img.mark{
  height:clamp(70px,11vh,116px); width:auto; margin-bottom:2.6rem;
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.6));
  animation:markIn 1.4s cubic-bezier(.2,.7,.2,1) .3s both;
}
@keyframes markIn{
  from{ opacity:0; transform:translateY(-26px); }
  to{ opacity:1; transform:none; }
}
.hero-title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem, 6.4vw, 5.6rem); line-height:1.02;
  letter-spacing:.035em;
  text-shadow:0 4px 28px rgba(0,0,0,.65);
  animation:titleIn 1.8s cubic-bezier(.2,.7,.2,1) .55s both;
}
@keyframes titleIn{
  from{ opacity:0; letter-spacing:.14em; }
  to{ opacity:1; letter-spacing:.035em; }
}
.hero-title .thin{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--accent);
}
.hero-rule{
  display:flex; align-items:center; gap:.9rem;
  margin:2.3rem auto 2rem;
  animation:fadeIn 1s ease 1.5s both;
}
.hero-rule span{
  width:4.5rem; height:1px; background:var(--accent); opacity:.75;
  transform-origin:center; animation:ruleGrow 1.1s cubic-bezier(.2,.7,.2,1) 1.5s both;
}
.hero-rule i{ font-style:normal; font-size:.5rem; color:var(--accent); line-height:1; }
@keyframes ruleGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero-sub{
  font-family:var(--serif); font-variant:small-caps; font-size:1.02rem;
  font-weight:500; color:var(--dim); letter-spacing:.2em;
  text-shadow:0 2px 18px rgba(0,0,0,.7);
  animation:fadeIn 1.2s ease 1.9s both;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.corner{
  position:fixed; z-index:25; font-size:.76rem; font-weight:400;
  color:var(--dim); text-decoration:none; white-space:nowrap;
  transition:color .3s;
  animation:fadeIn 1.4s ease 2.4s both;
}
.corner em{ font-family:var(--serif); font-style:italic; font-size:.9rem; }
a.corner:hover{ color:var(--ink); }
.corner.tl{ top:1.6rem; left:2rem; }
.corner.tr{ top:1.6rem; right:2rem; }
.corner.bl{ bottom:1.6rem; left:2rem; }
.corner.br{ bottom:1.6rem; right:2rem; }
@media (max-width:700px){ .corner.tl, .corner.br{ display:none; } }
#chase{
  position:fixed; z-index:30; pointer-events:none;
  font-family:var(--serif); font-style:italic; font-size:1.08rem; color:var(--ink);
  letter-spacing:.06em; white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.6);
  opacity:0; transform:translate(-50%, 34px);
}
#chase.on{ animation:chasePulse 2.4s ease-in-out infinite; }
@keyframes chasePulse{
  0%, 100%{ opacity:.4; }
  50%{ opacity:1; }
}

/* ---- impact charts ------------------------------------------------------------ */
.metric{ border:1px solid var(--rule); padding:1.7rem 1.8rem 1.4rem; background:var(--panel); }
.metric .big{
  font-family:var(--serif); font-size:clamp(2.2rem,3.4vw,3.2rem); font-weight:400; line-height:1;
}
.metric .lbl{ font-size:.82rem; color:var(--dim); margin:.5rem 0 1.4rem; }
.chart{
  display:flex; align-items:flex-end; gap:12%; height:130px;
  border-bottom:1px solid var(--rule); padding:0 .2rem;
}
.chart .bar{
  flex:1; position:relative; background:var(--bar, var(--accent));
  height:0%; transition:height 1.1s cubic-bezier(.2,.7,.2,1);
  min-width:8px;
}
.chart .bar span{
  position:absolute; top:-1.45rem; left:50%; transform:translateX(-50%);
  font-size:.68rem; color:var(--dim); white-space:nowrap;
}
.xlabels{ display:flex; gap:12%; padding:.45rem .2rem 0; }
.xlabels span{ flex:1; text-align:center; font-size:.66rem; color:var(--dim); min-width:8px; }

/* ---- board ---------------------------------------------------------------------- */
.board-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr));
  gap:1.6rem; margin-top:2.6rem;
}
.member{
  border:1px solid var(--rule); background:var(--panel);
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1),
             border-color .3s;
}
.member.in{ opacity:1; transform:none; }
.member:hover{ border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
.member .ph{
  aspect-ratio:4/5; position:relative; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 7%, var(--bg));
  display:flex; align-items:center; justify-content:center;
}
.member .ph::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:var(--accent); transition:width .45s cubic-bezier(.2,.7,.2,1);
}
.member:hover .ph::after{ width:100%; }
.member .ph i{
  font-family:var(--serif); font-style:italic; font-size:2rem;
  color:color-mix(in srgb, var(--ink) 30%, transparent);
}
.member .info{ padding:1.15rem 1.25rem 1.3rem; }
.member h3{ font-family:var(--serif); font-weight:500; font-size:1.18rem; }
.member .role{ font-size:.74rem; color:var(--accent); margin:.25rem 0 .7rem; }
.member p{ font-size:.79rem; line-height:1.6; color:var(--dim); }

/* ---- gimmicks --------------------------------------------------------------------- */
.gear{
  position:fixed; right:-70px; bottom:-70px; z-index:5; width:260px; height:260px;
  opacity:.1; pointer-events:none; color:var(--ink);
}
.watermark{
  position:fixed; z-index:5; pointer-events:none; opacity:.05;
  right:4vw; top:50%; width:min(34vw, 460px);
  transform:translateY(-50%);
  will-change:transform;
}
.ekg{ margin-top:2.4rem; width:100%; max-width:560px; }
.ekg path{
  fill:none; stroke:var(--accent); stroke-width:1.6;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:ekg 5s linear infinite;
}
/* draw → hold → fade out in place → restart (never rolls back) */
@keyframes ekg{
  0%{ stroke-dashoffset:100; opacity:1; }
  55%{ stroke-dashoffset:0; opacity:1; }
  62%{ stroke-dashoffset:0; opacity:1; }
  76%{ stroke-dashoffset:0; opacity:0; }
  77%{ stroke-dashoffset:100; opacity:0; }
  100%{ stroke-dashoffset:100; opacity:0; }
}

/* ---- faq -------------------------------------------------------------------------- */
.faq dt{ font-family:var(--serif); font-size:1.08rem; font-weight:500; margin-top:1rem; }
.faq dt:first-child{ margin-top:0; }
.faq dd{ color:var(--dim); font-size:.84rem; line-height:1.65; margin-top:.3rem; }

/* ---- small screens: compact, minimal scroll -------------------------------- */
@media (max-width: 1020px), (max-height: 600px){
  body{ overflow:auto; }
  .stage{
    position:static; min-height:100svh;
    display:flex; flex-direction:column;
    padding:4.6rem 1.15rem 4.4rem;
  }
  .measure{ margin-block:auto; }
  .cols{ gap:.85rem; }
  .cols.c2, .cols.c3, .fgrid{ grid-template-columns:1fr; }

  h1{ font-size:clamp(1.7rem, 7vw, 2.3rem); margin-bottom:.8rem; }
  h1[style]{ margin-bottom:1rem !important; }
  .kicker{ font-size:.92rem; margin-bottom:.65rem; }
  .lede{ font-size:.86rem; line-height:1.58; }
  .card{ padding:.95rem 1.05rem; }
  .card h3{ font-size:1.08rem; margin-bottom:.35rem; }
  .card p, .card li{ font-size:.77rem; line-height:1.52; }
  .card li{ padding:.24rem 0; }
  .num{ margin-bottom:.35rem; font-size:.95rem; }
  .actions{ margin-top:1.1rem; gap:.8rem; }
  .btn{ padding:.74rem 1.45rem; font-size:.8rem; }
  form{ gap:.8rem; }
  .fgrid{ gap:.8rem; }
  .field textarea{ min-height:2.6rem; }
  .field label{ margin-bottom:.3rem; font-size:.72rem; }
  .faq dt{ font-size:.98rem; margin-top:.7rem; }
  .faq dd{ font-size:.77rem; line-height:1.5; }
  .form-note{ font-size:.68rem; }
  .ekg{ display:none; }

  /* toolbar: one slim row, swipes sideways */
  .top{ padding:.7rem 1.1rem; gap:1.2rem; }
  .brand{ flex:none; }
  .brand img{ height:30px; }
  .brand span{ display:none; }
  .top nav{
    flex-wrap:nowrap; overflow-x:auto; gap:1.2rem;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    justify-content:flex-start; min-width:0;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 .6rem);
            mask-image:linear-gradient(90deg, transparent, #000 .6rem);
  }
  .top nav::-webkit-scrollbar{ display:none; }
  .top nav a{ font-size:.82rem; white-space:nowrap; padding-bottom:.2rem; flex:none; }
  .top nav a:first-child{ padding-left:.15rem; }

  .foot{ padding:.65rem 1.1rem; font-size:.7rem; gap:.8rem; }
  .foot .sep{ margin:0 .4rem; }

  /* landing: no screw wall, static invitation */
  #screws{ display:none; }
  .hero-center img.mark{ height:clamp(64px, 9vh, 90px); margin-bottom:1.8rem; }
  #chase{
    left:50% !important; top:auto !important; bottom:13svh;
    transform:translateX(-50%); font-size:.98rem;
  }

  .watermark, .gear{ display:none; }
  .metric{ padding:.9rem 1rem .8rem; }
  .metric .big{ font-size:1.65rem; }
  .metric .lbl{ margin:.25rem 0 .9rem; font-size:.74rem; }
  .chart{ height:66px; }
  .chart .bar span{ font-size:.6rem; top:-1.2rem; }
  .xlabels span{ font-size:.58rem; }
  .board-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:1rem; }
  .member .info{ padding:.85rem .95rem 1rem; }
  .ekg{ margin-top:1.4rem; max-width:100%; }
  body.scroll .stage{ padding:5.2rem 1.15rem 5rem; }
  body.scroll .measure{ margin-block:0; }
}

/* touch devices: same treatment even on large tablets */
@media (hover: none){
  #screws{ display:none; }
  #chase{
    left:50% !important; top:auto !important; bottom:13svh;
    transform:translateX(-50%);
  }
}