@font-face {
  font-family: Prensipal;
  src: url('/assets/prensipal-serif.woff') format('woff');
  font-weight: 400;
  font-display: swap
}
@font-face {
  font-family: Prensipal;
  src: url('/assets/prensipal-serif-bold.woff') format('woff');
  font-weight: 700;
  font-display: swap
}
:root {
  --blue: #1a467b;
  --black: #000;
  --white: #fff;
  --background: #fff;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --popover: #fff;
  --popover-foreground: #000;
  --primary: #1a467b;
  --primary-foreground: #fff;
  --secondary: #f2f5f8;
  --secondary-foreground: #000;
  --muted: #f2f5f8;
  --muted-foreground: #505050;
  --accent: #f2f5f8;
  --accent-foreground: #000;
  --border: #b3b3b3;
  --input: #777;
  --ring: #1a467b;
  --radius: 0;
  --serif: Prensipal,Georgia,serif;
  --type-page: clamp(2.6rem,4vw,5rem);
  --type-feature: clamp(1.95rem,3vw,3.75rem);
  --type-feature-mobile: clamp(1.5rem,5.4vw,2.025rem);
  --type-section: clamp(2rem,2.72vw,3.6rem);
  --type-subsection: clamp(1.5rem,1.84vw,2.4rem);
  --type-detail: clamp(1.35rem,1.44vw,1.75rem);
  --type-body: 1rem;
  --leading-body: 1.65;
  --gutter: clamp(22px,5vw,80px);
  --space: clamp(52px,6vw,88px);
  --header: 88px;
  --ease: cubic-bezier(.22,1,.36,1)
}
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --font-sans: var(--serif);
  --radius-lg: 0;
  --radius-md: 0;
  --radius-sm: 0
}
* {
  box-sizing: border-box
}
body,main,header,footer,section,article,nav,form,fieldset,div {
  min-width: 0
}
html {
  font-size: 80%;
  scroll-padding-top: calc(var(--header) + 24px);
  -webkit-text-size-adjust: 100%
}
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--serif);
  font-size: var(--type-body);
  line-height: var(--leading-body)
}
h1,h2,h3,p {
  margin: 0
}
h1,h2,h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none
}
h1 {
  font-size: var(--type-page)
}
h2 {
  font-size: var(--type-section)
}
h3 {
  font-size: var(--type-subsection)
}
p {
  max-width: 70ch;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none
}
a {
  color: inherit;
  text-decoration: none
}
button,input,textarea {
  font: inherit
}
input,textarea { min-width: 0; max-width: 100% }
button,a,input,textarea {
  touch-action: manipulation
}
button {
  cursor: pointer
}
button:disabled {
  cursor: not-allowed
}
img,video {
  display: block;
  max-width: 100%
}
img {
  height: auto
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px
}
::selection {
  background: var(--blue);
  color: white
}
.blue {
  background: var(--blue);
  color: white
}
.eyebrow {
  display: block;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  margin-bottom: 28px;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 20px;
  text-decoration: underline;
  text-underline-offset: 6px
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  background: var(--black);
  border: 1px solid var(--black);
  color: white;
  font-size: 1rem
}
.button.secondary {
  background: transparent;
  color: var(--black)
}
.button:disabled {
  opacity: .5
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 20px;
  background: white;
  color: black;
  transform: translateY(-160%)
}
.skip-link:focus {
  transform: none
}
.site-container {
  width: min(100%,1600px);
  margin-inline: auto;
  padding-inline: var(--gutter)
}
.section {
  padding-block: var(--space)
}
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(32px,7vw,100px);
  align-items: start
}
.editorial-grid p {
  padding-top: 6px
}
.prose {
  display: grid;
  gap: 20px
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}
.flow {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 28px
}
main {
  min-height: 65vh
}
.blue p {
  color: rgba(255,255,255,.86)
}
@media(max-width:850px) {
  :root {
    --header: 76px
  }
  .editorial-grid {
    grid-template-columns: minmax(0,1fr);
    gap: 26px
  }
}
.type-visual { display: block }
.type-word { display: inline-block; max-width: 100%; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; vertical-align: top }
.type-char { position: relative }
.type-char.is-current::after { content: ""; position: absolute; top: .08em; right: -.035em; width: 1px; height: .84em; background: currentColor; opacity: .72; pointer-events: none }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    transition-duration: 0.01ms
  }
}
@media(prefers-reduced-motion:no-preference) {
  html[data-comfort=true] {
    scroll-behavior: smooth
  }
}