/* Inserisci in assets/fonts/ i file DIN Pro autorizzati per uso web. */
@font-face {font-family:"DIN Pro";src:url("assets/fonts/DINPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face {font-family:"DIN Pro";src:url("assets/fonts/DINPro-Bold.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap;}
/* Studio ModDesign — pagina temporanea. Bande realizzate in CSS. */
:root {--black:#111;--yellow:#ffb900;--side:clamp(24px,6.2vw,96px);}
* {box-sizing:border-box;}
html {overflow-x:hidden;}
body {margin:0;background:#fff;color:#080808;font-family:"DIN Pro",Arial,Helvetica,sans-serif;}
.page {position:relative;isolation:isolate;min-height:100svh;overflow:hidden;padding:clamp(35px,5vw,78px) var(--side) 90px;}
.brand {position:relative;z-index:2;width:fit-content;}
.brand img {display:block;width:clamp(220px,20vw,310px);height:auto;}
.marquee {position:relative;z-index:2;overflow:hidden;width:calc(100% + 2 * var(--side));margin:clamp(140px,13vw,215px) calc(-1 * var(--side)) 0;white-space:nowrap;}
.marquee-track {display:flex;width:max-content;will-change:transform;animation:scroll 22s linear infinite;}
.marquee-group {display:block;flex:0 0 auto;white-space:nowrap;}
.marquee-track span {flex:none;font-size:clamp(32px,3.3vw,54px);font-weight:800;letter-spacing:-.025em;line-height:1.25;}
.message {position:relative;z-index:2;max-width:760px;margin-top:clamp(70px,6.5vw,115px);}
.message p {margin:0;font-size:clamp(19px,1.35vw,23px);font-weight:750;line-height:1.42;}
.postscript {position:relative;z-index:2;max-width:415px;margin-top:clamp(65px,5.8vw,95px);}
.postscript p {margin:0;font-size:clamp(14px,.95vw,16px);line-height:1.35;}
.postscript a {color:inherit;text-decoration:underline;text-underline-offset:2px;}
.postscript a:hover {color:#b07800;}
.instagram-icon {font-size:23px;line-height:0;vertical-align:-2px;}
.tape {position:absolute;z-index:1;pointer-events:none;height:45px;background:repeating-linear-gradient(115deg,var(--yellow) 0,var(--yellow) 43px,#202020 43px,#202020 86px);}
.tape-top {width:650px;top:34px;right:-155px;transform:rotate(29deg);transform-origin:center;}
.tape-bottom-one {width:1150px;bottom:0;right:-230px;transform:rotate(-27deg);}
.tape-bottom-two {width:850px;bottom:60px;right:-110px;transform:rotate(14deg);}
@keyframes scroll {from {transform:translate3d(0,0,0);} to {transform:translate3d(-50%,0,0);}}
@media (max-width:767.98px) {.page {padding-bottom:160px;} .marquee {margin-top:145px;} .message {margin-top:75px;} .tape {height:28px;background:repeating-linear-gradient(115deg,var(--yellow) 0,var(--yellow) 27px,#202020 27px,#202020 54px);} .tape-top {width:400px;top:22px;right:-190px;} .tape-bottom-one {width:650px;right:-240px;bottom:30px;} .tape-bottom-two {width:550px;right:-230px;bottom:65px;}}
@media (prefers-reduced-motion:reduce) {.marquee-track {animation:none;}}

/* Layout in una sola schermata: spazi fluidi in funzione dell'altezza disponibile. */
html,body {width:100%;min-height:100%;overflow-x:hidden;}
.page {height:100svh;min-height:0;display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(20px,5.5vh,78px);padding-bottom:clamp(16px,4vh,55px);}
.brand img {width:clamp(175px,19vw,310px);max-height:clamp(40px,9vh,90px);object-fit:contain;object-position:left center;}
.marquee {flex:0 0 auto;margin-top:auto;margin-bottom:0;}
.message {flex:0 1 auto;margin-top:auto;max-width:min(760px,62vw);}
.message p {font-size:clamp(15px,min(1.45vw,2.55vh),23px);line-height:1.35;}
.postscript {flex:0 0 auto;margin-top:auto;max-width:min(430px,43vw);}
.postscript p {font-size:clamp(11px,min(1vw,1.8vh),16px);line-height:1.28;}
/* Bande più presenti e incrocio in basso a destra. */
.tape {height:clamp(36px,4.3vw,66px);background:repeating-linear-gradient(115deg,#ffbb00 0,#ffbb00 46px,#171717 46px,#171717 92px);}
.tape-top {width:clamp(620px,57vw,1020px);top:clamp(5px,3vh,35px);right:-11vw;transform:rotate(30deg);}
.tape-bottom-one {width:85vw;bottom:10vh;right:-17vw;transform:rotate(-29deg);}
.tape-bottom-two {width:75vw;bottom:4vh;right:-12vw;transform:rotate(13deg);}

@media(max-width:767.98px) {
 .page {padding:clamp(15px,3vh,30px) 22px clamp(18px,4vh,35px);}
 .brand img {width:clamp(165px,42vw,230px);}
 .marquee {width:calc(100% + 44px);margin-left:-22px;margin-right:-22px;margin-top:auto;}
 .marquee-track span {font-size:clamp(25px,5.7vw,38px);}
 .message {max-width:min(100%,540px);margin-top:auto;}
 .message p {font-size:clamp(12px,min(3.4vw,2.3vh),17px);line-height:1.3;}
 .postscript {max-width:min(80%,390px);margin-top:auto;}
 .postscript p {font-size:clamp(10px,min(2.8vw,1.65vh),13px);line-height:1.22;}
 .tape {height:clamp(24px,5vw,38px);background:repeating-linear-gradient(115deg,#ffbb00 0,#ffbb00 28px,#171717 28px,#171717 56px);}
 .tape-top {width:90vw;top:2vh;right:-40vw;}
 .tape-bottom-one {width:100vw;right:-50vw;bottom:30vh;}
 .tape-bottom-two {width:110vw;right:-45vw;bottom:20vh;}
}
@media(max-height:620px) {
 .page {padding-top:12px;padding-bottom:12px;}
 .brand img {max-height:40px;}
 .marquee-track span {font-size:clamp(22px,3vw,34px);}
 .message p {font-size:clamp(11px,1.75vh,15px);line-height:1.2;}
 .postscript p {font-size:clamp(9px,1.45vh,12px);line-height:1.15;}
 .tape-bottom-one {bottom:7vh;}
}
@media(max-width:380px) and (max-height:700px) {
    .message p {font-size:11px;}
    .postscript p {font-size:9px;}
    .brand img {max-height:38px;}
    .postscript {max-width:min(80%,390px);margin-top:auto;}
}

/* Font definitivi */
.marquee-track span {font-family:"Days One",sans-serif;font-weight:400;letter-spacing:-.025em;}
.message p {font-family:"DIN Pro",Arial,Helvetica,sans-serif;font-weight:700;}
.postscript p {font-family:"DIN Pro",Arial,Helvetica,sans-serif;font-weight:400;}