/* The secondary pages (privacy, terms, accessibility): the same ground, the
   same faces, the lockup, and the content on one dark plate with the
   hammered rail down its left edge. No motion beyond hover. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/marcellus-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#07080A;
  --plate:#101216;
  --plate-hi:#161920;
  --silver:#EDEEF1;
  --silver-2:#C4C7CE;
  --silver-dim:#9CA0AA;
  --gold-hi:#E9D6A0;
  --hair:rgba(255,255,255,.085);
  --hair-lit:rgba(233,214,160,.38);
  --r:15px;
  --col:440px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;color-scheme:dark;background:var(--ink)}
html:not(.en) [lang="en"]{display:none}
html.en [lang="es"]{display:none}

body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--silver);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

.ground{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url(/assets/steel-dark.webp);
  background-size:cover;
  background-position:50% 20%;
  opacity:.36;
}
.ground::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(130% 66% at 50% 6%,transparent 20%,rgba(7,8,10,.80) 70%,rgba(7,8,10,.96) 100%);
}

main{
  position:relative;
  z-index:2;
  width:100%;
  max-width:var(--col);
  margin:0 auto;
  padding:clamp(20px,5vw,30px) 20px calc(38px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- ES | EN ---------- */
.langbar{width:100%;display:flex;justify-content:flex-end;min-height:44px}
.lang{display:none}
html.js .lang{
  display:flex;
  align-items:stretch;
  border:1px solid var(--hair);
  border-radius:11px;
  background:rgba(16,18,22,.72);
  overflow:hidden;
}
.lang button{
  min-width:44px;min-height:44px;padding:0 4px;margin:0;border:0;background:none;
  font:inherit;font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--silver-dim);
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:color .2s ease,background-color .2s ease;
}
.lang button[aria-pressed="true"]{color:var(--gold-hi);background:rgba(233,214,160,.10)}
.lang button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:-3px}
.lang .sep{align-self:center;color:rgba(156,160,170,.5);font-size:11px}

/* ---------- the lockup, a link home ---------- */
.mast{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:clamp(10px,3vh,26px) 0 0;
  padding:6px 8px;
  min-height:44px;
  border-radius:12px;
  text-decoration:none;
}
.mast:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.mast .mark{width:58px;height:58px;display:block;flex:0 0 auto}
.mast .wordmark{width:min(206px,52vw);height:auto;display:block}

/* ---------- the plate ---------- */
.plate{
  position:relative;
  width:100%;
  margin:clamp(22px,5vw,30px) 0 0;
  padding:24px 20px 26px 28px;
  background-color:var(--plate);
  background-image:linear-gradient(rgba(9,10,13,.80),rgba(9,10,13,.80)),url(/assets/steel-dark.webp);
  background-size:auto,var(--col) auto;
  background-position:0 0,0 -120px;
  background-repeat:no-repeat;
  border:1px solid var(--hair);
  border-radius:var(--r);
  overflow:hidden;
}
.plate::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:7px;
  background-image:url(/assets/rail-hammered.webp);
  background-size:7px 300px;
  background-position:0 -30px;
  background-repeat:repeat-y;
  opacity:.86;
}

h1{
  margin:0;
  font-family:'Marcellus',Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(21px,5.6vw,24px);
  line-height:1.25;
  letter-spacing:.014em;
  color:var(--silver);
}
.lede{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--silver)}
h2{
  margin:24px 0 0;
  font-family:'Marcellus',Georgia,serif;
  font-weight:400;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--silver-dim);
}
h2 + p,h2 + ul{margin-top:8px}
.plate p{margin:10px 0 0;font-size:13.5px;font-weight:300;line-height:1.6;color:var(--silver-2)}
.plate ul{margin:8px 0 0;padding:0 0 0 18px;font-size:13.5px;font-weight:300;line-height:1.6;color:var(--silver-2)}
.plate li{margin-top:6px}
.plate a{color:var(--silver);text-decoration:none;border-bottom:1px solid rgba(233,214,160,.3)}
.plate a:hover{color:var(--gold-hi);border-bottom-color:rgba(233,214,160,.7)}
.plate a:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

/* ---------- back to the links ---------- */
.back{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:56px;
  margin:12px 0 0;
  padding:0 16px 0 24px;
  font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--silver);text-decoration:none;
  background-color:var(--plate);
  border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;
  transition:border-color .22s ease,transform .22s ease;
}
.back::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:url(/assets/rail-hammered.webp) 0 -90px/7px 300px repeat-y;opacity:.86;
}
.back:hover,.back:focus-visible{border-color:var(--hair-lit);transform:translateY(-2px)}
.back:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.back svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:var(--silver-dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- footer ---------- */
footer{
  width:100%;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--hair);
  text-align:center;font-size:12px;font-weight:300;line-height:1.75;color:var(--silver-dim);
}
footer a{color:var(--silver-2);text-decoration:none;border-bottom:1px solid rgba(233,214,160,.26)}
footer a:hover{color:var(--gold-hi);border-bottom-color:rgba(233,214,160,.7)}
footer a:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.colophon{
  margin:15px 0 0;font-family:'Marcellus',Georgia,serif;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--silver-2);
}
.legal{margin:8px 0 0;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:2px;font-size:12px}
.legal a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-bottom:0;color:var(--silver-2)}
.legal a[aria-current="page"]{color:var(--gold-hi)}
.legal .dot{color:rgba(156,160,170,.5)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}