/*
Theme Name: Matthew Thomson
Theme URI: https://ianmatthewthomson.com
Author: Matthew Thomson
Description: Sitio personal de Matthew Thomson — fotografía, film y marcas. Tema a medida (V1 comercial).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: matthew-thomson
*/

:root{
  --bg:#121110;
  --bg-alt:#1A1815;
  --fg:#F4F0E8;
  --fg-dim:#B7AFA1;
  --fg-mute:#7C7568;
  --line:rgba(244,240,232,0.12);
  --line-strong:rgba(244,240,232,0.22);
  --accent:#C9A876;
  --placeholder:#EDEAE1;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--fg);
}

body{
  font-family:'Archivo',Helvetica,Arial,sans-serif;
}

a{ text-decoration:none; color:inherit; }
a:hover{ color:var(--accent); }

img{ max-width:100%; display:block; }

.sans{ font-family:'Archivo',Helvetica,Arial,sans-serif; }
.serif{ font-family:'Instrument Serif',Georgia,serif; }

.eyebrow{
  font-family:'Archivo',sans-serif;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:600;
}

.accent{ color:var(--accent); }

.wrap{
  padding-left:clamp(20px,5vw,64px);
  padding-right:clamp(20px,5vw,64px);
}

/* Buttons */
.btn{
  display:inline-block;
  padding:16px 34px;
  background:var(--accent);
  color:#14100B;
  font-family:'Archivo',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  border:1px solid var(--accent);
}
.btn:hover{ color:#14100B; opacity:0.9; }

.btn-outline{
  display:inline-block;
  padding:10px 20px;
  border:1px solid var(--accent);
  color:var(--accent);
  font-family:'Archivo',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.btn-outline:hover{ color:var(--accent); opacity:0.8; }

/* Nav */
.site-nav{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  border-bottom:1px solid var(--line);
  background:rgba(18,17,16,0.85);
  backdrop-filter:blur(8px);
}
.site-nav .brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--fg);
}
.site-nav .brand .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  display:inline-block;
}
.site-nav .links{
  display:flex;
  gap:clamp(16px,3vw,32px);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

/* Placeholder photo block — reemplazar por <img> cuando Matthew pase las fotos reales */
.placeholder-photo{
  position:relative;
  width:100%;
  background:var(--placeholder);
  border:1px solid var(--line-strong);
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:12px;
}
.placeholder-photo span{
  font-family:'Archivo',sans-serif;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(20,18,16,0.32);
}

/* Home: hero */
.hero-split{ display:flex; flex-wrap:wrap-reverse; gap:56px; align-items:center; padding:clamp(64px,10vw,120px) 0 clamp(56px,8vw,96px); }
.hero-text{ flex:1 1 420px; }
.hero-frame{ flex:1 1 360px; max-width:460px; }
.hero-frame .placeholder-photo{ aspect-ratio:3/4; }

/* Home: frase */
.frase-band{ padding:clamp(48px,7vw,88px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; }

/* Home: trabajo */
.work-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; }
.work-grid .placeholder-photo{ aspect-ratio:4/5; }

/* Home: qué hago */
.disciplines{ display:flex; flex-wrap:wrap; gap:48px; }
.discipline-col{ flex:1 1 260px; }

/* Home + Nightlife: footer */
.footer-cols{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; margin-bottom:56px; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-top:24px; border-top:1px solid var(--line); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fg-mute); }

/* Nightlife: top bar */
.nightlife-topbar{ display:flex; align-items:center; justify-content:space-between; padding:20px clamp(20px,5vw,64px); border-bottom:1px solid var(--line); }

/* Nightlife: hero */
.nightlife-hero{ display:flex; flex-wrap:wrap-reverse; align-items:center; gap:48px; padding:clamp(40px,7vw,80px) 0; border-bottom:1px solid var(--line); }
.nightlife-hero .placeholder-photo{ aspect-ratio:4/5; }

/* Nightlife: statement */
.words-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }

/* Nightlife: gallery */
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

/* Nightlife: servicio */
.service-list{ display:flex; flex-direction:column; }
.service-list > div{ display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); }

/* Nightlife: paquetes */
.packages{ display:flex; flex-wrap:wrap; gap:24px; }
.package-card{ flex:1 1 280px; border:1px solid var(--line); padding:32px; }

/* Sections */
.section{ padding:clamp(72px,9vw,112px) 0; }
.section-alt{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }