/* Home: the evening hero and the paper-island map section.
   From the approved board design/home-effects/v5/index.html (variant "Evening", map "M1+"), 3 Oct 2026.
   Values are the board's; only the class names are scoped (.hx for the hero, .msec for the map).
   Behaviour is in /home/home.js; without it the hero is a still evening frame. */

/* ============ hero ============ */
.hx{--t:.85;--curve:clamp(44px,7.64vw,110px);--band:100px;
  /* where the dusk sits before home.js measures the text (no script, or before it runs) */
  --cx:50%;--cy:46%;--rx:650px;--ry:380px;--wt:150px;--wb:560px;
  /* white text and dark see-through chips at every moment; only the navy wash behind them follows the light */
  --ink1:#fff;--ink2:#e1e9f2;--ink3:#d3deea;--chipc:#fff;--chipbg:rgba(9,27,50,.5);--chipbgh:rgba(9,27,50,.72);--chipb:rgba(255,255,255,.3);
  --sunmax:.42;--lwg:rgba(255,184,60,.75);
  /* the navy wash behind the text (Kenneth, 3 Oct 2026: the original navy, as light as it can be): rgb(12 32 60)
     by day to rgb(8 24 46) by evening. Peak opacity eases from --wad by day to --wae by evening (1 - t*t: the
     light sky by day needs the most, the dark evening sky the least), ellipse --wsx/--wsy times the text box.
     The values are the measured minimum for 4.5:1 or better under every text at every light step
     (design/home-effects/v5/site-shots/haze2/check.mjs; was .9 to .8 at 1.32 x 1.3). */
  --wad:.71;--wae:.3;--wsx:1;--wsy:1.3;
  --wa:calc(var(--wae) + (var(--wad) - var(--wae)) * (1 - var(--t) * var(--t)));
  --wr:calc(12 - 4 * var(--t));--wg:calc(32 - 8 * var(--t));--wbl:calc(60 - 14 * var(--t));
  --wash:radial-gradient(ellipse calc(var(--rx)*var(--wsx)) calc(var(--ry)*var(--wsy)) at var(--cx) var(--cy),rgb(var(--wr) var(--wg) var(--wbl) / var(--wa)) 0%,rgb(var(--wr) var(--wg) var(--wbl) / var(--wa)) 44%,rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.9125)) 56%,rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.6375)) 67%,rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.289)) 78%,rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.051)) 89%,rgb(var(--wr) var(--wg) var(--wbl) / 0) 100%);
  --veil:linear-gradient(rgba(8,24,46,0) 60%,rgba(8,24,46,.25));
  --skyd:linear-gradient(#7da4c9 0,#e9c08e var(--band));--skye:linear-gradient(#0a1c36 0,#22406b calc(var(--band)*.7),#7d6283 var(--band));
  position:relative;isolation:isolate;text-align:center;
  min-height:clamp(600px,calc(100svh - 88px),780px);display:flex;flex-direction:column;justify-content:center;padding:56px 0 calc(var(--curve) + 44px);background:#9ec0de}
/* with the script on, the hero starts on the day picture and home.js moves it to evening */
.hx-js .hx{--t:0}
.hx-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hx-bg>*{position:absolute}
.hx-sky{inset:-8px}
.hx-sky i{position:absolute;inset:0}
.hx-sky-d{background:var(--skyd)}
.hx-sky-e{background:var(--skye);opacity:var(--t)}
/* the panorama: covers the hero on its own; home.js then sizes it in CSS pixels and only ever translates it
   (the scroll drop). It never zooms (Kenneth, 3 Oct 2026). */
.hx-world{left:0;top:0;right:0;bottom:0}
.hx-js .hx.hx-laid .hx-world{right:auto;bottom:auto;will-change:transform}
.hx-world>*{position:absolute}
.hx-world picture{display:contents}
.hx-world img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;max-width:none;user-select:none;-webkit-user-drag:none}
.hx-world .hx-eve{opacity:var(--t)}
.hx-sun{left:0;top:0;width:100%;height:100%;background:#f6c231;mix-blend-mode:soft-light;opacity:calc((1 - var(--t))*var(--sunmax,0))}
.lw{opacity:0;transition:opacity 1.4s ease;box-shadow:0 0 calc(22px*var(--s,1)) calc(2px*var(--s,1)) var(--lwg,rgba(255,180,50,.28));background-image:var(--lit,none)}
.lw.on{opacity:1}
.hx-veil{inset:0;z-index:2;background:var(--veil,none)}
.hx-wash{inset:0;z-index:2;background:var(--wash)}
.hx-grain{inset:0;z-index:3;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hx .hw{position:relative;z-index:6;max-width:720px;margin:0 auto;padding:0 24px;width:100%}
.hx h1{font:650 50px/1.1 Manrope,Arial,sans-serif;letter-spacing:-1.9px;color:var(--ink1);margin:0 auto 14px;max-width:640px;text-wrap:balance}
.hx .sub{font:500 19px/1.45 'DM Sans',Arial,sans-serif;color:var(--ink2);margin:0 0 30px}
.hx .hs{position:relative;z-index:2;max-width:640px;margin:0 auto;text-align:left}
.hx .hs-chips{gap:10px;margin:20px auto 0;max-width:640px}
.hx .hs-chips a{font:500 14px 'DM Sans',Arial,sans-serif;min-height:40px;padding:0 16px;border:1px solid var(--chipb);background:var(--chipbg);color:var(--chipc);transition:background .2s,border-color .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hx .hs-chips a:hover{background:var(--chipbgh);border-color:#fdc500}
.hx .hs-chips a:focus-visible{outline:2px solid #fdc500;outline-offset:2px}
.hx .free{font-size:13px;margin:18px 0 0;color:var(--ink3)}
.hx-curve{position:absolute;left:0;bottom:-1px;width:100%;height:var(--curve);z-index:5;display:block;pointer-events:none}
.hx-curve path{fill:#fff;stroke:none}
/* entrance: each line rises 10 px and fades in, 90 ms apart */
.hx-js .hx .en,.hx-js .hx h1{animation:hx-rise 900ms cubic-bezier(.2,.7,.2,1) var(--dl,0ms) both}
.hx h1{--dl:100ms}
@keyframes hx-rise{from{opacity:0;transform:translateY(10px)}}

/* phone: the dusk is a soft band behind the text column (same opacity as desktop), clear above the headline and below the free line */
@media (max-width:700px){
  .hx{--wf:120px;--wash:linear-gradient(180deg,rgb(var(--wr) var(--wg) var(--wbl) / 0) calc(var(--wt) - var(--wf)),rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.12)) calc(var(--wt) - var(--wf) * .75),rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.38)) calc(var(--wt) - var(--wf) * .525),rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.72)) calc(var(--wt) - var(--wf) * .3),rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.94)) calc(var(--wt) - var(--wf) * .1),rgb(var(--wr) var(--wg) var(--wbl) / var(--wa)) var(--wt),rgb(var(--wr) var(--wg) var(--wbl) / var(--wa)) var(--wb),rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.94)) calc(var(--wb) + var(--wf) * .1),rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.72)) calc(var(--wb) + var(--wf) * .3),rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.38)) calc(var(--wb) + var(--wf) * .525),rgb(var(--wr) var(--wg) var(--wbl) / calc(var(--wa) * 0.12)) calc(var(--wb) + var(--wf) * .75),rgb(var(--wr) var(--wg) var(--wbl) / 0) calc(var(--wb) + var(--wf)));
   min-height:760px;justify-content:flex-start;padding:150px 0 calc(var(--curve) + 90px)}
  .hx .hw{padding:0 16px}
  .hx h1{font-size:34px;letter-spacing:-1.2px;margin-bottom:12px}
  .hx .sub{font-size:17px;margin-bottom:24px}
  .hx .hs-chips{gap:8px;margin-top:16px}
  .hx .hs-chips a{min-height:44px;padding:0 14px}
}
/* reduced motion: a still evening frame (light .85), no drift, no fades */
@media (prefers-reduced-motion:reduce){
  .hx-js .hx{--t:.85}
  .hx-js .hx .en,.hx-js .hx h1{animation:none}
  .lw,.hx .hs-chips a{transition:none}
}

/* "Start with" links, moved from the hero to under the trade tiles */
.hc-start{display:flex;align-items:center;gap:18px;justify-content:center;flex-wrap:wrap;font-size:14px;margin:24px 0 0;color:var(--muted)}
.hc-start a{color:var(--blue,#00509d);font-weight:600;display:inline-flex;align-items:center;min-height:44px}

/* ============ map section ============ */
.msec{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f7f9fb;padding:72px 0 80px;color:#182d40;font:16px/1.5 'DM Sans',Arial,sans-serif;color-scheme:light}
.msec .in{max-width:1240px;margin:0 auto;padding:0 32px}
.msec h2{font:650 32px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.9px;color:#102e4f;margin:0 0 10px}
.msec .intro p{color:#3f5468;margin:0 0 10px;max-width:640px;font-size:17px}
.msec a.more{color:#00509d;font-weight:650;font-size:15px;display:inline-flex;align-items:center;min-height:44px}
.mgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;margin-top:30px}
.mapbox{position:relative;border-radius:22px;overflow:hidden;background:#a7c4df;box-shadow:10px 10px 0 #102e4f;touch-action:manipulation}
.mapbox[hidden]{display:none}
.mapbox::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.mapbox svg.isl{display:block;width:100%;height:auto;overflow:visible}
/* the site's global svg rule (design.css: 20 px, no fill, currentColor stroke) is for icons; the island and legend draw with their own attributes */
.mapbox svg,.mhelp .lg svg{fill:#000;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.msea{animation:hm-seadrift 14s linear infinite}
@keyframes hm-seadrift{to{transform:translate(9px,0)}}
.msec .ar{transition:transform .35s cubic-bezier(.3,1.3,.5,1),fill .25s;transform-box:fill-box;transform-origin:50% 50%}
.msec .arw{cursor:pointer;outline:none}
.msec .arw.hov .ar{fill:#fbe8b6}
.msec .arw.sel .ar{fill:#f8d672}
.msec .lift path{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.msec .lift.up .lp,.msec .lift.up .ls{transform:translate(-2px,-5px)}
.msec .lift.up .lsh{transform:translate(2px,2px)}
.msec .ring{fill:none;stroke:#102e4f;stroke-width:2.4;stroke-linejoin:round;opacity:0}
.msec .ring.on{opacity:1}
.msec .pz,.msec .pzs,.msec .piece,.msec .pin{transform-box:fill-box}
.msec .pz{transform-origin:50% 50%}
.mframe:not(.run) .pz,.mframe:not(.run) .pzs,.mframe:not(.run) .piece{opacity:0}
.mframe.run .pz{animation:hm-lay 760ms cubic-bezier(.2,.9,.25,1.12) var(--dl,0ms) both}
@keyframes hm-lay{from{opacity:0;transform:translate(-7px,-15px) rotate(-3.5deg) scale(1.035)}45%{opacity:1}}
.mframe.run .pzs{animation:hm-shlay 760ms cubic-bezier(.2,.9,.25,1) var(--dl,0ms) both}
@keyframes hm-shlay{from{opacity:0;transform:translate(9px,11px)}45%{opacity:.6}}
.msec .piece{transform-origin:50% 100%}
.mframe.run .piece{animation:hm-pup 650ms cubic-bezier(.3,1.6,.5,1) var(--dl,0ms) both}
@keyframes hm-pup{from{transform:scaleY(0);opacity:0}40%{opacity:1}}
.msec .sway{transform-box:fill-box;transform-origin:50% 100%;animation:hm-sway 5.5s ease-in-out var(--sd,0s) infinite alternate}
@keyframes hm-sway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
.msec .hwin{transition:fill 1.2s ease}
.msec .hwin.lit{fill:#f6c231}
.msec .boat{offset-rotate:auto;animation:hm-sail var(--t,40s) linear var(--dl,0s) infinite}
@keyframes hm-sail{from{offset-distance:0%}to{offset-distance:100%}}
.msec .mcl{animation:hm-mcl var(--t,80s) linear var(--dl,0s) infinite}
@keyframes hm-mcl{from{transform:translateX(-20%)}to{transform:translateX(110%)}}
.msec .pin{transform-origin:50% 100%;transition:opacity .2s}
.msec .pin.on .pinb{animation:hm-pinpop 420ms cubic-bezier(.3,1.6,.5,1) both}
@keyframes hm-pinpop{from{transform:translateY(-10px) scale(.4);opacity:0}}
.mapbox.off *{animation-play-state:paused!important}
.mhelp{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;margin:18px 4px 0;font-size:13px;color:#4f6276}
.mhelp[hidden]{display:none}
.mhelp .lg{display:flex;align-items:center;gap:8px}
.mhelp .lg svg{height:18px;width:auto;flex:none}
.mpanel{background:#fff;border:1px solid #dfe5eb;border-radius:18px;padding:22px;box-shadow:6px 6px 0 rgba(16,46,79,.12)}
.mpanel .rg{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#58697a;display:block;margin:0 0 8px}
.mpanel b.t{display:block;font:700 24px/1.2 Manrope,Arial,sans-serif;letter-spacing:-.5px;color:#102e4f;margin:0 0 8px}
.mpanel p{margin:0 0 10px;font-size:15px;color:#2e4357}
.mpanel .big{font:700 34px/1 Manrope,Arial,sans-serif;letter-spacing:-1px;color:#102e4f;display:block;margin:2px 0 4px}
.mpanel .lbl{font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#58697a;margin:16px 0 8px}
.mpanel ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mpanel .tr li>a,.mpanel .tr li>span{display:flex;align-items:center;gap:10px;font-size:14px;background:#f7f9fb;border:1px solid #dfe5eb;border-radius:12px;padding:5px 10px 5px 5px;min-height:46px;color:#182d40;text-decoration:none}
.mpanel .tr li>a:hover{border-color:#00509d}
.mpanel .tr li>a svg{width:16px;height:16px;margin-left:auto;color:#00509d;flex:none}
.mpanel .tr img{width:34px;height:34px;object-fit:contain}
.mpanel .lst button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:8px 12px;border-radius:10px;background:#f7f9fb;border:1px solid #dfe5eb;min-height:40px;align-items:center}
.mpanel .lst button:hover{border-color:#00509d}
.mpanel .lst button:focus-visible,.mpanel select:focus-visible,.mpanel .pback:focus-visible,.mpanel .tr a:focus-visible{outline:2px solid #00509d;outline-offset:2px}
.mpanel .lst button span:last-child{font-family:var(--mono);font-size:13px;color:#425669}
.mpanel label.sel{display:block;margin-top:16px;font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#58697a}
.msec .mpanel select{display:block;width:100%;max-width:none;margin-top:8px;font:15px 'DM Sans',Arial,sans-serif;font-weight:400;color:#102e4f;background:#fff;border:1px solid #cbd7e3;border-radius:10px;padding:10px 12px;min-height:44px;-webkit-appearance:menulist;appearance:auto;text-transform:none;letter-spacing:0}
.mpanel .pback{all:unset;cursor:pointer;margin-top:16px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:650;color:#00509d;min-height:40px}
.mpanel .pa{animation:hm-fade .25s ease both}
@keyframes hm-fade{from{opacity:0}}
.msec .note{font-size:13px;color:#4f6276;margin:26px 4px 0;max-width:760px}
@media (max-width:980px){.mgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .msec{padding:48px 0 56px}.msec .in{padding:0 16px}.msec h2{font-size:25px;letter-spacing:-.5px}.msec .intro p{font-size:16px}
  .mgrid{margin-top:22px;gap:18px}
  .mapbox{border-radius:16px;box-shadow:6px 6px 0 #102e4f}
  .mpanel{padding:18px;box-shadow:4px 4px 0 rgba(16,46,79,.12)}
  .mpanel b.t{font-size:21px}
  .mhelp{margin-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .msec *,.msec *::before,.msec *::after{animation:none!important;transition:none!important}
  .mframe .piece,.mframe .pz,.mframe .pzs{opacity:1}
}

/* M12: the map panel's small labels at 12px on phones. M9: "Back" in the panel at 44px. */
@media(max-width:700px){
  .mpanel .rg,.mpanel .lbl,.mpanel label.sel{font-size:12px}
  .mpanel .pback{min-height:44px}
}

/* Map section tidy-up (Kenneth, 4 Oct 2026): the footnote sits straight under the map's legend instead of below the
   taller side panel (no empty gap); legend, help line and footnote share one small text style and one rhythm; the
   panel labels and the area picker use the site's eyebrow and body fonts, not a monospace face. */
.mgrid>.note{grid-column:1;grid-row:2;margin:12px 4px 0;max-width:none}
.mgrid>.mpanel{grid-column:2;grid-row:1/span 2}
.mhelp{flex-direction:column;align-items:flex-start;gap:8px;margin:16px 4px 0;font-size:13px;line-height:1.5;color:#58697a}
.msec .note{font-size:13px;line-height:1.5;color:#58697a}
.mpanel .rg,.mpanel .lbl,.mpanel label.sel{font:700 12px/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#58697a}
.mpanel .lst button span:last-child{font-family:'DM Sans',Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:600;color:#425669}
.mpanel label.sel select,.mpanel label.sel .hf-dropdown-control,.mpanel label.sel *{font-family:'DM Sans',Arial,sans-serif;letter-spacing:0;text-transform:none}
@media (max-width:980px){
  .mgrid>.mpanel{grid-column:1;grid-row:auto}
  .mgrid>.note{grid-column:1;grid-row:auto;margin-top:0}
}