/*
Theme Name: Wild Patterns V2
Theme URI: https://wildpatterns.art
Author: Wild Patterns
Description: Dreisprachiges, museales WordPress-Theme für Wild Patterns.
Version: 2.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: wild-patterns
License: GNU General Public License v2 or later
*/

:root {
  --paper:#f5f1e8;
  --white:#fbfaf6;
  --ink:#20211d;
  --moss:#686b57;
  --clay:#a68d76;
  --line:rgba(32,33,29,.14);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:Inter, Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);line-height:1.6}
a{color:inherit}
img{max-width:100%;height:auto}
.container{width:min(1240px,calc(100% - 48px));margin:auto}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(251,250,246,.86);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)
}
.header-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{font-size:.8rem;letter-spacing:.34em;text-decoration:none;font-weight:600}
.site-nav{display:flex;align-items:center;gap:28px;text-transform:uppercase;font-size:.7rem;letter-spacing:.16em}
.site-nav a{text-decoration:none;opacity:.82}
.site-nav a:hover{opacity:1}
.lang-switch{display:flex;gap:7px}
.lang-switch a{border:1px solid var(--line);padding:4px 7px;border-radius:999px;font-size:.62rem}
.menu-toggle{display:none;border:0;background:none;font-size:1.3rem}

.hero{
  min-height:100vh;padding-top:82px;display:grid;grid-template-columns:1.05fr .95fr;
  align-items:center;gap:40px;overflow:hidden
}
.hero-copy{padding:70px 0}
.eyebrow{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--moss)}
.hero h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(4.6rem,8.8vw,9.5rem);
  line-height:.82;letter-spacing:-.035em;margin:.22em 0 .24em
}
.hero .lead{max-width:620px;font-size:clamp(1.12rem,1.6vw,1.38rem);color:#4f5147}
.text-link{display:inline-flex;align-items:center;gap:10px;margin-top:30px;text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}
.text-link::after{content:"→";transition:transform .25s}
.text-link:hover::after{transform:translateX(6px)}
.hero-art{position:relative;min-height:760px;display:grid;place-items:center}
.hero-art::before{
  content:"";position:absolute;width:70%;height:78%;border-radius:50%;
  background:radial-gradient(circle,rgba(166,141,118,.28),rgba(166,141,118,.05) 52%,transparent 72%);
  filter:blur(10px)
}
.hero-art img{
  position:relative;width:min(560px,94%);filter:drop-shadow(0 36px 42px rgba(32,33,29,.15));
  animation:float 8s ease-in-out infinite
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--paper)}
.marquee-track{display:flex;gap:70px;white-space:nowrap;padding:14px 0;animation:marquee 25s linear infinite;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--moss)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section{padding:120px 0;border-top:1px solid var(--line)}
.section.alt{background:var(--paper)}
.kicker{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--moss)}
.section h2{font-family:var(--serif);font-weight:400;font-size:clamp(3.2rem,6.7vw,7rem);line-height:.92;letter-spacing:-.025em;margin:.22em 0 .5em}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}
.large-copy{font-family:var(--serif);font-size:clamp(2rem,3.2vw,3.6rem);line-height:1.12}
.body-copy{max-width:680px;color:#505146}

.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.process-card{min-height:330px;padding:30px;border:1px solid var(--line);background:var(--white);display:flex;flex-direction:column;justify-content:space-between}
.process-card .num{font-family:var(--serif);font-size:5rem;color:var(--clay);line-height:1}
.process-card h3{font-family:var(--serif);font-size:2.2rem;font-weight:400;margin:.3em 0}

.heartbeat{
  display:grid;grid-template-columns:1fr 1fr;min-height:850px;background:var(--moss);color:var(--white)
}
.heartbeat-visual{display:grid;place-items:center;background:var(--paper);padding:50px;overflow:hidden}
.heartbeat-visual img{max-height:760px;width:auto;filter:drop-shadow(0 34px 34px rgba(32,33,29,.12))}
.heartbeat-copy{padding:clamp(58px,8vw,120px);display:flex;flex-direction:column;justify-content:center}
.heartbeat-copy h2{font-family:var(--serif);font-size:clamp(3.8rem,6.3vw,7rem);font-weight:400;line-height:.88;margin:.25em 0}
.heartbeat-copy p{font-size:1.08rem;max-width:580px;color:rgba(255,255,255,.86)}
.data-list{margin-top:34px;display:grid}
.data-list div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.22)}

.works{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px}
.work{background:var(--white);padding:42px;min-height:320px;display:flex;flex-direction:column;justify-content:space-between}
.work h3{font-family:var(--serif);font-size:3rem;font-weight:400;margin:.1em 0}
.work p{max-width:480px;color:#55574d}
.work span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--moss)}

.quote{font-family:var(--serif);font-size:clamp(3rem,6vw,7rem);line-height:.95;letter-spacing:-.025em;max-width:1120px}

.site-footer{background:var(--ink);color:var(--white);padding:80px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}
.footer-brand{letter-spacing:.3em}
.footer-bottom{margin-top:60px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:.72rem;opacity:.65}

.page-hero{padding:170px 0 80px}
.entry-content{width:min(820px,calc(100% - 48px));margin:auto;font-size:1.08rem}
.entry-content h2{font-family:var(--serif);font-size:3rem;font-weight:400}

@media(max-width:920px){
  .menu-toggle{display:block}
  .site-nav{display:none;position:absolute;top:82px;left:0;right:0;background:var(--white);padding:26px;flex-direction:column;border-bottom:1px solid var(--line)}
  .site-nav.open{display:flex}
  .hero,.split,.heartbeat,.footer-grid{grid-template-columns:1fr}
  .hero{padding-top:110px}
  .hero-art{min-height:520px}
  .process-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .container{width:min(100% - 24px,1240px)}
  .header-inner{height:68px}
  .site-nav{top:68px}
  .hero h1{font-size:4.1rem}
  .hero-art{min-height:420px}
  .section{padding:82px 0}
  .works{grid-template-columns:1fr}
  .heartbeat-copy{padding:55px 26px}
}