/* Layout is fluid from a 320 px phone to a wide desktop. Three things do the
   work: a max-width in `ch` so the measure stays readable rather than the
   column stretching to the monitor, padding and type that scale with the
   viewport through clamp(), and one breakpoint where the disciplines table
   stops being a table. There is no fixed pixel width anywhere. */
:root {
  --ink: #16181d; --dim: #5a6472; --line: #dfe3ea; --bg: #ffffff;
  --soft: #f6f8fb; --accent: #b4451f; --warn-bg: #fff6f2; --warn-line: #f0c4b2;
  --ok: #1d7a4c; --mid: #9a6b10; --off: #77808d;
  --pad: clamp(0.9rem, 4vw, 2rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e7eaf0; --dim: #9aa4b2; --line: #2b313b; --bg: #14171c;
    --soft: #1b1f26; --accent: #ff8a5c; --warn-bg: #2a1a14; --warn-line: #5c3524;
    --ok: #5fd39b; --mid: #e0b155; --off: #8b95a3;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 clamp(15px, 0.9rem + 0.2vw, 17px)/1.6 -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; }

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; flex-wrap: wrap;
  padding: .8rem var(--pad); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); }
nav { display: flex; gap: 1rem; flex-wrap: wrap; }
nav a { color: var(--dim); text-decoration: none; }
nav a:hover, .brand:hover { color: var(--accent); }

main {
  width: 100%; max-width: 78ch; margin-inline: auto;
  padding: 1.2rem var(--pad) 4rem;
}
h1 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.2rem); margin: 1rem 0 .3rem; letter-spacing: -.02em; }
h2 { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem); margin: 2.2rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: clamp(1rem, .95rem + 0.4vw, 1.12rem); margin: 0 0 .6rem; }
.tagline { color: var(--dim); font-size: 1.05em; margin-top: 0; }
.note { color: var(--dim); font-size: .92em; }
.count {
  font-size: .72em; color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: .1rem .55rem; vertical-align: middle;
  white-space: nowrap;
}

section.warn {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 10px; padding: .2rem clamp(.8rem, 3vw, 1.2rem) 1rem; margin: 1.6rem 0;
}
section.warn h2 { color: var(--accent); margin-top: 1rem; }

/* Wide screens: a real table. */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .92em; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--dim); font-weight: 600; white-space: nowrap; }
td.name { font-weight: 600; }
td.name a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--dim); }
.c-useful { color: var(--ok); } .c-marginal { color: var(--mid); }
.c-useless { color: var(--off); }
.d-no { color: var(--accent); } .d-yes_conditional { color: var(--ok); }

/* The disciplines table is six columns of words and needs more room than the
   prose measure gives it. Above the breakpoint it is allowed out of that
   measure by negative margins, clamped by max() so the pull can never exceed
   the page padding and put the table off the side of the viewport. */
@media (min-width: 60rem) {
  #disciplines {
    width: min(66rem, calc(100vw - 2 * var(--pad)));
    margin-inline: calc(50% - min(33rem, calc(50vw - var(--pad))));
  }
}

/* Narrow screens: one card per discipline. A six column table that only
   scrolls sideways is not readable on a phone, and at 768 px the last column
   was cut off, so the breakpoint sits above a portrait tablet rather than
   below it. Below this width the table stops being a table and each cell
   prints its own column name from data-label. */
@media (max-width: 60rem) {
  .scroll { overflow-x: visible; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { position: absolute; left: -9999px; }
  tr {
    border: 1px solid var(--line); border-radius: 10px;
    padding: .5rem .8rem; margin-bottom: .7rem; background: var(--soft);
  }
  td { border: 0; padding: .18rem 0; display: flex; gap: .8rem; align-items: baseline; }
  td::before {
    content: attr(data-label); color: var(--dim); font-size: .82em;
    flex: 0 0 42%; max-width: 42%;
  }
  td.name { font-size: 1.05em; padding-bottom: .35rem; }
  td.name::before { display: none; }
}

article.disc {
  border-top: 1px solid var(--line); padding-top: 1.2rem; margin-top: 1.6rem;
}
figure.inline {
  float: right; width: clamp(120px, 22vw, 170px); margin: 0 0 1rem 1.2rem;
}
figure.inline figcaption { font-size: .78em; }
/* Below this the float leaves too little room for a line of text beside it. */
@media (max-width: 34rem) {
  figure.inline { float: none; width: 100%; max-width: 280px; margin: 0 auto 1rem; }
}
article.disc::after { content: ""; display: block; clear: both; }
p.src { clear: both; margin: .4rem 0 0; font-size: .82em; }
p.src a { color: var(--dim); }

.shots {
  display: grid; gap: clamp(1rem, 3vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
figure { margin: 0; }
figure img {
  width: 100%; max-width: 280px; border-radius: 50%;
  background: #000; display: block; margin-inline: auto;
}
figcaption { color: var(--dim); font-size: .85em; margin-top: .5rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--soft); border: 1px solid var(--line);
  border-radius: 4px; padding: .05em .3em;
}
ul { padding-left: 1.1rem; }
li { margin: .3rem 0; }
footer {
  border-top: 1px solid var(--line); color: var(--dim);
  font-size: .85em; padding: 1rem var(--pad); text-align: center;
}