/* The correspondence that was owed — a mailbox built out of the forms the
   Conventions annex: ruled boxes, monospaced field labels, a cancellation
   stamp. Mobile first; the rail is a drawer until there is room for it. */

:root {
  /* Reconciled with styles.css: the walk and the mailbox are one property and
     were drifting on five values. Cream is the treaty document, UN blue is the
     institution that issued it, blood is what happened. */
  --ink: #15171B;
  --ink-2: #5B6069;
  --ink-3: #737B8B;
  --blue: #1B5FAA;
  --blue-dark: #12457D;
  --blue-pale: #EAF1F9;
  --red: #8E1116;            /* the walk's --blood; one accent, one meaning */
  --red-pale: #F6ECEB;
  --paper: #FBF8F0;          /* the walk's --panel */
  --manila: #F5F1E6;         /* the walk's --bg */
  --manila-2: #EFEADB;       /* the walk's --panel2 */
  --rule: #D9D2C0;           /* the walk's --line */
  --rule-2: #C3BBA9;

  /* Stationery has square corners. The only round things on this page are the
     two icon buttons, which are chrome rather than document. */
  --r: 0;
  --r-round: 50%;

  /* 4px base. Every padding and gap below is one of these. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--manila);
  color: var(--ink);
  font: 400 16px/1.55 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; line-height: 1.15; }
p { margin: 0 0 .85em; }
a { color: var(--blue); }

/* An editorial instrument underlines its inline links and leaves its structure
   alone: pills, tiles, rail items and buttons are navigation, not prose. */
.zero-body a, .cmp-body a, .cmp-fine a, .foot a, .rail-foot a, .src-title a,
.cp-nav a:hover, .listend a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

svg.ico, .searchicon {
  width: 20px; height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--blue); padding: 10px 14px; font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

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

.chrome {
  position: sticky; top: 0; z-index: 40;
  background: var(--blue);
  color: #fff;
  border-bottom: 1px solid var(--blue-dark);
}

.chrome-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  min-width: 0;
}

.icon-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 0; border-radius: var(--r);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 600 17px/1 Inter, sans-serif;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(255, 255, 255, .22); }

.burger, .burger::before, .burger::after {
  display: block; width: 17px; height: 2px; background: #fff; border-radius: var(--r);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; }
.burger::after  { top: 5px; }

.brand {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; flex: 1 1 auto;
  color: #fff; text-decoration: none;
}
.brand-mark {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: #fff; color: var(--blue);
  border-radius: var(--r);
  font: 400 19px/1 "Archivo Black", Georgia, serif;
}
.brand-text { min-width: 0; display: block; }
.brand-text b {
  display: block;
  font: 400 13.5px/1.15 "Archivo Black", Georgia, serif;
  letter-spacing: .01em;
}
.brand-text i {
  display: block;
  font: 400 10.5px/1.3 "IBM Plex Mono", ui-monospace, monospace;
  font-style: normal;
  color: rgba(255, 255, 255, .78);
}
/* The masthead is the mailbox's name; ellipsing it into "The correspondenc…"
   is worse than one extra line. The second line goes on wider screens only. */
@media (max-width: 560px) {
  .brand-text i { display: none; }
  .to-walk { padding: 8px 9px; font-size: 10.5px; }
}

.to-walk {
  flex: none;
  color: #fff; text-decoration: none;
  font: 600 12px/1 "IBM Plex Mono", monospace;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: var(--r);
  white-space: nowrap;
}
.to-walk:hover { background: rgba(255, 255, 255, .15); }

.player { padding-top: 0; padding-bottom: 9px; gap: 8px; flex-wrap: wrap; }

.control {
  border: 1px solid rgba(255, 255, 255, .5);
  background: transparent; color: #fff;
  border-radius: var(--r);
  padding: 7px 13px;
  font: 600 11.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .07em; text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.control:hover { background: rgba(255, 255, 255, .16); }
.control.now {
  border-color: transparent;
  color: rgba(255, 255, 255, .85);
  cursor: default;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}

.chapter-menu { display: none; padding: 0 12px 10px; }
.chapter-menu.open { display: block; }
.chapter-menu button {
  display: block; width: 100%; text-align: left;
  background: rgba(255, 255, 255, .1);
  border: 0; border-radius: var(--r);
  color: #fff;
  margin-bottom: 5px;
  padding: 10px 12px;
  font: 500 13px/1.3 Inter, sans-serif;
  cursor: pointer;
}
.chapter-menu button b {
  font: 600 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .7);
  display: block; margin-bottom: 3px;
}
.chapter-menu button.current { background: #fff; color: var(--blue); }
.chapter-menu button.current b { color: var(--blue-dark); }

.progress { height: 3px; background: rgba(255, 255, 255, .22); }
.progress > i { display: block; height: 100%; width: 0; background: #fff; }

/* ---------------- client shell ---------------- */

.client { display: block; min-width: 0; }

.rail-scrim {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(16, 18, 22, .5);
}

.rail {
  position: fixed; z-index: 46;
  top: 0; bottom: 0; left: 0;
  width: min(84vw, 320px);
  background: var(--paper);
  border-right: 1px solid var(--rule);
  transform: translateX(-102%);
  transition: transform .22s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}
.rail.open { transform: none; }

.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--rule);
}
.rail-title {
  font: 400 13px/1 "Archivo Black", Georgia, serif;
  letter-spacing: .04em; text-transform: uppercase;
}
.rail-close { background: var(--manila-2); color: var(--ink); font-size: 22px; }

.rail-list { list-style: none; margin: 0; padding: 8px; }
.rail-list li + li.rail-gap { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }

.rail-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-width: 0;
  background: transparent; border: 0;
  border-radius: var(--r);
  padding: 10px 11px;
  text-align: left;
  color: var(--ink);
  font: 500 14px/1.25 Inter, sans-serif;
  cursor: pointer;
}
.rail-item:hover { background: var(--manila); }
.rail-item.active { background: var(--blue-pale); color: var(--blue-dark); font-weight: 700; }
.rail-item .label { flex: 1 1 auto; min-width: 0; }
.rail-item .n {
  flex: none;
  font: 600 11.5px/1 "IBM Plex Mono", monospace;
  color: var(--ink-3);
}
.rail-item.active .n { color: var(--blue-dark); }

.rail-foot {
  padding: 4px 16px 0;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-3);
}
.rail-foot a { font-weight: 600; }

/* ---------------- list pane ---------------- */

.main { min-width: 0; }

.pane { min-width: 0; }

.zero {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 22px 16px 20px;
}
.zero-kicker {
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.zero-num {
  font: 400 clamp(56px, 22vw, 96px)/.85 "Archivo Black", Georgia, serif;
  color: var(--red);
  margin: 0 0 2px;
  letter-spacing: -.02em;
}
.zero-lead {
  font: 400 clamp(20px, 5.6vw, 27px)/1.2 "Archivo Black", Georgia, serif;
  margin: 0 0 12px;
  letter-spacing: -.015em;
}
.zero-body { max-width: 62ch; margin-bottom: 10px; }
.zero-meta {
  max-width: 62ch;
  font: 400 12.5px/1.5 "IBM Plex Mono", monospace;
  color: var(--ink-3);
  margin: 0;
}

.listbar {
  padding: 16px 16px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--manila);
  min-width: 0;
}
.listbar-title {
  font: 400 19px/1.15 "Archivo Black", Georgia, serif;
  margin-bottom: 4px;
  letter-spacing: -.015em;
}
.listbar-blurb {
  color: var(--ink-2);
  font-size: 13.5px;
  max-width: 58ch;
  margin-bottom: 11px;
}

.searchwrap {
  position: relative;
  display: flex; align-items: center;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 0 10px 0 12px;
}
.searchwrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-pale); }
.searchicon { color: var(--ink-3); }
.searchwrap input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent;
  padding: 11px 8px;
  font: 400 16px/1 Inter, sans-serif;   /* 16px floor: less and iOS zooms on focus */
  color: var(--ink);
}
.searchwrap input:focus { outline: none; }
.searchwrap input::-webkit-search-cancel-button { display: none; }
.clear {
  flex: none;
  border: 0; background: var(--manila-2); color: var(--ink-2);
  width: 24px; height: 24px; border-radius: 50%;
  font: 600 15px/1 Inter, sans-serif; cursor: pointer;
}

.listbar-count {
  margin: 10px 0 0;
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

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

.msg {
  display: block; width: 100%;
  min-width: 0;
  text-align: left;
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 13px 16px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: relative;
}
.msg:hover { background: #fff; }
.msg.active { background: var(--blue-pale); }
.msg::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--red);
}
.msg.tone-norecord::before { background: var(--rule-2); }
.msg.tone-delivered::before { background: #2f7d54; }

.msg-top {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
  margin-bottom: 3px;
}
.msg-party {
  flex: 1 1 auto; min-width: 0;
  font: 600 13px/1.3 Inter, sans-serif;
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-cite {
  flex: none;
  font: 600 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.msg-subject {
  font: 700 15.5px/1.3 Inter, sans-serif;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.msg-snippet {
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 7px;
}
.msg-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }

.tag {
  font: 600 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 5px 8px;
  border-radius: var(--r);
  white-space: nowrap;
}
.tag-status { background: var(--red-pale); color: var(--red); border: 1px solid #e3c9c8; }
.tone-norecord .tag-status { background: var(--manila-2); color: var(--ink-2); border-color: var(--rule-2); }
.tone-delivered .tag-status { background: #e8f3ec; color: #2f7d54; border-color: #bcd9c7; }
.tag-folder { background: var(--manila-2); color: var(--ink-2); }
.tag-src { background: transparent; color: var(--ink-3); border: 1px solid var(--rule-2); }

.listend {
  padding: 18px 16px 30px;
  margin: 0;
  font: 400 13px/1.55 "IBM Plex Mono", monospace;
  color: var(--ink-3);
  background: var(--manila);
}

.empty {
  padding: 34px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}

/* Below the two-pane breakpoint the message replaces the list rather than
   stacking under it: tapping row 30 of a folder and landing above 29 other
   rows reads as a page that ignored the tap. */
@media (max-width: 1239px) {
  body.reading .pane-list { display: none; }
}

/* ---------------- reading pane ---------------- */

.read-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--manila);
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.read-bar .icon-btn { background: var(--manila-2); color: var(--ink); }
.read-bar .icon-btn:hover { background: var(--rule); }
#copyLink { width: auto; padding: 0 12px; font: 600 11px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.read-crumb {
  flex: 1 1 auto; min-width: 0;
  font: 600 11px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.read-body { padding: 0 0 40px; min-width: 0; }
.read-body:focus { outline: none; }

/* The message itself, as a form on card stock. */
.form {
  position: relative;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 22px 16px 24px;
  overflow: hidden;
}

.stamp {
  position: absolute;
  top: 14px; right: -4px;
  transform: rotate(-7deg);
  border: 2px solid var(--red);
  color: var(--red);
  padding: 5px 10px 4px;
  font: 700 11px/1.1 "IBM Plex Mono", monospace;
  letter-spacing: .12em; text-transform: uppercase;
  text-align: center;
  opacity: .82;
  box-shadow: inset 0 0 0 1px var(--red);
  pointer-events: none;
  max-width: 44%;
}
.stamp span { display: block; font-size: 8.5px; letter-spacing: .1em; opacity: .85; margin-top: 2px; }
.tone-norecord .stamp { border-color: var(--ink-3); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--ink-3); }

.form-eyebrow {
  font: 600 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  max-width: 52%;
}
.form-subject {
  font: 400 clamp(23px, 6.4vw, 31px)/1.14 "Archivo Black", Georgia, serif;
  margin: 0 0 16px;
  max-width: 20ch;
  overflow-wrap: anywhere;
  letter-spacing: -.015em;
}

.fields { margin: 0 0 4px; border-top: 1px solid var(--rule-2); }
.field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.field dt {
  font: 600 10px/1.4 "IBM Plex Mono", monospace;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.field dd { margin: 0; min-width: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }

.block { padding: 20px 16px 22px; border-bottom: 1px solid var(--rule); background: var(--manila); }
.block-head {
  font: 400 15px/1.2 "Archivo Black", Georgia, serif;
  margin-bottom: 4px;
  letter-spacing: -.015em;
}
.block-sub {
  font: 400 12px/1.5 "IBM Plex Mono", monospace;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.treaty {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-left: 4px solid var(--blue);
  border-radius: var(--r);
  padding: 15px 15px 8px;
  font-size: 15.5px;
  line-height: 1.6;
  min-width: 0;
  overflow-wrap: anywhere;
}
.treaty p:last-child { margin-bottom: .85em; }

.cites { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-width: 0; }
.cite {
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 8px 13px;
  font: 600 11.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .04em;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.cite:hover { border-color: var(--blue); background: var(--blue-pale); }

.record { background: var(--paper); }
.record .actor {
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.record p.body { font-size: 15.5px; line-height: 1.6; max-width: 64ch; }

.srclist { list-style: none; margin: 0; padding: 0; }
.srclist li {
  border-top: 1px solid var(--rule);
  padding: 13px 0 12px;
  min-width: 0;
}
.src-role {
  font: 600 9.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.src-title {
  font: 700 15px/1.35 Inter, sans-serif;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}
.src-org {
  font: 400 12px/1.4 "IBM Plex Mono", monospace;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.src-sum { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 64ch; }

.nextprev {
  display: flex; gap: 10px; padding: 18px 16px 0; min-width: 0;
}
.nextprev button {
  flex: 1 1 0; min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 12px 13px;
  text-align: left;
  cursor: pointer;
  font: inherit; color: inherit;
}
.nextprev button:hover { border-color: var(--blue); }
.nextprev button[disabled] { opacity: .4; cursor: default; }
.nextprev b {
  display: block;
  font: 600 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.nextprev span {
  display: block;
  font: 600 13.5px/1.3 Inter, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- foot ---------------- */

.foot {
  background: var(--blue);
  color: rgba(255, 255, 255, .88);
  padding: 26px 16px 34px;
  font-size: 14px;
}
.foot-lead {
  font: 400 17px/1.25 "Archivo Black", Georgia, serif;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: -.015em;
}
.foot a { color: #fff; }
.foot-src {
  margin: 14px 0 0;
  font: 400 11.5px/1.55 "IBM Plex Mono", monospace;
  color: rgba(255, 255, 255, .68);
  max-width: 70ch;
}

/* ---------------- wider ---------------- */

@media (min-width: 700px) {
  .chrome-row, .listbar, .zero, .form, .block, .listend, .foot, .read-bar { padding-left: 24px; padding-right: 24px; }
  .field { grid-template-columns: 138px minmax(0, 1fr); gap: 14px; align-items: baseline; }
  .stamp { top: 20px; right: 18px; padding: 7px 14px 6px; font-size: 13px; }
  .form-eyebrow, .form-subject { max-width: 66%; }
}

@media (min-width: 960px) {
  .client {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    align-items: start;
  }
  .rail {
    position: sticky;
    top: 121px;
    height: calc(100vh - 121px);
    transform: none;
    width: auto;
    border-right: 1px solid var(--rule);
  }
  .rail-head, .rail-scrim, #railToggle { display: none; }
  .rail-list { padding-top: 14px; }
  .main { min-width: 0; }
}

@media (min-width: 1240px) {
  .main {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    align-items: start;
  }
  .pane-list {
    position: sticky; top: 121px;
    height: calc(100vh - 121px);
    overflow-y: auto;
    border-right: 1px solid var(--rule);
  }
  .pane-read[hidden] { display: block; }
  .pane-read .back { display: none; }
  .read-empty {
    padding: 60px 24px;
    color: var(--ink-3);
    font: 400 15px/1.6 "IBM Plex Mono", monospace;
    max-width: 46ch;
  }
  /* The zero card has done its work once a message is open. */
  .reading .zero { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rail { transition: none; }
}

/* ---------------- circulate ---------------- */

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 16px 6px;
  min-width: 0;
}

.tile-pick {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 10px 12px;
  text-align: left;
  font: inherit; color: inherit;
  cursor: pointer;
}
.tile-pick:hover { border-color: var(--blue); background: #fff; }
.tile-pick img {
  flex: none;
  width: 62px; height: 62px;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  object-fit: cover;
  background: var(--manila);
}
.tile-pick .tl-t {
  flex: 1 1 auto; min-width: 0;
  font: 600 14px/1.35 Inter, sans-serif;
  overflow-wrap: anywhere;
}
.tile-pick .tl-go {
  flex: none;
  font: 600 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 7px 10px;
}

/* The sheet. NOTE: no `position` here — a modal <dialog> is placed by the UA in
   the top layer, and overriding it drops the sheet into normal flow, below the
   fold, behind its own backdrop, while still reporting open === true. */
.sh-dialog {
  width: min(92vw, 470px);
  max-height: 88vh;
  overflow-y: auto;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 18px 16px 20px;
  background: var(--paper);
  color: var(--ink);
}
.sh-dialog::backdrop { background: rgba(16, 18, 22, .62); }

.sh-close {
  all: unset;                 /* FIRST: written later it resets the position below */
  position: absolute;
  top: 10px; right: 12px;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--manila-2);
  color: var(--ink);
  font: 600 19px/1 Inter, sans-serif;
  cursor: pointer;
}
.sh-close:hover { background: var(--rule); }

/* The card is the preview, not the payload: at full width a 1:1 tile pushed
   the post text and both post buttons off the bottom of the sheet. */
.sh-img {
  display: block;
  width: 100%;
  max-height: 34vh;
  height: auto;
  object-fit: contain;
  object-position: top;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  margin-bottom: 14px;
  background: var(--manila);
}
.sh-kicker {
  font: 600 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 7px;
}
.sh-post { font-size: 15px; line-height: 1.5; margin-bottom: 14px; }

.sh-acts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sh-btn {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  padding: 11px 13px;
  text-align: center;
  text-decoration: none;
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .07em;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sh-btn:hover { border-color: var(--blue); color: var(--blue); }
.sh-primary {
  flex-basis: calc(50% - 4px);
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.sh-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }

.sh-fine {
  margin: 14px 0 0;
  font: 400 11.5px/1.5 "IBM Plex Mono", monospace;
  color: var(--ink-3);
}

/* ---------------- a card's own page ---------------- */

.cp { padding: 0 0 36px; min-width: 0; }
.cp-kicker {
  font: 600 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 20px 16px 0;
  margin-bottom: 8px;
}
.cp-title {
  font: 400 clamp(25px, 7vw, 38px)/1.12 "Archivo Black", Georgia, serif;
  padding: 0 16px;
  margin-bottom: 16px;
  letter-spacing: -.015em;
}
.cp-card {
  display: block;
  width: calc(100% - 32px);
  height: auto;
  margin: 0 16px 20px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
}
.cp-nav { padding: 20px 16px 0; }
.cp-nav ul { list-style: none; margin: 10px 0 0; padding: 0; }
.cp-nav li { border-top: 1px solid var(--rule); }
.cp-nav a {
  display: block;
  padding: var(--s3) 0;
  font: 600 14px/1.35 Inter, sans-serif;
  text-decoration: none;
}

@media (min-width: 700px) {
  .tiles { grid-template-columns: 1fr 1fr; padding-left: 24px; padding-right: 24px; }
  .cp-kicker, .cp-title, .cp-nav { padding-left: 24px; padding-right: 24px; }
  .cp-card { width: min(560px, calc(100% - 48px)); margin-left: 24px; margin-right: 24px; }
}

@media (min-width: 1240px) {
  .pane-share { grid-column: 1 / -1; }
  body.sharing .pane-read { display: none; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------- the one you can still send ---------------- */

.compose {
  background: var(--blue-pale);
  border-bottom: 1px solid var(--rule);
  border-top: 3px solid var(--blue);
  padding: 22px 16px 20px;
  min-width: 0;
}
.cmp-kicker {
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 8px;
}
.cmp-head {
  font: 400 clamp(20px, 5.4vw, 27px)/1.18 "Archivo Black", Georgia, serif;
  margin-bottom: 10px;
  max-width: 24ch;
  letter-spacing: -.015em;
}
.cmp-body { max-width: 62ch; margin-bottom: 16px; }

.cmp-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
  margin-bottom: 12px;
  min-width: 0;
}
.cmp-form input {
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 13px 14px;
  font: 400 16px/1.2 Inter, sans-serif;   /* 16px: anything less zooms iOS on focus */
  color: var(--ink);
}
.cmp-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27, 95, 170, .18);
}
#postal { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; }

.cmp-go {
  border: 0;
  border-radius: var(--r);
  background: var(--blue);
  color: #fff;
  padding: 14px 18px;
  font: 600 12px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.cmp-go:hover { background: var(--blue-dark); }
.cmp-go[disabled] { opacity: .6; cursor: default; }

.cmp-error {
  margin: 0 0 12px;
  padding: 11px 13px;
  background: var(--red-pale);
  border: 1px solid #e3c9c8;
  border-radius: var(--r);
  color: var(--red);
  font-size: 14px;
}

.reps { display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 0; }
.reps:not(:empty) { margin-bottom: 16px; }
.reps-head {
  grid-column: 1 / -1;
  margin: 0;
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

.rep {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 14px;
  min-width: 0;
}
.rep-tier {
  font: 600 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 6px;
}
.rep-name { font: 700 17px/1.25 Inter, sans-serif; margin-bottom: 3px; overflow-wrap: anywhere; }
.rep-meta {
  font: 400 12px/1.45 "IBM Plex Mono", monospace;
  color: var(--ink-3);
  margin-bottom: 11px;
  overflow-wrap: anywhere;
}
.rep-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; }
.rep-go {
  display: inline-block;
  border: 0;
  border-radius: var(--r);
  background: var(--ink);
  color: #fff;
  padding: 11px 15px;
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.rep-go:hover { background: var(--blue); }
.rep-ghost { background: var(--manila-2); color: var(--ink); }
.rep-ghost:hover { background: var(--rule); color: var(--ink); }
.rep-link {
  font: 400 12px/1.3 "IBM Plex Mono", monospace;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.cmp-letter {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 0 14px;
  margin-bottom: 14px;
  min-width: 0;
}
.cmp-letter > summary {
  padding: 13px 0;
  font: 600 13px/1.3 Inter, sans-serif;
  color: var(--blue-dark);
  cursor: pointer;
  list-style: none;
}
.cmp-letter > summary::-webkit-details-marker { display: none; }
.cmp-letter > summary::before { content: "▸ "; }
.cmp-letter[open] > summary::before { content: "▾ "; }
.cmp-text {
  margin: 0 0 12px;
  padding: 14px;
  background: var(--manila);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
  font: 400 13.5px/1.6 "IBM Plex Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;   /* a <pre> is the one element that will blow the column out */
}
.cmp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.cmp-acts .cite { border: 1px solid var(--rule-2); background: var(--paper); cursor: pointer; }
.cmp-srchead {
  margin: 14px 0 0;
  font: 600 10.5px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.cmp-letter .srclist { margin-bottom: 8px; }

.cmp-fine {
  margin: 0;
  max-width: 64ch;
  font: 400 12px/1.55 "IBM Plex Mono", monospace;
  color: var(--ink-2);
}

@media (min-width: 700px) {
  .compose { padding-left: 24px; padding-right: 24px; }
  .cmp-form { grid-template-columns: minmax(0, 1fr) minmax(0, 190px) auto; align-items: center; }
  .reps { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1240px) {
  .reading .compose { display: none; }
  .reps { grid-template-columns: 1fr; }
}

/* Ten crawlable links to the card pages. Small, because they are here so a
   search engine and a keyboard can reach pages the share sheet only reaches
   with JavaScript — not because the footer needed a menu. */
.foot-cards { margin-top: var(--s4); }
.foot-cards p {
  margin-bottom: var(--s2);
  font: 400 11.5px/1.5 "IBM Plex Mono", monospace;
  color: rgba(255, 255, 255, .68);
}
.foot-cards ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3);
  min-width: 0;
}
.foot-cards a {
  font: 400 12px/1.5 "IBM Plex Mono", monospace;
  color: rgba(255, 255, 255, .9);
  text-decoration: underline;
  text-underline-offset: 2px;
}