/* ==========================================================================
   Lettertypen — zelf gehost, geen Google Fonts (scheelt een AVG-discussie over
   IP-adressen en een externe verbinding per bezoeker).

   Bron: de variable TTF's van Google Fonts, in art-source/google-fonts-ttf/.
   Bewerkt met tools/build_fonts.py: optische as vastgezet (Inter op 16,
   Newsreader op 30), gesubset op Latijn plus de leestekens en symbolen die de
   site gebruikt, en omgezet naar woff2. Van 2,7 MB naar 238 kB.

   De gewichtsas blijft variabel, dus elk gewicht tussen 100 en 900 (Inter) of
   200 en 800 (Newsreader) is echt en niet nagebootst.

   LET OP: de bestandsnamen staan in de cache-regels van .htaccess op een jaar.
   Vervang je een font, geef het dan een nieuwe naam.
   ========================================================================== */

@font-face{
  font-family: "Inter";
  src: url("/assets/fonts/inter-roman.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Inter";
  src: url("/assets/fonts/inter-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face{
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-roman.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}

/* ==========================================================================
   TeamRitualStudio — teamritualstudio.eu
   Eén stylesheet, geen afhankelijkheden. Klassenamen beginnen met .lib- of
   .trs- ; de .lib- familie komt uit de verkooppagina's op iterr.eu zodat de
   bestaande, geteste opmaak hier ongewijzigd blijft werken.

   PRODUCTKLEUREN staan bovenin, op één plek. Pas ze daar aan.
   ========================================================================== */

:root{
  /* merk — uit het winkellogo op Etsy */
  --trs-teal:        #1F5560;
  --trs-teal-deep:   #17414A;
  --trs-coral:       #E76F51;
  --trs-cream:       #FBF5EA;
  --trs-dark:        #10262B;

  --trs-text:        #1A1A1A;
  --trs-text-muted:  #5A5A5A;
  --trs-text-faint:  #8A8A8A;
  --trs-border:      #EBE5DB;
  --trs-border-2:    #DCD4C5;

  /* Retrospective Format Library — teal + coral.
     Exact, uitgelezen uit de stylesheet in de EPUB van format 01 (4 sep 2026):
     h1/h2 = #235E59, tabelkop = #DEEDE8, accent = #E76F51. */
  --lib-retro:        #235E59;
  --lib-retro-soft:   #DEEDE8;
  --lib-retro-accent: #E76F51;

  /* Icebreaker Library — petrol + framboos (exact uit build_docx.py) */
  --lib-ice:          #1B4A63;
  --lib-ice-soft:     #E3EDF2;
  --lib-ice-accent:   #C64270;

  /* neutrale defaults, per productblok overschreven */
  --lib-accent:       var(--trs-teal);
  --lib-accent-soft:  #E4EDEF;
  --lib-accent-2:     var(--trs-coral);

  --trs-serif: Newsreader, "Source Serif 4", Georgia, "Times New Roman", serif;
  --trs-sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

.lib-retro{ --lib-accent: var(--lib-retro); --lib-accent-soft: var(--lib-retro-soft); --lib-accent-2: var(--lib-retro-accent); }
.lib-ice  { --lib-accent: var(--lib-ice);   --lib-accent-soft: var(--lib-ice-soft);   --lib-accent-2: var(--lib-ice-accent); }

/* ---------- basis ---------- */

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0; background: #fff; color: var(--trs-text);
  font-family: var(--trs-sans); font-size: 16px; line-height: 1.65;
}
img{ max-width: 100%; height: auto; }
a{ color: var(--trs-teal); }
.trs-skip{
  position: absolute; left: -9999px; top: 0; background: #fff; color: var(--trs-text);
  padding: .8rem 1.2rem; z-index: 100; border-radius: 0 0 10px 0;
}
.trs-skip:focus{ left: 0; }

/* ---------- kop ---------- */

.trs-header{
  border-bottom: 1px solid var(--trs-border); background: #fff;
  position: sticky; top: 0; z-index: 40;
}
.trs-header-inner{
  max-width: 1100px; margin: 0 auto; padding: .85rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.trs-brand{ display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--trs-text); }
.trs-brand img{ width: 36px; height: 36px; border-radius: 8px; display: block; }
.trs-brand span{ font-family: var(--trs-serif); font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.trs-nav{ margin-left: auto; display: flex; gap: 1.35rem; flex-wrap: wrap; align-items: center; }
.trs-nav a{
  color: var(--trs-text-muted); text-decoration: none; font-size: .95rem;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.trs-nav a:hover{ color: var(--trs-text); }
.trs-nav a[aria-current="page"]{ color: var(--trs-text); border-bottom-color: var(--lib-accent, var(--trs-teal)); }

/* ---------- voet ---------- */

.trs-footer{ background: var(--trs-dark); color: rgba(255,255,255,.72); padding: 3.5rem 1.25rem 2.5rem; }
.trs-footer-inner{ max-width: 1100px; margin: 0 auto; }
.trs-footer-grid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }
.trs-footer h4{
  font-family: var(--trs-sans); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .16em; color: #fff; margin: 0 0 1rem; font-weight: 600;
}
.trs-footer ul{ list-style: none; padding: 0; margin: 0; }
.trs-footer li{ margin-bottom: .55rem; }
.trs-footer a{ color: rgba(255,255,255,.72); text-decoration: none; font-size: .95rem; }
.trs-footer a:hover{ color: #fff; text-decoration: underline; }
.trs-footer p{ font-size: .93rem; color: rgba(255,255,255,.6); margin: 0 0 .8rem; }
.trs-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: .85rem; color: rgba(255,255,255,.5);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

/* ---------- opbouw van de pagina's ---------- */

.lib{ --lib-max: 1100px; }
.lib section{ padding: 4.5rem 1.25rem; }
.lib section.lib-cream{ background: var(--trs-cream); }
.lib section.lib-dark{ background: var(--trs-dark); color: #fff; }
.lib .lib-wrap{ max-width: var(--lib-max); margin: 0 auto; }
.lib .lib-narrow{ max-width: 720px; margin-left: auto; margin-right: auto; }
.lib .lib-center{ text-align: center; }

.lib .lib-label{
  text-transform: uppercase; letter-spacing: .18em; font-size: .78rem;
  color: var(--lib-accent); font-weight: 600; display: inline-block; margin-bottom: 1rem;
}
.lib h1, .lib h2, .lib h3{
  font-family: var(--trs-serif); font-weight: 600; color: var(--trs-text); margin: 0 0 1rem;
}
.lib h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; }
.lib h2{ font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.15; }
.lib h3{ font-size: 1.25rem; line-height: 1.3; }
.lib section.lib-dark h2, .lib section.lib-dark h3{ color: #fff; }
.lib .lib-em{ font-style: italic; color: var(--lib-accent); font-weight: 500; }
.lib section.lib-dark .lib-em{ color: var(--trs-coral); }

.lib p{ font-size: 1rem; line-height: 1.65; color: var(--trs-text-muted); margin: 0 0 1rem; }
.lib .lib-lead{ font-size: 1.15rem; line-height: 1.6; }
.lib section.lib-dark p{ color: rgba(255,255,255,.72); }

/* ---------- knoppen ---------- */

.lib .lib-cta, .lib a.gumroad-button.lib-cta{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--trs-teal) !important; color: #fff !important;
  font-family: var(--trs-sans) !important;
  font-size: 1rem !important; font-weight: 500 !important; line-height: 1 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  padding: .95rem 1.6rem !important; border-radius: 10px !important;
  border: 0 !important; box-shadow: none !important; text-decoration: none !important;
  height: auto !important; width: auto !important; max-width: none !important;
  transition: background .18s ease, transform .18s ease;
}
.lib .lib-cta:hover, .lib a.gumroad-button.lib-cta:hover{ background: var(--trs-teal-deep) !important; transform: translateY(-1px); }

.lib .lib-cta-ghost, .lib a.gumroad-button.lib-cta-ghost{
  background: transparent !important; color: var(--trs-text) !important;
  border: 1px solid var(--trs-border-2) !important;
}
.lib .lib-cta-ghost:hover{ background: #fff !important; border-color: var(--trs-text) !important; }
.lib section.lib-dark .lib-cta-ghost{ color:#fff !important; border-color: rgba(255,255,255,.35) !important; }
.lib section.lib-dark .lib-cta-ghost:hover{ background: rgba(255,255,255,.08) !important; }

.lib .lib-ctarow{ display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.2rem; }
.lib .lib-center .lib-ctarow{ justify-content: center; }

/* tweede kanaal — bewust ondergeschikt aan de primaire knop */
.lib .lib-alt{ font-size: .9rem; color: var(--trs-text-faint); margin: .2rem 0 0; }
.lib .lib-alt a{ color: var(--trs-text-muted); }

/* ---------- pills ---------- */

.lib .lib-pills{ display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; padding: 0; list-style: none; }
.lib .lib-center .lib-pills{ justify-content: center; }
.lib .lib-pills li{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem; border: 1px solid var(--trs-border); border-radius: 999px;
  background: #fff; font-size: .85rem; color: var(--trs-text-muted);
}
.lib .lib-pills li::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lib-accent); display: inline-block; flex: none;
}

/* ---------- grid & kaarten ---------- */

.lib .lib-grid{ display: grid; gap: 1.4rem; }
.lib .lib-grid-2{ grid-template-columns: repeat(2, 1fr); }
.lib .lib-grid-3{ grid-template-columns: repeat(3, 1fr); }
.lib .lib-grid-4{ grid-template-columns: repeat(4, 1fr); }

.lib .lib-card{
  background: #fff; border: 1px solid var(--trs-border); border-radius: 18px;
  padding: 1.85rem; display: flex; flex-direction: column; height: 100%;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lib .lib-card:hover{
  transform: translateY(-2px); box-shadow: rgba(20,15,5,.2) 0 16px 36px -22px;
  border-color: var(--trs-border-2);
}
.lib .lib-card h3{ margin-bottom: .55rem; }
.lib .lib-card p{ font-size: .95rem; margin-bottom: 1rem; }
.lib .lib-card p:last-child{ margin-bottom: 0; }
.lib .lib-card .lib-push{ margin-top: auto; padding-top: 1.2rem; }

.lib .lib-icon svg{ width: 22px; height: 22px; display: block; }
.lib .lib-icon{
  width: 44px; height: 44px; border-radius: 12px; background: var(--lib-accent-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--lib-accent); font-size: 1.05rem; font-weight: 600; margin-bottom: 1.2rem; flex: none;
}
.lib .lib-tag{
  display: inline-block; background: var(--lib-accent-soft); color: var(--lib-accent);
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem; white-space: nowrap;
  align-self: flex-start;
}
.lib .lib-center .lib-tag{ align-self: center; }
.lib .lib-price{
  font-family: var(--trs-serif); font-size: 1.9rem; font-weight: 600;
  color: var(--trs-text); line-height: 1;
}
.lib .lib-price small{ font-family: var(--trs-sans); font-size: .85rem; font-weight: 400; color: var(--trs-text-faint); }
.lib .lib-strike{ text-decoration: line-through; color: var(--trs-text-faint); font-size: 1.1rem; margin-right: .4rem; }
.lib .lib-vat{ font-size: .85rem; color: var(--trs-text-faint); margin: .35rem 0 0; }

.lib .lib-product{ padding: 0; overflow: hidden; }
.lib .lib-product .lib-product-head{ background: var(--lib-accent); color: #fff; padding: 1.6rem 1.85rem; }
.lib .lib-product .lib-product-head h3{ color: #fff; margin: 0; }
.lib .lib-product .lib-product-head span{ display:block; font-family: var(--trs-sans); font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; opacity: .8; margin-bottom: .5rem; }
.lib .lib-product .lib-product-body{ padding: 1.85rem; display: flex; flex-direction: column; flex: 1; }

/* ---------- lijsten ---------- */

.lib .lib-list{ list-style: none; padding: 0; margin: 0 0 1.2rem; }
.lib .lib-list li{
  position: relative; padding-left: 1.7rem; margin-bottom: .7rem;
  font-size: .97rem; line-height: 1.55; color: var(--trs-text-muted);
}
.lib .lib-list li::before{
  content: ""; position: absolute; left: 0; top: .55rem;
  width: 8px; height: 8px; border-radius: 2px; background: var(--lib-accent);
}
.lib .lib-list strong{ color: var(--trs-text); font-weight: 600; }

/* ---------- combideal-band ---------- */

.lib .lib-deal{
  background: var(--trs-dark); color: #fff; border-radius: 22px;
  padding: 2.6rem; display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: center;
}
.lib .lib-deal h2, .lib .lib-deal h3{ color: #fff; }
.lib .lib-deal p{ color: rgba(255,255,255,.72); }
.lib .lib-deal .lib-price{ color: #fff; font-size: 2.6rem; }
.lib .lib-deal .lib-strike{ color: rgba(255,255,255,.45); }
.lib .lib-deal .lib-em{ color: var(--trs-coral); }
.lib .lib-deal-buy{ text-align: right; }

/* ---------- tabel ---------- */

.lib .lib-table{ width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--trs-border); }
.lib .lib-table th, .lib .lib-table td{ padding: .9rem 1.1rem; text-align: left; font-size: .95rem; border-bottom: 1px solid var(--trs-border); }
.lib .lib-table th{ background: var(--lib-accent-soft); color: var(--lib-accent); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.lib .lib-table tr:last-child td{ border-bottom: 0; }
.lib .lib-table td:last-child, .lib .lib-table th:last-child{ text-align: right; white-space: nowrap; }
.lib .lib-tablewrap{ overflow-x: auto; }

.lib .lib-table a.gumroad-button, .lib .lib-inline.gumroad-button{
  display: inline-block !important;
  background: var(--lib-accent-soft) !important; color: var(--lib-accent) !important;
  font: 600 .9rem/1 var(--trs-sans) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  padding: .5rem .95rem !important; border-radius: 8px !important;
  border: 0 !important; box-shadow: none !important; text-decoration: none !important;
  height: auto !important; width: auto !important; max-width: none !important;
  transition: background .18s ease, color .18s ease;
}
.lib .lib-table a.gumroad-button:hover, .lib .lib-inline.gumroad-button:hover{ background: var(--lib-accent) !important; color: #fff !important; }

/* ---------- FAQ ---------- */

.lib .lib-faq{ border-top: 1px solid var(--trs-border); }
.lib .lib-faq details{ border-bottom: 1px solid var(--trs-border); padding: 1.1rem 0; }
.lib .lib-faq summary{
  cursor: pointer; list-style: none; font-weight: 600; font-size: 1.02rem;
  color: var(--trs-text); display: flex; justify-content: space-between; gap: 1rem;
}
.lib .lib-faq summary::-webkit-details-marker{ display: none; }
.lib .lib-faq summary::after{ content: "+"; color: var(--lib-accent); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.lib .lib-faq details[open] summary::after{ content: "\2013"; }
.lib .lib-faq details p{ margin: .8rem 0 0; font-size: .97rem; }

/* ---------- kleine dingen ---------- */

.lib .lib-note{ border-left: 3px solid var(--lib-accent); padding: .2rem 0 .2rem 1.1rem; font-size: .93rem; color: var(--trs-text-muted); }
.lib .lib-hr{ border: 0; border-top: 1px solid var(--trs-border); margin: 3rem 0; }
.lib .lib-madewith{ font-size: .9rem; color: var(--trs-text-faint); line-height: 1.6; }
.lib .lib-prose h3{ margin-top: 2rem; }
.lib .lib-prose ul{ padding-left: 1.2rem; color: var(--trs-text-muted); }
.lib .lib-prose li{ margin-bottom: .5rem; }

/* ---------- responsive ---------- */

@media (max-width: 900px){
  .lib .lib-grid-3, .lib .lib-grid-4{ grid-template-columns: repeat(2, 1fr); }
  .lib .lib-deal{ grid-template-columns: 1fr; }
  .lib .lib-deal-buy{ text-align: left; }
  .trs-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .lib section{ padding: 3.25rem 1.15rem; }
  .lib .lib-grid-2, .lib .lib-grid-3, .lib .lib-grid-4{ grid-template-columns: 1fr; }
  .lib .lib-card, .lib .lib-product .lib-product-body, .lib .lib-deal{ padding: 1.5rem; }
  .lib .lib-ctarow .lib-cta{ width: 100%; }
  .trs-header{ position: static; }
  .trs-nav{ margin-left: 0; width: 100%; gap: 1rem; }
  .trs-footer-grid{ grid-template-columns: 1fr; gap: 2rem; }
}

/* ---------- beeld ---------- */

.lib figure{ margin: 0; }
.lib .lib-figure img{
  display: block; width: 100%; height: auto;
  border-radius: 18px; border: 1px solid var(--trs-border);
  background: #fff; box-shadow: rgba(20,15,5,.16) 0 18px 40px -26px;
}
.lib .lib-figure figcaption{
  margin-top: .8rem; font-size: .88rem; color: var(--trs-text-faint); line-height: 1.5;
}
.lib .lib-figure-plain img{ border-radius: 14px; box-shadow: none; }

/* de illustratiewand */
.lib .lib-wall{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; margin-top: 2rem;
}
.lib .lib-wall img{
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 14px; border: 1px solid var(--trs-border); background: #fff;
}

/* striptegel bovenaan een kaart */
.lib .lib-strip{
  display: block; width: calc(100% + 3.7rem); max-width: none;
  margin: -1.85rem -1.85rem 1.4rem; border-radius: 18px 18px 0 0;
  border-bottom: 1px solid var(--trs-border); background: var(--trs-cream);
}

/* diagram op volle breedte */
.lib .lib-diagram img{
  display: block; width: 100%; height: auto;
  border-radius: 18px; border: 1px solid var(--trs-border); background: var(--trs-cream);
}

/* twee kolommen: beeld naast tekst */
.lib .lib-media{ display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; align-items: center; }
.lib .lib-media-wide{ grid-template-columns: 1.15fr 1fr; }

@media (max-width: 900px){
  .lib .lib-wall{ grid-template-columns: repeat(4, 1fr); }
  .lib .lib-media, .lib .lib-media-wide{ grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 620px){
  .lib .lib-wall{ grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .lib .lib-strip{ width: calc(100% + 3rem); margin: -1.5rem -1.5rem 1.2rem; }
}

/* ---------- het woordmerk dat Gumroad zelf injecteert ----------
   gumroad.js hangt in elke a.gumroad-button een <span class="logo-full"> van
   103 x 14 px achter de tekst. Op de grote knop is dat prima — het vertelt de
   bezoeker waar hij gaat betalen — maar hij plakte tegen de tekst aan. In de
   prijstabel is het woordmerk vijf keer breder dan de prijs zelf; daar tonen we
   alleen de prijs, groter en met meer lucht. */

.lib a.gumroad-button .logo-full{ vertical-align: middle; }
.lib .lib-cta.gumroad-button .logo-full{ margin-left: .6rem; }

.lib .lib-table a.gumroad-button .logo-full,
.lib .lib-inline.gumroad-button .logo-full{ display: none; }

.lib .lib-table a.gumroad-button{
  font-size: 1rem !important; font-weight: 700 !important;
  padding: .55rem 1.15rem !important; min-width: 4rem; text-align: center;
}

/* nog niet te koop — geen knop, wel een plek in de tabel */
.lib .lib-soon{ font-size: .85rem; color: var(--trs-text-faint); font-style: italic; white-space: nowrap; }