/* Dr Rawand Shado — site styles.

   Lineage: the Measured Motion canvas (Measured motion mockup/Main.dc.html),
   ported 2026-08-20 and recoloured gold-and-blue the same day. Token NAMES are
   the canvas author's and their VALUES are unchanged, so --color-copper-bright
   still holds a gold, not a copper.

   2026-08-30, at Rawand's request, the page was reworked twice: first an
   evidence-first pass that stripped the ambient motion layers (intro curtain,
   nav wipe, crosshair, drifting canvas grid, parallax, scan line, ruler), then
   this one — a compact disclosure layout in an Apple-ish register. Sections are
   native <details> cards on a white surface, opening on a spring curve. The
   canvas is no longer the design source of truth; /site is.

   Additions to :root are marked 2026-08-30. They are neutral surface, radius
   and easing values — no new hue enters the palette. Single font: Archivo
   variable (width axis 62–125). */

:root{
  --color-bg:#F4F6FB;            /* cool porcelain page ground */
  --color-panel:#0A1330;         /* deep-navy bands, diagram screens, footer */
  --color-text:#0E1A33;          /* navy ink */
  --color-muted:#4A5670;         /* secondary text on porcelain */
  --color-accent:#1350A6;        /* royal blue — marks, numerals, buttons, contact band */
  --color-accent-2:#8A6A12;      /* deep gold — strand labels, years, ruler cursor */
  --color-glow:#5AA6F5;          /* luminous azure — dark surfaces + scanline only */
  --color-copper-bright:#E8BC63; /* bright gold, legible on the navy panel */
  --color-line:color-mix(in srgb,#0E1A33 15%,transparent);
  --color-divider:color-mix(in srgb,#0E1A33 36%,transparent);
  --panel-text:#E9EEF8;
  --panel-muted:#9BA9C6;
  --panel-line:color-mix(in srgb,#E9EEF8 20%,transparent);
  --panel-grid:color-mix(in srgb,#E9EEF8 8%,transparent);
  --panel-link:#8FBEF7;
  --font-heading:"Archivo",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
  /* 2026-08-30 — card surface, corner radii and the open/close curve */
  --color-surface:#FFFFFF;
  --radius:14px;
  --radius-sm:10px;
  --pill:999px;
  --ease:cubic-bezier(.32,.72,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:15px;line-height:1.55;font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);font-weight:800;
  line-height:1.15;letter-spacing:-0.02em;margin:0;
}
img{display:block;max-width:100%}
a{color:#0F3F85;text-decoration:none}
a:hover{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:4px}
::selection{background:color-mix(in srgb, var(--color-glow) 35%, transparent)}
[id]{scroll-margin-top:78px}

/* container shared by header, the card stack and the full-bleed bands */
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}

/* — header — */
.hdr{
  position:sticky;top:10px;z-index:60;min-height:50px;display:flex;align-items:center;
  width:min(1080px,calc(100% - clamp(16px,4vw,32px)));margin:10px auto 0;
  border-radius:var(--pill);border:1px solid var(--color-line);
  background:color-mix(in srgb,var(--color-surface) 70%,transparent);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
}
.hdr .wrap{padding-inline:clamp(14px,2.2vw,20px)}
.mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-heading);font-weight:900;font-stretch:112%;font-size:13.5px;letter-spacing:.01em;color:var(--color-text)}
.mark:hover{text-decoration:none;color:var(--color-text)}
.mark svg{flex:none;display:block}
.nav{display:flex;align-items:center;gap:clamp(12px,2vw,22px)}
.nav a{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--color-muted);transition:color .2s}
.nav a:hover{color:var(--color-text);text-decoration:none}
/* the pill in the nav is a button first — .nav a must not win the colour */
.nav a.btn,.nav a.btn:hover{color:#fff}
/* SPEC §13: on a phone the header is the wordmark and Contact only */
@media (max-width:619px){
  .nav a[data-nav="research"],.nav a[data-nav="focus"]{display:none}
}
.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:var(--pill);
  background:var(--color-accent);color:#fff;font-family:var(--font-heading);
  font-weight:700;letter-spacing:-.01em;text-decoration:none;
  transition:transform .2s var(--ease),filter .2s;
}
.btn:hover{color:#fff;text-decoration:none;filter:brightness(1.12);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{font-size:12.5px;padding:7px 15px}
.btn-lg{font-size:14.5px;padding:12px 22px}

/* reading progress, tied to document scroll. Browsers without scroll-driven
   animation never paint it, so there is nothing to fall back to and no JS. */
.progress{position:fixed;left:0;right:0;top:0;z-index:70;height:2px;background:var(--color-accent);transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:scroll()){
  .progress{animation:progress linear;animation-timeline:scroll(root block)}
  @keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* — hero — */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(34px,5.5vw,68px) 0 clamp(18px,2.6vw,28px)}
.eyebrow{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent)}
.hero h1{font-weight:900;font-stretch:122%;font-size:clamp(2.3rem,6.2vw,4.4rem);line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
.hero h1 span{display:block;overflow:hidden}
.credentials{margin:clamp(12px,1.8vw,18px) 0 0;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.credentials b{color:var(--color-text);font-weight:700}
.credentials i{font-style:normal;color:var(--color-line)}
.hero p.bio{margin:clamp(14px,2vw,20px) 0 0;font-size:15.5px;line-height:1.6;max-width:52ch;color:var(--color-muted)}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:clamp(18px,2.4vw,26px)}
/* Portrait. The 2026-08-30 dissolve treatment was reverted the same day: a
   desaturated studio headshot, soft-vignetted on all four sides and floating on
   pale grey, is the exact visual grammar of an in-memoriam card. The fade suited
   Augen because that subject is lit and dissolving into light on purpose; a flat
   studio shot has no such light to dissolve into.
   Now: full colour, hard rounded edge, cropped in tight so the face carries the
   frame. Nothing soft, nothing greyed. The grade pulls saturation down slightly
   because the source file is still warm-graded for the retired ivory palette,
   and that sepia cast reads dated against the cool porcelain ground. */
.portrait{
  position:relative;width:100%;max-width:380px;margin-left:auto;aspect-ratio:4/5;
  border-radius:var(--radius);overflow:hidden;background:var(--color-line);
}
.portrait picture{display:block;width:100%;height:100%}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  filter:saturate(.88) contrast(1.08) brightness(1.02);transform:scale(1.2);transform-origin:50% 20%}
@media (max-width:759px){
  .hero{grid-template-columns:minmax(0,1fr);gap:24px}
  .portrait{max-width:230px;margin-left:0;order:-1}
}

/* — stats card — */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);overflow:hidden}
.stats>div{padding:clamp(14px,2vw,20px) clamp(12px,1.8vw,20px)}
.stats>div+div{border-left:1px solid var(--color-line)}
.stat-n{display:block;font-family:var(--font-heading);font-weight:900;font-stretch:115%;font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1;letter-spacing:-.035em;color:var(--color-accent)}
.stat-l{display:block;margin-top:7px;font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.01em;color:var(--color-muted)}
@media (max-width:899px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>div:nth-child(odd){border-left:0}
  .stats>div:nth-child(n+3){border-top:1px solid var(--color-line)}
}
@media (max-width:539px){
  .stats{grid-template-columns:minmax(0,1fr)}
  .stats>div+div{border-left:0;border-top:1px solid var(--color-line)}
}

/* — the disclosure stack —
   Each section is a native <details>: keyboard-operable, findable by in-page
   search, and fully in the DOM for crawlers whether open or shut. */
.stack{display:flex;flex-direction:column;gap:8px;margin:clamp(16px,2.4vw,26px) 0}
.sec{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius)}
.sec-head{
  position:relative;list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;
  gap:clamp(9px,1.5vw,16px);padding:clamp(13px,1.7vw,17px) clamp(14px,2vw,20px);
  border-radius:calc(var(--radius) - 1px);transition:background .22s ease;
}
/* accent rail — grows on hover, stays while the card is open */
.sec-head::before{
  content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;
  border-radius:0 3px 3px 0;background:var(--color-accent);
  transform:scaleY(0);transition:transform .38s var(--ease);
}
.sec:hover>.sec-head::before,.sec[open]>.sec-head::before{transform:scaleY(1)}
.sec-head::-webkit-details-marker{display:none}
.sec-head::marker{content:""}
.sec-head:hover{background:color-mix(in srgb,var(--color-accent) 5%,transparent)}
.sec-num{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--color-accent);white-space:nowrap}
.sec-den{color:var(--color-muted);font-weight:600}
/* on the blue contact band the muted navy denominator is illegible */
.contact .sec-den{color:rgba(255,255,255,.75)}  /* 5.08:1 on the accent band — AA */
.sec-title{font-size:clamp(1.02rem,1.9vw,1.28rem);font-weight:700;font-stretch:104%;letter-spacing:-.025em}
.sec-note{font-size:12px;font-weight:600;letter-spacing:-.005em;color:var(--color-muted);white-space:nowrap}
.chev{flex:none;color:var(--color-muted);transition:transform .42s var(--ease)}
/* scoped to its OWN summary — a bare `.sec[open] .chev` also matches the
   chevrons of the collapsed publication rows nested inside an open section,
   flipping them all to "open" */
.sec[open]>.sec-head .chev{transform:rotate(180deg)}
.sec-body{padding:2px clamp(14px,2vw,20px) clamp(15px,2vw,20px)}
.sec-lead{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--color-muted);max-width:64ch}
@media (max-width:519px){
  .sec-head{grid-template-columns:auto minmax(0,1fr) auto;row-gap:2px}
  .sec-note{grid-column:2;font-size:11.5px}
  .spark{display:none}
}

/* the spring. Without ::details-content support the panel simply appears —
   correct, just not animated — so no JS height measuring is needed anywhere. */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .sec::details-content,.pub::details-content{
    height:0;overflow:hidden;content-visibility:hidden;
    transition:height .44s var(--ease),content-visibility .44s allow-discrete;
  }
  .sec[open]::details-content,.pub[open]::details-content{height:auto;content-visibility:visible}
}

/* — publication ledger —
   Collapsed, a row states the paper and its live citation count. Opened, it adds
   the study type, venue, a plain-English line and, where the paper clears the top
   quartile, its same-year dentistry percentile. Click, keyboard and screen reader
   all reach the same content. */
.pub-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--color-line)}
.pub-list>li{border-bottom:1px solid var(--color-line)}
.pub{border-radius:var(--radius-sm)}
.pub-sum{
  list-style:none;cursor:pointer;display:grid;
  grid-template-columns:22px minmax(0,1fr) auto auto;gap:10px;align-items:baseline;
  padding:11px 8px;margin:0 -8px;border-radius:var(--radius-sm);transition:background .22s ease;
}
.pub-sum::-webkit-details-marker{display:none}
.pub-sum::marker{content:""}
.pub-sum:hover{background:color-mix(in srgb,var(--color-accent) 5%,transparent)}
.pub-num{font-family:var(--font-heading);font-weight:800;font-size:12px;color:var(--color-accent)}
.pub-title{font-size:14px;font-weight:600;line-height:1.4;letter-spacing:-.012em;color:var(--color-text)}
.pub-cites{font-size:11.5px;font-weight:700;letter-spacing:-.005em;color:var(--color-muted);white-space:nowrap}
.pub>.pub-sum .chev{align-self:center;transform:translateY(1px)}
.pub[open]>.pub-sum .chev{transform:translateY(1px) rotate(180deg)}
.pub-metric:empty{display:none}
.pub-body{padding:0 0 14px 32px;display:flex;flex-direction:column;gap:7px}
.pub-plain{margin:0;font-size:13.5px;line-height:1.5;color:var(--color-muted);max-width:60ch}
.pub-meta{margin:0;display:flex;flex-wrap:wrap;gap:5px 12px;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--color-muted)}
.pub-kind{color:var(--color-accent-2)}
.pub-metric{margin:0;display:flex;flex-wrap:wrap;gap:5px 12px;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--color-muted)}
.pub-rank{color:var(--color-accent-2)}
.pub-foot{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:12.5px;font-weight:600}
.method{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--color-muted);max-width:70ch}
/* thematic group headings inside the ledger */
.pub-group{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:18px 0 2px;font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-2)}
.pub-group:first-of-type{margin-top:4px}
.pub-group-n{color:var(--color-muted);font-weight:600;white-space:nowrap}

/* About */
.lead{margin:0 0 12px;font-size:clamp(1rem,1.7vw,1.16rem);line-height:1.45;font-weight:600;letter-spacing:-.02em;color:var(--color-text);max-width:46ch}
.prose{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--color-muted);max-width:66ch}
.prose:last-child{margin-bottom:0}

/* Projects */
.proj-link{margin:8px 0 0;font-size:12.5px;font-weight:600}
@media (max-width:619px){
  .pub-sum{grid-template-columns:22px minmax(0,1fr) auto;row-gap:2px}
  .pub-cites{grid-column:2}
  .pub-body{padding-left:0}
}

/* — generic content inside the cards — */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
@media (max-width:719px){ .grid3,.grid2{grid-template-columns:minmax(0,1fr)} }
.strand h3{margin:5px 0 6px;font-size:15px;font-weight:700;letter-spacing:-.02em}
.strand p{margin:0;font-size:13.5px;line-height:1.55;color:var(--color-muted)}
.kicker{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-2)}
.qual{border-top:2px solid var(--color-line);padding-top:11px}
.qual dt{margin:0 0 4px;font-family:var(--font-heading);font-weight:900;font-stretch:112%;font-size:17px;letter-spacing:-.025em}
.qual dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--color-muted)}
/* "In progress" — these are being read for, not held. SPEC §2.3 (credential
   precision) means they must never sit in the list looking like the others. */
.tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--pill);background:color-mix(in srgb,var(--color-accent-2) 13%,transparent);color:var(--color-accent-2);font-family:var(--font-body);font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;vertical-align:2px;white-space:nowrap}
.rows{margin:0;padding:0;list-style:none}
.rows li{padding:11px 0;border-top:1px solid var(--color-line);font-size:14px;line-height:1.5}
.rows li:first-child{border-top:0}
.rows.split li{display:flex;justify-content:space-between;gap:18px}
.rows .year{font-family:var(--font-heading);font-weight:800;color:var(--color-accent-2);white-space:nowrap}
.note{margin:14px 0 0;font-size:14px;line-height:1.5}

/* — contact band — */
.contact{background:var(--color-accent);color:#fff}
.contact a{color:#fff}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(20px,4vw,48px);align-items:start}
.mailto{display:inline-block;max-width:100%;font-family:var(--font-heading);font-weight:900;font-stretch:110%;font-size:clamp(1.25rem,3vw,2.1rem);line-height:1.05;letter-spacing:-.03em;border-bottom:3px solid rgba(255,255,255,.45)}
.mailto:hover{text-decoration:none;border-bottom-color:#fff}
.links{margin:0;padding:0;list-style:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius);overflow:hidden}
.links li+li{border-top:1px solid rgba(255,255,255,.3)}
.links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;font-family:var(--font-heading);font-weight:700;font-size:13px;letter-spacing:-.01em;transition:background .2s}
.links a:hover{text-decoration:none;background:rgba(255,255,255,.13)}
.links span{display:flex;align-items:center;gap:11px}

.foot{background:var(--color-panel);color:var(--panel-muted)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
}

/* — the shape of the evidence, at a glance —
   A collapsed row should say something, not just sit there. The publications
   row draws one bar per paper, height proportional to its citation count; the
   others draw one pip per item, filled where the thing is held or built and
   hollow where it is still in progress. Decorative motion is what this design
   removed; this is the opposite — the animation is the data arriving. */
.spark{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.spark i{
  width:3px;height:var(--h,45%);border-radius:1.5px;
  background:var(--color-accent);opacity:.65;transform-origin:50% 100%;
}
.spark--pips{align-items:center}
.spark--pips i{
  width:7px;height:7px;border-radius:50%;background:none;
  border:1.5px solid var(--color-accent);opacity:.45;transform-origin:50% 50%;
}
.spark--pips i.on{background:var(--color-accent);opacity:1}
.spark--pips i.gold{border-color:var(--color-accent-2);background:var(--color-accent-2)}
.sec:hover .spark i,.sec[open] .spark i{opacity:1}
.spark i{transition:opacity .3s ease}

/* the bars/pips grow as their card scrolls into view, staggered left to right.
   Scroll-driven only — with no support they are simply already drawn. */
@supports (animation-timeline:view()){
  .spark i{animation:spark-in linear both;animation-timeline:view();animation-range:entry 4% cover 16%}
  .spark i:nth-child(1){animation-range:entry 4% cover 10%}
  .spark i:nth-child(2){animation-range:entry 5% cover 11%}
  .spark i:nth-child(3){animation-range:entry 6% cover 12%}
  .spark i:nth-child(4){animation-range:entry 7% cover 13%}
  .spark i:nth-child(5){animation-range:entry 8% cover 14%}
  .spark i:nth-child(6){animation-range:entry 9% cover 15%}
  .spark i:nth-child(7){animation-range:entry 10% cover 16%}
  .spark i:nth-child(8){animation-range:entry 11% cover 17%}
  .spark i:nth-child(9){animation-range:entry 12% cover 18%}
  @keyframes spark-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .spark--pips i{animation-name:pip-in}
  @keyframes pip-in{from{transform:scale(0)}to{transform:scale(1)}}

  /* each card rises as it enters */
  .sec{animation:card-in linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes card-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* opening a card fades its panel in rather than snapping it */
@supports (interpolate-size:allow-keywords){
  .sec[open]>.sec-body{opacity:1;transform:none;transition:opacity .34s var(--ease) .05s,transform .34s var(--ease) .05s}
  @starting-style{ .sec[open]>.sec-body{opacity:0;transform:translateY(8px)} }
}