:root {
  --ground:#fff;
  --surface:#f7f7f8;
  --surface-alt:#efeff1;
  --ink:#111113;
  --ink-muted:#3e4044;
  --ink-quiet:#55575e;
  --line:#e2e4e8;
  --line-dark:#111113;
  --accent:#d9381e;
  --accent-tint:#fbebe8;
  --accent-hover:#b82a14;
  --focus-ring:#111113;

  /* Typography tokens */
  --jeco-d17:'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --jeco-8be:'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --jeco-ecc:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --step--2:clamp(0.72rem, 0.7rem + 0.1vw, 0.8rem);
  --step--1:clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem);
  --jeco-765:  clamp(1.00rem, 0.96rem + 0.2vw, 1.08rem);
  --jeco-933:  clamp(1.18rem, 1.12rem + 0.35vw, 1.3rem);
  --jeco-0a1:  clamp(1.42rem, 1.32rem + 0.6vw, 1.68rem);
  --jeco-0f5:  clamp(1.75rem, 1.58rem + 1.0vw, 2.25rem);
  --jeco-927:  clamp(2.15rem, 1.90rem + 1.6vw, 3.10rem);
  --jeco-ba7:  clamp(2.65rem, 2.25rem + 2.4vw, 4.20rem);
  --step-display:clamp(2.9rem, 2.4rem + 3.8vw, 5.75rem);

  /* Spacing tokens */
  --space-3xs:clamp(0.25rem, 0.23rem + 0.1vw, 0.35rem);
  --space-2xs:clamp(0.5rem, 0.46rem + 0.2vw, 0.65rem);
  --space-xs:  clamp(0.75rem, 0.7rem + 0.25vw, 0.95rem);
  --space-s:   clamp(1.0rem, 0.92rem + 0.4vw, 1.25rem);
  --space-m:   clamp(1.5rem, 1.38rem + 0.6vw, 1.95rem);
  --space-l:   clamp(2.0rem, 1.8rem + 1.0vw, 2.75rem);
  --space-xl:  clamp(3.0rem, 2.6rem + 1.8vw, 4.25rem);
  --space-2xl:clamp(4.25rem, 3.6rem + 2.8vw, 6.5rem);
  --space-3xl:clamp(5.5rem, 4.5rem + 4.2vw, 9.0rem);

  /* Layout geometry */
  --shell-max:1380px;
  --shell-pad:clamp(1.0rem, 0.75rem + 1.5vw, 2.5rem);
  --radius-none:0px;
  --radius-xs:2px;
  --radius-s:4px;
  --radius-full:9999px;

  --ease-out-quad:cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-quart:cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart:cubic-bezier(0.77, 0, 0.175, 1);
  --duration-fast:140ms;
  --duration-normal:240ms;
  --duration-slow:420ms;

  /* View transitions opt-in support */
  view-transition-name:root;
}

@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(--jeco-8be);
  font-size:100%;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family:var(--jeco-d17);
  color:var(--ink);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.03em;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

h1 {
  font-size:var(--jeco-ba7);
  letter-spacing:-0.04em;
}

h2 {
  font-size:var(--jeco-927);
  letter-spacing:-0.035em;
}

h3 {
  font-size:var(--jeco-0f5);
  letter-spacing:-0.025em;
  line-height:1.15;
}

h4 {
  font-size:var(--jeco-0a1);
  letter-spacing:-0.02em;
  line-height:1.25;
}

h5 {
  font-size:var(--jeco-933);
  letter-spacing:-0.01em;
}

h6 {
  font-size:var(--jeco-765);
  letter-spacing:0;
}

p, ul, ol, dl, table, blockquote, figure { margin-block-end:var(--space-s); }

p {
  max-width:68ch;
  font-size:var(--jeco-765);
  color:var(--ink-muted);
  line-height:1.62;
}

p.lead, .standfirst {
  font-size:var(--jeco-933);
  color:var(--ink);
  line-height:1.45;
  font-weight:500;
  max-width:58ch;
}

small, .caption {
  font-size:var(--step--1);
  color:var(--ink-quiet);
  line-height:1.45;
}

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

em, i { font-style:italic; }

a {
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color var(--duration-fast) var(--ease-out-quad), text-decoration-color var(--duration-fast) var(--ease-out-quad);
}

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

}

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

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

figure { margin:0; }

figcaption {
  font-family:var(--jeco-ecc);
  font-size:var(--step--2);
  color:var(--ink-quiet);
  margin-top:var(--space-2xs);
  letter-spacing:0.02em;
  text-transform:uppercase;
}

code, kbd, samp, pre {
  font-family:var(--jeco-ecc);
  font-size:0.9em;
}

ul, ol { padding-left:var(--space-m); }

li { margin-block-end:var(--space-3xs); }

ul[role='list'], ol[role='list'] {
  list-style:none;
  padding-left:0;
}

hr {
  border:0;
  height:1px;
  background-color:var(--line);
  margin-block:var(--space-l);
}

/* Form controls reset */
button, input, select, textarea {
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}

button {
  background:none;
  border:none;
  cursor:pointer;
}

/* Layout primitives */
.shell-container {
  width:100%;
  max-width:var(--shell-max);
  margin-inline:auto;
  padding-inline:var(--shell-pad);
}

.shell-container-wide {
  width:100%;
  max-width:1600px;
  margin-inline:auto;
  padding-inline:var(--shell-pad);
}

.shell-container-narrow {
  width:100%;
  max-width:860px;
  margin-inline:auto;
  padding-inline:var(--shell-pad);
}

.meta-stamp {
  font-family:var(--jeco-ecc);
  font-size:var(--step--2);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-quiet);
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
}

.meta-stamp::before {
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  background-color:var(--accent);
  border-radius:var(--radius-full);
}

/* Skip link for keyboard accessibility */
.skip-link {
  position:absolute;
  top:1rem;
  left:1rem;
  z-index:10000;
  padding:0.85rem 1.4rem;
  background-color:var(--ink);
  color:var(--ground);
  font-family:var(--jeco-ecc);
  font-size:var(--step--1);
  font-weight:500;
  text-decoration:none;
  border:1px solid var(--ground);
  transform:translateY(-200%);

  transition:transform var(--duration-fast) var(--ease-out-quad);
}

.skip-link:focus-visible {
  transform:translateY(0);
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* Icon sprite utility */
.icon {

  width:1.15em;
  height:1.15em;
  fill:currentColor;
  flex-shrink:0;
  display:inline-block;
  vertical-align:-0.15em;
}

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

/* Honeypots visually hidden */
.bot-catcher {
  display:none !important;
  visibility:hidden !important;
}

/* View transitions rules */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation:180ms var(--ease-out-quad) both page-fade-out; }
  ::view-transition-new(root) { animation:260ms var(--ease-out-quart) both page-fade-in; }
  
  @keyframes page-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes page-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .site-header { view-transition-name:main-site-header; }
  .brand { view-transition-name:main-brand-logo; }
}

/* Reduced motion fallbacks */
@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;
  }
}