/* rikulatti.com — stil, papier en ink. Een gedagte op 'n slag. */
:root{
  --bg:#f6f3ee; --ink:#1f1d1a; --dof:#7a746c; --lyn:#e2dcd2; --aksent:#8b3a26; --kaart:#fbf9f5;
  --serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kol:34rem;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#141312; --ink:#e8e3da; --dof:#9a948a; --lyn:#2c2a27; --aksent:#d79a7e; --kaart:#1b1a18; }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--serif); font-size:1.2rem; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration-color:var(--lyn); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ color:var(--aksent); text-decoration-color:currentColor; }
em{ font-style:italic; }

/* Kop en voet */
.top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
      padding:1.6rem clamp(1rem,4vw,2.5rem); font-family:var(--sans); font-size:.82rem; letter-spacing:.02em; }
.top .naam{ text-decoration:none; font-weight:500; }
.top nav{ display:flex; gap:1.4rem; }
.top nav a{ text-decoration:none; color:var(--dof); }
.top nav a:hover, .top nav a[aria-current]{ color:var(--ink); }
main{ flex:1; width:100%; max-width:calc(var(--kol) + 2rem); margin:0 auto; padding:0 1rem; }
.voet{ display:flex; justify-content:center; gap:1.6rem; padding:3rem 1rem 2.2rem;
       font-family:var(--sans); font-size:.78rem; }
.voet a{ color:var(--dof); text-decoration:none; }
.voet a:hover{ color:var(--ink); }

/* Tuis: een gedagte */
.tuis main{ display:flex; align-items:center; }
.gedagte{ width:100%; padding:8vh 0 4vh; }
.stanza{ font-size:clamp(1.35rem,3.2vw,1.65rem); line-height:1.55; }
.bron{ margin-top:2.6rem; font-family:var(--sans); font-size:.8rem; color:var(--dof); text-align:center;
       display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.bron p{ margin:0; }
.bron-omslag img{ display:block; width:clamp(6.5rem, 11vw, 8.5rem); height:auto; border-radius:2px;
                  box-shadow:0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.10); transition:transform .25s ease; }
.bron-omslag:hover img{ transform:translateY(-2px); }
.bron a{ color:var(--ink); text-decoration:none; }
.bron span{ margin-left:.5rem; }
.bron span a{ color:var(--dof); }
.nog{ text-align:center; font-family:var(--sans); font-size:.75rem; margin-top:.4rem; }
.nog a{ color:var(--dof); text-decoration:none; }

/* Gedig */
.plek{ font-family:var(--sans); font-size:.75rem; color:var(--dof); letter-spacing:.03em; margin:3rem 0 .4rem; }
.plek a{ color:var(--dof); text-decoration:none; }
h1{ font-weight:400; font-size:clamp(1.7rem,4vw,2.1rem); line-height:1.2; margin:.2rem 0 2.4rem; letter-spacing:-.005em; }
.gedig-stuk h1{ font-style:italic; }
.gedig{ margin:0; }
.gedig-blok{ margin:0 0 1.55em; overflow-wrap:anywhere; }
.blaai{ display:flex; justify-content:space-between; gap:1rem; margin:3.5rem 0 1rem; padding-top:1.2rem;
        border-top:1px solid var(--lyn); font-family:var(--sans); font-size:.78rem; }
.blaai a{ color:var(--dof); text-decoration:none; max-width:48%; }
.blaai a[rel=next]{ text-align:right; margin-left:auto; }
.blaai a:hover{ color:var(--ink); }

/* Inhoudsopgawe */
.boek-kop{ margin:3rem 0 2.5rem; }
.boek-kop h1{ font-style:italic; font-size:clamp(2.4rem,7vw,3.4rem); margin-bottom:.4rem; }
.onder{ font-family:var(--sans); font-size:.8rem; color:var(--dof); margin:0 0 1.6rem; }
.onder a{ color:var(--dof); }
.beskrywing{ margin-bottom:1.6rem; }
.begin{ font-family:var(--sans); font-size:.85rem; color:var(--aksent); text-decoration:none; }
.inhoud{ list-style:none; padding:0; margin:0; border-top:1px solid var(--lyn); }
.inhoud li a{ display:grid; grid-template-columns:2.4rem 1fr; column-gap:.4rem; padding:.85rem 0;
              border-bottom:1px solid var(--lyn); text-decoration:none; }
.inhoud .nr{ font-family:var(--sans); font-size:.72rem; color:var(--dof); padding-top:.38rem; grid-row:span 2; }
.inhoud .titel{ font-style:italic; }
.inhoud .reel{ color:var(--dof); font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inhoud li a:hover .titel{ color:var(--aksent); }

/* Omslae */
.boek-kop.met-omslag{ display:grid; grid-template-columns:9.5rem 1fr; gap:1.8rem; align-items:end; }
.boek-omslag{ width:100%; height:auto; border-radius:3px; box-shadow:0 2px 4px rgba(0,0,0,.08), 0 12px 30px rgba(0,0,0,.14); }
.boek-teks .onder{ margin-bottom:1rem; }
.boek-teks p:last-child{ margin-bottom:0; }
@media (max-width:520px){ .boek-kop.met-omslag{ grid-template-columns:1fr; } .boek-omslag{ width:11rem; } }
.boek-item{ display:flex; gap:1.1rem; align-items:center; }
.klein-omslag{ display:block; width:3.6rem; height:auto; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.10); }

/* Lyste: writing / work / music / about */
.lys h1{ margin-top:3rem; }
.inleiding{ margin-top:0; }
.item{ padding:1.1rem 0; border-bottom:1px solid var(--lyn); }
.item:first-of-type{ border-top:1px solid var(--lyn); }
.item a{ text-decoration:none; }
.item .titel{ font-size:1.3rem; }
.item a:hover .titel{ color:var(--aksent); }
.item p{ margin:.2rem 0 0; color:var(--dof); font-size:1.05rem; }
.datum{ font-family:var(--sans); font-size:.72rem !important; letter-spacing:.02em; margin-top:.4rem !important; }
.stil{ color:var(--dof); }
.knoppies{ display:flex; gap:.7rem; flex-wrap:wrap; margin:1.6rem 0 2.4rem; }
.knop{ font-family:var(--sans); font-size:.8rem; text-decoration:none; padding:.6rem 1.15rem; border-radius:999px;
       background:var(--ink); color:var(--bg); }
.knop:hover{ background:var(--aksent); color:var(--bg); }
.stil-knop{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--lyn); }
.stil-knop:hover{ background:transparent; color:var(--aksent); box-shadow:inset 0 0 0 1px currentColor; }

/* Musiek */
.album{ display:grid; grid-template-columns:7rem 1fr; gap:1.3rem; padding:1.6rem 0; border-top:1px solid var(--lyn); }
.album:not(:has(.omslag)){ grid-template-columns:1fr; }
.omslag{ width:7rem; height:7rem; object-fit:cover; border-radius:3px; background:var(--lyn); }
.album h2{ font-weight:400; font-size:1.35rem; margin:0 0 .6rem; }
.jaar{ font-family:var(--sans); font-size:.72rem; color:var(--dof); margin-left:.4rem; }
.snitte{ margin:0; padding-left:1.2rem; }
.snit{ padding:.35rem 0; }
.snit-titel{ display:block; font-size:1.05rem; }
.snit audio{ width:100%; max-width:22rem; height:32px; margin-top:.2rem; }
.stroom{ font-family:var(--sans); font-size:.8rem; color:var(--dof); margin-top:2rem; }
.stroom a{ color:var(--dof); }
@media (max-width:520px){ .album{ grid-template-columns:1fr; } }

/* Essay en oor */
.essay .lyf{ font-size:1.2rem; }
.essay .lyf img{ max-width:100%; height:auto; }
.essay .lyf p{ margin:0 0 1.1em; }
.portret{ width:9rem; height:9rem; object-fit:cover; border-radius:50%; float:right; margin:0 0 1rem 1.4rem; }
@media (max-width:520px){ .portret{ float:none; display:block; margin:0 0 1.4rem; } }

.leeg{ padding:20vh 0; text-align:center; color:var(--dof); }

/* Speler */
.speel-album{ font-family:var(--sans); font-size:.78rem; border:0; cursor:pointer; padding:.5rem 1rem; border-radius:999px;
              background:var(--ink); color:var(--bg); margin:0 0 .9rem; display:inline-flex; gap:.45rem; align-items:center; }
.speel-album:hover{ background:var(--aksent); }
.speel-album .ikoon{ font-size:.7rem; width:.8rem; text-align:center; }
.snitte{ list-style:none; padding:0; margin:0; }
.snit{ padding:0; border-bottom:1px solid var(--lyn); }
.snit:last-child{ border-bottom:0; }
.snit-knop{ all:unset; box-sizing:border-box; cursor:pointer; width:100%; display:grid; grid-template-columns:1.8rem 1fr auto;
            align-items:baseline; gap:.4rem; padding:.55rem 0; font-family:var(--serif); font-size:1.05rem; color:var(--ink); }
.snit-knop:hover .snit-titel{ color:var(--aksent); }
.snit-knop:focus-visible{ outline:2px solid var(--aksent); outline-offset:2px; }
.snit-nr{ font-family:var(--sans); font-size:.72rem; color:var(--dof); }
.snit-tyd{ font-family:var(--sans); font-size:.72rem; color:var(--dof); font-variant-numeric:tabular-nums; }
.snit.aktief .snit-titel{ color:var(--aksent); }
.snit.aktief .snit-nr{ color:transparent; position:relative; }
.snit.aktief .snit-nr::after{ content:'♪'; color:var(--aksent); position:absolute; left:0; font-size:.85rem; }
.snit.laai .snit-tyd::before{ content:'loading… '; }
.vordering{ height:3px; background:var(--lyn); margin:0 0 .55rem 2.2rem; border-radius:2px; cursor:pointer; display:none; position:relative; }
.vordering::before{ content:''; position:absolute; left:0; right:0; top:-8px; bottom:-8px; } /* groter raakarea */
.vordering span{ display:block; height:100%; width:0; background:var(--aksent); border-radius:2px; }
.snit.aktief .vordering{ display:block; }

/* Gee iets */
.dankie{ font-style:italic; color:var(--aksent); margin:-1rem 0 1.6rem; }
.gee{ margin:1.4rem 0 2.6rem; }
.gee-knop{ font-family:var(--sans); font-size:.8rem; cursor:pointer; padding:.6rem 1.15rem; border-radius:999px; border:0;
           background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--lyn); }
.gee-knop:hover, .gee.oop .gee-knop{ color:var(--aksent); box-shadow:inset 0 0 0 1px currentColor; }
.gee-paneel{ margin-top:1rem; padding:1.2rem 1.2rem 1rem; border:1px solid var(--lyn); border-radius:12px; background:var(--kaart);
             animation:vou .25s ease; }
@keyframes vou{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.bedrae{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.bedrag{ font-family:var(--sans); font-size:.85rem; padding:.6rem 0; border-radius:8px; border:0; cursor:pointer;
         background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--lyn); }
.bedrag:hover{ box-shadow:inset 0 0 0 1px var(--dof); }
.bedrag.gekies{ background:var(--ink); color:var(--bg); box-shadow:none; }
.eie{ display:flex; align-items:center; gap:.4rem; margin:1rem 0; font-family:var(--sans); font-size:.78rem; color:var(--dof); }
.eie span{ margin-left:auto; }
.eie input{ width:6.5rem; font:inherit; font-size:.9rem; color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--lyn);
            padding:.25rem .1rem; outline:none; }
.eie input:focus{ border-bottom-color:var(--aksent); }
.gee-stuur{ border:0; cursor:pointer; width:100%; text-align:center; }
.gee-stuur:disabled{ opacity:.6; cursor:default; }
.gee-nota{ font-family:var(--sans); font-size:.7rem; color:var(--dof); margin:.7rem 0 0; text-align:center; }
.gee-fout{ font-family:var(--sans); font-size:.75rem; color:var(--aksent); margin:.5rem 0 0; text-align:center; }
@media (max-width:420px){ .bedrae{ grid-template-columns:repeat(2,1fr); } }