/* ==========================================================================
   LIMM — Clinical Editorial
   layout.css · shell, hairline grid, navigation, section furniture, footer
   ========================================================================== */

/* ---- Shell & 12-column grid ---------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--page-x);
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}
/* The content grid steps down with the hairline grid: 12 → 6 → 4 columns. */
@media (max-width: 1023px) { .grid12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Visible hairline column grid, drawn behind content (MobilityLab). */
.ruled { position: relative; isolation: isolate; }
.ruled > * { position: relative; z-index: 1; }

.rule-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  max-width: var(--shell-max);
  margin-inline: auto;
  /* Keep the decorative frame clear of content aligned to the shell edge. */
  --rule-x: max(20px, calc(var(--page-x) - 12px));
  padding-inline: var(--rule-x);
}
.rule-grid span { border-left: 1px solid var(--rule-soft); }
.rule-grid span:first-child { border-left-color: var(--rule); }
.rule-grid::after {
  content: "";
  position: absolute; inset-block: 0; right: var(--rule-x);
  border-right: 1px solid var(--rule);
}
@media (max-width: 1023px) {
  .rule-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rule-grid { display: none; }
}

/* ---- Section furniture --------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(48px, 4.5vw, 80px); }
.hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  padding-block: 18px;
  border-top: 1px solid var(--ink);
  margin-bottom: clamp(32px, 3.5vw, 52px);
}
.section-head__label { color: var(--navy); white-space: nowrap; }
.section-head__label b { color: var(--accent-ink); font-weight: 500; }
.section-head__aside { color: var(--muted); text-align: right; }

/* ---- Major section head ---------------------------------------------------
   Home's five sections announce themselves at display size. The plain head
   above says "01 / Research" in eleven-point mono over an ink rule, which is
   the right voice for a sub-head inside a page — it is what dokyoung-kim.html
   uses, and that page keeps it — but on Home it was the only thing standing
   between one full-width picture and the next, and it whispered.

   Nothing is invented to make it louder: the number stays the mono marker it
   already was, the aside stays where it was, and the word that was already
   there is simply set in the display face at the size it deserves. The rule
   over it is unchanged, so the page's structure reads the same from a
   distance; only the volume moved.                                          */
.section-head--major {
  align-items: end;
  padding-block: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 26px);
  /* Closer to its own content than the plain head is. The head now carries
     enough weight to own what follows it, and 72px of paper between a title
     and the thing it titles reads as a gap rather than as breathing room. */
  margin-bottom: clamp(30px, 3.4vw, 54px);
}
.section-head--major .section-head__label {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.2vw, 20px);
  min-width: 0;
  color: var(--ink);
  white-space: normal;
}
.section-head--major .section-head__n {
  flex: none;
  align-self: flex-start;
  padding-top: 0.55em;
  color: var(--accent-ink);
  font-weight: 500;
}
.section-head--major .section-head__word {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0, "wght" 340;
  font-weight: 340;
  font-size: clamp(2rem, 0.85rem + 3.2vw, 4.25rem);   /* 32 → 68 */
  line-height: 0.92;
  letter-spacing: -0.032em;
}
.section-head--major .section-head__aside { padding-bottom: 0.35em; }

/* On a phone the two halves stop competing for one line: the head stacks and
   the aside sits under it, left-aligned with everything else. */
@media (max-width: 640px) {
  .section-head--major {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }
  .section-head--major .section-head__aside { text-align: left; padding-bottom: 0; }
}

/* ---- Links & buttons ----------------------------------------------------- */
/* Underline that grows from an accent marker */
.link-grow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-bottom: 3px;
}
.link-grow::before {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 6px; height: 2px;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}
.link-grow:hover::before,
.link-grow:focus-visible::before { width: 100%; }
.link-grow:active { color: var(--navy); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 14px 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--navy); border-color: var(--navy); }
.btn--ghost { border-color: var(--rule); color: var(--navy); }
.btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: var(--paper); }

/* Hairline chip */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  background: var(--paper-3);
}
.chip--live { border-color: var(--accent); color: var(--accent-ink); }

/* ---- Announcement bar -----------------------------------------------------
   A slim ink strip above the masthead on every page. It sits in normal flow
   and scrolls away, so the sticky masthead's offset maths is untouched. One
   line, never two: the middle segments drop out on narrow screens and the
   status truncates rather than wrapping.                                     */
.announce {
  background: var(--ink);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

/* Switched off before the first paint: the inline script in index.html's head
   reads data/home.json out of the page and marks the root, so a strip that is
   not running is never painted and then taken away. main.js repeats the
   decision on every page for the copy the server hands back. */
html.banner-off .announce { display: none; }

.announce__link {
  display: flex;
  align-items: center;
  gap: 0.75em;
  min-height: 36px;
  padding-block: 8px;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  white-space: nowrap;
  overflow: hidden;
  transition: color var(--dur) var(--ease);
}
.announce__link:hover { color: var(--paper); }

/* Live marker — the accent's only permitted semantics. */
.announce__link::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: announce-pulse 3.2s var(--ease) infinite;
}
@keyframes announce-pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  35%           { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.announce__seg { flex: none; }
.announce__seg + .announce__seg::before {
  content: "·";
  margin-right: 0.75em;
  color: color-mix(in srgb, var(--paper) 40%, transparent);
}
.announce__title { color: var(--accent); font-weight: 500; }
/* The one segment allowed to shrink: it ellipsises instead of wrapping. */
.announce__status {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announce__arrow {
  flex: none;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.announce__link:hover .announce__arrow { transform: translateX(4px); }
.announce__link:focus-visible { outline-offset: -3px; }

@media (max-width: 540px) { .announce__date { display: none; } }
@media (max-width: 420px) {
  .announce__city { display: none; }
  .announce__link { font-size: 0.625rem; letter-spacing: 0.06em; gap: 0.6em; min-height: 32px; }
  .announce__seg + .announce__seg::before { margin-right: 0.6em; }
  /* The strip is shorter here, so the menu's clearance follows it down. */
  :root { --announce-h: 33px; }
}

/* ---- Masthead ------------------------------------------------------------ */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.masthead.is-compact {
  border-bottom-color: var(--rule);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  min-height: var(--nav-h);
  transition: min-height var(--dur) var(--ease);
}
.masthead.is-compact .masthead__inner { min-height: var(--nav-h-compact); }

/* Wordmark */
.wordmark { display: block; line-height: 1; }
.wordmark__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
}
.wordmark__dot { color: var(--accent); }
.wordmark__full {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  white-space: nowrap;
  max-height: 20px;
  opacity: 1;
  overflow: hidden;
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease),
              margin-top var(--dur) var(--ease);
}
/* Too long to sit beside the burger on a phone — the full name is in the footer. */
@media (max-width: 640px) { .wordmark__full { display: none; } }
.masthead.is-compact .wordmark__full { max-height: 0; opacity: 0; margin-top: 0; }

/* Nav links */
.nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav__link {
  position: relative;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--navy);
  padding-block: 6px;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--accent);
  transition: width var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link:focus-visible::after { width: 100%; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { width: 100%; background: var(--ink); }

.masthead__utils { display: flex; align-items: center; gap: 16px; }

.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pill:hover { background: var(--ink); color: var(--paper); }
.pill:active { background: var(--navy); border-color: var(--navy); }

/* Mobile menu */
.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 999px;
}
.burger span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  position: relative;
  transition: background var(--dur-fast) var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--paper);
  /* The strip is counted in: at the top of the page the masthead sits below
     it, and without it the first menu line would open two pixels under the
     header. */
  padding: calc(var(--nav-h) + var(--announce-h) + 40px) var(--page-x) 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Six links, a utility row and two foot lines fit a 390x844 phone with room
     to spare, but not a 640-tall one, and space-between clips what does not
     fit rather than letting it scroll — which used to strand the email address
     below the fold at 320x568. The overflow is a safety valve for the short
     screens; where the content fits, nothing scrolls. */
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 450ms var(--ease), visibility 450ms var(--ease);
}
.menu.is-open { transform: none; visibility: visible; }
.menu__list { display: flex; flex-direction: column; gap: 4px; }
.menu__link {
  display: flex; align-items: baseline; gap: 14px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.menu__link i { font-style: normal; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--accent-ink); letter-spacing: 0.08em; }
.menu__link[aria-current="page"] { color: var(--accent-ink); }
.menu__foot { color: var(--muted); }
/* The way in to the admin screen on a phone, where the footer is a long scroll
   away. It is deliberately not a seventh menu link: it lives in the muted foot
   block under a rule that closes the six pages off, at utility size in the
   mono face rather than the display serif the pages are set in. The row is
   48px tall so it is a comfortable tap, and the chevron — not a number, which
   is the list's own mark — is what says it leads somewhere. Placement and
   behaviour are unchanged; only the word it carries is now English. */
.menu__admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-bottom: 18px;
  padding-block: 12px;
  border-top: 1px solid var(--rule);
  color: var(--navy);
  transition: color var(--dur) var(--ease);
}
.menu__admin::after {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.menu__admin:hover,
.menu__admin:focus-visible { color: var(--ink); }
.menu__admin:hover::after { transform: translateX(3px) rotate(45deg); }

@media (max-width: 1023px) {
  .nav, .masthead__utils .pill { display: none; }
  .burger { display: inline-flex; }
}
@media (min-width: 1024px) { .menu { display: none; } }

/* ---- Footer -------------------------------------------------------------- */
.footer {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  padding-block: clamp(40px, 4vw, 64px) 32px;
}
/* Five columns now rather than four: 2 + 2 + 2 + 4 + 2. The way in to the admin
   screen has a labelled column of its own beside Address, Contact and Supported
   by. Supported by holds the widest single line in the footer — "National
   Research Foundation of Korea (NRF)", 312px — so it takes four columns and the
   brand and the address, both of which already read as wrapped blocks, take
   two. The pill and the e-mail set the floor at two columns each. */
.footer__grid { row-gap: 40px; }
.footer__brand { grid-column: span 2; }
.footer__col   { grid-column: span 2; }
.footer__col--grants { grid-column: span 4; }
/* On the twelve-column grid the labelled columns reserved width they did not
   use: Supported by took four columns for a 312px line and Site took two for a
   96px pill, so the widest hole in the footer sat between those two labels —
   the one the owner asked about. From 1240 the four labelled columns are sized
   to their content instead, so every gap is the same column-gap and the slack
   collects in the brand column, where a wordmark is happy to have it.

   1240, not 1024: the four content columns and their gaps come to 949px, and
   below 1240 what is left over is too narrow for the brand to set "Kyung Hee
   University," on a line — 165px at 1240, 121px at 1180, 63px at 1100. Under
   1240 the twelve-column spans above, and the 6/4-column steps at the foot of
   this file, still own the layout. */
@media (min-width: 1240px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.2fr) repeat(4, max-content);
    column-gap: clamp(28px, 3.5vw, 64px);
  }
  .footer__brand,
  .footer__col,
  .footer__col--grants { grid-column: auto; }
  /* The NRF line is what makes that column wide; keep it on one line. */
  .footer__col--grants li { white-space: nowrap; }
}
.footer h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-weight: 600; font-size: 2rem; line-height: 1;
  letter-spacing: 0.01em;
}
.footer__label { color: var(--navy); margin-bottom: 14px; display: block; }
.footer__label--brand { margin-top: 10px; }
.footer__brandline { font-size: var(--text-sm); color: var(--navy); }
.footer__list li { font-size: var(--text-sm); color: var(--ink); padding-block: 3px; }
.footer__list a:hover { color: var(--accent-ink); }
.footer__bottom {
  margin-top: clamp(32px, 3.5vw, 48px);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
  align-items: baseline;
  color: var(--muted);
}
/* The way in to the admin screen. It used to sit as a small underlined word at
   the right end of the copyright row — the least-looked-at pixel on the page,
   and the owner failed to find it twice. It now has a labelled column of its
   own in the footer grid, where a reader scanning Address / Contact /
   Supported by lands on it, and it is drawn as a hairline pill: the same mark
   the masthead's CONTACT control uses, so it reads as a control rather than as
   a word in a sentence. Bordered, not filled — this is chrome, and it is not
   given the accent, which on this site means live/current. */
.footer__admin {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.footer__admin span {
  transition: transform var(--dur) var(--ease);
}
.footer__admin:hover,
.footer__admin:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}
.footer__admin:hover span { transform: translateX(3px); }

@media (max-width: 1023px) {
  .footer__brand { grid-column: span 6; }
  .footer__col,
  .footer__col--contact,
  .footer__col--grants,
  .footer__col--admin { grid-column: span 3; }
}
@media (max-width: 640px) {
  .footer__brand,
  .footer__col,
  .footer__col--contact,
  .footer__col--grants,
  .footer__col--admin { grid-column: span 4; }
}