/* SPDX-FileCopyrightText: 2026 ursa.nz <code@ursa.nz> */
/* SPDX-License-Identifier: GPL-3.0-or-later */

/* The narrative brand guide. Layout and component styles only. Every colour,
   font and spacing value comes from the design-system tokens in styles.css.
   Local variables below cover the guide's own warm neutrals, which sit outside
   the slate scale on purpose, and the hairline that reads warmer than the
   token border against paper. */

/* --- Page reset. The backdrop bleeds to the viewport corner. --- */
html,
body {
  margin: 0;
}

.guide {
  --line: #E4DED2;      /* warm hairline, tuned to paper */
  --prose: #4E473B;     /* running body copy */
  --prose-soft: #6A6151;/* section intros */
  --prose-faint: #877D6A;/* captions and mono meta */

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--colour-background);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.guide__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(46vw, 620px);
  height: auto;
  opacity: 0.85;
  pointer-events: none;
}

.guide__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-26);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 96px 40px 120px;
}

/* --- Section shell (every band shares this) --- */

.guide-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.section-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-title);
}

.section-head__intro {
  margin: 0;
  max-width: 64ch;
  color: var(--prose-soft);
  text-wrap: pretty;
}

/* --- Shared inline pieces --- */

.mono {
  font-family: var(--font-mono);
}

.code-inline {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
}

.caption {
  margin: 0;
  max-width: var(--measure);
  color: var(--prose-faint);
  font-size: 13.5px;
  text-wrap: pretty;
}

/* .btn, .badge and .link-underline ship in css/components.css, reached
   through styles.css. The guide renders the shipped classes. */

.note-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--slate-50);
}
.note-panel__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--prose-faint);
}
.note-panel__text {
  margin: 0;
  max-width: 78ch;
  color: var(--prose);
  font-size: var(--text-small);
  text-wrap: pretty;
}

/* --- Masthead --- */

.masthead {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.brand-mark {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: var(--text-title);
  line-height: 1;
  color: var(--ink);
}
.masthead__meta {
  margin-left: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  color: var(--prose-faint);
}
.masthead__title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: pretty;
}
.masthead__lede {
  margin: 0;
  max-width: 64ch;
  color: var(--prose);
  text-wrap: pretty;
}
.masthead__note {
  margin: 0;
  max-width: 64ch;
  color: var(--prose-faint);
  font-size: var(--text-small);
  text-wrap: pretty;
}

/* --- Values (what ursa stands for) --- */

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.value-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
}
.value-card__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.value-card__dot--star { background: var(--star-500); }
.value-card__dot--violet { background: var(--violet-700); }
.value-card__dot--ink { background: var(--ink); }
.value-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 19px;
  color: var(--ink);
}
.value-card__body {
  margin: 0;
  color: var(--prose);
  font-size: 13.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* --- Marks in use --- */

.marks-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
.mark-tile {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
}
.mark-tile--wide { grid-column: span 3; }
.mark-tile__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
}
.mark-tile__img {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}
.mark-tile__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.mark-tile__caption {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--prose);
}
.mark-tile__note {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--prose-faint);
  white-space: nowrap;
}

/* --- Colour feature (star and violet) --- */

.colour-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
}
.swatch-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: var(--space-8);
  border-radius: var(--radius-md);
}
.swatch-hero--star { background: var(--star-500); color: var(--ink); }
.swatch-hero--violet { background: var(--violet-700); color: var(--violet-100); }
.swatch-hero__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.swatch-hero__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: 30px;
}
.swatch-hero__code {
  font-family: var(--font-mono);
  font-size: var(--text-small);
}
.swatch-hero--violet .swatch-hero__code { color: var(--violet-300); }
.swatch-hero__math {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
}
.swatch-hero--star .swatch-hero__math { color: var(--ink); }
.swatch-hero--violet .swatch-hero__math { color: var(--violet-400); }

.swatch-notes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
}
.swatch-notes p {
  margin: 0;
  color: var(--prose);
  font-size: 15px;
  text-wrap: pretty;
}

/* --- Colour ramps --- */

.ramp {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ramp__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--prose-faint);
}
.ramp-track {
  display: grid;
  gap: 6px;
}
.ramp-track--10 { grid-template-columns: repeat(10, 1fr); }
.ramp-track--11 { grid-template-columns: repeat(11, 1fr); }
.ramp-step {
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
}
.ramp-step--light { border-color: var(--line); }
.ramp-step__chip {
  display: flex;
  align-items: flex-start;
  height: 74px;
  padding: var(--space-2);
}
.ramp-track--11 .ramp-step__chip { height: 66px; padding: 7px; }
.ramp-step__key {
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--star-500);
  font-family: var(--font-mono);
  font-size: 10px;
}
.ramp-step--onviolet .ramp-step__key {
  background: var(--star-500);
  color: var(--ink);
}
.ramp-step__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 8px;
  background: #FFFFFF;
}
.ramp-step__name {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
}
.ramp-step__hex {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--prose-faint);
}

/* --- Type --- */

.type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.type-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.type-card__specimen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 128px;
  padding: var(--space-6);
}
.type-card__specimen--display { background: var(--slate-900); }
.type-card__specimen--mono { background: var(--slate-100); }
.type-card__specimen--body {
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  background: #FFFFFF;
}
.type-card__specimen--signature { gap: var(--space-3); background: var(--star-500); }
.specimen-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: 46px;
  line-height: 1;
  color: var(--star-500);
}
.specimen-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 34px;
  color: var(--ink);
}
.specimen-body-sans {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--ink);
}
.specimen-body-serif {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
}
.specimen-signature {
  font-family: var(--font-signature);
  font-weight: var(--weight-signature);
  font-size: 52px;
  line-height: 1;
  color: var(--ink);
}
.specimen-signature__mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.type-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}
.type-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lead);
}
.type-card__desc {
  margin: 0;
  color: var(--prose);
  font-size: 13.5px;
  text-wrap: pretty;
}

/* --- Colour roles (token tables) --- */

.roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.role-panel {
  overflow: hidden;
  padding: 22px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--slate-50);
  color: var(--colour-text);
}
.role-panel[data-theme="night"] { background: var(--night); }
.role-panel__label {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lead);
  color: var(--colour-text);
}
.token-table {
  width: 100%;
  border-collapse: collapse;
}
.token-table td {
  padding: 4px 0;
  vertical-align: middle;
}
.token-table__swatch { width: 40px; }
.token-table__swatch span {
  display: block;
  width: 30px;
  height: 22px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
}
.token-table__name {
  width: 178px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--colour-text);
}
.token-table__use {
  font-size: 12.5px;
  color: var(--colour-text-muted);
}
.token-table__hex {
  width: 74px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--colour-text-muted);
  text-align: right;
}

/* --- Contrast --- */

.contrast-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line);
}
.contrast-table td {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.contrast-table td + td { padding-left: var(--space-4); }
.contrast-table__sample { width: 190px; }
.sample-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.sample-tile span {
  font-size: var(--text-small);
  font-weight: 500;
}
.contrast-table__desc {
  font-size: 13.5px;
  color: var(--prose);
}
.contrast-table__ratio {
  width: 90px;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  text-align: right;
}
.contrast-table__verdict {
  width: 110px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-align: right;
}
.is-pass { color: var(--prose); }
.is-fail { color: #A94438; }

/* --- In use (day and night demos) --- */

.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.demo {
  --demo-bg: var(--slate-50);
  --demo-text: var(--slate-900);
  --demo-muted: var(--slate-600);
  --demo-faint: var(--slate-600);
  --demo-divider: var(--slate-200);
  --demo-link: var(--violet-700);
  --demo-highlight: var(--star-200);
  --demo-btn-bg: var(--violet-700);
  --demo-btn-text: #FFFFFF;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--demo-bg);
}
.demo[data-theme="night"] {
  --demo-bg: var(--night);
  --demo-text: var(--warm-white);
  --demo-muted: var(--slate-400);
  --demo-faint: var(--slate-400);
  --demo-divider: var(--violet-800);
  --demo-link: var(--violet-300);
  --demo-highlight: rgba(255, 213, 0, 0.28);
  --demo-btn-bg: var(--star-500);
  --demo-btn-text: var(--ink);
}
.demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  border-bottom: 1px solid var(--demo-divider);
}
.demo__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.demo__wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: 22px;
  line-height: 1;
  color: var(--demo-text);
}
.demo__mark-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.demo__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
}
.demo__nav-item { color: var(--demo-muted); }
.demo__nav-item--current {
  color: var(--demo-text);
  padding-bottom: 1px;
  box-shadow: inset 0 -2px 0 var(--star-500);
}
.demo__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 26px 34px;
}
.demo__headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--demo-text);
  text-wrap: pretty;
}
.demo__mark {
  box-shadow: inset 0 -0.34em 0 var(--demo-highlight);
}
.demo__text {
  margin: 0;
  max-width: 46ch;
  color: var(--demo-muted);
  font-size: 14.5px;
  text-wrap: pretty;
}
.demo__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.demo__cta {
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--demo-btn-bg);
  color: var(--demo-btn-text);
  font-size: var(--text-small);
  font-weight: 500;
  cursor: pointer;
}
.demo__link {
  color: var(--demo-link);
  font-size: var(--text-small);
  text-decoration: underline;
  text-decoration-color: var(--star-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.demo__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--demo-divider);
}
.demo__foot span { color: var(--demo-faint); font-size: 12px; }
.demo__foot .mono { font-size: var(--text-micro); }

/* --- Do and don't, and outside use --- */

.example-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.example-block__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--prose);
}
.example-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.example-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--colour-surface);
}
.example-tile--night { background: var(--slate-900); }
.example-tile__starlight { color: var(--star-500); font-size: 15px; }

.rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
}
.rule-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rule-group__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--prose);
}
.rule {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.rule__marker {
  position: relative;
  top: 1px;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.rule__marker--star { background: var(--star-500); }
.rule__marker--hollow { border: 1.5px solid #CCC4B3; }
.rule__marker--hollow-violet { border: 1.5px solid var(--violet-700); }
.rule__text {
  margin: 0;
  color: var(--prose);
  font-size: 14.5px;
  text-wrap: pretty;
}

/* --- Long read (essay register) --- */

.longread {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 760px;
  padding: 56px 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #FFFFFF;
}
/* .content-note ships in css/components.css, reached through styles.css. */
.longread__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.longread__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--prose-faint);
}
.longread__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: 52px;
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  color: var(--slate-900);
}
.longread__lede {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--ink);
}
.longread__para {
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 19px;
  line-height: var(--leading-loose);
  color: var(--slate-800);
}
.longread__aside { color: var(--prose-soft); }
.longread__pull {
  margin: 8px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: var(--slate-900);
}
.longread__sup {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--violet-700);
}
.highlight { box-shadow: inset 0 -0.36em 0 var(--star-200); }
.highlight--strong {
  padding: 0 2px;
  box-shadow: inset 0 -0.28em 0 var(--star-500);
}
.footnotes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.footnotes__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--prose-faint);
}
.footnote {
  margin: 0;
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 15px;
  line-height: var(--leading-body);
  color: var(--prose-soft);
}
.footnote sup {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 10px;
  color: var(--violet-700);
}

/* --- Stationery and covers --- */

.stationery {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: var(--space-8);
  align-items: start;
}
.stationery__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sheet {
  aspect-ratio: 1 / 1.414;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.sheet--letter {
  display: flex;
  flex-direction: column;
  padding: 38px 38px 30px;
  border: 1px solid var(--line);
  background: #FFFFFF;
}
.sheet--cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 28px;
}
.sheet--day {
  border: 1px solid var(--line);
  background: var(--colour-background);
}
.sheet--night {
  border: 1px solid var(--violet-800);
  background: var(--night);
}
.sheet__caption {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--prose-faint);
}
.rule-line {
  height: 1px;
  background: var(--line);
}

/* Letterhead */
.letter__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.letter__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.letter__wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
}
.letter__mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.letter__addr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}
.letter__addr span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--prose-faint);
}
.letter__date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--prose-faint);
}
.letter__body {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: var(--space-4);
}
.letter__salutation {
  font-family: var(--font-editorial);
  font-size: 16px;
  color: var(--ink);
}
.letter__para {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: var(--leading-loose);
  color: var(--slate-800);
}
.letter__signoff {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.letter__signoff-line {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--slate-800);
}
.letter__sign {
  font-family: var(--font-signature);
  font-weight: var(--weight-signature-sign);
  font-size: 30px;
  line-height: 1.1;
  color: var(--violet-700);
}
.letter__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.letter__foot span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--prose-faint);
}

/* Covers */
.stationery__covers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.cover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cover__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cover__wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  font-size: 20px;
  line-height: 1;
}
.cover__mark {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.cover__tag {
  font-family: var(--font-mono);
  font-size: 10px;
}
.cover__middle {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cover__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
}
.cover__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display-bold);
  letter-spacing: var(--tracking-display);
}
.cover__subtitle {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 16px;
}
.cover__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.cover__credit {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cover__credit span {
  font-family: var(--font-mono);
  font-size: 10px;
}
.cover__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--star-500);
}
.cover__stars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.cover__stars span { border-radius: 50%; background: var(--star-500); }
.cover__stars span:nth-child(1) { width: 5px; height: 5px; }
.cover__stars span:nth-child(2) { width: 3px; height: 3px; opacity: 0.7; }
.cover__stars span:nth-child(3) { width: 4px; height: 4px; background: var(--star-200); opacity: 0.5; }

/* Day cover palette */
.sheet--day .cover__wordmark { color: var(--ink); }
.sheet--day .cover__tag { color: var(--prose-faint); }
.sheet--day .cover__kicker { color: var(--prose-soft); }
.sheet--day .cover__title { font-size: 38px; line-height: 1.04; color: var(--slate-900); }
.sheet--day .cover__subtitle { color: var(--prose); }
.sheet--day .cover__credit span:first-child { color: var(--prose); }
.sheet--day .cover__credit span:last-child { color: var(--prose-faint); }

/* Night cover palette */
.sheet--night .cover__wordmark { color: var(--warm-white); }
.sheet--night .cover__tag { color: var(--slate-400); }
.sheet--night .cover__kicker { color: var(--slate-400); }
.sheet--night .cover__title { font-size: 46px; line-height: 1; color: var(--star-500); }
.sheet--night .cover__subtitle { color: var(--violet-300); }
.sheet--night .cover__credit span:first-child { color: var(--violet-300); }
.sheet--night .cover__credit span:last-child { color: var(--slate-400); }

/* --- Footer --- */

.guide-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.guide-footer__note {
  color: var(--prose-faint);
  font-size: 13.5px;
}
.guide-footer__mark {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--prose-faint);
}