/* Every page of the site, on top of the adscriptura.css tokens: port of the
   owner's Claude Design source (site.css). The home adds home/landing.css.
   Inline styles of the design live here as classes (the CSP has no
   'unsafe-inline'). */

/* Blackletter for the wordmarks only (.s-mark, the home's .l-mark and .bm). */
@font-face {
  font-family: "Old London";
  src: url("fonts/OldLondon.ttf") format("truetype");
  font-display: swap;
}

/* ── Theme ──────────────────────────────────────────────────────────────
   The page follows the visitor's system setting (prefers-color-scheme), and
   so did the app media (owner M48; the home is light only since M15). Components read
   tokens only: the design-system tokens of adscriptura.css (never edited here)
   plus the site roles below; dark mode redefines both on :root with the design
   system's night palette (--night-*). The header switch (owner M51) can force
   either theme with <html data-theme="light|dark">. */
:root {
  color-scheme: light dark;
  /* Page glow behind the vellum (adscriptura.css body gradient). */
  --page-glow: oklch(0.975 0.012 86);
  /* Sticky header: the page colour, translucent under the blur. */
  --nav-bg: color-mix(in oklch, var(--vellum) 90%, transparent);
  /* Download band and the premium tier: the night inset of a light page. */
  --band-bg: var(--night-bg);
  --band-edge: transparent;
  --foot-bg: var(--night-bg-2);
  /* Rubric on a light surface in either theme (the light store badges of
     the download band, and every store badge on a dark page). */
  --rubric-on-light: oklch(0.44 0.11 28);
  --store-k: var(--gilt);
  --prem-ring: transparent;
  /* Phone bezel of the clips and still screens. */
  --bezel: #14110e;
  --bezel-rim: #2b2520;
  --bezel-edge: transparent;
  --bezel-drop: rgba(50, 30, 10, 0.55);
  --bezel-drop-2: rgba(50, 30, 10, 0.35);
  /* The app's own shadows (app/tokens/tokens.ts), cast in warm ink: `float` is
     a card resting on the page, `chrome` the bar pinned to the top. iOS
     shadowRadius r reads as a CSS blur of about 2r. */
  --sh-float:
    0 2px 4px -1px rgb(30 21 14 / 0.1), 0 8px 24px -2px rgb(30 21 14 / 0.18);
  --sh-chrome: 0 1px 0 var(--rule-soft), 0 4px 16px rgb(30 21 14 / 0.14);
}
/* Dark tokens, twice with the same body (shared/theme-choice.test.js pins them
   equal): the system setting, unless the visitor forced light, and the forced
   dark of the header switch (owner M51, <html data-theme>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Vellum → night ground, ink → night text (contrast on --vellum:
       ink ≈ 13:1, ink-2 ≈ 9:1, ink-3 ≈ 6:1, sanguine ≈ 5:1). */
    --vellum: var(--night-bg);
    --vellum-2: var(--night-bg-2);
    --vellum-3: oklch(0.245 0.016 55);
    --parchment-edge: var(--night-rule);
    --ink: var(--night-fg);
    --ink-2: oklch(0.79 0.017 75);
    --ink-3: var(--night-fg-2);
    --rule: oklch(0.6 0.016 70);
    --rule-soft: oklch(0.3 0.014 60);
    /* Rubric: the dark-safe --night-rubric; -ink is its hover, lighter. */
    --sanguine: var(--night-rubric);
    --sanguine-ink: oklch(0.72 0.12 28);
    --sanguine-wash: oklch(0.26 0.045 28);
    --diff-wash: oklch(0.28 0.06 20);
    /* Shadows: black, deeper; cards lift by tone (--vellum-2) as well. */
    --sh-1:
      0 1px 2px -1px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
    --sh-2:
      0 2px 4px -2px rgba(0, 0, 0, 0.5), 0 8px 18px -8px rgba(0, 0, 0, 0.55);
    --sh-3: var(--sh-night);
    --sh-float:
      0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 10px 26px -4px rgba(0, 0, 0, 0.6);
    --sh-chrome: 0 1px 0 var(--rule-soft), 0 4px 16px rgba(0, 0, 0, 0.5);
    --sh-up:
      0 -2px 6px -2px rgba(0, 0, 0, 0.45),
      0 -14px 34px -12px rgba(0, 0, 0, 0.55);
    --page-glow: oklch(0.205 0.016 55);
    /* The band sinks below the night page, the footer stays a step above. */
    --band-bg: oklch(0.125 0.01 60);
    --band-edge: var(--night-rule);
    --store-k: var(--rubric-on-light);
    --prem-ring: oklch(0.68 0.07 82 / 0.45);
    --bezel-edge: oklch(0.34 0.014 60);
    --bezel-drop: rgba(0, 0, 0, 0.6);
    --bezel-drop-2: rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  --vellum: var(--night-bg);
  --vellum-2: var(--night-bg-2);
  --vellum-3: oklch(0.245 0.016 55);
  --parchment-edge: var(--night-rule);
  --ink: var(--night-fg);
  --ink-2: oklch(0.79 0.017 75);
  --ink-3: var(--night-fg-2);
  --rule: oklch(0.6 0.016 70);
  --rule-soft: oklch(0.3 0.014 60);
  --sanguine: var(--night-rubric);
  --sanguine-ink: oklch(0.72 0.12 28);
  --sanguine-wash: oklch(0.26 0.045 28);
  --diff-wash: oklch(0.28 0.06 20);
  --sh-1: 0 1px 2px -1px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
  --sh-2:
    0 2px 4px -2px rgba(0, 0, 0, 0.5), 0 8px 18px -8px rgba(0, 0, 0, 0.55);
  --sh-3: var(--sh-night);
  --sh-float:
    0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 10px 26px -4px rgba(0, 0, 0, 0.6);
  --sh-chrome: 0 1px 0 var(--rule-soft), 0 4px 16px rgba(0, 0, 0, 0.5);
  --sh-up:
    0 -2px 6px -2px rgba(0, 0, 0, 0.45), 0 -14px 34px -12px rgba(0, 0, 0, 0.55);
  --page-glow: oklch(0.205 0.016 55);
  --band-bg: oklch(0.125 0.01 60);
  --band-edge: var(--night-rule);
  --store-k: var(--rubric-on-light);
  --prem-ring: oklch(0.68 0.07 82 / 0.45);
  --bezel-edge: oklch(0.34 0.014 60);
  --bezel-drop: rgba(0, 0, 0, 0.6);
  --bezel-drop-2: rgba(0, 0, 0, 0.45);
}
/* A forced theme also sets the UA widgets (scrollbars, form controls). */
:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}
/* adscriptura.css paints the body with a literal light glow; same gradient here
   on tokens so it follows the theme. */
body {
  background: radial-gradient(
      120% 80% at 50% -10%,
      var(--page-glow) 0%,
      var(--vellum) 55%
    )
    fixed var(--vellum);
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Every page is header / main / footer; main takes the slack so the footer
   sits at the bottom of short pages (the account-link cards). */
body {
  font-size: 18px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main {
  flex: 1 0 auto;
}
/* `.btn` sets its own display; without !important `hidden` would lose to it. */
[hidden] {
  display: none !important;
}
a {
  color: var(--sanguine);
}
a:hover {
  color: var(--sanguine-ink);
}
.s-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 640px) {
  .s-wrap {
    padding: 0 20px;
  }
}
/* nav */
/* Skip link: off-screen until a keyboard user tabs to it. */
.skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 40;
  padding: 10px 16px;
  background: var(--vellum);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  border: 1px solid var(--rule-soft);
}
.s-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--sh-chrome);
}
.s-nav .s-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 64px;
}
.s-mark {
  padding: 10px 0;
  font-family: var(--f-black);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  border: none;
}
.s-mark:hover {
  color: var(--ink);
}
.s-links {
  display: flex;
  gap: 26px;
  align-items: center;
}
.s-links a {
  padding: 10px 0;
  font-family: var(--f-roman);
  font-variant: small-caps;
  letter-spacing: 0.1em;
  font-size: 17px;
  color: var(--ink-2);
  border: none;
}
.s-links a:hover,
.s-links a.on {
  color: var(--sanguine);
}
/* Theme button (owner M51, M84): one small icon button in the header's right
   corner; each click cycles Sistema → Claro → Escuro. Hidden until
   shared/theme-init.js marks <html data-theme-choice>, so a page without
   scripts shows no dead control. The same attribute picks the icon (half
   circle, sun, moon), so it is right from first paint. */
.s-links {
  margin-left: auto;
}
.s-theme {
  display: none;
}
:root[data-theme-choice] .s-theme {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  color: var(--ink-3);
  cursor: pointer;
}
/* A page that pins its theme (data-theme-lock) shows no switch, but keeps
   its place: the links then sit exactly where they do on every other page
   (owner: they jumped between the home and the rest). Hidden from sight,
   from the tab order and from screen readers alike. */
:root[data-theme-lock] .s-theme {
  visibility: hidden;
}
.s-theme:hover {
  color: var(--sanguine);
}
.s-theme:focus-visible {
  outline: 2px solid var(--sanguine);
  outline-offset: 2px;
}
/* The app's own theme icons (AutoThemeIcon / SunIcon / MoonIcon in
   app/src/shared/ui/Icon.tsx), same 22-grid and stroke weights. */
.s-theme svg {
  display: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-theme .i-dark {
  stroke-width: 1.15;
}
.s-theme svg .fill {
  fill: currentColor;
  stroke: none;
}
:root[data-theme-choice="system"] .s-theme .i-system,
:root[data-theme-choice="light"] .s-theme .i-light,
:root[data-theme-choice="dark"] .s-theme .i-dark {
  display: block;
}
/* Phone menu: under 640 px the links fold behind <details class="s-menu">
   (shared/nav-menu.js closes it on a tap outside or Escape). */
.s-menu {
  display: none;
}
.s-menu summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  list-style: none;
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  color: var(--ink-3);
  cursor: pointer;
}
.s-menu summary::-webkit-details-marker {
  display: none;
}
.s-menu summary:focus-visible {
  outline: 2px solid var(--sanguine);
  outline-offset: 2px;
}
/* The app's MenuIcon (18-grid) and its CloseIcon, the serif "×". */
.s-menu svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.s-menu .i-close {
  font-family: var(--f-roman);
  font-size: 38px;
  line-height: 18px;
  height: 18px;
  margin-top: -9px;
}
.s-menu .i-close,
.s-menu[open] .i-open {
  display: none;
}
.s-menu[open] .i-close {
  display: block;
}
@media (max-width: 640px) {
  .s-nav .s-wrap {
    gap: 10px;
    padding: 0 16px;
  }
  .s-mark {
    font-size: 25px;
    margin-right: auto;
  }
  .s-menu {
    display: block;
  }
  :root[data-theme-choice] .s-theme {
    width: 40px;
    height: 40px;
  }
  .s-links {
    display: none;
  }
  .s-nav:has(.s-menu[open]) .s-links {
    display: grid;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 16px 12px;
    gap: 0;
    background: var(--vellum);
    border-bottom: 1px solid var(--rule-soft);
    box-shadow: var(--sh-chrome);
  }
  .s-nav:has(.s-menu[open]) .s-links a {
    padding: 14px 0;
    font-size: 19px;
  }
  .s-nav:has(.s-menu[open]) .s-links a + a {
    border-top: 1px solid var(--rule-soft);
  }
  /* A thumb-sized target for every footer link. */
  .sitefoot nav a,
  .sitefoot .mail {
    padding: 12px 0;
  }
  .sitefoot nav {
    gap: 0 24px;
  }
}
/* type */
.s-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sanguine);
}
.s-eyebrow .prem {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 3px 8px 2px;
  border: 1px solid var(--sanguine);
  color: var(--sanguine);
}
.s-h1 {
  font-family: var(--f-roman);
  font-variant: small-caps;
  font-weight: 600;
  letter-spacing: 0.005em;
  font-size: clamp(36px, 5vw, 66px);
  line-height: 0.98;
  margin: 18px 0 22px;
  text-wrap: balance;
}
/* The hero eyebrow sits inside the h1 so the h1 carries "Bíblia de Estudo"
   (search); it keeps the look it had as a sibling above the h1: undo what it
   inherits from .s-h1 and move the h1's top margin under it. */
.s-h1:has(> .s-eyebrow) {
  margin-top: 0;
}
.s-h1 > .s-eyebrow {
  font-variant: normal;
  font-weight: 400;
  line-height: 1.55;
  text-wrap: wrap;
  margin-bottom: 18px;
}
/* Cormorant (and EB Garamond) draw the hyphen as a slanted stroke, which
   reads as crooked at display sizes. Keep the "-" in the text (copy, screen
   readers) but hide its glyph and paint a level bar at the hyphen's height. */
.s-hyphen {
  display: inline-block;
  width: 0.28em;
  height: 0.055em;
  margin: 0 0.03em;
  overflow: hidden;
  vertical-align: 0.19em;
  background: currentColor;
  -webkit-text-fill-color: transparent;
}
.s-div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
}
.s-div::before,
.s-div::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(
    90deg,
    transparent,
    var(--rule-soft),
    transparent
  );
}
.s-div i {
  width: 7px;
  height: 7px;
  background: var(--sanguine);
  transform: rotate(45deg);
}
/* lojas */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.store {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 208px;
  min-height: 58px;
  padding: 9px 20px 10px;
  background: var(--ink);
  color: var(--vellum);
  box-shadow: var(--sh-float);
  cursor: default;
  border: none;
}
/* "Em breve" (owner M52): a badge without a link is a store not open yet —
   visibly disabled and inert (no hover, focus or selection). A live store
   becomes <a class="store" href="…"> and loses this look. */
.store:not([href]) {
  /* faded fill and content, not element opacity, so the shadow keeps its weight */
  background: color-mix(in oklch, var(--ink) 50%, transparent);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.store:not([href]) > * {
  opacity: 0.7;
}
/* Store glyph: inline SVG in currentColor, so it follows the button's ink. */
.store .ico {
  flex: none;
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.store .txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.store .k {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--store-k);
}
.store .n {
  font-family: var(--f-roman);
  font-weight: 600;
  font-size: 23px;
  line-height: 1;
  letter-spacing: 0.01em;
}
/* footer — one block on every page (keep the markup in sync, see README).
   `sitefoot` is the class the brand tests read. */
.sitefoot {
  padding: 48px 0 56px;
  background: var(--foot-bg);
  color: var(--night-fg-2);
  border-top: 1px solid var(--night-rule);
  text-align: left;
}
.sitefoot .s-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
}
.sitefoot .s-brand {
  display: grid;
  gap: 6px;
  border: none;
  color: var(--night-fg);
}
.sitefoot .s-brand:hover {
  color: var(--night-fg);
}
.sitefoot .s-brand .mk {
  font-family: var(--f-black);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
}
.sitefoot .s-brand .tag {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gilt);
}
.sitefoot .side {
  display: grid;
  justify-items: start;
  gap: 14px;
}
.sitefoot .mail {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  /* the footer is night in both themes, so the accent is the dark-safe rubric */
  color: var(--night-rubric);
  border: none;
}
.sitefoot .mail:hover {
  color: var(--night-fg);
}
/* Social buttons: the brand glyph in a round button, not a text link. */
.sitefoot .social {
  display: flex;
  gap: 10px;
}
.sitefoot .social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--night-rule);
  border-radius: 50%;
  color: var(--night-fg-2);
  transition:
    color 0.15s,
    border-color 0.15s;
}
.sitefoot .social a:hover,
.sitefoot .social a:focus-visible {
  color: var(--night-fg);
  border-color: var(--gilt);
}
.sitefoot .social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sitefoot .social .dot {
  fill: currentColor;
  stroke: none;
}
.sitefoot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.sitefoot nav a {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--night-fg-2);
  border: none;
}
@media (min-width: 641px) {
  .sitefoot nav a {
    padding: 3px 0;
  }
}
.sitefoot nav a:hover,
.sitefoot nav a[aria-current="page"] {
  color: var(--night-fg);
}
.sitefoot .legal {
  width: 100%;
  margin: 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: oklch(0.6 0.016 70);
  padding-top: 20px;
  border-top: 1px solid var(--night-rule);
}
/* Phones: one centred column — brand, e-mail, links (owner M14). After the
   footer's base rules, which it must override. */
@media (max-width: 640px) {
  .sitefoot .s-wrap {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .sitefoot .side {
    gap: 2px;
    justify-items: center;
  }
  .sitefoot .s-brand {
    justify-items: center;
  }
  .sitefoot nav {
    justify-content: center;
  }
}
/* sobre — one reading column, ported from the app's About screen
   (app/src/modules/profile/presentation/screens/AboutScreen.tsx): blackletter
   wordmark, a thin rule + diamond (.s-div, shared with the rest of the
   site), then the manifesto as plain body prose. Reuses doc.css's .doc-col
   measure and paragraph/list type; .ms only overrides what the app screen
   does differently from /privacidade and /termos — headings in sentence
   case, no small caps, and justified text with hyphenation, matching the
   app's MarkdownText. */
.ms-head {
  text-align: center;
  margin-bottom: 8px;
}
/* Scoped selector (not just `.ms-word`) to outrank doc.css's `.doc p` and `.doc.ms p`
   (also loaded on this page, same 0-1-1 specificity as a bare class on a
   <p>): without it the wordmark fell back to doc.css's 18px body type. */
.doc.ms .ms-head .ms-word {
  font-family: var(--f-black);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 104px);
  text-align: center;
  line-height: 1;
  margin: 0 0 20px;
  color: var(--ink);
}
.ms-head .s-div {
  max-width: 280px;
}
.doc.ms h2 {
  font-variant: normal;
  letter-spacing: normal;
}
.doc.ms p,
.doc.ms li {
  text-align: justify;
  hyphens: auto;
}
/* Scoped under .doc.ms to outrank `.doc.ms p` (justify). */
.doc.ms .ms-sign {
  text-align: right;
  margin-top: var(--sp-8);
  color: var(--ink-2);
  font-style: italic;
}
.doc.ms .ms-sdg {
  text-align: center;
  color: var(--ink-2);
  margin-top: var(--sp-6);
}

/* Bible-reference popover (owner M102, shared/bref.js). `.bref` is the
   inline trigger, styled the same wherever it appears (today only /sobre);
   `.bref-pop` is the card shared/bref.js opens, matched to the app's own
   verse tooltip (VerseTooltipOverlay.tsx): vellum card, mono ref label in
   sanguine, EB Garamond verse text, a small credit line. Flat corners
   (border-radius: 0), like every other box in the design system. */
.bref {
  font-family: var(--f-mono);
  font-size: 0.86em;
  color: var(--sanguine);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: inherit;
}
.bref:hover {
  color: var(--sanguine-ink);
}
.bref:focus-visible {
  outline: 2px solid var(--sanguine);
  outline-offset: 2px;
}
.bref[aria-expanded="true"] {
  color: var(--sanguine-ink);
}

.bref-pop {
  position: fixed;
  z-index: 60;
  width: min(320px, calc(100vw - 32px));
  background: var(--vellum);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--sh-float);
  padding: var(--sp-5);
}
.bref-pop__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.bref-pop__ref {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--sanguine);
}
.bref-pop__close {
  background: none;
  border: none;
  padding: 0 0 0 var(--sp-3);
  margin: 0;
  line-height: 1;
  font-size: 20px;
  color: var(--ink-3);
  cursor: pointer;
}
.bref-pop__close:hover {
  color: var(--sanguine);
}
.bref-pop__close:focus-visible {
  outline: 2px solid var(--sanguine);
  outline-offset: 2px;
}
.bref-pop__text {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.bref-pop__text .vn {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--sanguine);
  vertical-align: 0.5em;
  margin-right: 2px;
}
.bref-pop__credit {
  margin: var(--sp-4) 0 0;
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
@media (max-width: 640px) {
  .bref-pop--sheet {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    padding: var(--sp-5) var(--sp-5)
      calc(var(--sp-5) + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 18px -6px rgba(0, 0, 0, 0.35);
  }
}