@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  b {
    @apply font-bold;
  }
}

/* Стили для предотвращения множественных кликов */
.turbo-loading {
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.turbo-loading * {
  cursor: wait !important;
}

/* Исключения для языковых ссылок и элементов с bypass */
.turbo-loading .language-link,
.turbo-loading [data-bypass-click-protection="true"] {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

/* Индикация загрузки для ссылок */
a[data-turbo="true"]:active,
a[data-turbo]:active {
  opacity: 0.7;
  pointer-events: none;
}

/* Предотвращение двойных кликов на кнопках и ссылках */
a,
button {
  transition: opacity 0.1s ease;
}

a:active,
button:active {
  transform: scale(0.98);
  opacity: 0.8;
}

/* Исключения для языковых ссылок */
a.language-link:active,
a[data-bypass-click-protection="true"]:active {
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Asset imports */
@import "../fonts";
@import "materialdesignicons.css";
@import "./plyr.css";
@import "flag-icons-custom";

/* ------------------------------------------------------------------ */
/* Onest (body) + Geologica (display) — self-hosted Google Fonts       */
/* Variable-font delivery: one woff2 per subset serves weights 400-700 */
/* ------------------------------------------------------------------ */

/* Onest — Cyrillic subset */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/onest-cyrillic-d152267f.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Onest — Latin subset */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/onest-latin-a510f24c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geologica — Cyrillic subset */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/geologica-cyrillic-d7431eb0.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geologica — Latin subset */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/assets/geologica-latin-0dde962c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ */
/* Type tokens — landing page scale                                    */
/* Fluid clamp() for marketing headings; fixed rem for body.           */
/* Base body 18px (1.125rem) on desktop, 17px on mobile — 40+ audience */
/* ------------------------------------------------------------------ */
:root {
  --text-caption:    0.875rem;                              /* 14px */
  --text-small:      0.9375rem;                             /* 15px */
  --text-body:       clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);   /* 17→18 */
  --text-lead:       clamp(1.1875rem, 1rem + 0.4vw, 1.25rem);    /* 19→20 */
  --text-h5:         clamp(1.25rem,  1rem + 0.6vw, 1.5rem);      /* 20→24 */
  --text-h4:         clamp(1.5rem,   1rem + 1vw,   1.875rem);    /* 24→30 */
  --text-h3:         clamp(1.75rem,  1rem + 1.6vw, 2.25rem);     /* 28→36 */
  --text-h2:         clamp(2rem,     1rem + 2.4vw, 3rem);        /* 32→48 */
  --text-h1:         clamp(2.25rem,  1rem + 3.6vw, 3.75rem);     /* 36→60 */
  --text-display:    clamp(2.75rem,  1rem + 5vw,   4.5rem);      /* 44→72 */

  --leading-tight:   1.15;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight: -0.015em;
  --tracking-snug:  -0.005em;
  --tracking-wide:  0.02em;
}

/* ------------------------------------------------------------------ */
/* Color tokens — OKLCH                                                */
/*                                                                     */
/* Brand anchor: hue 255° (oil-slate warmed indigo, not violet).       */
/* Neutrals are tinted toward brand hue (chroma 0.005-0.02) — removes  */
/* the "default Tailwind grey" character without looking colored.      */
/* Accent: muted ochre (hue 70°, chroma 0.11) — used sparingly for     */
/* focus rings, editorial underlines, "recommended plan" markers.      */
/*                                                                     */
/* Light and dark are BOTH primary — dark is not a shade-inverted      */
/* afterthought. Dark-mode brand uses a lighter step (brand-400) to    */
/* keep AA contrast on the deep oil-slate surface.                     */
/* ------------------------------------------------------------------ */
:root {
  /* Brand (oil-slate warmed indigo) */
  --c-brand-50:   oklch(0.98 0.010 255);
  --c-brand-100:  oklch(0.95 0.025 255);
  --c-brand-200:  oklch(0.88 0.055 255);
  --c-brand-300:  oklch(0.78 0.095 255);
  --c-brand-400:  oklch(0.67 0.140 255);
  --c-brand-500:  oklch(0.55 0.165 255);  /* anchor */
  --c-brand-600:  oklch(0.47 0.165 255);  /* primary CTA */
  --c-brand-700:  oklch(0.40 0.150 255);  /* CTA hover */
  --c-brand-800:  oklch(0.32 0.125 255);
  --c-brand-900:  oklch(0.23 0.090 255);

  /* Ink (text) — tinted toward brand */
  --c-ink-900:    oklch(0.17 0.015 255);  /* body text on light */
  --c-ink-800:    oklch(0.24 0.018 255);  /* headings on light */
  --c-ink-700:    oklch(0.35 0.018 255);
  --c-ink-600:    oklch(0.47 0.015 255);
  --c-ink-500:    oklch(0.58 0.015 255);  /* secondary text */
  --c-ink-400:    oklch(0.68 0.012 255);
  --c-ink-300:    oklch(0.78 0.010 255);  /* disabled / hints */
  --c-ink-200:    oklch(0.88 0.008 255);
  --c-ink-100:    oklch(0.94 0.006 255);  /* borders on light */
  --c-ink-50:     oklch(0.97 0.004 255);

  /* Surfaces — page/card backgrounds */
  --c-surface-base:    oklch(0.99 0.003 255);  /* page bg (light) */
  --c-surface-muted:   oklch(0.97 0.006 255);  /* section bg */
  --c-surface-raised:  oklch(1.00 0     0);    /* cards on light */
  --c-surface-sunken:  oklch(0.94 0.008 255);  /* pressed / selected */
  --c-surface-overlay: oklch(1.00 0     0 / 0.72);

  /* Accent (muted ochre) — rare, editorial use only.                  */
  /* USAGE RULES:                                                       */
  /*  - accent-500: focus rings, underlines, "recommended" markers.     */
  /*    NOT a button background for body-sized text (3.3:1 AA-lg only). */
  /*  - accent-700: use when ochre must be a bg for small text (13.8:1).*/
  /*  - accent-100: subtle tint backgrounds for editorial emphasis.     */
  --c-accent-50:  oklch(0.97 0.025 70);
  --c-accent-100: oklch(0.93 0.045 70);
  --c-accent-200: oklch(0.87 0.075 70);
  --c-accent-400: oklch(0.78 0.105 70);
  --c-accent-500: oklch(0.70 0.115 70);  /* anchor */
  --c-accent-600: oklch(0.62 0.110 68);
  --c-accent-700: oklch(0.52 0.100 65);

  /* Semantic states */
  --c-success:    oklch(0.60 0.130 155);
  --c-success-bg: oklch(0.95 0.035 155);
  --c-warning:    oklch(0.72 0.150 80);
  --c-warning-bg: oklch(0.96 0.050 80);
  --c-danger:     oklch(0.58 0.180 25);
  --c-danger-bg:  oklch(0.95 0.040 25);
  --c-info:       var(--c-brand-600);
  --c-info-bg:    var(--c-brand-50);

  /* Semantic aliases — use these in views by preference */
  --c-text:            var(--c-ink-900);
  --c-text-muted:      var(--c-ink-500);
  --c-text-subtle:     var(--c-ink-400);
  --c-text-on-brand:   oklch(0.99 0.003 255);
  --c-text-on-accent:  oklch(0.15 0.010 70);

  --c-bg:              var(--c-surface-base);
  --c-bg-muted:        var(--c-surface-muted);
  --c-bg-raised:       var(--c-surface-raised);
  --c-bg-sunken:       var(--c-surface-sunken);

  --c-border:          var(--c-ink-100);
  --c-border-strong:   var(--c-ink-200);
  --c-border-subtle:   var(--c-ink-50);

  --c-ring:            var(--c-accent-500);  /* focus ring — ochre, earned */
  --c-primary:         var(--c-brand-600);
  --c-primary-hover:   var(--c-brand-700);
}

/* Dark mode — deliberately crafted, not an inversion.                 */
/* Tuned for WCAG AA: ink-600 is the floor for secondary text; lighter */
/* steps (ink-500 and below) are for decoration / borders only.        */
.dark {
  /* Surfaces — deep oil-slate, never pure black */
  --c-surface-base:    oklch(0.17 0.012 255);  /* page bg (dark) */
  --c-surface-muted:   oklch(0.21 0.014 255);
  --c-surface-raised:  oklch(0.25 0.016 255);  /* cards on dark */
  --c-surface-sunken:  oklch(0.13 0.008 255);
  --c-surface-overlay: oklch(0.15 0.010 255 / 0.72);

  /* Ink inverts — calibrated for AA contrast on deep surfaces */
  --c-ink-900:    oklch(0.98 0.005 255);  /* primary text   — AAA */
  --c-ink-800:    oklch(0.92 0.008 255);  /* headings       — AAA */
  --c-ink-700:    oklch(0.85 0.012 255);  /* body strong    — AAA */
  --c-ink-600:    oklch(0.78 0.015 255);  /* secondary text — AA  */
  --c-ink-500:    oklch(0.72 0.017 255);  /* subtle — AA-large only */
  --c-ink-400:    oklch(0.58 0.015 255);  /* decoration only        */
  --c-ink-300:    oklch(0.42 0.015 255);
  --c-ink-200:    oklch(0.33 0.015 255);
  --c-ink-100:    oklch(0.26 0.015 255);  /* borders on dark */
  --c-ink-50:     oklch(0.21 0.012 255);

  /* Accent adjusts — ochre reads slightly lighter on dark */
  --c-accent-500: oklch(0.76 0.120 70);
  --c-accent-600: oklch(0.68 0.115 68);

  /* Semantic aliases re-point — text-muted uses ink-600 for AA */
  --c-text:            var(--c-ink-900);
  --c-text-muted:      var(--c-ink-600);  /* 4.8:1 AA */
  --c-text-subtle:     var(--c-ink-500);  /* AA-large only */
  --c-text-on-brand:   oklch(0.15 0.010 255);
  --c-text-on-accent:  oklch(0.15 0.010 70);

  --c-bg:              var(--c-surface-base);
  --c-bg-muted:        var(--c-surface-muted);
  --c-bg-raised:       var(--c-surface-raised);
  --c-bg-sunken:       var(--c-surface-sunken);

  --c-border:          var(--c-ink-100);
  --c-border-strong:   var(--c-ink-200);
  --c-border-subtle:   var(--c-ink-50);

  --c-ring:            var(--c-accent-500);
  /* Primary CTA uses brand-300 in dark (5.48:1 AA on surface-base) */
  --c-primary:         var(--c-brand-300);
  --c-primary-hover:   var(--c-brand-200);
}

/* Body defaults: Onest 18px, measured line-height for the 40+ audience */
html {
  font-size: 100%;
  /* Prevent any stray wide descendant from creating a page-level horizontal */
  /* scrollbar — individual overflow-x:auto containers still scroll internally. */
  overflow-x: clip;
}
body {
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  font-feature-settings: 'kern', 'liga', 'calt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Display utility (paired with .font-display in Tailwind)              */
.font-display,
.font-geologica {
  font-family: 'Geologica', 'Onest', system-ui, sans-serif;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* Legacy aliases — old views using these classes render new fonts      */
/* Transitional; remove once views migrate to font-sans / font-display  */
.font-nunito {
  font-family: 'Onest', system-ui, sans-serif;
}
.font-head-ebgaramond {
  font-family: 'Geologica', 'Onest', system-ui, sans-serif;
}
.font-para-worksans {
  font-family: 'Onest', system-ui, sans-serif;
}

/* Tabular numerals for data (pricing, counters)                        */
.tabular-nums,
.font-tabular {
  font-variant-numeric: tabular-nums;
}

/* Pricing cluster tables — on mobile, pin the label column so users can    */
/* horizontally-scroll through 4 plan columns without losing the row label. */
@media (max-width: 767px) {
  .pricing-cluster-table thead th:first-child,
  .pricing-cluster-table tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--c-surface-raised);
    box-shadow: 0.5rem 0 0.5rem -0.5rem oklch(0.17 0.015 255 / 0.08);
  }
  .pricing-cluster-table tbody th:first-child {
    min-width: 10rem;
  }
}

/* Pricing page — native range input styled consistently across browsers */
.pricing-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.25rem;
  background: var(--c-ink-100);
  border-radius: 9999px;
  outline: none;
}
.pricing-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.75rem;          /* 44×44 — WCAG AAA touch target on mobile */
  height: 2.75rem;
  background: var(--c-brand-600);
  border: 3px solid var(--c-surface-raised);
  border-radius: 9999px;
  cursor: grab;
  box-shadow: 0 2px 6px oklch(0.17 0.015 255 / 0.18);
  transition: transform 0.15s ease;
}
.pricing-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.pricing-range::-moz-range-thumb {
  width: 2.75rem;
  height: 2.75rem;
  background: var(--c-brand-600);
  border: 3px solid var(--c-surface-raised);
  border-radius: 9999px;
  cursor: grab;
  box-shadow: 0 2px 6px oklch(0.17 0.015 255 / 0.18);
}
/* Desktop: pointer input is precise, smaller thumb reads as less toy-like */
@media (min-width: 1024px) and (pointer: fine) {
  .pricing-range::-webkit-slider-thumb { width: 1.75rem; height: 1.75rem; }
  .pricing-range::-moz-range-thumb     { width: 1.75rem; height: 1.75rem; }
}
.pricing-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--c-accent-500);
  outline-offset: 3px;
}
.pricing-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--c-accent-500);
  outline-offset: 3px;
}
.dark .pricing-range { background: var(--c-ink-200); }
@media (prefers-reduced-motion: reduce) {
  .pricing-range::-webkit-slider-thumb { transition: none; }
}

@font-face {
  font-family: "Material Design Icons";
  src:
    url("/assets/materialdesignicons-webfont-b4c6d4f6.eot");
  src:
    url("/assets/materialdesignicons-webfont-b4c6d4f6.eot") format("embedded-opentype"),
    url("/assets/materialdesignicons-webfont-a2410f4a.woff2") format("woff2"),
    url("/assets/materialdesignicons-webfont-d38c021d.woff") format("woff"),
    url("/assets/materialdesignicons-webfont-e8382164.ttf") format("truetype");
  font-weight: normal;
  font-style: normal
}

/* Tiny slider */
.tns-outer {
  padding: 0 !important
}

.tns-outer [hidden] {
  display: none !important
}

.tns-outer [aria-controls],
.tns-outer [data-action] {
  cursor: pointer
}

.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s
}

.tns-slider>.tns-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.tns-horizontal.tns-subpixel {
  white-space: nowrap
}

.tns-horizontal.tns-subpixel>.tns-item {
  display: inline-block;
  vertical-align: top;
  white-space: normal
}

.tns-horizontal.tns-no-subpixel:after {
  content: '';
  display: table;
  clear: both
}

.tns-horizontal.tns-no-subpixel>.tns-item {
  float: left
}

.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item {
  margin-right: -100%
}

.tns-no-calc {
  position: relative;
  left: 0
}

.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px
}

.tns-gallery>.tns-item {
  position: absolute;
  left: -100%;
  -webkit-transition: transform 0s, opacity 0s;
  -moz-transition: transform 0s, opacity 0s;
  transition: transform 0s, opacity 0s
}

.tns-gallery>.tns-slide-active {
  position: relative;
  left: auto !important
}

.tns-gallery>.tns-moving {
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  transition: all 0.25s
}

.tns-autowidth {
  display: inline-block
}

.tns-lazy-img {
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
  opacity: 0.6
}

.tns-lazy-img.tns-complete {
  opacity: 1
}

.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition: height 0s;
  transition: height 0s
}

.tns-ovh {
  overflow: hidden
}

.tns-visually-hidden {
  position: absolute;
  left: -10000em
}

.tns-transparent {
  opacity: 0;
  visibility: hidden
}

.tns-fadeIn {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 0
}

.tns-normal,
.tns-fadeOut {
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1
}

.tns-vpfix {
  white-space: nowrap
}

.tns-vpfix>div,
.tns-vpfix>li {
  display: inline-block
}

.tns-t-subp2 {
  margin: 0 auto;
  width: 310px;
  position: relative;
  height: 10px;
  overflow: hidden
}

.tns-t-ct {
  width: 2333.3333333%;
  width: -webkit-calc(100% * 70 / 3);
  width: -moz-calc(100% * 70 / 3);
  width: calc(100% * 70 / 3);
  position: absolute;
  right: 0
}

.tns-t-ct:after {
  content: '';
  display: table;
  clear: both
}

.tns-t-ct>div {
  width: 1.4285714%;
  width: -webkit-calc(100% / 70);
  width: -moz-calc(100% / 70);
  width: calc(100% / 70);
  height: 10px;
  float: left
}


/* Tiny slider */


/* PrismJS 1.29.0 — prism-tomorrow theme */
code[class*=language-],
pre[class*=language-] {
  color: #ccc;
  background: 0 0;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none
}
pre[class*=language-] { padding: 1em; margin: .5em 0; overflow: auto }
:not(pre)>code[class*=language-], pre[class*=language-] { background: #2d2d2d }
:not(pre)>code[class*=language-] { padding: .1em; border-radius: .3em; white-space: normal }
.token.block-comment, .token.cdata, .token.comment, .token.doctype, .token.prolog { color: #999 }
.token.punctuation { color: #ccc }
.token.attr-name, .token.deleted, .token.namespace, .token.tag { color: #e2777a }
.token.function-name { color: #6196cc }
.token.boolean, .token.function, .token.number { color: #f08d49 }
.token.class-name, .token.constant, .token.property, .token.symbol { color: #f8c555 }
.token.atrule, .token.builtin, .token.important, .token.keyword, .token.selector { color: #cc99cd }
.token.attr-value, .token.char, .token.regex, .token.string, .token.variable { color: #7ec699 }
.token.entity, .token.operator, .token.url { color: #67cdcc }
.token.bold, .token.important { font-weight: 700 }
.token.italic { font-style: italic }
.token.entity { cursor: help }
.token.inserted { color: green }

/* Анимация для модального окна */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Стили для анимации аккордеона */
[data-controller="accordion"] [id^="accordion-collapse-body-"] {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  will-change: max-height, opacity;
}

/* Стили для hover-эффекта кнопок */
[data-controller="accordion"] button:focus-visible {
  outline: 2px solid theme('colors.indigo.600');
  outline-offset: -2px;
}

/* Улучшение доступности */
[data-controller="accordion"] button:focus {
  @apply ring-2 ring-indigo-600 ring-offset-2;
}

/*
 * Pricing cards: on narrow viewports (single-column and 2-up), move the
 * currently-recommended plan to the top so users see the suggestion first.
 * On lg breakpoint (4 columns in one row) the order is unnecessary, and the
 * original left-to-right flow is preserved.
 */
@media (max-width: 1023px) {
  .pricing-cards [data-recommended] { order: -1; }
}

/* Native `hidden` attribute must beat Tailwind display utilities that
 * live on the same element (e.g. a flex container we want to hide). */
[hidden] { display: none !important; }

/*
 * Blog article prose. Overrides @tailwindcss/typography defaults so long-form
 * text reads in the same warmed-indigo/ink palette as the rest of the site.
 */
.article-prose {
  --tw-prose-body:        var(--c-ink-700);
  --tw-prose-headings:    var(--c-ink-900);
  --tw-prose-lead:        var(--c-ink-600);
  --tw-prose-links:       var(--c-brand-600);
  --tw-prose-bold:        var(--c-ink-900);
  --tw-prose-counters:    var(--c-ink-500);
  --tw-prose-bullets:     var(--c-ink-300);
  --tw-prose-hr:          var(--c-ink-100);
  --tw-prose-quotes:      var(--c-ink-900);
  --tw-prose-quote-borders: var(--c-brand-600);
  --tw-prose-captions:    var(--c-ink-500);
  --tw-prose-code:        var(--c-ink-900);
  --tw-prose-pre-code:    var(--c-ink-100);
  --tw-prose-pre-bg:      var(--c-surface-sunken);
  --tw-prose-th-borders:  var(--c-ink-200);
  --tw-prose-td-borders:  var(--c-ink-100);
}

.dark .article-prose {
  --tw-prose-body: var(--c-ink-300);
  --tw-prose-headings: var(--c-ink-50);
  --tw-prose-lead: var(--c-ink-400);
  --tw-prose-links: var(--c-brand-300);
  --tw-prose-bold: var(--c-ink-50);
  --tw-prose-counters: var(--c-ink-500);
  --tw-prose-bullets: var(--c-ink-600);
  --tw-prose-hr: var(--c-ink-800);
  --tw-prose-quotes: var(--c-ink-100);
  --tw-prose-quote-borders: var(--c-brand-600);
  --tw-prose-captions: var(--c-ink-400);
  --tw-prose-code: var(--c-ink-50);
  --tw-prose-pre-code: var(--c-ink-300);
  --tw-prose-pre-bg: rgb(0 0 0 / 45%);
  --tw-prose-th-borders: var(--c-ink-700);
  --tw-prose-td-borders: var(--c-ink-800);
}

.article-prose :where(h2, h3, h4) {
  font-family: var(--font-display, "Geologica", system-ui, sans-serif);
  letter-spacing: -0.01em;
}

.article-prose :where(a) {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, var(--c-brand-600), transparent 60%);
  transition: text-decoration-color 150ms ease;
}
.article-prose :where(a):hover {
  text-decoration-color: var(--c-brand-600);
}

.article-prose :where(img) {
  border-radius: 0.75rem;
}