/*
Theme Name: Saperedosio
Theme URI: https://saperedosio.nl
Description: Thema voor Saperedosio — een blog over wat er gebeurt in eten, brein en beleving. Vier pijlers: Basis, Brein, Beleving en Bord.
Version: 1.0
Author: Saperedosio
Text Domain: saperedosio
*/

/* === DESIGN TOKENS === */
:root {
  --cream:    #F7F3EC;
  --paper:    #FDFAF5;
  --ink:      #1E1B17;
  --muted:    #7A7168;
  --rule:     #E4DDD0;
  --basis:    #B8893A;
  --brein:    #5C7E6E;
  --beleving: #9E6475;
  --bord:     #C06B45;
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* === GRAIN TEXTURE === */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.025;
}

/* === LAYOUT === */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
}

/* === TYPOGRAPHY === */
.serif {
  font-family: 'Cormorant Garamond', serif;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  line-height: 1.15;
}

/* === PILL / CATEGORY BADGE === */
.pill {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
.pill.basis,    .cat-basis    { background: var(--basis); }
.pill.brein,    .cat-brein    { background: var(--brein); }
.pill.beleving, .cat-beleving { background: var(--beleving); }
.pill.bord,     .cat-bord     { background: var(--bord); }

/* category auto-detect via body class */
.category-basis    .pill.current-cat { background: var(--basis); }
.category-brein    .pill.current-cat { background: var(--brein); }
.category-beleving .pill.current-cat { background: var(--beleving); }
.category-bord     .pill.current-cat { background: var(--bord); }

/* === SECTION RULE === */
.section-rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.6rem;
  margin-bottom: 3rem;
}
.section-rule-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.view-all {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.view-all:hover { color: var(--ink); }

/* === NAVIGATION === */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,243,236,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  height: 72px;
  display: flex; align-items: center;
}
.site-header .wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-branding a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 600;
  text-decoration: none; color: var(--ink);
}
.site-branding a em { font-style: italic; font-weight: 400; }

/* Nav list */
.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
}

/* Spotlight: dim non-hovered items */
.nav-list:has(.nav-item:hover) .nav-item:not(:hover) { opacity: 0.35; }

/* Nav item */
.nav-item {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .3s;
}
.nav-item + .nav-item::before {
  content: '';
  display: block;
  width: 1px; height: 22px;
  background: var(--rule);
  flex-shrink: 0;
}
/* No divider before Over — uses .nav-sep instead */
.nav-sep + .nav-item.over::before { display: none; }

/* Nav link */
.nav-link {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 1.8rem; height: 72px;
  text-decoration: none;
  font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.11em; text-transform: uppercase;
  z-index: 2;
}

/* Label */
.nav-label {
  position: relative; z-index: 3;
  color: #9A9087;
  font-weight: 400;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), color .25s, font-weight .1s;
}
.nav-item:hover .nav-label {
  transform: scale(1.18);
  font-weight: 800;
}

/* Pillar colours on hover */
.nav-item.basis:hover    .nav-label { color: var(--basis); }
.nav-item.brein:hover    .nav-label { color: var(--brein); }
.nav-item.beleving:hover .nav-label { color: var(--beleving); }
.nav-item.bord:hover     .nav-label { color: var(--bord); }

/* Icon — sits behind label, shrinks on hover */
.nav-icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(1);
  pointer-events: none; z-index: 1; overflow: visible;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .22s;
}
.nav-item:hover .nav-icon {
  transform: translate(-50%,-50%) scale(0.8);
  opacity: .45;
}

/* Separator before Over */
.nav-sep {
  width: 1px; height: 22px;
  background: #D4CEC6;
  flex-shrink: 0;
  margin: 0 0.4rem;
}

/* Over — no icon, no scale, underline on hover */
.nav-item.over .nav-link { padding: 0 1.4rem; }
.nav-item.over .nav-label {
  font-weight: 400;
  color: #9A9087;
  font-size: 0.78rem;
}
.nav-item.over .nav-label::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.nav-item.over:hover .nav-label {
  transform: none;
  font-weight: 400;
  color: var(--ink);
}
.nav-item.over:hover .nav-label::after { transform: scaleX(1); }

/* === BASIS icon === */
.basis-nucleus { fill: var(--basis); opacity: .22; transition: opacity .3s; }
.basis-ring1 {
  fill: none; stroke: var(--basis); stroke-width: 1; opacity: .17;
  transform-origin: 34px 34px;
  animation: navSpin1 9s linear infinite; transition: opacity .3s;
}
.basis-ring2 {
  fill: none; stroke: var(--basis); stroke-width: .7; opacity: .12;
  transform-origin: 34px 34px;
  animation: navSpin2 14s linear infinite; transition: opacity .3s;
}
.basis-dot1 { fill: var(--basis); opacity: .22; transition: opacity .3s; }
.basis-dot2 { fill: var(--basis); opacity: .14; transition: opacity .3s; }
.nav-item.basis:hover .basis-nucleus { opacity: .75; }
.nav-item.basis:hover .basis-ring1   { opacity: 1;   animation-duration: 1.4s; }
.nav-item.basis:hover .basis-ring2   { opacity: .85; animation-duration: 2s; }
.nav-item.basis:hover .basis-dot1    { opacity: 1; }
.nav-item.basis:hover .basis-dot2    { opacity: .9; }
@keyframes navSpin1 { to { transform: rotate(360deg); } }
@keyframes navSpin2 { to { transform: rotate(-360deg); } }

/* === BREIN icon — draw on hover === */
.bp {
  fill: none; stroke: var(--brein);
  stroke-linecap: round; stroke-linejoin: round;
  stroke-width: 2; opacity: .22;
}
.nav-item.brein:hover .bp {
  stroke-dasharray: 400;
  animation: navDrawIn .9s ease-out forwards;
}
.nav-item.brein:hover .bp0  { animation-delay: .00s; }
.nav-item.brein:hover .bp1  { animation-delay: .03s; }
.nav-item.brein:hover .bp2  { animation-delay: .00s; stroke-width: 2.2; }
.nav-item.brein:hover .bp3  { animation-delay: .05s; }
.nav-item.brein:hover .bp4  { animation-delay: .04s; }
.nav-item.brein:hover .bp5  { animation-delay: .07s; }
.nav-item.brein:hover .bp6  { animation-delay: .08s; }
.nav-item.brein:hover .bp7  { animation-delay: .06s; }
.nav-item.brein:hover .bp8  { animation-delay: .09s; }
.nav-item.brein:hover .bp9  { animation-delay: .05s; }
.nav-item.brein:hover .bp10 { animation-delay: .10s; }
.nav-item.brein:hover .bp11 { animation-delay: .11s; }
.nav-item.brein:hover .bp12 { animation-delay: .12s; }
.nav-item.brein:hover .bp13 { animation-delay: .08s; }
.nav-item.brein:hover .bp14 { animation-delay: .06s; }
.nav-item.brein:hover .bp15 { animation-delay: .09s; }
.nav-item.brein:hover .bp16 { animation-delay: .07s; }
@keyframes navDrawIn {
  from { stroke-dashoffset: 400; opacity: .1; }
  to   { stroke-dashoffset: 0;   opacity: .8; }
}

/* === BELEVING icon === */
.beleving-star {
  fill: var(--beleving); opacity: .16; transform-origin: 34px 34px;
  animation: navStarBreath 3s ease-in-out infinite;
  transition: opacity .2s, transform .2s;
}
@keyframes navStarBreath {
  0%,100% { transform: scale(1) rotate(0deg); opacity: .16; }
  50%     { transform: scale(1.08) rotate(10deg); opacity: .22; }
}
.beleving-spark {
  fill: var(--beleving); opacity: 0; transform-origin: 34px 34px;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
.nav-item.beleving:hover .beleving-star  { opacity: 0; animation: none; transform: scale(0); }
.nav-item.beleving:hover .beleving-spark { opacity: 1; }
.nav-item.beleving:hover .bk1 { transform: translate(-13px,-15px) scale(1.2); }
.nav-item.beleving:hover .bk2 { transform: translate( 14px,-12px) scale(1.1); }
.nav-item.beleving:hover .bk3 { transform: translate( 15px, 12px) scale(1.3); }
.nav-item.beleving:hover .bk4 { transform: translate(-13px, 14px) scale(1.1); }
.nav-item.beleving:hover .bk5 { transform: translate(   0, -18px) scale(1.0); }
.nav-item.beleving:hover .bk6 { transform: translate( 18px,    0) scale(1.1); }
.nav-item.beleving:hover .bk7 { transform: translate(-17px,    0) scale(1.2); }
.nav-item.beleving:hover .bk8 { transform: translate(   0,  17px) scale(1.0); }

/* === BORD icon === */
.bord-plate-outer { fill: none; stroke: var(--bord); stroke-width: 1;   opacity: .22; transition: opacity .3s; }
.bord-plate-inner { fill: none; stroke: var(--bord); stroke-width: .7;  opacity: .16; transition: opacity .3s; }
.bord-fork        { fill: none; stroke: var(--bord); stroke-linecap: round; opacity: .22; transition: opacity .3s; }
.bord-knife       { fill: none; stroke: var(--bord); stroke-linecap: round; opacity: .22; transition: opacity .3s; }
.nav-item.bord:hover .bord-plate-outer { opacity: .9; }
.nav-item.bord:hover .bord-plate-inner { opacity: .6; }
.nav-item.bord:hover .bord-fork  { opacity: 1; animation: navForkCut  .75s cubic-bezier(.34,1.2,.64,1) infinite; }
.nav-item.bord:hover .bord-knife { opacity: 1; animation: navKnifeCut .75s cubic-bezier(.34,1.2,.64,1) infinite; }
@keyframes navForkCut  {
  0%  { transform: translateX(0)   rotate(0deg);  }
  35% { transform: translateX(4px) rotate(-4deg); }
  65% { transform: translateX(4px) rotate( 4deg); }
  100%{ transform: translateX(0)   rotate(0deg);  }
}
@keyframes navKnifeCut {
  0%  { transform: translateX(0)    rotate(0deg); }
  35% { transform: translateX(-4px) rotate( 4deg); }
  65% { transform: translateX(-4px) rotate(-4deg); }
  100%{ transform: translateX(0)    rotate(0deg); }
}

/* === HERO (front page) === */
.hero {
  min-height: 92vh;
  display: grid; place-items: center;
  text-align: center;
  padding: clamp(4rem, 10vw, 10rem) clamp(1.5rem, 5vw, 5rem);
  position: relative; overflow: hidden;
}
.hero-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--rule); pointer-events: none;
}
.hero-ring.r1 { width:500px;  height:500px;  top:50%; left:50%; transform:translate(-50%,-50%); }
.hero-ring.r2 { width:750px;  height:750px;  top:50%; left:50%; transform:translate(-50%,-50%); }
.hero-ring.r3 { width:1050px; height:1050px; top:50%; left:50%; transform:translate(-50%,-50%); }
.hero-inner { position: relative; z-index: 1; max-width: 820px; }
.hero-latin {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 0.85rem;
  color: var(--muted); letter-spacing: 0.2em; margin-bottom: 2rem;
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: 0.95; font-weight: 600;
  letter-spacing: -0.03em; margin-bottom: 0.15em;
}
.hero-title em { font-style: italic; font-weight: 400; }
.hero-divider { width:40px; height:1px; background:var(--muted); margin:1.8rem auto; }
.hero-sub {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: var(--muted); max-width: 520px;
  margin: 0 auto 2.5rem; font-weight: 300; line-height: 1.8;
}
.hero-cta {
  display: inline-block; padding: 0.7rem 2.2rem;
  border: 1px solid var(--ink); border-radius: 99px;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  transition: background .2s, color .2s;
}
.hero-cta:hover { background: var(--ink); color: var(--cream); }

/* === PIJLERS === */
.pijlers { padding: clamp(4rem, 8vw, 8rem) 0; }
.pijlers-label {
  text-align: center; font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 3.5rem;
}
.pijlers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
}
@media (max-width: 800px) { .pijlers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pijlers-grid { grid-template-columns: 1fr; } }
.pijler {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  transition: background .25s;
  text-decoration: none; color: inherit;
  display: block;
}
.pijler:last-child { border-right: none; }
.pijler:hover { background: #fff; }
.pijler-accent { width:28px; height:3px; border-radius:2px; margin-bottom:1.8rem; }
.pijler.basis    .pijler-accent { background: var(--basis); }
.pijler.brein    .pijler-accent { background: var(--brein); }
.pijler.beleving .pijler-accent { background: var(--beleving); }
.pijler.bord     .pijler-accent { background: var(--bord); }
.pijler-naam {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem; font-weight: 600; margin-bottom: 0.8rem;
}
.pijler-tekst { font-size: 0.875rem; color: var(--muted); line-height: 1.7; }

/* === FEATURED POST === */
.featured { padding: clamp(3rem, 6vw, 6rem) 0; }
.feature-card {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4rem; align-items: center;
}
@media (max-width: 680px) { .feature-card { grid-template-columns: 1fr; } }
.feature-visual {
  aspect-ratio: 5/4; border-radius: 2px; overflow: hidden;
}
.feature-visual img { width:100%; height:100%; object-fit:cover; }
.feature-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.15; font-weight: 600; margin-bottom: 1rem;
  text-decoration: none; color: var(--ink); display: block;
}
.feature-intro { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.6rem; line-height: 1.75; }
.feature-quote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.05rem;
  color: var(--ink); border-left: 2px solid var(--rule);
  padding-left: 1rem; margin: 1.2rem 0; line-height: 1.6;
}
.feature-meta { font-size: 0.75rem; color: var(--muted); margin-bottom: 1.2rem; }
.read-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
  transition: opacity .2s;
}
.read-link:hover { opacity: 0.55; }

/* === POSTS GRID === */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2.5rem;
}
.post-card { display: flex; flex-direction: column; }
.post-thumb {
  aspect-ratio: 16/10; border-radius: 2px; overflow: hidden;
  margin-bottom: 1.1rem;
}
.post-thumb img { width:100%; height:100%; object-fit:cover; }
.post-thumb-placeholder {
  width:100%; height:100%;
  background: var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 3rem; color: rgba(30,27,23,0.1);
}
.post-card .pill { margin-bottom: 0.7rem; }
.post-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 600; line-height: 1.2;
  margin-bottom: 0.5rem; text-decoration: none; color: var(--ink);
  display: block;
}
.post-title:hover { opacity: 0.7; }
.post-excerpt { font-size: 0.855rem; color: var(--muted); line-height: 1.7; }
.post-meta { font-size: 0.72rem; color: var(--muted); margin-top: auto; padding-top: 0.9rem; letter-spacing: 0.04em; }

/* === PULLQUOTE === */
.pullquote {
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 5rem);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: clamp(3rem, 6vw, 6rem) 0;
  text-align: center;
}
.pullquote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.35; max-width: 780px; margin: 0 auto;
}
.pullquote cite {
  display: block; margin-top: 1.4rem;
  font-style: normal; font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}

/* === SINGLE POST === */
.post-header { padding: clamp(3rem, 6vw, 6rem) 0 2rem; }
.post-header-inner { max-width: 760px; margin: 0 auto; }
.post-header .pill { margin-bottom: 1.2rem; }
.post-header h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.1; margin-bottom: 1rem;
}
.post-header-meta { font-size: 0.78rem; color: var(--muted); }
.post-hero-img {
  max-width: 900px; margin: 0 auto 3rem;
  border-radius: 2px; overflow: hidden;
  aspect-ratio: 16/9;
}
.post-hero-img img { width:100%; height:100%; object-fit:cover; }

.post-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem) clamp(4rem, 8vw, 8rem);
}
.post-content p { margin-bottom: 1.4rem; font-size: 1rem; line-height: 1.85; }
.post-content h2 {
  font-size: 1.8rem; margin: 2.5rem 0 0.8rem;
}
.post-content h3 { font-size: 1.4rem; margin: 2rem 0 0.6rem; }
.post-content blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: 1.25rem;
  border-left: 2px solid var(--rule);
  padding-left: 1.4rem; margin: 2rem 0; color: var(--ink); line-height: 1.6;
}
.post-content a { border-bottom: 1px solid var(--rule); transition: border-color .2s; }
.post-content a:hover { border-color: var(--ink); }
.post-content cite, .post-content .bronvermelding {
  font-size: 0.82rem; color: var(--muted); font-style: normal;
}

/* === ARCHIVE / CATEGORY === */
.archive-header {
  padding: clamp(3rem, 6vw, 6rem) 0 3rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}
.archive-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 0.5rem;
}
.archive-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 600;
}
.archive-desc { font-size: 0.92rem; color: var(--muted); max-width: 560px; margin-top: 0.8rem; }

/* === PAGINATION === */
.pagination {
  display: flex; justify-content: center; gap: 0.5rem;
  padding: 3rem 0 5rem;
}
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 0.82rem; text-decoration: none; color: var(--muted);
  border: 1px solid transparent; transition: all .2s;
}
.pagination a:hover { border-color: var(--rule); color: var(--ink); }
.pagination .current { border-color: var(--ink); color: var(--ink); }

/* === NEWSLETTER (widget) === */
.newsletter-block {
  background: var(--ink); color: var(--cream);
  padding: clamp(4rem, 8vw, 8rem) clamp(1.5rem, 5vw, 5rem);
  text-align: center;
}
.newsletter-block .nl-label {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: #6b6458; margin-bottom: 1.2rem;
}
.newsletter-block h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 500; font-style: italic;
  margin-bottom: 0.7rem; line-height: 1.15; color: var(--cream);
}
.newsletter-block p { color: #9a9087; font-size: 0.9rem; margin-bottom: 2.2rem; font-weight: 300; }
.nl-wrap {
  display: flex; max-width: 420px; margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 99px; overflow: hidden;
}
.nl-wrap input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 0.8rem 1.4rem; color: var(--cream);
  font-size: 0.88rem; font-family: 'DM Sans', sans-serif;
}
.nl-wrap input::placeholder { color: #5a5550; }
.nl-wrap button {
  background: var(--cream); color: var(--ink);
  border: none; cursor: pointer; padding: 0.8rem 1.6rem;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; font-family: 'DM Sans', sans-serif;
  transition: background .2s; white-space: nowrap;
}
.nl-wrap button:hover { background: #ede5d8; }

/* === FOOTER === */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2rem clamp(1.5rem, 5vw, 5rem);
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 1rem;
}
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem; font-weight: 600; color: var(--ink);
  text-decoration: none;
}
.footer-logo em { font-style: italic; font-weight: 400; }
.site-footer small { font-size: 0.75rem; color: var(--muted); }

/* === FADE IN === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-inner > * { animation: fadeUp 0.7s ease both; }
.hero-latin   { animation-delay: 0.1s; }
.hero-title   { animation-delay: 0.25s; }
.hero-divider { animation-delay: 0.38s; }
.hero-sub     { animation-delay: 0.48s; }
.hero-cta     { animation-delay: 0.58s; }

/* === PLACEHOLDER GRADIENTS === */
.ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.ph-glyph { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:8rem; opacity:0.2; color:#fff; user-select:none; }
.ph-basis-bg    { background: linear-gradient(145deg,#c8a050,#8a6020); }
.ph-brein-bg    { background: linear-gradient(145deg,#6a9080,#3d5e52); }
.ph-beleving-bg { background: linear-gradient(145deg,#b88095,#7a4055); }
.ph-bord-bg     { background: linear-gradient(145deg,#d08060,#904030); }