:root{
  color-scheme: dark;
  --deep:#0a1a1f;
  --deep-2:#0f252c;
  --deep-line:#1e3a42;
  --sea:#6f9c98;
  --fog:#e7ebe7;
  --fog-2:#dce2de;
  --fog-line:#c3ccc7;
  --ink:#0c1518;
  --ink-soft:#3b4a4e;
  --brass:#c8a35f;
  --brass-deep:#8c6a2f;
  --mute:#8fa3a4;
  --body-dark:#c9d3d1;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--deep);color:var(--fog);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;
  font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(18px,5vw,64px)}
.mono{font-family:var(--mono);font-weight:300;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
h1,h2,h3{margin:0;font-weight:200;text-wrap:balance;font-variation-settings:"wdth" 125}
p{text-wrap:pretty}

/* TOP BAR */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--deep) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--deep-line)}
.bar .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:26px;height:26px;display:block;color:var(--brass)}
.brand span{font-weight:500;font-size:15px;letter-spacing:.34em;font-variation-settings:"wdth" 125}
.clocks{display:flex;justify-content:center;gap:28px;color:var(--mute)}
.clocks b{font-weight:400;color:var(--fog);margin-left:8px;font-variant-numeric:tabular-nums}
.bar nav{display:flex;gap:24px;justify-content:flex-end}
.bar nav a{text-decoration:none;color:var(--mute);transition:color .2s}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--fog)}
@media (max-width:900px){.clocks{display:none}.bar .wrap{grid-template-columns:auto 1fr}}
@media (max-width:520px){.bar nav{gap:16px}.bar nav a.opt{display:none}}

/* SHARED BLOCKS */
.block{padding-block:clamp(80px,11vw,148px)}
.light{background:var(--fog);color:var(--ink);color-scheme:light}
.label{display:flex;align-items:center;gap:14px;color:var(--brass)}
.label::before{content:"";width:28px;height:1px;background:currentColor}
.light .label{color:var(--brass-deep)}
.btn{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 22px;border:1px solid var(--brass);color:var(--deep);background:var(--brass);
  transition:background .2s,color .2s;
}
.btn:hover{background:transparent;color:var(--brass)}
.btn.ghost{background:transparent;color:var(--fog);border-color:var(--deep-line)}
.btn.ghost:hover{border-color:var(--brass);color:var(--brass)}
.light .btn.ghost{color:var(--ink);border-color:var(--fog-line)}
.light .btn.ghost:hover{border-color:var(--brass-deep);color:var(--brass-deep)}
.btn .arr{font-family:var(--sans)}

/* CONTACT + FOOTER */
.contact{background:var(--deep-2);border-top:1px solid var(--deep-line)}
.contact h2{font-size:clamp(40px,6.6vw,96px);line-height:.98;letter-spacing:-.02em;margin-top:28px;max-width:12ch}
.contact h2 em{font-style:normal;color:var(--brass)}
.contact .intro{max-width:50ch;color:var(--body-dark);margin:32px 0 0}
.channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:64px;padding-top:28px;border-top:1px solid var(--deep-line)}
@media (max-width:760px){.channels{grid-template-columns:1fr;gap:28px}}
.channels .mono{color:var(--sea);display:block;margin-bottom:12px}
.channels .val{font-size:22px;font-weight:300;word-break:break-word;font-variation-settings:"wdth" 110}
.channels a.val{text-decoration:none;border-bottom:1px solid var(--brass-deep);transition:border-color .2s}
.channels a.val:hover{border-color:var(--brass)}
.window{margin-top:8px;color:var(--mute);font-size:14px}
footer{background:var(--deep-2);border-top:1px solid var(--deep-line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:28px;color:var(--mute)}
footer a{text-decoration:none}
footer a:hover{color:var(--fog)}