/*
Theme Name: Urban Soil Tierra Urbana
Theme URI: https://ustula.org
Author: Urban Soil / Tierra Urbana
Description: Custom soil-horizon themed site for the Urban Soil / Tierra Urbana housing cooperative. Sections descend through soil layers (O/A/B/C horizons) with a growing root motif and an EN/ES language toggle.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ustu
*/

  :root{
    --soil-void:#1c1712;
    --humus:#3a2c1f;
    --clay:#7a5b3d;
    --loam:#b0895a;
    --sprout:#7c8a52;
    --sprout-bright:#9fae6c;
    --limewash:#f4efe3;
    --gold-root:#d1a94a;
    --ink:#241c14;

    --display: "Fraunces", serif;
    --body: "Inter", sans-serif;
    --mono: "Space Mono", monospace;
  }

  *{box-sizing:border-box; margin:0; padding:0;}

  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    font-family:var(--body);
    background:var(--limewash);
    color:var(--ink);
    line-height:1.5;
    overflow-x:hidden;
  }

  a{color:inherit;}

  .eyebrow{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.75;
  }

  /* ---------- root/thread signature element ---------- */
  #root-thread{
    position:fixed;
    left:0;
    top:0;
    height:100vh;
    width:64px;
    z-index:5;
    pointer-events:none;
    display:flex;
    align-items:center;
  }
  #root-thread svg{width:100%; height:100%;}
  #root-path{
    fill:none;
    stroke:var(--gold-root);
    stroke-width:2;
    stroke-linecap:round;
    stroke-dasharray:2000;
    stroke-dashoffset:2000;
    transition:stroke-dashoffset .1s linear, stroke .4s ease;
  }
  @media (max-width:820px){
    #root-thread{width:28px;}
  }

  /* ---------- nav ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:20;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.1rem 1.75rem 1.1rem 4.5rem;
    background:linear-gradient(to bottom, rgba(28,23,18,.88), rgba(28,23,18,0));
    color:var(--limewash);
  }
  @media (max-width:820px){ header{ padding-left:2.4rem; } }

  .wordmark{
    font-family:var(--display);
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:.02em;
  }
  .wordmark span{color:var(--sprout-bright);}

  nav.controls{
    display:flex;
    align-items:center;
    gap:1.4rem;
  }
  .lang-toggle{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    display:flex;
    gap:.4rem;
    border:1px solid rgba(244,239,227,.35);
    border-radius:999px;
    padding:.3rem .3rem;
  }
  .lang-toggle button{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    background:none;
    border:none;
    color:var(--limewash);
    opacity:.55;
    cursor:pointer;
    padding:.2rem .55rem;
    border-radius:999px;
  }
  .lang-toggle button.active{
    opacity:1;
    background:var(--sprout);
    color:var(--soil-void);
  }
  .visit-link{
    font-size:.85rem;
    text-decoration:none;
    border-bottom:1px solid var(--gold-root);
    padding-bottom:2px;
  }
  .donate-btn{
    margin-top:0;
    padding:.55rem 1.15rem;
    box-shadow:0 2px 10px rgba(0,0,0,.25);
  }
  @media (max-width:560px){
    .visit-link{ display:none; }
  }

  /* ---------- section shell ---------- */
  section{
    position:relative;
    padding:7.5rem 6vw 6rem 4.5vw;
    padding-left:calc(4.5vw + 40px);
  }
  @media (max-width:820px){
    section{ padding:5.5rem 6vw 4rem 6vw; padding-left:calc(6vw + 22px); }
  }

  .layer-tag{
    display:flex;
    align-items:center;
    gap:.7rem;
    margin-bottom:2.2rem;
  }
  .layer-tag .code{
    font-family:var(--mono);
    font-size:.95rem;
    font-weight:700;
    border:1px solid currentColor;
    border-radius:50%;
    width:2.1rem; height:2.1rem;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .layer-tag .label{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.8;
  }

  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ---------- hero / O horizon ---------- */
  #hero{
    min-height:100vh;
    background:
      radial-gradient(ellipse at 20% -10%, rgba(159,174,108,.22), transparent 55%),
      linear-gradient(rgba(20,16,12,.82), rgba(20,16,12,.93)),
      url('images/hero-building.jpg') center 30%/cover no-repeat,
      var(--soil-void);
    color:var(--limewash);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  #hero .layer-tag{ color:var(--sprout-bright); }
  #hero h1{
    font-family:var(--display);
    font-weight:900;
    font-size:clamp(2.6rem, 6.4vw, 5.4rem);
    line-height:1.02;
    max-width:15ch;
    letter-spacing:-.01em;
  }
  #hero h1 em{
    font-style:italic;
    font-weight:500;
    color:var(--gold-root);
  }
  #hero .sub{
    margin-top:1.8rem;
    max-width:46ch;
    font-size:1.08rem;
    color:rgba(244,239,227,.82);
  }
  .hero-stats{
    display:flex;
    gap:2.6rem;
    margin-top:3.2rem;
    flex-wrap:wrap;
  }
  .hero-stats div{ }
  .hero-stats .num{
    font-family:var(--display);
    font-size:1.9rem;
    font-weight:700;
    color:var(--sprout-bright);
  }
  .hero-stats .cap{
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    opacity:.65;
  }
  .scroll-cue{
    position:absolute;
    bottom:2.4rem; left:calc(4.5vw + 40px);
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(244,239,227,.55);
    display:flex; align-items:center; gap:.6rem;
  }
  .scroll-cue::after{
    content:"";
    width:1px; height:26px;
    background:linear-gradient(var(--gold-root), transparent);
  }

  /* ---------- A horizon: topsoil / who we are ---------- */
  #topsoil{
    background:var(--humus);
    color:var(--limewash);
  }
  #topsoil .layer-tag{ color:var(--loam); }

  .subhead{
    font-family:var(--display);
    font-weight:600;
    font-size:1.5rem;
    margin-bottom:.7rem;
  }
  .sister-orgs{
    margin-top:3.5rem;
    padding-top:2.5rem;
    border-top:1px solid rgba(244,239,227,.15);
  }
  .value-block{
    margin-top:3.5rem;
    padding-top:2.5rem;
    border-top:1px solid rgba(244,239,227,.15);
  }
  .values-list{
    display:flex;
    flex-direction:column;
    max-width:46rem;
    margin-top:1.5rem;
  }
  .value-row{
    display:flex;
    gap:1.3rem;
    align-items:baseline;
    padding:1.05rem 0;
    border-top:1px solid rgba(244,239,227,.15);
  }
  .value-row:last-child{ border-bottom:1px solid rgba(244,239,227,.15); }
  .value-num{
    font-family:var(--mono);
    font-size:.75rem;
    color:var(--gold-root);
    flex-shrink:0;
    width:2rem;
  }
  .value-row p{
    font-size:.98rem;
    color:rgba(244,239,227,.85);
  }

  .section-head{
    font-family:var(--display);
    font-weight:700;
    font-size:clamp(1.8rem, 3.4vw, 2.7rem);
    max-width:20ch;
    margin-bottom:1.6rem;
    letter-spacing:-.01em;
  }
  .section-body{
    max-width:58ch;
    font-size:1.02rem;
    color:rgba(244,239,227,.85);
  }
  #topsoil .section-body{ margin-bottom:2.5rem; }

  .community-photo{
    margin:2.4rem 0 2.8rem;
    border-radius:8px;
    overflow:hidden;
    max-width:26rem;
  }
  .community-photo img{
    width:100%;
    display:block;
    max-height:280px;
    object-fit:cover;
    object-position:center 30%;
  }
  .photo-caption{
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.6;
    margin-top:.7rem;
  }
  .gallery-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.4rem;
    margin-top:2.8rem;
  }
  @media (max-width:820px){ .gallery-row{ grid-template-columns:1fr; } }
  .gallery-row figure{ margin:0; }
  .gallery-row img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:6px;
    display:block;
  }

  .who-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1.5rem;
    max-width:64rem;
  }
  @media (max-width:760px){ .who-grid{ grid-template-columns:1fr; } }
  .who-card{
    border:1px solid rgba(244,239,227,.18);
    border-radius:4px;
    padding:1.5rem;
    background:rgba(244,239,227,.03);
  }
  .who-card .k{
    font-family:var(--display);
    font-style:italic;
    font-weight:500;
    font-size:1.25rem;
    color:var(--sprout-bright);
    margin-bottom:.5rem;
  }
  .who-card p{ font-size:.92rem; color:rgba(244,239,227,.78); }

  /* ---------- B horizon: subsoil / mission ---------- */
  #subsoil{
    background:var(--clay);
    color:var(--soil-void);
  }
  #subsoil .layer-tag{ color:var(--soil-void); opacity:.85; }
  #subsoil .section-body{ color:rgba(28,23,18,.82); }

  .mission-row{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:3rem;
    margin-top:2.6rem;
    align-items:start;
  }
  @media (max-width:820px){ .mission-row{ grid-template-columns:1fr; } }

  .grounds-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:1rem;
  }
  .grounds-list li{
    display:flex;
    gap:.9rem;
    align-items:baseline;
    font-size:.98rem;
  }
  .grounds-list li::before{
    content:"·";
    font-family:var(--display);
    font-weight:900;
    font-size:1.4rem;
    color:var(--soil-void);
    line-height:0;
  }

  .quote-block{
    font-family:var(--display);
    font-style:italic;
    font-weight:500;
    font-size:1.35rem;
    line-height:1.4;
    border-left:2px solid var(--soil-void);
    padding-left:1.4rem;
  }

  /* ---------- C horizon: bedrock / get involved ---------- */
  #bedrock{
    background:var(--soil-void);
    color:var(--limewash);
  }
  #bedrock .layer-tag{ color:var(--gold-root); }

  .involve-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.6rem;
    margin-top:2.6rem;
  }
  @media (max-width:900px){ .involve-grid{ grid-template-columns:1fr; } }

  .involve-card{
    padding:1.8rem;
    border-radius:6px;
    background:rgba(244,239,227,.04);
    border:1px solid rgba(244,239,227,.14);
    display:flex;
    flex-direction:column;
    gap:.9rem;
  }
  .involve-card .tag{
    font-family:var(--mono);
    font-size:.66rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--sprout-bright);
  }
  .involve-card h3{
    font-family:var(--display);
    font-weight:600;
    font-size:1.3rem;
  }
  .involve-card p{
    font-size:.92rem;
    color:rgba(244,239,227,.75);
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    align-self:flex-start;
    margin-top:.4rem;
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    text-decoration:none;
    background:var(--sprout);
    color:var(--soil-void);
    padding:.65rem 1.1rem;
    border-radius:999px;
    transition:background .25s ease, transform .25s ease;
  }
  .btn:hover{ background:var(--sprout-bright); transform:translateY(-1px); }
  .btn.ghost{
    background:none;
    border:1px solid rgba(244,239,227,.4);
    color:var(--limewash);
  }
  .btn.ghost:hover{ border-color:var(--gold-root); color:var(--gold-root); background:none;}

  /* ---------- footer ---------- */
  footer{
    background:var(--soil-void);
    color:rgba(244,239,227,.7);
    padding:3.5rem 6vw 3rem 4.5vw;
    padding-left:calc(4.5vw + 40px);
    border-top:1px solid rgba(244,239,227,.12);
  }
  @media (max-width:820px){ footer{ padding-left:calc(6vw + 22px); } }
  .footer-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:2.5rem;
  }
  @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:2rem; } }
  .footer-grid h4{
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gold-root);
    margin-bottom:.9rem;
  }
  .footer-grid p, .footer-grid li{ font-size:.88rem; line-height:1.7; }
  .footer-grid ul{ list-style:none; }
  .newsletter-embed{
    position:relative;
    width:100%;
    max-width:26rem;
    height:220px;
    margin-top:.75rem;
    border-radius:6px;
    overflow:hidden;
    background:rgba(244,239,227,.03);
  }

  .footer-bottom{
    margin-top:3rem;
    padding-top:1.5rem;
    border-top:1px solid rgba(244,239,227,.1);
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.08em;
    opacity:.55;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.6rem;
  }



/* ---- blog & single post templates ---- */
  /* blog-specific additions */
  #blog-hero{
    min-height:46vh;
    background:
      radial-gradient(ellipse at 20% -10%, rgba(159,174,108,.18), transparent 55%),
      var(--soil-void);
    color:var(--limewash);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  #blog-hero .layer-tag{ color:var(--sprout-bright); }
  #blog-hero h1{
    font-family:var(--display);
    font-weight:900;
    font-size:clamp(2.2rem, 5vw, 3.6rem);
    max-width:16ch;
    letter-spacing:-.01em;
  }
  #blog-hero .sub{
    margin-top:1.2rem;
    max-width:48ch;
    font-size:1.02rem;
    color:rgba(244,239,227,.8);
  }

  #posts{ background:var(--humus); color:var(--limewash); padding-top:5rem; }
  #posts .layer-tag{ color:var(--loam); }

  .post-list{
    display:flex;
    flex-direction:column;
    max-width:52rem;
  }
  .post-card{
    display:grid;
    grid-template-columns:9rem 1fr;
    gap:2rem;
    padding:2.1rem 0;
    border-top:1px solid rgba(244,239,227,.15);
    text-decoration:none;
    color:inherit;
  }
  .post-list .post-card:last-child{ border-bottom:1px solid rgba(244,239,227,.15); }
  @media (max-width:620px){
    .post-card{ grid-template-columns:1fr; gap:.6rem; }
  }
  .post-date{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.6;
    padding-top:.3rem;
  }
  .post-card h3{
    font-family:var(--display);
    font-weight:600;
    font-size:1.4rem;
    margin-bottom:.5rem;
  }
  .post-card p{
    font-size:.95rem;
    color:rgba(244,239,227,.75);
    max-width:52ch;
  }
  .post-card .read-more{
    display:inline-block;
    margin-top:.7rem;
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--sprout-bright);
  }

  .empty-note{
    margin-top:2.5rem;
    padding:1.6rem;
    border:1px dashed rgba(244,239,227,.3);
    border-radius:6px;
    max-width:44rem;
    font-size:.9rem;
    color:rgba(244,239,227,.7);
  }
  .empty-note strong{ color:var(--gold-root); }