/* MAT Magazine — riso-print zine design system */

:root{
  --paper: #EDEAE1;
  --paper-2: #E4E0D3;
  --ink: #14120F;
  --pink: #FF2E7E;
  --blue: #0050EF;
  --yellow: #FFC700;
  --line: rgba(20,18,15,0.16);
  --display: 'Big Shoulders Display', sans-serif;
  --body-font: 'Newsreader', Georgia, serif;
  --mono: 'Space Mono', monospace;
  --max: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body-font);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* ---------- Riso misregistration signature effect ---------- */
.riso{ position:relative; display:inline-block; }
.riso::before{
  content: attr(data-text);
  position:absolute; left:0; top:0;
  color: var(--riso-color, var(--pink));
  transform: translate(4px, 3px);
  z-index:-1;
  opacity:0.75;
}
@media (prefers-reduced-motion: no-preference){
  .riso:hover::before{ transform: translate(6px, 5px); transition: transform .25s ease; }
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:200; font-family:var(--mono); font-size:14px;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- Header ---------- */
.site-header{
  border-bottom: 3px solid var(--ink);
  background: var(--paper);
  position: sticky; top:0; z-index:100;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px; gap:20px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.brand-logo{ width:60px; height:auto; flex-shrink:0; }
.brand-word{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink); opacity:0.75; white-space:nowrap; }
@media (max-width: 900px){ .brand-word{ display:none; } }

.nav-toggle{
  display:none; background:none; border:2px solid var(--ink); border-radius:0;
  font-family:var(--mono); font-size:13px; padding:8px 12px; cursor:pointer;
}
.main-nav ul{ list-style:none; display:flex; gap:16px; margin:0; padding:0; flex-wrap:wrap; justify-content:flex-end; }
.main-nav a{
  text-decoration:none; font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em;
  text-transform:uppercase; padding-bottom:3px; border-bottom:2px solid transparent; white-space:nowrap;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ border-bottom-color: var(--pink); }

@media (max-width: 760px){
  .nav-toggle{ display:inline-block; }
  .main-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--paper); border-bottom:3px solid var(--ink); padding:18px 24px;
  }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:16px; }
}

/* ---------- Marquee ticker of tags ---------- */
.ticker{
  border-bottom:3px solid var(--ink); background:var(--ink); color:var(--paper);
  overflow:hidden; white-space:nowrap; font-family:var(--mono); font-size:12px; letter-spacing:0.1em;
}
.ticker-track{ display:inline-block; padding:10px 0; animation: ticker 34s linear infinite; }
.ticker-track span{ margin:0 22px; text-transform:uppercase; }
.ticker-track span.dot::before{ content:'●'; color:var(--pink); margin-right:22px; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } .ticker{ overflow-x:auto; } }

/* ---------- Hero ---------- */
.hero{ border-bottom:3px solid var(--ink); padding:56px 0 48px; }
.hero .wrap{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:48px; align-items:center; }
.hero h1{
  font-family:var(--display); font-weight:900; font-size:clamp(44px, 8vw, 92px);
  line-height:0.92; text-transform:uppercase; margin:0 0 18px;
}
.hero p.tagline{ font-size:20px; max-width:46ch; margin:0 0 22px; }
.eyebrow{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.14em;
  color:var(--ink); opacity:0.7; display:block; margin-bottom:10px;
}
.eyebrow.pink{ color:var(--pink); opacity:1; }
.eyebrow.blue{ color:var(--blue); opacity:1; }
.eyebrow.yellow{ color:#8a6a00; opacity:1; }

.hero-art{ border:3px solid var(--ink); background:var(--paper-2); }

@media (max-width: 860px){
  .hero .wrap{ grid-template-columns:1fr; }
}

/* ---------- Section headings ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  border-bottom:3px solid var(--ink); padding-bottom:10px; margin:56px 0 28px;
}
.section-head h2{ font-family:var(--display); font-weight:900; font-size:34px; text-transform:uppercase; margin:0; }
.section-head a{ font-family:var(--mono); font-size:13px; text-decoration:underline; white-space:nowrap; }

/* ---------- Story grid / cards ---------- */
.story-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px 28px; }
.story-grid.featured-grid{ grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width:920px){ .story-grid, .story-grid.featured-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .story-grid, .story-grid.featured-grid{ grid-template-columns:1fr; } }

.card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); }
.card-art{ border:3px solid var(--ink); margin-bottom:14px; overflow:hidden; background:var(--paper-2); }
.card-art svg{ display:block; width:100%; height:auto; transition:transform .3s ease; }
@media (prefers-reduced-motion: no-preference){ .card:hover .card-art svg{ transform:scale(1.04); } }
.card .tag{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px; }
.card h3{ font-family:var(--display); font-weight:800; font-size:24px; line-height:1.05; text-transform:uppercase; margin:0 0 8px; }
.card p.dek{ font-size:15px; margin:0 0 10px; opacity:0.85; }
.card .byline{ font-family:var(--mono); font-size:11px; opacity:0.65; margin-top:auto; text-transform:uppercase; }

.featured-grid .card:first-child h3{ font-size:36px; }
.featured-grid .card:first-child p.dek{ font-size:17px; }

/* ---------- Category chips ---------- */
.cat-rail{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 8px; }
.chip{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
  border:2px solid var(--ink); padding:6px 14px; text-decoration:none; background:var(--paper);
}
.chip.pink:hover{ background:var(--pink); color:var(--paper); }
.chip.blue:hover{ background:var(--blue); color:var(--paper); }
.chip.yellow:hover{ background:var(--yellow); color:var(--ink); }

/* ---------- Category page header ---------- */
.cat-hero{ border-bottom:3px solid var(--ink); padding:44px 0; }
.cat-hero h1{ font-family:var(--display); font-weight:900; font-size:clamp(38px,7vw,64px); text-transform:uppercase; margin:0 0 10px; }
.cat-hero p{ max-width:60ch; font-size:18px; margin:0; }
.swatch{ display:inline-block; width:14px; height:14px; margin-right:10px; vertical-align:middle; }
.swatch.pink{ background:var(--pink); } .swatch.blue{ background:var(--blue); } .swatch.yellow{ background:var(--yellow); }

/* ---------- Article page ---------- */
.article-head{ padding:44px 0 30px; border-bottom:3px solid var(--ink); }
.article-head .tag-line{ font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:14px; }
.article-head h1{ font-family:var(--display); font-weight:900; font-size:clamp(36px,6vw,64px); line-height:1; text-transform:uppercase; margin:0 0 16px; max-width:20ch; }
.article-head .dek{ font-size:20px; max-width:60ch; opacity:0.9; margin:0 0 22px; }
.byline-row{ font-family:var(--mono); font-size:13px; display:flex; gap:18px; flex-wrap:wrap; opacity:0.75; }

.article-art{ border:3px solid var(--ink); margin:32px 0; background:var(--paper-2); }

.article-body{ max-width:70ch; margin:0 auto; padding:40px 0 20px; }
.article-body p{ margin:0 0 22px; font-size:19px; }
.article-body p:first-of-type::first-letter{
  font-family:var(--display); font-weight:900; font-size:64px; float:left; line-height:0.8;
  padding:6px 10px 0 0; color:var(--pink);
}
blockquote.pull{
  font-family:var(--display); font-weight:800; font-size:30px; line-height:1.15; text-transform:uppercase;
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); padding:22px 0; margin:36px 0;
  max-width:70ch; margin-left:auto; margin-right:auto;
}
.share-row{ max-width:70ch; margin:0 auto; padding:20px 0 50px; font-family:var(--mono); font-size:13px; }
.share-row a{ text-decoration:underline; }

.related{ border-top:3px solid var(--ink); padding:44px 0 60px; }

/* ---------- Archive / listing page ---------- */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin:30px 0 40px; }

/* ---------- About / Contact ---------- */
.prose-page{ padding:50px 0 70px; }
.prose-page h1{ font-family:var(--display); font-weight:900; font-size:clamp(38px,7vw,68px); text-transform:uppercase; margin:0 0 30px; }
.prose-page .lede{ font-size:20px; max-width:65ch; margin-bottom:10px; }
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ border:3px solid var(--ink); padding:22px; }
.contact-card h3{ font-family:var(--mono); font-size:13px; text-transform:uppercase; letter-spacing:0.08em; margin:0 0 10px; }
.contact-card a{ font-size:17px; text-decoration:underline; word-break:break-word; }

/* ---------- Footer ---------- */
.site-footer{ border-top:3px solid var(--ink); margin-top:60px; padding:44px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:36px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.1em; margin:0 0 14px; opacity:0.7; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:8px; }
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.footer-bottom{ font-family:var(--mono); font-size:12px; opacity:0.6; margin-top:36px; border-top:1px solid var(--line); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---------- 404 ---------- */
.error-page{ text-align:center; padding:110px 0; }
.error-page h1{ font-family:var(--display); font-size:clamp(60px,14vw,160px); margin:0; font-weight:900; }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }