/* OurTerms – guerilla / counterculture / punk-zine. Photocopied, xeroxed, DIY.
   Newsprint grain, poster type roughed up, propaganda red, rubber stamps, torn ink rules. */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&family=Oswald:wght@600;700&family=Permanent+Marker&family=Special+Elite&display=swap");

:root {
  --paper:  #e6ddc9;   /* dirty newsprint */
  --paper2: #dbd1ba;
  --ink:    #16130e;   /* warm near-black */
  --red:    #cd1a09;   /* propaganda red */
  --muted:  #59524572;
  --muted:  #574f43;
  --max: 46rem;
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#100f0d; --paper2:#17140f; --ink:#ece3d0; --red:#ff3a20; --muted:#a99e88; }
}
:root[data-theme="light"] { --paper:#e6ddc9; --paper2:#dbd1ba; --ink:#16130e; --red:#cd1a09; --muted:#574f43; }
:root[data-theme="dark"]  { --paper:#100f0d; --paper2:#17140f; --ink:#ece3d0; --red:#ff3a20; --muted:#a99e88; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Archivo", system-ui, sans-serif; font-size: 17px; line-height: 1.5;
  overflow-x: hidden;
}
/* heavy photocopy grain over everything */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .08; mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { body::after { mix-blend-mode: screen; opacity: .06; } }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

/* ---- type ---- */
h1, h2, h3 { font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: .01em; margin: 0 0 .45em; }
h1 { font-size: clamp(2.7rem, 9vw, 5.2rem); filter: url(#rough2); }
h2 { font-size: clamp(1.7rem, 5vw, 2.7rem); filter: url(#rough2); }
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
a { color: var(--red); }

.kicker {
  display: inline-block; font-family: "Special Elite", monospace; text-transform: uppercase;
  letter-spacing: .18em; font-size: .78rem; color: var(--ink);
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: .35rem 0; margin-bottom: 1.1rem;
}

/* marker swipe + highlighter */
.swipe { display: inline-block; background: var(--red); color: #f3ead6; padding: 0 .18em;
         transform: rotate(-1.4deg); filter: url(#rough2); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl { background: linear-gradient(180deg, transparent 56%, var(--red) 56% 93%, transparent 93%); color: inherit; padding: 0 .05em; }

/* rubber stamp */
.stamp {
  display: inline-block; font-family: "Special Elite", monospace; text-transform: uppercase;
  color: var(--red); border: .17em solid var(--red); box-shadow: inset 0 0 0 .06em var(--red);
  padding: .12em .4em; letter-spacing: .08em; font-weight: 700; line-height: 1.15;
  transform: rotate(-8deg); opacity: .9; filter: url(#rough2);
}

/* sticker */
.sticker { display: inline-block; background: var(--ink); color: var(--paper); font-family: "Special Elite", monospace;
           text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; padding: .3em .6em; transform: rotate(2.2deg); }

/* ---- header ---- */
header.bar { background: var(--ink); border-bottom: 5px solid var(--red); }
header.bar .wrap { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.25rem; }
.brand { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .02em; color: var(--paper); text-decoration: none; }
.brand b { color: var(--red); }
nav a { font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--paper); text-decoration: none; margin-left: 1.2rem; font-size: .95rem; }
nav a:hover { color: var(--red); }

/* ---- buttons (brutalist) ---- */
.btn {
  display: inline-block; font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: 1.05rem; background: var(--ink); color: var(--paper);
  border: 2.5px solid var(--ink); padding: .7em 1.5em; text-decoration: none; cursor: pointer;
  box-shadow: 6px 6px 0 var(--red); transition: transform .05s ease, box-shadow .05s ease;
}
.btn:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--red); background: var(--red); border-color: var(--red); }
.btn:active { transform: translate(6px,6px); box-shadow: 0 0 0 var(--red); }
.fineprint { display: block; margin-top: .7rem; font-family: "Special Elite", monospace; font-size: .82rem; color: var(--muted); }

/* ---- sections + torn ink rules ---- */
.hero { padding: 3rem 0 2rem; position: relative; }
.hero::before { content: ""; position: absolute; inset: 0 -10% auto 0; height: 60%; z-index: -1;
  background-image: radial-gradient(var(--ink) 1.1px, transparent 1.4px); background-size: 10px 10px; opacity: .1;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 65%); mask-image: linear-gradient(160deg, #000, transparent 65%); }
.hero .stamp-abs { position: absolute; top: 2.2rem; right: .5rem; font-size: 1.05rem; z-index: 2; }
@media (max-width: 680px) { .hero .stamp-abs { position: static; display: inline-block; margin: 0 0 1rem; } }
.lede { font-size: 1.22rem; line-height: 1.45; color: var(--muted); max-width: 40rem; }
.lede b { color: var(--ink); font-weight: 700; }

section { position: relative; padding: 2.9rem 0; }
section::before { content: ""; position: absolute; top: -1px; left: -3%; width: 106%; height: 7px; background: var(--ink); filter: url(#rough); }
.pull { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(1.6rem, 4.5vw, 2.5rem);
        line-height: 1; border-left: .45rem solid var(--red); padding-left: 1rem; margin: 1.2rem 0; filter: url(#rough2); }

/* steps */
ol.steps { list-style: none; padding: 0; margin: 0; }
ol.steps li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.1rem 0; border-bottom: 2px dashed var(--ink); align-items: start; }
ol.steps li:last-child { border-bottom: 0; }
ol.steps .n { font-family: "Anton", sans-serif; font-size: 3.2rem; line-height: .75; color: var(--red); filter: url(#rough2); }
ol.steps b { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .02em; font-size: 1.15rem; display: block; margin-bottom: .2rem; }

/* honest list */
ul.plain { padding-left: 0; list-style: none; }
ul.plain li { padding: .55rem 0 .55rem 1.7rem; position: relative; border-bottom: 1px dashed var(--muted); }
ul.plain li::before { content: "✗"; position: absolute; left: 0; color: var(--red); font-weight: 700; font-size: 1.1rem; }
ul.plain b { font-family: "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .02em; }

/* callout */
.callout { background: var(--red); color: #f3ead6; padding: 1rem 1.15rem; font-family: "Oswald", sans-serif;
           font-weight: 700; text-transform: uppercase; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
           transform: rotate(-.7deg); letter-spacing: .02em; }

/* ---- FAQ ---- */
details { border-bottom: 2px solid var(--ink); padding: 1rem 0; }
summary { cursor: pointer; font-family: "Oswald", sans-serif; font-weight: 700; text-transform: uppercase;
          font-size: 1.12rem; letter-spacing: .02em; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "[+]"; font-family: "Special Elite", monospace; color: var(--red); }
details[open] summary::after { content: "[–]"; }
details .body { padding-top: .8rem; }
details .body p:last-child { margin-bottom: 0; }

/* ---- footer ---- */
footer { background: var(--ink); color: var(--paper); border-top: 5px solid var(--red); font-family: "Special Elite", monospace; padding: 2rem 0 3rem; font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
footer a { color: var(--red); }
footer .foot-left { display: flex; flex-direction: column; }
.powered { font-size: .72rem; opacity: .55; margin-top: .4rem; letter-spacing: .04em; }

/* spray-paint margin scrawl (decorative artifact, not a link) */
.spray { margin-top: .4rem; text-align: right; color: var(--red); line-height: 1; }
.spray-arrow { display: block; margin: 0 2.5rem 0 auto; }
.spray-text { font-family: "Permanent Marker", cursive; font-size: 1.45rem; display: inline-block;
              transform: rotate(-3deg); filter: url(#rough2); text-shadow: 0 0 2px rgba(205,26,9,.5), 0 0 7px rgba(205,26,9,.22); }
@media (prefers-color-scheme: dark) { .spray-text { text-shadow: 0 0 3px rgba(255,58,32,.55), 0 0 9px rgba(255,58,32,.28); } }