/* ============================================================
   VANDAAG / TODAY — gedeelde stijl
   Gouden uur: een warme avondlucht, crèmekleurig papier,
   kaarslicht-goud, rozenkwarts en een vleugje amethist.
   ============================================================ */
:root{
  --deep:#3A2320;            /* espresso-inkt */
  --gold:#9A5A22;            /* brons: accenttekst op licht */
  --gold-strong:#C8842F;
  --gold-light:#F6CF8E;      /* kaarslicht */
  --cream:#3A2320;           /* koppen (was licht, nu inkt) */
  --paper:#FFF9F0;
  --text:#4A2F2A;
  --text-soft:#6E4D46;
  --violet:#7B5798;          /* amethist */
  --rose:#C9707A;
  --line:rgba(170,105,75,.30);
  --glass:rgba(255,250,243,.82);
  --shadow:0 18px 40px -24px rgba(120,60,40,.5);
  --font-display:"Cormorant", Georgia, serif;
  --font-body:"Jost", "Segoe UI", system-ui, sans-serif;
  --font-script:"Allura", "Cormorant", cursive;
  --ease:cubic-bezier(.33,.8,.35,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.reduced{scroll-behavior:auto}
body{
  min-height:100svh;
  font-family:var(--font-body);color:var(--text);
  background:
    radial-gradient(46rem 26rem at 84% 2%, rgba(255,226,160,.95), rgba(252,178,120,.4) 42%, transparent 70%),
    radial-gradient(40rem 22rem at 8% 12%, rgba(214,160,205,.35), transparent 70%),
    linear-gradient(180deg,#EDC6CF 0%,#F5C7B0 24%,#FBD6AA 46%,#FDE9CC 70%,#FEF5E9 100%);
  background-attachment:fixed;
  background-color:#FDE9CC;
  line-height:1.55;font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;
  background:radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(170,80,50,.10) 100%);
}
::selection{background:var(--gold-light);color:var(--deep)}
a{color:var(--gold)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:.005em;color:var(--cream)}
.eyebrow{font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600}
.soft{color:var(--text-soft)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- lichtvonkjes + stof ---------- */
.starsky{position:fixed;inset:0;z-index:0;pointer-events:none}
.starsky i{
  position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;color:#FFF6DC;
  filter:drop-shadow(0 0 4px rgba(255,236,190,.9));
  box-shadow:
    11vw 9vh 0 0, 23vw 19vh 0 -0.5px, 7vw 32vh 0 0, 34vw 7vh 0 -0.6px,
    45vw 24vh 0 0, 56vw 10vh 0 -0.4px, 64vw 30vh 0 0, 73vw 13vh 0 -0.6px,
    84vw 26vh 0 0, 92vw 8vh 0 -0.4px, 16vw 46vh 0 -0.6px, 40vw 42vh 0 0,
    59vw 46vh 0 -0.6px, 79vw 42vh 0 0, 95vw 38vh 0 -0.5px, 5vw 58vh 0 -0.6px,
    29vw 60vh 0 0, 69vw 60vh 0 -0.5px, 89vw 57vh 0 0, 49vw 66vh 0 -0.6px;
  animation:skytwinkle 5s ease-in-out infinite;
}
.starsky i:nth-child(2){
  box-shadow:
    10vw 17vh 0 0, 21vw 27vh 0 -0.5px, 31vw 13vh 0 0, 42vw 33vh 0 -0.5px,
    52vw 18vh 0 0, 62vw 22vh 0 -0.6px, 71vw 35vh 0 0, 81vw 18vh 0 -0.4px,
    89vw 32vh 0 0, 97vw 23vh 0 -0.5px, 14vw 39vh 0 0, 37vw 51vh 0 -0.6px,
    57vw 54vh 0 0, 76vw 50vh 0 -0.5px, 96vw 48vh 0 0;
  animation:skytwinkle 6.6s ease-in-out -2.5s infinite;
}
@keyframes skytwinkle{0%,100%{opacity:.25}50%{opacity:.9}}
html.reduced .starsky i{animation:none;opacity:.5}
#dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
html.reduced #dust{display:none}

/* ---------- header + navigatie ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem clamp(1rem,4vw,2.2rem);
  background:linear-gradient(180deg,rgba(255,246,236,.92),rgba(255,246,236,.6) 70%,rgba(255,246,236,0));
}
.wordmark{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-size:1.2rem;letter-spacing:.3em;
  color:var(--deep);font-weight:700;text-decoration:none;
}
.site-nav{display:flex;align-items:center;gap:clamp(.2rem,1.5vw,.9rem);flex-wrap:wrap;justify-content:flex-end}
.site-nav a{
  color:var(--text);text-decoration:none;font-weight:500;font-size:.92rem;
  padding:.4rem .6rem;border-radius:10px;position:relative;white-space:nowrap;
}
.site-nav a::after{
  content:"";position:absolute;left:.6rem;right:.6rem;bottom:.2rem;height:1.5px;
  background:var(--gold-strong);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.site-nav a:hover::after,.site-nav a:focus-visible::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav a.lang-mini::after{display:none}
.site-nav a[aria-current="page"]{color:var(--gold)}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--line);background:rgba(255,250,243,.7);
  backdrop-filter:blur(10px);
  padding:.42rem .95rem;border-radius:999px;color:var(--text);
  font-size:.86rem;font-weight:500;transition:border-color .3s,box-shadow .3s;
}
.pill:hover{border-color:var(--gold-strong);box-shadow:0 0 20px -6px rgba(200,132,47,.6)}
.pill .dot{width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--gold-strong);transition:background .3s}
.pill[aria-pressed="true"] .dot{background:var(--gold-strong)}

/* ---------- knoppen ---------- */
.btn-gold{
  display:inline-block;border:0;border-radius:999px;text-decoration:none;text-align:center;
  background:linear-gradient(135deg,#FBDFA6,#EDB068);
  color:var(--deep);font-weight:600;font-size:1rem;
  padding:.85rem 1.9rem;
  box-shadow:0 0 30px -6px rgba(240,170,90,.7), 0 12px 26px -14px rgba(120,60,40,.6);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 0 44px -4px rgba(240,170,90,.9), 0 16px 30px -14px rgba(120,60,40,.6)}
html.reduced .btn-gold{transition:none}
.btn-line{
  display:inline-block;border:1px solid rgba(154,90,34,.45);background:rgba(255,250,243,.72);
  backdrop-filter:blur(8px);text-decoration:none;text-align:center;
  color:var(--deep);border-radius:999px;padding:.8rem 1.5rem;font-weight:500;font-size:.95rem;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.btn-line:hover{border-color:var(--gold);background:var(--paper);box-shadow:0 0 24px -8px rgba(200,132,47,.6)}
.linkish{background:none;border:0;color:var(--text-soft);text-decoration:underline;text-underline-offset:3px;font-size:.9rem;padding:.4rem .3rem}
.linkish:hover{color:var(--gold)}

/* ---------- paginaframes ---------- */
.page{position:relative;z-index:2;max-width:72rem;margin:0 auto;padding:6.2rem clamp(1rem,4vw,2.2rem) 3rem}
.page-center{min-height:100svh;display:grid;place-items:center;padding-top:5.4rem}
.page-head{text-align:center;max-width:44rem;margin:0 auto clamp(1.6rem,4vh,2.6rem)}
.page-head h1{font-size:clamp(2.2rem,6.5vh,3.4rem);margin:.5rem 0 .6rem;
  background:linear-gradient(168deg,#6A2E48 8%,#B24A2C 55%,#B9731F 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.page-head p{color:var(--text)}
.rise > *{opacity:0;transform:translateY(18px);animation:rise 1s var(--ease) forwards}
.rise > :nth-child(2){animation-delay:.15s}
.rise > :nth-child(3){animation-delay:.3s}
.rise > :nth-child(4){animation-delay:.5s}
.rise > :nth-child(5){animation-delay:.7s}
@keyframes rise{to{opacity:1;transform:none}}
html.reduced .rise > *{animation:none;opacity:1;transform:none}

/* ---------- home ---------- */
.home-grid{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(1.6rem,4vh,2.8rem);padding:6rem clamp(1rem,4vw,2rem) 2.5rem;position:relative;z-index:2}
.home-head{text-align:center;max-width:44rem;margin:0 auto}
.home-head h1,.start-title{
  font-family:var(--font-script);font-weight:400;line-height:1;
  font-size:clamp(3.6rem,min(17vh,19vw),8.6rem);color:#6A2E48;
  padding:.1em .2em 0;margin:.2rem 0 .3rem;
  text-shadow:0 2px 0 rgba(255,246,230,.7), 0 0 40px rgba(255,220,160,.9);
}
.home-head p{color:var(--text);font-size:clamp(1.02rem,2.5vh,1.22rem)}
.tool-cue{text-align:center;color:var(--text-soft);font-size:.95rem}
.tool-cue a{color:var(--gold);font-weight:500;text-decoration:none;border-bottom:1px solid rgba(154,90,34,.5)}
.tool-cue a:hover{border-bottom-color:var(--gold)}

/* ---------- de drie poorten (hoofdingangen) ---------- */
.portals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.8rem);max-width:58rem;margin:0 auto}
.portal{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding:2.2rem 1.3rem 1.7rem;text-align:center;text-decoration:none;color:var(--text);
  border:1px solid var(--line);
  border-radius:160px 160px 26px 26px;           /* poortboog */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,214,150,.55), transparent 62%),
    var(--glass);
  backdrop-filter:blur(8px);
  box-shadow:var(--shadow);
  transition:border-color .35s,transform .5s var(--ease),box-shadow .5s;
  overflow:hidden;
}
.portal::before{
  content:"";position:absolute;inset:10px 10px auto 10px;height:58%;
  border:1px solid rgba(200,132,47,.35);
  border-bottom:0;border-radius:150px 150px 0 0;
  pointer-events:none;
}
.portal:hover,.portal:focus-visible{
  border-color:var(--gold-strong);transform:translateY(-6px);
  box-shadow:0 0 46px -10px rgba(240,170,90,.8), 0 26px 44px -28px rgba(120,60,40,.7);
}
html.reduced .portal{transition:border-color .35s}
.portal svg{width:44px;height:44px;margin-bottom:.2rem}
.portal b{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,2.8vh,1.5rem);color:var(--deep);letter-spacing:.02em}
.portal span{color:var(--text-soft);font-size:.9rem;max-width:16em}

/* ---------- de zes routes als lichtpunten ---------- */
.const-wrap{position:relative;max-width:64rem;margin:0 auto;text-align:center}
.const-wrap > .eyebrow{display:block;margin-bottom:1rem}
.const-row{position:relative;display:flex;justify-content:center;gap:clamp(.6rem,2.6vw,2rem);flex-wrap:wrap}
.star-link{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-decoration:none;min-width:7.4rem;padding:.4rem .2rem;border-radius:14px;transition:transform .4s var(--ease)}
.star-link:hover,.star-link:focus-visible{transform:translateY(-4px)}
html.reduced .star-link{transition:none}
.star-link svg{width:46px;height:46px}
.star-link .halo{fill:#FFE2A8;opacity:.5;transform-box:fill-box;transform-origin:center;animation:halo 6s ease-in-out infinite alternate}
.star-link:nth-child(2n) .halo{animation-delay:-2s}
.star-link:nth-child(3n) .halo{animation-delay:-3.7s}
@keyframes halo{from{transform:scale(.85);opacity:.4}to{transform:scale(1.12);opacity:.75}}
html.reduced .star-link .halo{animation:none}
.star-link .core{fill:#C8842F}
.star-link .ray{stroke:#C8842F;stroke-width:1.6;stroke-linecap:round}
.star-link em{font-family:var(--font-display);font-style:italic;font-weight:600;font-size:1.1rem;color:var(--deep);transition:color .3s;white-space:nowrap}
.star-link:hover em,.star-link:focus-visible em{color:var(--gold)}
@media(min-width:821px){
  .const-row .star-link:nth-child(1){transform:translateY(14px)}
  .const-row .star-link:nth-child(2){transform:translateY(-6px)}
  .const-row .star-link:nth-child(3){transform:translateY(10px)}
  .const-row .star-link:nth-child(4){transform:translateY(-10px)}
  .const-row .star-link:nth-child(5){transform:translateY(6px)}
  .const-row .star-link:nth-child(6){transform:translateY(-14px)}
}

/* ---------- kaarten & lijsten ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.1rem}
.card{
  border:1px solid var(--line);border-radius:22px;background:var(--glass);
  backdrop-filter:blur(8px);padding:1.4rem 1.4rem 1.5rem;color:var(--text);
  text-decoration:none;display:block;box-shadow:var(--shadow);
  transition:border-color .35s,transform .45s var(--ease),box-shadow .45s;
}
.card:hover,.card:focus-visible{
  border-color:var(--gold-strong);transform:translateY(-4px);
  box-shadow:0 0 36px -10px rgba(240,170,90,.75), 0 22px 40px -26px rgba(120,60,40,.7);
}
html.reduced .card{transition:border-color .35s}
.card .tag{display:inline-block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--violet);font-weight:600;margin-bottom:.4rem}
.card h3{font-size:1.45rem;margin-bottom:.35rem}
.card p{color:var(--text-soft);font-size:.95rem}
.card .link{display:inline-block;margin-top:.7rem;color:var(--gold);font-size:.9rem;font-weight:600}

/* ---------- flow (tool & begin) ---------- */
.flow-inner{width:min(96vw,44rem);text-align:center;display:grid;gap:1.1rem;justify-items:center;margin:0 auto}
.flow-progress{display:flex;gap:.55rem}
.flow-progress i{width:.6rem;height:.6rem;border-radius:50%;border:1.5px solid rgba(154,90,34,.55);background:rgba(255,250,243,.6);transition:background .3s,box-shadow .3s}
.flow-progress i.done{background:var(--gold-strong);border-color:var(--gold-strong);box-shadow:0 0 10px rgba(240,170,90,.9)}
.flow-step-label{font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600}
.flow-q{font-size:clamp(1.7rem,5vh,2.6rem);max-width:18em;color:var(--deep)}
.flow-hint{color:var(--text);font-size:.95rem;max-width:32em;margin-top:-.5rem}
.flow-hint:empty,.flow-q:empty{display:none}
.flow-opts{display:grid;gap:.7rem;width:min(92vw,30rem)}
.flow-opts.wrap{display:flex;flex-wrap:wrap;justify-content:center;width:auto;max-width:36rem}
.opt{
  border:1px solid var(--line);border-radius:16px;
  background:var(--glass);backdrop-filter:blur(8px);
  padding:.95rem 1.3rem;color:var(--deep);font-weight:500;
  font-size:clamp(.98rem,2.3vh,1.08rem);text-align:center;
  box-shadow:0 10px 24px -20px rgba(120,60,40,.6);
  transition:border-color .3s,transform .4s var(--ease),box-shadow .4s,background .3s;
  animation:chipin .5s var(--ease) backwards;
}
.flow-opts .opt:nth-child(2){animation-delay:.07s}
.flow-opts .opt:nth-child(3){animation-delay:.14s}
.flow-opts .opt:nth-child(4){animation-delay:.21s}
.flow-opts .opt:nth-child(5){animation-delay:.28s}
.flow-opts .opt:nth-child(6){animation-delay:.35s}
.flow-opts .opt:nth-child(7){animation-delay:.42s}
@keyframes chipin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.reduced .opt{animation:none;transition:border-color .3s}
.opt:hover,.opt:focus-visible{
  border-color:var(--gold-strong);background:var(--paper);transform:translateY(-3px);
  box-shadow:0 0 26px -8px rgba(240,170,90,.85);
}
.opt.pill-opt{border-radius:999px;padding:.75rem 1.5rem}
.vis-goal{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(1.6rem,4.6vh,2.5rem);color:#8A3B2E;max-width:18em;
}
.tool-view{display:none}
.tool-view.active{display:grid}
.start-how{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;justify-content:center;color:var(--text-soft);font-size:.95rem;margin:.5rem 0 1.1rem}
.start-how b{color:var(--deep);font-weight:500}
.start-how .sep{color:var(--gold-strong)}
.why-item{display:grid;grid-template-columns:2.4rem 1fr;gap:.9rem;padding:.9rem 0;border-top:1px solid var(--line)}
.why-item:first-of-type{border-top:0;padding-top:0}
.why-num{width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--deep);background:linear-gradient(135deg,#FBDFA6,#EDB068)}
.why-item b{display:block;color:var(--deep);font-weight:600;margin-bottom:.15rem}
.why-item p{color:var(--text-soft);font-size:.93rem}
.why-src{margin-top:1rem;font-family:var(--font-display);font-style:italic;font-weight:600;font-size:1.1rem;color:var(--gold)}

/* ---------- plan-kaart: een dagboekpagina ---------- */
.plan-card{
  width:min(94vw,34rem);text-align:left;margin:0 auto;
  background:linear-gradient(165deg,#FFFCF6,#FBF0E0);
  border:1px solid var(--line);border-radius:10px 24px 24px 10px;
  border-left:6px solid #D9A066;
  padding:clamp(1.4rem,4vw,2.2rem);
  box-shadow:0 0 60px -16px rgba(240,170,90,.6), 0 34px 60px -36px rgba(120,60,40,.75);
}
.plan-card .eyebrow{margin-bottom:.9rem;display:block}
.plan-row{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.85rem 0;border-top:1px solid var(--line);align-items:baseline}
.plan-row:first-of-type{border-top:0;padding-top:0}
.plan-row b{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--gold)}
.plan-row span{color:var(--deep);font-size:1rem}
.plan-row .when{display:inline-block;margin-top:.3rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);font-weight:600}

/* ---------- route-pagina ---------- */
.route-hero{text-align:center;max-width:40rem;margin:0 auto clamp(1.8rem,4vh,2.6rem)}
.route-hero h1{font-size:clamp(2rem,6vh,3rem)}
.route-emblem{display:grid;place-items:center;margin-bottom:1rem}
.route-emblem .medal{
  width:132px;height:132px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 30%,#FFFDF8,#FBE6C4);
  box-shadow:0 0 44px -4px rgba(245,180,100,.9), inset 0 0 0 3px rgba(255,255,255,.8), inset 0 0 0 4px rgba(200,132,47,.55);
}
.route-emblem svg{width:98px;height:auto}
.route-essence{font-family:var(--font-display);font-style:italic;font-weight:600;color:#8A3B2E;font-size:clamp(1.25rem,3vh,1.55rem);margin:.6rem 0 .9rem}
.route-body{color:var(--text);max-width:34em;margin:0 auto}

.exercise-box{
  max-width:34rem;margin:0 auto;text-align:center;
  border:1px solid var(--line);border-radius:24px;background:var(--glass);
  backdrop-filter:blur(8px);padding:clamp(1.4rem,4vw,2rem);box-shadow:var(--shadow);
  scroll-margin-top:6rem;
}
.ex-step-count{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--violet);font-weight:600;margin-bottom:.6rem}
.ex-step-count:empty{display:none}
.ex-text{font-size:1.1rem;min-height:3.6rem;margin-bottom:.8rem;color:var(--deep)}
.ex-choices{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center}
.ex-choices[hidden]{display:none}
.ex-actions{display:flex;gap:.6rem;justify-content:center;margin-top:.8rem;flex-wrap:wrap}
.route-links{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}

/* ---------- visies (boeken) ---------- */
.book-card{position:relative;text-align:left;cursor:pointer;width:100%;font-family:inherit;font-size:inherit}
.book-card .lijn{font-family:var(--font-display);font-style:italic;font-weight:600;color:#8A3B2E;font-size:1.1rem;margin-bottom:.35rem}
.book-card .spine{position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:4px;background:linear-gradient(180deg,#EDB068,#C9707A,#9C7BB8);opacity:.85}
.book-panel .tag{display:inline-block;color:var(--violet);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.book-panel .lijn{font-family:var(--font-display);font-style:italic;font-weight:600;color:#8A3B2E;font-size:1.25rem;margin-bottom:.7rem}
.book-panel p.kern{color:var(--text);font-size:.98rem;margin-bottom:.8rem}
.book-panel h4{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--violet);font-weight:600;margin:1rem 0 .45rem}
.book-punten{list-style:none;display:grid;gap:.4rem;margin-bottom:.4rem}
.book-punten li{display:grid;grid-template-columns:1.2rem 1fr;gap:.5rem;color:var(--deep);font-size:.95rem}
.book-punten li::before{content:"\2713";color:var(--gold-strong);font-weight:700}
.book-nuance{border-left:2px solid rgba(200,132,47,.6);padding:.15rem 0 .15rem .8rem;color:var(--text-soft);font-size:.93rem}
.book-panel .panel-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end;margin-top:1.2rem}
.leesgids{max-width:44rem;margin:2.6rem auto 0;text-align:center}
.leesgids .cards{margin-top:1rem}
.leesgids .card{cursor:default}
.leesgids .card:hover{transform:none;border-color:var(--line);box-shadow:var(--shadow)}
.leesgids .card b{color:var(--gold);font-family:var(--font-display);font-weight:700;font-size:1.2rem}

/* ---------- overlays & toast ---------- */
.overlay{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  padding:1rem;background:rgba(70,36,30,.45);backdrop-filter:blur(6px);
}
.overlay[hidden]{display:none}
.panel{
  background:linear-gradient(165deg,#FFFCF6,#FBF0E0);
  border-radius:24px;border:1px solid var(--line);
  width:min(30rem,100%);max-height:min(88svh,44rem);overflow:auto;
  padding:clamp(1.4rem,4vw,2.2rem);color:var(--text);
  box-shadow:0 0 60px -16px rgba(240,170,90,.7), 0 40px 80px -40px rgba(80,35,25,.9);
}
.panel-head{display:flex;justify-content:space-between;align-items:start;gap:1rem;margin-bottom:1rem}
.panel-head h2{font-size:clamp(1.5rem,3.2vw,1.9rem);color:var(--deep)}
.close-btn{
  border:1px solid var(--line);background:rgba(255,255,255,.6);border-radius:50%;
  width:2.5rem;height:2.5rem;display:grid;place-items:center;color:var(--text);flex:none;font-size:1.2rem;
}
.close-btn:hover{border-color:var(--gold);color:var(--gold)}
.space-empty{color:var(--text-soft);font-style:italic;font-family:var(--font-display);font-weight:600;font-size:1.3rem;padding:1rem 0}
.space-list{list-style:none;display:grid;gap:.7rem}
.space-item{border:1px solid var(--line);border-radius:16px;padding:.85rem 1.05rem;background:var(--glass);box-shadow:0 10px 24px -20px rgba(120,60,40,.6)}
.space-item .tag{display:inline-block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.2rem}
.space-item p{font-size:.95rem;color:var(--deep)}
.space-item time{display:block;font-size:.76rem;color:var(--text-soft);margin-top:.25rem}
.space-note{font-size:.78rem;color:var(--text-soft);margin-top:1.1rem}
.space-actions{display:flex;gap:.7rem;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:1.8rem}
.linkish.armed{color:#A23A2E;font-weight:600}
.toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,180%);
  background:var(--deep);color:#FFF3DC;
  padding:.7rem 1.35rem;border-radius:999px;font-weight:500;max-width:calc(100vw - 2rem);text-align:center;
  font-size:.9rem;z-index:200;opacity:0;transition:transform .5s var(--ease),opacity .4s;
  box-shadow:0 14px 30px -12px rgba(80,35,25,.8);
}
.toast.show{transform:translate(-50%,0);opacity:1}
html.reduced .toast{transition:none}

/* ---------- footer ---------- */
.site-footer{
  position:relative;z-index:2;text-align:center;color:var(--text-soft);
  font-size:.85rem;padding:1.6rem 1rem 2.2rem;
}
.site-footer a{color:var(--text-soft)}
.site-footer a:hover{color:var(--gold)}

/* ---------- Ko-fi & taal ---------- */
.kofi{
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(135deg,#FBDFA6,#EDB068);color:var(--deep) !important;
  padding:.55rem 1.2rem;border-radius:999px;font-weight:600;font-size:.88rem;
  text-decoration:none;box-shadow:0 0 24px -8px rgba(240,170,90,.8);
  transition:transform .4s var(--ease),box-shadow .4s;margin-bottom:.6rem;
}
.kofi:hover{transform:translateY(-2px);box-shadow:0 0 34px -6px rgba(240,170,90,1)}
html.reduced .kofi{transition:none}
.kofi svg{width:1.05rem;height:1.05rem}
.site-nav a.lang-mini{
  font-size:.78rem;letter-spacing:.14em;font-weight:600;text-decoration:none;
  color:var(--text-soft);border:1px solid var(--line);border-radius:999px;
  padding:.34rem .7rem;background:rgba(255,250,243,.7);
}
.site-nav a.lang-mini:hover{color:var(--gold);border-color:var(--gold)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .portals{grid-template-columns:1fr;max-width:24rem}
  .portal{border-radius:120px 120px 22px 22px;padding:1.7rem 1.2rem 1.4rem}
}
@media (max-width:700px){
  .site-header{flex-wrap:wrap;justify-content:center;gap:.2rem .6rem;padding:.6rem .6rem .5rem;
    background:rgba(255,246,236,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .site-nav{justify-content:center;gap:.1rem .2rem;width:100%}
  .site-nav a{font-size:.86rem;padding:.35rem .45rem}
  .pill{padding:.32rem .7rem;font-size:.8rem}
  .page{padding-top:7.6rem}
  .page-center{padding-top:7.2rem}
  .home-grid{padding-top:7.6rem}
  .plan-row{grid-template-columns:1fr;gap:.15rem}
  .star-link{min-width:44%}
  .exercise-box{scroll-margin-top:8rem}
}