@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-latin.woff2) format("woff2");font-weight:100 700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2212,U+2192,U+00B5}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");font-weight:100 700;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

/* The sea at night is the default: the satellite pictures are dark water with light in it.
   Light ("porcelain") is a reader's choice for the reading sections; the stage stays a night sea in both. */
:root{
  --bg:#050d14;--bg2:#08151f;--card:#0c1c28;--ink:#e8efec;--muted:#a8bcc0;--faint:#6f8a93;--rule:#17303d;
  --turq:#6fe3d6;--turq-2:#3cc0c4;--turq-ink:#8ff0e4;--navy:#0a1a2c;--mud:#b59a52;--gold:#f0c46c;--focus:#a6f3ea;
  --stage-bg:#030a10;--card-a:rgba(5,13,20,.82);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --top:50px;color-scheme:dark
}
:root[data-theme="light"]{
  --bg:#f3f1ea;--bg2:#ebe8de;--card:#fbfaf6;--ink:#0d2230;--muted:#3f5560;--faint:#6a7c84;--rule:#d6d2c4;
  --turq:#0f7f80;--turq-2:#13696d;--turq-ink:#0b6466;--mud:#7a6224;--gold:#8a5a00;--focus:#0b5f9e;--card-a:rgba(5,13,20,.82);color-scheme:light
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top) + 12px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18.5px/1.62 var(--serif);font-optical-sizing:auto;font-variation-settings:"SOFT" 50,"WONK" 0;overflow-x:hidden}
a{color:var(--turq-ink);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
strong{font-weight:640}
em{font-style:italic}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--card);color:var(--ink);padding:8px 12px;z-index:60}.skip-link:focus{left:8px}

/* top bar: slim, scene-coloured, out of the story */
.topbar{position:fixed;inset:0 0 auto 0;z-index:40;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 14px;padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));
  background:linear-gradient(rgba(3,10,16,.86),rgba(3,10,16,.0));color:#e8efec;font:500 14px/1 var(--sans);transition:background .3s}
.topbar.solid{background:#030a10}
.brand{display:flex;align-items:center;gap:9px;color:#e8efec;text-decoration:none;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.brand-mark{flex:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c8fff6,#3cc0c4 55%,#0b4a5a)}
.topnav{display:flex;gap:16px;margin-left:12px}.topnav a{color:#a8bcc0;text-decoration:none;white-space:nowrap}.topnav a:hover{color:#fff}
.spacer{flex:1}
.chip{color:#a8bcc0;text-decoration:none;padding:6px 7px;border-radius:6px}.chip[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
.icon-btn{flex:none;border:1px solid rgba(255,255,255,.18);background:transparent;color:#e8efec;border-radius:8px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer}
:root:not([data-theme="light"]) .i-moon{display:none}:root[data-theme="light"] .i-sun{display:none}
@media (max-width:980px){.topnav{display:none}}

/* ---------- the story: a pinned night sea, text passes over it ---------- */
.story{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--stage-bg);z-index:0}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .vign{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 60% 55%,rgba(0,0,0,0) 55%,rgba(2,8,13,.55) 100%)}
.stamp{position:absolute;right:max(84px,env(safe-area-inset-right));bottom:26px;text-align:right;color:#e8efec;pointer-events:none;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.stamp .d{font:400 italic clamp(26px,3.4vw,46px)/1 var(--serif);letter-spacing:-.01em;font-variation-settings:"SOFT" 100,"WONK" 1}
.stamp .s{font:500 12.5px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#a8bcc0;margin-top:8px}
.stamp .bar{display:block;margin:10px 0 0 auto;width:min(260px,40vw);height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.stamp .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3cc0c4,#c8fff6);transition:width .5s}
.credit{position:absolute;left:max(14px,env(safe-area-inset-left));bottom:10px;font:400 11px/1.3 var(--sans);color:rgba(232,239,236,.55);pointer-events:none}
.lens{position:absolute;width:min(34vmin,330px);aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 1px rgba(200,255,246,.55),0 0 0 7px rgba(3,10,16,.35),0 20px 60px rgba(0,0,0,.6);background:radial-gradient(circle at 40% 35%,#0f3a46,#041219 70%);overflow:hidden}
.lens.on{opacity:1;transform:scale(1)}
.lens canvas{position:absolute;inset:0;width:100%;height:100%}
.lens .cap{position:absolute;left:0;right:0;bottom:12%;text-align:center;font:500 11.5px/1.2 var(--sans);letter-spacing:.06em;color:#c8fff6}
.lens .sb{display:block;margin:5px auto 0;height:2px;background:#c8fff6}
.lens-line{position:absolute;height:1px;background:linear-gradient(90deg,rgba(200,255,246,0),rgba(200,255,246,.7));transform-origin:0 0;opacity:0;transition:opacity .8s;pointer-events:none}
.lens-line.on{opacity:1}
.lens-line::after{content:"";position:absolute;right:-4px;top:-3.5px;width:8px;height:8px;border-radius:50%;background:#e8fffa;box-shadow:0 0 8px #9ff3e7}

.steps{position:relative;z-index:2;margin-top:-100svh;pointer-events:none}
.step{min-height:96svh;display:flex;align-items:center;padding:0 max(24px,4vw)}
.step:first-child{min-height:100svh;align-items:flex-end;padding-bottom:13svh}
.step:last-child{min-height:112svh}
.step .card{pointer-events:auto;max-width:26rem;background:rgba(5,13,20,.74);color:#e8efec;padding:24px 26px 22px;border-radius:14px;border:1px solid rgba(200,255,246,.10);box-shadow:0 18px 60px rgba(0,0,0,.35)}
.step .card p{margin:0 0 .75em}.step .card p:last-child{margin-bottom:0}
.step .card h2{font:500 24px/1.2 var(--serif);margin:0 0 12px;letter-spacing:-.005em}
.step .card a{color:#8ff0e4}
.hero-card{max-width:40rem!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;text-shadow:0 2px 24px rgba(0,0,0,.65)}
.kicker{font:600 12.5px/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8ff0e4;margin:0 0 14px}
h1{font:400 clamp(40px,6.4vw,84px)/.98 var(--serif);margin:0 0 20px;letter-spacing:-.025em;font-variation-settings:"SOFT" 100,"WONK" 1;text-wrap:balance}
h1 em{font-style:italic;color:#9ff3e7}
.deck{font-size:clamp(18px,1.6vw,21px);line-height:1.52;color:#d8e6e3;margin:0;max-width:36rem}
.shared-line{margin-top:16px;font:500 15px/1.4 var(--sans);color:#c8fff6}
.scroll-cue{margin-top:28px;font:500 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#a8bcc0}
.scroll-cue::after{content:"";display:inline-block;width:1px;height:26px;margin-left:12px;vertical-align:middle;background:linear-gradient(#a8bcc0,transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(-4px);opacity:.4}50%{transform:translateY(4px);opacity:1}}

/* ---------- reading sections ---------- */
main{position:relative}
.sec{position:relative;z-index:3;background:var(--bg);padding:84px max(20px,4vw) 40px}
.sec>.in{max-width:76rem;margin:0 auto}
.sec.wide>.in{max-width:76rem}
.sec h2,.sec .lede,.sec>.in>p,.sec .pair,.sec .chart,.sec .tablewrap,.sec .sources{max-width:46rem}
.sec h2{font:400 clamp(30px,3.6vw,46px)/1.06 var(--serif);letter-spacing:-.018em;margin:0 0 18px;font-variation-settings:"SOFT" 100,"WONK" 1;text-wrap:balance}
.sec h2 em{color:var(--turq-ink)}
.sec .lede{font-size:20px;line-height:1.55;color:var(--muted);max-width:44rem}
.sec p{max-width:44rem}
.anchor{font:400 .5em var(--sans);margin-left:.4em;color:var(--faint);text-decoration:none;opacity:0;vertical-align:middle}
h2:hover .anchor,.anchor:focus{opacity:1}
.help{font:400 14.5px/1.5 var(--sans);color:var(--faint)}
.note{font:400 15px/1.55 var(--sans);color:var(--muted);border-left:2px solid var(--turq-2);padding-left:14px}

/* 23 summers */
.summers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 10px;padding:0;list-style:none}
.summers li{position:relative;border-radius:10px;overflow:hidden;background:#030a10;aspect-ratio:1.85;cursor:pointer;border:1px solid var(--rule)}
.summers li img{width:100%;height:100%;object-fit:cover;object-position:52% 60%;display:block;transition:transform .6s;filter:brightness(1.3) contrast(1.22) saturate(1.1)}
.summers li:hover img{transform:scale(1.04)}
.summers li .y{position:absolute;left:10px;top:8px;font:500 italic 22px/1 var(--serif);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.summers li .m{position:absolute;left:10px;right:10px;bottom:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.18)}
.summers li .m i{display:block;height:100%;border-radius:2px;background:#9ff3e7}
.summers li .t{position:absolute;right:10px;top:10px;font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#c8fff6;background:rgba(3,10,16,.6);padding:4px 6px;border-radius:4px}
.summers li button{all:unset;position:absolute;inset:0;cursor:pointer}
.summers li button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:10px}
.zoom{position:fixed;inset:0;z-index:70;background:rgba(2,7,11,.93);display:grid;place-items:center;padding:24px}
.zoom figure{margin:0;max-width:min(1400px,96vw)}
.zoom img{width:100%;height:auto;border-radius:10px}
.zoom figcaption{font:400 15px/1.5 var(--sans);color:#d8e6e3;margin-top:10px}
.zoom button{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(3,10,16,.7);color:#fff;font-size:22px;cursor:pointer}

/* the weave: 23 years x weeks */
.weave{margin:34px 0 0;overflow-x:auto}
.weave svg{display:block;width:100%;min-width:640px;height:auto}
.weave text{font:500 11px var(--sans);fill:var(--faint)}
.weave .yl{font:500 italic 12.5px var(--serif);fill:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:16px;font:400 13.5px/1.3 var(--sans);color:var(--faint);margin:8px 0 0}
.legend i{display:inline-block;width:22px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:6px;box-shadow:inset 0 0 0 1px rgba(168,188,192,.45)}

/* coasts and the place picker */
.coast{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:28px;align-items:start;margin-top:26px}
@media (max-width:900px){.coast{grid-template-columns:1fr}}
@media (max-width:1100px){.summers{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.summers{grid-template-columns:repeat(2,1fr);gap:8px}.summers li .y{font-size:17px}.summers li .t{font-size:9px;padding:3px 4px}.weave svg{min-width:0}.pt text.opt{display:none}}
.coastmap{position:relative;border-radius:12px;overflow:hidden;background:#030a10;border:1px solid var(--rule)}
.coastmap img{display:block;width:100%;height:auto;opacity:.92}
.coastmap svg{position:absolute;inset:0;width:100%;height:100%}
.pt{cursor:pointer}
.pt circle.ring{fill:transparent;stroke:none}
.pt.sel circle.ring{stroke:#fff;stroke-width:2.6;r:13px}
.pt:hover circle.ring,.pt:focus-visible circle.ring{stroke:rgba(255,255,255,.6);stroke-width:1.5}
.pt:focus{outline:none}
.pt text{font:600 19px var(--sans);fill:#fff;paint-order:stroke;stroke:#030a10;stroke-width:4px;pointer-events:none}
.picker label{display:block;font:600 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.picker select{width:100%;font:500 17px/1.2 var(--sans);padding:11px 12px;border-radius:9px;border:1px solid var(--rule);background:var(--card);color:var(--ink)}
.qbtns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.qbtns button{font:500 13.5px/1 var(--sans);padding:8px 10px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--muted);cursor:pointer}
.qbtns button:hover{color:var(--ink);border-color:var(--turq-2)}
.card-place{margin-top:18px;background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:18px 18px 14px}
.card-place h3{font:400 28px/1.1 var(--serif);margin:0 0 4px}
.card-place .where{font:400 13.5px/1.4 var(--sans);color:var(--faint);margin:0 0 12px}
.card-place .verdict{font-size:18px;line-height:1.5;margin:0 0 12px}
.card-place .cal{display:block;width:100%;height:auto;margin:6px 0 4px}
.card-place .cal text{font:500 10px var(--sans);fill:var(--faint)}
.card-place .best{margin:10px 0 0;border-radius:8px;overflow:hidden}
.card-place .best img{display:block;width:100%;height:auto}
.card-place .best p{font:400 13px/1.4 var(--sans);color:var(--faint);margin:6px 0 0}
.btn{font:600 14px/1 var(--sans);padding:10px 14px;border-radius:9px;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer}

/* side-by-side truth panels */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 8px}
@media (max-width:720px){.pair{grid-template-columns:1fr}}
.pair figure{margin:0}.pair img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--rule)}
.pair figcaption{font:400 14px/1.45 var(--sans);color:var(--muted);margin-top:8px}

/* tables, sources, share */
.tablewrap{overflow-x:auto;margin:18px 0}
table{border-collapse:collapse;font:400 15px/1.4 var(--sans);min-width:100%}
th,td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
th{font-weight:600;color:var(--muted)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.sources{font:400 15px/1.55 var(--sans);padding-left:1.2em}.sources li{margin:0 0 8px}
.share{margin:22px 0 0}
.share-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.share-label{font:600 13px/1 var(--sans);color:var(--faint);margin-right:4px}
.ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);color:var(--ink);background:transparent;cursor:pointer;text-decoration:none}
.ic:hover{border-color:var(--turq-2);color:var(--turq-ink)}
.share-msg{font:400 13px/1.3 var(--sans);color:var(--faint);min-height:1em;margin:6px 0 0}
.site-footer{position:relative;z-index:3;background:var(--bg);display:flex;flex-wrap:wrap;gap:18px;justify-content:center;padding:34px 20px 50px;font:400 14px/1.4 var(--sans);color:var(--faint);border-top:1px solid var(--rule)}
.site-footer a{color:var(--muted)}

/* reading rail */
.rail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;gap:2px;padding:6px 4px;opacity:0;transition:opacity .4s;pointer-events:none}
.rail.on{opacity:1;pointer-events:auto}
.rail-dot{position:relative;display:block;width:22px;height:20px}
.rail-dot .dot{position:absolute;right:7px;top:8px;width:4px;height:4px;border-radius:50%;background:rgba(232,239,236,.35)}
.rail-dot.cur .dot{background:#9ff3e7;width:6px;height:6px;right:6px;top:7px}
.rail-label{position:absolute;right:24px;top:2px;white-space:nowrap;font:500 12px/1 var(--sans);color:#e8efec;background:rgba(3,10,16,.85);padding:4px 7px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .2s}
.rail-dot:hover .rail-label,.rail-dot:focus .rail-label{opacity:1}
@media (max-width:760px){.rail{display:none}}

/* phone: the picture keeps the top 40% of the screen, the text scrolls below it and never sits on it */
@media (max-width:760px){
  body{font-size:17.5px}
  .stage{height:46.7vw;max-height:40svh;top:var(--top);z-index:5}
  .topbar,.topbar.solid{background:#030a10}
  .story{padding-top:var(--top)}
  .steps{z-index:1}
  .steps{margin-top:0}
  .step,.step:first-child,.step:last-child{min-height:34svh;padding:16px 16px 22px;align-items:flex-start}
  .credit .cl{display:none}
  .lens{width:26vmin}
  .sec,.site-footer{z-index:6}
  .scroll-cue{display:none}
  .pair{grid-template-columns:1fr 1fr;gap:8px}.pair figcaption{font-size:12.5px}
  .pt text{font-size:34px;stroke-width:6px}
  .pt circle:not(.ring){r:13px}
  .weave .yo{display:none}.weave .y5{font-size:21px}.weave .mo{font-size:20px}
  .step .card{max-width:none;background:var(--bg);border:0;box-shadow:none;padding:6px 2px;color:var(--ink)}
  :root[data-theme="light"] .step .card{color:var(--ink)}
  .step .card a{color:var(--turq-ink)}
  .hero-card{text-shadow:none}
  h1{font-size:40px}
  .deck{color:var(--muted)}
  .kicker{color:var(--turq-ink)}
  .stamp{bottom:8px;right:10px}.stamp .d{font-size:19px}.stamp .s{font-size:9.5px;margin-top:4px}.stamp .bar{width:96px;height:3px;margin-top:5px}
  .lens .cap{display:none}
  .credit{font-size:8.5px;bottom:3px;max-width:52%;color:rgba(232,239,236,.45)}
  .steps .step:first-child{padding-top:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* charts in the reading sections */
.chart{margin:26px 0 18px}
.chart svg{display:block;width:100%;max-width:640px;height:auto}
.chart text{font:500 12px var(--sans);fill:var(--faint)}
.chart .yl{font:500 italic 13px var(--serif);fill:var(--muted)}
.chart .ax{font:600 11.5px var(--sans);letter-spacing:.04em;fill:var(--muted)}
.chart line.g{stroke:var(--rule)}
.chart circle{fill:var(--turq);fill-opacity:.85;stroke:var(--bg);stroke-width:1.5}
.chart figcaption{font:400 14px/1.45 var(--sans);color:var(--muted);margin-top:6px}
#metoda .in{max-width:64rem}
#metoda .cols{columns:2 22rem;column-gap:42px}
#metoda .cols p{break-inside:avoid;font-size:16.5px;margin-top:0}

.pairfig{position:relative}
.pairfig svg{position:absolute;inset:0;width:100%;height:auto;pointer-events:none}
.pairfig svg text{font:600 22px var(--sans);fill:#fff;paint-order:stroke;stroke:#030a10;stroke-width:5px}
.pairfig svg text.t{fill:#9ff3e7}.pairfig svg text.g{fill:#d7d08a}
.pairfig svg circle{fill:#fff;stroke:#030a10;stroke-width:2}

.credit .cs{display:none}
@media (max-width:760px){.credit .cs{display:inline}}
/* map click: a small card at the point */
.pop{position:absolute;z-index:4;min-width:190px;max-width:250px;background:rgba(3,10,16,.95);color:#e8efec;border:1px solid rgba(200,255,246,.25);border-radius:10px;padding:10px 12px 10px;font:400 14px/1.4 var(--sans);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.pop h4{margin:0 0 3px;font:500 18px/1.15 var(--serif)}
.pop p{margin:0 0 8px;color:#c4d4d3}
.pop .x{position:absolute;top:4px;right:6px;border:0;background:none;color:#a8bcc0;font-size:18px;cursor:pointer;line-height:1}
.pop .go{font:600 13px/1 var(--sans);color:#9ff3e7;background:none;border:1px solid rgba(159,243,231,.4);border-radius:999px;padding:7px 10px;cursor:pointer}
@media (max-width:760px){.pop{left:8px!important;right:8px;bottom:8px;top:auto!important;max-width:none}}
.weave+.legend{margin-top:4px}
.card-place .cal text.hot{fill:#9ff3e7}
