@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: light;
  --ink: #14120F;
  --paper: #F4F1EA;
  --rojo: #D6291B;
  --gris-100: #DCD7CC;
  --gris-600: #5B564C;
  --linea: #C9C2B4;
  --ink-70: rgba(20,18,15,.72);
  --lega-320: 'Archivo', 'Helvetica Neue', sans-serif;
  --lega-9d5: 'Work Sans', 'Helvetica Neue', sans-serif;
  --lega-d8e: 'IBM Plex Mono', monospace;
  --weight-display: 800;
  --weight-heavy: 900;
  --weight-heading: 700;
  --weight-body: 400;
  --weight-medium: 500;
  --weight-label: 600;
  --text-xs: clamp(.75rem, .72rem + .12vw, .8125rem);
  --text-sm: clamp(.875rem, .83rem + .16vw, .9375rem);
  --text-base: clamp(1rem, .96rem + .16vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.04rem + .32vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.12rem + .85vw, 1.875rem);
  --heading-sm: clamp(1.5rem, 1.14rem + 1.15vw, 2.25rem);
  --heading-md: clamp(1.875rem, 1.25rem + 2vw, 3.5rem);
  --heading-lg: clamp(2.25rem, 1.3rem + 3.2vw, 5rem);
  --heading-xl: clamp(2.75rem, 1.1rem + 5.2vw, 7.25rem);
  --display-size: clamp(3rem, 1.3rem + 6vw, 9rem);
  --leading-display: .98;
  --leading-heading: 1.08;
  --leading-body: 1.65;
  --leading-tight: 1.35;
  --tracking-display: -.055em;
  --tracking-heading: -.035em;
  --tracking-label: .08em;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(3rem, 6vw, 6rem);
  --sidebar-width: 280px;
  --content-max: 1320px;
  --measure: 65ch;
  --measure-tight: 48ch;
  --measure-wide: 78ch;
  --radius: 0;
  --border: 1px solid var(--linea);
  --border-strong: 1px solid var(--ink);
  --rule-width: 4px;
  --control-min: 2.75rem;
  --focus-width: 3px;
  --focus-offset: 4px;
  --shadow-panel: 0 16px 48px rgba(20,18,15,.18);
  --shadow-small: 0 4px 0 var(--ink);
  --duration-instant: 120ms;
  --duration-fast: 160ms;
  --duration-control: 180ms;
  --duration-base: 320ms;
  --duration-reveal: 720ms;
  --duration-scene: 1100ms;
  --ease-standard: cubic-bezier(.2,.65,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-enter: cubic-bezier(.22,.8,.25,1);
  --depth-background: .12;
  --depth-foreground: .24;
  --z-content: 1;
  --z-sidebar: 30;
  --z-drawer: 40;
  --z-chat: 60;
  --z-consent: 70;
  --z-modal: 80;
  --z-skip: 100;
  --consent-height: 0px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block-start: 2rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--lega-9d5); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea { font-synthesis: none; }
main, section, article, aside, header, footer, nav, div, figure, form, fieldset { min-width: 0; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--lega-320); font-weight: var(--weight-display); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: var(--heading-xl); }
h2 { font-size: var(--heading-lg); }
h3 { font-size: var(--heading-sm); }
h4 { font-size: var(--text-xl); }
h5, h6 { font-size: var(--text-lg); }
p { overflow-wrap: break-word; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
button, input, select, textarea, fieldset { border-radius: 0; }
button { cursor: pointer; text-align: center; }
button, [type='button'], [type='submit'] { -webkit-appearance: none; appearance: none; }
button { border: 0; }
button, a, label, summary { -webkit-tap-highlight-color: transparent; }
button, [role='button'] { touch-action: manipulation; }
input, select, textarea { max-width: 100%; }
input { min-width: 0; }
textarea { resize: vertical; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { max-width: 100%; padding: 0; }
img, picture, video, canvas, svg, iframe { max-width: 100%; }
img, video { display: block; height: auto; }
svg { display: inline-block; vertical-align: middle; }
iframe { border: 0; }
figure { min-width: 0; }
figcaption { font-family: var(--lega-d8e); font-size: var(--text-xs); line-height: 1.6; color: var(--gris-600); padding-block-start: var(--space-2); overflow-wrap: anywhere; }
ul, ol { padding-inline-start: 1.4em; }
li + li { margin-block-start: .375rem; }
dt { font-weight: 600; }
dd { margin: 0; }
strong, b { font-weight: 600; }
small { font-size: var(--text-sm); }
sub, sup { font-size: .7em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -.5em; }
sub { bottom: -.25em; }
hr { margin: var(--space-4) 0; border: 0; border-block-start: var(--border); }
address { font-style: normal; overflow-wrap: anywhere; }
code, kbd, samp, pre { font-family: var(--lega-d8e); font-size: .875em; }
code { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow: auto; padding: var(--space-3); background: var(--gris-100); }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
caption { text-align: start; }
summary { cursor: pointer; }
[hidden], template { display: none !important; }
:focus-visible { outline: var(--focus-width) solid var(--rojo); outline-offset: var(--focus-offset); }
:target { scroll-margin-block-start: 2rem; }
::selection { background: var(--rojo); color: var(--paper); }

.site-content { margin-inline-start: var(--sidebar-width); min-width: 0; }
.site-main { min-height: 60vh; }
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 960px; }
.section { padding-block: var(--section-space); }
.section--compact { padding-block: var(--space-6); }
.section--full { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
.section--ink { background: var(--ink); color: var(--paper); --linea: #5B564C; }
.section--paper { background: var(--paper); color: var(--ink); }
.section--red { background: var(--rojo); color: var(--paper); }
.section--ruled { border-block-start: var(--border); }
.grid { display: grid; gap: var(--space-4); }
.grid > *, .flex > *, .cluster > *, .split > * { min-width: 0; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid--ruled { gap: 0; border-block-start: var(--border); border-inline-start: var(--border); }
.grid--ruled > * { padding: var(--space-3); border-inline-end: var(--border); border-block-end: var(--border); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack--small { gap: var(--space-1); }
.stack--large { gap: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.cluster--between { justify-content: space-between; }
.flex { display: flex; }
.measure { max-width: var(--measure); }
.measure--tight { max-width: var(--measure-tight); }
.measure--wide { max-width: var(--measure-wide); }
.flow > * + * { margin-block-start: var(--space-3); }
.align-start { align-items: start; }
.align-end { align-items: end; }
.text-secondary { color: var(--gris-600); }
.text-accent { color: var(--rojo); }
.text-mono, .meta { font-family: var(--lega-d8e); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--lega-d8e); font-size: var(--text-xs); font-weight: 500; line-height: 1.5; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.lead { font-size: var(--text-lg); line-height: 1.5; max-width: 52ch; }
.display { font-family: var(--lega-320); font-size: var(--display-size); font-weight: 900; line-height: var(--leading-display); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.rule { display: block; width: 100%; border: 0; height: var(--rule-width); background: var(--rojo); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: 1.5em; }
.prose > h2 { font-size: var(--heading-md); margin-block-start: 2em; }
.prose > h3 { margin-block-start: 1.75em; }
.prose > :first-child { margin-block-start: 0; }
.prose h2 + p, .prose h3 + p { margin-block-start: 1em; }
.prose ul, .prose ol { padding-inline-start: 1.5em; }
.prose li { padding-inline-start: .25em; }
.prose li::marker { color: var(--rojo); font-weight: 600; }
.prose blockquote { border-inline-start: 4px solid var(--rojo); padding-inline-start: var(--space-3); font-size: var(--text-xl); line-height: 1.45; }
.prose blockquote cite { display: block; margin-block-start: var(--space-2); font-family: var(--lega-d8e); font-size: var(--text-sm); font-style: normal; }
.prose dl { border-block-start: var(--border); }
.prose dt { padding-block-start: var(--space-2); }
.prose dd { padding-block-end: var(--space-2); border-block-end: var(--border); }
.prose figure { margin-block: var(--space-6); }
.sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.scroll-region { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
.media { display: block; width: 100%; overflow: hidden; background: var(--gris-100); }
.media img { width: 100%; height: auto; object-fit: cover; }
.media--landscape { aspect-ratio: 3 / 2; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--landscape img, .media--portrait img { height: 100%; }
.motion-layer, [data-depth] { transform-origin: center; }

@media (min-width: 1920px) {
  :root { --gutter: 3rem; }
  .section--full > .container { width: 100%; }
}
@media (max-width: 1199px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { gap: var(--space-3); }
}
@media (max-width: 1023px) {
  .site-content { margin-inline-start: 0; }
  .site-main { padding-block-start: 5rem; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section--full { min-height: 90svh; }
  :target { scroll-margin-block-start: 5.5rem; }
}
@media (max-width: 767px) {
  .split, .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .grid--12 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .section--full { min-height: auto; padding-block: var(--section-space); }
  .grid--ruled > * { padding: var(--space-3) var(--space-2); }
}
@media (max-width: 359px) {
  :root { --gutter: 1.25rem; --heading-xl: 2.5rem; --display-size: 3rem; }
  .cluster { gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-control: 0ms; --duration-base: 0ms; --duration-reveal: 0ms; --duration-scene: 0ms; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-depth], .motion-layer { transform: none !important; will-change: auto !important; }
}
@media (forced-colors: active) {
  :root { --ink: CanvasText; --paper: Canvas; --rojo: LinkText; --linea: CanvasText; --gris-600: CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
}
@media print {
  :root { --paper: #fff; --ink: #000; --gris-600: #333; --gutter: 0; }
  body { font-size: 11pt; }
  .site-content { margin: 0; }
  .site-main { padding: 0; }
  .section, .section--full { min-height: auto; padding-block: 1.5rem; }
  h1, h2, h3 { break-after: avoid; }
  figure, table, blockquote { break-inside: avoid; }
  a { text-decoration: underline; }
  [data-depth] { transform: none !important; }
}
