/* The shared pieces every site is built from: the frame, the type roles that are not bare
   elements (display, lede, kicker, meta), the editorial list, the notice, the reading column, the
   band and the one adjustment the controls need. The header and footer are templates
   (app/shared/templates/site-header and site-footer) with their own stylesheets. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer components {
  /* THE FRAME: header, main and footer all sit on this shell, so their edges line up. A wide
     shell for marketing and shop pages, a text shell for reading sites. */
  .site-shell {
    width: 100%;
    max-width: calc(var(--site-wide) + 2 * var(--site-gutter));
    margin-inline: auto;
    padding-inline: var(--site-gutter);
  }

  .site-shell.is-text {
    max-width: calc(var(--site-text) + 2 * var(--site-gutter));
  }

  .site-main {
    flex: 1 0 auto;
    padding-block: var(--page-space) calc(var(--page-space) + var(--space-8));
  }

  .site-section + .site-section {
    margin-top: var(--section-space);
  }

  .site-skip {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    z-index: 100;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control);
    background: var(--ink);
    color: var(--bg);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    text-decoration: none;
    transform: translateY(-200%);
  }

  .site-skip:focus-visible {
    transform: none;
  }

  /* TYPE ROLES beyond the bare headings. */
  .display {
    font-family: var(--font-heading);
    font-size: var(--text-display);
    font-weight: var(--weight-regular);
    line-height: var(--leading-display);
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .lede {
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: var(--text-lede);
    line-height: var(--leading-lede);
    text-wrap: pretty;
  }

  .kicker {
    margin: 0;
    color: var(--ink-dim);
    font-family: var(--font-ui);
    font-size: var(--text-kicker);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    line-height: var(--leading-snug);
    text-transform: uppercase;
  }

  .meta {
    margin: 0;
    color: var(--ink-dim);
    font-family: var(--font-ui);
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-snug);
  }

  /* An opening: kicker, title and standfirst, held to the measure. */
  .site-intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: var(--site-measure);
    margin-bottom: var(--stack-lg);
  }

  .site-intro > * {
    margin: 0;
  }

  /* THE EDITORIAL LIST: hairline rows flush with the heading above them. A serif title at h3
     size, an Inter meta line, and a description held to two lines. The title's link covers the
     row, so the row is one target without nesting links. The rules key on .entry-list, so a
     page's own .entry elsewhere is left alone. */
  .entry-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .entry-list > .entry {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--rule-soft);
  }

  .entry-list > .entry > * {
    margin: 0;
  }

  .entry-list .entry-title,
  .entry-list .entry :is(h2, h3) {
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--weight-heading);
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  .entry-list .entry-title,
  .entry-list .entry :is(h2, h3) a {
    color: var(--ink);
    text-decoration: none;
  }

  .entry-list .entry-title::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .entry-list .entry-title:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .entry-list > .entry:has(.entry-title:focus-visible) {
    outline: var(--focus-ring-width) solid var(--focus);
    outline-offset: var(--focus-ring-offset);
  }

  .entry-list > .entry:hover .entry-title,
  .entry-list .entry :is(h2, h3) a:hover {
    color: var(--accent);
  }

  .entry-list .entry-meta {
    color: var(--ink-dim);
    font-family: var(--font-ui);
    font-size: var(--text-caption);
    font-variant-numeric: tabular-nums;
  }

  .entry-list .entry-text,
  .entry-list > .entry > p:not([class]) {
    display: -webkit-box;
    overflow: hidden;
    max-width: var(--site-measure);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--ink-soft);
    font-size: var(--text-base);
    line-height: 1.55;
  }

  /* THE NOTICE: status, gates and form results. A rule in the accent at its left on the soft
     paper; is-ok and is-danger take the intent's color. */
  .notice {
    max-width: var(--site-measure);
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--accent);
    background: var(--bg-soft);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    line-height: var(--leading-body);
  }

  .notice > * {
    margin: 0;
  }

  .notice > * + * {
    margin-top: var(--space-2);
  }

  .notice h2,
  .notice h3 {
    font-size: var(--text-h4);
  }

  .notice.is-ok {
    border-left-color: var(--success);
  }

  .notice.is-danger {
    border-left-color: var(--danger);
  }

  /* THE READING COLUMN: essays, long guides and written pages. The serif at 19px, leading 1.7, a
     measure of about 68 characters. */
  .reading {
    max-width: 68ch;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: var(--text-reading);
    line-height: var(--leading-reading);
    font-kerning: normal;
    font-variant-ligatures: common-ligatures;
    hanging-punctuation: first;
    overflow-wrap: break-word;
  }

  @media (max-width: 640px) {
    .reading {
      font-size: var(--text-md);
      line-height: var(--leading-relaxed);
    }
  }

  .reading > * {
    margin-block: 0;
  }

  .reading > * + * {
    margin-top: 1.15em;
  }

  .reading :is(h1, h2, h3, h4) {
    color: var(--ink);
    scroll-margin-top: var(--space-6);
  }

  .reading h1 {
    font-size: var(--text-h1);
  }

  .reading > * + h2 {
    margin-top: 2em;
  }

  .reading > * + :is(h3, h4) {
    margin-top: 1.7em;
  }

  .reading > :is(h1, h2, h3, h4) + * {
    margin-top: 0.6em;
  }

  .reading :is(strong, b) {
    color: var(--ink);
  }

  .reading a {
    color: var(--link);
    text-decoration-color: var(--rule-strong);
  }

  .reading a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
  }

  .reading :is(ul, ol) {
    padding-left: 1.4em;
  }

  .reading ul {
    list-style: disc;
  }

  .reading ol {
    list-style: decimal;
  }

  .reading li + li,
  .reading li > :is(ul, ol) {
    margin-top: 0.4em;
  }

  .reading li::marker {
    color: var(--ink-dim);
  }

  .reading blockquote {
    margin-inline: 0;
    padding-left: 1.25em;
    border-left: 2px solid var(--rule-strong);
    color: var(--ink-soft);
    font-size: 0.95em;
  }

  .reading blockquote > * {
    margin-block: 0;
  }

  .reading blockquote > * + * {
    margin-top: 0.9em;
  }

  .reading hr {
    width: 4rem;
    margin: 2.5em auto;
    border: 0;
    border-top: 1px solid var(--rule-strong);
  }

  .reading img {
    display: block;
    height: auto;
    margin-inline: auto;
  }

  .reading figure {
    margin: 1.75em 0;
  }

  .reading figcaption {
    margin-top: var(--space-2);
    color: var(--ink-dim);
    font-family: var(--font-ui);
    font-size: var(--text-caption);
    text-align: center;
  }

  .reading :not(pre) > code {
    padding: 0.1em 0.3em;
    border-radius: var(--radius-control);
    background: var(--bg-muted);
    color: var(--ink);
    font-size: 0.85em;
  }

  /* THE BAND: a strip in the brand's band color for a hero or a call to action. Text, headings
     and links inside take the band's ink. */
  .site-band {
    background: var(--band);
    color: var(--band-ink);

    --ink: var(--band-ink);
    --ink-soft: color-mix(in oklab, var(--band-ink) 86%, var(--band));
    --ink-dim: color-mix(in oklab, var(--band-ink) 74%, var(--band));
    --link: var(--band-ink);
    --focus: var(--band-ink);
    --rule: color-mix(in oklab, var(--band-ink) 25%, var(--band));
  }

  /* A filled button inside a band is the band's ink on the band's color, inverted. */
  .site-band :is(.button.is-primary, button.is-primary) {
    background: var(--band-ink);
    border-color: var(--band-ink);
    color: var(--band);
  }

  /* CONTROLS: the package's buttons and inputs, on the system's tokens. A text button is ink with
     a hairline underline. */
  .button.is-text,
  button.is-text {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--rule-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }

  .button.is-text:hover,
  button.is-text:hover {
    text-decoration-color: currentColor;
  }

  .button.is-secondary,
  button.is-secondary {
    background: transparent;
    border-color: var(--rule-strong);
    color: var(--ink);
  }

  .button.is-secondary:hover,
  button.is-secondary:hover {
    border-color: var(--ink);
    background: transparent;
  }
}