/* Page styles for berruti.tech — layout translated from the Claude Design
   canvas ("Berruti Site.dc.html") onto the Nocturne design system. */

html { scroll-behavior: smooth; }
body { background: var(--color-bg); color: var(--color-text); min-height: 100vh; }
a { text-decoration: none; }

@keyframes brainIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hubGlow {
  0%, 100% { text-shadow: 0 0 12px color-mix(in oklch, var(--color-accent) 35%, transparent); }
  50%      { text-shadow: 0 0 22px color-mix(in oklch, var(--color-accent) 65%, transparent); }
}

/* — inline icons — */
.icon {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em;
  fill: none; stroke: currentColor; stroke-width: 18;
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}

/* — nav — */
.topnav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
}
.topnav-links {
  display: flex; gap: 24px; align-items: center;
  font-size: 13px; white-space: nowrap;
}
.topnav-links > a { color: var(--color-neutral-300); font-size: 13px; }
.topnav-links > a:hover { color: var(--color-text); }
.topnav-links > a.btn-cv { font-size: 12px; color: var(--color-text); }

/* — sections — */
.hero { max-width: 1160px; margin: 0 auto; padding: 110px 40px 90px; }
.sec { max-width: 1160px; margin: 0 auto; padding: 70px 40px; }
.sec-last { padding-bottom: 110px; }
.kicker {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-300); margin: 0;
}
.sec-title { font-weight: 500; font-size: 32px; margin: 10px 0 0; }
.sec-rule {
  height: 1px; width: 280px; max-width: 100%;
  background: linear-gradient(90deg, var(--color-accent-700), transparent);
  margin: 18px 0 40px;
}
.sec-rule-tight { margin-bottom: 22px; }

/* — hero — */
.hero-tag { margin-bottom: 14px; display: inline-flex; }
.hero-title {
  font-weight: 500; font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05; margin: 14px 0 0; letter-spacing: -0.02em;
}
.hero-sub { font-size: 18px; color: var(--color-accent-300); margin: 14px 0 0; }
.hero-lede {
  max-width: 620px; font-size: 15px; line-height: 1.65;
  color: var(--color-neutral-300); margin: 20px 0 0; text-wrap: pretty;
}
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-cta .btn { white-space: nowrap; }
.hero-facts {
  display: flex; gap: 20px; margin-top: 44px;
  font-size: 13px; color: var(--color-neutral-400); flex-wrap: wrap;
}
.hero-facts .icon { color: var(--color-accent); }

/* — experience timeline — */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 170px 22px 1fr; gap: 0 18px; }
.tl-year {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  color: var(--color-accent-300); padding-top: 3px; text-align: right;
}
.tl-track { display: flex; flex-direction: column; align-items: center; }
.tl-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid var(--color-accent); background: var(--color-accent-900);
  margin-top: 4px; flex: none;
  box-shadow: 0 0 8px color-mix(in oklch, var(--color-accent) 40%, transparent);
}
.tl-line { width: 1px; flex: 1; background: linear-gradient(180deg, var(--color-neutral-800), var(--color-neutral-900)); }
.tl-body { padding-bottom: 34px; }
.tl-year-inline {
  display: none;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  color: var(--color-accent-300); margin: 0 0 4px;
}
.tl-role { font-weight: 500; font-size: 17px; margin: 0; letter-spacing: normal; }
.tl-role span { color: var(--color-neutral-400); font-weight: 400; }
.tl-where { font-size: 12px; color: var(--color-neutral-500); margin: 3px 0 0; }
.tl-details {
  font-size: 14px; line-height: 1.6; color: var(--color-neutral-300);
  margin: 10px 0 0; max-width: 640px; text-wrap: pretty;
}
.edu { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--color-neutral-400); }
.edu strong { color: var(--color-neutral-200); font-weight: 500; }

/* — brain map — */
.brain-intro {
  font-size: 14px; color: var(--color-neutral-400); max-width: 620px;
  margin: 0 0 22px; line-height: 1.6; text-wrap: pretty;
}
.brain-controls { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
#brain-search { max-width: 340px; }
.legend { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--color-neutral-400); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-expert { background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }
.legend-advanced { border: 1px solid var(--color-accent-500); background: color-mix(in oklch, var(--color-accent-900) 55%, transparent); }
.legend-familiar { width: 7px; height: 7px; border: 1px solid var(--color-neutral-600); background: transparent; opacity: 0.8; }

.brain-wrap { display: flex; gap: 22px; align-items: stretch; flex-wrap: wrap; }
.bmap {
  position: relative; flex: 1 1 640px; min-width: 0; overflow: hidden;
  cursor: grab; touch-action: pan-y; height: 640px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-lg);
  background: radial-gradient(ellipse 55% 45% at 50% 42%,
    color-mix(in oklch, var(--color-accent-900) 60%, var(--color-bg)),
    var(--color-bg) 75%);
}
.bmap-inner { position: relative; width: 1120px; height: 820px; transform-origin: 0 0; }
.bmap-inner > svg { position: absolute; inset: 0; pointer-events: none; }
.bmap-inner path { transition: opacity .3s, stroke .3s; }
.bmap-inner circle { filter: drop-shadow(0 0 5px var(--color-accent)); }

.bmap-hub {
  position: absolute; transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-200);
  background: color-mix(in oklch, var(--color-accent-900) 80%, var(--color-bg));
  border: 1px solid var(--color-accent-800); border-radius: 999px;
  padding: 7px 14px; white-space: nowrap; cursor: pointer;
  animation: hubGlow 5s ease-in-out infinite;
  transition: opacity .3s;
}
.bmap-hub:hover { border-color: var(--color-accent); color: var(--color-text); }

.bmap-node {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-body);
  border: 1px solid; border-radius: 999px;
  white-space: nowrap; cursor: pointer;
  transition: opacity .3s, border-color .15s;
}
.bmap-node:hover { border-color: var(--color-accent) !important; color: var(--color-text) !important; }

.bmap-reset {
  position: absolute; top: 14px; right: 14px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: 0.1em; color: var(--color-neutral-300);
  background: color-mix(in oklch, var(--color-neutral-900) 85%, transparent);
  border: 1px solid var(--color-neutral-700); border-radius: 999px;
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.bmap-reset:hover { border-color: var(--color-accent); color: var(--color-text); }
.bmap-hint {
  position: absolute; bottom: 10px; left: 16px;
  font-size: 11px; color: var(--color-neutral-500); margin: 0; pointer-events: none;
}

.brain-aside { flex: 1 1 260px; max-width: 320px; min-width: 240px; display: flex; flex-direction: column; }
.brain-card { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: var(--space-6); }
#brain-sel { display: flex; flex-direction: column; gap: 10px; }
#brain-sel[hidden], #brain-nosel[hidden], #sel-rel[hidden], .bmap-reset[hidden] { display: none; }
.sel-cluster {
  font-family: ui-monospace, Menlo, monospace; font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-neutral-500); margin: 0;
}
.sel-label { font-weight: 500; font-size: 20px; margin: 0; }
.sel-level { align-self: flex-start; }
.sel-note { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-300); margin: 4px 0 0; text-wrap: pretty; }
.sel-rel { font-size: 12px; color: var(--color-neutral-500); margin: 6px 0 0; }
.sel-rel span { color: var(--color-accent-300); }
.brain-nosel { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-400); margin: 0; }
.brain-note { font-size: 11.5px; color: var(--color-neutral-500); margin: 12px 2px 0; line-height: 1.5; }

/* — projects — */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.proj-card { gap: 8px; padding: var(--space-6); }
.proj-card .card-kicker { margin: 0; }
.proj-card h3 { font-weight: 500; font-size: 18px; margin: 0; letter-spacing: normal; }
.proj-body { font-size: 13.5px; line-height: 1.6; color: var(--color-neutral-300); margin: 0; flex: 1; text-wrap: pretty; }
.proj-tech { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--color-accent-300); margin: 6px 0 0; }

/* — about — */
.about-row { display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; }
.about-photo { flex: 0 0 260px; border-radius: var(--radius-lg); overflow: hidden; }
.about-photo img {
  display: block; width: 260px; height: 300px; object-fit: cover; object-position: 42% 28%;
  mask-image: linear-gradient(180deg, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
}
.about-copy { flex: 1 1 420px; max-width: 620px; }
.about-p1 { font-size: 15px; line-height: 1.7; color: var(--color-neutral-200); margin: 0; text-wrap: pretty; }
.about-p2 { font-size: 15px; line-height: 1.7; color: var(--color-neutral-300); margin: 16px 0 0; text-wrap: pretty; }
.about-tags { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }

/* — contact — */
.contact-lede {
  font-size: 15px; color: var(--color-neutral-300); max-width: 520px;
  margin: 0 0 28px; line-height: 1.65; text-wrap: pretty;
}
.contact-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-btns .btn-ghost { white-space: nowrap; }
.footer-line { font-size: 12px; color: var(--color-neutral-500); margin: 40px 0 0; }

/* — responsive — */
@media (max-width: 759px) {
  .hero { padding: 70px 22px 60px; }
  .sec { padding: 50px 22px; }
  .sec-last { padding-bottom: 90px; }

  .topnav-links { gap: 14px; }
  .topnav-links > a:not(.btn-cv) { display: none; }

  .tl-item { grid-template-columns: 18px 1fr; }
  .tl-year { display: none; }
  .tl-year-inline { display: block; }

  .bmap { height: 420px; flex-basis: 100%; }
  .brain-aside { flex: 1 1 100%; max-width: 100%; }
  .brain-card { flex: 0 0 auto; }
}