/*
Theme Name: Tussen Stilte en Ruis v5
Theme URI: https://tussenstilteenruis.nl
Author: Erik van der Windt / ChatGPT
Description: Cinematisch digitaal literair archief met fragmenten, thema's, focus mode en spoken-word basis.
Version: 7.0
Text Domain: tussen-stilte-en-ruis
*/

:root{
  --bg:#070605;
  --bg2:#0d0b09;
  --panel:rgba(255,255,255,.055);
  --panel2:rgba(255,255,255,.095);
  --ink:#f4eadb;
  --soft:#d8c9b3;
  --muted:#9f927d;
  --line:rgba(244,234,219,.14);
  --gold:#c8ad7f;
  --warm:#e8d7b5;
  --dark:#15110c;
  --max:1180px;
  --reading:760px;
}

[data-mode="light"]{
  --bg:#efe7da;
  --bg2:#ded2bf;
  --panel:rgba(255,255,255,.55);
  --panel2:rgba(255,255,255,.75);
  --ink:#201912;
  --soft:#5d5145;
  --muted:#7a6c5a;
  --line:rgba(38,29,18,.16);
  --gold:#8c7042;
  --warm:#201912;
  --dark:#fff8ed;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 8%, rgba(200,173,127,.14), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(255,255,255,.07), transparent 25%),
    linear-gradient(180deg,var(--bg),var(--bg2) 48%,var(--bg));
  color:var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.055;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    url("assets/feather.svg");
  background-size:100% 4px, min(620px,58vw) auto;
  background-position:0 0, right -110px top 86px;
  background-repeat:repeat, no-repeat;
  filter:drop-shadow(0 0 28px rgba(200,173,127,.2));
}
a{color:inherit}
.site{position:relative;z-index:2}
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:18px clamp(18px,4vw,56px);
  background:rgba(7,6,5,.58);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
  transition:opacity .3s ease, transform .3s ease;
}
[data-mode="light"] .site-header{background:rgba(239,231,218,.70)}
body.focus-mode .site-header{opacity:0;transform:translateY(-100%)}
.brand{
  text-decoration:none;
  font-family:Georgia,serif;
  font-size:22px;
  letter-spacing:-.035em;
}
.nav{display:flex;align-items:center;gap:17px;flex-wrap:wrap;color:var(--muted)}
.nav a,.nav button{
  color:inherit;
  text-decoration:none;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  font:11px Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.nav button,.nav .pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 12px;
  background:rgba(255,255,255,.04);
}
.hero{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:110px 24px 70px;
  background:
    linear-gradient(90deg,rgba(7,6,5,.86),rgba(7,6,5,.44),rgba(7,6,5,.88)),
    url("assets/hero-cinema.jpg") center/cover no-repeat;
  position:relative;
}
[data-mode="light"] .hero{
  background:
    linear-gradient(90deg,rgba(239,231,218,.88),rgba(239,231,218,.58),rgba(239,231,218,.92)),
    url("assets/hero-cinema.jpg") center/cover no-repeat;
}
.hero:after{
  content:"";
  position:absolute;
  right:6vw;
  top:18vh;
  width:min(520px,54vw);
  height:70vh;
  background:url("assets/feather.svg") center/contain no-repeat;
  opacity:.10;
  transform:rotate(-15deg);
  pointer-events:none;
}
.hero-inner{
  width:min(var(--max),100%);
  position:relative;
  z-index:2;
}
.kicker,.time{
  font:11px Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--gold);
}
.hero h1,.display{
  font-family:Georgia, "Times New Roman", serif;
  font-weight:400;
  letter-spacing:-.065em;
  line-height:.95;
}
.hero h1{
  margin:22px 0 32px;
  font-size:clamp(58px,10vw,142px);
  max-width:980px;
}
.hero-quote{
  max-width:780px;
  color:var(--soft);
  font-family:Georgia,serif;
  font-size:clamp(24px,3vw,42px);
  line-height:1.32;
  margin:0 0 34px;
}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink);
  background:rgba(255,255,255,.045);
  text-decoration:none;
  cursor:pointer;
  font:11px Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.btn.primary{background:var(--warm);color:var(--dark);border-color:transparent}
[data-mode="light"] .btn.primary{background:#201912;color:#fff8ed}
.section{
  padding:clamp(76px,9vw,128px) clamp(20px,4vw,56px);
  border-top:1px solid var(--line);
}
.inner{width:min(var(--max),100%);margin:0 auto}
.reading-inner{width:min(var(--reading),100%);margin:0 auto}
.section-title{
  font-family:Georgia,serif;
  font-size:clamp(42px,6vw,84px);
  line-height:1.03;
  font-weight:400;
  letter-spacing:-.05em;
  margin:12px 0 24px;
}
.lead{
  max-width:780px;
  color:var(--soft);
  font-size:clamp(18px,2vw,23px);
  line-height:1.8;
}
.intro-passage{
  min-height:70vh;
  display:grid;
  place-items:center;
}
.intro-passage p{
  font-family:Georgia,serif;
  color:var(--ink);
  font-size:clamp(30px,4.4vw,66px);
  line-height:1.22;
  letter-spacing:-.045em;
  max-width:980px;
}
.featured-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:34px;
}
.fragment-card{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:30px;
  padding:28px;
  min-height:330px;
  box-shadow:0 28px 90px rgba(0,0,0,.25);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .25s ease, background .25s ease;
}
.fragment-card:hover{transform:translateY(-6px);background:var(--panel2)}
.fragment-card h3{
  font-family:Georgia,serif;
  font-size:clamp(28px,3vw,42px);
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:400;
  margin:16px 0;
}
.fragment-card p{color:var(--soft);font-size:17px;margin:0}
.card-link{
  color:var(--gold);
  font:11px Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-top:22px;
}
.theme-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:34px;
}
.theme-card{
  min-height:260px;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
  background:linear-gradient(rgba(7,6,5,.62),rgba(7,6,5,.82)), var(--image) center/cover;
  box-shadow:0 26px 80px rgba(0,0,0,.25);
}
[data-mode="light"] .theme-card{background:linear-gradient(rgba(239,231,218,.50),rgba(239,231,218,.78)), var(--image) center/cover}
.theme-card strong{
  font-family:Georgia,serif;
  font-size:32px;
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:400;
}
.archive-toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:30px 0 36px;
  align-items:center;
}
.search-input{
  min-height:48px;
  min-width:min(460px,100%);
  flex:1 1 360px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:var(--ink);
  padding:12px 18px;
}
.archive-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:16px;
}
.archive-card{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:24px;
  padding:22px;
  min-height:210px;
  cursor:pointer;
  transition:transform .22s ease, background .22s ease;
}
.archive-card:hover{transform:translateY(-4px);background:var(--panel2)}
.archive-card h3{
  font-family:Georgia,serif;
  font-weight:400;
  letter-spacing:-.03em;
  font-size:27px;
  line-height:1.12;
  margin:10px 0 12px;
}
.archive-card p{
  color:var(--soft);
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.archive-link{
  display:inline-flex;
  margin-top:16px;
  color:var(--gold);
  text-decoration:none;
  font:11px Arial,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.poem{
  max-width:840px;
  margin:0 auto;
  padding:clamp(28px,5vw,56px);
  border:1px solid var(--line);
  border-radius:32px;
  background:var(--panel);
  box-shadow:0 26px 90px rgba(0,0,0,.22);
}
.poem h1,.poem h2{
  font-family:Georgia,serif;
  font-size:clamp(44px,7vw,88px);
  line-height:1.02;
  letter-spacing:-.06em;
  font-weight:400;
  margin:14px 0 30px;
}
.poem p{
  color:var(--soft);
  font-family:Georgia,serif;
  font-size:clamp(20px,2.2vw,27px);
  line-height:1.85;
}
.single-actions{margin-top:42px}
.focus-mode .poem{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  padding:24px;
  align-items:center;
  justify-content:center;
}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(12px)}
.modal-panel{
  position:relative;
  width:min(880px,96vw);
  max-height:88vh;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:34px;
  padding:clamp(28px,5vw,58px);
  background:linear-gradient(180deg,rgba(20,16,12,.98),rgba(9,8,6,.99)), url("assets/feather.svg") right -120px top 40px / 370px auto no-repeat;
}
[data-mode="light"] .modal-panel{background:linear-gradient(180deg,rgba(255,248,237,.98),rgba(239,231,218,.99)), url("assets/feather.svg") right -120px top 40px / 370px auto no-repeat}
.modal-close{float:right}
.modal-title{
  font-family:Georgia,serif;
  font-size:clamp(36px,5vw,70px);
  line-height:1.04;
  letter-spacing:-.055em;
  font-weight:400;
  margin:14px 0 28px;
}
.modal-body{
  white-space:pre-line;
  max-width:700px;
  color:var(--soft);
  font-family:Georgia,serif;
  font-size:clamp(20px,2vw,26px);
  line-height:1.85;
}
.pagination{margin-top:48px}
.pagination .nav-links{display:flex;gap:10px;flex-wrap:wrap}
.pagination a,.pagination span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 13px;
  background:var(--panel);
  text-decoration:none;
}
.pagination .current{background:var(--warm);color:var(--dark)}
.footer{
  padding:86px 24px;
  text-align:center;
  color:var(--muted);
  border-top:1px solid var(--line);
  font:11px Arial,sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.social-preview{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:center;
}
.phone{
  width:min(320px,100%);
  margin:auto;
  border:1px solid var(--line);
  border-radius:38px;
  padding:16px;
  background:#14110d;
  box-shadow:0 30px 80px rgba(0,0,0,.36);
}
.post-preview{
  aspect-ratio:1/1.2;
  border-radius:28px;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:radial-gradient(circle at 70% 20%,rgba(200,173,127,.22),transparent 26%),linear-gradient(180deg,#201a13,#0f0d0a);
  color:#f4eadb;
  border:1px solid rgba(255,255,255,.12);
}
.post-preview .quote{font-family:Georgia,serif;font-size:30px;line-height:1.25}
.hidden{display:none!important}
@media(max-width:900px){
  .nav a:not(.pill){display:none}
  .featured-grid,.social-preview{grid-template-columns:1fr}
  .hero h1{font-size:clamp(54px,15vw,96px)}
  body:before{background-size:100% 4px, 92vw auto;background-position:0 0, right -220px top 90px}
}

/* v5.1 — tijdlijn en periode-archief */
.timeline-strip,
.era-strip{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 18px;
}
.timeline-strip{
  padding:18px 0 8px;
}
.timeline-chip,
.era-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  background:var(--panel);
  color:var(--ink);
  text-decoration:none;
  font:11px Arial,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.timeline-chip em{
  font-style:normal;
  color:var(--gold);
}
.timeline-chip.active,
.era-chip.active{
  background:var(--warm);
  color:var(--dark);
}
.timeline-home{
  margin-top:32px;
}
.period-label{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 13px;
  color:var(--gold);
  margin-bottom:20px;
  font:11px Arial,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.related-period{
  margin-top:54px;
  padding-top:34px;
  border-top:1px solid var(--line);
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
  margin-top:16px;
}
.related-card{
  display:block;
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:20px;
  padding:18px;
  background:rgba(255,255,255,.04);
}
.related-card strong{
  display:block;
  font-family:Georgia,serif;
  font-weight:400;
  font-size:22px;
  line-height:1.15;
  margin-bottom:10px;
}
.related-card span{
  color:var(--soft);
  font-size:14px;
}

/* v5.2 — dynamische themaweergave */
.theme-grid{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.theme-card{
  min-height:220px;
}
.theme-card strong{
  word-break:normal;
}
.archive-toolbar .btn,
.theme-grid .btn{
  white-space:normal;
}

/* v5.3 — vaste tekststructuur */
.fragment-meta-label{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--gold);
  font:11px Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.13em;
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.structured-poem h1{
  margin-top:0;
}
.fragment-content{
  margin-top:28px;
}
.fragment-content p{
  margin-bottom:1.25em;
}
.archive-card .time{
  min-height:34px;
  line-height:1.55;
}

/* v5.4 — geïntegreerd logo */
.brand-logo{
  display:inline-flex;
  align-items:center;
  width:168px;
  max-width:42vw;
}
.brand-logo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.34));
}
.site-header .brand-logo img{
  max-height:48px;
  object-fit:contain;
}
.hero-logo-mark{
  width:min(420px,86vw);
  margin:0 0 28px;
  opacity:.96;
}
.hero-logo-mark img{
  display:block;
  width:100%;
  height:auto;
  border-radius:24px;
  box-shadow:0 24px 90px rgba(0,0,0,.28);
}
.hero .hero-logo-mark + h1{
  margin-top:18px;
}
@media(max-width:900px){
  .brand-logo{
    width:132px;
  }
  .site-header .brand-logo img{
    max-height:42px;
  }
  .hero-logo-mark{
    width:min(340px,90vw);
  }
}

/* v5.5 — logo subtiel verwerkt + hero slider */
.brand-wordmark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:20px;
  letter-spacing:-.035em;
  text-decoration:none;
}
.brand-feather{
  width:30px;
  height:30px;
  display:inline-block;
  background:url("assets/feather.svg") center/contain no-repeat;
  opacity:.82;
  transform:rotate(-18deg);
  filter:drop-shadow(0 4px 12px rgba(200,173,127,.22));
}
.hero-showcase{
  position:relative;
  width:min(560px,92vw);
  min-height:250px;
  border:1px solid var(--line);
  border-radius:34px;
  overflow:hidden;
  margin:0 0 34px;
  background:rgba(255,255,255,.035);
  box-shadow:0 28px 100px rgba(0,0,0,.34);
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.1s ease;
  display:grid;
  place-items:center;
}
.hero-slide.is-active{
  opacity:1;
}
.hero-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.92) contrast(1.02);
}
.hero-showcase:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.13));
}
.hero-quote-card{
  position:relative;
  z-index:2;
  max-width:440px;
  padding:38px;
  text-align:center;
}
.hero-quote-card strong{
  display:block;
  font-family:Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:clamp(32px,4.2vw,58px);
  line-height:1.12;
  letter-spacing:-.05em;
  color:var(--ink);
}
.hero .hero-showcase + h1{
  margin-top:12px;
}
.site-header .brand-logo,
.hero-logo-mark{
  display:none!important;
}
@media(max-width:900px){
  .brand-wordmark span:last-child{
    max-width:145px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero-showcase{
    min-height:210px;
    border-radius:26px;
  }
}

/* v5.6 — polished cohesive hero */
.site-header{
  height:72px;
  padding:14px clamp(20px,4vw,56px)!important;
  background:rgba(7,6,5,.72)!important;
}
body.admin-bar .site-header{
  top:32px;
}
.brand-wordmark{
  display:inline-flex!important;
  align-items:center;
  gap:11px;
  text-decoration:none;
  color:var(--ink);
  font-family:Georgia, "Times New Roman", serif;
  font-size:20px;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.brand-feather{
  width:24px!important;
  height:34px!important;
  opacity:.72;
  background:url("assets/feather.svg") center/contain no-repeat;
  transform:rotate(-18deg);
  filter:none;
}
.hero-polished{
  min-height:100vh;
  padding-top:120px;
  background:
    radial-gradient(circle at 26% 42%, rgba(200,173,127,.17), transparent 28%),
    radial-gradient(circle at 75% 46%, rgba(255,255,255,.045), transparent 24%),
    linear-gradient(90deg, rgba(7,6,5,.96), rgba(23,18,12,.90) 48%, rgba(7,6,5,.96)),
    url("assets/hero-cinema.jpg") center/cover no-repeat!important;
}
.hero-polished:after{
  display:none!important;
}
.hero-polished-inner{
  display:grid!important;
  grid-template-columns:minmax(0,1.02fr) minmax(280px,.72fr);
  gap:clamp(36px,7vw,110px);
  align-items:center;
}
.hero-copy{
  position:relative;
  z-index:2;
}
.hero-mark-mini{
  display:inline-flex;
  align-items:center;
  gap:13px;
  margin:24px 0 26px;
  color:var(--gold);
  font:11px Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
}
.hero-mark-mini span{
  width:42px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.hero-mark-mini em{
  font-style:normal;
}
.hero-polished h1{
  max-width:860px;
  margin:0 0 28px!important;
  font-size:clamp(68px,8.6vw,138px)!important;
  line-height:.88!important;
  letter-spacing:-.075em!important;
  text-wrap:balance;
}
.hero-polished .hero-quote{
  max-width:760px;
  margin:0 0 34px!important;
  color:var(--soft);
  font-size:clamp(22px,2.15vw,34px)!important;
  line-height:1.35!important;
}
.hero-visual{
  position:relative;
  min-height:560px;
  display:grid;
  place-items:center;
  opacity:.62;
}
.hero-visual img{
  width:min(380px,72%);
  height:auto;
  opacity:.36;
  transform:rotate(-12deg);
  filter:drop-shadow(0 0 42px rgba(200,173,127,.18));
}
.hero-visual:before{
  content:"";
  position:absolute;
  inset:8% 8% 8% 18%;
  border:1px solid rgba(244,234,219,.08);
  border-radius:999px;
  transform:rotate(-10deg);
}
.soundline{
  position:absolute;
  bottom:22%;
  left:2%;
  right:8%;
  height:52px;
  opacity:.42;
  background:
    linear-gradient(90deg, transparent, rgba(244,234,219,.36), transparent),
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(244,234,219,.50) 10px 12px, transparent 12px 18px);
  mask-image:radial-gradient(ellipse at center, black 0 62%, transparent 73%);
}
.hero-showcase,
.hero-logo-mark,
.site-header .brand-logo{
  display:none!important;
}
.nav{
  gap:16px!important;
}
.nav a,.nav button{
  font-size:10px!important;
}
@media(max-width:1100px){
  .hero-polished-inner{
    grid-template-columns:1fr;
  }
  .hero-visual{
    display:none;
  }
}
@media(max-width:900px){
  .site-header{
    height:auto;
    min-height:64px;
  }
  .brand-wordmark span:last-child{
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero-polished{
    padding-top:110px;
  }
  .hero-polished h1{
    font-size:clamp(58px,16vw,92px)!important;
  }
}


/* =========================================================
   TSR Footer Logo
========================================================= */

.tsr-footer-branding{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:70px 20px 50px;
    position:relative;
    overflow:hidden;
}

.tsr-footer-branding img{
    width:min(420px,72vw);
    height:auto;
    opacity:.92;
    filter:
        drop-shadow(0 18px 45px rgba(0,0,0,.55));
    transition:all .35s ease;
}

.tsr-footer-branding img:hover{
    transform:translateY(-2px);
    opacity:1;
}

@media (max-width:768px){

    .tsr-footer-branding{
        padding:50px 20px 40px;
    }

    .tsr-footer-branding img{
        width:min(320px,82vw);
    }
}


/* =========================================================
   TSR v5.7 — Light Mode Contrast Fix
   Zorgt dat alle onderdelen leesbaar blijven in lichte modus
========================================================= */

[data-mode="light"] body,
html[data-mode="light"] body{
    background:
        radial-gradient(circle at 18% 8%, rgba(140,112,66,.12), transparent 28%),
        radial-gradient(circle at 80% 0%, rgba(255,255,255,.55), transparent 25%),
        linear-gradient(180deg,#f1eadf,#e5d9c8 48%,#f1eadf);
    color:#201912;
}

[data-mode="light"] .site-header,
html[data-mode="light"] .site-header{
    background:rgba(244,236,224,.86)!important;
    border-bottom:1px solid rgba(32,25,18,.14)!important;
    box-shadow:0 12px 40px rgba(32,25,18,.08);
}

[data-mode="light"] .brand-wordmark,
[data-mode="light"] .brand,
[data-mode="light"] .nav a,
[data-mode="light"] .nav button,
html[data-mode="light"] .brand-wordmark,
html[data-mode="light"] .brand,
html[data-mode="light"] .nav a,
html[data-mode="light"] .nav button{
    color:#201912!important;
}

[data-mode="light"] .nav button,
[data-mode="light"] .nav .pill,
html[data-mode="light"] .nav button,
html[data-mode="light"] .nav .pill{
    background:rgba(32,25,18,.055)!important;
    border-color:rgba(32,25,18,.16)!important;
}

[data-mode="light"] .hero-polished,
html[data-mode="light"] .hero-polished{
    background:
        radial-gradient(circle at 26% 42%, rgba(140,112,66,.18), transparent 28%),
        radial-gradient(circle at 75% 46%, rgba(255,255,255,.55), transparent 24%),
        linear-gradient(90deg, rgba(241,234,223,.96), rgba(226,214,195,.90) 48%, rgba(241,234,223,.96)),
        url("assets/hero-cinema.jpg") center/cover no-repeat!important;
}

[data-mode="light"] .hero-polished h1,
[data-mode="light"] .section-title,
[data-mode="light"] .poem h1,
[data-mode="light"] .poem h2,
[data-mode="light"] .fragment-card h3,
[data-mode="light"] .archive-card h3,
[data-mode="light"] .theme-card strong,
[data-mode="light"] .intro-passage p,
html[data-mode="light"] .hero-polished h1,
html[data-mode="light"] .section-title,
html[data-mode="light"] .poem h1,
html[data-mode="light"] .poem h2,
html[data-mode="light"] .fragment-card h3,
html[data-mode="light"] .archive-card h3,
html[data-mode="light"] .theme-card strong,
html[data-mode="light"] .intro-passage p{
    color:#201912!important;
}

[data-mode="light"] .hero-quote,
[data-mode="light"] .lead,
[data-mode="light"] .poem p,
[data-mode="light"] .fragment-card p,
[data-mode="light"] .archive-card p,
[data-mode="light"] .reading-card p,
[data-mode="light"] .manifesto-text,
[data-mode="light"] .related-card span,
html[data-mode="light"] .hero-quote,
html[data-mode="light"] .lead,
html[data-mode="light"] .poem p,
html[data-mode="light"] .fragment-card p,
html[data-mode="light"] .archive-card p,
html[data-mode="light"] .reading-card p,
html[data-mode="light"] .manifesto-text,
html[data-mode="light"] .related-card span{
    color:#5f5142!important;
}

[data-mode="light"] .kicker,
[data-mode="light"] .time,
[data-mode="light"] .hero-mark-mini,
[data-mode="light"] .fragment-meta-label,
[data-mode="light"] .archive-link,
[data-mode="light"] .card-link,
html[data-mode="light"] .kicker,
html[data-mode="light"] .time,
html[data-mode="light"] .hero-mark-mini,
html[data-mode="light"] .fragment-meta-label,
html[data-mode="light"] .archive-link,
html[data-mode="light"] .card-link{
    color:#8c7042!important;
}

[data-mode="light"] .fragment-card,
[data-mode="light"] .archive-card,
[data-mode="light"] .reading-card,
[data-mode="light"] .manifesto-card,
[data-mode="light"] .author-quote,
[data-mode="light"] .social-post,
[data-mode="light"] .poem,
[data-mode="light"] .related-card,
[data-mode="light"] .modal-panel,
html[data-mode="light"] .fragment-card,
html[data-mode="light"] .archive-card,
html[data-mode="light"] .reading-card,
html[data-mode="light"] .manifesto-card,
html[data-mode="light"] .author-quote,
html[data-mode="light"] .social-post,
html[data-mode="light"] .poem,
html[data-mode="light"] .related-card,
html[data-mode="light"] .modal-panel{
    background:rgba(255,250,241,.72)!important;
    border-color:rgba(32,25,18,.16)!important;
    box-shadow:0 24px 70px rgba(32,25,18,.08)!important;
}

[data-mode="light"] .fragment-card:hover,
[data-mode="light"] .archive-card:hover,
html[data-mode="light"] .fragment-card:hover,
html[data-mode="light"] .archive-card:hover{
    background:rgba(255,250,241,.92)!important;
}

[data-mode="light"] .btn,
[data-mode="light"] .timeline-chip,
[data-mode="light"] .era-chip,
[data-mode="light"] .theme-chip,
html[data-mode="light"] .btn,
html[data-mode="light"] .timeline-chip,
html[data-mode="light"] .era-chip,
html[data-mode="light"] .theme-chip{
    color:#201912!important;
    background:rgba(255,250,241,.66)!important;
    border-color:rgba(32,25,18,.17)!important;
}

[data-mode="light"] .btn.primary,
[data-mode="light"] .timeline-chip.active,
[data-mode="light"] .era-chip.active,
html[data-mode="light"] .btn.primary,
html[data-mode="light"] .timeline-chip.active,
html[data-mode="light"] .era-chip.active{
    background:#201912!important;
    color:#fff8ed!important;
    border-color:#201912!important;
}

[data-mode="light"] .search-input,
[data-mode="light"] textarea,
[data-mode="light"] input,
html[data-mode="light"] .search-input,
html[data-mode="light"] textarea,
html[data-mode="light"] input{
    background:rgba(255,250,241,.72)!important;
    color:#201912!important;
    border-color:rgba(32,25,18,.18)!important;
}

[data-mode="light"] .search-input::placeholder,
[data-mode="light"] textarea::placeholder,
[data-mode="light"] input::placeholder,
html[data-mode="light"] .search-input::placeholder,
html[data-mode="light"] textarea::placeholder,
html[data-mode="light"] input::placeholder{
    color:#8a7b68!important;
}

[data-mode="light"] .theme-card,
html[data-mode="light"] .theme-card{
    background:
        linear-gradient(rgba(255,250,241,.62),rgba(236,225,207,.82)),
        var(--image) center/cover!important;
    color:#201912!important;
}

[data-mode="light"] .theme-card .time,
html[data-mode="light"] .theme-card .time{
    color:#7e663d!important;
}

[data-mode="light"] .hero-visual,
html[data-mode="light"] .hero-visual{
    opacity:.28!important;
}

[data-mode="light"] .hero-visual img,
html[data-mode="light"] .hero-visual img{
    filter:none!important;
    opacity:.28!important;
}

[data-mode="light"] .soundline,
html[data-mode="light"] .soundline{
    opacity:.20!important;
    background:
        linear-gradient(90deg, transparent, rgba(32,25,18,.35), transparent),
        repeating-linear-gradient(90deg, transparent 0 10px, rgba(32,25,18,.45) 10px 12px, transparent 12px 18px)!important;
}

[data-mode="light"] .footer,
html[data-mode="light"] .footer{
    color:#6b5d4c!important;
    border-top-color:rgba(32,25,18,.14)!important;
}

[data-mode="light"] .tsr-footer-branding img,
html[data-mode="light"] .tsr-footer-branding img{
    opacity:.72;
    filter:
        drop-shadow(0 18px 35px rgba(32,25,18,.18))
        saturate(.85)
        contrast(.95);
}

[data-mode="light"] .modal-backdrop,
html[data-mode="light"] .modal-backdrop{
    background:rgba(239,231,218,.78)!important;
}

[data-mode="light"] .modal-body,
html[data-mode="light"] .modal-body{
    color:#5f5142!important;
}

[data-mode="light"] .pagination a,
[data-mode="light"] .pagination span,
html[data-mode="light"] .pagination a,
html[data-mode="light"] .pagination span{
    background:rgba(255,250,241,.72)!important;
    color:#201912!important;
    border-color:rgba(32,25,18,.16)!important;
}

[data-mode="light"] .pagination .current,
html[data-mode="light"] .pagination .current{
    background:#201912!important;
    color:#fff8ed!important;
}



/* =========================================================
   v5.8 — Button visibility fix light mode
========================================================= */

[data-mode="light"] .tsr-ig-button,
[data-mode="light"] button,
[data-mode="light"] .button,
[data-mode="light"] .btn,
html[data-mode="light"] .tsr-ig-button,
html[data-mode="light"] button,
html[data-mode="light"] .button,
html[data-mode="light"] .btn{
    background:#201912!important;
    color:#f8f1e7!important;
    border:1px solid rgba(32,25,18,.22)!important;
    text-decoration:none!important;
    box-shadow:0 10px 30px rgba(32,25,18,.12)!important;
}

[data-mode="light"] .tsr-ig-button.secondary,
[data-mode="light"] .btn.secondary,
html[data-mode="light"] .tsr-ig-button.secondary,
html[data-mode="light"] .btn.secondary{
    background:rgba(255,250,241,.92)!important;
    color:#201912!important;
    border:1px solid rgba(32,25,18,.18)!important;
}

[data-mode="light"] .tsr-ig-button:hover,
[data-mode="light"] button:hover,
[data-mode="light"] .btn:hover,
html[data-mode="light"] .tsr-ig-button:hover,
html[data-mode="light"] button:hover,
html[data-mode="light"] .btn:hover{
    transform:translateY(-1px);
    opacity:.96;
}

[data-mode="light"] .tsr-ig-button:visited,
[data-mode="light"] .tsr-ig-button:active,
html[data-mode="light"] .tsr-ig-button:visited,
html[data-mode="light"] .tsr-ig-button:active{
    color:#f8f1e7!important;
}

[data-mode="light"] a,
html[data-mode="light"] a{
    color:#5f4527;
}



/* =========================================================
   TSR v6.5 — Clean Language Tabs
========================================================= */

.tsr-language-switch{
    width:100%;
    margin-top:42px;
}

.tsr-language-switch-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:640px;
    padding:8px;
    border-radius:999px;
    background:rgba(255,255,255,.055);
    border:1px solid var(--line);
    margin:0 0 36px;
}

.tsr-language-switch-tab{
    appearance:none;
    border:0;
    border-radius:999px;
    padding:16px 24px;
    cursor:pointer;
    background:transparent;
    color:var(--gold);
    font:700 11px/1.2 Arial,sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
    transition:all .25s ease;
}

.tsr-language-switch-tab.is-active{
    background:var(--warm);
    color:var(--dark);
    box-shadow:0 16px 42px rgba(0,0,0,.24);
}

.tsr-language-switch-panel{
    display:none !important;
}

.tsr-language-switch-panel.is-active{
    display:block !important;
}

.tsr-language-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:18px;
}

.tsr-language-card{
    display:flex;
    min-height:154px;
    flex-direction:column;
    justify-content:space-between;
    padding:25px;
    border-radius:28px;
    text-decoration:none;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    border:1px solid var(--line);
    box-shadow:0 22px 70px rgba(0,0,0,.21);
    transition:all .25s ease;
}

.tsr-language-card:hover{
    transform:translateY(-4px);
    background:var(--panel2);
}

.tsr-language-card-title{
    display:block;
    font-family:Georgia, "Times New Roman", serif;
    font-size:clamp(24px,2.1vw,32px);
    line-height:1.12;
    letter-spacing:-.04em;
    color:var(--ink);
}

.tsr-language-card-count,
.tsr-language-empty{
    display:block;
    margin-top:18px;
    color:var(--gold);
    font:11px Arial,sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
}

[data-mode="light"] .tsr-language-switch-tabs,
html[data-mode="light"] .tsr-language-switch-tabs{
    background:rgba(255,250,241,.78)!important;
    border-color:rgba(32,25,18,.14)!important;
}

[data-mode="light"] .tsr-language-switch-tab,
html[data-mode="light"] .tsr-language-switch-tab{
    color:#7e6849!important;
}

[data-mode="light"] .tsr-language-switch-tab.is-active,
html[data-mode="light"] .tsr-language-switch-tab.is-active{
    background:#201912!important;
    color:#fff8ed!important;
}

[data-mode="light"] .tsr-language-card,
html[data-mode="light"] .tsr-language-card{
    background:linear-gradient(180deg,rgba(255,250,241,.92),rgba(244,236,224,.78))!important;
    border-color:rgba(32,25,18,.12)!important;
    box-shadow:0 22px 60px rgba(32,25,18,.08)!important;
}

[data-mode="light"] .tsr-language-card-title,
html[data-mode="light"] .tsr-language-card-title{
    color:#201912!important;
}

[data-mode="light"] .tsr-language-card-count,
[data-mode="light"] .tsr-language-empty,
html[data-mode="light"] .tsr-language-card-count,
html[data-mode="light"] .tsr-language-empty{
    color:#7e6849!important;
}

@media(max-width:700px){
    .tsr-language-switch-tabs{
        grid-template-columns:1fr;
        border-radius:28px;
    }
}


/* =========================================================
   TSR v6.6 — Cinematic atmosphere cards for language tabs
========================================================= */

.tsr-language-card{
    position:relative!important;
    overflow:hidden!important;
    isolation:isolate!important;
    min-height:210px!important;
    background:
        linear-gradient(180deg,rgba(7,6,5,.12),rgba(7,6,5,.82)),
        var(--tsr-card-image) center/cover no-repeat!important;
    border:1px solid rgba(244,234,219,.13)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 26px 80px rgba(0,0,0,.28)!important;
}

.tsr-language-card:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at 22% 20%, rgba(232,215,181,.28), transparent 32%),
        linear-gradient(135deg, rgba(0,0,0,.10), rgba(0,0,0,.72));
    opacity:.82;
    transition:opacity .28s ease, transform .28s ease;
}

.tsr-language-card:after{
    content:"";
    position:absolute;
    left:24px;
    right:24px;
    bottom:22px;
    height:1px;
    background:linear-gradient(90deg, rgba(232,215,181,.58), transparent);
    opacity:.55;
}

.tsr-language-card:hover{
    transform:translateY(-6px)!important;
    border-color:rgba(232,215,181,.32)!important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 32px 95px rgba(0,0,0,.38)!important;
}

.tsr-language-card:hover:before{
    opacity:.96;
    transform:scale(1.02);
}

.tsr-language-card-title{
    position:relative;
    z-index:2;
    color:#fff7e9!important;
    text-shadow:0 4px 20px rgba(0,0,0,.42);
    max-width:92%;
}

.tsr-language-card-count{
    position:relative;
    z-index:2;
    color:#e8d7b5!important;
    text-shadow:0 3px 16px rgba(0,0,0,.45);
}

.tsr-card-accent-warm:before{
    background:
        radial-gradient(circle at 24% 20%, rgba(218,142,94,.30), transparent 32%),
        linear-gradient(135deg, rgba(42,16,12,.08), rgba(0,0,0,.76));
}

.tsr-card-accent-blue:before{
    background:
        radial-gradient(circle at 24% 20%, rgba(105,138,178,.32), transparent 32%),
        linear-gradient(135deg, rgba(8,18,31,.14), rgba(0,0,0,.78));
}

.tsr-card-accent-steel:before{
    background:
        radial-gradient(circle at 24% 20%, rgba(178,166,146,.28), transparent 32%),
        linear-gradient(135deg, rgba(28,27,25,.16), rgba(0,0,0,.78));
}

.tsr-card-accent-violet:before{
    background:
        radial-gradient(circle at 24% 20%, rgba(140,118,176,.30), transparent 32%),
        linear-gradient(135deg, rgba(24,16,34,.12), rgba(0,0,0,.78));
}

.tsr-card-accent-green:before{
    background:
        radial-gradient(circle at 24% 20%, rgba(143,169,130,.30), transparent 32%),
        linear-gradient(135deg, rgba(14,28,18,.12), rgba(0,0,0,.76));
}

.tsr-card-accent-gold:before{
    background:
        radial-gradient(circle at 24% 20%, rgba(200,173,127,.30), transparent 32%),
        linear-gradient(135deg, rgba(33,24,12,.12), rgba(0,0,0,.76));
}

/* Light mode keeps the atmosphere but prevents washed-out cards */
[data-mode="light"] .tsr-language-card,
html[data-mode="light"] .tsr-language-card{
    background:
        linear-gradient(180deg,rgba(255,250,241,.10),rgba(32,25,18,.62)),
        var(--tsr-card-image) center/cover no-repeat!important;
    border-color:rgba(32,25,18,.14)!important;
    box-shadow:0 24px 70px rgba(32,25,18,.14)!important;
}

[data-mode="light"] .tsr-language-card-title,
[data-mode="light"] .tsr-language-card-count,
html[data-mode="light"] .tsr-language-card-title,
html[data-mode="light"] .tsr-language-card-count{
    color:#fff7e9!important;
}

[data-mode="light"] .tsr-language-card-count,
html[data-mode="light"] .tsr-language-card-count{
    color:#ead5ac!important;
}

@media(max-width:700px){
    .tsr-language-card{
        min-height:180px!important;
    }
}


/* =========================================================
   TSR v6.7 — fix sfeerbeelden + verwijder NL/EN visueel
========================================================= */

.tsr-language-card{
    background-image:
        linear-gradient(180deg,rgba(7,6,5,.10),rgba(7,6,5,.76)),
        var(--tsr-card-image)!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
}

.tsr-language-card:before{
    background:
        radial-gradient(circle at 22% 18%, rgba(232,215,181,.18), transparent 34%),
        linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.58))!important;
}

.tsr-language-card-title{
    font-size:clamp(26px,2.25vw,36px)!important;
}

/* fallback visual when image cannot be loaded */
.tsr-language-card:not([style*="url('http"]){
    background:
        radial-gradient(circle at 22% 18%, rgba(200,173,127,.24), transparent 34%),
        linear-gradient(135deg, rgba(37,28,17,.82), rgba(7,6,5,.96))!important;
}

[data-mode="light"] .tsr-language-card,
html[data-mode="light"] .tsr-language-card{
    background-image:
        linear-gradient(180deg,rgba(255,250,241,.05),rgba(32,25,18,.58)),
        var(--tsr-card-image)!important;
    background-size:cover!important;
    background-position:center!important;
}


/* v6.8 — frontpage Instagram feed placement */
.tsr-front-instagram-feed-section{
    padding-top:0!important;
    padding-bottom:30px!important;
}

.tsr-front-instagram-feed-section .inner{
    max-width:none!important;
}


/* v6.9 — inline Instagram row inside social box */
.tsr-front-instagram-feed-section{
    display:none!important;
}

.tsr-social-inline-instagram-row{
    margin-top:26px;
    width:100%;
    max-width:660px;
}

.tsr-social-inline-instagram-row .tsr-instagram-feedbox,
.tsr-social-inline-instagram-row .tsr-instagram-feedbox-inner{
    display:none!important;
}


/* =========================================================
   TSR v7.0 — Digital Library placement
========================================================= */

.tsr-home-library{
    padding-top:70px!important;
    padding-bottom:70px!important;
}

.tsr-home-library .inner{
    max-width:1240px!important;
}

.tsr-home-library .tsr-library{
    margin-top:0;
}

@media(max-width:760px){
    .tsr-home-library{
        padding-top:45px!important;
        padding-bottom:45px!important;
    }
}