:root{color-scheme:dark;--bg:#151713;--panel:#20241c;--ink:#f0efe5;--muted:#b5b8a9;--accent:#d4f477;--line:#3b4133}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Malgun Gothic",system-ui,sans-serif;word-break:keep-all}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.wrap{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.header,.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px}
.header{border-bottom:1px solid var(--line)}
.brand{font-size:1.25rem;font-weight:800}.brand span{color:var(--accent)}
nav,.contact-links{display:flex;gap:clamp(12px,3vw,30px);flex-wrap:wrap}
nav{font-size:.875rem}
.hero{display:grid;grid-template-columns:1.45fr 1fr;gap:32px;align-items:center;padding-block:clamp(62px,10vw,135px)}
.eyebrow,.meta,.number{font:700 .76rem/1.5 ui-monospace,monospace;letter-spacing:.025em}
.eyebrow{color:var(--accent);margin:0 0 14px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2.15rem,5.65vw,5rem);line-height:1.17;letter-spacing:-.085em;margin-bottom:22px}
.intro{max-width:34rem;color:var(--muted);margin-bottom:26px}
.button{display:inline-flex;gap:22px;align-items:center;padding:11px 16px;background:var(--accent);color:var(--bg);font-weight:800;border-radius:4px}
.button:hover{background:var(--ink);color:var(--bg)}
.section{border-top:1px solid var(--line);padding-block:clamp(40px,7vw,80px)}
h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.2;letter-spacing:-.06em;margin-bottom:16px}
.section-note,.meta,summary p:last-child,dd,.footer{color:var(--muted)}
.works{margin-top:32px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr) minmax(10rem,auto) 32px;gap:16px;align-items:center;padding:20px 4px;list-style:none}
summary::-webkit-details-marker{display:none}
summary:hover h3,.number,.open-icon{color:var(--accent)}
summary h3{font-size:clamp(1.17rem,3vw,1.75rem);margin:2px 0 4px}
summary p{margin:0}
.open-icon{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:32px;height:32px}.open-icon::before{content:"+"}details[open] .open-icon::before{content:"−"}
.case{padding:0 46px 12px 58px;max-width:850px;color:var(--muted)}.case strong{color:var(--accent);margin-right:.5em}
.background{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.background>div{background:var(--panel);border:1px solid var(--line);padding:clamp(16px,3vw,30px);border-radius:8px}
dt{font-weight:700}dt small{color:var(--muted);font-weight:400;white-space:nowrap}dd{margin:2px 0 14px}dd:last-child{margin-bottom:0}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0}.tags li{border:1px solid var(--line);border-radius:4px;padding:4px 10px}
.contact{padding:clamp(22px,5vw,54px);border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.contact-links{align-items:center;overflow-wrap:anywhere}.contact-links a{color:var(--accent)}.contact-links a:hover{text-decoration:underline}
button{cursor:pointer;color:inherit;background:transparent;border:1px solid var(--muted);border-radius:4px;padding:6px 10px;font:inherit}#copy-status{margin:6px 0 0;color:var(--muted)}#copy-status:empty{display:none}
.footer{font-size:.8rem}.skip{position:absolute;top:0;left:0;transform:translateY(-110%);background:var(--accent);color:var(--bg);padding:8px}.skip:focus{transform:none}
@media(max-width:680px){.wrap{width:calc(100% - 32px)}.hero,.background{grid-template-columns:1fr}.case{padding-inline:4px}summary{grid-template-columns:24px 1fr 32px;gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

em{font-style:normal}


.metric {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .65rem;
  margin-top: .55rem;
  color: var(--muted);
}
.metric strong, .research-grid dt { color: var(--accent); }
.metric strong { font-size: 1.45rem; line-height: 1.2; }

.research {
  margin: 1.15rem 0;
  padding: clamp(.9rem, 3vw, 1.4rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.research h4 { margin: 0 0 .8rem; color: var(--ink); }
.research p:last-child, .research dd:last-child { margin-bottom: 0; }
.research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: .75rem;
}
.research-grid > div {
  padding: .7rem;
  border-top: 2px solid var(--accent);
}
.research-grid dt { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.25; }
.research-grid dd { margin: .4rem 0; }
.research ul { padding-inline-start: 1.15rem; }
.research li + li { margin-top: .65rem; }
.source { color: var(--muted); font-size: .78rem; }

.profile-photo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 27rem;
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metric {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.metric strong { font-size: clamp(1.25rem, 2.6vw, 2rem); }
.number { color: var(--muted); }
.profile-photo { border-radius: 4px; }
.research-grid > div { min-width: 0; border-top: 1px solid var(--line); }
.research-grid dt { font-variant-numeric: tabular-nums; }

.chart-track {
  height: 8px;
  overflow: hidden;
  background: var(--line);
  border-radius: 4px;
}
.chart-track span {
  display: block;
  width: var(--value);
  height: 100%;
  background: var(--accent);
  transform-origin: left;
}
.bar-pair { display: grid; gap: 8px; }
.bar-pair b, .rank-pair b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rank-pair { display: flex; flex-wrap: wrap; gap: 8px 16px; }

.flow, .format-map ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
}
.flow li, .format-map li {
  padding: 8px 12px;
  border-left: 2px solid var(--accent);
  background: var(--panel);
}
.flow { counter-reset: step; }
.flow li::before {
  counter-increment: step;
  content: counter(step) ". ";
  color: var(--accent);
}
.format-map { margin-block: 16px; }
.format-map ul { margin: 8px 0 0; }

@media (max-width: 680px) {
  .metric { grid-column: 2; grid-row: 2; }
  .open-icon { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  details[open] .case { animation: case-in 220ms ease-out; }
  details[open] .chart-track span { animation: chart-in 360ms ease-out; }
}
@keyframes case-in { from { opacity: .65; transform: translateY(4px); } }
@keyframes chart-in { from { transform: scaleX(0); } }