/* Frannk Mariduena — Portfolio · Pixieset-style minimal */
:root{
  --paper:#f5f3ee;
  --ink:#171715;
  --muted:#66635e;
  --line:#cbc7bf;
  --panel:#ece9e2;
  --accent:#9a321f;
  --serif:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --sans:"DM Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.21,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--accent);color:#fff}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem clamp(1.15rem,5vw,3rem);
  transition:background .35s var(--ease),box-shadow .35s var(--ease),color .35s;
  color:#fff;
}
.site-header.scrolled{
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}
.brand{
  font-family:var(--serif);font-size:1.25rem;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
}
.brand em{font-style:normal;color:inherit}
.nav{display:flex;align-items:center;gap:clamp(1rem,3vw,2.2rem)}
.nav a{
  text-decoration:none;font-size:.72rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;opacity:.85;
}
.nav a:hover{opacity:1;color:var(--accent)}
.site-header:not(.scrolled) .nav a:hover{color:#fff}
.lang{display:flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:500;letter-spacing:.1em}
.lang button{
  background:none;border:0;color:inherit;cursor:pointer;
  font:inherit;letter-spacing:.1em;opacity:.55;padding:.2rem .1rem;
}
.lang button.active{opacity:1;border-bottom:1px solid currentColor}
.lang span{opacity:.4}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;position:relative;display:grid;align-items:end;
  background:#1d1c1a;isolation:isolate;overflow:hidden;
}
.hero-media{position:absolute;inset:-12% 0;z-index:-2;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.06) 42%,rgba(0,0,0,.62) 100%);
}
.hero-copy{
  width:min(1240px,100%);margin:0 auto;color:#fff;
  padding:clamp(7rem,15vw,12rem) clamp(1.15rem,5vw,4rem) clamp(2.6rem,6vw,4.5rem);
}
.hero-kicker{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.28em;
  margin:0 0 1.1rem;opacity:.85;
}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3.2rem,9vw,8.6rem);line-height:.92;letter-spacing:-.04em;
  max-width:12ch;
}
.hero-sub{
  margin-top:1.4rem;font-size:clamp(1rem,1.8vw,1.25rem);
  font-weight:300;letter-spacing:.02em;opacity:.92;max-width:44ch;
}
.hero-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  margin-top:2.6rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.4);
}
.hero-cta{
  display:inline-flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:500;
}
.hero-cta .arrow{transition:transform .25s var(--ease)}
.hero-cta:hover .arrow{transform:translateY(.3rem)}
.hero-location{
  writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.24em;
  font-size:.66rem;opacity:.75;white-space:nowrap;
}

/* ---------- Sections ---------- */
.section{padding:clamp(4.5rem,9vw,8.5rem) clamp(1.15rem,5vw,4rem)}
.wrap{width:min(1240px,100%);margin:0 auto}
.section-head{
  display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:end;
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.kicker{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.24em;font-weight:500;
  color:var(--accent);margin:0 0 1rem;
}
.section h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.6rem,5.6vw,5.2rem);line-height:.98;letter-spacing:-.03em;
}
.intro{color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.75;max-width:34rem}
.intro strong{color:var(--ink);font-weight:500}

/* ---------- About ---------- */
.about-grid{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.about-photo{margin:0;overflow:hidden}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.about-copy h2{margin-bottom:1.4rem}
.about-copy .intro{margin-bottom:2.2rem;max-width:36rem}
@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;gap:2rem}
  .about-photo img{aspect-ratio:1/1}
}

/* ---------- Filters ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1rem 0;margin-bottom:clamp(1.6rem,3vw,2.6rem);
  position:sticky;top:58px;z-index:20;background:var(--paper);
}
.filter{
  border:0;background:none;padding:.4rem 0;cursor:pointer;
  font-family:var(--sans);font-size:.68rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  position:relative;transition:color .2s;
}
.filter:hover{color:var(--ink)}
.filter.active{color:var(--ink)}
.filter.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
}
.filter .count{opacity:.55;font-weight:400;margin-left:.35em;letter-spacing:.05em}

/* ---------- Gallery ---------- */
.gallery{columns:3 300px;column-gap:clamp(.8rem,2vw,1.4rem)}
@media (max-width:640px){.gallery{columns:2 0;column-gap:.7rem}}
.g-item{
  break-inside:avoid;margin:0 0 clamp(.8rem,2vw,1.4rem);
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  cursor:zoom-in;
}
.g-item.in{opacity:1;transform:none}
.g-ph{
  overflow:hidden;background:var(--panel);
  will-change:transform;
  transform:perspective(900px) rotateX(var(--tilt,0deg)) translateY(var(--shift,0px));
}
.g-ph img{
  width:100%;height:auto;
  transition:transform .8s var(--ease),filter .8s var(--ease);
}
.g-item:hover .g-ph img{transform:scale(1.035)}
.g-cap{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:.55rem .1rem 0;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.g-cap .num{font-variant-numeric:tabular-nums}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  visibility:hidden;opacity:0;transition:opacity .45s var(--ease),visibility 0s .45s;
}
.lb.open{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
.lb-backdrop{position:absolute;inset:0;background:rgba(12,11,10,.94)}
.lb-fig{
  position:relative;max-width:min(92vw,1200px);max-height:86vh;margin:0;
  transform:scale(.94) translateY(12px);transition:transform .5s var(--ease);
}
.lb.open .lb-fig{transform:none}
.lb-fig img{
  max-width:min(92vw,1200px);max-height:78vh;width:auto;height:auto;
  object-fit:contain;box-shadow:0 30px 90px rgba(0,0,0,.5);background:#111;
}
.lb-fig figcaption{
  color:#cfc9bd;text-align:center;margin-top:.9rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
}
.lb-btn{
  position:absolute;z-index:2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:1.1rem;line-height:1;
  transition:background .2s,transform .2s;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lb-btn:hover{background:rgba(255,255,255,.2);transform:scale(1.06)}
.lb-close{top:1.1rem;right:1.1rem}
.lb-prev{left:1rem;top:50%;transform:translateY(-50%)}
.lb-next{right:1rem;top:50%;transform:translateY(-50%)}
.lb-prev:hover{transform:translateY(-50%) scale(1.06)}
.lb-next:hover{transform:translateY(-50%) scale(1.06)}
.lb-count{
  position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);
  color:#cfc9bd;font-size:.72rem;letter-spacing:.22em;font-variant-numeric:tabular-nums;
}

/* ---------- Contact ---------- */
.contact{background:var(--panel);text-align:center}
.contact h2{margin-bottom:1.2rem}
.contact .intro{margin:0 auto 2.6rem}
.contact-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  padding:1rem 1.9rem;border:1px solid var(--ink);color:var(--ink);
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.solid:hover{background:#7c2818;border-color:#7c2818;color:#fff}
.btn svg{width:1.05em;height:1.05em;flex:none}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:2.2rem clamp(1.15rem,5vw,4rem);
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;justify-content:space-between;
  font-size:.74rem;letter-spacing:.08em;color:var(--muted);
}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{border-color:var(--accent);color:var(--accent)}
footer .re{white-space:nowrap}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .g-item{opacity:1;transform:none}
  .g-ph{transform:none}
  .hero-media{inset:0}
}