/* =====================================================================
   A Little Kind — the house style
   Quiet + tactile + zine. Warm newsprint, one heavy quirky display face
   against a reading serif, risograph inks that overprint, masking tape,
   slightly-off rotations, handwriting for asides.
   Deliberately NOT a white card grid on a grey app background.
   ===================================================================== */

/* ---------- tokens ---------- */
:root {
  --paper:      #F5EFE3;   /* the page */
  --card:       #FBF7EE;   /* a pinned note */
  --panel:      #EFE7D7;   /* rails, side columns */
  --deep:       #E7DFCE;   /* the board behind the board */
  --board:      #E3DAC7;   /* compose backdrop */
  --ink:        #1B1917;

  --ink-70: rgba(27,25,23,.70);
  --ink-60: rgba(27,25,23,.60);
  --ink-50: rgba(27,25,23,.50);
  --ink-45: rgba(27,25,23,.45);
  --ink-35: rgba(27,25,23,.35);
  --line:   rgba(27,25,23,.16);
  --line-2: rgba(27,25,23,.12);
  --line-3: rgba(27,25,23,.30);

  /* the five inks */
  --saw_it:            #4B7FA8;
  --chance_to_help:    #2F6B55;
  --free_to_good_home: #D9931B;
  --dare:              #E4607B;
  --thanks_stranger:   #6B5CA8;

  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --hand:    "Caveat", "Segoe Script", cursive;

  --grain: radial-gradient(rgba(27,25,23,.05) 1px, transparent 1px);

  /* the mark */
  --mark-ground: var(--dare);
  --mark-ink:    #1B1917;
}

/* =====================================================================
   NIGHT PRESS — the dark theme.
   Ink becomes ground. The riso pink stays the primary accent; it reads
   hotter on black than on paper, which suits a night board. Marigold
   demotes to tape, highlights and the "free" stamp; the other three
   accents lift one step to hold contrast.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #1B1917;   /* ink is now the ground */
    --card:   #23211E;
    --panel:  #141312;
    --deep:   #141312;
    --board:  #141312;
    --ink:    #F5EFE3;   /* paper is now the ink */

    --ink-70: rgba(245,239,227,.70);
    --ink-60: rgba(245,239,227,.60);
    --ink-50: rgba(245,239,227,.50);
    --ink-45: rgba(245,239,227,.45);
    --ink-35: rgba(245,239,227,.35);
    --line:   rgba(245,239,227,.16);
    --line-2: rgba(245,239,227,.12);
    --line-3: rgba(245,239,227,.30);

    /* the five inks, lifted one step */
    --saw_it:            #7FA9C9;
    --chance_to_help:    #5FA88C;
    --free_to_good_home: #F0C24B;
    --dare:              #E4607B;   /* unchanged — it is the constant */
    --thanks_stranger:   #9B8BD4;

    --grain: radial-gradient(rgba(245,239,227,.05) 1px, transparent 1px);
  }

  /* On paper the primary button is ink. On a night board ink is the
     ground, so the pink takes the job. */
  .btn { background: var(--dare); border-color: var(--dare); color: #1B1917; }
  .btn:hover { background: #ef7089; border-color: #ef7089; color: #1B1917; }
  .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-3); }
  .btn--ghost:hover { background: var(--ink); color: #1B1917; }
  .btn--act, .btn--pink { color: #1B1917; }
  .btn--act:hover, .btn--pass:hover, .btn--pass.is-on { color: #1B1917; }
  .stamp.is-on > span { color: #1B1917; }
  .nav a.is-on { background: var(--ink); color: #1B1917; }

  /* The DARE card is the inverted one. On paper it goes black; at night
     it goes to paper, so it stays the odd one out either way. */
  .note--dark { background: #F5EFE3; border-color: #F5EFE3; color: #1B1917; }
  .note--dark .note__body { color: #1B1917; }
  .note--dark .hand--amber { color: #9a6a12; }

  .tally { border-color: var(--dare); }
  .nudge { color: #1B1917; }
  .tape  { mix-blend-mode: screen; }

  /* the paper map, after dark */
  .map        { background: #201E1B; }
  .map__river { background: #2C3A40; }
  .map__road-v, .map__road-h { background: #2A2724; }
  .map__park  { background: #26302A; border-color: rgba(95,168,140,.35); }
  .pin__flag  { color: #1B1917; }

  .mark { color: var(--mark-ink); }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  background-image: var(--grain);
  background-size: 3px 3px;
  font-family: var(--serif);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
}

a { color: var(--chance_to_help); text-decoration: none; }
a:hover { color: var(--dare); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2.5px solid var(--dare); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; margin: 0; }

.eyebrow {
  font: 800 10.5px var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin: 0 0 12px;
}
.eyebrow--wide { letter-spacing: .24em; font-weight: 500; font-size: 12px; color: var(--ink-50); }

.hand {
  font: 500 19px/1.3 var(--hand);
  color: var(--chance_to_help);
  margin: 0;
}
.hand--pink   { color: var(--dare); }
.hand--purple { color: var(--thanks_stranger); }
.hand--amber  { color: var(--free_to_good_home); }
.hand--tilt   { display: inline-block; transform: rotate(-2deg); }

.meta {
  font: 600 11px var(--display);
  letter-spacing: .05em;
  color: var(--ink-45);
  margin: 0;
  text-transform: uppercase;
}

.rule-double { border-bottom: 3px double rgba(27,25,23,.25); }

/* ---------- the stamp ----------
   A rubber stamp, not a pill: square corners, heavy letterspaced display
   type, a hand-set rotation, and the kind's ink as the border colour. */
.stamp {
  font: 800 9.5px var(--display);
  letter-spacing: .08em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 5px 8px;
  border: 1.5px solid currentColor;
  background: transparent;
  text-transform: uppercase;
  transform: rotate(var(--tilt, -1deg));
  cursor: default;
}
a.stamp, button.stamp { cursor: pointer; }

.stamp--saw_it            { color: var(--saw_it); }
.stamp--chance_to_help    { color: var(--chance_to_help); }
.stamp--free_to_good_home { color: var(--free_to_good_home); }
.stamp--dare              { color: var(--dare); }
.stamp--thanks_stranger   { color: var(--thanks_stranger); }

/* inked-in = selected */
.stamp.is-on { background: currentColor; }
.stamp.is-on > span { color: var(--card); }

.stamp--lg { font-size: 10px; padding: 7px 10px; }
.stamp--xl { font-size: 10px; padding: 9px 12px; border-width: 2px; }
.stamp--locked { color: var(--ink-35); border-style: dashed; }

/* alternating tilts so a row of stamps never looks machine-set */
.stamp:nth-child(2n)   { --tilt:  1.5deg; }
.stamp:nth-child(3n)   { --tilt: -1deg; }
.stamp:nth-child(4n)   { --tilt:  2deg; }
.stamp:nth-child(5n+1) { --tilt: -1.5deg; }

/* ---------- buttons ---------- */
.btn {
  font: 800 12px var(--display);
  letter-spacing: .06em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--display);
}
.btn:hover { background: #000; color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--pink { background: var(--dare); border-color: var(--dare); color: var(--card); }
.btn--pink:hover { background: #d4506b; border-color: #d4506b; color: var(--card); }
.btn--sm { padding: 8px 13px; font-size: 11px; }

/* an "act" button carries the kind's ink */
.btn--act {
  font: 600 12px var(--display);
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 14px;
  background: var(--act-ink, var(--chance_to_help));
  border-color: var(--act-ink, var(--chance_to_help));
  color: var(--paper);
}
.btn--act:hover { filter: brightness(.92); color: var(--paper); }
.btn--quiet {
  font: 600 12px var(--display);
  letter-spacing: 0; text-transform: none;
  padding: 8px 14px;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line-3);
}
.btn--quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

/* "I PASSED IT ON" — the reward. Outline until you do it, then inked. */
.btn--pass {
  font: 800 10.5px var(--display);
  letter-spacing: .05em;
  padding: 5px 9px;
  background: transparent;
  color: var(--chance_to_help);
  border: 1.5px solid var(--chance_to_help);
}
.btn--pass:hover { background: var(--chance_to_help); color: var(--paper); }
.btn--pass.is-on { background: var(--chance_to_help); color: var(--paper); }

/* ---------- the note ---------- */
.note {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 22px 24px 16px;
  box-shadow: 0 10px 22px -16px rgba(27,25,23,.6);
  transform: rotate(var(--tilt, -.5deg));
}
.note--flat { transform: none; }
.note--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.note--dark .note__body { color: var(--paper); }
.note--sm { padding: 16px 18px 13px; }

/* organic rotations — pinned by hand, not by a grid */
.note-stack > *:nth-child(3n+1) { --tilt: -.5deg; }
.note-stack > *:nth-child(3n+2) { --tilt:  .6deg; }
.note-stack > *:nth-child(3n)   { --tilt: -1deg; }

.note__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.note__body {
  font: 400 20px/1.5 var(--serif);
  margin: 14px 0 0;
  text-wrap: pretty;
}
.note__body--sm { font-size: 18px; line-height: 1.45; }
.note__body--lg { font-size: 26px; line-height: 1.42; }

.note__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 8px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line-2);
}
.note__foot > * { margin-right: 14px; }
.note__foot > *:last-child { margin-right: 0; }
.note__acts { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }

/* masking tape across the top corner */
.tape {
  position: absolute;
  top: -12px; left: 26px;
  width: 84px; height: 24px;
  background: rgba(217,147,27,.32);
  border-left: 1px solid rgba(27,25,23,.08);
  border-right: 1px solid rgba(27,25,23,.08);
  transform: rotate(-2.5deg);
  pointer-events: none;
}
.tape--saw_it            { background: rgba(75,127,168,.28); }
.tape--chance_to_help    { background: rgba(47,107,85,.26); }
.tape--free_to_good_home { background: rgba(217,147,27,.32); }
.tape--dare              { background: rgba(228,96,123,.28); }
.tape--thanks_stranger   { background: rgba(107,92,168,.26); }

/* ---------- avatar ---------- */
.av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--av, var(--thanks_stranger));
  color: var(--paper);
  font: 800 9px var(--display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  letter-spacing: .02em;
}
.av--md { width: 30px; height: 30px; font-size: 12px; }
.av--lg { width: 82px; height: 82px; font-size: 28px; transform: rotate(-2deg); }

.byline { font: 600 12px var(--display); color: var(--ink-70); }

/* ---------- app shell ---------- */
.shell {
  display: grid;
  grid-template-columns: 212px minmax(0, 1fr) 268px;
  min-height: 100vh;
  max-width: 1360px;
  margin: 0 auto;
}
.shell--wide { grid-template-columns: 212px minmax(0, 1fr); }

.sidebar {
  border-right: 1px solid var(--line);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.wordmark {
  font: 800 15px var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
  display: inline-block;
}
.wordmark em { font-style: normal; color: var(--dare); }
.wordmark--lg { font-size: 20px; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  font: 600 13.5px var(--display);
  padding: 8px 10px;
  color: var(--ink-70);
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: rgba(27,25,23,.05); }
.nav a.is-on { background: var(--ink); color: var(--paper); }

.filters { border-top: 1px solid var(--line); padding-top: 18px; }
.filters__list { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }

.sidebar__me { margin-top: auto; display: flex; align-items: center; gap: 10px; }

.main { padding: 24px 30px 60px; border-right: 1px solid var(--line); min-width: 0; }
.rail { padding: 24px 22px 40px; background: var(--panel); }

.main__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 12px;
}
.main__head h1, .main__head h2 { font-size: 36px; line-height: 1.05; }

/* ---------- compose prompt ---------- */
.prompt {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--card);
  border: 1px dashed var(--line-3);
  padding: 13px 16px;
  margin-top: 20px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
}
.prompt:hover { border-color: var(--ink); }
.prompt__text { font: 400 16px var(--serif); color: var(--ink-50); flex: 1; }

/* ---------- the board list ---------- */
.note-stack { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.note-pair  { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ---------- rail widgets ---------- */
.tally {
  border: 1.5px solid var(--ink);
  padding: 18px 18px 16px;
  text-align: center;
  background: var(--card);
}
.tally__n {
  font: 800 46px/1 var(--display);
  letter-spacing: -.04em;
  margin: 8px 0 4px;
  color: var(--dare);
}
.tally__cap { font: 400 14px/1.4 var(--serif); margin: 0; color: var(--ink-60); }

.nudge {
  background: var(--dare);
  color: var(--ink);
  padding: 16px 16px 14px;
  transform: rotate(-1.5deg);
  display: block;
}
.nudge p { font: 400 18px/1.4 var(--serif); margin: 0; }
.nudge__go { font: 800 10.5px var(--display); letter-spacing: .06em; margin: 12px 0 0; }

.needs { display: flex; flex-direction: column; gap: 12px; }
.needs a {
  font: 400 15px/1.4 var(--serif);
  padding-left: 12px;
  border-left: 2px solid var(--chance_to_help);
  color: var(--ink);
  display: block;
}
.needs a:hover { border-left-color: var(--dare); color: var(--ink); }
.needs span { color: var(--ink-50); }

.rail__block { margin-top: 26px; border-top: 1px solid rgba(27,25,23,.18); padding-top: 16px; }

/* ---------- the ripple ---------- */
.ripple {
  margin-top: 26px;
  border: 1.5px solid rgba(27,25,23,.2);
  background: var(--panel);
  padding: 20px 22px;
}
.ripple__chain { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0; }
.ripple__link {
  font: 400 15px/1.4 var(--serif);
  background: var(--card);
  border: 1px solid rgba(27,25,23,.18);
  padding: 9px 13px;
}
.ripple__arrow { font: 800 14px var(--display); color: var(--dare); padding: 0 9px; }

/* ---------- replies ---------- */
.replies { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.reply {
  background: var(--card);
  border: 1px solid var(--line);
  padding: 16px 18px;
  margin-left: 26px;
  transform: rotate(var(--tilt, -.5deg));
}
.reply--nested { margin-left: 52px; }
.reply p { font: 400 17px/1.5 var(--serif); margin: 0; }
.reply .meta { margin-top: 11px; }
.replies > *:nth-child(2n) { --tilt: .6deg; }

/* ---------- forms ---------- */
.field { margin-top: 22px; }
.field > label { display: block; }

/* ruled paper for the note body — the lines are the input's baseline grid */
.ruled {
  border: 1px solid rgba(27,25,23,.2);
  background: repeating-linear-gradient(
    var(--card), var(--card) 30px,
    rgba(75,127,168,.16) 30px, rgba(75,127,168,.16) 31px
  );
  padding: 8px 16px 16px;
  min-height: 132px;
  width: 100%;
  font: 400 19px/31px var(--serif);
  color: var(--ink);
  resize: vertical;
  display: block;
}
.ruled:focus { outline: none; border-color: var(--ink); }

.input {
  width: 100%;
  font: 400 17px var(--serif);
  padding: 11px 14px;
  border: 1px solid var(--line-3);
  background: var(--card);
  color: var(--ink);
}
.input:focus { outline: none; border-color: var(--ink); }

.chip {
  font: 600 12px var(--display);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px dashed var(--line-3);
  padding: 8px 13px;
  color: var(--ink-60);
  background: transparent;
  cursor: pointer;
}
.chip:hover, .chip.is-on { color: var(--ink); border-color: var(--ink); border-style: solid; }
.chip-row { display: flex; gap: 9px; flex-wrap: wrap; }

.counter { font: 600 11.5px var(--display); color: var(--ink-35); }
.counter.is-over { color: var(--dare); }

/* ---------- flash ---------- */
.flash {
  border: 1.5px solid var(--ink);
  background: var(--card);
  padding: 12px 16px;
  margin: 0 0 18px;
  font: 400 16px var(--serif);
  display: flex; gap: 10px; align-items: center;
}
.flash--ok  { border-color: var(--chance_to_help); }
.flash--err { border-color: var(--dare); }

/* ---------- the paper map ---------- */
.map {
  position: relative;
  background: #E8DFC9;
  background-image:
    linear-gradient(rgba(27,25,23,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,25,23,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  overflow: hidden;
  min-height: 600px;
}
.map__river { position: absolute; left: -6%; top: 34%; width: 112%; height: 74px;
  background: #C9D8DC; transform: rotate(-7deg);
  border-top: 1px solid rgba(27,25,23,.14); border-bottom: 1px solid rgba(27,25,23,.14); }
.map__road-v { position: absolute; left: 24%; top: -10%; width: 30px; height: 130%;
  background: var(--panel); transform: rotate(9deg); }
.map__road-h { position: absolute; left: 0; top: 66%; width: 100%; height: 22px;
  background: var(--panel); transform: rotate(-3deg); }
.map__park { position: absolute; left: 58%; top: 8%; width: 150px; height: 110px;
  background: #D9E2CE; border: 1px solid rgba(47,107,85,.3); transform: rotate(4deg); }
.map__label { position: absolute; font: 500 19px var(--hand); color: var(--chance_to_help); }
.map__street { position: absolute; font: 600 11px var(--display); letter-spacing: .1em; color: var(--ink-35); }

.pin { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.pin__flag {
  font: 800 10px var(--display);
  letter-spacing: .06em;
  white-space: nowrap;
  background: var(--pin-ink, var(--chance_to_help));
  color: var(--paper);
  padding: 7px 10px;
  box-shadow: 0 5px 12px -6px rgba(27,25,23,.8);
  transform: rotate(var(--tilt, -2deg));
}
.pin--free_to_good_home .pin__flag { color: var(--ink); }
.pin__stem { width: 1.5px; height: 16px; background: var(--pin-ink, var(--chance_to_help)); }
.pin__dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--pin-ink, var(--chance_to_help)); }

.you-are-here {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: var(--thanks_stranger); border: 2.5px solid var(--paper);
  box-shadow: 0 0 0 6px rgba(107,92,168,.22);
  transform: translate(-50%, -50%);
}
.map__legend {
  position: absolute; left: 22px; bottom: 20px;
  background: var(--card); border: 1px solid rgba(27,25,23,.2);
  padding: 10px 13px;
  font: 600 11px var(--display); letter-spacing: .05em; color: var(--ink-60);
}

.near-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--kind-ink, var(--chance_to_help));
  padding: 14px 15px;
  display: block;
  color: var(--ink);
}
.near-card:hover { color: var(--ink); border-left-width: 7px; }
.near-card__kind { font: 800 9.5px var(--display); letter-spacing: .08em; margin: 0 0 7px; color: var(--kind-ink); }
.near-card p { font: 400 16px/1.45 var(--serif); margin: 0; }

/* ---------- the nameplate ----------
   A paper of record, not a logo. Set type between two rules: the phrase
   spaced as three words, with alittlekind.com only ever the address. */
.nameplate { padding: 34px 38px 22px; }

.nameplate__rule {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 6px 0;
  font: 600 10px var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-60);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-3);
}

.nameplate h1, .nameplate__word {
  font: 800 96px/.96 var(--display);           /* fallback */
  font-size: clamp(46px, 11vw, 128px);
  letter-spacing: -.05em;
  text-transform: lowercase;
  text-align: center;
  margin: 14px 0 10px;
  color: var(--ink);
}

.nameplate__kinds {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 6px 0;
  font: 600 10.5px var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-60);
  border-top: 1px solid var(--line-3);
  border-bottom: 2px solid var(--ink);
}
.nameplate__kinds i { font-style: normal; color: var(--dare); }

/* ---------- the press mark ----------
   Reads as a rubber stamp, not a garment tag. Rotates, overprints, works
   inked onto anything. Doubles as the "I passed it on" mark in-product. */
.pressmark {
  display: inline-block;
  border: 3px solid var(--dare);
  color: var(--dare);
  padding: 10px 15px 8px;
  text-align: center;
  transform: rotate(-3.5deg);
  flex: none;
}
.pressmark__top, .pressmark__foot {
  display: block;
  font: 800 7.5px var(--display);
  letter-spacing: .28em;
  margin: 0;
  white-space: nowrap;
}
.pressmark__foot { margin-top: 4px; border-top: 1.2px solid var(--dare); padding-top: 4px; }
.pressmark__word {
  display: block;
  font: 800 28px/.9 var(--display);
  letter-spacing: -.045em;
  text-transform: lowercase;
  margin: 4px 0 0;
  white-space: nowrap;
}
.pressmark--sm { padding: 7px 11px 6px; border-width: 2px; }
.pressmark--sm .pressmark__word { font-size: 18px; }
.pressmark--sm .pressmark__top, .pressmark--sm .pressmark__foot { font-size: 6px; letter-spacing: .22em; }

/* ---------- the mark (k. circle) ---------- */
.mark {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--mark-ground);
  color: var(--mark-ink);
  font: 800 24px var(--display);
  letter-spacing: -.04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mark--sm { width: 30px; height: 30px; font-size: 16px; }

/* ---------- landing ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 16px 38px;
  border-bottom: 1px solid rgba(27,25,23,.18);
}
.top__nav { display: flex; gap: 26px; align-items: center; font: 600 12.5px var(--display); }
.top__nav a { color: var(--ink-60); }
.top__nav a:hover { color: var(--ink); }

.hero { padding: 52px 38px 18px; }
.hero h1 {
  font: 800 110px/.9 var(--display);           /* fallback */
  font-size: clamp(56px, 12vw, 148px);
  letter-spacing: -.05em;
  text-transform: lowercase;
  margin: 0;
}
.hero h1 em { font-style: normal; color: var(--dare); }
.hero__sub {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 20px; gap: 40px; flex-wrap: wrap;
}
.hero__sub p { font: 400 20px/1.45 var(--serif); margin: 0; max-width: 520px; text-wrap: pretty; }

.ticker {
  overflow: hidden;
  border-bottom: 1px solid rgba(27,25,23,.18);
  background: var(--panel);
  padding: 11px 0;
}
.ticker__run {
  display: flex; gap: 34px; width: max-content;
  animation: kd-ticker 46s linear infinite;
  font: 400 14px var(--serif); color: var(--ink-70);
}
@keyframes kd-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__run { animation: none; flex-wrap: wrap; width: auto; padding: 0 38px; }
}

.split { display: grid; grid-template-columns: 1.15fr .85fr; }
.split > *:first-child { padding: 36px 38px; border-right: 1px solid var(--line-3); }
.split > *:last-child  { padding: 36px 38px; background: var(--panel); }

.split--landing { grid-template-columns: 1.05fr .95fr; border-top: 1px solid var(--line); }
.split--landing > *:first-child { padding: 30px 38px; }
.split--landing > *:last-child  { padding: 30px 38px; }

.lede {
  font: 400 21px/1.5 var(--serif);
  margin: 0;
  max-width: 520px;
  text-wrap: pretty;
  color: var(--ink);
}
.cta-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.fineprint { font: 400 14.5px/1.5 var(--serif); margin: 22px 0 0; color: var(--ink-50); }

.tally--outline {
  border: 1.5px solid var(--dare);
  background: transparent;
  margin-top: 22px;
  padding: 14px;
}
.tally--outline .tally__n { font-size: 40px; margin: 6px 0 0; }

.site-foot {
  display: flex;
  gap: 30px;
  align-items: center;
  flex-wrap: wrap;
  padding: 34px 38px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.site-foot__links { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; flex: 1; }
.site-foot__links a { font: 600 12.5px var(--display); color: var(--ink-60); }
.site-foot__links a:hover { color: var(--ink); }
.site-foot__links p { flex-basis: 100%; }

.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kinds__cell { border: 1px solid var(--line); padding: 16px 18px; background: var(--card); }
.kinds__cell p { font: 400 15px/1.5 var(--serif); margin: 12px 0 0; }

/* ---------- profile ---------- */
.passport {
  display: flex; gap: 22px; align-items: flex-start;
  border-bottom: 3px double rgba(27,25,23,.25);
  padding-bottom: 22px;
  flex-wrap: wrap;
}
.passport h1 { font-size: 38px; line-height: 1; }
.passport__stats { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.passport__stats span { font: 600 12px var(--display); color: var(--ink-60); }
.passport__stats strong { font: 800 15px var(--display); color: var(--ink); }

.thanks-note {
  background: var(--panel);
  border-left: 3px solid var(--thanks_stranger);
  padding: 14px 15px;
}
.thanks-note p { font: 400 16px/1.45 var(--serif); margin: 0; }

/* ---------- mobile bottom bar ---------- */
.tabbar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .shell { grid-template-columns: 190px minmax(0, 1fr); }
  .rail { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .main { border-right: none; }
}

@media (max-width: 820px) {
  body { font-size: 16px; padding-bottom: 78px; }

  .shell, .shell--wide { grid-template-columns: minmax(0, 1fr); }

  /* the sidebar becomes the top bar; nav moves to the bottom tabbar */
  .sidebar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 14px 20px;
    position: sticky; top: 0; z-index: 20;
    background: var(--paper);
  }
  .sidebar .nav, .sidebar .filters { display: none; }
  .sidebar__me { margin-top: 0; }

  .main { padding: 14px 20px 30px; }
  .main__head h1, .main__head h2 { font-size: 27px; }
  .note-pair { grid-template-columns: 1fr; }
  .note__body { font-size: 17px; line-height: 1.45; }
  .note__body--lg { font-size: 21px; }
  .note { padding: 16px 17px 13px; }
  .reply { margin-left: 12px; }
  .reply--nested { margin-left: 28px; }

  .split, .split--landing { grid-template-columns: 1fr; }
  .split > *:first-child { border-right: none; border-bottom: 1px solid var(--line-3); }
  .split > *, .hero, .top, .nameplate, .site-foot { padding-left: 20px; padding-right: 20px; }

  /* The nameplate's top rule is three slots wide; at phone width the
     middle one is the one worth keeping. */
  .nameplate { padding-top: 22px; }
  .nameplate__rule { font-size: 8.5px; letter-spacing: .1em; gap: 8px; justify-content: center; }
  .nameplate__rule span:first-child, .nameplate__rule span:last-child { display: none; }
  .nameplate__kinds { font-size: 8.5px; letter-spacing: .1em; gap: 8px; }
  .lede { font-size: 18px; }
  .cta-row .btn { flex: 1; justify-content: center; }
  .site-foot { gap: 20px; }
  .kinds { grid-template-columns: 1fr; }
  .hero__sub { gap: 18px; }

  .map { min-height: 380px; }
  .ripple__chain { flex-direction: column; align-items: flex-start; }
  .ripple__arrow { transform: rotate(90deg); padding: 4px 0; }

  /* the mobile bottom bar from screen 1g */
  .tabbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px 26px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--panel);
  }
  .tabbar a { font: 600 11px var(--display); color: var(--ink-50); }
  .tabbar a.is-on { color: var(--ink); }
  .tabbar__new {
    font: 800 20px var(--display);
    background: var(--dare); color: var(--paper);
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-top: -26px;
    box-shadow: 0 8px 18px -8px rgba(27,25,23,.7);
  }
  .tabbar__new:hover { color: var(--paper); }
}

@media (max-width: 420px) {
  .note { transform: none; }   /* rotations eat horizontal room on a phone */
  .reply { transform: none; }
}

@media print {
  .sidebar, .rail, .tabbar, .prompt { display: none; }
  .note { box-shadow: none; transform: none; }
}

/* ---------- the press mark inked onto a note you acted on ---------- */
.note-with-mark { position: relative; }
.note-with-mark .pressmark {
  position: absolute;
  right: 10px;
  bottom: -22px;
  background: var(--card);
  transform: rotate(-8deg);
  z-index: 2;
}
@media (max-width: 620px) {
  .note-with-mark .pressmark { position: static; display: inline-block; margin-top: 14px; }
}

/* ---------- FAQ (visible answers, mirrored by the FAQPage node) ---------- */
.faq { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq__item summary {
  font: 800 17px/1.4 var(--display);
  letter-spacing: -.01em;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: var(--dare); font-size: 20px; flex: none; }
.faq__item[open] summary::after { content: '–'; }
.faq__item p { font: 400 17px/1.55 var(--serif); margin: 0 0 16px; max-width: 60ch; }

/* =====================================================================
   MEDIA ON A NOTE
   Photos and video are ours, off our own domain, so they render inline.
   Embeds render as a facade until the reader asks — see note-media.inc.
   ===================================================================== */
.media { margin: 16px 0 0; }
.media img, .media video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  background: var(--panel);
}
.media video { max-height: 70vh; background: #1B1917; }

/* the click-to-load panel */
.facade {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  min-height: 96px;
}
.facade__go {
  flex: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid var(--dare);
  background: var(--dare);
  color: var(--card);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  padding-left: 3px;   /* optical centring of the triangle */
}
.facade__go:hover { filter: brightness(.94); }
.facade__meta { min-width: 0; }
.facade__provider {
  font: 800 10px var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: var(--ink-50);
}
.facade__note { font: 400 15px/1.4 var(--serif); margin: 0; color: var(--ink-70); }
.facade__out { font: 600 12px var(--display); display: inline-block; margin-top: 6px; }

/* once loaded, the frame replaces the facade in place */
.media__frame { position: relative; width: 100%; background: #1B1917; border: 1px solid var(--line); }
.media__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.media--youtube  .media__frame,
.media--vimeo    .media__frame { aspect-ratio: 16 / 9; }
.media--tiktok   .media__frame { aspect-ratio: 9 / 16; max-height: 80vh; }
.media--instagram .media__frame,
.media--facebook  .media__frame { aspect-ratio: 4 / 5; max-height: 80vh; }

/* compose */
.media-add { margin-top: 22px; border-top: 1px solid var(--line-2); padding-top: 16px; }
.media-add__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.media-add__or { font: 400 14px var(--serif); color: var(--ink-45); }
.media-add__note { font: 400 13.5px/1.45 var(--serif); color: var(--ink-45); margin: 10px 0 0; }
.chip--file { cursor: pointer; }

/* =====================================================================
   REACTIONS — the heart with four faces
   Tap = love. Press and hold opens the picker. Without JavaScript the
   picker is simply always visible, and every face is a real submit.
   ===================================================================== */
.reacts { position: relative; display: inline-flex; align-items: center; margin: 0; }
.reacts > * + * { margin-left: 8px; }

.reacts__main {
  font: 600 12px var(--display);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 4px 2px;
  cursor: pointer;
  color: var(--react-ink, var(--ink-45));
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* stop iOS hijacking the long press */
}
.reacts__main:hover { color: var(--dare); }
.reacts__main.is-on { color: var(--dare); }
/* A fixed box for the glyph. ♥ ✓ ☹ ☙ have wildly different advance
   widths and baselines; without this the row is ragged no matter what the
   gap is set to. */
.reacts__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  font-size: 15px;
  line-height: 1;
}
.reacts__num, .reacts__tallynum { font-variant-numeric: tabular-nums; }

.reacts__picker {
  display: flex;
  gap: 4px;
  align-items: center;
}
/* JS present: collapse the picker into a popover until asked for */
.js .reacts__picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: -6px;
  z-index: 20;
  background: var(--card);
  border: 1.5px solid var(--ink);
  box-shadow: 0 12px 26px -14px rgba(27,25,23,.7);
  padding: 6px;
  transform: rotate(-1.2deg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
}
.js .reacts.is-open .reacts__picker {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.reacts__face {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 46px;
  background: none;
  border: 1.5px solid transparent;
  padding: 5px 7px;
  cursor: pointer;
  color: var(--ink-60);
  font-size: 16px;
  line-height: 1;
}
.reacts__face:hover, .reacts__face.is-on { border-color: currentColor; }
.reacts__face .reacts__glyph { font-size: 17px; width: 1.3em; }
.reacts__word {
  font: 800 7.5px var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reacts__face--love   { color: var(--dare); }
.reacts__face--yes    { color: var(--chance_to_help); }
.reacts__face--sad    { color: var(--thanks_stranger); }
.reacts__face--prayer { color: var(--saw_it); }

/* The breakdown, set as stamp lettering rather than bare glyphs — words
   are unambiguous and, unlike the symbols, they set evenly. */
/* Margin-based spacing rather than flex `gap`: it renders identically in
   every engine, including the ones that ship flexbox without gap support,
   so the row can never collapse into LOVE1YES2SAD1. */
.reacts__tally {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.reacts__tallybit {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.reacts__tallybit + .reacts__tallybit { margin-left: 12px; }
.reacts__tallyword { margin-right: 4px; }
.reacts__tallyword {
  font: 800 8.5px var(--display);
  letter-spacing: .11em;
  text-transform: uppercase;
  opacity: .85;
}
.reacts__tallynum { font: 800 11.5px var(--display); }

@media (max-width: 620px) {
  .facade { flex-direction: column; align-items: flex-start; }
  /* keep the words in the picker — they are what makes the faces
     unambiguous — but shorten the tally */
  .reacts__tallybit + .reacts__tallybit { margin-left: 9px; }
  .reacts__tallyword { font-size: 8px; letter-spacing: .08em; }
  .note__foot > * { margin-right: 10px; }
  .js .reacts__picker { left: auto; right: -6px; }
}

/* ---------------------------------------------------------------------
   SLIDESHOW — several photos on one note.
   Scroll-snap does the work, so this is a swipeable gallery with no
   JavaScript at all. kind.js only adds arrows, the counter and keys.
   --------------------------------------------------------------------- */
.media--group { position: relative; }

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }
.slides:focus-visible { outline: 2.5px solid var(--dare); outline-offset: 2px; }

.slides__item {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
}
.slides__item img {
  width: 100%;
  height: 100%;
  max-height: 62vh;
  object-fit: contain;
  background: var(--panel);
  border: 0;
  display: block;
}

.slides__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font: 800 20px/1 var(--display);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: .9;
}
.slides__nav:hover { opacity: 1; background: var(--ink); color: var(--paper); }
.slides__nav[disabled] { opacity: .25; cursor: default; }
.slides__nav--prev { left: 10px; }
.slides__nav--next { right: 10px; }

.slides__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}
.slides__dot span {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(27,25,23,.22);
}
:root:not(.x) .slides__dot.is-on span { background: var(--dare); }
.slides__dot:hover span { background: var(--ink-45); }

.slides__count {
  font: 600 11px var(--display);
  letter-spacing: .06em;
  color: var(--ink-45);
  text-align: center;
  margin-top: 6px;
}

@media (prefers-color-scheme: dark) {
  .slides__dot span { background: rgba(245,239,227,.25); }
}
@media (prefers-reduced-motion: reduce) {
  .slides { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------
   CROSS-POST CREDIT
   Someone else made this. Their name travels with it whether or not the
   embed is ever loaded, so the attribution is not conditional on a click.
   --------------------------------------------------------------------- */
.credit {
  font: 600 11.5px var(--display);
  color: var(--ink-60);
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
}
.credit a, .credit strong { color: var(--saw_it); font-weight: 800; }
.credit a:hover { color: var(--dare); }
.credit__by, .credit__on { color: var(--ink-45); font-weight: 600; }
.credit__handle { color: var(--ink-45); }

/* facade with a cached poster frame behind it */
.facade--poster {
  background-image: linear-gradient(rgba(27,25,23,.62), rgba(27,25,23,.62)), var(--poster);
  background-size: cover;
  background-position: center;
  min-height: 190px;
  align-items: flex-end;
}
.facade--poster .facade__provider { color: rgba(245,239,227,.75); }
.facade--poster .facade__note { color: #F5EFE3; }
.facade--poster .facade__out { color: #F5EFE3; text-decoration: underline; }

/* ---------------------------------------------------------------------
   TELL THEM — the share-back panel
   --------------------------------------------------------------------- */
.tellthem {
  margin-top: 26px;
  border: 1.5px solid var(--saw_it);
  background: var(--panel);
  padding: 18px 20px;
}
.tellthem h3 {
  font: 800 15px var(--display);
  margin: 0 0 6px;
}
.tellthem p { font: 400 15px/1.5 var(--serif); margin: 0 0 12px; color: var(--ink-70); }
.tellthem__box {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap;
}
.tellthem__text {
  flex: 1; min-width: 240px;
  font: 400 15px/1.4 var(--serif);
  padding: 11px 13px;
  border: 1px solid var(--line-3);
  background: var(--card);
  color: var(--ink);
  resize: vertical;
  min-height: 62px;
}
.tellthem__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.tellthem__note { font: 400 13.5px/1.45 var(--serif); color: var(--ink-45); margin: 12px 0 0; }
.tellthem__link {
  font: 600 12.5px var(--display);
  background: var(--card);
  border: 1px dashed var(--line-3);
  padding: 8px 12px;
  display: inline-block;
  margin-top: 10px;
  word-break: break-all;
}

/* ---------- connections ---------- */
.conns { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.conn {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 18px 20px;
}
.conn--soon { background: transparent; border-style: dashed; }
.conn__head { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.conn__head h2 { font-size: 20px; }
.conn__why { font: 400 15.5px/1.5 var(--serif); margin: 10px 0 12px; color: var(--ink-70); max-width: 60ch; }
.conn__note { font: 400 13.5px/1.45 var(--serif); color: var(--ink-45); margin: 10px 0 0; max-width: 60ch; }
.tellthem__auto { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.field__help { font: 400 13.5px/1.45 var(--serif); color: var(--ink-45); margin: 7px 0 0; }
.field__help strong { color: var(--ink-70); }

/* ---------- the "is that meant to be public?" gate ---------- */
.pii {
  border: 1.5px solid var(--free_to_good_home);
  background: var(--panel);
  padding: 16px 18px;
  margin-top: 16px;
}
.pii__head { font: 800 15px/1.35 var(--display); margin: 0 0 6px; }
.pii__body { font: 400 15px/1.5 var(--serif); margin: 0 0 10px; color: var(--ink-70); }
.pii__list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pii__list li { display: flex; align-items: baseline; flex-wrap: wrap; }
.pii__was { font: 400 15px var(--serif); text-decoration: line-through; color: var(--ink-45); margin-right: 8px; }
.pii__arrow { color: var(--free_to_good_home); font: 800 13px var(--display); margin-right: 8px; }
.pii__now { font: 400 15px var(--serif); color: var(--ink); }
.pii__choices { display: flex; flex-wrap: wrap; }
.pii__choices > * { margin-right: 10px; }
.pii__note { font: 400 13.5px var(--serif); color: var(--ink-45); margin: 10px 0 0; }

/* ---------- new-member caution ---------- */
.caution {
  display: flex;
  align-items: flex-start;
  border: 1.5px dashed var(--free_to_good_home);
  background: transparent;
  padding: 11px 13px;
  margin-top: 14px;
}
.caution__mark {
  font: 800 13px var(--display);
  color: var(--free_to_good_home);
  margin-right: 10px;
  flex: none;
  line-height: 1.35;
}
.caution p { font: 400 14px/1.45 var(--serif); margin: 0; color: var(--ink-70); }
.caution a { font-weight: 600; }

/* ---------- long-form prose (terms, guidance) ---------- */
.prose { max-width: 660px; margin: 0 auto; padding: 44px 20px 70px; }
.prose h1 { font-size: clamp(38px, 8vw, 62px); line-height: .95; margin: 10px 0 0; text-transform: lowercase; }
.prose h2 {
  font-size: 21px;
  margin: 38px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 20px;
}
.prose p  { font: 400 17px/1.6 var(--serif); margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 20px; }
.prose li { font: 400 17px/1.6 var(--serif); margin-bottom: 7px; }
.prose__lede { font-size: 20px !important; line-height: 1.5 !important; margin-top: 20px !important; }
.prose__aside {
  font-size: 15px !important;
  color: var(--ink-60);
  border-left: 3px solid var(--free_to_good_home);
  padding-left: 13px;
}
.prose__meta { font: 600 12px/1.6 var(--display) !important; color: var(--ink-45); margin-top: 34px !important; }

/* ---------- curated: "people who do good" ---------- */
.curated { margin-top: 14px; border-left: 3px solid var(--thanks_stranger); padding-left: 13px; }
.curated__mark { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.curated__mark > * { margin-right: 10px; }
.curated__by { font: 600 11.5px var(--display); color: var(--ink-50); }
.curated__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.curated__links li { margin-bottom: 6px; font: 400 15px/1.4 var(--serif); }
.curated__links a { font-weight: 600; }
.curated__kind, .curated__seen {
  font: 600 10.5px var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-left: 6px;
}
.curated__warn {
  font: 400 13.5px/1.5 var(--serif);
  color: var(--ink-60);
  border: 1px dashed var(--line-3);
  padding: 9px 11px;
  margin: 10px 0 0;
}