/* Rising Drop — therisingdrop.com
   ═══════════════════════════════════════════════════════════════════════

   One stylesheet for the three pages people land on: the home page,
   /what-ejaculation-costs and /streak-apps-are-broken. /privacy and /terms
   keep styles.css, so a change here never has to be checked against a legal
   document.

   Built inside the CSP in _headers: no JavaScript, no <style> blocks, no
   style="" attributes, nothing loaded from another host. The two webfonts
   are served from /fonts, and each is only fetched by a page that uses it.

   Colours are the app's own (Theme.swift). Dark only, like the app.

   ── WRITTEN FOR A THUMB AND TEN SECONDS ────────────────────────────────
   Most of this traffic is a phone, arriving from a link in a comment. So:
   one column, big type, short lines, nothing that moves unless it is
   tapped, and the answer to a question shut until somebody asks for it.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2");
}

/* The handwriting is Noteworthy, as in the app, on every Apple device.
   Caveat stands in anywhere Noteworthy isn't installed, and is never
   downloaded where it is. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/caveat-500-latin.woff2") format("woff2");
}

:root {
  --paper:  #0F1216;   /* Ink.paper */
  --card:   #12161B;
  --block:  #161A20;
  --ink:    #E7E5E0;   /* the claim */
  --ink2:   #9AA0A9;   /* everything explanatory */
  --ink3:   #666D77;   /* captions, fine print */
  --ink4:   #414751;   /* the number that died */
  --rule:   rgba(255, 255, 255, 0.07);
  --accent: #C2410C;   /* right as a fill, too dark as type */
  --ember:  #E8875A;   /* the lit colour, as type */
  --emberHot: #F6B183; /* his handwriting */
  --hot:    #F97316;
  --water:  #74B3A6;
  --sticker: #F2EEE6;  /* the paper a question is written on */
  --stickerInk: #17191D;

  --sans:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
           Helvetica, Arial, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
           "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --hand:  Noteworthy, "Bradley Hand", Caveat, cursive;

  /* The column. Wide enough for a phone held any way up; on a desktop it
     stays a column, because everything on these pages is read, not
     scanned in a grid. */
  --col: 34rem;
  --gut: 1.1rem;

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: calc(var(--col) + var(--gut) * 2);
  margin-inline: auto;
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}

/* The gate's own light: accent at a sixth, from just off the top edge. */
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(80vh, 640px);
  z-index: -1;
  background: radial-gradient(ellipse 120% 100% at 50% 0,
              rgba(194, 65, 12, 0.16), rgba(194, 65, 12, 0) 66%);
  pointer-events: none;
}


/* ═══ THE NAME ══════════════════════════════════════════════════════════
   The drop and the word, as on the first screen: warm, spaced, quieter
   than anything it sits above. On the two articles it is also the way
   home. */

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.mark img { width: auto; height: 26px; }

/* On the home page the mark stands over the name, as it does on the app's
   splash, and is big enough to be looked at. */
.top .mark { flex-direction: column; gap: 0.8rem; }
.top .mark img { height: 48px; }

.mark span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 135, 90, 0.72);
}


/* ═══ HOME: THE HOOK ════════════════════════════════════════════════════
   The app's first screen, word for word and centred the way it is there.
   Heavy, white, and the second line lit. */

.top {
  padding-top: max(2.4rem, calc(env(safe-area-inset-top) + 1rem));
  text-align: center;
}

.hook {
  margin: 1.7rem auto 0;
  max-width: 13em;
  font-weight: 800;
  font-size: clamp(1.95rem, 8.4vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}

.hook .lit { display: block; color: var(--ember); }

.sub {
  margin-top: 0.85rem;
  font-size: 1.02rem;
  color: var(--ink2);
  text-wrap: balance;
}

/* Apple's artwork, unmodified: the white lockup, which is the one for a
   dark ground. Only its size and the air around it are ours. */
.badge {
  display: inline-block;
  margin-top: 1.6rem;
  border-radius: 9px;
  transition: filter 0.2s ease;
}

.badge img { height: 52px; width: auto; }
.badge:hover { filter: brightness(1.08); }

/* What it is, in one sentence, for anyone (or anything) arriving cold. */
.what {
  max-width: 29em;
  margin: 1rem auto 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink2);
  text-wrap: balance;
}

.trust {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--ink3);
}


/* ═══ THE SCREENSHOTS ═══════════════════════════════════════════════════
   The nine from the App Store, in a row that bleeds off the edge. Cut off
   by the screen is the only thing that says "there is more, sideways". The
   row starts on the column's left edge at every width. */

.shots { margin-top: 2.4rem; }

.rail {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 0.2rem 1rem;
  padding-inline: max(var(--gut), calc((100% - var(--col)) / 2));
}

.rail::-webkit-scrollbar { display: none; }

.rail figure {
  flex: none;
  margin: 0;
  width: clamp(150px, 42vw, 228px);
  scroll-snap-align: center;
}

.rail img {
  border-radius: 12.5% / 5.8%;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 14px 32px rgba(0, 0, 0, 0.5);
}


/* ═══ THE FOUNDER Q&A ═══════════════════════════════════════════════════
   As on the first screen: the questions are paper stickers, stuck on by
   hand at a slight tilt; tap one and it straightens and its answer opens
   under it. The words are FirstLook.swift's, written in by tools/build.py.

   The three parts stack here rather than sit behind a picker. A tab only
   earns its place when the page is short, and a link to /#who-can-see-it
   has to land on its question, not on a tab it is hidden behind. */

.qa { margin-top: 2.2rem; }

.founder {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.founder svg {
  width: 9px;
  height: 12px;
  filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.6));
}

.founder em { font-style: normal; color: var(--ember); }

.part { margin-top: 2.1rem; scroll-margin-top: 1rem; }
.part:first-of-type { margin-top: 0.6rem; }

/* Each part's colour: the ember of the argument, the water of the app, the
   paper of the small print. A short bar under the name, where the app's
   picker carries it. */
.part h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.part h2::after {
  content: "";
  display: block;
  width: 2.1rem;
  height: 2px;
  margin-top: 0.45rem;
  border-radius: 1px;
  background: var(--tint);
}

.part.real   { --tint: var(--hot); }
.part.inside { --tint: var(--water); }
.part.before { --tint: #EEE9DF; }

/* His note over each part. Lower case on purpose: a note, not a heading. */
.hand {
  margin-top: 0.6rem;
  font-family: var(--hand);
  font-weight: 300;
  font-size: 1.14rem;
  line-height: 1.3;
  color: var(--emberHot);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

/* Where the app's own tabs begin inside "Inside". */
.tab {
  margin-top: 1.9rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink3);
}

.tab b {
  margin-right: 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--water);
}

.q { margin-top: 1.3rem; scroll-margin-top: 1.2rem; }

/* A slight tilt each, never the same twice in a row: the app's own list. */
.q:nth-of-type(9n+1) { --tilt: -1.3deg; }
.q:nth-of-type(9n+2) { --tilt: 1deg; }
.q:nth-of-type(9n+3) { --tilt: -0.7deg; }
.q:nth-of-type(9n+4) { --tilt: 1.4deg; }
.q:nth-of-type(9n+5) { --tilt: -1.1deg; }
.q:nth-of-type(9n+6) { --tilt: 0.6deg; }
.q:nth-of-type(9n+7) { --tilt: 1.2deg; }
.q:nth-of-type(9n+8) { --tilt: -0.9deg; }
.q:nth-of-type(9n+9) { --tilt: 0.5deg; }

.q summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  /* Never quite to the far edge, so a short question stays a sticker and a
     long one doesn't become a banner. */
  margin-right: 1.2rem;
  padding: 0.8rem 1.05rem 0.85rem;
  border-radius: 18px;
  background: var(--sticker);
  color: var(--stickerInk);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  rotate: var(--tilt, 0deg);
  transition: rotate 0.35s cubic-bezier(0.34, 1.5, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.q summary::-webkit-details-marker { display: none; }
.q summary::marker { content: ""; }

.q summary::before {
  content: "?";
  position: absolute;
  left: -8px;
  top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 0 3px var(--paper);
  color: #fff;
  font: 800 13px/22px var(--round);
  text-align: center;
}

/* Tapped, it straightens: the one being answered. */
.q[open] summary { rotate: 0deg; }

/* Arrived at from a link (/#is-fapping-bad), it straightens and glows, so
   the question somebody was sent to is the one the eye lands on. */
.q:target summary {
  rotate: 0deg;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.75), 0 10px 24px rgba(0, 0, 0, 0.4);
}

.q h3 {
  margin: 0;
  font-family: var(--round);
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* ONE SENTENCE A LINE, ONE PHRASE MARKED. The first paragraph is the
   answer and set larger; the rest are the reason. The marker sits low,
   from the middle of the letters to just under them. */
.a { padding: 1.05rem 0.15rem 0.3rem; }

.a p { margin-bottom: 0.95rem; font-size: 1rem; line-height: 1.5; }
.a p:last-child { margin-bottom: 0; }
.a p.lead { font-size: 1.15rem; line-height: 1.42; color: var(--ink); }

.a .s { display: block; }
.a .s + .s { margin-top: 0.38rem; }

mark {
  padding: 0 0.04em;
  color: var(--ink);
  background: linear-gradient(transparent 58%, rgba(232, 135, 90, 0.34) 58%,
              rgba(232, 135, 90, 0.34) 88%, transparent 88%);
}

.a .aside { font-size: 0.8rem; line-height: 1.5; color: var(--ink3); }
.a a { color: var(--ember); text-underline-offset: 0.15em; }


/* ═══ THE CLOSE ═════════════════════════════════════════════════════════ */

.end {
  margin-top: 3.4rem;
  padding-block: 2.6rem 0.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.end h2 {
  margin: 0;
  font-size: clamp(1.6rem, 6.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

.end p { margin-top: 0.7rem; color: var(--ink2); text-wrap: balance; }
.end .badge { margin-top: 1.4rem; }

/* Where to go next. Plain rows, the way a settings list reads. */
.more {
  display: grid;
  margin-top: 2.8rem;
}

.more a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--ink2);
}

.more a:last-child { border-bottom: 1px solid var(--rule); }
.more a b { font-weight: 600; color: var(--ink); }
.more a i { font-style: normal; color: var(--ember); }
.more a:hover b { color: var(--ember); }

.foot {
  margin-top: 2.6rem;
  padding-block: 1.6rem calc(2.2rem + env(safe-area-inset-bottom));
  text-align: center;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1.2rem;
  font-size: 0.8rem;
}

.foot a { color: var(--ink3); text-decoration: none; padding: 0.3rem 0; }
.foot a:hover { color: var(--ink); }
.foot p { margin-top: 0.4rem; font-size: 0.74rem; color: var(--ink4); }


/* ═══ THE TWO ARTICLES: THE SHARED HEAD ═════════════════════════════════ */

.bar { padding-top: max(1.4rem, calc(env(safe-area-inset-top) + 0.6rem)); }

.doc h1 {
  margin: 1.8rem 0 0;
  font-weight: 800;
  font-size: clamp(1.95rem, 8.4vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}

.doc h2 {
  margin: 2.8rem 0 0;
  font-weight: 800;
  font-size: clamp(1.45rem, 6vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

/* The answer, before anything else on the page. */
.answer {
  margin-top: 1rem;
  font-size: 1.2rem;
  line-height: 1.42;
  color: var(--ink);
  text-wrap: pretty;
}

.doc p.body { margin-top: 0.8rem; font-size: 1.02rem; color: var(--ink2); text-wrap: pretty; }
.doc .small { margin-top: 0.7rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink3); }

/* The close inside a page keeps the close's own heading, not the page's. */
.doc .end h2 { margin-top: 0; font-size: clamp(1.6rem, 6.6vw, 2.2rem); line-height: 1.08; }

/* Read aloud and read by machines, not drawn. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ═══ /what-ejaculation-costs: THE TWO TABLES ═══════════════════════════
   Numbers in columns, so the digits line up and the eye can go straight
   down one. The release's own column is the bright one: it is the number
   the page is about, and it is the small one. */

.table-hold { margin-top: 1.4rem; overflow-x: auto; }

.nums {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.nums th, .nums td {
  padding: 0.75rem 0.45rem;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  vertical-align: baseline;
  font-size: 0.98rem;
  white-space: nowrap;
}

.nums th:first-child, .nums td:first-child { padding-left: 0; text-align: left; }
.nums th:last-child, .nums td:last-child { padding-right: 0; }

.nums thead th {
  vertical-align: bottom;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: normal;
  color: var(--ink3);
}

.nums tbody th { font-weight: 500; color: var(--ink2); }
.nums .you { color: var(--ink); font-weight: 700; }
.nums thead .you { color: var(--ember); }
.nums .nuts { color: var(--water); }
.nums thead .nuts { color: var(--water); }

/* ═══ THE ONE LOUD LINK ═════════════════════════════════════════════════
   Not a question and not a row in a list: a button, in the style of the
   app's "Have a look around first", ember-edged and lit from inside. The
   home page has one, to /what-ejaculation-costs, and that page has a slim
   one, down to the brain. */

.go {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
  margin-top: 2.2rem;
  padding: 1.05rem 1.2rem 1.1rem;
  border: 1.5px solid rgba(232, 135, 90, 0.55);
  border-radius: 18px;
  background: rgba(232, 135, 90, 0.07);
  box-shadow: 0 0 40px rgba(232, 135, 90, 0.14);
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.go b {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.go span {
  grid-column: 1;
  margin-top: 0.2rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ember);
}

.go i {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-style: normal;
  font-size: 1.5rem;
  color: var(--ember);
}

.go:hover { background: rgba(232, 135, 90, 0.11); box-shadow: 0 0 48px rgba(232, 135, 90, 0.2); }

.go.pill { margin-top: 1.3rem; padding: 0.8rem 1.25rem; border-radius: 999px; }
.go.pill b { font-size: 1.02rem; font-weight: 700; }
.go.pill i { grid-row: 1; font-size: 1.2rem; }


/* ═══ /what-ejaculation-costs: THE HEAD ═══════════════════════════════════
   A rough map of the four places the cards talk about, then the cards:
   one claim each, in a sentence, and the source it stands on. The dot on a
   card is the colour of its place on the map. */

.head { scroll-margin-top: 1rem; }

.map { margin: 1.4rem 0 0; }
.map svg { width: 100%; height: auto; max-width: 28rem; margin-inline: auto; }
.map figcaption { margin-top: 0.3rem; text-align: center; font-size: 0.75rem; color: var(--ink3); }

.facts {
  display: grid;
  gap: 0.7rem;
  margin: 1.3rem 0 0;
  padding: 0;
  list-style: none;
}

.fact {
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
}

.fact .who { display: flex; align-items: center; gap: 0.4rem; }

.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.dot.vta  { background: var(--hot); box-shadow: 0 0 6px rgba(249, 115, 22, 0.6); }
.dot.rew  { background: var(--ember); }
.dot.pfc  { background: var(--water); }
.dot.amcc { background: #9186C0; }

.fact .claim {
  margin-top: 0.4rem;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}

.fact .say { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.5; color: var(--ink2); }

/* A source number, small enough not to interrupt the sentence and big
   enough to tap. */
.ref {
  display: inline-block;
  min-width: 1.5em;
  margin-left: 0.25em;
  padding: 0 0.35em;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  vertical-align: 0.1em;
  color: var(--ink2);
}

.ref:hover { color: var(--ember); }

.takeaway {
  margin-top: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

.doc h3 {
  margin: 2.6rem 0 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.sources li { scroll-margin-top: 1rem; }
.sources li:target { color: var(--ink); }

/* Four columns on the smallest phones: the air between them goes first, so
   no figure ever has to wrap or scroll. */
@media (max-width: 359px) {
  .nums th, .nums td { padding-inline: 0.22rem; font-size: 0.9rem; }
}

.sources {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.sources h2 { margin-top: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink3); }

.sources ol {
  margin: 0.9rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink3);
}

.sources li + li { margin-top: 0.55rem; }
.sources a { color: var(--ink2); text-underline-offset: 0.15em; overflow-wrap: anywhere; }


/* ═══ /streak-apps-are-broken: THE HOOK, AS THE FIRST SCREENSHOT ═════════
   The same composition as App Store frame 1, measured in the frame's own
   width (cqw), so one set of numbers holds from a small phone to a desktop.
   Only the height is shorter: a page has no status bar to clear. */

.hookart {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 28rem;
  margin: 0.4rem auto 0;
  aspect-ratio: 100 / 206;
  overflow: hidden;
}

.hookart h1 { margin: 0; font-weight: 400; }

/* The statement heavy and ember on the left; the answer on the right in a
   thin italic serif, white. Two faces as far apart as they go. */
.h-set, .h-big { position: absolute; z-index: 4; }

.h-set {
  left: 7.5cqw;
  right: 5cqw;
  top: 10cqw;
  font-weight: 800;
  font-size: 13.5cqw;
  line-height: 0.93;
  letter-spacing: -0.04em;
  color: var(--ember);
}

.h-set span { display: block; }

.h-big {
  right: 6cqw;
  top: 38cqw;
  white-space: nowrap;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17.5cqw;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.slips { margin: 0; padding: 0; list-style: none; }

.slip {
  position: absolute;
  z-index: 2;
  width: max-content;
  padding: 3.2cqw 4.4cqw 3.4cqw;
  border-radius: 1.4cqw;
  background: var(--sticker);
  color: #1B1D21;
  font-weight: 800;
  font-size: 6.4cqw;
  line-height: 1;
  letter-spacing: -0.03em;
  box-shadow: 0 1.4cqw 4cqw rgba(0, 0, 0, 0.55);
  transform: rotate(var(--r));
}

.slip s { text-decoration: none; }

.slip svg {
  position: absolute;
  left: 2.4cqw;
  right: 2.4cqw;
  top: 50%;
  translate: 0 -46%;
  width: calc(100% - 4.8cqw);
  overflow: visible;
}

.slip svg path {
  fill: none;
  stroke: var(--hot);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.slip.win {
  padding: 4cqw 5.8cqw 4.3cqw;
  background: var(--hot);
  color: #160B04;
  font-size: 10cqw;
  box-shadow: 0 1.6cqw 6cqw rgba(249, 115, 22, 0.35), 0 1.4cqw 4cqw rgba(0, 0, 0, 0.5);
}

.s1 { --r: -5deg;   left: 7cqw;  top: 66cqw; }
.s2 { --r: 4deg;    left: 30cqw; top: 81cqw; }
.s3 { --r: -2.5deg; left: 10cqw; top: 96cqw; }
.s4 { --r: 3deg;    left: 4cqw;  top: 111cqw; }
.s5 { --r: -3deg;   left: 12cqw; top: 146cqw; }

.range-glow {
  position: absolute;
  left: 44cqw;
  top: 159cqw;
  width: 40cqw;
  height: 40cqw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232, 135, 90, 0.16), transparent);
}

.range {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100cqw;
  height: 30cqw;
  z-index: 1;
  -webkit-mask-image: linear-gradient(transparent, #000 38%);
  mask-image: linear-gradient(transparent, #000 38%);
}


/* ═══ /streak-apps-are-broken: 41 DAYS, THEN ONE BAD NIGHT ═══════════════
   The whole argument as two numbers. The dead one in the dimmest ink on the
   page, the kept one in ember, so the difference reads before either row
   does. */

.vs { display: grid; gap: 0.7rem; margin-top: 1.4rem; }

.row {
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--card);
}

.row.us {
  border-color: rgba(194, 65, 12, 0.45);
  background: rgba(194, 65, 12, 0.08);
}

.who {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink3);
}

.us .who { color: var(--ember); }

.n {
  margin-top: 0.3rem;
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.n s { color: var(--ink4); text-decoration-thickness: 3px; }
.n i { margin: 0 0.3rem; font-style: normal; font-weight: 400; color: var(--ink4); }
.n .zero { color: var(--ink4); }
.n .kept { color: var(--ember); }
.n small { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink2); }

.say { margin-top: 0.35rem; font-size: 0.95rem; color: var(--ink2); }

.doc .shots { margin-top: 2.6rem; }


/* ═══ WIDER THAN A PHONE ════════════════════════════════════════════════ */

@media (min-width: 760px) {
  :root { --gut: 2rem; }
  .top { padding-top: 4rem; }
  .badge img { height: 56px; }
  .rail figure { width: 228px; }
  .rail { gap: 1rem; }
}


/* ═══ ACCESSIBILITY ═════════════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 6px;
}

.q summary:focus-visible { border-radius: 18px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}