/* Anthropic's S-1: a printed preliminary prospectus. Cream stock, Source Serif
   for the reading text, IBM Plex Mono for figures and item numbers, and the
   red "red herring" legend that runs down the cover of real draft prospectuses. */

.xp-anthropic-s1 {
  --paper: #f4efe3;
  --paper-deep: #ebe4d3;
  --ink: #1f1c17;
  --soft: #4f493f;
  --rule: #c9bfa9;
  --red: #a8231b;
  --green: #22643a;
  --blank: #f2d36b;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  max-width: 980px;
  margin: 0 auto;
  padding: 2.5rem 24px 3rem;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.62;
}

.xp-anthropic-s1 a {
  color: var(--red);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.xp-anthropic-s1 a:focus-visible,
.xp-anthropic-s1 button:focus-visible,
.xp-anthropic-s1 summary:focus-visible,
.xp-anthropic-s1 input:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.xp-anthropic-s1 dfn {
  font-style: italic;
  font-weight: 600;
}

.xp-anthropic-s1 .as-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- cover ---------------------------------------------------------------- */

.xp-anthropic-s1 .as-cover {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 28px;
  padding: 36px 36px 32px 20px;
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 5px;
  background: #fbf8f0;
}

.xp-anthropic-s1 .as-legend {
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  border-left: 2px solid var(--red);
  padding-left: 10px;
}

.xp-anthropic-s1 .as-kicker {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
}

.xp-anthropic-s1 .as-title {
  margin: 0 0 18px;
  font-size: clamp(32px, 5vw, 50px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.xp-anthropic-s1 .as-dek {
  margin: 0 0 26px;
  font-size: 20px;
  color: var(--soft);
}

.xp-anthropic-s1 .as-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 26px;
}

.xp-anthropic-s1 .as-fig {
  padding: 16px 18px;
  border-top: 4px solid var(--green);
  background: var(--paper);
}

.xp-anthropic-s1 .as-fig--down {
  border-top-color: var(--red);
}

.xp-anthropic-s1 .as-fig__label,
.xp-anthropic-s1 .as-fig__note {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--soft);
}

.xp-anthropic-s1 .as-fig__num {
  margin: 4px 0;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(38px, 7vw, 60px);
  line-height: 1.05;
  color: var(--green);
}

.xp-anthropic-s1 .as-fig--down .as-fig__num {
  color: var(--red);
}

.xp-anthropic-s1 .as-short {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.xp-anthropic-s1 .as-short h2 {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.xp-anthropic-s1 .as-short p {
  margin: 0;
}

/* ---- video ---------------------------------------------------------------- */

.xp-anthropic-s1 .as-video {
  margin: 40px 0 0;
}

.xp-anthropic-s1 .as-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ink);
  background: #111;
}

.xp-anthropic-s1 .as-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.xp-anthropic-s1 .as-video figcaption {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--soft);
}

/* ---- sections ------------------------------------------------------------- */

.xp-anthropic-s1 .as-sec {
  margin-top: 52px;
  padding-top: 18px;
  border-top: 3px double var(--ink);
}

.xp-anthropic-s1 .as-sec h2 {
  margin: 0 0 16px;
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.15;
  font-weight: 700;
}

.xp-anthropic-s1 .as-item {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
}

.xp-anthropic-s1 .as-sec h3 {
  margin: 34px 0 10px;
  font-size: 23px;
  font-weight: 700;
}

.xp-anthropic-s1 .as-sec p {
  margin: 0 0 14px;
}

.xp-anthropic-s1 .as-fine {
  font-size: 15px;
  font-style: italic;
  color: var(--soft);
}

/* ---- income statement stepper -------------------------------------------- */

.xp-anthropic-s1 .as-stmt {
  margin: 30px 0 10px;
  padding: 22px;
  border: 1px solid var(--ink);
  background: #fbf8f0;
}

.xp-anthropic-s1 .as-stmt__label,
.xp-anthropic-s1 .as-note__label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}

.xp-anthropic-s1 .as-stmt__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.xp-anthropic-s1 .as-stmt__tabs button {
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  cursor: pointer;
}

.xp-anthropic-s1 .as-stmt__tabs button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.xp-anthropic-s1 .as-stmt__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
}

.xp-anthropic-s1 .as-stmt__table th,
.xp-anthropic-s1 .as-stmt__table td {
  padding: 6px 4px;
  border-bottom: 1px dotted var(--rule);
  text-align: left;
  font-weight: 400;
}

.xp-anthropic-s1 .as-stmt__table thead th {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
  border-bottom: 1px solid var(--ink);
}

.xp-anthropic-s1 .as-stmt__table td,
.xp-anthropic-s1 .as-stmt__table .as-stmt__qname {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.xp-anthropic-s1 .as-stmt__sum th,
.xp-anthropic-s1 .as-stmt__sum td {
  font-weight: 700;
  border-top: 1px solid var(--ink);
}

.xp-anthropic-s1 .as-stmt__hot th,
.xp-anthropic-s1 .as-stmt__hot td {
  background: rgba(242, 211, 107, 0.35);
}

.xp-anthropic-s1 .as-stmt__net th,
.xp-anthropic-s1 .as-stmt__net td {
  border-bottom: 3px double var(--ink);
}

.xp-anthropic-s1 .as-stmt td.is-pos {
  color: var(--green);
}

.xp-anthropic-s1 .as-stmt td.is-neg {
  color: var(--red);
}

.xp-anthropic-s1 .as-stmt__bars {
  margin-top: 16px;
}

.xp-anthropic-s1 .as-stmt__bar {
  display: grid;
  grid-template-columns: 17em 1fr 4em;
  gap: 12px;
  align-items: center;
  font-family: var(--mono);
  font-size: 13px;
}

.xp-anthropic-s1 .as-stmt__track {
  position: relative;
  height: 14px;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.xp-anthropic-s1 .as-stmt__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 19%;
  background: var(--red);
  transition: width 0.4s ease;
}

.xp-anthropic-s1 .as-stmt__mark {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 38.46%;
  width: 2px;
  background: var(--ink);
}

.xp-anthropic-s1 .as-nowrap {
  white-space: nowrap;
}

.xp-anthropic-s1 .as-stmt__barval {
  text-align: right;
  font-weight: 600;
}

.xp-anthropic-s1 .as-stmt__say {
  margin: 14px 0 6px;
  font-style: italic;
}

.xp-anthropic-s1 .as-stmt figcaption,
.xp-anthropic-s1 .as-note figcaption {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--soft);
}

/* ---- toy note --------------------------------------------------------------- */

.xp-anthropic-s1 .as-note {
  margin: 26px 0 10px;
  padding: 22px;
  border: 1px dashed var(--ink);
  background: var(--paper-deep);
}

.xp-anthropic-s1 .as-note__setup {
  margin: 0 0 14px;
}

.xp-anthropic-s1 .as-note__control {
  display: block;
  font-family: var(--mono);
  font-size: 15px;
}

.xp-anthropic-s1 .as-note__control output {
  font-weight: 600;
}

.xp-anthropic-s1 .as-note input[type="range"] {
  width: 100%;
  margin: 10px 0 16px;
  accent-color: var(--red);
}

.xp-anthropic-s1 .as-note__out {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 12px;
}

.xp-anthropic-s1 .as-note__out div {
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.xp-anthropic-s1 .as-note__out dt {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--soft);
}

.xp-anthropic-s1 .as-note__out dd {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
}

.xp-anthropic-s1 .as-note__loss dd {
  color: var(--red);
}

.xp-anthropic-s1 .as-note__cash dd {
  color: var(--green);
}

/* ---- blanks, quotes, lists -------------------------------------------------- */

.xp-anthropic-s1 .as-quote {
  margin: 18px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--red);
  background: #fbf8f0;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.7;
}

.xp-anthropic-s1 .as-quote p {
  margin: 0;
}

.xp-anthropic-s1 .as-blank {
  display: inline-block;
  width: 7em;
  border-bottom: 2px solid var(--ink);
  background: var(--blank);
  animation: xp-anthropic-s1-blink 2.4s ease-in-out infinite;
}

@keyframes xp-anthropic-s1-blink {
  0%, 100% { background: var(--blank); }
  50% { background: rgba(242, 211, 107, 0.3); }
}

.xp-anthropic-s1 .as-reacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.xp-anthropic-s1 .as-react {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  background: #fbf8f0;
}

.xp-anthropic-s1 .as-react p {
  margin: 0 0 6px;
}

.xp-anthropic-s1 .as-react__who {
  font-family: var(--mono);
  font-size: 14px;
}

.xp-anthropic-s1 .as-react__who strong {
  font-family: var(--serif);
  font-size: 19px;
}

.xp-anthropic-s1 .as-react__note {
  font-size: 16px;
  color: var(--soft);
}

.xp-anthropic-s1 .as-time {
  list-style: none;
  margin: 0;
  padding: 0;
}

.xp-anthropic-s1 .as-time li {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--rule);
}

.xp-anthropic-s1 .as-time__d {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  padding-top: 3px;
}

.xp-anthropic-s1 details {
  border-bottom: 1px dotted var(--rule);
  padding: 10px 0;
}

.xp-anthropic-s1 summary {
  cursor: pointer;
  font-weight: 600;
}

.xp-anthropic-s1 details p {
  margin: 8px 0 4px;
}

.xp-anthropic-s1 .as-updates {
  list-style: none;
  margin: 0;
  padding: 0;
}

.xp-anthropic-s1 .as-updates time {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  margin-right: 10px;
  color: var(--red);
}

.xp-anthropic-s1 .as-sources ul {
  padding-left: 1.1em;
  font-size: 16px;
}

/* ---- small screens --------------------------------------------------------- */

@media (max-width: 640px) {
  .xp-anthropic-s1 {
    font-size: 18px;
    padding: 1.5rem 16px 2.5rem;
  }

  .xp-anthropic-s1 .as-cover {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 22px 18px;
  }

  .xp-anthropic-s1 .as-legend {
    writing-mode: horizontal-tb;
    transform: none;
    border-left: 0;
    border-bottom: 2px solid var(--red);
    padding: 0 0 8px;
    font-size: 11px;
  }

  .xp-anthropic-s1 .as-figures,
  .xp-anthropic-s1 .as-note__out {
    grid-template-columns: 1fr;
  }

  .xp-anthropic-s1 .as-stmt,
  .xp-anthropic-s1 .as-note {
    padding: 16px 12px;
  }

  .xp-anthropic-s1 .as-stmt__table {
    font-size: 15px;
  }

  .xp-anthropic-s1 .as-stmt__bar {
    grid-template-columns: 1fr 3.5em;
  }

  .xp-anthropic-s1 .as-stmt__barlabel {
    grid-column: 1 / -1;
  }

  .xp-anthropic-s1 .as-time li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xp-anthropic-s1 .as-blank {
    animation: none;
  }

  .xp-anthropic-s1 .as-stmt__fill {
    transition: none;
  }
}