/* =============================================================================
   ACTIVE — Active Materials Design Lab
   Shared stylesheet for every page.
   Colours and fonts are defined once, at the top, in :root.
   ============================================================================= */

/* Inter, used for the opening text on the home page. The file is kept in
   assets/fonts/ rather than fetched from Google, so the site needs no internet
   connection and no outside service to render correctly. */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
                U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --navy:#0b2540;
  --ink:#16202c;
  --muted:#5f6b7a;
  --faint:#8a94a1;
  --accent:#1a6073;
  --accent-soft:#e7f0f2;
  --line:#e2e0da;
  --line-soft:#eeece7;
  --bg:#ffffff;
  --bg-alt:#f8f7f4;
  --bg-deep:#0b2540;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Nanum Myeongjo","Apple SD Gothic Neo","Malgun Gothic",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;

  --wrap:1200px;
  --pad:32px;
  --head-h:66px;

  --knu-red:#c8102e;   /* the red on "@KNU" in the logo */
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.24;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* =============================================================================
   HEADER + NAVIGATION
   ============================================================================= */
.site-header{
  position:sticky;top:0;z-index:200;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--head-h)}
/* inline-block, not flex, so the space before @KNU is a real space in the text */
.brand{display:inline-block;color:var(--navy)}
.brand:hover{text-decoration:none}
.brand-mark{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.brand-accent{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--knu-red)}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line);border-radius:7px;
  width:42px;height:38px;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--navy);position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy)
}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}

/* plain text links — no underline, no box, colour change only */
.menu{display:flex;align-items:center;gap:6px}
.menu > li{position:relative}
.menu > li > a{
  display:block;font-size:13.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);padding:9px 10px;
}
.menu a,.menu a:hover{text-decoration:none}
.menu > li > a:hover{color:var(--navy)}
.menu > li > a.current{color:var(--navy);font-weight:600}
.sub{
  position:absolute;left:0;top:100%;min-width:232px;background:#fff;
  border:1px solid var(--line);border-radius:9px;padding:7px;
  box-shadow:0 18px 38px -24px rgba(11,37,64,.55);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s ease;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{
  display:block;padding:8px 12px;border-radius:6px;font-size:14px;color:var(--muted);
  letter-spacing:0;text-transform:none;font-weight:500;
}
.sub a:hover{background:var(--bg-alt);color:var(--navy);text-decoration:none}
.sub a.current{color:var(--accent);font-weight:600}

/* =============================================================================
   PAGE HEADINGS
   ============================================================================= */
.page-head{
  background:linear-gradient(180deg,#fbfbfa,var(--bg));
  border-bottom:1px solid var(--line-soft);padding:60px 0 44px
}
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px
}
.page-head h1{font-size:clamp(28px,4.4vw,42px);color:var(--navy)}
.page-head .lead{color:var(--muted);margin-top:16px;font-size:17px}
.rule{width:52px;height:3px;background:var(--accent);margin-top:22px;border-radius:2px}

/* the three "From … to …" arcs under the hero text */
.arc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.arc-list li{
  border-top:2px solid var(--accent);padding-top:14px;
  font-family:var(--serif);font-size:19px;color:var(--navy);line-height:1.4
}
.arc-list li span{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint)
}

/* Research focus — a picture, a heading, the text, and a link out */
.focus-title{
  font-size:clamp(28px,3.8vw,40px);color:var(--accent);margin:0;
  display:inline-block;padding-bottom:12px;border-bottom:4px solid var(--accent)
}
/* runs the full width of the cards below it, so the two line up rather than the
   text stopping short */
.focus-lead{margin:24px 0 30px;font-size:17.5px;color:#31404f}
.focus-lead em{font-style:normal;font-weight:600;color:var(--navy)}
.focus-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* with no lead paragraph between them, the heading's underline would otherwise
   sit right on top of the cards */
.focus-title + .focus-list{margin-top:40px}
.focus-card{
  background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  display:flex;flex-direction:column
}
.focus-shot{
  aspect-ratio:4/3;margin:16px 16px 0;background:#fff;border:1px solid var(--line-soft);
  border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center
}
.focus-shot img{width:100%;height:100%;object-fit:contain}
/* shown until a figure is dropped in */
.focus-shot:empty::after{
  content:"Figure to be added";color:var(--faint);font-size:13px;letter-spacing:.04em
}
.focus-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.focus-card h3{font-size:22px;color:var(--accent);margin:0 0 12px}
.focus-card p{margin:0 0 22px;color:#31404f;font-size:15.5px;line-height:1.7}
.focus-card .btn{align-self:flex-start;margin-top:auto;padding:10px 18px;font-size:14px}

.section{padding:64px 0}
.section--alt{background:var(--bg-alt);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.section-title{
  font-size:clamp(22px,3vw,30px);color:var(--navy);margin-bottom:8px
}
/* the part headings on the TEAM page (Group values, the two training programs) —
   the same size and colour as the group headings on the research pages */
.subhead{
  font-size:18px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin:0 0 24px;padding-bottom:14px;border-bottom:1px solid var(--line)
}
.section-intro{color:var(--muted);margin-bottom:26px;font-size:16.5px}
.group-head{
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px;display:flex;align-items:center;gap:14px
}
.group-head::after{content:"";flex:1;height:1px;background:var(--line)}
/* on the research topic pages each group heading starts a major part of the
   page, so it is set larger than the small label style Resources uses */
.section--group .group-head{font-size:18px;letter-spacing:.12em;margin-bottom:22px;gap:18px}

.btn{
  display:inline-block;padding:12px 24px;border-radius:7px;font-size:14px;font-weight:600;
  border:1px solid transparent;transition:.15s ease
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#123458}
.btn-ghost{border-color:var(--line);color:var(--navy);background:#fff}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* =============================================================================
   HOME
   ============================================================================= */
.hero{
  background:
    radial-gradient(900px 480px at 88% -10%,#e9f1f3 0%,rgba(233,241,243,0) 62%),
    linear-gradient(180deg,#fdfdfc 0%,var(--bg) 100%);
  padding:96px 0 84px;border-bottom:1px solid var(--line-soft);
}
.hero--full{padding:44px 0 60px}
.hero-kicker{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--accent);background:var(--accent-soft);padding:6px 14px;border-radius:99px;margin-bottom:22px
}
.hero h1{color:var(--navy);line-height:1.16}
.hero h1 .cap{color:var(--accent)}
/* the opening text is set in Inter, justified with hyphenation so the right
   edge stays straight without gaping word spaces */
.hero-body{
  margin-top:26px;font-family:"Inter",var(--sans);font-size:17.5px;line-height:1.8;
  letter-spacing:-.005em;color:#2b3947;
  text-align:justify;hyphens:auto;-webkit-hyphens:auto
}
.hero-body em{font-style:normal;font-weight:600;color:var(--navy)}
.hero-body + .hero-body{margin-top:20px}

/* Running prose is justified throughout the site, with hyphenation so the right
   edge stays straight without gaping word spaces. Short labels, names and
   affiliation lines are left out — they are not paragraphs. */
.page-head .lead,
.section-intro,
.focus-lead,
.focus-body p,
.topic-item .cap p,
.group-intro p,
.value p,
.alum p,
.pi-bio,
.openings p,
.prog-body li,
.news-text,
.news-extra,
.gal-event .desc,
.list li{
  text-align:justify;hyphens:auto;-webkit-hyphens:auto
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* Korean text breaks between words, not inside them */
:lang(ko){word-break:keep-all}

/* The one large call to action: the internship application, on the home page
   and at the top of the internship page. */
.hero-cta{margin-top:36px;text-align:center}
.btn-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:20px 36px;border-radius:12px;background:var(--accent);color:#fff;
  font-family:var(--sans);font-size:19px;font-weight:700;line-height:1.45;text-align:center;
  box-shadow:0 12px 26px -16px rgba(26,96,115,.9);transition:.15s ease
}
.btn-cta:hover{text-decoration:none;background:var(--navy);transform:translateY(-2px)}
.btn-cta .cta-note{font-weight:500;opacity:.85}
.btn-cta .cta-arrow{font-size:1.15em;line-height:1}

/* full-width hero: the lab name sits on a single line and the text uses the whole measure */
.hero--full h1{white-space:nowrap;font-size:min(3.05vw,38px)}
.hero--full .hero-body{max-width:none}
@media (max-width:980px){
  .hero--full h1{white-space:normal;font-size:clamp(26px,4.4vw,34px)}
}

/* =============================================================================
   CARDS / GRIDS
   ============================================================================= */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.figure-card{
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s ease
}
.figure-card:hover{border-color:#c9d6da;box-shadow:0 12px 30px -22px rgba(11,37,64,.45)}
/* Every card in a row gets the same picture box, so rows stay level whatever
   shape the figures are. --shot sets that box; the figure is fitted inside it,
   never cropped. */
/* white, because nearly every figure has a white background of its own — a tint
   here would show up as a grey frame around the artwork */
.figure-card .shot{
  display:block;aspect-ratio:var(--shot,4/3);background:#fff;padding:10px;overflow:hidden;
  border-bottom:1px solid var(--line-soft)
}
/* filling the box and letting object-fit do the scaling keeps the figure's own
   proportions while stopping a tall figure from stretching its card */
.figure-card .shot img{width:100%;height:100%;object-fit:contain}
.figure-card figcaption{padding:16px 18px;font-size:14.5px;color:var(--navy);font-weight:600;line-height:1.5}
.figure-card figcaption small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:4px}
.figure-card--lead{border-color:#cfe0e4;background:linear-gradient(180deg,#fbfdfd,#fff)}
/* a wide plot that takes a row on its own rather than sharing one */
.figure-card--strip{margin:0 0 18px}
.figure-card--strip:last-child{margin-bottom:0}
.figure-card--strip .shot{padding:14px 18px}

.clip-frame{position:relative;aspect-ratio:16/9;background:#0b1620}
.clip-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* A research topic opens with the ordinary page heading used everywhere else
   (eyebrow, title, one-line summary, accent rule). Below it the opening figure
   sits to the left of the framing text. The same two-column shape, mirrored,
   introduces a group further down the page. */
.section--topic-intro{padding:44px 0 56px}
.topic-head{
  display:grid;grid-template-columns:256px minmax(0,1fr);gap:38px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 32px
}
.topic-head .section-intro{margin-bottom:0}

/* a diagram that carries a whole section on its own — the research landing
   page's toolbox chart. Kept on white so the drawing's own white background
   does not show as a patch. */
.fig-wide{margin:0;border:1px solid var(--line);border-radius:12px;background:#fff;padding:22px 26px}
.fig-wide img{display:block;width:100%;height:auto;cursor:zoom-in}
.fig-wide figcaption{
  margin-top:18px;padding-top:15px;border-top:1px solid var(--line-soft);
  font-size:13.5px;color:var(--muted);line-height:1.6
}

/* the opening figure is exactly as wide as one of the three cards below it, and
   sits on the same column, so the two rows read as one block */
.group-intro{
  display:grid;grid-template-columns:calc((100% - 40px) / 3) minmax(0,1fr);
  gap:20px;align-items:start;margin-bottom:26px
}
/* the framing text reads the same everywhere — same size and colour as the
   sentence under a group heading */
.group-intro p{color:var(--muted);font-size:16.5px}
.group-intro p:last-child{margin-bottom:0}
.topic-figure{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.topic-figure img{width:100%;height:auto}
.topic-figure figcaption{
  padding:14px 18px;border-top:1px solid var(--line-soft);background:var(--bg-alt);
  font-size:13.5px;color:var(--muted);line-height:1.6
}
.topic-figure figcaption:empty{display:none}

/* a research topic: short label on top, one sentence under it */
/* grid-auto-rows keeps every row the same height, not just every card in a row */
.topic-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:20px;grid-auto-rows:1fr}
.topic-item{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.topic-item .shot{
  display:block;aspect-ratio:var(--shot,4/3);background:#fff;padding:10px;overflow:hidden;
  border-bottom:1px solid var(--line-soft)
}
.topic-item .shot img{width:100%;height:100%;object-fit:contain}
.topic-item .cap{padding:16px 18px 18px}
.topic-item h3{font-size:16.5px;color:var(--navy);margin:0 0 6px;line-height:1.35}
.topic-item p{margin:0;font-size:14px;color:var(--muted);line-height:1.62}

/* the figure that opens a group — kept small so it does not dominate the section */
/* framed like the cards below it — same border, same corner */
.group-lead{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.group-lead img{display:block;width:100%;height:auto}

/* Research pages use three bands, so the eye can tell them apart:
     .section--topic-intro   the opening figure and framing text  — its own tint
     .section--group         each topic group                     — plain white
     .work-inline            the related-work list inside a group — the warm tint  */
.section--group{border-top:1px solid var(--line-soft)}
.section--group:first-of-type{border-top:0}

/* The pieces of the design toolbox (RESEARCH landing page) that this topic
   draws on. Sits above Related work and is framed the same way, but on white
   so the tiles — which are cut straight out of the toolbox chart — read as
   picked-up pieces rather than another block of text.

   Always eight columns, so the longest list (eight tiles) still fits on one
   line and every group shows its tiles at exactly the same size, however many
   it has. The tiles shrink with the window rather than wrapping. */
.toolbox{
  margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:6px 26px 24px
}
.toolbox > h3{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 18px
}
.toolbox-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.toolbox-grid img{
  display:block;width:100%;aspect-ratio:1;object-fit:contain;background:#fff
}

.work-inline{
  margin-top:34px;background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;
  padding:6px 26px 16px
}
.work-inline > h3{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 2px
}
.work-inline .pub{padding:14px 0 14px 20px}
/* inside a research page these are plain references, not a link list */
.work-inline .pub .t{font-size:15px;color:var(--navy)}
.work-inline .pub:last-child{border-bottom:0}

/* the published / in-progress / patent lists at the foot of each topic page */
.work-group{margin-bottom:34px}
.work-group:last-child{margin-bottom:0}
.work-group > h3{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--line)
}

.xref li{padding:12px 0 12px 22px;position:relative;border-bottom:1px dashed var(--line-soft);font-size:15.5px;color:var(--muted)}
.xref li:last-child{border-bottom:0}
.xref li::before{content:"\2192";position:absolute;left:0;color:var(--accent)}
.xref a{font-weight:600}

.topic-block{margin-bottom:56px}
.topic-block:last-child{margin-bottom:0}
.topic-block > h2{font-size:24px;color:var(--navy);margin-bottom:6px}
.topic-block > p.note{color:var(--muted);font-size:15px;margin-bottom:22px}
.topic-lead{margin-bottom:22px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
/* a cap so a tall overview figure does not dwarf the short ones in the sections
   above and below it */
.topic-lead img{width:100%;max-height:400px;object-fit:contain}

/* =============================================================================
   TEAM
   ============================================================================= */
.pi{display:grid;grid-template-columns:240px 1fr;gap:44px;align-items:start}
.pi-photo{border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#fff}
.pi h1{font-size:40px;color:var(--navy)}
.pi .pi-title{color:var(--accent);font-size:18px;font-weight:600;margin:10px 0 0}
.pi .role{color:var(--muted);margin-top:8px}
.pi-mail{margin:22px 0 0;font-size:17px;color:var(--ink)}
.pi-links{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}

/* CV: one titled block per section, dates in their own left column.
   Each block sits in its own <section>, alternating white / tinted so the
   three parts of the CV read as separate bands. */
.cv-block{margin-bottom:0}
.cv-block > h2{font-size:28px;color:var(--accent);margin-bottom:22px}
/* baseline alignment keeps the year and the first line of the entry on the
   same line, and every block uses the same date column so the three parts of
   the CV line up with each other down the page */
.cv-entry{
  display:grid;grid-template-columns:170px 1fr;gap:28px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line-soft)
}
.cv-entry:last-child{border-bottom:0}
.cv-entry .when{font-size:16.5px;font-weight:600;color:var(--navy);line-height:1.5}
.cv-entry .what{display:block;color:var(--ink);font-weight:600;font-size:18px;line-height:1.5}
.cv-entry .where{display:block;color:#45525f;font-size:16px;line-height:1.62;margin-top:5px}
.cv-entry .adv{display:block;color:var(--muted);font-size:16px;font-style:italic;margin-top:4px}
.cv-entry .cv-note{display:block;margin-top:9px;color:var(--muted);font-size:15px;line-height:1.65}

.pi-bio{font-size:17px;color:#31404f;margin-top:18px}

/* Members: one full-width row each — small portrait, then who, then what they work on */
.member-list{display:grid;gap:16px}
.member{
  display:grid;grid-template-columns:132px 1.15fr 1fr;gap:28px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;transition:.18s ease
}
.member:hover{border-color:#c9d6da;box-shadow:0 12px 28px -22px rgba(11,37,64,.45)}
.member .portrait{width:132px;height:132px;border-radius:10px;overflow:hidden;background:#fff}
/* framed a little above centre so the top of the head is not cropped */
.member .portrait{overflow:hidden;background:#fff}
.member .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%}

/* Per-photo framing, set on the article with inline custom properties:
     --zoom  how much of the picture to show (1 = the whole thing, ~1.3 = filled)
     --zy    where the zoom is centred, so the head stays in view
     --tilt  straightens a scan that went in crooked
   member--framed pulls back from the default crop; member--tilt only rotates. */
.member--framed .portrait img{
  object-fit:contain;background:#fff;
  transform:scale(var(--zoom,1.2));transform-origin:center var(--zy,28%)
}
.member--tilt .portrait img{
  transform:rotate(var(--tilt,0deg)) scale(var(--tilt-zoom,1.06))
}
.member h3{font-family:var(--serif);font-size:20px;color:var(--navy)}
.member .ko{font-size:13px;color:var(--faint);margin-top:2px}
.member .deg{margin:12px 0 0;font-size:13.8px;color:var(--muted);line-height:1.66}
.member .what p{margin:0 0 14px}
.member .what p:last-child{margin-bottom:0}
.member .what b{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:3px
}
.member .topic{font-size:14.5px;color:var(--navy)}
.member .mail{font-size:13.5px;color:var(--muted);word-break:break-all}
.member--chief{border-color:#cfe0e4;background:linear-gradient(180deg,#fbfdfd,#fff)}
.badge{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:3px 9px;border-radius:99px;margin-left:6px;vertical-align:middle
}

.alum{
  border-left:3px solid var(--accent);background:#fff;border-radius:0 10px 10px 0;padding:22px 26px;
  border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)
}
.alum h3{font-family:var(--serif);font-size:18px;color:var(--navy)}
.alum p{font-size:13.8px;color:var(--muted);margin:8px 0 0}
.alum .now{margin-top:8px;font-size:14px;color:var(--ink)}

.value{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}
.value h3{font-family:var(--serif);font-size:19px;color:var(--navy);margin-bottom:10px}
.value p{font-size:14.5px;color:var(--muted);margin:0}

/* =============================================================================
   INTERNSHIP — the application link, then past interns' answers question by
   question. Each question shows its topic large, the question itself beneath,
   and the answers folded away until opened.
   ============================================================================= */
.apply-row{margin-top:26px}
.fb-intro{color:var(--muted);font-size:15.5px;margin:0 0 26px}
.fb-intro b{color:var(--navy)}
.fb-list{display:grid;gap:18px}
.fb-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 30px 24px}
.fb-topic{font-size:23px;color:var(--navy);margin:0 0 10px;line-height:1.35}
.fb-question{color:var(--muted);font-size:15.5px;line-height:1.7;margin:0 0 18px}
details.fb-answers summary{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:9px 18px;border:1px solid var(--line);border-radius:99px;background:#fff;
  font-size:14.5px;font-weight:600;color:var(--accent);transition:.15s ease
}
details.fb-answers summary:hover{border-color:var(--accent)}
details.fb-answers summary::-webkit-details-marker{display:none}
details.fb-answers summary::after{content:"+";font-size:18px;line-height:1}
details.fb-answers[open] summary::after{content:"\2212"}
details.fb-answers[open] .when-closed,
details.fb-answers:not([open]) .when-open{display:none}
details.fb-answers ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
details.fb-answers li{
  background:var(--bg-alt);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  padding:15px 20px;font-size:15px;line-height:1.8;color:#31404f;text-align:justify
}

details.prog{border:1px solid var(--line);border-radius:10px;background:#fff;margin-bottom:12px;overflow:hidden}
details.prog summary{
  cursor:pointer;padding:18px 22px;font-weight:600;color:var(--navy);font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px
}
details.prog summary::-webkit-details-marker{display:none}
details.prog summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1}
details.prog[open] summary::after{content:"\2212"}
details.prog .prog-body{padding:0 22px 20px;border-top:1px solid var(--line-soft)}
details.prog .prog-body li{padding:14px 0;border-bottom:1px dashed var(--line-soft);font-size:14.5px;color:var(--muted)}
details.prog .prog-body li:last-child{border-bottom:0}
details.prog .prog-body b{display:block;color:var(--navy);font-weight:600;margin-bottom:3px}

.openings{
  background:var(--bg-deep);color:#e9eef3;border-radius:14px;padding:44px;
  display:grid;grid-template-columns:1.25fr .95fr;gap:44px
}
.openings h2{color:#fff;font-size:26px}
.openings p{color:#b9c7d6;font-size:15.5px}
.openings .list li{
  padding:11px 0 11px 22px;position:relative;color:#d7e2ec;font-size:15px;border-bottom:1px solid rgba(255,255,255,.09)
}
.openings .list li:last-child{border-bottom:0}
.openings .list li::before{content:"\25B8";position:absolute;left:0;color:#5f9bb0}
.contact-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:26px}
.contact-box dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7f95ab;font-weight:700;margin-top:16px}
.contact-box dt:first-child{margin-top:0}
.contact-box dd{margin:4px 0 0;font-size:14.5px;color:#eef3f8}
.contact-box a{color:#8fc4d6}

/* =============================================================================
   PUBLICATIONS
   ============================================================================= */
.year-block{margin-bottom:44px}
.year-block:last-child{margin-bottom:0}
.year-mark{
  font-family:var(--serif);font-size:26px;color:var(--navy);padding-bottom:10px;
  border-bottom:1px solid var(--line);margin-bottom:6px
}
.year-mark small{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-left:12px;font-weight:700
}
/* "Works in Progress" — collapsed until clicked */
details.year-block > summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:14px
}
details.year-block > summary::-webkit-details-marker{display:none}
details.year-block > summary::after{
  content:"+";color:var(--accent);font-family:var(--sans);font-size:24px;line-height:1;font-weight:400;
  margin-left:auto
}
details.year-block[open] > summary::after{content:"\2212"}
details.year-block > summary:hover{color:var(--accent)}
details.year-block > summary small{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:5px 12px;border-radius:99px
}
details.year-block[open] > summary small{content:none;opacity:.55}

.pub{padding:18px 0 18px 20px;border-bottom:1px dashed var(--line-soft);position:relative}
.pub:last-child{border-bottom:0}
.pub::before{content:"";position:absolute;left:0;top:26px;width:7px;height:7px;border-radius:50%;background:#cdd8dd}
.pub:hover::before{background:var(--accent)}
/* every title reads the same, whether or not a publisher link exists yet —
   papers still in press have no DOI to point at. The small arrow, not the
   colour, is what marks a title as clickable. */
.pub .t{font-size:16px;color:var(--accent);font-weight:600;line-height:1.5}
.pub .t a{color:inherit;text-decoration:none}
.pub .t a:hover{text-decoration:underline}
.pub .t a::after{content:" \2197";font-size:12px;color:var(--faint);font-weight:400}
.pub .a{font-size:14px;color:var(--muted);margin-top:5px}
.pub .a strong{color:var(--navy);font-weight:700}
.pub .v{font-size:14px;color:var(--accent);margin-top:4px;font-style:italic}
.pub .v strong{font-weight:700;font-style:italic}
.pub .note{
  display:inline-block;margin-top:8px;font-size:12px;background:var(--accent-soft);color:var(--accent);
  padding:3px 10px;border-radius:99px;font-style:normal
}

/* =============================================================================
   RESOURCES
   ============================================================================= */
.res-item{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.res-item .shot{aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px}
.res-item .shot img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.res-item .cap{padding:12px 14px 14px;border-top:1px solid var(--line-soft)}
.res-item .name{font-size:14px;font-weight:600;color:var(--navy);line-height:1.4;display:block}
.res-item .model{display:block;font-size:12.5px;color:var(--faint);margin-top:3px}
.res-item .model em{font-style:normal;display:block;margin-top:2px}
/* equipment that is ordered but not installed yet — the picture space is left
   plain so the card lines up with the others, with no placeholder box drawn */
.res-item--soon .model em{
  color:var(--accent);font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  margin-top:6px
}

/* =============================================================================
   NEWS
   ============================================================================= */
.news-list{border-left:2px solid var(--line);margin-left:8px}
.news-item{position:relative;padding:0 0 34px 34px}
.news-item::before{
  content:"";position:absolute;left:-7px;top:8px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid var(--accent)
}
.news-date{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.news-text{margin:5px 0 0;font-size:15.5px;color:var(--ink)}
.news-text em{font-style:italic;color:var(--navy)}
.news-text strong{font-weight:700;color:var(--navy)}
/* the Korean detail under a news item — the substance of the award or grant,
   so it is set as strongly as the English line above it */
.news-extra{
  margin-top:12px;padding:14px 18px;background:var(--accent-soft);
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  font-size:15px;line-height:1.7;color:#22333f;font-weight:500;white-space:pre-line
}
/* News photos vary a lot in shape (panoramas next to portrait posters), so they are laid
   out at one common height with the width left to follow — rows stay level either way. */
.news-shots{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.news-shots img{
  height:210px;width:auto;max-width:100%;object-fit:contain;background:#fff;
  border-radius:9px;border:1px solid var(--line);cursor:zoom-in;transition:.18s ease
}
.news-shots img:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(11,37,64,.6)}

/* =============================================================================
   GALLERY
   ============================================================================= */
.gal-year{
  font-family:var(--serif);font-size:30px;color:var(--navy);margin:0 0 24px;
  padding-bottom:10px;border-bottom:2px solid var(--navy)
}
/* the same chronology rail the news page uses, one per year */
.gal-list{border-left:2px solid var(--line);margin-left:8px}
.gal-event{position:relative;padding:0 0 48px 34px}
.gal-event:last-child{padding-bottom:6px}
.gal-event::before{
  content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:2px solid var(--accent)
}
.gal-event .when{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
.gal-event h3{font-family:var(--serif);font-size:22px;color:var(--navy);margin:5px 0 8px}
.gal-event .desc{font-size:15px;color:var(--muted);margin:0 0 18px;white-space:pre-line}
.gal-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:14px}
.gal-shots img{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);
  cursor:zoom-in;transition:.18s ease;background:var(--bg-alt)
}
.gal-shots img:hover{transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(11,37,64,.6)}

/* lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(9,20,32,.93);z-index:500;
  display:none;align-items:center;justify-content:center;padding:28px
}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;width:auto;border-radius:8px}
.lightbox .close{
  position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:34px;
  cursor:pointer;line-height:1
}
.lightbox .nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);
  border:0;color:#fff;font-size:30px;width:52px;height:52px;border-radius:50%;cursor:pointer
}
.lightbox .nav-btn:hover{background:rgba(255,255,255,.24)}
.lightbox .prev{left:20px}
.lightbox .next{right:20px}
.lightbox .count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#a9bccd;font-size:13px}
.lightbox.single .nav-btn,.lightbox.single .count{display:none}

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer{background:var(--bg-deep);color:#c2d0de;padding:60px 0 32px;margin-top:72px}
/* two columns only, so the full lab name fits on one line */
.foot-grid{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:64px}
.foot-brand .brand-mark{color:#fff;font-size:24px}
.foot-brand .brand-accent{font-size:24px;color:#ff6b7f}
.foot-brand p{margin-top:12px;font-size:14.5px;color:#9fb2c4}
.foot-acronym{
  font-family:var(--serif);font-size:18px;color:#dbe6f0 !important;margin-top:14px !important;
  white-space:nowrap
}
.foot-acronym .cap{color:#7fc4d8;font-weight:700}
.site-footer h2{
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#7f95ab;margin:0 0 14px
}
.site-footer li{padding:5px 0;font-size:14.5px}
.site-footer a{color:#c2d0de}
.site-footer a:hover{color:#fff}
.foot-bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#7f95ab
}

.to-top{
  position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;
  background:var(--navy);color:#fff;border:0;cursor:pointer;font-size:17px;
  box-shadow:0 8px 22px -10px rgba(11,37,64,.7);opacity:0;pointer-events:none;transition:.2s;z-index:180
}
.to-top.show{opacity:1;pointer-events:auto}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width:1040px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .focus-list{grid-template-columns:1fr;gap:24px}
  .arc-list{grid-template-columns:1fr;gap:14px}
  .openings{grid-template-columns:1fr;padding:32px}
  .foot-grid{grid-template-columns:1fr;gap:32px}
}
/* The lab name and the seven menu items need about 1000px side by side. Below
   that the menu folds into the button, well before it would run off the edge —
   the rest of the page still uses the wide layout down to 820px. */
@media (max-width:1000px){
  .nav-toggle{display:flex}
  .nav{
    display:none;position:absolute;left:0;right:0;top:var(--head-h);background:#fff;
    border-bottom:1px solid var(--line);padding:10px var(--pad) 20px;max-height:calc(100vh - var(--head-h));
    overflow-y:auto;box-shadow:0 18px 30px -22px rgba(11,37,64,.5)
  }
  .nav.open{display:block}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu > li > a{padding:13px 4px;border-bottom:1px solid var(--line-soft)}
  .menu > li > a.current::after{display:none}
  .menu > li > a.current{color:var(--accent)}
  .sub{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:4px 0 8px 14px;min-width:0;border-left:2px solid var(--line-soft);margin:6px 0 8px 6px
  }
}
@media (max-width:820px){
  .topic-head,.group-intro{grid-template-columns:1fr;gap:24px}
  .fb-item{padding:22px 20px 20px}
  .fb-topic{font-size:20px}
  .btn-cta{padding:18px 24px;font-size:17px}
  .topic-head{padding:22px 20px}
  /* eight across is too small to read on a narrow screen */
  .toolbox-grid{grid-template-columns:repeat(4,1fr)}
  .section--topic-intro{padding:32px 0 40px}
  .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-acronym{white-space:normal}
  .pi{grid-template-columns:1fr;gap:26px}
  .pi-photo{max-width:250px}
  .cv-entry{grid-template-columns:1fr;gap:5px}
  .member{grid-template-columns:104px 1fr;gap:20px}
  .member .portrait{width:104px;height:104px}
  .member .what{grid-column:1 / -1;padding-top:4px;border-top:1px dashed var(--line-soft)}
  .member .what p:first-child{margin-top:12px}
  .grid-2{grid-template-columns:1fr}
  .section{padding:48px 0}
  .hero{padding:56px 0 52px}
  .hero--full{padding:30px 0 44px}
  .site-footer{margin-top:52px}
}
@media (max-width:560px){
  :root{--pad:20px}
  .brand-mark,.brand-accent{font-size:17px}
  /* the lab name in the footer is set larger than in the header and is kept on
     one line elsewhere; on a phone it has to be allowed to wrap, or it holds
     the whole footer wider than the screen */
  .foot-brand .brand-mark{white-space:normal}
  /* the home page's internship button: too long for one line on a phone, so the
     text wraps as a paragraph and the deadline drops to its own line beneath */
  .hero-cta .btn-cta{display:block;padding:18px 20px}
  .hero-cta .cta-note{display:block;margin-top:4px;font-size:.92em}
  .hero-cta .cta-arrow{display:none}
  /* Korean breaks only between words, so in a column this narrow a justified
     line opens wide gaps; set flush left instead */
  details.fb-answers li{text-align:left;padding:14px 16px}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .focus-list{grid-template-columns:1fr;gap:22px}
  .arc-list{grid-template-columns:1fr;gap:14px}
  .gal-shots{grid-template-columns:repeat(2,1fr);gap:10px}
  .toolbox-grid{grid-template-columns:repeat(3,1fr)}
  .topic-grid{grid-template-columns:1fr}
  .news-shots img{height:150px}
  .openings{padding:26px}
}

@media print{
  .site-header,.to-top,.lightbox{display:none}
  .site-footer{background:none;color:#333}
}