/*
 * Adren Labs — adrenlabs.ai. Its own identity: not adren.ai's client design, not the Control
 * Room's look (Alex, 31 Oct 2026: "obscura la de adrenlabs, que no se vea tanto como adren").
 *
 * The structure and scale of a product page (a thin translucent local nav, one huge headline,
 * one full-bleed section per project, generous space, a closing grid of tiles); the calm of an
 * editorial research site (a display serif for the big lines, warm darks, ivory text, one warm
 * accent used sparingly, simple line drawings).
 *
 * Type: Fraunces (display serif) and Inter (text and interface), both SIL Open Font License 1.1,
 * self-hosted in ./fonts with their licences. No monospace.
 * Colour: eight values, listed in :root and nowhere else; tests/test_labs_site.py holds every
 * colour on the page to them and checks the contrast of every text pair (AA or better).
 * Motion: CSS only, transform and opacity only. Entrances on scroll use scroll-driven animations
 * where the browser has them; without them, or under prefers-reduced-motion, everything simply
 * shows. Nothing here needs JavaScript; the page loads none.
 */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces/Fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter/Inter[opsz,wght].woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* the ground: warm charcoal, never pure black */
  --deep:#0F0F0E;--ground:#141413;--raised:#1C1B18;--tile:#201F1C;
  /* the text: ivory, a softer ivory for running text, a warm grey for labels */
  --ivory:#F0EEE6;--soft:#C9C6BC;--muted:#9C998F;
  /* the one accent: copper, used sparingly (a dot, a tick, a spark, the focus ring) */
  --copper:#D9895B;
  --line:rgb(240 238 230 / .1);--line-strong:rgb(240 238 230 / .18);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1120px;--gutter:20px;--nav:52px;
}

*{box-sizing:border-box}
html{color-scheme:dark;background:var(--ground);overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 16px)}
body{margin:0;background:var(--ground);color:var(--ivory);font:400 17px/1.55 var(--sans);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,figure{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
svg{display:block}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:4px}
::selection{background:rgb(217 137 91 / .32);color:var(--ivory)}

.skip{position:fixed;left:16px;top:-96px;z-index:100;padding:12px 16px;border-radius:10px;background:var(--ivory);color:var(--ground);font-weight:600}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* ---- The local nav: thin, sticky, translucent warm charcoal with a blur ---- */
.nav{position:sticky;top:0;z-index:50;height:var(--nav);background:rgb(20 20 19 / .72);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:inset 0 -1px 0 var(--line)}
@supports not (backdrop-filter: blur(1px)){.nav{background:var(--ground)}}
.nav__in{display:flex;align-items:center;gap:8px;height:100%}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 21px/1 var(--serif);letter-spacing:-.01em;color:var(--ivory);white-space:nowrap}
.brand__mark{width:20px;height:20px;flex:none}
.nav__side{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav__links{display:none;align-items:center;gap:2px}
.nav__link{display:inline-flex;align-items:center;height:44px;padding:0 12px;font:400 13px/1 var(--sans);letter-spacing:-.005em;color:var(--soft);white-space:nowrap}
.nav__link:hover{color:var(--ivory)}
.lang{display:flex;align-items:center;font:500 12px/1 var(--sans);letter-spacing:.06em;color:var(--muted)}
.lang__link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:44px;color:var(--muted)}
.lang__link:hover{color:var(--ivory)}
.lang__link[aria-current]{color:var(--ivory);text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:6px;text-decoration-thickness:1.5px}
.lang__sep{color:var(--line-strong)}

/* ---- Type: the scale 96 · 64 · 40 · 24 · 19 · 14, fluid between phone and desktop ---- */
.label{font:500 12px/16px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.display{font:500 clamp(52px,7vw + 16px,116px)/1 var(--serif);letter-spacing:-.025em;color:var(--ivory);text-wrap:balance;
  font-variation-settings:"SOFT" 0,"WONK" 0}
.name{font:500 clamp(56px,7.4vw + 20px,128px)/.98 var(--serif);letter-spacing:-.03em;color:var(--ivory);text-wrap:balance;
  font-variation-settings:"SOFT" 0,"WONK" 0}
.h2{font:500 clamp(36px,3vw + 22px,64px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--ivory);text-wrap:balance;
  font-variation-settings:"SOFT" 0,"WONK" 0}
.hook{font:600 clamp(22px,1.5vw + 16px,40px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--ivory);text-wrap:balance}
.lede{font:400 clamp(17px,.4vw + 15px,21px)/1.5 var(--sans);color:var(--soft);text-wrap:pretty}
.small{font:400 14px/1.5 var(--sans);color:var(--soft)}

/* ---- The hero: one line, one sentence, one drawing ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:96px 0 72px;text-align:center;
  background:radial-gradient(50% 42% at 50% 0%,rgb(217 137 91 / .1),transparent 70%),var(--ground)}
.hero .label{display:inline-block;margin-bottom:24px}
.hero .display{max-width:12em;margin-inline:auto}
.hero .lede{max-width:34em;margin:24px auto 0}
.hero__art{margin:40px auto 0;max-width:1120px}

/* the hero drawing: research on the left, the lab in the middle, the three projects on the right */
.hv{width:100%;height:auto;overflow:visible}
.hv__grain{fill:rgb(240 238 230 / .2)}
.hv__obs{fill:var(--ivory)}
.hv__thread{fill:none;stroke:rgb(240 238 230 / .3);stroke-width:1.25;stroke-linecap:round}
.hv__axis{fill:none;stroke:rgb(240 238 230 / .45);stroke-width:1.25;stroke-linecap:round}
.hv__halo{fill:none;stroke:rgb(240 238 230 / .18);stroke-width:1;stroke-dasharray:2 7;stroke-linecap:round}
.hv__lens{fill:var(--raised);stroke:rgb(240 238 230 / .7);stroke-width:1.25}
.hv__core{fill:var(--copper)}
.hv__node circle:first-child{fill:var(--ground);stroke:var(--ivory);stroke-width:1.25}
.hv__node circle+circle{fill:var(--ivory)}
.hv__label{font:500 17px var(--sans);fill:var(--soft)}
.hv__cap{font:500 12px var(--sans);letter-spacing:.12em;fill:var(--muted)}
.hv__spark{fill:var(--copper)}

/* ---- The Proving Ground: an introduction, then one full-bleed section per project ---- */
.intro{padding:144px 0 24px;text-align:center}
.intro .label{display:block;margin-bottom:20px}
.intro .lede{max-width:32em;margin:20px auto 0}
.project{position:relative;padding:144px 0;text-align:center;box-shadow:inset 0 1px 0 var(--line)}
.project:first-of-type{box-shadow:none}
.project__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-bottom:28px}
.project .name{margin-inline:auto}
.project .hook{max-width:24em;margin:24px auto 0}
.project .lede{max-width:36em;margin:20px auto 0}
.stage{position:relative;margin:64px auto 0;max-width:960px;padding:clamp(20px,4vw,48px);border-radius:28px;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 0%,rgb(217 137 91 / .07),transparent 70%),linear-gradient(180deg,var(--raised),var(--ground));
  box-shadow:inset 0 1px 0 rgb(240 238 230 / .1),inset 0 0 0 1px rgb(240 238 230 / .06),0 48px 96px -48px rgb(15 15 14 / .9)}
.stage::before{content:"";position:absolute;inset:0 15% auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(217 137 91 / .55),transparent)}
.facts{display:grid;gap:0;max-width:960px;margin:56px auto 0;text-align:left}
.fact{padding:20px 0;box-shadow:inset 0 1px 0 var(--line)}
.fact__t{display:block;font:600 17px/1.3 var(--sans);letter-spacing:-.01em;color:var(--ivory)}
.fact__d{display:block;margin-top:6px;font:400 15px/1.5 var(--sans);color:var(--soft)}
.more{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:40px;font:500 17px/1 var(--sans);color:var(--copper)}
.more svg{width:14px;height:14px;transition:transform .2s var(--ease)}
.more:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.more:hover svg{transform:translateX(3px)}
.disclaimer{max-width:40em;margin:48px auto 0;padding-top:20px;box-shadow:inset 0 1px 0 var(--line);font:400 14px/1.5 var(--sans);color:var(--soft)}

/* the status badge: a hairline pill; Adren's dot is the copper one */
.badge{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:6px 14px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-strong);background:rgb(240 238 230 / .04);font:500 13px/16px var(--sans);color:var(--soft)}
.dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--muted)}
.dot--live{background:var(--copper)}
.dot--live::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--copper);opacity:0;animation:ping 2.6s var(--ease) infinite}
.dot--ring{background:transparent;box-shadow:inset 0 0 0 1.5px var(--soft)}
@keyframes ping{0%{opacity:.4;transform:scale(.4)}70%,100%{opacity:0;transform:scale(1.3)}}

/* the project drawings */
.art{width:100%;height:auto;overflow:visible}
.art__box{fill:var(--ground);stroke:rgb(240 238 230 / .5);stroke-width:1.25}
.art__box--key{fill:var(--tile);stroke:rgb(240 238 230 / .75)}
.art__row{fill:none;stroke:rgb(240 238 230 / .28);stroke-width:6;stroke-linecap:round}
.art__thread{fill:none;stroke:rgb(240 238 230 / .35);stroke-width:1.25;stroke-dasharray:3 7;stroke-linecap:round}
.art__line{fill:none;stroke:rgb(240 238 230 / .55);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.art__ring{fill:var(--raised);stroke:rgb(240 238 230 / .7);stroke-width:1.25}
.art__faint{fill:none;stroke:rgb(240 238 230 / .16);stroke-width:1}
.art__eye{fill:none;stroke:var(--ivory);stroke-width:1.5;stroke-linejoin:round}
.art__pupil{fill:var(--ivory)}
.art__dot{fill:var(--ivory)}
.art__tick{fill:none;stroke:var(--copper);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.art__accent{fill:var(--copper)}
.art__cap{font:500 15px var(--sans);letter-spacing:.1em;fill:var(--muted)}
.art__note{font:500 16px var(--sans);fill:var(--soft)}
.art__item{font:500 28px var(--sans);letter-spacing:-.01em;fill:var(--ivory)}
.art__bar{fill:none;stroke:rgb(240 238 230 / .6);stroke-width:4;stroke-linecap:round;transform-box:fill-box;transform-origin:center}
.art__m{fill:var(--ivory)}
.art__ruler{fill:none;stroke:rgb(240 238 230 / .3);stroke-width:1}

/* ---- Lab Notes and the closing tiles ---- */
.notes{padding:144px 0 120px;box-shadow:inset 0 1px 0 var(--line)}
.notes__head{text-align:center;margin-bottom:56px}
.notes__head .label{display:block;margin-bottom:20px}
.notes__head .lede{max-width:32em;margin:20px auto 0}
.bento{display:grid;gap:16px}
.tile{position:relative;display:flex;flex-direction:column;gap:12px;min-height:200px;padding:28px;border-radius:24px;background:var(--tile);
  box-shadow:inset 0 1px 0 rgb(240 238 230 / .08),inset 0 0 0 1px rgb(240 238 230 / .05)}
.tile--lab{min-height:320px;justify-content:space-between;
  background:radial-gradient(80% 70% at 100% 0%,rgb(217 137 91 / .12),transparent 60%),var(--tile)}
.tile__big{font:500 clamp(44px,3vw + 28px,72px)/1 var(--serif);letter-spacing:-.025em;color:var(--ivory);font-variation-settings:"SOFT" 0,"WONK" 0}
.tile__name{font:500 28px/1.1 var(--serif);letter-spacing:-.015em;color:var(--ivory);font-variation-settings:"SOFT" 0,"WONK" 0}
.tile__status{display:flex;align-items:center;gap:8px;font:500 15px/1.4 var(--sans);color:var(--soft)}
.tile .badge{align-self:flex-start}
.tile .more{margin-top:auto;font-size:15px}
.tile .small{margin-top:auto}
.tile__mail{font:500 clamp(18px,1vw + 12px,22px)/1.3 var(--sans);color:var(--ivory);word-break:break-word}
.tile__mail:hover{text-decoration:underline;text-decoration-color:var(--copper);text-underline-offset:5px}

/* ---- The footer ---- */
.foot{background:var(--deep);box-shadow:inset 0 1px 0 var(--line);font:400 13px/1.5 var(--sans);color:var(--muted)}
.foot__in{display:grid;gap:8px;padding-block:28px 32px}
.foot__links{display:flex;flex-wrap:wrap;gap:0 24px}
.foot__links a{display:inline-flex;align-items:center;min-height:44px;color:var(--soft)}
.foot__links a:hover{color:var(--ivory)}
.foot__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:12px;box-shadow:inset 0 1px 0 var(--line)}
.foot .lang{margin-left:-10px}

/* ---- Motion ---- */
/* the hero enters once on load */
.rise{animation:rise .9s var(--ease) both}
.rise--2{animation-delay:.1s}.rise--3{animation-delay:.2s}.rise--4{animation-delay:.35s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* the hero drawing: observations shimmer, the projects appear in turn, a spark carries research to the lab and the lab to a project */
.hv__obs{animation:shimmer 4.8s ease-in-out infinite alternate}
.hv__obs:nth-of-type(2n){animation-delay:-1.6s}.hv__obs:nth-of-type(3n){animation-delay:-3.2s}
@keyframes shimmer{from{opacity:.35}to{opacity:1}}
.hv__node{animation:appear .8s var(--ease) both}
.hv__node--1{animation-delay:.9s}.hv__node--2{animation-delay:1.1s}.hv__node--3{animation-delay:1.3s}
@keyframes appear{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.hv__spark{opacity:0;animation:spark-a 3.6s var(--ease) infinite}
.hv__spark--b{animation-name:spark-b;animation-delay:1.8s}
@keyframes spark-a{0%{opacity:0;transform:translateX(0)}15%,80%{opacity:1}100%{opacity:0;transform:translateX(192px)}}
@keyframes spark-b{0%{opacity:0;transform:translateX(0)}15%,80%{opacity:1}100%{opacity:0;transform:translateX(264px)}}
.hv__halo{transform-box:fill-box;transform-origin:center;animation:turn 60s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
/* Adren: readings travel from the tools to the Shadow, never back */
.art__dot{opacity:0;animation:read 3.2s var(--ease) infinite}
.art__dot--1{--dx:206px;--dy:88px}
.art__dot--2{--dx:206px;--dy:0px;animation-delay:1.05s}
.art__dot--3{--dx:206px;--dy:-88px;animation-delay:2.1s}
@keyframes read{0%{opacity:0;transform:translate(0,0)}15%,80%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy))}}
/* Adrenaline Project: the day as a waveform */
.art__bar{animation:hear 1.8s ease-in-out infinite alternate}
.art__bar:nth-of-type(3n){animation-delay:-.6s}.art__bar:nth-of-type(3n+1){animation-delay:-1.2s}.art__bar:nth-of-type(4n){animation-duration:2.4s}
@keyframes hear{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
/* Adren Trade: measurements settle toward the centre of the target */
.art__m{animation:settle 3s ease-in-out infinite alternate}
.art__m:nth-of-type(2n){animation-delay:-1s}.art__m:nth-of-type(3n){animation-delay:-2s}
@keyframes settle{from{opacity:.25}to{opacity:.95}}

/* scroll-driven entrances: a progressive enhancement; without support everything shows */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .reveal{animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes enter{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
  }
}

/* ---- Wider screens ---- */
@media (min-width:640px){
  :root{--gutter:32px}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
  .facts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile--lab,.tile--wide{grid-column:1 / -1}
}
@media (min-width:900px){
  .nav__links{display:flex}
}
@media (min-width:1024px){
  :root{--gutter:48px}
  .hero{padding:120px 0 96px}
  .intro{padding:200px 0 32px}
  .project{padding:168px 0}
  .notes{padding:200px 0 160px}
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tile{grid-column:span 2}
  .tile--lab{grid-column:span 4;grid-row:span 2}
  .tile--half{grid-column:span 3}
  .tile--wide{grid-column:span 3}
}
/* the drawings' words are too small to read on a phone; the text around them says the same */
@media (max-width:639px){
  .hv__label,.hv__cap,.art__cap,.art__note{display:none}
}

/* Reduced motion: nothing moves; every element rests in its end state */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hv__spark,.art__dot{opacity:0}
}