/* ============================================================
   Jo Lab — Hanyang University
   Shared stylesheet.  White ground, blue accent, IBM Plex throughout.
   Edit colours and fonts in the :root block below.
   ============================================================ */

:root {
  /* --- Colours --- */
  --ink:        #16191d;   /* main text */
  --ink-soft:   #5b636e;   /* secondary text */
  --ink-faint:  #8a929c;   /* captions, meta */
  --rule:       #e3e6ea;   /* hairlines & borders */
  --bg:         #ffffff;   /* page background */
  --bg-soft:    #f7f8f9;   /* alternating sections */
  --accent:     #1a4d8f;   /* links, highlights */
  --accent-soft:#eaf0f8;

  /* --- Type --- */
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Noto Sans KR", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1120px;

  /* The soft blue wash at the top of every page. One place to tune it:
     raise or lower the .17 for more or less colour. The offset is in px, not
     %, so the band looks identical on a tall hero and a short page banner. */
  --wash: radial-gradient(880px 400px at 50% -50px, rgba(26,77,143,.17), transparent 72%);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.58;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 300; line-height: 1.12; }
h1 b, h1 strong { font-weight: 600; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 400; }
h3 { font-size: 1.15rem; font-weight: 500; }
p  { margin: 0 0 .95em; }

/* Monospace is used for anything that behaves like data:
   years, journal names, numbers, captions, small labels. */
.eyebrow, .card .num, .timeline .year, .news .date, .info-row dt,
.person .role, .tag, .brand-sub, .figure-band .caption, .photo figcaption {
  font-family: var(--mono);
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* Emphasis inside running text. 600 rather than the browser's 700, so a bold
   phrase stands out without looking heavier than the headings around it. */
.narrow p strong, .hero .lede strong { font-weight: 600; color: var(--ink); }

/* ============================================================
   Header / Navigation
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 76px; gap: 24px;
}
.brand a { display: flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; }
.brand-logo { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
/* The wordmark uses the same face as the big headline on the home page, one
   step heavier so the name does not read as thin. 300 = matches the headline
   exactly, 500 = noticeably bolder. */
.brand-name {
  font-family: var(--sans);
  font-size: 1.32rem; font-weight: 400; letter-spacing: -.025em;
}
.brand-sub {
  font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 3px;
}

nav.main-nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
nav.main-nav a {
  color: var(--ink-soft); font-size: .87rem; font-weight: 400;
  padding: 6px 0; text-decoration: none;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
nav.main-nav a:hover { color: var(--ink); text-decoration: none; }
nav.main-nav a.active { color: var(--ink); border-bottom-color: var(--accent); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 6px; padding: 7px 11px; cursor: pointer;
  font-family: var(--mono); font-size: .8rem; color: var(--ink);
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  nav.main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--rule); display: none;
  }
  nav.main-nav.open { display: block; }
  nav.main-nav ul { flex-direction: column; gap: 0; padding: 8px 24px 18px; }
  nav.main-nav a { display: block; padding: 11px 0; border-bottom: none; }
}

/* ============================================================
   Hero & page banners — centred
   ============================================================ */
.hero {
  padding: 36px 0 34px; text-align: center;
  border-bottom: 1px solid var(--rule);
  background: var(--wash);
}
.eyebrow {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 400; margin-bottom: 9px;
}
.hero .eyebrow { color: var(--accent); }
.hero h1 { max-width: 17ch; margin-left: auto; margin-right: auto; margin-bottom: .4em; }
.hero .lede {
  font-size: 1.1rem; color: var(--ink-soft); margin: 0 auto;
  /* 620px is the width at which the lines come out most even. The first
     sentence ends with a <br> in index.html. */
  max-width: 620px;
}
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.btn {
  display: inline-block; padding: 11px 24px; border-radius: 6px;
  font-size: .88rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--accent); transition: opacity .15s;
}
.btn:hover { text-decoration: none; opacity: .85; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: transparent; color: var(--accent); }

.page-banner {
  padding: 28px 0 34px; border-bottom: 1px solid var(--rule);
  background: var(--wash); text-align: center;
}
.page-banner .eyebrow { color: var(--accent); }
.page-banner h1 { margin-bottom: .32em; }
.page-banner p { color: var(--ink-soft); max-width: 62ch; margin: 0 auto; }

/* ============================================================
   Sections
   ============================================================ */
section.block { padding: 50px 0; }
section.block.tinted { padding: 40px 0; background: var(--bg-soft); border-block: 1px solid var(--rule); }
/* A heading sitting right under a banner, or two plain sections in a row,
   need less room above than a section standing on its own. */
.hero + section.block:not(.tinted),
.page-banner + section.block:not(.tinted),
section.block + section.block:not(.tinted) { padding-top: 30px; }
/* Two plain white sections in a row have nothing between them, so a hairline
   marks the boundary. Not needed after a tinted section — its own border and
   background already do that. */
section.block:not(.tinted) + section.block:not(.tinted):not(.tab-panel) {
  border-top: 1px solid var(--rule);
}
/* A plain section running straight into a tinted one would otherwise leave
   50px + 40px of gap; the tinted background already separates them. */
section.block:not(.tinted):has(+ section.block.tinted) { padding-bottom: 28px; }
.section-head { margin-bottom: 30px; text-align: center; }
.section-head .eyebrow { color: var(--ink-faint); }
.section-head--left { text-align: left; }
/* A list needs less room under its heading than a block of prose or a grid. */
.section-head:has(+ .interests) { margin-bottom: 18px; }

/* ============================================================
   Grids & cards
   ============================================================ */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* "grid-center" centres a part-filled row instead of leaving the gap on the
   right. Cards keep the width they would have in a full four-column row.
   Remove the class once the row is full. */
@media (min-width: 901px) {
  .grid-4.grid-center {
    grid-template-columns: repeat(3, calc((100% - 3 * 28px) / 4));
    justify-content: center;
  }
}

.card {
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 28px; background: #fff;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: #c9d2dd; transform: translateY(-2px); }
.card h3 { margin-bottom: .5em; }
.card p:last-child { margin-bottom: 0; }
.card .num {
  font-size: .8rem; color: var(--accent); margin-bottom: 14px; letter-spacing: .04em;
}

/* ============================================================
   Publication cards (Home) — the Selected figures in a row
   ============================================================ */
.pubcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .pubcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pubcards { grid-template-columns: 1fr; } }
.pubcard {
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  background: #fff; display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.pubcard:hover { border-color: #c9d2dd; transform: translateY(-2px); text-decoration: none; }
.pubcard .fig { aspect-ratio: 1 / 1; background: #fff; border-bottom: 1px solid var(--rule); }
.pubcard .fig img { width: 100%; height: 100%; object-fit: contain; }
.pubcard .body { padding: 16px 18px 20px; }
.pubcard .venue {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .04em;
  color: var(--accent); margin: 0 0 8px; text-transform: uppercase;
  line-height: 1.45;
}
.pubcard h3 { font-size: .98rem; font-weight: 500; line-height: 1.34; margin: 0; }

/* ============================================================
   People
   ============================================================ */
.person .portrait {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 10px;
  background: var(--bg-soft); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: .78rem; text-align: center;
  overflow: hidden; margin-bottom: 16px;
}
.person .portrait img { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin-bottom: .15em; font-size: 1.06rem; }
.person .role {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: .6em;
}
.person p { font-size: .93rem; color: var(--ink-soft); }

/* PI profile */
/* The photo sits flush with the left edge, but the entries beside it stop about
   44px short of the right edge, so the block reads as leaning left. Nudging it
   22px right makes the printed area optically centred on the page. */
.pi-layout { display: grid; grid-template-columns: 300px 1fr; gap: 52px; align-items: start; margin-left: 22px; }
@media (max-width: 820px) { .pi-layout { grid-template-columns: 1fr; gap: 32px; margin-left: 0; } }
.pi-photo {
  aspect-ratio: 3 / 4; border-radius: 10px; background: var(--bg-soft);
  border: 1px solid var(--rule); display: flex; align-items: center;
  justify-content: center; color: var(--ink-faint); font-size: .8rem;
  text-align: center; overflow: hidden;
}
.pi-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
/* Year column is sized to "2022.10 – 2026.08", which measures 135px. */
.timeline li {
  display: grid; grid-template-columns: 140px 1fr; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
}
/* Use class="timeline timeline--short" for lists whose years are just "2026".
   The narrower column gives the text 666px instead of 558px, which is enough
   for the longest society name to stay on one line. */
.timeline--short li { grid-template-columns: 52px 1fr; gap: 12px; }
.timeline li:last-child { border-bottom: none; }
.timeline .year { font-size: .78rem; color: var(--ink-faint); white-space: nowrap; padding-top: 5px; }
.timeline .what strong { display: block; font-weight: 600; }
.timeline .what span { font-size: .94rem; color: var(--ink-soft); }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 4px; } }

/* ============================================================
   Publications
   ============================================================ */
.pub-list { max-width: 1000px; }
.pub-year {
  font-size: 1.32rem; font-weight: 500; margin: 0 0 6px;
  padding-bottom: 10px; border-bottom: 2px solid var(--ink);
}
.pub {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.pub .idx { font-family: var(--mono); font-size: .85rem; color: var(--ink-faint); padding-top: 5px; }
.pub .title { font-weight: 500; font-size: 1.04rem; line-height: 1.35; margin: 0 0 5px; }
.pub .title a { color: inherit; text-decoration: none; }
.pub .title a:hover, .pub .title a:focus-visible {
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px; text-decoration-color: var(--accent);
}
.pub .authors { font-size: .9rem; color: var(--ink-soft); margin: 0 0 5px; line-height: 1.5; }
.pub .authors .me { color: var(--ink); font-weight: 600; }
.pub .venue { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.pub .venue em { font-style: italic; font-weight: 600; color: var(--ink); }
.pub .venue a { text-decoration: none; }
.pub .venue a em { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Author markers (* and #). The asterisk is small, so it is set a little
   larger than a normal superscript to stay legible. */
sup { font-size: .85em; line-height: 0; vertical-align: super; }
/* A marker belonging to a lab member sits INSIDE .me, so it inherits the bold
   automatically. (Do not use ".me + sup" here — the adjacent-sibling selector
   skips over plain text, so it would also catch a far-away author's #.) */

.tag {
  display: inline-block; font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent);
  margin-left: 8px; vertical-align: 2px;
}

/* Structure figure beside each Selected citation */
.pub-thumb { grid-template-columns: 28px 180px 1fr; gap: 20px; align-items: start; }
.pub-thumb .thumb {
  aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--rule); background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: .72rem; text-align: center; padding: 8px;
}
.pub-thumb .thumb.empty { border-style: dashed; background: var(--bg-soft); }
.pub-thumb .thumb img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 760px) {
  .pub-thumb { grid-template-columns: 28px 1fr; }
  .pub-thumb .thumb { grid-column: 2; margin-bottom: 14px; max-width: 240px; }
  /* The figure is pinned to column 2, so the citation that follows it must be
     pinned there too — otherwise it is auto-placed into the 28px number
     column and every line ends up one word wide. */
  .pub-thumb > div:last-child { grid-column: 2; }
}

/* ============================================================
   Research interests
   ============================================================ */
.interests { list-style: none; margin: 0; padding: 0; }
.interests li {
  position: relative; padding: 7px 0 7px 26px; border-bottom: 1px solid var(--rule);
  color: var(--ink-soft);
}
.interests li:last-child { border-bottom: none; }
.interests strong { font-weight: 600; color: var(--ink); }
.interests li::before {
  content: ""; position: absolute; left: 2px; top: 20px;
  width: 10px; height: 2px; background: var(--accent);
}

/* ============================================================
   Figures & gallery
   ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }
.photo { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: #fff; }
.photo .frame {
  aspect-ratio: 4 / 3; background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: .8rem; text-align: center; padding: 12px;
}
.photo .frame img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption {
  padding: 13px 16px; font-size: .78rem; color: var(--ink-soft);
  border-top: 1px solid var(--rule);
}
/* A wide figure is cropped to 16:9 from the centre. Change the ratio here if
   a picture should be shown at its own shape instead. */
.figure-wide .frame { aspect-ratio: 16 / 9; }
/* A picture needs less room above it than a heading does, so a section that
   opens with one sits closer to the banner. */
section.block:has(> .wrap > .figure-wide:first-child) { padding-top: 16px; }
.figure-wide figcaption { text-align: center; }
/* A diagram must never be cropped, so this variant keeps the picture's own
   shape and fits it inside the frame. */
.figure-plain .frame { aspect-ratio: auto; padding: 0; }
.figure-plain .frame img { height: auto; object-fit: contain; }
.figure-plain figcaption { text-align: center; }

/* Keeps a phrase on one line, so names like Tie2-Fn2-3 or (5 Fabs-1) are never
   split across two lines. Wrap any text in <span class="nb">…</span>. */
.nb { white-space: nowrap; }

/* Intro line above a tab panel. Each <span> is one sentence on its own line;
   below 720px they fall back to normal wrapping. */
.panel-note { text-align: center; color: var(--ink-soft); margin: 0 auto 30px; max-width: 770px; }
.panel-note span { display: block; }
@media (max-width: 820px) { .panel-note span { display: inline; } }

/* A single photo on its own: centred, and shown whole rather than cropped.
   Delete the photo--solo class from the <figure> once there are several. */
.gallery-grid > .photo--solo:only-child { grid-column: 1 / -1; max-width: 520px; margin: 0 auto; }
.photo--solo .frame { aspect-ratio: auto; padding: 0; }
.photo--solo .frame img { height: auto; object-fit: contain; }
.photo--solo figcaption { text-align: center; }

/* ============================================================
   Tabs (Gallery)
   ============================================================ */
.tabs { border-bottom: 1px solid var(--rule); background: #fff; }
.tabs .wrap { display: flex; justify-content: center; gap: 30px; }
.tab-btn {
  background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: .92rem; color: var(--ink-soft);
  padding: 16px 2px; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.is-on { display: block; }
/* A panel sits right under the tab bar, so it needs less room on top
   than a normal section. */
section.block.tab-panel { padding-top: 26px; }

/* ============================================================
   EMDB depositions — five per row
   ============================================================ */
.emd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 1000px) { .emd-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .emd-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .emd-grid { grid-template-columns: repeat(2, 1fr); } }
.emd {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  background: #fff; transition: border-color .15s, transform .15s;
}
.emd:hover { border-color: #c9d2dd; transform: translateY(-2px); text-decoration: none; }
/* Tiles are white. Most EMDB renders arrive on white; the few that come on
   black are replaced with the author's own figure (images/emd-XXXXX.jpg). */
.emd-fig { aspect-ratio: 1 / 1; background: #fff; }
.emd-fig img { width: 100%; height: 100%; object-fit: contain; }
.emd-tagline { color: var(--ink-faint); font-family: var(--mono); font-size: .68rem; }
/* The accession line ("EMD-46041 · PDB 9CYE") needs 152px and the resolution
   another 38px, but a card is only 174px wide inside its padding. So the two
   sit on separate lines, and each is set nowrap so neither can break apart. */
.emd-meta { padding: 10px 12px 0; font-family: var(--mono); font-size: .7rem; }
.emd-id, .emd-res { display: block; white-space: nowrap; }
.emd-id { color: var(--accent); letter-spacing: 0; }
.emd-res { color: var(--ink-faint); margin-top: 2px; }
.emd-title {
  margin: 4px 0 0; padding: 0 12px 14px;
  font-size: .76rem; line-height: 1.4; color: var(--ink-soft);
}

/* ============================================================
   News
   ============================================================ */
/* Wide enough that a full sentence of news never has to wrap.
   Usable text width = 900 - 48 (padding) - 72 (date) - 14 (gap) = 766px. */
.news-wrap { max-width: 900px; }
/* width:fit-content makes the list only as wide as its longest line, and the
   auto margins then centre it under the centred section heading. */
.news {
  list-style: none; padding: 0;
  width: fit-content; max-width: 100%; margin: 0 auto;
}
.news li {
  display: grid; grid-template-columns: 72px 1fr; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.news li:last-child { border-bottom: none; }
/* An item with a picture gets a third column between the date and the text. */
.news li.with-thumb { grid-template-columns: 72px 112px 1fr; align-items: start; }
.news-thumb {
  display: block; border: 1px solid var(--rule); border-radius: 6px;
  overflow: hidden; background: #fff; transition: border-color .15s;
}
.news-thumb:hover { border-color: #c9d2dd; text-decoration: none; }
.news-thumb img { width: 100%; height: auto; }
.news .date { font-size: .82rem; color: var(--ink-faint); white-space: nowrap; padding-top: 4px; }
.news p { margin: 0; }
@media (max-width: 560px) {
  .news li, .news li.with-thumb { grid-template-columns: 1fr; gap: 4px; }
  .news-thumb { max-width: 200px; margin: 6px 0; }
}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; }
/* No trailing paragraph margin — the section's own padding sets the gap. */
.contact-grid > div > p:last-child { margin-bottom: 0; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; gap: 34px; } }
.info-row {
  display: grid; grid-template-columns: 108px 1fr; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.info-row:last-child { border-bottom: none; }
.info-row dt {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: 4px;
}
.info-row dd { margin: 0; overflow-wrap: anywhere; }

/* Narrow sidebar version (PI page): label above the value. */
.pi-contact .info-row { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
.pi-contact .info-row dt { padding-top: 0; }

.map-frame {
  aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-faint); font-size: .85rem; text-align: center; padding: 0;
}
/* Side by side with the address list, the map stretches to the same height
   instead of keeping a fixed 4:3 shape. */
@media (min-width: 821px) {
  .contact-grid > div { display: flex; flex-direction: column; }
  .contact-grid .map-frame { aspect-ratio: auto; flex: 1; min-height: 230px; }
}
/* Grayscale map. Delete the filter line to show it in full colour. */
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1); }

/* ============================================================
   Back to top — the button itself is added by script.js
   ============================================================ */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: var(--accent);
  color: #fff; line-height: 1;
  box-shadow: 0 3px 12px rgba(26,77,143,.3);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s, background-color .15s;
}
.to-top svg { display: block; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #16406f; }
@media (max-width: 560px) { .to-top { right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

.centered { text-align: center; }

/* A line break that only applies on wide screens. Below 760px the sentence
   before it no longer fits on one line, so the break is dropped and the text
   flows normally instead of leaving a stubby line. */
@media (max-width: 760px) { br.br-wide { display: none; } }

/* Small reference note under a paragraph. The <sup> marker in the body text
   links down to it. */
.footnote {
  font-size: .8rem; line-height: 1.5; color: var(--ink-faint);
  margin: 4px 0 0; scroll-margin-top: 96px;
}
.footnote:first-of-type { margin-top: 22px; }
.footnote a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.footnote a:hover { color: var(--accent); }

.callout {
  border: 1px solid var(--accent); border-left-width: 4px;
  border-radius: 8px; padding: 26px 28px; background: var(--accent-soft);
}
.callout h3 { margin-bottom: .4em; }
.callout p:last-child { margin-bottom: 0; }

/* Placeholder marker — delete these once real content is in */
/* Grey, unobtrusive — for a value that is simply not available yet. */
.pending { color: var(--ink-faint); }

.todo {
  background: #fff6d9; border-left: 3px solid #e0a800;
  padding: 3px 8px; border-radius: 3px; font-size: .93em;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--rule); padding: 40px 0 52px;
  background: var(--bg-soft);
}
.site-footer .wrap {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 32px; height: 32px; opacity: .75; }
.site-footer p { margin: 0; font-size: .82rem; color: var(--ink-faint); }
.site-footer a { color: var(--ink-soft); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: .82rem; }