@layer reset, base, type, mode;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, p { margin: 0; }
  a          { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  a:visited  { color: var(--visited); }
  a:active   { color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  fieldset { border: 0; padding: 0; margin: 0; }
  legend { padding: 0; }
}

@layer base {
  :root {
    --font-serif: ui-serif, "Iowan Old Style", "Charter", "Source Serif",
                  Cambria, "Times New Roman", Times, serif;
    --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

    /* light defaults — serif, editorial */
    --font-body:      var(--font-serif);
    --font-heading:   var(--font-sans);
    --body-size:      1rem;
    --body-leading:   1.6;
    --measure:        36rem;
    --section-gap:    2.6rem;
    --para-gap:       1rem;
    --heading-prefix: "";
    --hyphens:        auto;
    --letter-spacing-h1: 0.02em;

    /* Works list — curatorial register: inline, titles only, slash-separated */
    --work-display:   inline;
    --work-marker:    "";
    --work-sep:       " / ";
    --detail-display: none;
    --md-open:        "";
    --md-close:       "";

    /* Classic 90s palette — Mosaic / Netscape defaults */
    --bg:      #ffffff;
    --fg:      #000000;
    --muted:   #666666;
    --link:    #0000ee;
    --visited: #551a8b;
    --accent:  #ee0000;

    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      /* dark — mono, terminal/markdown register */
      --font-body:      var(--font-mono);
      --font-heading:   var(--font-mono);
      --heading-prefix: "# ";
      --hyphens:        manual;
      --letter-spacing-h1: 0;

      /* Works list — developer/markdown register: stacked, detail shown, [link] brackets */
      --work-display:   block;
      --work-marker:    "- ";
      --work-sep:       "- ";
      --detail-display: inline;
      --md-open:        "[";
      --md-close:       "]";

      --bg:      #000000;
      --fg:      #e0e0e0;
      --muted:   #888888;
      --link:    #5599ff;
      --visited: #cc99ff;
      --accent:  #ff5555;
    }
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--body-size);
    line-height: var(--body-leading);
    text-rendering: optimizeLegibility;
    hyphens: var(--hyphens);
    overflow-wrap: break-word;
    padding: 2.4rem 1.6rem;
  }

  @media (min-width: 60rem) {
    body { padding-block: 6.4rem; }
  }

  main {
    display: grid;
    gap: var(--section-gap);
    max-inline-size: var(--measure);
    margin-inline: auto;
  }
}

@layer type {
  h1 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: var(--letter-spacing-h1);
    line-height: 1.35;
  }

  h1::before {
    content: var(--heading-prefix);
    color: var(--muted);
  }

  p { text-wrap: pretty; }
  p + p { margin-top: var(--para-gap); }

  a:hover { color: var(--accent); }

  em { font-style: italic; }

  h2 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: var(--letter-spacing-h1);
    margin: 0 0 var(--para-gap);
  }

  h2::before {
    content: var(--heading-prefix);
    color: var(--muted);
  }

  .works ul { list-style: none; margin: 0; padding: 0; }
  .works li { display: var(--work-display); }
  .works a  { overflow-wrap: break-word; }
  .works li::before      { content: var(--work-marker); color: var(--muted); }
  .works li + li::before { content: var(--work-sep);    color: var(--muted); }
  .works .detail { display: var(--detail-display); color: var(--muted); }
  .works a::before { content: var(--md-open);  color: var(--muted); }
  .works a::after  { content: var(--md-close); color: var(--muted); }

  .email { overflow-wrap: anywhere; }
  .email[data-copied]::after {
    content: " copied";
    color: var(--muted);
  }
}

@layer mode {
  /* Per-session manual overrides. Layer ordering puts these above base,
     so they win over both the :root defaults and the @media dark block. */

  :root:has(#t-light:checked) {
    --font-body:      var(--font-serif);
    --font-heading:   var(--font-sans);
    --body-size:      1rem;
    --body-leading:   1.6;
    --heading-prefix: "";
    --hyphens:        auto;
    --letter-spacing-h1: 0.02em;

    --work-display:   inline;
    --work-marker:    "";
    --work-sep:       " / ";
    --detail-display: none;
    --md-open:        "";
    --md-close:       "";

    --bg:      #ffffff;
    --fg:      #000000;
    --muted:   #666666;
    --link:    #0000ee;
    --visited: #551a8b;
    --accent:  #ee0000;
  }

  :root:has(#t-dark:checked) {
    --font-body:      var(--font-mono);
    --font-heading:   var(--font-mono);
    --heading-prefix: "# ";
    --hyphens:        manual;
    --letter-spacing-h1: 0;

    --work-display:   block;
    --work-marker:    "- ";
    --work-sep:       "- ";
    --detail-display: inline;
    --md-open:        "[";
    --md-close:       "]";

    --bg:      #000000;
    --fg:      #e0e0e0;
    --muted:   #888888;
    --link:    #5599ff;
    --visited: #cc99ff;
    --accent:  #ff5555;
  }

  /* Toggle UI — three radios styled as small inline text. */
  .theme {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: baseline;
  }
  .theme legend {
    margin-inline-end: 0.4rem;
  }
  .theme input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .theme label {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
  .theme label:hover {
    color: var(--fg);
    text-decoration-color: var(--accent);
  }
  .theme input:checked + label {
    color: var(--fg);
    text-decoration-color: currentColor;
  }
  /* Default highlight when no override is set: mark the OS-matching label as active. */
  :root:not(:has(.theme input:checked)) .theme [for="t-light"] {
    color: var(--fg);
    text-decoration-color: currentColor;
  }
  @media (prefers-color-scheme: dark) {
    :root:not(:has(.theme input:checked)) .theme [for="t-light"] {
      color: var(--muted);
      text-decoration-color: transparent;
    }
    :root:not(:has(.theme input:checked)) .theme [for="t-dark"] {
      color: var(--fg);
      text-decoration-color: currentColor;
    }
  }
  .theme input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
}

@media print {
  :root {
    --bg: #fff; --fg: #000; --muted: #444;
    --link: #000; --visited: #000; --accent: #000;
    --font-body: var(--font-serif);
    --font-heading: var(--font-sans);
    --heading-prefix: "";
    --hyphens: auto;
    --measure: none;
  }
  body { padding: 0; }
  .theme { display: none; }
  a[href^="http"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
  @page { margin: 22mm; }
}