/* ==========================================================================
   arkodeep.com base layer: reset, typography, layout, components.
   These are the real site components. The design guide renders them live
   rather than describing them, so the guide cannot drift from the site.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
svg { width: 1em; height: 1em; fill: currentColor; }

a { color: inherit; text-decoration: none; }

:where(a, button, [tabindex]):focus-visible {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
  border-radius: var(--radius-sm);
}

/* --- layout ---------------------------------------------------------------
   One decision: a 672px column, 16px gutters, at every breakpoint. Sections
   are separated by 40px of whitespace and heading weight, never by a colour
   band and never by 80 to 120px of padding. */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1rem;
}

.stack > * + * { margin-top: 2.5rem; }
.stack-sm > * + * { margin-top: 0.5rem; }
.stack-md > * + * { margin-top: 1rem; }

/* --- type ramp ------------------------------------------------------------
   Three steps of text colour, and no more:
   1 foreground  2 secondary-text  3 muted-foreground */

.t-secondary { color: var(--secondary-text); }
.t-muted { color: var(--muted-foreground); }

.h-page { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); }
.h-section { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 700; }
.h-item { font-size: var(--text-lg); line-height: 1.25; font-weight: 600; }
.h-card { font-size: var(--text-base); line-height: 1.25; font-weight: 600; }

.t-body { font-size: var(--text-sm); line-height: var(--lh-sm); }
.t-meta { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--muted-foreground); }

/* Uppercase appears exactly once in this system: footer micro-labels. */
.t-label {
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
}

.t-mono { font-family: var(--font-mono); font-size: 0.8125rem; }
mark { background: var(--highlight); color: inherit; border-radius: 2px; padding: 0 0.15em; }

/* --- header ---------------------------------------------------------------
   No logo, no wordmark, no bottom border. Separation comes from the blur. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: color-mix(in srgb, var(--background) 95%, transparent);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: color-mix(in srgb, var(--background) 60%, transparent);
    backdrop-filter: blur(12px);
  }
}
.site-header .container {
  display: flex;
  height: var(--header-h);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-nav { display: flex; align-items: center; gap: 1.5rem; font-size: var(--text-sm); font-weight: 500; }
.site-nav a { color: var(--secondary-text); transition: color var(--dur-fast) var(--ease-in-out); }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--primary); }

/* --- buttons --------------------------------------------------------------
   Outline is the default action. Exactly one filled button is allowed on the
   whole site, on the booking CTA. A second filled button turns this from a
   restrained document into an ordinary marketing page. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2rem;
  padding-inline: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease-in-out),
              color var(--dur-fast) var(--ease-in-out),
              border-color var(--dur-fast) var(--ease-in-out);
}
.btn:hover { background: var(--muted); color: var(--foreground); }
.btn:active { transform: scale(0.98); }
.btn svg { width: 1rem; height: 1rem; }

.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--muted); }

.btn--primary {
  border-color: transparent;
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn--primary:hover { background: color-mix(in srgb, var(--primary) 88%, var(--background)); color: var(--primary-foreground); }

.btn--icon { width: 1.75rem; height: 1.75rem; padding: 0; border-radius: min(var(--radius-md), 10px); }
.btn--icon svg { width: 0.875rem; height: 0.875rem; }

/* --- availability pill ----------------------------------------------------
   Answers the first question a visitor has, which is whether you are available.
   "Taking new clients" or "Booked to March". */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--available-border);
  border-radius: var(--radius-md);
  background: var(--available-fill);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
}
.pill__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--available);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse { 50% { opacity: 0.5; } }

/* --- list row -------------------------------------------------------------
   No border, no card. Separation is 16px of padding. Stacks on mobile, becomes
   title-left / meta-right at 640px. */

.row { padding-block: 1rem; }
.row > a { display: flex; flex-direction: column; gap: 0.25rem; }
.row__title { transition: color var(--dur-fast) var(--ease-in-out); }
.row > a:hover .row__title { color: var(--primary); }
.row__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--secondary-text); }

@media (min-width: 40rem) {
  .row > a { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; }
  .row__meta { flex-shrink: 0; text-align: right; min-width: 8.75rem; }
}

/* --- link card ------------------------------------------------------------
   The arrow is invisible until hover, then fades in and nudges 2px up-right.
   This is the signature micro-interaction. Keep it. */

.card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  transition: background var(--dur-fast) var(--ease-in-out);
}
.card-link:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }
.card-link__desc { font-size: var(--text-sm); color: var(--secondary-text); }
.card-link__arrow {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card-link:hover .card-link__arrow { opacity: 1; transform: translate(2px, -2px); }

/* --- content card ---------------------------------------------------------
   Border plus a 10 percent foreground ring. This is the only elevation in the
   system. There are no drop shadows. */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent);
  padding: 1rem;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding-inline: 0.25rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--foreground) 5%, transparent);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
:root[data-theme='dark'] kbd { box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.1); }

/* --- footer ---------------------------------------------------------------
   The footer carries far more links than the header, which is what keeps the
   top nav down to four items. */

.site-footer {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 30%, transparent);
  margin-top: 4rem;
}
.site-footer .container { padding-block: 3rem; }
.footer-cols { display: flex; flex-direction: column; gap: 2.5rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 0.5rem; }
.footer-links a { font-size: var(--text-sm); color: var(--secondary-text); transition: color var(--dur-fast) var(--ease-in-out); }
.footer-links a:hover { color: var(--primary); }
.footer-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; list-style: none; padding: 0; }
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  color: var(--muted-foreground);
  transition: background var(--dur-fast) var(--ease-in-out), color var(--dur-fast) var(--ease-in-out);
}
.footer-social a:hover { background: var(--muted); color: var(--primary); }
.footer-social svg { width: 1.125rem; height: 1.125rem; }
.footer-bottom { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted-foreground); }

@media (min-width: 40rem) {
  .footer-cols { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 2rem; }
}

/* --- bottom fade bar ------------------------------------------------------
   Softens content scrolling off the bottom. The mask fades the blur itself out,
   which is why it never looks like a hard band. */

.fade-bar {
  pointer-events: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  height: 60px;
  user-select: none;
  background: linear-gradient(to top, var(--background), transparent);
  backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to top, black 50%, transparent);
  mask-image: linear-gradient(to top, black 50%, transparent);
}

/* --- motion ---------------------------------------------------------------
   One entrance animation on everything, staggered 50ms. Nothing else moves on
   its own. */

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.in-view { animation: var(--dur-slow) var(--ease-out) both fade-in-up; }

/* Ship this on every page. Do not weaken it. */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  * { transform: none !important; }
  .js .reveal { opacity: 1 !important; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- progress bar ---------------------------------------------------------
   Added for the giving scoreboard. No new colour: the fill is --foreground at
   low opacity, so it reads as ink rather than as a status colour. */

.progress {
  margin-top: 0.75rem;
  height: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--muted);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--foreground) 55%, transparent);
}

/* --- giving row ----------------------------------------------------------- */

.giving-row { display: flex; flex-direction: column; gap: 0.5rem; }
.giving-row__amount {
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 40rem) {
  .giving-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .giving-row__amount { text-align: right; }
}

/* --- long form ------------------------------------------------------------
   The one place larger vertical padding is allowed. The reading column stays
   at 672px; only the padding changes. */

.article { padding-block: 4rem 2rem; }
.article__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.15;
  font-weight: 400;
}
@media (min-width: 64rem) {
  .article__title { font-size: var(--text-5xl); line-height: 1.05; }
}

.rule { border: 0; border-top: 1px solid var(--border); margin-block: 2rem; }

/* Body copy in an article is 16px, not the 14px used across the rest of the
   site. Everything else scales off that one variable. */
.prose { --blog-font-size: 1rem; font-size: var(--blog-font-size); line-height: 1.7; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: calc(var(--blog-font-size) * 1.875); line-height: 1.2; font-weight: 700; letter-spacing: var(--tracking-tight); margin-top: 2.5rem; }
.prose h3 { font-size: calc(var(--blog-font-size) * 1.5); line-height: 1.25; font-weight: 600; margin-top: 2rem; }
.prose h4 { font-size: calc(var(--blog-font-size) * 1.25); font-weight: 600; margin-top: 1.5rem; }
.prose a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--secondary-text); }
.prose a:hover { text-decoration-color: var(--foreground); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: var(--muted-foreground); }
.prose blockquote {
  border-left: 2px solid var(--border);
  padding-left: 1rem;
  color: var(--secondary-text);
}
.prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--muted);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.3em;
}
.prose pre {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1rem;
  font-size: 0.8125rem;
  color: var(--foreground);
}
.prose pre code { background: none; padding: 0; font-size: inherit; }
.prose img { border-radius: var(--radius-xl); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin-block: 2rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--border); }
.prose th { font-weight: 600; }

/* The theme toggle icons live here now that every page has the control. */
.theme-toggle .icon-moon { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-sun { display: none; }
:root[data-theme='dark'] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme='light']) .theme-toggle .icon-moon { display: block; }
}

/* --- social icon row ------------------------------------------------------
   Icons inherit currentColor, so they pick up the hover state for free. */

.social-row { display: flex; flex-wrap: wrap; gap: 0.125rem; margin-top: 1rem; }
.social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--secondary-text);
  transition: color var(--dur-fast) var(--ease-in-out);
}
.social-row a:hover { color: var(--primary); }
.social-row svg { width: 1.125rem; height: 1.125rem; }

/* --- experience row -------------------------------------------------------
   Title left, dates and location right. Stacks on mobile, and the location
   swaps from short to full form at 768px where there is room for it. */

.exp-row { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 1rem; }
.exp-row__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.exp-row__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.exp-row__link:hover { text-decoration-color: var(--foreground); }
.exp-row__meta { flex-shrink: 0; }
.exp-row__loc-full { display: none; }

@media (min-width: 40rem) {
  .exp-row { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; }
  .exp-row__meta { text-align: right; min-width: 5.5rem; }
}
@media (min-width: 48rem) {
  .exp-row__meta { min-width: 8.75rem; }
  .exp-row__loc-short { display: none; }
  .exp-row__loc-full { display: inline; }
}

/* --- show more ------------------------------------------------------------
   Rows past the visible count are collapsed by site.js, which also unhides the
   button. With JavaScript off, every row shows and the button stays hidden, so
   nothing is ever unreachable. */

.exp-item[data-extra][hidden] { display: none; }
.exp-more { display: flex; justify-content: center; margin-top: 1rem; }
/* A class-level `display` beats the UA's [hidden] rule, so restate it. Without
   this the button shows with JavaScript off, where it does nothing. */
.exp-more[hidden] { display: none; }
.exp-more__open { display: none; }
.exp-more button[aria-expanded='true'] .exp-more__closed { display: none; }
.exp-more button[aria-expanded='true'] .exp-more__open { display: inline; }

/* --- page and section scaffolding -----------------------------------------
   Added when the pages were extracted into components. These replace the
   inline styles that used to be scattered through the markup, which is what
   let an inline rule silently outrank a media query. */

.page { padding-top: 2rem; }
.page__intro { margin-top: 0.5rem; max-width: 34rem; }
.page__body { margin-top: 2rem; }

.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.section__body { margin-top: 0.5rem; }
.section__actions { margin-top: 1rem; }
.section__empty { padding-block: 1rem; }

.site-header__actions { display: flex; align-items: center; gap: 0.5rem; }

.strong-ink { font-weight: 600; color: var(--foreground); }

/* --- identity ------------------------------------------------------------- */

.identity__head { display: flex; gap: 1rem; align-items: center; }
.identity__portrait {
  width: 6rem;
  height: 6rem;
  border-radius: 999px;
  background: var(--portrait-backdrop);
  flex-shrink: 0;
  object-fit: cover;
}
.identity__name { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 700; }
.identity__role { font-size: var(--text-base); color: var(--secondary-text); }
.identity__bio { font-size: var(--text-sm); line-height: var(--lh-sm); margin-top: 1rem; max-width: 34rem; }
.identity__proof { margin-top: 0.375rem; }
.identity__proof-value { font-weight: 600; color: var(--foreground); }
a.identity__proof-value { text-decoration: underline; text-underline-offset: 3px; }
.identity__availability { margin-top: 0.75rem; }

@media (min-width: 40rem) {
  .identity__name { font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tracking-tight); }
}

/* --- card link ------------------------------------------------------------ */

.card-link__title { display: block; font-size: var(--text-base); line-height: 1.25; font-weight: 600; }

/* --- giving --------------------------------------------------------------- */

.progress-card { margin-top: 1rem; }
.progress-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.progress-card__total { font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-tight); }
.progress-card__pct { margin-top: 0.5rem; }

.giving-row__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.giving-row__link:hover { text-decoration-color: var(--foreground); }
.giving-row__note { margin-top: 0.125rem; }
.giving-row__date { margin-top: 0.25rem; }

/* --- article -------------------------------------------------------------- */

.article__body { margin-top: 1.5rem; }
.article__meta { margin-top: 0.75rem; }

/* --- age counter ----------------------------------------------------------
   Sits under the role line. The surrounding words stay in the secondary grey and
   only the number takes the primary ink, so the figure is the one thing the eye
   lands on. Tabular numerals stop the line jittering as digits tick over. */

.identity__age { margin-top: 0.25rem; }
.identity__age-value {
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}

/* Nickname sits inside the h1 so the heading carries both the full and short
   name, but drops to the secondary grey and to body weight so it reads as an
   aside rather than as part of the name. */
.identity__nickname {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--secondary-text);
  margin-left: 0.5rem;
  white-space: nowrap;
}

/* --- about ----------------------------------------------------------------
   The story block above Experience. No heading, so the rhythm has to come from
   the paragraphs themselves. Slightly looser leading than a list row, still the
   14px body size the rest of the site uses. */

.prose-tight { font-size: var(--text-sm); line-height: 1.65; color: var(--secondary-text); max-width: 34rem; }
.prose-tight > * + * { margin-top: 0.875rem; }
.prose-tight strong { font-weight: 600; color: var(--foreground); }
.prose-tight a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border); }
.prose-tight a:hover { text-decoration-color: var(--foreground); }

/* --- inline notes ---------------------------------------------------------
   A marked word plus one shared popup. The marker is a dotted underline rather
   than a highlight block, so a paragraph with several notes still reads as
   prose. Colour comes from the text, not from a new accent. */

.note {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--foreground) 45%, transparent);
  cursor: help;
  border-radius: 2px;
}
.note:hover,
.note[aria-expanded='true'] {
  text-decoration-color: var(--foreground);
  background: color-mix(in srgb, var(--foreground) 6%, transparent);
}
.note:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}

.note-pop {
  position: absolute;
  z-index: 60;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  /* The system has no drop shadows. A ring is how everything else sits above
     the page, so the popup uses the same one as .card. */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.note-pop[data-open='true'] { opacity: 1; transform: none; pointer-events: auto; }
.note-pop[hidden] { display: none; }

.note-pop__text {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--secondary-text);
}
.note-pop__text:empty { display: none; }

.note-pop__media:empty { display: none; }
.note-pop__media {
  margin-bottom: 0.625rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  line-height: 0;
}
.note-pop__media img,
.note-pop__media video {
  width: 100%;
  height: auto;
  display: block;
}

/* Small square rotated into a diamond, so the popup reads as attached to the
   word rather than floating near it. */
.note-pop__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
  left: var(--arrow-x, 50%);
  margin-left: -4px;
}
.note-pop[data-placement='top'] .note-pop__arrow { bottom: -5px; }
.note-pop[data-placement='bottom'] .note-pop__arrow {
  top: -5px;
  transform: rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .note-pop { transition: none; }
}
.note-pop__text a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }