/* Het Laatste Leven - website. Zelfde pixel-tabloidstijl als de krant (krant/style.css). */
@font-face { font-family:"PressStart"; src:url(krant/fonts/PressStart2P-Regular.ttf); font-display:swap; }
@font-face { font-family:"VT323"; src:url(krant/fonts/VT323-Regular.ttf); font-display:swap; }
@font-face { font-family:"Lilita"; src:url(krant/fonts/LilitaOne-Regular.ttf); font-display:swap; }
@font-face { font-family:"Nunito"; src:url(krant/fonts/Nunito-VariableFont_wght.ttf); font-weight:200 1000; font-display:swap; }

:root { --ink:#111; --paper:#fff8e1; --noord:#2b5cd8; --zuid:#e0312b; --zuid-d:#9c1b16; --gold:#ffd83d;
  --grass:#5d9b32; --sky:#7cc8ff; --stone:#8b8b8b; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); font:400 17px/1.55 "Nunito", system-ui, sans-serif;
  background:var(--paper); background-image:radial-gradient(rgba(0,0,0,.07) .6px, transparent .7px); background-size:9px 9px; }
img { image-rendering:pixelated; max-width:100%; }
a { color:var(--noord); }
.wrap { max-width:1080px; margin:0 auto; padding:0 18px; }

/* masthead */
.mast-grass { height:18px; background:url(krant/assets/tiles/grass_side.png) 0 0/36px; image-rendering:pixelated; }
.mast-body { background:url(krant/assets/tiles/dirt.png) 0 0/36px; image-rendering:pixelated; padding:16px 12px 18px; text-align:center; }
.logo { display:inline-block; color:#fff; line-height:1; text-decoration:none; }
.logo .small { display:block; font:clamp(13px,3.2vw,22px)/1 "PressStart"; letter-spacing:.06em;
  text-shadow:2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.logo .big { display:inline-block; font:clamp(34px,9vw,68px)/1 "PressStart"; color:var(--gold); margin-top:8px;
  text-shadow:4px 4px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000; }
.logo .big img { height:.8em; vertical-align:top; margin-left:.2em; filter:drop-shadow(3px 3px 0 #000); }
.tagline { background:#111; color:#fff; text-align:center; font:clamp(16px,2.6vw,22px)/1.15 "VT323"; padding:6px 10px 5px; letter-spacing:.04em; }
.tagline span { color:var(--gold); }

/* ticker */
.ticker { background:var(--gold); border-bottom:3px solid #111; display:flex; align-items:stretch; overflow:hidden; white-space:nowrap; height:40px; }
.tk-label { background:var(--zuid); color:#fff; font:11px/1 "PressStart"; padding:0 14px; display:flex; align-items:center; flex:none; z-index:1; }
.tk-viewport { overflow:hidden; flex:1; display:flex; align-items:center; }
.tk-track { display:inline-flex; animation:tk 40s linear infinite; }
.tk-items { font:18px/1 "Lilita"; letter-spacing:.03em; text-transform:uppercase; padding-left:14px; }
.tk-items i { display:inline-block; width:9px; height:9px; background:var(--zuid); margin:0 14px 2px; vertical-align:middle; }
@keyframes tk { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .tk-track { animation:none; } .tk-items[aria-hidden] { display:none; } }

/* knoppen */
.btn { display:inline-block; font:14px/1.2 "PressStart"; color:#fff; text-decoration:none; text-align:center;
  background:var(--grass); border:3px solid #111; box-shadow:4px 4px 0 #111; padding:14px 18px; margin:6px 10px 6px 0;
  text-shadow:2px 2px 0 rgba(0,0,0,.45); transition:transform .06s; cursor:pointer; }
.btn:hover { background:#6db53b; transform:translate(-1px,-1px); box-shadow:5px 5px 0 #111; }
.btn:active { transform:translate(3px,3px); box-shadow:1px 1px 0 #111; }
.btn-big { font-size:clamp(16px,2.4vw,22px); padding:20px 26px; background:var(--zuid); }
.btn-big:hover { background:#f2433c; }
.btn-small { font-size:11px; padding:10px 12px; }
.btn-stone { background:#6f6f6f url(krant/assets/tiles/stone.png) 0 0/24px; }
.btn-stone:hover { background-color:#7d7d7d; }

/* stickers en koppen */
.sticker { display:inline-block; background:var(--zuid); color:#fff; font:12px/1 "PressStart"; padding:9px 11px; border:3px solid #111;
  box-shadow:3px 3px 0 #111; transform:rotate(-2deg); margin:6px 0 4px; }
.lead-label { display:inline-block; background:#111; color:var(--gold); font:12px/1 "PressStart"; padding:8px 10px; letter-spacing:.04em; }
.lead-date { font:24px/1.1 "VT323"; margin:8px 0 6px; }
h1 { font:400 clamp(34px,5.4vw,58px)/1.02 "Lilita"; text-transform:uppercase; letter-spacing:.01em; margin:10px 0 12px; color:#111; }
h1 em { font-style:normal; color:var(--zuid); }
.deck { font-size:19px; font-weight:700; margin:0 0 16px; max-width:40em; }
.sect { font:16px/1.2 "PressStart"; background:var(--gold); border:3px solid #111; box-shadow:4px 4px 0 #111; display:inline-block;
  padding:10px 14px 9px; margin:0 0 18px; transform:rotate(-1deg); }

/* homepage: nieuwste editie */
.lead { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:34px; align-items:center; padding:34px 0 20px; }
.lead-cover { display:block; border:3px solid #111; box-shadow:8px 8px 0 #111; background:#fff; transform:rotate(-1.2deg); transition:transform .15s; }
.lead-cover:hover { transform:rotate(0) scale(1.01); }
.lead-cover img { display:block; width:100%; height:auto; image-rendering:auto; }
.about { background:#fff; border:3px solid #111; box-shadow:6px 6px 0 #111; padding:22px 22px 10px; margin:30px 0 40px; position:relative; }
.about .sect { position:absolute; top:-22px; left:16px; margin:0; }
.about p:first-of-type { margin-top:14px; }

/* archief */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:24px; margin-bottom:46px; }
.card { display:flex; flex-direction:column; background:#fff; border:3px solid #111; box-shadow:5px 5px 0 #111; color:#111; text-decoration:none; transition:transform .1s; }
.card:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 #111; }
.card-img { display:block; border-bottom:3px solid #111; aspect-ratio:480/679; overflow:hidden; background:#ddd; }
.card-img img { display:block; width:100%; height:auto; image-rendering:auto; }
.card-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; background:#111; color:#fff; padding:7px 9px; }
.card-num { font:10px/1 "PressStart"; color:var(--gold); }
.card-date { font:17px/1 "VT323"; text-align:right; }
.card-title { font:400 21px/1.08 "Lilita"; text-transform:uppercase; padding:10px 10px 12px; }
.card-title em { font-style:normal; color:var(--zuid); }

/* editiepagina */
.edhead { padding:28px 0 6px; }
.edhead h1 { font-size:clamp(30px,4.6vw,50px); }
.btnrow { margin:4px 0 6px; }
.viewtoggle { display:flex; gap:0; margin:18px 0 6px; }
.viewtoggle button { font:11px/1 "PressStart"; padding:11px 12px; border:3px solid #111; background:#fff; color:#111; cursor:pointer; margin-right:-3px; }
.viewtoggle button[aria-pressed="true"] { background:#111; color:var(--gold); }
.hint { font:19px/1.1 "VT323"; color:#555; margin:6px 0 12px; }
@media (min-width:900px) { .hint { display:none; } }
.viewer { border:3px solid #111; box-shadow:7px 7px 0 #111; background:#3b3b3b url(krant/assets/tiles/deepslate.png) 0 0/48px; margin:0 auto 34px; max-width:900px; }
.frame-wrap { position:relative; overflow:hidden; width:100%; display:none; }
.frame-wrap iframe { position:absolute; left:0; top:0; border:0; transform-origin:0 0; display:block; background:transparent; }
.viewer[data-view="krant"] .frame-wrap { display:block; }
.viewer[data-view="krant"] .pages { display:none; }
.pages { padding:10px; }
.pimg { display:block; margin:0 0 10px; }
.pimg:last-child { margin-bottom:0; }
.pimg img { display:block; width:100%; height:auto; image-rendering:auto; box-shadow:0 0 0 2px #111; }
.links { background:#fff; border:3px solid #111; box-shadow:6px 6px 0 #111; padding:22px; margin:0 0 30px; position:relative; }
.links .sect { position:absolute; top:-22px; left:16px; margin:0; }
.links ul { margin:14px 0 0; padding:0; list-style:none; columns:2 260px; column-gap:28px; }
.links li { break-inside:avoid; padding:4px 0 4px 18px; position:relative; }
.links li::before { content:""; position:absolute; left:0; top:12px; width:8px; height:8px; background:var(--grass); }
.ednav { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:0 0 40px; flex-wrap:wrap; }
.ednav .btn { margin:0; }

/* footer */
.foot-grass { height:12px; background:url(krant/assets/tiles/grass_top.png) 0 0/12px; image-rendering:pixelated; }
.foot-body { background:url(krant/assets/tiles/dirt.png) 0 0/36px; image-rendering:pixelated; color:#fff; text-align:center; padding:18px 14px 22px;
  font:19px/1.3 "VT323"; letter-spacing:.02em; text-shadow:1px 1px 0 #000; }
.foot-body p { margin:4px 0; }
.foot-body a { color:var(--gold); }

/* 404 */
.nf { background:#3a0000; }
.gameover { text-align:center; color:#fff; padding:90px 10px; }
.gameover h1 { color:#fff; font:clamp(30px,7vw,64px)/1.1 "PressStart"; text-shadow:4px 4px 0 #000; }
.gameover p { font:26px/1.2 "VT323"; }

@media (max-width:760px) {
  body { font-size:16px; }
  .lead { grid-template-columns:1fr; gap:22px; padding-top:22px; }
  .lead-cover { max-width:420px; margin:0 auto; width:100%; }
  .lead-text .btn { display:block; margin-right:0; }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .card-title { font-size:17px; }
  .card-date { font-size:15px; }
  .viewer { box-shadow:4px 4px 0 #111; margin-left:-6px; margin-right:-6px; }
  .wrap { padding:0 12px; }
}