/* yulid.org — shared design language (after Berlin Lost & Found):
   Fira Sans / Fira Mono, square corners, hairline rules, navy for actions,
   red for marks and indices. Every static page links this file. */
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500&family=Fira+Sans:wght@400;500;600;700&display=swap");

:root{
  --ink:#10161c; --navy:#16385c; --navy-press:#102f50; --red:#d8232a;
  --muted:#5c6672; --faint:#8a929b; --rule:#dde2e7; --rule-strong:#c9d0d7;
  --soft:#f5f6f7; --canvas:#e7e8e4; --surface:#fff;
  --success:#1b7f4b; --success-soft:#e6f2ea; --alert-soft:#fbf0ef; --alert-ink:#6e322f;
  --sans:"Fira Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:"Fira Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --dur-press:110ms; --dur-state:180ms; --dur-enter:260ms; --stagger:45ms;
  --out:cubic-bezier(.22,1,.36,1); --standard:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:is(a,button):focus-visible{outline:2px solid var(--navy);outline-offset:2px}
:is(a,button){-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-state) var(--standard),border-color var(--dur-state) var(--standard),
    color var(--dur-state) var(--standard),transform var(--dur-press) var(--standard)}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.kicker{margin:0;color:var(--faint);font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase}
.idx{color:var(--red);font-family:var(--mono);font-size:12px;font-weight:500}

/* Top bar */
.topbar{position:sticky;top:0;z-index:20;background:rgb(255 255 255 / .94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px}
.brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:-.1px;white-space:nowrap}
.brand svg{width:22px;height:22px;flex:none}
.tools{display:flex;align-items:center;gap:22px}
.tools a,.lang{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.tools a:hover,.lang:hover{color:var(--navy)}
.lang{padding:0;border:0;background:none;cursor:pointer;text-transform:uppercase}

/* Actions */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;
  font-family:inherit;font-size:15px;font-weight:600;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-press)}
.btn-secondary{border-color:var(--rule-strong);background:#fff;color:var(--navy);font-weight:500}
.btn-secondary:hover{border-color:var(--navy)}
.btn:active{transform:scale(.985)}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--navy);font-weight:600}
.link i{font-style:normal;transition:transform var(--dur-state) var(--out)}
.link:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link:hover i{transform:translateX(3px)}

/* Section heading: bold title over an ink rule */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--ink)}
.section-head h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.4px}

/* Notices arrive the same way everywhere: red rule on the left */
.alert{padding:12px 14px;border-left:3px solid var(--red);background:var(--alert-soft);
  color:var(--alert-ink);font-size:13px;line-height:1.5}
.alert b{color:#8e1b18}

/* Figures sit on the canvas tone, framed by a hairline */
.stage{background:var(--canvas);padding:28px}
.frame{border:1px solid rgb(16 22 28 / .12);background:#fff}
.caption{margin:12px 0 0;color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.5}

/* Footer */
.site-footer{margin-top:96px;border-top:1px solid var(--rule)}
.site-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:22px 24px 40px;
  color:var(--faint);font-family:var(--mono);font-size:12px}

/* Enter motion: content rises in top-down, once */
@keyframes rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stagger>*{animation:rise-in var(--dur-enter) var(--out) both;animation-delay:calc(var(--stagger) * var(--i,0))}
.stagger>*:nth-child(2){--i:1}.stagger>*:nth-child(3){--i:2}.stagger>*:nth-child(4){--i:3}
.stagger>*:nth-child(5){--i:4}.stagger>*:nth-child(n+6){--i:5}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

@media (max-width:760px){
  .wrap{padding:0 16px}
  .tools{gap:16px}
  .tools .hide-sm{display:none}
  .stage{padding:16px}
  .site-footer{margin-top:64px}
  .site-footer .wrap{padding:20px 16px 32px}
}

/* Icons: 24px grid, 1.7 stroke, currentColor — same weight as the LF app */
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em}
.i-fill{fill:currentColor;stroke:none}

/* Zoomable media: click opens the lightbox */
.zoom{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.zoom-hint{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:34px;height:34px;
  background:rgb(255 255 255 / .94);color:var(--ink);border:1px solid rgb(16 22 28 / .12);font-size:16px;
  opacity:0;transform:translateY(-2px);transition:opacity var(--dur-state) var(--standard),transform var(--dur-state) var(--out)}
.zoom:hover .zoom-hint,.zoom:focus-visible .zoom-hint{opacity:1;transform:none}
@media (hover:none){.zoom-hint{opacity:.9;transform:none}}

.lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;
  background:rgb(10 15 20 / .92);color:#fff}
.lightbox::backdrop{background:transparent}
.lightbox[open]{display:grid;place-items:center;animation:rise-in var(--dur-enter) var(--out) both}
.lightbox .lb-media{max-width:min(92vw,1400px);max-height:86dvh;width:auto;height:auto;background:#fff}
.lightbox video.lb-media{background:#000}
.lb-btn{position:absolute;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;
  background:rgb(255 255 255 / .08);color:#fff;font-size:22px;cursor:pointer}
.lb-btn:hover{background:rgb(255 255 255 / .18)}
.lb-btn[hidden]{display:none}
.lb-close{top:14px;right:14px}
.lb-prev{left:14px;top:50%;margin-top:-22px}
.lb-next{right:14px;top:50%;margin-top:-22px}
.lb-count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgb(255 255 255 / .6);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em}

/* Charts: thin bars from one baseline, value at the tip, hover tooltip,
   table one click away. Series colours: --navy (accent), --faint (context). */
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.chart h3{margin:0 0 14px;font-size:14px;font-weight:600;letter-spacing:-.1px}
.chart h3 small{margin-left:6px;color:var(--faint);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;color:var(--muted);font-size:12px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:0 3px 3px 0}
.c-row{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);align-items:center;gap:12px;padding:7px 0}
.c-label{color:var(--ink);font-size:13px;line-height:1.3}
.c-label small{display:block;color:var(--faint);font-family:var(--mono);font-size:10.5px}
.c-bars{display:grid;gap:2px;border-left:1px solid var(--rule-strong)}
.c-track{display:flex;align-items:center;gap:8px;min-height:16px}
.c-bar{height:16px;min-width:2px;border-radius:0 4px 4px 0;outline:none;cursor:default;
  transition:filter var(--dur-state) var(--standard)}
.c-bars.pair .c-bar{height:12px}
.c-bar:hover,.c-bar:focus-visible{filter:brightness(1.25)}
.c-bar:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy)}
.c-val{flex:none;color:var(--muted);font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.c-table{margin-top:10px}
.c-table summary{display:inline-flex;color:var(--navy);font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.c-table summary:hover{text-decoration:underline;text-underline-offset:3px}
.tip{position:fixed;z-index:60;pointer-events:none;padding:8px 10px;background:var(--ink);color:#fff;
  font-size:12px;line-height:1.4;box-shadow:0 8px 24px rgb(16 22 28 / .2);opacity:0;transition:opacity 120ms}
.tip.on{opacity:1}
.tip b{display:block;font-size:14px}
.tip span{color:rgb(255 255 255 / .7)}
@media (max-width:760px){
  .charts{grid-template-columns:1fr;gap:28px}
  .c-row{grid-template-columns:minmax(0,92px) minmax(0,1fr);gap:10px}
}