/* Definitive direction: electric blue, paper white, black. Native CSS.
   Jacquard and its spring typography are recovered from the 08 saved version. */
:root, html[data-mood=noir] {
  --electric: #003cff;
  --paper: #fff;
  --ink: #080808;
  --muted: #555;
  --line: #d9d9de;
  --blue: #003cff;
  --red: #003cff;
  --surface: #f2f3f6;
  --surface-2: #e9edf6;
  --product-bg: #f2f3f6;
  --night: #080808;
  --night-text: #fff;
  --sticker-blue: #003cff;
  --sticker-lime: #fff;
  --sticker-violet: #080808;
  --mark-color: #003cff;
  --sans: Arial, Helvetica, sans-serif;
  --serif: Arial, Helvetica, sans-serif;
  --pad: clamp(22px, 4vw, 76px);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
html { background: #fff; scroll-padding-top: 94px; }
body { background: #fff; color: var(--ink); }
html, body { margin: 0; }
body.intro-visible { overflow: hidden; }
::selection { background: var(--electric); color: #fff; }
main, footer, .site-header, .project-detail, .category-projects, .about { background: #fff; color: var(--ink); }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--electric); outline-offset: 5px; }
[hidden] { display: none !important; }

/* Full photograph, no tint, no blur, no moving crop. */
.definitive-intro { position: fixed; inset: 0; z-index: 150; isolation: isolate; background: #fff; color: #080808; overflow: hidden; min-height: 100dvh; }
.definitive-photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.intro-top { position: absolute; top: 24px; left: var(--pad); right: var(--pad); display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.intro-brand, .definitive-wordmark { font: 700 26px/1 var(--sans); letter-spacing: -.08em; text-decoration: none; }
.intro-utilities { display: flex; align-items: center; gap: 38px; font: 14px/1.3 var(--sans); }
.intro-utilities > a { padding: 12px 0; text-decoration: none; }
.definitive-intro .arrival-name { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; background: none; font: 400 clamp(60px, 9.4vw, 185px)/.9 Jacquard, serif; letter-spacing: -.025em; color: #080808; white-space: nowrap; pointer-events: none; transition: none; }
.definitive-intro .arrival-name.particles-ready { color: transparent; }
.definitive-enter { position: absolute; top: 57%; left: 67%; display: flex; align-items: center; gap: 38px; min-height: 54px; padding: 9px 0; border: 0; border-bottom: 1px solid #080808; border-radius: 0; background: transparent; color: #080808; font: 400 clamp(16px, 1.3vw, 21px)/1.4 var(--sans); cursor: pointer; transition: color 160ms ease, border-color 160ms ease, transform 130ms var(--ease-out); }
.definitive-enter > span:last-child { font-size: 1.55em; transition: transform 180ms var(--ease-out); }
.definitive-enter:active { transform: scale(.97); }
.locale-switch { position: static; inset: auto; transform: none; display: flex; align-items: center; gap: 5px; color: inherit; }
.locale-switch button { border: 0; border-radius: 0; padding: 10px 7px; min-width: 36px; min-height: 44px; font: 13px/1.2 var(--sans); background: transparent; color: inherit; cursor: pointer; opacity: .5; }
.locale-switch button[aria-pressed=true] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.locale-switch span { opacity: .3; }

/* The interior follows version 08: moving index, models, story, info, fisheye. */
.site-header.definitive-header, .project-open .site-header.definitive-header { position: sticky; top: 0; z-index: 30; width: 100%; margin: 0; min-height: 86px; height: auto; padding: 16px var(--pad); border: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; background: #fff; color: #080808; }
.definitive-header nav { display: flex; align-items: center; width: auto; gap: 14px; font: 14px/1.3 var(--sans); }
.definitive-header .locale-switch { justify-self: end; }
.definitive-header nav > a { padding: 10px 13px; border-radius: 0; }
.definitive-header nav > a:hover, .definitive-header nav > a:focus-visible { background: var(--electric); color: #fff; outline-color: transparent; }
.definitive-header .project-directory { display: none !important; }
.intro-visible .definitive-header { visibility: hidden; }
.project-open .moving-index { display: none; }

/* White biography, electric-blue model collection. */
.about { padding: clamp(70px, 9vw, 145px) var(--pad) 130px; border: 0; gap: 9%; }
.about :is(h2,h3,p,a,span,em,dt,dd,figcaption) { color: #080808 !important; }
.about-title h2 { font: 500 clamp(45px, 6.2vw, 100px)/.98 var(--sans); letter-spacing: -.055em; margin: 26px 0 42px; }
.about-title h2 em { font: inherit; }
.portrait-frame { max-width: 85%; }
.portrait-frame > img, .portrait-scanner > img:not(.portrait-xray) { filter: grayscale(1); }
.about-copy > .about-lead { font-size: clamp(24px, 2.4vw, 37px); line-height: 1.25; letter-spacing: -.025em; }
.about-copy > p { font-size: 19px; line-height: 1.5; }
.about .tools, .about .tools dl > div, .about .contact-link { border-color: var(--line); }
.about .contact-link { color: var(--electric) !important; overflow-wrap: anywhere; }
.portrait-scanner { --scan-color: var(--electric); }
.xray-target, .xray-target:before, .xray-target:after { border-color: var(--electric); color: var(--electric); }
.xray-target { box-shadow: none; }
.xray-target :is(i,b,em) { background: var(--electric); }
#lavori, #lavori .hero-visual, #lavori .hero-exhibit { background: var(--electric) !important; color: #fff; }
#lavori { margin: 0; border: 0; }
#lavori .hero-visual { height: clamp(660px, 88svh, 1050px); min-height: 660px; max-height: none; }
#lavori .hero-exhibit { top: 8%; height: 84%; }
.hero-visual:after { display: none; }
.hero-exhibit .exhibit-item:focus-visible { outline-color: #fff; }
#project-wall { margin: 0; padding: 70px var(--pad) 100px; background: #080808; }
.fisheye-grid { border-radius: 0; background: #080808; }
.project-pixel-trail { z-index: 8; }

/* Original project photography stays ungraded; the site owns the blue. */
.journey { margin: 0; padding: 100px var(--pad); background: #fff; color: #080808; }
.journey-heading h2 { color: #080808; font-family: var(--sans); letter-spacing: -.05em; }
.journey-heading em { font: inherit; }
.journey-stories article, .journey-stories article:nth-child(even) { background: transparent !important; color: #080808; border-color: var(--line); }
.journey-stories article:nth-child(even) :is(h3,p,a,span,em), .journey-stories :is(h3,p) { color: #080808 !important; }
.journey-stories a, .chapter-num { color: var(--electric) !important; }
.project-detail, .category-projects { padding-inline: var(--pad); background: #fff; }
.detail-title h1, .detail-story h2, .category-projects .section-heading h2 { color: #080808; }
.detail-title h1 { letter-spacing: -.045em !important; }
.detail-top, .detail-topline, .detail-title, .project-credits, .next-project { border-color: var(--line); }
.project-detail :is(.product-lab,.bike-experience,.bike-story-box,.detail-gallery,.model-note,.book-stage,.moka-section,.product-experience,.hanger-interaction,.product-viewport,.sequence-viewer) { background-color: var(--surface); color: #080808; }
.detail-story p, .process-grid p, .detail-under, .project-credits { color: #444; }
.gallery-grid :is(figure,button,img), .detail-cover { background: transparent !important; }
.gallery-grid figcaption { color: #444; }
.gallery-grid figcaption > span { color: var(--electric); }
.project-image, .project-card .project-image { background: var(--surface) !important; }
.project-image img, .project-detail img, .project-detail video { filter: none !important; }
.project-card h3, .project-card, .card-meta, .project-card p { color: #080808; }
.type-cover, .detail-type-cover { background: var(--electric) !important; color: #fff !important; }
.related-project { background: var(--surface) !important; }
.related-project :is(h2,h3,p,a,span) { color: #080808 !important; }
.filters button.active, .segmented button.active, .product-options button.active { background: var(--electric) !important; color: #fff !important; }
.next-project, .text-link { color: var(--electric); }
.lightbox-bar, .lightbox-nav, dialog { background: #fff; color: #080808; }
.lightbox-bar button, .lightbox-nav button { color: #080808; }
footer { margin: 0; padding: 32px var(--pad); background: #080808; color: #fff; border: 0; font-size: 13px; }
footer a { color: #fff; }
#scroll-progress { display: none; }

@media (hover: hover) and (pointer: fine) {
  .definitive-enter:hover, .intro-utilities > a:hover { color: var(--electric); border-color: var(--electric); }
  .definitive-enter:hover > span:last-child { transform: translate(3px,-3px); }
}
@media (max-width: 800px) {
  .definitive-intro .arrival-name { font-size: 10.8vw; top: 22%; }
  .definitive-photo { object-fit: contain; object-position: center 62%; }
  .definitive-enter { top: auto; bottom: 12%; left: auto; right: 8%; }
  .site-header.definitive-header, .project-open .site-header.definitive-header { gap: 12px; min-height: 76px; padding: 12px 22px; grid-template-columns: auto 1fr auto; }
  .definitive-header nav { justify-content: center; gap: 2px; font-size: 12px; }
  .definitive-header nav > a { padding: 10px 7px; }
  .about { padding-top: 70px; }
  .portrait-frame { max-width: 100%; }
}
@media (max-width: 540px) {
  :root { --pad: 22px; }
  .intro-top { top: 14px; }
  .intro-utilities { gap: 22px; font-size: 13px; }
  .definitive-intro .arrival-name { top: 23%; font-size: 11vw; }
  .definitive-photo { inset: auto; left: -15%; bottom: 16%; width: 165%; height: auto; object-fit: contain; }
  .definitive-enter { right: 22px; bottom: 9%; font-size: 16px; gap: 34px; }
  .intro-brand, .definitive-wordmark { font-size: 23px; }
  
  .definitive-header .locale-switch { gap: 0; }
  .locale-switch button { min-width: 27px; padding-inline: 4px; font-size: 12px; }
  .about { display: block; padding-bottom: 110px; }
  .about-title h2 { font-size: 13vw; }
  .portrait-frame { max-width: 86%; margin-bottom: 38px; }
  .about-copy > .about-lead { font-size: 27px; }
  .about-copy > p { font-size: 17px; }
  #lavori .hero-visual { min-height: 610px; height: 78svh; }
  .journey { padding: 65px var(--pad); }
  .journey-heading h2 { font-size: 12vw; }
  #project-wall { padding: 42px 0; }
  footer { gap: 24px; flex-wrap: wrap; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .definitive-enter, .definitive-enter > span:last-child { transition: none; }
  .definitive-intro .arrival-name.particles-ready { color: #080808; }
}

/* 08 horizontal category strip. */
.moving-index { background:#fff; color:#080808; padding:18px 0; border:0; font-size:clamp(21px,2.2vw,32px); }
.moving-index a { text-decoration:none; padding:8px 12px; transition:color 160ms,background 160ms; }
.moving-index a:hover,.moving-index a:focus-visible { background:var(--electric);color:#fff; }
.work-by { margin:0; border:0; }
#lavori,#project-wall,#info,#percorso { scroll-margin-top:86px; }
.project-pixel-trail { position:fixed;inset:0;pointer-events:none; }
.project-detail :is(.detail-gallery,.project-credits,.moka-section,.product-experience,.hanger-interaction,.bike-experience,.wardrobe-experience,.sketch-sequence,.graphics-extras) { background:var(--surface)!important; }
.product-controls button,.moka-controls button,.segmented button { background:#fff; color:#080808; border-color:#bbb; }
.product-controls button.active,.moka-controls button:first-child { background:var(--electric);color:#fff; }
.landing-scanner { position:absolute;inset:0;--scan-x:30%;--scan-y:50%;--scan-size:clamp(100px,11vw,160px); }
.landing-radiograph { position:absolute;inset:0;clip-path:circle(calc(var(--scan-size)/2) at var(--scan-x) var(--scan-y));opacity:0;pointer-events:none;transition:opacity 120ms ease; }
.landing-scanner.is-scanning .landing-radiograph { opacity:1; }
.landing-scanner .xray-target { z-index:2; }
.landing-scanner:focus-visible { outline:2px solid var(--electric);outline-offset:-6px; }
.landing-scanner.is-scanning,.portrait-scanner.is-scanning { cursor:none; }
@media(prefers-reduced-motion:reduce){.landing-radiograph{transition:none}}
.category-projects .detail-topline { display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap; }
@media(max-width:400px){.definitive-header nav{font-size:11px}.site-header.definitive-header{padding-inline:16px;gap:8px}.definitive-header nav>a{padding-inline:5px}}

/* Student residence: supplied tour, followed by the original lighting study. */
.studentato-tour { margin:0 0 64px; }
.studentato-tour video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#080808; }
.studentato-caption { margin:14px 0 0; font:12px/1.5 var(--sans); letter-spacing:.06em; }
.studentato-light { margin-bottom:64px; }
.studentato-light-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:24px; }
.studentato-light-heading h2 { margin:0; font-size:clamp(26px,3vw,44px)!important; }
.studentato-light .segmented { flex-shrink:0; margin:0; }
.studentato-light .segmented button { min-height:44px; }
.studentato-light .daynight { aspect-ratio:1521/1034; }
.studentato-light .night-frame { animation:none; opacity:0; transition:opacity 650ms ease; }
.studentato-light[data-light-mode=night] .night-frame { opacity:1; }
.studentato-light[data-light-mode=auto] .night-frame { animation:nightfall 8s ease-in-out infinite; }
@media(max-width:700px){.studentato-light-heading{align-items:flex-start;flex-direction:column;gap:20px}.studentato-light,.studentato-tour{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){.studentato-light .night-frame{transition:none}.daynight-card .night-frame{animation:none;opacity:0}}

/* The drawings remain interactive directly on the sheet and the pagination dots. */
.sketch-sequence .sequence-controls{display:none}

/* Original drawing alongside the four journey chapters. */
.journey-frankenstein{grid-column:1;margin:0;align-self:start;position:sticky;top:120px;padding-top:50px}
.journey-frankenstein img{display:block;width:100%;height:auto;background:transparent;filter:none}
.journey-stories{grid-column:2}
@media(max-width:800px){.journey-frankenstein{position:static;width:min(70%,320px);margin:0 auto 35px;padding:0}}

/* No untracked 35px band outside the pixel interaction's bounds. */
#lavori .hero-body{padding:0}
@media(hover:hover) and (pointer:fine){html,body,body *,body *::before,body *::after{cursor:url('/assets/cursor-blue.svg') 10 10,auto!important}.site-cursor{display:none!important}}
.journey-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);gap:4%;max-width:none;margin:0}
.journey-stories{min-width:0}
@media(max-width:800px){.journey-layout{display:block}.journey-stories{display:block}.journey-stories article{border-right:0}}

@media(max-width:600px){
 body .site-header.definitive-header{display:grid;grid-template-columns:1fr auto auto;gap:0 12px;height:auto;min-height:112px;padding:10px 5% 5%;align-items:center}
 body .site-header.definitive-header .definitive-wordmark{grid-column:1;grid-row:1}
 body .site-header.definitive-header .locale-switch{position:static;grid-column:2;grid-row:1;margin:0}
 body .site-header.definitive-header .color-mode-toggle{position:static;grid-column:3;grid-row:1;margin:0}
 body .site-header.definitive-header nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:space-between;width:100%;margin:0;gap:8px}
 .site-header nav a{font-size:13px;min-height:44px;display:flex;align-items:center;white-space:nowrap}
 .project-detail,.category-projects{padding-top:28px}
 #lavori,#project-wall,#info,#percorso{scroll-margin-top:120px}
 .moka-controls,.product-controls{gap:10px}
}

/* Original pixel monogram, traced from the supplied artwork. */
.intro-brand,.definitive-wordmark{display:flex;align-items:center;justify-content:flex-start;min-width:44px;min-height:44px}
.intro-brand svg,.definitive-wordmark svg{display:block;width:28px;height:48px;overflow:visible}
@media(max-width:600px){.intro-brand svg,.definitive-wordmark svg{width:24px;height:41px}}

/* Pixel lettering for the category strip. */
.moving-index a { font-family: Jacquard, serif; font-weight: 400; letter-spacing: 0; line-height: 1.15; }

/* Larger pixel category labels inside a continuous outlined banner. */
body .moving-index { font-size:clamp(34px,3.6vw,56px); border:1px solid #080808; padding:12px 0; }
body .moving-index a { font-size:inherit; line-height:1.15; }