:root {
   --ground:#fff;
   --surface:#f0f0f0;
   --surface-2:#dedede;
   --line:#bababa;
   --ink-soft:#4d4d4d;
   --ink:#292929;
   --accent:#3a5a8c;
   --accent-ink:#fff;

   --poge-f3b:"Syne", 'Syne Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --poge-6f2:"Archivo", "Archivo Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --poge-bc9:"JetBrains Mono", "JetBrains Mono Fallback", SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

   --step--2:clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
   --step--1:clamp(0.84rem, 0.80rem + 0.20vw, 0.94rem);
   --poge-41a:clamp(1.00rem, 0.96rem + 0.22vw, 1.125rem);
   --poge-87d:clamp(1.20rem, 1.12rem + 0.42vw, 1.44rem);
   --poge-f35:clamp(1.44rem, 1.30rem + 0.72vw, 1.84rem);
   --poge-c5f:clamp(1.72rem, 1.50rem + 1.15vw, 2.36rem);
   --poge-a8a:clamp(2.07rem, 1.74rem + 1.76vw, 3.02rem);
   --poge-228:clamp(2.48rem, 2.00rem + 2.62vw, 3.86rem);
   --poge-b93:clamp(2.98rem, 2.28rem + 3.80vw, 4.95rem);

   --space-3xs:clamp(0.25rem, 0.23rem + 0.10vw, 0.31rem);
   --space-2xs:clamp(0.50rem, 0.46rem + 0.20vw, 0.63rem);
   --space-xs:clamp(0.75rem, 0.69rem + 0.30vw, 0.94rem);
   --space-s:clamp(1.00rem, 0.92rem + 0.40vw, 1.25rem);
   --space-m:clamp(1.50rem, 1.38rem + 0.60vw, 1.88rem);
   --space-l:clamp(2.00rem, 1.84rem + 0.80vw, 2.50rem);
   --space-xl:clamp(3.00rem, 2.76rem + 1.20vw, 3.75rem);
   --space-2xl:clamp(4.00rem, 3.68rem + 1.60vw, 5.00rem);
   --space-3xl:clamp(5.50rem, 4.90rem + 2.80vw, 7.25rem);

   --max-width-page:1440px;
   --max-width-narrow:1040px;
   --max-width-ledger:1200px;
   --max-width-reading:65ch;
   --max-width-lede:54ch;

   --dock-height:64px;
   --header-height:72px;
   --strip-height:44px;

   --control-h:48px;
   --control-h-sm:38px;
   --radius-control:0px;

   --ease-settle:cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
   --dur-fast:140ms;
   --dur-med:280ms;
   --dur-slow:600ms;
   --dur-plate:850ms;
}

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

html {
   background-color:var(--ground);
   color:var(--ink);
   font-size:100%;
   -webkit-text-size-adjust:100%;
   tab-size:4;
   scroll-behavior:smooth;
   scroll-padding-top:calc(var(--strip-height) + 1rem);
}

body {
   font-family:var(--poge-6f2);
   font-size:var(--poge-41a);
   font-weight:400;
   line-height:1.62;
   color:var(--ink);
   background-color:var(--ground);
   min-height:100vh;
   padding-bottom:calc(var(--dock-height) + env(safe-area-inset-bottom, 0px));
   text-rendering:optimizeLegibility;
   -webkit-font-smoothing:antialiased;
   -moz-osx-font-smoothing:grayscale;
}

@media (min-width: 1024px) {
   body {
      padding-bottom:0;
      scroll-padding-top:calc(var(--strip-height) + 1.5rem);
   }
}

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

img {
   height:auto;
   font-style:italic;
   background-repeat:no-repeat;
   background-size:cover;
   shape-margin:1rem;
}

svg.icon {
   display:inline-block;
   width:1em;
   height:1em;
   stroke-width:0;
   stroke:currentColor;
   fill:currentColor;
   flex-shrink:0;
   vertical-align:-0.125em;
}

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

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

a:hover {
   text-decoration:none;
}

ul, ol {
   list-style:none;
}

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

fieldset {
   border:0;
}

h1, h2, h3, h4, h5, h6 {
   font-family:var(--poge-f3b);
   color:var(--ink);
   font-weight:800;
   line-height:1.08;
   letter-spacing:-0.035em;
   text-wrap:balance;
   overflow-wrap:break-word;
}

h1 {
   font-size:var(--poge-228);
   font-weight:800;
   line-height:1.02;
   letter-spacing:-0.04em;
}

h2 {
   font-size:var(--poge-c5f);
   font-weight:700;
   line-height:1.12;
   letter-spacing:-0.03em;
}

h3 {
   font-size:var(--poge-f35);
   font-weight:700;
   line-height:1.20;
   letter-spacing:-0.02em;
}

h4 {
   font-size:var(--poge-87d);
   font-weight:700;
   line-height:1.28;
   letter-spacing:-0.015em;
}

p {
   max-width:var(--max-width-reading);

   color:var(--ink);
   font-size:var(--poge-41a);
   line-height:1.62;
   margin-bottom:var(--space-s);
}

p:last-child {

   margin-bottom:0;
}

.lede {
   font-size:var(--poge-87d);
   line-height:1.48;
   color:var(--ink);
   max-width:var(--max-width-lede);
   font-weight:400;
   letter-spacing:-0.01em;
}

.mono-meta {
   font-family:var(--poge-bc9);
   font-size:var(--step--1);
   font-weight:500;
   letter-spacing:-0.01em;
   color:var(--ink-soft);
   font-variant-numeric:tabular-nums;
   text-transform:uppercase;
}

.mono-figure {
   font-family:var(--poge-bc9);
   font-variant-numeric:tabular-nums;
   font-weight:600;
   letter-spacing:-0.02em;
}

.caption {
   font-family:var(--poge-bc9);
   font-size:var(--step--2);
   line-height:1.45;
   color:var(--ink-soft);
   letter-spacing:0.02em;
}

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

.prose blockquote {
   border-left:2px solid var(--accent);
   padding-left:var(--space-s);
   margin:var(--space-m) 0;
   font-size:var(--poge-87d);
   font-style:italic;
   color:var(--ink);
}

.prose ul {
   list-style:square;
   padding-left:1.25rem;
   margin:var(--space-xs) 0 var(--space-s);
}

.prose ol {
   list-style:decimal;
   padding-left:1.25rem;
   margin:var(--space-xs) 0 var(--space-s);
}

.prose li {
   margin-bottom:0.35rem;
   max-width:var(--max-width-reading);
}

.prose a {
   text-decoration:underline;
   text-underline-offset:3px;
   text-decoration-thickness:1px;
   color:var(--accent);
}

.prose a:hover {
   color:var(--ink);
}

.container {
   width:100%;
   max-width:var(--max-width-page);
   margin-left:auto;
   margin-right:auto;
   padding-left:var(--space-s);
   padding-right:var(--space-s);
}

@media (min-width: 768px) {
   .container {
      padding-left:var(--space-m);
      padding-right:var(--space-m);
   }
}

@media (min-width: 1200px) {
   .container {
      padding-left:var(--space-l);
      padding-right:var(--space-l);
   }
}

.container-narrow {
   max-width:var(--max-width-narrow);
}

.container-ledger {
   max-width:var(--max-width-ledger);
}

.grid {
   display:grid;
   gap:var(--space-m);
}

.grid-cols-2 {
   grid-template-columns:1fr;
}

.grid-cols-3 {
   grid-template-columns:1fr;
}

.grid-cols-4 {
   grid-template-columns:1fr;

}

@media (min-width: 640px) {
   .grid-cols-2 {
      grid-template-columns:repeat(2, minmax(0, 1fr));
   }
}

@media (min-width: 768px) {
   .grid-cols-3 {
      grid-template-columns:repeat(3, minmax(0, 1fr));
   }
}

@media (min-width: 1024px) {
   .grid-cols-4 {
      grid-template-columns:repeat(4, minmax(0, 1fr));
   }
}

.split-2-1 {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-m);
}

.split-1-2 {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-m);
}

@media (min-width: 1024px) {
   .split-2-1 {
      grid-template-columns:2fr 1fr;
      gap:var(--space-l);
   }

   .split-1-2 {
      grid-template-columns:1fr 2fr;
      gap:var(--space-l);
   }
}

.stack {
   display:flex;
   flex-direction:column;
}

.stack-xs { gap: var(--space-xs); }
.stack-s  { gap: var(--space-s); }
.stack-m  { gap: var(--space-m); }
.stack-l  { gap: var(--space-l); }
.stack-xl { gap: var(--space-xl); }

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

.cluster-s { gap: var(--space-s); }
.cluster-m { gap: var(--space-m); }

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

.headline-lockup {
   position:relative;
   display:flex;
   flex-direction:column;
   align-items:flex-start;
   margin-bottom:var(--space-m);
}

.headline-lockup .lockup-part-primary {
   display:block;
   transform:none;
}

.headline-lockup .lockup-part-secondary {
   display:block;
   margin-left:clamp(1.5rem, 5vw, 4.5rem);
   position:relative;
}

.headline-rule {
   display:block;
   width:100%;
   max-width:480px;
   height:2px;
   background-color:var(--accent);
   margin-top:var(--space-2xs);
   margin-bottom:var(--space-xs);
   transform-origin:left center;
}

.hero-plate-frame {
   position:relative;
   background-color:var(--surface);
   border:1px solid var(--line);
   overflow:hidden;
}

.hero-plate-frame img {
   width:100%;
   height:100%;
   object-fit:cover;
   object-position:70% center;
   display:block;
}

@supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
      [data-opening] .headline-rule {
         animation:drawRule linear both;
         animation-timeline:view();
         animation-range:entry 0% cover 30%;
      }

      [data-opening] .hero-plate-frame {
         animation:plateSettle linear both;
         animation-timeline:view();
         animation-range:entry 10% cover 45%;
      }
   }
}

@keyframes drawRule {
   from {
      transform:scaleX(0.15);
      opacity:0.6;
   }
   to {
      transform:scaleX(1);
      opacity:1;
   }
}

@keyframes plateSettle {
   from {
      transform:translateY(18px);
   }
   to {
      transform:translateY(0);
   }
}

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