/* ============================================================
   pablodevigo.com — minimal, white, General Sans + Switzer
   Sibling of musicadoutrora.com; same conventions (bump ?v=N on edit)
   ============================================================ */

@font-face{font-family:'General Sans';src:url('/assets/fonts/GeneralSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'General Sans';src:url('/assets/fonts/GeneralSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Switzer';src:url('/assets/fonts/Switzer-Light.woff2') format('woff2');font-weight:300;font-display:swap}

:root{
  --bg:#ffffff; --ink:#1b1b1b; --mute:#6f6f6f; --hair:#e6e6e6; --accent:#6b0303;
  --display:'General Sans','Helvetica Neue',Arial,sans-serif;
  --text:'Switzer','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(1.25rem,3vw,2.5rem);
  --space:clamp(5rem,12vw,10rem);
  --header:5.5rem;
  /* type scale — one ratio (1.5, a perfect fifth) from the 12px label: 12 · 18 · 27 · 40 · 60 */
  --t4:12px; --t3:18px; --t2:clamp(22px,1.9vw,27px); --t1:clamp(34px,4.2vw,60px); --t0:clamp(35px,4.2vw,60px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--text);font-weight:400;font-size:15px;line-height:1.65}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
::selection{background:var(--ink);color:var(--bg)}

.wrap{padding-inline:var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--ink);color:var(--bg);padding:.6rem 1rem;z-index:100;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.skip:focus{top:1rem}

/* ---------- type scale classes: t1 page · t2 section · t3 group/item · t4 label ---------- */
.t2{font-family:var(--display);font-weight:700;font-size:var(--t2);letter-spacing:-.005em;line-height:1.1}
.t3{font-family:var(--display);font-weight:500;font-size:var(--t3);letter-spacing:0;line-height:1.2}

/* ---------- small caps labels (the site's voice) ---------- */
.label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.7}
.label--mute{color:var(--mute)}
.tag{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border:1px solid var(--hair);padding:.1rem .45rem;vertical-align:middle;margin-left:.5rem;white-space:nowrap}

/* ---------- header ---------- */
.top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;height:var(--header);padding-top:1.9rem}
.lockup{display:flex;align-items:baseline;gap:1.1rem;min-width:0}
.mark{font-family:var(--display);font-weight:700;font-size:var(--t2);line-height:1;letter-spacing:-.01em;text-transform:uppercase}
.mark span{color:inherit}
.tagline{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.nav ul{display:flex;gap:2rem;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.nav a{display:inline-block;padding:.4rem 0;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--ink)}
.lang{font-size:11px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;white-space:nowrap;flex-shrink:0}
.lang a:hover{color:var(--ink)}
.lang b{color:var(--ink);font-weight:400}
.nav-toggle{display:none;width:44px;height:44px;margin-right:-10px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.nav-toggle .bar{width:22px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .3s}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(min-width:901px){.nav-lang{display:none}}
@media(max-width:900px){
  .nav-toggle{display:flex}
  .nav{position:fixed;inset:var(--header) 0 0 0;background:var(--bg);padding:2rem var(--gutter);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:50}
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav ul{flex-direction:column;gap:1.2rem;font-size:18px;letter-spacing:.08em}
  .nav ul li.nav-lang{margin-top:1.5rem;font-size:12px;color:var(--mute)}
  .lang{display:none}
  .tagline{font-size:10px;letter-spacing:.08em;max-width:9rem;line-height:1.3}
  .lockup{gap:.9rem}
}

/* ---------- hero: the diptych, centred in the first viewport ---------- */
.hero{min-height:calc(100svh - var(--header));display:grid;align-content:center;padding-block:clamp(1rem,4vh,3rem) clamp(2rem,6vh,4rem)}
.doors{display:grid;grid-template-columns:1fr 1fr}
.door{position:relative;display:block;overflow:hidden;background:#000}
.door img{width:100%;height:100%;aspect-ratio:2/1;object-fit:cover;transition:transform 1.4s var(--ease)}
.door:hover img,.door:focus-visible img{transform:scale(1.025)}
.door span{position:absolute;left:1.6rem;bottom:1.4rem;color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.door span::after{content:"\00a0→";opacity:.7}
.hero-name{padding-top:1.2rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-name .label a{border-bottom:1px solid var(--hair);padding-bottom:.1rem}
@media(max-width:760px){.doors{grid-template-columns:1fr}.hero{min-height:0;padding-block:1rem 2rem}.hero-name{flex-direction:column;gap:.4rem}}

/* ---------- page hero (inner pages): film or image band ---------- */
.band{margin-top:.5rem}
.band-title{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding-block:1.4rem 0}
.band-title h1{font-family:var(--display);font-weight:700;font-size:var(--t1);letter-spacing:.03em;text-transform:uppercase;line-height:1}

/* ---------- sections: heading left, content right ---------- */
.sec{padding-block:var(--space);border-top:1px solid var(--hair)}
.sec>h2{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.sec>h1{margin-bottom:clamp(2rem,4vw,3rem)}
.sec.no-rule{border-top:0}
.sec.sec--intro{padding-block:clamp(3rem,7vw,5rem) 0}
.sec.sec--intro+.sec{border-top:0;padding-top:clamp(2rem,4vw,3rem)}
.sec h2{font-family:var(--display);font-weight:700;font-size:var(--t2);letter-spacing:-.005em;text-transform:none;line-height:1.1}
.sec h1.h2{font-family:var(--display);font-weight:700;font-size:var(--t1);letter-spacing:.01em;text-transform:uppercase;line-height:.95}
.sec h2 small,.sec h1.h2 small{display:block;font-family:var(--text);font-weight:400;font-size:var(--t4);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:.9rem;line-height:1.6}
.body{max-width:none}
.prose--cols{column-count:2;column-gap:var(--gutter)}
.prose--cols p+p{margin-top:1.2em}
@media(max-width:900px){.prose--cols{column-count:1}}
.prose p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-justify:inter-word}
.prose p+p{margin-top:1.2em}
.prose a{border-bottom:1px solid var(--mute);transition:border-color .3s}
.prose a:hover{border-color:var(--ink)}
.prose b{font-weight:500}
.more{display:inline-block;margin-top:2rem;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:.15rem}
.more+.more{margin-left:1.5rem}
@media(max-width:760px){.sec{padding-block:4rem}}

/* ---------- facts columns ---------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:3rem}
.facts h3{font-family:var(--display);font-weight:500;font-size:var(--t3);letter-spacing:0;margin-bottom:.8rem}
.facts li{font-size:13px;color:var(--mute);line-height:1.6;padding:.4rem 0;border-top:1px solid var(--hair)}
@media(max-width:760px){.facts{grid-template-columns:1fr}}

/* ---------- media figures ---------- */
.frame{position:relative;display:block;background:#000;overflow:hidden}
.frame img{width:100%;object-fit:cover}
figure figcaption{margin-top:.9rem;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.7}
figure figcaption small{display:block;color:var(--mute);letter-spacing:.04em}
.films{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.films--1{grid-template-columns:1fr}
@media(max-width:760px){.films{grid-template-columns:1fr}}

/* click-to-play film */
.film .frame{aspect-ratio:2/1}
.film .frame img{height:100%}
.film-play{position:absolute;inset:0;width:100%;display:grid;place-items:center}
.film-play i{width:56px;height:56px;border:1px solid rgba(255,255,255,.85);border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-size:14px;padding-left:3px;transition:background .3s,transform .3s var(--ease)}
.film-play:hover i,.film-play:focus-visible i{background:rgba(255,255,255,.15);transform:scale(1.05)}
.film video{width:100%;height:100%;aspect-ratio:2/1;object-fit:contain;background:#000}
.film.is-playing .frame>picture,.film.is-playing .film-play{display:none}
@media(max-width:700px) and (orientation:portrait){.film.tall .frame,.film.tall video{aspect-ratio:9/16}}

/* facades (Spotify / YouTube) */
.facade{position:relative;display:block;width:100%;background:#000;color:#fff;overflow:hidden;text-align:left}
.facade img{width:100%}
.facade::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(to top,rgba(0,0,0,.75),rgba(0,0,0,0));pointer-events:none}
.facade .cta{z-index:1}
.facade .cta{position:absolute;left:1.4rem;bottom:1.2rem;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.facade--cover{background:none;color:var(--ink)}.facade--cover::after{display:none}.facade--cover .cta{position:static;display:block;padding-top:.8rem}
.facade .cta small{display:block;font-size:10px;letter-spacing:.06em;text-transform:none;opacity:.7;margin-top:.3rem}
.embed{aspect-ratio:16/9;background:#000}
.embed iframe{width:100%;height:100%;border:0;display:block}
.embed--spotify{aspect-ratio:auto;height:580px;background:none}
.embed--spotify iframe{border-radius:12px}

/* ---------- halves: media left, text right ---------- */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:start}
.halves .sub{margin-bottom:1.4rem}
.halves .quotes{margin-top:2.5rem}
@media(max-width:760px){.halves{grid-template-columns:1fr}}

/* ---------- album ---------- */
.album--rev{grid-template-columns:minmax(0,1fr) minmax(200px,1fr)}
.album{display:grid;grid-template-columns:minmax(200px,320px) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.album h3{font-family:var(--display);font-weight:500;font-size:var(--t3);letter-spacing:0;line-height:1.2;margin-bottom:.6rem}
.album .sub{margin-bottom:1.4rem}
.credits{margin-top:1.6rem;font-size:11px;letter-spacing:.08em;color:var(--mute);line-height:1.9;text-transform:uppercase}
.credits a{border-bottom:1px solid var(--hair)}
.credits a:hover{border-color:var(--mute)}
.award{display:inline-block;margin-top:1.4rem;font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--ink);padding:.35rem .7rem}
@media(max-width:760px){.album,.album--rev{grid-template-columns:1fr}}

/* ---------- quotes ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:3.5rem}
.quotes--list{grid-template-columns:1fr;gap:2rem}
.quotes--press{grid-template-columns:1fr 1fr}
@media(max-width:760px){.quotes--press{grid-template-columns:1fr}}
.halves--wide{gap:calc(var(--gutter) * 2)}
.halves--wide>div>h2{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.halves .quotes--list{margin-top:0;gap:2.2rem}
.quotes blockquote{font-weight:300;font-size:var(--t3);line-height:1.45}
.quotes cite{display:block;margin-top:.9rem;font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.quotes cite a{border-bottom:1px solid var(--hair)}
@media(max-width:760px){.quotes{grid-template-columns:1fr}}

/* ---------- performances ---------- */
.rows{border-top:1px solid var(--hair)}
.rows li{display:grid;grid-template-columns:7rem minmax(0,1.2fr) minmax(0,1fr) 7rem;gap:1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--hair);align-items:baseline}
.rows .d{font-family:var(--display);font-weight:700;font-size:15px;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.rows .d small{display:block;font-family:var(--text);font-weight:400;font-size:11px;letter-spacing:.06em;color:var(--mute)}
.rows .v{font-size:14px}
.rows .v small,.rows .p small{display:block;font-size:12px;color:var(--mute);letter-spacing:.02em}
.rows .p{font-size:14px}
.rows .l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;display:flex;flex-direction:column;align-items:flex-end;gap:.45rem}
.rows .l a{display:inline-block;border-bottom:1px solid var(--hair)}
.rows .l a:hover{border-color:var(--ink)}

@media(max-width:760px){.rows li{grid-template-columns:1fr;gap:.35rem}.rows .l{flex-direction:row;align-items:baseline;gap:1rem}}
.year{margin-top:2.5rem}
.year summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:1rem;padding:.6rem 0}
.year summary::-webkit-details-marker{display:none}
.year summary h3{font-family:var(--display);font-weight:500;font-size:var(--t3);letter-spacing:0}
.year summary .n{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.year summary::after{content:"+";margin-left:auto;font-family:var(--display);font-size:var(--t3);color:var(--mute)}
.year[open] summary::after{content:"–"}
.empty{border:1px solid var(--hair);padding:1.6rem;max-width:60ch;font-size:14px;color:var(--mute)}
.empty a{color:var(--ink);border-bottom:1px solid var(--hair)}

/* ---------- contact & press ---------- */
.email{font-family:var(--display);font-weight:500;font-size:var(--t2);letter-spacing:0;text-transform:none;border-bottom:1px solid var(--ink);display:inline-block;line-height:1.2}
.socials{display:flex;gap:1.6rem;margin-top:2rem;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.socials a{border-bottom:1px solid transparent}.socials a:hover{border-color:var(--ink)}
.press-block{margin-top:2.5rem;border-top:1px solid var(--hair);padding-top:1.4rem}
.press-block h3{font-family:var(--display);font-weight:500;font-size:var(--t3);letter-spacing:0;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.copy-btn{font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--hair);color:var(--mute)}
.copy-btn:hover{color:var(--ink);border-color:var(--ink)}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.photos figcaption a{border-bottom:1px solid var(--hair);color:var(--mute)}
.photos figcaption a:hover{color:var(--ink)}
@media(max-width:600px){.photos{grid-template-columns:1fr}}
.press-list li{padding:.8rem 0;border-top:1px solid var(--hair);font-size:14px}
.press-list li small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:.2rem}
.press-list a{border-bottom:1px solid var(--hair)}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;padding-block:2rem 3rem;border-top:1px solid var(--hair);font-size:11px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.foot ul{display:flex;flex-wrap:wrap;gap:1.6rem}
.foot a{color:var(--ink);border-bottom:1px solid transparent}.foot a:hover{border-color:var(--ink)}

/* ---------- reveal (js-gated; visible without JS) ---------- */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in-view{opacity:1;transform:none}

/* ---------- preloader (the original site's opening) ---------- */
#preloader{position:fixed;inset:0;background:var(--ink);overflow:hidden;z-index:9999;display:flex;align-items:center;justify-content:center}
#preloader-content{position:relative;width:100%;height:100%}
.text-layer{font-family:var(--display);font-weight:700;font-size:var(--t0);letter-spacing:.03em;text-transform:uppercase;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;margin:0}
.black-text{color:var(--ink);opacity:0;z-index:3}
.white-text{color:#fff;clip-path:inset(0 0 0 0);transition:clip-path 1.5s ease-in-out;z-index:4}
#white-overlay{position:absolute;top:0;left:0;height:100%;width:0;background:#fff;z-index:2;transition:width 1.5s ease-in-out}
#preloader.active #white-overlay{width:100%}
#preloader.active .white-text{clip-path:inset(0 0 0 100%)}
#preloader.active .black-text{opacity:1}
#preloader.hide{transition:transform 1s ease-in-out;transform:translateY(-100%)}
#preloader.done{display:none}
html:not(.js) #preloader,html.no-intro #preloader{display:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .door img{transition:none}
  #preloader{display:none}
}

/* album cover: monochrome until hover/focus (matches the photography) */
.cover-bw img{filter:grayscale(1);transition:filter .6s var(--ease)}
.cover-bw:hover img,.cover-bw:focus-visible img,.cover-bw:focus-within img{filter:none}
@media(prefers-reduced-motion:reduce){.cover-bw img{transition:none}}

/* ============================================================
   TYPE SYSTEM — five styles, nothing else (overrides above)
   T1 page title   60  General Sans Bold, capitals
   T2 object title 27  General Sans Bold
   T3 group title  18  General Sans Medium
   Body            15  Switzer Regular (paragraphs justified)
   Label           12  Switzer Regular, capitals, .08em — menu, dates, captions,
                       quotes, credits, links, tags, footer: everything that is not a paragraph
   ============================================================ */
.label,.nav ul,.tagline,.lang,.tag,.more,.foot,.credits,.quotes blockquote,.quotes cite,.socials,.copy-btn,
figure figcaption,figure figcaption small,.door span,.rows .d,.rows .d small,.rows .l,.rows .v small,.rows .p small,
.year summary .n,.facade .cta,.facade .cta small,.press-list li small,.sec h2 small,.sec h1.h2 small,.hero-name,
.rows .l a,.empty{
  font-family:var(--text);font-size:var(--t4);font-weight:400;letter-spacing:.08em;text-transform:uppercase;line-height:1.7;font-style:normal
}
.quotes blockquote{color:var(--ink);max-width:none}
.quotes cite,.credits,.tag,.rows .v small,.rows .p small,.rows .d small,.year summary .n,figure figcaption small,.sec h2 small,.sec h1.h2 small,.label--mute,.foot,.lang,.press-list li small{color:var(--mute)}
.quotes cite{margin-top:.6rem}
.quotes--list{gap:2rem}
.tag{border:0;padding:0;margin-left:.6rem;white-space:nowrap}
.rows .v,.rows .p,.press-list li,.empty{font-size:15px}
.empty{text-transform:none;letter-spacing:0;line-height:1.65}
.email{font-weight:700}
.more{border-bottom:1px solid var(--ink);padding-bottom:.1rem}
.rows .d{color:var(--ink)}
.rows .d small{display:inline;margin-left:.35rem}
.foot a,.nav a,.lang b,.socials a,.hero-name a,.more,.rows .l a{color:var(--ink)}
.credits+.quotes{margin-top:2.5rem}
.award{border:0;padding:0;margin-top:1.2rem;font-size:var(--t4);letter-spacing:.08em;text-transform:uppercase;line-height:1.7;display:block}
/* quotes: label size, normal case */
.quotes blockquote{text-transform:none;letter-spacing:0;line-height:1.6}
/* quotes = body: 15px lowercase reads the same size as 12px capitals */
.quotes blockquote{font-size:15px;line-height:1.55}

/* a section that fills one screen */
.sec--screen{min-height:100svh;display:grid;align-content:center}
@media(max-width:760px){.sec--screen{min-height:0}}

.sec[id]{scroll-margin-top:var(--header)}
.halves .film .frame{margin:0}
.halves>div>.more:first-child{margin-top:0}
/* strand sections on the home page: heading level with the top of the film */
.sec--strand{padding-block:clamp(3rem,7vw,5rem)}
.sec--strand h2{margin-bottom:1.2rem}
.sec--strand .more{margin-top:0}

.rows .v a,.rows .p small a,.sec h2 small a,.sec h1.h2 small a,figure figcaption small a{border-bottom:1px solid var(--hair)}
.rows .v a:hover,.rows .p small a:hover,.sec h2 small a:hover,figure figcaption small a:hover{border-color:var(--ink)}
a.award{border-bottom:1px solid var(--hair);display:inline-block}
a.award:hover{border-color:var(--ink)}
/* room before a group of quotes that follows other content */
.halves .award+.quotes,.credits+.quotes,.prose+.quotes{margin-top:clamp(2.5rem,5vw,4rem)}