/* =========================================================
   Dr. Tural Rəhimli — neyrocərrah
   Single page site. Sections follow the approved layout:
   hero → education → science → specialisation → articles →
   surgical practice → career → photo ribbon → contact footer.
   ========================================================= */

/* ---------- design tokens ---------- */
:root {
  --ink:        #111111;   /* headings */
  --body:       #3a3a3a;   /* running text */
  --muted:      #7a7a7a;   /* captions, secondary lines */
  --line:       #dcdcdc;   /* hairlines */

  --bg:         #ffffff;
  --bg-grey:    #ececec;   /* alternating section band */
  --bg-dark:    #0a0a0a;   /* articles + footer */

  --gold:       #d9a441;   /* single accent, used only on buttons */
  --gold-dark:  #c08f2f;

  --wrap:       1180px;
  --pad-x:      clamp(20px, 5vw, 64px);
  --section-y:  clamp(56px, 8vw, 110px);

  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.25, .85, .35, 1);  /* language panel: leaves slowly,
     arrives softly. Same curve as the DevSchool sidebar bead, where 520ms read as
     stuck and 300ms as welded to the cursor; the calm comes from the curve, not
     from stretching the clock. */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 400; line-height: 1.15; }

p { margin: 0 0 1em; }

ol, ul, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

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

/* ---------- layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section-y); }
.section--light { background: var(--bg); }
.section--grey  { background: var(--bg-grey); }
.section--dark  { background: var(--bg-dark); color: #d8d8d8; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- shared type ---------- */
.h-serif {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: -0.01em;
  margin-bottom: 0.8em;
}
.h-serif--lg { font-size: clamp(34px, 5vw, 58px); }
.h-serif--italic { font-style: italic; }

.h-caps {
  font-size: clamp(16px, 2vw, 21px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2.2em;
}

.body-text { font-size: 15px; max-width: 46ch; }
.muted { color: var(--muted); }
.mt-xl { margin-top: clamp(40px, 6vw, 72px); }

.years {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* ---------- gold button ---------- */
.btn-gold {
  display: inline-block;
  padding: 11px 22px;
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .32s var(--ease-soft),
              color .32s var(--ease-soft),
              transform .32s var(--ease-soft),
              box-shadow .32s var(--ease-soft);
}
/* On hover the button leaves gold behind and flips to the opposite of its
   section: dark grey on the light and grey blocks, white on the dark one.
   The contrast jump is what makes it read as a state change rather than a
   shade of the same colour. */
.btn-gold:hover {
  background: var(--bg-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 10, 10, .26);
}
.section--dark .btn-gold:hover {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(255, 255, 255, .18);
}
/* pressing it snaps back quickly — a slow press feels unresponsive */
.btn-gold:active {
  transform: translateY(0);
  box-shadow: 0 2px 7px rgba(10, 10, 10, .22);
  transition-duration: .1s;
}
.section--dark .btn-gold:active { box-shadow: 0 2px 8px rgba(255, 255, 255, .16); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  align-items: center;
  /* brand left, everything else pushed right by .nav margin */
  gap: 24px;
  min-height: 68px;
}

.brand {
  font-family: var(--font-serif);
  font-size: 17px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color .3s var(--ease);
}
.is-stuck .brand { color: var(--ink); }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.nav a {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: color .25s var(--ease);
}
.nav a:hover { color: #fff; }

/* the CTA is a bordered box, so the underline would fight its frame */
.nav a:not(.nav-cta) { position: relative; }
.nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .36s var(--ease-soft);
}
.nav a:not(.nav-cta):hover::after { transform: scaleX(1); }
.is-stuck .nav a { color: var(--body); }
.is-stuck .nav a:hover { color: var(--ink); }

.nav-cta {
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  transition: color .34s var(--ease-soft),
              border-color .34s var(--ease-soft),
              background .34s var(--ease-soft);
}
/* The pill fills with the opposite of the header it sits on: white over the
   hero, black once the header turns white. Written as `.nav a.nav-cta:hover`
   because plain `.nav a:hover` sets the text colour and would otherwise win —
   white letters on a white fill. */
.nav a.nav-cta:hover {
  /* #ececec, not #fff: a solid plate of pure white punches a hole in the dark
     header. This is the same soft white as the alternating section band. */
  background: #ececec;
  border-color: #ececec;
  color: var(--bg-dark);
}
.is-stuck .nav-cta { border-color: var(--line); }
.is-stuck .nav a.nav-cta:hover {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: #fff;
}

.burger {
  display: none;
  width: 40px;
  height: 34px;
  padding: 8px 6px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 1.5px;
  background: #fff;
  transition: transform .3s var(--ease), opacity .2s var(--ease), background .3s var(--ease);
}
.burger span + span { margin-top: 6px; }
.is-stuck .burger span { background: var(--ink); }

/* ---------- language switch (dropdown) ---------- */
.lang {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, .7);
  transition: color .3s var(--ease);
}
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: rgba(255, 255, 255, .78);
  cursor: pointer;
  transition: color .18s ease, background .3s var(--ease-soft);
}
.lang-toggle:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.lang-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.lang.is-open .lang-toggle { color: #fff; background: rgba(255, 255, 255, .08); }
.is-stuck .lang-toggle:hover,
.is-stuck .lang.is-open .lang-toggle { background: rgba(10, 10, 10, .06); }
/* the globe keeps the accent colour while the label follows the header state;
   over the white sticky header the darker gold holds its contrast */
.lang-icon {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--gold);
  fill: none;
  transition: stroke .3s var(--ease-soft);
}
.is-stuck .lang-icon { stroke: var(--gold-dark); }
.lang-code { min-width: 1.7em; text-align: left; }
.lang-caret {
  width: 11px; height: 11px; flex: none;
  stroke: currentColor; stroke-width: 2.2; fill: none;
  transition: transform .42s var(--ease-soft);
}
.lang-toggle[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

/* dark panel: it drops over the hero photo, and keeps enough contrast
   over the light sticky header as well */
.lang-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 60;
  min-width: 138px;
  margin: 0;
  padding: 5px;
  list-style: none;
  background: rgba(14, 14, 14, .93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(.96);
  transform-origin: top right;
  transition: opacity .24s var(--ease),
              transform .24s var(--ease),
              visibility .24s;
}
.lang.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .26s ease,
              transform .46s var(--ease-soft),
              visibility .46s;
}

/* items fade in one after another once the panel is out */
.lang-menu li {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.lang.is-open .lang-menu li {
  opacity: 1;
  transform: none;
  transition: opacity .24s ease, transform .42s var(--ease-soft);
}
.lang.is-open .lang-menu li:nth-child(1) { transition-delay: .07s; }
.lang.is-open .lang-menu li:nth-child(2) { transition-delay: .14s; }
.lang.is-open .lang-menu li:nth-child(3) { transition-delay: .21s; }

.lang-menu a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 7px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background .3s var(--ease-soft),
              color .18s ease,
              transform .3s var(--ease-soft);
}
.lang-menu a:hover,
.lang-menu a:focus-visible {
  background: rgba(255, 255, 255, .09);
  color: #fff;
  transform: translateX(2px);
  outline: none;
}
.lang-menu a:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.lang-menu a:active { transform: translateX(2px) scale(.985); }
.lang-menu a[aria-current] {
  color: #fff;
  background: rgba(255, 255, 255, .07);
  font-weight: 500;
}
.lang-menu-code {
  min-width: 1.9em;
  font-size: 10.5px;
  letter-spacing: .08em;
  opacity: .4;
  transition: opacity .3s var(--ease-soft);
}
.lang-menu a:hover .lang-menu-code { opacity: .75; }
.lang-menu a[aria-current] .lang-menu-code { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lang-menu, .lang-menu li, .lang-menu a { transition-duration: .01ms; }
  .lang-menu a:hover, .lang-menu a:active { transform: none; }
  .btn-gold:hover, .btn-ghost:hover, .socials a:hover, .card:hover { transform: none; }
  .nav a:not(.nav-cta)::after { transition: none; }
}

.is-stuck .lang { color: var(--muted); }
.is-stuck .lang-toggle { color: var(--body); }
.is-stuck .lang-toggle:hover { color: var(--ink); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: clamp(460px, 68vh, 680px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
  filter: grayscale(1) contrast(1.05);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .1) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 35%);
}

.hero-content {
  position: relative;
  padding-bottom: clamp(40px, 7vw, 76px);
  color: #fff;
}

.hero-name {
  font-family: var(--font-serif);
  font-size: clamp(40px, 7.5vw, 82px);
  font-weight: 400;
  line-height: 1.02;
  color: #fff;
  margin-bottom: 14px;
}

.hero-role {
  margin: 0 0 26px;
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

.hero-sub {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

/* =========================================================
   TWO-COLUMN SECTIONS (education / specialisation)
   ========================================================= */
.grid-2 {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.grid-2--media-first { grid-template-columns: 0.8fr 1.2fr; }

.col-media { margin: 0; }
.col-media img { width: 100%; }

.membership { display: grid; gap: 26px; }
.membership-item dt {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 4px;
}
.membership-item dd {
  font-size: 14px;
  line-height: 1.55;
}

.spec { margin-bottom: 30px; }
.spec:last-child { margin-bottom: 0; }
.spec h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.spec p { margin: 0; font-size: 14px; max-width: 52ch; }

/* =========================================================
   ELMİ FƏALİYYƏTİM
   ========================================================= */
.science-layout {
  display: grid;
  grid-template-columns: 1fr;   /* heading on top, cards across the full width */
  gap: clamp(28px, 3.5vw, 44px);
  align-items: start;
}

.science-head .h-serif { margin-bottom: 28px; }

.science-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}

.card-media {
  overflow: hidden;
  margin-bottom: 18px;
  background: #d5d5d5;
}
.card-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: transform .6s var(--ease), filter .6s var(--ease);
}
.card:hover .card-media img { transform: scale(1.04); filter: grayscale(.55); }

/* The whole card answers, not only the photo.
   This lift uses `translate`, not `transform`: the card also carries .reveal,
   whose own transform animation would otherwise swallow the hover. The two
   properties compose, so the scroll reveal and the lift stay independent. */
.card { transition: translate .4s var(--ease-soft); }
.card:hover { translate: 0 -4px; }
.card h3 { transition: color .3s var(--ease-soft); }
.card:hover h3 { color: var(--gold-dark); }

.card h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.card p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* =========================================================
   13 ELMİ MƏQALƏ
   ========================================================= */
.section--dark .h-serif { color: #fff; }

.articles-head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  margin-bottom: clamp(28px, 4vw, 46px);
}
.articles-head .h-serif { margin-bottom: 0; }

.featured-article {
  margin: 0;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .35);
  font-size: 12.5px;
  line-height: 1.5;
}

.articles { counter-reset: art; }
.articles li {
  counter-increment: art;
  position: relative;
  padding: 0 0 16px 34px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #c9c9c9;
}
.articles li::before {
  content: counter(art) ".";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.articles i { color: #ededed; }
.articles a {
  color: #9c9c9c;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  transition: color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}
.articles a:hover { color: var(--gold); border-color: var(--gold); }

/* =========================================================
   CƏRRAHİ TƏCRÜBƏM
   ========================================================= */
.practice-photo { margin: 0; }
.practice-photo img { width: 100%; filter: grayscale(1) contrast(1.05); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(30px, 6vw, 90px);
  row-gap: 20px;
}
.stats li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}
.stat-label { color: var(--body); white-space: nowrap; }
.stats li { transition: color .3s var(--ease-soft); }
.stats li:hover .stat-label { color: var(--ink); }
.stats li:hover .stat-value { color: var(--gold-dark); }
.stat-dots {
  flex: 1;
  height: 1px;
  min-width: 20px;
  border-bottom: 1px dotted #9c9c9c;
  transform: translateY(-3px);
}
.stat-value {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   CAREER TIMELINE
   ========================================================= */
.career {
  position: relative;
  background: var(--bg);
  isolation: isolate;
}
.career::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/career-bg.jpg") center / cover no-repeat;
  opacity: .10;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 40px);
}
.timeline li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  transition: border-color .34s var(--ease-soft);
}
.timeline li:hover { border-top-color: var(--gold); }
.timeline li .tl-place { transition: color .3s var(--ease-soft); }
.timeline li:hover .tl-place { color: var(--ink); }
.tl-years {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.tl-place { font-size: 13px; color: var(--body); }
.tl-role  { font-size: 12px; color: var(--muted); }

/* =========================================================
   GALLERY
   ========================================================= */
/* One horizontal strip instead of a four-up grid. Every photo keeps its own
   aspect ratio and shares a single height, so portrait and landscape frames
   stand side by side without being cropped. It scrolls on its own (js/main.js),
   stops under the pointer and can be dragged either way. */
.ribbon {
  background: var(--bg);
  padding: 4px 0;
}
.ribbon-track {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;          /* the strip is dragged, not scrolled by bar */
  cursor: grab;
}
.ribbon-track::-webkit-scrollbar { display: none; }
.ribbon-track.is-dragging { cursor: grabbing; }
.ribbon-track img {
  flex: none;
  height: clamp(240px, 28vw, 420px);
  width: auto;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--bg-dark);
  color: #cfcfcf;
  padding-top: clamp(44px, 6vw, 76px);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: clamp(30px, 4vw, 48px);
}

.footer-label {
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer-contacts p { margin: 0 0 6px; font-size: 14px; }
.footer-contacts a { text-decoration: none; transition: color .3s var(--ease-soft); }
.footer-contacts a:hover { color: var(--gold); }

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.btn-ghost {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .32s var(--ease-soft),
              color .32s var(--ease-soft),
              background .32s var(--ease-soft),
              transform .32s var(--ease-soft);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(217, 164, 65, .1);
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(0); transition-duration: .1s; }

.socials { display: flex; gap: 14px; }
.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  transition: border-color .32s var(--ease-soft),
              background .32s var(--ease-soft),
              transform .32s var(--ease-soft);
}
.socials a:hover {
  border-color: var(--gold);
  background: rgba(217, 164, 65, .12);
  transform: translateY(-3px);
}
.socials a:active { transform: translateY(0); transition-duration: .1s; }
.socials svg {
  width: 16px;
  height: 16px;
  fill: #cfcfcf;
  transition: fill .3s var(--ease-soft);
}
.socials a:hover svg { fill: var(--gold); }

.footer-bottom {
  padding-block: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer-bottom p {
  margin: 0;
  font-size: 11.5px;
  color: #6d6d6d;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .grid-2,
  .grid-2--media-first { grid-template-columns: 1fr; }

  .grid-2--media-first .col-media { order: -1; }
  .col-media img { max-height: 520px; object-fit: cover; }

  .timeline { grid-template-columns: repeat(2, 1fr); }

  .articles-head {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .articles-head .btn-gold { order: 3; }
  .featured-article { display: none; }
}

@media (max-width: 760px) {
  .burger { display: block; }

  .hero-sub br { display: none; }
  .hero-sub { max-width: 30ch; }

  /* keep the logo and the burger above the open panel, and readable on it */
  .brand, .lang, .burger { position: relative; z-index: 2; }
  /* nav is a fixed panel here, so .lang takes over pushing the right side */
  .lang { margin-left: auto; }
  .menu-open .brand { color: var(--ink); }
  .menu-open .lang { color: var(--muted); }
  .menu-open .lang-toggle { color: var(--body); }
  .menu-open .burger span { background: var(--ink); }
  .menu-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .menu-open .burger span:nth-child(2) { opacity: 0; }
  .menu-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .nav {
    position: fixed;
    margin-left: 0;
    inset: 0 0 auto 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 80px var(--pad-x) 28px;
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(10px);
    transform: translateY(-102%);
    transition: transform .4s var(--ease);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  }
  .nav.is-open { transform: none; }
  .nav a,
  .is-stuck .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 15px;
  }
  /* inside the slide-out panel the CTA is just another row: no frame, no pill,
     and no inverted fill — the panel is already light */
  .nav-cta, .is-stuck .nav-cta { border: 0; border-radius: 0; }
  .nav a.nav-cta:hover,
  .is-stuck .nav a.nav-cta:hover {
    background: none;
    border-color: transparent;
    color: var(--ink);
  }

  .science-cards { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .card p { font-size: 11px; }

  .stats { grid-template-columns: 1fr; row-gap: 14px; }
  .stat-label { white-space: normal; }

}

@media (max-width: 520px) {
  .header-inner { gap: 14px; }
  .lang { font-size: 11px; }
  .lang-toggle { gap: 5px; }
  .lang-menu { min-width: 132px; }
  .science-cards { grid-template-columns: 1fr; gap: 26px; }
  .card-media img { aspect-ratio: 3 / 2; }
  .timeline { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .burger, .lang, .ribbon, .btn-gold { display: none; }
  .hero { min-height: 300px; }
  body { color: #000; }
}