:root {
  --bg-carbon:#141414;
  --surface-gunmetal:#222326;
  --surface-iron:#2C2D30;
  --surface-slate:#1C1D20;
  --surface-lifted:#26272B;

  --accent-signal:#FF5500;
  --accent-signal-hover:#E64D00;
  --accent-signal-active:#CC4400;
  --accent-signal-subtle:rgba(255, 85, 0, 0.12);
  --accent-signal-border:rgba(255, 85, 0, 0.35);

  --text-ink:#F0EDE6;
  --text-muted:#9E9FA4;
  --text-dim:#6B6D73;
  --text-on-accent:#141414;

  --rule-border:#3A3C42;
  --rule-subtle:#28292D;
  --rule-strong:#54565C;
  --rule-heavy:#686B73;

  --ripa-440:'Chakra Petch', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ripa-d0b:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ripa-c30:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --step--2:clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1:clamp(0.82rem, 0.79rem + 0.16vw, 0.9rem);
  --ripa-546:clamp(0.96rem, 0.92rem + 0.24vw, 1.06rem);
  --ripa-1f4:clamp(1.14rem, 1.08rem + 0.42vw, 1.32rem);
  --ripa-fcd:clamp(1.36rem, 1.26rem + 0.68vw, 1.68rem);
  --ripa-923:clamp(1.65rem, 1.48rem + 1.1vw, 2.18rem);
  --ripa-091:clamp(2.1rem, 1.82rem + 1.8vw, 2.95rem);
  --ripa-3f3:clamp(2.7rem, 2.22rem + 2.8vw, 4.1rem);
  --ripa-9af:clamp(3.5rem, 2.75rem + 4.5vw, 5.8rem);
  --step-verb:clamp(3.8rem, 2.9rem + 5.2vw, 6.8rem);

  --space-3xs:clamp(0.25rem, 0.22rem + 0.12vw, 0.35rem);
  --space-2xs:clamp(0.45rem, 0.4rem + 0.22vw, 0.6rem);
  --space-xs:clamp(0.7rem, 0.62rem + 0.35vw, 0.95rem);
  --space-s:clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
  --space-m:clamp(1.4rem, 1.25rem + 0.75vw, 1.85rem);
  --space-l:clamp(2rem, 1.75rem + 1.2vw, 2.8rem);
  --space-xl:clamp(2.8rem, 2.4rem + 1.8vw, 4rem);
  --space-2xl:clamp(3.8rem, 3.2rem + 2.8vw, 5.6rem);
  --space-3xl:clamp(5rem, 4.2rem + 4vw, 7.5rem);
  --space-4xl:clamp(6.5rem, 5.4rem + 5.5vw, 10rem);

  --container-narrow:760px;
  --container-mid:960px;
  --container-max:1320px;
  --container-wide:1480px;

  --header-height:4.75rem;
  --border-thick:2px solid var(--rule-border);
  --border-subtle:1px solid var(--rule-subtle);
  --border-strong:2px solid var(--rule-strong);
  --border-signal:2px solid var(--accent-signal);
  --border-signal-thick:4px solid var(--accent-signal);

  --duration-instant:120ms;
  --duration-fast:180ms;
  --duration-normal:260ms;
  --duration-slow:420ms;
  --ease-standard:cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap:cubic-bezier(0.18, 0.89, 0.32, 1.2);
  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
}

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

* {
  margin:0;
  padding:0;
}

html {
  font-size:100%;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
  tab-size:4;
  scroll-behavior:smooth;
  background-color:var(--bg-carbon);
  color:var(--text-ink);
}

body {
  min-height:100vh;
  font-family:var(--ripa-d0b);
  font-size:var(--ripa-546);
  font-weight:400;
  color:var(--text-ink);
  background-color:var(--bg-carbon);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;

  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}

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

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

p,
h1,
h2,
h3,
h4,
h5,
h6 { overflow-wrap:break-word; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:var(--ripa-440);
  font-weight:700;
  line-height:1.1;
  color:var(--text-ink);
  text-transform:uppercase;
  letter-spacing:0.02em;
}

h1 {
  font-size:var(--ripa-3f3);
  line-height:1.05;
}

h2 {
  font-size:var(--ripa-091);
  line-height:1.1;
}

h3 {
  font-size:var(--ripa-923);
  line-height:1.15;
}

h4 {
  font-size:var(--ripa-fcd);
  line-height:1.2;
}

h5 { font-size:var(--ripa-1f4); }

h6 { font-size:var(--ripa-546); }

p {
  font-size:var(--ripa-546);
  line-height:1.6;
  color:var(--text-ink);
  max-width:68ch;
}

p.lead {
  font-size:var(--ripa-1f4);
  line-height:1.55;
  color:var(--text-ink);
}

p.caption {
  font-size:var(--step--1);
  color:var(--text-muted);
}

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

strong,
b {
  font-weight:600;
  color:var(--text-ink);
}

em,
i { font-style:italic; }

code,
kbd,
samp,
pre {
  font-family:var(--ripa-c30);
  font-size:var(--step--1);
}

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

a {
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;

  transition:color var(--duration-fast) var(--ease-standard),
              text-decoration-color var(--duration-fast) var(--ease-standard);
}

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

a:focus-visible {
  outline:2px solid var(--accent-signal);
  outline-offset:3px;
  text-decoration:none;
}

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

table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
}

fieldset { border:none; }

hr {
  border:none;
  border-top:var(--border-thick);
  margin:var(--space-xl) 0;
}

::selection {
  background-color:var(--accent-signal);
  color:var(--bg-carbon);
}

.skip-link {
  position:absolute;
  top:-100px;
  left:1rem;
  z-index:10000;
  padding:var(--space-2xs) var(--space-s);
  background-color:var(--accent-signal);
  color:var(--bg-carbon);
  font-family:var(--ripa-c30);
  font-size:var(--step--1);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border:2px solid var(--text-ink);
  transition:top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  top:1rem;
  outline:3px solid var(--text-ink);
  outline-offset:2px;
}

.sr-only,
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

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

@media (max-width: 360px) {
  .container { padding-inline:0.5rem; }
}

@media (min-width: 768px) {
  .container { padding-inline:var(--space-l); }
}

@media (min-width: 1200px) {
  .container { padding-inline:var(--space-xl); }
}

.container-narrow {
  width:100%;
  max-width:var(--container-narrow);
  margin-inline:auto;

  padding-inline:var(--space-s);
}

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

.reading-column {
  max-width:65ch;
  width:100%;
  min-width:0;
}

.prose > * + * { margin-top:var(--space-s); }

.prose h2 {
  margin-top:var(--space-xl);
  margin-bottom:var(--space-xs);
}

.prose h3 {
  margin-top:var(--space-l);
  margin-bottom:var(--space-2xs);
}

.prose ul,
.prose ol {
  margin-left:var(--space-s);
  margin-top:var(--space-2xs);
}

.prose li + li { margin-top:var(--space-3xs); }

.mono-tag {
  font-family:var(--ripa-c30);
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-muted);
}

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