@import url("../fonts/fonts.css");

/* ============ TOKENS ============ */
:root{
  --sand-1:#EFE6D0;      /* warm sand canvas */
  --sand-2:#F7F0E1;
  --sand-3:#E4D6B6;      /* deeper sand block */
  --ink:#1F1A12;         /* warm near-black */
  --ink-soft:#6E6252;
  --line:#D9CBAB;
  --cobalt:#213FA0;      /* THE single accent — cobalt-blue glaze */
  --cobalt-deep:#182F7C;
  --font-serif:"Gilda Display",Georgia,serif;
  --font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1.25rem,4vw,4rem);
  --header-h:5.5rem;
  --ease:cubic-bezier(.19,1,.22,1);
}

html{font-size:16px;-webkit-text-size-adjust:100%}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--sand-1);color:var(--ink);
  font-family:var(--font-sans);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--cobalt);color:var(--sand-1)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--sand-1)}
::-webkit-scrollbar-thumb{background:var(--cobalt)}

.wrap{max-width:120rem;margin:0 auto;padding-inline:var(--pad)}
.serif{font-family:var(--font-serif);font-weight:400;line-height:.98;letter-spacing:-.01em}
.d-hero{font-size:clamp(4.5rem,20vw,18rem)}
.d-1{font-size:clamp(2.6rem,9vw,8rem)}
.d-2{font-size:clamp(2rem,6vw,5rem)}
.d-3{font-size:clamp(1.6rem,3.4vw,3.2rem)}

/* ============ CURSOR ============ */
#cursor{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  width:10px;height:10px;border-radius:50%;background:var(--cobalt);
  transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s,opacity .3s;
  display:grid;place-items:center;
}
#cursor::after{content:attr(data-label);font-family:var(--font-sans);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sand-1);opacity:0;transition:opacity .3s;white-space:nowrap}
#cursor.big{width:5.5rem;height:5.5rem;background:var(--cobalt)}
#cursor.big::after{opacity:1}
#cursor.mix{mix-blend-mode:difference;background:#fff}
@media (hover:none),(pointer:coarse){#cursor{display:none!important}}

/* ============ HEADER ============ */
header{position:fixed;inset:0 0 auto 0;z-index:800;height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--pad);mix-blend-mode:difference;color:#fff}
header .logo{font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-.01em}
header nav{display:flex;gap:2rem;font-size:.8rem;letter-spacing:.04em;font-weight:500}
header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;transition:width .35s}
header nav a:hover::after{width:100%}
@media(max-width:760px){header nav{display:none}}

/* ============ HERO COLLAGE ============ */
.hero{position:relative;min-height:100vh;background:var(--sand-1);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.hero__collage{position:absolute;inset:0;z-index:1}
.hero__collage .tile{position:absolute;opacity:0;overflow:hidden;box-shadow:0 24px 60px rgba(31,26,18,.14)}
.hero__collage .tile img{width:100%;height:100%;object-fit:cover}
/* scattered positions — centre band left clear for the wordmark */
.tile.t1{top:9%;left:3.5%;width:14.5%;aspect-ratio:3/4}
.tile.t2{top:15%;left:20.5%;width:11.5%;aspect-ratio:1/1}
.tile.t3{top:7%;left:60.5%;width:12.5%;aspect-ratio:1/1}
.tile.t4{top:11%;left:82%;width:14.5%;aspect-ratio:3/4}
.tile.t5{top:60%;left:5%;width:13.5%;aspect-ratio:1/1}
.tile.t6{top:54%;left:22%;width:12%;aspect-ratio:3/4}
.tile.t7{top:62%;left:56%;width:12.5%;aspect-ratio:1/1}
.tile.t8{top:53%;left:80.5%;width:15%;aspect-ratio:3/4}
.tile.t9{top:70%;left:41.5%;width:11.5%;aspect-ratio:1/1}
.hero__word{position:relative;z-index:2;text-align:center;color:var(--ink);pointer-events:none;
  margin-top:auto;line-height:.82}
.hero__meta{position:relative;z-index:3;width:100%;display:flex;justify-content:space-between;align-items:flex-end;
  padding:var(--pad);gap:1rem}
.hero__meta p{max-width:26ch;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.hero__meta .k{color:var(--cobalt);font-weight:600}
.scrollcue{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:.6rem;color:var(--ink);white-space:nowrap}
.scrollcue::after{content:"";width:2.4rem;height:1px;background:currentColor;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleX(.3);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}
@media(max-width:820px){
  .hero{justify-content:flex-start;padding-top:calc(var(--header-h) + 1rem)}
  .hero__collage{position:static;columns:2;column-gap:.7rem;padding:0 var(--pad);order:2;margin-top:2rem}
  .hero__collage .tile{position:static!important;width:auto!important;aspect-ratio:auto!important;
    break-inside:avoid;margin-bottom:.7rem;opacity:1}
  .hero__word{order:1;margin:0}
  .hero__meta{order:3;flex-direction:column;align-items:flex-start;gap:1.2rem}
}

/* ============ SECTION SCAFFOLD ============ */
section{position:relative}
.sec-label{font-size:.9rem;letter-spacing:.02em;color:var(--cobalt);text-transform:lowercase;font-weight:500}
.pad-y{padding-block:clamp(5rem,12vw,11rem)}

/* ============ WIPE REVEAL (colour panel wipes up, image follows) ============ */
.reveal{position:relative;overflow:hidden}
.reveal>img{width:100%;clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease) .12s}
.reveal .r-panel{position:absolute;inset:0;background:var(--cobalt);z-index:2;transform-origin:bottom;
  transition:transform .8s var(--ease)}
.reveal.in>img{clip-path:inset(0 0 0 0)}
.reveal.in .r-panel{transform:scaleY(0);transform-origin:top}

/* ============ ABOUT ============ */
.about{display:grid;gap:clamp(2rem,5vw,5rem)}
.about__lead{max-width:22ch}
.about__manifesto{font-family:var(--font-serif);font-size:clamp(1.8rem,4vw,3.6rem);line-height:1.14;max-width:20ch}
.about__manifesto .w{color:var(--line);transition:color .3s}
.about__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:end}
.about__grid .reveal{width:100%;aspect-ratio:3/2}
.about__grid .reveal>img{height:100%;object-fit:cover}
.about__grid p{font-size:1rem;color:var(--ink-soft);max-width:38ch}
@media(max-width:800px){.about__grid{grid-template-columns:1fr}}

/* ============ CATALOG (collections) ============ */
.cat__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem}
.cat__tabs{display:flex;flex-wrap:wrap;gap:1.4rem}
.cat__tab{font-family:var(--font-serif);font-size:clamp(1.4rem,3.4vw,2.6rem);color:var(--line);transition:color .3s;line-height:1}
.cat__tab .n{font-family:var(--font-sans);font-size:.7rem;vertical-align:super;margin-left:.2em}
.cat__tab:hover{color:var(--ink-soft)}
.cat__tab.active{color:var(--ink)}
.catalog{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  padding:clamp(1rem,2vw,1.7rem) 0;border-bottom:1px solid var(--line);position:relative;
  transition:padding-left .4s,opacity .4s;overflow:hidden}
.row.hide{display:none}
.row:hover{padding-left:1.4rem}
.row__name{font-family:var(--font-serif);font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1;transition:color .3s}
.row:hover .row__name{color:var(--cobalt)}
.row__meta{display:flex;gap:2.5rem;font-size:.82rem;color:var(--ink-soft);letter-spacing:.02em}
.row__img{position:absolute;right:16%;top:50%;width:16rem;aspect-ratio:3/2;transform:translateY(-50%) scale(.96);
  opacity:0;pointer-events:none;object-fit:cover;transition:opacity .4s,transform .4s;z-index:5;box-shadow:0 20px 50px rgba(31,26,18,.28)}
.row:hover .row__img{opacity:1;transform:translateY(-50%) scale(1)}
.row.linked .row__name::after{content:"→";font-family:var(--font-sans);font-size:.9em;margin-left:.4em;opacity:0;transition:opacity .3s}
.row.linked:hover .row__name::after{opacity:1}
@media(max-width:760px){
  .row{grid-template-columns:1fr}
  .row__meta{gap:1.2rem;margin-top:.4rem}
  .row__img{display:none}
}

/* ============ EN USO — muted urban overlay ============ */
.uso{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;color:var(--sand-1)}
.uso__bg{position:absolute;inset:0}
.uso__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.uso__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,20,14,.15),rgba(24,20,14,.72))}
.uso__in{position:relative;z-index:2;padding:var(--pad);max-width:60rem}
.uso__in .sec-label{color:var(--cobalt);filter:brightness(1.6)}
.uso__in h2{font-family:var(--font-serif);font-size:clamp(2.4rem,6vw,5.5rem);line-height:1.02;margin:1rem 0 1.4rem}
.uso__in p{max-width:44ch;color:rgba(247,240,225,.82);font-size:1rem}

/* ============ PROCESO — macro 3-step ============ */
.proc__head{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.proc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,3rem)}
.proc__step .reveal{aspect-ratio:3/2}
.proc__step .reveal>img{height:100%;object-fit:cover}
.proc__step .idx{font-size:.8rem;letter-spacing:.2em;color:var(--cobalt);margin-top:1.2rem}
.proc__step h3{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.4rem);margin:.5rem 0 .7rem;font-weight:400}
.proc__step p{font-size:.92rem;color:var(--ink-soft);max-width:34ch}
@media(max-width:820px){.proc__grid{grid-template-columns:1fr}}

/* ============ CONCEPTS RAIL (pinned horizontal scrub) ============ */
.rail{background:var(--ink);color:var(--sand-1)}
.rail__thumbs{position:absolute;top:var(--header-h);left:0;right:0;z-index:20;display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;
  padding:1.2rem var(--pad)}
.rail__thumb{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.4;padding:.4rem .7rem;
  border:1px solid transparent;border-radius:2rem;transition:opacity .3s,border-color .3s}
.rail__thumb.active{opacity:1;border-color:rgba(247,240,225,.35)}
.rail__viewport{overflow:hidden}
.rail__track{display:flex;will-change:transform}
.panel{flex:0 0 100vw;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(2rem,5vw,6rem);padding:8rem var(--pad) 4rem}
.panel__txt .idx{font-size:.8rem;letter-spacing:.2em;color:rgba(247,240,225,.5)}
.panel__slogan{font-family:var(--font-serif);font-size:clamp(2.6rem,7vw,6rem);line-height:1;margin:1.2rem 0 2rem}
.panel__slogan em{font-style:normal;color:var(--cobalt);filter:brightness(1.7)}
.panel__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;max-width:44rem}
.panel__cols p{font-size:.92rem;color:rgba(247,240,225,.72);line-height:1.6}
.gallery{position:relative;aspect-ratio:4/3;width:100%}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.gallery img.active{opacity:1}
.gallery__hint{position:absolute;bottom:.8rem;right:.8rem;z-index:2;font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(247,240,225,.7);mix-blend-mode:difference}
@media(max-width:820px){
  .panel{grid-template-columns:1fr;min-height:auto;padding:7rem var(--pad) 3rem;gap:2rem}
  .rail__viewport{overflow:visible}
  .rail__track{display:block}
  .panel{flex:none}
}

/* ============ FEATURED PRODUCTS ============ */
.feat__head{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.feat__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,3rem)}
.feat__card{background:var(--sand-2);padding:clamp(1rem,2vw,1.8rem);border:1px solid var(--line)}
.feat__card .ph{aspect-ratio:3/2;overflow:hidden}
.feat__card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.feat__card:hover .ph img{transform:scale(1.04)}
.feat__card h3{font-family:var(--font-serif);font-size:clamp(1.4rem,2.4vw,1.9rem);margin:1.1rem 0 .3rem;font-weight:400}
.feat__card .desc{font-size:.88rem;color:var(--ink-soft);max-width:32ch}
.feat__sw{display:flex;gap:.5rem;margin-top:1rem;align-items:center}
.feat__sw span:not(.lbl){flex:0 0 auto;width:1.1rem;height:1.1rem;border-radius:50%;border:1px solid rgba(31,26,18,.15)}
.feat__sw .lbl{white-space:nowrap;font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);margin-left:.4rem}
@media(max-width:820px){.feat__grid{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:var(--sand-1);padding:clamp(4rem,8vw,7rem) 0 2.5rem}
.foot__top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-end}
.foot__top a.big{font-family:var(--font-serif);font-size:clamp(1.6rem,4vw,3rem)}
.foot__offices{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:clamp(2.5rem,5vw,4rem) 0;
  border-block:1px solid rgba(247,240,225,.15);padding-block:2.5rem}
.foot__offices h5{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,240,225,.55);margin-bottom:.7rem}
.foot__offices p{font-size:.9rem;line-height:1.7;color:rgba(247,240,225,.8)}
.foot__word{font-family:var(--font-serif);font-size:clamp(4rem,20vw,17rem);line-height:.8;color:var(--cobalt);
  filter:brightness(1.5);margin:1rem 0;letter-spacing:-.02em}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.72rem;
  letter-spacing:.04em;color:rgba(247,240,225,.5)}
@media(max-width:600px){.foot__offices{grid-template-columns:1fr}}

/* ============ REVEALS ============ */
[data-aos]{opacity:0;transform:translateY(2.4rem);transition:opacity .9s cubic-bezier(.215,.61,.355,1),transform .9s cubic-bezier(.215,.61,.355,1)}
[data-aos].in{opacity:1;transform:none}

/* ============ PAGE COVER TRANSITION ============ */
#cover{position:fixed;inset:0;z-index:9000;background:var(--ink);transform:scaleY(0);transform-origin:bottom;pointer-events:none}
#cover.in{transform:scaleY(1);transform-origin:bottom;transition:transform .55s cubic-bezier(.785,.135,.15,.86)}
#cover.out{transform:scaleY(0);transform-origin:top;transition:transform .55s cubic-bezier(.785,.135,.15,.86)}

/* ============ COLLECTION DETAIL ============ */
.pj-intro{padding-top:calc(var(--header-h) + 2rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.pj-intro__hero{width:100%;aspect-ratio:3/4;object-fit:cover}
.pj-intro h1{font-size:clamp(3rem,8vw,7rem);margin-bottom:2rem}
.pj-intro p{font-size:1.05rem;color:var(--ink-soft);max-width:42ch;margin-bottom:1.2rem}
@media(max-width:820px){.pj-intro{grid-template-columns:1fr}}
.pj-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.pj-facts .f h5{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt);margin-bottom:.4rem}
.pj-facts .f p{font-size:.92rem;color:var(--ink-soft)}
@media(max-width:700px){.pj-facts{grid-template-columns:1fr 1fr}}
.pj-media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pj-mediatext{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.pj-mediatext .reveal{aspect-ratio:4/3}
.pj-mediatext .reveal>img{height:100%;object-fit:cover}
.pj-mediatext .prose p{font-size:1rem;color:var(--ink-soft);margin-bottom:1rem;max-width:44ch}
@media(max-width:820px){.pj-mediatext{grid-template-columns:1fr}}
.pj-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.pj-two img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pj-two .side p{font-size:.95rem;color:var(--ink-soft);margin-top:1.2rem}
@media(max-width:700px){.pj-two{grid-template-columns:1fr}}
.next-pj{display:block;position:relative;height:70vh;min-height:420px;overflow:hidden;color:var(--sand-1)}
.next-pj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.next-pj:hover img{transform:scale(1.05)}
.next-pj::after{content:"";position:absolute;inset:0;background:rgba(24,20,14,.45)}
.next-pj__in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:.6rem}
.next-pj__in .k{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.next-pj__in .t{font-family:var(--font-serif);font-size:clamp(2.4rem,7vw,5.5rem)}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  [data-aos]{opacity:1!important;transform:none!important}
  .hero__collage .tile{opacity:1!important}
  .about__manifesto .w{color:var(--ink)!important}
  .reveal>img{clip-path:none!important}
  .reveal .r-panel{display:none}
  #cursor{display:none!important}
  .rail__viewport{overflow-x:auto}
}