@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700;800&family=DM+Mono:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

/* ══════════════════════════════════════════
   VARIABLES
══════════════════════════════════════════ */
:root {
  --bg:         #F8F7F5;
  --ink:        #111110;
  --ink-dim:    rgba(17,17,16,.45);
  --ink-ghost:  rgba(17,17,16,.18);
  --surface:    #EEECE8;
  --border:     rgba(17,17,16,.1);
  --accent:     #B8422A;
  --accent2:    #5C4B3A;

  --f-display: 'Syne', sans-serif;
  --f-mono:    'DM Mono', monospace;

  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-io:   cubic-bezier(.87,0,.13,1);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --z-cur:  9000;
  --z-menu: 800;
  --z-pre:  9500;
  --z-trans:9800;
}

/* ══════════════════════════════════════════
   RESET
══════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:auto; }
body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-display);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
img,video,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; cursor:none; }
button { background:none; border:none; font:inherit; color:inherit; cursor:none; }
ul { list-style:none; }
*,*::before,*::after { cursor:none !important; }
::selection { background:var(--ink); color:var(--bg); }
::-webkit-scrollbar { width:0; }

/* ══════════════════════════════════════════
   CURSOR
══════════════════════════════════════════ */
#cursor {
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:var(--z-cur);
  will-change:transform; mix-blend-mode:multiply;
}
.c-cross {
  position:absolute; width:28px; height:28px;
  transform:translate(-50%,-50%);
}
.c-cross::before,.c-cross::after {
  content:''; position:absolute; background:var(--ink);
}
.c-cross::before { width:1px; height:100%; left:50%; top:0; }
.c-cross::after  { width:100%; height:1px; top:50%; left:0; }
.c-ring {
  position:absolute; width:44px; height:44px;
  border:1px solid var(--ink); border-radius:50%;
  transform:translate(-50%,-50%); opacity:.2;
  transition:width .4s var(--ease-out),height .4s var(--ease-out),opacity .3s,border-radius .3s;
}
.c-label {
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--f-mono); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); opacity:0; white-space:nowrap;
  transition:opacity .2s;
}
body.cur-grid .c-ring {
  width:72px; height:72px; border-radius:2px; opacity:.1;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 11px,var(--ink) 11px,var(--ink) 12px),
    repeating-linear-gradient(90deg,transparent,transparent 11px,var(--ink) 11px,var(--ink) 12px);
}
body.cur-grid .c-label { opacity:1; top:54px; }
body.cur-link .c-ring  { width:52px; height:52px; opacity:.15; }

/* ══════════════════════════════════════════
   PAGE TRANSITION CANVAS
══════════════════════════════════════════ */
#pt-canvas { position:fixed; inset:0; z-index:var(--z-trans); pointer-events:none; }

/* ══════════════════════════════════════════
   PRELOADER
══════════════════════════════════════════ */
#preloader {
  position:fixed; inset:0; z-index:var(--z-pre);
  background:var(--ink);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:hidden;
}
.pre__letters { display:flex; gap:.04em; perspective:1200px; }
.pre__ch {
  font-family:var(--f-display); font-size:clamp(2.5rem,8vw,7rem);
  font-weight:800; letter-spacing:-.04em; text-transform:uppercase;
  color:var(--bg); display:inline-block; will-change:transform,opacity;
}
.pre__ch--space { width:.25em; }
.pre__role {
  font-family:var(--f-mono); font-size:clamp(.55rem,.9vw,.72rem);
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(248,247,245,.3); margin-top:1.5rem; opacity:0;
}
.pre__footer {
  position:absolute; bottom:2rem;
  left:var(--gutter); right:var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
}
.pre__bar-wrap { flex:1; height:1px; background:rgba(248,247,245,.12); }
.pre__bar {
  width:100%; height:100%; background:var(--bg);
  transform:scaleX(0); transform-origin:left; will-change:transform;
}
.pre__count {
  font-family:var(--f-mono); font-size:.65rem; letter-spacing:.1em;
  color:rgba(248,247,245,.3); min-width:3ch; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
.nav {
  position:fixed; top:0; left:0; right:0;
  z-index:calc(var(--z-menu)+1);
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--gutter);
  pointer-events:none; mix-blend-mode:multiply;
}
.nav__logo,.nav__menu-btn,.nav__lang { pointer-events:all; }
.nav__logo {
  font-family:var(--f-display); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:.6; transition:opacity .2s;
}
.nav__logo:hover { opacity:1; }
.nav__center {
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  color:var(--ink-dim); text-transform:uppercase; pointer-events:none;
}
.nav__menu-btn {
  display:flex; align-items:center; gap:.75rem;
  color:var(--ink); opacity:.6; transition:opacity .2s;
}
.nav__menu-btn:hover { opacity:1; }
.nav__menu-icon { display:flex; flex-direction:column; gap:5px; width:18px; }
.nav__menu-icon span {
  display:block; height:1px; background:currentColor;
  transition:transform .4s var(--ease-io),opacity .25s,width .3s;
}
.nav__menu-icon span:last-child { width:70%; align-self:flex-end; }
.nav--open .nav__menu-icon span:first-child { transform:translateY(3px) rotate(45deg); width:100%; }
.nav--open .nav__menu-icon span:last-child  { transform:translateY(-3px) rotate(-45deg); width:100%; }
.nav__menu-label { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; }
.nav__lang { display:flex; gap:.5rem; align-items:center; }
.nav__lang-btn {
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-ghost); transition:color .2s; pointer-events:all;
  padding:2px 4px;
}
.nav__lang-btn.is-active { color:var(--ink); }
.nav__lang-btn:hover { color:var(--ink-dim); }
.nav__lang-sep { color:var(--ink-ghost); font-size:.6rem; }

/* ══════════════════════════════════════════
   MENU
══════════════════════════════════════════ */
.menu {
  position:fixed; inset:0; z-index:var(--z-menu);
  pointer-events:none; visibility:hidden; overflow:hidden;
}
.menu.is-open { pointer-events:all; visibility:visible; }
.menu__curtain {
  position:absolute; inset:0; background:var(--ink);
  clip-path:polygon(0 0,100% 0,100% 0,0 0);
  transition:clip-path .75s var(--ease-io);
}
.menu.is-open .menu__curtain { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
.menu__inner {
  position:relative; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:6rem var(--gutter) 3rem;
  opacity:0; transition:opacity .15s .4s;
}
.menu.is-open .menu__inner { opacity:1; }
.menu__list { display:flex; flex-direction:column; }
.menu__item { overflow:hidden; border-bottom:1px solid rgba(248,247,245,.08); }
.menu__item:first-child { border-top:1px solid rgba(248,247,245,.08); }
.menu__link { display:flex; align-items:baseline; gap:2rem; padding:1.2rem 0; }
.menu__link-num { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; color:rgba(248,247,245,.25); flex-shrink:0; }
.menu__link-text {
  font-family:var(--f-display); font-size:clamp(2.5rem,7vw,5.5rem);
  font-weight:800; letter-spacing:-.04em; text-transform:uppercase;
  color:var(--bg); display:block;
  transform:translateY(110%); transition:transform .65s var(--ease-out);
}
.menu.is-open .menu__link-text { transform:translateY(0); }
.menu__item:nth-child(1) .menu__link-text { transition-delay:.1s; }
.menu__item:nth-child(2) .menu__link-text { transition-delay:.16s; }
.menu__item:nth-child(3) .menu__link-text { transition-delay:.22s; }
.menu__link-sub {
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(248,247,245,.22);
  margin-left:auto; opacity:0; transition:opacity .3s .45s;
}
.menu.is-open .menu__link-sub { opacity:1; }
.menu__link:hover .menu__link-text { opacity:.45; }
.menu__footer {
  position:absolute; bottom:2.5rem;
  left:var(--gutter); right:var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  opacity:0; transition:opacity .3s .45s;
}
.menu.is-open .menu__footer { opacity:1; }
.menu__socials { display:flex; gap:2rem; }
.menu__social {
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(248,247,245,.3); transition:color .2s;
}
.menu__social:hover { color:var(--bg); }
.menu__copy { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; color:rgba(248,247,245,.2); }

/* ══════════════════════════════════════════
   HOMEPAGE HERO
══════════════════════════════════════════ */
body.home-page { overflow:hidden; height:100dvh; }
.hero {
  position:relative; height:100dvh; min-height:600px;
  overflow:hidden; display:flex; flex-direction:column;
}
#hero-pixel-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.hero__name-wrap {
  position:absolute; top:50%; left:var(--gutter);
  transform:translateY(-50%); z-index:1;
}
.hero__name { display:flex; flex-direction:column; overflow:visible; }
.hero__word {
  font-family:'Cormorant Garamond', serif; font-size:clamp(5rem,17vw,16rem);
  font-weight:300; line-height:.85; letter-spacing:-.02em;
  text-transform:uppercase; color:var(--ink);
  display:block; will-change:transform; transform:translateY(110%);
}
.hero__bl {
  position:absolute; bottom:2rem; left:var(--gutter); z-index:1;
  display:flex; flex-direction:column; gap:.6rem;
}
.hero__role { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); }
.hero__avail { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.hero__dot {
  width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0;
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }
.hero__avail-text { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.hero__avail-link { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); transition:opacity .2s; }
.hero__avail-link:hover { opacity:.6; }
.hero__br {
  position:absolute; bottom:2rem; right:var(--gutter); z-index:1;
  display:flex; flex-direction:column; align-items:flex-end; gap:.6rem;
}
.hero__see-work {
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim);
  display:flex; align-items:center; gap:.5rem; transition:color .2s;
}
.hero__see-work:hover { color:var(--ink); }
.hero__see-work .arrow { display:inline-block; transition:transform .3s var(--ease-out); }
.hero__see-work:hover .arrow { transform:translate(3px,-3px); }
.hero__year { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; color:var(--ink-ghost); }

/* ══════════════════════════════════════════
   PAGE WRAP + HEADER
══════════════════════════════════════════ */
.page-wrap { padding-top:clamp(4rem,8vh,5.5rem); }
.page-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:clamp(1.5rem,4vh,3rem) var(--gutter) 1rem;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:1rem;
}
.page-title {
  font-family:var(--f-display); font-size:clamp(2.5rem,8vw,6rem);
  font-weight:800; letter-spacing:-.05em; text-transform:uppercase; line-height:.88;
}
.page-header__right { display:flex; align-items:center; gap:1.5rem; flex-shrink:0; }
.page-count { font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
.view-toggle { display:flex; gap:.3rem; }
.view-btn {
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:2px;
  color:var(--ink-ghost); transition:color .2s,border-color .2s;
}
.view-btn svg { width:14px; height:14px; fill:currentColor; }
.view-btn.is-active,.view-btn:hover { color:var(--ink); border-color:var(--border); }

/* ══════════════════════════════════════════
   FILTER
══════════════════════════════════════════ */
.work-filter {
  display:flex; align-items:center; gap:.4rem;
  padding:.6rem var(--gutter);
  border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
.work-filter::-webkit-scrollbar { display:none; }
.filter-btn {
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-ghost); flex-shrink:0; padding:.3rem .8rem;
  border:1px solid transparent; border-radius:100px; transition:color .2s,border-color .2s;
}
.filter-btn.is-active { color:var(--ink); border-color:var(--border); }
.filter-btn:hover:not(.is-active) { color:var(--ink-dim); }

/* ══════════════════════════════════════════
   CAROUSEL / TIOVIVO  — GRANDE
══════════════════════════════════════════ */
#view-carousel {
  position:relative;
  height:calc(100dvh - 10rem);
  perspective:1600px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.carousel-scene {
  position:relative;
  width:420px; height:580px;
  transform-style:preserve-3d;
}
.carousel-card {
  position:absolute; inset:0; overflow:hidden;
  border-radius:2px; backface-visibility:hidden;
  cursor:none; transition:box-shadow .4s;
}
.carousel-card.is-active { box-shadow:0 30px 80px rgba(17,17,16,.18); }
.carousel-card__img,.carousel-card__ph {
  width:100%; height:100%; object-fit:cover; display:block;
}
.carousel-card__ph { background:var(--surface); }
.carousel-card__overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(17,17,16,.88) 0%,transparent 55%);
  opacity:0; transition:opacity .35s;
}
.carousel-card.is-active:hover .carousel-card__overlay { opacity:1; }
.carousel-card__info {
  position:absolute; bottom:0; left:0; right:0; padding:1.8rem;
  transform:translateY(10px); opacity:0;
  transition:transform .4s var(--ease-out),opacity .4s;
}
.carousel-card.is-active:hover .carousel-card__info { transform:translateY(0); opacity:1; }
.carousel-card__title {
  font-family:var(--f-display); font-size:2rem; font-weight:800;
  letter-spacing:-.03em; color:#F8F7F5; line-height:.9;
}
.carousel-card__cat {
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(248,247,245,.5); margin-top:.4rem;
}
/* Nav — buttons on left/right sides, dots at bottom */
.carousel-nav {
  position:absolute; inset:0;
  pointer-events:none; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem;
}
.carousel-btn {
  pointer-events:all;
  font-family:var(--f-mono); font-size:1.1rem; letter-spacing:0;
  color:var(--ink);
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:50%;
  background:rgba(248,247,245,.85);
  backdrop-filter:blur(8px);
  transition:background .2s,color .2s,transform .2s;
  flex-shrink:0;
}
.carousel-btn:hover { background:var(--ink); color:var(--bg); transform:scale(1.05); }
.carousel-dots {
  position:absolute; bottom:1.5rem; left:50%;
  transform:translateX(-50%);
  display:flex; gap:.5rem; align-items:center;
  pointer-events:all;
}
.carousel-dot {
  width:4px; height:4px; border-radius:50%;
  background:var(--ink-ghost); transition:background .2s,transform .2s;
}
.carousel-dot.is-active { background:var(--ink); transform:scale(1.5); }

/* ══════════════════════════════════════════
   ARCHIVE VIEW
══════════════════════════════════════════ */
#view-archive { display:none; }
#view-archive.is-active { display:block; }
#view-carousel.is-hidden { display:none; }

.archive-wrap { padding:0 0 4rem; }
.archive-row {
  display:flex; align-items:center; gap:2rem;
  padding:1rem var(--gutter);
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.archive-row:first-child { border-top:1px solid var(--border); }
.archive-num { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; color:var(--ink-ghost); min-width:2.5rem; }
.archive-title {
  font-family:var(--f-display); font-size:clamp(1.4rem,3.5vw,2.8rem);
  font-weight:800; letter-spacing:-.04em; text-transform:uppercase; color:var(--ink);
  transition:color .2s; flex:1;
}
.archive-row:hover .archive-title { color:var(--ink-dim); }
.archive-cat { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-ghost); }
.archive-year { font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; color:var(--ink-ghost); }
.archive-row::before {
  content:''; position:absolute; inset:0;
  background:var(--surface); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease-out); z-index:-1;
}
.archive-row:hover::before { transform:scaleX(1); }

/* floating cursor image in archive */
#archive-cursor-img {
  position:fixed; pointer-events:none; width:220px; aspect-ratio:4/3;
  z-index:calc(var(--z-cur) - 1); overflow:hidden; border-radius:2px;
  opacity:0; transform:scale(.9) rotate(-1deg);
  transition:opacity .3s,transform .3s;
}
#archive-cursor-img.visible { opacity:1; transform:scale(1) rotate(-.5deg); }
#archive-cursor-img img,#archive-cursor-img .aci-ph { width:100%; height:100%; object-fit:cover; display:block; }
#archive-cursor-img .aci-ph { background:var(--surface); }

/* ══════════════════════════════════════════
   PROJECT DETAIL PAGE
══════════════════════════════════════════ */
.proj-detail { padding-bottom:6rem; }

/* Header — title only, no image background */
.proj-detail__header {
  padding:3rem var(--gutter) 0;
}
.proj-detail__hero-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3.5rem,10vw,9rem);
  font-weight:300; letter-spacing:-.02em;
  text-transform:uppercase; line-height:.85;
  color:var(--ink);
}
.proj-detail__hero-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1.2rem; }
.proj-detail__tag {
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); padding:.25rem .7rem;
  border:1px solid var(--border); border-radius:100px;
}

/* Meta strip — horizontal bar, very visible */
.proj-detail__meta-strip {
  display:flex; flex-wrap:wrap;
  margin-top:2rem;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.proj-detail__meta-cell {
  padding:1rem 1.8rem 1rem 0;
  margin-right:1.8rem;
  border-right:1px solid var(--border);
}
.proj-detail__meta-cell:last-child { border-right:none; margin-right:0; }
.proj-detail__meta-label {
  font-family:var(--f-mono); font-size:.55rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-ghost); margin-bottom:.3rem; display:block;
}
.proj-detail__meta-val {
  font-family:var(--f-display); font-size:1rem; font-weight:700;
  color:var(--ink); letter-spacing:-.01em;
}
.proj-detail__meta-val a { color:var(--accent); }

/* Description */
.proj-detail__desc-block { padding:2rem var(--gutter); border-bottom:1px solid var(--border); }
.proj-detail__desc { font-size:clamp(1rem,1.8vw,1.1rem); line-height:1.75; color:var(--ink-dim); max-width:680px; }

/* Gallery — ordered top to bottom, pairs then last ones full width */
.proj-detail__gallery { padding:1.5rem var(--gutter) 2rem; display:flex; flex-direction:column; gap:.75rem; }
.proj-detail__gallery-row { display:flex; gap:.75rem; }
.proj-detail__gallery-row img { flex:1; min-width:0; object-fit:cover; display:block; border-radius:2px; }
.proj-detail__gallery img { width:100%; display:block; border-radius:2px; }
.proj-detail__gallery img.full { width:100%; }

/* Nav */
.proj-detail__nav {
  padding:2.5rem var(--gutter);
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
}
.proj-detail__nav-link {
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim); transition:color .2s;
}
.proj-detail__nav-link:hover { color:var(--ink); }