/* ============================================================
   TK ROGUE — essay / landing pages (/die-rubriek/, /afrikaans-scifi/)
   The same archive-desk surface as /works/, reduced to what a page of
   running prose needs: the aged sheet, the registration corners, the
   oxblood accent, and the four house faces.
   Served from /css/ deliberately — /assets/* carries a 7-day cache in
   netlify.toml and a stylesheet should go live the moment it changes.
   ============================================================ */
:root{
  --ink:#0F0C07; --ink-soft:#2C2417; --muted:#43371F; --faint:#5C4C31;
  --rule:rgba(30,22,10,.26); --rule-strong:rgba(30,22,10,.46);
  --accent:#9E3E5E;                 /* oxblood — links and labels */
  --violet:#7B2D8E; --violet-bd:rgba(123,45,142,.5);
  --sans:'Arimo',Helvetica,Arial,sans-serif;
  --mono:'Courier Prime','Courier New',monospace;
  --serif:'Spectral',Georgia,serif;
  --type:'Special Elite',monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ overflow-x:hidden; }
body{
  color:var(--ink); font-family:var(--serif); line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 60% at 50% 8%, #16130d, #0C0B08 60%, #050403);
  padding:24px 14px calc(46px + env(safe-area-inset-bottom));
}

/* the sheet */
.wrap{
  position:relative; isolation:isolate; max-width:760px; margin:0 auto;
  padding:56px 30px 58px; border-radius:2px;
  background:
    radial-gradient(circle at 82% 7%,  transparent 46px, rgba(108,74,40,.20) 48px, rgba(108,74,40,.08) 56px, transparent 60px),
    radial-gradient(circle at 18% 34%, transparent 52px, rgba(108,74,40,.16) 54px, rgba(108,74,40,.07) 63px, transparent 67px),
    radial-gradient(circle at 78% 66%, transparent 44px, rgba(108,74,40,.18) 46px, rgba(108,74,40,.08) 54px, transparent 58px),
    radial-gradient(220px 160px at 12% 11%, rgba(96,66,34,.14), transparent 70%),
    radial-gradient(230px 160px at 88% 44%, rgba(96,66,34,.12), transparent 70%),
    radial-gradient(240px 170px at 20% 86%, rgba(96,66,34,.12), transparent 70%),
    url('/assets/paper/paper-aged.webp') center 32% / cover no-repeat,
    #CDB383;
  box-shadow:0 2px 4px rgba(0,0,0,.5), 0 26px 60px -18px rgba(0,0,0,.85),
             inset 0 0 120px 22px rgba(52,38,20,.38);
}
.wrap::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.6;
  background:url('/assets/paper/grain.png'); background-size:256px; border-radius:2px;
  animation:grain 8s steps(6) infinite; }
@keyframes grain{ 0%{ transform:translate(0,0) } 100%{ transform:translate(-12px,8px) } }
@media (prefers-reduced-motion: reduce){ .wrap::before{ animation:none } }
.wrap > *:not(.reg){ position:relative; z-index:1; }

/* registration corners — the plate marks on every Rubriek sheet */
.reg{ position:absolute; inset:0; z-index:2; pointer-events:none; color:rgba(60,46,28,.5); }
.reg .br{ position:absolute; width:18px; height:18px; border:2px solid currentColor; }
.reg .br.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.reg .br.tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
.reg .br.bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
.reg .br.br2{ bottom:14px; right:14px; border-left:0; border-top:0; }

/* masthead */
.back{ display:inline-block; margin-bottom:22px; font-family:var(--sans); font-size:12px;
  letter-spacing:.08em; font-weight:600; color:var(--accent); text-decoration:none; border-bottom:1px solid var(--violet-bd); }
.org{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.series{ font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; color:var(--ink-soft); margin-top:6px; }
h1{ font-family:var(--type); font-size:clamp(28px,6vw,44px); line-height:1.12; font-weight:400;
  margin:14px 0 10px; letter-spacing:.01em; }
.lede{ font-size:clamp(17px,2.4vw,19px); color:var(--ink-soft); margin:14px 0 4px; }
.rule{ height:1px; background:var(--rule-strong); margin:28px 0; }

h2{ font-family:var(--sans); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin:34px 0 12px; font-weight:600; }
h3{ font-family:var(--serif); font-size:19px; margin:24px 0 8px; }
p{ margin:0 0 15px; }
p + h2{ margin-top:38px; }
a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(158,62,94,.4); }
a:hover{ border-bottom-color:var(--accent); }
strong{ font-weight:600; }
em[lang="af"], .af{ font-style:italic; }

blockquote{ margin:22px 0; padding:2px 0 2px 18px; border-left:2px solid var(--violet-bd);
  font-family:var(--mono); font-size:15px; color:var(--muted); }

ul{ margin:0 0 16px 20px; }
li{ margin-bottom:9px; }

figure{ margin:26px 0; }
figure img{ display:block; width:100%; height:auto; border:1px solid var(--rule); border-radius:2px; }
figcaption{ font-family:var(--mono); font-size:12px; color:var(--faint); margin-top:8px; }

/* the file-card list of releases */
.files{ list-style:none; margin:0; padding:0; }
.files li{ display:flex; gap:12px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--rule); }
.files .code{ font-family:var(--mono); font-size:12px; color:var(--faint); flex:0 0 58px; letter-spacing:.06em; }

/* the summary panel in the other language */
.alt{ margin-top:34px; padding:20px 22px; border:1px solid var(--rule-strong); border-radius:2px;
  background:rgba(255,250,238,.28); }
.alt h2{ margin-top:0; }

footer{ margin-top:40px; padding-top:18px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:12px; color:var(--faint); }
footer a{ border-bottom-color:rgba(158,62,94,.3); }
footer .links{ margin-bottom:10px; }
footer .links a{ margin-right:14px; }

@media (max-width:520px){
  .wrap{ padding:36px 20px 44px; }
}