/* ============================================================
   WORKS section — base layout
   Tokens/reset arrive from hero.css (load it BEFORE this file).
   The persistent header (logo, wordmark, horizontal rule, section
   label, side rule) mirrors Vision/Contacts 1:1 — the fixed
   cross-section header. NOTE: these header rules are duplicated
   with vision.css/contacts.css for now; TODO extract to a shared
   header.css (see CLAUDE.md "Header persistente tra le sezioni").
   The BODY is a placeholder awaiting the Works SVG export.
   ============================================================ */
body {
    background: var(--bg-green);
    color: var(--cream);
    font-family: var(--font-display);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* PINNED: il wrapper riserva la corsa di scroll; la sezione resta ferma
     (sticky) per ~1 schermata extra → serve un "doppio scroll" per superarla,
     così Works si nota anche senza animazioni scroll-trigger. */
  .works-scroll {
    position: relative;
    height: 200vh;
  }
  .works {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  /* ---------- Persistent header (WORKS variant) ---------- */
  .header { position:absolute; top:var(--edge-top); left:0; right:0; height:35px; z-index:30; display:flex; align-items:center; }
  .brand-logo { position:absolute; left:40px; top:5px; width:48px; height:23px; }
  .brand-logo svg { width:100%; height:100%; display:block; }
  .wordmark {
    position:absolute; left:98px; top:0;
    font-weight:500; font-size:var(--fs-nav); letter-spacing:var(--tracking);
    line-height:35px; white-space:nowrap; color:var(--cream);
    -webkit-text-stroke:3px var(--red); paint-order:stroke fill;
  }
  .wordmark .red { color:var(--red); }
  .rule-h { position:absolute; top:16px; height:var(--rule-w); background:var(--cream); }
  .section-label {
    position:absolute; right:var(--edge-x); top:0;
    font-weight:500; font-size:var(--fs-nav); letter-spacing:var(--tracking);
    line-height:35px; color:var(--cream);
    -webkit-text-stroke:3px var(--red); paint-order:stroke fill;
  }
  .rule-v { position:absolute; right:30px; top:110px; height:689px; width:var(--rule-w); background:var(--cream); z-index:20; }

  /* ---------- Riga orizzontale (scroll nativo, scrollbar nascosta) ---------- */
  /* Frame a y=559 nel design → titolo ~top:505px. Titolo e frame accoppiati
     dentro .work-item; la riga scorre in orizzontale (trackpad / drag). */
  .works-row {
    position:absolute; left:0; right:0; top:50%;
    display:flex; align-items:flex-start; gap:35px;
    padding:0 40px 24px;
    overflow-x:auto; overflow-y:hidden;
    scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
    /* scrollbar nascosta (Firefox / IE / WebKit) — resta scrollabile */
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .works-row::-webkit-scrollbar { display:none; }

  .work-item { flex:0 0 auto; }
  .work-title {
    margin:0 0 20px; line-height:1; white-space:nowrap;
    font-weight:700; font-size:26pt; letter-spacing:var(--tracking);
    color:var(--cream);
  }
  .work-title .r { color:var(--red); }
  .work-title--red { color:var(--red); }

  .work-frame {
    display:block; overflow:hidden; cursor:pointer;
    background:none; border:0; padding:0;
    transition:opacity .2s ease;
  }
  .work-frame:hover { opacity:.9; }
  .work-frame img { display:block; width:100%; height:100%; object-fit:cover; }

  /* Dimensioni esatte dei frame dal design (px) */
  .work-frame--portfolio { width:419px; height:264px; }
  .work-frame--landing   { width:408px; height:232px; }
  .work-frame--tonello   { width:414px; height:289px; }
  .work-frame--company   { width:411px; height:233px; background:var(--red); opacity:.8; }
  .work-frame--company:hover { opacity:.95; }

  @media (max-width:768px){
    :root{ --fs-nav:18px; }
    .brand-logo{ left:20px; } .wordmark{ left:74px; } .section-label{ right:20px; } .rule-v{ right:20px; }
  }