/* ==========================================================================
   Lamu weather: the year wheel, Mr. Nippers' beach and the month card.
   Lives in the repo's weather/ folder, published to /assets/lamu-weather/.
   Uses the site's own tokens from style.css (paper, ocean, coral, Fraunces,
   Anonymous Pro) with fallbacks, so it matches whatever the export sets.
   ========================================================================== */
.lw{
  --lw-paper:var(--paper,#f4ece0);
  --lw-paper-soft:var(--paper-soft,#f9f3ea);
  --lw-paper-deep:var(--paper-deep,#ebdfcc);
  --lw-ink:var(--ink,#1f1a14);
  --lw-ink-soft:var(--ink-soft,#5a4f40);
  --lw-mute:var(--ink-mute,#8a7c69);
  --lw-line:var(--line,rgba(31,26,20,.18));
  --lw-ocean:var(--ocean,#39525a);
  --lw-ocean-deep:var(--ocean-deep,#233a47);
  --lw-coral:var(--coral,#e0a088);
  --lw-coral-deep:var(--coral-deep,#c75a3c);
  --lw-amber:var(--amber,#d8a25c);
  --lw-sage:var(--sage,#6f8773);
  --lw-sand:var(--sand,#e1cdb0);
  /* seasons */
  --kaskazi:var(--lw-amber);
  --masika:var(--lw-sage);
  --kusi:var(--lw-ocean);
  --vuli:var(--lw-coral);
  /* scene */
  --sky:#e6efec;--sun:#e8b45e;--cloud:#fbfcfb;--sail:#fbf6ee;--hull:#6b4f36;
  --sea-cool:#bcd6d2;--sea-warm:#4f8a86;--rain:#6f8797;
  --crab:#de7a48;--crab-light:#f2a57a;--scarf:#f6e7cc;
  --display:var(--font-display,'Fraunces',Georgia,serif);
  --body:var(--font-body,'Anonymous Pro',ui-monospace,monospace);
  color:var(--lw-ink);font-family:var(--body);
}
.lw *,.lw *::before,.lw *::after{box-sizing:border-box}
.lw[data-lamu-weather="full"]{min-height:640px}
@media (max-width:860px){.lw[data-lamu-weather="full"]{min-height:1180px}}

.lw-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.lw-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--lw-coral-deep)}
.lw-controls{display:flex;gap:8px;flex-wrap:wrap}
.lw-btn{font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1px solid var(--lw-ocean);background:transparent;color:var(--lw-ocean);cursor:pointer;line-height:1.2}
.lw-btn:hover{background:var(--lw-ocean);color:var(--lw-paper)}
.lw-btn[aria-pressed="true"]{background:var(--lw-ocean-deep);border-color:var(--lw-ocean-deep);color:var(--lw-paper)}
.lw :focus-visible{outline:2px solid var(--lw-coral-deep);outline-offset:3px}

.lw-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:860px){.lw-stage{grid-template-columns:1fr;gap:24px}}
.lw-wheel{width:100%;max-width:520px;margin:0 auto;display:block;aspect-ratio:1/1;touch-action:manipulation}
.lw-wheel text{font-family:var(--body);fill:var(--lw-ink)}
.lw-seg{cursor:pointer}
.lw-wheel text.lw-big{font-family:var(--display);font-weight:300}
.lw-mlabel{font-size:15px;letter-spacing:.12em;fill:var(--lw-mute);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.lw-mlabel.on{fill:var(--lw-ink);font-weight:700}
.lw-slabel{font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;fill:var(--lw-paper-soft)}
.lw-rot,.lw-sel{transition:transform 1.1s cubic-bezier(.5,0,.2,1);transform-box:view-box;transform-origin:300px 300px}
.lw-streak{stroke:var(--lw-ocean);stroke-width:1.4;stroke-linecap:round;opacity:.3;animation:lw-drift var(--dur,3s) linear infinite}
@keyframes lw-drift{from{transform:translateX(-150px)}to{transform:translateX(150px)}}
.lw-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin-top:14px;font-size:12px;color:var(--lw-mute)}
.lw-legend span{display:inline-flex;align-items:center;gap:8px}
.lw-legend i{display:inline-block}

.lw-card{background:var(--lw-paper-soft);border:1px solid var(--lw-line);border-radius:18px;overflow:hidden;min-width:0}
.lw-scene-wrap{position:relative;container-type:inline-size;overflow:hidden;cursor:default}
.lw-scene{display:block;width:100%;height:auto;background:var(--sky)}
.lw-body{padding:22px 26px 26px}
@media (max-width:560px){.lw-body{padding:18px 18px 22px}}
.lw-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lw-ink-soft)}
.lw-tag i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.lw-month{font-family:var(--display);font-weight:300;font-size:clamp(2rem,1.6rem + 1.4vw,2.8rem);line-height:1.1;margin:6px 0 0}
.lw-verdict{font-size:var(--text-base,1rem);line-height:1.7;margin:10px 0 0;min-height:5.1em;max-width:60ch}
.lw-turn{margin:8px 0 0;font-family:var(--display);font-style:italic;color:var(--lw-ocean)}
.lw-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;margin-top:18px;padding-top:16px;border-top:1px solid var(--lw-line)}
.lw-stat small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lw-mute)}
.lw-stat b{display:block;font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.3;font-variant-numeric:lining-nums tabular-nums}
.lw-stat em{font-style:normal;font-size:13px;color:var(--lw-mute)}
.lw-good{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.lw-good span{font-size:12px;padding:4px 12px;border:1px solid var(--lw-line);border-radius:20px;background:var(--lw-paper)}
.lw-pack{margin:16px 0 0;font-family:var(--display);font-style:italic}
.lw-pack b{font-family:var(--body);font-style:normal;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lw-coral-deep);margin-right:6px}
.lw-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.lw-actions a{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border-radius:999px;border:1px solid var(--lw-ocean-deep);text-decoration:none;line-height:1.2}
.lw-actions a.lw-primary{background:var(--lw-ocean-deep);color:var(--lw-paper)}
.lw-actions a.lw-secondary{color:var(--lw-ocean-deep)}
.lw-actions a:hover{opacity:.88}

.lw-pills{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:22px}
@media (max-width:560px){.lw-pills{grid-template-columns:repeat(6,1fr)}}
.lw-pill{font-family:var(--body);background:none;border:1px solid var(--lw-line);border-bottom:3px solid var(--c);border-radius:4px;padding:9px 0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--lw-ink-soft);cursor:pointer}
.lw-pill[aria-pressed="true"]{color:var(--lw-ink);background:var(--lw-paper-soft);font-weight:700}

/* teaser on the home page: no stats, lighter chrome */
.lw[data-lamu-weather="teaser"] .lw-verdict{min-height:3.4em}
.lw[data-lamu-weather="teaser"] .lw-pills{margin-top:16px}

/* scene animation */
.lw-rays{animation:lw-spin 30s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes lw-spin{to{transform:rotate(360deg)}}
.lw-cloud{animation:lw-float 9s ease-in-out infinite alternate}
@keyframes lw-float{from{transform:translateX(-10px)}to{transform:translateX(14px)}}
.lw-wave{animation:lw-roll var(--wd,6s) linear infinite}
@keyframes lw-roll{from{transform:translateX(0)}to{transform:translateX(-80px)}}
.lw-drop{stroke:var(--rain);stroke-width:2;stroke-linecap:round;animation:lw-fall 1.1s linear infinite}
@keyframes lw-fall{from{transform:translateY(-8px);opacity:0}20%{opacity:1}to{transform:translateY(40px);opacity:0}}
.lw-dhow{animation:lw-rock var(--rd,4s) ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes lw-rock{from{transform:rotate(calc(var(--ra,2deg) * -1))}to{transform:rotate(var(--ra,2deg))}}
.lw-voyage{animation:lw-voyage 60s linear infinite}
@keyframes lw-voyage{from{transform:translateX(-50px)}to{transform:translateX(460px)}}
.lw-pennant{animation:lw-flutter .5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:right center}
@keyframes lw-flutter{to{transform:scaleY(.5) skewY(8deg)}}
.lw-bunting{animation:lw-sway 3s ease-in-out infinite alternate;transform-box:view-box;transform-origin:200px 0}
@keyframes lw-sway{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
.lw-bird{animation:lw-glide 16s linear infinite}
@keyframes lw-glide{from{transform:translateX(-60px)}to{transform:translateX(460px)}}
.lw-flap{animation:lw-flap .6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes lw-flap{to{transform:scaleY(.4)}}
.lw-storm{animation:lw-storm 18s linear infinite}
@keyframes lw-storm{0%,12%{transform:translateX(-260px)}88%,100%{transform:translateX(440px)}}
.lw-rainbow{opacity:0;animation:lw-rainbow 18s ease-in-out infinite}
@keyframes lw-rainbow{0%,66%{opacity:0}76%,90%{opacity:.5}100%{opacity:0}}

/* Mr. Nippers on his stroll */
.lw-walk{position:absolute;left:38%;bottom:-1.5%;width:20%;aspect-ratio:1/1;cursor:pointer;animation:lw-stroll 18s ease-in-out infinite}
@keyframes lw-stroll{0%,10%{transform:translateX(0)}32%,44%{transform:translateX(130%)}66%,76%{transform:translateX(-80%)}94%,100%{transform:translateX(0)}}
.lw-walk mr-nippers-beach{display:block;position:relative;--np-size:80px;--np-size:20cqw}
.lw-kit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lw-bubble{position:absolute;left:50%;top:10px;transform:translateX(-50%);margin:0;max-width:min(80%,320px);background:var(--lw-paper-soft);color:var(--lw-ink);font-family:var(--display);font-style:italic;font-size:15px;line-height:1.35;padding:9px 14px;border-radius:14px;box-shadow:0 4px 14px rgba(31,26,20,.14);text-align:center;z-index:2}
.lw-bubble::after{content:'';position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--lw-paper-soft);transform:translateX(-50%) rotate(45deg)}
.lw-bubble.lw-pop{animation:lw-pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes lw-pop{from{transform:translateX(-50%) scale(.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}

/* off screen: everything rests, so the page stays smooth and phones stay cool */
.lw.lw-paused *{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .lw *{animation:none!important}
  .lw .lw-rot,.lw .lw-sel{transition:none}
  .lw .lw-voyage{transform:translateX(120px)}
}

/* static month table on the weather page: rows become clickable once the script runs */
.lw-table tr[data-month]{cursor:pointer}
.lw-table tr.lw-on{background:var(--lw-paper-soft,#f9f3ea)}
.lw-table th,.lw-table td{padding:10px 12px;border-bottom:1px solid var(--line,rgba(31,26,20,.18));text-align:left;white-space:nowrap;font-size:var(--text-sm,.9rem)}
.lw-table thead th{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute,#8a7c69);font-weight:400}
.lw-table tbody th{font-family:var(--font-display,'Fraunces',serif);font-weight:400;font-size:var(--text-base,1rem)}
.lw-f{color:var(--ink-mute,#8a7c69);font-size:.85em}
.lw-faq details{border-bottom:1px solid var(--line,rgba(31,26,20,.18));padding-block:18px}
.lw-faq details:first-child{border-top:1px solid var(--line,rgba(31,26,20,.18))}
.lw-faq summary{cursor:pointer;font-family:var(--font-display,'Fraunces',serif);font-size:var(--text-lg,1.25rem);font-weight:300;list-style:none;display:flex;justify-content:space-between;gap:16px}
.lw-faq summary::-webkit-details-marker{display:none}
.lw-faq summary::after{content:'+';font-family:var(--font-body,monospace);color:var(--coral-deep,#c75a3c)}
.lw-faq details[open] summary::after{content:'\2013'}
.lw-faq p{margin-top:10px;max-width:68ch}