/*
Theme Name: Contreras Works
Theme URI: https://www.contreras.works
Author: Joaquín Contreras Soto
Description: Portafolio en grilla — cada post es un proyecto. Cabecera y pie inspirados en poesía visual: un solo cuerpo, un solo peso, tipografía Fungi. Texto de perfil editable desde el Personalizador.
Version: 2.0
License: GNU General Public License v2 or later
Text Domain: contreras
*/

/* ============================================================
   TIPOGRAFÍA — Fungi, un solo peso (+ itálica), en /fonts
   ============================================================ */
@font-face{font-family:'Fungi';
  src:url('fonts/CFFungi-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Fungi';
  src:url('fonts/CFFungi-Italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --gray:#8b8b87;
  --accent:#ff4400;
  --font:'Fungi',Helvetica,Arial,sans-serif;
  /* un solo cuerpo para cabecera, perfil y pie */
  --type:clamp(17px,2vw,22px);
  --pad:clamp(16px,3vw,44px);
  --gap:clamp(20px,3vw,46px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-weight:400;
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--ink);color:var(--paper)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;height:auto;display:block}
em,i{font-style:italic}
b,strong{font-weight:400;font-style:italic} /* un solo peso: el énfasis es la itálica */

/* ============================================================
   CABECERA — la tarjeta
   joaquín
   www.        contreras     .works
   joaquin@    contreras     .works
   www.        contrafonts   .cl
   ============================================================ */
.site-header{
  padding:clamp(22px,3.4vw,46px) var(--pad) 0;
  font-size:var(--type);
  line-height:1.45;
}
.site-header .name{margin-bottom:1.45em}
.site-header .name a:hover{font-style:italic}

.card{
  display:grid;
  grid-template-columns:repeat(3,auto);
  justify-content:start;
  column-gap:clamp(2em,7vw,7em);
}
.card a{display:contents}
.card span{white-space:nowrap;transition:color .15s}
/* la fila completa se enciende al pasar por cualquiera de sus partes */
.card a:hover span{color:var(--accent)}
.card a:hover span:nth-child(2){font-style:italic}

/* ---------- perfil (Personalizador) ---------- */
.profile{
  padding:1.45em var(--pad) 0;
  max-width:34em;
  font-size:var(--type);
  line-height:1.45;
}
.profile a{color:var(--accent)}
.profile a:hover{font-style:italic}

/* ============================================================
   GRILLA — 3 columnas (sin cambios de funcionamiento)
   ============================================================ */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap) var(--gap);
  padding:calc(var(--gap)*1.4) var(--pad) calc(var(--gap)*1.6);
  align-items:end;
}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

.cell{min-width:0}

/* ---------- media: imágenes que rotan ---------- */
.media{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  cursor:pointer;
  background:var(--paper);
}
.cell[data-n="1"] .media{cursor:default}
.media .ly{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  opacity:0;transition:opacity .45s var(--ease);
  user-select:none;
}
.media .ly.on{opacity:1}

/* ---------- panel de texto: negro, sin borde ---------- */
.panel{
  position:absolute;inset:0;
  background:var(--ink);color:var(--paper);
  padding:clamp(14px,1.8vw,24px);
  display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;
  transform:translateY(8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s;
  overflow:auto;
  cursor:default;
}
.cell.open .panel{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.panel-inner{font-size:13.5px;line-height:1.55;max-width:46ch}
.panel-inner p+p{margin-top:.7em}
.panel a{color:var(--accent)}
.panel a:hover{font-style:italic}

/* ---------- caption pequeña ---------- */
.cap{
  display:flex;align-items:baseline;gap:.8em;
  padding-top:7px;
  font-size:13px;
}
.cap .year{color:var(--gray);font-variant-numeric:tabular-nums}
.cap .title{
  font-weight:400;
  font-size:13px;letter-spacing:.01em;line-height:1.3;
  flex:1;min-width:0;
}
.cell:hover .title{color:var(--accent);font-style:italic}
.cap .num{color:var(--gray);font-variant-numeric:tabular-nums;white-space:nowrap}
.cell[data-n="1"] .num{visibility:hidden}
.cap .plus{
  font-size:17px;line-height:1;width:1.1em;text-align:center;
  transition:transform .35s var(--ease),color .2s;
}
.cap .plus:hover{color:var(--accent)}
.cell.open .plus{transform:rotate(45deg);color:var(--accent)}

/* ============================================================
   PIE — contra ……………………………… fonts
   ============================================================ */
.site-footer{
  padding:clamp(30px,5vw,64px) var(--pad) clamp(40px,6vw,72px);
  font-size:var(--type);
  line-height:1.45;
}
.site-footer .contra{
  display:flex;justify-content:space-between;align-items:baseline;gap:1em;
}
.site-footer .contra:hover span{color:var(--accent)}
.site-footer .contra:hover span:last-child{font-style:italic}
.site-footer .line{margin-top:1.45em}
.site-footer .line a{color:var(--accent)}
.site-footer .line a:hover{font-style:italic}

/* ---------- vista single (mínima) ---------- */
.single-wrap{padding:calc(var(--gap)) var(--pad) 60px;max-width:880px}
.single-wrap .cap{border-top:1px solid var(--ink);margin-bottom:1.2em}
.single-wrap .stack img{margin:0 0 var(--gap)}
.single-wrap .content{max-width:56ch;font-size:15px;line-height:1.55}
.single-wrap .content p+p{margin-top:.8em}
.single-wrap .content a{color:var(--accent)}
.single-wrap .back{display:inline-block;margin-top:2em;font-size:13px}
.single-wrap .back:hover{color:var(--accent);font-style:italic}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}