/* fit.How , Tempo blog styling (self-contained; reskins every article). */
:root{
  color-scheme:light;
  --paper:#FCFBF8; --panel:#F5F2EB;
  --ink:#17130A; --body:#443E32; --ash:#736B5D;
  --ember:#E1521E; --ember2:#C7451A; --ember-soft:#F8EAE1;
  --line:rgba(23,19,10,.13);
  --disp:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;min-height:100svh}
a{color:var(--ember);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--ember);color:#fff}

.topbar{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:saturate(1.4) blur(10px)}
.topbar .inner{max-width:820px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.brand .dot{color:var(--ember)}
.topbar nav a{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-left:20px;color:var(--ash)}
.topbar nav a:hover{color:var(--ink);text-decoration:none}

main{max-width:720px;margin:0 auto;padding:52px 24px 96px}
.back{display:inline-block;margin-bottom:30px;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.back:hover{text-decoration:none;color:var(--ember2)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ember2)}
h1{font-family:var(--disp);font-size:clamp(34px,6vw,56px);font-weight:800;letter-spacing:-.035em;
  margin-top:14px;line-height:1.02;text-wrap:balance;color:var(--ink)}
.meta{color:var(--ash);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:16px}
.lead{margin-top:24px;font-size:20px;line-height:1.55;color:var(--body);text-wrap:pretty}
h2{font-family:var(--disp);font-size:clamp(23px,3.4vw,30px);font-weight:800;letter-spacing:-.02em;
  margin-top:48px;color:var(--ink)}
p{margin-top:16px;color:var(--body);text-wrap:pretty}
strong{color:var(--ink);font-weight:600}
ul,ol{margin-top:12px;padding-left:0;list-style:none}
ol{counter-reset:n}
li{margin-top:11px;color:var(--body);position:relative;padding-left:28px}
ul li::before{content:"";position:absolute;left:0;top:12px;width:14px;height:2px;background:var(--ember)}
ol li{counter-increment:n}
ol li::before{content:counter(n);position:absolute;left:0;top:0;font-family:var(--disp);font-weight:800;
  font-size:14px;color:var(--ember);font-variant-numeric:tabular-nums}

.note{margin-top:26px;background:var(--ember-soft);border:1px solid color-mix(in srgb,var(--ember) 30%,var(--line));
  padding:18px 20px}
.note p{margin-top:0;color:var(--body)}
.note p+p{margin-top:12px}

/* Article index list */
.index-list{margin-top:34px;list-style:none;padding:0}
.index-list li{margin-top:0;padding:0}
.index-list li::before{display:none}
.index-list a{display:block;padding:24px 0;border-top:1px solid var(--line);color:var(--ink)}
.index-list li:last-child a{border-bottom:1px solid var(--line)}
.index-list a:hover{text-decoration:none}
.index-list .t{font-family:var(--disp);font-size:clamp(20px,2.6vw,26px);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);transition:color .2s,transform .2s}
.index-list a:hover .t{color:var(--ember);transform:translateX(6px)}
.index-list .d{margin-top:6px;font-size:15px;color:var(--body)}
.index-list .rt{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}

footer{border-top:1px solid var(--line);background:var(--panel);text-align:center;
  padding:30px 24px 52px;color:var(--ash);font-size:13.5px}
footer a{font-weight:600}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}