/* written by scripts/build-atlas-pages.py (ATLAS_CSS); edit it there */
:root { --ground:#ffffff; --surface:#ffffff; --type:#0e1615; --sea:#4e7b78; --ember:#4e7b78; --line:rgba(14,22,21,.09);
         --muted:rgba(14,22,21,.72); --faint:rgba(14,22,21,.6); }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--ground); color:var(--type); font-weight:300; line-height:1.65; -webkit-font-smoothing:antialiased; }
.serif { font-family:'Fraunces',Georgia,serif; }
.mono { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--sea); }
a { color:inherit; }

/* Folded sections. The marker is ours, on the left, so a summary can carry a heading
   without the browser's triangle landing in the middle of it. */
details.fold > summary { cursor:pointer; list-style:none; position:relative; padding-left:26px; }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary::before { content:"+"; position:absolute; left:0; top:1px;
  font-family:'IBM Plex Mono',monospace; font-size:17px; line-height:1.2; color:var(--sea); opacity:.8; }
details.fold[open] > summary::before { content:"\2212"; }
details.fold > summary:hover::before { opacity:1; }
details.fold .foldbody { margin-top:16px; padding-left:26px; }
@media(max-width:560px){ details.fold .foldbody { padding-left:0; } }


.crail-wrap{position:relative}
.crail-head h2{margin:0}
.crail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding:6px 2px 16px;scrollbar-width:none;cursor:grab}
.crail::-webkit-scrollbar{display:none}
.crail.drag{cursor:grabbing;scroll-behavior:auto}
.crail>a{scroll-snap-align:start;flex:0 0 auto;width:clamp(226px,26vw,270px);
  display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px 15px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,background .22s}
.crail>a:hover{transform:translateY(-3px);border-color:rgba(78,123,120,.42);background:rgba(78,123,120,.05)}
.crail .cr-w{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}
.crail .cr-n{font-family:'Fraunces',Georgia,serif;font-size:18px;line-height:1.2}
.crail .cr-p{font-size:13px;color:var(--muted);line-height:1.5}
.crail .cr-s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-top:auto;padding-top:8px}
.crail .cr-s b{color:var(--sea);font-weight:400}
.crail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
.crail-nav{display:flex;gap:7px;flex:0 0 auto;padding-bottom:3px}
.crail-nav button{width:30px;height:30px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);color:var(--type);cursor:pointer;font-size:13px;line-height:1;
  opacity:.72;transition:opacity .2s,border-color .2s}
.crail-nav button:hover{opacity:1;border-color:rgba(78,123,120,.42)}
.crail-nav button[disabled]{opacity:.22;cursor:default}
@media(max-width:560px){.crail-nav{display:none}}

.wrap { max-width:880px; margin:0 auto; padding:0 24px; }
/* Prose sections keep the page's one spine (880px) and cap the READING MEASURE
   instead of the container — same 62ch as .lead. Narrowing the container is what
   used to jog the left edge 80px mid-scroll. */
.wrap.prose > * { max-width:62ch; }
nav.top { position:sticky; top:0; background:rgba(255,255,255,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); z-index:50; }
nav.top .wrap { display:flex; justify-content:space-between; align-items:center; height:60px; }
nav.top a { text-decoration:none; opacity:.7; font-size:14px; } nav.top a:hover { opacity:1; color:var(--sea); }
.brand{display:inline-flex;align-items:center;gap:10px;font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:16px;letter-spacing:.16em;color:var(--type);opacity:1!important;text-decoration:none;white-space:nowrap}.brand-mark{width:22px;height:22px;display:block}
header.hero { padding:72px 0 40px; border-bottom:1px solid var(--line); }
h1 { font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:clamp(30px,5vw,46px); line-height:1.12; margin:14px 0 18px; }
h2 { font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:24px; margin-bottom:14px; }
.lead { font-size:17px; opacity:.78; max-width:62ch; }
section { padding:44px 0; border-bottom:1px solid var(--line); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px 24px; margin-bottom:14px; position:relative; transition:border-color .25s; }
.card a.t { text-decoration:none; } .card a.t:hover { color:var(--sea); }
/* ── the whole card is the door ──────────────────────────────────────────────
   The heading's link stretches over the card with ::after, so a reader can press
   anywhere on it — the sentence, the dots, the badges — and land on that place's
   own sheet. Only the place name was clickable before, which is a 90-character
   target on a card 700px wide.
   ONE anchor does it: no invisible second link to tab through, and the accessible
   name is the sentence itself. Everything else that is genuinely its own
   destination — the place name, the full-sheet line, a school's URL — sits above
   the stretch on z-index 2 and still works. */
.card h2 a { color:inherit; text-decoration:none; }
.card h2 a:hover { color:var(--sea); }
.card:hover { border-color:color-mix(in srgb, var(--sea) 30%, var(--line)); }
.card h2 a::after { content:""; position:absolute; inset:0; z-index:1; border-radius:10px; }
.card h2 a:focus-visible::after { outline:2px solid var(--sea); outline-offset:3px; }
.card .dwhere a, .card p a, .card ul a, .card .school-url { position:relative; z-index:2; }
/* A school's photograph, in its own band at the top of its place card.
   It was BEHIND the card until 2026-09-10, under a scrim heavy enough to keep
   every line legible — and Arnaud's verdict on that was "readers can't really
   see it now", which the measurements agreed with: at any scrim light enough to
   show the room, the sea-coloured place line (a mid-tone at 17px) fell under
   4.5:1 first, exactly as the browse card's own note predicted. One layer cannot
   be a photograph and a page background at once. So the picture gets its own
   space at full brightness, the words go back onto flat ink at the contrast they
   were designed for, and nothing has to be traded against anything.
   The fade at the bottom is to --ink2, the card's own ground, so the photograph
   ends in the card rather than against a hard edge. */
/* ⚠ width:100% is load-bearing. aspect-ratio + max-height on an auto-width block
   makes Chrome SHRINK THE WIDTH to keep the ratio once the height cap bites — the
   band came out 498px wide in an 832px card, a photograph with a gap beside it. A
   definite width pins the box and lets the cap simply crop the height, which is all
   it was ever for. */
/* max-height 280 -> 460: Arnaud, 4 Oct 2026, on the Boot cupping photo: "too zoomed in".
   At 280px a 3:2 frame in an 880px band kept barely half its height and cut the
   students' heads off. 460 keeps ~85% of it; a phone never reaches the cap. */
.cardshot { width:calc(100% + 48px); aspect-ratio:16/9; max-height:460px; margin:-22px -24px 18px;
  border-radius:10px 10px 0 0;
  background-image:linear-gradient(180deg,rgba(255,255,255,0) 60%,var(--surface) 100%),var(--shot);
  background-size:cover; background-position:var(--focal,center); background-repeat:no-repeat; }
/* The places compared. The first table on this site, and it earns the form: five
   long cards is five scrolls and no comparison, and what a reader is choosing
   between here is when they can go, at what level, for how long and in which
   language. Hairlines and mono headers, no zebra and no borders — the page's own
   register. It scrolls inside its own box on a narrow screen so the page itself
   never scrolls sideways, and tabindex+role make that box reachable by keyboard,
   which a scrollable region has to be. */
.cmp { overflow-x:auto; margin:0 0 26px; border-top:1px solid var(--line); }
.cmp table { border-collapse:collapse; width:100%; font-size:13.5px; }
.cmp th, .cmp td { text-align:left; vertical-align:top; padding:10px 18px 10px 0;
  border-bottom:1px solid var(--line); }
.cmp thead th { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); font-weight:400; padding-top:14px; }
.cmp tbody th { font-weight:500; white-space:nowrap; }
.cmp .c-season, .cmp .c-howlong, .cmp .c-tier { white-space:nowrap; }
.cmp tbody th a { color:var(--sea); text-decoration:none; }
.cmp tbody th a:hover { text-decoration:underline; }
.cmp td { color:rgba(14,22,21,.72); }
.cmp .gone { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:400; margin-left:6px; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom:none; }
/* Whose picture it is. Same words as the browse card, and the :empty rule keeps a
   card with no photograph from printing a blank line. */
.shotcredit { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; opacity:.5; margin:12px 0 0; }
.shotcredit:empty { display:none; }
.dwhere { font-size:17px; font-weight:500; color:var(--sea); line-height:1.3; margin:2px 0 10px; }
.dwhere .in { font-size:13px; font-weight:400; opacity:.62; }
.badge { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; border:1px solid rgba(14,22,21,.18); border-radius:99px; padding:3px 10px; margin:0 6px 6px 0; opacity:.85; }
.dots { color:var(--sea); letter-spacing:3px; }
.meta { font-size:13px; opacity:.6; }
ul.clean { list-style:none; } ul.clean li { padding:10px 0; border-bottom:1px solid var(--line); }
.schoolshot { float:right; width:92px; height:92px; object-fit:cover; border-radius:10px;
  border:1px solid var(--line); margin:2px 0 8px 14px; shape-outside:inset(0 round 10px); }
@media (max-width:560px) { .schoolshot { width:66px; height:66px; margin-left:11px; } }
ul.clean li:last-child { border-bottom:none; }
/* A school is a card, like a place (16 Sept 2026). One column, full spine, the same
   ground and radius as a place card, so the two read as the same kind of thing. */
/* ⚠ A CSS GRID item is NOT like a flex one: its default min-width is `auto`, which
   resolves to its CONTENT's min-content size — so an implicit column sized `auto`
   (the default) can grow past the container to fit one long unbroken word, pushing
   the whole page into a horizontal scroll. An explicit minmax(0,1fr) track says the
   column may shrink to 0 before it grows; min-width:0 on the item says the same for
   the box itself. A documented, intermittent 12px overflow on this card (glass FAILs
   on it some runs, PASSes on others — not reproducible on demand, consistent with a
   font-swap-timing race, not a fixed piece of content) is the exact shape this fixes:
   whatever the proximate cause on a given run, the grid can no longer grow past the
   phone to accommodate it. overflow-wrap is the matching safety net on the card
   itself — a last resort, only when a genuinely unbroken run of characters would
   otherwise overflow; it does not touch how normal multi-word text wraps. */
ul.schools { list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
li.school { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:22px 24px; min-width:0; overflow-wrap:anywhere; }
li.school .stags { margin:0 0 10px; }
.stag { display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; border:1px solid var(--line); border-radius:6px; padding:3px 9px; margin:0 6px 6px 0;
  color:var(--muted); }
.stag.gold { color:#ffffff; font-weight:600; border-color:transparent; background:linear-gradient(135deg,#4e7b78,#4e7b78); }
.stag.ember { color:var(--ember); border-color:rgba(78,123,120,.45); }
.stag.sea { color:var(--sea); border-color:rgba(78,123,120,.4); }
.sname { font-family:'Fraunces',Georgia,serif; font-weight:400; font-size:24px; line-height:1.24; margin:2px 0 4px; }
.scourse { font-size:15px; color:var(--sea); margin:0 0 14px; max-width:62ch; }
dl.sfacts { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px 18px;
  margin:0 0 16px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
dl.sfacts dt { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
dl.sfacts dd { font-size:14px; line-height:1.45; margin-top:3px; }
.snote { font-size:12.5px; color:var(--muted); }
.sblurb { font-size:15px; opacity:.82; max-width:62ch; }
.sstand { font-size:14.5px; max-width:62ch; margin:0 0 10px; padding:10px 14px; border-radius:8px;
  border-left:2px solid var(--ember); background:rgba(78,123,120,.06); }
.steach { font-size:14px; line-height:1.55; max-width:62ch; margin:0 0 12px; }
.steach .school-url { word-break:normal; white-space:nowrap; }
.sfoot .school-url { word-break:normal; overflow-wrap:anywhere; }
.steachlab { display:block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:3px; }
details.smore { margin-top:12px; }
li.school[data-cover] { padding:0 0 20px; overflow:hidden; }
.prail > li.school { align-self:flex-start; }
li.school[data-cover] > :not(.scover) { margin-left:22px; margin-right:22px; }
.scover { position:relative; aspect-ratio:4/5; max-height:560px; width:100%; margin:0 0 16px; }
.scover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,22,21,0) 40%,rgba(14,22,21,.62) 68%,rgba(14,22,21,.96) 100%); }
.scap { position:absolute; left:0; right:0; bottom:0; z-index:1; padding:0 22px 18px; }
.scap .sname, .scap .sname a { color:#fff; }
.scap .scourse { color:#fff; opacity:.85; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.scap .stag { background:rgba(14,22,21,.45); color:#fff; border-color:rgba(255,255,255,.5); }
li.school .scourse { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
details.sall .smh { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin:18px 0 6px; font-weight:400; }
details.sall > dl.sfacts { margin-top:12px; }
details.smore > summary { cursor:pointer; list-style:none; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sea); }
details.smore > summary::-webkit-details-marker { display:none; }
details.smore > summary::before { content:"+ "; }
details.smore[open] > summary::before { content:"− "; }
details.smore > p { font-size:14.5px; opacity:.82; max-width:62ch; margin-top:10px; }
.sfoot { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:16px; }
.svisit { font-size:14px; }
.sinterest { font-size:14px; color:var(--ember); }
.srate { font-size:13px; color:var(--muted); }
/* ── the top of a craft page: two taps, then the places ─────────────────────
   "About this skill" opens a panel with no script at all (:target); "I'm interested"
   is taken over by skill-save.js / intent-capture.js and falls back to the note. */
.hero-acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.hbtn { display:inline-flex; align-items:center; gap:.5em; font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  letter-spacing:.06em; color:var(--type); text-decoration:none; background:rgba(14,22,21,.04);
  border:1px solid rgba(78,123,120,.5); border-radius:99px; padding:11px 22px; transition:border-color .2s,background .2s; }
.hbtn:hover { border-color:var(--sea); background:rgba(78,123,120,.10); }
.hbtn:focus-visible, .about-x:focus-visible, .sinterest:focus-visible, .pr-arrow:focus-visible { outline:2px solid var(--sea); outline-offset:3px; }
.hbtn.go { color:#ffffff; font-weight:500; border-color:transparent; background:linear-gradient(135deg,var(--sea) 0%,var(--ember) 130%); }
.hbtn.go:hover { filter:brightness(1.05); background:linear-gradient(135deg,var(--sea) 0%,var(--ember) 130%); }
.about-pop { display:none; }
.about-pop:target { display:flex; position:fixed; inset:0; z-index:2300; align-items:center; justify-content:center;
  padding:22px; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.about-back { position:absolute; inset:0; }
.about-card { position:relative; width:min(640px,100%); max-height:calc(100vh - 44px); overflow:auto; overscroll-behavior:contain; outline:none; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:28px 26px 24px; box-shadow:0 30px 70px -20px rgba(0,0,0,.75); }
.about-card h2 { font-size:28px; }
.about-x { position:absolute; top:10px; right:12px; font-size:22px; line-height:1; text-decoration:none; color:var(--muted); padding:6px; }
.about-x:hover { color:var(--type); }
/* The place cards on a rail. The TRACK bleeds to the screen edge on a phone so the
   next card peeks in; the cards keep their own padding so the scroll-snap lands
   flush under the edge, not under the arrows. Two abreast on a desktop. The cards
   themselves are untouched. */
.prail-track { position:relative; margin:0 -24px; }
.prail { padding:6px 24px 18px; scroll-padding-inline:24px; scroll-snap-type:x mandatory; align-items:stretch; }
.prail > .card, .prail > li.school { flex:0 0 auto; width:min(86vw,420px); margin-bottom:0; scroll-snap-align:start; }
/* ⭐ Arnaud, 4 Nov 2026: "same for the school in the place card, make another way of
   swiping or seeing them that is direct when you click on the place" — the schools
   of a town get the identical rail + arrows the places got, on the page the place
   card's own "Learn more" door opens onto (schools_rail(), beside schools_list()).
   ⚠ `ul.schools{display:grid}` is MORE specific than `.crail{display:flex}`
   (type+class beats class alone), so grid would silently win the cascade and the
   rail would never scroll — this re-asserts flex at a specificity that beats it
   regardless of source order. One school needs no rail at all and keeps the full
   width it already had (schools_rail() returns the plain list, untouched). */
ul.schools.crail { display:flex; }
.prail.one > .card { width:100%; }
@media (min-width:900px) { .prail-track { margin:0; } .prail { padding:6px 2px 18px; scroll-padding-inline:0; scroll-snap-type:x proximity; } }
/* The swipe arrows: a visible pair at every width, not just a desktop pointer's
   header row (see places_rail()). Disabled rather than hidden at each end of the
   rail — a dimmed arrow says "no further", a vanished one reads as a glitch.
   ⚠ NOT vertically centred on the card: a card's own body (facts, teachers, the
   blurb, "what the course covers") routinely runs past a thousand pixels, so a
   true 50% centre sits far below the fold and nobody sees it on the first screen.
   A fixed offset near the top — inside the ribbon/heading band every card shares,
   photographed or not — is visible the instant the card scrolls into view. */
.pr-arrow { position:absolute; top:118px; z-index:4;
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:99px; border:1px solid rgba(14,22,21,.22); background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--type);
  font-size:19px; line-height:1; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:opacity .2s,border-color .2s,background .2s; }
.pr-arrow:hover { border-color:rgba(78,123,120,.55); background:rgba(255,255,255,.9); }
.pr-arrow[disabled] { opacity:.22; cursor:default; }
.pr-prev { left:6px; } .pr-next { right:6px; }
/* Desktop's rail has almost no inner gutter (2px, vs the phone's 24px scroll-padding),
   so a 6px inset sits ON the heading. Push the arrow out into the .wrap's own margin
   instead — the same bleed trick .cardshot already uses — clear of the card's text. */
@media (min-width:900px) { .pr-prev { left:-19px; } .pr-next { right:-19px; } }
@media (prefers-reduced-motion:reduce) { .pr-arrow { transition:none; } }
/* On a phone the two taps share one row and the hero gives back what it can, so the
   first place card is on the screen that opens. */
@media (max-width:560px) { header.hero { padding-top:48px; padding-bottom:30px; } .hero-acts { gap:8px; margin-top:18px; }
  .hbtn { padding:10px 16px; font-size:12px; } #other-places { padding-top:32px; } }
.sread { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-top:12px; }
@media (max-width:560px) { li.school { padding:18px 18px; } dl.sfacts { grid-template-columns:1fr 1fr; } }
.school-url { font-size:13px; color:var(--sea); text-decoration:none; word-break:break-all; } .school-url:hover { text-decoration:underline; }
.cta { display:inline-block; margin-top:18px; padding:13px 26px; border-radius:99px; text-decoration:none; color:var(--surface); font-size:14px; font-weight:400; background:linear-gradient(135deg,var(--sea) 0%,var(--ember) 130%); }
.cta:hover { opacity:.92; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
.shots { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:18px 14px; align-items:start; }
.shots figure { margin:0; }
.shots figure.wide { grid-column:1/-1; }
.shots img { width:100%; height:auto; display:block; border-radius:10px; border:1px solid var(--line); background:var(--surface); }
.shots figcaption { font-size:13px; opacity:.6; margin-top:8px; line-height:1.55; }
.intent { border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:rgba(14,22,21,.02); margin:18px 0 0; }
.intent-q { font-size:15px; opacity:.82; margin-bottom:12px; max-width:56ch; }
.intent-go { border:none; border-radius:99px; padding:11px 22px; font-size:14px; font-weight:500; color:#ffffff; cursor:pointer; background:linear-gradient(135deg,var(--sea) 0%,var(--ember) 130%); }
.intent-go:hover { filter:brightness(1.05); } .intent-go:disabled { opacity:.5; cursor:default; }
.intent-msg { font-size:13.5px; margin-top:10px; } .intent-msg.ok { color:var(--sea); } .intent-msg.err { color:#4e7b78; }
.intent-fine { font-size:12px; opacity:.5; margin-top:8px; }
footer { padding:40px 0 60px; font-size:13px; color:rgba(14,22,21,.72); }
.piccredit { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.04em;
  color:rgba(14,22,21,.6); margin:0 0 14px; line-height:1.6; }
.piccredit a { color:rgba(14,22,21,.72); }
footer a { color:var(--sea); }
.cur-toggle { position:fixed; right:14px; bottom:14px; z-index:60; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:99px; padding:5px 7px 5px 12px; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.cur-toggle .lab { font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.5; }
.cur-toggle button { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--type); opacity:.6; background:none; border:none; cursor:pointer; border-radius:99px; padding:4px 9px; transition:all .18s; }
.cur-toggle button:hover { opacity:1; }
.cur-toggle button.on { opacity:1; background:linear-gradient(135deg,var(--sea),var(--ember) 130%); color:#ffffff; font-weight:500; }
.price[data-amt] { cursor:default; }
@media(max-width:560px) { .cur-toggle .lab { display:none; } .cur-toggle { right:10px; bottom:10px; } }
@media (max-width:480px){.brand{font-size:13px;letter-spacing:.12em;gap:8px}.brand-mark{width:18px;height:18px}}