/* Skim site — "Punk Zine" ransom-note design system.
   Shared across index.html, privacy.html, terms.html, 404.html.
   A printed-zine look: a cream paper sheet on a near-black frame, torn scraps,
   tape, marker/typewriter/condensed display type. Single light surface — no
   dark-mode variant by design. */

:root {
  --frame:  #1b1610;
  --paper:  #eadfc2;
  --scrap:  #fbf8ef;
  --scrap2: #fcfaf2;
  --ink:    #171310;
  --red:    #d8321f;
  --pink:   #ec1c7d;
  --teal:   #17b3ad;
  --yellow: #ffe14d;
  --muted:  #5a4a2e;
  --hole:   #d94a86;

  /* Font roles. Non-Latin scripts fall through to Cyrillic-/system-capable
     stand-ins: Oswald covers Cyrillic for the condensed-black role, Georgia
     covers Cyrillic for the serif role, Caveat backs the marker role. */
  --f-black:  'Anton', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --f-serif:  Georgia, 'Times New Roman', serif;
  --f-type:   'Special Elite', 'Courier New', ui-monospace, monospace;
  --f-marker: 'Permanent Marker', 'Caveat', 'Segoe Script', cursive;
  --f-hand:   'Caveat', 'Segoe Script', cursive;
  --f-rock:   'Rock Salt', 'Caveat', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-type);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes sway  { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* ============================ PAPER SHEET ============================ */
.frame { padding: 40px 20px 70px; }
.sheet {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  background: var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(120,90,40,0.10), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(120,90,40,0.10), transparent 26%),
    radial-gradient(circle at 60% 40%, rgba(150,120,60,0.06), transparent 40%);
  box-shadow: 0 22px 60px rgba(60,45,20,0.28);
  color: var(--ink);
  overflow: hidden;
}
.grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 40;
  mix-blend-mode: multiply; opacity: 0.10;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzE0MCcgaGVpZ2h0PScxNDAnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
}
.holes {
  position: absolute; left: 34px; top: 0; bottom: 0; width: 2px; z-index: 2;
  background: repeating-linear-gradient(var(--hole) 0 8px, transparent 8px 20px);
  opacity: 0.5;
}

/* Section rhythm. Left padding clears the punched-holes margin. */
.section {
  position: relative; z-index: 5;
  padding: 22px clamp(20px, 5vw, 44px) 42px clamp(24px, 7vw, 70px);
}

/* ============================ MASTHEAD / NAV ============================ */
.masthead {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 24px clamp(20px, 5vw, 44px) 16px clamp(24px, 7vw, 70px);
  border-bottom: 2px dashed rgba(23,19,15,0.35);
}
.mast-logo {
  font-family: var(--f-marker); font-size: 34px; line-height: 1;
  background: var(--ink); color: var(--paper);
  padding: 2px 16px 5px; transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--red);
}
.mast-nav {
  margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-family: var(--f-hand); font-weight: 700; font-size: 22px;
}
.mast-nav a { display: inline-block; transition: color .15s, transform .15s; }
.mast-nav a:hover { color: var(--pink); transform: rotate(0deg) scale(1.06); }
.mast-nav > :nth-child(1) { transform: rotate(-2deg); }
.mast-nav > :nth-child(2) { transform: rotate(1deg); }
.mast-nav > :nth-child(3) { transform: rotate(-1deg); }
.mast-nav > :nth-child(4) { transform: rotate(2deg); }
.mast-nav > :nth-child(5) { transform: rotate(-1deg); }

/* Language tag — wraps the app.js-populated <select> */
.lang {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: var(--paper);
  font-family: var(--f-type); font-size: 13px; font-weight: 400;
  padding: 3px 8px; transform: rotate(2deg);
}
.lang svg { display: block; opacity: .8; }
#langSelect {
  appearance: none; -webkit-appearance: none;
  background: transparent; color: var(--paper); border: 0;
  font: inherit; cursor: pointer; padding: 2px 16px 2px 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23eadfc2' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1px center;
}
#langSelect option { color: #111; background: #eadfc2; }

/* ============================ BUTTONS / LINKS ============================ */
.btn-zine {
  display: inline-block; font-family: var(--f-black);
  font-size: 22px; letter-spacing: 0.02em; color: #fff;
  background: var(--red); padding: 14px 26px;
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-2deg); transition: transform .12s ease, box-shadow .12s ease;
}
.btn-zine:hover { transform: rotate(0deg) scale(1.03); box-shadow: 6px 6px 0 var(--ink); }
.btn-zine.ink   { background: var(--ink); color: var(--paper); }
.link-marker {
  display: inline-block; font-family: var(--f-marker); font-size: 24px;
  color: #17758f; border-bottom: 3px solid var(--teal);
  transform: rotate(1deg); transition: color .15s, border-color .15s;
}
.link-marker:hover { color: var(--pink); border-color: var(--pink); }
.cta-side {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 10px;
}
.ph-badge {
  display: inline-flex;
  transform: rotate(-2deg); transition: transform .12s ease;
}
.ph-badge img { display: block; width: 205px; height: auto; }
.ph-badge:hover { transform: rotate(0deg) scale(1.03); }

/* ============================ RANSOM-NOTE SYSTEM ============================ */
.rn {
  display: inline-block; line-height: 0.9;
  margin: 2px 3px; padding: 0 0.28em;
}
.rn-lead  { font-size: clamp(22px, 4.2vw, 34px); }
.rn-punch { font-size: clamp(40px, 8.5vw, 88px); padding: 0 0.15em; }

/* font roles */
.f-black  { font-family: var(--f-black); }
.f-serif  { font-family: var(--f-serif); font-weight: 700; }
.f-type   { font-family: var(--f-type); }
.f-marker { font-family: var(--f-marker); }
.f-hand   { font-family: var(--f-hand); font-weight: 700; }

/* boxes / colors */
.bx-dark  { background: var(--ink);  color: var(--paper); }
.bx-cream { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.bx-pink  { background: var(--pink); color: #fff; }
.bx-teal  { background: var(--teal); color: var(--ink); }
.bx-out   { border: 3px solid var(--ink); }
.plain    { color: var(--ink); background: none; }
.ink-red  { color: var(--red); }
.ink-pink { color: var(--pink); }

/* rotations */
.r-4 { transform: rotate(-4deg); } .r-3 { transform: rotate(-3deg); }
.r-2 { transform: rotate(-2deg); } .r-1 { transform: rotate(-1deg); }
.r1  { transform: rotate(1deg);  } .r2  { transform: rotate(2deg);  }
.r3  { transform: rotate(3deg);  } .r4  { transform: rotate(4deg);  }
.gap { display: inline-block; width: 22px; }

/* ============================ HERO ============================ */
.hero { padding-top: 40px; padding-bottom: 30px; overflow: hidden; }
.hero-swash-a {
  position: absolute; left: 0; top: 0; bottom: 0; width: 120px; z-index: 0;
  background: var(--teal); opacity: 0.5;
  clip-path: polygon(0 0,100% 4%,86% 30%,100% 55%,80% 80%,100% 100%,0 100%);
}
.hero-swash-b {
  position: absolute; left: 70px; top: 20px; bottom: 60px; width: 80px; z-index: 0;
  background: var(--pink); opacity: 0.42;
  clip-path: polygon(0 6%,100% 0,82% 34%,100% 62%,78% 86%,96% 100%,0 96%);
}
.hero-inner { position: relative; z-index: 3; }
.eyebrow {
  display: inline-block; background: var(--scrap2); font-family: var(--f-type);
  font-size: 13px; letter-spacing: 0.12em; padding: 7px 14px;
  transform: rotate(-1.5deg); box-shadow: 2px 3px 6px rgba(0,0,0,0.22);
  border: 1px solid rgba(0,0,0,0.12);
}
h1.ransom { margin: 26px 0 6px; padding: 0; font-weight: normal; }

.hero-cols { display: flex; gap: 40px; align-items: flex-start; margin-top: 36px; flex-wrap: wrap; }
.hero-dek { flex: 1 1 440px; min-width: 300px; }
.dek-tag { font-family: var(--f-hand); font-size: 16px; color: var(--muted); transform: rotate(-1deg); margin-bottom: 4px; }
.dek {
  font-family: var(--f-hand); font-weight: 600; font-size: 27px; line-height: 1.35;
  margin: 0 0 22px;
}
.dek .tip { text-decoration-color: var(--pink); }
.dek-cta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.dek-note { font-family: var(--f-type); font-size: 12px; color: var(--muted); margin-top: 20px; transform: rotate(-0.5deg); }
.dek-note code, .dek-note .kbd-ink { font-family: var(--f-type); background: var(--ink); color: var(--paper); padding: 1px 5px; }

/* polaroid */
.polaroid {
  flex: 0 0 auto; position: relative; background: var(--scrap2);
  padding: 14px 14px 52px; box-shadow: 4px 8px 22px rgba(0,0,0,0.35);
  transform: rotate(3deg); width: 400px; max-width: 100%;
}
.polaroid img:not(.decal) { display: block; width: 100%; height: auto; filter: contrast(1.02); }
.polaroid .tape-c {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-4deg);
  width: 120px; height: 34px; background: rgba(216,190,120,0.55); box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.polaroid figcaption {
  font-family: var(--f-hand); font-weight: 700; font-size: 24px; text-align: center;
  position: absolute; bottom: 10px; left: 0; right: 0;
}

/* scattered stickers */
.sticker { position: absolute; z-index: 6; }

/* die-cut punk stickers slapped onto the zine (docs/stickers/*.webp) */
.decal {
  position: absolute; z-index: 6; pointer-events: none; user-select: none;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.35));   /* follows the die-cut edge */
  width: 88px; height: auto;
}
.decal.sm { width: 64px; }
.decal.lg { width: 116px; }

/* ============================ SECTION HEADINGS ============================ */
.zine-h2 {
  font-family: var(--f-black); font-size: clamp(34px, 6vw, 52px);
  line-height: 1.02; margin: 0; transform: rotate(-1deg); display: inline-block;
  text-transform: uppercase;
}
.zine-h2 .hl { background: var(--ink); color: var(--paper); padding: 0 8px; }
.zine-kicker { font-family: var(--f-marker); font-size: 20px; color: var(--red); transform: rotate(-1deg); }
.zine-lead {
  font-family: var(--f-hand); font-weight: 600; font-size: 24px;
  max-width: 640px; margin: 10px 0 30px;
}

/* ============================ FEATURE SCRAPS ============================ */
.scraps { display: flex; flex-wrap: wrap; gap: 26px; }
.scrap {
  position: relative; flex: 1 1 240px; min-width: 230px;
  background: var(--scrap); padding: 24px 22px; box-shadow: 3px 5px 14px rgba(0,0,0,0.22);
}
.scrap:nth-child(1) { transform: rotate(-1.5deg); clip-path: polygon(0 3%,4% 0,40% 2%,70% 0,100% 3%,99% 40%,100% 74%,98% 100%,60% 98%,28% 100%,2% 98%,1% 60%); }
.scrap:nth-child(2) { transform: rotate(1.5deg);  clip-path: polygon(0 2%,3% 0,45% 3%,72% 0,100% 2%,98% 44%,100% 72%,97% 100%,55% 97%,25% 100%,3% 98%,0 55%); }
.scrap:nth-child(3) { transform: rotate(-1deg);   clip-path: polygon(0 3%,5% 0,42% 2%,68% 0,100% 4%,99% 42%,100% 70%,98% 100%,58% 98%,26% 100%,2% 97%,1% 58%); }
.scrap:nth-child(4) { transform: rotate(2deg);    clip-path: polygon(0 2%,4% 0,38% 3%,74% 0,100% 3%,98% 40%,100% 76%,97% 100%,62% 97%,24% 100%,3% 98%,0 52%); }
.scrap h3 { font-family: var(--f-marker); font-size: 22px; font-weight: 400; margin: 8px 0 6px; }
.scrap p  { font-family: var(--f-type); font-size: 13.5px; line-height: 1.6; margin: 0; }
.scrap .ic { display: block; }
.scrap a { border-bottom: 2px solid var(--pink); }

/* tape strips */
.tape { position: absolute; width: 70px; height: 24px; z-index: 1; }
.tape-teal { background: rgba(23,179,173,0.5); }
.tape-pink { background: rgba(236,28,125,0.45); }
.tape-gold { background: rgba(216,190,120,0.6); }
.scrap:nth-child(1) .tape { top: -12px; left: 22px;  transform: rotate(-6deg); }
.scrap:nth-child(2) .tape { top: -12px; right: 22px; transform: rotate(5deg); }
.scrap:nth-child(3) .tape { top: -12px; left: 30px;  transform: rotate(4deg); }
.scrap:nth-child(4) .tape { top: -12px; right: 26px; transform: rotate(-5deg); }

/* ============================ COMMAND PALETTE ============================ */
.pal-row { display: flex; gap: 36px; align-items: flex-start; margin-top: 26px; flex-wrap: wrap; }
.pal-card {
  position: relative; flex: 0 0 auto; width: 520px; max-width: 100%;
  background: var(--scrap2); border: 2px solid var(--ink);
  box-shadow: 6px 8px 0 rgba(23,19,15,0.85); transform: rotate(-1deg);
}
.pal-card .tape { top: -14px; left: 60px; width: 90px; height: 28px; background: rgba(236,28,125,0.4); transform: rotate(-4deg); z-index: 2; }
.pd-input { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 2px solid var(--ink); font-family: var(--f-type); font-size: 15px; }
.pd-input .prompt { color: var(--red); font-weight: 700; }
.pd-caret { display: inline-block; width: 8px; height: 17px; background: var(--ink); animation: blink 1.1s step-end infinite; }
.pd-section { padding: 12px 18px 5px; font-family: var(--f-type); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pd-section.ai { font-family: var(--f-marker); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--pink); }
.pd-row { display: flex; align-items: center; gap: 12px; padding: 8px 18px; font-family: var(--f-type); font-size: 14px; }
.pd-row svg { flex-shrink: 0; }
.pd-row kbd { margin-left: auto; border: 1.5px solid var(--ink); padding: 0 7px; font-size: 11px; white-space: nowrap; font-family: var(--f-type); }
.pd-row.ai { background: #ffe6f2; }
.pd-row.ai .q { color: var(--muted); }
.pd-answer { padding: 6px 18px 16px 48px; font-family: var(--f-type); font-size: 13px; color: #3a3020; line-height: 1.5; }
.pd-chips { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.pd-chips .src-lbl { width: 100%; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: -2px; }
.pd-chips span:not(.src-lbl) { font-size: 11px; border: 1.5px solid var(--pink); background: #ffe6f2; padding: 2px 9px; }

/* sticker keycaps */
.keycaps-col { flex: 1 1 260px; min-width: 240px; }
.keycaps-lead { font-family: var(--f-hand); font-weight: 700; font-size: 26px; transform: rotate(-1deg); margin-bottom: 14px; }
.keycaps { display: flex; flex-wrap: wrap; gap: 12px; }
.keycaps span {
  font-family: var(--f-type); font-size: 14px; background: var(--scrap);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 7px 12px;
}
.keycaps span:nth-child(odd)  { transform: rotate(-2deg); }
.keycaps span:nth-child(even) { transform: rotate(2deg); }
.keycaps-tag { font-family: var(--f-rock); font-size: 15px; color: var(--red); transform: rotate(-3deg); margin-top: 26px; }

/* ============================ AI LIST ============================ */
.ai-eyebrow { display: inline-block; font-family: var(--f-type); font-size: 13px; background: var(--ink); color: var(--paper); padding: 6px 12px; transform: rotate(1.5deg); letter-spacing: 0.1em; }
.ai-h2 { font-family: var(--f-black); font-size: clamp(34px, 6vw, 52px); margin-top: 14px; transform: rotate(-0.5deg); text-transform: uppercase; }
.ai-h2 .hand { font-family: var(--f-marker); color: var(--pink); text-transform: none; }
.ai-list { list-style: none; display: flex; flex-direction: column; gap: 20px; max-width: 820px; margin: 0; padding: 0; }
.ai-list li { display: flex; gap: 16px; align-items: baseline; }
.ai-list .num { font-family: var(--f-marker); font-size: 26px; flex: 0 0 46px; }
.ai-list li:nth-child(4n+1) .num { color: var(--red); }
.ai-list li:nth-child(4n+2) .num { color: var(--teal); }
.ai-list li:nth-child(4n+3) .num { color: var(--pink); }
.ai-list li:nth-child(4n+4) .num { color: var(--ink); }
.ai-list p { font-family: var(--f-hand); font-weight: 600; font-size: 23px; line-height: 1.4; margin: 0; }
.ai-list b { font-weight: 600; }
.ai-list li:nth-child(4n+1) b { background: linear-gradient(transparent 55%, var(--yellow) 55%); }
.ai-list li:nth-child(4n+2) b { background: linear-gradient(transparent 55%, #7ee7e0 55%); }
.ai-list li:nth-child(4n+3) b { background: linear-gradient(transparent 55%, #ffb3d6 55%); }
.ai-list li:nth-child(4n+4) b { background: linear-gradient(transparent 55%, var(--yellow) 55%); }
.ai-list a { border-bottom: 2px solid var(--pink); }

/* ============================ PAPER CARD (install / contribute) ============================ */
.paper-card {
  position: relative; background: var(--scrap); border: 2px solid var(--ink);
  box-shadow: 6px 8px 0 rgba(23,19,15,0.85); padding: 28px clamp(22px,4vw,34px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 22px; justify-content: space-between;
  transform: rotate(-0.6deg);
}
.paper-card .txt { max-width: 560px; }
.paper-card h3 { font-family: var(--f-marker); font-size: 26px; font-weight: 400; margin: 0 0 8px; }
.paper-card p { font-family: var(--f-type); font-size: 14px; line-height: 1.6; margin: 0; }
.paper-card p code, .paper-card .kbd-ink { background: var(--ink); color: var(--paper); padding: 1px 5px; font-family: var(--f-type); }
.card-cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ============================ SCREENSHOT ON SHEET ============================ */
.shot-plain {
  position: relative; border: 3px solid var(--ink); box-shadow: 6px 8px 0 rgba(23,19,15,0.8);
  transform: rotate(-0.5deg); overflow: hidden; margin-top: 6px;
}
.shot-plain img { display: block; width: 100%; height: auto; }
.shot-plain video { display: block; width: 100%; height: auto; }

/* ============================ DEMO VIDEO ============================ */
.demo-frame { position: relative; max-width: 900px; margin: 0; }
.demo-vid { cursor: pointer; }
.demo-note {
  position: absolute; right: -10px; bottom: -14px; z-index: 6;
  background: var(--scrap2); font-family: var(--f-hand); font-weight: 700;
  font-size: 18px; padding: 4px 12px; transform: rotate(-3deg);
  box-shadow: 2px 3px 6px rgba(0,0,0,0.22); border: 1px solid rgba(0,0,0,0.12);
}

/* ============================ FAQ ============================ */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 780px; }
.faq-list details {
  background: var(--scrap); border: 2px solid var(--ink); box-shadow: 3px 4px 0 rgba(23,19,15,0.8);
}
.faq-list details:nth-child(odd)  { transform: rotate(-0.5deg); }
.faq-list details:nth-child(even) { transform: rotate(0.5deg); }
.faq-list summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  font-family: var(--f-marker); font-weight: 400; font-size: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--red); font-family: var(--f-black); font-size: 24px; flex-shrink: 0; transition: transform .15s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { margin: 0; padding: 0 20px 18px; font-family: var(--f-type); font-size: 13.5px; line-height: 1.65; }

/* ============================ TOOLTIP (app.js) ============================ */
.tip {
  cursor: help; font: inherit; color: inherit;
  border-bottom: 2px dotted currentColor; padding: 0; background: none;
}
.tip-pop {
  position: absolute; z-index: 60; max-width: 320px;
  background: var(--scrap2); border: 2px solid var(--ink); box-shadow: 5px 6px 0 rgba(23,19,15,0.8);
  padding: 13px 15px; font-family: var(--f-type); font-size: 13px; font-weight: 400; line-height: 1.55;
  color: var(--ink); text-align: left; letter-spacing: 0;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.tip-pop.show { opacity: 1; transform: translateY(0); }
.tip-pop b { color: var(--ink); }

/* ============================ FOOTER ============================ */
.zine-footer {
  position: relative; z-index: 5; background: var(--ink); color: var(--paper);
  padding: 22px clamp(20px,5vw,44px) 22px clamp(24px,7vw,70px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  font-family: var(--f-type); font-size: 13px;
}
.zine-footer .foot-links { display: flex; gap: 16px; flex-wrap: wrap; margin-left: auto; }
.zine-footer a { border-bottom: 1px solid var(--red); transition: color .15s; }
.zine-footer a:hover { color: var(--pink); }
.zine-footer .page-no { font-family: var(--f-marker); color: var(--paper); width: 100%; text-align: right; opacity: 0.8; }

/* ============================ LEGAL BODY (privacy/terms) ============================ */
.legal-main .sheet { max-width: 960px; }
.legal { padding: 34px clamp(24px,6vw,66px) 56px; font-family: var(--f-type); }
.legal h1 { font-family: var(--f-black); font-size: clamp(34px,6vw,52px); text-transform: uppercase; margin: 0 0 6px; transform: rotate(-0.5deg); }
.legal h2 { font-family: var(--f-marker); font-size: 24px; font-weight: 400; margin: 34px 0 10px; }
.legal h3 { font-family: var(--f-marker); font-size: 19px; font-weight: 400; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 14.5px; line-height: 1.7; }
.legal .updated { font-family: var(--f-hand); font-size: 18px; color: var(--muted); margin: 0 0 20px; }
.legal .note { font-family: var(--f-hand); font-size: 17px; color: var(--muted); }
.legal .lead { font-size: 15.5px; }
.legal a { border-bottom: 2px solid var(--pink); }
.legal a:hover { color: var(--pink); }
.legal code { background: var(--ink); color: var(--paper); padding: 1px 5px; }
.legal strong { color: var(--ink); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 720px) {
  .frame { padding: 16px 10px 40px; }
  .mast-nav a:not(.mast-more) { }
  .hero-swash-a, .hero-swash-b { display: none; }
  .sticker, .decal { display: none; }
  h1.ransom { margin-top: 18px; }
  .polaroid { width: 100%; }
}
/* AI-section right-gutter strip needs a real gutter beside the 820px list */
@media (max-width: 1100px) {
  .decal-ai { display: none; }
}
@media (max-width: 520px) {
  .mast-nav { font-size: 18px; gap: 12px; }
  .zine-h2, .ai-h2 { transform: none; }
}