:root {
   --ground: #e8dfd0;
   --surface: #dad0bf;
   --surface-2: #cabeab;
   --line: #a79c8a;
   --ink-soft: #534c3f;
   --ink: #2c2821;
   --accent: #b5542b;
   --accent-ink: #ffffff;


   --sopi-ff7: "Barlow Condensed", "Barlow Condensed Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --sopi-a52: "Bitter", "Bitter Fallback", Georgia, serif;
   --sopi-0b0: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, monospace;


   --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
   --dur-fast: 160ms;
   --dur-base: 240ms;
   --dur-deliberate: 420ms;


   --fs-hero: clamp(2.35rem, 5.2vw + 1rem, 4.4rem);
   --fs-h1: clamp(1.95rem, 3.4vw + 0.8rem, 3.1rem);
   --fs-h2: clamp(1.5rem, 2.2vw + 0.6rem, 2.25rem);
   --fs-h3: clamp(1.22rem, 1.4vw + 0.5rem, 1.62rem);
   --fs-body: clamp(0.98rem, 0.28vw + 0.92rem, 1.08rem);
   --fs-body-lead: clamp(1.08rem, 0.45vw + 0.98rem, 1.25rem);
   --fs-caption: 0.86rem;
   --fs-meta: 0.78rem;


   --lh-tight: 1.04;
   --lh-heading: 1.14;
   --lh-body: 1.62;
   --lh-relaxed: 1.72;


   --space-3xs: 0.25rem;
   --space-2xs: 0.5rem;
   --space-xs: 0.75rem;
   --space-sm: 1rem;
   --space-md: 1.5rem;
   --space-lg: 2.25rem;
   --space-xl: 3.5rem;
   --space-2xl: 5rem;
   --space-3xl: 7.5rem;


   --measure-narrow: 46ch;

   --measure-body: 62ch;

   --measure-wide: 74ch;


   --container-max: 1240px;
   --container-pad: clamp(1rem, 3vw, 2.25rem);
   --header-h-desk: 104px;
   --dock-h: 64px;


   --radius-sharp: 0px;
   --radius-subtle: 2px;
}


@view-transition {
   navigation: auto;
}


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


html {
   background-color: var(--ground);
   color: var(--ink);
   font-family: var(--sopi-a52);
   font-size: 16px;
   line-height: var(--lh-body);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   scroll-behavior: smooth;
   scroll-padding-top: var(--header-h-desk);
}


body {
   background-color: var(--ground);
   color: var(--ink);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   padding-bottom: var(--dock-h);
}


@media (min-width: 960px) {
   body { padding-bottom: 0; }
}


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


h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--sopi-ff7);
   font-weight: 800;
   line-height: var(--lh-heading);
   color: var(--ink);
   letter-spacing: 0.01em;
   text-wrap: balance;
}


h1 {
   font-size: var(--fs-h1);
   font-weight: 900;
   letter-spacing: -0.01em;
}


h2 { font-size: var(--fs-h2); }


h3 { font-size: var(--fs-h3); }


p {
   font-size: var(--fs-body);
   line-height: var(--lh-body);
   color: var(--ink);
   max-width: var(--measure-body);
}


p.lede {
   font-size: var(--fs-body-lead);
   line-height: var(--lh-relaxed);
   color: var(--ink);
   max-width: var(--measure-narrow);
}


small,
.caption,
figcaption {
   font-size: var(--fs-caption);
   line-height: 1.45;
   color: var(--ink-soft);
}


.mono,
.numeral,
code,
kbd,
samp {
   font-family: var(--sopi-0b0);
   font-feature-settings: "tnum" 1, "zero" 1;
   font-variant-numeric: tabular-nums;
}


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


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


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


ul,
ol { list-style-position: inside; }


blockquote {
   border-left: 3px solid var(--accent);
   padding-left: var(--space-md);
   margin: var(--space-lg) 0;
   font-style: italic;
   color: var(--ink);
}


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


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


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


.skip-link {
   position: absolute;
   top: -100px;
   left: 1rem;
   background-color: var(--ink);
   color: var(--ground);
   padding: 0.6rem 1.2rem;
   font-family: var(--sopi-0b0);
   font-size: 0.88rem;
   z-index: 1000;
   text-decoration: none;
   transition: top var(--dur-fast) var(--ease-out);
}


.skip-link:focus { top: 1rem; }


.site-wrap {
   width: 100%;
   max-width: var(--container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--container-pad);
   padding-right: var(--container-pad);
}


.site-wrap--reading { max-width: 820px; }


.site-wrap--narrow { max-width: 680px; }


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


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


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


.icon--sm {
   width: 1rem;
   height: 1rem;
}


.icon--lg {
   width: 1.5rem;
   height: 1.5rem;
}


.icon--xl {
   width: 2rem;
   height: 2rem;
}


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


.duotone-caesura {
   position: relative;

   width: 100%;
   aspect-ratio: 16 / 9;
   max-height: 720px;
   overflow: hidden;
   background-color: var(--ink);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: var(--space-2xl) 0;
}


.duotone-caesura__img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   aspect-ratio: 3 / 2;
   object-fit: cover;
   filter: grayscale(100%) contrast(150%) brightness(85%);
   mix-blend-mode: multiply;
   opacity: 0.72;
}


.duotone-caesura::before {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--ground);
   mix-blend-mode: screen;
   pointer-events: none;
   z-index: 1;
}


.duotone-caesura::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--accent);
   mix-blend-mode: multiply;
   opacity: 0.65;
   pointer-events: none;
   z-index: 2;
}


.duotone-caesura__content {
   position: relative;
   z-index: 3;
   padding: var(--space-xl) var(--container-pad);
   max-width: 820px;
   text-align: center;
   color: var(--accent-ink);
}


.duotone-caesura__statement {
   font-family: var(--sopi-ff7);
   font-size: clamp(1.8rem, 3.2vw + 0.6rem, 2.85rem);
   font-weight: 900;
   line-height: 1.08;
   color: #ffffff;
   text-transform: uppercase;
   letter-spacing: 0.02em;
}


.duotone-caesura__sub {
   font-family: var(--sopi-a52);
   font-size: 1rem;
   color: var(--ground);
   margin-top: var(--space-sm);
   max-width: 54ch;
   margin-left: auto;
   margin-right: auto;
}


@media (prefers-reduced-motion: no-preference) {
   ::view-transition-old(root),
   ::view-transition-new(root) {
      animation-duration: 280ms;
      animation-timing-function: var(--ease-out);
   }


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


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


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