/* Long-form pages: /about and the diary.
   Inherits every token and the notched box language from styles.css. */

body.doc {
  background:
    radial-gradient(120% 70% at 18% 0%, var(--oxblood), transparent 62%),
    var(--ground);
  background-attachment: fixed;
}

/* --------------------------------------------------------- doc header ---- */

.doc-header {
  position: relative;
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--pad) 8px;
  text-align: center;
}

.back {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  padding: 10px 2px; /* 44px tap target without visual weight */
}
.back:hover,
.back:active {
  color: var(--bone);
}

.doc-header h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 11vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 6px 0 0;
}

.doc-tagline {
  margin: 12px 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--muted);
}

/* ----------------------------------------------------------- doc body ---- */

.doc-main {
  max-width: var(--measure);
  margin: 0 auto;
  /* Bottom padding clears the sticky CTA (~76px) so the last line is never
     trapped behind it, with a little air and nothing more. */
  padding: 26px var(--pad) 96px;
}

.lede {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--bone);
  margin: 0 0 30px;
}

.section {
  margin: 0 0 38px;
}

.section h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 4px;
}

/* The drip motif again, at section scale: a hairline with a bead hanging off
   it. Static here — an animated one per section would be noise. */
.section h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  margin-top: 10px;
  background: var(--cherry);
  box-shadow: 6px 4px 0 -1px var(--cherry);
}

.section-blurb {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 14px 0 18px;
}

.doc-main p {
  margin: 0 0 16px;
}

.outro {
  color: var(--bone);
  font-style: italic;
  font-family: var(--f-display);
  font-size: 1.3rem;
  line-height: 1.5;
  margin-top: 26px;
}

/* -------------------------------------------------------- quick facts ---- */

.facts-grid {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(236, 228, 230, 0.09);
  border: 1px solid rgba(236, 228, 230, 0.09);
  clip-path: var(--notch);
}
.fact {
  background: rgba(20, 10, 14, 0.86);
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fact-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
}
.fact-value {
  font-size: 0.95rem;
  color: var(--bone);
}
@media (min-width: 560px) {
  .facts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --------------------------------------------------------- accordion ---- */
/* Native <details>. No JavaScript, no layout shift, correct screen-reader
   semantics, and each row is a full-width tap target. The name attribute makes
   it exclusive where supported, so a wall of text never loses your place. */

.accordion {
  border-top: 1px solid rgba(236, 228, 230, 0.12);
}

.accordion details {
  border-bottom: 1px solid rgba(236, 228, 230, 0.12);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 0.98rem;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.accordion summary::-webkit-details-marker {
  display: none;
}
.accordion summary:hover {
  color: #fff;
}

/* The marker is a drip: a bead on a stem that swings down when open. */
.marker {
  position: relative;
  flex: none;
  width: 12px;
  height: 16px;
}
.marker::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  background: var(--cherry);
  transition: height 0.22s ease;
}
.marker::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--cherry);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
details[open] .marker::before {
  height: 2px;
}
details[open] .marker::after {
  transform: translateY(4px) scale(1.15, 0.9);
  background: var(--gloss);
}

.answer {
  padding: 0 2px 20px;
}
.answer p {
  margin: 0;
  color: #cfc3c7;
  font-size: 0.96rem;
  line-height: 1.72;
}

/* --------------------------------------------------------- favourites ---- */

.favs,
.vitals {
  margin: 18px 0 0;
  display: grid;
  gap: 0;
}
.favs > div,
.vitals > div {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(236, 228, 230, 0.1);
}
.favs dt,
.vitals dt {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  padding-top: 3px;
}
.favs dd,
.vitals dd {
  margin: 0;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------- ask form ---- */

.ask-form {
  margin: 4px 0 0;
}

/* Same two-layer trick as the buttons. A border plus a clip-path does not work:
   the clip cuts the border away along the diagonals, so the field reads as torn
   rather than notched. The wrapper paints the rim, the textarea paints the
   fill, and the 1px between their clip paths becomes the border on every edge. */
.ask-field {
  padding: 1px;
  clip-path: var(--notch);
  background: rgba(236, 228, 230, 0.16);
  transition: background 0.16s ease;
}
.ask-field:focus-within {
  background: var(--cherry);
}

.ask-form textarea {
  display: block;
  width: 100%;
  /* 16px exactly: anything smaller triggers iOS Safari's auto-zoom, which
     strands the visitor mid-page with no obvious way back. */
  font: inherit;
  font-size: 16px;
  line-height: 1.55;
  color: var(--bone);
  background: rgba(20, 10, 14, 0.94);
  border: 0;
  clip-path: var(--notch);
  padding: 14px 16px;
  resize: none;
  overflow: hidden; /* the height is managed in script.js as you type */
  min-height: 96px;
}
.ask-form textarea::placeholder {
  color: rgba(236, 228, 230, 0.34);
}
.ask-form textarea:focus {
  outline: none;
  background: rgba(26, 2, 6, 0.96);
}

.ask-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.counter {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--silver);
  flex: none;
  min-width: 30px;
}
.counter.low {
  color: var(--gloss);
}
.ask-send {
  max-width: 190px;
  margin: 0 0 0 auto;
}
.ask-send .face {
  min-height: 52px;
  font-size: 0.85rem;
}

.ask-status {
  margin: 12px 0 0;
  font-size: 0.88rem;
  min-height: 1.2em;
  color: var(--muted);
}
.ask-status.ok {
  color: var(--gloss);
}
.ask-status.err {
  color: #ff8fa0;
}

/* The honeypot: hidden from people, irresistible to bots. Kept out of the
   accessibility tree as well as out of sight, so a screen reader never
   announces a field its user must not fill. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.answered-heading {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 34px 0 6px;
}

/* -------------------------------------------------------------- blog ---- */

.post-card {
  border-bottom: 1px solid rgba(236, 228, 230, 0.12);
}
.post-card:first-child {
  border-top: 1px solid rgba(236, 228, 230, 0.12);
}
.post-card-link {
  display: block;
  padding: 22px 2px;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.post-card h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.post-meta {
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
}
.post-excerpt {
  margin: 0 0 12px !important;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}
.post-more {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gloss);
  border-bottom: 1px solid var(--cherry);
  padding-bottom: 3px;
}
.post-card-link:hover h2 {
  color: #fff;
}

.post-header h1 {
  font-size: clamp(1.9rem, 8.5vw, 3rem);
  line-height: 1.06;
}
.post-header {
  text-align: left;
}
.post-header .post-meta {
  margin-top: 12px;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
}
.tags li {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
  border: 1px solid rgba(236, 228, 230, 0.16);
  padding: 5px 10px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.post-body .lede {
  font-size: 1.12rem;
  border-left: 2px solid var(--cherry);
  padding-left: 16px;
}

/* --------------------------------------------------------- cta + nav ---- */

.cta-card {
  margin: 40px 0 0;
  padding: 26px 22px;
  text-align: center;
  background: linear-gradient(168deg, rgba(107, 6, 23, 0.4), rgba(20, 10, 14, 0.9));
  border: 1px solid rgba(209, 15, 46, 0.35);
  clip-path: var(--notch);
}
.cta-card p {
  margin: 0 0 18px !important;
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1.35;
}

.post-nav {
  display: grid;
  gap: 10px;
  margin: 34px 0 0;
}
.post-nav a {
  display: block;
  padding: 15px 16px;
  text-decoration: none;
  color: var(--bone);
  font-size: 0.94rem;
  line-height: 1.35;
  background: rgba(20, 10, 14, 0.72);
  border: 1px solid rgba(236, 228, 230, 0.12);
  clip-path: var(--notch);
}
.post-nav a span {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: 4px;
}
.post-nav a:hover {
  border-color: rgba(209, 15, 46, 0.5);
}

.doc-footer {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad) calc(env(safe-area-inset-bottom, 0px) + 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

@media (min-width: 769px) {
  .doc-main {
    padding-bottom: 60px;
  }
  .doc-footer {
    padding-bottom: 60px;
    flex-direction: row;
    justify-content: center;
    gap: 26px;
  }
}

/* ------------------------------------------------------------- leaks ---- */
/* The answer goes first, in the largest type on the page. Someone arriving
   from a search for this has exactly one question, and making them read three
   paragraphs to reach a one-word answer is how a page like this loses to the
   scraper sites it is trying to beat. */

.verdict {
  position: relative;
  margin: 4px 0 30px;
  padding: 22px 22px 24px;
  background: linear-gradient(168deg, rgba(107, 6, 23, 0.5), rgba(20, 10, 14, 0.94));
  border: 1px solid rgba(209, 15, 46, 0.45);
  clip-path: var(--notch);
  overflow: hidden;
}
.verdict::before {
  content: '';
  position: absolute;
  inset: auto -20% -70% -20%;
  height: 90%;
  background: radial-gradient(50% 100% at 50% 100%, rgba(209, 15, 46, 0.28), transparent 70%);
  pointer-events: none;
}
.verdict > * {
  position: relative;
}
.verdict-label {
  margin: 0 0 8px !important;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gloss);
}
.verdict-answer {
  margin: 0 0 12px !important;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  line-height: 1.12;
  color: var(--bone);
}
.verdict-summary {
  margin: 0 !important;
  color: var(--bone);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* Numbered, because it is a checklist someone runs top to bottom, and the
   numbers are what make that legible at a glance. */
.checks {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.check {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 16px;
  background: rgba(20, 10, 14, 0.72);
  border: 1px solid var(--hairline);
}
.check-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gloss), var(--cherry));
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.check-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.check-body strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.25;
  color: var(--bone);
}
.check-body span {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
}