/* MobilityChain: a supply-chain briefing, with a forest-green masthead. */
:root,:root[data-theme="light"] { --bg:oklch(.98 .006 145); --surface:oklch(.995 .003 145); --surface-2:oklch(.945 .012 145); --text:oklch(.29 .018 155); --strong:oklch(.21 .025 155); --muted:oklch(.48 .02 155); --line:oklch(.86 .015 145); --accent:oklch(.40 .09 155); --accent-ink:oklch(.99 .005 145); --accent-2:var(--accent); --maxw:1100px; --shadow:none; color-scheme:light; }
:root[data-theme="dark"] { --bg:oklch(.18 .012 155); --surface:oklch(.22 .013 155); --surface-2:oklch(.26 .014 155); --text:oklch(.9 .009 145); --strong:oklch(.96 .006 145); --muted:oklch(.73 .018 145); --line:oklch(.36 .02 145); --accent:oklch(.78 .09 155); --accent-ink:oklch(.18 .025 155); color-scheme:dark; }
.site-header { position:static; background:oklch(.29 .055 155); color:oklch(.97 .008 145); backdrop-filter:none; border:0; }
.header-inner { height:96px; }
.brand { color:inherit; gap:16px; }
.brand-mark { background:none; color:inherit; width:auto; height:auto; border-radius:0; font-size:46px; font-weight:800; letter-spacing:-4px; }
.brand-text { font-size:23px; letter-spacing:-.04em; gap:7px; }
.brand-text small { color:oklch(.79 .025 145); font-size:11px; letter-spacing:.08em; }
.nav a { color:oklch(.94 .01 145); }
.site-header .theme-toggle { background:transparent; color:inherit; border-color:oklch(.52 .035 155); }
main { padding-top:0; }
.briefing-head { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding:42px 0 30px; border-bottom:2px solid var(--strong); }
.section-label { color:var(--accent); font-size:13px; font-weight:700; margin:0 0 14px; }
.briefing-head h1 { margin:0; font-size:clamp(29px,3.5vw,43px); line-height:1.3; letter-spacing:-.045em; color:var(--strong); }
.briefing-note { color:var(--muted); font-size:14px; }
.briefing-note p { margin:0; }
.feed-heading { font-size:17px; margin:25px 0 0; }
.post-list { margin:0; gap:0; }
.card { background:none; box-shadow:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:25px 0; display:flex; flex-direction:row-reverse; align-items:center; gap:30px; }
.card:hover { transform:none; background:none; box-shadow:none; text-decoration:none; }
.card h2 { font-size:22px; line-height:1.45; letter-spacing:-.025em; margin:9px 0; }
.card:hover h2 { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.card p { font-size:14px; line-height:1.75; max-width:72ch; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.card-thumb { width:160px; flex:0 0 160px; aspect-ratio:16/10; border-radius:0; border:0; }
.card-thumb img { height:100%; width:100%; object-fit:cover; }
.post-list > li:first-child .card { padding:27px 0 32px; }
.post-list > li:first-child .card h2 { font-size:clamp(25px,3vw,33px); }
.post-list > li:first-child .card-thumb { width:38%; flex-basis:38%; aspect-ratio:16/10; }
.tag { background:none; border:0; padding:0; color:var(--accent); font-weight:700; font-size:13px; }
.meta { font-size:12px; gap:12px; }
.article { max-width:740px; margin:40px auto 0; }
.article h1 { font-size:clamp(28px,4vw,40px); line-height:1.4; letter-spacing:-.035em; }
.article .body { font-size:17px; line-height:1.95; }
.site-footer { margin-top:30px; background:var(--surface-2); }
@media(max-width:650px) { .header-inner{height:78px}.brand-text{font-size:19px}.brand-mark{font-size:37px}.nav{gap:12px}.briefing-head{display:block;padding:28px 0 22px}.briefing-note{margin-top:20px}.briefing-note>p:first-child{display:none}.card{gap:16px;align-items:flex-start}.card h2{font-size:19px}.card-thumb{width:94px;flex-basis:94px}.post-list>li:first-child .card{display:flex;flex-direction:column}.post-list>li:first-child .card-thumb{width:100%;flex-basis:auto;max-height:220px}.card p{font-size:13px}.article{margin-top:26px} }

/* Reading and keyboard affordances across every publication route. */
.skip-link { position:fixed;top:-80px;left:16px;z-index:1000;padding:12px 18px;background:var(--surface);color:inherit;border:2px solid currentColor; }
.skip-link:focus { top:12px; }
.theme-toggle { min-width:40px;min-height:40px;border-radius:3px; }
.pager-num,.pager-edge { border-radius:2px;min-height:40px; }
.sources,.disclosure,.paywall,.kpi li,.kpi-row li { border-radius:0;box-shadow:none; }
.paywall { text-align:left; }
.paywall-mark { font-size:13px;width:auto;height:auto;display:inline-block;padding:3px 7px;border-radius:2px; }
button,input { font:inherit; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }

.post-list > li:first-child .card-thumb { position:relative; }
.post-list > li:first-child .card-thumb::after { content:"공급망 · 일러스트레이션"; position:absolute;left:0;bottom:0;padding:4px 8px;font-size:10px;color:oklch(.98 .005 145);background:oklch(.23 .02 145 / .88); }

/* Small ambient films retain a visible, keyboard-accessible pause control. */
.publication-film { margin:0;min-width:0;max-width:100%;align-self:start; }
.film-frame { position:relative;aspect-ratio:16/9;overflow:hidden;background:oklch(.2 .01 70); }
.film-frame video,.film-poster { display:block;width:100%;height:100%;object-fit:cover; }
.film-frame video { position:absolute;inset:0; }
.film-toggle { position:absolute;right:8px;bottom:8px;min-height:36px;padding:5px 10px;border:1px solid oklch(.8 .005 70 / .5);border-radius:3px;background:oklch(.18 .01 70 / .85);color:oklch(.98 .005 70);font-size:12px;cursor:pointer; }
.publication-film figcaption { margin-top:7px;font-size:11px;line-height:1.6;color:var(--muted); }
@media(prefers-reduced-motion:reduce) { .film-frame video,.film-toggle { display:none; } }


/* Only the lead story reserves space for the film; the feed stays full width. */
.post-list > .lead-story { display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:32px;align-items:center;border-bottom:1px solid var(--line);padding:27px 0 32px; }
.post-list > .lead-story:first-child .card { padding:0;border:0;display:block; }
.post-list > .lead-story .card-thumb { display:none; }
.lead-story .publication-film { align-self:center; }
@media(max-width:650px) { .post-list > .lead-story{grid-template-columns:minmax(0,1fr);gap:18px}.lead-story .publication-film{width:270px;max-width:100%;justify-self:end} }