:root{
    --ink:#0a0a0a;
    --paper:#ffffff;
    --cream:#f4f2ec;
    --yellow:#ffea00;
    --line:#0a0a0a;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"Cutive Mono", monospace;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}

  /* ---------- demo banner ---------- */
  .demo-banner{
    background:var(--ink); color:var(--yellow); text-align:center;
    font-size:11px; letter-spacing:1.5px; padding:8px 12px; text-transform:uppercase;
  }

  /* ---------- header ---------- */
  header.site{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px; border-bottom:2px solid var(--line); background:var(--paper);
    position:sticky; top:0; z-index:50;
  }
  header.site .logo img{height:34px;}
  nav.site-nav{display:flex; gap:26px; font-size:12.5px; letter-spacing:0.5px;}
  nav.site-nav a{padding:4px 2px; border-bottom:2px solid transparent;}
  nav.site-nav a:hover{border-bottom:2px solid var(--yellow);}
  nav.site-nav a.active{border-bottom:2px solid var(--ink); font-weight:700;}
  .cart-dot{background:var(--ink); color:var(--yellow); border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-size:11px;}

  /* ---------- masthead ---------- */
  .masthead{
    padding:30px 32px 22px; text-align:center; border-bottom:2px solid var(--line);
    background:
      repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.015) 3px);
  }
  .masthead .eyebrow{
    display:inline-block; font-size:11px; letter-spacing:3px; text-transform:uppercase;
    background:var(--yellow); border:2px solid var(--ink); padding:4px 12px; margin-bottom:20px;
  }
  .masthead .crow-seal{width:78px; height:auto; margin:0 auto 16px; display:block;}
  .masthead h1{
    font-family:"Poppins", "Archivo Black", sans-serif; font-weight:800;
    font-size:clamp(48px,9vw,110px); letter-spacing:-3px; line-height:0.92; text-transform:uppercase;
  }

  /* ---------- issue strip ---------- */
  .issues{
    display:flex; overflow-x:auto; border-bottom:2px solid var(--line);
    background:var(--ink); -webkit-overflow-scrolling:touch;
  }
  .issues .issue{
    flex:0 0 auto; padding:14px 22px; color:#fff; font-size:12px; letter-spacing:1px;
    border-right:1px solid #333; white-space:nowrap; cursor:pointer; user-select:none;
    transition:background .15s ease, color .15s ease;
    text-decoration:none; display:inline-flex; align-items:center;
    -webkit-tap-highlight-color:rgba(255,255,255,0.25);
  }
  .issues .issue b{color:var(--yellow); transition:color .15s ease;}
  .issues .issue:hover{background:#262626;}
  .issues .issue.current{background:var(--yellow); color:var(--ink);}
  .issues .issue.current b{color:var(--ink);}
  .issues .issue.current:hover{background:var(--yellow);}
  .issues .issue.last-link{font-weight:700;}
  .issues .issue.last-link:hover{background:var(--yellow); color:var(--ink);}

  /* ---------- featured story ---------- */
  .featured{
    display:grid; grid-template-columns:1.15fr 1fr; border-bottom:2px solid var(--line);
    scroll-margin-top:76px;
  }
  .featured .media{position:relative; overflow:hidden; min-height:420px; background:#111;}
  .featured .media img{width:100%; height:100%; object-fit:cover; filter:grayscale(85%) contrast(1.08);}
  .featured .media .tag{
    position:absolute; top:18px; left:18px; background:var(--yellow); border:2px solid var(--ink);
    font-size:11px; letter-spacing:1px; padding:5px 10px; text-transform:uppercase;
  }
  .featured .copy{padding:44px; display:flex; flex-direction:column; justify-content:center;}
  .featured .copy .kicker{font-size:12px; letter-spacing:2px; color:#666; text-transform:uppercase; margin-bottom:12px;}
  .featured .copy h2{font-size:clamp(26px,3vw,38px); line-height:1.08; margin-bottom:16px;}
  .featured .copy p.excerpt{font-size:14.5px; color:#333; margin-bottom:22px; max-width:44ch;}
  .featured .meta{font-size:11.5px; color:#777; letter-spacing:0.5px; margin-bottom:20px;}
  .read-link{
    display:inline-flex; align-items:center; gap:8px; border:2px solid var(--ink);
    padding:10px 18px; font-size:12px; letter-spacing:1px; text-transform:uppercase; align-self:flex-start;
  }
  .read-link:hover{background:var(--ink); color:var(--yellow);}

  /* ---------- grid ---------- */
  .grid-wrap{padding:52px 32px 20px;}

  /* ---------- filtrado por categoría sin JavaScript (fallback :target) ----------
     Mismo resultado que el filtrado del bloque de JavaScript de más abajo, pero puramente
     en CSS: al navegar a #tab-events (etc.) el navegador marca ese elemento
     como :target, y estas reglas ocultan las tarjetas del grid que no
     pertenezcan a esa categoría. [data-cat~="events"] solo funciona con la
     palabra "events" exacta dentro de data-cat, igual que hace el JS con
     .split(' '), así que las noticias con varias categorías (p. ej.
     data-cat="culture inside") se siguen mostrando en ambas pestañas. */
  .tab-anchor{display:block; height:0; scroll-margin-top:76px;}
  #tab-events:target ~ .grid-wrap .card:not([data-cat~="events"]){display:none !important;}
  #tab-collabs:target ~ .grid-wrap .card:not([data-cat~="collabs"]){display:none !important;}
  #tab-culture:target ~ .grid-wrap .card:not([data-cat~="culture"]){display:none !important;}
  #tab-inside:target ~ .grid-wrap .card:not([data-cat~="inside"]){display:none !important;}
  .grid-wrap .section-title{
    display:flex; align-items:baseline; gap:14px; margin-bottom:26px;
  }
  .grid-wrap .section-title h3{font-size:13px; letter-spacing:2px; text-transform:uppercase; scroll-margin-top:76px;}
  .grid-wrap .section-title .rule{flex:1; height:2px; background:var(--ink);}

  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--line); border-left:2px solid var(--line);}
  .card{border-right:2px solid var(--line); border-bottom:2px solid var(--line); display:flex; flex-direction:column;}
  .card .thumb{aspect-ratio:4/5; overflow:hidden; background:#eee;}
  .card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease;}
  .card:hover .thumb img{transform:scale(1.04);}
  .card .body{padding:20px; display:flex; flex-direction:column; flex:1;}
  .card .tag{
    align-self:flex-start; font-size:10.5px; letter-spacing:1px; text-transform:uppercase;
    border:1.5px solid var(--ink); padding:3px 8px; margin-bottom:12px;
  }
  .card .tag.y{background:var(--yellow);}
  .card h4{font-size:17px; line-height:1.22; margin-bottom:10px;}
  .card p{font-size:12.8px; color:#555; margin-bottom:14px; flex:1;}
  .card .meta{font-size:10.5px; color:#888; letter-spacing:0.5px;}

  /* ---------- newsletter ---------- */
  .newsletter{
    margin:52px 32px; border:2px solid var(--ink); padding:38px; display:flex; align-items:center;
    justify-content:space-between; gap:24px; flex-wrap:wrap; background:var(--ink);
  }
  .newsletter h4{font-size:22px; max-width:360px; line-height:1.2; color:#fff;}
  .newsletter .code-line{font-size:11.5px; color:#bbb; margin-top:8px; letter-spacing:0.5px;}
  .newsletter .code-line b{background:var(--yellow); color:var(--ink); border:1.5px solid var(--yellow); padding:1px 7px; letter-spacing:1px;}
  .newsletter form{display:flex; gap:0; flex:1; min-width:280px; max-width:420px;}
  .newsletter input{
    flex:1; border:2px solid #fff; border-right:none; padding:12px 14px; font-family:inherit; font-size:13px; background:var(--ink); color:#fff;
  }
  .newsletter input::placeholder{color:#888;}
  .newsletter button{
    border:2px solid #fff; background:var(--yellow); color:var(--ink); padding:0 22px; font-family:inherit;
    font-size:12px; letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  }

  /* ---------- sample article divider ---------- */
  .divider{
    background:var(--ink); color:#fff; text-align:center; padding:28px 20px; margin-top:20px;
  }
  .divider .eyebrow{color:var(--yellow); font-size:11px; letter-spacing:3px; text-transform:uppercase; margin-bottom:8px; display:block;}
  .divider p{font-size:13px; color:#ccc; max-width:560px; margin:8px auto 0;}

  /* ---------- article ---------- */
  article.sample{max-width:760px; margin:0 auto; padding:56px 24px 90px; scroll-margin-top:76px;}
  article.sample .art-tag{
    display:inline-block; background:var(--yellow); border:2px solid var(--ink); font-size:11px;
    letter-spacing:1px; text-transform:uppercase; padding:5px 10px; margin-bottom:22px;
  }
  article.sample h1{font-family:"Poppins","Archivo Black",sans-serif; font-weight:900; letter-spacing:-1px; font-size:clamp(30px,5vw,52px); line-height:1.03; margin-bottom:18px;}
  article.sample .byline{font-size:12.5px; color:#666; letter-spacing:0.5px; margin-bottom:34px; border-bottom:2px solid var(--ink); padding-bottom:22px;}
  article.sample .hero-img{width:100%; margin-bottom:8px;}
  article.sample .hero-img img{width:100%; filter:grayscale(15%) contrast(1.05);}
  article.sample .caption{font-size:11px; color:#888; margin-bottom:34px;}
  article.sample p{font-size:15.5px; color:#1a1a1a; margin-bottom:22px; max-width:66ch;}
  article.sample p a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--yellow); text-underline-offset:3px; text-decoration-thickness:2px;}
  article.sample p a:hover{color:#000; text-decoration-color:var(--ink);}
  article.sample .pullquote{
    font-family:"Archivo Black","Cutive Mono",monospace; font-size:26px; line-height:1.25; margin:36px 0;
    border-left:4px solid var(--yellow); padding-left:22px; max-width:56ch;
  }
  article.sample .two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:36px 0;}
  article.sample .two-col img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/4;}

  /* ---------- footer ---------- */
  footer.site{
    border-top:2px solid var(--ink); padding:30px 32px; display:flex; justify-content:space-between;
    align-items:center; font-size:11.5px; color:#777; flex-wrap:wrap; gap:10px;
  }
  footer.site .brand-mark{display:inline-flex; align-items:center; gap:10px;}
  footer.site .brand-mark img{width:20px; height:auto; flex:0 0 auto;}

  @media (max-width:860px){
    .featured{grid-template-columns:1fr;}
    .grid{grid-template-columns:repeat(2,1fr);}
    article.sample .two-col{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    .grid{grid-template-columns:1fr;}
    nav.site-nav{display:none;}
    .newsletter{margin:32px 16px; padding:26px 22px;}
    .newsletter form{min-width:0; width:100%; max-width:100%;}
    .newsletter button{padding:0 16px;}
  }