

:root {
   --consent-left:var(--sidebar-w, 19.5rem);
   --consent-bottom:1.25rem;
   --ground:#e9edf1;
   --surface:#dadee3;
   --surface-2:#c7ccd2;
   --line:#a5aaae;
   --ink-soft:#4a4d51;
   --ink:#27292b;
   --accent:#1c6570;
   --accent-ink:#fff;


   --accent-hover:#256872;
   --accent-active:#1d535b;
   --accent-tint:rgba(47, 127, 138, 0.12);
   --focus-ring:#2f7f8a;
   --error:#9b2c2c;
   --error-bg:#f3e5e5;
   --success:#1e5e4a;
   --success-bg:#dfece7;


   --scrim-light:rgba(233, 237, 241, 0.92);
   --scrim-surface:rgba(218, 222, 227, 0.94);
   --scrim-dark:rgba(39, 41, 43, 0.44);
   --shadow-subtle:0 2px 10px rgba(39, 41, 43, 0.08);
   --shadow-elevated:0 12px 32px rgba(39, 41, 43, 0.14);


   --beso-19e:'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
   --beso-701:'Crimson Pro', 'Crimson Pro Fallback', Georgia, 'Times New Roman', serif;
   --beso-4b5:'JetBrains Mono', 'JetBrains Mono Fallback', ui-monospace, SFMono-Regular, Menlo, monospace;


   --text-xs:clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
   --text-sm:clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
   --text-base:clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
   --text-lg:clamp(1.25rem, 1.18rem + 0.35vw, 1.4375rem);
   --text-xl:clamp(1.5rem, 1.32rem + 0.85vw, 2rem);
   --text-2xl:clamp(1.8125rem, 1.48rem + 1.55vw, 2.625rem);
   --text-display:clamp(2rem, 1.5rem + 2.4vw, 3.5rem);


   --leading-tight:1.08;
   --leading-snug:1.22;
   --leading-body:1.66;
   --leading-loose:1.78;


   --space-1:0.25rem;
   --space-2:0.5rem;
   --space-3:0.75rem;
   --space-4:1rem;
   --space-5:1.5rem;
   --space-6:2rem;
   --space-7:3rem;
   --space-8:4.5rem;
   --space-9:6.5rem;


   --radius-none:0px;
   --radius-sm:2px;
   --radius-md:4px;


   --sidebar-w:19.5rem;
   --dock-h:4.125rem;
   --measure:62ch;
   --measure-narrow:48ch;
   --measure-wide:74rem;
   --gutter:clamp(1.125rem, 3.2vw, 3.5rem);


   --dur-fast:140ms;
   --dur-base:200ms;
   --dur-slow:420ms;
   --dur-route:540ms;
   --ease-standard:cubic-bezier(0.22, 1, 0.36, 1);
   --ease-exit:cubic-bezier(0.4, 0, 1, 1);


   --z-base:1;
   --z-sticky:20;
   --z-rail:30;
   --z-dock:40;
   --z-backdrop:50;
   --z-drawer:60;
   --z-consent:70;
   --z-chat:80;
   --z-skip:100;
}


@media (prefers-reduced-motion: no-preference) {
   @view-transition { navigation:auto; }


   ::view-transition-old(root),
   ::view-transition-new(root) {
      animation-duration:var(--dur-base);
      animation-timing-function:var(--ease-standard);
   }


   ::view-transition-old(hero),
   ::view-transition-new(hero) {
      animation-duration:var(--dur-slow);
      animation-timing-function:var(--ease-standard);
   }


   ::view-transition-old(hero-title),
   ::view-transition-new(hero-title) {
      animation-duration:320ms;
      animation-timing-function:var(--ease-standard);
   }
}


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


html {
   background-color:var(--ground);
   color:var(--ink);
   font-size:100%;
   -webkit-text-size-adjust:100%;
   scroll-behavior:smooth;
}


body {
   margin:0;
   min-height:100dvh;
   background-color:var(--ground);
   color:var(--ink);

   font-family:var(--beso-701);
   font-size:var(--text-base);
   font-weight:400;
   line-height:var(--leading-body);
   font-kerning:normal;
   font-variant-ligatures:common-ligatures;
   text-rendering:optimizeLegibility;
   overflow-x:clip;
   padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}


@media (min-width: 64rem) {
   body { padding-bottom:0; }
}


button,
input,
select,
textarea {
   font:inherit;
   color:inherit;
   letter-spacing:inherit;
}


img,
picture,
svg,
video {
   display:block;
   max-width:100%;
}


img { height:auto; }


h1,
h2,
h3,
h4,
h5,
h6 {
   margin:0;
   font-family:var(--beso-19e);
   font-weight:500;
   line-height:var(--leading-tight);
   color:var(--ink);
   letter-spacing:-0.018em;
   overflow-wrap:break-word;
   text-wrap:balance;
}


h1 {
   font-size:var(--text-display);
   font-variation-settings:'opsz' 72;
}


h2 {
   font-size:var(--text-2xl);
   font-variation-settings:'opsz' 48;
   line-height:var(--leading-snug);
}


h3 {
   font-size:var(--text-xl);
   font-variation-settings:'opsz' 32;
   line-height:var(--leading-snug);
}


h4 {
   font-size:var(--text-lg);
   font-variation-settings:'opsz' 24;
   line-height:var(--leading-snug);
}


p {
   margin:0;
   max-width:var(--measure);
   text-wrap:pretty;
}


p + p { margin-top:var(--space-4); }


ul,
ol {
   margin:0;
   padding:0;
   list-style:none;
}


figure { margin:0; }


figcaption {
   font-size:var(--text-sm);
   line-height:1.48;
   color:var(--ink-soft);
}


hr {
   border:0;
   border-top:1px solid var(--line);
   margin:var(--space-6) 0;
}


a {
   color:var(--accent);
   text-decoration:underline;

   text-decoration-thickness:1px;
   text-underline-offset:0.22em;
   transition:color var(--dur-fast) var(--ease-standard),
      text-decoration-color var(--dur-fast) var(--ease-standard);
}


a:hover { color:var(--accent-hover); }


a:active { color:var(--accent-active); }


:focus-visible {
   outline:2px solid var(--focus-ring);

   outline-offset:3px;
}


[hidden] { display:none !important; }


.tabular,
.mono {
   font-family:var(--beso-4b5);
   font-variant-numeric:tabular-nums;
}


.tabular-only { font-variant-numeric:tabular-nums; }


.icon {
   display:inline-block;
   width:1.25rem;
   height:1.25rem;
   flex:none;
   fill:none;
   stroke:currentColor;
   stroke-width:1.75;
   stroke-linecap:round;
   stroke-linejoin:round;
}


.prose {
   max-width:var(--measure);
   font-size:var(--text-base);
   line-height:var(--leading-body);
   color:var(--ink);
}


.prose h2 {
   margin-top:var(--space-7);
   margin-bottom:var(--space-3);
}


.prose h3 {
   margin-top:var(--space-6);
   margin-bottom:var(--space-2);
}


.prose ul,
.prose ol {
   margin-top:var(--space-4);
   margin-bottom:var(--space-4);
   padding-inline-start:1.35rem;
}


.prose ul { list-style:disc; }


.prose ol { list-style:decimal; }


.prose li + li { margin-top:var(--space-2); }


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


.prose em { font-style:italic; }


.prose blockquote {
   margin:var(--space-5) 0;
   padding:var(--space-3) 0 var(--space-3) var(--space-5);
   border-inline-start:2px solid var(--accent);
   color:var(--ink-soft);
   font-style:italic;
}


.container {
   width:100%;
   max-width:var(--measure-wide);
   margin-inline:auto;
   padding-inline:var(--gutter);
}


.stack > * + * { margin-top:var(--space-4); }


.stack-lg > * + * { margin-top:var(--space-6); }


.cluster {
   display:flex;
   flex-wrap:wrap;
   align-items:center;
   gap:var(--space-3) var(--space-4);
}


.cluster > * { min-width:0; }


.grid-auto {
   display:grid;
   grid-template-columns:minmax(0, 1fr);
   gap:var(--space-5);
}


@media (min-width: 48rem) {
   .grid-auto { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}


.sr-only {
   position:absolute;
   width:1px;
   height:1px;
   padding:0;
   margin:-1px;
   overflow:hidden;
   clip:rect(0, 0, 0, 0);
   white-space:nowrap;
   border:0;
}


.site-shell {
   display:block;
   min-height:100dvh;
}


.site-workspace {
   min-width:0;
   display:flex;
   flex-direction:column;
   min-height:100dvh;
}


.site-main {
   flex:1 0 auto;
   min-width:0;
}


@media (min-width: 64rem) {
   .site-workspace { margin-inline-start:0; }
}


@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior:auto; }


   *,
   *::before,
   *::after {
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
   }
}
