:root{
  /* Palette — newspaper x pulp x zine */
  --ink:#101011; --ink-2:#3a3a3a; --paper:#f6f1e4; --panel:#ffffff;
  --rule:#0f0f10; --accent:#0b4f6c; --pop:#e7382b; --pulp:#ffb703;
  --civic:#2a66ff; --noir:#111111; --sci:#19c7d1;
  --radius:14px; --gap:1.25rem; --container:1200px;
  --grid-gap: clamp(.9rem, 2vw, 1.25rem);

  /* textures */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --halftone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23000000' fill-opacity='.08'%3E%3Ccircle cx='5' cy='5' r='1.2'/%3E%3Ccircle cx='35' cy='20' r='1.2'/%3E%3Ccircle cx='18' cy='32' r='1.2'/%3E%3Ccircle cx='50' cy='50' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ========== Base ========== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:'Libre Franklin',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  line-height:1.55; font-size:16px; position:relative;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); background-size:300px 300px;
  mix-blend-mode:multiply; opacity:.6;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.container{
  width:min(100%, var(--container));
  margin-inline:auto;
  padding-inline:clamp(1rem, 4vw, 2rem);
  position:relative; z-index:1;
}

/* ========== Header / Nav ========== */
.frame{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, #fff 8%);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:4px solid var(--pop);
}
.nav{ display:flex; align-items:center; gap:1rem; padding-block:.6rem; }
.brand{
  font-family:'Playfair Display','Source Serif 4',serif;
  font-weight:700; letter-spacing:.5px; font-size:1.35rem;
}
.brand em{ font-family:'Shrikhand',cursive; font-style:normal; font-weight:400; letter-spacing:.5px; }

.nav ul{
  list-style:none; margin:0 0 0 auto; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.nav a{
  padding:.45rem .7rem; font-weight:700; font-size:.86rem; background:#fff;
  border:1px solid #00000018; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.nav a:hover{
  transform:translateY(-1px) rotate(-1deg);
  box-shadow:0 6px 12px rgba(0,0,0,.08);
  background:color-mix(in srgb, var(--pulp) 18%, #fff 82%);
}
.nav a[aria-current="page"]{
  border-color:var(--civic);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--civic) 25%, transparent);
}

/* ========== Masthead ========== */
.masthead{ position:relative; overflow:hidden; border-block:8px solid var(--pop); }
.masthead::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.95;
  background:
    radial-gradient(1200px 300px at 65% 20%, color-mix(in srgb, var(--pulp) 16%, transparent) 0%, transparent 60%),
    repeating-radial-gradient(circle at 20% 80%, #0000 0 6px, #0000000c 6.5px 7px),
    linear-gradient(0deg, #ffffff, #ffffff);
}
.wrap{
  display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:end;
  padding-block:clamp(1.6rem, 7vw, 4.2rem); position:relative;
}
.masthead .flag{
  font-family:'Playfair Display',serif; font-weight:700; line-height:1;
  font-size:clamp(2.6rem, 7.2vw, 4.6rem); letter-spacing:.5px; text-transform:uppercase;
  color:var(--ink); border-bottom:2px solid #00000022; margin:0 0 .4rem;
}
.masthead .kicker{
  font-family:'Fira Code',ui-monospace,Menlo,Consolas,monospace;
  color:var(--civic); font-size:.95rem; letter-spacing:.2px;
}
.masthead .dek{ max-width:60ch; color:var(--ink-2); }

/* ========== Filters / Chips ========== */
.filters{
  position:relative; z-index:200;
  background:#fff8; backdrop-filter:blur(2px);
  border-block:1px dashed #00000026;
}
.filters .bar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding:.8rem 0; }
.filters input{
  flex:1; min-width:220px; padding:.5rem .7rem; font:600 .95rem/1.2 'Libre Franklin',sans-serif;
  border:1px solid #00000022; border-radius:8px;
}
.filters select{
  appearance:none; padding:.5rem .7rem; font-weight:700; background:#fff;
  border:1px solid #0001; border-radius:8px;
}

.chips{ display:flex; gap:.6rem; align-items:center; }
.chips-more-wrap{ position:relative; z-index:1001; }
.chips-more{
  display:none; margin-left:.4rem; padding:.45rem .6rem;
  font:700 .9rem/1 'Libre Franklin',sans-serif;
  background:#fff; border:1px solid #0001; border-radius:8px;
}

.chip{
  padding:.45rem .7rem; font-weight:700; font-size:.85rem; background:#fff;
  border:1px solid #00000022; border-radius:999px;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.chip:hover{ transform:translateY(-1px); background:color-mix(in srgb, #000 2%, #fff 98%); }
.chip.active{
  background:color-mix(in srgb, var(--civic) 14%, #fff 86%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--civic) 25%, transparent);
}
.chip[data-variant="pulp"]{ background:color-mix(in srgb, var(--pulp) 12%, #fff 88%); border-color:color-mix(in srgb, var(--pulp) 40%, #0000); }
.chip[data-variant="tech"]{ background:color-mix(in srgb, var(--civic) 10%, #fff 90%); border-color:color-mix(in srgb, var(--civic) 35%, #0000); }

.chips-menu{
  position:absolute; top:calc(100% + .4rem); left:0; z-index:1002;
  display:none; flex-direction:column; gap:.25rem; overflow:auto;
  min-width:220px; max-width:min(80vw, 560px);
  padding:.4rem 0; background:#fff; border:1px solid #0002; border-radius:8px;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.chips-menu.open{ display:flex; }
.chips-menu.align-right{ left:auto; right:0; }
.chips-menu .chip{ width:100%; text-align:left; white-space:nowrap; }

/* ========== Preview Grid / Cards ========== */
.preview{ padding-block:1.6rem 3.2rem; }
.grid{ display:grid; grid-template-columns:repeat(12, 1fr); gap:var(--grid-gap); }

.card{
  grid-column:span 6;
  display:flex; flex-direction:column; position:relative; overflow:hidden;
  background:var(--panel);
  border:1px solid #00000022; border-radius:var(--radius);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  content-visibility:auto; contain-intrinsic-size:360px 480px;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain), var(--halftone);
  opacity:.23; mix-blend-mode:multiply;
}
.card:hover{
  transform:translateY(-6px) rotate(-1deg) scale(1.02);
  box-shadow:0 16px 28px rgba(0,0,0,.22);
  filter:contrast(105%) saturate(105%);
}

.thumb{
  aspect-ratio:16/9; overflow:hidden; background:
    linear-gradient(135deg, #f2eadb, #fff),
    radial-gradient(400px 200px at 70% 80%, #00000010 0, transparent 60%);
  border-bottom:1px solid #00000018;
}
.thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.thumb.badge-tech{
  background:linear-gradient(135deg, #dfe8ff, #fff),
             radial-gradient(420px 220px at 75% 75%, #2a66ff22 0, transparent 60%);
}
.thumb.badge-pulp{
  background:linear-gradient(135deg, #ffe8c2, #fff),
             radial-gradient(420px 220px at 75% 75%, #ff6b0022 0, transparent 60%);
}
.thumb.badge-noir{
  background:linear-gradient(135deg, #2b2b2b, #111),
             radial-gradient(420px 220px at 70% 80%, #ffffff11 0, transparent 60%);
}
.thumb.badge-sci{
  background:linear-gradient(135deg, #e8fffd, #fff),
             radial-gradient(420px 220px at 70% 80%, #19c7d122 0, transparent 60%);
}

.card .body{ position:relative; padding:1rem 1rem 1.1rem; }
.label{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.75rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
}
.label.tech{ color:var(--civic); }
.label.opinion{ color:#8f3d00; }
.label.editorial{ color:var(--accent); }
.label.noir{ color:var(--noir); font-style:italic; }
.label.sci{ color:var(--sci); text-shadow:0 0 3px #00000066; }
.label .dot{ box-shadow:0 0 0 3px #0000000f; }
.card h3{ margin:.45rem 0 .25rem; font:700 1.25rem/1.2 'Source Serif 4',serif; }
.meta{ color:var(--ink-2); font-size:.9rem; }

/* map category → accent color (used by no-image cards) */
.card[data-type="technical"]{ --accent-card: var(--civic); }
.card[data-type="opinion"]  { --accent-card: #8f3d00; }
.card[data-type="editorial"]{ --accent-card: var(--accent); }
.card[data-type="noir"]     { --accent-card: var(--noir); }
.card[data-type="sci"]      { --accent-card: var(--sci); }

/* no-image cards (intentional style) */
.card.no-thumb{
  position:relative; min-height:auto;
  box-shadow:0 10px 22px rgba(0,0,0,.06), inset 0 1px 0 #fff;
}
.card.no-thumb::before{
  content:""; position:absolute; inset:0 0 auto 0; height:6px;
  border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent-card) 80%, #fff 20%), transparent);
  opacity:.85;
}
.card.no-thumb::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius); pointer-events:none;
  background-image:var(--halftone), var(--grain);
  background-size:220px 220px, 300px 300px;
  mix-blend-mode:multiply; opacity:.14;
}
.card .body.no-thumb{
  padding:1.25rem 1.1rem; min-height:180px;
  display:grid; align-content:start; gap:.35rem;
  border-top:4px solid var(--ink-2);
}
.card .body.no-thumb.opinion{ border-color:var(--pulp); }
.card .body.no-thumb.technical{ border-color:var(--civic); }
.card .body.no-thumb.noir{ border-color:var(--noir); }
.card .body.no-thumb.sci{ border-color:var(--sci); }
.card .body.no-thumb h3{ margin:.25rem 0 .15rem; }
.card.no-thumb .body.no-thumb::before{
  content:""; position:absolute; top:10px; right:14px;
  width:56px; height:14px; border-radius:4px; opacity:.75;
  background:color-mix(in srgb, var(--accent-card) 10%, #f6e6b6 90%);
  border:1px solid #00000018; transform:rotate(3deg);
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}

/* ========== Zine strip ========== */
.zine{
  margin:2rem 0 1rem; position:relative;
  background:repeating-linear-gradient(45deg, #0001 0 4px, #0000 4px 8px), linear-gradient(0deg, #fff, #fff);
  border-block:1px solid #00000022;
}
.zine::before{
  content:""; position:absolute; inset:auto 0 -10px 0; height:24px;
  background:#fff7; border-top:1px solid #0001; transform:rotate(-1.2deg);
}
.zine .container{ display:flex; gap:1rem; overflow:auto; padding-block:.9rem; }
.zine .tag{
  flex:0 0 auto; padding:.7rem 1rem; color:#fffaf0; background:#111;
  border-radius:10px; box-shadow:0 12px 22px rgba(0,0,0,.18);
  font-family:'Fira Code',monospace; transform:rotate(-2deg);
}

/* ========== Footer ========== */
footer{
  padding:2.2rem 1rem 4rem; color:var(--ink-2);
  border-top:1px dashed #00000026;
}

/* ========== Billboard rail ========== */
.ad-rail-billboard{
  position:relative; overflow:hidden; margin:3rem 0 1rem;
  background:#f2eadb; border-block:6px solid #00000022;
  box-shadow:inset 0 -12px 24px #00000010, inset 0 12px 24px #00000008;
}
.bulb-row{ display:flex; justify-content:center; gap:1.2rem; padding:.5rem 0; background:#000; }
.bulb{
  width:18px; height:18px; border-radius:50%;
  background:#222; box-shadow:0 0 3px #000 inset;
  animation:neonBlink 2s linear infinite;
}
@keyframes neonBlink{
  0%,15%,25%,30%,65%,95%{ background:#222; box-shadow:none; }
  10%,20%,31%,60%,100%{ background:#fff7cc; box-shadow:0 0 6px #fff7cc,0 0 14px #ffda73,0 0 26px #ffda73; }
}
.ad-rail-billboard .grime{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, #0000 0 3%, #0001 6%, #0000 9% 91%, #0001 94%, #0000 97%),
    radial-gradient(1200px 200px at 50% 120%, #0000000e, #0000 60%),
    radial-gradient(1200px 200px at 50% -20%, #0000000f, #0000 60%);
  mix-blend-mode:multiply;
}
.ad-rail-billboard .rail{
  position:relative; z-index:0; display:flex; gap:2rem; padding:2.2rem 2rem;
  animation:scrollRail 30s linear infinite; will-change:transform;
}
.ad-rail-billboard:hover .rail{ animation-play-state:paused; }
@keyframes scrollRail{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.ad-rail-billboard .ad{
  position:relative; flex:0 0 auto; width:clamp(210px, 21vw, 320px); aspect-ratio:2/3;
  padding:.55rem; background:#fff;
  border:1px solid #00000030; border-radius:12px;
  box-shadow:0 10px 24px #00000018, 0 2px 0 #00000012 inset;
  transform:rotate(var(--tilt, -0.8deg));
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ad-rail-billboard .ad:hover{ transform:rotate(0deg) scale(1.02); box-shadow:0 16px 36px #00000028; }
.ad-rail-billboard .ad img{
  width:100%; height:100%; object-fit:cover; border-radius:8px;
  filter:contrast(1.02) saturate(1.02)
         drop-shadow(1px 0 0 rgba(231,56,43,.35))
         drop-shadow(-1px 0 0 rgba(25,199,209,.35));
}
.ad-rail-billboard .ad::after{
  content:""; position:absolute; inset:.4rem; pointer-events:none;
  background:var(--grain), var(--halftone); mix-blend-mode:multiply; opacity:.22; border-radius:8px;
}
.ad-rail-billboard .ad:nth-child(3n){ --tilt:-1.2deg; }
.ad-rail-billboard .ad:nth-child(4n){ --tilt:0.8deg; }
.ad-rail-billboard .ad:nth-child(5n){ --tilt:-0.3deg; }

/* ========== Quirky chart card ========== */
.chart-card{
  --paper:#fffef7;
  position:relative; width:320px; padding:.6rem;
  background:var(--paper); border:1px solid #00000022; border-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,.15); transform:rotate(-2deg);
  transition:transform .2s ease;
}
.chart-card::before,
.chart-card::after{
  content:""; position:absolute; width:74px; height:18px; opacity:.75;
  background:#f6e6b6; border:1px solid #00000022;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.chart-card::before{ top:-10px; left:16px; transform:rotate(-6deg); }
.chart-card::after{  bottom:-10px; right:18px; transform:rotate(8deg); }
.scribble-chart{ display:block; width:100%; height:auto; border-radius:8px; filter:contrast(1.02) saturate(1.02); }
.chart-card figcaption{
  margin-top:.45rem; text-align:center;
  font:italic 600 .9rem/1.3 'Libre Franklin',system-ui,sans-serif; color:#222;
}
.chart-card:hover{ transform:rotate(0deg) translateY(-2px); }

/* ========== Back to top / CTA more ========== */
#toTop{
  position:fixed; right:1rem; bottom:1rem; z-index:60;
  width:42px; height:42px; border-radius:999px;
  background:#fff; border:1px solid #0002; box-shadow:0 10px 22px rgba(0,0,0,.15);
  font-weight:900; cursor:pointer; opacity:0; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease;
}
#toTop.show{ opacity:1; transform:translateY(0); }

.cta-more{
  display:none; margin:1.25rem auto 0; padding:.7rem 1.1rem;
  font:800 .95rem/1 'Libre Franklin',sans-serif; background:#fff; cursor:pointer;
  border:2px solid #00000022; border-radius:999px; box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.cta-more:hover{ transform:translateY(-1px); }

/* ========== Responsive ========== */
@media (max-width:900px){
  .wrap{ grid-template-columns:1fr; }
  .card{ grid-column:span 12; }
  .nav ul{ display:none; }
}