/* Go Link — "yellow pages" theme: bright yellow, high-contrast black, readable. */
:root {
  --bg: #ffd400;          /* classic directory yellow */
  --ink: #161616;         /* near-black text */
  --muted: #5a5440;       /* dim text, still readable on yellow/cream */
  --card: #fffdf3;        /* cream "page" */
  --border: #161616;      /* bold black rules */
  --accent: #0b57d0;      /* link blue (readable on cream) */
  --ok: #137333;
  --err: #b3261e;
  --go: #1f8a4c;          /* the "Make" CTA — go green, unique on the yellow/black theme */
  --go-dark: #19743f;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.card {
  max-width: 560px;
  margin: 6vh auto;
  padding: 2rem 2.25rem;
  background: var(--card);
  border: 3px solid var(--border);
  border-radius: 6px;
  box-shadow: 8px 8px 0 var(--border);   /* chunky directory shadow */
}
.card.wide { max-width: 860px; }
h1 {
  margin: 0 0 .25rem;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.5px;
}
.slogan { margin: .1rem 0 0; font-weight: 700; font-style: italic; color: var(--muted); font-size: .95rem; }
/* Go-Go peeks in from the very top-right, outside the card. */
.gogo-fixed {
  position: fixed; z-index: 40;
  /* --gl-scroll (set on scroll) lets Go-Go drift DOWN as you scroll, bumping the
     domain list below him. `top` is independent of his bob animation (transform). */
  top: calc(42px + var(--gl-scroll, 0px));
  /* Centered in the left gutter: card is 560px & centered, so the gutter spans
     [0, 25vw−280]; its midpoint is 25vw−140; minus half the 104px mascot. */
  left: max(10px, calc(25vw - 192px));
  width: 104px; height: auto;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.18));
  animation: gogo-bob 6s ease-in-out infinite;
  /* Draggable — grab & fling him out of the way (handy on mobile). */
  pointer-events: auto; cursor: grab; touch-action: none;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
@keyframes gogo-bob {
  0%   { transform: translate(0, 0) rotate(-2.5deg); }
  25%  { transform: translate(3px, -6px) rotate(0.5deg); }
  50%  { transform: translate(1px, -10px) rotate(2.5deg); }
  75%  { transform: translate(-3px, -5px) rotate(0.5deg); }
  100% { transform: translate(0, 0) rotate(-2.5deg); }
}
@media (prefers-reduced-motion: reduce) { .gogo-fixed { animation: none; } }
/* Not enough gutter for a centered 104px mascot → tuck a small one in the corner. */
@media (max-width: 820px) { .gogo-fixed { width: 64px; top: 40px; left: 6px; } }
/* "weeeeee!" speech bubble shown when Go-Go is flung fast. */
.gl-weee {
  position: fixed; z-index: 41; pointer-events: none;
  transform: translate(-50%, -100%);
  background: var(--card); color: var(--ink);
  border: 2px solid var(--border); border-radius: 11px;
  padding: 2px 9px; font-weight: 800; font-size: .85rem; white-space: nowrap;
  box-shadow: 2px 2px 0 var(--border);
  animation: gl-weee-pop .18s ease-out;
  transition: opacity .3s ease;
}
.gl-weee::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--border); border-bottom: 0;
}
.gl-weee.out { opacity: 0; }
@keyframes gl-weee-pop { from { opacity: 0; transform: translate(-50%, -90%) scale(.6); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .gl-weee { animation: none; } }

.gogo-fixed.dragging { cursor: grabbing; animation: none !important; } /* hold still while grabbed */
.gogo-fixed.dragged { animation: gogo-float 8.5s ease-in-out infinite; } /* slow weightless drift where dropped */
@keyframes gogo-float {
  0%   { transform: translate(0, 0) rotate(-3deg); }
  20%  { transform: translate(6px, -7px) rotate(0deg); }
  40%  { transform: translate(3px, -13px) rotate(3deg); }
  60%  { transform: translate(-5px, -9px) rotate(1deg); }
  80%  { transform: translate(-4px, -3px) rotate(-2.5deg); }
  100% { transform: translate(0, 0) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) { .gogo-fixed.dragged { animation: none; } }

/* Soft branding: the active short domains, stacked under Go-Go in the gutter.
   (104px mascot at top:42 renders ~144px tall, so the list starts ~196px.) */
.active-domains {
  position: fixed; top: 196px; z-index: 39;
  left: max(10px, calc(25vw - 192px)); width: 104px;
  text-align: center; line-height: 1.85;
  /* Go-Go "bumps" the links: he shifts immediately, they spring after him. */
  transform: translateY(var(--gl-scroll, 0px));
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.active-domains a {
  display: block; white-space: nowrap; text-decoration: none;
  color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .3px;
  transition: color .15s ease;
}
.active-domains a:first-child { color: var(--ink); font-weight: 800; font-size: .82rem; }
.active-domains a:hover { color: var(--accent); }
/* No comfortable gutter below ~980px → hide the soft branding (mascot stays). */
@media (max-width: 980px) { .active-domains { display: none; } }
[dir="rtl"] .active-domains { left: auto; right: max(10px, calc(25vw - 192px)); }

/* The right-gutter "idea cyclone": localized slug ideas swirling around a
   vertical axis. Contained to the gutter; edges fade so the swirl dissolves
   gracefully rather than clipping. Decorative + non-interactive. */
.idea-cyclone {
  position: fixed; z-index: 38; pointer-events: none;
  top: 76px; bottom: 36px;
  /* Span the right gutter: from just past the card to near the viewport edge. */
  left: calc(50% + 290px); right: 10px;
  overflow: hidden;
  /* Single-axis vertical fade only — robust everywhere (no mask-compositing). */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.idea-cyclone .idea {
  position: absolute; left: 50%; white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700; font-size: .72rem; color: var(--muted);
  animation: gl-cyclone linear infinite;
  will-change: transform, opacity;
}
@keyframes gl-cyclone {
  0%   { transform: translate(calc(-50% - var(--amp, 20px)), 0) rotate(-8deg); opacity: .55; }
  25%  { transform: translate(-50%, -9px) rotate(3deg); opacity: .95; }
  50%  { transform: translate(calc(-50% + var(--amp, 20px)), 3px) rotate(8deg); opacity: .68; }
  75%  { transform: translate(-50%, 9px) rotate(3deg); opacity: .95; }
  100% { transform: translate(calc(-50% - var(--amp, 20px)), 0) rotate(-8deg); opacity: .55; }
}
/* Left-gutter variant (e.g. the 404 tornado on the "doesn't exist yet" page). */
.idea-cyclone.left { left: 10px; right: calc(50% + 290px); }
.idea-cyclone[data-cyclone="404"] .idea { color: var(--err); }
/* Needs a real gutter to live in (≈150px+ at 900px viewport). */
@media (max-width: 900px) { .idea-cyclone { display: none; } }
@media (prefers-reduced-motion: reduce) { .idea-cyclone .idea { animation: none; opacity: .8; } }
[dir="rtl"] .idea-cyclone { left: 10px; right: calc(50% + 290px); }
[dir="rtl"] .idea-cyclone.left { left: calc(50% + 290px); right: 10px; }
/* Sign-in lives in its own neat box. */
.signin-box {
  margin-top: 1.5rem; padding: 1rem 1.1rem;
  border: 2px solid var(--border); border-radius: 6px; background: #fffef6;
}
.signin-box strong { display: block; margin-bottom: .6rem; }
.signin-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.signin-row button { flex: 1 1 0; min-width: 150px; margin: 0; }
/* "Did you mean?" suggestions on the landing page */
.suggest { margin-top: 1.25rem; padding: .8rem 1rem; border: 2px dashed var(--border); border-radius: 6px; }
.suggest-title { margin: 0 0 .4rem; font-weight: 700; font-size: .9rem; }
.suggest-list { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.suggest-list a { font-family: ui-monospace, monospace; font-weight: 700; }
/* /my walkthrough */
.walk { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 2px solid var(--border); border-radius: 6px; background: #fffef6; }
.walk h2 { margin-top: 0; }
.walk-steps { margin: .5rem 0 0; padding-left: 1.2rem; }
.walk-steps li { margin: .35rem 0; }
.walk-cta { margin: .75rem 0 0; font-weight: 800; }
.go-btn {
  display: inline-block; margin-top: .5rem; padding: .7rem 1.4rem;
  background: var(--ink); color: var(--bg) !important; border: 2px solid var(--border);
  border-radius: 5px; font-weight: 800; text-decoration: none;
}
/* Go-Go article (/gogo) */
.gogo-hero { width: 150px; height: auto; display: block; margin: 0 auto .25rem; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.18)); }
.infobox { border: 2px solid var(--border); border-radius: 6px; background: #fffef6; padding: .8rem 1rem; margin: 1.25rem 0; }
.infobox h2 { margin: 0 0 .5rem; font-size: 1rem; }
.infobox dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .9rem; }
.infobox dt { font-weight: 800; }
.infobox dd { margin: 0; color: var(--muted); }
@media (min-width: 700px) { .infobox { float: right; width: 280px; margin: 0 0 1rem 1.25rem; } }
h2 { font-size: 1.05rem; font-weight: 700; margin-top: 2rem; }
.sub { color: var(--muted); margin-top: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
#landingTitle .mono { color: var(--accent); }
label { display: block; margin: 1rem 0 .25rem; font-size: .9rem; font-weight: 700; }
.hint { font-weight: 400; color: var(--muted); }
input, select, textarea {
  width: 100%;
  padding: .7rem .8rem;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 5px;
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--bg); border-color: var(--border); }
textarea { resize: vertical; }
.note {
  margin: .4rem 0 0;
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.4;
  font-weight: 400;
}
.note.ttl { color: var(--muted); }

/* Test-URL flow: a link under the destination input, a "tested" badge, and a
   gated Make button until the destination has been opened/tested. */
.test-row { display: flex; align-items: center; gap: .6rem; margin-top: .35rem; }
#testUrl { font-weight: 600; text-decoration: none; }
#testUrl:hover { text-decoration: underline; }
.test-ok { color: var(--ok); font-weight: 700; font-size: .74rem; }
/* Bold prompt shown directly under the Test URL link (the 👆 points up at it). */
.test-hint { margin: .3rem 0 0; font-weight: 800; color: var(--err); font-size: .8rem; }
button.needs-test { opacity: .5; }
/* Destination thumbnail preview (gated). Skeleton + spinner while it renders,
   then a framed screenshot. */
.thumb-wrap { margin-top: .55rem; max-width: 320px; }
.thumb-wrap img {
  display: none; width: 100%; height: auto;
  border: 2px solid var(--border); border-radius: 6px; box-shadow: 3px 3px 0 var(--border);
  background: var(--card);
}
.thumb-wrap.ready img { display: block; }
.thumb-wrap.loading {
  position: relative; height: 180px;
  border: 2px dashed var(--border); border-radius: 6px; background: var(--card);
}
.thumb-wrap.loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px;
  border: 3px solid rgba(0,0,0,.15); border-top-color: var(--ink); border-radius: 50%;
  animation: gl-spin .8s linear infinite;
}
@keyframes gl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .thumb-wrap.loading::after { animation: none; } }
/* Skip Testing: a red escape hatch shown above Custom link while testing is
   pending (its label previews the destination it would skip). */
#bypassBtn { background: var(--err); border-color: var(--err); color: #fff; }
#bypassBtn:hover { background: #8f1e17; }
#bypassBtn .mono { font-weight: 600; opacity: .9; }
/* "[Everyone ▾] can see this." — compact, reads as a sentence; appears under Make. */
.access-row { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .7rem; font-size: .8rem; }
.access-row select {
  margin: 0; padding: .1rem 1.15rem .1rem .4rem; font: inherit; font-size: .8rem; font-weight: 700;
  color: var(--ink); background: var(--card); border: 2px solid var(--border); border-radius: 5px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right .5rem center, right .35rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.access-row select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Beginner guide: a bobbing arrow that points at the next step; click → explainer. */
.gl-tutor {
  position: fixed; z-index: 44; margin: 0; padding: 1px 3px; border: none; background: none;
  cursor: pointer; font-size: 1.5rem; line-height: 1;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.25));
  animation: gl-tutor-bob 1.1s ease-in-out infinite;
}
@keyframes gl-tutor-bob { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
[dir="rtl"] .gl-tutor { animation-name: gl-tutor-bob-rtl; }
@keyframes gl-tutor-bob-rtl { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
/* Zoom ("fly") when parking/un-parking; roosting in the corner when parked. */
.gl-tutor.flying { transition: left .45s cubic-bezier(.34, 1.5, .5, 1), top .45s cubic-bezier(.34, 1.5, .5, 1); }
.gl-tutor.parked {
  animation: none; opacity: 1; transform: scale(.92);
  background: var(--ink); border-radius: 50%; padding: 4px 5px;
  box-shadow: 2px 2px 0 rgba(0,0,0,.3);
  transition: left .45s cubic-bezier(.34, 1.5, .5, 1), top .45s cubic-bezier(.34, 1.5, .5, 1), background .15s ease, transform .15s ease;
}
.gl-tutor.parked:hover { background: #5a5a5a; transform: scale(1); }
.gl-tutor-pop {
  position: fixed; z-index: 47; max-width: 240px;
  background: var(--ink); color: var(--bg); border-radius: 8px; padding: .6rem .7rem;
  font-size: .8rem; line-height: 1.4; box-shadow: 3px 3px 0 rgba(0,0,0,.3);
}
.gl-tutor-pop p { margin: 0 0 .5rem; }
.gl-tutor-actions { text-align: right; }
.gl-tutor-pop button {
  margin: 0; padding: .2rem .65rem; font-size: .75rem; font-weight: 700;
  background: var(--bg); color: var(--ink); border: none; border-radius: 5px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .gl-tutor { animation: none; } }

/* Site-wide copyright footer (injected on every page). */
.site-copyright {
  margin: 1.75rem auto 1.1rem; padding: 0 1rem;
  text-align: center; font-size: .7rem; line-height: 1.4; color: var(--muted); opacity: .85;
}
.shake {
  display: inline-block;
  animation: gl-shake .4s ease;
  color: var(--accent);
}
@keyframes gl-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
button {
  margin-top: 1.1rem;
  padding: .7rem 1.2rem;
  background: var(--ink);
  color: var(--bg);
  border: 2px solid var(--border);
  border-radius: 5px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}
button:hover { background: #000; }
/* The primary "Make /…" CTA gets its own go-green so it pops on the page. */
#createForm button[type="submit"], #claimForm button[type="submit"] { background: var(--go); color: var(--card); }
#createForm button[type="submit"]:hover, #claimForm button[type="submit"]:hover { background: var(--go-dark); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ghost {
  background: var(--card);
  color: var(--ink);
  margin: 0 .4rem .4rem 0;
  font-weight: 700;
}
button.ghost:hover { background: #fff; }
.authbar { margin: 1rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.who { color: var(--muted); font-size: .9rem; margin-left: .25rem; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin-top: 1rem; }
.check input { width: auto; }
.cf-turnstile { margin-top: 1rem; }
.msg { min-height: 1.2em; margin: .75rem 0 0; font-size: .9rem; }
a, .msg a, .links a, .foot.disclaimer a { color: var(--accent); }
.links { list-style: none; padding: 0; }
.links li { padding: .55rem 0; border-bottom: 2px solid var(--border); font-size: .92rem; }
.links a { text-decoration: none; font-family: ui-monospace, monospace; font-weight: 700; }
.links .dest { color: var(--muted); word-break: break-all; }
.links .meta { color: var(--muted); font-size: .8rem; }
.links .actions { display: inline-flex; gap: .4rem; margin-top: .35rem; }
.links .empty { color: var(--muted); border: none; }
.mini {
  margin: 0; padding: .25rem .6rem; font-size: .8rem; cursor: pointer;
  background: var(--card); color: var(--ink) !important; border: 2px solid var(--border);
  font-weight: 700; border-radius: 5px; text-decoration: none; display: inline-block; line-height: 1.5;
}
.mini.danger { color: var(--err) !important; border-color: var(--err); }
.mini:hover { background: #fff; }
.confirm-qr { display: flex; align-items: center; gap: .6rem; margin: .75rem 0; }
.foot { margin-top: 1.6rem; font-size: .85rem; }
.foot a { color: var(--muted); }
.foot.disclaimer { color: var(--muted); line-height: 1.5; border-top: 2px solid var(--border); padding-top: 1rem; }
ul.terms { color: var(--ink); padding-left: 1.1rem; }
ul.terms li { margin: .3rem 0; }
.hidden { display: none; }
/* Language switcher */
/* Fixed top header bar that holds the language controls so they NEVER overlap
   the content. It is opaque, so anything scrolling up passes cleanly beneath it,
   and <body> reserves its height with padding-top (below) so content starts
   under it. */
#gl-langbar {
  position: sticky; top: 0; z-index: 45; /* below modals (50); sticky = locks in
    place in flow, content scrolls beneath leaving a clean gap (no crush). */
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  height: 34px; padding: 0 8px;
  background: var(--bg); border-bottom: 2px solid var(--border);
  transition: box-shadow .2s ease;
}
#gl-langbar.scrolled { box-shadow: 0 7px 16px -7px rgba(22, 22, 22, .5); }
#gl-lang-switch { flex: 0 0 auto; }
#gl-lang-select {
  margin: 0; padding: .15rem 1.3rem .15rem .5rem; font-size: .76rem; font-weight: 700;
  font-family: inherit; max-width: 9rem;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--border); border-radius: 5px; cursor: pointer;
  /* Custom caret so the control reads as a picker without native chrome. */
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: right .5rem center, right .35rem center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
#gl-lang-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Quick-pick languages: a single row that scrolls horizontally if it can't fit,
   so it always stays inside the bar and never grows down into the content. */
#gl-lang-quick {
  flex: 0 1 auto; min-width: 0; overflow-x: auto;
  display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
  scrollbar-width: none; /* hide the scrollbar in the slim bar (Firefox) */
  /* Frame the scrollable strip so the cut-off edge is clean and it reads as its
     own asset, distinct from the dropdown beside it. */
  border: 1.5px solid var(--border); border-radius: 6px; padding: 2px 4px;
}
#gl-lang-quick::-webkit-scrollbar { display: none; }
#gl-lang-quick button {
  margin: 0; padding: .1rem .45rem; white-space: nowrap; flex: 0 0 auto;
  font-size: .72rem; font-weight: 700; font-family: inherit; line-height: 1.25;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--border); border-radius: 5px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
#gl-lang-quick button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#gl-lang-quick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---- Right-to-left languages (Arabic, Persian, Hebrew) ---- */
/* dir=rtl on <html> mirrors the bar's flex layout automatically; only the
   dropdown caret and the floating mascot need an explicit side flip. */
[dir="rtl"] #gl-lang-select {
  padding: .15rem .5rem .15rem 1.3rem;
  background-position: left .5rem center, left .35rem center;
}
[dir="rtl"] .gogo-fixed { left: auto; right: max(10px, calc(25vw - 192px)); transform: scaleX(-1); animation: gogo-bob-rtl 6s ease-in-out infinite; }
@keyframes gogo-bob-rtl {
  0%   { transform: scaleX(-1) translate(0, 0) rotate(2.5deg); }
  25%  { transform: scaleX(-1) translate(-3px, -6px) rotate(-0.5deg); }
  50%  { transform: scaleX(-1) translate(-1px, -10px) rotate(-2.5deg); }
  75%  { transform: scaleX(-1) translate(3px, -5px) rotate(-0.5deg); }
  100% { transform: scaleX(-1) translate(0, 0) rotate(2.5deg); }
}
@media (max-width: 820px) { [dir="rtl"] .gogo-fixed { left: auto; right: 6px; } }
/* Confirmation popup */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal-box {
  background: var(--card); border: 3px solid var(--border); border-radius: 6px;
  box-shadow: 8px 8px 0 var(--border); padding: 1.5rem 1.75rem; max-width: 440px; width: 100%;
}
.modal-box h2 { margin-top: 0; }
.modal-box .confirm-link { word-break: break-all; }
.modal-actions { display: flex; gap: .5rem; margin-top: 1.1rem; align-items: center; justify-content: flex-end; }
.modal-actions button { margin: 0; }

/* Subtle poet line at the very bottom — quiet, non-intrusive. */
.quote {
  max-width: 560px;
  margin: 2.5rem auto 1.25rem;
  padding: 0 1rem;
  text-align: center;
  font-size: .72rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--muted);
  opacity: .75;
}