* { box-sizing: border-box; }
    :root {
      color-scheme: dark;
      --night:#07101e;
      --night-soft:#0d1a2b;
      --paper:#f1f0e8;
      --ink:#20312e;
      --muted:#667570;
      --line:rgba(33,54,50,.16);
      --blue:#50758f;
      --amber:#d49a57;
      --max:1180px;
    }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      background:var(--paper);
      color:var(--ink);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      font-size:16px;
      line-height:1.6;
    }
    a { color:inherit; }
    img { display:block; width:100%; height:auto; }
    button { font:inherit; }
    .topbar {
      position:sticky;
      top:0;
      z-index:10;
      border-bottom:1px solid rgba(255,255,255,.12);
      background:rgba(7,16,30,.86);
      color:#eef3f4;
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
    }
    .topbar-inner {
      width:min(var(--max),calc(100% - 40px));
      min-height:58px;
      margin:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }
    .back,.language {
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:36px;
      padding:7px 10px;
      border:0;
      border-radius:10px;
      background:transparent;
      color:inherit;
      text-decoration:none;
      cursor:pointer;
      opacity:.82;
    }
    .back:hover,.back:focus-visible,.language:hover,.language:focus-visible { background:rgba(255,255,255,.09); opacity:1; outline:none; }
    .back svg,.language svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .topbar strong { font-size:14px; letter-spacing:.04em; }
    .hero {
      position:relative;
      overflow:hidden;
      /* the photo's own sky reads #051125 at the top, so the page blue lands on
         the same value and the picture can fade in with no visible seam */
      padding:clamp(58px,7.4vw,104px) 20px clamp(228px,24vw,338px);
      background:linear-gradient(180deg,#060e1c 0%,#051125 58%,#051327 100%);
      color:#eef3f4;
    }
    .hero-photo {
      position:absolute;
      left:0;
      bottom:0;
      z-index:0;
      width:100%;
      height:auto;
      -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 36%);
      mask-image:linear-gradient(180deg,transparent 0,#000 36%);
    }
    .hero::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
      background:linear-gradient(180deg,rgba(5,16,34,.72) 0%,rgba(5,16,34,.34) 30%,rgba(5,16,34,.08) 48%,rgba(5,16,34,0) 62%);
    }
    .hero::after {
      content:"";
      position:absolute;
      inset:auto -8% -70px;
      z-index:2;
      height:170px;
      background:var(--paper);
      clip-path:polygon(0 79%,12% 38%,25% 71%,39% 27%,54% 65%,68% 20%,83% 59%,100% 31%,100% 100%,0 100%);
    }
    .hero-inner { position:relative; z-index:3; width:min(900px,100%); margin:auto; text-align:center; }
    .eyebrow { margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; opacity:.62; }
    h1 { margin:0; font-size:clamp(46px,8vw,92px); line-height:.93; font-weight:520; letter-spacing:-.045em; text-shadow:0 2px 30px rgba(4,10,22,.5); }
    .lede { max-width:660px; margin:26px auto 0; font-size:clamp(17px,2.2vw,21px); line-height:1.55; color:rgba(238,243,244,.82); text-shadow:0 1px 18px rgba(4,10,22,.55); }
    .toc {
      width:min(var(--max),calc(100% - 40px));
      /* below the hero's zig-zag edge, never above it: the tiles start where
         the ridge ends, with a little air in between */
      margin:28px auto 80px;
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:18px;
      background:rgba(255,255,255,.82);
      box-shadow:0 18px 55px rgba(32,49,46,.10);
    }
    .toc a { padding:18px 20px; text-decoration:none; font-size:14px; font-weight:650; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
    .toc a:nth-child(3n) { border-right:0; }
    .toc a:nth-child(n+4) { border-bottom:0; }
    .toc span { display:block; margin-bottom:4px; color:var(--amber); font-size:11px; letter-spacing:.12em; }
    .toc a:hover,.toc a:focus-visible { background:#fff; outline:none; }
    main { overflow:hidden; }
    section { width:min(var(--max),calc(100% - 40px)); margin:0 auto clamp(96px,12vw,156px); scroll-margin-top:90px; }
    .section-head { display:grid; grid-template-columns:100px minmax(0,650px); gap:28px; margin-bottom:42px; }
    .section-no { color:var(--amber); font-size:13px; font-weight:750; letter-spacing:.16em; }
    h2 { margin:0 0 14px; font-size:clamp(34px,5vw,58px); line-height:1; font-weight:530; letter-spacing:-.035em; }
    .section-head p { margin:0; color:var(--muted); font-size:18px; }
    .scene-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    figure { margin:0; }
    .shot {
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:20px;
      background:#dfe5e1;
      box-shadow:0 12px 35px rgba(32,49,46,.08);
    }
    .shot img { aspect-ratio:16/9; object-fit:cover; }
    .detail-shot img { transform:scale(var(--zoom,1.8)); transform-origin:var(--origin,center); }
    .toolbar-shot { --zoom:2.35; --origin:left bottom; }
    .panel-shot { --zoom:1.7; --origin:left bottom; }
    .hud-shot { --zoom:1; --origin:center; }
    .hud-shot img { aspect-ratio:5/1; }
    .star-shot,
    .planet-shot,
    .iss-shot,
    .landing-shot,
    .rifugio-shot,
    .cow-shot,
    .roedeer-shot { --zoom:1; --origin:center; }
    .peak-shot { --zoom:1.85; --origin:39% top; }
    figcaption { padding:15px 3px 0; color:var(--muted); font-size:14px; }
    figcaption strong { display:block; margin-bottom:2px; color:var(--ink); font-size:16px; }
    .scene-note { max-width:760px; margin:30px auto 0; padding:18px 22px; border-left:3px solid var(--amber); background:rgba(255,255,255,.56); color:var(--muted); }
    .scene-note strong { color:var(--ink); }
    .fir-shot { background:#e6ece7; }
    .fir-shot svg { display:block; width:100%; height:auto; }
    .fir-trunk { fill:#4b4a3b; opacity:.5; }
    /* a slow ambient lean, plus a gust that ripples left-to-right across the row
       (staggered by --i) and lifts the crowns more than the trunks */
    .fir { transform-box:fill-box; transform-origin:50% 100%; animation:fir-breeze 4.6s ease-in-out infinite; animation-delay:calc(var(--i) * -0.6s); }
    .fir-crown { transform-box:fill-box; transform-origin:50% 100%; animation:fir-gust 7s cubic-bezier(.34,.06,.28,1) infinite; animation-delay:calc(var(--i) * 0.26s); }
    @keyframes fir-breeze { 0%,100% { transform:rotate(-.7deg); } 50% { transform:rotate(.7deg); } }
    @keyframes fir-gust {
      0%,45% { transform:rotate(0deg); }
      54% { transform:rotate(3.2deg); }
      63% { transform:rotate(-1.3deg); }
      72% { transform:rotate(1.9deg); }
      81% { transform:rotate(-.7deg); }
      90% { transform:rotate(.5deg); }
      100% { transform:rotate(0deg); }
    }
    .feature { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); gap:clamp(34px,6vw,74px); align-items:center; margin-top:26px; }
    .feature + .feature { margin-top:76px; }
    .feature.reverse { grid-template-columns:minmax(310px,.75fr) minmax(0,1.25fr); }
    .feature.reverse .shot { order:2; }
    .feature-copy h3 { margin:0 0 12px; font-size:28px; line-height:1.12; font-weight:580; letter-spacing:-.02em; }
    .feature-copy p { margin:0 0 18px; color:var(--muted); }
    .key-list { list-style:none; padding:0; margin:0; }
    .key-list li { display:grid; grid-template-columns:42px 1fr; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
    .key-list svg { width:30px; height:30px; padding:6px; border:1px solid var(--line); border-radius:9px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .key-list strong { display:block; font-size:14px; }
    .key-list span { color:var(--muted); font-size:13px; }
    .hud-legend { display:grid; grid-template-columns:repeat(2,1fr); gap:0 34px; margin:20px 0 0; padding:0; list-style:none; counter-reset:hud; }
    .hud-legend li { position:relative; padding:12px 0 12px 34px; border-top:1px solid var(--line); color:var(--muted); }
    .hud-legend li::before { counter-increment:hud; content:counter(hud); position:absolute; left:0; top:12px; color:var(--amber); font-weight:750; }
    .hud-legend strong { color:var(--ink); }
    .interaction-note { margin:-14px 0 44px 128px; max-width:710px; padding:18px 20px; border-left:3px solid var(--amber); background:rgba(255,255,255,.56); color:var(--muted); }
    .object-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
    .object-card { overflow:hidden; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.52); }
    .object-card .shot { border:0; border-radius:0; box-shadow:none; }
    .object-card .shot img { aspect-ratio:16/10; }
    .object-copy { padding:24px 26px 27px; }
    .object-copy h3 { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 8px; font-size:24px; line-height:1.1; font-weight:580; }
    .object-copy h3 span:last-child { color:var(--amber); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
    .object-copy p { margin:0; color:var(--muted); }
    .object-card.wide { grid-column:1/-1; display:grid; grid-template-columns:1.2fr .8fr; min-height:312px; }
    .object-card.wide .shot { position:relative; min-height:312px; }
    .object-card.wide .shot img { position:absolute; inset:0; width:100%; height:100%; min-height:0; aspect-ratio:auto; object-fit:cover; }
    .para-shot { --zoom:1; --origin:center; }
    .para-shot img { object-fit:cover; }
    .wolf-shot { --zoom:1; --origin:center; }
    .wolf-shot img { object-fit:cover; }
    /* helicopters: a three-up strip of the machines, then the copy */
    .heli-card { grid-template-columns:1.4fr .6fr; }
    .heli-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); }
    .heli-trio figure { margin:0; background:#dfe5e1; }
    .heli-trio img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
    .heli-trio figcaption { padding:11px 13px 15px; color:var(--muted); font-size:12.5px; line-height:1.45; }
    .heli-trio figcaption strong { display:block; margin-bottom:2px; color:var(--ink); font-size:13.5px; }
    footer { padding:52px 20px; background:var(--night); color:#eef3f4; text-align:center; }
    footer p { margin:0 0 18px; opacity:.68; }
    footer a { display:inline-block; padding:10px 15px; border:1px solid rgba(255,255,255,.25); border-radius:11px; text-decoration:none; }
    .footer-note { max-width:420px; margin:26px auto 0; font-size:13px; line-height:1.5; opacity:.5; }
    .footer-note strong { font-weight:600; opacity:.9; }
    /* Hide the language that is not active. The visible one keeps its own
       display value (block, flex, …) instead of being forced back to the
       browser default, which used to run <strong> and its <span> onto one
       line in English. */
    html:not([lang="en"]) [data-lang="en"] { display:none !important; }
    html[lang="en"] [data-lang="it"] { display:none !important; }
    @media (max-width:820px) {
      .toc { grid-template-columns:repeat(2,1fr); }
      .toc a:nth-child(3n) { border-right:1px solid var(--line); }
      .toc a:nth-child(2n) { border-right:0; }
      .toc a:nth-child(-n+4) { border-bottom:1px solid var(--line); }
      .toc a:nth-child(n+5) { border-bottom:0; }
      .section-head { grid-template-columns:1fr; gap:7px; }
      .scene-grid { grid-template-columns:repeat(2,1fr); }
      .scene-grid .shot img { aspect-ratio:2/1; }
      .feature,.feature.reverse { grid-template-columns:1fr; }
      .feature.reverse .shot { order:0; }
      .interaction-note { margin-left:0; }
      .hero-photo { width:165%; left:50%; transform:translateX(-50%); }
      .object-card.wide { display:block; min-height:0; }
      .object-card.wide .shot { position:static; min-height:0; }
      .object-card.wide .shot img { position:static; height:auto; min-height:0; aspect-ratio:16/10; }
      .heli-trio figcaption { font-size:12px; }
    }
    @media (max-width:560px) {
      .heli-trio { grid-template-columns:1fr; }
    }
    @media (max-width:620px) {
      .topbar-inner { width:min(100% - 20px,var(--max)); }
      .topbar strong { display:none; }
      .toc { width:calc(100% - 24px); margin-bottom:66px; }
      .toc a { padding:14px; font-size:13px; }
      section { width:calc(100% - 28px); margin-bottom:94px; }
      .object-list { grid-template-columns:1fr; }
      .object-card.wide { grid-column:auto; }
      .hud-legend { grid-template-columns:1fr; }
      /* keep the crescent inside the frame when the picture is blown up */
      .hero-photo { width:230%; transform:translateX(-62%); }
      .scene-grid { grid-template-columns:1fr; }
    }
    @media (prefers-reduced-motion:reduce) {
      html { scroll-behavior:auto; }
      .fir,.fir-crown { animation:none; }
      .fir { transform:rotate(-1deg); }
      .fir-crown { transform:rotate(-1.8deg); }
    }