/* ===== SIDEBAR ===== */
.sidebar {
  width: 300px;
  min-width: 300px;
  padding: 36px 24px 36px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* divider that stops short of the page top and bottom (same 32px inset as the dot grid) */
@media (min-width: 901px) {
  .sidebar::after { content: ''; position: absolute; top: 32px; bottom: 32px; right: 0; width: 1px; background: var(--border); pointer-events: none; }
}

.profile { margin-bottom: 28px; }

.profile-pic-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;
}
.profile-pic {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  position: absolute; top: 0; left: 0;
}

.profile-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  text-align: center;
  letter-spacing: 0.5px;
}
.profile-meta {
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
  margin-top: 3px;
}
.age-clock {
  font-size: 11px;
  color: var(--fg-muted);
  text-align: center;
  margin-top: 2px;
  font-weight: 300;
}

/* contacts */
.sidebar-contacts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
  padding-bottom: 12px;
}
.sidebar-contacts a {
  color: var(--fg-dim);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-contacts a { overflow-wrap: anywhere; min-width: 0; }
.sidebar-contacts .c-short { display: none; }
.sidebar-contacts a::before {
  content: '→';
  color: var(--fg-muted);
  font-size: 11px;
}
.sidebar-contacts a:hover { color: var(--fg); }

/* nav */
.nav-section { margin-bottom: 22px; }
.nav-header {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.nav-list { list-style: none; }
.tree-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  cursor: default;
  transition: all 0.12s;
}
.tree-item:hover { transform: translateX(3px); }
.tree-link { cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; color: inherit; text-decoration: none; }
.tree-sub .project-name { font-size: 12px; }
.tree-toggle { background: none; border: 0; padding: 0; font: inherit; text-align: left; }
.tree-caret { color: var(--fg-muted); font-size: 11px; width: 8px; display: inline-block; transition: transform .2s ease; }
.tree-toggle[aria-expanded="true"] .tree-caret { transform: rotate(90deg); color: var(--teal); }
.tree-toggle:focus-visible { outline: 1px solid var(--teal); outline-offset: 2px; }
.tree-group { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.tree-group > .nav-list { overflow: hidden; min-height: 0; }
.tree-group.open { grid-template-rows: 1fr; }
.tree-sub { padding-top: 3px; padding-bottom: 3px; }
.tree-branch { color: var(--fg-muted); font-size: 13px; flex-shrink: 0; white-space: pre; }
.project-name { color: var(--fg-dim); font-size: 13px; flex: 1; }
.project-name.featured { color: var(--fg); }
.project-year { color: var(--fg-muted); font-size: 11px; }
.tree-item:hover .project-name { color: var(--fg); }
.tree-item:hover .tree-branch { color: var(--teal); }

/* ===== MAIN CONTENT ===== */
.main-content {
  flex: 1;
  min-width: 0;  /* senza, il contenuto spingeva la pagina oltre la finestra fino a ~1000px */
  padding: 36px 60px;
  display: flex;
  flex-direction: column;
}
.sections-header-row {
  display: flex;
  gap: 48px;
  margin-bottom: 0;
}
.sections-header-col {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.sections-header-col.display-header { margin-bottom: 10px; }
.sections-body {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.main-left {
  flex: 1;
  min-width: 0;
}
.section.display-section {
  flex: 1;
  min-width: 0;
}

.hero-copy-shell {
  min-height: 156px;
  display: flex;
  align-items: center;
  /* Compensate the lower half of the centered shell so the visible gap to the ticker is 32px. */
  margin-bottom: -12px;
}

.hero-copy {
  width: 100%;
}

.hero-cube-shell {
  min-height: 156px;
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.hero-cube {
  margin-bottom: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tagline {
  font-size: 31px;
  font-weight: 300;
  color: var(--fg);
  line-height: 1.35;
  letter-spacing: -0.3px;
  max-width: 20ch;
  white-space: nowrap;
}
.tagline-subtitle {
  display: block;
  margin-top: 6px;
  width: 100%;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0.8px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.tagline-subtitle::before {
  content: "└─ ";
  color: var(--fg-dim);
}

.bio-block { margin-bottom: 32px; }
.bio-block-label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.bio-block-label.is-spaced { margin-bottom: 16px; }
.bio-block-content {
  font-size: 12px;
  color: var(--fg-dim);
  line-height: 1.8;
}
.bio-block-content.is-centered { text-align: center; }
.bio-block-content strong { color: var(--fg); font-weight: 500; }

/* TICKER */
.ticker-wrapper {
  margin-bottom: 32px;
  overflow: hidden;
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticker-prompt { color: var(--teal); font-size: 14.3px; flex-shrink: 0; }
.interest-list {
  list-style: none;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.interest-list li { display: none; font-size: 14.3px; color: var(--fg); }
.interest-list li.active {
  display: block;
  white-space: nowrap;
}

/* SECTIONS */
.section { margin-bottom: 48px; }
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.section-title {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.section-line {
  display: none;   /* le linee dopo i titoli di sezione: tolte, basta lo spazio */
}

/* ===== RESPONSIVE ===== */
/* Medium desktop (901-1279px): sidebar + two content columns stay, but
   everything that had a fixed width (nowrap tagline, cube beside its
   button, wide paddings) used to push the page wider than the window. */
@media (min-width: 901px) and (max-width: 1279px) {
  .sidebar { width: 260px; min-width: 260px; padding: 32px 20px 32px 24px; }
  .main-content { padding: 32px 32px; }
  .sections-body { gap: 32px; }
  .tagline { font-size: clamp(24px, 2.5vw, 31px); white-space: normal; max-width: none; }
  .tagline-subtitle { font-size: 12.5px; letter-spacing: 0.5px; white-space: normal; }
}

/*
  Sotto 900px il layout desktop (sidebar + main) viene APPIATTITO: i wrapper
  diventano display:contents, quindi ogni blocco diventa figlio diretto della
  griglia .container e si riordina con `order`.
  Ordine mobile: foto+claim / nome / ticker / cubo / currently / projects /
  display / tech stack / foto editoriale / contatti.
*/
.mobile-photo { display: none; }

@media (max-width: 900px) {
  .container,
  .container.visible {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    /* la foto 3:4 occupa righe 1-2: l'altezza in piu' va alla riga 2,
       cosi' i contatti restano attaccati al claim invece di staccarsene */
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: 18px;
    padding: 22px 20px 56px;
  }
  .sidebar,
  .main-content,
  .sections-body,
  .sections-body > .content-col,
  .profile,
  [data-boot="display"] { display: contents; }

  /* display:contents non genera un box: opacity/visibility del boot non si
     applicherebbero. Su mobile il boot non gira (boot.js), quindi tutto visibile. */
  [data-boot] { opacity: 1; visibility: visible; animation: none; }

  /* il nav tree duplica la lista projects qui sotto */
  nav[data-boot="nav"] { display: none; }

  /* --- header: foto | claim --- */
  /* La foto occupa la colonna 1 su due righe: accanto ci stanno il claim
     (riga 1) e i contatti (riga 2), cosi' i contatti partono subito sotto
     "Applying Skills" invece di finire sotto la foto. */
  /* sempre 1:1, come su desktop: prima la cornice si stirava sull'altezza
     della riga accanto e cambiava forma a ogni larghezza della finestra */
  .profile-pic-container {
    order: 1; grid-column: 1; grid-row: 1 / span 2;
    align-self: start;
    width: 100%; max-width: 280px;
    aspect-ratio: 1 / 1;
    margin: 0;
  }
  .profile-pic { object-position: center 25%; }
  .hero-copy-shell {
    order: 2; grid-column: 2; grid-row: 1;
    min-height: 0; margin: 0;
    align-items: flex-start;
  }
  .tagline {
    font-size: clamp(21px, 6.2vw, 30px);
    white-space: normal;
    max-width: none;
  }
  .tagline-subtitle { font-size: 11.5px; white-space: normal; letter-spacing: 0.4px; }

  /* blocco identita' in colonna 1, cubo accanto in colonna 2 (stessa riga) */
  /* centrato verticalmente nella riga: stessa distanza dalla foto sopra
     e dal ticker sotto (l'altezza della riga la detta il cubo accanto) */
  .profile-id   { order: 4; grid-column: 1; grid-row: 3; align-self: center; margin: 2px 0 0; }
  .profile-name { text-align: left; line-height: 1.35; }
  /* in mezza colonna queste due andavano a capo male: una riga sola, piu' piccole */
  .profile-meta { text-align: left; font-size: 11px; white-space: nowrap; margin-top: 5px; }
  .age-clock    { text-align: left; font-size: 11px; white-space: nowrap; }

  /* Contatti sotto "Applying Skills", su due sotto-colonne compatte:
     in colonna singola occupavano 220px di altezza e allungavano la foto
     a striscia. Cosi' claim + contatti (~230px) pareggiano la foto 3/4. */
  .sidebar-contacts {
    order: 3; grid-column: 2; grid-row: 2;
    align-self: start;
    display: grid; grid-template-columns: 1fr 1fr;
    margin: 14px 0 0; padding: 0; gap: 0 10px;
  }
  .sidebar-contacts .c-full { display: none; }
  .sidebar-contacts .c-short { display: inline; }
  .sidebar-contacts a { font-size: 12px; min-height: 38px; }

  .ticker-wrapper { order: 7; grid-column: 1 / -1; margin: 0 0 28px; }

  /* --- cubo, subito dopo l'header --- */
  .hero-cube-shell {
    order: 5; grid-column: 1 / -1; grid-row: 3;
    align-self: start;
    min-height: 0; margin: 14px -20px 0 0;
    /* 200px = larghezza del blocco nome (riga meta nowrap): il cubo si
       centra tra il suo bordo destro e il bordo dello schermo */
    padding-left: 200px; justify-content: center;
    pointer-events: none;
  }
  .sidebar-cube-stack { pointer-events: auto; }
  .hero-cube { margin: 0; justify-content: center; }
  /* stack in verticale (cubo sopra, shuffle sotto): vedi cube.css */
  .sidebar-cube-stack { width: 100%; }
  .sidebar-cube { position: relative; transform: none; margin: 0; }
  .sidebar-cube-controls { min-width: 0; }

  .bio-block { order: 9; grid-column: 1 / -1; margin-bottom: 28px; }
  [data-boot="projects"] { order: 10; grid-column: 1 / -1; }
  .sections-header-col.display-header { order: 11; grid-column: 1 / -1; }
  .display-section { order: 12; grid-column: 1 / -1; }
  .tech-grid-section { order: 13; grid-column: 1 / -1; margin-top: 4px; }
  .other-section { order: 13; grid-column: 1 / -1; }
  .mobile-photo { order: 14; grid-column: 1 / -1; margin: 36px 0 28px; }
  .mobile-photo.is-ready { display: block; }

  .section { margin-bottom: 32px; }
  .display-section { margin-bottom: 10px; }

  .sidebar-contacts a { align-items: center; }

  .mobile-photo img {
    width: 100%; aspect-ratio: 4 / 5;
    object-fit: cover; object-position: 45% 0;
    border-radius: 4px; display: block;
  }
  .mobile-photo figcaption {
    margin-top: 8px;
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--fg-muted);
  }
}

/* Telefono: la foto quadrata e' piu' bassa di claim + contatti, e la colonna
   sinistra restava vuota per ~120px. Qui la foto sta accanto al solo claim
   e i contatti passano su una riga intera sotto. */
@media (max-width: 600px) {
  .container, .container.visible { grid-template-rows: auto auto; }
  .profile-pic-container { grid-row: 1; }
  .hero-copy-shell { grid-row: 1; align-self: center; }
  .sidebar-contacts {
    grid-column: 1 / -1; grid-row: 2;
    /* 3 + 2 invece di 4 + 1 */
    display: grid; grid-template-columns: repeat(3, max-content); gap: 0 22px;
    margin: 16px 0 0;
  }
  .sidebar-contacts a { min-height: 36px; }
}

@media (max-width: 380px) {
  .container, .container.visible { column-gap: 14px; padding: 18px 16px 48px; }
  /* a 320px "instagram" andava a capo nella sotto-colonna */
  .sidebar-contacts a { font-size: 11px; gap: 6px; }
}