/* ============================================================
   SNG — Spaces for Next Generations
   Editorial architectural design system (OMA / MoMA)
   ============================================================ */

:root{
  --paper:    #FFFFFF;
  --paper-2:  #F2F1EB;
  --paper-3:  #E8E6DD;
  --ink:      #171712;
  --ink-2:    #2B2B23;
  --gray:     #8C8A7C;
  --gray-2:   #6B6A5C;
  --line:     #E3E1D8;
  --line-2:   #D3D1C6;
  --line-dark:#35352D;
  --accent:   #EAB308;   /* brand YELLOW — fills, CTA, hero pop */
  --accent-2: #F4C430;   /* brighter yellow — on dark */
  --accent-3: #F2D98A;   /* light yellow — text on ink */
  --mk:       #8A6D0A;   /* mark/label color (legible gold); overridden per area */
  --labs:     #4F8A2E;   /* green  */
  --design:   #3E3E38;   /* dark gray */
  --tech:     #2F6BD0;   /* blue */
  --research: #B5532E;   /* terracotta */
  --philo:    #6B4FA0;   /* violet */

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --maxw: 1440px;
  --gut: 40px;
  --nav-h: 116px;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.5;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--paper); }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ display:block; max-width:100%; }
h1,h2,h3,h4,p{ margin:0; }

/* ---------- structural grid overlay (the SNG signature) ---------- */
.grid-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  max-width:var(--maxw); margin:0 auto; left:0; right:0;
  padding:0 var(--gut);
}
.grid-overlay .cols{
  height:100%;
  display:grid;
  grid-template-columns:repeat(12,1fr);
}
.grid-overlay .cols span{
  border-left:1px solid var(--line);
}
.grid-overlay .cols span:last-child{ border-right:1px solid var(--line); }
@media(max-width:880px){
  .grid-overlay .cols{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- layout primitives ---------- */
.wrap{
  position:relative; z-index:1;
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut);
}
.app{ position:relative; min-height:100vh; }

.rule{ border:0; border-top:1px solid var(--line-2); margin:0; }
.rule-ink{ border:0; border-top:1px solid var(--ink); margin:0; }

/* ---------- type scale ---------- */
.display{
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:0.92;
  font-size:clamp(48px, 9.5vw, 150px);
  text-transform:uppercase;
}
.h1{
  font-weight:700; letter-spacing:-0.03em; line-height:0.98;
  font-size:clamp(38px, 6vw, 88px);
  text-transform:uppercase;
}
.h2{
  font-weight:700; letter-spacing:-0.02em; line-height:1.02;
  font-size:clamp(28px,3.6vw,52px);
}
.h3{
  font-weight:700; letter-spacing:-0.01em; line-height:1.08;
  font-size:clamp(21px,2vw,30px);
}
.lead{
  font-size:clamp(19px,1.9vw,27px);
  line-height:1.42; letter-spacing:-0.01em;
  font-weight:400;
}
.body{ font-size:17px; line-height:1.6; color:var(--ink-2); }
.body p + p{ margin-top:1em; }

.mono{
  font-family:var(--mono);
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:500;
}
.mono-sm{
  font-family:var(--mono);
  font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
}
.num{ font-family:var(--mono); font-weight:500; letter-spacing:0.04em; }

.accent{ color:var(--accent); }
.muted{ color:var(--gray-2); }

/* section label: 01 / TÍTULO with hairline */
.seclabel{
  display:flex; align-items:baseline; gap:16px;
  padding-bottom:14px; margin-bottom:38px;
  border-bottom:1px solid var(--ink);
}
.seclabel .idx{ font-family:var(--mono); font-size:12px; letter-spacing:0.12em; color:var(--mk); font-weight:600; }
.seclabel .ttl{ font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:600; }
.seclabel .meta{ margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--gray-2); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
  padding:15px 24px; border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  transition:.25s cubic-bezier(.2,.7,.3,1);
}
.btn .arw{ transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.btn:hover{ background:var(--accent); border-color:var(--mk); color:var(--ink); }
.btn:hover .arw{ transform:translateX(5px); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* link with animated underline */
.tlink{
  display:inline-flex; align-items:center; gap:10px;
  background:none; border:0; padding:0 0 3px; color:inherit; cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
  position:relative;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .arw{ transition:transform .25s; }
.tlink:hover .arw{ transform:translateX(4px); }

/* ---------- image placeholder (striped) ---------- */
.ph{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--paper-3) 0 2px, transparent 2px 11px),
    var(--paper-2);
  border:1px solid var(--line-2);
  display:flex; align-items:flex-end;
}
.ph.dark{
  background:
    repeating-linear-gradient(135deg, #232320 0 2px, transparent 2px 11px),
    #1d1d1a;
  border-color:var(--line-dark);
  color:var(--gray);
}
.ph .ph-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gray-2); padding:9px 12px; background:var(--paper); border-top:1px solid var(--line-2); border-right:1px solid var(--line-2);
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.ph.dark .ph-tag{ background:#1d1d1a; color:var(--gray); border-color:var(--line-dark); }
.ph.fill{ width:100%; height:100%; }

/* ---- fixed photos (PH renders a plain <img>) ---- */
.ph-img{ opacity:0; transition:opacity .4s ease; }
.ph-img.ph-img-on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .ph-img{ transition:none; } }

/* ---- fillable image slots (drag & drop) ---- */
.ph.ph-slot{ background:none; }
.ph.ph-slot > image-slot{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ph.ph-slot::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(135deg, var(--line-2) 0 1px, transparent 1px 12px);
  opacity:.5;
}
.ph.dark.ph-slot::after{
  background:
    repeating-linear-gradient(135deg, #232320 0 1px, transparent 1px 12px);
}
.ph.ph-slot:has(image-slot[data-filled])::after{ display:none; }
/* Touch devices: photo slots are display-only — a finger resting on a
   photo must scroll the page, never start slot interactions. */
@media (hover:none) and (pointer:coarse){
  image-slot{ pointer-events:none; }
}
image-slot::part(frame){ background:transparent; }
image-slot::part(empty){ color:var(--ink-2); }
.ph.dark image-slot::part(empty){ color:rgba(244,242,234,.72); }

/* utility */
.eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--mk); font-weight:600; }
.tabular{ font-variant-numeric:tabular-nums; }

/* reveal on scroll — transform-only so content is NEVER hidden if the
   transition is frozen/unsupported (opacity stays 1 always) */
.reveal{ transform:translateY(16px); transition:transform .7s cubic-bezier(.2,.7,.3,1); will-change:transform; }
.reveal.in{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transform:none !important; }
  *{ scroll-behavior:auto !important; }
}