/* Regional hub pages (/region and /region/<id>), laid out like tools.launchllama.co/blog in Swell Otter's colours.
   Uses the colour tokens from spot.css. Built by tools/hub-pages.mjs. */
body.hubpage2{background:var(--paper)}
body.hubpage2 main{max-width:none;margin:0;padding:0;border:0;background:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Hero: the illustrated otter scene, washed out and fading into the page, with the title centred over it. */
.hh{position:relative;background:var(--paper);overflow:hidden}
.hh::before{content:"";position:absolute;inset:0;background:var(--hero) 22% 40%/cover no-repeat}
.hh::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(251,247,238,.34) 0%,rgba(251,247,238,.5) 45%,rgba(251,247,238,.86) 78%,var(--paper) 100%)}
.hh-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:18px 16px 54px;text-align:center}
.hh .crumbs{display:flex;justify-content:flex-start;margin-bottom:34px}
.hh .crumbs a{color:var(--navy2)}
.hh-pill{display:inline-block;margin:0 0 14px;padding:6px 14px;background:var(--mustard);color:var(--navy);border:2px solid var(--navy);border-radius:8px;box-shadow:3px 3px 0 var(--navy);font:900 11.5px var(--body);text-transform:uppercase;letter-spacing:.14em}
.hh h1{margin:0 auto 14px;max-width:16ch;font:400 clamp(36px,8vw,64px)/1.04 var(--display);color:var(--navy);text-shadow:3px 3px 0 var(--mustard)}
.hh-dek{margin:0 auto 14px;max-width:60ch;font-size:17px;line-height:1.5;color:var(--ink);font-weight:500}
.hh-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0}
.hh-links a{font:800 14.5px var(--body);color:var(--navy);text-decoration:none;border-bottom:2px solid var(--mustard)}
.hh-links a:hover{color:var(--teal);border-color:var(--teal)}
@media (min-width:860px){
  .hh-in{padding:22px 28px 84px}
  .hh .crumbs{margin-bottom:52px}
}

/* Page body */
.hw{max-width:1180px;margin:0 auto;padding:0 16px 30px}
@media (min-width:860px){.hw{padding:0 28px 40px}}

/* At a glance */
.hg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:-26px 0 24px;position:relative;z-index:2}
.hg div{background:#fff;border:2px solid var(--navy);border-radius:10px;padding:10px 12px;box-shadow:3px 3px 0 var(--mustard)}
.hg dt{font:700 11px var(--narrow);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.hg dd{margin:2px 0 0;font:900 18px/1.2 var(--body);color:var(--navy)}
@media (max-width:640px){.hg{grid-template-columns:1fr 1fr;margin-top:-20px}.hg dd{font-size:16px}}

/* Search and chips */
.ht{margin:6px 0 10px;max-width:720px}
.ht-search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:0 14px;height:46px}
.ht-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(28,135,144,.18)}
.ht-search svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.ht-search input{flex:1;min-width:0;border:0;outline:0;background:none;font:500 16px var(--body);color:var(--ink)}
.ht-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ht-chips:has(button:only-child){display:none}
.ht-chips button{font:600 13.5px var(--body);color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:7px;padding:6px 11px;cursor:pointer}
.ht-chips button:hover{border-color:var(--navy)}
.ht-chips button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.ht-none{margin:14px 0 0;font-weight:600;color:var(--rust)}

/* Sections with a square bullet, like the blog's section heads */
.hs{margin:34px 0 0}
.hs[hidden]{display:none}
.hs-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:800 clamp(22px,4vw,28px)/1.15 var(--body);color:var(--navy);letter-spacing:-.01em}
.hs-h::before{content:"";flex:none;width:15px;height:15px;border-radius:4px;background:var(--mustard);border:2px solid var(--navy)}
.hs-note{margin:-6px 0 14px;color:var(--muted);font-size:15px;max-width:70ch}
.hs-cols{display:grid;gap:10px 40px}
.hs-cols .g-about p{font-size:16px;line-height:1.6;margin:0 0 12px}
@media (min-width:900px){.hs-cols{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.hs-table{margin-top:14px}

/* Cards: a tinted panel with a big highlighted word and an illustration, then the title and meta below */
.hc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px 22px}
.hc[hidden]{display:none}
.hc-panel{position:relative;display:block;aspect-ratio:1.28;border-radius:10px;overflow:hidden;text-decoration:none;
  background:color-mix(in srgb,var(--tint) 16%,#fbf3dc);transition:transform .15s}
.hc-panel:hover{transform:translateY(-2px)}
.hc-big{position:absolute;left:16px;right:16px;top:14px;font:900 clamp(24px,2.4vw,29px)/1.12 var(--body);color:var(--navy);letter-spacing:-.01em}
.hc-big mark{background:var(--mustard);color:var(--navy);padding:0 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hc-art{position:absolute;right:16px;bottom:14px;width:46%;max-width:130px;height:auto;fill:none;stroke:var(--navy);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  background:#fffaf0;border:3.5px solid var(--navy);border-radius:12px;padding:6px;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--navy)}
.hc-art .f{fill:var(--mustard)}
.hc-art .w{fill:#fff}
.hc h3{margin:12px 0 4px;font:800 17px/1.3 var(--body);color:var(--navy)}
.hc h3 a{color:inherit;text-decoration:none}
.hc h3 a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.hc-meta{margin:0;font-size:13.5px;color:var(--muted)}
.hc-links{display:flex;gap:14px;margin:6px 0 0}
.hc-links a{font:800 12.5px var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--teal);text-decoration:none}
.hc-links a:hover{text-decoration:underline}
@media (max-width:640px){
  .hc-grid{grid-template-columns:1fr 1fr;gap:20px 12px}
  .hc-big{left:10px;right:10px;top:10px;font-size:19px}
  .hc-art{right:10px;bottom:10px;width:42%;padding:4px;stroke-width:4.5}
  .hc h3{font-size:15px}
  .hc-links{flex-direction:column;gap:4px}
}

/* FAQ */
.hf{display:grid;gap:10px;max-width:820px}
.hf details{background:#fff;border:2px solid var(--line);border-radius:10px;padding:0 16px}
.hf details[open]{border-color:var(--navy)}
.hf summary{cursor:pointer;list-style:none;padding:13px 0;font:800 16px/1.35 var(--body);color:var(--navy);display:flex;justify-content:space-between;gap:12px}
.hf summary::-webkit-details-marker{display:none}
.hf summary::after{content:"+";font-size:20px;line-height:1;color:var(--orange)}
.hf details[open] summary::after{content:"–"}
.hf p{margin:0 0 14px;line-height:1.6}

.hw>.a-author{margin-top:40px}

/* The Swell Otter take: our own verdict on the region, signed */
.tk{background:#fff;border:2px solid var(--navy);border-radius:14px;box-shadow:5px 5px 0 var(--mustard);padding:20px 20px 16px;max-width:900px}
.tk-v{margin:0 0 14px;padding:0 0 0 14px;border-left:5px solid var(--orange)}
.tk-v p{margin:0;font:400 clamp(20px,2.6vw,26px)/1.3 var(--display);color:var(--navy)}
.tk-body p{margin:0 0 12px;font-size:16px;line-height:1.62}
.tk-when{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.tk-when div{border-radius:10px;padding:10px 12px;background:#eaf5ec}
.tk-when div.skip{background:#fbe9e4}
.tk-when dt{font:900 11.5px var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--olive)}
.tk-when .skip dt{color:var(--rust)}
.tk-when dd{margin:4px 0 0;font-weight:600;line-height:1.45}
.tk-by{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.tk-by img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--mustard);flex:none}
.tk-by a{color:var(--teal);font-weight:700}
@media (max-width:640px){.tk{padding:16px 14px 14px}.tk-when{grid-template-columns:1fr}}
.hh-meta{margin:12px 0 0;font-size:13px;color:var(--navy2);font-weight:600}
.hh-meta a{color:inherit}
.hf summary h3{margin:0;font:inherit;color:inherit}
.hf p a{color:var(--teal);font-weight:700}