@font-face {
  font-family: "Thmanyah Sans";
  src: url("/fonts/thmanyah-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* Final Cloudflare edition: CV, misc, contact and durable responsive layout */
.cv-document-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.cv-document-card > img {
  display: block;
  width: 132px;
  aspect-ratio: 1 / 1.414;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
}
.cv-document-card small { color: var(--accent); }
.cv-document-card h2 { margin: 5px 0 7px; font-size: var(--type-card); }
.cv-document-card p { margin: 0 0 14px; color: var(--muted); line-height: 1.7; }
.cv-document-card > div > div { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-document-card a,
.resource-link,
.book-link,
.lecture-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: var(--type-control);
  font-weight: 700;
  text-decoration: none;
}
.cv-document-card a:first-child { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.pending-link { color: var(--muted); font-size: var(--type-small); font-weight: 400; }

.misc-grid,
.contact-grid {
  width: min(1180px, calc(100% - 64px));
  margin: 0 auto;
  padding: 34px 0 58px;
}
.misc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.misc-card {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.misc-card > div { min-height: 72px; padding: 5px 4px 12px; }
.misc-card small { color: var(--accent); }
.misc-card h2 { margin: 5px 0 0; font-size: var(--type-card); line-height: 1.45; }
.misc-image-button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.misc-image-button img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); }
.image-modal {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
}
.image-modal img { max-width: min(980px, 92vw); max-height: 86vh; object-fit: contain; background: var(--bg); }
.image-modal .modal-close { position: fixed; top: 18px; left: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg); color: var(--ink); font-size: 25px; }
.modal-open { overflow: hidden; }

.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-grid > a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
}
.contact-grid > a:hover { border-color: var(--accent); }
.contact-grid > a > span { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-size: 20px; }
.contact-grid small { color: var(--muted); }
.contact-grid h2 { margin: 4px 0 0; font-size: var(--type-card); overflow-wrap: anywhere; }
.contact-grid > a > b { color: var(--accent); }

.section-portals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-header nav { flex-wrap: wrap; justify-content: center; }
.static-modal .modal-source { display: inline-flex; margin-top: 14px; color: var(--accent); font-weight: 700; }

@media (max-width: 1100px) {
  .site-header nav { flex-wrap: nowrap; justify-content: initial; }
}
@media (max-width: 760px) {
  .cv-document-card { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 13px; }
  .cv-document-card > img { width: 92px; }
  .cv-document-card p { display: none; }
  .cv-document-card a { min-height: 34px; padding: 7px 9px; }
  .misc-grid,
  .contact-grid { width: calc(100% - 36px); padding: 22px 0 38px; }
  .misc-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 10px; }
  .misc-card > div { min-height: auto; padding-bottom: 10px; }
  .contact-grid > a { min-height: 88px; padding: 13px; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 10px; }
  .contact-grid > a > span { width: 44px; height: 44px; }
  .section-portals { grid-template-columns: 1fr; }
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("/fonts/thmanyah-sans-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Sans";
  src: url("/fonts/thmanyah-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Thmanyah Display";
  src: url("/fonts/thmanyah-display-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-sans: "Thmanyah Sans", "Tahoma", sans-serif;
  --font-display: "Thmanyah Display", "Thmanyah Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-sans); }
body.modal-open { overflow: hidden; }
button, input, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Design gallery */
.design-gallery {
  min-height: 100vh;
  background: #f5f1e9;
  color: #201c19;
  padding: 34px clamp(20px, 5vw, 76px) 28px;
}
.gallery-head {
  max-width: 1440px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #d8d0c4;
  padding-bottom: 24px;
}
.gallery-mark {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #711d2a;
  color: #fff8ed;
  font-family: var(--font-display);
  font-size: 23px;
}
.gallery-head p { margin: 0 0 2px; color: #7c746b; font-size: 12px; }
.gallery-head h1 { margin: 0; font-size: 18px; font-weight: 700; }
.gallery-admin-link {
  margin-inline-start: auto;
  padding: 10px 15px;
  border: 1px solid #d8d0c4;
  color: #711d2a;
  font-size: 12px;
  font-weight: 700;
}
.gallery-intro { max-width: 780px; margin: 76px auto 56px; text-align: center; }
.gallery-intro .eyebrow {
  display: inline-flex;
  margin: 0 0 14px;
  color: #8d2637;
  font-size: 13px;
  font-weight: 700;
}
.gallery-intro h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.15;
  margin: 0 0 19px;
}
.gallery-intro > p:last-child { color: #6c645d; font-size: 17px; line-height: 1.8; max-width: 650px; margin: auto; }
.gallery-grid {
  max-width: 1380px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.gallery-card {
  display: block;
  background: #fff;
  border: 1px solid rgba(35, 29, 24, .1);
  padding: 12px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.gallery-card:hover { transform: translateY(-6px); box-shadow: 0 26px 70px rgba(42, 30, 24, .13); }
.gallery-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 16px); width: 100%; margin: auto; }
.mini-site { height: 330px; background: var(--preview-bg); position: relative; overflow: hidden; color: var(--preview-ink); }
.mini-site span { display: block; position: absolute; }
.mini-nav { top: 9%; right: 7%; left: 7%; height: 5px; border-top: 2px solid var(--preview-line); border-bottom: 2px solid var(--preview-line); opacity: .75; }
.mini-photo { width: 29%; height: 63%; left: 10%; top: 19%; background: linear-gradient(145deg, var(--preview-accent), var(--preview-muted)); border-radius: var(--preview-radius); }
.mini-title { width: 38%; height: 42px; right: 9%; top: 28%; background: var(--preview-ink); clip-path: polygon(0 0, 100% 0, 100% 38%, 18% 38%, 18% 60%, 100% 60%, 100% 100%, 0 100%); }
.mini-text { width: 35%; height: 26px; right: 9%; top: 48%; border-top: 3px solid var(--preview-line); border-bottom: 3px solid var(--preview-line); opacity: .65; }
.mini-button { width: 18%; height: 28px; right: 9%; top: 61%; background: var(--preview-accent); border-radius: var(--preview-button-radius); }
.mini-card { width: 21%; height: 20%; bottom: -5%; background: var(--preview-card); border: 1px solid var(--preview-line); }
.mini-card.one { right: 25%; transform: rotate(2deg); }
.mini-card.two { right: 48%; transform: rotate(-2deg); }
.gallery-card-copy { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 19px 10px 8px; }
.gallery-card-copy > span { font-size: 13px; color: #8c8278; }
.gallery-card-copy h3 { margin: 0; font-size: 21px; }
.gallery-card-copy p { margin: 5px 0 0; color: #756c64; font-size: 13px; }
.gallery-card-copy b { font-size: 22px; transition: transform .2s ease; }
.gallery-card:hover .gallery-card-copy b { transform: translateX(-5px); }
.preview-heritage { --preview-bg:#eee4d1; --preview-ink:#4a1821; --preview-line:#976f52; --preview-accent:#7b2330; --preview-muted:#d4b990; --preview-card:#f8f2e8; --preview-radius:100px 100px 0 0; --preview-button-radius:0; }
.preview-modern { --preview-bg:#edf3f7; --preview-ink:#102f47; --preview-line:#6f8798; --preview-accent:#ee6948; --preview-muted:#b7d2df; --preview-card:#fff; --preview-radius:12px; --preview-button-radius:5px; }
.preview-pearl { --preview-bg:#edf5f2; --preview-ink:#143d3b; --preview-line:#78a49c; --preview-accent:#d77864; --preview-muted:#d9eee7; --preview-card:#fffdf7; --preview-radius:50%; --preview-button-radius:99px; }
.preview-editorial { --preview-bg:#f4f1e9; --preview-ink:#151515; --preview-line:#151515; --preview-accent:#c82a2a; --preview-muted:#d8d1c3; --preview-card:#fff; --preview-radius:0; --preview-button-radius:0; }
.preview-museum { --preview-bg:#15191a; --preview-ink:#e8dfcf; --preview-line:#8b7455; --preview-accent:#b18450; --preview-muted:#49473e; --preview-card:#222727; --preview-radius:160px 160px 10px 10px; --preview-button-radius:99px; }
.gallery-footer { max-width: 1380px; margin: 56px auto 0; border-top: 1px solid #d8d0c4; padding-top: 23px; color: #7c746b; text-align: center; font-size: 13px; }

/* Shared academic site */
.academic-site {
  --bg: #f7f2e8;
  --surface: #fffaf1;
  --ink: #281b1b;
  --muted: #736966;
  --accent: #782536;
  --accent-2: #a98b61;
  --line: rgba(64, 35, 36, .16);
  --soft: #eadfcd;
  --radius: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ink);
  background: var(--bg);
}
.prototype-bar {
  min-height: 38px;
  padding: 7px clamp(18px, 5vw, 70px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  letter-spacing: .01em;
}
.prototype-bar a { display: inline-flex; align-items: center; gap: 7px; }
.prototype-bar a svg { width: 15px; }
.site-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 74px);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 20;
  background: var(--bg);
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-family: var(--font-display);
  font-size: 22px;
}
.brand > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.brand b { font-size: 16px; }
.brand small { color: var(--muted); font-size: 10px; }
.site-header nav { display: flex; align-items: center; gap: clamp(19px, 2.5vw, 38px); }
.site-header nav a { color: var(--muted); font-size: 14px; position: relative; }
.site-header nav a::after {
  content: "";
  position: absolute;
  right: 0;
  left: 100%;
  bottom: -7px;
  height: 2px;
  background: var(--accent);
  transition: left .2s ease;
}
.site-header nav a:hover { color: var(--ink); }
.site-header nav a:hover::after { left: 0; }
.menu-button { display: none; width: 44px; height: 44px; background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-button span { width: 22px; height: 2px; background: var(--ink); }
.hero {
  min-height: 720px;
  position: relative;
  padding: clamp(60px, 8vw, 112px) clamp(20px, 7vw, 106px);
  display: grid;
  grid-template-columns: 1.08fr .72fr;
  gap: 7vw;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.hero-copy { position: relative; z-index: 2; }
.kicker {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::before { content: ""; width: 36px; height: 1px; background: currentColor; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(58px, 7.8vw, 118px);
  line-height: .92;
  letter-spacing: -.04em;
  margin: 0;
}
.hero h1 strong { color: var(--accent); font-weight: inherit; }
.hero-lead { max-width: 630px; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.9; margin: 34px 0 0; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 35px; }
.primary-action {
  min-height: 52px;
  padding: 13px 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--surface);
  border-radius: var(--radius);
  font-weight: 700;
  transition: transform .2s ease, opacity .2s ease;
}
.primary-action:hover { transform: translateY(-2px); opacity: .92; }
.text-action { font-weight: 700; border-bottom: 1px solid var(--line); padding: 13px 0 8px; }
.text-action span { display: inline-block; margin-right: 8px; transition: transform .2s ease; }
.text-action:hover span { transform: translateX(-4px); }
.hero-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.hero-roles span { border: 1px solid var(--line); padding: 7px 12px; color: var(--muted); font-size: 11px; border-radius: var(--radius); }
.portrait-wrap { position: relative; z-index: 1; justify-self: center; }
.portrait-frame {
  width: min(31vw, 430px);
  aspect-ratio: .72;
  overflow: hidden;
  background: var(--soft);
  border-radius: 48% 48% 3px 3px;
  border: 1px solid var(--line);
  position: relative;
}
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 15px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: inherit;
  pointer-events: none;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(.86) contrast(1.02); }
.portrait-label { position: absolute; left: -28px; bottom: 35px; padding: 10px 18px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; }
.hero-index { position: absolute; left: 5vw; bottom: 4vw; font-family: var(--font-display); color: var(--line); font-size: 90px; }
.hero-decoration { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-decoration span { position: absolute; border: 1px solid var(--line); border-radius: 50%; }
.hero-decoration span:nth-child(1) { width: 430px; height: 430px; left: -210px; top: -140px; }
.hero-decoration span:nth-child(2) { width: 230px; height: 230px; right: 46%; bottom: -150px; }
.hero-decoration span:nth-child(3) { width: 11px; height: 11px; background: var(--accent-2); border: 0; right: 5vw; top: 15%; }
.section-shell { padding: clamp(80px, 9vw, 145px) clamp(20px, 7vw, 106px); }
.section-heading { max-width: 800px; margin-bottom: 58px; }
.section-heading > span, .section-heading > div > span {
  display: block;
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 14px;
}
.section-heading h2, .contact h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 68px);
  line-height: 1.15;
  margin: 0;
}
.heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.heading-row > div { max-width: 780px; }
.heading-row .section-count { color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.about { background: var(--surface); }
.about-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; }
.about-lead { margin: 0; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.65; color: var(--ink); }
.academic-timeline article {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 6px 20px;
  padding: 0 0 27px;
  margin-bottom: 27px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.academic-timeline article:last-child { margin-bottom: 0; }
.academic-timeline b { grid-row: 1 / 3; font-size: 18px; color: var(--accent); }
.academic-timeline span { font-size: 17px; font-weight: 700; }
.academic-timeline small { color: var(--muted); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 80px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-row div { padding: 30px 24px; display: flex; flex-direction: column; gap: 5px; border-left: 1px solid var(--line); }
.stat-row div:last-child { border-left: 0; }
.stat-row strong { font-family: var(--font-display); color: var(--accent); font-size: 40px; }
.stat-row span { color: var(--muted); font-size: 12px; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.article-card {
  min-height: 430px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.article-card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(35, 24, 22, .08); }
.article-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.article-number { font-family: var(--font-display); font-size: 46px; color: var(--soft); margin-top: 40px; }
.article-card h3 { font-family: var(--font-display); font-size: 25px; line-height: 1.35; margin: 16px 0 14px; }
.article-card p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0; }
.article-card button {
  margin-top: auto;
  padding: 18px 0 0;
  background: transparent;
  color: var(--accent);
  border-top: 1px solid var(--line);
  text-align: right;
  font-weight: 700;
}
.article-card button span { float: left; }
.research { background: var(--ink); color: var(--bg); }
.research .section-heading > span { color: var(--accent-2); }
.research-list { border-top: 1px solid rgba(255,255,255,.18); }
.research-list article {
  min-height: 150px;
  display: grid;
  grid-template-columns: 60px 1fr 70px 48px;
  gap: 25px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.research-no { color: var(--accent-2); }
.research-list p { color: var(--accent-2); font-size: 11px; margin: 0 0 8px; }
.research-list h3 { font-size: clamp(18px, 2vw, 27px); margin: 0; font-weight: 500; }
.research-list time { color: rgba(255,255,255,.5); }
.research-list button { width: 44px; height: 44px; border-radius: 50%; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.25); }
.research-list article:hover button { background: var(--accent-2); color: var(--ink); }
.research-note { color: rgba(255,255,255,.55); font-size: 12px; margin: 28px 0 0; }
.books { background: var(--surface); }
.books-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px; }
.book-card { min-height: 460px; display: grid; grid-template-columns: .8fr 1.2fr; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.book-cover { margin: 27px; padding: 30px 24px; min-height: 390px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: -12px 15px 30px rgba(0,0,0,.16); position: relative; overflow: hidden; }
.book-cover::before { content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid currentColor; border-radius: 50%; left: -65px; top: 25%; opacity: .25; }
.book-cover small, .book-cover span, .book-cover b { position: relative; z-index: 1; }
.book-cover span { font-family: var(--font-display); font-size: 29px; line-height: 1.2; }
.book-cover i { width: 50px; height: 1px; background: currentColor; }
.cover-1 { background: #5a2630; color: #f1dec1; }
.cover-2 { background: #173c42; color: #f2e4c8; }
.book-info { padding: 45px 35px 35px; display: flex; flex-direction: column; }
.book-info > span { color: var(--accent); font-size: 11px; }
.book-info h3 { font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.35; margin: 26px 0 15px; }
.book-info p { color: var(--muted); margin: 0; }
.book-info button { margin-top: auto; background: transparent; color: var(--accent); padding-top: 20px; border-top: 1px solid var(--line); text-align: right; font-weight: 700; }
.book-info button span { float: left; }
.contact {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 8vw;
  align-items: end;
  background: var(--soft);
}
.contact-kicker { color: var(--accent); font-weight: 700; font-size: 12px; }
.contact h2 { max-width: 730px; margin-top: 16px; }
.email-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; direction: ltr; font-weight: 700; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.social-links { display: grid; gap: 10px; }
.social-links a { min-height: 68px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--line); background: rgba(255,255,255,.2); }
.social-links a:hover { background: var(--surface); }
.social-links span { font-weight: 700; }
.social-links small { color: var(--muted); }
.site-footer { min-height: 130px; padding: 30px clamp(20px, 5vw, 74px); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--ink); color: var(--bg); }
.site-footer .brand small { color: rgba(255,255,255,.55); }
.site-footer p { color: rgba(255,255,255,.45); font-size: 11px; }
.site-footer > a { font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 4px; }
.article-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(17, 15, 14, .72);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: 20px;
}
.article-modal > article {
  width: min(680px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: clamp(32px, 6vw, 64px);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  position: relative;
  box-shadow: 0 30px 100px rgba(0,0,0,.25);
}
.modal-close { position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 24px; }
.article-modal article > span { color: var(--accent); font-size: 12px; }
.article-modal h2 { font-family: var(--font-display); font-size: clamp(31px, 5vw, 52px); line-height: 1.25; margin: 23px 0; }
.article-modal p { color: var(--muted); font-size: 17px; line-height: 2; }
.modal-done { margin-top: 15px; background: var(--accent); color: var(--surface); padding: 13px 26px; border-radius: var(--radius); }

/* 1 — Heritage */
.design-1 {
  --bg: #f2eadb;
  --surface: #fbf7ef;
  --ink: #2b2020;
  --muted: #756863;
  --accent: #762438;
  --accent-2: #c6a46e;
  --line: rgba(91, 56, 50, .18);
  --soft: #e4d6bf;
}
.design-1 .site-header { border-top: 4px solid var(--accent); }
.design-1 .hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 28px, transparent 28px 38px);
}
.design-1 .section-heading h2 { max-width: 760px; }
.design-1 .article-card:nth-child(2) { margin-top: 45px; }
.design-1 .article-card:nth-child(3) { margin-top: 90px; }

/* 2 — Modern research */
.design-2 {
  --bg: #eef4f7;
  --surface: #ffffff;
  --ink: #102d42;
  --muted: #5e7482;
  --accent: #e45e40;
  --accent-2: #7cc0d4;
  --line: rgba(22, 55, 75, .14);
  --soft: #dcebf0;
  --radius: 9px;
}
.design-2 .prototype-bar { background: #e45e40; }
.design-2 .site-header { min-height: 76px; }
.design-2 .brand-mark { border-radius: 9px; transform: rotate(-3deg); }
.design-2 .hero {
  min-height: 680px;
  background-image: linear-gradient(rgba(19, 58, 82, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(19, 58, 82, .055) 1px, transparent 1px);
  background-size: 45px 45px;
}
.design-2 .hero { grid-template-columns: 1fr .7fr; }
.design-2 .hero h1 { font-family: var(--font-sans); letter-spacing: -.06em; font-weight: 700; }
.design-2 .hero h1 strong { background: linear-gradient(90deg, var(--accent), #ef8658); -webkit-background-clip: text; color: transparent; }
.design-2 .portrait-frame { border-radius: 20px; transform: rotate(2deg); box-shadow: 22px 22px 0 var(--accent-2); }
.design-2 .portrait-label { border-radius: 7px; left: -20px; }
.design-2 .hero-index { color: rgba(16,45,66,.08); font-family: var(--font-sans); font-weight: 700; }
.design-2 .section-heading h2, .design-2 .contact h2 { font-family: var(--font-sans); letter-spacing: -.04em; }
.design-2 .about-grid { grid-template-columns: 1fr 1fr; }
.design-2 .academic-timeline article { padding: 23px; margin: 0 0 10px; border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius); }
.design-2 .article-grid { gap: 22px; }
.design-2 .article-card { border: 0; box-shadow: 0 10px 40px rgba(25, 62, 80, .07); }
.design-2 .article-number { color: var(--accent-2); }
.design-2 .research { background: #12374f; }
.design-2 .research-list article { padding: 0 22px; border-radius: 8px; margin-bottom: 8px; background: rgba(255,255,255,.045); border: 0; }
.design-2 .book-card { border: 0; box-shadow: 0 12px 50px rgba(25,62,80,.08); }
.design-2 .social-links a { border-radius: var(--radius); }

/* 3 — Pearl */
.design-3 {
  --bg: #f4f8f5;
  --surface: #fffef9;
  --ink: #153e3d;
  --muted: #627b77;
  --accent: #ce6d59;
  --accent-2: #e2c47c;
  --line: rgba(34, 90, 84, .14);
  --soft: #dbece5;
  --radius: 28px;
}
.design-3 .prototype-bar { background: #153e3d; }
.design-3 .brand-mark { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.design-3 .site-header { margin: 18px clamp(16px,4vw,52px) 0; border: 1px solid var(--line); border-radius: 99px; min-height: 72px; background: rgba(255,254,249,.78); backdrop-filter: blur(15px); }
.design-3 .hero { min-height: 760px; border-bottom: 0; }
.design-3 .hero::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  left: -190px;
  top: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 7%, #dff2eb 28%, #badad1 55%, transparent 56%);
  opacity: .7;
}
.design-3 .kicker::before { width: 8px; height: 8px; border-radius: 50%; }
.design-3 .hero h1 { line-height: 1; }
.design-3 .portrait-frame { width: min(32vw, 450px); aspect-ratio: 1; border-radius: 50%; border: 12px solid var(--surface); box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(28,72,67,.14); }
.design-3 .portrait-frame::after { border-radius: 50%; inset: 8px; }
.design-3 .portrait-frame img { object-position: center 7%; transform: scale(1.03); }
.design-3 .portrait-label { left: 50%; transform: translateX(-50%); bottom: -17px; border-radius: 99px; white-space: nowrap; }
.design-3 .hero-index { display: none; }
.design-3 .hero-decoration span:nth-child(1) { width: 14px; height: 14px; left: 47%; top: 18%; background: var(--accent); border: 0; }
.design-3 .about { border-radius: 70px 70px 0 0; }
.design-3 .stat-row { gap: 12px; border: 0; }
.design-3 .stat-row div { border: 1px solid var(--line); border-radius: 22px; background: var(--bg); text-align: center; }
.design-3 .article-card { border: 0; box-shadow: 0 16px 45px rgba(28,72,67,.07); }
.design-3 .article-card:nth-child(2) { background: var(--soft); }
.design-3 .article-number { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 20px; }
.design-3 .article-card:nth-child(2) .article-number { background: var(--surface); }
.design-3 .research { background: #164541; border-radius: 70px 70px 0 0; }
.design-3 .research-list article { margin-bottom: 12px; padding: 0 25px; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; }
.design-3 .book-card { border-radius: 34px; }
.design-3 .book-cover { border-radius: 23px; }
.design-3 .contact { border-radius: 70px 70px 0 0; }
.design-3 .social-links a { border-radius: 20px; }

/* 4 — Editorial */
.design-4 {
  --bg: #f2efe7;
  --surface: #fff;
  --ink: #111;
  --muted: #5c5b58;
  --accent: #c7272b;
  --accent-2: #e9cc55;
  --line: rgba(0,0,0,.22);
  --soft: #ddd6ca;
  --radius: 0;
}
.design-4 .prototype-bar { background: var(--accent); font-weight: 700; }
.design-4 .site-header { border-top: 7px solid var(--ink); border-bottom: 3px solid var(--ink); }
.design-4 .brand-mark { border-radius: 0; }
.design-4 .site-header nav a { color: var(--ink); font-weight: 700; }
.design-4 .hero {
  min-height: 690px;
  grid-template-columns: 1.15fr .55fr;
  border-bottom: 5px solid var(--ink);
}
.design-4 .hero::before {
  content: "التاريخ • الهوية • المجتمع •";
  position: absolute;
  left: -20px;
  bottom: 90px;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .15em;
}
.design-4 .hero h1 { font-size: clamp(65px, 9.2vw, 136px); line-height: .84; }
.design-4 .hero h1 strong { color: var(--ink); text-decoration: underline var(--accent) 8px; text-underline-offset: 10px; }
.design-4 .kicker { background: var(--accent-2); color: var(--ink); width: fit-content; padding: 8px 12px; transform: rotate(-1deg); }
.design-4 .kicker::before { display: none; }
.design-4 .portrait-frame { border-radius: 0; border: 4px solid var(--ink); box-shadow: 17px 17px 0 var(--accent); }
.design-4 .portrait-frame::after { display: none; }
.design-4 .portrait-label { background: var(--accent-2); color: #111; border: 2px solid #111; font-weight: 700; transform: rotate(2deg); }
.design-4 .section-heading h2, .design-4 .contact h2 { text-decoration: underline var(--accent) 5px; text-underline-offset: 9px; }
.design-4 .about { border-bottom: 5px solid var(--ink); }
.design-4 .about-grid { grid-template-columns: 1fr 1fr; }
.design-4 .academic-timeline article { border-bottom: 3px solid var(--ink); }
.design-4 .stat-row { border: 3px solid var(--ink); }
.design-4 .stat-row div { border-left: 3px solid var(--ink); }
.design-4 .stat-row strong { color: var(--ink); }
.design-4 .articles { border-bottom: 5px solid var(--ink); }
.design-4 .article-grid { gap: 0; border: 3px solid var(--ink); }
.design-4 .article-card { border: 0; border-left: 3px solid var(--ink); }
.design-4 .article-card:last-child { border-left: 0; }
.design-4 .article-card:hover { transform: none; background: #fff9d9; box-shadow: none; }
.design-4 .article-number { color: var(--accent); }
.design-4 .article-card button { color: var(--ink); border-top: 3px solid var(--ink); }
.design-4 .research { background: var(--ink); border-bottom: 7px solid var(--accent); }
.design-4 .research-list { border-top-width: 3px; }
.design-4 .research-list article { border-bottom-width: 3px; }
.design-4 .book-card { border: 3px solid var(--ink); }
.design-4 .book-cover { box-shadow: 12px 12px 0 var(--accent-2); }
.design-4 .contact { border-top: 5px solid var(--ink); }
.design-4 .social-links a { border: 3px solid var(--ink); }

/* 5 — Digital museum */
.design-5 {
  --bg: #121617;
  --surface: #1a2021;
  --ink: #e8dfd0;
  --muted: #9b9c94;
  --accent: #b78a55;
  --accent-2: #d1b27d;
  --line: rgba(211, 184, 139, .2);
  --soft: #252b2a;
  --radius: 2px;
}
.design-5 .prototype-bar { background: var(--accent); color: #151817; }
.design-5 .site-header { background: #121617; }
.design-5 .brand-mark { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 2px; }
.design-5 .hero {
  min-height: 790px;
  background: radial-gradient(circle at 78% 45%, rgba(183,138,85,.17), transparent 28%);
}
.design-5 .hero::before {
  content: "";
  position: absolute;
  inset: 4vw;
  border: 1px solid var(--line);
  pointer-events: none;
}
.design-5 .hero-copy { padding: 3vw; }
.design-5 .hero h1 { font-size: clamp(60px, 8vw, 120px); }
.design-5 .portrait-frame { border-radius: 200px 200px 4px 4px; border: 1px solid var(--accent); filter: sepia(.18); }
.design-5 .portrait-frame::before { content: ""; position: absolute; inset: 25px; border: 1px solid var(--line); border-radius: inherit; z-index: 2; }
.design-5 .portrait-label { background: var(--accent); color: #151817; border: 0; }
.design-5 .hero-index { color: rgba(211,184,139,.12); }
.design-5 .about { background: var(--surface); }
.design-5 .academic-timeline article::before { content: ""; position: absolute; right: -7px; top: 6px; width: 5px; height: 5px; background: var(--accent); transform: rotate(45deg); }
.design-5 .academic-timeline article { border-right: 1px solid var(--line); padding-right: 28px; }
.design-5 .stat-row div { background: #121617; }
.design-5 .article-card { background: var(--surface); }
.design-5 .article-card:hover { box-shadow: 0 24px 60px rgba(0,0,0,.22); border-color: var(--accent); }
.design-5 .research { background: #0b0e0f; }
.design-5 .research-list article { grid-template-columns: 80px 1fr 70px 48px; }
.design-5 .research-no { font-family: var(--font-display); font-size: 32px; }
.design-5 .books { background: var(--surface); }
.design-5 .book-card { background: #121617; }
.design-5 .book-cover { box-shadow: -12px 15px 30px rgba(0,0,0,.4); }
.design-5 .book-info button { color: var(--accent-2); }
.design-5 .contact { background: #242421; }
.design-5 .social-links a { background: #121617; }
.design-5 .social-links a:hover { background: var(--accent); color: #121617; }
.design-5 .site-footer { background: #090b0c; }

@media (max-width: 920px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-card:last-child { grid-column: auto; max-width: none; }
  .mini-site { height: 280px; }
  .site-header { min-height: 72px; padding-block: 11px; }
  .menu-button { display: flex; }
  .site-header nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 14px;
    left: 14px;
    padding: 15px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
  }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 13px 9px; border-bottom: 1px solid var(--line); }
  .site-header nav a:last-child { border-bottom: 0; }
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 55px; padding-top: 70px; }
  .hero-copy { text-align: center; }
  .kicker { justify-content: center; }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-roles { justify-content: center; }
  .portrait-wrap { grid-row: 1; }
  .portrait-frame { width: min(69vw, 390px); }
  .hero-index { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 55px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card, .design-1 .article-card:nth-child(2), .design-1 .article-card:nth-child(3) { margin-top: 0; min-height: 370px; }
  .books-grid { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 45px; }
  .design-2 .hero, .design-4 .hero { grid-template-columns: 1fr; }
  .design-2 .portrait-frame { transform: rotate(1deg); }
  .design-4 .article-grid { border-bottom: 0; }
  .design-4 .article-card { border-left: 0; border-bottom: 3px solid var(--ink); }
}

@media (max-width: 620px) {
  .design-gallery { padding-inline: 14px; }
  .gallery-intro { margin: 54px auto 38px; text-align: right; }
  .gallery-intro > p:last-child { font-size: 15px; }
  .gallery-grid { gap: 20px; }
  .mini-site { height: 220px; }
  .gallery-card-copy { grid-template-columns: auto 1fr; }
  .gallery-card-copy b { display: none; }
  .gallery-card-copy p { line-height: 1.5; }
  .prototype-bar { justify-content: center; }
  .prototype-bar > span { display: none; }
  .brand-mark { width: 40px; height: 40px; }
  .site-header .brand small { display: none; }
  .hero { padding-inline: 20px; gap: 40px; }
  .hero-copy { text-align: right; }
  .kicker { justify-content: flex-start; }
  .hero h1 { font-size: clamp(48px, 16vw, 76px); line-height: .98; }
  .hero-lead { font-size: 16px; line-height: 1.8; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .primary-action { width: 100%; }
  .text-action { text-align: center; }
  .hero-roles { justify-content: flex-start; }
  .portrait-frame { width: min(82vw, 350px); }
  .portrait-label { left: -5px; }
  .section-shell { padding-inline: 20px; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2, .contact h2 { font-size: clamp(34px, 11vw, 49px); }
  .heading-row { align-items: start; flex-direction: column; }
  .about-lead { font-size: 23px; }
  .academic-timeline article { grid-template-columns: 58px 1fr; gap: 5px 12px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .stat-row div { border-bottom: 1px solid var(--line); text-align: center; }
  .stat-row div:nth-child(2) { border-left: 0; }
  .stat-row strong { font-size: 34px; }
  .article-card { padding: 24px; }
  .research-list article {
    min-height: 0;
    padding: 24px 0;
    grid-template-columns: 38px 1fr 40px;
    gap: 12px;
  }
  .research-list article time { display: none; }
  .research-list h3 { font-size: 17px; line-height: 1.5; }
  .research-list button { width: 38px; height: 38px; }
  .book-card { grid-template-columns: 1fr; }
  .book-cover { margin: 22px; min-height: 340px; }
  .book-info { padding: 10px 24px 28px; min-height: 270px; }
  .email-link { font-size: 13px; }
  .social-links small { font-size: 10px; }
  .site-footer { flex-direction: column; align-items: flex-start; padding-block: 35px; }
  .site-footer p { order: 3; }
  .design-3 .site-header { margin: 10px 10px 0; border-radius: 25px; }
  .design-3 .about, .design-3 .research, .design-3 .contact { border-radius: 38px 38px 0 0; }
  .design-3 .portrait-frame { width: min(82vw, 350px); }
  .design-4 .hero::before { display: none; }
  .design-4 .hero h1 { font-size: clamp(52px, 17vw, 80px); }
  .design-4 .stat-row div { border-left: 2px solid var(--ink); }
  .design-4 .stat-row div:nth-child(2), .design-4 .stat-row div:nth-child(4) { border-left: 0; }
  .design-5 .hero::before { inset: 10px; }
  .article-modal { padding: 10px; }
  .article-modal > article { padding: 38px 24px 28px; }
}

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

/* Refined monochrome identities, compact typography and theme controls */
.academic-site {
  transition: background-color .25s ease, color .25s ease;
}
.academic-site.dark { color-scheme: dark; }
.design-1 {
  --bg: #f7f2f3;
  --surface: #fffafb;
  --ink: #35131b;
  --muted: #76545c;
  --accent: #751f34;
  --accent-2: #9b4055;
  --line: rgba(91, 24, 42, .17);
  --soft: #ead6dc;
}
.design-1.dark {
  --bg: #160a0e;
  --surface: #211015;
  --ink: #f5e8eb;
  --muted: #bfa2aa;
  --accent: #cf7188;
  --accent-2: #aa5268;
  --line: rgba(220, 133, 154, .23);
  --soft: #351822;
}
.design-2 {
  --bg: #f2f6f8;
  --surface: #fbfdfe;
  --ink: #102c3e;
  --muted: #587180;
  --accent: #1f5878;
  --accent-2: #4d7c96;
  --line: rgba(21, 69, 96, .16);
  --soft: #d9e6ed;
}
.design-2.dark {
  --bg: #07131a;
  --surface: #0d202b;
  --ink: #eaf3f7;
  --muted: #9bb4c1;
  --accent: #68a3c2;
  --accent-2: #447f9e;
  --line: rgba(111, 168, 198, .23);
  --soft: #132f3e;
}
.design-3 {
  --bg: #f2f7f6;
  --surface: #fbfefd;
  --ink: #143c39;
  --muted: #5d7a76;
  --accent: #28736c;
  --accent-2: #579087;
  --line: rgba(29, 100, 93, .16);
  --soft: #d8e9e5;
}
.design-3.dark {
  --bg: #071715;
  --surface: #0d2522;
  --ink: #e8f5f2;
  --muted: #9ab9b4;
  --accent: #69aaa2;
  --accent-2: #48867f;
  --line: rgba(108, 177, 167, .23);
  --soft: #15332f;
}
.design-4 {
  --bg: #f3f4f3;
  --surface: #fcfcfb;
  --ink: #171a1b;
  --muted: #626a6d;
  --accent: #3f4a4e;
  --accent-2: #6f7a7e;
  --line: rgba(30, 37, 39, .2);
  --soft: #dde1e2;
}
.design-4.dark {
  --bg: #0c0f10;
  --surface: #171b1c;
  --ink: #f0f2f2;
  --muted: #a8afb1;
  --accent: #a9b4b8;
  --accent-2: #7f8a8e;
  --line: rgba(185, 195, 199, .24);
  --soft: #242a2c;
}
.design-5 {
  --bg: #f6f1eb;
  --surface: #fffaf4;
  --ink: #33251b;
  --muted: #766454;
  --accent: #8b5c34;
  --accent-2: #a57750;
  --line: rgba(104, 68, 38, .18);
  --soft: #eadccf;
}
.design-5.dark {
  --bg: #120e0b;
  --surface: #201711;
  --ink: #f3e9df;
  --muted: #b9a596;
  --accent: #c39162;
  --accent-2: #9f7047;
  --line: rgba(207, 158, 111, .23);
  --soft: #332419;
}

.site-header,
.design-3 .site-header {
  background: var(--bg);
}
.design-3 .site-header { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.site-header nav { margin-right: auto; }
.theme-button {
  min-width: 72px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  transition: background .2s ease, transform .2s ease;
}
.theme-button:hover { background: var(--soft); transform: translateY(-1px); }
.theme-button svg { width: 16px; height: 16px; }
.brand-mark {
  background: transparent !important;
  color: var(--accent) !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}
.logo-mark { width: 45px; height: 45px; overflow: visible; }
.logo-arch { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 1.5; }
.logo-book { fill: var(--accent); stroke: var(--accent); stroke-width: 1; }
.logo-spine, .logo-hamza { fill: none; stroke: var(--surface); stroke-width: 1.7; }
.logo-hamza { stroke: var(--accent); }

.hero {
  min-height: 650px;
  background-color: var(--bg);
}
.hero h1 {
  font-size: clamp(44px, 4.8vw, 70px);
  line-height: 1;
  letter-spacing: -.025em;
}
.design-4 .hero h1,
.design-5 .hero h1 { font-size: clamp(44px, 5vw, 72px); }
.hero-lead {
  max-width: 590px;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.85;
  margin-top: 25px;
}
.hero-actions { margin-top: 28px; }
.hero-roles { margin-top: 30px; }
.section-heading h2,
.contact h2 {
  font-size: clamp(28px, 2.85vw, 42px);
  line-height: 1.25;
}
.about-lead {
  font-size: clamp(18px, 1.75vw, 24px);
  line-height: 1.75;
}
.article-card h3 { font-size: 21px; }
.book-info h3 { font-size: clamp(20px, 1.9vw, 28px); }
.stat-row strong { font-size: 34px; }

.portrait-frame,
.design-2 .portrait-frame,
.design-3 .portrait-frame,
.design-4 .portrait-frame,
.design-5 .portrait-frame {
  width: min(27vw, 375px);
  aspect-ratio: .76;
  padding: 10px;
  border-radius: 26px !important;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 24px 65px color-mix(in srgb, var(--ink) 13%, transparent);
  transform: none !important;
  filter: none;
}
.portrait-frame::before,
.portrait-frame::after,
.design-5 .portrait-frame::before { display: none !important; }
.portrait-frame img {
  border-radius: 18px;
  object-position: center top;
}
.portrait-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 72%;
  aspect-ratio: 1;
  left: -15%;
  top: -11%;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: .34;
}
.portrait-label,
.design-3 .portrait-label,
.design-4 .portrait-label {
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%) !important;
  white-space: nowrap;
  color: var(--surface);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  font-weight: 500;
}

.hero h1 strong,
.design-2 .hero h1 strong {
  color: var(--accent);
  background: none;
  -webkit-background-clip: initial;
}
.design-4 .hero h1 strong {
  color: var(--ink);
  text-decoration-color: var(--accent);
}
.design-2 .portrait-frame,
.design-4 .portrait-frame { box-shadow: 14px 14px 0 var(--soft); }
.design-3 .hero::before {
  background: radial-gradient(circle at 35% 35%, var(--surface) 0 7%, var(--soft) 28%, color-mix(in srgb, var(--accent) 28%, var(--soft)) 55%, transparent 56%);
}
.design-4 .kicker { background: var(--soft); color: var(--ink); }
.design-4 .portrait-label { background: var(--accent); color: var(--surface); border: 0; }
.design-4 .stat-row,
.design-4 .academic-timeline article,
.design-4 .article-grid,
.design-4 .article-card,
.design-4 .article-card button,
.design-4 .book-card,
.design-4 .social-links a {
  border-color: var(--ink);
}
.design-4 .article-card:hover { background: var(--soft); }

.about,
.books { background: var(--surface) !important; }
.articles { background: var(--bg); }
.research {
  background: var(--ink) !important;
  color: var(--bg);
}
.contact { background: var(--soft) !important; }
.site-footer { background: var(--ink) !important; color: var(--bg); }
.article-card,
.book-card,
.article-modal > article { background: var(--surface); }
.cover-1 { background: var(--accent); color: var(--surface); }
.cover-2 { background: var(--ink); color: var(--bg); }
.social-links a:hover { background: var(--surface); color: var(--ink); }
.design-5 .social-links a { background: var(--surface); }
.design-5 .social-links a:hover { background: var(--accent); color: var(--surface); }
.design-2 .prototype-bar,
.design-3 .prototype-bar,
.design-4 .prototype-bar,
.design-5 .prototype-bar { background: var(--accent); color: var(--surface); }

.load-more {
  min-width: 150px;
  min-height: 48px;
  display: block;
  margin: 32px auto 0;
  padding: 11px 24px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
.load-more:hover { background: var(--accent); color: var(--surface); }

@media (max-width: 920px) {
  .site-header nav { margin-right: 0; }
  .theme-button { margin-right: auto; }
  .portrait-frame,
  .design-2 .portrait-frame,
  .design-3 .portrait-frame,
  .design-4 .portrait-frame,
  .design-5 .portrait-frame { width: min(61vw, 330px); }
}

@media (max-width: 620px) {
  .theme-button { min-width: 42px; width: 42px; padding: 0; }
  .theme-button span { display: none; }
  .hero h1,
  .design-4 .hero h1,
  .design-5 .hero h1 { font-size: clamp(38px, 11.5vw, 50px); line-height: 1.05; }
  .section-heading h2,
  .contact h2 { font-size: clamp(26px, 8vw, 35px); }
  .about-lead { font-size: 18px; }
  .portrait-frame,
  .design-2 .portrait-frame,
  .design-3 .portrait-frame,
  .design-4 .portrait-frame,
  .design-5 .portrait-frame { width: min(76vw, 320px); }
}

/* Compact multi-page architecture */
.academic-site,
.academic-site .prototype-bar,
.academic-site .site-header,
.academic-site .compact-hero,
.academic-site .compact-about,
.academic-site .section-portals,
.academic-site .inner-intro,
.academic-site .inner-grid,
.academic-site .inner-list,
.academic-site .inner-books,
.academic-site .lecture-grid,
.academic-site .cv-layout,
.academic-site .compact-footer,
.academic-site .articles,
.academic-site .about,
.academic-site .books,
.academic-site .contact {
  background: var(--bg) !important;
}
.academic-site .prototype-bar {
  color: var(--muted) !important;
  border-bottom: 1px solid var(--line);
}
.academic-site .site-header {
  min-height: 72px;
  margin: 0 !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--line) !important;
}
.academic-site .site-header nav a { color: var(--muted); }
.academic-site .site-header nav a:hover { color: var(--ink); }
.compact-home { min-height: 100vh; }
.compact-hero {
  min-height: 400px;
  padding: 44px clamp(22px, 7vw, 104px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: clamp(35px, 8vw, 110px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.compact-hero::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  left: 4vw;
  bottom: -75px;
  border: 1px solid var(--line);
  border-radius: 50%;
  pointer-events: none;
}
.compact-hero-copy { max-width: 800px; }
.compact-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(39px, 4.5vw, 64px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.compact-hero-copy > p:not(.kicker) {
  max-width: 650px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.compact-hero .hero-roles { margin-top: 22px; }
.compact-portrait {
  width: 170px;
  height: 220px;
  padding: 7px;
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 10px 12px 0 var(--soft);
}
.compact-portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  border-radius: 14px;
}
.compact-about {
  min-height: 205px;
  padding: 34px clamp(22px, 7vw, 104px);
  display: grid;
  grid-template-columns: .9fr 1.15fr auto;
  align-items: center;
  gap: clamp(28px, 5vw, 75px);
  border-bottom: 1px solid var(--line);
}
.compact-about > div > span { color: var(--accent); font-weight: 700; font-size: 11px; }
.compact-about h2 { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(24px, 2.5vw, 36px); line-height: 1.3; }
.compact-about p { margin: 0; color: var(--muted); line-height: 1.8; font-size: 14px; }
.compact-about > a {
  min-height: 45px;
  padding: 11px 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.compact-about > a:hover { border-color: var(--accent); color: var(--accent); }
.section-portals {
  padding: 30px clamp(22px, 7vw, 104px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.section-portals > a {
  min-height: 118px;
  padding: 22px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  transition: border-color .2s ease, transform .2s ease;
}
.section-portals > a:hover { border-color: var(--accent); transform: translateY(-2px); }
.section-portals > a > span { color: var(--accent); font-size: 11px; }
.section-portals h2 { margin: 0; font-family: var(--font-display); font-size: 23px; }
.section-portals p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.section-portals b { color: var(--accent); font-size: 20px; }
.compact-footer {
  min-height: 92px;
  padding: 20px clamp(22px, 7vw, 104px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.footer-signature { display: flex; align-items: center; gap: 10px; }
.footer-signature .logo-mark { width: 38px; height: 38px; }
.footer-signature > span { display: flex; flex-direction: column; }
.footer-signature b { font-size: 13px; }
.footer-signature small { color: var(--muted); font-size: 9px; }
.footer-socials { display: flex; gap: 8px; }
.footer-socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
}
.footer-socials a:hover { border-color: var(--accent); color: var(--accent); }
.footer-socials svg { width: 16px; height: 16px; }

/* Inner pages */
.inner-site { min-height: 100vh; }
.inner-intro {
  min-height: 235px;
  padding: 55px clamp(22px, 9vw, 140px) 45px;
  border-bottom: 1px solid var(--line);
}
.inner-intro > span { color: var(--accent); font-size: 11px; font-weight: 700; }
.inner-intro h1 { margin: 10px 0; font-family: var(--font-display); font-size: clamp(38px, 5vw, 70px); line-height: 1.1; }
.inner-intro p { max-width: 650px; margin: 0; color: var(--muted); line-height: 1.8; font-size: 14px; }
.inner-grid,
.inner-list,
.inner-books,
.lecture-grid,
.cv-layout {
  padding: 45px clamp(22px, 9vw, 140px) 65px;
}
.inner-grid.article-grid { grid-template-columns: repeat(3, 1fr); }
.inner-grid .article-card {
  min-height: 365px;
  background: transparent;
  box-shadow: none;
}
.inner-grid .article-card:hover { box-shadow: none; border-color: var(--accent); }
.inner-grid .article-card h2 { margin: 14px 0 12px; font-family: var(--font-display); font-size: 21px; line-height: 1.45; }
.inner-list { display: grid; }
.inner-list article {
  min-height: 112px;
  display: grid;
  grid-template-columns: 45px 1fr 60px 88px;
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.inner-list article:first-child { border-top: 1px solid var(--line); }
.inner-list article > span { color: var(--accent); font-size: 11px; }
.inner-list small { color: var(--accent); }
.inner-list h2 { margin: 6px 0 0; font-size: 18px; font-weight: 500; line-height: 1.45; }
.inner-list time { color: var(--muted); font-size: 12px; }
.inner-list article > b { color: var(--muted); font-size: 10px; font-weight: 400; text-align: center; }
.inner-list .resource-link {
  min-height: 36px;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--accent);
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.page-note { margin: -35px clamp(22px, 9vw, 140px) 60px; color: var(--muted); font-size: 11px; }
.inner-books { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.inner-books > article {
  min-height: 390px;
  padding: 22px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 30px;
  align-items: center;
  border: 1px solid var(--line);
}
.inner-books .book-cover { min-height: 320px; margin: 0; }
.inner-books article > div:last-child > small { color: var(--accent); }
.inner-books h2 { margin: 15px 0; font-family: var(--font-display); font-size: 25px; line-height: 1.4; }
.inner-books p { color: var(--muted); }
.inner-books button { padding: 12px 0; background: transparent; color: var(--accent); border-bottom: 1px solid var(--line); }
.inner-books button span { margin-right: 8px; }
.lecture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lecture-grid article { min-height: 300px; padding: 18px; border: 1px solid var(--line); }
.video-placeholder {
  height: 125px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--line);
  color: var(--accent);
}
.video-placeholder svg { width: 38px; height: 38px; }
.video-placeholder span { position: absolute; left: 12px; bottom: 10px; color: var(--muted); font-size: 10px; }
.lecture-grid article > small { color: var(--accent); }
.lecture-grid h2 { min-height: 58px; margin: 10px 0 20px; font-size: 18px; line-height: 1.55; }
.lecture-grid a,
.lecture-grid button { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: transparent; color: var(--accent); font-size: 11px; }
.lecture-grid button:disabled { color: var(--muted); cursor: default; }

/* Full written CV */
.cv-layout { display: grid; grid-template-columns: 260px 1fr; gap: 45px; align-items: start; }
.cv-summary { position: sticky; top: 20px; border: 1px solid var(--line); padding: 18px; }
.cv-summary img { width: 108px; height: 140px; display: block; object-fit: cover; object-position: top; border-radius: 14px; }
.cv-summary h2 { margin: 18px 0 8px; font-family: var(--font-display); font-size: 23px; }
.cv-summary p { color: var(--muted); font-size: 12px; line-height: 1.75; }
.cv-summary > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 15px; }
.cv-summary > div span { padding: 5px 8px; border: 1px solid var(--line); font-size: 9px; }
.cv-sections { border-top: 1px solid var(--line); }
.cv-group { border-bottom: 1px solid var(--line); }
.cv-group summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 21px;
}
.cv-group summary::-webkit-details-marker { display: none; }
.cv-group summary span { color: var(--accent); font-family: var(--font-sans); font-size: 24px; transition: transform .2s ease; }
.cv-group[open] summary span { transform: rotate(45deg); }
.cv-group-content { padding: 0 0 30px; }
.cv-timeline article { display: grid; grid-template-columns: 95px 1fr; column-gap: 18px; padding: 18px 0; border-bottom: 1px dashed var(--line); }
.cv-timeline article:last-child { border-bottom: 0; }
.cv-timeline b { grid-row: 1 / 3; color: var(--accent); font-size: 12px; }
.cv-timeline h3 { margin: 0; font-size: 16px; }
.cv-timeline p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.clean-list { padding: 0; margin: 0; list-style: none; columns: 2; column-gap: 35px; }
.clean-list li { break-inside: avoid; padding: 9px 17px 9px 0; position: relative; color: var(--muted); font-size: 12px; line-height: 1.6; }
.clean-list li::before { content: ""; position: absolute; right: 0; top: 17px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.group-note { margin: 0 0 15px; color: var(--ink); font-size: 13px; }

/* Truly uniform backgrounds */
.academic-site .article-card,
.academic-site .book-card,
.academic-site .book-cover,
.academic-site .social-links a,
.academic-site .cv-summary,
.academic-site .lecture-grid article,
.academic-site .video-placeholder,
.academic-site .article-modal > article {
  background-color: var(--bg);
}
.academic-site .cover-1,
.academic-site .cover-2 {
  background: var(--accent);
  color: var(--bg);
}
.academic-site.design-2 .hero,
.academic-site.design-3 .hero,
.academic-site.design-5 .hero { background-image: none; }

/* Five distinct compositions, kept within one monochrome palette each */
.design-2 .compact-hero h1,
.design-2 .compact-about h2,
.design-2 .section-portals h2,
.design-2 .inner-intro h1 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.045em; }
.design-2 .compact-portrait { transform: rotate(2deg); border-radius: 10px; }
.design-2 .compact-portrait img { border-radius: 6px; }
.design-2 .section-portals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.design-2 .section-portals > a { min-height: 150px; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: start; }
.design-2 .section-portals > a > span { font-size: 18px; }
.design-2 .section-portals > a > div { grid-column: 1 / -1; align-self: end; }
.design-2 .section-portals > a > b { position: absolute; opacity: 0; }

.design-3 .compact-portrait { width: 176px; height: 176px; padding: 8px; border-radius: 50%; box-shadow: 0 0 0 9px var(--soft); }
.design-3 .compact-portrait img { border-radius: 50%; }
.design-3 .compact-hero::after { border-radius: 0; transform: rotate(45deg); width: 95px; height: 95px; bottom: -48px; }
.design-3 .section-portals > a,
.design-3 .compact-about > a,
.design-3 .footer-socials a { border-radius: 999px; }
.design-3 .section-portals > a { padding-inline: 28px; }
.design-3 .cv-summary,
.design-3 .lecture-grid article,
.design-3 .inner-books > article,
.design-3 .article-card { border-radius: 24px; }

.design-4 .compact-hero,
.design-4 .compact-about,
.design-4 .site-header,
.design-4 .compact-footer,
.design-4 .inner-intro { border-color: var(--ink) !important; border-width: 2px !important; }
.design-4 .compact-portrait,
.design-4 .compact-portrait img,
.design-4 .section-portals > a,
.design-4 .compact-about > a,
.design-4 .footer-socials a,
.design-4 .cv-summary,
.design-4 .lecture-grid article,
.design-4 .inner-books > article,
.design-4 .article-card { border-radius: 0; border-color: var(--ink); }
.design-4 .compact-portrait { box-shadow: 9px 9px 0 var(--accent); }
.design-4 .compact-hero h1 { font-family: var(--font-sans); font-size: clamp(38px, 4.2vw, 58px); font-weight: 800; }
.design-4 .section-portals { grid-template-columns: repeat(4, 1fr); gap: 0; }
.design-4 .section-portals > a { min-height: 145px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border-width: 2px; margin-left: -2px; }
.design-4 .section-portals > a > b { align-self: flex-end; }
.design-4 .inner-list article { border-color: var(--ink); border-width: 2px; }

.design-5 .compact-portrait { height: 225px; border-radius: 90px 90px 8px 8px; box-shadow: none; outline: 1px solid var(--line); outline-offset: 8px; }
.design-5 .compact-portrait img { border-radius: 82px 82px 4px 4px; }
.design-5 .compact-hero-copy { padding-right: clamp(0px, 3vw, 42px); border-right: 1px solid var(--line); }
.design-5 .section-portals > a { border-right: 3px solid var(--accent); }
.design-5 .inner-intro { text-align: center; }
.design-5 .inner-intro p { margin-inline: auto; }

@media (max-width: 920px) {
  .compact-about { grid-template-columns: 1fr; gap: 15px; padding-block: 30px; }
  .compact-about > a { width: fit-content; }
  .inner-grid.article-grid,
  .lecture-grid { grid-template-columns: repeat(2, 1fr); }
  .inner-books { grid-template-columns: 1fr; }
  .cv-layout { grid-template-columns: 1fr; }
  .cv-summary { position: static; display: grid; grid-template-columns: 108px 1fr; gap: 0 18px; }
  .cv-summary img { grid-row: 1 / 4; }
  .cv-summary h2 { margin-top: 5px; }
  .design-2 .section-portals,
  .design-4 .section-portals { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .compact-hero {
    min-height: 355px;
    padding: 32px 20px;
    grid-template-columns: 1fr 94px;
    gap: 18px;
  }
  .compact-hero::after { display: none; }
  .compact-hero h1 { font-size: clamp(34px, 10vw, 44px); }
  .compact-hero-copy > p:not(.kicker) { font-size: 13px; line-height: 1.7; }
  .compact-hero .kicker { font-size: 9px; margin-bottom: 12px; }
  .compact-hero .hero-roles { display: none; }
  .compact-portrait { width: 92px; height: 122px; padding: 4px; border-radius: 12px; box-shadow: 5px 6px 0 var(--soft); }
  .compact-portrait img { border-radius: 8px; }
  .design-2 .compact-portrait { transform: none; }
  .design-3 .compact-portrait { width: 92px; height: 92px; padding: 4px; box-shadow: 0 0 0 4px var(--soft); }
  .design-5 .compact-portrait { width: 92px; height: 122px; outline-offset: 4px; }
  .design-5 .compact-hero-copy { padding-right: 0; border-right: 0; }
  .compact-about { min-height: 0; padding: 26px 20px; }
  .compact-about h2 { font-size: 25px; }
  .compact-about p { font-size: 12px; }
  .section-portals { padding: 18px 20px 24px; grid-template-columns: 1fr; gap: 8px; }
  .section-portals > a { min-height: 88px; padding: 15px; }
  .design-2 .section-portals,
  .design-4 .section-portals { grid-template-columns: 1fr; }
  .design-2 .section-portals > a,
  .design-4 .section-portals > a { min-height: 88px; display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: 1fr; align-items: center; }
  .design-2 .section-portals > a > span { font-size: 11px; }
  .design-2 .section-portals > a > div { grid-column: auto; align-self: center; }
  .design-2 .section-portals > a > b { position: static; opacity: 1; }
  .section-portals h2 { font-size: 20px; }
  .compact-footer { min-height: 78px; padding: 16px 20px; }
  .footer-signature .logo-mark { width: 32px; height: 32px; }
  .footer-signature small { display: none; }
  .footer-socials a { width: 32px; height: 32px; }
  .inner-intro { min-height: 185px; padding: 38px 20px 30px; }
  .inner-intro h1 { font-size: 38px; }
  .inner-grid,
  .inner-list,
  .inner-books,
  .lecture-grid,
  .cv-layout { padding: 28px 20px 45px; }
  .inner-grid.article-grid,
  .lecture-grid { grid-template-columns: 1fr; }
  .inner-list article { min-height: 100px; grid-template-columns: 30px 1fr 34px; gap: 10px; }
  .inner-list article time { display: none; }
  .inner-list article > b { writing-mode: vertical-rl; }
  .inner-list h2 { font-size: 15px; }
  .page-note { margin: -15px 20px 40px; }
  .inner-books > article { grid-template-columns: 1fr; }
  .inner-books .book-cover { width: min(230px, 100%); min-height: 300px; }
  .lecture-grid article { min-height: 270px; }
  .cv-summary { display: block; }
  .cv-summary img { width: 82px; height: 106px; }
  .cv-group summary { min-height: 62px; font-size: 18px; }
  .clean-list { columns: 1; }
  .cv-timeline article { grid-template-columns: 75px 1fr; }
}

/* Review round: compact hierarchy, announcements and laptop-safe spacing */
.academic-site .announcements { background: var(--bg) !important; }
.brand-mark { position: relative; top: -4px; }
.brand b { white-space: nowrap; }
.compact-hero { min-height: 350px; padding-block: 36px; }
.compact-hero-copy { max-width: 880px; min-width: 0; }
.compact-hero h1 {
  font-size: clamp(36px, 4vw, 57px);
  white-space: nowrap;
}
.compact-hero-copy > .hero-bio {
  max-width: none;
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.75;
}
.hero-bio span { display: block; white-space: nowrap; }

.compact-about {
  min-height: 285px;
  padding-block: 30px;
  grid-template-columns: minmax(290px, .9fr) minmax(280px, 1fr);
  grid-template-areas:
    "title note"
    "stats stats"
    "cta cta";
  gap: 18px 42px;
}
.about-copy { grid-area: title; min-width: 0; }
.about-note { grid-area: note; }
.compact-about .about-copy h2 {
  font-size: clamp(21px, 2.05vw, 30px);
  white-space: nowrap;
}
.home-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.home-stats > div {
  min-height: 70px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 1px solid var(--line);
}
.home-stats > div:last-child { border-left: 0; }
.home-stats strong { color: var(--accent); font-family: var(--font-display); font-size: 25px; line-height: 1; }
.home-stats span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.mobile-stats-cta { display: none; }
.compact-about > .about-cta {
  grid-area: cta;
  width: fit-content;
  min-height: 42px;
  padding: 9px 17px;
}

.announcements {
  padding: 25px clamp(22px, 7vw, 104px);
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: stretch;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}
.announcements-heading { align-self: center; }
.announcements-heading > span { color: var(--accent); font-size: 10px; font-weight: 700; }
.announcements-heading h2 { margin: 7px 0 0; font-family: var(--font-display); font-size: 25px; }
.announcement-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.announcement-list article {
  min-height: 105px;
  padding: 14px;
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
}
.announcement-date { min-height: 70px; padding-left: 12px; display: flex; align-items: center; gap: 7px; border-left: 1px solid var(--line); }
.announcement-date b { color: var(--accent); font-family: var(--font-display); font-size: 31px; }
.announcement-date span { color: var(--muted); font-size: 9px; line-height: 1.4; }
.announcement-list small { color: var(--accent); font-size: 9px; }
.announcement-list h3 { margin: 5px 0 8px; font-size: 15px; line-height: 1.35; }
.announcement-list p { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 9px; }
.announcement-list p svg { width: 12px; height: 12px; color: var(--accent); }

.section-portals > a {
  grid-template-columns: 34px 44px 1fr auto;
  gap: 14px;
}
.portal-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--accent);
}
.portal-icon svg { width: 21px; height: 21px; }
.compact-footer .footer-signature > span { position: relative; top: 3px; }
.design-4 .section-portals > a {
  min-height: 145px;
  display: grid;
  grid-template-columns: 30px 38px 1fr auto;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 10px;
  padding: 16px;
}
.design-4 .section-portals > a > b { align-self: center; }
.design-4 .portal-icon { width: 36px; height: 36px; }

/* Smaller article cards without excerpts */
.inner-grid.article-grid { align-items: stretch; }
.inner-grid .article-card {
  min-height: 225px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
}
.inner-grid .article-card h2 {
  margin: 10px 0 18px;
  font-size: 18px;
  line-height: 1.5;
}
.inner-grid .article-card button { margin-top: auto; }

/* Compact book records */
.inner-books { gap: 14px; }
.inner-books > article {
  min-height: 235px;
  padding: 20px;
  grid-template-columns: 120px 1fr;
  gap: 22px;
}
.mini-book {
  width: 110px;
  height: 160px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  color: var(--accent);
}
.mini-book svg { width: 42px; height: 42px; }
.mini-book span { font-size: 10px; }
.mini-book b { font-size: 12px; }
.book-details { min-width: 0; }
.inner-books .book-details h2 {
  margin: 10px 0;
  font-size: 20px;
  line-height: 1.45;
}
.inner-books .book-details p { margin: 0 0 14px; font-size: 11px; }
.inner-books .book-details button { width: 100%; padding: 9px 0; font-size: 11px; }
.inner-books .book-link {
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
}

/* CV portrait and name remain side by side */
.cv-summary {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 16px;
  align-items: center;
}
.cv-layout { grid-template-columns: 300px 1fr; }
.cv-summary img { width: 82px; height: 106px; }
.cv-summary h2 { margin: 0 0 7px; font-size: 20px; }
.cv-summary p { margin: 0; }

/* Laptop widths: protect titles and descriptions from colliding */
@media (min-width: 921px) and (max-width: 1280px) {
  .site-header { padding-inline: 38px; }
  .site-header nav { gap: 18px; }
  .site-header nav a { font-size: 11px; }
  .brand b { font-size: 13px; }
  .compact-hero { padding-inline: 58px; gap: 55px; }
  .compact-hero h1 { font-size: 43px; line-height: 1.18; }
  .compact-hero-copy > .hero-bio { margin-top: 20px; font-size: 13px; line-height: 1.9; }
  .compact-about { padding-inline: 58px; gap: 22px 50px; }
  .compact-about .about-copy h2 { font-size: 24px; line-height: 1.5; }
  .compact-about .about-note { line-height: 2; }
  .announcements,
  .section-portals { padding-inline: 58px; }
  .design-2 .section-portals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .design-2 .section-portals h2,
  .design-2 .section-portals p {
    word-break: normal;
    overflow-wrap: normal;
  }
  .section-portals h2 { font-size: 20px; line-height: 1.45; }
  .section-portals p { margin-top: 8px; line-height: 1.6; }
  .inner-intro { padding-inline: 90px; }
  .inner-intro h1 { margin-block: 16px; line-height: 1.25; }
  .inner-intro p { line-height: 2; }
  .inner-grid,
  .inner-list,
  .inner-books,
  .lecture-grid,
  .cv-layout { padding-inline: 90px; }
  .inner-grid.article-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .lecture-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .inner-books { grid-template-columns: 1fr; }
}

@media (max-width: 920px) {
  .compact-about {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "note" "stats" "cta";
  }
  .announcements { grid-template-columns: 1fr; gap: 14px; }
  .cv-layout { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .brand b { font-size: 11px; }
  .brand small { font-size: 8px; }
  .brand-mark { top: -5px; }
  .compact-hero { min-height: 315px; padding-block: 28px; }
  .compact-hero h1,
  .design-4 .compact-hero h1 {
    font-size: clamp(23px, 6.25vw, 27px);
    letter-spacing: -.035em;
    white-space: nowrap;
  }
  .compact-hero-copy > .hero-bio {
    margin-top: 14px;
    font-size: clamp(10.5px, 2.85vw, 12px);
    line-height: 1.8;
  }
  .hero-bio span { white-space: nowrap; }
  .compact-about .about-copy h2 {
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.45;
    white-space: nowrap;
  }
  .home-stats { grid-template-columns: repeat(2, 1fr); }
  .home-stats > div { min-height: 62px; padding: 10px 12px; }
  .home-stats > div:nth-child(2) { border-left: 0; }
  .home-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .home-stats strong { font-size: 22px; }
  .home-stats span { font-size: 9px; }
  .announcements { padding: 22px 20px; }
  .announcements-heading h2 { font-size: 22px; }
  .announcement-list { grid-template-columns: 1fr; }
  .announcement-list article { min-height: 92px; }
  .section-portals > a,
  .design-2 .section-portals > a,
  .design-4 .section-portals > a {
    grid-template-columns: 25px 38px 1fr auto;
    gap: 10px;
  }
  .portal-icon { width: 36px; height: 36px; }
  .portal-icon svg { width: 18px; height: 18px; }
  .section-portals h2 { font-size: 18px; }
  .section-portals p { font-size: 10px; }
  .cv-summary {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 13px;
  }
  .cv-summary img { width: 76px; height: 98px; }
  .cv-summary h2 { font-size: 17px; }
  .cv-summary p { font-size: 10px; line-height: 1.65; }
  .inner-books > article { grid-template-columns: 88px 1fr; min-height: 200px; padding: 15px; gap: 15px; }
  .mini-book { width: 82px; height: 122px; padding: 12px 8px; }
  .mini-book svg { width: 30px; height: 30px; }
  .inner-books .book-details h2 { font-size: 16px; }
}

/* Final consistency pass: one typographic scale and collision-safe layouts */
.academic-site {
  --type-display: clamp(38px, 4vw, 56px);
  --type-page: clamp(36px, 4.2vw, 54px);
  --type-section: clamp(23px, 2.2vw, 30px);
  --type-card: 18px;
  --type-body: 14px;
  --type-small: 11px;
  --type-button: 12px;
}
.academic-site h1,
.academic-site h2,
.academic-site h3,
.academic-site p,
.academic-site a,
.academic-site button,
.academic-site span,
.academic-site small,
.academic-site time { overflow-wrap: break-word; }
.brand { flex: 0 0 auto; min-width: 0; order: 1; }
.brand b { font-size: 15px; line-height: 1.3; }
.brand small { font-size: 9.5px; line-height: 1.4; }
.site-header nav { order: 2; margin-inline: auto; min-width: 0; }
.theme-button { order: 3; flex: 0 0 auto; margin: 0; }
.menu-button { order: 4; flex: 0 0 auto; }
.compact-hero h1,
.design-2 .compact-hero h1,
.design-4 .compact-hero h1 { font-size: var(--type-display); }
.compact-hero-copy > .hero-bio,
.compact-about p,
.inner-intro p { font-size: var(--type-body); }
.compact-about .about-copy h2,
.announcements-heading h2 { font-size: var(--type-section); }
.section-portals h2,
.inner-grid .article-card h2,
.inner-list h2,
.inner-books .book-details h2,
.lecture-grid h2 { font-size: var(--type-card); }
.inner-intro h1 { font-size: var(--type-page); }
.site-header nav a,
.compact-about > .about-cta,
.inner-grid .article-card button,
.inner-books button,
.lecture-grid a,
.lecture-grid button { font-size: var(--type-button); }
.article-meta,
.inner-list small,
.inner-list time,
.announcement-list small,
.announcement-list p,
.lecture-grid small,
.lecture-grid time { font-size: var(--type-small); }

/* Header remains readable when a laptop window is not maximized */
@media (min-width: 1101px) {
  .site-header { gap: 20px; }
  .site-header nav { justify-content: center; gap: clamp(14px, 1.6vw, 26px); }
  .site-header nav a { white-space: nowrap; }
}
@media (max-width: 1100px) {
  .site-header { min-height: 72px; padding-block: 11px; gap: 12px; }
  .menu-button { display: flex; }
  .site-header nav {
    position: absolute;
    top: calc(100% + 1px);
    right: 14px;
    left: 14px;
    padding: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--bg) !important;
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
  }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 12px 9px; border-bottom: 1px solid var(--line); }
  .site-header nav a:last-child { border-bottom: 0; }
  .theme-button { margin-inline-start: auto; }
}

/* Cleaner, smaller section links on the homepage */
.section-portals { gap: 0 24px; }
.section-portals > a,
.design-2 .section-portals > a,
.design-3 .section-portals > a,
.design-4 .section-portals > a,
.design-5 .section-portals > a {
  min-height: 88px;
  padding: 14px 2px;
  display: grid;
  grid-template-columns: 28px 38px 1fr auto;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.section-portals > a:hover { transform: none; border-color: var(--accent); }
.section-portals > a > span { font-size: 10px !important; }
.section-portals > a > div:not(.portal-icon) { grid-column: auto !important; align-self: center !important; min-width: 0; }
.section-portals > a > b { position: static !important; opacity: 1 !important; align-self: center !important; }
.portal-icon,
.design-4 .portal-icon {
  width: 34px;
  height: 34px;
  border: 0;
  color: var(--accent);
}
.design-2 .section-portals > a > .portal-icon {
  grid-column: auto;
  align-self: center;
}
.portal-icon svg { width: 20px; height: 20px; }
.section-portals p { margin-top: 3px; font-size: var(--type-small); line-height: 1.5; }

/* Compact article library: equal, quiet cards in all five designs */
.inner-grid.article-grid { gap: 12px; }
.inner-grid .article-card,
.design-2 .inner-grid .article-card,
.design-3 .inner-grid .article-card,
.design-3 .inner-grid .article-card:nth-child(2),
.design-4 .inner-grid .article-card,
.design-5 .inner-grid .article-card {
  min-height: 185px;
  padding: 17px;
  margin: 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  background: transparent !important;
  box-shadow: none !important;
}
.inner-grid .article-card:hover { border-color: var(--accent) !important; background: transparent !important; }
.inner-grid .article-card h2 { margin: 8px 0 13px; line-height: 1.45; }
.inner-grid .article-card .article-number { font-size: 25px; line-height: 1; opacity: .55; }
.inner-grid .article-card button { min-height: 34px; padding-top: 8px; }

/* Design 3: refined portrait treatment without the heavy ring */
.design-3 .compact-portrait {
  width: 150px;
  height: 195px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 8px 10px 0 var(--soft);
  outline: 0;
}
.design-3 .compact-portrait img { border-radius: 16px; }

/* Text-only academic lectures */
.lecture-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 22px;
}
.lecture-grid article {
  min-height: 140px;
  padding: 20px 0;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent !important;
}
.lecture-number { color: var(--accent); font-size: 12px; }
.lecture-copy { min-width: 0; }
.lecture-grid h2 { min-height: 0; margin: 6px 0 5px; line-height: 1.5; }
.lecture-grid time { color: var(--muted); }
.lecture-grid a,
.lecture-grid button {
  width: auto;
  min-width: 120px;
  min-height: 36px;
  padding: 8px 12px;
  white-space: nowrap;
}
.lecture-grid a svg { width: 15px; height: 15px; }

/* Announcement dates never cross their divider */
.announcement-list article { grid-template-columns: 96px minmax(0, 1fr); }
.announcement-date {
  width: 96px;
  min-width: 0;
  padding-left: 12px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
}
.announcement-date b { font-size: 29px; }
.announcement-date span {
  min-width: 0;
  font-size: 8px;
  line-height: 1.45;
  overflow-wrap: normal;
  word-break: normal;
}
.announcement-list article > div:last-child { min-width: 0; }

/* Mobile density and collision fixes */
@media (max-width: 620px) {
  .academic-site {
    --type-display: clamp(23px, 6.2vw, 27px);
    --type-page: 32px;
    --type-section: 21px;
    --type-card: 16px;
    --type-body: 12px;
    --type-small: 9px;
    --type-button: 11px;
  }
  .site-header { padding-inline: 16px; gap: 9px; }
  .brand { gap: 8px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand b { font-size: 12px; line-height: 1.25; }
  .brand small,
  .site-header .brand small { display: block; font-size: 8px; }
  .theme-button,
  .menu-button { width: 40px; min-width: 40px; height: 40px; }

  .compact-hero,
  .design-2 .compact-hero,
  .design-3 .compact-hero,
  .design-4 .compact-hero,
  .design-5 .compact-hero {
    min-height: 0;
    padding: 26px 20px 24px;
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 14px;
    align-items: center;
  }
  .compact-hero-copy { min-width: 0; overflow: visible; }
  .compact-hero h1,
  .design-2 .compact-hero h1,
  .design-4 .compact-hero h1 {
    max-width: 100%;
    white-space: nowrap;
    line-height: 1.2;
  }
  .compact-hero-copy > .hero-bio {
    max-width: 100%;
    margin-top: 10px;
    line-height: 1.65;
  }
  .hero-bio span { display: inline; white-space: normal; }
  .hero-bio span + span::before { content: " "; }
  .compact-portrait,
  .design-3 .compact-portrait,
  .design-5 .compact-portrait {
    width: 82px;
    height: 108px;
    padding: 4px;
    justify-self: end;
    border-radius: 12px;
    box-shadow: 4px 5px 0 var(--soft);
    outline: 0;
  }
  .compact-portrait img,
  .design-3 .compact-portrait img,
  .design-5 .compact-portrait img { border-radius: 8px; }
  .compact-about { padding-block: 22px; gap: 12px; }
  .compact-about .about-copy h2 { white-space: normal; line-height: 1.45; }

  .announcement-list article {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
  }
  .announcement-date {
    width: 88px;
    grid-template-columns: 37px minmax(0, 1fr);
    padding-left: 10px;
  }
  .announcement-date b { font-size: 27px; }
  .announcement-date span { font-size: 7.5px; }
  .announcement-list h3 { font-size: 14px; }

  .section-portals { padding-top: 12px; }
  .section-portals > a,
  .design-2 .section-portals > a,
  .design-3 .section-portals > a,
  .design-4 .section-portals > a,
  .design-5 .section-portals > a {
    min-height: 72px;
    padding: 10px 0;
    grid-template-columns: 22px 32px minmax(0, 1fr) 18px;
    gap: 8px;
  }
  .portal-icon { width: 30px; height: 30px; }
  .portal-icon svg { width: 18px; height: 18px; }

  .inner-grid.article-grid { gap: 8px; }
  .inner-grid .article-card,
  .design-2 .inner-grid .article-card,
  .design-3 .inner-grid .article-card,
  .design-3 .inner-grid .article-card:nth-child(2),
  .design-4 .inner-grid .article-card,
  .design-5 .inner-grid .article-card {
    min-height: 155px;
    padding: 14px;
  }
  .inner-grid .article-card .article-number { font-size: 21px; }

  .lecture-grid { grid-template-columns: 1fr; padding-top: 12px; }
  .lecture-grid article {
    min-height: 120px;
    padding: 16px 0;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 10px;
  }
  .lecture-grid article > a,
  .lecture-grid article > button {
    grid-column: 2;
    width: fit-content;
    min-width: 0;
    min-height: 32px;
    padding: 7px 10px;
  }
}

/* Final type system — Thmanyah only, one size and weight per role */
.academic-site,
.academic-site * {
  font-family: "Thmanyah Sans", Tahoma, sans-serif !important;
}
.academic-site {
  --font-scale: 1;
  --type-display: calc(44px * var(--font-scale));
  --type-page: calc(44px * var(--font-scale));
  --type-section: calc(27px * var(--font-scale));
  --type-card: calc(18px * var(--font-scale));
  --type-body: calc(16px * var(--font-scale));
  --type-small: calc(13px * var(--font-scale));
  --type-control: calc(13px * var(--font-scale));
  font-size: var(--type-body);
}
.academic-site.font-large { --font-scale: 1.14; }
.academic-site h1,
.academic-site h2,
.academic-site h3,
.academic-site strong,
.academic-site b { font-weight: 700; }
.academic-site p,
.academic-site li,
.academic-site summary,
.academic-site details { font-size: var(--type-body); font-weight: 400; }
.academic-site small,
.academic-site time,
.academic-site .article-meta,
.academic-site .inner-intro > span,
.academic-site .compact-about .about-copy > span,
.academic-site .announcements-heading > span { font-size: var(--type-small); font-weight: 500; }
.academic-site button,
.academic-site .site-header nav a,
.academic-site .about-cta { font-size: var(--type-control); font-weight: 700; }
.compact-hero h1,
.design-2 .compact-hero h1,
.design-4 .compact-hero h1 { font-size: var(--type-display); font-weight: 700; }
.compact-hero-copy > .hero-bio,
.compact-about .about-note,
.inner-intro p { font-size: var(--type-body); font-weight: 400; }
.compact-about .about-copy h2,
.announcements-heading h2 { font-size: var(--type-section); font-weight: 700; }
.section-portals h2,
.inner-grid .article-card h2,
.inner-list h2,
.inner-books .book-details h2,
.lecture-grid h2 { font-size: var(--type-card); font-weight: 700; }
.inner-intro h1 { font-size: var(--type-page); font-weight: 700; }

/* Header controls and faster navigation */
.site-header { gap: 18px; }
.brand { order: 1; }
.brand b { font-size: calc(16px * var(--font-scale)); font-weight: 700; }
.brand small { font-size: calc(12px * var(--font-scale)); font-weight: 400; }
.site-header nav { order: 2; }
.header-actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin-inline-start: 0;
}
.theme-button,
.font-button {
  width: auto;
  min-width: 62px;
  height: 42px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
}
.font-button b { font-size: 16px; line-height: 1; }
.theme-button span,
.font-button span { font-size: 10px; font-weight: 500; white-space: nowrap; }
.menu-button { order: initial; }
.menu-button i {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
}
@media (min-width: 1101px) {
  .site-header nav { gap: clamp(11px, 1.25vw, 21px); }
  .site-header nav a { font-size: calc(12px * var(--font-scale)); }
}
@media (max-width: 1100px) {
  .header-actions { margin-inline-start: auto; }
  .site-header nav { transition: none; }
}

/* About copy stays in one coherent reading column */
.compact-about {
  grid-template-areas:
    "title stats"
    "cta stats";
}
.about-copy { display: block; }
.compact-about .about-copy h2 { margin-bottom: 12px; }
.compact-about .about-note {
  margin: 0;
  max-width: 760px;
  line-height: 1.85;
}
.home-stats span {
  font-size: var(--type-small);
  font-weight: 400;
}
.home-stats strong { font-size: calc(28px * var(--font-scale)); }

/* Smaller announcements on desktop and mobile */
.announcements {
  padding-block: 20px;
  gap: 20px;
}
.announcement-list article {
  min-height: 82px;
  padding: 10px 12px;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 10px;
}
.announcement-date {
  width: 80px;
  grid-template-columns: 34px minmax(0, 1fr);
  padding-left: 9px;
  gap: 4px;
}
.announcement-date b { font-size: calc(25px * var(--font-scale)); }
.announcement-date span { font-size: calc(9px * var(--font-scale)); line-height: 1.35; }
.announcement-list h3 { margin: 3px 0 6px; font-size: calc(15px * var(--font-scale)); }
.announcement-list p,
.announcement-list small { font-size: calc(10px * var(--font-scale)); }

/* Articles: every card is exactly the same compact height */
.inner-grid.article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 172px;
  align-items: stretch;
  gap: 10px;
}
.inner-grid .article-card,
.design-2 .inner-grid .article-card,
.design-3 .inner-grid .article-card,
.design-3 .inner-grid .article-card:nth-child(2),
.design-4 .inner-grid .article-card,
.design-5 .inner-grid .article-card {
  position: relative;
  height: 172px !important;
  min-height: 0 !important;
  max-height: 172px !important;
  padding: 14px 15px !important;
  display: flex !important;
  flex-direction: column;
  align-self: stretch;
  overflow: hidden;
  border-color: var(--line) !important;
}
.inner-grid .article-card h2 {
  margin: 9px 0 7px;
  min-height: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.inner-grid .article-card .article-number {
  position: absolute;
  top: 45px;
  left: 15px;
  font-size: calc(22px * var(--font-scale));
  opacity: .12;
}
.inner-grid .article-card button {
  width: 100%;
  min-height: 31px;
  margin-top: auto;
  padding: 7px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  text-align: right;
}
.inner-grid.article-grid > .load-more {
  grid-column: 1 / -1;
  justify-self: center;
  width: 180px;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
}
.article-modal > article {
  width: min(620px, calc(100vw - 32px));
  max-height: min(78vh, 700px);
  padding: 30px;
}
.article-modal h2 {
  margin: 17px 0;
  font-size: calc(25px * var(--font-scale));
  line-height: 1.45;
}
.article-modal p {
  font-size: var(--type-body);
  line-height: 1.9;
}
.article-modal article > span { font-size: var(--type-small); }

@media (max-width: 920px) {
  .compact-about {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "stats" "cta";
  }
  .inner-grid.article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .academic-site {
    --type-display: calc(25px * var(--font-scale));
    --type-page: calc(34px * var(--font-scale));
    --type-section: calc(22px * var(--font-scale));
    --type-card: calc(16px * var(--font-scale));
    --type-body: calc(14px * var(--font-scale));
    --type-small: calc(12px * var(--font-scale));
    --type-control: calc(12px * var(--font-scale));
  }
  .site-header { min-height: 68px; padding-inline: 14px; gap: 7px; }
  .brand { gap: 7px; }
  .brand b { font-size: calc(13px * var(--font-scale)); }
  .brand small { font-size: calc(10px * var(--font-scale)) !important; }
  .brand-mark { width: 36px; height: 36px; }
  .header-actions { gap: 5px; }
  .theme-button,
  .font-button {
    min-width: 38px;
    width: 38px;
    height: 38px;
    padding: 0;
  }
  .theme-button span,
  .font-button span { display: none; }
  .menu-button { width: 38px; min-width: 38px; height: 38px; }

  .compact-hero-copy > .hero-bio { font-size: var(--type-body); line-height: 1.7; }
  .compact-about .about-note { font-size: var(--type-body); line-height: 1.75; }
  .home-stats span { font-size: var(--type-small); }
  .home-stats strong { font-size: calc(24px * var(--font-scale)); }

  .announcements { padding: 17px 18px; gap: 12px; }
  .announcement-list article {
    min-height: 74px;
    padding: 9px 10px;
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .announcement-date {
    width: 72px;
    grid-template-columns: 31px minmax(0, 1fr);
    padding-left: 8px;
  }
  .announcement-date b { font-size: calc(23px * var(--font-scale)); }
  .announcement-date span { font-size: calc(8px * var(--font-scale)); }
  .announcement-list h3 { font-size: calc(14px * var(--font-scale)); }
  .announcement-list p,
  .announcement-list small { font-size: calc(9px * var(--font-scale)); }

  .inner-grid.article-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 154px;
    gap: 8px;
  }
  .inner-grid .article-card,
  .design-2 .inner-grid .article-card,
  .design-3 .inner-grid .article-card,
  .design-3 .inner-grid .article-card:nth-child(2),
  .design-4 .inner-grid .article-card,
  .design-5 .inner-grid .article-card {
    height: 154px !important;
    min-height: 154px !important;
    max-height: 154px !important;
    padding: 12px 13px !important;
  }
  .inner-grid .article-card .article-number {
    top: 41px;
    left: 13px;
    font-size: calc(20px * var(--font-scale));
  }
  .article-modal > article { padding: 23px 19px; }
  .article-modal h2 { font-size: calc(21px * var(--font-scale)); }
  .inner-grid.article-grid > .load-more { width: 100%; margin-top: 8px; }
}

/* Final rhythm, alignment, and compact-control refinements */
.compact-hero::after {
  display: none !important;
  content: none !important;
}
.brand {
  row-gap: 5px;
}
.brand small {
  margin-top: 3px;
}
.font-button { order: 0; }
.theme-button { order: 1; }
.menu-button { order: 2; }

.home-stats > div {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  column-gap: 10px;
}
.home-stats strong {
  width: 68px;
  text-align: start;
}
.home-stats span {
  width: 100%;
  text-align: start;
}

.inner-grid.article-grid {
  grid-auto-rows: auto;
}
.inner-grid.article-grid > .load-more {
  width: 164px;
  min-width: 164px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  margin: 10px auto 0;
  padding: 0 18px;
  align-self: start;
  justify-self: center;
  border-radius: 999px;
}

@media (min-width: 921px) {
  .compact-hero::after {
    display: none;
  }
  .compact-about {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "stats"
      "cta";
    gap: 16px;
  }
  .compact-about .about-copy {
    max-width: 940px;
  }
  .compact-about .about-note {
    margin-top: 10px;
  }
  .home-stats {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .announcements {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .announcements-heading {
    align-self: auto;
  }
  .announcement-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .announcement-list article {
    min-height: 90px;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 13px;
  }
  .announcement-date {
    width: auto;
    min-height: 0;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 0;
    border: 0;
  }
  .announcement-list article > div:last-child {
    display: block;
  }
  .announcement-list article > div:last-child h3 {
    margin: 2px 0 4px;
    font-size: calc(16px * var(--font-scale));
  }
  .announcement-list article > div:last-child p {
    margin-top: 0;
    font-size: calc(11px * var(--font-scale));
  }
}

@media (max-width: 620px) {
  .brand {
    row-gap: 5px;
  }
  .brand small {
    margin-top: 4px;
  }
  .brand > span:last-child {
    transform: translateY(4px);
  }
  .home-stats {
    direction: ltr;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(66px, 1fr));
    border: 1px solid var(--line);
  }
  .home-stats > div {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: auto;
    min-height: 66px;
    direction: rtl;
    border: 0 !important;
  }
  .home-stats strong {
    width: auto;
    direction: rtl;
    text-align: center;
    font-size: calc(24px * var(--font-scale));
    font-variant-numeric: tabular-nums;
  }
  .home-stats > .stat-card-1 {
    grid-column: 2;
    grid-row: 2;
    border-left: 1px solid var(--line) !important;
  }
  .home-stats > .stat-card-2 {
    grid-column: 2;
    grid-row: 1;
    border-left: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .home-stats > .stat-card-3 {
    grid-column: 1;
    grid-row: 1;
    border-bottom: 1px solid var(--line) !important;
  }
  .home-stats > .mobile-stats-cta {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    min-height: 66px;
    padding: 9px 12px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    direction: rtl;
    color: var(--muted);
    text-align: center;
    font-size: calc(11px * var(--font-scale));
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
  }
  .compact-about > .about-cta {
    display: none;
  }
  .inner-grid.article-grid {
    grid-auto-rows: auto;
  }
  .inner-grid.article-grid > .load-more {
    width: 150px;
    min-width: 150px;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    margin: 8px auto 2px;
    padding: 0 14px;
  }
}

/* Administration */
.admin-dashboard {
  --admin-bg: #f5f1e9;
  --admin-surface: #fffdf8;
  --admin-ink: #281b1b;
  --admin-muted: #756b67;
  --admin-accent: #782536;
  --admin-line: rgba(64, 35, 36, .16);
  min-height: 100vh;
  padding: 32px clamp(18px, 5vw, 72px) 70px;
  color: var(--admin-ink);
  background: var(--admin-bg);
  font-family: "Thmanyah Sans", Tahoma, sans-serif;
}
.admin-dashboard * { box-sizing: border-box; font-family: inherit; }
.admin-head {
  max-width: 1380px;
  margin: 0 auto 28px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--admin-line);
}
.admin-head span,
.admin-section-head span { color: var(--admin-accent); font-size: 12px; font-weight: 700; }
.admin-head h1 { margin: 5px 0 0; font-size: 28px; }
.admin-head a { padding: 11px 16px; border: 1px solid var(--admin-line); font-size: 13px; font-weight: 700; }
.admin-warning,
.admin-stats,
.admin-tabs,
.admin-editor { max-width: 1380px; margin-inline: auto; }
.admin-warning { margin-bottom: 20px; padding: 18px; border: 1px solid #b77924; background: #fff6df; }
.admin-warning h2 { margin: 0 0 5px; font-size: 18px; }
.admin-warning p { margin: 0 0 12px; color: #735820; font-size: 14px; }
.admin-warning a { display: inline-flex; padding: 9px 13px; background: #735820; color: #fff; font-weight: 700; font-size: 12px; }
.admin-stats { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 12px; margin-bottom: 22px; }
.admin-stats article { min-height: 120px; padding: 18px; border: 1px solid var(--admin-line); background: var(--admin-surface); display: flex; flex-direction: column; justify-content: space-between; }
.admin-stats span { color: var(--admin-muted); font-size: 13px; }
.admin-stats strong { color: var(--admin-accent); font-size: 34px; }
.admin-stats p { margin: 6px 0 0; color: var(--admin-muted); font-size: 12px; line-height: 1.6; }
.admin-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 10px; }
.admin-tabs button { flex: 0 0 auto; padding: 10px 14px; border: 1px solid var(--admin-line); background: transparent; color: var(--admin-ink); font-size: 12px; font-weight: 700; }
.admin-tabs button.active { background: var(--admin-accent); color: #fff; border-color: var(--admin-accent); }
.admin-editor { margin-top: 8px; padding: 24px; border: 1px solid var(--admin-line); background: var(--admin-surface); }
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.admin-section-head h2 { margin: 4px 0 0; font-size: 24px; }
.admin-section-head > button { padding: 10px 15px; background: var(--admin-accent); color: #fff; font-size: 12px; font-weight: 700; }
.admin-profile-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.admin-profile-form label:nth-child(n+3) { grid-column: 1 / -1; }
.admin-dashboard label { display: flex; flex-direction: column; gap: 6px; }
.admin-dashboard label > span { color: var(--admin-muted); font-size: 11px; font-weight: 700; }
.admin-dashboard input,
.admin-dashboard textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--admin-line);
  border-radius: 0;
  outline: 0;
  color: var(--admin-ink);
  background: #fff;
  font-size: 14px;
}
.admin-dashboard textarea { min-height: 88px; resize: vertical; line-height: 1.65; }
.admin-dashboard input:focus,
.admin-dashboard textarea:focus { border-color: var(--admin-accent); }
.admin-stat-editor { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.admin-stat-editor > div { display: grid; grid-template-columns: 74px 1fr; gap: 6px; }
.admin-items { display: grid; gap: 10px; }
.admin-items article { display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: start; padding: 15px; border: 1px solid var(--admin-line); }
.admin-item-number { color: var(--admin-accent); font-size: 12px; padding-top: 25px; }
.admin-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-fields .wide { grid-column: span 2; }
.delete-item { margin-top: 22px; padding: 8px 10px; color: #9e2727; background: transparent; border: 1px solid rgba(158,39,39,.24); font-size: 11px; }
.admin-save { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--admin-line); display: flex; align-items: center; gap: 15px; }
.admin-save button { min-height: 44px; padding: 10px 22px; background: var(--admin-accent); color: #fff; font-size: 13px; font-weight: 700; }
.admin-save button:disabled { opacity: .4; cursor: not-allowed; }
.admin-save span { color: var(--admin-muted); font-size: 12px; }
@media (max-width: 760px) {
  .admin-dashboard { padding: 20px 14px 50px; }
  .admin-head { align-items: flex-start; }
  .admin-head h1 { font-size: 21px; }
  .admin-head a { font-size: 11px; padding: 8px 10px; }
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
  .admin-stats .country-stat { grid-column: 1 / -1; }
  .admin-editor { padding: 16px 12px; }
  .admin-profile-form { grid-template-columns: 1fr; }
  .admin-profile-form label { grid-column: auto !important; }
  .admin-stat-editor { grid-template-columns: 1fr; }
  .admin-fields { grid-template-columns: 1fr; }
  .admin-fields .wide { grid-column: auto; }
  .admin-items article { grid-template-columns: 24px 1fr; }
  .delete-item { grid-column: 2; width: fit-content; margin-top: 0; }
  .admin-save { align-items: flex-start; flex-direction: column; }
}

.prototype-bar { display: none !important; }

/* Keep final edition grid rules after all legacy prototype selectors. */
.section-portals { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.site-header nav { flex-wrap: wrap; justify-content: center; }
@media (max-width: 1100px) {
  .site-header nav { flex-wrap: nowrap; justify-content: initial; }
}
@media (max-width: 760px) {
  .section-portals { grid-template-columns: 1fr !important; }
}

/* Approved design 1 — final responsive polish */
.theme-button span,
.font-button span { display: none !important; }
.theme-button,
.font-button {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}
.theme-button svg { width: 17px; height: 17px; }

/* The three statistics and the CV link form one balanced 2 × 2 unit everywhere. */
.compact-about {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "title" "stats" !important;
  gap: 18px !important;
}
.compact-about > .about-cta { display: none !important; }
.home-stats {
  width: 100% !important;
  direction: ltr;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(76px, 1fr)) !important;
  border: 1px solid var(--line);
}
.home-stats > div,
.home-stats > .mobile-stats-cta {
  width: auto !important;
  min-height: 76px !important;
  direction: rtl;
  border: 0 !important;
}
.home-stats > .stat-card-1 { grid-column: 2; grid-row: 2; border-left: 1px solid var(--line) !important; }
.home-stats > .stat-card-2 { grid-column: 2; grid-row: 1; border-left: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.home-stats > .stat-card-3 { grid-column: 1; grid-row: 1; border-bottom: 1px solid var(--line) !important; }
.home-stats > .mobile-stats-cta {
  grid-column: 1;
  grid-row: 2;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  color: var(--muted);
  font-size: var(--type-control);
  font-weight: 700;
  white-space: nowrap;
}

/* Compact PDF action card: no long preview, no overflow on phones. */
.cv-sections { min-width: 0; }
.cv-document-card {
  width: min(100%, 470px);
  min-height: 112px;
  margin: 0 0 22px;
  padding: 15px !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 15px !important;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--bg);
}
.cv-pdf-icon {
  width: 64px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
.cv-document-copy { min-width: 0; }
.cv-document-card h2 { margin: 4px 0 10px; font-size: var(--type-card); }
.cv-document-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.cv-document-actions a { min-height: 34px; padding: 7px 10px; }

/* Misc cards now use local, compressed raster artwork. */
.misc-grid { align-items: start; }
.misc-card { padding: 10px; overflow: hidden; }
.misc-image-button img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}

/* Professional, consistent contact cards and SVG icons. */
.contact-grid { max-width: 980px; }
.contact-grid > a {
  min-height: 96px;
  padding: 16px 18px;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  gap: 13px;
  background: var(--bg);
  transition: border-color .18s ease, transform .18s ease;
}
.contact-grid > a:hover { transform: translateY(-2px); }
.contact-grid > a > .contact-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--bg));
}
.contact-icon svg { width: 21px; height: 21px; }
.contact-grid h2 { font-size: calc(15px * var(--font-scale)); }

/* Every page uses the same restrained footer. */
.compact-footer { min-height: 84px; }
.footer-signature > span { display: block; }
.footer-signature b { font-size: calc(13px * var(--font-scale)); }

@media (min-width: 921px) {
  .compact-about .about-copy { max-width: 960px; }
  .home-stats { max-width: 920px; }
  .home-stats > div { justify-content: center; gap: 14px; }
}

@media (max-width: 760px) {
  .theme-button,
  .font-button,
  .menu-button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
  }
  .menu-button i { width: 18px; }
  .header-actions { gap: 4px !important; }
  .site-header { padding-inline: 12px; gap: 6px; }
  .home-stats { grid-template-rows: repeat(2, minmax(68px, 1fr)) !important; }
  .home-stats > div,
  .home-stats > .mobile-stats-cta { min-height: 68px !important; }
  .home-stats > .mobile-stats-cta { padding: 8px 10px; font-size: calc(11px * var(--font-scale)); }
  .cv-layout { min-width: 0; }
  .cv-document-card {
    width: 100%;
    min-height: 104px;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding: 12px !important;
  }
  .cv-pdf-icon { width: 54px; height: 66px; font-size: 12px; }
  .cv-document-card h2 { margin-bottom: 8px; }
  .cv-document-actions a { min-height: 32px; padding: 6px 8px; font-size: calc(10px * var(--font-scale)); }
  .misc-grid,
  .contact-grid { width: calc(100% - 28px); padding-block: 20px 34px; }
  .contact-grid > a {
    min-height: 78px;
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    padding: 12px;
  }
  .contact-grid > a > .contact-icon { width: 40px; height: 40px; border-radius: 10px; }
  .contact-icon svg { width: 19px; height: 19px; }
  .compact-footer { min-height: 76px; padding-inline: 16px; gap: 12px; }
  .footer-signature .logo-mark { width: 32px; height: 32px; }
  .footer-socials { gap: 5px; }
  .footer-socials a { width: 30px; height: 30px; }
}

/* Revision 18 — unified responsive layout and reliable interactive controls */
.compact-about,
.announcements,
.portals-heading,
.section-portals {
  padding-inline: clamp(22px, 9vw, 140px);
}
.home-stats {
  max-width: none !important;
  border: 0 !important;
  gap: 12px !important;
}
.home-stats > div,
.home-stats > .mobile-stats-cta {
  min-height: 86px !important;
  border: 1px solid var(--line) !important;
  background: var(--bg);
}
.home-stats > .stat-card-1,
.home-stats > .stat-card-2,
.home-stats > .stat-card-3 {
  border: 1px solid var(--line) !important;
}
.portals-heading {
  padding-top: 28px;
  padding-bottom: 0;
}
.portals-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-section);
  color: var(--ink);
}
.portals-heading p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--type-body);
}
.section-portals { padding-top: 18px !important; }

/* The biography, portrait and PDF actions are one compact introduction card. */
.cv-layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 28px !important;
}
.cv-summary {
  position: static !important;
  width: 100%;
  padding: 22px !important;
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) auto !important;
  gap: 20px !important;
  align-items: center !important;
}
.cv-summary img {
  width: 96px !important;
  height: 124px !important;
  grid-row: auto !important;
}
.cv-summary-copy { min-width: 0; margin: 0 !important; display: block !important; }
.cv-summary h2 { margin: 0 0 8px !important; }
.cv-summary p { margin: 0 !important; max-width: 660px; }
.cv-summary-actions {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 8px !important;
}
.cv-summary-actions a {
  min-width: 150px;
  min-height: 38px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: var(--type-control);
  font-weight: 700;
  white-space: nowrap;
}
.cv-summary-actions a:first-child { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.cv-document-card { display: none !important; }

/* Articles use real links and all cards keep the same compact geometry. */
.inner-grid .article-card .article-read-link {
  width: 100%;
  min-height: 31px;
  margin-top: auto;
  padding: 7px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  font-size: var(--type-control);
  font-weight: 700;
  text-align: right;
  cursor: pointer;
}
.inner-grid .article-card[hidden],
.inner-grid.article-grid > .load-more[hidden] { display: none !important; }
.inner-grid.article-grid > .load-more {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

/* Misc image actions and the enlarged image viewer. */
.misc-card { display: flex; flex-direction: column; }
.misc-card-actions {
  min-height: 42px !important;
  padding: 8px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.misc-card-actions button,
.misc-card-actions a,
.image-modal-actions a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  font-size: var(--type-control);
  font-weight: 700;
  cursor: pointer;
}
.image-modal-panel {
  position: relative;
  width: min(980px, calc(100vw - 32px));
  max-height: 92vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
}
.image-modal-panel img { max-width: 100%; max-height: calc(92vh - 90px); }
.image-modal-panel .modal-close {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
}
.image-modal-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Contact cards use a restrained line icon instead of the blue emoji arrow. */
.contact-arrow { display: grid; place-items: center; color: var(--accent); }
.contact-arrow svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .site-header .font-button,
  .site-header .theme-button,
  .site-header .menu-button {
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
  }
  .font-button b { font-size: 14px; }
  .theme-button svg { width: 15px; height: 15px; }
  .menu-button i { width: 16px; }
  .compact-about,
  .announcements,
  .portals-heading,
  .section-portals { padding-inline: 18px; }
  .home-stats { gap: 8px !important; }
  .home-stats > div,
  .home-stats > .mobile-stats-cta { min-height: 68px !important; }
  .portals-heading { padding-top: 22px; }
  .portals-heading p { font-size: var(--type-small); }
  .cv-layout { padding-inline: 18px !important; }
  .cv-summary {
    padding: 15px !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 13px !important;
  }
  .cv-summary img { width: 76px !important; height: 98px !important; }
  .cv-summary-actions {
    grid-column: 1 / -1;
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cv-summary-actions a { min-width: 0; min-height: 36px; padding: 7px 8px; }
  .misc-card-actions { grid-template-columns: repeat(2, 1fr); }
  .contact-grid > a { grid-template-columns: 38px minmax(0, 1fr) 18px; }
  .contact-grid h2 { font-size: calc(13px * var(--font-scale)); }
  .image-modal-panel { width: calc(100vw - 20px); padding: 10px; }
}

/* Revision 20: final hierarchy, article choices and responsive refinements */
.hero-about-note {
  margin: 10px 0 0;
  max-width: 720px;
  color: var(--muted);
  font-size: var(--type-body);
  line-height: 1.8;
}
.compact-about .about-copy > span,
.announcements-heading > span {
  display: block;
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-size: var(--type-section) !important;
  font-weight: 700 !important;
  line-height: 1.35;
}
.compact-about .about-copy h2,
.announcements-heading h2 {
  margin-top: 7px;
  color: var(--accent);
  font-family: var(--font-sans);
  font-size: var(--type-body) !important;
  font-weight: 500 !important;
  line-height: 1.65;
}
.article-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.article-card-actions .article-read-link,
.article-card-actions .article-source-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  font: 700 var(--type-small)/1.4 var(--font-sans);
  cursor: pointer;
}
.article-card-actions .article-read-link:hover,
.article-card-actions .article-source-link:hover { border-color: var(--accent); }
.article-modal .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.article-modal .modal-actions a,
.article-modal .modal-actions button {
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  font: 700 var(--type-small)/1 var(--font-sans);
}

@media (max-width: 760px) {
  .hero-about-note { margin-top: 8px; font-size: var(--type-small); line-height: 1.7; }
  .article-card-actions { grid-template-columns: 1fr; }
}

/* Revision 21: aligned home rhythm, clean article cards and a calm reader */
.compact-hero-copy > .hero-bio {
  max-width: 760px;
  margin-top: 16px;
  font-size: var(--type-body);
  line-height: 1.8;
}
.compact-hero-copy > .hero-bio span {
  display: inline !important;
  white-space: normal !important;
}
.compact-about,
.announcements,
.portals-heading,
.section-portals {
  padding-inline: clamp(22px, 7vw, 104px) !important;
}
.compact-about .about-copy h2,
.announcements-heading h2,
.portals-heading p {
  font-family: var(--font-sans) !important;
  font-size: var(--type-body) !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
}
.portals-heading p { margin-top: 7px; }

.inner-grid.article-grid {
  width: min(1100px, calc(100% - 44px));
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 16px !important;
  margin-inline: auto;
}
.inner-grid .article-card,
.design-2 .inner-grid .article-card,
.design-3 .inner-grid .article-card,
.design-3 .inner-grid .article-card:nth-child(2),
.design-4 .inner-grid .article-card,
.design-5 .inner-grid .article-card {
  height: auto !important;
  min-height: 220px !important;
  max-height: none !important;
  padding: 21px !important;
  overflow: visible;
  border: 1px solid var(--line) !important;
  background: var(--bg);
}
.inner-grid .article-card:hover {
  transform: none;
  border-color: var(--accent) !important;
}
.inner-grid .article-card .article-number {
  top: 52px;
  left: 20px;
  font-size: calc(25px * var(--font-scale));
}
.inner-grid .article-card h2 {
  margin: 17px 0 22px;
  font-size: calc(20px * var(--font-scale));
  line-height: 1.55;
  -webkit-line-clamp: 3;
}
.article-card-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.inner-grid .article-card .article-card-actions button,
.article-card-actions .article-source-link {
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: center;
}
.article-card-actions .article-read-link {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--bg) !important;
}
.inner-grid.article-grid > .load-more {
  width: auto;
  min-width: 138px;
  min-height: 40px;
  margin-top: 8px;
  padding: 8px 20px;
}

.article-modal {
  padding: 18px;
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  backdrop-filter: blur(4px);
}
.article-modal > .article-reader {
  width: min(860px, 100%);
  max-height: 90vh;
  padding: clamp(28px, 5vw, 56px) !important;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: 0 22px 65px rgba(31, 18, 18, .12);
}
.article-modal .article-reader h2 {
  max-width: 720px;
  margin: 16px 0 25px;
  font-size: calc(28px * var(--font-scale));
  line-height: 1.45;
}
.article-reader-body {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.article-reader-body p {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: var(--type-body);
  line-height: 2;
  text-align: right;
}
.article-reader-body .article-reader-note { color: var(--muted); }
.article-modal .modal-actions { justify-content: flex-start; }
.article-modal .modal-actions button {
  min-width: 90px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.contact-ltr {
  direction: ltr !important;
  unicode-bidi: isolate;
  display: inline-block;
}

@media (max-width: 760px) {
  .compact-about,
  .announcements,
  .portals-heading,
  .section-portals { padding-inline: 20px !important; }
  .compact-hero-copy > .hero-bio { font-size: var(--type-body); line-height: 1.75; }
  .inner-grid.article-grid {
    width: calc(100% - 28px);
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .inner-grid .article-card,
  .design-2 .inner-grid .article-card,
  .design-3 .inner-grid .article-card,
  .design-3 .inner-grid .article-card:nth-child(2),
  .design-4 .inner-grid .article-card,
  .design-5 .inner-grid .article-card {
    min-height: 205px !important;
    padding: 17px !important;
  }
  .inner-grid .article-card h2 { font-size: calc(18px * var(--font-scale)); }
  .article-card-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .article-card-actions .article-read-link,
  .article-card-actions .article-source-link { font-size: calc(10px * var(--font-scale)); }
  .article-modal { padding: 8px; }
  .article-modal > .article-reader { padding: 48px 20px 24px !important; max-height: 94vh; }
  .article-modal .article-reader h2 { font-size: calc(22px * var(--font-scale)); }
  .article-reader-body p { font-size: var(--type-body); line-height: 1.9; }
}