/* ONLYDROP / Y2K UNDERGROUND — v43
   ÚNICO archivo de dirección artística. Variaciones de una misma gramática:
   tinta / pegatinas / impresión registrada / metal / código / textura.
   El título nunca forma parte del clip-path. */
:root {
  --od-bg:#090c10; --od-surface:#191d25; --od-surface-raised:#242630;
  --od-ink:#f5f1e8; --od-muted:#a9adb9; --od-cool:#a5def5;
  --od-hot:#ff779d; --od-acid:#c8ff48; --od-line:rgba(195,215,238,.26);
  --od-display:'Archivo Black','Bricolage Grotesque',sans-serif;
  --od-body:'Space Grotesk','Manrope',sans-serif;
  --od-mono:'IBM Plex Mono',monospace;
  --ink:var(--od-bg);--ink2:var(--od-surface);--txt:var(--od-ink);
  --sky:var(--od-cool);--amber:var(--od-acid);--coral:var(--od-hot);
  --cyan:var(--od-cool);--peach:var(--od-hot);
  --font-display:var(--od-display);--font-body:var(--od-body);
  --display:var(--od-display);--sans:var(--od-body);
}
html body,html body .views {background:var(--od-bg)!important;color:var(--od-ink)!important}
html body #home .index-screen {
 background:radial-gradient(ellipse at 15% 5%,rgba(61,87,137,.13),transparent 38%),
 repeating-linear-gradient(0deg,rgba(170,220,255,.012) 0 1px,transparent 1px 6px),#090c10!important;
}
html body .topbar {background:#0c0d12ed!important;border-bottom:1px solid #454c5b!important}
html body .wordmark{font-family:'Archivo Black',sans-serif!important;letter-spacing:-.08em!important;text-shadow:none!important}
html body .wordmark span{color:var(--od-acid)!important}
html body .wordmark i{color:var(--od-hot)!important}
html body .top-note,html body .index-topline,html body .index-kicker,
html body .index-alias,html body .menu-heading,html body .index-meta,
html body .index-footer{color:var(--od-cool)!important}
html body .menu-heading span:last-child,html body .index-kicker span,
html body .index-alias i{color:var(--od-acid)!important}
html body .index-description p,html body .about-copy,html body .section-aside{color:#c0c4d0!important}
html body .nav a.active,html body .nav a:hover{color:#090c10!important;background:var(--od-acid)!important}
html body .index-description p,html body .about-copy,html body .section-aside,
html body .contact-email,html body .nav a,html body .social-links a {font-family:var(--od-body)!important}
/* Hero: letras robustas, composición asimétrica, sin extrusión ni sombra paralela. */
html body #home .index-intro h1{
  font-family:'Archivo Black',sans-serif!important;font-weight:900!important;
  letter-spacing:-.095em!important;line-height:.84!important;
  color:var(--od-ink)!important;text-shadow:none!important;
  -webkit-text-stroke:0!important;filter:none!important;
}
html body #home .index-intro h1 span{
  display:inline-block;
  font-family:'Grenze Gotisch',Georgia,serif!important;
  font-weight:700!important;letter-spacing:-.04em!important;
  color:var(--od-acid)!important;font-size:1.05em!important;
  transform:rotate(-4deg) translateY(.02em);
  text-shadow:none!important;-webkit-text-stroke:0!important;filter:none!important;
}
html body #home .index-alias {letter-spacing:.15em!important}
html body #home .index-alias .alias-rule{background:var(--od-hot)!important}
/* Header de tarjeta: un lienzo común (sin crop) para lettering y pegatinas. */
html body #home .category-menu>.category-card {
  --local:var(--od-acid); --ink-local:var(--od-bg);
  padding-top:clamp(104px,10.5vh,136px)!important;
  overflow:visible!important;clip-path:none!important;
  isolation:isolate;position:relative!important;
}
html body #home .category-menu>.category-card .category-title{
  position:absolute!important;left:10px!important;top:18px!important;right:6px!important;
  margin:0!important;padding:0!important;z-index:30!important;
  min-height:0!important;max-height:none!important;
  font-weight:800!important;line-height:.95!important;
  letter-spacing:-.065em!important;color:var(--od-ink)!important;
  text-shadow:none!important;filter:none!important;
  -webkit-text-stroke:0!important;white-space:normal!important;
  transform:none!important;overflow:visible!important;
  font-size:clamp(23px,2vw,36px)!important;
}
/* Una banda superior idéntica en todas las tarjetas da cohesión a los dialectos. */
html body #home .category-menu>.category-card .category-title::before{
  content:'OD / 0'!important;display:block!important;width:max-content!important;height:auto!important;
  margin:0 0 10px!important;padding:3px 6px!important;
  color:var(--ink-local)!important;background:var(--local)!important;
  font:700 clamp(8px,.58vw,11px)/1.2 var(--od-mono)!important;
  letter-spacing:.08em!important;clip-path:none!important;
  box-shadow:none!important;transform:rotate(-3deg)!important;
}
html body #home .cat-anim2d .category-title::before{content:'OD / 01 • MOTION'!important}
html body #home .cat-anim3d .category-title::before{content:'OD / 02 • SPACE'!important}
html body #home .cat-art2d .category-title::before{content:'OD / 03 • IMAGE'!important}
html body #home .cat-story .category-title::before{content:'OD / 04 • SEQUENCE'!important}
html body #home .cat-projects .category-title::before{content:'OD / 05 • ARCHIVE'!important}
html body #home .category-menu>.category-card .category-title::after{
 content:'✳'!important;position:absolute!important;right:2px!important;top:0!important;
 font:400 22px/1 'Space Grotesk',sans-serif!important;color:var(--local)!important;
 margin:0!important;transform:rotate(20deg)!important;opacity:1!important;
 background:none!important;box-shadow:none!important;
}
/* Detalles y marcos usan los mismos materiales, no cinco paletas distintas. */
html body #home .category-menu>.category-card .category-visual{
  clip-path:var(--tile-cut)!important;background-color:#1a1b23!important;
  outline:0!important;border:1px solid rgba(201,229,246,.12)!important;
}
html body #home .category-menu>.category-card .category-info{
  background:transparent!important;border:0!important;border-top:1px solid rgba(177,201,215,.27)!important;
  margin-top:7px!important;padding:11px 5px 9px!important;
}
html body #home .category-info p{color:#b7bac5!important;font:600 clamp(8px,.64vw,11px)/1.5 var(--od-mono)!important}
html body #home .category-arrow{color:var(--local)!important;font-size:24px!important}
html body #home .category-visual .visual-number{color:var(--local)!important}
html body #home .category-card::before{background:var(--local)!important}
/* Un lenguaje, cinco acabados. Se prioriza lectura sobre deformación. */
html body #home .cat-anim2d{--local:var(--od-hot)}
html body #home .cat-anim2d .category-title{
 font-family:'Permanent Marker',cursive!important;
 font-weight:400!important;font-size:clamp(26px,2.2vw,40px)!important;
 letter-spacing:-.065em!important;transform:rotate(-4deg)!important;
}
html body #home .cat-anim2d .category-title::after{content:'×'!important;font-size:33px!important}
html body #home .cat-anim3d{--local:var(--od-cool)}
html body #home .cat-anim3d .category-title{
 font-family:'Silkscreen',monospace!important;font-weight:700!important;
 font-size:clamp(18px,1.45vw,28px)!important;
 letter-spacing:-.09em!important;line-height:1.13!important;
 text-transform:uppercase!important;
}
html body #home .cat-anim3d .category-title::after{content:'+'!important}
html body #home .cat-art2d{--local:var(--od-acid)}
html body #home .cat-art2d .category-title{
 font-family:'Grenze Gotisch',serif!important;font-weight:700!important;
 font-size:clamp(44px,3.35vw,67px)!important;
 letter-spacing:-.045em!important;line-height:.73!important;
}
html body #home .cat-art2d .category-title::after{content:'✝'!important;font-size:23px!important}
html body #home .cat-story{--local:var(--od-hot)}
html body #home .cat-story .category-title{
 font-family:'Caveat',cursive!important;font-weight:700!important;
 font-size:clamp(32px,2.4vw,50px)!important;
 letter-spacing:-.045em!important;line-height:.8!important;
 transform:rotate(-3deg)!important;
}
html body #home .cat-story .story-amp{font-family:'Instrument Serif',serif!important;font-size:1.15em!important;color:var(--od-acid)!important}
html body #home .cat-story .category-title::after{content:'↝'!important;font-size:23px!important}
html body #home .cat-projects{--local:var(--od-cool)}
html body #home .cat-projects .category-title{
 font-family:'Archivo Black',sans-serif!important;font-size:clamp(29px,2.25vw,42px)!important;
 letter-spacing:-.10em!important;font-weight:900!important;
}
html body #home .cat-projects .collage-piece{
 display:inline-block!important;position:relative!important;
 padding:3px 2px!important;margin-right:-2px!important;line-height:.92!important;
 font-weight:800!important;font-size:inherit!important;
 background:transparent!important;color:var(--od-ink)!important;
}
html body #home .cat-projects .piece-one{font-family:'Archivo Black',sans-serif!important;transform:rotate(-7deg)!important;color:var(--od-ink)!important}
html body #home .cat-projects .piece-two{font-family:'Grenze Gotisch',serif!important;transform:rotate(4deg) translateY(-2px)!important;color:var(--od-hot)!important;font-size:1.34em!important}
html body #home .cat-projects .piece-three{font-family:'Silkscreen',monospace!important;transform:rotate(-3deg) translateY(3px)!important;color:var(--od-acid)!important;font-size:.77em!important;letter-spacing:-.12em!important}
/* Adhesivos diagonales sobre los frames: útiles como marca transversal, no sobre el título. */
html body #home .category-card .category-visual::after{
 content:'';position:absolute;z-index:4;inset:0;pointer-events:none;
 background:linear-gradient(118deg,rgba(255,255,255,.035),transparent 34%),
 repeating-linear-gradient(0deg,transparent 0px,transparent 4px,rgba(255,255,255,.013) 5px)!important;
}
html body #home .category-card:hover .category-title{color:var(--local)!important}
/* Subpáginas: una cabecera agresiva para la misma familia tipográfica. */
html body #workHeading, html body #about .about-content h2,
html body #contact .contact-section h2,html body .project-meta h3{
  font-family:'Archivo Black',sans-serif!important;letter-spacing:-.085em!important;
  font-weight:900!important;text-shadow:none!important;
}
html body #work[data-cat="animation2d"] #workHeading{font-family:'Permanent Marker',cursive!important;font-weight:400!important}
html body #work[data-cat="animation3d"] #workHeading{font-family:'Silkscreen',monospace!important;font-weight:700!important}
html body #work[data-cat="art2d"] #workHeading{font-family:'Grenze Gotisch',serif!important;font-weight:700!important}
html body #work[data-cat="storyboard"] #workHeading{font-family:'Caveat',cursive!important;font-weight:700!important}
html body #about .about-content h2 em,html body #contact .contact-section h2 em{
  font-family:'Grenze Gotisch',serif!important;font-weight:600!important;color:var(--od-acid)!important;
}
html body #work .filter.active,html body .dialog-actions a{background:var(--od-acid)!important;color:#090c10!important}
html body .eyebrow,html body .work-topline,html body .index-meta,
html body .visual-label,html body .visual-number{font-family:var(--od-mono)!important}
/* Responsive: preserve heading layer above the mask while allowing two-line headings. */
@media(max-width:1100px){
  html body #home .category-menu>.category-card{padding-top:112px!important}
  html body #home .category-menu>.category-card .category-title{font-size:clamp(21px,2.3vw,30px)!important}
  html body #home .cat-anim3d .category-title{font-size:clamp(16px,1.75vw,22px)!important}
  html body #home .cat-art2d .category-title{font-size:clamp(37px,3.3vw,53px)!important}
  html body #home .cat-story .category-title{font-size:clamp(27px,2.7vw,41px)!important}
}
@media(max-width:900px){
  html body #home .category-menu>.category-card{padding-top:115px!important}
  html body #home .category-menu>.category-card .category-title{font-size:clamp(25px,4vw,34px)!important}
  html body #home .cat-anim3d .category-title{font-size:clamp(17px,3vw,25px)!important}
  html body #home .cat-art2d .category-title{font-size:clamp(44px,6vw,60px)!important}
  html body #home .cat-story .category-title{font-size:clamp(35px,5vw,49px)!important}
}
@media(max-width:540px){
 html body #home .category-menu>.category-card{padding-top:105px!important}
 html body #home .category-menu>.category-card .category-title{left:7px!important;right:6px!important;top:18px!important;font-size:clamp(20px,5vw,27px)!important}
 html body #home .cat-anim3d .category-title{font-size:clamp(13px,3.4vw,18px)!important}
 html body #home .cat-art2d .category-title{font-size:clamp(34px,8vw,47px)!important}
 html body #home .cat-story .category-title{font-size:clamp(28px,7vw,38px)!important}
 html body #home .cat-projects .category-title{font-size:clamp(21px,5.3vw,29px)!important}
 html body #home .category-menu>.category-card .category-title::before{font-size:8px!important;margin-bottom:13px!important}
}
@media(prefers-reduced-motion:reduce){html body #home .category-title{transition:none!important}}