/* THE WEATHER CARD (wxcard.js draws it, wxhero.js brings it to life).
 *
 * The card keeps its own palette in every theme: it is a window onto the
 * sky over the place, drawn at night and by day on the same dark glass, so
 * its tokens are declared on the card and nothing outside it can change
 * them. What the theme decides is the ground the card stands on: the blue
 * hour on the light page, the page's own card colour on the dark one, and
 * black on black.
 */
.wxc{ --bg:#06080d; --bg-panel:#0e131c; --bg-panel-raised:#141a26;
  --border:rgba(255,255,255,.08); --text:#e6ecf5; --text-dim:#8894a8; --text-faint:#5a6478;
  --accent:#4fa8ff; --accent-warm:#ffb648; --accent-cold:#7dd3fc; --good:#34d399; --warn:#fbbf24; --bad:#f87171;
  --inset:clamp(16px,4vw,40px);
  --wx-ground:#0d2440;
  color:var(--text); font-family:var(--sans); }
html[data-theme="dark"] .wxc{ --wx-ground:#101b2b; }
html[data-theme="black"] .wxc{ --wx-ground:#000000; }

  .wxc{ background:transparent; border:0; border-radius:0; overflow:hidden; box-shadow:none; min-width:0; width:100%; }
  .wxc-in{ display:flex; flex-direction:column; }
  .wxc-eyebrow{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
                padding:14px var(--inset) 0; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .wxc-eyebrow .eb{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wxc-dots{ display:inline-flex; gap:7px; flex:0 0 auto; }
  .wxc-dots .dot{ width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.26); transition:background .2s, transform .2s; }
  .wxc-dots .dot.on{ background:var(--accent); transform:scale(1.15); }
  .wxc-dots .dot:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .wxc-in{ transition:opacity .32s ease; }
  .wxc-in.out, .wxc-in.in{ opacity:0; }
  @media (prefers-reduced-motion: reduce){ .wxc-in{ transition:none; } }
  .wxc-eyebrow b{ color:var(--text); font-weight:700; }
  /* the card as the page's heading: the place's name large, its kind and
     state under it, in the reading case */
  .wxc-eyebrow .eb:has(.wxc-h1){ white-space:normal; overflow:visible; text-transform:none; letter-spacing:0; }
  .wxc-h1{ margin:0; font-size:clamp(28px, 6.4vw, 44px); line-height:1.08; font-weight:750; letter-spacing:-.02em; color:var(--text); text-transform:none; }
  .wxc-sub{ display:block; margin-top:6px; font-size:14px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--text-dim); line-height:1.4; }
  .wxc-sub .ev{ font-weight:650; }
  .wxc-eyebrow .sep{ color:var(--text-dim); margin:0 2px; }
  .wxc-eyebrow .ev{ color:var(--warn); }
  .wxc-eyebrow .tx{ font-family:var(--mono); text-transform:none; letter-spacing:0; color:var(--text-faint); margin-left:6px; }
  .wxs{ display:flex; align-items:center; gap:12px; width:100%; padding:6px var(--inset) 9px; border:0; background:transparent;
        color:var(--text); font:inherit; text-align:left; cursor:pointer; min-height:52px; }
  .wxs:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:12px; }
  /* its height from the first paint (owner, Oct 10: "under 1 sec, full
     load"): until its picture was painted the canvas stood at a canvas's
     own 150 pixels, and the card shrank by 94 under the reader, the map
     and the rest of the front door moving up with it; and its width too
     (Oct 13, read frame by frame on the live front door): a canvas keeps
     its own 2 to 1 shape as its least width, so the slot stood 112 wide
     until its picture came and the words beside it moved 56 to the left */
  .wxs-ic{ flex:0 0 56px; width:56px; height:56px; border-radius:10px; background:0; border:0; box-shadow:none; }
  .wxs-t{ font-size:30px; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1; flex:0 0 auto; }
  .wxs-t i{ font-style:normal; font-weight:300; font-size:18px; color:color-mix(in srgb, var(--text) 70%, transparent); vertical-align:top; margin-left:1px; }
  .wxs-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
  .wxs-txt b{ font-size:13px; font-weight:500; color:color-mix(in srgb, var(--text) 90%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wxs-txt span{ font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wxs-go{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:7px 12px; border-radius:999px;
           font-size:12px; font-weight:650; color:#0a1a2b; background:rgba(255,255,255,.92); letter-spacing:.01em; transition:.15s; }
  .wxs:hover .wxs-go{ background:#fff; }
  .wxs-go svg{ width:13px; height:13px; transition:transform .2s; }
  .wxs-go .close{ display:none; }
  .wxc.open .wxs-go .close{ display:inline; } .wxc.open .wxs-go .open{ display:none; }
  .wxc.open .wxs-go svg{ transform:rotate(180deg); }
  .wxs-note{ margin:0; padding:9px var(--inset) 12px; font-size:12.5px; line-height:1.5; color:var(--text-dim); }
  .wxx{ padding:0 var(--inset) 12px; display:flex; flex-direction:column; gap:10px; max-width:1180px; margin:0 auto; width:100%; box-sizing:border-box; }
  .wxc-foot{ margin:0; font-size:11px; line-height:1.5; color:var(--text-faint); padding:0 4px; }
  .wxc .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .wxh{ position:relative; overflow:hidden; border-radius:12px; border:1px solid var(--border);
        background:linear-gradient(180deg,#0d1622,#070b12); }
  .wxh-scene{ position:absolute; inset:0; pointer-events:none; }
  .wxh-scene canvas{ display:block; width:100%; height:100%; object-fit:cover; }
  .wxh-scrim1{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#070b1233,#070b12b3,#070b12ee); }
  .wxh-scrim2{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,#070b12cc,#070b1266,transparent); }
  .wxh-body{ position:relative; padding:10px 16px 8px; }
  .wxh-temp{ display:flex; align-items:flex-start; line-height:1; }
  .wxh-temp .t{ font-size:46px; font-weight:600; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--text); }
  .wxh-temp .deg{ font-size:22px; font-weight:300; color:color-mix(in srgb, var(--text) 70%, transparent); margin:3px 0 0 1px; }
  .wxh-temp .hl{ margin:6px 0 0 12px; font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--text-dim); }
  .wxh-temp .hi{ color:color-mix(in srgb, var(--text) 85%, transparent); }
  .wxh-temp .sl{ margin:0 4px; color:color-mix(in srgb, var(--text-dim) 50%, transparent); }
  .wxh-line{ margin-top:4px; font-size:12.5px; font-variant-numeric:tabular-nums; }
  .wxh-line .c{ font-weight:500; color:color-mix(in srgb, var(--text) 90%, transparent); }
  .wxh-line .dot{ margin:0 6px; color:color-mix(in srgb, var(--text-dim) 40%, transparent); }
  .wxh-line .d{ color:var(--text-dim); }
  .wxh-line .v{ color:color-mix(in srgb, var(--text) 85%, transparent); }
  .wxh-narr-w{ margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.05); }
  .wxh-day{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
  .wxh-narr{ font-size:12px; line-height:1.625; color:var(--text-dim); }
  .wxh-narr.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .wxh-words p{ margin:0 0 6px; }
  .wxh-words p:last-child{ margin-bottom:0; }
  .wxh-words b{ color:var(--text); font-weight:600; }
  .wxh-words a{ color:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 45%, transparent); text-underline-offset:2px; }
  .wxh-words a:hover{ color:var(--text); }
  .wxh-words.clamp{ display:block; -webkit-line-clamp:unset; overflow:visible; }
  .wxh-words.clamp p:not(:first-child){ display:none; }
  .wxh-words.clamp p:first-child{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .wxh-more{ margin-top:2px; padding:0; border:0; background:none; font:inherit; font-size:11px; font-weight:500; cursor:pointer;
             color:color-mix(in srgb, var(--text) 70%, transparent); transition:color .15s; }
  .wxh-more:hover{ color:var(--text); }
  .wxh-legend{ margin-top:6px; }
  .wxh-legend:empty{ display:none; }
  .wxh-notes{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
  .wxh-note{ display:flex; align-items:center; gap:4px; padding:2px 6px; border-radius:999px; border:1px solid var(--border);
             background:rgba(0,0,0,.2); color:var(--text-dim); font:inherit; font-size:9.5px; font-weight:500; line-height:1; cursor:pointer; transition:color .15s; }
  .wxh-note:hover{ color:color-mix(in srgb, var(--text) 80%, transparent); }
  .wxh-note[aria-expanded="true"]{ border-color:color-mix(in srgb, var(--text) 25%, transparent); background:color-mix(in srgb, var(--text) 10%, transparent); color:var(--text); }
  .wxh-note span{ max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wxh-note-d{ margin:4px 0 0; font-size:10.5px; line-height:1.45; color:var(--text-dim); }
  .wxh-chips{ margin-top:8px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; border-top:1px solid rgba(255,255,255,.07); padding-top:6px; }
  .wxh-chip{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; }
  .wxh-chip .v{ font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1; }
  .wxh-chip .l{ font-size:9.5px; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:color-mix(in srgb, var(--text-dim) 75%, transparent);
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .wxh-alert{ margin:-14px -16px 10px; border-radius:12px 12px 0 0; overflow:hidden; border-bottom:1px solid color-mix(in srgb, var(--ac) 33%, transparent);
              background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 15%, transparent), transparent 70%); }
  .wxh-alert-b{ width:100%; display:flex; align-items:flex-start; gap:10px; padding:10px 16px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
  .wxh-dot{ position:relative; margin-top:3px; flex:0 0 8px; width:8px; height:8px; display:flex; }
  .wxh-dot .ping{ position:absolute; inset:0; border-radius:50%; background:var(--ac); opacity:.7; }
  .wxh-dot .core{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--ac); }
  @media (prefers-reduced-motion: no-preference){
    .wxh-dot .ping{ animation:wxping 1s cubic-bezier(0,0,.2,1) infinite; }
    @keyframes wxping{ 75%,100%{ transform:scale(2); opacity:0; } }
  }
  .wxh-alert-t{ flex:1 1 auto; min-width:0; display:block; }
  .wxh-alert-t .row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .wxh-alert-t .ev{ font-size:13px; font-weight:600; color:var(--text); line-height:1.25; }
  .wxh-alert-t .tag{ font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.025em; padding:1px 6px; border-radius:4px;
                     color:var(--ac); background:color-mix(in srgb, var(--ac) 13%, transparent); }
  .wxh-alert-t .where{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px;
                       font-size:11.5px; line-height:1.375; color:var(--text-dim); }
  .wxh-alert-t .more{ display:block; margin-top:2px; font-size:10px; color:var(--text-faint); }
  .wxh-alert-go{ margin:-4px 0 0; padding:0 16px 9px 34px; font-size:11.5px; line-height:1.4; color:var(--text-faint); }
  .wxh-alert-go a{ color:var(--text); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--ac) 70%, transparent); text-underline-offset:3px; }
  .wxh-alert-d{ padding:10px 16px 12px; border-top:1px solid color-mix(in srgb, var(--ac) 20%, transparent); font-size:11.5px; line-height:1.625;
                color:var(--text-dim); white-space:pre-line; max-height:192px; overflow-y:auto; }
  @media (max-width:520px){
    .wxs{ gap:9px; padding:5px var(--inset) 8px; }
    .wxc-eyebrow{ padding-top:12px; }
    .wxs-go .open, .wxs-go .close{ display:none; }
    .wxc.open .wxs-go .close{ display:none; }
    .wxs-go{ padding:7px; }
    .wxs-t{ font-size:26px; }
    .wxh-chips{ gap:4px; }
  }
.wxw{ border-radius:12px; border:1px solid var(--border); overflow:hidden; background:rgba(0,0,0,.2); }
.wxw-chart{ position:relative; }
.wxw-chart svg{ position:absolute; inset:0; width:100%; height:100%; }
.wxw-grid{ display:grid; grid-template-columns:repeat(var(--cols,7),minmax(0,1fr)); }
.wxw-div{ position:absolute; inset:0; }
.wxw-div .l{ border-left:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.wxw-highs{ position:absolute; inset:0; pointer-events:none; }
.wxw-highs div{ position:relative; }
.wxw-highs span{ position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
                 font-size:calc(10px * var(--ts,1)); line-height:1.1; font-weight:600;
                 font-variant-numeric:tabular-nums; color:color-mix(in srgb, var(--text) 85%, transparent); }
.wxw-highs span.lo-l{ font-size:calc(9.5px * var(--ts,1)); font-weight:500; color:var(--text-faint); }
.wxw-pts{ position:absolute; inset:0; pointer-events:none; }
.wxw-pts div{ position:relative; }
.wxw-pt{ position:absolute; left:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(7,11,18,.9); }
.wxw-pt.hi{ background:var(--warn); }
.wxw-pt.lo{ background:var(--accent-cold); }
.wxw-pt.now{ width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--accent);
             box-shadow:0 0 0 1.5px rgba(7,11,18,.9); }
.wxw-tiles{ border-bottom:1px solid var(--border); }
.wxw-tile{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 2px; min-width:0; cursor:pointer; transition:background .2s; -webkit-tap-highlight-color:transparent; }
.wxw-tile:hover{ background:rgba(255,255,255,.04); }
.wxw-tile.on{ background:rgba(79,168,255,.12); box-shadow:inset 0 2px 0 var(--accent); }
.wxw-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.wxw-tile.now{ background:rgba(255,255,255,.03); }
.wxw-tile.now .wd{ color:var(--accent); }
.wxw-tile.now .lo .fl{ font-size:calc(8.5px * var(--ts,1)); color:var(--text-faint); margin-right:2px; letter-spacing:.02em; }
.wxw-tile[data-l="1"]{ border-left:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.wxw-tile .wd{ font-size:calc(11px * var(--ts,1)); font-weight:600; color:var(--text); line-height:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wxw-tile .md{ font-size:calc(9.5px * var(--ts,1)); color:var(--text-faint); line-height:1; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wxw-tile canvas.ic{ margin:2px 0; }
.wxw-tile .hl{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap;
               gap:0 4px; line-height:1; max-width:100%; min-width:0; }
.wxw-tile .h{ font-size:calc(14px * var(--ts,1)); font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.wxw-tile .lo{ font-size:calc(11px * var(--ts,1)); font-variant-numeric:tabular-nums; color:var(--text-faint); }
.wxw-tile .dets{ display:flex; flex-direction:column; align-items:center; gap:3px; margin-top:2px; width:100%; min-width:0; }
.wxw-det{ height:calc(11px * var(--ts,1)); line-height:1; font-size:calc(9.5px * var(--ts,1)); font-variant-numeric:tabular-nums; color:var(--text-dim); }
.wxw-det .sfx{ color:var(--text-faint); margin-left:1px; }
.wxw-tile canvas.moon{ display:block; }
/* the ground, which the card's own rule above leaves transparent */
.wxc{ background:var(--wx-ground); padding-bottom:clamp(12px,1.6vw,20px); }
.wxc-eyebrow a{ color:var(--accent); text-decoration:none; font-weight:650; text-transform:none; letter-spacing:0; font-size:12.5px; white-space:nowrap; }
.wxc-eyebrow a:hover{ text-decoration:underline; }
.wxc-foot a{ color:var(--accent); text-decoration:none; }
.wxc-foot a:hover{ text-decoration:underline; }
/* a page may carry a rule of its own for a bare .day (the place page's old
   week tiles did); the card's day face is the hero, and keeps the hero's */
.wxc .wxh.day{ padding:0; text-align:left; background:linear-gradient(180deg,#0d1622,#070b12); min-width:0; }
/* BLACK IS BLACK: on the black ground nothing paints a light ground but a
   pressed control, so the strip's control is drawn as an outline there */
html[data-theme="black"] .wxs-go, html[data-theme="black"] .wxs:hover .wxs-go{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 70%, transparent); }
/* an eyebrow that names an alert wraps rather than cut the alert's name:
   the alert is why the card is there */
.wxc-eyebrow .eb:has(.ev){ white-space:normal; overflow:visible; line-height:1.45; }
.wxc-eyebrow:has(.ev){ align-items:flex-start; }
/* the alert's pulse is a mark, drawn as the alerts page draws its swatches
   (on a layer of its own), so no theme reads it as a ground */
.wxh-dot .ping, .wxh-dot .core{ background:none; }
.wxh-dot .ping::before, .wxh-dot .core::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--ac); }
.wxh-dot .core{ position:relative; }

/* ── THE LIGHT THEME (owner, Sep 27: "when the white site option is selected
   our new addition doesnt go white") ───────────────────────────────────
   On the light page the card is light: the page's ink on the page's card
   colour, the sky scene behind the hero seen through a pale veil so the
   words stand on it, and the week on a pale sky so its white clouds still
   read. The colours carrying meaning (the highs, the lows, the chance of
   rain, the alert) are deepened to hold their contrast on white. */
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc{
  --text:#17222f; --text-dim:#51606f; --text-faint:#6c7682; --border:rgba(23,34,47,.13);
  --accent:#1470c0; --accent-cold:#1b86c4; --warn:#c07a00; --bad:#c62828; --good:#1b8f5a;
  --wx-ground:var(--card, #ffffff); --wx-panel:#e6eef7; }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh,
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh.day{ background:linear-gradient(180deg,#dbe7f4,#eef3f9); }
/* the veil is thin where the sky is and heavier only under the words
   (owner, Sep 28: "the sun can hardly be seen through that filter"): it
   ran 70% to 95% down the card and 90% across it, which left the scene a
   faint ghost; the dark card's own veil starts at 20% */
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-scrim1{ background:linear-gradient(180deg,#f6f9fc1f,#f6f9fc80,#f6f9fcd9); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-scrim2{ background:linear-gradient(90deg,#f6f9fcb3,#f6f9fc4d,#f6f9fc00); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-narr-w{ border-top-color:rgba(23,34,47,.1); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-chips{ border-top-color:rgba(23,34,47,.12); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh-note{ background:rgba(255,255,255,.6); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw{ background:var(--wx-panel); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-tile:hover{ background:rgba(23,34,47,.04); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-tile.now{ background:rgba(23,34,47,.05); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-tile.on{ background:rgba(20,112,192,.12); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-pt,
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-pt.now{ box-shadow:0 0 0 1.5px var(--wx-panel); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxs-go,
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxs:hover .wxs-go{ background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--text) 55%, transparent); }
/* a sun's glow reaches the edge of its small square picture; on the light
   panel that edge showed as a pale square, so the small scenes fade out
   round their subject */
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxw-tile canvas.ic,
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxs-ic{
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%); mask-image:radial-gradient(circle at 50% 50%, #000 52%, transparent 71%); }
/* the strip's preview drawn from the stage has no edge of its own (owner,
   Sep 30: "Our small icon area cant have borders, it is to be basically
   embedded so it blends in to the card", and "No circle"): it paints no
   sky of its own (wx-stage.js, keyed), so it needs no frame and no mask */
.wxc .wxs-ic.staged, html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxs-ic.staged{ border-radius:0;
  -webkit-mask-image:none; mask-image:none; }
/* the header above a place's card keeps only its crumb, tight to the card */
.head.wx-slim{ border-bottom:0; }
.head.wx-slim .head-in{ padding-block:12px 0; }
/* the crumb starts where the card's title starts, at the card's own inset */
.head.wx-slim .wrap.head-in{ max-width:none; padding-inline:clamp(16px,4vw,40px); }
/* ON THE STAGE the sky is the picture (wx-stage.js): the scrims darken only
   where the words stand, the left and the foot behind the chips, and leave
   the right third, where the Sun or the Moon is framed, as the sky is */
.wxh.staged .wxh-scrim1{ background:linear-gradient(180deg,#070b1200 0%,#070b121f 45%,#070b1299 100%); }
.wxh.staged .wxh-scrim2{ background:linear-gradient(90deg,#070b12a6 0%,#070b1259 42%,#070b1200 68%); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh.staged .wxh-scrim1{ background:linear-gradient(180deg,#f6f9fc00 0%,#f6f9fc1a 45%,#f6f9fc99 100%); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh.staged .wxh-scrim2{ background:linear-gradient(90deg,#f6f9fcb3 0%,#f6f9fc59 42%,#f6f9fc00 68%); }
/* cloud is far brighter than open sky, and a storm's body far darker: under
   either the words need more behind them */
.wxh.staged.clouded .wxh-scrim1{ background:linear-gradient(180deg,#070b1226 0%,#070b1240 45%,#070b12b3 100%); }
.wxh.staged.clouded .wxh-scrim2{ background:linear-gradient(90deg,#070b12cc 0%,#070b1285 45%,#070b1200 74%); }
html[data-theme="dark"] .wxh.staged.clouded, html[data-theme="black"] .wxh.staged.clouded{ text-shadow:0 1px 3px #070b12e6, 0 0 12px #070b1299; }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh.staged.clouded .wxh-scrim1{ background:linear-gradient(180deg,#f6f9fc26 0%,#f6f9fc40 45%,#f6f9fcb3 100%); }
html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh.staged.clouded .wxh-scrim2{ background:linear-gradient(90deg,#f6f9fcd9 0%,#f6f9fc8c 45%,#f6f9fc00 74%); }
/* on a narrow card the words run the whole width: the scrim follows them */
@media (max-width: 640px){
  .wxh.staged .wxh-scrim2{ background:linear-gradient(90deg,#070b12a6 0%,#070b1270 60%,#070b1240 100%); }
  html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh.staged .wxh-scrim2{ background:linear-gradient(90deg,#f6f9fcb3 0%,#f6f9fc70 60%,#f6f9fc40 100%); }
  /* the words run the whole width: under cloud the sky shows through
     behind them, and a soft shadow keeps them readable (owner, Sep 30: a
     near black card, "cant tell what is happening") */
  .wxh.staged.clouded .wxh-scrim2{ background:linear-gradient(90deg,#070b1299 0%,#070b1266 60%,#070b1240 100%); }
  html:not([data-theme="dark"]):not([data-theme="black"]) .wxc .wxh.staged.clouded .wxh-scrim2{ background:linear-gradient(90deg,#f6f9fcd9 0%,#f6f9fcad 60%,#f6f9fc85 100%); }
}