

:root {
  --ground:#eef4f7;
  --surface:#f7fafc;
  --surface-lift:#ffffff;
  --ink:#14232c;
  --ink-muted:#48606f;

  --border:#c9d8e2;
  --border-strong:#9cb7c7;
  --accent:#1b7a82;

  --accent-soft:#d8ebef;
  --accent-deep:#135a60;
  --accent-highlight:#2bb3bf;
  --danger:#9b2c2c;
  --danger-bg:#fee8e8;
  --focus-ring:rgba(27, 122, 130, 0.45);


  --cini-d14:"Cinzel", Georgia, "Times New Roman", serif;
  --cini-610:"Bitter", "Rockwell", "Courier New", serif;
  --cini-3da:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;


  --step--2:clamp(0.72rem, 0.70rem + 0.10vw, 0.80rem);
  --step--1:clamp(0.85rem, 0.82rem + 0.15vw, 0.94rem);
  --cini-bac:clamp(1.00rem, 0.95rem + 0.25vw, 1.125rem);
  --cini-857:clamp(1.18rem, 1.10rem + 0.40vw, 1.35rem);
  --cini-06f:clamp(1.40rem, 1.28rem + 0.60vw, 1.68rem);
  --cini-5b5:clamp(1.70rem, 1.50rem + 1.00vw, 2.15rem);
  --cini-969:clamp(2.05rem, 1.75rem + 1.50vw, 2.75rem);
  --cini-a7a:clamp(2.45rem, 2.05rem + 2.00vw, 3.50rem);


  --measure-narrow:46ch;
  --measure-editorial:68ch;
  --measure-wide:88ch;
  --page-max:1240px;


  --space-3xs:clamp(0.25rem, 0.23rem + 0.10vw, 0.35rem);
  --space-2xs:clamp(0.50rem, 0.45rem + 0.25vw, 0.65rem);
  --space-xs:clamp(0.75rem, 0.70rem + 0.25vw, 0.95rem);
  --space-s:clamp(1.00rem, 0.92rem + 0.40vw, 1.25rem);
  --space-m:clamp(1.50rem, 1.38rem + 0.60vw, 1.90rem);
  --space-l:clamp(2.00rem, 1.80rem + 1.00vw, 2.65rem);
  --space-xl:clamp(3.00rem, 2.65rem + 1.75vw, 4.00rem);
  --space-2xl:clamp(4.25rem, 3.75rem + 2.50vw, 5.75rem);


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


  --shadow-subtle:0 1px 2px rgba(20, 35, 44, 0.04), 0 3px 8px rgba(20, 35, 44, 0.03);
  --shadow-raised:0 4px 12px rgba(20, 35, 44, 0.06), 0 1px 3px rgba(20, 35, 44, 0.04);
  --shadow-overlay:0 14px 34px rgba(20, 35, 44, 0.14), 0 4px 10px rgba(20, 35, 44, 0.06);


  --ease-letterpress:cubic-bezier(0.19, 1, 0.22, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:160ms;
  --dur-med:280ms;
  --dur-slow:480ms;
}


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


* {
  margin:0;
  padding:0;
}


html {
  background-color:var(--ground);
  color:var(--ink);
  font-family:var(--cini-610);
  font-size:100%;
  line-height:1.62;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
}


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


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


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


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


h1, h2, h3, h4, h5, h6 {
  font-family:var(--cini-d14);
  font-weight:700;
  line-height:1.25;
  color:var(--ink);
  text-wrap:balance;
  overflow-wrap:break-word;
}


h1 {
  font-size:var(--cini-969);
  letter-spacing:-0.01em;
}


h2 {
  font-size:var(--cini-5b5);
  letter-spacing:0.01em;
}


h3 {
  font-size:var(--cini-06f);
  letter-spacing:0.015em;
}


h4 {
  font-size:var(--cini-857);
  letter-spacing:0.02em;
}


p {
  font-size:var(--cini-bac);
  line-height:1.68;
  color:var(--ink);
  overflow-wrap:break-word;
}


p + p {

  margin-top:var(--space-s);
}


small {
  font-size:var(--step--1);
}


code, kbd, samp, pre {
  font-family:var(--cini-3da);
  font-size:0.9em;
}


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


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


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


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


.skip-link {
  position:absolute;
  top:-100px;
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:var(--ground);
  padding:var(--space-xs) var(--space-m);
  font-family:var(--cini-3da);
  font-size:var(--step--1);
  z-index:10000;
  border-radius:var(--radius-sm);
  transition:top var(--dur-fast) var(--ease-letterpress);
}


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


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


.shell-container {
  width:100%;
  max-width:var(--page-max);
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(1rem, 4vw, 2.5rem);
  padding-right:clamp(1rem, 4vw, 2.5rem);
}


.editorial-measure {
  width:100%;
  max-width:var(--measure-editorial);
  margin-left:auto;
  margin-right:auto;
}


.wide-measure {
  width:100%;
  max-width:var(--measure-wide);
  margin-left:auto;
  margin-right:auto;
}


.narrow-measure {
  width:100%;
  max-width:var(--measure-narrow);
  margin-left:auto;
  margin-right:auto;
}


.lede {
  font-size:var(--cini-857);
  line-height:1.58;
  color:var(--ink-muted);
  font-weight:400;
}


.pull-quote {
  font-family:var(--cini-d14);
  font-size:var(--cini-06f);
  line-height:1.35;
  color:var(--ink);
  text-align:center;
  padding:var(--space-m) var(--space-s);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin:var(--space-l) 0;
  position:relative;
}


.pull-quote cite {
  display:block;
  margin-top:var(--space-xs);
  font-family:var(--cini-3da);
  font-size:var(--step--2);
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--ink-muted);
  font-style:normal;
}


.asymmetric-lockup {
  position:relative;
  display:flex;
  flex-direction:column;
  padding-bottom:var(--space-s);
  margin-bottom:var(--space-m);
}


.asymmetric-lockup .lockup-primary {
  font-family:var(--cini-d14);
  font-size:var(--cini-969);
  line-height:1.15;
  font-weight:700;
  color:var(--ink);
}


.asymmetric-lockup .lockup-offset {
  display:inline-block;
  margin-left:clamp(1.5rem, 5vw, 4.5rem);
  color:var(--accent);
  position:relative;
}


.asymmetric-lockup .lockup-rule {
  position:absolute;
  bottom:0;
  left:0;
  right:clamp(1.5rem, 12vw, 8rem);
  height:2px;
  background-color:var(--ink);
}


.letterpress-rule {
  height:1px;
  background-color:var(--border);
  border:none;
  margin:var(--space-m) 0;
}


.letterpress-box {
  background-color:var(--surface);
  border:1px solid var(--border);
  padding:var(--space-m);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-subtle);
}


.icon {
  width:1.15em;
  height:1.15em;
  fill:currentColor;
  display:inline-block;
  vertical-align:-0.18em;
  flex-shrink: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;
  }
}
