@font-face{font-family:AP;src:url(/assets/fonts/ap-regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:AP;src:url(/assets/fonts/ap-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:AP;src:url(/assets/fonts/ap2-bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:APMed;src:url(/assets/fonts/ap-medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:AP2;src:url(/assets/fonts/ap2-regular.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:AP2;src:url(/assets/fonts/ap2-bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}

:root{--u:1px;--bg:#eaeae2;--ink:#454634;--tag:#b8baa1}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:AP,ui-monospace,Menlo,monospace;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
p{margin:0}
a{color:inherit;text-decoration:none}
u,.t a,.bio a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.t{font-size:calc(12*var(--u));line-height:calc(16*var(--u));letter-spacing:calc(-.7*var(--u));font-weight:400}
.t i{font-style:italic}
.t b,.bio b{font-weight:700}
.m{font-family:APMed,AP,monospace;font-weight:500;font-size:calc(12*var(--u));line-height:calc(16*var(--u));letter-spacing:0}
.r{text-align:right}
.tags{color:var(--tag)}

/* ------- escritorio: maqueta fiel a la original (1440 de ancho, escalada) ------- */
.page{position:relative;width:calc(1440*var(--u));height:calc(var(--ph)*var(--u))}
.w{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u))}
.media{height:calc(var(--h)*var(--u));display:block;overflow:hidden;background:#000}
a.media{background:transparent}
.media>img,.media>video,.in>img,.in>video{display:block;width:100%;height:100%;object-fit:cover}
.box .in{position:absolute}
.hd{display:contents}
.sep{height:calc(var(--h)*var(--u))}
.sep::after{content:"";position:absolute;left:0;right:0;top:calc(12*var(--u));border-top:1px solid var(--ink)}

.bio{position:fixed;z-index:20;left:calc(1048*var(--u));top:calc(18*var(--u));width:calc(374*var(--u))}
.bio .txt{margin-top:calc(18*var(--u))}
.bio .alt{font-family:AP2,AP,monospace}
.sticker{position:absolute;left:calc(272*var(--u));top:calc(236*var(--u));width:calc(107*var(--u));height:auto;transform:rotate(4deg) scale(.96);opacity:0;transition:opacity .35s ease,transform .35s ease}
.sticker:hover{opacity:1;transform:rotate(4deg) scale(1)}

.ss img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.ss img.on{opacity:1}
.ss button{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:none;border:0;color:#fff;font:400 calc(22*var(--u))/1 AP,monospace;padding:calc(12*var(--u));cursor:pointer;opacity:0;transition:opacity .25s;text-shadow:0 0 6px rgba(0,0,0,.35)}
.ss:hover button{opacity:1}
.ss .prev{left:0}.ss .next{right:0}

.foot{position:absolute;left:0;top:calc(var(--y)*var(--u));width:100%;height:calc(51*var(--u));background:var(--ink);color:var(--bg);font-size:calc(12*var(--u));line-height:calc(16*var(--u));letter-spacing:calc(-.7*var(--u))}
.foot a{position:absolute;top:calc(16*var(--u))}
.foot .ar{font-size:calc(14*var(--u));line-height:0}
.foot .last{left:calc(595*var(--u))}
.foot .menu{left:calc(704*var(--u))}
.foot .next{left:calc(785*var(--u))}
.foot a:hover u,.t a:hover,.bio a:hover{text-decoration-thickness:2px}

/* ------- móvil ------- */
@media (max-width:759px){
  body{display:flex;flex-direction:column;padding:16px 16px 0}
  .t,.m,.foot{font-size:13px;line-height:18px;letter-spacing:-.4px}
  .page{width:auto;height:auto;display:flex;flex-direction:column;order:1}
  .w,.foot,.foot a,.bio,.sticker{position:static}
  .w{width:auto;left:auto;top:auto}
  .media{height:auto;aspect-ratio:var(--w)/var(--h);position:relative}
  .media>img,.media>video{position:absolute;inset:0}
  .hd{display:flex;justify-content:space-between;gap:12px}
  .home .page>.media{margin-top:4px}
  .home .hd{margin-top:14px}
  .home .t{margin-top:10px}
  .home .more{margin-top:8px}
  .sep{height:auto;margin:18px 0 14px}
  .sep::after{position:static;display:block}
  .bio{width:auto;order:0;margin-bottom:28px}
  .project .bio{order:2;margin:40px 0 24px}
  .bio .txt{margin-top:12px}
  .sticker{display:none}
  .project .hd{margin-bottom:12px}
  .project .page>.media{margin-bottom:12px}
  .project .tags{margin:8px 0 12px}
  .project .t{margin-bottom:28px}
  .bio .txt p:first-child{display:inline}
  .bio .txt p:first-child::after{content:" "}
  .bio .txt p:first-child+p{display:inline}
  .ss button{opacity:1;font-size:22px;padding:10px}
  .foot{order:3;margin:0 -16px;height:auto;display:flex;justify-content:center;gap:36px;padding:16px}
}