/* ================= fonts =================
   Merlo Original — Mario Feliciano / Feliciano Type, 2025.
   TRIAL files, supplied as desktop OTF and converted here to woff2/woff.
   Full Latin charset: Spanish accents included, so no fallback face is
   needed for the ES copy (unlike the Rongel trial). */
@font-face{
  font-family:"Merlo Original Trial";
  src:url("../fonts/MerloOriginalTrial-Regular.woff2") format("woff2"),
      url("../fonts/MerloOriginalTrial-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Merlo Original Trial";
  src:url("../fonts/MerloOriginalTrial-RegularItalic.woff2") format("woff2"),
      url("../fonts/MerloOriginalTrial-RegularItalic.woff") format("woff");
  font-weight:400; font-style:italic; font-display:swap;
}
:root{
  --font-serif:"Merlo Original Trial",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ground:#000000;
  --ink:#F4F5F6;
  --silver:#B3B9C0;      /* body text — lifted slightly so it doesn't hover near the floor */
  --silver-dim:#82888F;  /* was #71777E: too close to 4.5:1 at .75rem letterspaced caps */
  --rule:rgba(255,255,255,.14);
  /* ONE column. Every element hangs off its left edge: logo, lede, paragraph,
     coda, footer rule. A single axis is exactly what the centred layout lost
     once the paragraph stopped being justified. */
  /* TWO widths now. The page column is set by the header, which must fall on
     a single line in both languages — the Spanish needs ~31.6x its font size,
     so 36px type wants 71rem. That is far too wide to read a paragraph in, so
     the paragraph keeps its own reading measure and sits inside the column.
     Header spans, body column doesn't: standard editorial practice. */
  --measure:min(100%,72rem);
  /* Body runs the full column width. That is ~136 characters a line, well
     past the 45-75 the books prescribe — a deliberate override, because a
     paragraph stranded at 64% of the page looked worse than a long line
     reads. Two things compensate below: larger type and much more leading. */
  --measure-text:100%;
  /* one spacing scale for all vertical rhythm, instead of per-element values */
  /* three genuinely different intervals, not three near-identical ones:
     -s binds elements into a group, -l separates groups.
     Every one is vh-driven with a low floor: the page must fit the viewport
     without scrolling, so the whole composition has to keep shrinking on a
     short window rather than bottoming out and overflowing. */
  /* --fit is a whole-composition multiplier. CSS leaves it at 1; main.js
     lowers it in small steps if the browser reports the page taller than the
     viewport. Estimating this in CSS alone can't work — the real height
     depends on the browser's own font metrics and chrome, which only the
     browser can measure. Every vertical quantity below is multiplied by it. */
  --fit:1;
  --space-s:calc(var(--fit) * clamp(0.5rem,1.3vh,1.125rem));
  --space-m:calc(var(--fit) * clamp(1rem,2.75vh,2rem));
  --space-l:calc(var(--fit) * clamp(1.125rem,3.6vh,2.25rem));
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

/* html carries the black too: body fades in over it, so the page
   emerges from black rather than from the default white canvas */
html{background:var(--ground);}

@media (prefers-reduced-motion:no-preference){
  body{animation:fade-from-black 1.4s ease-out both;}
}
@keyframes fade-from-black{
  from{opacity:0;}
  to{opacity:1;}
}

body{
  background:var(--ground);
  color:var(--ink);
  /* one serif family across the page — Merlo carries display and text alike,
     the way an 18th-century title page works off a single cut */
  font-family:var(--font-serif);
  /* sized to the specimen proportion: the earlier step-down for Merlo's
     x-height went too far and left the page looking thin */
  /* stepped up to 20px: at a long measure, bigger type cuts the character
     count per line and gives the eye a larger target on the return sweep */
  font-size:calc(var(--fit) * clamp(1rem,min(0.9rem + 0.4vw,0.45rem + 1.7vh),1.25rem));
  line-height:1.65;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:left;
  /* The page must fit the viewport with no scrolling. Every vertical
     quantity below is therefore driven by vh with a genuinely low floor, and
     each type size takes min(width-term, height-term) so a wide-but-short
     window can't claim size it has no room for. Modelled fill is 84-91% of
     viewport height from 640px up. */
  padding:calc(var(--fit) * clamp(0.5rem,2vh,1.5rem)) clamp(1.25rem,6vw,3rem);
}

.page{
  width:100%;
  max-width:var(--measure);
  /* query container: .lede sizes itself from this element's width (cqi),
     which is what makes the single-line header reliable at any window size */
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  /* stretch, not center: children fill the column and range off its left edge */
  align-items:stretch;
}

/* ================= logo ================= */
.logo{
  position:relative;
  width:calc(var(--fit) * min(100%,12.5rem,20vh));
  aspect-ratio:1/1;
  /* the one centred element. It can sit off the left axis because the rule
     below it (see .copy) spans the full column and brackets it — the mark
     reads as a device above a rule, not as a stray centred object. */
  /* Larger than --space-l, on purpose. Below the rule sits a line of type,
     whose cap-height starts ~0.31em under the top of its line box (half-
     leading plus Merlo's ascender-to-cap gap). Above the rule sits the logo's
     hard frame edge with no such slack. Equal metric gaps would therefore
     LOOK lopsided. The 5vh here tracks --space-l's 3.6vh so the two stay
     optically equal at every viewport height, not just one. */
  margin:0 auto calc(var(--fit) * clamp(1.5rem,5vh,3.25rem));
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -webkit-touch-callout:none;
}

/* fallback: plain silver logo, shown only if masks are unsupported */
.logo-fallback{position:absolute;inset:0;}
.logo-fallback img{display:block;width:100%;height:100%;}

/* the chrome: background layers masked by the logo shape */
.chrome{
  position:absolute;
  inset:0;
  display:none;
  --mx:50%; --my:12%;
  background:
    /* pointer highlight — the moving reflection */
    radial-gradient(circle calc(10.5rem) at var(--mx) var(--my),
      rgba(255,255,255,.95) 0%,
      rgba(240,245,250,.35) 34%,
      rgba(255,255,255,0) 62%),
    /* counter-glow low on the metal */
    radial-gradient(circle calc(14rem) at calc(100% - var(--mx)) calc(100% - var(--my)),
      rgba(214,222,230,.30) 0%,
      rgba(255,255,255,0) 60%),
    /* faint environment colour so the grey lives */
    linear-gradient(118deg,
      rgba(168,196,220,.20) 0%,
      rgba(0,0,0,0) 45%,
      rgba(216,196,166,.14) 100%),
    /* base chrome: sky / horizon / ground */
    linear-gradient(180deg,
      #FDFDFE 0%,
      #CDD3DA 28%,
      #8E959C 46%,
      #43484D 50%,
      #B7BDC4 55%,
      #6F767E 79%,
      #E8EBEE 100%);
  /* mask inlined as a data URI so it also works from file:// (see README) */
  --logo-mask:url("data:image/svg+xml,%3Csvg%20version%3D%221.0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221080.000000pt%22%20height%3D%221080.000000pt%22%20viewBox%3D%220%200%201080.000000%201080.000000%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%20%3Cg%20transform%3D%22translate%280.000000%2C1080.000000%29%20scale%280.100000%2C-0.100000%29%22%20fill%3D%22%23000000%22%20stroke%3D%22none%22%3E%20%3Cpath%20d%3D%22M275%2010518%20c-3%20-7%20-4%20-2315%20-3%20-5128%20l3%20-5115%205125%200%205125%200%200%205125%200%205125%20-5123%203%20c-4093%202%20-5124%200%20-5127%20-10z%20m10100%20-5118%20l0%20-4975%20-4975%200%20-4975%200%20-3%204965%20c-1%202731%200%204971%203%204978%203%2010%201004%2012%204977%2010%20l4973%20-3%200%20-4975z%22%2F%3E%20%3Cpath%20d%3D%22M565%2010228%20c-3%20-7%20-4%20-2184%20-3%20-4838%20l3%20-4825%204835%200%204835%200%200%204835%200%204835%20-4833%203%20c-3861%202%20-4834%200%20-4837%20-10z%20m9600%20-4828%20l0%20-4765%20-4765%200%20-4765%200%20-3%204755%20c-1%202615%200%204761%203%204768%203%2010%20962%2012%204767%2010%20l4763%20-3%200%20-4765z%22%2F%3E%20%3Cpath%20d%3D%22M3485%207674%20c-99%20-10%20-239%20-39%20-335%20-71%20-138%20-45%20-359%20-154%20-490%20-241%20-117%20-78%20-149%20-107%20-133%20-123%2014%20-14%2053%202%20143%2060%20241%20155%20489%20233%20740%20234%20109%201%20149%20-3%20205%20-20%20238%20-70%20370%20-217%20411%20-457%2015%20-91%2015%20-105%200%20-202%20-30%20-194%20-133%20-450%20-260%20-649%20-24%20-38%20-65%20-101%20-89%20-140%20-104%20-163%20-260%20-305%20-365%20-335%20-93%20-26%20-173%20-3%20-198%2055%20-20%2050%20-17%2086%2013%20162%2032%2081%20111%20167%20191%20207%2030%2015%20106%2037%20184%2052%2073%2015%20141%2034%20151%2042%2016%2014%2016%2017%202%2031%20-27%2027%20-154%2020%20-250%20-14%20-279%20-98%20-436%20-234%20-511%20-441%20-41%20-111%20-28%20-173%2047%20-237%2079%20-68%20168%20-73%20281%20-16%2095%2047%20350%20225%20438%20303%20246%20222%20485%20583%20579%20880%2077%20242%2066%20477%20-31%20628%20-60%2096%20-178%20189%20-298%20236%20-102%2041%20-308%2068%20-425%2056z%22%2F%3E%20%3Cpath%20d%3D%22M5389%206769%20c-231%20-54%20-480%20-280%20-805%20-729%20-213%20-295%20-481%20-715%20-689%20-1080%20-242%20-427%20-278%20-486%20-423%20-685%20-80%20-110%20-155%20-212%20-166%20-226%20-12%20-15%20-30%20-39%20-41%20-55%20-95%20-134%20-270%20-324%20-425%20-463%20-115%20-103%20-166%20-142%20-313%20-242%20-56%20-38%20-93%20-70%20-87%20-74%2020%20-12%20107%206%20170%2036%2058%2027%20176%2099%20216%20132%2010%209%2055%2044%2099%2078%20108%2085%20460%20438%20571%20572%20143%20175%20237%20321%20548%20860%20240%20416%20348%20593%20534%20877%20187%20285%20366%20538%20460%20650%20117%20140%20237%20230%20307%20230%2062%200%2070%20-36%2025%20-117%20-27%20-48%20-28%20-53%20-11%20-53%2027%200%20135%2075%20171%20118%2098%20120%2024%20210%20-141%20171z%22%2F%3E%20%3Cpath%20d%3D%22M2145%206296%20c-218%20-57%20-502%20-203%20-665%20-343%20-116%20-99%20-209%20-232%20-210%20-300%200%20-46%2041%20-89%20101%20-107%2043%20-13%2061%20-13%20152%200%20192%2029%20361%2075%20354%2098%20-2%206%20-41%2016%20-88%2022%20-112%2014%20-162%2029%20-197%2059%20-60%2050%20-52%2092%2034%20185%20107%20115%20339%20259%20466%20289%20106%2025%20187%204%20246%20-63%2036%20-41%2064%20-100%2056%20-120%20-3%20-7%20-35%20-38%20-73%20-69%20-115%20-96%20-189%20-179%20-196%20-221%20-16%20-83%2032%20-138%20146%20-170%2072%20-21%20248%20-21%20337%20-1%2070%2016%20167%2063%20167%2080%200%206%20-25%2013%20-55%2018%20-172%2024%20-230%2044%20-269%2093%20-49%2062%20-12%20130%20166%20304%20200%20197%20204%20201%20200%20214%20-12%2033%20-124%20-18%20-255%20-115%20-45%20-34%20-85%20-60%20-87%20-57%20-3%202%204%2027%2015%2055%2010%2028%2016%2061%2013%2074%20-9%2036%20-52%2078%20-92%2089%20-60%2016%20-170%2011%20-266%20-14z%22%2F%3E%20%3Cpath%20d%3D%22M6170%205183%20c-36%20-6%20-131%20-32%20-155%20-43%20-11%20-4%20-45%20-19%20-76%20-33%20l-56%20-25%2010%2029%20c18%2047%201%2054%20-121%2053%20-59%20-1%20-125%20-6%20-147%20-12%20-22%20-6%20-69%20-18%20-104%20-27%20-36%20-8%20-108%20-36%20-162%20-61%20-97%20-46%20-97%20-46%20-192%20-43%20-101%204%20-137%2020%20-137%2062%200%2030%20-31%2075%20-62%2088%20-47%2019%20-121%206%20-185%20-33%20-32%20-20%20-92%20-50%20-133%20-68%20-229%20-99%20-390%20-247%20-477%20-437%20-34%20-73%20-42%20-176%20-19%20-225%2018%20-38%2071%20-73%20127%20-83%20107%20-20%20346%2099%20526%20261%2055%2050%2081%2084%20136%20183%2056%2099%2073%20122%2095%20127%2091%2020%20295%2081%20342%20103%2038%2017%2077%2026%20130%2028%2087%205%20123%20-9%20128%20-48%204%20-33%20-27%20-74%20-174%20-234%20-192%20-209%20-314%20-363%20-314%20-397%200%20-26%2031%20-23%2099%2011%2069%2036%20107%2076%20152%20166%2051%2099%20140%20208%20321%20392%2076%2077%20115%20110%20122%20103%208%20-5%2039%20-2%2086%2011%2040%2010%2089%2019%20107%2019%2044%200%2077%20-32%2068%20-67%20-16%20-66%20-137%20-201%20-352%20-395%20-72%20-65%20-135%20-127%20-138%20-138%20-18%20-58%2022%20-83%20170%20-107%2098%20-16%20113%20-16%20217%20-1%2080%2012%20128%2025%20172%2047%2039%2019%2062%2026%2065%2019%209%20-28%2057%20-58%20108%20-68%20125%20-26%20440%2050%20526%20127%2016%2015%2017%2014%2017%20-19%200%20-49%2051%20-94%20116%20-104%20149%20-22%20461%2048%20663%20149%20144%2071%20111%2095%20-69%2048%20-250%20-64%20-420%20-45%20-420%2047%200%2054%2033%20102%20250%20367%2072%2088%20133%20170%20136%20183%208%2028%20-12%2052%20-42%2052%20-14%200%20-55%20-15%20-92%20-34%20-72%20-36%20-53%20-16%20-389%20-430%20-45%20-55%20-97%20-126%20-115%20-157%20l-33%20-57%20-116%20-7%20c-165%20-10%20-239%2013%20-239%2074%200%2044%2049%20108%20337%20439%2035%2040%2068%2084%2074%2099%2022%2059%20-21%2087%20-94%2058%20-50%20-19%20-214%20-111%20-239%20-133%20-26%20-22%20-23%20-50%206%20-54%2022%20-3%2010%20-20%20-126%20-178%20-165%20-192%20-219%20-260%20-242%20-305%20l-15%20-29%20-123%203%20c-131%203%20-249%2023%20-268%2047%20-7%207%20-9%2025%20-6%2038%203%2014%2091%20106%20202%20213%20215%20207%20263%20264%20271%20322%206%2045%20-18%2075%20-69%2085%20-31%206%20-36%206%20-78%20-1z%20m-1510%20-252%20c0%20-31%2032%20-60%2085%20-79%2061%20-22%2066%20-41%2034%20-127%20-16%20-42%20-38%20-75%20-83%20-120%20-125%20-124%20-263%20-150%20-322%20-59%20-25%2037%20-14%20137%2021%20202%2037%2067%20118%20145%20189%20181%2063%2031%2076%2032%2076%202z%22%2F%3E%20%3Cpath%20d%3D%22M9280%205184%20c-162%20-30%20-390%20-129%20-390%20-170%200%20-21%2044%20-17%20135%2012%2097%2030%20219%2041%20255%2022%2037%20-20%2036%20-55%20-2%20-112%20-41%20-63%20-243%20-272%20-353%20-366%20-87%20-75%20-116%20-120%20-98%20-149%2031%20-50%20142%20-71%20372%20-71%20164%200%20217%2011%20294%2059%2054%2035%2063%2067%2021%2077%20-14%204%20-61%204%20-103%200%20-43%20-3%20-124%20-1%20-182%205%20-156%2015%20-196%2048%20-149%20123%2011%2019%20100%20110%20197%20203%20208%20198%20253%20251%20253%20297%200%2056%20-27%2071%20-134%2073%20-50%200%20-102%20-1%20-116%20-3z%22%2F%3E%20%3Cpath%20d%3D%22M8160%205169%20c-137%20-22%20-325%20-75%20-396%20-112%20-44%20-23%20-70%20-55%20-56%20-69%208%20-8%2030%20-6%2084%2010%20207%2059%20358%2051%20358%20-19%200%20-22%20-50%20-89%20-145%20-194%20-130%20-144%20-355%20-420%20-352%20-430%207%20-21%2050%20-16%20110%2013%2087%2040%20128%2079%20166%20159%2056%20114%20144%20231%20293%20388%2064%2068%2084%2084%20102%2080%2011%20-3%2050%204%2086%2016%2080%2026%20227%2037%20270%2019%2024%20-10%2030%20-18%2030%20-43%200%20-35%20-17%20-59%20-155%20-217%20-95%20-109%20-264%20-311%20-313%20-374%20-31%20-40%20-28%20-56%208%20-56%2043%200%20141%2052%20178%2095%2018%2020%2046%2064%2063%2098%2057%20112%20137%20216%20351%20450%20133%20145%20145%20162%20128%20182%20-19%2022%20-192%2020%20-301%20-5%20-97%20-21%20-224%20-63%20-283%20-92%20l-39%20-20%2031%2038%20c39%2047%2040%2071%206%2084%20-30%2012%20-147%2011%20-224%20-1z%22%2F%3E%20%3Cpath%20d%3D%22M2669%204002%20c-122%20-44%20-281%20-171%20-357%20-283%20-40%20-59%20-71%20-140%20-78%20-205%20-8%20-63%209%20-80%2027%20-27%2017%2051%2043%2098%2092%20161%2068%2089%20253%20260%20355%20327%2069%2045%2049%2059%20-39%2027z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
  -webkit-mask-image:var(--logo-mask);
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-image:var(--logo-mask);
  mask-repeat:no-repeat;
  mask-size:100% 100%;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.09));
}

/* The chrome overlays the silver fallback rather than replacing it, so a
   mask that fails to load degrades to the plain logo instead of nothing. */
@supports ((mask-image:url("")) or (-webkit-mask-image:url(""))){
  .chrome{display:block;}
}

.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;
}

/* ================= text ================= */
/* rule under the logo, matching the one above the footer: same weight, same
   1.25rem of air beneath. The two rules top and tail the text block. */
.copy{
  max-width:100%;
  border-top:1px solid var(--rule);
  /* deliberately asymmetric: less air above the rule than below it. The rule
     reads as the mark's baseline rather than as a divider stranded midway,
     and the lede gets room to start. The footer rule keeps its own tighter
     1.25rem because what follows it is 11px utility type, not display. */
  padding-top:var(--space-l);
}
.copy p{margin:0 0 var(--space-m);}
.copy p:last-child{margin-bottom:0;}

/* Hierarchy: lede (who we are) is the page's primary statement;
   the close is a quieter italic coda, no longer competing with it. */
.lede{
  font-family:var(--font-serif);
  /* Regular. Light type on a dark ground haloes outward, so a weight reads
     heavier than the same weight on white — Medium at this size was doing the
     job of a semibold. Size and colour already carry the hierarchy; weight was
     a third signal saying the same thing. */
  font-weight:400;
  /* text faces are spaced for text sizes; at 34px Merlo's default fit is
     fractionally loose, so a touch of negative tracking tightens the line */
  letter-spacing:-0.006em;
  /* Sized off the CONTAINER, not the viewport, so it always fills exactly one
     line. The Spanish is the binding string at 31.61x its font size, so
     100/31.61 = 3.164cqi would fill the column edge to edge; 3.05cqi leaves
     ~3.5% of margin against browser/metric variation. Below roughly a 660px
     column the floor takes over and it wraps — correct on a phone. */
  font-size:calc(var(--fit) * clamp(1.25rem,3.05cqi,2.75rem));
  line-height:1.35;
  color:var(--ink);
  text-wrap:balance;
  margin-bottom:var(--space-s);
}

/* Ragged right, not justified. A browser can only justify by stretching word
   spaces — it has no letterfit or glyph-width adjustment, and no multi-line
   composer. At this measure that pushed word spaces to 1.5x normal on average
   and 2.6x at worst, against a 0.80-1.33x tolerance; widening to 108 characters
   still didn't get inside it, and hyphenation only moved the average by 0.03.
   Ragged holds every word space at exactly 1.0x — an even grey, at the cost of
   an uneven right edge. The block stays centred on the page. */
.copy .body-text{
  color:var(--silver);
  max-width:var(--measure-text);
  /* 1.85, up from 1.62. Leading is the one real defence against a long
     measure: the wider the column, the further the eye travels back to find
     the next line, and generous line spacing is what stops it landing on the
     wrong one. Non-negotiable at this width. */
  line-height:1.85;
  /* off deliberately: with a ragged edge there is nothing to fill, and auto
     hyphenation was offering breaks like "anot-/her" */
  -webkit-hyphens:none;
  hyphens:none;
  text-wrap:pretty; /* browser optimises the rag and avoids a widowed last line */
}

.copy .close{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:calc(var(--fit) * clamp(1.125rem,min(1.1rem + 1.05vw,3.3vh),1.75rem)); /* just under the lede */
  line-height:1.3;
  /* silver, not ink: two elements at maximum brightness were competing for
     the same eye. The lede is now the only full-white statement on the page;
     the close recedes to the text colour and reads as a coda, its size and
     italic doing the work its brightness used to. 10.6:1 on black. */
  color:var(--silver);
  margin-top:var(--space-l);
  text-wrap:balance;
}

::selection{background:rgba(179,185,192,.28);}

/* ================= footer ================= */
/* One row spanning the full column: the rule and the two ends give the column
   a stated right edge, which is what stops the paragraph's rag from looking
   like an accident. Also saves a line of height over the stacked version. */
.foot{
  margin-top:var(--space-l);
  padding-top:calc(var(--fit) * 1.25rem);
  border-top:1px solid var(--rule);
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:.75rem 1.5rem;
  /* the one sans on the page: utility type, deliberately unrhetorical, so
     it reads as a signpost rather than as part of the statement above */
  font-family:var(--font-sans);
  font-weight:500;
  font-size:.6875rem;   /* sans caps read larger than serif caps — down from .8 */
  letter-spacing:.15em;
  text-transform:uppercase;
  font-feature-settings:"kern" 1;
}
.foot a{
  color:var(--silver);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:.15em;
  transition:color .2s ease,border-color .2s ease;
}
.foot a:hover,.foot a:focus-visible{
  color:var(--ink);
  border-bottom-color:var(--rule);
}

.lang{display:flex;gap:.5rem;align-items:center;}
.lang button{
  font:inherit;letter-spacing:inherit;
  background:none;border:0;padding:.2em .1em;
  color:var(--silver-dim);
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition:color .2s ease;
}
.lang button:hover{color:var(--silver);}
.lang button[aria-pressed="true"]{
  color:var(--ink);
  border-bottom-color:var(--silver);
}
.lang span{color:var(--silver-dim);opacity:.5;}

:focus-visible{outline:2px solid var(--silver);outline-offset:3px;}