:root{
  --paper:#F2EDE3; --paper-2:#E9E2D4; --paper-3:#DFD6C4;
  --ink:#221C15; --ink-2:#5C5345; --ink-3:#8A7F6C;
  --marigold:#D8730F; --gold:#E5A12B;
  --espresso:#221B14; --espresso-2:#2C241A;
  --line:#CBBFA8; --line-soft:#D8CEBB;
  --serif:'Noto Serif KR', serif;
  --fr:'Fraunces', serif;
  --sans:'Pretendard','Noto Serif KR',sans-serif;
  --mono:'IBM Plex Mono', monospace;
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.78;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--gold); color:var(--espresso)}

/* ---------- masthead ---------- */
.masthead{
  position:sticky; top:0; z-index:50;
  background:rgba(242,237,227,.86); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line);
}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between; height:66px; gap:24px}
.brand{display:flex; align-items:baseline; gap:12px; text-decoration:none; white-space:nowrap}
.brand b{font-family:var(--serif); font-weight:700; font-size:20px; letter-spacing:.01em}
.brand span{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--ink-3); text-transform:uppercase}
nav.nav{display:flex; gap:26px; align-items:center}
nav.nav a{
  font-family:var(--sans); font-size:14.5px; text-decoration:none; color:var(--ink-2);
  padding:6px 1px; position:relative; transition:color .2s;
}
nav.nav a:hover{color:var(--ink)}
nav.nav a.active{color:var(--ink)}
nav.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--marigold);
}
.menu-toggle{display:none}

/* ---------- generic ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--marigold); display:inline-flex; align-items:center; gap:11px; margin:0 0 22px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--marigold); display:inline-block}
.dark .eyebrow{color:var(--gold)} .dark .eyebrow::before{background:var(--gold)}

h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.28; letter-spacing:-.01em; margin:0}
.fr-it{font-family:var(--fr); font-style:italic; font-weight:400}

section{padding:96px 0}
.section-rule{border:0; border-top:1px solid var(--line); margin:0}

/* ---------- cover hero ---------- */
.cover{padding:74px 0 60px; position:relative; overflow:hidden}
.cover .kicker{font-family:var(--mono); font-size:12px; letter-spacing:.24em; color:var(--ink-3); text-transform:uppercase; margin-bottom:30px}
.cover h1{font-size:clamp(48px,9vw,108px); font-weight:900; line-height:1.02; letter-spacing:-.025em}
.cover .latin{font-family:var(--fr); font-style:italic; font-size:clamp(20px,3.4vw,34px); color:var(--marigold); margin-top:14px; font-weight:400}
.cover .hr{height:1px; background:var(--line); margin:42px 0 38px}
.lede{
  font-family:var(--serif); font-weight:400; font-size:clamp(20px,2.5vw,27px); line-height:1.85;
  color:var(--ink); max-width:34em; letter-spacing:-.005em; word-break:keep-all;
}
.lede .accent{color:var(--marigold)}
.cover-meta{display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:46px; font-family:var(--mono); font-size:12.5px; color:var(--ink-2); letter-spacing:.04em}
.cover-meta b{color:var(--ink); font-weight:500}

/* ---------- pillars (signature) ---------- */
.pillars{background:var(--espresso); color:var(--paper)}
.pillars .head{max-width:46em; margin-bottom:54px}
.pillars h2{color:var(--paper); font-size:clamp(26px,3.4vw,38px)}
.pillars h2 .o{color:var(--gold)}
.tri{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(229,161,43,.4)}
.tri .col{padding:38px 30px 42px; border-right:1px solid rgba(229,161,43,.18); position:relative}
.tri .col:last-child{border-right:0}
.tri .idx{font-family:var(--mono); font-size:12px; color:var(--gold); letter-spacing:.12em}
.tri .ko{font-family:var(--serif); font-weight:700; font-size:30px; margin:18px 0 4px; color:var(--paper)}
.tri .en{font-family:var(--fr); font-style:italic; font-size:16px; color:rgba(242,237,227,.66); margin-bottom:18px}
.tri .desc{font-size:15px; line-height:1.74; color:rgba(242,237,227,.82); word-break:keep-all}
.synthesis{
  margin-top:50px; padding-top:38px; border-top:1px solid rgba(229,161,43,.3);
  font-family:var(--serif); font-size:clamp(20px,2.6vw,28px); line-height:1.7; color:var(--paper); max-width:30em; word-break:keep-all;
}
.synthesis .dot{color:var(--gold)}

/* ---------- index cards ---------- */
.contents .ix-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:18px; margin-bottom:48px}
.contents h2{font-size:clamp(28px,3.6vw,40px)}
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.card{
  background:var(--paper); padding:40px 38px 36px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; min-height:230px; transition:background .25s, transform .25s;
}
.card:hover{background:var(--paper-2)}
.card .no{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--marigold)}
.card h3{font-size:25px; margin:16px 0 6px}
.card .ko-sub{font-family:var(--fr); font-style:italic; color:var(--ink-3); font-size:15px}
.card p{color:var(--ink-2); font-size:15px; margin:16px 0 0; word-break:keep-all}
.card .go{margin-top:auto; padding-top:22px; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; color:var(--ink); display:inline-flex; align-items:center; gap:8px}
.card .go .ar{color:var(--marigold); transition:transform .25s}
.card:hover .go .ar{transform:translateX(5px)}

/* ---------- page header band ---------- */
.page-head{background:var(--espresso); color:var(--paper); padding:96px 0 84px}
.page-head .num{font-family:var(--mono); font-size:12.5px; letter-spacing:.2em; color:var(--gold); text-transform:uppercase}
.page-head h1{color:var(--paper); font-size:clamp(40px,6.4vw,72px); font-weight:900; letter-spacing:-.025em; margin:22px 0 0}
.page-head .latin{font-family:var(--fr); font-style:italic; font-size:clamp(17px,2.4vw,24px); color:var(--gold); margin-top:12px}
.page-head .stand{margin:30px 0 0; max-width:40em; color:rgba(242,237,227,.82); font-size:17px; word-break:keep-all}

/* ---------- prose / blocks ---------- */
.lead-quote{font-family:var(--serif); font-size:clamp(20px,2.5vw,26px); line-height:1.8; max-width:32em; word-break:keep-all; color:var(--ink)}
.prose p{max-width:40em; word-break:keep-all; color:var(--ink-2)}
.prose p.k{color:var(--ink)}

.dir{display:grid; grid-template-columns:auto 1fr; gap:0 46px; align-items:start; padding:54px 0; border-top:1px solid var(--line)}
.dir:first-of-type{border-top:0}
.dir .mark{font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--marigold); padding-top:8px}
.dir h2{font-size:clamp(24px,3vw,32px); margin-bottom:6px}
.dir .ko-sub{font-family:var(--fr); font-style:italic; color:var(--ink-3); font-size:16px; margin-bottom:22px}
.dir p{color:var(--ink-2); max-width:42em; word-break:keep-all; margin:0}
.dir p.dir-lead{font-family:var(--sans); font-weight:600; font-size:16.5px; color:var(--ink); margin:0 0 16px; word-break:keep-all}

/* ---------- data blocks ---------- */
.block{padding:64px 0; border-top:1px solid var(--line)}
.block:first-child{border-top:0}
.block > .lab{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--marigold); text-transform:uppercase; margin-bottom:14px}
.block h2{font-size:clamp(26px,3.2vw,36px); margin-bottom:10px}
.block .intro{color:var(--ink-2); max-width:42em; word-break:keep-all; margin:18px 0 0}

.subhead{font-family:var(--serif); font-weight:700; font-size:21px; margin:42px 0 16px; display:flex; align-items:baseline; gap:12px}
.subhead .t{font-family:var(--mono); font-size:12px; color:var(--marigold); letter-spacing:.1em}

ul.list{list-style:none; padding:0; margin:0; border-top:1px solid var(--line-soft)}
ul.list li{padding:13px 0 13px 30px; border-bottom:1px solid var(--line-soft); position:relative; color:var(--ink); word-break:keep-all; max-width:46em}
ul.list li::before{content:""; position:absolute; left:6px; top:23px; width:7px; height:7px; background:var(--gold); transform:rotate(45deg)}
ul.list li .meta{color:var(--ink-3); font-size:14.5px}

/* definition rows */
.dl{display:grid; grid-template-columns:160px 1fr; gap:0; border-top:1px solid var(--line)}
.dl > div{padding:15px 0; border-bottom:1px solid var(--line-soft); display:contents}
.dl dt{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--ink-2); padding:15px 18px 15px 0; border-bottom:1px solid var(--line-soft)}
.dl dd{margin:0; padding:15px 0; border-bottom:1px solid var(--line-soft); color:var(--ink); word-break:keep-all}
.dl dd .sub{color:var(--ink-3); font-size:14.5px}

/* tables */
.tbl-wrap{overflow-x:auto; margin-top:8px; border:1px solid var(--line)}
table.data{width:100%; border-collapse:collapse; font-size:15.5px; min-width:560px}
table.data thead th{
  background:var(--espresso); color:var(--paper); font-family:var(--mono); font-weight:500;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-align:left; padding:13px 18px;
}
table.data td{padding:14px 18px; border-bottom:1px solid var(--line-soft); vertical-align:top; word-break:keep-all; color:var(--ink)}
table.data tbody tr:nth-child(even){background:var(--paper-2)}
table.data td.w{font-family:var(--mono); color:var(--marigold); font-size:13px; white-space:nowrap}
table.data td.book{color:var(--ink-2); font-style:normal}

/* people cards */
.people{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.person{background:var(--paper); padding:26px 28px}
.person .nm{font-family:var(--serif); font-weight:700; font-size:20px}
.person .role{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--marigold); margin:5px 0 12px; text-transform:uppercase}
.person .cv{color:var(--ink-2); font-size:14.5px; line-height:1.66; word-break:keep-all}

.faculty{columns:2; column-gap:48px; margin-top:8px}
.faculty .f{break-inside:avoid; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.faculty .f b{font-family:var(--serif); font-weight:700; font-size:17px}
.faculty .f span{display:block; color:var(--ink-3); font-size:14px; margin-top:2px}

.note{font-size:14px; color:var(--ink-3); margin-top:20px; padding-left:16px; border-left:2px solid var(--gold); word-break:keep-all}

/* ---------- timeline ---------- */
.timeline{position:relative; margin-top:20px}
.tl-year{display:grid; grid-template-columns:120px 1fr; gap:0 40px; border-top:2px solid var(--ink); padding-top:8px}
.tl-year + .tl-year{margin-top:0}
.tl-year .yr{font-family:var(--serif); font-weight:900; font-size:clamp(40px,7vw,68px); color:var(--ink); line-height:1; padding:18px 0 40px; position:sticky; top:80px; align-self:start}
.tl-rows{padding:14px 0 30px}
.tl-row{display:grid; grid-template-columns:118px 1fr; gap:0 28px; padding:15px 0; border-bottom:1px solid var(--line-soft); align-items:start}
.tl-row .when{font-family:var(--mono); font-size:13px; color:var(--marigold); letter-spacing:.02em; padding-top:3px}
.tl-row .what{color:var(--ink); word-break:keep-all}
.tl-row .what .tag{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); background:var(--paper-2); border:1px solid var(--line); padding:1px 8px; margin-right:8px; vertical-align:1px}
.tl-row .what em{font-style:normal; color:var(--ink-2)}

/* activity cards */
.acts{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:10px}
.act{background:var(--paper-2); border:1px solid var(--line); padding:28px 28px 26px}
.act .no{font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--marigold)}
.act h3{font-size:21px; margin:10px 0 6px; color:var(--ink)}
.act .desc{color:var(--ink-2); font-size:14.5px; word-break:keep-all; margin:0 0 16px}
.act .rows{font-family:var(--mono); font-size:12.5px; color:var(--ink-2); border-top:1px solid var(--line); padding-top:12px; line-height:1.9}
.act .rows b{color:var(--ink); font-weight:500}

/* ---------- footer ---------- */
footer{background:var(--espresso); color:var(--paper); padding:80px 0 46px}
footer .top{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px}
footer .logo img{width:170px; filter:saturate(1.05)}
footer .mission{font-family:var(--serif); font-size:17px; line-height:1.8; color:rgba(242,237,227,.85); margin:22px 0 0; max-width:24em; word-break:keep-all}
footer h4{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin:0 0 16px}
footer .fitem{color:rgba(242,237,227,.82); font-size:14.5px; line-height:1.8; word-break:keep-all}
footer .fitem b{color:var(--paper); font-weight:500}
footer nav.fnav a{display:block; color:rgba(242,237,227,.82); text-decoration:none; font-size:14.5px; padding:5px 0; transition:color .2s}
footer nav.fnav a:hover{color:var(--gold)}
footer .base{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:64px; padding-top:24px; border-top:1px solid rgba(229,161,43,.25); font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:rgba(242,237,227,.55)}
footer .base .heritage{color:rgba(242,237,227,.7)}

/* reveal — only hidden when JS is active (graceful no-JS fallback) */
.js .rv{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.js .rv.in{opacity:1; transform:none}

/* responsive */
@media (max-width:880px){
  .tri{grid-template-columns:1fr} .tri .col{border-right:0; border-bottom:1px solid rgba(229,161,43,.18)}
  .cards{grid-template-columns:1fr} .people{grid-template-columns:1fr}
  .acts{grid-template-columns:1fr} footer .top{grid-template-columns:1fr; gap:36px}
  .faculty{columns:1}
  nav.nav{position:fixed; inset:66px 0 auto 0; background:var(--paper); flex-direction:column; align-items:flex-start;
    gap:0; padding:8px 28px 18px; border-bottom:1px solid var(--line); transform:translateY(-130%); transition:transform .3s; box-shadow:0 18px 30px -22px rgba(0,0,0,.4)}
  nav.nav.open{transform:none}
  nav.nav a{width:100%; padding:13px 0; border-bottom:1px solid var(--line-soft); font-size:16px}
  nav.nav a.active::after{display:none}
  .menu-toggle{display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px}
  .menu-toggle span{width:24px; height:2px; background:var(--ink); display:block; transition:.3s}
  .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle.open span:nth-child(2){opacity:0}
  .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .dir{grid-template-columns:1fr; gap:18px} .dir .mark{padding-top:0}
  .dl{grid-template-columns:1fr} .dl dt{padding-bottom:2px; border-bottom:0} .dl dd{padding-top:4px}
  .tl-year{grid-template-columns:1fr; gap:0} .tl-year .yr{position:static; padding:14px 0 8px; font-size:46px}
  .tl-row{grid-template-columns:1fr; gap:4px} .tl-row .when{padding-top:0}
  section{padding:72px 0}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto} .js .rv{opacity:1; transform:none; transition:none}
}

/* ---------- a11y additions ---------- */
.skip-link{position:absolute; left:8px; top:-48px; z-index:100; background:var(--espresso); color:var(--paper);
  padding:10px 18px; border-radius:0 0 4px 4px; font-family:var(--mono); font-size:13px; text-decoration:none; transition:top .2s}
.skip-link:focus{top:0}
a:focus-visible, button:focus-visible{outline:2px solid var(--marigold); outline-offset:2px; border-radius:2px}