:root{
  --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);
  --measure:40rem;       /* display measure (lede/close) */
  --measure-text:34rem;  /* reading measure — ~65ch of Garamond at text size */
  /* one spacing scale for all vertical rhythm, instead of per-element values */
  --space-s:clamp(1.25rem,2.5vh,1.75rem);
  --space-m:clamp(1.75rem,3.5vh,2.5rem);
  --space-l:clamp(2.5rem,6vh,4rem);
}

*{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; EB Garamond is the text-optimised
     companion to Cormorant (same Garamond lineage, sturdier at small sizes) */
  font-family:"EB Garamond",Georgia,"Times New Roman",serif;
  /* Garamonds run small on the body — sized up ~15% vs the old sans */
  font-size:clamp(1.0625rem,1rem + 0.35vw,1.1875rem);
  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:center;
  padding:clamp(2rem,6vw,4rem) clamp(1.25rem,6vw,3rem);
}

.page{
  width:100%;
  max-width:56rem;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ================= logo ================= */
.logo{
  position:relative;
  width:min(100%,22rem);
  aspect-ratio:1/1;
  margin:0 0 var(--space-m);
  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%22M8145%206200%20c-105%20-11%20-223%20-45%20-335%20-95%20-156%20-70%20-328%20-183%20-314%20-206%207%20-11%2047%205%2097%2040%20175%20119%20449%20192%20615%20162%20192%20-34%20313%20-153%20342%20-336%2024%20-153%20-46%20-373%20-199%20-619%20-135%20-217%20-249%20-316%20-361%20-316%20-81%200%20-113%2073%20-71%20165%2045%2099%20115%20147%20258%20176%20111%2023%20135%2036%20107%2056%20-40%2029%20-130%2010%20-271%20-58%20-122%20-59%20-195%20-124%20-238%20-214%20-54%20-114%20-41%20-201%2038%20-238%2084%20-40%20150%20-18%20337%20114%20122%2086%20202%20159%20281%20255%20266%20326%20367%20665%20263%20881%20-80%20165%20-302%20259%20-549%20233z%22%2F%3E%20%3Cpath%20d%3D%22M3493%205846%20c-144%20-69%20-295%20-186%20-352%20-273%20-40%20-61%20-41%20-83%20-1%20-83%2035%200%2038%20-13%2015%20-67%20-20%20-48%20-65%20-102%20-209%20-253%20-157%20-164%20-220%20-242%20-256%20-314%20-36%20-72%20-37%20-99%20-6%20-131%2034%20-33%2087%20-45%20217%20-47%2093%20-1%20124%202%20170%2019%2064%2024%20139%2069%20139%2083%200%206%20-37%2010%20-87%2010%20-161%200%20-253%2044%20-239%20113%208%2040%2077%20140%20182%20267%2048%2058%20119%20148%20158%20200%2079%20108%20119%20158%20255%20319%20143%20168%20143%20169%20136%20181%20-11%2018%20-49%2011%20-122%20-24z%22%2F%3E%20%3Cpath%20d%3D%22M4019%205803%20c-62%20-53%20-70%20-120%20-17%20-157%2068%20-48%20168%2017%20168%20108%200%2076%20-86%20104%20-151%2049z%22%2F%3E%20%3Cpath%20d%3D%22M9087%205395%20c-56%20-21%20-98%20-54%20-113%20-90%20-10%20-26%20-29%20-40%20-86%20-67%20-92%20-45%20-222%20-142%20-287%20-215%20-60%20-67%20-92%20-131%20-99%20-195%20-4%20-44%20-2%20-50%2030%20-82%2042%20-42%2092%20-53%20167%20-38%20183%2039%20392%20206%20490%20395%2012%2021%2034%2037%2086%2058%2078%2033%20100%2050%2092%2073%20-7%2018%20-43%2021%20-83%206%20-34%20-13%20-56%203%20-48%2036%209%2035%20-4%2092%20-27%20115%20-22%2022%20-67%2024%20-122%204z%20m-113%20-214%20c3%20-5%20-3%20-20%20-14%20-34%20-35%20-45%20-30%20-50%2050%20-51%2042%20-1%2045%20-3%2042%20-26%20-9%20-78%20-88%20-174%20-188%20-227%20-114%20-61%20-190%20-48%20-215%2035%20-10%2034%20-8%2045%209%2085%2035%2079%20149%20187%20227%20215%2037%2013%2082%2015%2089%203z%22%2F%3E%20%3Cpath%20d%3D%22M4435%205327%20c-162%20-84%20-213%20-117%20-276%20-184%20-95%20-101%20-189%20-253%20-189%20-305%200%20-41%2043%20-100%2089%20-125%2054%20-28%2099%20-29%20183%20-3%20136%2042%20262%20155%20339%20304%2073%20142%2089%20160%20158%20181%2067%2020%20121%2049%20121%2065%200%206%20-25%2010%20-56%2010%20-70%200%20-94%2012%20-94%2049%200%2016%20-9%2040%20-21%2055%20-17%2022%20-28%2026%20-67%2025%20-38%200%20-75%20-15%20-187%20-72z%20m-3%20-132%20c11%20-14%2036%20-32%2055%20-40%2032%20-14%2034%20-17%2028%20-47%20-20%20-96%20-124%20-247%20-197%20-284%20-40%20-21%20-105%20-18%20-139%207%20-32%2023%20-53%2083%20-43%20124%204%2015%2028%2059%2054%2098%2096%20146%20194%20203%20242%20142z%22%2F%3E%20%3Cpath%20d%3D%22M7489%205347%20c-20%20-8%20-49%20-23%20-65%20-34%20-16%20-11%20-58%20-33%20-93%20-48%20-209%20-87%20-368%20-266%20-379%20-426%20-5%20-70%2012%20-103%2063%20-125%2075%20-31%20160%20-7%20311%2088%20110%2069%20184%20145%20242%20248%20l47%2083%2090%2022%20c202%2052%20226%2075%2078%2075%20-112%200%20-142%2011%20-157%2057%20-21%2063%20-71%2084%20-137%2060z%20m-139%20-192%20c0%20-24%2022%20-40%2083%20-59%2041%20-13%205%20-119%20-65%20-187%20-100%20-98%20-229%20-105%20-252%20-13%20-18%2072%2053%20192%20153%20256%2057%2036%2081%2037%2081%203z%22%2F%3E%20%3Cpath%20d%3D%22M3765%205336%20c-123%20-38%20-310%20-191%20-242%20-197%206%20-1%2019%20-2%2027%20-3%2035%20-3%20-11%20-72%20-139%20-209%20-51%20-54%20-96%20-109%20-101%20-122%20-23%20-61%2051%20-115%20155%20-115%20139%200%20415%2090%20415%20135%200%2020%20-101%2020%20-190%200%20-92%20-20%20-133%20-19%20-164%206%20-58%2046%20-26%20103%20167%20298%20119%20120%20157%20164%20157%20184%200%2013%20-7%2028%20-16%2031%20-20%207%20-20%207%20-69%20-8z%22%2F%3E%20%3Cpath%20d%3D%22M2080%205256%20c-284%20-87%20-544%20-261%20-623%20-419%20-23%20-45%20-27%20-62%20-20%20-83%2013%20-38%2053%20-65%20104%20-71%2049%20-5%20262%2035%20322%2060%2047%2020%2040%2037%20-16%2037%20-101%200%20-197%2047%20-197%2096%200%2049%20109%20157%20234%20233%20131%2078%20254%20104%20323%2068%2037%20-20%2083%20-82%2083%20-112%200%20-13%20-30%20-48%20-83%20-95%20-100%20-90%20-117%20-111%20-124%20-153%20-7%20-44%2031%20-89%2095%20-114%2058%20-22%20213%20-24%20287%20-4%2067%2019%20129%2051%20119%2061%20-5%204%20-45%2013%20-88%2019%20-138%2020%20-195%2069%20-166%20143%208%2018%2076%2097%20153%20174%2076%2078%20134%20145%20129%20148%20-19%2011%20-98%20-25%20-171%20-79%20-41%20-30%20-77%20-55%20-82%20-55%20-4%200%20-2%2019%206%2041%2012%2034%2013%2046%202%2068%20-30%2063%20-150%2079%20-287%2037z%22%2F%3E%20%3Cpath%20d%3D%22M6645%205233%20c-78%20-16%20-158%20-48%20-175%20-69%20-10%20-11%201%20-12%2059%20-7%2060%205%2071%203%2077%20-11%2012%20-32%20-19%20-77%20-115%20-163%20-102%20-91%20-187%20-185%20-197%20-216%20-15%20-48%2055%20-67%20255%20-67%20126%200%20159%203%20203%2020%2062%2023%20106%2055%2095%2067%20-5%204%20-75%209%20-155%2011%20-81%202%20-159%208%20-174%2013%20-69%2027%20-40%2081%20132%20247%2098%2095%20140%20142%20140%20157%200%2039%20-32%2043%20-145%2018z%22%2F%3E%20%3Cpath%20d%3D%22M5779%205200%20c-128%20-23%20-293%20-63%20-343%20-84%20-48%20-20%20-47%20-38%202%20-30%2072%2011%20285%2010%20289%20-2%206%20-19%20-105%20-132%20-212%20-214%20-111%20-86%20-215%20-182%20-215%20-199%200%20-18%2031%20-13%2088%2014%2033%2015%2089%2059%20150%20117%20124%20119%20214%20186%20326%20244%2086%2045%2093%2047%20214%2056%20136%2010%20153%206%20135%20-34%20-19%20-43%20-122%20-155%20-213%20-232%20-50%20-42%20-90%20-83%20-90%20-91%200%20-22%2039%20-38%2076%20-32%2050%208%2087%2039%20151%20125%2031%2042%20112%20132%20180%20199%2068%2067%20123%20129%20123%20138%200%208%20-11%2020%20-24%2025%20-37%2014%20-289%20-6%20-376%20-29%20-41%20-12%20-76%20-21%20-78%20-21%20-1%200%203%2010%209%2022%2010%2018%208%2024%20-7%2035%20-23%2017%20-55%2016%20-185%20-7z%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 ================= */
.copy{max-width:var(--measure);}
.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:"Cormorant",Georgia,serif;
  font-weight:500; /* was 400 — light serifs erode on a black ground */
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);
  line-height:1.35;
  color:var(--ink);
  text-wrap:balance;
}

/* Centered setting works for the 2-line lede but not a 9-line paragraph:
   the block stays centered on the page, the text inside reads left-aligned. */
.copy .body-text{
  color:var(--silver);
  max-width:var(--measure-text);
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
  text-align:justify;
  text-align-last:center; /* last line centered, echoing the page's symmetry */
  /* hyphenation is non-negotiable with justify — without it the narrow
     measure gets rivers, worst in the longer Spanish text. The language
     toggle updates <html lang>, so ES gets Spanish hyphenation rules. */
  -webkit-hyphens:auto;
  hyphens:auto;
  text-wrap:pretty;
}

.copy .close{
  font-family:"Cormorant",Georgia,serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.4rem,1.2rem + 1vw,1.75rem); /* a step up, still under the lede */
  line-height:1.3;
  color:var(--ink);
  margin-top:var(--space-l);
  text-wrap:balance;
}

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

/* ================= footer ================= */
.foot{
  margin-top:var(--space-l);
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  width:min(100%,18rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  /* letterspaced serif caps — the register of engraved title pages,
     and one less typeface on the page */
  font-weight:500;
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.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;}