/* =========================================================================
   Tesla en Capas — Swiss / International Typographic style
   Neutral grotesque, strict grid, hairline rules, one strong red accent.
   Light + dark mode. Bespoke tokens (rt-*). No external assets.
   ========================================================================= */

:root {
  /* palette — our own tokens */
  --rt-paper: #f6f5f1;      /* warm off-white */
  --rt-ink: #111111;        /* near-black text */
  --rt-ink-soft: #4a4a46;   /* secondary text */
  --rt-line: #cfcdc4;       /* hairline */
  --rt-line-strong: #111111;
  --rt-accent: #d81f11;     /* Swiss red */
  --rt-accent-ink: #ffffff;
  --rt-panel: #efeee8;      /* subtle raised panel */
  --rt-focus: #0a58ff;

  /* type — neutral grotesque, no serif anywhere */
  --rt-font: "Helvetica Neue", "Helvetica", "Arial", "Liberation Sans", sans-serif;

  /* modular scale */
  --rt-s0: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --rt-s1: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  --rt-s2: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --rt-s3: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --rt-s4: clamp(2.8rem, 1.6rem + 5.5vw, 6.5rem);

  /* grid + rhythm */
  --rt-gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  --rt-pad: clamp(1.1rem, 0.6rem + 2.4vw, 3rem);
  --rt-max: 1240px;
}

:root[data-theme="dark"] {
  --rt-paper: #111111;
  --rt-ink: #f4f3ef;
  --rt-ink-soft: #b3b2ab;
  --rt-line: #3a3a37;
  --rt-line-strong: #f4f3ef;
  --rt-accent: #ff4438;
  --rt-accent-ink: #111111;
  --rt-panel: #1b1b1a;
  --rt-focus: #7ea2ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rt-paper: #111111;
    --rt-ink: #f4f3ef;
    --rt-ink-soft: #b3b2ab;
    --rt-line: #3a3a37;
    --rt-line-strong: #f4f3ef;
    --rt-accent: #ff4438;
    --rt-accent-ink: #111111;
    --rt-panel: #1b1b1a;
    --rt-focus: #7ea2ff;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--rt-font);
  font-size: var(--rt-s0);
  line-height: 1.55;
  color: var(--rt-ink);
  background: var(--rt-paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; margin: 0 0 0.5em; }
h1 { font-size: var(--rt-s4); letter-spacing: -0.035em; }
h2 { font-size: var(--rt-s3); }
h3 { font-size: var(--rt-s1); letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: inherit; text-underline-offset: 3px; }
strong { font-weight: 700; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }
img, svg { max-width: 100%; height: auto; }

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

.rt-skip {
  position: absolute; left: -999px; top: 0;
  background: var(--rt-ink); color: var(--rt-paper);
  padding: 0.6rem 1rem; z-index: 100;
}
.rt-skip:focus { left: 0; }

/* ---- masthead ---------------------------------------------------------- */
.rt-top {
  border-bottom: 2px solid var(--rt-line-strong);
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--rt-paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(6px);
}
.rt-top__bar {
  max-width: var(--rt-max); margin: 0 auto;
  padding: 0.55rem var(--rt-pad);
  display: flex; align-items: center; gap: var(--rt-gap);
}
.rt-top__mark {
  display: flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: inherit; font-weight: 800;
  letter-spacing: -0.03em; line-height: 0.92; font-size: 0.85rem;
  text-transform: uppercase;
}
.rt-top__sq { width: 20px; height: 20px; background: var(--rt-accent); flex: none; }
.rt-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 1.4vw, 1.4rem); }
.rt-nav__link {
  text-decoration: none; font-weight: 600; font-size: 0.9rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--rt-ink-soft);
  padding: 0.2rem 0; border-bottom: 2px solid transparent;
}
.rt-nav__link:hover { color: var(--rt-ink); }
.rt-nav__link.is-current { color: var(--rt-ink); border-bottom-color: var(--rt-accent); }
.rt-themebtn {
  border: 1.5px solid var(--rt-line-strong); background: transparent; color: inherit;
  width: 34px; height: 34px; border-radius: 0; cursor: pointer; flex: none; font-size: 1rem;
}
.rt-themebtn:hover { background: var(--rt-ink); color: var(--rt-paper); }

/* ---- main shell + grid ------------------------------------------------- */
.rt-shell { max-width: var(--rt-max); margin: 0 auto; padding: 0 var(--rt-pad); }

/* lede (first screen) */
.rt-lede {
  display: grid; grid-template-columns: 1fr; gap: var(--rt-gap);
  padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(1.5rem, 4vw, 3rem);
  border-bottom: 2px solid var(--rt-line-strong);
}
@media (min-width: 900px) {
  .rt-lede { grid-template-columns: 1.35fr 1fr; align-items: end; }
}
.rt-lede__kicker {
  font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 700; color: var(--rt-accent); margin: 0 0 1rem;
}
.rt-lede__title { margin: 0 0 0.4em; }
.rt-lede__title em { font-style: normal; color: var(--rt-accent); }
.rt-lede__sub { font-size: var(--rt-s1); color: var(--rt-ink-soft); max-width: 40ch; }

/* the typographic code block (bespoke) */
.rt-plate {
  border: 2px solid var(--rt-line-strong);
  background: var(--rt-panel);
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.7rem;
  min-height: 300px; /* fixed-ish box → zero CLS on code rotation */
}
.rt-plate__label {
  margin: 0; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 700; color: var(--rt-ink-soft);
}
.rt-plate__glyph {
  margin: 0; font-weight: 800; letter-spacing: -0.04em;
  font-size: clamp(1.8rem, 1rem + 4.5vw, 3.4rem);
  line-height: 1.02; word-break: break-all; min-height: 1.05em;
  color: var(--rt-accent);
}
.rt-plate__url {
  margin: 0; font-size: 0.85rem; color: var(--rt-ink-soft);
  word-break: break-all; border-top: 1px solid var(--rt-line); padding-top: 0.6rem;
}
.rt-plate__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; }
.rt-plate__stamp { margin: 0; font-size: 0.8rem; color: var(--rt-ink-soft); }

/* copy control — understated underline/rule style */
.rt-copy {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700;
  background: var(--rt-accent); color: var(--rt-accent-ink);
  border: 2px solid var(--rt-accent); padding: 0.7rem 1.1rem;
  letter-spacing: -0.01em; flex: 1 1 auto; min-width: 140px;
}
.rt-copy:hover { filter: brightness(1.06); }
.rt-copy.is-done { background: var(--rt-ink); border-color: var(--rt-ink); color: var(--rt-paper); }

/* buttons / links */
.rt-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none;
  font-weight: 700; letter-spacing: -0.01em; padding: 0.7rem 1.1rem;
  border: 2px solid var(--rt-line-strong); background: transparent; color: inherit;
}
.rt-btn--solid { background: var(--rt-ink); color: var(--rt-paper); border-color: var(--rt-ink); }
.rt-btn--line:hover { background: var(--rt-ink); color: var(--rt-paper); }
.rt-btn--solid:hover { filter: brightness(1.15); }
.rt-btn__arrow { font-weight: 400; }
.rt-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0; }

/* breadcrumbs */
.rt-crumbs { padding: 1rem 0 0; font-size: 0.82rem; }
.rt-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.rt-crumbs a { color: var(--rt-ink-soft); }
.rt-crumbs [aria-current="page"] { color: var(--rt-ink); font-weight: 600; }
.rt-crumbs__sep { color: var(--rt-line); }

/* numbered strata (sections) */
.rt-strata {
  display: grid; grid-template-columns: 1fr; gap: var(--rt-gap);
  padding: clamp(1.6rem, 4vw, 3rem) 0;
}
@media (min-width: 800px) { .rt-strata { grid-template-columns: 120px 1fr; } }
.rt-strata--rule { border-top: 1px solid var(--rt-line); }
.rt-index { line-height: 1; }
.rt-marker {
  font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -0.05em;
  color: var(--rt-accent); display: block;
}
.rt-strata__body > :first-child { margin-top: 0; }
.rt-strata__body ul, .rt-strata__body ol { max-width: 68ch; padding-left: 1.1rem; }
.rt-strata__body li { margin: 0.35em 0; }

/* two-up columns inside a strata */
.rt-cols { display: grid; gap: var(--rt-gap); }
@media (min-width: 720px) { .rt-cols--2 { grid-template-columns: 1fr 1fr; } }

/* data tables */
.rt-tabledata { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.92rem; }
.rt-tabledata caption { text-align: left; font-size: 0.8rem; color: var(--rt-ink-soft); margin-bottom: 0.5rem; }
.rt-tabledata th, .rt-tabledata td {
  text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--rt-line);
  vertical-align: top;
}
.rt-tabledata thead th { border-bottom: 2px solid var(--rt-line-strong); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em; }
.rt-tablewrap { overflow-x: auto; }

/* badges */
.rt-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 1rem; padding: 0; list-style: none; }
.rt-badge {
  border: 1.5px solid var(--rt-line-strong); padding: 0.25rem 0.6rem;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.rt-badge--accent { background: var(--rt-accent); color: var(--rt-accent-ink); border-color: var(--rt-accent); }

/* incentive stack (first-screen mechanic) — three layers + operators + total */
.rt-lede--stack { align-items: start; }
.rt-stack { display: grid; gap: 0.4rem; margin: 1.5rem 0 0; }
.rt-layer {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center;
  border: 2px solid var(--rt-line-strong); background: var(--rt-paper);
  padding: 0.7rem 0.9rem; text-decoration: none; color: inherit;
}
.rt-layer:hover { background: var(--rt-panel); }
.rt-layer__n { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.05em; color: var(--rt-accent); line-height: 1; }
.rt-layer__t { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.rt-layer__t strong { font-weight: 800; letter-spacing: -0.01em; }
.rt-layer__t span { font-size: 0.82rem; color: var(--rt-ink-soft); }
.rt-layer__tag { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--rt-ink-soft); text-align: right; }
.rt-stack__op { text-align: center; font-weight: 800; font-size: 1.15rem; color: var(--rt-accent); line-height: 1; }
.rt-stack__sum {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.3rem 0.8rem;
  border: 2px solid var(--rt-accent); background: var(--rt-accent); color: var(--rt-accent-ink);
  padding: 0.75rem 0.9rem;
}
.rt-stack__sum-lead { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.rt-stack__sum-note { font-size: 0.78rem; font-weight: 700; opacity: 0.92; }
@media (max-width: 560px) {
  .rt-layer { grid-template-columns: auto 1fr; }
  .rt-layer__tag { display: none; }
}

/* note / disclosure */
.rt-note {
  border-left: 3px solid var(--rt-accent); background: var(--rt-panel);
  padding: 1rem 1.2rem; margin: 1.5rem 0; font-size: 0.9rem;
}
.rt-note p:last-child { margin-bottom: 0; }

/* HowTo steps */
.rt-steps { list-style: none; counter-reset: step; padding: 0; margin: 1rem 0; }
.rt-step {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start;
  padding: 1rem 0; border-top: 1px solid var(--rt-line);
}
.rt-step::before {
  counter-increment: step; content: counter(step);
  font-weight: 800; font-size: 1.6rem; color: var(--rt-accent); letter-spacing: -0.04em;
  line-height: 1;
}
.rt-step h3 { margin: 0 0 0.3em; }
.rt-step p { margin: 0; }

/* FAQ */
.rt-faq__item { border-top: 1px solid var(--rt-line); padding: 1.1rem 0; }
.rt-faq__q { margin: 0 0 0.4em; }
.rt-faq__a p:last-child { margin-bottom: 0; }

/* byline */
.rt-byline { font-size: 0.85rem; color: var(--rt-ink-soft); }
.rt-byline__date { display: inline-block; }

/* blog list */
.rt-posts { display: grid; gap: 0; margin: 1rem 0; list-style: none; padding: 0; }
.rt-postitem { border-top: 1px solid var(--rt-line); padding: 1.4rem 0; display: grid; gap: 0.3rem; }
.rt-postitem:last-child { border-bottom: 1px solid var(--rt-line); }
.rt-postitem a { text-decoration: none; }
.rt-postitem h3 { margin: 0; }
.rt-postitem a:hover h3 { color: var(--rt-accent); }
.rt-postitem__meta { font-size: 0.78rem; color: var(--rt-ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }

/* article prose */
.rt-article { padding-bottom: 2rem; }
.rt-article__head { padding: 1.5rem 0 1rem; border-bottom: 2px solid var(--rt-line-strong); }
.rt-prose { max-width: 72ch; padding: 1.5rem 0; }
.rt-prose h2 { font-size: var(--rt-s2); margin-top: 1.6em; }
.rt-prose h3 { margin-top: 1.4em; }
.rt-prose ul, .rt-prose ol { padding-left: 1.2rem; }

/* figures / svg illustrations */
.rt-figure { border: 2px solid var(--rt-line-strong); background: var(--rt-panel); padding: 0; overflow: hidden; }
.rt-figure svg { display: block; width: 100%; height: auto; }
.rt-figure--photo img { display: block; width: 100%; height: auto; }
.rt-figcaption { font-size: 0.78rem; color: var(--rt-ink-soft); padding: 0.5rem 0.8rem; border-top: 1px solid var(--rt-line); margin: 0; }
.rt-figcaption__credit { opacity: 0.8; }

/* footer */
.rt-foot { border-top: 2px solid var(--rt-line-strong); margin-top: 2rem; }
.rt-foot__grid {
  max-width: var(--rt-max); margin: 0 auto; padding: clamp(1.6rem, 4vw, 3rem) var(--rt-pad) 1rem;
  display: grid; gap: var(--rt-gap); grid-template-columns: 1fr;
}
@media (min-width: 720px) { .rt-foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.rt-foot__lead { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.rt-foot__note { font-size: 0.85rem; color: var(--rt-ink-soft); }
.rt-foot__col { display: flex; flex-direction: column; gap: 0.35rem; }
.rt-foot__col a { color: var(--rt-ink-soft); text-decoration: none; font-size: 0.9rem; }
.rt-foot__col a:hover { color: var(--rt-ink); }
.rt-foot__h { font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; margin: 0 0 0.3rem; }
.rt-foot__legal { border-top: 1px solid var(--rt-line); }
.rt-foot__legal p {
  max-width: var(--rt-max); margin: 0 auto; padding: 1rem var(--rt-pad) 2rem;
  font-size: 0.78rem; color: var(--rt-ink-soft);
}

/* consent banner (only rendered/shown when analytics configured) */
.rt-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--rt-ink); color: var(--rt-paper);
  padding: 1rem var(--rt-pad); display: none;
  gap: 1rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem;
}
.rt-consent.is-open { display: flex; }
.rt-consent p { margin: 0; max-width: 60ch; }
.rt-consent a { color: var(--rt-paper); }
.rt-consent__btns { display: flex; gap: 0.5rem; margin-left: auto; }
.rt-consent button {
  font: inherit; font-weight: 700; cursor: pointer; padding: 0.5rem 0.9rem;
  border: 2px solid var(--rt-paper); background: transparent; color: var(--rt-paper);
}
.rt-consent button.is-primary { background: var(--rt-accent); border-color: var(--rt-accent); color: var(--rt-accent-ink); }

/* utilities */
.rt-eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--rt-ink-soft); }
.rt-lead-p { font-size: var(--rt-s1); color: var(--rt-ink-soft); max-width: 60ch; }
.rt-source { font-size: 0.82rem; color: var(--rt-ink-soft); }
.rt-source ul { padding-left: 1.1rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}