/* ─────────────────────────────────────────────────────────────────────────
   Lateral Space — Brand tokens + base type
   Loaded on every page. The spine of the identity.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Warm monochrome — the spine of the identity */
  --bone:        #F2EEE5;   /* primary background */
  --bone-2:      #EAE5D9;   /* warm card surface */
  --bone-3:      #DCD5C4;   /* hairlines / chips */
  --bone-soft:   #F7F4EC;   /* even lighter surface for layering */
  --ink:         #13120E;   /* primary type */
  --ink-2:       #2A2722;   /* secondary surface in dark */
  --graphite:    #514B41;   /* mid tone */
  --graphite-2:  #7A7468;   /* muted body */
  --graphite-3:  #A39C8E;   /* hint / placeholder */

  /* Signal — the one quiet accent. A muted moss / lichen */
  --signal:      #A8B093;   /* active state · trace */
  --signal-deep: #5E6A53;   /* accent type · key signal */
  --signal-soft: #D9DBC9;   /* quiet fills · selected */

  /* Amber — human warmth. Module accent only, <5% per surface */
  --amber:       #D8B27A;
  --amber-deep:  #9A7440;

  /* Type */
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --tracking-tight: -0.02em;
  --tracking-mono:  0.04em;

  /* Geometry */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  --line:        1px solid rgba(19,18,14,0.10);
  --line-strong: 1px solid rgba(19,18,14,0.18);

  /* Layout */
  --shell-max: 1280px;
  --shell-pad: clamp(20px, 4vw, 56px);

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-slow: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Dark surface — opt-in via [data-mode="dark"] on a section */
[data-mode="dark"] {
  --bone:        #14130F;
  --bone-2:      #1C1B16;
  --bone-3:      #2A2822;
  --bone-soft:   #1A1914;
  --ink:         #F2EEE5;
  --ink-2:       #DCD5C4;
  --graphite:    #A39C8E;
  --graphite-2:  #7A7468;
  --graphite-3:  #514B41;
  --line:        1px solid rgba(242,238,229,0.10);
  --line-strong: 1px solid rgba(242,238,229,0.20);
}

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss03", "cv11";
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--bone); }

/* ───── Type roles ───── */
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 400;
}
.eyebrow {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-size: 11px;
  color: var(--graphite-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Heading scale */
.h-display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.h-headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.h-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.h-subtitle {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--graphite);
  max-width: 60ch;
  text-wrap: pretty;
}
.body-l { font-size: 17px; line-height: 1.6; color: var(--graphite); }
.body   { font-size: 15px; line-height: 1.6; color: var(--graphite); }
.caption { font-size: 13px; line-height: 1.5; color: var(--graphite-2); }

/* ───── The lateral hairline ───── */
.lateral-rule {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(19,18,14,0.16) 18%,
    rgba(19,18,14,0.16) 82%,
    transparent 100%
  );
}
[data-mode="dark"] .lateral-rule {
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(242,238,229,0.18) 18%,
    rgba(242,238,229,0.18) 82%,
    transparent 100%
  );
}

/* ───── Buttons ───── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: transform 0.4s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
  will-change: transform;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--ink);
  color: var(--bone);
}
.btn-primary:hover { background: var(--ink-2); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(19,18,14,0.18);
}
.btn-ghost:hover { background: rgba(19,18,14,0.04); border-color: rgba(19,18,14,0.36); }

[data-mode="dark"] .btn-primary { background: var(--bone); color: var(--ink); }
[data-mode="dark"] .btn-ghost { color: var(--bone); border-color: rgba(242,238,229,0.18); }
[data-mode="dark"] .btn-ghost:hover { background: rgba(242,238,229,0.04); border-color: rgba(242,238,229,0.36); }

.btn-arrow {
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.btn-arrow::after {
  content: "→";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ───── Shell ───── */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
}

/* ───── Section spacing ───── */
.section { padding: clamp(72px, 12vw, 168px) 0; position: relative; }
.section-head { display: grid; gap: 20px; max-width: 720px; margin-bottom: clamp(48px, 6vw, 96px); }

/* ───── Tactile gradient — painterly hero backdrop ───── */
.tactile {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 20% 30%, #F2EEE5 0%, transparent 60%),
    radial-gradient(50% 40% at 78% 26%, #D8B27A 0%, transparent 55%),
    radial-gradient(55% 45% at 22% 78%, #A8B093 0%, transparent 60%),
    radial-gradient(40% 35% at 86% 82%, #9A7440 0%, transparent 55%),
    radial-gradient(30% 25% at 50% 96%, #2A2722 0%, transparent 55%),
    #EFE7D7;
  filter: saturate(0.95);
}
.tactile::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.07  0 0 0 0 0.07  0 0 0 0 0.05  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.7;
  pointer-events: none;
}
.tactile.moss {
  background:
    radial-gradient(60% 50% at 25% 30%, #EAEEDA 0%, transparent 60%),
    radial-gradient(55% 45% at 78% 22%, #A8B093 0%, transparent 60%),
    radial-gradient(55% 45% at 20% 80%, #5E6A53 0%, transparent 60%),
    radial-gradient(40% 35% at 88% 70%, #D8B27A 0%, transparent 55%),
    radial-gradient(30% 25% at 60% 96%, #13120E 0%, transparent 55%),
    #DDE0CC;
}
.tactile.deep {
  background:
    radial-gradient(55% 45% at 75% 22%, #5E6A53 0%, transparent 60%),
    radial-gradient(50% 40% at 20% 70%, #9A7440 0%, transparent 60%),
    radial-gradient(40% 35% at 88% 82%, #D8B27A 0%, transparent 55%),
    radial-gradient(45% 35% at 30% 30%, #A8B093 0%, transparent 55%),
    radial-gradient(18% 18% at 60% 50%, #F2EEE5 0%, transparent 55%),
    #1A1813;
}
.tactile.amber {
  background:
    radial-gradient(55% 45% at 22% 22%, #F2EEE5 0%, transparent 55%),
    radial-gradient(55% 45% at 72% 32%, #D8B27A 0%, transparent 60%),
    radial-gradient(50% 40% at 28% 78%, #9A7440 0%, transparent 60%),
    radial-gradient(40% 35% at 86% 86%, #5E6A53 0%, transparent 55%),
    radial-gradient(30% 25% at 60% 70%, #13120E 0%, transparent 55%),
    #E8C99B;
}
.tactile.bone {
  background:
    radial-gradient(70% 60% at 30% 35%, #F2EEE5 0%, transparent 60%),
    radial-gradient(55% 40% at 80% 25%, #EAE5D9 0%, transparent 60%),
    radial-gradient(50% 40% at 25% 78%, #DCD5C4 0%, transparent 60%),
    radial-gradient(40% 35% at 88% 82%, #A8B093 0%, transparent 55%),
    radial-gradient(30% 25% at 60% 95%, #D8B27A 0%, transparent 55%),
    #F0EBDF;
}

/* ───── Reveal-on-scroll ───── */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-stagger.in > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.42s; }
.reveal-stagger.in > *:nth-child(9) { transition-delay: 0.48s; }
.reveal-stagger.in > *:nth-child(n+10) { transition-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ───── Lateral mark — SVG inline shape; this just sizes the wrapper ───── */
.ls-mark { display: inline-flex; align-items: center; vertical-align: middle; }
.ls-mark svg { display: block; }

.ls-wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.ls-wordmark .word-1 { color: currentColor; }
.ls-wordmark .word-2 { color: currentColor; opacity: 0.55; margin-left: 0.32em; }

.ls-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: currentColor;
}

/* Signal pulse — used for one quiet active dot per page */
@keyframes signal-pulse {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50%      { transform: scale(1.45); opacity: 1; }
}
.signal-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal-deep);
  animation: signal-pulse 2.6s var(--ease-in-out) infinite;
}

/* Lateral-slide-in keyframes — used by JS attachers */
@keyframes lateral-slide-in {
  from { transform: translateX(-14px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* Focus state — accessible + on-brand */
:focus-visible {
  outline: 2px solid var(--signal-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* SVG-internal focus: kill the browser default blue outline on <g> elements
   inside our maps. The brand-styled circle stroke + glow IS the focus
   indicator. Keeps keyboard accessibility (we still highlight via JS). */
svg g[tabindex],
svg g[tabindex]:focus,
svg g[tabindex]:focus-visible,
.brain-node-g,
.brain-node-g:focus,
.brain-node-g:focus-visible,
.hiw-node,
.hiw-node:focus,
.hiw-node:focus-visible {
  outline: none !important;
}
svg g[tabindex]:focus-visible .brain-node-circle,
.brain-node-g:focus-visible .brain-node-circle {
  /* keyboard focus on a brain region — moss glow, never blue */
  stroke: var(--signal) !important;
  filter: drop-shadow(0 0 14px rgba(168, 176, 147, 0.55)) !important;
}

/* ───── Bilingual text: hide the inactive language ─────
   Each translated phrase is two spans:
     <span data-lang="it">…</span><span data-lang="en">…</span>
   Body has data-lang="it" or "en"; the other side is hidden via CSS,
   so there's no FOUC before JS runs. */
body[data-lang="it"] [data-lang="en"] { display: none; }
body[data-lang="en"] [data-lang="it"] { display: none; }
/* Keep block-level wrappers (e.g. inside <p>) intact when only one is shown */
[data-lang] { unicode-bidi: isolate; }