/* Debrowser journal: a long read for Reader mode. Site tokens via custom
   properties; served as written. The masthead uses the ticket material
   (ultramarine to ultramarine 900), matching the theme-color meta #011c79. */

:root {
  --essay-measure: 38rem;
  --essay-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --essay-masthead: linear-gradient(
    160deg,
    var(--brand-ultramarine) 0%,
    var(--brand-ultramarine-800) 45%,
    var(--brand-ultramarine-900) 100%
  );
  --essay-rule: color-mix(in oklch, var(--color-accent) 30%, transparent);
}

body {
  background: var(--color-bg);
}

/* Clutter that Reader should strip: header bar, share rail, related, newsletter */
.journal-bar {
  position: relative;
  z-index: 5;
  background: var(--brand-ultramarine-900);
  color: var(--brand-core);

  & .journal-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    height: 3.25rem;
  }

  & .journal-bar__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    font-weight: var(--weight-strong);
    text-decoration: none;
  }

  & .journal-bar__nav {
    display: flex;
    gap: var(--space-4);

    & a {
      color: color-mix(in oklch, var(--brand-ice) 85%, white);
      font: var(--weight-mono) var(--text-label) / 1 var(--font-mono);
      text-decoration: none;

      &:hover {
        color: white;
      }
    }

    & a:not(:last-child) {
      display: none;

      @media (min-width: 40rem) {
        display: inline;
      }
    }
  }
}

/* Masthead */
.essay__masthead {
  position: relative;
  overflow: clip;
  padding-block: var(--space-8) var(--space-9);
  background:
    radial-gradient(
      60% 80% at 0% 0%,
      color-mix(in oklch, var(--brand-cyan) 35%, transparent),
      transparent 60%
    ),
    var(--essay-masthead);
  color: white;

  &::after {
    /* the orbit arc, as on the pricing ticket */
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 70%;
    aspect-ratio: 1;
    border: 1.5px solid color-mix(in oklch, var(--brand-cyan) 70%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 40px -6px var(--brand-cyan);
    rotate: -7deg;
    pointer-events: none;
  }

  & .kicker {
    color: var(--brand-ice);

    & .idx {
      color: color-mix(in oklch, var(--brand-ice) 75%, transparent);
    }
  }

  & .essay__masthead-inner {
    position: relative;
    z-index: 1;
    max-width: 56rem;
  }
}

.essay__title {
  max-width: 18ch;
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--text-h1);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.essay__dek {
  max-width: 48ch;
  margin: 0 0 var(--space-6);
  color: color-mix(in oklch, var(--brand-ice) 80%, white);
  font-size: var(--text-lead);
  line-height: 1.55;
  text-wrap: pretty;
}

.essay__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  color: var(--brand-ice);
  font: var(--weight-mono) var(--text-label) / 1.4 var(--font-mono);

  & a {
    color: white;
  }
}

/* Body: a 62ch column of the system sans */
.essay__body {
  max-width: calc(var(--essay-measure) + 2 * var(--gutter));
  padding-block: var(--space-8);
  font-size: var(--essay-body);
  line-height: var(--leading-body);
  hanging-punctuation: first;

  & p {
    margin: 0 0 var(--space-5);
    text-wrap: pretty;
  }

  & a {
    color: var(--color-accent);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
  }

  & h2 {
    margin: var(--space-8) 0 var(--space-4);
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
    font-weight: var(--weight-light);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;

    &::before {
      content: "#";
      margin-right: 0.35em;
      color: var(--color-accent);
    }
  }

  & sup a {
    padding: 0 0.15em;
    font: var(--weight-mono) 0.75em var(--font-mono);
    text-decoration: none;
  }

  & code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
    background: var(--color-accent-soft);
    font-size: 0.85em;
  }
}

/* Lede with a light, lit drop cap */
.essay__lede {
  font-size: var(--text-lead);
  color: var(--color-text-muted);

  &::first-letter {
    float: left;
    margin: 0.06em 0.12em 0 0;
    font-size: 4.2em;
    font-weight: var(--weight-light);
    line-height: 0.8;
    background: var(--display-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Pull quotes: light display type with the accent gradient and a lit dash */
.pullquote {
  position: relative;
  margin: var(--space-7) 0;
  padding: var(--space-5) 0 var(--space-5) var(--space-6);
  border-left: 2px solid transparent;
  border-image: linear-gradient(
      180deg,
      var(--orbit-line),
      var(--brand-cyan),
      transparent
    )
    1;

  & p {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    font-weight: var(--weight-light);
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    background: var(--display-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
  }

  @media (min-width: 64rem) {
    margin-inline: calc(-1 * var(--space-8));
  }
}

/* Figures */
.essay__figure {
  margin: var(--space-7) 0;

  & svg {
    display: block;
    width: 100%;
    height: auto;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(70% 60% at 50% 100%, var(--halo-soft), transparent 70%),
      var(--color-surface);
    box-shadow: var(--inset-spec), var(--shadow-md);
  }

  & figcaption {
    margin-top: var(--space-3);
    color: var(--color-text-faint);
    font-size: var(--text-small);

    & .mono {
      margin-right: var(--space-2);
      color: var(--color-accent);
    }
  }

  @media (min-width: 64rem) {
    &.essay__figure--wide {
      margin-inline: calc(-1 * var(--space-9));
    }
  }
}

.fig-node {
  fill: var(--color-surface);
  stroke: var(--orbit-line);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 6px var(--orbit-glow));
}

.fig-label {
  fill: var(--color-text-muted);
  font: var(--weight-mono) 13px var(--font-mono);
}

.fig-label--strong {
  fill: var(--color-text);
  font-size: 15px;
}

.fig-index {
  fill: var(--color-accent);
  font: var(--weight-mono) 11px var(--font-mono);
}

.fig-margin {
  fill: color-mix(in oklch, var(--color-warning) 12%, transparent);
  stroke: color-mix(in oklch, var(--color-warning) 50%, transparent);
  stroke-dasharray: 4 4;
}
.fig-border {
  fill: color-mix(in oklch, var(--brand-ultramarine-900) 20%, transparent);
}
.fig-padding {
  fill: color-mix(in oklch, var(--color-success) 14%, var(--color-surface));
}
.fig-content {
  fill: color-mix(in oklch, var(--brand-azure) 22%, var(--color-surface));
  stroke: var(--orbit-line);
  stroke-width: 1.5;
}

/* Code: the app's syntax palette */
.essay__code {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--screen-bg);
  box-shadow: var(--inset-spec);
  font: 400 0.8125rem / 1.6 var(--font-mono);
  tab-size: 2;

  & code {
    padding: 0;
    background: none;
    font-size: inherit;
  }

  & .t-com {
    color: var(--syn-comment);
    font-style: italic;
  }
  & .t-sel {
    color: var(--syn-tag);
  }
  & .t-kw {
    color: var(--syn-keyword);
  }
  & .t-prop {
    color: var(--syn-property);
  }
  & .t-val {
    color: var(--syn-value);
  }
  & .t-num {
    color: var(--syn-number);
  }
}

/* Table with mono heads, like the site's prose tables */
.essay__table {
  width: 100%;
  margin: var(--space-7) 0;
  border-collapse: collapse;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;

  & caption {
    margin-bottom: var(--space-3);
    color: var(--color-text-faint);
    text-align: left;
  }

  & th,
  & td {
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  & thead th {
    color: var(--color-accent);
    font: var(--weight-mono) var(--text-label) / 1 var(--font-mono);
    border-bottom-color: var(--color-border-strong);
  }

  & tbody th {
    font-weight: var(--weight-strong);
  }

  & tfoot :is(th, td) {
    border-bottom: 0;
    font-weight: var(--weight-strong);
  }

  & tbody tr:hover {
    background: var(--color-accent-soft);
  }
}

.essay__footer {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--essay-rule);
}

.essay__notes {
  margin-top: var(--space-6);
  font-size: var(--text-small);
  color: var(--color-text-muted);

  & .essay__notes-title {
    margin-top: 0;
    font-size: var(--text-h4);
    font-weight: var(--weight-strong);
    letter-spacing: var(--tracking-snug);

    &::before {
      content: none;
    }
  }

  & ol {
    padding-left: 1.25em;
  }

  & li + li {
    margin-top: var(--space-2);
  }

  & li:target {
    color: var(--color-text);
    background: var(--color-accent-soft);
    outline: 4px solid var(--color-accent-soft);
    border-radius: var(--radius-xs);
  }
}

/* Share rail: fixed to the left on wide screens, hidden on narrow ones */
.share-rail {
  display: none;

  @media (min-width: 72rem) {
    position: fixed;
    top: 40vh;
    left: var(--space-5);
    z-index: 4;
    display: grid;
    gap: var(--space-2);
    justify-items: center;
  }

  & .share-rail__label {
    margin: 0 0 var(--space-1);
    font-size: 0.6875rem;
  }

  & .share-rail__button {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: var(--inset-spec), var(--shadow-sm);
    cursor: pointer;
    transition: box-shadow var(--duration-fast) var(--ease-out);

    &:hover {
      box-shadow: var(--inset-spec), var(--glow-cyan);
    }
  }
}

/* Related links */
.related {
  position: relative;
  padding-block: var(--space-8) calc(var(--space-10) + var(--space-6));
  background: var(--stage);

  & h2 {
    margin: 0 0 var(--space-5);
  }

  & .related__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;

    @media (min-width: 48rem) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  & a {
    display: grid;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--color-surface) 80%, transparent);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out);

    &:hover {
      border-color: var(--color-border-strong);
    }

    & .mono {
      color: var(--color-accent);
      font-size: var(--text-label);
    }
  }
}

/* Sticky newsletter bar */
.newsletter {
  position: fixed;
  right: 0;
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  left: 0;
  width: min(56rem, 100% - 2 * var(--space-3));
  box-sizing: border-box;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-inline: auto;
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4);
  background:
    linear-gradient(
        color-mix(in oklch, var(--color-surface) 85%, transparent),
        color-mix(in oklch, var(--color-surface) 85%, transparent)
      )
      padding-box,
    var(--edge-spec) border-box;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  &[hidden] {
    display: none;
  }

  & .newsletter__copy {
    flex: 1 1 16rem;
    margin: 0;
    font-size: var(--text-small);
  }

  & .newsletter__form {
    display: flex;
    flex: 1 1 18rem;
    gap: var(--space-2);

    & input {
      flex: 1;
      min-width: 0;
      height: 3rem;
      padding-inline: var(--space-3);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-md);
      background: var(--color-bg);
      color: var(--color-text);
      font: inherit;
    }
  }

  & .newsletter__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    cursor: pointer;
  }
}

@media print {
  .journal-bar,
  .share-rail,
  .related,
  .newsletter {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}