/* Rant Zone — flat, white, orange. No shadows, no gradients, no radii.
   Shares nothing with station.css, on purpose (SPEC §6). */

:root {
  --rz-paper: #FFFFFF;
  --rz-ink: #141414;
  --rz-grey: #6B6B6B;
  --rz-line: #E6E6E6;
  --rz-orange: #FF5A1F;
  --rz-orange-dark: #D9430E;
  --rz-orange-tint: #FFF1EA;
  --rz-measure: 720px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--rz-paper);
  color: var(--rz-ink);
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--rz-orange-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rz-ink); }
:focus-visible { outline: 2px solid var(--rz-orange); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- chrome ------------------------------------------------------------ */

header.site {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  width: 100%; max-width: var(--rz-measure);
  margin: 0 auto; padding: 28px 24px 0;
}

.wordmark {
  font-size: 20px; font-weight: 800; letter-spacing: .04em;
  color: var(--rz-orange); text-decoration: none;
}
.wordmark span { color: var(--rz-ink); }
.wordmark:hover span { color: var(--rz-orange); }

header.site nav { display: flex; gap: 20px; }
header.site nav a {
  font-size: 15px; color: var(--rz-grey); text-decoration: none;
}
header.site nav a:hover { color: var(--rz-orange-dark); }

main {
  flex: 1 0 auto;
  width: 100%; max-width: var(--rz-measure);
  margin: 0 auto; padding: 56px 24px 72px;
}

footer.site {
  border-top: 1px solid var(--rz-line);
  margin-top: auto;
}
footer.site p {
  width: 100%; max-width: var(--rz-measure);
  margin: 0 auto; padding: 20px 24px;
  font-size: 14px; color: var(--rz-grey);
}

/* --- hero -------------------------------------------------------------- */

h1 {
  margin: 0 0 12px;
  font-size: clamp(40px, 9vw, 56px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05;
  color: var(--rz-orange);
}

.standfirst {
  margin: 0 0 20px;
  font-size: clamp(20px, 3.4vw, 24px); font-weight: 500; color: var(--rz-ink);
}

.body { margin: 0; max-width: 56ch; color: var(--rz-grey); }

.hero { margin-bottom: 40px; }

/* --- the box ----------------------------------------------------------- */

form.rant { margin: 0 0 40px; }

form.rant textarea {
  display: block; width: 100%;
  padding: 18px;
  font: inherit; font-size: 18px; line-height: 1.55;
  color: var(--rz-ink); background: var(--rz-paper);
  border: 1px solid var(--rz-line); border-radius: 0;
  resize: vertical;
}
form.rant textarea::placeholder { color: #A8A8A8; }
form.rant textarea:focus {
  outline: none; border-color: var(--rz-orange);
  box-shadow: inset 0 0 0 1px var(--rz-orange);
}

button, .button {
  display: inline-block; margin-top: 16px;
  padding: 15px 34px;
  font: inherit; font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  color: #FFFFFF; background: var(--rz-orange);
  border: 0; border-radius: 0; cursor: pointer;
}
button:hover, .button:hover { background: var(--rz-orange-dark); color: #FFFFFF; }

@media (max-width: 560px) { button, .button { display: block; width: 100%; text-align: center; } }

.reassurance {
  border-top: 1px solid var(--rz-line);
  padding-top: 24px;
  font-size: 15px; color: var(--rz-grey);
}
.reassurance p { margin: 0; }

/* --- confirmation ------------------------------------------------------ */

.gone {
  background: var(--rz-orange-tint);
  padding: 48px 32px;
}
.gone h1 { color: var(--rz-ink); }
.gone .standfirst { color: var(--rz-orange-dark); font-weight: 700; }
.gone .body { margin-bottom: 8px; }

/* --- prose pages ------------------------------------------------------- */

.prose h1 { font-size: clamp(34px, 7vw, 44px); color: var(--rz-ink); }
.prose h2 {
  margin: 40px 0 12px; font-size: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--rz-orange-dark);
}
.prose p, .prose li { max-width: 62ch; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 10px; }
.prose ol.rules { counter-reset: rule; list-style: none; padding-left: 0; }
.prose ol.rules li {
  counter-increment: rule;
  border-top: 1px solid var(--rz-line);
  padding: 16px 0 16px 52px; position: relative; margin: 0;
}
.prose ol.rules li::before {
  content: counter(rule);
  position: absolute; left: 0; top: 14px;
  font-weight: 800; font-size: 22px; color: var(--rz-orange);
}

/* --- the shredder ------------------------------------------------------ */

.shredder { position: relative; }
.shredder-layer {
  position: absolute; inset: 0;
  padding: 18px;
  font-size: 18px; line-height: 1.55;
  overflow: hidden; pointer-events: none;
  background: var(--rz-paper);
  border: 1px solid var(--rz-line);
  white-space: pre-wrap; word-break: break-word;
}
.shredder-layer span {
  display: inline-block; white-space: pre;
  transition: transform .55s cubic-bezier(.3, .1, .5, 1), opacity .55s linear;
}
.shredder-hidden { visibility: hidden; }