/* ── 1. RESET & DEFAULTS ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* ── 2. PALETTE + DARK MODE ───────────────────────────────── */
:root {
  /* Monochrome cream palette — a single warm off-white throughout.
     Section signalling is done by tab underline + bold weight, not colour. */
  --page-bg:    #faf6ec;
  --sidebar-bg: #f4eedd;
  --ink:        #1c1a17;
  --ink-muted:  rgba(28,26,23,0.58);
  --rule:       rgba(28,26,23,0.13);
  --topbar-bg:  #1a1a1a;
  --footer-bg:  #0f0d0a;
  /* Section background hooks all resolve to the same page colour so the
     coloured tab ribbon flattens into one calm bar. Kept as variables so
     existing rules that reference them still work. */
  --about-bg:   var(--page-bg);
  --proj-bg:    var(--page-bg);
  --news-bg:    var(--page-bg);
  --work-bg:    var(--page-bg);
  --map-bg:     var(--page-bg);
}
body.page-about    { --page-bg: #faf6ec; }
body.page-work     { --page-bg: #faf6ec; }
body.page-portfolio{ --page-bg: #faf6ec; }
body.page-map      { --page-bg: #faf6ec; }
body.page-project  { --page-bg: #faf6ec; }

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg:    #15130f;
    --sidebar-bg: #1a1814;
    --ink:        #ece1c8;
    --ink-muted:  rgba(236,225,200,0.55);
    --rule:       rgba(236,225,200,0.14);
    --topbar-bg:  #0f0d0a;
    --footer-bg:  #0a0907;
    --about-bg:   var(--page-bg);
    --proj-bg:    var(--page-bg);
    --news-bg:    var(--page-bg);
    --work-bg:    var(--page-bg);
    --map-bg:     var(--page-bg);
  }
  body.page-about    { --page-bg: #15130f; }
  body.page-work     { --page-bg: #15130f; }
  body.page-portfolio{ --page-bg: #15130f; }
  body.page-map      { --page-bg: #15130f; }
  body.page-project  { --page-bg: #15130f; }
  img { filter: brightness(0.92) contrast(1.05); }
}


/* ── 3. TOP RIBBON (topbar + tabnav) ──────────────────────── */
.topbar {
  background: var(--topbar-bg); color: #fff;
  text-align: center;
  padding: 0 20px;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 44px;
  line-height: 44px;
  z-index: 300;
  box-sizing: border-box;
}
.topbar__lang {
  position: absolute; left: 20px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px; letter-spacing: 0.1em;
}
.topbar__lang--current { color: #fff; border-bottom: 1px solid #fff; }
.topbar__lang a { color: #888; }
.topbar__cv {
  position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%);
  color: #aaa; font-size: 11px;
  letter-spacing: 0.12em;
  border: 1px solid #555;
  padding: 4px 12px;
  font-weight: 500; text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
}
.topbar__cv:hover { color: #fff; border-color: #fff; }

.tabnav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  position: fixed;
  top: 44px; left: 0; right: 0;
  z-index: 200;
}
.tabnav__tab {
  display: block; text-align: center;
  padding: 22px 20px;
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  opacity: 1;
  position: relative;
  transition: filter 0.15s, background 0.15s;
  border-right: 1px solid var(--rule);
}
.tabnav__tab:last-child { border-right: none; }
.tabnav__tab:hover { background: rgba(28,26,23,0.04); filter: none; }
/* hover handled above */
.tabnav__tab.active {
  font-weight: 900;
}
.tabnav__tab.active::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--ink);
  opacity: 0.7;
}

.tabnav__tab--about { background: var(--about-bg); }
.tabnav__tab--proj  { background: var(--proj-bg); }
.tabnav__tab--news  { background: var(--news-bg); }
.tabnav__tab--work  { background: var(--work-bg); }
.tabnav__tab--map   { background: var(--map-bg); }


/* ── 4. SHELL + SIDEBAR ───────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 33.3333% 1fr;
  min-height: 100vh;
  padding-top: 130px;
}
.sidebar {
  background: var(--sidebar-bg);
  position: sticky;
  top: 130px;
  height: calc(100vh - 130px);
  overflow-y: auto;
  padding: 32px 28px 60px;
  border-right: 1px solid var(--rule);
}
.sidebar__page-title {
  font-size: 96px; font-weight: 900;
  letter-spacing: -0.02em; text-transform: uppercase;
  line-height: 0.95; margin-bottom: 36px;
  color: var(--ink);
}

/* Editorial period after sidebar page title — small typographic flourish */
.sidebar__page-title::after {
  content: ".";
  color: var(--ink-muted);
}

.sidebar__intro {
  font-size: 13px; line-height: 1.55;
  color: var(--ink-muted); margin-bottom: 28px;
}
.sidebar__section { margin-bottom: 18px; }
.sidebar__label {
  display: block;
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 4px;
}
.sidebar__label--muted { font-weight: 400; color: var(--ink-muted); letter-spacing: 0.04em; }
.sidebar__label:hover { text-decoration: underline; }
.sidebar__sub { list-style: none; padding-left: 0; }
.sidebar__sub-link {
  display: block;
  font-size: 17px; font-weight: 400;
  color: var(--ink-muted);
  padding: 2px 0 2px 14px; line-height: 1.7;
}
.sidebar__sub-link:hover { color: var(--ink); text-decoration: underline; }
.sidebar__contact {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-muted);
  line-height: 2; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sidebar__contact a { color: var(--ink-muted); }
.sidebar__contact a:hover { text-decoration: underline; color: var(--ink); }


/* ── 5. CONTENT SECTIONS, HEADINGS ────────────────────────── */
.content {
  background: var(--page-bg);
  padding: 40px 44px 100px;
  min-height: calc(100vh - 130px);
  color: var(--ink);
}
/* ── ABOUT INTRO (prose bio) ──────────────────────────────── */
.about-intro {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 44px;
  align-items: start;
  margin-bottom: 56px;
  padding-bottom: 40px;
  border-bottom: 1.5px solid var(--rule);
}
.about-intro__portrait {
  width: 200px; height: 248px;
  object-fit: cover; object-position: center top;
  display: block; filter: grayscale(100%);
}
.about-intro__name {
  font-size: 40px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.01em;
  line-height: 1.05; color: var(--ink);
  margin-bottom: 6px;
}
.about-intro__role {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 22px;
}
.about-prose p {
  font-size: 19px; line-height: 1.65;
  color: var(--ink);
  margin-bottom: 16px;
  max-width: 60ch;
}
.about-prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-muted);
  transition: text-decoration-color 0.15s ease;
}
.about-prose a:hover { text-decoration-color: var(--ink); }
.about-intro__cv {
  display: inline-block;
  margin-top: 10px;
  border: 1.5px solid var(--ink);
  padding: 7px 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.about-intro__cv:hover { background: var(--ink); color: var(--page-bg); }
@media (max-width: 720px) {
  .about-intro { grid-template-columns: 1fr; gap: 24px; }
  .about-intro__portrait { width: 160px; height: 198px; }
  .about-prose p { font-size: 17px; }
}

.section { margin-bottom: 56px; scroll-margin-top: 150px; }
.section__heading {
  font-size: 52px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--ink);
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--rule);
}
.cat-label {
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 18px 0 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-muted);
}


/* ── 6. ENTRY CARDS (index + projects) ────────────────────── */
.entry {
  display: grid;
  grid-template-columns: 240px 1fr;
  border-bottom: 1.5px solid var(--rule);
  cursor: pointer;
  transition: background 0.12s;
}
.entry:hover { background: rgba(0,0,0,0.06); }
@media (prefers-color-scheme: dark) {
  .entry:hover { background: rgba(255,255,255,0.05); }
}
.entry--text { grid-template-columns: 1fr; }
.entry--link { cursor: pointer; }
.entry__img {
  width: 240px; aspect-ratio: 4/3;
  object-fit: cover; display: block;
  filter: grayscale(20%);
}
.entry__body {
  padding: 16px 20px 20px;
  display: flex; flex-direction: column;
}
.entry__top {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 10px; gap: 12px;
}
.entry__year { font-size: 15px; color: var(--ink); }
.entry__read {
  display: inline-block;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  background: rgba(26,26,26,0.08);
  padding: 6px 12px;
  border: 1.5px solid rgba(26,26,26,0.55);
  border-radius: 2px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.entry:hover .entry__read,
.entry:focus-visible .entry__read {
  background: var(--ink);
  color: var(--page-bg);
  border-color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .entry__read {
    background: rgba(232,230,225,0.08);
    border-color: rgba(232,230,225,0.45);
  }
}
.entry__title {
  font-size: 26px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  line-height: 1.25; color: var(--ink);
  margin-bottom: 8px;
}
.entry--text .entry__title {
  font-size: 14px; text-transform: none;
  font-weight: 600; letter-spacing: 0;
}
.entry__sub { font-size: 16px; color: var(--ink); line-height: 1.5; }
.entry--text .entry__sub { font-size: 13px; color: var(--ink-muted); }


/* ── 7. EDUCATION / AWARD / EVENT ENTRIES (about page) ────── */
.edu-entry, .award-entry, .event-entry {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0 24px;
  padding: 18px 0;
  border-bottom: 1.5px solid var(--rule);
}
.edu-entry__year, .award-entry__year, .event-entry__year {
  font-size: 15px; color: var(--ink-muted);
  letter-spacing: 0.03em; padding-top: 3px; line-height: 1.5;
}
.edu-entry__degree, .award-entry__title {
  font-size: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em;
  line-height: 1.2; margin-bottom: 4px;
}
.award-entry__title { font-size: 19px; }
.edu-entry__institution { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.edu-entry__detail, .award-entry__sub, .event-entry__sub {
  font-size: 14px; color: var(--ink-muted);
  line-height: 1.5; margin-top: 3px;
}
.event-entry__title {
  font-size: 18px; font-weight: 600;
  letter-spacing: 0.01em; line-height: 1.3;
  margin-bottom: 3px;
}
.edu-entry__tag {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(0,0,0,0.1);
  padding: 2px 7px; margin-top: 6px;
  border-radius: 2px;
}


/* ── 10. PROJECT DETAIL PAGES ─────────────────────────────── */
.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 160px 40px 80px;
}
.eyebrow {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 12px;
}
.project-header {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1.5px solid var(--rule);
}
.project-header__title {
  font-size: 64px; font-weight: 900;
  letter-spacing: -0.015em; line-height: 0.95;
  margin-bottom: 18px;
  color: var(--ink);
}
.project-header__title em { font-style: italic; font-weight: 400; }
.project-header__sub {
  font-size: 17px; line-height: 1.5;
  color: var(--ink); max-width: 50ch;
}
.project-header__sub mark {
  background: rgba(201,128,96,0.22);
  padding: 0 4px; color: inherit;
}
.project-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  font-size: 13px;
  align-content: start;
}
.project-meta dt {
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--ink-muted);
}
.project-meta dd { color: var(--ink); }
.project-hero { margin-bottom: 48px; }
.project-hero img {
  width: 100%; height: auto; display: block;
  border-radius: 2px;
}
.caption {
  font-size: 12px; color: var(--ink-muted);
  letter-spacing: 0.02em; font-style: italic;
}
.project-body {
  display: block;
  max-width: 70ch;
  margin: 0 auto 60px;
  font-size: 16px; line-height: 1.7;
  color: var(--ink);
}
.project-body p { margin-bottom: 1.1em; }
.project-body h2,
.project-body .section-title {
  font-size: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 2em 0 0.8em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.pullquote {
  font-size: 22px; line-height: 1.4;
  font-style: italic; color: var(--ink);
  border-left: 3px solid var(--work-bg);
  padding: 6px 0 6px 20px;
  margin: 32px 0;
  max-width: 60ch;
}
.gallery { display: grid; gap: 20px; margin: 32px 0; }
.gallery--full { grid-template-columns: 1fr; }
.gallery--two  { grid-template-columns: 1fr 1fr; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border-radius: 2px; }
.gallery figcaption {
  font-size: 12px; color: var(--ink-muted);
  margin-top: 8px; font-style: italic;
}
.sig {
  display: block; margin-top: 48px;
  font-size: 13px; color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: currentColor;
  border-radius: 50%;
  margin: 0 6px 2px;
  vertical-align: middle;
}
.project-nav {
  display: flex; justify-content: space-between;
  gap: 20px; padding-top: 28px;
  border-top: 1.5px solid var(--rule);
  margin-top: 48px;
}
.project-nav a {
  display: block; flex: 1;
  padding: 14px 18px;
  border: 1.5px solid var(--rule);
  transition: background 0.12s, border-color 0.12s;
}
.project-nav a:hover {
  background: rgba(0,0,0,0.05);
  border-color: var(--ink);
}
.project-nav__label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: 4px;
}
.project-nav__title {
  display: block;
  font-size: 15px; font-weight: 600;
  color: var(--ink);
}
.project-back {
  display: inline-flex;
  align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 28px;
  padding: 6px 10px;
  border: 1.5px solid var(--rule);
  border-radius: 2px;
  transition: color 0.12s, border-color 0.12s;
}
.project-back:hover { color: var(--ink); border-color: var(--ink); }


/* ── 12. READING TEXT STYLE ──────────────────────────────── */
.reading {
  font-size: 17px; line-height: 1.7;
  max-width: 65ch; color: var(--ink);
  font-weight: 400; letter-spacing: 0.005em;
  text-wrap: pretty;
}
.reading p { margin-bottom: 1.1em; }
.reading p:last-child { margin-bottom: 0; }
.reading h1, .reading h2, .reading h3 {
  margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.25;
}
.reading h1:first-child, .reading h2:first-child, .reading h3:first-child { margin-top: 0; }
.reading a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.reading a:hover { text-decoration-thickness: 2px; }
.reading em { font-style: italic; }
.reading strong { font-weight: 700; }
.reading ul, .reading ol { margin: 0 0 1.1em 1.4em; }
.reading li { margin-bottom: 0.4em; }
.reading blockquote {
  margin: 1.2em 0; padding-left: 1em;
  border-left: 3px solid var(--rule);
  color: var(--ink-muted); font-style: italic;
}
.reading code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: rgba(0,0,0,0.06);
  padding: 1px 5px; border-radius: 3px;
}


/* ── 13. FOOTER ──────────────────────────────────────────── */
.footer {
  background: var(--footer-bg);
  color: #888;
  padding: 16px 28px;
  font-size: 12px;
  display: flex; justify-content: space-between;
  letter-spacing: 0.04em;
}


/* ── 14. ACCESSIBILITY HELPERS ───────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: 10px 16px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  z-index: 999;
}
.skip-link:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── 15. RESPONSIVE ──────────────────────────────────────── */
/* Tablet + phone (<= 720px) */
@media (max-width: 720px) {
  /* prevent any element from forcing horizontal scroll */
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; height: auto; }
  a { overflow-wrap: break-word; }

  /* Fixed header: shrink so less screen is eaten */
  .topbar { padding: 0 14px; font-size: 12px; letter-spacing: 0.12em; height: 36px; line-height: 36px; }
  .topbar__lang { left: 12px; font-size: 10px; }
  .topbar__cv { right: 12px; padding: 3px 8px; font-size: 10px; }
  .tabnav { top: 36px; }
  .tabnav__tab { font-size: 13px; padding: 13px 4px; letter-spacing: 0.05em; font-weight: 700; }

  /* Shell stacks; content sits below fixed nav (~38 + ~46 = ~84) */
  .shell { grid-template-columns: 1fr; padding-top: 96px; }

  /* Sidebar becomes a slim strip above content */
  .sidebar {
    position: static; height: auto; top: auto;
    border-right: none; border-bottom: 1px solid var(--rule);
    padding: 20px 18px 22px;
    overflow: visible;
  }
  .sidebar__page-title { font-size: 48px; margin-bottom: 18px; line-height: 1; }
  .sidebar__page-title::after { font-size: 36px; }
  .sidebar__intro { font-size: 13px; line-height: 1.55; }
  .sidebar__section { margin-bottom: 12px; }
  .sidebar__label { font-size: 13px; }
  .sidebar__sub-link { font-size: 12px; }
  .sidebar__contact { margin-top: 18px; font-size: 12px; }

  /* Content padding */
  .content { padding: 22px 18px 60px; }

  /* Section anchors: shorter offset so jumps land below header */
  .section { margin-bottom: 40px; scroll-margin-top: 96px; }
  .section__heading { font-size: 30px; margin-bottom: 18px; letter-spacing: -0.01em; }

  /* About bio strip: stack portrait above text, center align */
  .about-intro {
    grid-template-columns: 1fr;
    gap: 18px 0;
    padding: 0 0 28px;
  }
  .about-intro__portrait {
    width: 160px; height: 198px;
    margin: 0 auto;
  }
  .about-intro__text { text-align: left; }
  .about-intro__name { font-size: 28px; margin-bottom: 4px; }
  .about-intro__role { font-size: 12px; margin-bottom: 14px; letter-spacing: 0.08em; }
  .about-prose p { font-size: 16px; line-height: 1.6; }
  .about-intro__cv { font-size: 11px; padding: 8px 14px; margin-top: 8px; }

  /* Work / research entry cards (with image) */
  .entry { grid-template-columns: 110px 1fr; gap: 0 14px; }
  .entry__img { width: 110px; height: auto; }
  .entry__body { padding: 14px 14px 18px; min-width: 0; }
  .entry__title { font-size: 14px; line-height: 1.3; letter-spacing: 0; }
  .entry__sub { font-size: 12.5px; line-height: 1.5; word-break: normal; overflow-wrap: break-word; hyphens: none; }
  .entry__top { gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
  .entry__year { font-size: 11px; }
  .entry__read { font-size: 10px; padding: 4px 9px; letter-spacing: 0.08em; }

  /* Publication entries (text-only, no image) — force pure BLOCK layout, no grid */
  .entry--text {
    display: block !important;
    padding: 0 !important;
  }
  .entry--text .entry__body {
    display: block !important;
    padding: 16px 12px 18px !important;
    width: auto !important;
    min-width: 0 !important;
  }
  .entry--text .entry__top {
    display: flex; flex-direction: row;
    justify-content: space-between; align-items: baseline;
    gap: 8px; margin-bottom: 8px;
  }
  .entry--text .entry__title {
    display: block;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px 0 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    white-space: normal !important;
  }
  .entry--text .entry__sub {
    display: block;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--ink-muted) !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    white-space: normal !important;
    margin: 0 !important;
  }

  /* Education / awards / events: tighter columns */
  .edu-entry, .award-entry, .event-entry { grid-template-columns: 70px 1fr; gap: 0 12px; }

  /* Tools (ongoing projects): single column */
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { padding: 18px 18px 22px; border-right: none; }
  .tool-card__title { font-size: 16px; }
  .tool-card__desc { font-size: 13px; }

  /* Teaching table: tighter and readable */
  .teaching-entry { grid-template-columns: 90px 1fr; gap: 0 14px; padding: 12px 4px; }
  .teaching-entry__year { font-size: 11px; }
  .teaching-entry__title { font-size: 14px; line-height: 1.35; }
  .teaching-entry__sub { font-size: 12px; }
  .teaching-entry__btn { font-size: 10px; padding: 5px 10px; }

  /* Project pages */
  .project-header { grid-template-columns: 1fr; gap: 22px; }
  .project-header__title { font-size: 40px; }
  .gallery--two { grid-template-columns: 1fr; }
  .page { padding: 110px 18px 60px; }
  .reading { font-size: 16px; line-height: 1.65; }

  /* Modal drawer: full-screen, tighter padding */
  .modal { width: 100vw; }
  .modal__bar { padding: 12px 18px; }
  .modal__cat { font-size: 11px; letter-spacing: 0.08em; }
  .modal__body { padding: 22px 18px 64px; }
  .modal__title { font-size: 19px; }
  .modal__subtitle { font-size: 13px; margin-bottom: 18px; }
  .modal__meta { grid-template-columns: 1fr; gap: 6px 0; padding: 12px 0; margin-bottom: 18px; }
  .modal__text { font-size: 14.5px; line-height: 1.65; }
  .modal__figs--2 { grid-template-columns: 1fr; }

  /* Project nav cards stack */
  .project-nav { flex-direction: column; gap: 12px; }

  /* :target anchor jumps */
  :target { scroll-margin-top: 96px; }
}

/* Small phones (<= 480px) — final polish */
@media (max-width: 480px) {
  .topbar { font-size: 11px; padding: 0 12px; height: 34px; line-height: 34px; }
  .tabnav { top: 34px; }
  .tabnav__tab { font-size: 12px; padding: 12px 2px; letter-spacing: 0.03em; }
  .sidebar { padding: 16px 14px 18px; }
  .sidebar__page-title { font-size: 40px; }
  .content { padding: 18px 14px 50px; }
  .section__heading { font-size: 26px; }
  .about-intro__portrait { width: 140px; height: 174px; }
  .about-intro__name { font-size: 24px; }
  .entry { grid-template-columns: 92px 1fr; gap: 0 12px; }
  .entry__img { width: 92px; }
  .modal__body { padding: 18px 14px 56px; }
  .modal__title { font-size: 17px; }
}


/* ════════════════════════════════════════════════════════════
   INDEX.HTML-SPECIFIC SECTIONS
   ════════════════════════════════════════════════════════════ */

/* ── ONGOING PROJECTS — tool cards ──────────────────────────── */
.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.tool-card {
  border-bottom: 1.5px solid var(--rule);
  border-right: 1.5px solid var(--rule);
  padding: 24px 24px 28px;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-card:nth-child(even) { border-right: none; }
.tool-card:hover { background: rgba(127,127,127,0.10); }
.tool-card__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.tool-card__title {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.tool-card__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.85;
  margin-top: 2px;
  flex-grow: 1;
}
.tool-card__link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 8px;
}

/* ── TEACHING TABLE ──────────────────────────────────────────── */
.teaching-entry {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0 20px;
  border-bottom: 1.5px solid var(--rule);
  padding: 14px 8px;
  transition: background 0.12s;
}
.teaching-entry:hover { background: rgba(127,127,127,0.10); cursor: default; }
.teaching-entry__year { font-size: 13px; color: var(--ink-muted); padding-top: 2px; }
.teaching-entry__body {}
.teaching-entry__title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; margin-bottom: 3px; color: var(--ink); }
.teaching-entry__sub { font-size: 13px; color: var(--ink-muted); line-height: 1.45; }

/* ── MODAL ───────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 400; opacity: 0; pointer-events: none;
  transition: opacity 0.22s;
}
.overlay.open { opacity: 1; pointer-events: all; }
.modal {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(680px, 100vw);
  background: #fff;
  z-index: 500; overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.modal.open { transform: translateX(0); }
.modal__bar {
  position: sticky; top: 0; background: var(--work-bg);
  border-bottom: 1px solid rgba(0,0,0,0.15);
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px; z-index: 10;
}
.modal__cat { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #1a1a1a; }
.modal__x { font-size: 22px; font-weight: 300; line-height: 1; color: #1a1a1a; }
.modal__x:hover { opacity: 0.5; }
.modal__body { padding: 32px 28px 80px; }
.modal__section { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #888; margin-bottom: 8px; }
.modal__title { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; margin-bottom: 6px; color: #1a1a1a; }
.modal__subtitle { font-size: 14px; color: #555; margin-bottom: 24px; line-height: 1.5; }
.modal__meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 24px; font-size: 13px;
  border-top: 1px solid #eee; border-bottom: 1px solid #eee;
  padding: 14px 0; margin-bottom: 24px;
}
.modal__meta dt { color: #888; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.modal__meta dd { font-weight: 500; color: #222; }
.modal__text { font-size: 14px; line-height: 1.7; color: #222; max-width: 560px; }
.modal__text p + p { margin-top: 0.9em; }
.modal__text strong { font-weight: 600; }
.modal__fig-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #888; margin: 28px 0 12px; padding-top: 20px; border-top: 1px solid #eee;
}
.modal__figs { display: grid; gap: 14px; }
.modal__figs--2 { grid-template-columns: 1fr 1fr; }
.modal__figs--1 { grid-template-columns: 1fr; }
.modal__fig { margin: 0; }
.modal__fig img { width: 100%; display: block; background: #f0f0f0; }
.modal__fig figcaption { font-size: 11.5px; color: #666; margin-top: 5px; line-height: 1.4; }


/* ── 16. PAGE MOTION — EDITORIAL FADE & LIFT ──────────────
   On load: body fades in, key elements lift up + fade with
   a small stagger so the page feels like it's settling into
   place. On click of an internal link: brief 180ms global
   fade-out, then navigate. Calm, restrained, editorial.
   Honors prefers-reduced-motion. */

@keyframes bodyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes liftIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

body {
  animation: bodyFadeIn 0.45s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

/* Sidebar elements settle in first */
.sidebar__page-title {
  animation: liftIn 0.75s cubic-bezier(0.2, 0.65, 0.2, 1) 0.05s both;
}
.sidebar__intro,
.sidebar__section,
.sidebar__contact {
  animation: liftIn 0.75s cubic-bezier(0.2, 0.65, 0.2, 1) both;
}
.sidebar__section:nth-of-type(1) { animation-delay: 0.10s; }
.sidebar__section:nth-of-type(2) { animation-delay: 0.15s; }
.sidebar__section:nth-of-type(3) { animation-delay: 0.20s; }
.sidebar__section:nth-of-type(4) { animation-delay: 0.25s; }
.sidebar__section:nth-of-type(5) { animation-delay: 0.30s; }
.sidebar__contact { animation-delay: 0.35s; }

/* Content sections lift in with a slightly longer offset */
.section,
.project-header,
.project-hero {
  animation: liftIn 0.85s cubic-bezier(0.2, 0.65, 0.2, 1) both;
}
.section:nth-of-type(1)              { animation-delay: 0.18s; }
.section:nth-of-type(2)              { animation-delay: 0.26s; }
.section:nth-of-type(3)              { animation-delay: 0.34s; }
.section:nth-of-type(4)              { animation-delay: 0.42s; }
.section:nth-of-type(5)              { animation-delay: 0.50s; }
.project-header                      { animation-delay: 0.18s; }
.project-hero                        { animation-delay: 0.30s; }
.project-body                        { animation: liftIn 0.85s cubic-bezier(0.2, 0.65, 0.2, 1) 0.42s both; }

/* Exit: brief, restrained */
body.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  body, .sidebar__page-title, .sidebar__intro, .sidebar__section,
  .sidebar__contact, .section, .project-header, .project-hero,
  .project-body, body.is-leaving {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── 17. ELEGANCE PASS ─────────────────────────────────────
   Subtle refinements: refined hover states, image treatments,
   improved spacing, more elegant micro-interactions. */

/* Refined link underline animation */
.reading a, .sidebar__contact a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  text-decoration: none;
  transition: background-size 0.32s cubic-bezier(0.6, 0, 0.2, 1);
}
.reading a:hover, .sidebar__contact a:hover {
  background-size: 100% 1px;
  text-decoration: none;
}

/* More elegant entry hover — image saturates and lifts subtly */
.entry { transition: background 0.18s, transform 0.32s cubic-bezier(0.2,0.7,0.2,1); }
.entry__img { transition: filter 0.35s ease, transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.entry:hover .entry__img { filter: grayscale(0%); transform: scale(1.015); }

/* Soft drop shadow on the ribbon for depth */
.tabnav { box-shadow: 0 2px 14px -8px rgba(0,0,0,0.25); }
.topbar { box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset; }

/* Refined section heading — small accent dot before */

/* Refined sidebar page title — slight kerning + subtle weight */
.sidebar__page-title {
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* Better sidebar contact spacing */
.sidebar__contact { letter-spacing: 0.08em; }

/* Smoother focus outline */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 1px;
}

/* Tabnav — subtle inset bottom shadow when scrolled past (optional polish) */
.tabnav__tab {
  transition: filter 0.18s, background-color 0.18s, font-weight 0.15s;
}

/* Sticky shadow on sidebar when content scrolls (gives depth) */
.sidebar {
  box-shadow: 1px 0 0 var(--rule);
  border-right: none;
}

/* Page-flip-friendly: anchor scroll without jarring */
:target { scroll-margin-top: 160px; }

/* Pull-quote in project body — more refined */
.pullquote {
  font-size: 24px;
  letter-spacing: -0.005em;
  border-left-width: 2px;
}

/* Project hero — subtle warm tint vignette on hover */
.project-hero img {
  transition: filter 0.4s ease;
}
.project-hero img:hover { filter: brightness(1.02) contrast(1.02); }

/* Caption refinement */
.caption, .gallery figcaption { letter-spacing: 0.04em; }

/* Refined CTA "Read more" arrow animates on hover */
.entry__read::after {
  content: "";
  display: inline-block;
  width: 0;
  transition: width 0.2s ease;
}
.entry:hover .entry__read {
  letter-spacing: 0.14em;
}


/* Publication "Read full paper" link inside modals */
.modal__paper-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 18px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(26,26,26,0.06);
  border: 1.5px solid rgba(26,26,26,0.5);
  border-radius: 2px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.modal__paper-link:hover {
  background: var(--ink);
  color: var(--sidebar-bg);
  border-color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .modal__paper-link {
    background: rgba(232,220,196,0.08);
    border-color: rgba(232,220,196,0.4);
  }
}


/* Teaching entries that link to an exhibition page */
.teaching-entry__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid var(--rule);
  transition: border-color 0.15s, color 0.15s;
}
.teaching-entry__link:hover {
  border-bottom-color: var(--ink);
}
.teaching-entry__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(26,26,26,0.06);
  border: 1.5px solid rgba(26,26,26,0.45);
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.teaching-entry__btn:hover {
  background: var(--ink);
  color: var(--sidebar-bg);
  border-color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .teaching-entry__btn {
    background: rgba(232,220,196,0.08);
    border-color: rgba(232,220,196,0.4);
  }
}


/* ── 15c. PHONE LANDSCAPE (short + wide viewport) ─────────────
   Catches landscape phones (Pro Max etc. that exceed 720px wide).
   Detected by short viewport height regardless of width. */
@media (orientation: landscape) and (max-height: 520px) {
  html, body { overflow-x: hidden; }
  /* Compact header */
  .topbar { padding: 0 14px; font-size: 11px; height: 28px; line-height: 28px; }
  .topbar__lang { left: 10px; font-size: 10px; }
  .topbar__cv { right: 10px; padding: 2px 8px; font-size: 10px; }
  .tabnav { top: 28px; }
  .tabnav__tab { font-size: 12px; padding: 9px 8px; letter-spacing: 0.05em; }

  /* Stack the shell so the sidebar doesn't eat horizontal space */
  .shell { grid-template-columns: 1fr; padding-top: 76px; }
  .sidebar {
    position: static; height: auto; top: auto;
    border-right: none; border-bottom: 1px solid var(--rule);
    padding: 14px 18px 16px;
    overflow: visible;
  }
  .sidebar__page-title { font-size: 36px; margin-bottom: 12px; }

  .content { padding: 18px 22px 50px; }
  .section { scroll-margin-top: 76px; margin-bottom: 32px; }
  .section__heading { font-size: 26px; margin-bottom: 14px; }

  /* About bio strip side-by-side again in landscape (room available) */
  .about-intro { grid-template-columns: 160px 1fr; gap: 0 24px; }
  .about-intro__portrait { width: 160px; height: 198px; margin: 0; }
  .about-intro__name { font-size: 26px; }
  .about-prose p { font-size: 14.5px; line-height: 1.55; }

  /* Entries: image + body in landscape */
  .entry { grid-template-columns: 130px 1fr; }
  .entry__img { width: 130px; }
  .entry__body { padding: 12px 16px 14px; }
  .entry__title { font-size: 14px; }
  .entry__sub { font-size: 12.5px; }

  /* Publications still block, slightly bigger */
  .entry--text .entry__body { padding: 12px 16px 14px !important; }
  .entry--text .entry__title { font-size: 14.5px !important; }
  .entry--text .entry__sub { font-size: 12.5px !important; }

  /* Tool grid: keep 2 cols in landscape (wide enough) */
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .tool-card { padding: 14px 16px 16px; }

  :target { scroll-margin-top: 76px; }
}

/* ── Modal table (data table inside the work/research modal) ───── */
.modal__table-wrap {
  margin: 22px 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #222;
}
.modal__table th,
.modal__table td {
  border: 1px solid #e2ddd1;
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
  line-height: 1.5;
}
.modal__table thead th {
  background: #f3eee2;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1a1a1a;
}
.modal__table tbody th {
  background: #faf6ec;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
}
.modal__table tbody td { color: #333; }
@media (max-width: 720px) {
  .modal__table { font-size: 12px; }
  .modal__table th, .modal__table td { padding: 8px 9px; }
  .modal__table tbody th { white-space: normal; }
}

/* Tab hover — dark mode uses a soft cream tint */
@media (prefers-color-scheme: dark) {
  .tabnav__tab:hover { background: rgba(236,225,200,0.05); }
}

/* Publications-in-progress: non-clickable static entries */
.entry--static { cursor: default; }
.entry--static:hover { background: transparent; }
.entry__status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: 1.5px solid var(--rule);
  padding: 3px 9px;
  border-radius: 2px;
  background: transparent;
}

/* Longer titles (Research & Teaching / Ricerca & Didattica) need a smaller
   sidebar size so they don't overflow the sidebar column. */
body.page-work .sidebar__page-title { font-size: 56px; line-height: 0.98; }
@media (max-width: 720px) {
  body.page-work .sidebar__page-title { font-size: 36px; }
}

/* ════════════════════════════════════════════════════════════
   ARABIC / RTL SUPPORT
   Triggered by <html lang="ar" dir="rtl"> on Arabic pages.
   ════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap');

html[dir="rtl"] body {
  font-family: 'Noto Sans Arabic', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
}

/* Flip the main shell: sidebar moves to the right */
html[dir="rtl"] .shell {
  grid-template-columns: 1fr 33.3333%;
}
html[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--rule);
  order: 2;
}
html[dir="rtl"] .content { order: 1; }

/* Topbar language switcher mirrors to the opposite side */
html[dir="rtl"] .topbar__lang {
  left: auto; right: 20px;
}
html[dir="rtl"] .topbar__cv {
  right: auto; left: 20px;
}

/* Tab nav reads RTL — first tab in DOM sits on the right */
html[dir="rtl"] .tabnav__tab {
  border-right: none;
  border-left: 1px solid var(--rule);
}
html[dir="rtl"] .tabnav__tab:last-child { border-left: none; }

/* Modal slides in from the left instead of the right */
html[dir="rtl"] .modal {
  right: auto; left: 0;
  transform: translateX(-100%);
}
html[dir="rtl"] .modal.open { transform: translateX(0); }

/* Sidebar sub-list indent flips */
html[dir="rtl"] .sidebar__sub-link {
  padding: 2px 14px 2px 0;
}

/* Project nav arrows visually flip via mirrored layout, but the ← / → glyphs
   in the source need swapping. Keep glyphs as-is; flex-direction does the work. */
html[dir="rtl"] .project-nav { flex-direction: row-reverse; }

/* Entry cards: image moves to right side of the row */
html[dir="rtl"] .entry__top { flex-direction: row-reverse; }

/* Mobile breakpoints: sidebar stacks on top either way, so few changes needed */
@media (max-width: 720px) {
  html[dir="rtl"] .shell { grid-template-columns: 1fr; }
  html[dir="rtl"] .topbar__lang { right: 12px; left: auto; }
  html[dir="rtl"] .topbar__cv { left: 12px; right: auto; }
}

/* Arabic-specific typography tweaks */
html[dir="rtl"] .sidebar__page-title,
html[dir="rtl"] .section__heading,
html[dir="rtl"] .about-intro__name {
  letter-spacing: 0;  /* Latin letter-spacing doesn't work for Arabic */
}
html[dir="rtl"] .topbar { letter-spacing: 0.08em; }
html[dir="rtl"] .tabnav__tab { letter-spacing: 0; }

/* Topbar calligraphy name image for Arabic pages */
html[dir="rtl"] .topbar__calligraphy {
  display: inline-block;
  height: 22px;
  width: auto;
  vertical-align: middle;
  filter: invert(1);  /* flip black-on-white calligraphy to white-on-dark topbar */
}
@media (max-width: 720px) {
  html[dir="rtl"] .topbar__calligraphy { height: 18px; }
}

/* Arabic name as image on the About page h1 — larger, blend-out white bg */
.about-intro__name-img {
  display: block;
  height: 120px;
  width: auto;
  max-width: 100%;
  margin: 0;
  /* Multiply blends out the white background against the cream page */
  mix-blend-mode: multiply;
}
@media (max-width: 720px) {
  .about-intro__name-img { height: 80px; }
}
@media (prefers-color-scheme: dark) {
  /* In dark mode, invert + screen makes the ink show on dark bg
     while the white background blends away */
  .about-intro__name-img {
    filter: invert(1);
    mix-blend-mode: screen;
  }
}

/* Longer Arabic "About" label needs smaller sidebar title size on AR home */
html[dir="rtl"] body.page-about .sidebar__page-title {
  font-size: 56px;
  line-height: 1.05;
}
@media (max-width: 720px) {
  html[dir="rtl"] body.page-about .sidebar__page-title { font-size: 36px; }
}