:root {
   --ground:#ede6e4;
   --surface:#dfd7d5;

   --surface-2:#cec5c2;
   --line:#aba2a0;
   --ink-soft:#514c4a;
   --ink:#2b2827;
   --accent:#a9605f;
   --accent-ink:#fff;

   --gizi-70f:'Playfair Display', 'Playfair Display Fallback', Georgia, 'Times New Roman', serif;
   --gizi-da5:'Literata', 'Literata Fallback', Charter, Georgia, serif;
   --gizi-8c0:'JetBrains Mono', 'JetBrains Mono Fallback', Consolas, 'Liberation Mono', Menlo, monospace;

   --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-rapid:140ms;
   --dur-tactile:180ms;
   --dur-deliberate:320ms;
   --dur-unhurried:560ms;

   --rail-w:72px;
   --measure-ch:65ch;
   --measure-prose:46rem;
   --measure-wide:74rem;
   --space-3xs:clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
   --space-2xs:clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
   --space-xs:clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem);
   --space-s:clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
   --space-m:clamp(1.5rem, 1.3rem + 1vw, 2rem);
   --space-l:clamp(2rem, 1.7rem + 1.5vw, 3rem);
   --space-xl:clamp(3rem, 2.5rem + 2.5vw, 4.5rem);
   --space-2xl:clamp(4.5rem, 3.8rem + 3.5vw, 6.75rem);

   --type-display-2:clamp(2.4rem, 1.8rem + 3vw, 4.25rem);
   --type-display-1:clamp(2rem, 1.6rem + 2vw, 3.25rem);
   --type-title:clamp(1.5rem, 1.3rem + 1vw, 2.15rem);
   --type-subtitle:clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
   --type-body-l:clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
   --type-body:1rem;
   --type-body-s:0.875rem;
   --type-caption:0.8125rem;
   --type-micro:0.75rem;

   --line-display:1.08;
   --line-heading:1.2;
   --line-body:1.62;
   --line-tight:1.35;

   --radius-xs:2px;
   --radius-s:3px;
   --radius-m:4px;

   --shadow-subtle:0 1px 2px rgba(43, 40, 39, 0.04), 0 4px 12px rgba(43, 40, 39, 0.03);
   --shadow-card:0 2px 4px rgba(43, 40, 39, 0.05), 0 12px 28px rgba(43, 40, 39, 0.06);
   --shadow-overlay:0 12px 40px rgba(43, 40, 39, 0.16);

   --header-h:64px;
}

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

   margin:0;
   padding:0;
}

html {
   background-color:var(--ground);
   color:var(--ink);
   font-family:var(--gizi-da5);
   font-size:100%;
   line-height:var(--line-body);
   -webkit-text-size-adjust:100%;
   -moz-text-size-adjust:100%;
   text-size-adjust:100%;
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
   scroll-padding-top:var(--header-h);
   scroll-behavior:smooth;
}

body {
   background-color:var(--ground);
   color:var(--ink);
   min-height:100vh;
   display:flex;
   flex-direction:column;
   position:relative;
   overflow-x:hidden;
}

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

img {
   font-style:italic;
   shape-margin:0.75rem;
   vertical-align:middle;
}

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

button {
   background:none;
   border:none;
   cursor:pointer;
   text-align:inherit;
}

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

ul,
ol {
   list-style:none;

}

table {
   border-collapse:collapse;
   border-spacing:0;
   width:100%;
}

fieldset {
   border:none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family:var(--gizi-70f);
   color:var(--ink);
   font-weight:600;
   line-height:var(--line-heading);
   text-wrap:balance;
}

h1 {
   font-size:var(--type-display-1);
   line-height:var(--line-display);
   letter-spacing:-0.015em;
   font-weight:700;
}

h2 {
   font-size:var(--type-title);
   letter-spacing:-0.01em;
}

h3 {
   font-size:var(--type-subtitle);
   letter-spacing:-0.005em;
}

h4 {
   font-size:var(--type-body-l);
   font-family:var(--gizi-da5);
   font-weight:600;
}

p {
   max-width:var(--measure-ch);
   margin-block-end:1.25rem;
   text-wrap:pretty;
}

p:last-child {
   margin-block-end:0;
}

p.lede {
   font-size:var(--type-body-l);
   line-height:1.6;
   color:var(--ink);
}

small,
.caption {
   font-size:var(--type-caption);
   color:var(--ink-soft);
   line-height:var(--line-tight);
}

.mono {
   font-family:var(--gizi-8c0);
   font-size:var(--type-caption);
   font-variant-numeric:tabular-nums;
   letter-spacing:-0.01em;
}

.price-tag {
   font-family:var(--gizi-8c0);
   font-variant-numeric:tabular-nums;
   font-weight:500;
   color:var(--ink);
}

blockquote {
   border-left:2px solid var(--accent);
   padding-left:var(--space-s);
   margin-block:var(--space-m);
   font-style:italic;
   color:var(--ink-soft);
   max-width:var(--measure-ch);
}

hr {
   border:none;
   border-top:1px solid var(--line);
   margin-block:var(--space-l);
}

/* Focus and accessibility */

:focus {
   outline:none;
}

:focus-visible {
   outline:2px solid var(--accent);
   outline-offset:3px;
}

.skip-link {
   position:fixed;
   top:var(--space-xs);
   left:var(--space-xs);
   z-index:1000;
   background-color:var(--ink);
   color:var(--ground);
   padding:0.65rem 1.1rem;
   border-radius:var(--radius-xs);
   font-family:var(--gizi-8c0);
   font-size:var(--type-caption);
   transform:translateY(-160%);
   transition:transform var(--dur-tactile) var(--ease-out);
   box-shadow:var(--shadow-card);
}

.skip-link:focus {
   transform:translateY(0);
}

.visually-hidden {
   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-shell {
   display:flex;
   flex-direction:row;
   min-height:100vh;
   position:relative;
}

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

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

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

.prose-container {
   width:100%;
   max-width:var(--measure-prose);
   margin-inline:auto;
   padding-inline:var(--space-m);
}

.icon {
   width:1.15em;
   height:1.15em;
   fill:none;
   stroke:currentColor;
   stroke-width:1.75;
   stroke-linecap:round;
   stroke-linejoin:round;
   display:inline-block;
   vertical-align:-0.15em;
   flex-shrink:0;
}

/* Fluid responsive typography constraints */

@media (max-width: 768px) {
   :root {
      --rail-w:0px;
      --header-h:58px;
      --type-display-1:clamp(1.85rem, 1.4rem + 2.5vw, 2.35rem);
      --type-title:1.45rem;
   }

   .site-shell {
      flex-direction:column;
   }

   .shell-container,
   .prose-container {
      padding-inline:var(--space-s);
   }
}

@media (max-width: 360px) {
   :root {
      --space-m:1.15rem;
      --space-s:0.85rem;
      --type-display-1:1.7rem;
      --type-title:1.3rem;
   }
}

@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;
   }

   [data-model-stage] canvas {
      display:none !important;
   }

   [data-model-stage] img[data-model-still] {
      display:block !important;
      opacity:1 !important;
   }
}