/* Era Nocturna de Vielha · ANÜK LAB */
:root{
  --ink:#0c0d0f;
  --ink-2:#17191d;
  --paper:#f2f2ef;
  --white:#ffffff;
  --mute:#8b9097;
  --mute-d:#5d6168;
  --turq:#5aafb9;
  --led:#ff3b30;
  --rule:rgba(255,255,255,.14);
  --rule-d:rgba(12,13,15,.14);
  --cond:"Archivo", "Arial Narrow", sans-serif;
  --sans:"Archivo", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --max:1360px;
  --pad:clamp(16px,3.4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* type */
.d{font-family:var(--cond);font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.005em;margin:0}
.d-xxl{font-size:clamp(68px,13vw,210px)}
.hero .d-xxl{font-size:clamp(68px,11.5vw,190px)}
.d{overflow-wrap:anywhere}
.d-xl{font-size:clamp(56px,9vw,148px)}
.d-l{font-size:clamp(44px,6vw,92px)}
.d-m{font-size:clamp(32px,3.6vw,52px)}
.d-s{font-size:28px;line-height:.95}
.lab{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.lead{font-size:clamp(20px,2vw,26px);line-height:1.35;max-width:30ch;margin:0}
.t-turq{color:var(--turq)}
.led{font-family:var(--mono);color:var(--led);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* header */
.hd{position:sticky;top:0;z-index:20;background:var(--ink);border-bottom:1px solid var(--rule)}
.hd .wrap{display:flex;align-items:center;height:68px;gap:28px;max-width:none}
.hd .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.hd .brand img{height:44px;width:auto}
.hd .brand span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mute);text-transform:uppercase;line-height:1.3}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#c9ccd1;padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover{color:var(--white)}
.nav a[aria-current="page"]{color:var(--white);border-bottom-color:var(--turq)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;background:var(--white);color:var(--ink);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:1px solid var(--white)}
.btn:hover{background:var(--turq);border-color:var(--turq)}
.btn.line{background:transparent;color:inherit;border-color:currentColor}
.btn.line:hover{background:var(--white);color:var(--ink);border-color:var(--white)}
.hd .btn{min-height:40px}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--rule);color:var(--white);height:44px;padding:0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:1020px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;background:var(--ink);border-bottom:1px solid var(--rule);padding:8px var(--pad) 18px}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:13px}
  .nav a[aria-current="page"]{border-bottom-color:var(--rule);color:var(--turq)}
  .hd .btn{display:none}
  .hd .brand span{display:none}
}

/* home hero: type left, photo right */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);min-height:calc(100svh - 68px);border-bottom:1px solid var(--rule)}
.hero-txt{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(28px,4vw,56px) var(--pad) clamp(28px,4vw,48px)}
.hero-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hero h1 span{display:block}
.hero-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);margin-top:40px}
.hero-foot div{padding:16px 16px 0 0}
.hero-foot div+div{padding-left:16px;border-left:1px solid var(--rule)}
.hero-foot b{display:block;font-family:var(--cond);font-stretch:62%;font-weight:700;font-size:30px;text-transform:uppercase;line-height:1;margin-top:6px}
.hero-ph{position:relative;overflow:hidden;background:var(--ink-2)}
.hero-ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-ph figcaption{position:absolute;right:14px;bottom:12px;color:rgba(255,255,255,.8)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-ph{order:-1;aspect-ratio:4/5}
  .hero-foot{grid-template-columns:1fr 1fr}
  .hero-foot div:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;border-top:1px solid var(--rule);margin-top:14px}
}

/* page hero (inner pages) */
.ph-hero{position:relative;min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--rule)}
.ph-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,13,15,.85),rgba(12,13,15,0) 60%)}
.ph-hero .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(28px,4vw,48px)}
.ph-hero .lab{color:#d5d8dc;display:block;margin-bottom:14px}

/* sections */
.sec{padding:clamp(72px,9vw,128px) 0}
.sec.tight{padding:clamp(48px,6vw,80px) 0}
.light{background:var(--paper);color:var(--ink)}
.light .lab{color:var(--mute-d)}
.rule-top{border-top:1px solid var(--rule)}
.light.rule-top{border-color:var(--rule-d)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px)}
.split-r{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.split,.split-r{grid-template-columns:1fr}}
.prose p{margin:0 0 1em;max-width:58ch}
.prose p:last-child{margin-bottom:0}
.light .prose p{color:#2a2d33}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.more{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.more:hover{color:var(--turq)}

/* race rows */
.rows{border-top:1px solid var(--rule)}
.light .rows{border-color:var(--rule-d)}
.row{display:grid;grid-template-columns:minmax(0,2.1fr) repeat(3,minmax(0,1fr)) 32px;gap:20px;align-items:center;padding:22px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.light .row{border-color:var(--rule-d)}
.row .d{font-size:clamp(40px,5vw,72px)}
.row .v{font-size:15px}
.row .v .lab{display:block;margin-bottom:2px}
.row .arr{font-family:var(--mono);font-size:18px;justify-self:end;transition:transform .2s}
a.row:hover .arr{transform:translateX(4px)}
a.row:hover .d{color:var(--turq)}
@media (max-width:760px){
  .row{grid-template-columns:1fr 1fr;row-gap:10px}
  .row .d{grid-column:1/-1}
  .row .arr{display:none}
}

/* rail */
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 18px;scrollbar-width:thin;scrollbar-color:#3a3d43 transparent}
.rail figure{flex:0 0 clamp(240px,24vw,330px);margin:0;scroll-snap-align:start}
.rail img{aspect-ratio:4/5;object-fit:cover;width:100%}
.rail figcaption{display:flex;gap:12px;align-items:baseline;padding-top:12px;border-top:1px solid var(--rule);margin-top:12px}
.rail figcaption .led{font-size:15px}
.rail figcaption span:last-child{font-size:15px}

/* full photo band */
.band{position:relative}
.band img{width:100%;height:clamp(320px,62vw,820px);object-fit:cover}
.band figcaption{position:absolute;left:var(--pad);bottom:16px;color:rgba(255,255,255,.85)}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-d)}
.nums div{padding:22px 20px 0 0}
.nums div+div{padding-left:20px;border-left:1px solid var(--rule-d)}
.nums b{display:block;font-family:var(--cond);font-stretch:62%;font-weight:800;font-size:clamp(56px,7vw,104px);line-height:.9}
.nums span{display:block;margin-top:8px;font-size:15px;color:#3d4148;max-width:24ch}
@media (max-width:760px){.nums{grid-template-columns:1fr 1fr}.nums div:nth-child(3){border-left:0;padding-left:0}.nums div{padding-bottom:20px}}

/* times table */
.times{width:100%;border-collapse:collapse;font-size:15px}
.times th,.times td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.times thead th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:400}
.times td.y{font-family:var(--cond);font-stretch:62%;font-weight:800;font-size:30px}
.times td.led{font-size:16px}
.times small{display:block;font-family:var(--mono);font-size:10px;color:var(--mute);letter-spacing:.04em;margin-top:2px}
.times a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor}
.times a:hover{color:var(--turq)}
.scroll-x{overflow-x:auto;position:relative}
.scroll-x table{min-width:680px}

/* photo grids */
.mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.mosaic figure{margin:0;overflow:hidden;background:var(--ink-2)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.m-a{grid-column:span 5;grid-row:span 2}
.m-b{grid-column:span 7}
.m-c{grid-column:span 4}
.m-d{grid-column:span 3}
.mosaic .r1{aspect-ratio:7/4}
.mosaic .r2{aspect-ratio:4/5}
@media (max-width:760px){.mosaic>*{grid-column:span 12!important;grid-row:auto!important}}
.masonry{columns:3 320px;column-gap:8px}
.masonry figure{margin:0 0 8px;break-inside:avoid}
.masonry img{width:100%}
.masonry figcaption{font-family:var(--mono);font-size:11px;color:var(--mute);padding:6px 0 4px}

/* program list */
.prog{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-d)}
.prog li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--rule-d)}
.prog .h{font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums}
.prog strong{display:block;font-family:var(--cond);font-stretch:62%;font-weight:800;font-size:30px;text-transform:uppercase;line-height:1}
.prog span{color:#3d4148;font-size:15px}
.dark .prog{border-color:var(--rule)} .dark .prog li{border-color:var(--rule)} .dark .prog span{color:var(--mute)}

/* fact list */
.facts{display:grid;grid-template-columns:auto 1fr;gap:12px 28px;margin:0}
.facts dt{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute-d);padding-top:3px}
.facts dd{margin:0}
.dark .facts dt{color:var(--mute)}

/* kids */
.kids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-d)}
.kids div{padding:24px 20px 0 0}
.kids div+div{border-left:1px solid var(--rule-d);padding-left:20px}
.kids b{display:block;font-family:var(--cond);font-stretch:62%;font-weight:800;font-size:clamp(40px,4.4vw,64px);text-transform:uppercase;line-height:.9}
.kids p{margin:10px 0 0;font-size:15px;color:#3d4148}
@media (max-width:760px){.kids{grid-template-columns:1fr}.kids div+div{border-left:0;padding-left:0;border-top:1px solid var(--rule-d);margin-top:20px}}

/* faq */
.faq details{border-bottom:1px solid var(--rule-d)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:20px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 24px;max-width:62ch;color:#3d4148}

/* partners */
.pt{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:26px 0;border-top:1px solid var(--rule-d)}
.pt ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 40px;font-size:clamp(20px,2vw,26px);font-weight:600}
.pt p{margin:0;color:var(--mute-d)}
@media (max-width:760px){.pt{grid-template-columns:1fr;gap:10px}}

/* cta strip */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
@media (max-width:760px){.cta{grid-template-columns:1fr}}

/* footer */
.ft{border-top:1px solid var(--rule);padding:56px 0 32px;font-size:14px;color:#b9bdc3}
.ft .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
.ft img{height:84px;width:auto;margin-bottom:16px}
.ft h4{margin:0 0 14px;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft a{text-decoration:none}
.ft a:hover{color:var(--turq)}
.ft .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--mute)}
@media (max-width:860px){.ft .cols{grid-template-columns:1fr 1fr}}

.credit{font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--turq);outline-offset:3px}