/* The Tesla Record — one stylesheet, hand written, no build step.
   Register: patent plate and uncoated paper. Light theme only in v1. */

/* ---------------------------------------------------------------- fonts */

@font-face{
  font-family:"Source Serif 4";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";
  font-style:italic; font-weight:400; font-display:swap;
  src:url("/fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Source Serif 4";
  font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

/* --------------------------------------------------------------- tokens */

:root{
  --paper:      #FAF8F4;
  --paper-sunk: #F2EEE7;
  --ink:        #15171B;
  --ink-soft:   #55585F;
  --rule:       #D9D4C9;
  --copper:     #8A4A22;
  --copper-lit: #B87333;
  --verdigris:  #2E5D55;
  --blueprint:  #1B3A5C;

  --serif: "Source Serif 4", Charter, Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 41rem;
  --wide:    58rem;
  --shell:   78rem;

  --rail:    150px;
  --header:  64px;
}

/* ---------------------------------------------------------------- reset */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.1875rem;
  line-height:1.62;
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
}
@media (max-width:600px){ body{ font-size:1.0625rem } }

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

a{ color:var(--copper); text-decoration:underline; text-underline-offset:.14em;
   text-decoration-thickness:.055em; text-decoration-color:var(--rule) }
a:hover{ color:var(--copper-lit); text-decoration-color:currentColor }
a:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:2px }

:target{ scroll-margin-top:125px }

hr{ border:0; border-top:1px solid var(--rule); margin:2.5rem 0 }

::selection{ background:#EDE3D6 }

.skip{
  position:absolute; left:-9999px; top:0;
  font-family:var(--mono); font-size:.8rem; padding:.6rem 1rem;
  background:var(--ink); color:var(--paper); z-index:60;
}
.skip:focus{ left:0 }

/* ---------------------------------------------------------------- shell */

.shell{ max-width:var(--shell); margin:0 auto; padding:0 1.5rem }
@media (max-width:600px){ .shell{ padding:0 1.15rem } }

/* --------------------------------------------------------------- header */

.site-header{
  position:sticky; top:0; z-index:50;
  height:var(--header);
  display:flex; align-items:center;
  background:rgba(250,248,244,.94);
  backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid var(--rule);
}
.site-header .shell{
  width:100%; display:flex; align-items:center; gap:1.5rem;
  justify-content:space-between;
}
.brand{
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--ink); flex:none;
}
.brand:hover{ color:var(--ink) }
.brand svg{ width:24px; height:24px; flex:none; display:block }
.brand b{
  font-family:var(--serif); font-weight:600; font-size:.95rem;
  letter-spacing:.08em; text-transform:uppercase;
  font-variant-caps:all-small-caps;
}

.site-nav{ display:flex; gap:1.15rem; align-items:center; min-width:0 }
.site-nav a{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
  text-decoration:none; padding:.2rem 0;
  border-bottom:1px solid transparent;
}
.site-nav a:hover{ color:var(--copper); border-bottom-color:var(--copper) }
.site-nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--copper) }

/* Below 760px the wordmark in the header is dropped and the ring alone
   carries the link home; the masthead directly underneath repeats the name
   at full size, so nothing is lost and all four sections stay reachable. */
@media (max-width:760px){
  .brand b{ display:none }
  .site-header .shell{ gap:1rem }
  .site-nav{ gap:.85rem }
  .site-nav a{ font-size:.66rem; letter-spacing:.05em }
}
@media (max-width:410px){
  .site-nav{ gap:.7rem }
  .site-nav a{ font-size:.62rem; letter-spacing:.03em }
}

/* ------------------------------------------------------------- masthead */

.masthead{
  padding:3.25rem 0 1.75rem;
  border-bottom:1px solid var(--rule);
  margin-bottom:2.75rem;
}
.masthead.compact{ padding:1.75rem 0 1rem; margin-bottom:2rem }
.masthead h1,.masthead .wordmark{
  margin:0;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.75rem,4.6vw,2.6rem);
  letter-spacing:.08em; line-height:1.1;
  font-variant-caps:all-small-caps; text-transform:lowercase;
}
@supports not (font-variant-caps:all-small-caps){
  .masthead h1,.masthead .wordmark{ text-transform:uppercase; font-size:clamp(1.4rem,3.4vw,2rem) }
}
.masthead .strap{
  margin:.85rem 0 0;
  padding-top:.7rem;
  border-top:1px solid var(--copper);
  font-family:var(--mono); font-weight:400;
  font-size:.7rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft);
}
@media (max-width:520px){ .masthead .strap{ font-size:.63rem; letter-spacing:.07em } }

/* ---------------------------------------------------------------- page  */

main{ display:block }

.prose{ max-width:var(--measure) }
.prose p{ margin:0 0 1.15rem }
.prose > :first-child{ margin-top:0 }

/* the mono left rail, ≥1080px */
.layout{ display:block }
@media (min-width:1080px){
  .layout{
    display:grid;
    grid-template-columns:var(--rail) minmax(0,var(--wide));
    column-gap:3.25rem;
    align-items:start;
  }
  .layout > .rail{ position:sticky; top:calc(var(--header) + 2rem) }
  .layout > .body{ min-width:0 }
}
.rail{
  font-family:var(--mono); font-size:.72rem; line-height:1.7;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);
  border-top:1px solid var(--rule); padding-top:.6rem; margin-bottom:1.75rem;
}
.rail b{ display:block; font-weight:600; color:var(--copper) }
.rail span{ display:block }
@media (min-width:1080px){ .rail{ margin-bottom:0 } }

/* ------------------------------------------------------------ headings  */

h1.page-title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2rem,5vw,3.1rem); line-height:1.10; letter-spacing:-.01em;
  margin:0 0 1rem; max-width:var(--measure);
}
.deck{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.3125rem; line-height:1.4; color:var(--ink-soft);
  margin:0 0 1.6rem; max-width:var(--measure);
}
@media (max-width:600px){ .deck{ font-size:1.15rem } }

h2{
  font-family:var(--serif); font-weight:600;
  font-size:1.5rem; line-height:1.22; letter-spacing:-.005em;
  margin:0 0 20px; max-width:var(--measure);
}
.record > h2,.epoch > h2{ max-width:none }
p + h2{ margin-top:50px }

/* The mono section label. It is written as h2.label wherever it sits
   directly under the page h1 — the outline must not skip a level — and as
   a plain h3 where it genuinely nests one deeper. Both look the same. */
h3,h2.label{
  font-family:var(--mono); font-weight:600;
  font-size:.78rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); margin:2.5rem 0 .9rem; max-width:none;
  line-height:1.62;
}

/* The run-in section heading. It is written as h2 so a 5,000-word article
   still has an outline a screen reader can jump through, and it takes the
   metrics of the paragraph it used to be so the page reads unchanged. */
.runin{
  font-variant-caps:all-small-caps; letter-spacing:.04em; font-weight:600;
}
h2.runin{
  font-family:inherit; font-size:inherit; line-height:inherit;
  margin:0 0 1.15rem; max-width:var(--measure);
}
@supports not (font-variant-caps:all-small-caps){
  .runin{ text-transform:uppercase; font-size:.92em }
  h2.runin{ font-size:.92em }
}

.kicker{
  font-family:var(--mono); font-weight:600; font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--copper);
  margin:0 0 .6rem; display:block;
}
.kicker a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--rule) }
.kicker a:hover{ border-bottom-color:var(--copper) }

.meta{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.05em;
  color:var(--ink-soft); margin:0 0 1.5rem;
}

/* --------------------------------------------------------------- lists  */

.prose ul,.prose ol{ margin:0 0 1.15rem; padding-left:1.35rem }
.prose li{ margin:0 0 .5rem }
.prose ul{ list-style:none; padding-left:1.15rem }
.prose ul > li{ position:relative }
.prose ul > li::before{
  content:"—"; position:absolute; left:-1.15rem; color:var(--copper);
  font-family:var(--mono); font-size:.8em; top:.12em;
}

/* -------------------------------------------------------------- figures */

figure{ margin:2.25rem 0; max-width:var(--wide) }
figure.plain{ margin:1.75rem 0 }
figure .well{
  background:var(--paper-sunk); border:1px solid var(--rule);
  padding:1.5rem; display:flex; justify-content:center;
}
figure.hero{ margin:2rem 0 2.5rem }
figure.hero img{ width:100%; border:1px solid var(--rule) }
figcaption{
  font-family:var(--mono); font-size:.8125rem; line-height:1.5;
  color:var(--ink-soft); max-width:var(--measure);
}
figcaption::before{
  content:""; display:block; height:1.25rem; width:100%;
  border-left:1px solid var(--copper); border-bottom:1px solid var(--copper);
  margin:.625rem 0 .3125rem;
}
figcaption b{ color:var(--ink); font-weight:600 }

/* ------------------------------------------------------- quotes / notes */

blockquote{
  margin:1.75rem 0; padding:0 0 0 1.15rem;
  border-left:3px solid var(--rule);
  font-size:1.0625em;
}
blockquote p{ margin:0 0 .6rem }
.provenance{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.03em;
  color:var(--ink-soft); margin:.35rem 0 0;
}

sup.ref{ font-family:var(--mono); color:var(--copper); font-size:.7em }
.footnote:target,sup.ref:target{ scroll-margin-top:125px }

code,.pat{
  font-family:var(--mono); font-size:.88em; letter-spacing:.01em;
  white-space:nowrap;
}
.pat a{ text-decoration-color:var(--rule) }

/* --------------------------------------------------------- apparatus    */

.apparatus{
  border:1px solid var(--rule); background:var(--paper-sunk);
  padding:1.25rem 1.35rem; margin:2.25rem 0;
  font-family:var(--mono); font-size:.8125rem; line-height:1.6;
  max-width:var(--measure);
}
.apparatus h3,.apparatus h2.label{ margin:0 0 .85rem; color:var(--ink) }
.apparatus p{ margin:0 0 .7rem }
.apparatus p:last-child{ margin-bottom:0 }

.tag{
  display:inline-block; font-family:var(--mono); font-weight:600;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--verdigris); border:1px solid var(--verdigris);
  padding:.1rem .4rem; white-space:nowrap;
}

/* --------------------------------------------------------- record rail  */

.record{ margin:3rem 0; max-width:var(--wide) }
.record > h2{
  font-family:var(--mono); font-weight:600; font-size:.78rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--verdigris);
  border-bottom:1px solid var(--verdigris); padding-bottom:.5rem; margin:0 0 0;
}
.record ol{ list-style:none; margin:0; padding:0 }
.record li{
  border-bottom:1px solid var(--rule);
  padding:.95rem 0;
  display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:.15rem 1.25rem;
}
.record .claim{
  font-family:var(--serif); font-size:1rem; line-height:1.45;
  grid-column:2;
}
.record .status{
  font-family:var(--mono); font-weight:600; font-size:.7rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--verdigris);
  grid-column:1; grid-row:1; padding-top:.2rem;
}
.record .verdict{
  grid-column:2; font-size:.95rem; color:var(--ink-soft); line-height:1.5;
}
.record .verdict a{ color:var(--copper) }
@media (max-width:640px){
  .record li{ grid-template-columns:1fr }
  .record .status,.record .claim,.record .verdict{ grid-column:1 }
  .record .status{ grid-row:auto; padding:0 0 .3rem }
}

/* ---------------------------------------------------------- index rows  */

.index{ list-style:none; margin:0; padding:0; max-width:var(--wide) }
.index > li{ border-top:1px solid var(--rule); padding:1.6rem 0 }
.index > li:first-child{ border-top:0; padding-top:0 }
.index h3,.index h2{
  font-family:var(--serif); font-weight:600; text-transform:none;
  letter-spacing:-.005em; font-size:1.375rem; line-height:1.25;
  color:var(--ink); margin:0 0 .4rem; max-width:none;
}
.index h3 a,.index h2 a{ color:inherit; text-decoration:none }
.index h3 a:hover,.index h2 a:hover{ color:var(--copper) }
.index p{ margin:0; color:var(--ink-soft); font-size:1.0625rem; line-height:1.5 }
.index .meta{ margin:.55rem 0 0 }

/* lead item */
.lead{ margin:0 0 3rem; max-width:var(--wide) }
.lead h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.85rem,4.4vw,2.6rem); line-height:1.12; letter-spacing:-.012em;
  margin:0 0 .7rem;
}
.lead h2 a{ color:inherit; text-decoration:none }
.lead h2 a:hover{ color:var(--copper) }
.lead .deck{ margin-bottom:.9rem }

/* ------------------------------------------------------------- tables   */

.table-wrap{ overflow-x:auto; margin:2rem 0; max-width:var(--wide) }
table{
  border-collapse:collapse; width:100%;
  font-family:var(--mono); font-size:.8125rem; line-height:1.45;
}
caption{
  font-family:var(--mono); font-size:.75rem; line-height:1.5; color:var(--ink-soft);
  text-align:left; padding-bottom:.6rem; max-width:var(--measure);
}
th,td{ text-align:left; padding:.55rem .75rem; border-bottom:1px solid var(--rule); vertical-align:top }
th{
  font-weight:600; font-size:.7rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--ink);
  white-space:nowrap;
}
tbody tr:nth-child(even){ background:var(--paper-sunk) }
td.num{ white-space:nowrap }

/* --------------------------------------------------------------- forms  */

form.contact{ max-width:var(--measure); margin:2rem 0 }
form.contact label{
  display:block; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft);
  margin:1.35rem 0 .4rem;
}
form.contact input[type=text],
form.contact input[type=url],
form.contact textarea{
  width:100%; font-family:var(--serif); font-size:1.0625rem; line-height:1.5;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:0; padding:.65rem .75rem;
}
form.contact input:focus,form.contact textarea:focus{
  outline:2px solid var(--copper); outline-offset:1px; border-color:var(--copper);
}
form.contact textarea{ min-height:11rem; resize:vertical }
form.contact .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
form.contact button{
  margin-top:1.6rem; font-family:var(--mono); font-weight:600;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); background:var(--ink);
  border:1px solid var(--ink); padding:.7rem 1.4rem; cursor:pointer;
}
form.contact button:hover{ background:var(--copper); border-color:var(--copper) }
form.contact .hint{
  font-family:var(--mono); font-size:.75rem; color:var(--ink-soft);
  margin:.4rem 0 0; line-height:1.5;
}

/* ------------------------------------------------------------- timeline */

.epoch{ margin:0 0 3.25rem; max-width:var(--wide) }
.epoch > h2{
  font-family:var(--serif); font-weight:600; font-size:1.6rem;
  margin:0 0 .35rem;
}
.epoch > .years{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--copper); margin:0 0 1rem;
  border-bottom:1px solid var(--rule); padding-bottom:.5rem;
}
.entries{ list-style:none; margin:0; padding:0 }
.entries > li{
  display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:.2rem 1.5rem;
  padding:.7rem 0; border-bottom:1px solid var(--rule);
}
.entries .when{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.03em;
  color:var(--ink-soft); padding-top:.25rem;
}
.entries .what{ font-size:1.0625rem; line-height:1.5 }
@media (max-width:640px){
  .entries > li{ grid-template-columns:1fr }
  .entries .when{ padding:0 0 .15rem }
}

/* --------------------------------------------------------------- promo  */

.promo{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  gap:1.5rem; margin:3.25rem 0; max-width:var(--wide);
}
.promo > a{
  display:block; text-decoration:none; color:var(--ink);
  border:1px solid var(--rule); background:var(--paper-sunk);
  padding:1.25rem 1.35rem;
}
.promo > a:hover{ border-color:var(--copper) }
.promo b{
  display:block; font-family:var(--mono); font-weight:600; font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--copper);
  margin:0 0 .5rem;
}
.promo span{ display:block; font-size:1rem; line-height:1.45; color:var(--ink-soft) }

/* -------------------------------------------------------------- footer  */

.site-footer{
  margin-top:5rem; border-top:1px solid var(--rule);
  padding:2.5rem 0 4rem;
  font-family:var(--mono); font-size:.76rem; line-height:1.7;
  color:var(--ink-soft); letter-spacing:.03em;
}
.site-footer .cols{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:1.75rem;
}
.site-footer b{
  display:block; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; font-size:.7rem; color:var(--ink); margin-bottom:.5rem;
}
.site-footer ul{ list-style:none; margin:0; padding:0 }
.site-footer a{ color:var(--ink-soft); text-decoration:none }
.site-footer a:hover{ color:var(--copper) }
.site-footer .colophon{
  margin-top:2.25rem; padding-top:1.25rem; border-top:1px solid var(--rule);
  max-width:var(--measure);
}

/* ---------------------------------------------------------------- misc  */

.center{ text-align:center }
.muted{ color:var(--ink-soft) }
.nowrap{ white-space:nowrap }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media print{
  .site-header,.site-nav,.promo{ display:none }
  body{ background:#fff; font-size:11pt }
}

/* ------------------------------------------------------------ diagrams */
/* Blueprint line work on sunk paper. Flat, labelled in mono, no shading,
   no perspective, no people, no photographic pretence. */

.diagram{ display:block; width:100%; height:auto }
.diagram .line{ fill:none; stroke:var(--blueprint); stroke-width:1.4 }
.diagram .thin{ fill:none; stroke:var(--blueprint); stroke-width:1 }
.diagram .heavy{ fill:none; stroke:var(--blueprint); stroke-width:2.6; stroke-linecap:round }
.diagram .dash{ fill:none; stroke:var(--copper); stroke-width:1.4; stroke-dasharray:7 5 }
.diagram .callout{ fill:var(--paper-sunk); stroke:var(--copper); stroke-width:1.2 }
.diagram text{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  fill:var(--ink-soft); text-transform:uppercase;
}
.diagram text.n{ font-size:10px; fill:var(--copper); letter-spacing:0; text-transform:none }
.diagram text.key{ font-size:10.5px; letter-spacing:.07em }

/* ------------------------------------------------------- sortable table */

th button.sortbtn{
  font:inherit; color:inherit; background:none; border:0; padding:0;
  letter-spacing:inherit; text-transform:inherit; cursor:pointer;
}
th button.sortbtn:hover{ color:var(--copper) }
th button.sortbtn:focus-visible{ outline:2px solid var(--copper); outline-offset:2px }
th[aria-sort="ascending"] button.sortbtn::after{ content:"\2191"; margin-left:.35em; color:var(--copper) }
th[aria-sort="descending"] button.sortbtn::after{ content:"\2193"; margin-left:.35em; color:var(--copper) }

/* ------------------------------------------------------------- notes    */

.note{
  font-family:var(--mono); font-size:.8125rem; line-height:1.6;
  color:var(--ink-soft); max-width:var(--measure);
}
/* ------------------------------------------------------------- sources  */
/* Closing citation block: 5-15 specific, dated items, split into
   Primary documents and Further reading. Every article carries one. */

.sources{
  max-width:var(--measure); margin:3rem 0 0;
  border-top:1px solid var(--rule); padding-top:1.25rem;
  font-family:var(--mono); font-size:.8125rem; line-height:1.6;
  color:var(--ink-soft);
}
.sources h3,.sources h2.label{ margin:1.75rem 0 .7rem }
.sources h3:first-child,.sources h2.label:first-child{ margin-top:0 }
.sources ul{ list-style:none; margin:0; padding:0 }
.sources li{ margin:0 0 .7rem; padding-left:1.15rem; position:relative }
.sources li::before{ content:"—"; position:absolute; left:0; color:var(--copper) }
.sources b{ color:var(--ink) }
.sources i{ font-family:var(--serif); font-size:1.08em }

/* ----------------------------------------------------------- footnotes  */
/* Numbered page-exact notes, on the footnoted flagships only. */

ol.footnotes{
  font-family:var(--mono); font-size:.8125rem; line-height:1.65;
  color:var(--ink-soft); max-width:var(--measure);
  margin:0 0 2.5rem; padding-left:1.9rem; list-style:decimal;
}
ol.footnotes > li{ margin:0 0 .8rem }
ol.footnotes > li::marker{ color:var(--copper) }
ol.footnotes i{ font-family:var(--serif); font-size:1.08em }
.footnote:target{ background:var(--paper-sunk); box-shadow:0 0 0 .4rem var(--paper-sunk) }

table td:last-child{ white-space:nowrap }

.table-wrap:focus-visible{ outline:2px solid var(--copper); outline-offset:3px }
.table-wrap + .prose{ margin-top:2rem }