/* Nico Vonder / Brandbook v3: amarillo afiche, rojo Vonder, negro tinta. */
:root{--yellow:#e9bc00;--red:#be2007;--ink:#090001;--cream:var(--yellow);--deep:var(--ink);--bordo:var(--red);--taupe:var(--ink);color-scheme:light}
body{background:var(--yellow);color:var(--ink)}
body::before{background:url('assets/grano-tinta.svg') repeat;background-size:530px 530px;mix-blend-mode:multiply;opacity:.8;z-index:-1}
body::after{background:none;border-left:2px solid #09000128;border-right:1px solid #09000130;inset:0 3.5%;transform:rotate(-.65deg)}
.page{padding-top:48px;padding-bottom:38px}
.identity{padding-top:18px}
.portrait{border-color:var(--ink)}
.portrait-wrap::before{border-width:5px}
.handwritten{color:var(--ink);text-shadow:2px 2px var(--yellow)}
.name-wrap{margin-top:36px;margin-bottom:24px}
.name-graffiti{opacity:1;stroke-width:6px}
h1{color:var(--ink)}
.title-star{color:var(--red)}
.welcome,.welcome strong{color:var(--ink)}
.welcome strong::after{height:5px;bottom:1px;filter:url('#rough-ink')}
.brand-lockup{margin-top:26px}
.logo-mark{background:var(--red);mask-image:url('assets/nico-vonder-rojo.svg');-webkit-mask-image:url('assets/nico-vonder-rojo.svg');transform:rotate(-8deg);width:98px;height:84px}
.brand-lockup>span:last-child{font-weight:700}
.section-label{color:var(--ink);font-weight:700;margin-bottom:21px}
.section-label>span:first-child{border-bottom-color:var(--ink)}
.release{background:var(--red);color:var(--ink);border:2px solid var(--ink);box-shadow:6px 8px 0 var(--ink)}
.release::before{content:"";position:absolute;z-index:3;top:-12px;left:43%;width:95px;height:25px;transform:rotate(-7deg);background:var(--yellow) url('assets/grano-tinta.svg') center/310px;clip-path:polygon(0 9%,8% 0,15% 10%,23% 0,34% 11%,41% 2%,53% 9%,61% 0,72% 9%,81% 0,89% 11%,100% 0,98% 93%,91% 100%,82% 91%,72% 100%,61% 92%,52% 100%,42% 90%,31% 100%,19% 91%,9% 100%,0 89%);pointer-events:none}
.release-tag{color:var(--ink);background:var(--yellow);box-shadow:3px 3px var(--ink)}
.release-info{position:relative;background:var(--red) url('assets/grano-tinta.svg') center/620px}
.release h2{font-size:29px;line-height:1.22}
.credit{display:table;background:var(--yellow);color:var(--ink);font-weight:700;padding:5px 7px;transform:rotate(-1deg);margin-bottom:10px}
.listen{display:table;background:var(--ink);color:var(--yellow);padding:5px 8px;transform:rotate(.5deg);margin-top:11px}
.plus{color:var(--ink);border-color:var(--ink);background:var(--yellow);min-width:44px;width:44px;height:44px}
.platforms{background:var(--red)}
.platforms a{--icon-cutout:var(--ink);background:var(--ink);color:var(--yellow);border:2px solid var(--ink);box-shadow:2px 3px 0 #09000166;min-height:64px}
.link-row{--panel-paper:var(--ink);--icon-cutout:var(--ink);background:var(--ink);color:var(--yellow);box-shadow:4px 5px 0 #09000155;margin-bottom:19px;min-height:96px}
.link-row::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:7px;background:var(--panel-paper);clip-path:polygon(0 0,100% 0,100% 58%,96% 35%,91% 100%,87% 30%,82% 90%,76% 35%,70% 90%,65% 30%,59% 100%,54% 40%,48% 90%,42% 25%,36% 95%,30% 40%,24% 90%,18% 30%,12% 80%,6% 40%,0 100%);pointer-events:none}
.row-title{font-size:23px}
.row-subtitle{color:inherit;font-size:12px}
.vlogs-row,.game{--panel-paper:var(--red);--icon-cutout:var(--red);background:var(--red);color:var(--ink);border:0;background-image:url('assets/grano-tinta.svg');background-size:600px}
.vlogs-row .row-copy,.game .row-copy{background:var(--yellow);padding:8px 9px;color:var(--ink);transform:rotate(-1deg)}
.vlogs-row .row-icon{color:var(--ink)}
.vlogs-row .row-title{font-size:22px}
.game .row-title{font-size:32px;color:var(--ink)}
.game .row-subtitle,.game .number{color:var(--ink)}
.game .number{text-decoration-color:var(--yellow);font-weight:700}
.game-label{background:var(--yellow);color:var(--ink);border-color:var(--ink);font-size:19px}
.game{margin-top:21px;gap:12px}
.number{text-decoration-color:var(--red)}
footer{color:var(--ink);font-weight:700;line-height:1.6;margin-top:29px;border-top:1px dashed var(--ink);padding-top:13px}
.skip{background:var(--ink);color:var(--yellow)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.platforms a:focus-visible,.dialog-back:focus-visible{outline-color:var(--yellow)}
.release summary:focus-visible{outline-color:var(--ink)}
dialog{background:var(--yellow);color:var(--ink);border:3px solid var(--ink);box-shadow:9px 10px 0 var(--red)}
dialog::backdrop{background:#090001dc}
dialog h2,dialog p{color:var(--ink)}
.dialog-label{color:var(--ink);font-weight:700;border-bottom:3px solid var(--red);padding-bottom:7px}
.dialog-back{background:var(--ink);color:var(--yellow);font-weight:700}
.close{color:var(--ink)}
@media(hover:hover){.music-row:hover,#shows-button:hover{background:var(--ink);color:var(--yellow)}.vlogs-row:hover,.game:hover{background-color:var(--red);color:var(--ink)}.platforms a:hover{--icon-cutout:var(--yellow);color:var(--ink);background:var(--yellow)}}
@media(min-width:701px) and (max-width:1000px){.release h2{font-size:24px}.row-title{font-size:20px}.vlogs-row .row-title{font-size:18px}.vlogs-row .row-copy,.game .row-copy{padding:7px}.game .row-title{font-size:29px}.row-subtitle{font-size:11px}}
@media(max-width:700px){.page{padding-top:27px;padding-bottom:28px}.identity{padding:0}.name-wrap{margin:23px auto 18px}.brand-lockup{margin-top:16px}.logo-mark{width:62px;height:52px}.brand-lockup>span:last-child{font-size:8px}.links{margin-top:34px}.release{box-shadow:4px 6px 0 var(--ink)}.release h2{font-size:clamp(22px,5.7vw,28px)}.release-info{padding:18px 15px}.credit{font-size:9px;padding:4px 6px}.listen{font-size:11px}.plus{min-width:42px;width:42px;height:42px}.link-row{padding:17px 14px;gap:11px;min-height:94px;margin-bottom:18px}.row-title{font-size:clamp(19px,5.1vw,23px)}.row-subtitle{font-size:11px}.vlogs-row .row-copy,.game .row-copy{padding:8px}.vlogs-row .row-title{font-size:clamp(17px,4.8vw,21px)}.vlogs-row .row-subtitle{font-size:10px}.game .row-title{font-size:29px}.game-label{font-size:16px;padding:5px}.game{gap:9px}.platforms a{min-height:62px}.platforms{padding-bottom:18px}footer{font-size:8px}.release::before{width:77px;height:22px;top:-10px}}
@media(max-width:360px){.page{padding-left:16px;padding-right:16px}.release-info{padding-left:12px;padding-right:12px}.release h2{font-size:21px}.row-title{font-size:18px}.vlogs-row .row-title{font-size:17px}.row-subtitle{font-size:10px}.game .row-title{font-size:27px}.vlogs-row .row-copy,.game .row-copy{padding:6px}.link-row{gap:9px;padding-left:12px;padding-right:12px}}