:root {
   --ground:#ede6e4;
   --surface:#dfd7d5;
   --surface-2:#cec5c2;
   --line:#aba2a0;
   --ink-soft:#514c4a;
   --ink:#2b2827;
   --accent:#a9605f;
   --accent-ink:#ffffff;

   --accent-hover:#965352;
   --accent-active:#7f4544;
   --surface-hover:#d5ccc9;
   --surface-active:#c5bcb9;
   --focus-ring:#2b2827;

   --kume-fe9:'Newsreader', 'Newsreader Fallback', Georgia, serif;
   --kume-25e:'Bitter', 'Bitter Fallback', Georgia, serif;
   --kume-1f2:'JetBrains Mono', 'JetBrains Mono Fallback', 'Courier New', monospace;

   --sidebar-w:280px;
   --dock-h:64px;
   --header-mobile-h:56px;
   --content-max:1280px;
   --measure-prose:65ch;
   --measure-lede:48ch;

   --radius-xs:2px;
   --radius-sm:4px;
   --radius-md:6px;

   --space-2xs:clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
   --space-xs:clamp(0.5rem, 0.44rem + 0.29vw, 0.75rem);
   --space-sm:clamp(0.75rem, 0.66rem + 0.44vw, 1.125rem);
   --space-md:clamp(1rem, 0.88rem + 0.59vw, 1.5rem);
   --space-lg:clamp(1.5rem, 1.32rem + 0.88vw, 2.25rem);
   --space-xl:clamp(2rem, 1.76rem + 1.18vw, 3rem);
   --space-2xl:clamp(3rem, 2.65rem + 1.76vw, 4.5rem);
   --space-3xl:clamp(4rem, 3.53rem + 2.35vw, 6rem);
   --space-4xl:clamp(5.5rem, 4.85rem + 3.24vw, 8.25rem);

   --font-size-xs:clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
   --font-size-sm:clamp(0.8438rem, 0.81rem + 0.17vw, 0.9375rem);
   --font-size-base:clamp(0.9688rem, 0.93rem + 0.19vw, 1.0625rem);
   --font-size-md:clamp(1.125rem, 1.06rem + 0.33vw, 1.25rem);
   --font-size-lg:clamp(1.3125rem, 1.22rem + 0.46vw, 1.5625rem);
   --font-size-xl:clamp(1.625rem, 1.48rem + 0.72vw, 2.0625rem);
   --font-size-2xl:clamp(2.0625rem, 1.84rem + 1.11vw, 2.75rem);
   --font-size-3xl:clamp(2.625rem, 2.28rem + 1.72vw, 3.75rem);
   --font-size-display:clamp(3.25rem, 2.75rem + 2.5vw, 5.25rem);

   --leading-tight:1.15;
   --leading-snug:1.28;
   --leading-base:1.62;
   --leading-loose:1.78;

   --tracking-tight:-0.025em;
   --tracking-snug:-0.012em;
   --tracking-normal:0em;
   --tracking-wide:0.04em;
   --tracking-wider:0.08em;

   --shadow-hairline:0 1px 0 var(--line);
   --shadow-subtle:0 2px 8px -2px rgba(43, 40, 39, 0.06), 0 1px 3px rgba(43, 40, 39, 0.04);
   --shadow-elevated:0 8px 24px -6px rgba(43, 40, 39, 0.1), 0 2px 6px rgba(43, 40, 39, 0.05);

   --ease-standard:cubic-bezier(0.2, 0, 0, 1);
   --ease-out:cubic-bezier(0, 0, 0.2, 1);
   --ease-in:cubic-bezier(0.4, 0, 1, 1);

   --dur-instant:120ms;
   --dur-fast:180ms;
   --dur-base:240ms;
   --dur-slow:400ms;
}

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

html {
   background-color:var(--ground);
   color:var(--ink);
   font-family:var(--kume-25e);
   font-size:16px;
   line-height:var(--leading-base);
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   scroll-behavior:smooth;
   scroll-padding-top:var(--space-xl);
}

body {
   margin:0;
   padding:0;
   background-color:var(--ground);
   color:var(--ink);
   font-family:var(--kume-25e);
   font-size:var(--font-size-base);
   font-weight:400;
   line-height:var(--leading-base);
   min-height:100vh;
   display:flex;
   flex-direction:column;
}

@media (max-width: 1023px) {
   body { padding-bottom:calc(var(--dock-h) + 6rem + env(safe-area-inset-bottom, 0px)); }
}

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

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

button {
   cursor:pointer;
   background:none;
   border:0;
   padding:0;
}

a {
   color:var(--ink);
   text-decoration:underline;
   text-decoration-thickness:1px;
   text-underline-offset:3px;
   transition:color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard);
}

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

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

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
   outline:2px solid var(--focus-ring);
   outline-offset:2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin:0;
   font-family:var(--kume-fe9);
   font-weight:500;
   line-height:var(--leading-tight);
   color:var(--ink);
   letter-spacing:var(--tracking-snug);
   text-wrap:balance;
}

h1 {
   font-size:var(--font-size-3xl);
   font-weight:400;
   letter-spacing:var(--tracking-tight);
   max-width:16ch;
}

h2 {
   font-size:var(--font-size-2xl);
   font-weight:400;
   letter-spacing:var(--tracking-tight);
}

h3 {
   font-size:var(--font-size-xl);
   font-weight:500;
}

h4 {
   font-size:var(--font-size-lg);
   font-weight:500;
}

h5 {
   font-size:var(--font-size-md);
   font-weight:600;
}

h6,
.h6 {
   font-size:var(--font-size-base);
   font-weight:600;
}

p {
   margin:0 0 var(--space-md) 0;
   max-width:var(--measure-prose);
   color:var(--ink);
}

p:last-child { margin-bottom:0; }

p.lede {
   font-size:var(--font-size-md);
   line-height:var(--leading-snug);
   color:var(--ink-soft);
   max-width:var(--measure-lede);
   margin-bottom:var(--space-lg);
}

small,
.caption,
.meta-text {
   font-size:var(--font-size-xs);
   line-height:var(--leading-base);
   color:var(--ink-soft);
}

strong,
b {
   font-weight:600;
   color:var(--ink);
}

em,
i { font-style:italic; }

code,
pre,
kbd,
samp {
   font-family:var(--kume-1f2);
   font-size:0.9em;
}

.numeral,
.figure-data,
.price-display {
   font-family:var(--kume-1f2);
   font-variant-numeric:tabular-nums lining-nums;
   letter-spacing:-0.01em;
}

hr {
   border:0;
   height:1px;
   background-color:var(--line);
   margin:var(--space-xl) 0;
}

ul,
ol {
   margin:0 0 var(--space-md) 0;
   padding-left:1.5rem;
   max-width:var(--measure-prose);
}

li { margin-bottom:var(--space-xs); }

li:last-child { margin-bottom:0; }

blockquote {
   margin:var(--space-xl) 0;

   padding:var(--space-sm) 0 var(--space-sm) var(--space-lg);
   border-left:2px solid var(--accent);
   font-family:var(--kume-fe9);
   font-size:var(--font-size-lg);
   font-style:italic;
   line-height:var(--leading-snug);
   color:var(--ink);
   max-width:var(--measure-prose);
}

blockquote footer {
   margin-top:var(--space-xs);
   font-family:var(--kume-25e);
   font-size:var(--font-size-xs);
   font-style:normal;
   color:var(--ink-soft);
}

.icon {
   width:1.25rem;
   height:1.25rem;
   fill:currentColor;
   display:inline-block;
   vertical-align:middle;
   flex-shrink:0;
}

.skip-link {
   position:absolute;
   top:-9999px;

   left:var(--space-md);
   background-color:var(--ink);
   color:var(--ground);
   padding:var(--space-xs) var(--space-md);
   z-index:10000;
   text-decoration:none;
   font-weight:600;
   font-size:var(--font-size-sm);
   border-radius:var(--radius-xs);
}

.skip-link:focus { top:var(--space-md); }

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

.site-layout {
   display:flex;
   min-height:100vh;
   position:relative;
}

.site-content {
   flex:1 1 auto;
   min-width:0;
   display:flex;
   flex-direction:column;
}

@media (min-width: 1024px) {
   .site-layout {
      display:flex;
      flex-direction:row;
      align-items:stretch;
   }

   .site-sidebar {
      width:var(--sidebar-w);
      flex:0 0 var(--sidebar-w);
      position:sticky;
      top:0;
      left:0;
      z-index:100;
      height:100vh;
      overflow-y:auto;
   }

   .site-content {
      flex:1 1 auto;
      min-width:0;
      margin-left:0;
      min-height:100vh;

   }
}

.container {
   width:100%;
   max-width:var(--content-max);
   margin-left:auto;
   margin-right:auto;
   padding-left:clamp(1rem, 0.6rem + 2vw, 3rem);
   padding-right:clamp(1rem, 0.6rem + 2vw, 3rem);
}

.container-narrow {
   width:100%;
   max-width:820px;
   margin-left:auto;
   margin-right:auto;
   padding-left:clamp(1rem, 0.6rem + 2vw, 3rem);
   padding-right:clamp(1rem, 0.6rem + 2vw, 3rem);
}

.flow > * + * { margin-top:var(--space-md); }

.flow-loose > * + * { margin-top:var(--space-xl); }

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
   }
}