/* ============================================================
   SARA GARNICA — minimal editorial, monocromo
   Referencias: pixyliao.com (landing con video) + tomhegen.com (listado de trabajo)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  --bg:      #FAFAF8;
  --bg-2:    #F1F0EC;
  --ink:     #141414;
  --ink-2:   #6E6C68;
  --line:    rgba(20,20,20,0.14);
  --overlay: rgba(8,8,8,0.42);

  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --max: 1320px;
  --pad: clamp(20px, 4vw, 56px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--ink); color:var(--bg); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- nav (light pages) ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:26px var(--pad);
  background:var(--bg);
  border-bottom:1px solid transparent;
}
.site-nav .side{ display:flex; gap:clamp(14px,2.5vw,32px); }
.site-nav .side.right{ justify-content:flex-end; }
.site-nav .brand{
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-align:center;
  white-space:nowrap;
}
.site-nav a{
  font-size:0.7rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, color .25s ease;
}
.site-nav a:hover{ border-color:var(--ink); }
@media (max-width:680px){
  .site-nav{ grid-template-columns:auto 1fr; }
  .site-nav .side.right{ display:none; }
  .site-nav .brand{ text-align:left; }
}

/* ---------- footer ---------- */
.site-footer{
  padding:60px var(--pad) 40px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:20px;
}
.site-footer .brand{ font-weight:600; letter-spacing:0.18em; font-size:0.85rem; }
.site-footer .foot-links{
  display:flex; gap:22px;
  font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
}
.site-footer .foot-links a{ opacity:.65; transition:opacity .25s ease; }
.site-footer .foot-links a:hover{ opacity:1; }
.site-footer .fine{ font-size:0.68rem; opacity:.4; letter-spacing:0.05em; }

/* ============================================================
   LANDING (index.html) — video de fondo, estilo Pixy Liao
   ============================================================ */
.landing{
  position:relative;
  height:100dvh; width:100%;
  overflow:hidden;
  background:#0c0c0c;
}
.landing video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.landing::after{
  content:"";
  position:absolute; inset:0;
  background:var(--overlay);
}
.landing-top{
  position:absolute; top:34px; left:0; right:0; z-index:2;
  text-align:center;
  color:#fff;
  font-size:0.82rem;
  font-weight:600;
  letter-spacing:0.28em;
}
.landing-center{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.tocame{
  display:inline-block;
  color:#fff;
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.32em;
  text-transform:uppercase;
  padding:10px 4px;
  border-bottom:1px solid rgba(255,255,255,0.55);
  transition:letter-spacing .35s ease, border-color .35s ease, opacity .35s ease;
}
.tocame:hover{ letter-spacing:0.44em; border-color:#fff; }
.landing-social{
  position:absolute; bottom:36px; left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:14px;
}
.landing-social a{
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,0.92);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, background .3s ease;
}
.landing-social a:hover{ transform:translateY(-2px); background:#fff; }
.landing-social svg{ width:16px; height:16px; }

/* ============================================================
   WORK — listado estilo Tom Hegen (nombres = carpetas reales)
   ============================================================ */
.work-intro{
  max-width:var(--max); margin:0 auto;
  padding:150px var(--pad) 20px;
}
.work-intro p{
  font-size:0.82rem; letter-spacing:0.06em; color:var(--ink-2);
  max-width:44ch; line-height:1.6;
}
.work-list{
  max-width:var(--max); margin:0 auto;
  padding:40px var(--pad) 140px;
}
.work-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:24px;
  padding:20px 0;
  border-top:1px solid var(--line);
  transition:padding-left .35s ease;
}
.work-list .work-row:last-child{ border-bottom:1px solid var(--line); }
.work-row:hover{ padding-left:18px; }
.work-row .name{
  font-size:clamp(1.7rem, 4vw, 3rem);
  font-weight:500;
  letter-spacing:-0.01em;
  transition:color .3s ease;
}
.work-row:hover .name{ color:var(--ink-2); }
.work-row .count{
  font-size:0.78rem;
  color:var(--ink-2);
  letter-spacing:0.05em;
  min-width:2ch;
  text-align:right;
}

/* ---------- gallery page (full-bleed stacked images) ---------- */
.gallery-head{
  padding:150px var(--pad) 50px;
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap;
}
.gallery-head h1{
  font-size:clamp(2rem,5vw,3.4rem); font-weight:500;
  margin:0; letter-spacing:-0.01em;
}
.gallery-head .info{
  font-size:0.75rem; letter-spacing:0.08em; color:var(--ink-2); text-transform:uppercase;
}
.gallery-stack{ display:flex; flex-direction:column; gap:2px; }
.gallery-stack img{ width:100%; display:block; }
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  margin:60px var(--pad) 0; max-width:var(--max);
  font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink);
  transition:padding-left .3s ease;
}
.back-link:hover{ padding-left:8px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-wrap{
  max-width:var(--max); margin:0 auto;
  padding:150px var(--pad) 120px;
  display:grid; grid-template-columns:1fr 1.3fr; gap:64px;
  align-items:start;
}
.about-frame{
  aspect-ratio:3/4; overflow:hidden; background:var(--bg-2);
  border:1px solid var(--line);
  position:sticky; top:120px;
}
.about-frame img{ width:100%; height:100%; object-fit:cover; }
.about-copy .eyebrow{
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-2);
  margin-bottom:18px;
}
.about-copy h1{
  font-size:clamp(2rem,5vw,3rem); font-weight:500; margin:0 0 28px; letter-spacing:-0.01em;
}
.about-copy p{ line-height:1.75; color:#333; margin:0 0 20px; font-size:1rem; max-width:60ch; }
.about-copy .skills{
  margin-top:38px; padding-top:28px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.about-copy .skills h4{
  font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-2); margin:0 0 10px;
}
.about-copy .skills ul{ margin:0; padding:0; list-style:none; }
.about-copy .skills li{ font-size:0.9rem; color:#333; margin-bottom:6px; }
@media (max-width:760px){
  .about-wrap{ grid-template-columns:1fr; }
  .about-frame{ position:static; max-width:320px; }
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-wrap{
  max-width:760px; margin:0 auto;
  padding:170px var(--pad) 140px;
}
.contact-wrap .eyebrow{
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-2); margin-bottom:18px;
}
.contact-wrap h1{
  font-size:clamp(2.2rem,6vw,3.6rem); font-weight:500; margin:0 0 22px; letter-spacing:-0.01em;
}
.contact-wrap p{ color:#333; line-height:1.7; margin:0 0 46px; font-size:1.02rem; max-width:52ch; }
.contact-links{ border-top:1px solid var(--line); }
.contact-links a{
  padding:26px 0; border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  font-size:1.25rem; font-weight:500;
  transition:padding-left .3s ease, color .3s ease;
}
.contact-links a:hover{ padding-left:14px; color:var(--ink-2); }
.contact-links a .arrow{ font-size:1rem; font-weight:400; }