/* ============================================================
   ATMOSFERA AUDIO — minimal, black, hairline-white identity
   ============================================================ */

/* ---------- Self-hosted Inter (no third-party request to Google) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("assets/fonts/inter-200.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("assets/fonts/inter-300.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-500.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --bg: #000000;
  --bg-soft: #050505;
  --fg: #f5f5f7;
  --muted: rgba(245, 245, 247, 0.56);
  --faint: rgba(245, 245, 247, 0.34);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.28);
  --warm: #e9b486; /* echo of golden hour — used sparingly */
  --ink-soft: rgba(245, 245, 247, 0.8); /* long-form reading text */
  --paper: #f1ede7;      /* warm ivory: reads as paper next to the amber accent */
  --ink: #14110e;        /* warm near-black for text on paper */

  --maxw: 1280px;
  --pad: clamp(20px, 5vw, 80px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* The hero keeps its own scale (see .hero h1 / .hero .lead); these tokens
     drive every section below it and are deliberately quieter on desktop. */
  --f-display: clamp(2.6rem, 8vw, 7.5rem);
  --f-h2: clamp(1.5rem, 2.7vw, 2.25rem);
  --f-h3: clamp(1.05rem, 1.4vw, 1.28rem);
  --f-lead: clamp(0.98rem, 1.2vw, 1.1rem);
  --f-body: clamp(0.95rem, 1vw, 1.02rem);
  --f-small: 0.75rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis disables native smooth-scroll once active */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--fg);
  /* Helvetica Neue where it already lives on the device (macOS/iOS) — it is a
     licensed face, so it is used locally and never shipped. Inter is the
     self-hosted fallback everywhere else: same neo-grotesque skeleton, and
     unlike Arial it actually has the 200/300 weights this design depends on. */
  font-family: "Helvetica Neue", "HelveticaNeue", "Inter",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: var(--f-body);
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(233, 180, 134, 0.28); color: #fff; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.eyebrow {
  font-size: var(--f-small);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.hr { height: 1px; background: var(--line); border: 0; width: 100%; }

section { position: relative; }

/* ---------- Scroll progress (thin white line) ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, rgba(255,255,255,0.4), #fff);
  z-index: 200; transition: width 0.1s linear;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-bottom: 1px solid var(--line);
  padding-top: 13px; padding-bottom: 13px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 400; letter-spacing: 0.04em; }
.brand .ring-mark { width: 26px; height: 26px; flex: none; }
.brand span { font-size: 1.02rem; }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.nav-links a {
  font-size: 0.9rem; color: var(--muted); font-weight: 400; letter-spacing: 0.02em;
  position: relative; transition: color 0.35s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0;
  background: var(--fg); transition: width 0.4s var(--ease);
}
.nav-links a:hover { color: var(--fg); }
.nav-links a:hover::after { width: 100%; }
.nav-cta {
  border: 1px solid var(--line-strong); border-radius: 100px;
  padding: 8px 18px; color: var(--fg) !important;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--fg); color: #000 !important; border-color: var(--fg); }

/* Language toggle */
.lang { display: inline-flex; align-items: center; gap: 7px; color: var(--faint); font-size: 0.82rem; letter-spacing: 0.06em; }
.lang button {
  background: none; border: 0; color: var(--faint); cursor: pointer; padding: 2px 1px;
  font: inherit; letter-spacing: inherit; transition: color 0.3s var(--ease);
}
.lang button:hover { color: var(--fg); }
.lang button.active { color: var(--fg); }
.lang span { opacity: 0.4; }
.lang-mobile { margin-top: 34px; font-size: 1.1rem; gap: 12px; }

.menu-btn { display: none; background: none; border: 0; color: var(--fg); cursor: pointer; width: 30px; height: 22px; position: relative; }
.menu-btn span { position: absolute; left: 0; height: 1px; width: 100%; background: var(--fg); transition: transform 0.4s var(--ease), opacity 0.3s; }
.menu-btn span:nth-child(1) { top: 3px; }
.menu-btn span:nth-child(2) { top: 11px; }
.menu-btn span:nth-child(3) { top: 19px; }
body.menu-open .menu-btn span:nth-child(1) { top: 11px; transform: rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* Mobile overlay menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.96);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--pad);
  opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease);
}
body.menu-open .mobile-menu { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 200; letter-spacing: -0.02em;
  padding: 10px 0; color: var(--fg);
  opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
body.menu-open .mobile-menu a { opacity: 1; transform: none; }
body.menu-open .mobile-menu a:nth-child(1) { transition-delay: 0.08s; }
body.menu-open .mobile-menu a:nth-child(2) { transition-delay: 0.14s; }
body.menu-open .mobile-menu a:nth-child(3) { transition-delay: 0.20s; }
body.menu-open .mobile-menu a:nth-child(4) { transition-delay: 0.26s; }
body.menu-open .mobile-menu a:nth-child(5) { transition-delay: 0.32s; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; position: relative; overflow: hidden;
  padding: 120px var(--pad) 80px;
}
.hero-rings {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
  width: min(115vh, 1080px); aspect-ratio: 1; pointer-events: none; z-index: 0;
  opacity: 0.62;
}
.hero-rings svg { width: 100%; height: 100%; }
.hero-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(233,180,134,0.10), rgba(233,180,134,0.03) 38%, transparent 66%);
  pointer-events: none; z-index: 0; filter: blur(8px);
}
.hero-inner { position: relative; z-index: 2; }
.hero .eyebrow { margin-bottom: 30px; }
.hero h1 {
  font-size: clamp(1.5rem, 3.6vw, 3.4rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 26px;
}
.hero .lead {
  font-size: clamp(0.95rem, 1.35vw, 1.18rem); font-weight: 300; color: var(--muted);
  letter-spacing: 0.04em; max-width: 52ch; margin-inline: auto;
}
/* spinning concentric ring marks */
.ring-mark .r-out { animation: spin 60s linear infinite; transform-origin: center; }
.ring-mark .r-mid { animation: spin 40s linear infinite reverse; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-rings .pulse { animation: pulse 6s ease-in-out infinite backwards; transform-origin: center; }
@keyframes pulse {
  0%          { opacity: 0.16; transform: scale(1);     filter: drop-shadow(0 0 0 rgba(255,255,255,0));    animation-timing-function: ease-in; }
  10%         { opacity: 1;    transform: scale(1.014); filter: drop-shadow(0 0 10px rgba(255,255,255,0.8)); animation-timing-function: ease-out; }
  52%, 100%   { opacity: 0.16; transform: scale(1);     filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* ---------- Generic section rhythm ---------- */
/* A section owns the viewport on desktop, so landing on one never shows the
   next heading peeking underneath. min-height (not height) lets a tall
   section still grow instead of clipping. */
@media (min-width: 860px) {
  .screen {
    min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .screen > .wrap { width: 100%; }
}
.section-pad { padding-block: clamp(54px, 7.5vh, 96px); }
.section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-head .idx { font-size: 0.72rem; color: var(--faint); letter-spacing: 0.1em; }
.section-head h2 { font-size: var(--f-h2); font-weight: 200; letter-spacing: -0.025em; line-height: 1.05; }

/* ---------- Manifesto ---------- */
.manifesto { text-align: center; }
.manifesto p.big {
  font-size: clamp(1.45rem, 3.3vw, 2.65rem); font-weight: 200; line-height: 1.22;
  letter-spacing: -0.015em; max-width: 24ch; margin: 0 auto 34px;
}
.manifesto p.big em { font-style: normal; color: var(--warm); }
.manifesto .sub { color: var(--muted); font-size: var(--f-lead); max-width: 42ch; margin-inline: auto; }

/* ---------- Cinematic full-bleed quote ---------- */
.cinema {
  min-height: 92svh; display: flex; align-items: center; justify-content: center;
  text-align: center; position: relative; overflow: hidden;
}
.cinema .bg {
  position: absolute; inset: -12% 0; background-size: cover; background-position: center;
  will-change: transform; z-index: 0;
}
.cinema::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0.35), rgba(0,0,0,0.78) 70%, #000 100%);
}
.cinema .q { position: relative; z-index: 2; padding: var(--pad); }
.cinema .q blockquote {
  font-size: clamp(1.5rem, 3.4vw, 2.75rem); font-weight: 200; font-style: normal;
  letter-spacing: -0.02em; line-height: 1.12; max-width: 16ch; margin: 0 auto;
}
.cinema .q cite { display: block; margin-top: 26px; font-style: normal; letter-spacing: 0.3em; text-transform: uppercase; font-size: 0.78rem; color: var(--muted); }
/* Hilo Musical — expanded cinematic section */
/* Statement over image — wider measure than the short cinematic quote */
.cinema.statement blockquote { max-width: 20ch; }
.cinema .q blockquote em { font-style: normal; color: var(--warm); }

/* ---------- Services ---------- */
.service:first-of-type { border-top: 1px solid var(--line); }
.service {
  display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(24px, 5vw, 90px);
  padding-block: clamp(20px, 2.6vw, 32px); border-bottom: 1px solid var(--line);
  position: relative;
}
.service .num { font-size: 0.76rem; color: var(--faint); letter-spacing: 0.12em; }
.service h3 { font-size: var(--f-h3); font-weight: 300; letter-spacing: -0.02em; margin: 8px 0 0; }
.service .svc-desc { color: var(--muted); max-width: 52ch; font-size: var(--f-body); font-weight: 300; line-height: 1.7; }
.service ul { list-style: none; display: grid; gap: 14px; }
.service li {
  display: flex; gap: 14px; align-items: baseline; color: var(--fg);
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
  font-weight: 300;
}
.service li:last-child { border-bottom: 0; }
.service li::before { content: ""; flex: none; width: 6px; height: 6px; border: 1px solid var(--line-strong); border-radius: 50%; transform: translateY(7px); transition: background 0.4s var(--ease), border-color 0.4s; }
.service:hover li::before { border-color: var(--warm); }
.service .svc-left { align-self: start; }

/* ---------- Method / Timeline ---------- */
.tl {
  position: relative;
  --tl-pad: 52px;
  padding-left: var(--tl-pad);
}
.tl-rail {
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 1px; background: var(--line);
  overflow: hidden;
}
.tl-fill {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 0%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.62), rgba(255,255,255,0.2));
  will-change: height;
}
.tl-step {
  position: relative;
  padding: 0 0 clamp(17px, 2.2vw, 26px) clamp(18px, 3vw, 34px);
}
.tl-step:last-child { padding-bottom: 0; }
.tl-node {
  position: absolute;
  left: calc(-1 * var(--tl-pad) - 4px);
  top: 6px;
  width: 9px; height: 9px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  transition: border-color 0.8s var(--ease), box-shadow 0.8s var(--ease);
}
.tl-step.in .tl-node {
  border-color: rgba(255,255,255,0.46);
  box-shadow: 0 0 10px rgba(255,255,255,0.08);
}
.tl-step .n {
  display: block;
  font-size: 0.74rem; color: var(--faint); letter-spacing: 0.12em;
  margin-bottom: 7px;
}
.tl-step h3 { font-size: var(--f-h3); font-weight: 300; letter-spacing: -0.015em; margin-bottom: 6px; }
.tl-step p { color: var(--muted); max-width: 70ch; font-weight: 300; line-height: 1.65; }


/* ---------- Studio / About ---------- */
.studio { display: grid; grid-template-columns: 0.5fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.studio .portrait { position: relative; overflow: hidden; max-width: 300px; }
.studio .portrait img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center 12%; filter: grayscale(100%) contrast(1.02); }
.studio .portrait::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; }
.studio h2 { font-size: var(--f-h2); font-weight: 200; letter-spacing: -0.025em; line-height: 1.08; margin: 18px 0 24px; }
.studio .role { color: var(--warm); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; margin-bottom: 26px; }
.studio p { color: var(--muted); margin-bottom: 18px; max-width: 50ch; font-weight: 300; }
.studio p strong { color: var(--fg); font-weight: 400; }
.stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.stats .stat .v { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 200; letter-spacing: -0.02em; }
.stats .stat .l { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em; }

/* ---------- Sectors strip ---------- */
.sectors { display: flex; flex-wrap: wrap; gap: 14px 14px; justify-content: center; }
.sectors .chip {
  border: 1px solid var(--line); border-radius: 100px; padding: 10px 22px;
  font-size: 0.92rem; color: var(--muted); letter-spacing: 0.04em;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.sectors .chip:hover { border-color: var(--line-strong); color: var(--fg); }

/* ---------- Spaces: closing row of Music Strategy ---------- */
.svc-sectors {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 16px clamp(20px, 4vw, 52px);
  padding-top: clamp(24px, 3.2vw, 40px);
}
.svc-sectors .eyebrow { color: var(--faint); }
.sectors { justify-content: flex-start; }
@media (max-width: 620px) { .svc-sectors { flex-direction: column; align-items: flex-start; } }

/* ---------- Contact ---------- */
.contact { text-align: center; position: relative; overflow: hidden; }
.contact .rings-faint { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(80vw, 700px); aspect-ratio: 1; opacity: 0.5; pointer-events: none; }
.contact-inner { position: relative; z-index: 2; }
.contact h2 { font-size: clamp(1.4rem, 2.5vw, 2.05rem); font-weight: 200; letter-spacing: -0.03em; line-height: 1; margin-bottom: 20px; }
.contact .lead { color: rgba(245,245,247,0.84); font-size: var(--f-lead); max-width: 44ch; margin: 0 auto 34px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 100px;
  padding: 15px 30px; font-size: 1rem; letter-spacing: 0.01em; border: 1px solid var(--line-strong);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--fg); color: #000; border-color: var(--fg); }
.btn-primary:hover { background: #fff; }
.btn-ghost:hover { border-color: var(--fg); background: rgba(255,255,255,0.04); }
.contact .meta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center; color: var(--muted); font-size: 0.85rem; }
.contact .meta a { color: var(--muted); transition: color 0.3s; }
.contact .meta a:hover { color: var(--fg); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding-block: 44px; }
.footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer .brand span { font-size: 0.95rem; }
.footer .links { display: flex; gap: 24px; }
.footer .links a { font-size: 0.85rem; color: var(--muted); transition: color 0.3s; }
.footer .links a:hover { color: var(--fg); }
.footer .copy { color: var(--faint); font-size: 0.8rem; width: 100%; margin-top: 14px; }
/* LSSI-CE art. 10: owner and NIF visible at the foot of every page */
.footer .legal-id { color: var(--faint); font-size: 0.72rem; letter-spacing: 0.03em; margin-top: 6px; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu-btn { display: block; }
  .service { grid-template-columns: 1fr; gap: 22px; }
  .service .svc-left { position: static; }
  .studio { grid-template-columns: 1fr; }
  .studio .portrait { max-width: 240px; margin-inline: auto; }
  .tl { --tl-pad: 30px; }
}
@media (max-width: 560px) {
  .footer .row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ---------- Legal pages (Aviso Legal / Privacidad / Cookies) ---------- */
.legal-page { padding-block: clamp(140px, 18vh, 200px) 100px; }
.legal-page .wrap { max-width: 760px; }
.legal-page h1 { font-size: var(--f-h2); font-weight: 200; letter-spacing: -0.025em; margin-bottom: 14px; }
.legal-page .updated { color: var(--faint); font-size: 0.78rem; margin-bottom: 42px; }
.legal-page section { padding-block: 22px; border-top: 1px solid var(--line); }
.legal-page section:first-of-type { border-top: 0; }
.legal-page h2 { font-size: 0.95rem; font-weight: 400; letter-spacing: 0.01em; margin-bottom: 14px; }
.legal-page p { color: var(--muted); max-width: 72ch; font-weight: 300; line-height: 1.75; }
.legal-page p a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.legal-page p a:hover { text-decoration-color: var(--fg); }
.legal-page p strong { color: var(--fg); font-weight: 500; }

/* ---------- Service note (credential line) ---------- */
.svc-note {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 0.8rem; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 400;
}

/* ---------- Team page ---------- */
.team-page { padding-block: clamp(120px, 16vh, 165px) clamp(60px, 9vh, 100px); }
.team-page .wrap { max-width: 1000px; }
.team-page h1 {
  font-size: var(--f-h2); font-weight: 200; letter-spacing: -0.025em;
  line-height: 1.05; margin: 0 0 20px;
}
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 56px); margin-top: clamp(60px, 9vh, 100px);
}
.team-member { padding-top: 26px; border-top: 1px solid var(--line); }
.team-member h2 { font-size: var(--f-h3); font-weight: 300; letter-spacing: -0.015em; margin-bottom: 10px; }
.team-member .role {
  color: var(--warm); letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 0.72rem; margin-bottom: 14px;
}
.team-member p { color: var(--muted); font-weight: 300; }
.team-cta { margin-top: clamp(60px, 9vh, 100px); }

/* ---------- Solutions lead ---------- */
.sol-lead {
  color: var(--fg); font-size: var(--f-lead); font-weight: 300;
  line-height: 1.7; max-width: 62ch; margin-bottom: clamp(26px, 3.2vw, 42px);
}

/* ---------- Team page intro ---------- */
.team-intro { max-width: 64ch; margin-top: 30px; }
.team-intro p {
  font-weight: 300; line-height: 1.8; color: var(--fg);
  font-size: var(--f-body);
}
.team-intro p + p { margin-top: 26px; }

/* =====================================================================
   EDITORIAL — index, articles and the home-page selection
   ===================================================================== */
.nav-links a[aria-current], .mobile-menu a[aria-current] { color: var(--fg); }
.footer .links { flex-wrap: wrap; row-gap: 10px; }

.editorial-meta, .post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: var(--f-small); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint);
}
.editorial-meta .dot, .post-meta .dot { opacity: 0.6; }

/* ---------- index ---------- */
.editorial-head { padding-block: clamp(130px, 19vh, 200px) clamp(38px, 6vh, 64px); }
.editorial-head .eyebrow { margin-bottom: clamp(20px, 3vh, 30px); }
.editorial-head h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.5rem); font-weight: 200; letter-spacing: -0.03em;
  line-height: 1.06; max-width: 17ch; text-wrap: balance;
}
.editorial-lead { color: var(--muted); font-size: var(--f-lead); line-height: 1.7; max-width: 52ch; margin-top: clamp(18px, 2.4vw, 26px); }

.editorial-list { list-style: none; border-top: 1px solid var(--line); margin-bottom: clamp(70px, 11vh, 130px); }
.jl-link {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: clamp(14px, 3vw, 44px); align-items: start;
  padding: clamp(28px, 3.8vw, 48px) clamp(14px, 2vw, 26px); border-bottom: 1px solid var(--line);
}
.jl-num { font-size: 0.76rem; letter-spacing: 0.12em; color: var(--faint); padding-top: 0.35em; transition: color 0.4s var(--ease); }
.jl-title {
  font-size: clamp(1.35rem, 2.7vw, 2.15rem); font-weight: 200; letter-spacing: -0.022em;
  line-height: 1.14; max-width: 24ch; margin-top: 12px; text-wrap: balance;
  transition: transform 0.6s var(--ease);
}
.jl-excerpt { color: var(--muted); max-width: 62ch; margin-top: 14px; line-height: 1.7; }
.jl-arrow { font-size: 1.25rem; color: var(--faint); padding-top: 0.2em; transition: transform 0.5s var(--ease), color 0.4s var(--ease); }
.jl-link:hover .jl-num, .post-next-link:hover .jl-num { color: var(--warm); }
.jl-link:hover .jl-arrow, .post-next-link:hover .jl-arrow { color: var(--fg); transform: translateX(6px); }

/* ---------- article ----------
   One reading size for everything in the body. Marked sentences share a single
   treatment (full ink + warm hairline); structural blocks change the layout,
   never the scale; small labels share one style. */
.post-wrap { max-width: var(--maxw); }
.post-head { padding-block: clamp(118px, 17vh, 180px) clamp(34px, 5vh, 54px); border-bottom: 1px solid var(--line); }
.post-back {
  display: inline-flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted);
  margin-bottom: clamp(34px, 5vh, 56px); transition: color 0.3s var(--ease);
}
.post-back:hover { color: var(--fg); }
.post-title {
  font-size: clamp(2rem, 5.2vw, 3.9rem); font-weight: 200; letter-spacing: -0.032em;
  line-height: 1.04; max-width: 17ch; margin-top: clamp(16px, 2.2vw, 24px); text-wrap: balance;
}
.post-dek { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.32rem); font-weight: 300; line-height: 1.5; max-width: 42ch; margin-top: 18px; }

.post-body {
  --read: clamp(1.02rem, 1.22vw, 1.14rem);  /* sized against the 760px measure */
  padding-block: clamp(44px, 7vh, 84px) clamp(20px, 3vh, 36px);
}
.post-body > * + * { margin-top: 1.35em; }
.post-body p, .post-body h2, .post-body dt, .post-body dd { font-size: var(--read); line-height: 1.85; }
.post-body > p { max-width: 64ch; color: var(--ink-soft); }
.post-body .term { font-style: normal; color: var(--warm); }

/* the single emphasis style */
.post-body > .post-accent {
  margin-block: 2em; padding-left: 20px; border-left: 1px solid var(--warm);
  max-width: 60ch; color: var(--fg);
}
/* consecutive marked sentences read as one block under one continuous rule */
.post-body > .post-accent + .post-accent { margin-top: -2em; padding-top: 0.9em; }

/* the single label style: numbers, sources, notes, captions */
.post-factors .pf-num, .post-quote cite, .post-figure figcaption, .post-photo figcaption {
  display: block; font-size: var(--f-small); font-style: normal; font-weight: 400;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.7; color: var(--faint);
}

/* structure: numbered factors */
.post-body > .post-factors { list-style: none; margin-block: 2em; border-top: 1px solid var(--line); }
.post-factors li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: clamp(12px, 2vw, 24px);
  padding-block: 22px; border-bottom: 1px solid var(--line);
}
.post-factors .pf-num { grid-row: span 2; padding-top: 0.25em; }
.post-factors h2 { font-weight: 400; color: var(--fg); }
.post-factors p { margin-top: 4px; max-width: 58ch; color: var(--ink-soft); }

/* structure: quoted source */
.post-body > .post-quote { margin-block: 2em; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); }
.post-quote p { color: var(--fg); }
.post-quote cite { margin-top: 12px; }

/* structure: side-by-side comparison */
.post-body > .post-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.4vw, 44px); margin-block: 2em; }
.post-split > div { padding-top: 18px; border-top: 1px solid var(--line); }
.post-split h2 { font-weight: 400; color: var(--fg); }
.post-split p { margin-top: 4px; color: var(--ink-soft); }

/* structure: key figures, introduced by an ordinary paragraph of study specs */
.post-body > .post-figures { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.4vw, 44px); margin-block: 0.9em 0; }
.post-figures > div { padding-top: 18px; border-top: 1px solid var(--line); }
.post-figures dt { font-weight: 400; color: var(--fg); }
.post-figures dd { margin-top: 4px; color: var(--ink-soft); }

/* music references: click-to-load cards */
.post-music { margin-block: clamp(36px, 6vh, 64px) clamp(50px, 8vh, 90px); padding-top: clamp(28px, 4vh, 40px); border-top: 1px solid var(--line); }
.embed-list { display: grid; gap: 12px; margin-top: 20px; }
.embed-card {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(14px, 2.4vw, 22px); padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.6vw, 26px);
  background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.embed-card:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.03); }
.embed-card:focus-visible { outline: 1px solid var(--warm); outline-offset: 3px; }
.ec-icon {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: grid; place-items: center; transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.ec-icon svg { width: 11px; height: 13px; margin-left: 2px; fill: currentColor; }
.embed-card:hover .ec-icon { border-color: var(--warm); color: var(--warm); }
.ec-kind { display: block; font-size: var(--f-small); letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.ec-title { display: block; margin-top: 4px; font-size: 1.02rem; font-weight: 300; }
.ec-action { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.ec-desc { display: block; margin-top: 9px; font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.embed-note { margin-top: 14px; font-size: 0.78rem; color: var(--faint); line-height: 1.6; max-width: 62ch; }
.embed-frame { display: block; width: 100%; border: 0; border-radius: 12px; }

/* next article + contact prompt */
.post-next { border-top: 1px solid var(--line); padding-block: clamp(34px, 5vh, 54px); }
.post-next-link {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: clamp(14px, 3vw, 44px); align-items: baseline; margin-top: 18px;
}
.post-next-link .jl-num { padding-top: 0; }
.pn-title { font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 200; letter-spacing: -0.02em; line-height: 1.2; transition: transform 0.6s var(--ease); }
.post-next-link:hover .pn-title { transform: translateX(6px); }
.post-cta { border-top: 1px solid var(--line); padding-block: clamp(40px, 7vh, 80px); }
.post-cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.post-cta p { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 200; letter-spacing: -0.015em; max-width: 26ch; }

@media (max-width: 680px) {
  .post-body > .post-split { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .jl-link { grid-template-columns: 1fr; gap: 8px; }
  .jl-arrow { display: none; }
  .ec-action { display: none; }
}
@media (max-width: 520px) {
  .post-body > .post-figures { grid-template-columns: 1fr; }
}

/* ---------- article figure ---------- */
.post-figure { margin-block: 0; padding-top: clamp(34px, 5vh, 56px); }
.post-figure img { display: block; width: 100%; height: auto; }
.post-figure figcaption { margin-top: 12px; }

/* ---------- Editorial on the home page ---------- */
.eh-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 14px 32px; margin-bottom: clamp(24px, 3vw, 40px);
}
.eh-head .section-head { margin-bottom: 0; }
.eh-all { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--muted); transition: color 0.3s var(--ease); }
.eh-all span[aria-hidden] { transition: transform 0.5s var(--ease); }
.eh-all:hover { color: var(--fg); }
.eh-all:hover span[aria-hidden] { transform: translateX(6px); }

.eh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.eh-card {
  display: flex; flex-direction: column; gap: 14px;
  min-height: clamp(260px, 34vh, 360px);
  padding: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line);
}
.eh-card + .eh-card { border-left: 1px solid var(--line); }
.eh-card .jl-num { padding-top: 0; }
.eh-title { font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 200; letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; transition: transform 0.6s var(--ease); }
.eh-excerpt { color: var(--muted); font-size: var(--f-body); line-height: 1.65; }
.eh-read { margin-top: auto; display: inline-flex; gap: 8px; font-size: 0.85rem; color: var(--faint); transition: color 0.4s var(--ease); }
.eh-read span[aria-hidden] { transition: transform 0.5s var(--ease); }
.eh-card:hover .jl-num { color: var(--warm); }
.eh-card:hover .eh-read { color: var(--fg); }
.eh-card:hover .eh-read span[aria-hidden] { transform: translateX(6px); }
@media (max-width: 860px) {
  .eh-grid { grid-template-columns: 1fr; }
  .eh-card { min-height: 0; }
  .eh-card + .eh-card { border-left: 0; }
}

/* ---------- Editorial on the home page: the one light section ----------
   The colour tokens are redefined locally, so every shared component inside
   (section head, numbers, meta line, hairlines, hover accent) turns to
   ink-on-paper without a second set of rules. */
.editorial-home {
  --fg: var(--ink);
  --muted: rgba(20, 17, 14, 0.62);
  --faint: rgba(20, 17, 14, 0.44);
  --line: rgba(20, 17, 14, 0.14);
  --line-strong: rgba(20, 17, 14, 0.28);
  --warm: #a8703f;              /* golden-hour accent, deepened to read on paper */
  background: var(--paper);
  color: var(--fg);
  border-block: 1px solid rgba(168, 112, 63, 0.28);
}
.editorial-home ::selection { background: rgba(168, 112, 63, 0.22); color: var(--ink); }

/* ---------- Editorial pages: light theme ----------
   The same tokens, inverted on <body>. Everything that reads a token (text,
   hairlines, nav, footer, labels) follows; the few hard-coded dark surfaces
   of the nav are adjusted below. */
body.theme-light {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: rgba(20, 17, 14, 0.62);
  --faint: rgba(20, 17, 14, 0.44);
  --line: rgba(20, 17, 14, 0.14);
  --line-strong: rgba(20, 17, 14, 0.28);
  --warm: #a8703f;
  --ink-soft: rgba(20, 17, 14, 0.8);
}
.theme-light .nav.scrolled { background: rgba(241, 237, 231, 0.82); }
.theme-light .mobile-menu { background: rgba(241, 237, 231, 0.97); }
.theme-light .progress { background: linear-gradient(90deg, rgba(20, 17, 14, 0.25), var(--ink)); }
.theme-light .nav-cta:hover { color: var(--paper) !important; }
.theme-light .btn-ghost:hover, .theme-light .embed-card:hover { background: rgba(20, 17, 14, 0.04); }
.theme-light ::selection { background: rgba(168, 112, 63, 0.22); color: var(--ink); }

/* ---------- Articles: one URL, both languages ----------
   Spanish is the default (the markup ships with lang="es"); main.js sets the
   lang on <html> and the other block disappears. */
html:not([lang="en"]) [data-l="en"],
html[lang="en"] [data-l="es"] { display: none !important; }

/* ---------- Hover: a quiet mark on the piece you are about to open ---------- */
.eh-card, .jl-link { transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.eh-card:hover, .jl-link:hover {
  background-color: rgba(20, 17, 14, 0.035);
  box-shadow: inset 2px 0 0 var(--warm);
}

/* ---------- Article layout: one centred column, full-width figures ----------
   The reading column is centred and a touch wider than before; the figure is
   the only element allowed the full page width, and that is what gives the
   page its horizontal feel without stretching the lines of text.
   Declared last so it wins over the earlier .wrap / .post-wrap widths. */
.post-wrap { max-width: 1080px; }
/* the column carries .wrap's padding, so the measure is added on top of it */
.post-col { max-width: calc(760px + 2 * var(--pad)); margin-inline: auto; }
/* header text has no padding of its own: same 760px box, centred, so the
   title, the subheader and the body all start on the same vertical */
.post-head .post-back, .post-head .post-title { max-width: 760px; margin-inline: auto; }
.post-head .post-head-row { max-width: 760px; margin-inline: auto; }
.post-head-row { margin-top: clamp(20px, 2.6vw, 30px); }
.post-head-row .post-dek { margin-top: 10px; }
.post-figure.post-col { max-width: calc(900px + 2 * var(--pad)); }  /* wider than the text, short of full bleed */

/* the column sets the measure, and the rhythm is a little tighter */
.post-col > .post-body > p, .post-col > .post-body > .post-accent { max-width: none; }
.post-body > * + * { margin-top: 1.25em; }
.post-body p { line-height: 1.78; }

/* no numbering inside an article, so the next-piece link loses that column */
.post-next-link { grid-template-columns: minmax(0, 1fr) auto; }
.post-next .post-next-link { margin-top: 18px; }

/* ---------- article photo: beside the text on desktop, stacked on mobile ---------- */
.post-photo { margin: 0 0 clamp(26px, 4vh, 40px); }
.post-photo img { display: block; width: 100%; height: auto; }
.post-photo figcaption { margin-top: 12px; }
@media (min-width: 860px) {
  .post-body > .post-photo { float: left; width: 300px; margin: 2em clamp(30px, 3.6vw, 48px) 1.4em 0; }
  .post-body > .post-clear, .post-body > .post-factors { clear: both; }
}

/* ---------- demos: click-to-load playlist panels on the home page ---------- */
.demos-lead {
  max-width: 62ch; color: var(--muted); font-size: var(--f-body); line-height: 1.7;
  margin-bottom: clamp(26px, 3.4vw, 40px);
}
.demo-grid { display: grid; gap: 12px; align-items: start; }
.demos .embed-note { margin-top: 18px; }

@media (min-width: 860px) {
  .demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* the card is exactly as tall as the player that replaces it: no jump on click */
  .demo-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    min-height: 352px; padding: clamp(22px, 2.4vw, 30px);
  }
  /* fixed offset, so the three icons line up even when the descriptions wrap differently */
  .demo-card .ec-icon { width: 52px; height: 52px; margin: 74px auto auto; }
  .demo-card .ec-icon svg { width: 13px; height: 15px; }
  .demo-card .ec-title { margin-top: 7px; font-size: clamp(1.05rem, 1.4vw, 1.22rem); }
  .demo-card .ec-action { margin-top: 20px; }
}