:root {
      --background: #000;
      --text: #f5f1e8;
      --muted: #b8b1a4;
      --gold: #d6ad56;
      --gold-light: #ffe5a0;
      --border: rgba(214, 173, 86, 0.36);
    }

    * { box-sizing: border-box; }
    html, body { min-height: 100%; }

    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      color: var(--text);
      background:
        radial-gradient(circle at 50% 50%, rgba(120, 82, 22, 0.14), transparent 32rem),
        var(--background);
      font-family: Georgia, "Times New Roman", serif;
    }

    .page {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      padding: clamp(1rem, 2vw, 2rem);
      isolation: isolate;
    }

    .page::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: 0.36;
      background-image:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,.32) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 18%, rgba(255,255,255,.22) 0 1px, transparent 1.5px),
        radial-gradient(circle at 85% 72%, rgba(255,255,255,.18) 0 1px, transparent 1.5px),
        radial-gradient(circle at 27% 78%, rgba(255,255,255,.16) 0 1px, transparent 1.5px);
      background-size: 19rem 17rem, 23rem 21rem, 29rem 25rem, 31rem 27rem;
    }

    .brand {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(72vw, 31rem);
      text-align: center;
      transform: translate(-50%, -50%);
    }

    .brand-kicker {
      margin: 0 0 .4rem;
      color: var(--muted);
      font-family: Arial, Helvetica, sans-serif;
      font-size: clamp(.68rem, 1.1vw, .84rem);
      letter-spacing: .34em;
      text-transform: uppercase;
    }

    .lamp-button {
      display: inline-grid;
      place-items: center;
      width: clamp(11.5rem, 24vw, 18rem);
      aspect-ratio: 1;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: var(--gold);
      background: transparent;
      cursor: pointer;
      filter: drop-shadow(0 0 1rem rgba(214, 173, 86, .22));
      transition: color .45s ease, filter .45s ease, transform .45s ease;
    }

    .lamp-button:hover,
    .lamp-button:focus-visible {
      color: var(--gold-light);
      filter:
        drop-shadow(0 0 1rem rgba(255, 211, 112, .52))
        drop-shadow(0 0 3.2rem rgba(214, 173, 86, .28));
      transform: scale(1.035);
      outline: none;
    }

    .lamp-button svg { width: 82%; height: auto; overflow: visible; }

    .lamp-flame {
      transform-origin: center bottom;
      animation: flame 3.2s ease-in-out infinite;
    }

    @keyframes flame {
      0%, 100% { transform: scaleY(.94) rotate(-1deg); opacity: .76; }
      50% { transform: scaleY(1.06) rotate(1deg); opacity: 1; }
    }

    .main-title {
      margin: -1rem 0 0;
      color: var(--text);
      font-size: clamp(1.3rem, 3vw, 2.7rem);
      font-weight: 400;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-shadow: 0 0 1.4rem rgba(214,173,86,.28);
    }

    .main-subtitle {
      margin: .45rem 0 0;
      color: var(--muted);
      font-size: clamp(.8rem, 1.3vw, .98rem);
      font-style: italic;
    }

    .nav-card {
      position: absolute;
      display: flex;
      align-items: center;
      gap: .72rem;
      width: clamp(12.5rem, 18vw, 16.5rem);
      min-height: 4.5rem;
      padding: .72rem .85rem;
      border: 1px solid var(--border);
      border-radius: .85rem;
      color: var(--text);
      background: linear-gradient(135deg, rgba(25,23,19,.84), rgba(6,6,6,.66));
      box-shadow: 0 .7rem 2.3rem rgba(0,0,0,.34);
      text-decoration: none;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    .nav-card:hover,
    .nav-card:focus-visible {
      transform: translateY(-3px);
      border-color: rgba(255, 222, 146, .72);
      box-shadow: 0 .8rem 2.7rem rgba(0,0,0,.5), 0 0 1.6rem rgba(214,173,86,.12);
      outline: none;
    }

    .nav-icon {
      display: grid;
      place-items: center;
      flex: 0 0 2.8rem;
      width: 2.8rem;
      height: 2.8rem;
      border: 1px solid var(--border);
      border-radius: 50%;
      color: var(--gold-light);
      background: rgba(214,173,86,.065);
    }

    .nav-icon svg {
      width: 1.55rem;
      height: 1.55rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.65;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .nav-copy { min-width: 0; }

    .nav-title {
      display: block;
      font-family: Arial, Helvetica, sans-serif;
      font-size: clamp(.72rem, 1.05vw, .9rem);
      font-weight: 700;
      letter-spacing: .08em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .nav-status {
      display: block;
      max-height: 0;
      overflow: hidden;
      color: var(--gold-light);
      font-family: Arial, Helvetica, sans-serif;
      font-size: .7rem;
      letter-spacing: .07em;
      line-height: 1.35;
      opacity: 0;
      transform: translateY(-.25rem);
      transition: max-height .25s ease, opacity .25s ease, transform .25s ease, margin .25s ease;
    }

    .nav-card.is-building:hover .nav-status,
    .nav-card.is-building:focus-visible .nav-status,
    .nav-card.is-building.status-visible .nav-status {
      max-height: 2rem;
      margin-top: .25rem;
      opacity: 1;
      transform: translateY(0);
    }

    /* Otto porte distribuite attorno alla Lampada */
    .journal      { top: 3%; left: 3%; }
    .community    { top: 3%; right: 3%; }
    .zodiak       { top: 27%; left: 3%; }
    .library      { top: 27%; right: 3%; }
    .quiet-light  { bottom: 27%; left: 3%; }
    .laboratory   { bottom: 27%; right: 3%; }
    .silence      { bottom: 3%; left: 3%; }
    .markingegno  { bottom: 3%; right: 3%; }

    .lamp-status {
      max-height: 0;
      margin: 0;
      overflow: hidden;
      color: var(--gold-light);
      font-family: Arial, Helvetica, sans-serif;
      font-size: .78rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(-.4rem);
      transition: max-height .25s ease, opacity .25s ease, transform .25s ease, margin .25s ease;
    }

    .lamp-button:hover + .lamp-status,
    .lamp-button:focus-visible + .lamp-status,
    .lamp-status.status-visible {
      max-height: 2rem;
      margin-top: .3rem;
      opacity: 1;
      transform: translateY(0);
    }

    .screen-reader-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    @media (max-width: 920px) {
      body { overflow-y: auto; }

      .page {
        display: flex;
        min-height: 100svh;
        flex-direction: column;
        gap: .75rem;
        padding: 1rem;
      }

      .brand {
        position: relative;
        top: auto;
        left: auto;
        order: 4;
        width: 100%;
        margin: .4rem 0;
        padding: .5rem 0;
        transform: none;
      }

      .lamp-button { width: min(62vw, 16rem); }

      .nav-card {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 4.1rem;
      }

      .journal { order: 0; }
      .community { order: 1; }
      .zodiak { order: 2; }
      .library { order: 3; }
      .quiet-light { order: 5; }
      .laboratory { order: 6; }
      .silence { order: 7; }
      .markingegno { order: 8; }

      .nav-status {
        max-height: 2rem;
        margin-top: .22rem;
        opacity: .76;
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

.version-mark {
  position: fixed;
  left: 50%;
  bottom: .45rem;
  transform: translateX(-50%);
  color: rgba(214,173,86,.38);
  font: 600 .58rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}