/* ═══════════════════════════════════════════════════════════
   MATERIAL EVIDENCE — multi-page additions
   Loaded after site.css. Same vocabulary: hairlines, serial
   plates, gold only ever as a filled block.
   ═══════════════════════════════════════════════════════════ */

/* ── page header: the section index numeral becomes a file plate ── */
.pgh{padding-top:calc(var(--nav) + clamp(30px,5vw,66px));padding-bottom:clamp(26px,3.6vw,50px);border-bottom:var(--bord) solid var(--line)}
.crumb{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);margin-bottom:clamp(18px,2.6vw,32px);font-variation-settings:normal}
.crumb a{transition:color .25s}
.crumb a:hover{color:var(--tx)}
.crumb i{font-style:normal;opacity:.5}
.plate{display:inline-block;background:var(--acid);color:var(--on-acid);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.15em;padding:5px 9px;margin-bottom:16px;font-variation-settings:normal}
.pgh h1{font-size:clamp(2.1rem,6vw,5.2rem)}
.pgh .lead{margin-top:clamp(16px,2vw,26px)}
.pgh-r{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(20px,2.6vw,32px);border:var(--bord) solid var(--line2);width:max-content;max-width:100%}
.pgh-r div{border-right:var(--bord) solid var(--line2);padding:12px 18px}
.pgh-r div:last-child{border-right:0}
.pgh-r span{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin-bottom:3px;font-variation-settings:normal}
.pgh-r b{font-size:1.15rem;font-variation-settings:'wght' 750,'wdth' 82;letter-spacing:-.02em}

/* ── filter bar ── */
.fb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:0;border:var(--bord) solid var(--line);width:max-content;max-width:100%;margin-bottom:clamp(22px,3vw,36px)}
.fb-bar button{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;padding:11px 15px;border-right:var(--bord) solid var(--line);color:var(--tx3);transition:background .25s,color .25s;font-variation-settings:normal}
.fb-bar button:last-of-type{border-right:0}
.fb-bar button:hover{color:var(--tx)}
.fb-bar button.on{background:var(--acid);color:var(--on-acid);font-weight:700}
.off{display:none !important}

/* ── generic card grid (press, writing, media, awards) ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));border-top:var(--bord) solid var(--line);border-left:var(--bord) solid var(--line)}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr))}
.card{border-right:var(--bord) solid var(--line);border-bottom:var(--bord) solid var(--line);padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px;position:relative;transition:background .3s,color .3s;min-height:200px}
a.card:hover{background:var(--acid);color:var(--on-acid)}
a.card:hover .mono,a.card:hover .card-d,a.card:hover .card-m{color:var(--on-acid)}
a.card:hover .card-go{opacity:1;transform:none}
.card-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:var(--acid);color:var(--on-acid);padding:3px 7px;align-self:flex-start;font-weight:700;font-variation-settings:normal}
a.card:hover .card-k{background:var(--on-acid);color:var(--acid)}
.card h3{font-size:clamp(1.02rem,1.35vw,1.22rem);font-variation-settings:'wght' 600;line-height:1.28;letter-spacing:-.015em}
.card-d{font-size:14.5px;color:var(--tx2);line-height:1.6;flex:1}
.card-m{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--tx2);padding-top:12px;border-top:var(--bord) solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-variation-settings:normal}
a.card:hover .card-m{border-top-color:var(--on-acid)}
.card-go{position:absolute;top:18px;right:18px;width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;opacity:0;transform:translate(-4px,4px);transition:.3s var(--e)}
.card.has-img{padding:0}
.card.has-img .ph{aspect-ratio:16/9;border:0;border-bottom:var(--bord) solid var(--line)}
.card.has-img .card-b{padding:clamp(16px,1.8vw,22px);display:flex;flex-direction:column;gap:9px;flex:1}

/* ── dossier (patent / product detail) ── */
.dos{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:start}
.dos-fig{position:relative;border:var(--bord) solid var(--line2);background:var(--bg2);overflow:hidden}
.dos-fig img{width:100%;height:auto;display:block;filter:grayscale(.2) contrast(1.05);transition:filter .7s var(--e)}
.dos-fig:hover img{filter:none}
.dos-fig .rule{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--acid);z-index:2}
.dos-cap{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--tx3);margin-top:10px;display:flex;justify-content:space-between;gap:12px;font-variation-settings:normal}
.dos p{color:var(--tx2);line-height:1.72;font-size:clamp(.96rem,1.1vw,1.04rem);margin-bottom:18px}
.dos p.first{font-size:clamp(1.12rem,1.5vw,1.4rem);color:var(--tx);line-height:1.44;font-variation-settings:'wght' 420}
.spec3{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--bord) solid var(--line);border-left:var(--bord) solid var(--line);margin-top:26px}
.spec3 div{border-right:var(--bord) solid var(--line);border-bottom:var(--bord) solid var(--line);padding:13px 15px}
.spec3 span{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--tx2);margin-bottom:5px;font-variation-settings:normal}
.spec3 b{font-size:15px;font-variation-settings:'wght' 620}
@media(max-width:900px){.dos{grid-template-columns:minmax(0,1fr)}.spec3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ── certificate / scan frame — the literal material evidence ── */
.cert{border:var(--bord) solid var(--line2);background:var(--bg2);padding:clamp(10px,1.4vw,18px);position:relative;display:block}
.cert img{width:100%;height:auto;display:block;filter:contrast(1.04)}
.cert .tagn{position:absolute;z-index:3;top:0;left:0;background:var(--acid);color:var(--on-acid);font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;padding:4px 8px;font-variation-settings:normal}
.cert-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:9px}
.cert-g .cert{padding:6px}
.cert-g .cert img{aspect-ratio:3/4;object-fit:cover;object-position:50% 12%}

/* ── trophy row (Doctor's Award, one per year) ── */
.tro{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tro figure{position:relative;border:var(--bord) solid var(--line);background:var(--bg2);aspect-ratio:3/4;overflow:hidden}
.tro img{width:100%;height:100%;object-fit:cover;filter:grayscale(.75) contrast(1.1);transition:filter .7s var(--e),transform 1.1s var(--e)}
.tro figure:hover img{filter:none;transform:scale(1.03)}
.tro figcaption{position:absolute;bottom:0;left:0;right:0;z-index:2;background:var(--acid);color:var(--on-acid);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.11em;padding:5px 8px;text-align:center;font-variation-settings:normal}
@media(max-width:700px){.tro{grid-template-columns:repeat(2,1fr)}}

/* ── article body (writing detail pages) ── */
.art{max-width:70ch;margin-inline:auto}
.art p{font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.78;color:var(--tx2);margin-bottom:22px}
.art p.lede{font-size:clamp(1.2rem,1.75vw,1.62rem);line-height:1.46;color:var(--tx);font-variation-settings:'wght' 400;margin-bottom:32px;padding-bottom:26px;border-bottom:var(--bord) solid var(--line)}
.art h2{font-family:var(--flex);font-size:clamp(1.25rem,2vw,1.6rem);font-variation-settings:'wght' 650,'wdth' 95;letter-spacing:-.02em;line-height:1.2;margin:40px 0 16px}
.art ul{margin:0 0 22px 0;padding:0;list-style:none}
.art ul li{position:relative;padding-left:22px;margin-bottom:10px;color:var(--tx2);line-height:1.65}
.art ul li::before{content:'';position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--acid)}
.art blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.4;color:var(--tx);border-left:3px solid var(--acid);padding-left:clamp(16px,2vw,26px);margin:32px 0}
.art-meta{display:flex;flex-wrap:wrap;gap:0;border:var(--bord) solid var(--line);width:max-content;max-width:100%;margin-bottom:clamp(26px,3.4vw,42px)}
.art-meta div{border-right:var(--bord) solid var(--line);padding:11px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--tx2);font-variation-settings:normal}
.art-meta div:last-child{border-right:0}
.art-meta b{color:var(--tx);font-weight:700}
.src{margin-top:clamp(36px,4vw,56px);padding-top:22px;border-top:var(--bord) solid var(--line2);font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--tx2);line-height:1.9;font-variation-settings:normal}
.src a{border-bottom:1px solid var(--line2);transition:color .25s,border-color .25s}
.src code{overflow-wrap:anywhere;word-break:break-word}
.src a:hover{color:var(--acid);border-color:var(--acid)}
html[data-theme="paper"] .src a:hover{color:var(--tx);border-color:var(--tx)}

/* ── prev / next ── */
.xnav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:var(--bord) solid var(--line);border-left:var(--bord) solid var(--line);margin-top:clamp(40px,5vw,72px)}
.xnav a{border-right:var(--bord) solid var(--line);border-bottom:var(--bord) solid var(--line);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:8px;transition:background .3s,color .3s}
.xnav a:hover{background:var(--acid);color:var(--on-acid);--tx:var(--on-acid)}
.xnav a:hover .mono{color:var(--on-acid)}
.xnav a.nxt{text-align:right;align-items:flex-end}
.xnav b{font-size:clamp(1.05rem,1.5vw,1.3rem);font-variation-settings:'wght' 620,'wdth' 95;letter-spacing:-.015em;line-height:1.2}
@media(max-width:700px){.xnav{grid-template-columns:minmax(0,1fr)}.xnav a.nxt{text-align:left;align-items:flex-start}}

/* ── "see all" exit from a home section ── */
.exit{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--line2);padding:13px 20px;margin-top:clamp(24px,3vw,38px);transition:background .25s,color .25s,border-color .25s;font-variation-settings:normal}
.exit:hover{background:var(--acid);color:var(--on-acid);border-color:var(--acid)}
.exit svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.hd-x{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--line2);padding-bottom:3px;transition:color .25s,border-color .25s;white-space:nowrap;font-variation-settings:normal}
.hd-x:hover{color:var(--acid);border-color:var(--acid)}
html[data-theme="paper"] .hd-x:hover{color:var(--tx);border-color:var(--tx)}

/* ── compact reference table (credentials, memberships, languages) ── */
.tbl{border-top:var(--bord) solid var(--line)}
.tbl .r{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:clamp(12px,2vw,26px);align-items:baseline;padding:13px 0;border-bottom:var(--bord) solid var(--line);transition:background .3s,padding-inline .35s var(--e)}
.tbl .r:hover{background:var(--bg2);padding-inline:10px}
.tbl .y{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--tx2);letter-spacing:.05em;font-variation-settings:normal}
.tbl b{font-size:15.5px;font-variation-settings:'wght' 550;line-height:1.35}
.tbl .o{display:block;font-family:var(--mono);font-size:12.5px;color:var(--tx2);letter-spacing:.04em;line-height:1.6;margin-top:3px;font-variation-settings:normal}
.tbl .v{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--tx3);white-space:nowrap;text-align:right;font-variation-settings:normal}
@media(max-width:700px){.tbl .r{grid-template-columns:minmax(0,1fr);gap:5px}.tbl .v{text-align:left}}

/* ── video placeholder — swapped for a YouTube embed once URLs exist ── */
.vid{position:relative;aspect-ratio:16/9;border:var(--bord) solid var(--line2);background:var(--bg2);display:grid;place-items:center;overflow:hidden}
.vid::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent 0 11px,var(--line) 11px 12px);opacity:.5}
.vid-in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:13px;padding:20px}
.vid-p{width:60px;height:60px;border:1px solid var(--line2);display:grid;place-items:center;transition:background .3s,border-color .3s}
.vid-p svg{width:17px;height:17px;fill:var(--tx);stroke:none;margin-left:3px;transition:fill .3s}
.vid.ready{cursor:pointer}
.vid.ready:hover .vid-p{background:var(--acid);border-color:var(--acid)}
.vid.ready:hover .vid-p svg{fill:var(--on-acid)}
.vid-t{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--tx3);line-height:1.8;max-width:34ch;font-variation-settings:normal}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

/* ── sample / to-collect testimonial ── */
.qs article{position:relative}
.qs .sample{border-style:dashed;border-color:var(--line2)}
.qs .sample blockquote{color:var(--tx2)}
.qs .sample .by b{color:var(--tx2)}
.smp{position:absolute;top:0;right:0;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;background:var(--line2);color:var(--bg);padding:3px 7px;font-variation-settings:normal}

/* ── lightbox ── */
.lb{position:fixed;inset:0;z-index:9995;background:color-mix(in srgb,var(--bg) 94%,transparent);display:none;place-items:center;padding:clamp(20px,5vw,64px)}
.lb.on{display:grid}
.lb figure{max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.lb img{max-width:100%;max-height:82vh;object-fit:contain;border:var(--bord) solid var(--line2);background:var(--bg2)}
.lb figcaption{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);text-align:center;font-variation-settings:normal}
.lb-x{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);width:44px;height:44px;border:1px solid var(--line2);display:grid;place-items:center;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.lb-x:hover{background:var(--acid);color:var(--on-acid);border-color:var(--acid)}

/* ── two-column split used by /about and /impact ── */
.split{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,4vw,70px);align-items:start}
.split-l{position:sticky;top:calc(var(--nav) + 28px);align-self:start}
@media(max-width:1000px){.split{grid-template-columns:minmax(0,1fr)}.split-l{position:static}}

/* ── sub-section rule inside a page ── */
.sub{margin-top:clamp(48px,6vw,88px);padding-bottom:16px;border-bottom:var(--bord) solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,34px)}
.sub h2{font-size:clamp(1.3rem,2.4vw,2.1rem);font-variation-settings:'wght' 700,'wdth' 90;text-transform:uppercase;letter-spacing:-.025em;line-height:1}
.sub .n{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--tx3);font-variation-settings:normal}

/* ── drawer nav gets more entries now; keep it scrollable on short screens ── */
.dw{overflow-y:auto}
.dw a{font-size:clamp(1.25rem,4.6vw,2.2rem);padding:8px 0}

/* ── footer sitemap — the primary nav carries seven, the footer carries all ── */
.fmap{display:flex;flex-wrap:wrap;gap:0;border-top:var(--bord) solid var(--line);border-left:var(--bord) solid var(--line);margin-bottom:clamp(26px,3.4vw,44px)}
.fmap a{flex:1 1 clamp(120px,14%,200px);border-right:var(--bord) solid var(--line);border-bottom:var(--bord) solid var(--line);padding:14px 16px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);transition:background .25s,color .25s;font-variation-settings:normal}
.fmap a:hover{background:var(--acid);color:var(--on-acid)}
/* the current page reads as a filled gold block, same as the hover state —
   the accent is only ever used as a block, never as a hairline. */
.fmap a[aria-current]{background:var(--acid);color:var(--on-acid);font-weight:700}

/* ── footer signature: the wordmark keeps its scale, the credential sits under it
      in the mono voice — the same pairing as the header logo (ALIREZALOO / PhD). ── */
.fsig{margin-bottom:clamp(26px,3.6vw,46px)}
.fsig .fbig{margin-bottom:0}
.fsig-c{margin-top:12px;padding-top:13px;border-top:var(--bord) solid var(--line);
  font-family:var(--mono);font-size:clamp(11.5px,1.05vw,13px);font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tx2);line-height:1.7;font-variation-settings:normal}
.fsig-c span{color:var(--tx3);padding-inline:2px}
@media(max-width:600px){
  .fsig-c{letter-spacing:.13em}
}

/* ── wrapping chip strips ───────────────────────────────────────────────
   These are built as "one border-right per child, none on the last" inside a
   fully-bordered box. That only holds while they stay on ONE line. On narrow
   screens they wrap, and then the last child of every row but the last leaves a
   dangling vertical rule while the final row trails off into empty space.
   Below 760px they switch to the lattice model used everywhere else on the site:
   top+left on the container, right+bottom on EVERY child, children stretching to
   fill their row. ────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .acts,.pgh-r{
    width:100%;border:0;
    border-top:var(--bord) solid var(--line2);
    border-left:var(--bord) solid var(--line2);
  }
  .acts>a,.pgh-r>div{
    flex:1 1 auto;
    border-right:var(--bord) solid var(--line2);
    border-bottom:var(--bord) solid var(--line2);
  }
  .acts>a{justify-content:space-between;padding:16px 18px}
  /* the single-line rules in site.css drop the last child's right border and win
     on specificity — put it back, it is now the container's right edge */
  .acts>a:last-child,.pgh-r>div:last-child{border-right:var(--bord) solid var(--line2)}

  .tms,.prs,.fb-bar,.art-meta{
    width:100%;border:0;
    border-top:var(--bord) solid var(--line);
    border-left:var(--bord) solid var(--line);
  }
  .tms>span,.prs>span,.fb-bar>button,.art-meta>div{
    flex:1 1 auto;
    border-right:var(--bord) solid var(--line);
    border-bottom:var(--bord) solid var(--line);
  }
  .tms>span:last-child,.prs>span:last-child,
  .fb-bar>button:last-of-type,.art-meta>div:last-child{
    border-right:var(--bord) solid var(--line);
  }
}

/* ── a wide figure inside the 2-up .figs grid spans both columns ── */
.figs .ph.wide{grid-column:1 / -1;aspect-ratio:1920/900}
.figs .ph.wide img{object-position:50% 62%}
@media(max-width:520px){.figs{grid-template-columns:minmax(0,1fr)}.figs .ph{aspect-ratio:4/3}}

/* ── registered trademark marks ── */
.marks-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:9px;margin-bottom:clamp(22px,3vw,34px)}
.mark{border:var(--bord) solid var(--line);background:var(--bg2);padding:clamp(14px,2vw,22px);display:flex;flex-direction:column;gap:14px;align-items:center;transition:border-color .3s}
.mark:hover{border-color:var(--acid)}
.mark img{width:100%;height:auto;max-height:120px;object-fit:contain;filter:grayscale(1) contrast(1.1);transition:filter .6s var(--e)}
.mark:hover img{filter:none}
.mark figcaption{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--tx3);text-align:center;line-height:1.6;font-variation-settings:normal}

/* ── Contact promoted out of the drawer: it is the only call to action ── */
.ct-btn{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  background:var(--acid);color:var(--on-acid);padding:9px 14px;font-weight:700;
  transition:filter .25s;font-variation-settings:normal}
.ct-btn:hover{filter:brightness(1.1)}
@media(max-width:560px){.ct-btn{display:none}}

/* ── the drawer is now reachable at every width, so mark where you are ── */
.dw a[aria-current]{color:var(--acid)}
/* the accent only carries on the dark ground - 9.9:1 on ink, 1.5:1 on paper -
   so the light theme keeps a tinted row and a --tx rule instead of gold text. */
html[data-theme="paper"] .dw a[aria-current]{color:var(--tx);background:var(--bg2);
  box-shadow:inset 3px 0 0 var(--tx);padding-left:14px}
/* .dw a:hover and .dw a[aria-current] tie on specificity and pages.css loads last,
   so without this the current row loses its hover block. */
.dw a[aria-current]:hover{background:var(--acid);color:var(--on-acid);padding-left:14px}
.dw-h{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx3);padding-bottom:14px;border-bottom:var(--bord) solid var(--line2);margin-bottom:6px;font-variation-settings:normal}

/* the drawer is fixed inset:0 and so ran full-bleed while the header sits inside
   .wrap (max-width 1560, centred) — at 2000px they were 213px out of line.
   Match the wrap gutter so the index lines up with the logo above it. */
.dw{padding-inline:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)))}