/* ═══════════════════════════════════════════════════════════════
   BOS — Building Operating System · BIST project page
   main.css — design tokens, layout, typography, shared components
   No webfont, no CDN, no build step. Everything relative.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── surface ── */
  --bg:        #05080a;
  --bg-1:      #070c0f;
  --bg-2:      #0a1114;
  --bg-lift:   #0d1519;
  --line:      rgba(160,200,196,.11);
  --line-soft: rgba(160,200,196,.06);
  --line-hard: rgba(160,200,196,.20);

  /* ── ink ── */
  --text:   #e8f2f0;
  --body:   #a6b8b6;
  --dim:    #748a88;
  --dimmer: #4c5f5e;

  /* ── accent ── */
  --acc:      #3ee0c8;
  --acc-hi:   #7ef4de;
  --acc-deep: #1b8f86;
  --acc-dark: #0e4a46;
  --acc-glow: rgba(62,224,200,.16);
  --warm:     #f0b45a;

  /* ── type ── */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard",
          "Apple SD Gothic Neo", "Malgun Gothic", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo,
          Consolas, "Liberation Mono", monospace;

  /* ── metrics ── */
  --rail: 1180px;
  --measure: 62ch;
  --pad: clamp(20px, 5vw, 64px);
  --bar-h: 58px;

  /* ── motion ── */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{
  background:var(--bg);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.72;
  letter-spacing:.005em;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* Korean must not break inside a word: without keep-all the browser
     breaks anywhere between syllables, which is what left short endings
     like "니다." stranded on their own line. */
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* Korean sets denser than Latin at the same size, so it needs a little
   more leading and a slightly narrower measure to wrap evenly. */
html[data-lang="ko"]{ --measure:56ch; }
html[data-lang="ko"] body{ line-height:1.80; }

/* pretty avoids single-word last lines where supported; it degrades to
   normal wrapping everywhere else */
p, li, dd, figcaption{ text-wrap:pretty; }
h1,h2,h3,h4,.sec-title,.chapter-title,.closing-title,.pub-title{ text-wrap:balance; }

img,svg,canvas{ display:block; max-width:100%; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul{ list-style:none; padding:0; }
a{ color:inherit; }

::selection{ background:var(--acc-deep); color:#02100e; }

/* film grain — the one thing that stops large dark fields reading as
   flat paint. Keep it under 2%: any more and it eats type crispness. */
body::after{
  content:""; position:fixed; inset:0; z-index:300; pointer-events:none;
  opacity:0; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
/* without mix-blend-mode the tile would sit on top as flat grey, so it
   is only switched on where blending actually works */
@supports (mix-blend-mode:overlay){
  body::after{ opacity:.019; }
  @media (prefers-reduced-motion:reduce){ body::after{ opacity:.012; } }
}

/* ── language switch ─────────────────────────────────────────── */
html[data-lang="en"] .ko,
html[data-lang="ko"] .en{ display:none; }

/* ── skip link ───────────────────────────────────────────────── */
.skip{
  position:fixed; left:12px; top:-100px; z-index:200;
  background:var(--acc); color:#02100e; padding:10px 16px;
  border-radius:6px; font-size:13px; font-weight:600; text-decoration:none;
  transition:top .18s var(--ease);
}
.skip:focus{ top:12px; }

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

/* ═══ TOP BAR ════════════════════════════════════════════════ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:var(--bar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  background:linear-gradient(180deg, rgba(5,8,10,.86), rgba(5,8,10,0));
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.topbar.is-solid{
  background:rgba(5,8,10,.90);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.topbar-back{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:12px; letter-spacing:.20em;
  color:var(--text); text-decoration:none; opacity:.85;
  transition:opacity .2s var(--ease), gap .2s var(--ease);
}
.topbar-back:hover{ opacity:1; gap:11px; }
.tb-mark{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.topbar-right{ display:flex; align-items:center; gap:8px; }

.topbar-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none;
  color:var(--acc);
  padding:7px 13px; border-radius:100px;
  border:1px solid rgba(62,224,200,.28);
  background:rgba(62,224,200,.05);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.topbar-cta:hover{ background:rgba(62,224,200,.13); border-color:rgba(62,224,200,.55); color:var(--acc-hi); }
.tb-arrow{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

.lang-toggle{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.10em;
  color:var(--dim); background:none; border:1px solid var(--line);
  padding:7px 11px; border-radius:100px; cursor:pointer;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.lang-toggle:hover{ color:var(--text); border-color:var(--line-hard); }

/* ── scroll progress ─────────────────────────────────────────── */
.progress-rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:130;
  background:transparent; pointer-events:none;
}
.progress-bar{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--acc-deep), var(--acc));
  box-shadow:0 0 12px var(--acc-glow);
}

/* ═══ SHARED ═════════════════════════════════════════════════ */
.wrap{ width:100%; max-width:var(--rail); margin:0 auto; padding:0 var(--pad); }

.eyebrow,.sec-index{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dim);
}

.sec-head{ margin-bottom:clamp(40px,6vw,72px); }
.sec-head.center{ text-align:center; }
.sec-head.center .sec-lede{ margin-inline:auto; }

.sec-index{ margin-bottom:20px; }
.sec-index .en,.sec-index .ko{ color:var(--acc); }

.sec-title{
  font-size:clamp(28px,4.4vw,54px);
  line-height:1.12; letter-spacing:-.022em; font-weight:600;
  color:var(--text); text-wrap:balance;
}
html[data-lang="ko"] .sec-title{ line-height:1.26; letter-spacing:-.028em; }
.sec-lede{
  margin-top:24px; max-width:var(--measure);
  font-size:clamp(15px,1.35vw,18px); line-height:1.78; color:var(--body);
}
html[data-lang="ko"] .sec-lede{ line-height:1.86; }
.sec-lede b{ color:var(--text); font-weight:600; }

/* ── buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:100px;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:transform .22s var(--ease), background .22s var(--ease),
             border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.btn svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn-lg{ padding:16px 28px; font-size:15px; }

.btn-primary{
  background:var(--acc); color:#02100e;
  box-shadow:0 0 0 0 var(--acc-glow), 0 10px 34px -14px rgba(62,224,200,.55);
}
.btn-primary:hover{ background:var(--acc-hi); transform:translateY(-2px); box-shadow:0 0 0 6px var(--acc-glow), 0 16px 40px -14px rgba(62,224,200,.6); }

.btn-ghost{
  color:var(--text); border:1px solid var(--line-hard); background:rgba(255,255,255,.02);
}
.btn-ghost:hover{ border-color:var(--acc); color:var(--acc-hi); transform:translateY(-2px); }

.cta-note{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dimmer);
}

/* ── reveal ──────────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .85s var(--ease-out) var(--d,0s), transform .85s var(--ease-out) var(--d,0s);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

/* ═══ HERO ═══════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;   /* vh first: a browser without svh drops the whole declaration */
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--bar-h) + 40px) var(--pad) clamp(28px,4vh,44px);
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(27,143,134,.10), transparent 62%),
    var(--bg);
}
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(78% 62% at 50% 46%, transparent 30%, rgba(5,8,10,.42) 72%, rgba(5,8,10,.86) 100%),
    linear-gradient(180deg, rgba(5,8,10,.65) 0%, transparent 22%, transparent 52%, rgba(5,8,10,.92) 96%);
}

.hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--rail); margin:0 auto;
  padding-bottom:clamp(28px,6vh,64px);
}
.hero-inner .eyebrow{ margin-bottom:clamp(18px,2.4vh,26px); }

.hero-title{
  font-size:clamp(44px,10.4vw,146px);
  /* 1.06 gives every line box room for its descenders and for the
     background-clip box; the optical tightness of the stack is restored
     with a negative margin per word instead, which — unlike a sub-1
     line-height — never clips the "y" of "System". */
  line-height:1.06; letter-spacing:-.042em; font-weight:650;
  color:var(--text);
  display:flex; flex-direction:column;
  width:fit-content; max-width:100%;
}
.hero-title .hw{
  display:block;
  margin-bottom:-.075em;            /* optical leading, not a clip */
  padding-bottom:.04em;             /* descender safety under the clip box */
}
.hero-title .hw:last-child{ margin-bottom:0; }

/* All three words are background-clip:text, so none of them can take a
   text-shadow — the gradient replaces the glyph fill and the shadow
   disappears with it. Depth therefore comes from drop-shadow on every
   word, and the rim highlight from the gradient's own top stop.
   Do not swap one word back to text-shadow: it will not render. */
.hero-title .hw{
  background-image:linear-gradient(174deg,
    #ffffff 0%, #eef6f4 18%, var(--text) 52%, #b4c7c4 82%, #97aaa8 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--text);
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.42));
}
.hero-title .hw:nth-child(2){
  background-image:linear-gradient(174deg,
    #fbfefd 0%, #e4efed 20%, var(--text) 54%, #a8bcb9 84%, #8ba09d 100%);
}
.hero-title .hw:nth-child(3){
  background-image:linear-gradient(172deg,
    #d9fbf3 0%, var(--acc-hi) 22%, var(--acc) 56%, #35a99a 88%, #2b8a7f 100%);
  color:var(--acc);
  filter:drop-shadow(0 0 30px rgba(62,224,200,.16))
         drop-shadow(0 12px 30px rgba(0,0,0,.46));
}

/* If background-clip:text is not supported the glyph fill stays
   transparent and the headline disappears entirely — the one failure on
   this page that would be fatal rather than cosmetic. Paint the text
   normally in that case. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-title .hw{
    background-image:none;
    -webkit-text-fill-color:var(--text);
    color:var(--text);
    filter:drop-shadow(0 10px 26px rgba(0,0,0,.42));
  }
  .hero-title .hw:nth-child(3){
    -webkit-text-fill-color:var(--acc);
    color:var(--acc);
  }
}

.hero-lede{
  margin-top:clamp(20px,3vh,32px); max-width:58ch;
  font-size:clamp(15px,1.45vw,19px); line-height:1.72; color:var(--body);
}
.hero-cta{
  margin-top:clamp(24px,3.4vh,38px);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}

.hero-foot{
  position:relative; z-index:2;
  width:100%; max-width:var(--rail); margin:0 auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding-top:22px; border-top:1px solid var(--line-soft);
}
.hero-legend{ display:flex; gap:26px; flex-wrap:wrap; }
.hero-legend li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dim);
}
.lg{ width:9px; height:9px; border-radius:50%; flex:none; }
.lg-node{ background:var(--acc-hi); box-shadow:0 0 10px rgba(126,244,222,.8); }
.lg-link{ width:16px; height:1.5px; border-radius:0; background:linear-gradient(90deg,transparent,var(--acc),transparent); }
.lg-core{ background:transparent; border:1.5px solid var(--acc); box-shadow:0 0 12px var(--acc-glow); }
.lg-up,.lg-down{
  width:0; height:0; border-radius:0; background:none;
  border-left:5px solid transparent; border-right:5px solid transparent;
}
.lg-up{ border-bottom:7px solid var(--acc-hi); }
.lg-down{ border-top:7px solid rgba(206,236,232,.9); }

.scroll-cue{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dimmer);
}
.scroll-cue i{
  display:block; width:1px; height:34px;
  background:linear-gradient(180deg,var(--acc),transparent);
  animation:cue 2.2s var(--ease) infinite;
  transform-origin:top;
}
@keyframes cue{
  0%{ transform:scaleY(0); opacity:0; }
  35%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1) translateY(34px); opacity:0; }
}

/* ═══ BOS OVERVIEW ═══════════════════════════════════════════
   The hero's world continued: #overview-canvas draws the same planet
   from lower and closer, with the operating layer arcing above the
   horizon. Copy sits in the empty sky at the top, so the veil is a
   top-down scrim rather than an all-over darkening. */
.overview{
  position:relative; overflow:hidden;
  /* tall enough that the horizon and its layer band clear the copy block
     entirely — the legend used to sit on the band's left arc */
  min-height:136vh; min-height:136svh;
  display:flex; align-items:flex-start;
  padding:clamp(96px,15vh,190px) 0 clamp(56px,9vh,110px);
  background:var(--bg);
  border-top:1px solid var(--line-soft);
}
.overview-canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* a top-down scrim, not an all-over darkening: the copy sits in the
   empty sky above the horizon and the planet has to stay visible */
.ov-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(5,8,10,.95) 0%, rgba(5,8,10,.80) 20%,
                            rgba(5,8,10,.46) 38%, rgba(5,8,10,.12) 54%,
                            transparent 64%),
    radial-gradient(130% 60% at 50% 112%, transparent 52%, rgba(5,8,10,.38) 100%);
}
.ov-inner{ position:relative; z-index:2; }
.ov-inner .sec-index{ margin-bottom:20px; }
.ov-title{ max-width:22ch; }
.ov-body{
  margin-top:clamp(22px,3vw,34px);
  max-width:62ch;
  font-size:clamp(15px,1.35vw,18.5px); line-height:1.80; color:var(--body);
}
html[data-lang="ko"] .ov-body{ line-height:1.88; max-width:52ch; }

.ov-key{
  margin-top:clamp(28px,4vh,46px);
  padding:16px 20px 18px;
  border:1px solid var(--line-soft);
  border-left:2px solid rgba(62,224,200,.5);
  border-radius:0 10px 10px 0;
  background:linear-gradient(100deg, rgba(8,16,18,.72), rgba(8,16,18,.34) 78%);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  max-width:44ch; width:fit-content;
}
.ov-key-head{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acc); margin-bottom:12px;
}
.ov-legend{ display:grid; gap:9px 26px; grid-template-columns:1fr; }
.ov-legend li{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; line-height:1.45; color:var(--dim);
}
html[data-lang="ko"] .ov-legend li{ font-size:13px; }

/* ═══ CHAPTER TITLE PANELS ═══════════════════════════════════ */
.chapter{
  position:relative;
  min-height:78vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(90px,14vh,180px) var(--pad) clamp(70px,10vh,130px);
  overflow:hidden;
}
.chapter::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 55% at 22% 50%, rgba(27,143,134,.13), transparent 70%);
  pointer-events:none;
}
.chapter-inner{ position:relative; width:100%; max-width:var(--rail); margin:0 auto; }
.chapter-num{
  font-family:var(--mono); font-size:12px; letter-spacing:.34em; color:var(--acc);
  margin-bottom:26px;
}
.chapter-title{
  font-size:clamp(52px,12vw,168px);
  line-height:.86; letter-spacing:-.05em; font-weight:650;
  color:var(--text);
}
.chapter-sub{
  margin-top:clamp(22px,3vw,36px);
  font-family:var(--mono); font-size:clamp(11px,1.1vw,13.5px);
  letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}
/* the chapter titles are English-only, but the subs are not */
html[data-lang="ko"] .chapter-sub{ letter-spacing:.14em; line-height:1.7; }
.chapter-rule{
  position:relative; width:100%; max-width:var(--rail); margin:clamp(40px,6vh,72px) auto 0;
  height:1px;
  background:linear-gradient(90deg, var(--acc-deep), rgba(160,200,196,.10) 55%, transparent);
}

/* animated in by JS */
.chapter-title,.chapter-num,.chapter-sub{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.chapter.is-in .chapter-num{ opacity:1; transform:none; transition-delay:.02s; }
.chapter.is-in .chapter-title{ opacity:1; transform:none; transition-delay:.10s; }
.chapter.is-in .chapter-sub{ opacity:1; transform:none; transition-delay:.24s; }
.chapter-rule{ transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease-out) .3s; }
.chapter.is-in .chapter-rule{ transform:scaleX(1); }

/* ═══ CLOSING extras ═════════════════════════════════════════ */
.closing-kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--acc); margin-bottom:clamp(18px,2.4vw,26px);
}
.closing-by{
  margin-top:clamp(46px,6vw,74px);
  padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.cb-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--dimmer);
}
.cb-name{
  font-size:clamp(14px,1.6vw,17.5px); font-weight:600; letter-spacing:-.008em;
  color:var(--text);
}
.cb-org{ font-size:13px; color:var(--dim); }

/* ═══ FOOTER ═════════════════════════════════════════════════ */
.footer{
  position:relative;
  border-top:1px solid var(--line-soft);
  background:
    radial-gradient(80% 90% at 12% 0%, rgba(27,143,134,.09), transparent 62%),
    var(--bg-1);
  padding:clamp(56px,8vw,96px) 0 clamp(24px,3vw,34px);
}

.footer-top{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.5fr);
  gap:clamp(36px,5vw,68px);
  padding-bottom:clamp(38px,5vw,60px);
  border-bottom:1px solid var(--line-soft);
}

.f-lab{
  font-family:var(--mono); font-size:clamp(20px,2.4vw,26px); letter-spacing:.3em;
  color:var(--text); margin-bottom:12px;
}
.f-lab-full{ font-size:14px; color:var(--body); }
.f-org{ font-size:13.5px; color:var(--dim); margin-top:4px; }

/* the research group is the identity this page is signed with, so it
   gets a framed block rather than another line of small print */
.f-group{
  margin-top:clamp(26px,3.4vw,38px);
  padding:18px 20px;
  border:1px solid var(--line);
  border-left:2px solid var(--acc);
  border-radius:0 10px 10px 0;
  background:linear-gradient(100deg, rgba(62,224,200,.05), rgba(62,224,200,0) 72%);
}
.f-group-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acc); margin-bottom:8px;
}
.f-group-name{
  font-size:15.5px; font-weight:600; line-height:1.4; letter-spacing:-.01em;
  color:var(--text);
}
.f-group-desc{ margin-top:9px; font-size:13px; line-height:1.7; color:var(--dim); max-width:46ch; }

.f-links{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(22px,3vw,40px);
}
.f-head{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dimmer); margin-bottom:16px;
}
.f-col ul li{ margin-bottom:11px; }
.f-col a{
  display:inline-block;
  font-size:13.5px; line-height:1.55; color:var(--body); text-decoration:none;
  overflow-wrap:normal; word-break:keep-all;
  border-bottom:1px solid transparent; padding-bottom:1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.f-col a:hover{ color:var(--acc); border-bottom-color:var(--acc-deep); }
.f-ext{ color:var(--dimmer); font-size:.9em; }

/* a citation block: the most useful thing an academic project page can
   put at the bottom, and it fills the space honestly */
.footer-cite{
  padding:clamp(26px,3.4vw,38px) var(--pad);
  border-bottom:1px solid var(--line-soft);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px clamp(20px,3vw,40px);
  align-items:start;
}
.f-cite-label{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--dimmer); white-space:nowrap; padding-top:2px;
}
.f-cite{
  font-size:13px; line-height:1.75; color:var(--dim);
  max-width:96ch; overflow-wrap:break-word;
}
.f-cite i{ color:var(--body); font-style:italic; }

.footer-base{
  padding-top:22px;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-base p{ font-size:12.5px; color:var(--dimmer); }
.f-top{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); text-decoration:none; white-space:nowrap;
  transition:color .2s var(--ease);
}
.f-top:hover{ color:var(--acc); }

/* ═══ RESPONSIVE ═════════════════════════════════════════════ */
@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr; gap:36px; }
  .footer-cite{ grid-template-columns:1fr; gap:8px; }
}

@media (max-width:1024px){
  .overview{ min-height:auto; padding-bottom:clamp(380px,52vh,520px); }
}

@media (max-width:768px){
  body{ font-size:15.5px; }
  :root{ --bar-h:52px; }
  .hero{ min-height:100vh; min-height:100svh; }
  .overview{ padding-top:calc(var(--bar-h) + 70px); padding-bottom:clamp(320px,44vh,420px); }
  .ov-key{ max-width:none; width:auto; }
  .ov-legend{ gap:10px 20px; }
  .ov-legend li{ font-size:10px; }
  .hero-title{ font-size:clamp(40px,12.5vw,72px); letter-spacing:-.035em; }
  .hero-foot{ flex-direction:column; align-items:flex-start; gap:16px; }
  .hero-legend{ gap:14px 20px; }
  .scroll-cue{ display:none; }
  .chapter{ min-height:58vh; }
  .chapter-title{ font-size:clamp(44px,14vw,84px); }
  .topbar-cta span.en,.topbar-cta span.ko{ display:none; }
  html[data-lang="en"] .topbar-cta .en,
  html[data-lang="ko"] .topbar-cta .ko{ display:inline; }
}

@media (max-width:520px){
  .topbar-cta{ padding:6px 10px; }
  .hero-cta{ gap:12px; }
  .btn{ padding:12px 18px; font-size:13.5px; }
  .f-links{ grid-template-columns:1fr 1fr; }
  .footer-base{ flex-direction:column; gap:10px; }
}

/* ═══ REDUCED MOTION ═════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .chapter-title,.chapter-num,.chapter-sub{ opacity:1 !important; transform:none !important; }
  .chapter-rule{ transform:none !important; }
  .scroll-cue i{ animation:none; }
}

/* ═══ PRINT ══════════════════════════════════════════════════ */
@media print{
  .topbar,.progress-rail,.hero-canvas,.closing-canvas,.scroll-cue{ display:none !important; }
  body{ background:#fff; color:#111; }
}