:root{
  --ink:#10141a;
  --ink-hover:#2a313c;
  --paper:#f6f5f1;
  --paper-2:#ecebe5;
  --white:#fff;
  --rule:#d4d1c8;
  --field:#858a93;
  --muted:#535963;
  --accent:#b3381c;
  --accent-strong:#9c2f17;
  --accent-tint:#f4e1da;
  --on-dark:#f3f1ec;
  --on-dark-muted:#a9aeb6;
  --on-dark-rule:rgba(243,241,236,.18);
  --accent-on-dark:#ef8a6d;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dark :focus-visible,.notice :focus-visible{outline-color:var(--accent-on-dark)}
:lang(ko){font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-100px;z-index:100;padding:.6rem .9rem;background:var(--white);color:var(--ink);border:2px solid var(--ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)}
.nw{white-space:nowrap}

/* TBC tag — marks values not yet confirmed */
.tbc{display:inline-block;margin-left:.4em;padding:.05em .45em;border-radius:2px;background:var(--accent-tint);color:var(--accent-strong);font:600 .6875rem/1.55 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;vertical-align:.15em;white-space:nowrap;cursor:help}
.dark .tbc{background:rgba(239,138,109,.16);color:#f3b09c}

/* 0. Notice bar */
.notice{background:var(--ink);color:var(--on-dark);font-size:.8125rem;line-height:1.45}
.notice .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.15rem .75rem;padding-block:.55rem;text-align:center}
.notice p{margin:0;color:var(--on-dark-muted)}
.notice a{color:var(--on-dark);font-weight:500}

/* Header */
.site-bar{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--rule);background:rgba(246,245,241,.92);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
.site-bar .wrap{display:flex;align-items:center;gap:1.25rem;min-height:64px}
.wordmark{font:500 1.3125rem/1 var(--serif);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.nav{margin-left:auto}
.nav ul{display:flex;gap:1.75rem;margin:0;padding:0;list-style:none}
.nav a{font-size:.9375rem;color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--ink);text-decoration:underline}
.btn-clinic{display:inline-flex;align-items:center;gap:.35rem;min-height:36px;padding:0 .8rem;border:1px solid var(--ink);border-radius:2px;font-size:.875rem;font-weight:500;text-decoration:none;white-space:nowrap}
.btn-clinic:hover{background:var(--ink);color:var(--on-dark)}
.menu-btn{display:none;align-items:center;min-height:40px;padding:0 .85rem;border:1px solid var(--ink);border-radius:2px;background:none;color:var(--ink);font:500 .875rem var(--sans);cursor:pointer}
@media (max-width:879px){
  .menu-btn{display:inline-flex;margin-left:auto}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;margin:0;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:0 16px 32px -16px rgba(16,20,26,.25)}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding:.25rem var(--gutter) 1rem}
  .nav li+li a{border-top:1px solid var(--rule)}
  .nav a{display:block;padding:.85rem 0;font-size:1.0625rem;color:var(--ink)}
}
@media (max-width:767px){.site-bar .btn-clinic{display:none}}

/* Buttons & links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:0 1.35rem;border:1px solid var(--ink);border-radius:2px;font:500 .9375rem/1.2 var(--sans);text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s}
.btn-primary{background:var(--ink);color:var(--on-dark)}
.btn-primary:hover{background:var(--ink-hover)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover,.btn-outline:hover{background:var(--ink);color:var(--on-dark)}
.btn-outline{background:var(--white);color:var(--ink)}
.more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.75rem;padding-bottom:2px;border-bottom:1px solid currentColor;font-weight:500;text-decoration:none}
.more:hover{color:var(--accent)}

/* 1. Hero */
.hero{padding-block:clamp(1.5rem,5vw,4.5rem) clamp(2.5rem,6vw,5rem)}
.hero-grid{display:grid;gap:clamp(1.5rem,4vw,4rem);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.hero h1{margin:0;font:400 clamp(3rem,12vw,6.25rem)/.95 var(--serif);letter-spacing:-.03em}
@media (min-width:900px){.hero h1{font-size:clamp(4rem,7.2vw,6.25rem)}}
.role{margin:1.25rem 0 0;font-size:1.125rem;font-weight:500}
.affil{margin:.15rem 0 0;color:var(--muted)}
.lede{margin:1.75rem 0 0;max-width:30ch;font:400 clamp(1.25rem,2.2vw,1.5rem)/1.4 var(--serif)}
.lede::before{content:"";display:block;width:40px;height:2px;margin-bottom:1.25rem;background:var(--accent)}
.kw{margin-top:1.5rem}
.mini-label{margin:0 0 .5rem;font:500 .6875rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.keywords{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.keywords li{padding:.35rem .7rem;border:1px solid var(--rule);border-radius:2px;background:var(--white);font-size:.875rem;line-height:1.35}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero-photo{margin:0;aspect-ratio:4/5;border-radius:2px;overflow:hidden;background:#d9dde2}
.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
@media (max-width:899px){.hero-photo{order:-1;max-width:360px;aspect-ratio:1/1}}

/* 2. Credibility strip — v2: 'Presented at' marquee (40s per loop, pauses on hover/focus or with the button) + stats */
.strip{border-block:1px solid var(--rule);overflow:hidden}
.strip-row{display:grid;gap:.9rem 1.5rem;align-items:center;padding-block:1.4rem 1.1rem}
@media (min-width:900px){.strip-row{grid-template-columns:auto minmax(0,1fr)}}
.strip-label{margin:0;font:500 .75rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.marquee{display:flex;align-items:center;gap:1rem;min-width:0}
.marquee-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-inner{display:flex;width:max-content}
html.js .marquee-inner{animation:marquee 40s linear infinite}
@keyframes marquee{to{transform:translateX(calc(-100%/3))}}
.marquee:hover .marquee-inner,.marquee:focus-within .marquee-inner,.marquee.is-paused .marquee-inner{animation-play-state:paused}
.strip-events{display:flex;flex:none;margin:0;padding:0;list-style:none;font:italic 400 1.125rem/1.35 var(--serif);white-space:nowrap}
.strip-events li{display:flex;align-items:center;gap:.6rem;padding-right:2.5rem}
.strip-events li::before{content:"";flex:none;width:10px;height:1px;background:var(--accent)}
.marquee-btn{flex:none;min-height:32px;padding:0 .7rem;border:1px solid var(--rule);border-radius:2px;background:var(--white);color:var(--muted);font:500 .6875rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.marquee-btn:hover{border-color:var(--ink);color:var(--ink)}
/* No JS: static wrapped list, no copies, no button */
html:not(.js) .marquee-copy,html:not(.js) .marquee-btn{display:none}
html:not(.js) .marquee-view{-webkit-mask-image:none;mask-image:none}
html:not(.js) .marquee-inner{width:auto;flex-wrap:wrap}
html:not(.js) .strip-events{flex:1 1 100%;min-width:0;flex-wrap:wrap;white-space:normal;row-gap:.4rem}
.strip-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0;padding-block:.25rem 1.6rem}
@media (min-width:900px){.strip-stats{grid-template-columns:repeat(3,minmax(0,13rem))}}
.strip-stats div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:.3rem}
.strip-stats dd{margin:0;font:400 2.25rem/1 var(--serif);letter-spacing:-.02em}
.strip-stats dt{font-size:.75rem;line-height:1.35;color:var(--muted)}

/* Sections */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section.alt{background:var(--paper-2)}
.dark{background:var(--ink);color:var(--on-dark)}
.section-head{display:grid;gap:.6rem;margin-bottom:clamp(1.75rem,4vw,3rem);padding-top:1rem;border-top:1px solid var(--ink)}
.dark .section-head{border-top-color:var(--on-dark-rule)}
@media (min-width:900px){
  .section-head{grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:2rem}
  .section-head>.eyebrow{grid-row:1/span 3;padding-top:.6rem}
  .section-head>:not(.eyebrow){grid-column:2}
}
.eyebrow{margin:0;font:500 .75rem/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow .num{margin-right:.75em;color:var(--accent);font-variant-numeric:tabular-nums}
.dark .eyebrow{color:var(--on-dark-muted)}
.dark .eyebrow .num{color:var(--accent-on-dark)}
h2{margin:0;font:400 clamp(2rem,3.6vw,2.875rem)/1.08 var(--serif);letter-spacing:-.015em}
.section-intro,.section-meta{margin:.15rem 0 0;max-width:62ch;color:var(--muted)}
.section-meta{font-size:.8125rem}
.dark .section-intro{color:var(--on-dark-muted)}
@media (min-width:900px){
  .indent{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:2rem}
  .indent>*{grid-column:2}
  .indent>.more{justify-self:start}
}

/* 3. Lectures table */
.lectures{width:100%;border-collapse:collapse}
.lectures th,.lectures td{padding:1.05rem 1rem 1.05rem 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.lectures thead th{padding-top:0;padding-bottom:.75rem;border-bottom:1px solid var(--ink);font:500 .75rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lectures .group th{padding:1.6rem 0 .6rem;font:600 .75rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.lectures .empty td{color:var(--muted);font:italic 400 1.0625rem/1.4 var(--serif)}
.c-date{width:7.5rem;white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}
.c-event{width:24%}
.c-city{width:6.5rem}
.c-topic{font:400 1.1875rem/1.35 var(--serif)}
.lectures .c-role{width:6.5rem;padding-right:0;white-space:nowrap}
@media (max-width:767px){
  .lectures thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lectures,.lectures tbody,.lectures tr,.lectures th,.lectures td{display:block;width:auto}
  .lectures th,.lectures td,.lectures .c-role{padding:0;border:0;width:auto}
  .lectures .group th{padding:1.4rem 0 .5rem;border-bottom:1px solid var(--ink)}
  .lectures .empty td{padding:.9rem 0;border-bottom:1px solid var(--rule)}
  .lectures tr.row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date role" "topic topic" "event event" "city city";gap:.3rem 1rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
  .c-date{grid-area:date;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase}
  .lectures .c-role{grid-area:role;font-size:.8125rem;color:var(--muted)}
  .c-topic{grid-area:topic}
  .c-event{grid-area:event}
  .c-city{grid-area:city;font-size:.875rem;color:var(--muted)}
  .c-city::before{content:"City"}
  :lang(ko) .c-city::before{content:"도시"}
}

/* 4. Topics */
.topic-grid,.insight-grid{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
@media (min-width:720px){.topic-grid,.insight-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.topic{display:flex;flex-direction:column;gap:.8rem;padding:1.6rem;border:1px solid var(--on-dark-rule);border-radius:2px}
.topic p{margin:0}
.topic-idx{font:italic 400 1.125rem/1 var(--serif);color:var(--accent-on-dark)}
.topic h3{margin:0;font:500 1.5rem/1.2 var(--serif);letter-spacing:-.01em}
.topic .desc{color:var(--on-dark-muted)}
.topic-meta{margin-top:auto!important;padding-top:.8rem;border-top:1px solid var(--on-dark-rule);font-size:.8125rem;color:var(--on-dark-muted)}
.topic a{color:var(--accent-on-dark);font-weight:500;text-decoration:none}
.topic a:hover{text-decoration:underline}
/* v2: on phones the topic cards scroll sideways with snap points (desktop keeps the 3-column grid) */
@media (max-width:719px){
  .snap{position:relative;margin-inline:calc(-1*var(--gutter))}
  .snap::after{content:"";position:absolute;top:0;right:0;bottom:.75rem;width:48px;background:linear-gradient(90deg,rgba(16,20,26,0),var(--ink));pointer-events:none}
  .topic-grid{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:0 var(--gutter) .75rem;scrollbar-width:none}
  .topic-grid::-webkit-scrollbar{display:none}
  .topic{flex:0 0 min(80vw,320px);scroll-snap-align:start}
}

/* 5. About */
.about-grid{display:grid;gap:2rem}
@media (min-width:900px){.about-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:4rem;align-items:start}}
.portrait{margin:0;max-width:240px}
@media (min-width:900px){.portrait{max-width:none}}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;background:#d9dde2}
.bio{margin:0;max-width:38ch;font:400 clamp(1.25rem,2.2vw,1.5rem)/1.45 var(--serif)}
.bio [lang="ko"]{font-size:.86em;font-weight:300}
.facts{margin:2rem 0 0;border-top:1px solid var(--rule)}
.facts div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--rule)}
.facts dt{padding-top:.2rem;font:500 .75rem/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0}
@media (max-width:420px){.facts div{grid-template-columns:1fr;gap:.15rem}}

/* 6. Research */
.cites{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule);counter-reset:cite}
.cites li{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:.75rem;padding:1.3rem 0;border-bottom:1px solid var(--rule);counter-increment:cite}
.cites li::before{content:"[" counter(cite) "]";font:400 1.125rem/1.55 var(--serif);color:var(--accent)}
.cites p{margin:0;max-width:64ch;font:400 1.1875rem/1.55 var(--serif)}
.cites .au{font-weight:500}

/* 7. Insights */
.insight{display:flex;flex-direction:column;gap:.8rem;min-height:12.5rem;padding:1.5rem;background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--ink);border-radius:2px}
.insight .k{margin:0;font:500 .6875rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.insight h3{margin:0;font:400 1.375rem/1.3 var(--serif)}
.soon{display:inline-flex;align-items:center;gap:.5rem;margin:auto 0 0;font-size:.8125rem;color:var(--muted)}
.soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* 8. Contact */
.contact-grid{display:grid;gap:1.25rem}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:1.5rem;align-items:start}}
.form{display:grid;gap:1rem;padding:clamp(1.25rem,3vw,2rem);background:var(--white);border:1px solid var(--rule);border-radius:2px}
.pro-fields{display:grid;gap:1rem}
.field{display:grid;gap:.35rem}
.field-row{display:grid;gap:1rem}
@media (min-width:600px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
label{font-size:.8125rem;font-weight:500}
.opt{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;min-height:46px;padding:.6rem .75rem;border:1px solid var(--field);border-radius:2px;background:var(--white);color:var(--ink);font:inherit;font-size:1rem}
textarea{min-height:7rem;resize:vertical}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.mock-note{margin:0;font-size:.8125rem;color:var(--accent-strong)}
.patient-note{display:grid;gap:.75rem;justify-items:start;padding:1rem 1.1rem;background:var(--accent-tint);border-left:3px solid var(--accent);border-radius:2px}
.patient-note p{margin:0}
.clinic-box{display:grid;gap:.9rem;justify-items:start;padding:clamp(1.25rem,3vw,1.75rem);background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--ink);border-radius:2px}
.clinic-box h3{margin:0;font:400 1.5rem/1.2 var(--serif)}
.clinic-box p{margin:0;color:var(--muted)}
.clinic-facts{display:grid;gap:.5rem;margin:0;width:100%}
.clinic-facts div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem;font-size:.9375rem}
.clinic-facts dt{color:var(--muted)}
.clinic-facts dd{margin:0}

/* 9. Footer */
.site-footer{padding-block:3.5rem 2rem}
.foot-grid{display:grid;gap:2rem}
@media (min-width:900px){.foot-grid{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr)}}
.foot-name{margin:0 0 .5rem;font:400 1.875rem/1.1 var(--serif);letter-spacing:-.01em}
.foot-id .sub{margin:0;color:var(--on-dark-muted)}
.foot-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.5rem;margin:0;padding:0;list-style:none}
.site-footer a{color:var(--on-dark);text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.foot-links{display:grid;gap:.9rem;justify-items:start}
.social{display:inline-flex;align-items:center;gap:.5rem}
.lang{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--on-dark-rule);border-radius:2px;font-size:.75rem;letter-spacing:.08em}
.lang>*{padding:.25rem .6rem}
.lang [aria-current]{background:var(--on-dark);color:var(--ink);font-weight:600}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--on-dark-rule);font-size:.8125rem;color:var(--on-dark-muted)}
.foot-bottom p{margin:0}

/* Mobile bottom CTA */
.mobile-cta{display:none}
@media (max-width:767px){
  .mobile-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(246,245,241,.97);border-top:1px solid var(--rule)}
  .mobile-cta .btn{padding:0 .75rem}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* ===== Motion layer (v2, 2026-11-03) — plan: 01_제작플랜/모션_인터랙션_계획_20261103.md ===== */
:root{--dur-fast:150ms;--dur-base:300ms;--dur-slow:500ms;--dur-reveal:700ms;--ease-out:cubic-bezier(.2,.7,.2,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--reveal-y:16px;--reveal-x:40px;--stagger:80ms}

/* Reveal once when scrolled into view. Hidden start states exist only with html.js — without JS everything is visible. */
html.js [data-reveal]{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
html.js [data-reveal="left"]{transform:translateX(calc(-1*var(--reveal-x)))}
html.js [data-reveal="right"]{transform:translateX(var(--reveal-x))}
/* Photo reveal: a paper-coloured curtain (::before) slides off while the block eases in — transform only, no clip-path */
html.js [data-reveal="clip-left"],html.js [data-reveal="clip-right"]{position:relative;opacity:1;transition:transform var(--dur-reveal) var(--ease-out)}
html.js [data-reveal="clip-left"]{transform:translateX(calc(-1*var(--reveal-x))) scale(1.06)}
html.js [data-reveal="clip-right"]{transform:translateX(var(--reveal-x)) scale(1.06)}
html.js [data-reveal^="clip"]::before{content:"";position:absolute;inset:0;z-index:2;background:var(--paper);transition:transform var(--dur-reveal) var(--ease-out)}
html.js [data-reveal="clip-left"]::before{transform-origin:right}
html.js [data-reveal="clip-right"]::before{transform-origin:left}
/* Staggered children: --i is set by the script; the 7th item onwards shares the 6th delay */
html.js [data-reveal="stagger"]{opacity:1;transform:none;transition:none}
html.js [data-reveal="stagger"]>*{opacity:0;transform:translateY(var(--reveal-y));transition-property:opacity,transform,translate,box-shadow,border-color;transition-duration:var(--dur-reveal),var(--dur-reveal),var(--dur-fast),var(--dur-fast),var(--dur-fast);transition-timing-function:var(--ease-out);transition-delay:calc(min(var(--i,0),5)*var(--stagger)),calc(min(var(--i,0),5)*var(--stagger)),0s,0s,0s}
html.js [data-reveal="stagger"][data-from="left"]>*{transform:translateX(-24px)}
html.js .hero-text>h1{opacity:.001}/* LCP element is never fully invisible */
@media (max-width:767px){
  html.js [data-reveal="left"],html.js [data-reveal="right"],html.js [data-reveal="stagger"][data-from="left"]>*{transform:translateY(var(--reveal-y))}
  html.js [data-reveal="clip-left"],html.js [data-reveal="clip-right"]{transform:translateY(var(--reveal-y)) scale(1.04)}
}
html.js [data-reveal].is-in,html.js [data-reveal="stagger"].is-in>*{opacity:1;transform:none}
html.js [data-reveal^="clip"].is-in::before{transform:scaleX(0)}

/* Hover — pointer devices only; uses `translate` so it never fights the reveal `transform` */
@media (hover:hover){
  .topic,.insight{transition:translate var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
  .topic:hover{translate:0 -4px;border-color:rgba(243,241,236,.45)}
  .insight:hover{translate:0 -4px;box-shadow:0 14px 28px -18px rgba(16,20,26,.35)}
  .more [aria-hidden],.topic a [aria-hidden]{display:inline-block;transition:translate var(--dur-fast) var(--ease-out)}
  .more:hover [aria-hidden],.topic a:hover [aria-hidden]{translate:4px 0}
}

/* Header: transparent at the top, blurred paper after ~120px of scroll (CSS scroll-driven; unsupported browsers keep the solid bar) */
@supports (animation-timeline:scroll()){
  .site-bar{animation:bar-solid linear both;animation-timeline:scroll(root);animation-range:0 120px}
  @keyframes bar-solid{from{background-color:rgba(246,245,241,0);box-shadow:0 8px 24px -24px rgba(16,20,26,0)}to{background-color:rgba(246,245,241,.88);box-shadow:0 8px 24px -20px rgba(16,20,26,.35)}}
}

/* Mobile quick actions slide up once the hero has scrolled past */
html.js .mobile-cta{transform:translateY(110%);transition:transform var(--dur-slow) var(--ease-out)}
html.js .mobile-cta.is-on{transform:none}

/* Below-the-fold sections skip rendering until near the viewport */
.section{content-visibility:auto;contain-intrinsic-size:auto 640px}

@media print{
  html.js [data-reveal],html.js [data-reveal="stagger"]>*{opacity:1!important;transform:none!important}
  html.js [data-reveal^="clip"]::before,.marquee-copy,.marquee-btn{display:none}
}

/* Reduced motion (pattern C): keep a short fade, drop every movement, stop the marquee and show it as a static list */
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal],html.js [data-reveal="stagger"]>*{transform:none!important;transition:opacity var(--dur-base) var(--ease-out)!important;transition-delay:0s!important}
  html.js [data-reveal^="clip"]::before{display:none}
  html.js .mobile-cta{transform:none;transition:none}
  .site-bar{animation:none;background:rgba(246,245,241,.92)}
  .marquee-inner{animation:none;width:auto;flex-wrap:wrap}
  .marquee-copy,.marquee-btn{display:none}
  .marquee-view{-webkit-mask-image:none;mask-image:none}
  .strip-events{flex:1 1 100%;min-width:0;flex-wrap:wrap;white-space:normal;row-gap:.4rem}
  .topic,.insight,.more [aria-hidden],.topic a [aria-hidden]{transition:none}
}

/* Korean page: Newsreader has no Hangul, so the serif stack starts with Noto Serif KR (loaded on /ko/ only) */
html[lang="ko"]{--serif:"Newsreader","Noto Serif KR",Georgia,serif;word-break:keep-all}