/* Fiorucci Labs — site styles. Values carried over from the inline styles of the old "Intro Sito.dc.html". */
*{scrollbar-width:none;-ms-overflow-style:none}*::-webkit-scrollbar{display:none}
html{background:#0d0d0d}
body{margin:0;background:#0d0d0d;font-family:Helvetica,Arial,sans-serif;color:#f2f1ee}
a{color:#f2f1ee}a:hover{color:#bbb}
h1,h2,h3{font-weight:inherit}
/* Text for screen readers and search engines only (e.g. the home <h1>, drawn as the CREATE lettering). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lead a{color:#34D399;text-decoration:none;border-bottom:1px solid #0E9F6E}

/* Mobile (<=720px) swaps the desktop header and footer for the dropdown menu. */
[data-mob]{display:none}
@media (max-width:720px){[data-desk]{display:none!important}[data-mob]{display:block}}

/* Page frame: the home is one screen tall; other pages scroll the document under a sticky header. */
.screen{min-height:100vh;display:flex;flex-direction:column}
.screen.home{height:100vh;min-height:520px}
main{flex:1;display:flex;flex-direction:column}
.home main{min-height:0;overflow:hidden}

/* Header */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px clamp(12px,2vw,24px);border-bottom:1px solid #262626;background:#0d0d0d}
.screen:not(.home) .hdr{position:sticky;top:0;z-index:30}
.logo{display:block;width:120px}
.logo svg{display:block;width:100%;height:auto;overflow:visible}
.hdr-desk{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:10px 28px}
.nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.nav a{font-size:14px;font-weight:600;letter-spacing:0.08em;color:#9a9a96;text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.nav a:hover{color:#f2f1ee;text-decoration:none}
.nav a[aria-current=page]{color:#f2f1ee;border-bottom-color:#0E9F6E}

/* Dropdowns (language on desktop, full menu on mobile) are <details>, so they open even without JS. */
.dd{position:relative}
.dd>summary{list-style:none;display:flex;align-items:center;gap:8px;background:transparent;color:#f2f1ee;border:1px solid #444;border-radius:4px;padding:10px 12px;font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:0.06em;cursor:pointer}
.dd>summary::-webkit-details-marker{display:none}
.dd>summary:hover{border-color:#f2f1ee}
.caret{font-size:9px;color:#9a9a96}
.dd-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;background:#161616;border:1px solid #262626;border-radius:4px;padding:4px;display:flex;flex-direction:column;z-index:10}
.lang-opt{display:flex;justify-content:space-between;align-items:center;gap:12px;color:#f2f1ee;border-radius:3px;padding:9px 10px;font-size:14px;text-decoration:none}
.lang-opt:hover{background:#222;color:#f2f1ee;text-decoration:none}
.lang-opt[aria-current=true]{background:#1f1f1f}
.lang-opt .code{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#9a9a96}
.lang-opt[aria-current=true] .code{color:#34D399}

.mm>summary{gap:10px}
.burger{display:flex;flex-direction:column;gap:4px;width:18px}
.burger span{height:2px;background:#f2f1ee;transition:transform 200ms ease,opacity 200ms ease}
.mm[open] .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mm[open] .burger span:nth-child(2){opacity:0}
.mm[open] .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mm .dd-menu{top:calc(100% + 8px);width:min(260px,calc(100vw - 24px));padding:6px;z-index:20;box-sizing:border-box}
.mm-nav{display:flex;flex-direction:column}
.mm-nav a,.mm-pv{display:block;font-size:15px;font-weight:600;letter-spacing:0.08em;color:#9a9a96;text-decoration:none;padding:14px 12px;border-left:2px solid transparent;border-radius:3px}
.mm-pv{font-size:13px;padding:12px}
.mm-nav a:hover,.mm-pv:hover{background:#222;color:#f2f1ee;text-decoration:none}
.mm-nav a[aria-current=page],.mm-pv[aria-current=page]{color:#f2f1ee;border-left-color:#0E9F6E}
.mm .lang-opt{padding:12px;font-size:15px}
.mm-sep{height:1px;background:#262626;margin:6px 0}
.mm-copy{display:block;padding:4px 12px 8px;font-size:12px;color:#9a9a96}

/* Home */
.hero{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:clamp(28px,6vh,64px) clamp(12px,2vw,24px) 0}
.hero h1{margin:0;width:clamp(220px,40vw,660px);color:#f2f1ee;transition:transform 1000ms cubic-bezier(.2,.8,.2,1),opacity 800ms ease}
.hero svg{display:block;width:100%;height:auto;overflow:visible}
.band{position:relative;height:clamp(320px,68vh,820px);flex-shrink:0;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab;transition:opacity 900ms ease 200ms}
.band canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.band-name{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:15px;font-weight:600;letter-spacing:0.01em;color:#34D399;background:#0d0d0d;padding:6px 10px;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity 250ms ease}
/* Entrance: with JS the hero and gallery start hidden and fade in after the intro (site.js adds .entered). */
.intro-pending .screen,.intro-pending .ftr{visibility:hidden}
.js .home:not(.entered) .hero h1{transform:translateY(10%) scale(0.96);opacity:0}
.js .home:not(.entered) .band{opacity:0}
/* Gallery sources: the WebGL canvas samples these videos; the links stay in the page for crawlers and keyboard users.
   Without JS or WebGL the tiles themselves are shown as a plain grid. */
html:not(.js) .tiles,.band.no-gl .tiles{opacity:1;pointer-events:auto}
.tiles a{display:flex;flex-direction:column;gap:6px;color:inherit;text-decoration:none}
.tiles{position:absolute;inset:0;margin:0;padding:16px;list-style:none;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;box-sizing:border-box;background:#0d0d0d;opacity:0;pointer-events:none}
.tiles li{display:flex;flex-direction:column;gap:6px;width:clamp(120px,14vw,200px)}
.tiles .media{border:0;border-radius:0}
.tiles span{font-size:13px;color:#9a9a96}

/* Shared page blocks */
.sec{padding:clamp(28px,6vh,64px) clamp(12px,2vw,24px) 64px;display:flex;flex-direction:column;gap:clamp(40px,7vh,72px);max-width:1280px;width:100%;box-sizing:border-box;margin:0 auto}
.sec.wide{gap:clamp(48px,8vh,96px)}
.big{margin:0;font-size:clamp(40px,7vw,96px);line-height:0.95;letter-spacing:-0.02em;font-weight:700;text-wrap:balance}
.lead{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:#f2f1ee;max-width:60ch;text-wrap:pretty}
.label{font-size:12px;font-weight:600;letter-spacing:0.08em;color:#9a9a96}
.media{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid #262626;border-radius:4px;background:repeating-linear-gradient(135deg,#171717 0 10px,#1b1b1b 10px 20px)}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:#0d0d0d}

/* Works / projects lists */
.grp{display:flex;flex-direction:column;gap:24px}
.grp-h{margin:0;padding-top:14px;border-top:1px solid #262626;font-size:14px;font-weight:600;letter-spacing:0.08em;color:#f2f1ee}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:32px 24px}
.card{display:flex;flex-direction:column;gap:12px;color:#f2f1ee;text-decoration:none}
.card:hover{color:#34D399;text-decoration:none}
.card-name{font-size:18px;font-weight:600;letter-spacing:-0.005em}

/* Project page */
.proj{padding:clamp(20px,4vh,40px) clamp(12px,2vw,24px) 64px;display:flex;flex-direction:column;gap:24px;max-width:1100px;width:100%;box-sizing:border-box;margin:0 auto}
.back{font-size:12px;font-weight:600;letter-spacing:0.08em;color:#9a9a96;text-decoration:none;align-self:flex-start}
.back:hover{color:#34D399;text-decoration:none}
.proj-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.status{font-size:12px;font-weight:600;color:#34D399;letter-spacing:0.08em}
.proj h1{margin:0;font-size:clamp(32px,5vw,64px);line-height:1;letter-spacing:-0.02em;font-weight:700}
.cover{position:relative;width:100%;aspect-ratio:4/3;max-height:70vh;flex-shrink:0;overflow:hidden}
.cover video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;background:#0d0d0d}
.proj-body{display:flex;flex-wrap:wrap;gap:24px clamp(24px,4vw,64px);padding-top:28px;border-top:1px solid #333}
.proj-text{flex:3 1 480px;min-width:0}
.desc{max-width:60ch;display:flex;flex-direction:column;gap:16px}
.desc p{margin:0;font-size:17px;line-height:1.55;color:#d6d5d1;text-wrap:pretty}
.desc p.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:#f2f1ee}
.side{flex:1 1 220px;display:flex;flex-direction:column;gap:20px;position:sticky;top:100px;align-self:flex-start}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tag{font-size:13px;font-weight:600;letter-spacing:0.02em;color:#9a9a96;padding:6px 10px;border:1px solid #262626;border-radius:4px}
.gh{align-self:flex-start;font-size:14px;font-weight:600;letter-spacing:0.08em;color:#9a9a96;text-decoration:none;padding:6px 0;border-bottom:1px solid #262626}
.gh:hover{color:#34D399;border-color:#0E9F6E;text-decoration:none}

/* Project markdown (rendered at build time) */
[data-md]{display:flex;flex-direction:column;gap:18px;font-size:17px;line-height:1.6;color:#d6d5d1}
[data-md] p,[data-md] ul,[data-md] ol{margin:0;max-width:68ch;text-wrap:pretty}
[data-md] [data-tagline]{font-size:clamp(20px,2vw,26px);line-height:1.35;font-weight:600;color:#f2f1ee}
[data-md] h2{margin:36px 0 0;padding-top:24px;border-top:1px solid #262626;font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-0.01em;color:#f2f1ee;font-weight:700}
[data-md] h3{margin:12px 0 0;font-size:19px;color:#f2f1ee;font-weight:700}
[data-md] strong{font-weight:600;color:#f2f1ee}
[data-md] a{color:#34D399;text-decoration:none;border-bottom:1px solid #0E9F6E}
[data-md] a:hover{color:#f2f1ee}
[data-md] figure{margin:10px 0;display:flex;flex-direction:column;gap:8px}
[data-md] img,[data-md] video{display:block;max-width:100%;max-height:85vh;width:auto;height:auto;align-self:flex-start;border:1px solid #262626;border-radius:4px;background:#111}
[data-md] figcaption{font-size:13px;letter-spacing:0.02em;color:#9a9a96}
[data-md] ul,[data-md] ol{padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
[data-md] li::marker{color:#34D399}
[data-md] table{border-collapse:collapse;width:100%;max-width:820px;font-size:15px;line-height:1.5}
[data-md] th,[data-md] td{text-align:left;vertical-align:top;padding:10px 16px 10px 0;border-top:1px solid #262626}
[data-md] th{width:30%;font-weight:600;color:#9a9a96}
[data-md] th strong{color:#9a9a96}

/* Privacy */
.intro-block{display:flex;flex-direction:column;gap:24px}
.pv-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px 40px;padding:28px 0;border-top:1px solid #262626}
.pv-row h2{margin:0;font-size:14px;font-weight:600;letter-spacing:0.08em;color:#f2f1ee;text-transform:uppercase}
.pv-row div{display:flex;flex-direction:column;gap:14px;grid-column:span 2;min-width:0}
.pv-row p{margin:0;font-size:17px;line-height:1.55;color:#d6d5d1;max-width:68ch;text-wrap:pretty}

/* Contact */
.ct-sub{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.35;color:#f2f1ee;text-wrap:pretty}
.ct{display:flex;flex-wrap:wrap;gap:64px clamp(48px,8vw,128px)}
.ct-links{flex:1 1 280px;max-width:380px;display:flex;flex-direction:column}
.ct-h{margin:0;font-size:14px;font-weight:600;letter-spacing:0.08em;color:#f2f1ee;padding-bottom:16px;border-bottom:1px solid #333}
.ct-link{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-bottom:1px solid #1c1c1c;color:#f2f1ee;text-decoration:none}
.ct-link:hover{color:#34D399;text-decoration:none}
.ct-link .v{font-size:18px;font-weight:600;letter-spacing:-0.005em;overflow-wrap:anywhere}
.ct-form{flex:3 1 480px;min-width:0;display:flex;flex-direction:column;gap:20px;padding:clamp(24px,3vw,40px);background:#141414;border:1px solid #262626;border-radius:6px}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}
.fld{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:600;letter-spacing:0.08em;color:#9a9a96}
.fld input,.fld textarea{font:inherit;font-size:18px;font-weight:400;letter-spacing:0;color:#f2f1ee;background:transparent;border:0;border-bottom:1px solid #333;padding:10px 0;outline:none;border-radius:0}
.fld textarea{line-height:1.45;resize:vertical}
.fld input:focus,.fld textarea:focus{border-color:#34D399}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-top:8px}
.send{font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0.08em;color:#0d0d0d;background:#34D399;border:0;border-radius:4px;padding:16px 28px;cursor:pointer}
.send:hover{background:#6EE7B7}
.note{font-size:14px;color:#9a9a96;max-width:44ch;text-wrap:pretty}

/* About (reachable by URL only) */
.sec.about{gap:clamp(72px,12vh,128px)}
.ab-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px;align-items:end;margin-bottom:calc(clamp(28px,6vh,64px) - clamp(72px,12vh,128px))}
.ab-top>div{display:flex;flex-direction:column;gap:24px}
.ab-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;font-weight:600;letter-spacing:0.08em}
.ab-links a{color:#9a9a96;text-decoration:none;padding:6px 0;border-bottom:1px solid #262626}
.ab-links a:hover{color:#34D399;border-color:#0E9F6E;text-decoration:none}
.ab-sec{display:flex;flex-wrap:wrap;gap:24px clamp(24px,4vw,64px);padding-top:28px;border-top:1px solid #333}
.ab-sec>h2{margin:0;flex:1 1 200px;max-width:300px;align-self:flex-start;position:sticky;top:110px;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:0.02em;line-height:1.15;color:#f2f1ee}
.ab-body{flex:3 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.ab-body.rows{gap:8px}
.row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 32px;padding:22px 0;border-bottom:1px solid #1c1c1c}
.who{display:flex;flex-direction:column;gap:6px}
.role{font-size:20px;font-weight:700;letter-spacing:-0.01em}
.org{font-size:14px;color:#9a9a96}
.date{font-size:14px;color:#9a9a96;font-weight:600;letter-spacing:0.04em;margin-left:auto;text-align:right}
.date.now{color:#34D399}
.row-tags{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.row-tags span{font-size:12px;color:#9a9a96;border:1px solid #262626;border-radius:4px;padding:4px 8px}
.ab-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:32px 24px}
.edu{display:flex;flex-direction:column;gap:6px}
.edu .date{margin-left:0;text-align:left}
.edu .field{font-size:15px;color:#f2f1ee}
.grp-col{display:flex;flex-direction:column;gap:14px}
.grp-col .lbl{font-size:14px;color:#9a9a96;font-weight:600;letter-spacing:0.04em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:14px;color:#f2f1ee;border:1px solid #262626;border-radius:4px;padding:7px 10px}
.award{display:flex;flex-direction:column;gap:3px}
.award .t{font-size:16px;font-weight:600}
.award .d{font-size:14px;color:#9a9a96;line-height:1.4}

/* Footer (desktop only; on mobile its links live in the menu) */
.ftr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:10px clamp(12px,2vw,24px);border-top:1px solid #262626;font-size:13px;color:#9a9a96}
.ftr a{font-size:13px;font-weight:600;letter-spacing:0.08em;color:#9a9a96;text-decoration:none;padding:6px 0}
.ftr a:hover{color:#34D399;text-decoration:none}
.ftr a[aria-current=page]{color:#f2f1ee}

/* Accessibility */
/* Keyboard focus is always visible (mouse clicks don't show it). Form fields thicken their underline instead. */
:focus-visible{outline:2px solid #34D399;outline-offset:3px;border-radius:2px}
.fld input:focus-visible,.fld textarea:focus-visible{outline:none;box-shadow:0 1px 0 #34D399}
/* "Skip to content": first stop of the Tab key, visible only when focused. */
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:#34D399;color:#0d0d0d;padding:12px 16px;border-radius:4px;font-size:14px;font-weight:600;letter-spacing:0.04em;text-decoration:none}
.skip:focus{top:12px;color:#0d0d0d}
/* The WebGL gallery can't take keyboard focus: tabbing into it reveals the plain grid of its links instead. */
.band:focus-within .tiles{opacity:1;pointer-events:auto}
/* "Reduce motion" (system setting): no transitions; videos stay on their poster (site.js) and the cover gets controls. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .cover video{pointer-events:auto}
}