/* ==========================================================================
   Connections — "Grid / Riso" (design option 2a)
   Replaces style1.css. Self-hosted fonts, no third-party requests.

   Space Grotesk carries the chrome; Literata carries content prose, because
   Space Grotesk ships no true italic and the corpus has ~6,200 <i>/<em> tags,
   mostly titles of works.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/spacegrotesk-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/literata-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/literata-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/literata-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/literata-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens --------------------------------------------------------------- */
/* sRGB hex first so older browsers get the palette; oklch overrides where
   supported. Ratios against paper: ink 16.95:1, magenta 5.01:1; black on
   yellow 10.60:1; black on the four sidebar inks 8.96-9.93:1. */

:root {
  --ink: #1A1A1A;
  --paper: #FBFCFE;
  --yellow: #EBC800;
  --magenta: #D6006E;

  --ink-aqua: #4FD9BC;
  --ink-blue: #79C3F2;
  --ink-coral: #FFA98C;
  --ink-lavender: #D9A8F0;

  /* lighter shades of the same inks, for the current-page highlight */
  --tint-aqua: #C8F3E8;
  --tint-blue: #D3E9FB;
  --tint-coral: #FFE0D4;
  --tint-lavender: #F0DDF9;

  --sans: 'Space Grotesk', system-ui, sans-serif;
  --serif: 'Literata', Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --rule-soft: #D6D8DC;

  --rule: 2px;
  --pad-x: 44px;
}

@supports (color: oklch(50% 0 0)) {
  :root {
    --ink: oklch(15% 0 0);
    --paper: oklch(99% 0.002 250);
    --yellow: oklch(88% 0.19 100);
    --magenta: oklch(60% 0.24 350);

    --ink-aqua: oklch(85% 0.15 170);
    --ink-blue: oklch(82% 0.13 245);
    --ink-coral: oklch(83% 0.15 40);
    --ink-lavender: oklch(82% 0.12 310);

    --tint-aqua: oklch(93% 0.07 170);
    --tint-blue: oklch(92% 0.06 245);
    --tint-coral: oklch(92% 0.07 40);
    --tint-lavender: oklch(92% 0.055 310);

    --rule-soft: oklch(88% 0.004 250);
  }
}

/* --- base ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

/* Links inherit colour and stay bare in the chrome, as designed. In content
   they are underlined — see .content a. Never a default browser blue. */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 120ms ease;
}
a:hover { opacity: 0.7; }

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}

/* --- skip link ------------------------------------------------------------ */

#skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 16px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: var(--rule) solid var(--ink);
  z-index: 10;
}
#skip-link:focus {
  left: 8px;
  top: 8px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- page shell ----------------------------------------------------------- */

.page {
  max-width: 960px;
  margin: 0 auto;
  border: var(--rule) solid var(--ink);
  background: var(--paper);
}

/* --- masthead ------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 44px var(--pad-x) 28px;
  border-bottom: 3px solid var(--ink);
}

.masthead-title {
  display: block;
  margin: 0;
  font-family: var(--sans);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--yellow);
}

.masthead-sub {
  display: block;
  margin: 12px 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.dots {
  display: flex;
  gap: 6px;
  padding-bottom: 6px;
  flex-shrink: 0;
}
.dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.dot-magenta { background: var(--magenta); }
.dot-yellow {
  background: var(--yellow);
  border: var(--rule) solid var(--ink);
}

/* --- nav bar -------------------------------------------------------------- */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--pad-x);
  border-bottom: var(--rule) solid var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-group {
  display: flex;
  gap: 22px;
  padding: 10px 0;
}

.nav-group a { border-bottom: var(--rule) solid var(--magenta); }

/* No target to go to — a label, not a control. Continues the fix in report
   §3.9, where inactive arrows stopped announcing navigation that isn't there. */
.nav-inactive {
  opacity: 0.35;
  border-bottom: var(--rule) solid transparent;
}

.nav-current {
  font-weight: 700;
  background: var(--yellow);
  padding: 10px 16px;
  border-left: var(--rule) solid var(--ink);
  border-right: var(--rule) solid var(--ink);
}

/* --- body row ------------------------------------------------------------- */

.body-row { display: flex; align-items: stretch; }

.sidebar {
  flex: 0 0 220px;
  padding: 32px 26px;
  border-right: var(--rule) solid var(--ink);
  font-size: 14px;
}

.side-group { margin-bottom: 24px; }
.side-group:last-child { margin-bottom: 0; }

.side-heading {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding: 0 2px;
}

/* One riso ink per category; yellow and magenta stay reserved for the
   masthead and nav so the sidebar reads as its own system. */
.ink-aqua     { background: linear-gradient(transparent 55%, var(--ink-aqua) 55%); }
.ink-blue     { background: linear-gradient(transparent 55%, var(--ink-blue) 55%); }
.ink-coral    { background: linear-gradient(transparent 55%, var(--ink-coral) 55%); }
.ink-lavender { background: linear-gradient(transparent 55%, var(--ink-lavender) 55%); }

.side-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Menu depth. Levels 2 and 3 indent; the tree is built in phase 3. */
.lvl2 { padding-left: 12px; }
.lvl3 { padding-left: 24px; }

/* Current page and its ancestors. Bold plus aria-current carry the meaning,
   so "you are here" never depends on colour alone. */
.is-current {
  font-weight: 700;
  padding-top: 1px;
  padding-bottom: 1px;
  border-radius: 2px;
}
/* Scoped by data-ink on the group, not by the .ink-* paint classes, which
   apply the marker-pen gradient and must stay on the heading alone. */
.side-group[data-ink="aqua"]     .is-current { background: var(--tint-aqua); }
.side-group[data-ink="blue"]     .is-current { background: var(--tint-blue); }
.side-group[data-ink="coral"]    .is-current { background: var(--tint-coral); }
.side-group[data-ink="lavender"] .is-current { background: var(--tint-lavender); }

/* A group heading can itself be the current page — textbook.html, writing.html,
   courses.html, siteinfo.html. The marker-pen gradient fills out to solid ink
   rather than taking a tint, since a tint under a half-height gradient reads as
   a smudge. Black holds on all four inks at better than 8.9:1. */
.side-heading.is-current { background-image: none; }
.side-group[data-ink="aqua"]     .side-heading.is-current { background-color: var(--ink-aqua); }
.side-group[data-ink="blue"]     .side-heading.is-current { background-color: var(--ink-blue); }
.side-group[data-ink="coral"]    .side-heading.is-current { background-color: var(--ink-coral); }
.side-group[data-ink="lavender"] .side-heading.is-current { background-color: var(--ink-lavender); }

/* --- content -------------------------------------------------------------- */

.content {
  flex: 1;
  min-width: 0;
  padding: 40px 48px 36px;
  /* Two pages print a bare 65-character URL in the prose, which at 320px pushed
     the page 9px wider than the viewport and broke 1.4.10 reflow. This breaks a
     word only when it would otherwise overflow, so ordinary prose is untouched. */
  overflow-wrap: break-word;
}

.content h1 {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* The heading text must be one flex item. 72 pages put <br>, <i> or a subtitle
   inside the heading, and a direct child of a flex container becomes its own
   flex item — so those <br> tags stopped breaking lines and the whole heading
   ran along a single row and off the page. Wrapped in a span, the markup is
   ordinary inline content again, and min-width lets it shrink and wrap. */
.h1text { min-width: 0; }

/* Decorative rule and dot after the heading. Its box is exactly one line tall
   and bottom-aligned, so on the 69 headings that run to two or three lines the
   rule centres on the last line rather than floating at mid-height — and a
   single-line heading, having only one line, is unaffected. No magic numbers:
   the height tracks the h1's own line-height.

   The h1 deliberately does not wrap. With wrapping on, 13 headings whose last
   line nearly filled the column pushed the rule onto a line of its own below.
   Since .h1text can shrink and re-wrap internally, nowrap simply reserves the
   rule's width and the text reflows around it, so the rule always accompanies
   the last line. Where a heading is very long the rule shrinks to little more
   than its dot, which is the intended graceful ending. Verified not to
   reintroduce horizontal overflow at 320px. */
.h1rule {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 1.25em;
}
.h1rule::before {
  content: "";
  flex: 1;
  height: var(--rule);
  background: var(--ink);
}
.h1rule::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--magenta);
  flex-shrink: 0;
}

.content p,
.content li,
.content blockquote,
.content dd, .content dt {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
}

.content p {
  max-width: 58ch;
  text-wrap: pretty;
  margin: 0 0 22px;
}

/* --- content: headings ---------------------------------------------------- */
/* Sub-headings stay in the sans, so they read as structure against the serif
   prose. 31 pages use h2/h3/h4; some open at h3 with no h2 above it, which is
   left as the author wrote it. */

.content h2,
.content h3,
.content h4 {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--ink);
}

.content h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 34px 0 14px;
  padding-bottom: 8px;
  border-bottom: var(--rule) solid var(--ink);
}

.content h3 {
  font-size: 17px;
  margin: 28px 0 10px;
}

.content h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 22px 0 8px;
}

.content > :first-child { margin-top: 0; }

/* --- content: lists ------------------------------------------------------- */

.content ul,
.content ol {
  margin: 0 0 22px;
  padding-left: 24px;
  max-width: 58ch;
}

.content li { margin-bottom: 8px; }
.content li:last-child { margin-bottom: 0; }
.content li > ul,
.content li > ol { margin: 8px 0 0; }

/* Reading lists in the syllabi were spaced by wrapping every <li> in a <p>.
   The browser never built that nesting — it discarded the wrapper and left an
   empty <p> as a sibling of the item, whose 22px bottom margin collapsed
   through and became the gap. Removing the wrappers therefore tightens a list
   from 22px to the 8px above, which is a visible change, not a no-op. This
   class carries the old rhythm forward so the markup can be fixed without the
   page's look shifting. It is presentational and deliberately so: the point is
   that the spacing is now a stated intention rather than a parser accident.
   Drop the class (and this rule) if the lists should join the 8px default. */

.content ul.spaced > li,
.content ol.spaced > li { margin-bottom: 22px; }
.content ul.spaced > li:last-child,
.content ol.spaced > li:last-child { margin-bottom: 0; }

/* --- content: dividers ---------------------------------------------------- */
/* <hr> is the site's day-by-day separator in syllabi — up to 54 on a single
   page — so it has to be quiet. A 2px ink rule that often would shout. */

.content hr {
  border: 0;
  height: 1px;
  background: var(--rule-soft);
  margin: 28px 0;
}

/* --- content: verse and quotation ----------------------------------------- */
/* Every one of the 27 <pre> pages holds verse or quoted text, not code:
   Chaucer, Shakespeare, Frost, Whitman. So <pre> is set in the serif, and
   pre-wrap lets long lines reflow at narrow widths instead of overflowing.
   Leading spaces still carry the verse indentation. */

.content pre {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  white-space: pre-wrap;
  margin: 0 0 22px;
  padding-left: 18px;
  border-left: var(--rule) solid var(--ink);
  overflow-wrap: break-word;
}

/* The exceptions: blocks where monospace alignment carries the meaning —
   scansion marks sitting above syllables (Poetry/Scansion/stresses1.html) and
   space-aligned columns (Poetry/Terms/lines1.html). Applied in phase 4a. */
.content pre.scansion {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

.content blockquote {
  margin: 0 0 22px;
  padding-left: 18px;
  border-left: var(--rule) solid var(--ink);
  max-width: 58ch;
}

.content code { font-family: var(--mono); font-size: 0.95em; }

/* --- content: media and tables -------------------------------------------- */

.content img {
  max-width: 100%;
  height: auto;
}

.content table {
  border-collapse: collapse;
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: 16px;
}
.content th,
.content td {
  border: 1px solid var(--rule-soft);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.content th { font-family: var(--sans); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Deliberate centring, carried over from <center> in phase 11. */
.content .centered { text-align: center; }

/* Deadlines and other urgent notes, carried over from <font color="red">.
   Plain red is #FF0000, which is 3.90:1 on this paper and so short of AA; this
   is 7.14:1. The bold matters as much as the colour — it means the emphasis is
   not conveyed by colour alone, which red text on its own was. */
.content .deadline {
  color: #B00020;
  font-weight: 700;
}

/* Defensive: neutralise legacy <font size=-1> so it cannot fight the type
   scale before phase 4a removes it. Harmless afterwards. */
.content font {
  font-size: inherit;
  font-family: inherit;
}

/* In-content links keep an underline. Without one they would be
   indistinguishable from prose, which is report §3.6 and WCAG 1.4.1. */
.content a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* --- licence line --------------------------------------------------------- */

.content p.licence,
.licence {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  max-width: none;
  margin: 0;
  border-top: var(--rule) solid var(--ink);
  padding-top: 16px;
}

.cc-badge {
  background: var(--yellow);
  border: var(--rule) solid var(--ink);
  padding: 3px 8px;
  font-weight: 700;
  flex-shrink: 0;
}

.licence-text { font-family: var(--sans); }
.licence-text a { text-decoration: underline; text-underline-offset: 2px; }

/* --- footer --------------------------------------------------------------- */

.site-footer {
  border-top: var(--rule) solid var(--ink);
  background: var(--ink);
  color: #FFFFFF;
  font-size: 12px;
  padding: 14px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-name { font-weight: 600; }
.site-footer a { text-decoration: underline; text-underline-offset: 2px; }
.footer-licence { opacity: 0.8; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 760px) {
  :root { --pad-x: 24px; }

  .masthead { padding: 28px var(--pad-x) 20px; }
  .masthead-title {
    font-size: 40px;
    text-shadow: 2px 2px 0 var(--yellow);
  }

  /* The tab takes its own line, so it reads as a title band rather than a
     stretched tab: side borders off, a rule underneath instead. */
  .nav { flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0; }
  .nav-current {
    order: -1;
    width: 100%;
    text-align: center;
    padding: 8px 16px;
    border-left: 0;
    border-right: 0;
    border-bottom: var(--rule) solid var(--ink);
  }
  /* Keep each label whole: at 320px "Section" was breaking away from its
     arrow. The group wraps instead, which stacks the two labels cleanly. */
  .nav-group {
    flex: 1;
    flex-wrap: wrap;
    gap: 14px;
    padding: 10px var(--pad-x);
  }
  .nav-group > * { white-space: nowrap; }
  .nav-group:last-of-type { justify-content: flex-end; }

  .body-row { flex-direction: column; }
  .sidebar {
    flex: 1 1 auto;
    width: 100%;
    border-right: 0;
    border-bottom: var(--rule) solid var(--ink);
    padding: 24px var(--pad-x);
  }
  .content { padding: 28px var(--pad-x) 24px; }
}

@media (max-width: 420px) {
  :root { --pad-x: 16px; }
  .masthead-title { font-size: 32px; }
  .content p { font-size: 16px; }
}