/* self-hosted fonts, embedded — no external requests */
  @font-face{
    font-family:'Source Serif 4'; font-style:normal; font-weight:200 900;
    font-optical-sizing:auto;
    src:url(../fonts/source-serif-4-normal-200-900.4c4d14ec.woff2) format('woff2');
    font-display:swap;
  }
  @font-face{
    font-family:'Source Serif 4'; font-style:italic; font-weight:200 900;
    font-optical-sizing:auto;
    src:url(../fonts/source-serif-4-italic-200-900.7be705ca.woff2) format('woff2');
    font-display:swap;
  }
  @font-face{
    font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
    src:url(../fonts/ibm-plex-mono-normal-400.bb87500e.woff2) format('woff2');
    font-display:swap;
  }
  @font-face{
    font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
    src:url(../fonts/ibm-plex-mono-normal-500.d32f0e07.woff2) format('woff2');
    font-display:swap;
  }
  :root{
    --bg:#ffffff;
    --paper:#ffffff;
    --ink:#15150d;
    --ink-soft:#6e6e5f;
    --line:#e2dfd0;
    --grid-line:#eae7d8;
    --accent:#9a6a34;
    --serif:'Source Serif 4', Georgia, serif;
    --mono:'IBM Plex Mono', ui-monospace, monospace;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#100f0a; --paper:#171610; --ink:#f0eee2; --ink-soft:#a19f8d;
      --line:#312f22; --grid-line:#221f16; --accent:#c99a5c;
    }
  }
  :root[data-theme="dark"]{
    --bg:#100f0a; --paper:#171610; --ink:#f0eee2; --ink-soft:#a19f8d;
    --line:#312f22; --grid-line:#221f16; --accent:#c99a5c;
  }

  *{box-sizing:border-box;}
  html{ scroll-behavior:auto; }
  section[id], #top{ scroll-margin-top:90px; }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--serif); font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  ::selection{ background:var(--accent); color:var(--paper); }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

  .scroll-progress{
    position:fixed; top:0; left:0; height:2px; width:0%;
    background:var(--accent); z-index:30; pointer-events:none;
  }

  /* scroll reveal */
  .reveal{
    opacity:0; transform:translateY(46px) scale(0.97);
    transition:opacity 1.2s cubic-bezier(.22,1,.36,1), transform 1.2s cubic-bezier(.22,1,.36,1);
  }
  .reveal.in-view{ opacity:1; transform:translateY(0) scale(1); }

  /* hero entrance */
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(32px); } to{ opacity:1; transform:translateY(0); } }
  .hero h1{ animation:fadeUp 1.1s cubic-bezier(.22,1,.36,1) both; }
  .hero .meta{ animation:fadeUp 1.1s cubic-bezier(.22,1,.36,1) .18s both; }
  .hero .toc{ animation:fadeUp 1.1s cubic-bezier(.22,1,.36,1) .36s both; }

  /* persistent structural grid */
  .grid-guides{
    position:fixed; inset:0; pointer-events:none; z-index:0;
    display:grid; grid-template-columns:repeat(12,1fr);
    max-width:1400px; margin:0 auto; padding:0 clamp(18px,4vw,40px);
  }
  .grid-guides span{ border-left:1px solid var(--grid-line); height:100%; }
  .grid-guides span:last-child{ border-right:1px solid var(--grid-line); }

  .wrap{ max-width:1400px; margin:0 auto; padding:0 clamp(18px,4vw,40px); position:relative; z-index:1; }

  header.site{
    display:flex; justify-content:space-between; align-items:center;
    padding: 20px 0; border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:20; background:var(--bg);
  }
  .wordmark{ display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; }
  .wordmark-svg{ display:block; width:142.7px; height:41px; }
  @media (max-width:860px){ .wordmark-svg{ width:109.2px; height:32px; } }
  nav.primary{ display:flex; gap:clamp(14px,2.6vw,30px); font-family:var(--mono); }
  nav.primary a{ font-size:12px; text-decoration:none; color:var(--ink-soft); }
  nav.primary a:hover{ color:var(--accent); }

  .burger{
    position:relative; z-index:21; width:34px; height:34px; padding:0;
    background:none; border:1px solid var(--line); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    transition:border-color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
  }
  .burger:hover{ border-color:var(--accent); transform:scale(1.06); }
  .burger span{ display:block; width:16px; height:1px; background:var(--ink); transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease, background .3s ease; }
  .burger:hover span{ background:var(--accent); }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; transform:translateX(-6px); }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .site-menu{
    position:absolute; top:100%; right:0; z-index:19;
    width:min(360px, 100%); background:var(--bg); border:1px solid var(--line); border-top:none;
    padding:8px clamp(18px,3.4vw,32px) 14px;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transform:translateY(-10px);
    transition:max-height .5s cubic-bezier(.22,1,.36,1), opacity .4s ease, transform .5s cubic-bezier(.22,1,.36,1);
  }
  .site-menu.open{ max-height:420px; opacity:1; pointer-events:auto; transform:translateY(0); }
  .site-menu a{
    display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink);
    font-family:var(--mono); font-size:13px; padding:13px 2px; border-bottom:1px solid var(--line);
    opacity:0; transform:translateX(16px);
    transition:color .25s ease, opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  }
  .site-menu.open a{ opacity:1; transform:translateX(0); }
  .site-menu.open a:nth-child(1){ transition-delay:.06s; }
  .site-menu.open a:nth-child(2){ transition-delay:.11s; }
  .site-menu.open a:nth-child(3){ transition-delay:.16s; }
  .site-menu.open a:nth-child(4){ transition-delay:.21s; }
  .site-menu.open a:nth-child(5){ transition-delay:.26s; }
  .site-menu.open a:nth-child(6){ transition-delay:.31s; }
  .site-menu a:hover{ color:var(--accent); }
  .site-menu a .n{ color:var(--ink-soft); }
  .site-menu a .it{ }
  .site-menu a .en{ color:var(--ink-soft); }
  .site-menu a .en::before{ content:" — "; }
  .folio-tag{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); display:flex; gap:8px; align-items:center; margin-bottom:18px;}
  .folio-tag::before{ content:""; width:16px; height:1px; background:var(--accent); display:inline-block; }

  section{ padding: clamp(56px,7vw,100px) 0; border-bottom:1px solid var(--line); }
  section:last-of-type{ border-bottom:none; }

  /* HERO */
  .hero{ display:grid; grid-template-columns: 1.3fr 1fr; gap:clamp(24px,4vw,60px); align-items:start; padding-top:clamp(60px,9vw,110px); }
  .hero h1{
    font-family:var(--serif); font-weight:400; font-size:clamp(40px,6.4vw,78px);
    line-height:1.05; margin:0 0 20px; letter-spacing:-0.01em;
  }
  .hero .meta{ font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); max-width:48ch; line-height:1.7; }
  .toc{ font-family:var(--mono); font-size:12.5px; border-top:1px solid var(--line); }
  .toc a{ display:flex; justify-content:space-between; text-decoration:none; color:var(--ink-soft);
    padding:11px 0; border-bottom:1px solid var(--line); }
  .toc a:hover{ color:var(--accent); }
  .toc a .n{ color:var(--ink); }
  .toc a .dots{ flex:1; border-bottom:1px dotted var(--line); margin:0 10px 4px; }

  h2{
    font-family:var(--serif); font-weight:400;
    font-size:clamp(26px,3.2vw,36px); line-height:1.2; margin:0 0 22px; max-width:18ch;
  }
  .cols{ display:grid; grid-template-columns: 1fr 1fr; gap:clamp(24px,4vw,60px); }
  p.body-text{ font-size:16px; max-width:56ch; margin:0 0 14px; }
  p.body-text.soft{ color:var(--ink-soft); font-size:14.5px; }

  /* bilingual blocks — both languages always visible */
  div[data-lang]{ margin-bottom:24px; }
  div[data-lang]:last-child{ margin-bottom:0; }
  div[data-lang]::before{
    content: attr(data-lang);
    display:block; font-family:var(--mono); font-size:10.5px;
    text-transform:uppercase; letter-spacing:0.1em; color:var(--accent);
    margin-bottom:9px;
  }
  div[data-lang="en"]{ color:var(--ink-soft); }
  .toc [data-lang="en"]::before,
  .folio-tag [data-lang="en"]::before,
  figcaption [data-lang="en"]::before{ content:" — "; }
  .hero h1 span{ display:block; }
  .hero h1 [data-lang="en"]{
    color:var(--ink-soft); opacity:0.6; margin-top:8px;
  }
  .en-h2{ color:var(--ink-soft); opacity:0.6; margin-top:8px; }

  /* PROGETTI as index */
  .index-list{ font-family:var(--mono); font-size:13px; margin-top:8px; }
  .index-list .row{ display:flex; align-items:baseline; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink-soft); }
  .index-list .row:first-child{ border-top:1px solid var(--line); }
  .index-list .row .dots{ flex:1; border-bottom:1px dotted var(--line); margin-bottom:4px; }

  .work-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:44px; }
  .work-grid .work-card{
    opacity:0; transform:translateY(34px) scale(0.97);
    transition:opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1),
      border-color .3s ease;
  }
  .work-grid.in-view .work-card{ opacity:1; transform:translateY(0) scale(1); }
  .work-grid.in-view .work-card:nth-child(1){ transition-delay:0s; }
  .work-grid.in-view .work-card:nth-child(2){ transition-delay:.12s; }
  .work-grid.in-view .work-card:nth-child(3){ transition-delay:.24s; }
  .work-grid.in-view .work-card:nth-child(4){ transition-delay:.36s; }
  .work-card{ display:block; color:inherit; border:1px solid var(--line); background:var(--paper); }
  .work-grid .work-card:hover{ transform:translateY(-3px); border-color:var(--ink-soft); }
  .work-card .media{ padding:0; }
  .work-card .cover{ aspect-ratio:1440/1045; position:relative; overflow:hidden; background:var(--bg); }
  .work-card .cover::before{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(180deg, transparent 0 38px, var(--line) 38px 39px);
  }
  .work-card .ghost-num{
    position:absolute; right:14px; bottom:2px; font-family:var(--serif);
    font-size:92px; color:rgba(0,0,0,0.08); line-height:1; pointer-events:none;
  }
  .work-card .cover img{ width:100%; height:100%; object-fit:contain; display:block;
    animation:ambientDrift 26s ease-in-out infinite; transform-origin:center center; will-change:transform;
    filter:grayscale(1) sepia(.33) saturate(.6) hue-rotate(-7deg) brightness(1.11) contrast(.85);
    transition:filter .6s cubic-bezier(.22,1,.36,1);
  }
  .work-card:hover .cover img{
    filter:grayscale(0) sepia(0) saturate(1) hue-rotate(0deg) brightness(1) contrast(1);
  }
  @keyframes ambientDrift{
    0%,100%{ transform:scale(1) translate(0,0); }
    50%{ transform:scale(1.045) translate(-1.8%,1.2%); }
  }
  .work-grid .work-card:nth-child(1) .cover img{ animation-duration:24s; animation-delay:-3s; }
  .work-grid .work-card:nth-child(2) .cover img{ animation-duration:29s; animation-delay:-11s; }
  .work-grid .work-card:nth-child(3) .cover img{ animation-duration:21s; animation-delay:-6s; }
  .work-grid .work-card:nth-child(4) .cover img{ animation-duration:27s; animation-delay:-17s; }
  .work-grid .work-card:nth-child(5) .cover img{ animation-duration:33s; animation-delay:-9s; }
  .work-grid .work-card:nth-child(6) .cover img{ animation-duration:23s; animation-delay:-2s; }

  .work-card .slides{
    position:absolute; inset:0; display:flex; width:100%; height:100%;
    transition:transform 3.6s cubic-bezier(.19,1,.22,1);
  }
  .work-card .slide{
    flex:0 0 100%; width:100%; height:100%; position:relative; display:block;
    padding:0; margin:0; border:0; background:none; cursor:zoom-in;
  }
  .work-card .dots{ display:flex; gap:6px; padding:12px 18px 0; }
  .work-card .dots button{
    position:relative; width:8px; height:12px; padding:0; margin:0; border:none;
    background:none; cursor:pointer; transition:width .4s ease;
  }
  .work-card .dots button::before{
    content:""; position:absolute; left:0; right:0; top:5px; height:2px;
    background:rgba(0,0,0,0.2); transition:background .3s ease;
  }
  .work-card .dots button.active{ width:14px; }
  .work-card .dots button.active::before{ background:var(--accent); }
  .work-card .card-meta{
    display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
    padding:14px 16px 16px 18px;
  }
  .work-card .title-link{ text-decoration:none; }
  .work-card .card-title{ font-family:var(--serif); font-style:italic; font-size:19px; margin:0 0 4px; color:var(--ink); }
  .work-card .card-sub{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin:0; }
  .work-card .title-link:hover .card-title{ color:var(--accent); }
  .work-card .behance-link{
    display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
    color:#bdbbb0; text-decoration:none; font-family:var(--serif); font-size:14.5px; line-height:1;
    transition:color .25s ease;
  }
  .work-card .behance-link svg{ width:19px; height:19px; fill:currentColor; display:block; }
  .work-card .behance-link:hover{ color:var(--accent); }
  .work-link{ display:inline-flex; gap:8px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:2px; margin-top:22px; font-size:14.5px; }
  .work-link:hover{ color:var(--accent); border-color:var(--accent); }

  /* COMPETENZE table */
  table.skills{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13.5px; max-width:60ch; }
  table.skills td{ padding:13px 0; border-bottom:1px solid var(--line); }
  table.skills tr:first-child td{ border-top:1px solid var(--line); }
  table.skills td.n{ color:var(--ink-soft); width:40px; }
  table.skills td.label{ font-family:var(--serif); font-size:17px; color:var(--ink); }

  .competenze-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); align-items:center; }
  .precision-figure{ margin:0; will-change:transform; }
  .precision-figure svg{ width:100%; height:auto; display:block; }
  .precision-figure text{ font-family:var(--mono); }

  /* METODO */
  .metodo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,60px); align-items:start; }
  .contact-row{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; }
  .social-links{ display:flex; gap:10px; margin-top:28px; }
  .social-links a{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; background:#d6d6d0; color:#fff;
    transition:background .3s ease;
  }
  .social-links a:hover{ background:var(--accent); }
  .social-links svg{ width:16px; height:16px; fill:currentColor; display:block; }

  footer{ padding:26px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); }
  footer a{ color:inherit; text-decoration:none; }
  footer a:hover{ color:var(--accent); }

  .footnote{ margin-top:22px; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ink-soft); }
  .footnote p{ margin:0 0 4px; }

  /* lightbox */
  .lightbox{
    position:fixed; inset:0; z-index:100; background:rgba(255,255,255,0.985);
    display:flex; flex-direction:column;
    opacity:0; visibility:hidden;
    transition:opacity .45s ease, visibility 0s linear .45s;
  }
  .lightbox.open{ opacity:1; visibility:visible; transition:opacity .45s ease; }
  .lb-bar{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:7px clamp(18px,4vw,40px); font-family:var(--mono); font-size:11.5px; color:var(--ink-soft);
    border-bottom:1px solid var(--line);
  }
  .lb-caption{ flex:1; text-align:center; color:var(--ink-soft); }
  .lb-controls{ display:flex; gap:6px; }
  .lb-controls button{
    width:26px; height:26px; background:none; border:1px solid var(--line); color:var(--ink);
    font-family:var(--mono); font-size:12px; line-height:1; padding:0; cursor:pointer; transition:border-color .25s ease, color .25s ease;
  }
  .lb-controls button:hover{ border-color:var(--accent); color:var(--accent); }
  .lb-stage{
    flex:1; min-height:0; overflow:auto; display:flex; position:relative;
    padding:14px clamp(18px,4vw,40px);
  }
  .lb-stage:not(.zoomed){ touch-action:none; }
  .lb-stage.swiping{ overflow:hidden; }
  .lb-side{ display:none; position:absolute; top:14px; bottom:14px; left:clamp(18px,4vw,40px); right:clamp(18px,4vw,40px); pointer-events:none; will-change:transform; }
  .lb-stage.swiping .lb-side{ display:flex; }
  .lb-stage.swiping #lb-img{ will-change:transform; }
  .lb-stage img{
    margin:auto; display:block; width:auto; height:auto; user-select:none; -webkit-user-drag:none;
    max-width:100%; max-height:calc(100vh - 88px); border:1px solid var(--line); background:#fff; cursor:zoom-in;
  }
  .lb-note{
    display:none; padding:7px clamp(18px,4vw,40px) 10px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11px; line-height:1.55; color:var(--ink-soft); text-align:center;
  }
  .lb-note p{ margin:0; }
  .lightbox.has-note .lb-note{ display:block; }
  .lightbox.has-note .lb-stage img{ max-height:calc(100vh - 128px); }
  .lb-stage.zoomed img{ max-width:none; max-height:none; cursor:zoom-out; }
  .lb-stage.zoomed.dragging img{ cursor:grabbing; }
  @media (max-width: 860px){
    .hero, .cols, .metodo-grid, .competenze-grid{ grid-template-columns:1fr; }
    .work-grid{ grid-template-columns:1fr; }
    .grid-guides{ display:none; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; animation:none !important; }
    .reveal, .work-grid .work-card{ opacity:1 !important; transform:none !important; }
    .scroll-progress{ display:none !important; }
  }