/* Bloom: the reading site and the author's dashboard.
   Same parchment and pigments as the flower lab. Typefaces come from the
   blog's chosen pairing as --serif and --sans (see server/lib/type.ts). */

:root {
  --paper: #f1e7cf;
  --paper-deep: #e8dabb;
  --ink: #2b211a;
  --ink-soft: #6b5a48;
  --ink-faint: #9a876d;
  --rule: #cdb994;
  --vermilion: #a8371f;
  --lapis: #2f4f86;
  --verdigris: #3f7a6a;
  --ochre: #b58a35;
  --card: rgba(255, 250, 238, 0.5);
  --field: rgba(255, 252, 244, 0.7);
  --shadow: rgba(80, 55, 25, 0.12);
  --glow: rgba(255, 248, 228, 0.4);
  --measure: 34rem;
  --margin: 13rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Night reading: the pigments keep their color on a dim vellum. */
    --paper: #26211b;
    --paper-deep: #1f1b16;
    --ink: #ece0c6;
    --ink-soft: #b9a98b;
    --ink-faint: #8a7b64;
    --rule: #4f4334;
    --vermilion: #e07a5f;
    --lapis: #8fa9db;
    --verdigris: #7fb8a5;
    --ochre: #d6ac5c;
    --card: rgba(239, 228, 203, 0.06);
    --field: rgba(239, 228, 203, 0.08);
    --shadow: rgba(0, 0, 0, 0.35);
    --glow: rgba(239, 228, 203, 0.035);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #26211b;
  --paper-deep: #1f1b16;
  --ink: #ece0c6;
  --ink-soft: #b9a98b;
  --ink-faint: #8a7b64;
  --rule: #4f4334;
  --vermilion: #e07a5f;
  --lapis: #8fa9db;
  --verdigris: #7fb8a5;
  --ochre: #d6ac5c;
  --card: rgba(239, 228, 203, 0.06);
  --field: rgba(239, 228, 203, 0.08);
  --shadow: rgba(0, 0, 0, 0.35);
  --glow: rgba(239, 228, 203, 0.035);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 0%, var(--glow), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .33  0 0 0 0 .18  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

body > main {
  flex: 1;
  padding: 0 16px;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--vermilion) 55%, transparent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--vermilion);
}

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

/* ── Site frame ─────────────────────────────────────────── */

.site-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 16px;
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
  font-family: var(--sans);
  font-size: 0.9rem;
}
.site-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.index .site-title {
  visibility: hidden;
}
.site-nav {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
}
.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
}
.site-nav a:hover {
  color: var(--vermilion);
}
.site-nav form {
  margin: 0;
}

button.link {
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
button.link:hover {
  color: var(--vermilion);
}

.site-foot {
  text-align: center;
  padding: 3rem 16px 2.5rem;
  color: var(--rule);
}
.fleuron {
  font-size: 1.4rem;
}

/* ── Index ──────────────────────────────────────────────── */

.index-main {
  max-width: var(--measure);
  margin: 0 auto;
}
.masthead {
  text-align: center;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}
.masthead h1 {
  font-weight: 400;
  font-size: clamp(2.6rem, 2rem + 4vw, 4.2rem);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}
.tagline {
  margin: 0.6rem 0 0;
  font-style: italic;
  color: var(--ink-soft);
}
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-list li + li {
  margin-top: 2.25rem;
}
.post-list a {
  display: block;
  text-decoration: none;
}
.post-list h2 {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.2;
  margin: 0;
}
.post-list a:hover h2 {
  color: var(--vermilion);
}
.post-list time {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.post-list p {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
}
.empty {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
}

/* ── Post ───────────────────────────────────────────────── */

/* The text column sits slightly left of center on wide screens, leaving a
   right margin for marginalia (annotation flowers, Step 3). */
.post-article {
  max-width: calc(var(--measure) + var(--margin) + 3rem);
  margin: 0 auto;
  padding-right: calc(var(--margin) + 3rem);
}
@media (max-width: 64rem) {
  .post-article {
    max-width: var(--measure);
    padding-right: 0;
  }
}

.post-head {
  margin: 2rem 0 2.25rem;
}
.post-head h1 {
  font-weight: 500;
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.post-head time {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.prose {
  hyphens: auto;
  hanging-punctuation: first;
  text-wrap: pretty;
}
.prose > * {
  margin: 0 0 1.1em;
}
.prose h2,
.prose h3 {
  font-weight: 600;
  line-height: 1.25;
  margin: 2em 0 0.6em;
  text-wrap: balance;
}
.prose h2 {
  font-size: 1.3em;
}
.prose h3 {
  font-size: 1.1em;
  font-style: italic;
  font-weight: 500;
}
.prose h4,
.prose h5,
.prose h6 {
  font-size: 1em;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  margin: 1.8em 0 0.4em;
}

/* An illuminated initial, in vermilion, as a rubricator would have painted it. */
.post-body > p:first-child::first-letter,
.post-body > .margin-col:first-child + p::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 0.08em 0.08em 0 0;
  margin-right: 0.04em;
  color: var(--vermilion);
  font-weight: 500;
}

.prose blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 1.2em;
  border-left: 2px solid var(--ochre);
  font-style: italic;
  hyphens: manual;
  color: var(--ink-soft);
}
.prose blockquote > :last-child {
  margin-bottom: 0;
}
.prose ul,
.prose ol {
  padding-left: 1.4em;
}
.prose li + li {
  margin-top: 0.3em;
}
.prose li::marker {
  color: var(--vermilion);
}
.prose hr {
  border: 0;
  margin: 1.6em 0;
  line-height: 1;
  text-align: center;
  color: var(--rule);
}
.prose hr::after {
  content: "❦";
  font-size: 1.2em;
}
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.6em auto;
}
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.82em;
  background: var(--card);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
.prose pre {
  overflow-x: auto;
  background: var(--card);
  padding: 1em 1.2em;
  border-radius: 4px;
  line-height: 1.45;
}
.prose pre code {
  background: none;
  padding: 0;
}
.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9em;
}
.prose th,
.prose td {
  border-bottom: 1px solid var(--rule);
  padding: 0.4em 0.6em;
  text-align: left;
}
.prose strong {
  font-weight: 650;
}

.garden-bed {
  margin: 3rem 0 0;
}
.garden-bed svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Notices and forms (interface, in the companion sans) ── */

.ui main,
.notice {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}
.notice {
  max-width: var(--measure);
  margin: 4rem auto;
  text-align: center;
}
.notice h1,
.card h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  margin: 0 0 0.6rem;
}

.card {
  flex: none !important;
  width: calc(100% - 32px);
  max-width: 26rem;
  margin: 3rem auto auto;
  padding: 2rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 1px 0 var(--shadow);
}
@media (max-width: 30rem) {
  .card {
    padding: 1.5rem 1.25rem;
    margin-top: 1.5rem;
  }
}
.lede {
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}
.aside {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 1.25rem 0 0;
}
.error {
  color: var(--vermilion);
  margin: 0 0 1rem;
}
.notice-ok {
  color: var(--verdigris);
  margin: 0 0 1rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stack label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

input[type="email"],
input[type="text"],
input[type="password"],
input:not([type]),
textarea {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  width: 100%;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--lapis);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lapis) 18%, transparent);
}
input.code {
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

button,
.button {
  font: inherit;
  font-family: var(--sans);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
button:hover,
.button:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
button.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
button.primary:hover {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fff8ee;
}
button.warn {
  border-color: var(--vermilion);
  color: var(--vermilion);
}
.button.google {
  width: 100%;
  background: var(--field);
}

.or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin: 1.25rem 0;
}
.or::before,
.or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

/* ── Dashboard ──────────────────────────────────────────── */

/* One width for every signed-in page (the editor's two panes excepted).
   width: 100% matters: body is a flex column, where an auto-margined box
   otherwise shrinks to its content and each page ends up its own width. */
.dash-main {
  width: 100%;
  max-width: 44rem;
  margin: 1rem auto 0;
}
.dash-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}
.dash-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}
.dash-nav a {
  white-space: nowrap;
}
/* On a phone the tabs take the whole first row; the page's button sits below. */
@media (max-width: 36rem) {
  .dash-nav {
    flex-basis: 100%;
    gap: 0.4rem 1rem;
  }
}
.dash-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
}
.dash-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--vermilion);
}
.dash-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.dash-posts li {
  border-bottom: 1px solid var(--rule);
}
.dash-posts a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "t s" "d d" "g g";
  gap: 0.15rem 1rem;
  padding: 0.9rem 0.25rem;
  text-decoration: none;
}
.dash-posts a:hover {
  background: var(--card);
}
.dash-posts .t {
  grid-area: t;
  font-family: var(--serif);
  font-size: 1.15rem;
}
.dash-posts .s,
.dash-posts .status {
  grid-area: s;
  align-self: center;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dash-posts .status.published {
  color: var(--verdigris);
}
.dash-posts .d {
  grid-area: d;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.settings fieldset {
  border: 0;
  border-top: 1px solid var(--rule);
  padding: 1rem 0 0;
  margin: 0.5rem 0 0;
}
.settings legend {
  font-family: var(--serif);
  font-size: 1.2rem;
  padding: 0 0.5rem 0 0;
}
.settings label.choice {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.75rem;
  color: var(--ink-soft);
}
.settings label.choice strong {
  color: var(--ink);
  font-weight: 600;
}
.settings label.choice input {
  margin-top: 0.3rem;
  accent-color: var(--vermilion);
}

.settings label.password-field {
  margin-top: 1rem;
}

/* ── Readers (private blogs) ────────────────────────────── */

.readers-section {
  margin: 0 0 2rem;
}
.readers-section h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
}
.readers-section .aside {
  margin: 0 0 0.6rem;
}
.readers {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.readers li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--rule);
}
.readers .who {
  min-width: 0;
  overflow-wrap: anywhere;
}
.readers .email,
.readers .state {
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.readers .state::before {
  content: " · ";
}
.readers .acts {
  display: flex;
  gap: 0.5rem;
}
button.small {
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
}

/* ── The gate on a private blog ─────────────────────────── */

.gate .tagline-small {
  color: var(--ink-soft);
  font-style: italic;
  margin: -0.3rem 0 1.25rem;
}
.gate .button.primary-link {
  width: 100%;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  white-space: normal;
  text-align: center;
}
.gate .button.primary-link:hover {
  background: var(--vermilion);
  border-color: var(--vermilion);
  color: #fff8ee;
}

/* ── Composer ───────────────────────────────────────────── */

.editor main {
  padding: 0;
}
.composer {
  flex: 1;
  font-family: var(--sans);
  font-size: 1rem;
}
.composer-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 16px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.composer-bar .back {
  text-decoration: none;
  color: var(--ink-soft);
}
.composer-state {
  flex: 1;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.composer-actions {
  display: flex;
  gap: 0.5rem;
}
.composer-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 88rem;
  margin: 0 auto;
}
@media (max-width: 60rem) {
  .composer-panes {
    grid-template-columns: 1fr;
  }
  .composer-preview {
    border-left: 0 !important;
    border-top: 1px solid var(--rule);
  }
  .composer-bar {
    flex-wrap: wrap;
  }
}
.composer-write,
.composer-preview {
  padding: 1.5rem 16px 4rem;
  min-width: 0;
}
@media (min-width: 60rem) {
  .composer-write,
  .composer-preview {
    padding: 2rem 2.5rem 4rem;
  }
}
.composer-preview {
  border-left: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.6;
}
.composer-preview > * {
  max-width: var(--measure);
}
.preview-title {
  font-weight: 500;
  font-size: clamp(2.1rem, 1.6rem + 1.4vw, 2.8rem);
  line-height: 1.1;
  margin: 0 0 2rem;
}
.composer-write textarea.composer-title {
  display: block;
  width: 100%;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
  resize: none;
  overflow: hidden;
  field-sizing: content; /* grows without the script, where supported */
}
.composer-slug {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  margin: 0.25rem 0 1.25rem;
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.composer-slug input {
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  box-shadow: none !important;
}
/* the post itself: only #body, never the question fields below it */
.composer-write textarea#body {
  display: block;
  /* roomy when empty, but it grows with the post, so the questions follow close behind */
  min-height: 16rem;
  resize: none;
  overflow: hidden;
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none !important;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.65;
}
.danger {
  max-width: 88rem;
  margin: 0 auto 2rem;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.danger summary {
  cursor: pointer;
}
.danger form {
  margin-top: 0.75rem;
}

/* ── Type lab ───────────────────────────────────────────── */

.type-lab-head {
  text-align: center;
  padding: 2rem 16px 0;
  font-family: var(--sans);
  font-size: 1rem;
}
.type-lab-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.6rem;
  margin: 0;
}
.type-lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 0 3rem;
  padding: 1rem 16px 4rem;
  max-width: 100rem;
  margin: 0 auto;
}
.type-col {
  font-family: var(--serif);
  min-width: 0;
}
.type-col .post-article {
  padding-right: 0;
  max-width: var(--measure);
}
.type-name {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0 0.8rem;
  margin: 0;
  min-height: 7.5rem;
}
.type-name strong {
  display: block;
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

/* ── Print ──────────────────────────────────────────────── */

@media print {
  :root {
    --paper: #fff;
    --ink: #000;
    --ink-soft: #333;
    --ink-faint: #555;
    --rule: #999;
  }
  body {
    background: #fff;
    font-size: 11.5pt;
    line-height: 1.5;
  }
  .site-head,
  .site-foot,
  .composer-bar {
    display: none;
  }
  .post-article {
    max-width: none;
    padding: 0;
  }
  .post-head h1 {
    font-size: 24pt;
  }
  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: var(--ink-soft);
  }
  .prose p,
  .prose blockquote,
  .prose li {
    orphans: 3;
    widows: 3;
  }
  .prose h2,
  .prose h3 {
    break-after: avoid;
  }
  .garden-bed {
    break-inside: avoid;
  }
}

/* ── Garden and letters (post page) ────────────────────── */

.garden {
  margin: 3.5rem 0 0;
  scroll-margin-top: 2rem;
}
.garden-bed svg {
  display: block;
  width: 100%;
  height: auto;
}
.garden-closed,
.garden-empty {
  position: relative;
  padding: 2.5rem 1rem 1.25rem;
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
}
/* an empty bed: a line of turned earth */
.garden-closed::after,
.garden-empty::after {
  content: "";
  display: block;
  height: 10px;
  margin: 1.5rem auto 0;
  max-width: 28rem;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ochre) 35%, transparent), transparent 70%);
}
.garden p {
  margin: 0 auto;
  max-width: 28rem;
}

.letter {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 2rem;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}
.letter details > summary {
  list-style: none;
  cursor: pointer;
}
.letter details > summary::-webkit-details-marker {
  display: none;
}
.letter h2 {
  display: inline;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
}
.letter details:not([open]) h2::after {
  content: " →";
  color: var(--vermilion);
}
.letter-lede {
  color: var(--ink-soft);
  margin: 0.5rem 0 1.25rem;
}
.letter-sent {
  color: var(--verdigris);
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.15rem;
  margin: 0 0 1.25rem;
}
.letter-author {
  color: var(--ink-soft);
}
.letter-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.letter-form > label,
.letter-who {
  width: 100%;
}
.letter-who {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 36rem) {
  .letter-who {
    grid-template-columns: 1fr;
  }
}
.letter-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.letter-form .opt {
  color: var(--ink-faint);
}
.letter-form textarea {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  resize: vertical;
  min-height: 10rem;
}
.letter-form label.choice {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
}
.letter-form label.choice input {
  accent-color: var(--ochre);
  width: 1.05rem;
  height: 1.05rem;
}
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Letterbox ──────────────────────────────────────────── */

.dash-nav .count {
  display: inline-block;
  min-width: 1.3em;
  margin-left: 0.35em;
  padding: 0 0.35em;
  border-radius: 1em;
  background: var(--vermilion);
  color: #fff8ee;
  font-size: 0.75em;
  line-height: 1.5;
  text-align: center;
  vertical-align: 0.1em;
}
.letterbox {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.letterbox li {
  border-bottom: 1px solid var(--rule);
}
.letterbox a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "from when" "about about" "peek peek";
  gap: 0.1rem 1rem;
  padding: 0.9rem 0.25rem;
  text-decoration: none;
}
.letterbox a:hover {
  background: var(--card);
}
.letterbox .from {
  grid-area: from;
}
.letterbox .unread .from {
  font-weight: 700;
}
.letterbox .unread .from::before {
  content: "●";
  color: var(--vermilion);
  font-size: 0.6em;
  vertical-align: 0.25em;
  margin-right: 0.45em;
}
.letterbox .when {
  grid-area: when;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.letterbox .about {
  grid-area: about;
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
}
.letterbox .peek {
  grid-area: peek;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 1.05rem;
}
.letter-read header {
  margin-bottom: 1.5rem;
}
.letter-read .meta {
  margin: 0;
}
.letter-read .soft {
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.letter-text {
  white-space: pre-wrap;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.65;
  padding: 1.5rem 1.75rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  max-width: var(--measure);
}
.consent {
  font-size: 0.9rem;
  margin: 1rem 0;
}
.consent.yes {
  color: var(--ochre);
}
.consent.no {
  color: var(--ink-faint);
}
.letter-why {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ── Marginalia ─────────────────────────────────────────── */

/* The margin column: a paragraph's sprigs, then the reader's own notes. It
   comes just before its paragraph in the markup and is absolutely placed
   with no top, so it keeps the height it would have had in the flow, right
   beside the paragraph. (Not floats: floats would push the illuminated
   initial, itself a float, out of the first paragraph.) A long column can
   reach the next one; the annotate script nudges later ones down. */
.post-body {
  position: relative;
}
.margin-col {
  position: absolute;
  left: calc(100% + 2rem);
  width: var(--margin);
}
.margin-bloom {
  margin-top: -1.2rem;
  pointer-events: none;
}
.margin-bloom svg {
  display: block;
  height: 5.5rem;
  width: auto;
}
.margin-notes {
  margin-top: 0.1rem;
}
.margin-bloom + .margin-notes {
  margin-top: 0.25rem;
}
/* in the margin, the note's own copy below the paragraph isn't needed */
.my-notes {
  display: none;
}
@media (max-width: 64rem) {
  /* No margin: sprigs tuck in beside the paragraph, notes go under it. */
  .margin-col {
    display: contents;
  }
  .margin-bloom {
    float: right;
    margin: 0 0 0.25rem 0.75rem;
  }
  .margin-bloom svg {
    height: 3.2rem;
  }
  .margin-notes {
    display: none;
  }
  .my-notes {
    display: block;
  }
}

/* A note in the margin: a gloss in verdigris ink, small and close-set. */
.margin-notes .my-note {
  border-left: 0;
  padding: 0;
  margin: 0 0 0.9rem;
}
.margin-notes .my-note-text {
  font-size: 0.82rem;
  line-height: 1.45;
}
.margin-notes .my-note-text.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.margin-notes .my-note-meta {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  gap: 0.5rem;
}
.margin-notes button.more {
  font-size: inherit;
  color: var(--verdigris);
}
.margin-notes .my-note.hot .my-note-text {
  color: var(--verdigris);
}

/* The passage a note was written on: underlined in the note's ink, for its
   reader only (set by the annotate script through the Highlight API). */
::highlight(bloom-passage) {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--verdigris) 70%, transparent);
  text-decoration-thickness: 0.09em;
}
::highlight(bloom-passage-hot) {
  background-color: color-mix(in srgb, var(--verdigris) 16%, transparent);
  text-decoration: underline;
  text-decoration-color: var(--verdigris);
  text-decoration-thickness: 0.12em;
}

.has-pen {
  position: relative;
}
.note-pen {
  position: absolute;
  left: calc(100% + 0.5rem);
  top: 0.15em;
  padding: 0.1rem 0.35rem;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: normal;
  line-height: 1;
  /* always faintly there, so readers learn it exists; full on hover */
  opacity: 0.35;
  transition: opacity 0.15s, color 0.15s;
  cursor: pointer;
}
.has-pen:hover > .note-pen,
.note-pen:focus-visible {
  opacity: 1;
  color: var(--verdigris);
}
.note-pen:hover {
  color: var(--vermilion);
}
@media (hover: none), (max-width: 64rem) {
  .note-pen {
    opacity: 0.55;
    left: auto;
    right: -0.25rem;
    top: auto;
    bottom: -1.5rem;
  }
}

.my-notes {
  margin: -0.4em 0 1.3em;
}
.my-note {
  border-left: 2px solid var(--verdigris);
  padding: 0.1rem 0 0.1rem 0.9rem;
  margin: 0 0 0.6rem;
}
.my-note-text {
  margin: 0;
  font-style: italic;
  color: color-mix(in srgb, var(--verdigris) 55%, var(--ink));
  font-size: 0.95em;
  line-height: 1.5;
  hyphens: manual;
}
.my-note-meta {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin: 0.2rem 0 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.my-note-meta form {
  margin: 0;
}
.my-note-meta button.link,
.note-meta button.link {
  font-size: inherit;
  color: var(--ink-faint);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.my-note-status {
  margin: 0.25rem 0 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--verdigris);
}

.note-inline {
  margin: -0.3em 0 1.3em;
  padding: 0.9rem 1rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--verdigris);
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.note-inline p {
  margin: 0;
}
.note-inline textarea {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  resize: vertical;
}
.note-inline-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.note-problem {
  font-family: var(--sans);
  font-size: 0.95rem;
}

/* /notes */
.page-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.2rem;
  margin: 1rem 0 0.4rem;
}
.notes-group {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 0 0.5rem;
}
.notes-group h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  margin: 0 0 0.75rem;
}
.notes-group h2 a {
  text-decoration: none;
}
.note-entry {
  margin: 0 0 1.25rem;
}
.note-entry blockquote {
  margin: 0 0 0.4rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 0.95rem;
}
.note-body {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  white-space: pre-wrap;
  color: color-mix(in srgb, var(--verdigris) 55%, var(--ink));
}
.note-meta {
  display: flex;
  gap: 0.75rem;
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.note-meta form {
  margin: 0;
}

@media print {
  .note-pen,
  .note-inline,
  .letter,
  .my-note-meta {
    display: none;
  }
}

/* ── Questions (post page) ─────────────────────────────── */

.questions {
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  scroll-margin-top: 2rem;
}
.questions h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}
.questions details > summary {
  cursor: pointer;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}
.questions-done {
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 0 0 0.75rem;
}
.question-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
}
.question {
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.q-prompt {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ink);
  padding: 0;
}
.q-n {
  color: var(--vermilion);
  font-variant-numeric: oldstyle-nums;
}
.question textarea {
  font-family: var(--serif);
  font-size: 1.05rem;
  resize: vertical;
}
.q-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.q-choice {
  position: relative;
}
.q-choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.q-choice span {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--field);
  color: var(--ink-soft);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.q-choice input:hover + span {
  border-color: var(--ink-soft);
}
.q-choice input:focus-visible + span {
  outline: 2px solid var(--lapis);
  outline-offset: 2px;
}
.q-choice input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.question-scale .q-choices {
  gap: 0.4rem;
}
.question-scale .q-choice span {
  min-width: 2.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* shrink-wraps the choices, so the scale's end labels sit under 1 and 5 */
.q-answer {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  max-width: 100%;
}
.q-scale-ends {
  display: flex;
  justify-content: space-between;
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.question-preview {
  font-family: var(--serif);
  font-size: 1.1rem;
  padding-left: 1.4rem;
  margin: 0 0 0.5rem;
}
.question-preview li::marker {
  color: var(--vermilion);
}

/* ── Question editor (composer) ────────────────────────── */

.q-editor {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.q-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.q-editor-head a {
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.q-editor h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 0.3rem;
}
.q-help {
  color: var(--ink-faint);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.q-help strong {
  color: var(--ink-soft);
  font-weight: 600;
}
.q-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.q-card {
  padding: 0.85rem 0.9rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
}
.q-card:focus-within {
  border-color: color-mix(in srgb, var(--lapis) 50%, var(--rule));
}
.q-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.q-num {
  flex: none;
  width: 1.4rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--vermilion);
  text-align: right;
}
.q-card .q-prompt-input {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  padding: 0.45rem 0.6rem;
}
.q-tools {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex: none;
}
.q-tool,
.q-remove {
  padding: 0.3rem 0.4rem !important;
  font-size: 0.85rem !important;
  color: var(--ink-faint) !important;
}
.q-tool:disabled {
  opacity: 0.3;
  cursor: default;
}
.q-remove:hover,
.q-remove.confirm {
  color: var(--vermilion) !important;
}
.q-card-body {
  padding-left: 2rem;
  margin-top: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
@media (max-width: 36rem) {
  .q-card-head {
    flex-wrap: wrap;
  }
  .q-card .q-prompt-input {
    flex-basis: calc(100% - 2rem);
  }
  .q-tools {
    margin-left: 2rem;
  }
  .q-card-body {
    padding-left: 0;
  }
}
.q-kind {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.q-kind select {
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.35rem 0.5rem;
}
/* enhanced: the select stays for the form, the buttons are what you see */
.q-kind.enhanced select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
}
.q-kinds {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.q-kind-btn {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0.3rem 0.8rem !important;
  font-size: 0.85rem !important;
  color: var(--ink-soft) !important;
}
.q-kind-btn + .q-kind-btn {
  border-left: 1px solid var(--rule) !important;
}
.q-kind-btn[aria-checked="true"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
}
.q-options {
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.q-card:has(select option[value="choice"]:checked) .q-options {
  display: flex;
}
.q-options textarea {
  min-height: 0;
  resize: vertical;
}
.q-options.enhanced > span,
.q-options.enhanced textarea {
  display: none;
}
.q-choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 24rem;
}
.q-choice-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.q-choice-row input {
  padding: 0.35rem 0.6rem;
  font-size: 0.95rem;
}
.q-add-choice {
  align-self: flex-start;
  font-size: 0.85rem !important;
  color: var(--ink-soft) !important;
  padding: 0.2rem 0 !important;
}
.q-answered {
  margin: 0;
  font-size: 0.8rem;
  color: var(--verdigris);
}
.q-add {
  margin-top: 0.75rem;
  border-style: dashed !important;
  background: none !important;
  color: var(--ink-soft) !important;
  width: 100%;
}

/* ── Answers (dashboard) ───────────────────────────────── */

.digest-toggle {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.digest-toggle label.choice {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: var(--ink-soft);
}
.digest-toggle input {
  margin-top: 0.3rem;
  accent-color: var(--vermilion);
}
.digest-toggle strong {
  color: var(--ink);
}
.answer-q {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 0 0.5rem;
}
.answer-q h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}
.answer-texts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.answer-texts li {
  padding: 0.6rem 0 0.6rem 1rem;
  border-left: 2px solid var(--rule);
  margin-bottom: 0.6rem;
}
.answer-texts p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  white-space: pre-wrap;
}
.answer-texts .d {
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.answer-tally {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(4rem, max-content) 1fr 2.5rem;
  gap: 0.4rem 0.75rem;
  align-items: center;
}
.answer-tally li {
  display: contents;
}
.answer-tally .label {
  color: var(--ink-soft);
}
.answer-tally .bar {
  height: 0.7rem;
  border-radius: 2px;
  background: linear-gradient(to right, var(--ochre) calc(var(--share) * 100%), color-mix(in srgb, var(--rule) 40%, transparent) 0);
}
.answer-tally .n {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-soft);
}
.average {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.empty-small {
  color: var(--ink-faint);
  font-style: italic;
}

/* the "✎ Note" button that appears by a selection */
.note-float {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  font-family: var(--sans);
  font-size: 0.85rem !important;
  box-shadow: 0 2px 10px var(--shadow);
  animation: note-float-in 0.12s ease-out;
}
.note-float:hover {
  background: var(--verdigris) !important;
}
.note-float[hidden] {
  display: none;
}
@keyframes note-float-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .note-float {
    animation: none;
  }
}

.note-hint {
  margin: -1.25rem 0 2rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.note-hint > span {
  color: var(--verdigris);
}
.note-hint button.link {
  margin-left: 0.4rem;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.note-inline-quote,
.my-note-quote {
  margin: 0 0 0.5rem !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-faint);
}
.my-note-quote {
  margin-bottom: 0.15rem !important;
  hyphens: manual;
}
::selection {
  background: color-mix(in srgb, var(--verdigris) 28%, transparent);
}
@media print {
  .note-float,
  .note-hint {
    display: none;
  }
}

/* ── Composer: end date and season ─────────────────────── */

.composer-ends {
  margin: -0.75rem 0 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.composer-ends label {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
}
.composer-ends input[type="datetime-local"] {
  font: inherit;
  color: var(--ink-soft);
  background: var(--field);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  color-scheme: light dark;
}
.composer-season {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
}
.composer-season.ended {
  color: var(--vermilion);
}

/* ── A post that has ended ──────────────────────────────── */

.ended-note {
  font-style: italic;
  color: var(--ink-soft);
  margin: 0.75rem 0 0;
}
.garden-final {
  margin-top: 2rem;
}
.ended-back {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.95rem;
  margin: 2rem 0 0;
}

/* ── Quotes pinned from letters ─────────────────────────── */

.reader-quotes {
  margin: 3rem 0 0;
  display: grid;
  gap: 1.75rem;
}
.reader-quotes figure {
  margin: 0;
  text-align: center;
}
.reader-quotes blockquote {
  margin: 0 auto;
  max-width: 30rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: balance;
}
.reader-quotes blockquote::before {
  content: "“";
  color: var(--ochre);
}
.reader-quotes blockquote::after {
  content: "”";
  color: var(--ochre);
}
.reader-quotes figcaption {
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.quote-pin {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.quote-pin h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 0.75rem;
}
.quote-pin .pinned {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.quote-pin .pinned li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.quote-pin .pinned blockquote {
  flex: 1 1 100%;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
}
.quote-pin .pinned .by {
  color: var(--ink-faint);
  font-size: 0.9rem;
}
.quote-pin fieldset.attribute {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.quote-pin fieldset.attribute legend {
  padding: 0;
  margin-bottom: 0.35rem;
}
.quote-pin label.choice {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
}

/* each published post's garden, in the dashboard list */
.dash-posts .g {
  grid-area: g;
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-top: 0.4rem;
}
.dash-posts .g.none {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-faint);
}

/* ── The platform host ──────────────────────────────────── */

.platform-main {
  max-width: 30rem;
  margin: 5rem auto 0;
  text-align: center;
}
.platform-main h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 3rem;
  margin: 0 0 0.5rem;
}
.platform-blogs {
  list-style: none;
  padding: 0;
  margin: 2.5rem 0 0;
}
.platform-blogs li {
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
}
.platform-blogs a {
  font-family: var(--serif);
  font-size: 1.4rem;
}
.platform-blogs span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ── Settings: address and domain ───────────────────────── */

.handle-field {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.handle-field input {
  flex: 1;
  min-width: 0;
}
.handle-field .suffix {
  color: var(--ink-faint);
  white-space: nowrap;
}
.stack label .hint {
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.settings.domain {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.settings.domain h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 0.75rem;
}
.settings.domain .row {
  display: flex;
  gap: 0.5rem;
}
table.dns {
  border-collapse: collapse;
  font-size: 0.9rem;
  width: 100%;
  table-layout: fixed;
}
table.dns th,
table.dns td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;
}
table.dns th {
  color: var(--ink-faint);
  font-weight: 500;
}
table.dns th:first-child {
  width: 5rem;
}
.platform-main .card {
  text-align: left;
  margin-top: 2rem;
}
.platform-main .card h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}

.aside.readers-note {
  margin: 0 0 1.75rem;
}