/* Base: raw HTML elements, so an unstyled scaffold already looks like the journal. */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    font-family: var(--font-serif);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--ink);
    background: var(--paper);
    font-feature-settings: "lnum" 1;
    -webkit-font-smoothing: antialiased;
  }

  body { margin: 0; min-height: 100vh; }

  h1, h2, h3, h4 { font-weight: 400; margin: 0; line-height: 1.1; letter-spacing: -0.01em; }
  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }
  h3 { font-size: var(--text-md); font-weight: 500; }
  h4 {
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--ink-2);
  }

  p { margin: 0 0 var(--space-3); }
  p:last-child { margin-bottom: 0; }

  a { color: inherit; text-decoration: none; }
  a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

  em, i { font-style: italic; }
  small { font-size: var(--text-xs); }
  hr { border: 0; border-top: var(--rule-w) solid var(--rule); margin: var(--space-5) 0; }

  /* Tables are the heart of the app: rules, not fills. */
  table { border-collapse: collapse; width: 100%; }
  th {
    text-align: left;
    font-weight: 500;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-2);
    padding: 0 var(--space-3) var(--space-2);
    border-bottom: var(--rule-double);
    white-space: nowrap;
  }
  td {
    padding: 11px var(--space-3);
    border-bottom: var(--rule-w) solid var(--rule-light);
    vertical-align: baseline;
  }
  tbody tr:last-child td { border-bottom: var(--rule-w) solid var(--rule); }
  tfoot td { border-top: 2px solid var(--rule); border-bottom: 0; font-weight: 600; }
  th[data-align="right"], td[data-align="right"] { text-align: right; }
  td[data-numeric], th[data-numeric] { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; }

  /* Definition lists carry key facts (matter details, posting previews). */
  dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); margin: 0; }
  dt { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--ink-2); }
  dd { margin: 0; }

  /* Forms sit on a baseline rule rather than in boxes. */
  label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-1); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  select,
  textarea {
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: var(--rule-w) solid var(--ink-3);
    border-radius: 0;
    padding: 6px 0 4px;
    width: 100%;
    height: 32px;
  }
  textarea { height: auto; min-height: calc(var(--control-height) * 2); resize: vertical; }
  input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--ink); }
  input::placeholder, textarea::placeholder { color: var(--ink-3); font-style: italic; }
  input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-bottom-color: var(--accent); }
  fieldset { border: 0; padding: 0; margin: 0; }
  legend { padding: 0; }

  /* Buttons: a ruled box. <button> and input[type=submit] share it; the
     primary variant is filled ink. */
  button, input[type="submit"], .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-4);
    font: inherit;
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
    background: transparent;
    border: var(--rule-w) solid var(--ink);
    border-radius: 0;
    cursor: pointer;
  }
  button:hover, input[type="submit"]:hover, .button:hover { text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
  button[disabled], input[type="submit"][disabled] { color: var(--ink-3); border-color: var(--ink-3); cursor: default; background: transparent; }
  :is(button, input[type="submit"], .button):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  ::selection { background: var(--ink); color: var(--paper); }
}