/*
Theme Name: The Human Forum
Theme URI: https://thehumanforum.org
Author: The Human Forum
Description: Bilingual (EN/ES) editorial one-page theme for an independent cultural platform — multidisciplinary video-background hero, framed brand logo, arts & humanities layout. Static, dependency-free, easy to edit.
Version: 1.1.1
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-human-forum
*/

/* ============================================================
   THE HUMAN FORUM — Editorial cultural platform
   Palette: warm ivory · deep ink · brand indigo · coral accent
   Type: Fraunces (display serif) + Inter (sans)
   ============================================================ */

:root{
  --paper:    #f4efe5;   /* brand cream */
  --paper-2:  #eae3d5;   /* warm sand */
  --card:     #faf7f1;
  --ink:      #14161c;   /* brand near-black */
  --ink-soft: #3a3d45;
  --ink-mute: #6f7168;
  --line:     rgba(20,22,28,0.16);
  --line-soft:rgba(20,22,28,0.09);
  --accent:   #3a4a86;   /* brand indigo */
  --accent-2: #c06a49;   /* terracotta */
  --periwinkle:#8593dc;  /* light indigo — for dark backgrounds */
  --navy:     #0e1c3a;   /* deep brand navy */
  --green:    #2f5f47;   /* brand green */
  --shadow:   0 24px 60px -32px rgba(20,22,28,0.4);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1220px;
  --gutter: clamp(20px, 5vw, 72px);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.65;
  font-size:clamp(16px,1.05vw,17px);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:400; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--accent); color:#fff; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,11vw,150px); }

/* ---------- shared type ---------- */
.display{
  font-family:var(--display); font-weight:400; line-height:1.06;
  letter-spacing:-0.015em; font-optical-sizing:auto;
  font-size:clamp(2rem,4.6vw,4rem);
}
.display-sm{
  font-family:var(--display); font-weight:400; line-height:1.15;
  letter-spacing:-0.01em; font-size:clamp(1.3rem,2.3vw,1.9rem);
}
.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
  margin:0;
}
.lede{ font-size:clamp(1.1rem,1.5vw,1.3rem); color:var(--ink-soft); line-height:1.55; }
.section-num{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 clamp(28px,4vw,48px); padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-weight:500; font-size:.92rem; letter-spacing:.01em;
  padding:.85em 1.5em; border-radius:100px; border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, border-color .3s;
  cursor:pointer;
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--accent); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--lg{ font-size:1.02rem; padding:1.05em 1.9em; }

/* ============================================================
   SPLASH
   ============================================================ */
.splash{
  position:fixed; inset:0; z-index:999; background:var(--paper);
  display:grid; place-items:center;
  animation:splashOut .8s ease 1.9s forwards;   /* CSS safety net */
}
.splash__mark{
  font-family:var(--display); font-size:clamp(1.6rem,5vw,3rem);
  letter-spacing:-0.02em; color:var(--ink);
  opacity:0; transform:translateY(10px);
  animation:splashIn .9s cubic-bezier(.2,.8,.2,1) .1s forwards;
}
.splash.is-hidden{ opacity:0; pointer-events:none; }
@keyframes splashIn{ to{ opacity:1; transform:none; } }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
  --head-ink:#ffffff;                 /* header text colour (light over hero) */
}
/* top darkening so header stays legible over any video frame */
.site-head::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,14,26,.55), rgba(10,14,26,0));
  transition:opacity .4s ease;
}
.site-head.is-scrolled{
  background:rgba(244,239,229,.88); backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line-soft);
  --head-ink:var(--ink);
}
.site-head.is-scrolled::before{ opacity:0; }
.head__inner{
  max-width:var(--wrap); margin-inline:auto; padding:14px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

/* ---- framed wordmark logo (CSS build of brand mark) ---- */
.brand{ display:inline-flex; align-items:center; gap:16px; color:var(--head-ink); transition:color .4s ease; }
/* Frame is OPEN on the left — the wordmark itself completes that side,
   matching the brand mark (type breaks out of the box). */
.logo__box{
  display:flex; flex-direction:column; justify-content:center;
  border:1.5px solid currentColor; border-left:0;
  padding:6px 12px 7px 8px; line-height:1;
}
.logo__box span{
  font-family:var(--sans); font-weight:600; font-size:.9rem; line-height:1.04;
  letter-spacing:.005em;
}
.logo__rule{ width:1px; height:34px; background:currentColor; opacity:.45; }
.logo__tag{
  max-width:210px; font-family:var(--sans); font-weight:500;
  font-size:.56rem; letter-spacing:.16em; line-height:1.55; text-transform:uppercase;
  opacity:.82;
}
@media (max-width:1080px){ .logo__rule, .logo__tag{ display:none; } }

.nav{ display:flex; gap:clamp(18px,2.5vw,40px); margin-left:auto; }
.nav__link{
  font-size:.9rem; font-weight:500; color:var(--head-ink); position:relative; padding:4px 0;
  transition:color .4s ease, opacity .25s; opacity:.9;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:currentColor;
  transition:width .35s cubic-bezier(.2,.8,.2,1);
}
.nav__link:hover{ opacity:1; }
.nav__link:hover::after{ width:100%; }

.lang{ display:flex; align-items:center; gap:8px; color:var(--head-ink); transition:color .4s ease; }
.lang__btn{
  font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.06em;
  background:none; border:none; cursor:pointer; color:currentColor; opacity:.55; padding:2px 2px;
  transition:opacity .25s;
}
.lang__btn.is-active{ opacity:1; }
.lang__btn:hover{ opacity:1; }
.lang__sep{ opacity:.4; }

.burger{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:clamp(96px,15vh,150px) var(--gutter) clamp(56px,8vw,96px); overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; background:#1b1c20; }
/* stacked, crossfading background videos */
.hero__vid{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  opacity:0; transition:opacity .7s ease; will-change:opacity;
}
.hero__vid.is-active{ opacity:1; }
/* image shown until first video paints / if video unsupported */
.hero__fallback{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%; z-index:-1;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,16,20,.32) 0%, rgba(15,16,20,0) 30%),
    linear-gradient(0deg, rgba(15,16,20,.78) 0%, rgba(15,16,20,.20) 46%, rgba(15,16,20,0) 72%);
}
.hero__body{ position:relative; z-index:2; max-width:min(920px,92%); color:#fff; }
.hero__eyebrow{ color:#fff; opacity:.85; margin-bottom:22px; }
.hero__title{
  font-family:var(--display); font-weight:400; line-height:1.04; letter-spacing:-.02em;
  font-size:clamp(2.2rem,5.6vw,5.4rem); text-wrap:balance;
}
.hero__lede{
  margin:clamp(20px,3vw,30px) 0 0; max-width:640px;
  font-size:clamp(1.02rem,1.4vw,1.22rem); line-height:1.55; color:rgba(255,255,255,.9);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,4vw,38px); }
.hero .btn--solid{ background:#fff; color:var(--ink); }
.hero .btn--solid:hover{ background:var(--accent); color:#fff; }
.hero .btn--ghost{ border-color:rgba(255,255,255,.5); color:#fff; }
.hero .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.hero__scroll{
  position:absolute; right:var(--gutter); bottom:clamp(56px,8vw,96px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:rgba(255,255,255,.75); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero__scrollline{ width:1px; height:52px; background:rgba(255,255,255,.55); animation:scrollPulse 2.4s ease-in-out infinite; transform-origin:top; }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.4); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }
@media (max-width:640px){ .hero__scroll{ display:none; } }

/* ============================================================
   INTRO
   ============================================================ */
.intro{ background:var(--paper); }
.intro__grid{ display:grid; grid-template-columns:1.35fr .9fr; gap:clamp(32px,6vw,80px); align-items:start; }
.intro__head{ font-size:clamp(1.7rem,3.6vw,3rem); text-wrap:balance; }
.intro__col p + p{ margin-top:1.1em; }
.intro__col .lede{ margin-top:0; }
@media (max-width:860px){ .intro__grid{ grid-template-columns:1fr; } }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ background:var(--paper-2); }
.about__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,6vw,72px); align-items:start; }
.about__text p{ color:var(--ink-soft); max-width:60ch; }
.about__text h2{ margin-bottom:.6em; }
.about__text p + p{ margin-top:1.05em; }
.about__figure{ margin:0; position:sticky; top:100px; }
.about__figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px; box-shadow:var(--shadow); }
.about__figure figcaption{
  margin-top:14px; font-family:var(--display); font-style:italic; color:var(--ink-mute); font-size:1.05rem;
}
@media (max-width:860px){
  .about__grid{ grid-template-columns:1fr; }
  .about__figure{ position:static; order:-1; }
  .about__figure img{ aspect-ratio:16/11; }
}

/* mission / vision */
.mv{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px);
  margin-top:clamp(56px,8vw,100px); padding-top:clamp(40px,5vw,60px);
  border-top:1px solid var(--line);
}
.mv__item h3{ margin-bottom:16px; }
.mv__item .display-sm{ color:var(--ink); max-width:34ch; }
@media (max-width:700px){ .mv{ grid-template-columns:1fr; gap:36px; } }

/* values */
.values{ margin-top:clamp(48px,7vw,84px); display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,5vw,60px); align-items:center; }
.values__label{ white-space:nowrap; }
.values__list{ display:flex; flex-wrap:wrap; gap:12px 14px; }
.values__list li{
  font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.4rem); color:var(--ink);
  padding:.35em 1em; border:1px solid var(--line); border-radius:100px;
  transition:background .3s, color .3s, border-color .3s;
}
.values__list li:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
@media (max-width:640px){ .values{ grid-template-columns:1fr; gap:20px; } }

/* ============================================================
   MOTION (video band)
   ============================================================ */
.motion{ position:relative; min-height:min(78vh,640px); display:grid; place-items:center; overflow:hidden; background:var(--ink); }
.motion__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.motion__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,16,20,.55), rgba(15,16,20,.72)); }
.motion__quote{ position:relative; z-index:2; margin:0; max-width:min(900px,88%); text-align:center; padding:clamp(48px,9vw,90px) 0; }
.motion__quote p{ color:#fff; font-size:clamp(1.5rem,3.8vw,3rem); line-height:1.15; text-wrap:balance; }

/* ============================================================
   PROJECTS
   ============================================================ */
.projects{ background:var(--paper); }
.projects__head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:end; margin-bottom:clamp(40px,6vw,72px); }
.projects__intro{ color:var(--ink-soft); max-width:52ch; }
@media (max-width:860px){ .projects__head{ grid-template-columns:1fr; align-items:start; } }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:6px; overflow:hidden; }
.card{
  background:var(--card); padding:clamp(26px,3vw,40px); min-height:260px;
  display:flex; flex-direction:column; position:relative;
  transition:background .4s ease, transform .4s ease;
}
.card::before{
  content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--accent);
  transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.card:hover{ background:var(--paper-2); }
.card:hover::before{ width:100%; }
.card__no{ font-family:var(--sans); font-size:.75rem; letter-spacing:.15em; color:var(--accent-2); font-weight:600; }
.card__title{ font-family:var(--display); font-size:clamp(1.3rem,1.9vw,1.7rem); line-height:1.1; margin:14px 0 8px; letter-spacing:-.01em; }
.card__tag{ font-weight:500; color:var(--ink); margin:0 0 12px; font-size:.98rem; }
.card__desc{ color:var(--ink-mute); font-size:.94rem; line-height:1.55; margin:0; }
.card--wide{ grid-column:span 3; min-height:auto; }
.card--wide .card__desc{ max-width:70ch; }
@media (max-width:860px){ .cards{ grid-template-columns:1fr 1fr; } .card--wide{ grid-column:span 2; } }
@media (max-width:560px){ .cards{ grid-template-columns:1fr; } .card--wide{ grid-column:span 1; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--navy); color:var(--paper); text-align:center; position:relative; }
.contact__inner{ max-width:820px; }
.contact .eyebrow{ color:var(--periwinkle); }
.contact__head{ color:#fff; margin:18px 0 20px; font-size:clamp(1.9rem,4.4vw,3.6rem); text-wrap:balance; }
.contact__lede{ color:rgba(255,255,255,.72); font-size:clamp(1.05rem,1.4vw,1.2rem); margin:0 auto 34px; max-width:52ch; }
.contact .btn--solid{ background:var(--paper); color:var(--navy); }
.contact .btn--solid:hover{ background:var(--accent-2); color:#fff; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--paper-2); padding-top:clamp(56px,7vw,84px); }
.foot__grid{ display:grid; grid-template-columns:1.1fr 1.4fr auto; gap:clamp(28px,5vw,64px); padding-bottom:clamp(40px,5vw,60px); border-bottom:1px solid var(--line); }
.foot__logo{ display:inline-flex; color:var(--ink); }
.foot__logo .logo__box{ padding:9px 13px 10px; }
.foot__logo .logo__box span{ font-size:1rem; }
.foot__meta{ color:var(--ink-mute); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin:14px 0 0; }
.foot__blurb{ color:var(--ink-soft); max-width:46ch; margin:0; align-self:center; }
.foot__nav{ display:flex; flex-direction:column; gap:12px; }
.foot__nav a{ color:var(--ink-soft); font-size:.95rem; position:relative; width:fit-content; }
.foot__nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--accent); transition:width .3s; }
.foot__nav a:hover{ color:var(--ink); }
.foot__nav a:hover::after{ width:100%; }
.foot__base{ display:flex; justify-content:space-between; gap:16px; padding-block:24px; color:var(--ink-mute); font-size:.82rem; }
@media (max-width:820px){ .foot__grid{ grid-template-columns:1fr; } .foot__base{ flex-direction:column; gap:6px; } }

/* ============================================================
   REVEAL (progressive enhancement — visible without JS)
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */
@media (max-width:760px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,340px); background:var(--paper);
    flex-direction:column; justify-content:center; gap:28px; padding:0 40px;
    transform:translateX(100%); transition:transform .45s cubic-bezier(.2,.8,.2,1);
    box-shadow:var(--shadow); z-index:120;
  }
  .nav.is-open{ transform:none; }
  .nav__link{ font-size:1.3rem; font-family:var(--display); }
  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; background:none; border:none; cursor:pointer; z-index:130; padding:0;
    color:var(--head-ink); transition:color .4s ease;
  }
  .burger.is-open{ color:var(--ink); }   /* menu panel is light */
  .burger span, .burger::before, .burger::after{
    content:""; display:block; width:24px; height:2px; background:currentColor; margin-inline:auto;
    transition:transform .35s, opacity .3s;
  }
  .burger.is-open::before{ transform:translateY(7px) rotate(45deg); }
  .burger.is-open span{ opacity:0; }
  .burger.is-open::after{ transform:translateY(-7px) rotate(-45deg); }
  .lang{ margin-left:auto; }
}