/* Stafka "Polar" design system.
   Idea: a 24-hour polar watch. Cool porcelain paper, ink, night blue (only in night arcs), sun (shared hours, ranges),
   one red hand (now, medians, the number that matters). Archivo (wide grotesk) for display and data, Source Serif for reading.
   Swiss rules instead of cards; rectangular controls; one orchestrated motion: the dial's dawn. */
@font-face{font-family:Archivo;font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo.woff2) format("woff2")}
@font-face{font-family:Serif4;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/serif.woff2) format("woff2")}
@font-face{font-family:Native;font-weight:500;font-display:swap;src:url(fonts/native-ka.woff2) format("woff2");unicode-range:U+10A0-10FF}
@font-face{font-family:Native;font-weight:500;font-display:swap;src:url(fonts/native-hy.woff2) format("woff2");unicode-range:U+0530-058F}
@font-face{font-family:Native;font-weight:500;font-display:swap;src:url(fonts/native-cy.woff2) format("woff2");unicode-range:U+0400-04FF}

:root{
  --paper:#EEF1F3;--paper-2:#E2E6EA;--surface:#F8F9FA;--ink:#0D1117;--ink-2:#4A5363;--ink-3:#626B7A;
  --rule:#9AA4B2;--line:#D0D6DE;--night:#17213B;--hatch:#24305A;--twilight:#56658F;--day:#FFFFFF;
  --sun:#F2B630;--sun-ink:#1A1300;--sun-soft:#F8E3AE;--hand:#D7301F;--hand-ink:#B3261A;
  --display:Archivo,"Helvetica Neue",Arial,sans-serif;--text:Serif4,Georgia,"Times New Roman",serif;
  --w:1180px;--w-text:690px;color-scheme:light
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --paper:#0B0F17;--paper-2:#151B27;--surface:#101622;--ink:#E9EDF2;--ink-2:#AEB6C2;--ink-3:#8C95A3;
  --rule:#4A5466;--line:#232B3A;--night:#05070D;--hatch:#1A2236;--twilight:#3B4A70;--day:#263049;
  --sun:#F2B630;--sun-ink:#1A1300;--sun-soft:#3A3013;--hand:#FF5A47;--hand-ink:#FF7A6A;color-scheme:dark}}
:root[data-theme=dark]{--paper:#0B0F17;--paper-2:#151B27;--surface:#101622;--ink:#E9EDF2;--ink-2:#AEB6C2;--ink-3:#8C95A3;
  --rule:#4A5466;--line:#232B3A;--night:#05070D;--hatch:#1A2236;--twilight:#3B4A70;--day:#263049;
  --sun:#F2B630;--sun-ink:#1A1300;--sun-soft:#3A3013;--hand:#FF5A47;--hand-ink:#FF7A6A;color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.62 var(--text);font-kerning:normal}
a{color:inherit}
main a:not(.btn){color:var(--ink);text-decoration:underline;text-decoration-color:var(--hand);text-decoration-thickness:1.5px;text-underline-offset:3px}
main a:not(.btn):hover{color:var(--hand-ink)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:10;font-family:var(--display)}
.skip:focus{left:16px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
.prose{max-width:var(--w-text)}
.native{font-family:Native,var(--text);font-weight:500;color:var(--ink-3)}

h1,h2,h3,summary,.btn,.top,.crumbs,table,.ledger,.stamp,.muted,caption,.index,.cost,.calc,.tz,footer,.cta,.paths,.steps li::before,label,.dial-meta,.dial-key{font-family:var(--display)}
h1,h2,h3{margin:0;line-height:1.02;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,1.2rem + 4.6vw,4.6rem);font-weight:800;font-stretch:118%;margin-top:.5rem;max-width:17ch}
h2{font-size:clamp(1.45rem,1.15rem + 1.1vw,2.05rem);font-weight:760;font-stretch:112%;margin-top:3.4rem;padding-top:.9rem;border-top:2px solid var(--ink)}
h3{font-size:1.08rem;font-weight:700;font-stretch:100%;margin-top:1.9rem;letter-spacing:0}
p,ul,ol{margin:.9rem 0 0}
ul,ol{padding-left:1.15rem}
li+li{margin-top:.32rem}
.lead{font-size:clamp(1.12rem,1.02rem + .45vw,1.36rem);line-height:1.5;color:var(--ink-2);max-width:60ch;margin-top:1.1rem}
.muted,.stamp{color:var(--ink-3);font-size:.86rem;line-height:1.45}
.stamp{margin-top:.9rem}
.num,td.n,th.n{font-variant-numeric:tabular-nums lining-nums}

/* header: wordmark + dial mark, ruled */
.top{border-bottom:1px solid var(--ink);background:var(--paper)}
.top .wrap{display:flex;align-items:center;gap:22px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-stretch:125%;font-size:1.28rem;letter-spacing:-.02em;text-decoration:none;margin-right:auto}
.brand svg{width:30px;height:30px;flex:none}
.mk-ring{fill:none;stroke:var(--ink);stroke-width:2.6}.mk-lens{fill:var(--sun)}.mk-hand{stroke:var(--hand);stroke-width:2.4;stroke-linecap:round}
.top nav{display:flex;gap:20px}
.top nav a{text-decoration:none;color:var(--ink-2);font-size:.93rem;font-weight:560;padding:6px 0;border-bottom:2px solid transparent}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current]{color:var(--ink);border-bottom-color:var(--hand)}
@media (max-width:820px){.top nav{display:none}.top .wrap{min-height:56px}}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border-radius:3px;font-weight:680;font-size:.97rem;font-stretch:108%;text-decoration:none;border:1.5px solid var(--ink);cursor:pointer;white-space:nowrap;letter-spacing:.005em}
.btn-act{background:var(--ink);color:var(--paper)}
.btn-act:hover{background:var(--hand);border-color:var(--hand);color:#fff}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-sm{min-height:38px;padding:7px 14px;font-size:.9rem}

/* page head */
.crumbs{font-size:.84rem;color:var(--ink-3);margin-top:1.5rem}
.crumbs a{color:var(--ink-3)!important;text-decoration:none!important}
.crumbs a:hover{color:var(--ink)!important}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--rule)}
.crumbs li+li{margin-top:0}
.head{padding:.4rem 0 1.4rem}

/* ledger: the page's figures, set like a watch's data window */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);margin-top:1.8rem}
.ledger div{padding:14px 18px 14px 0;margin-right:18px;border-right:1px solid var(--line)}
.ledger div:last-child{border-right:0}
.ledger b{display:block;font-size:clamp(1.4rem,1.05rem + 1.2vw,2.15rem);font-weight:780;font-stretch:115%;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;line-height:1.1}
.ledger div:first-child b{color:var(--hand-ink)}
.ledger span{display:block;font-size:.84rem;color:var(--ink-2);line-height:1.35;margin-top:4px}
@media (max-width:560px){.ledger{grid-template-columns:1fr 1fr}.ledger div{border-right:0;margin-right:0}.ledger div:nth-child(n+3){border-top:1px solid var(--line)}}

/* tables: ruled, condensed numerals */
.tbl{overflow-x:auto;margin-top:1.1rem}
table{border-collapse:collapse;width:100%;font-size:.95rem;font-stretch:88%}
th,td{padding:9px 14px 9px 0;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
thead th{font-size:.8rem;font-weight:650;color:var(--ink-2);border-bottom:1.5px solid var(--ink);white-space:nowrap;font-stretch:100%}
tbody th{font-weight:560}
td.n,th.n{text-align:right;white-space:nowrap;padding-right:0;padding-left:14px}
tbody tr:hover{background:var(--paper-2)}
tr.me th,tr.me td{font-weight:720}
tr.me th{box-shadow:inset 3px 0 0 var(--hand);padding-left:10px}
caption{caption-side:bottom;text-align:left;padding:8px 0;font-size:.82rem;color:var(--ink-3)}

/* in-cell bar */
.bar{display:flex;align-items:center;gap:10px;min-width:170px}
.bar i{display:block;height:7px;background:var(--ink);flex:none}
.bar span{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
tr.me .bar i{background:var(--hand)}

/* percentile range as a bezel scale: ticks, p10-p90 line, p25-p75 band, median needle */
.rng{position:relative;height:30px;min-width:220px;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 10%) 0 100%/100% 6px no-repeat}
.rng .t{position:absolute;top:13px;height:2px;background:var(--ink)}
.rng .b{position:absolute;top:8px;height:12px;background:var(--sun);box-shadow:inset 0 0 0 1px var(--ink)}
.rng .m{position:absolute;top:1px;width:3px;height:26px;background:var(--hand)}
.rng-legend{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--display);font-size:.8rem;color:var(--ink-2);margin-top:8px}
.rng-legend i{display:inline-block;width:16px;height:8px;vertical-align:middle;margin-right:6px}

/* linear 24-hour strip */
.tz{margin-top:1.1rem;border-top:1.5px solid var(--ink);border-bottom:1px solid var(--line);padding:10px 0 12px}
.tz-row{display:grid;grid-template-columns:minmax(130px,200px) 1fr;gap:14px;align-items:center;padding:7px 0}
.tz-row+.tz-row{border-top:1px dashed var(--line)}
.tz-name{font-size:.9rem;font-weight:650;line-height:1.3}
.tz-name small{display:block;font-weight:450;color:var(--ink-3);font-size:.8rem}
.tz-track{position:relative;height:20px;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100%/24)),var(--paper-2);overflow:hidden}
.tz-track span{position:absolute;top:0;bottom:0}
.tz-track .you{background:var(--twilight);opacity:.28}
.tz-track .them{top:5px;bottom:5px;background:var(--ink)}
.tz-track .both{top:3px;bottom:3px;background:var(--sun);box-shadow:inset 0 0 0 1px var(--ink)}
.tz-axis{display:grid;grid-template-columns:minmax(130px,200px) 1fr;gap:14px;font-size:.74rem;color:var(--ink-3)}
.tz-axis div{display:flex;justify-content:space-between}
.tz-key{display:flex;flex-wrap:wrap;gap:18px;font-size:.8rem;color:var(--ink-2);margin-top:10px}
.tz-key i{display:inline-block;width:16px;height:9px;vertical-align:middle;margin-right:6px}
@media (max-width:560px){.tz-row,.tz-axis{grid-template-columns:1fr}.tz-axis>span{display:none}}

/* cost comparison */
.cost{margin-top:1.1rem;display:grid;gap:12px;border-top:1.5px solid var(--ink);padding-top:12px}
.cost>div{display:grid;grid-template-columns:minmax(200px,300px) 1fr;gap:16px;align-items:center}
.cost>div>div{line-height:1.35}
.cost i{display:block;height:24px;background:var(--ink)}
.cost .us i{background:var(--sun);box-shadow:inset 0 0 0 1.5px var(--ink)}
.cost b{font-variant-numeric:tabular-nums lining-nums;font-weight:780;font-stretch:112%;font-size:1.12rem}
.cost .us b{color:var(--hand-ink)}
.cost small{display:block;color:var(--ink-3);font-size:.8rem}
@media (max-width:560px){.cost>div{grid-template-columns:1fr;gap:6px}}

/* calculator */
.calc{margin-top:1.2rem;border:1.5px solid var(--ink);background:var(--surface);padding:18px 20px}
.calc form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 18px}
.calc label{display:grid;gap:4px;font-size:.82rem;color:var(--ink-2);font-weight:600}
.calc input,.calc select{font:600 1.05rem/1.2 var(--display);font-variant-numeric:tabular-nums;padding:8px 2px;border:0;border-bottom:1.5px solid var(--ink);background:transparent;color:var(--ink);width:100%;border-radius:0}
.calc .res{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-top:16px;border-top:3px solid var(--ink)}
.calc .res div{padding:12px 4px 2px 0}
.calc .res b{display:block;font-size:1.6rem;font-weight:800;font-stretch:115%;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em}
.calc .res span{font-size:.8rem;color:var(--ink-3)}
.calc .save b{color:var(--hand-ink)}

/* call to action: a full-width ink band */
.cta{margin-top:3rem;background:#0D1117;color:#EEF1F3;padding:26px 26px 24px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.cta strong{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);font-weight:800;font-stretch:115%;letter-spacing:-.015em;line-height:1.1;display:block}
.cta p{margin:.45rem 0 0;color:#C3CAD4;font-family:var(--text);font-size:1rem}
.cta .btn-act{background:var(--sun);color:var(--sun-ink);border-color:var(--sun)}
.cta .btn-act:hover{background:#EEF1F3;border-color:#EEF1F3;color:#0D1117}
@media (max-width:640px){.cta{grid-template-columns:1fr}}
.cta-inline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:1.4rem}

/* notes, FAQ, sources */
.note{border-left:3px solid var(--hand);background:var(--paper-2);padding:11px 15px;margin-top:1.1rem;font-size:.97rem}
details{border-bottom:1px solid var(--line);padding:13px 0}
details:first-of-type{border-top:1px solid var(--ink)}
summary{font-weight:680;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;font-size:1.02rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--hand);font-weight:500;font-size:1.2rem;line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--ink-2);max-width:var(--w-text)}
.sources{font-size:.84rem;color:var(--ink-3);word-break:break-word;padding-left:1.4rem;font-family:var(--text)}
.sources a{color:var(--ink-2)!important;text-decoration-color:var(--rule)!important}
sup a{text-decoration:none!important;font-family:var(--display);font-size:.68em;font-weight:700;color:var(--hand-ink)!important;padding:0 1px}

/* index lists */
.index{list-style:none;padding:0;margin-top:1rem;border-top:1.5px solid var(--ink);columns:2 320px;column-gap:32px}
.index li{break-inside:avoid;border-bottom:1px solid var(--line);margin:0;padding:11px 0;display:flex;justify-content:space-between;gap:12px}
.index a{text-decoration:none!important;color:var(--ink)!important;font-weight:600}
.index a:hover{color:var(--hand-ink)!important}
.index span{color:var(--ink-3);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;font-stretch:88%}
.related{margin-top:2.6rem}

/* layout helpers */
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:start}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 0 52px;margin-top:18px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-4px;font-size:1.9rem;font-weight:800;font-stretch:125%;color:var(--hand)}

/* home hero with the dial */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:center;padding:2.2rem 0 1.4rem}
.hero h1{font-size:clamp(2.6rem,1.2rem + 5.4vw,5.6rem);max-width:12ch}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.hero-sm{padding:.2rem 0 0;grid-template-columns:1.25fr .9fr}
.hero-sm h1{font-size:clamp(2.1rem,1.2rem + 3.6vw,3.9rem);max-width:16ch}
.hero-sm .dial{max-width:380px}
@media (max-width:900px){.hero-sm{grid-template-columns:1fr}.hero-sm .dial{max-width:320px;margin:0 auto}}
.dialbox{position:relative}
.dial{width:100%;height:auto;display:block;aspect-ratio:1/1;max-width:560px;margin-left:auto}
.d-tick{stroke:var(--rule);stroke-width:1.2}.d-major{stroke:var(--ink);stroke-width:2.2}
.d-hour{font:600 15px var(--display);fill:var(--ink-3);text-anchor:middle;font-variant-numeric:tabular-nums}
.d-hour-major{fill:var(--ink);font-weight:800}
.d-vring{fill:none;stroke:var(--paper-2)}.d-vday{fill:var(--ink)}
.d-dayring{fill:none;stroke:var(--day)}
.d-night{fill:var(--night)}.d-hatch{stroke:var(--hatch);stroke-width:3}
.d-band{fill:var(--sun);opacity:.38}.d-band-in{fill:var(--sun)}
.d-late{stroke:var(--sun);stroke-width:1.6}.d-lateband{opacity:.9}
.d-lens{fill:color-mix(in srgb,var(--ink) 5%,transparent);stroke:var(--ink);stroke-width:1.6;stroke-dasharray:5 4}
.d-hand line{stroke:var(--hand);stroke-width:3.2;stroke-linecap:round}.d-hand circle{fill:var(--hand)}
.d-ring{font:700 12.5px var(--display);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round}
.d-big{font:850 58px var(--display);font-stretch:118%;fill:var(--ink);text-anchor:middle;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.d-cap{font:600 13px var(--display);fill:var(--ink-2);text-anchor:middle}
.dial-meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:.88rem;color:var(--ink-2);margin-top:6px}
.dial-meta select{font:600 .92rem var(--display);background:transparent;color:var(--ink);border:0;border-bottom:1.5px solid var(--ink);padding:4px 2px;border-radius:0}
.dial-key{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.78rem;color:var(--ink-2);margin-top:10px}
.dial-key i{display:inline-block;width:14px;height:9px;vertical-align:middle;margin-right:5px}
@media (prefers-reduced-motion:no-preference){
  .dial .d-city{animation:dawn .9s cubic-bezier(.2,.7,.2,1) both}
  .dial .d-city:nth-of-type(2){animation-delay:.08s}.dial .d-city:nth-of-type(3){animation-delay:.16s}.dial .d-city:nth-of-type(4){animation-delay:.24s}
  .dial .d-lens{animation:lens 1.1s .35s ease-out both}
}
@keyframes dawn{from{opacity:0}to{opacity:1}}
@keyframes lens{from{stroke-dashoffset:400;opacity:0}to{stroke-dashoffset:0;opacity:1}}

.paths{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:1rem;border-top:1.5px solid var(--ink)}
.paths a{display:block;padding:16px 18px 16px 0;border-bottom:1px solid var(--line);text-decoration:none!important;color:var(--ink)!important}
.paths a:nth-child(odd){border-right:1px solid var(--line);padding-right:18px}
.paths a:nth-child(even){padding-left:18px}
.paths a:hover b{color:var(--hand-ink)}
.paths b{display:block;font-size:1.08rem;font-weight:760;font-stretch:110%}
.paths span{color:var(--ink-2);font-size:.95rem;font-family:var(--text)}
@media (max-width:640px){.paths{grid-template-columns:1fr}.paths a:nth-child(odd){border-right:0}.paths a:nth-child(even){padding-left:0}}

/* forms */
.form{display:grid;gap:16px;max-width:660px;margin-top:1.2rem}
.form label{display:grid;gap:5px;font-weight:620;font-size:.88rem}
.form input,.form select,.form textarea{font:500 1rem var(--display);padding:10px 2px;border:0;border-bottom:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:0}
.form textarea{min-height:120px;border:1.5px solid var(--ink);padding:10px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}

/* footer */
footer{margin-top:4.5rem;border-top:3px solid var(--ink);background:var(--paper)}
footer .wrap{padding-top:28px;padding-bottom:36px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;font-size:.9rem;color:var(--ink-2)}
footer h2{font-size:.95rem;margin:0 0 8px;padding:0;border:0;color:var(--ink);font-stretch:110%}
footer p{font-family:var(--text)}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-top:7px}
footer a{text-decoration:none;color:var(--ink-2)}
footer a:hover{color:var(--hand-ink)}
footer .legal{grid-column:1/-1;font-size:.8rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px;font-family:var(--text)}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.top,footer,.cta,.calc{display:none}}

/* home navigation: finder bar, tags, topic board, tiles */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.findbar{margin-top:1.6rem;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0 16px}
.finder{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:14px 18px;align-items:end;font-family:var(--display)}
.seg{border:1.5px solid var(--ink);border-radius:3px;display:flex;padding:0;margin:0;align-self:end}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:block;padding:11px 14px;font-weight:650;font-size:.92rem;white-space:nowrap}
.seg input:checked+span{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+span{outline:3px solid var(--sun);outline-offset:-3px}
.fld{display:grid;gap:4px;font-size:.8rem;font-weight:620;color:var(--ink-2)}
.fld select{font:650 1.05rem var(--display);padding:9px 2px;border:0;border-bottom:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:0;width:100%}
.finder .btn{min-height:46px}
@media (max-width:980px){.finder{grid-template-columns:1fr 1fr}.seg{grid-column:1/-1;justify-self:start}.finder .btn{grid-column:1/-1}}
@media (max-width:520px){.finder{grid-template-columns:1fr}.seg span{padding:10px 11px;font-size:.86rem}}
.chips{list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{margin:0}
.chips a{display:inline-flex;align-items:baseline;gap:7px;padding:7px 11px;border:1px solid var(--line);background:var(--surface);border-radius:2px;
  font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--ink)!important;text-decoration:none!important;line-height:1.25}
.chips a:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)!important}
.chips a:hover small{color:var(--sun)}
.chips small{font-size:.76rem;font-weight:600;color:var(--hand-ink);font-variant-numeric:tabular-nums lining-nums;font-stretch:90%}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px}
.board section h2{font-size:1.25rem}
.board .muted{margin-top:.35rem}
.board h3{font-size:.92rem;margin-top:1.4rem;color:var(--ink-2)}
@media (max-width:980px){.board{grid-template-columns:1fr}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:3rem}
.tile{display:grid;gap:8px;padding:22px 22px 20px;border:1.5px solid var(--ink);text-decoration:none!important;color:var(--ink)!important;background:var(--surface)}
.tile b{font-family:var(--display);font-size:1.3rem;font-weight:800;font-stretch:112%;line-height:1.1}
.tile span{color:var(--ink-2);font-size:1rem}
.tile em{font-family:var(--display);font-style:normal;font-weight:700;font-size:.92rem;color:var(--hand-ink)}
.tile:hover{background:var(--paper-2)}
.tile-ink{background:#0D1117;color:#EEF1F3!important;border-color:#0D1117}
.tile-ink span{color:#C3CAD4}
.tile-ink em{color:#F2B630}
.tile-ink:hover{background:#17213B}
@media (max-width:760px){.duo{grid-template-columns:1fr}}
footer .wrap{grid-template-columns:1.3fr 1fr 1fr 1fr}
@media (max-width:900px){footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .wrap{grid-template-columns:1fr}}

/* Dial motion layer (owned by the dial motion work). Concatenated after stafka.css at build time.
   Load-in ("dawn"), live states set by dial.js (.is-live, .is-scrub, .has-hi, .is-tilt, .is-tick) and the ambient bead. */
.dial{touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;transform-origin:50% 50%}
.dial.is-live{cursor:grab;-webkit-user-select:none;user-select:none}
.is-drag .dial,.is-drag .d-grip{cursor:grabbing}
.dial:focus,.dial:focus-visible{outline:none}
.d-focus{fill:none;stroke:var(--sun);stroke-width:4;opacity:0;pointer-events:none}
.dial:focus-visible .d-focus{opacity:1}
.d-grip{touch-action:none;cursor:grab}
.d-hand .d-pin{fill:var(--paper)}
.d-hand .d-jw{fill:var(--paper);stroke:var(--ink-2);stroke-width:1.4;transition:opacity .5s}
.is-dawn .d-jw,.is-wait .d-hand,.is-wait .d-big,.is-wait .d-cap,.is-wait .d-ring{opacity:0}
.dial.is-dawn .d-ring{transition-delay:.8s}
.d-hand .d-jw.work{fill:var(--sun);stroke:var(--ink);stroke-width:1.6}
.d-hand .d-jw.late{fill:var(--sun-soft);stroke:var(--sun);stroke-width:2}
.d-sec{fill:var(--hand);opacity:0;transition:opacity .8s;pointer-events:none}
.is-tick .d-sec{opacity:1}
.is-scrub .d-sec{opacity:.25}
.d-glass{pointer-events:none;opacity:0;transition:opacity .5s}
.is-tilt .d-glass{opacity:1}
.d-trace{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-dasharray:100 100;pointer-events:none;opacity:0}
.d-lens,.d-ring,.d-big,.d-cap,.d-sec,.d-glass{pointer-events:none}
.dial [clip-path]{pointer-events:none}

/* highlight: one city (hover a ring or its table row), or the cities at work at the scrubbed moment */
.dial .d-city,.dial [clip-path]>g,.dial .d-ring{transition:opacity .25s}
.dial.has-hi .d-city:not(.is-hi),.dial.has-hi [clip-path]>g:not(.is-hi),.dial.has-hi .d-ring:not(.is-hi){opacity:.28}
.d-city.is-hi .d-band,.d-city.is-on .d-band{opacity:.72}
.d-band{transition:opacity .25s}
tr[data-row]{transition:background-color .2s}
tr[data-row].is-hi{background:var(--paper-2)}
tr[data-row].is-hi th{box-shadow:inset 3px 0 0 var(--sun)}
td[data-now]::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;margin-right:.45em;vertical-align:.02em}
tr[data-st=work] td[data-now]::before{background:var(--sun);box-shadow:inset 0 0 0 1.5px var(--ink)}
tr[data-st=late] td[data-now]::before{background:repeating-linear-gradient(-45deg,var(--sun) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1.5px var(--sun)}
tr[data-st=off] td[data-now]::before{box-shadow:inset 0 0 0 1.5px var(--ink-3)}

/* "Back to now": absolutely placed over the dial's empty top-right corner, so showing it never moves the layout */
.dial-back{position:absolute;top:0;right:0;z-index:1;visibility:hidden;opacity:0;transform:translateY(-4px);
  transition:opacity .2s,transform .2s,visibility 0s .2s;font:650 .82rem/1 var(--display);color:var(--ink);background:var(--paper);
  border:1.5px solid var(--ink);border-radius:3px;padding:8px 11px;cursor:pointer;min-height:34px}
.dial-back::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--hand);margin-right:7px;vertical-align:1px}
.dial-back:hover{background:var(--ink);color:var(--paper)}
.is-scrub .dial-back{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
.dial-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* dawn. The frame (bezel, your ring, lens) is complete at first paint. The rings, hand and centre depend on the
   visitor's zone, so they are held hidden ~1 s and then fade in (the no-JS / late-JS path); dial.js adds .is-live and
   plays its own sequence when the dial is on screen (.is-go): a red sweep runs clockwise over the ticks, the lens is traced. */
@media (prefers-reduced-motion:no-preference){
  .dial .d-lens{animation:none}
  .dial .d-city,.dial .d-city:nth-of-type(n),.dial [clip-path],.dial .d-hand,.dial .d-big,.dial .d-cap{animation:d-fade .5s 1s both}
  .dial .d-ring{animation:d-fade .5s 1.15s both}
  .dial.is-live .d-city,.dial.is-live .d-city:nth-of-type(n),.dial.is-live [clip-path],.dial.is-live .d-hand,.dial.is-live .d-big,
  .dial.is-live .d-cap,.dial.is-live .d-ring{animation:none}
  .is-go .d-tick{animation:d-tick .75s calc(var(--i) * 24ms) ease-out}
  .is-go .d-hour{animation:d-hour .75s calc(var(--i) * 24ms) ease-out}
  .is-go .d-trace{animation:d-trace 1.05s .2s cubic-bezier(.6,0,.25,1) both}
}
@keyframes d-fade{from{opacity:0}}
@keyframes d-tick{from{stroke:var(--hand);stroke-width:3.2}}
@keyframes d-hour{from{fill:var(--hand-ink)}}
@keyframes d-trace{0%{stroke-dashoffset:100;opacity:1}72%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}