/* =================================================================
   1. TOKENS
   ================================================================= */
:root {
  --ratio: 1.5;
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0)  / var(--ratio));
  --s0:  1rem;
  --s1:  calc(var(--s0) * var(--ratio));
  --s2:  calc(var(--s1) * var(--ratio));
  --s3:  calc(var(--s2) * var(--ratio));
  --s4:  calc(var(--s3) * var(--ratio));

  --measure: 60ch;
  --page-measure: 76rem;

  --border-thin: 1px;

  --paper: #fff;
  --paper-alt: #ffff99;
  --ink: #1a1c20;
  --muted: #5c6169;
  --line: #d8d9d6;
  --link: #663300;
	--nav: #663300;
	--headings: #663300;
}

/* =================================================================
   2. AXIOMS
   ================================================================= */
* {
  box-sizing: border-box;
  max-inline-size: var(--measure);
}

html, body, div, header, nav, main, aside, footer, section, article,
ul, ol, li, dl, table, form, fieldset {
  max-inline-size: none;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;
  font-size: 1rem;
  line-height: var(--ratio);
  color: var(--ink);
  background: var(--paper-alt);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.15; font-weight: 650; text-wrap: balance;}
h1 { font-size: var(--s2);  color: var(--headings); }
h2 { font-size: var(--s1); }
h3 { font-size: var(--s0); }
p  { text-wrap: pretty; }

a { color: var(--link); text-underline-offset: 0.2em; }

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

img, svg, video {
  max-inline-size: 100%;
  block-size: auto;
}

/* Nav now precedes main in the source, so a skip link earns its place */
.skip-link {
  position: absolute;
  inset-block-start: var(--s0);
  inset-inline-start: var(--s0);
  z-index: 10;
  padding: var(--s-1) var(--s0);
  background: var(--paper);
  border: var(--border-thin) solid var(--ink);
  transform: translateY(-250%);
}
.skip-link:focus { transform: none; }

/* =================================================================
   3. COVER — the page frame
   The middle child now grows, and it is a plain div rather than
   <main>, because <main> has moved down into the columns.
   ================================================================= */
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
}

.cover > * { margin-block: var(--s1); }
.cover > :first-child { margin-block-start: 0; }
.cover > :last-child  { margin-block-end: 0; }
.cover > .cover__fill { flex-grow: 1; }

/* =================================================================
   4. CENTER
   ================================================================= */
.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--measure);
  padding-inline: var(--s1);
}

.center[data-variant="page"] {
  max-inline-size: var(--page-measure);
}

/* =================================================================
   5. BOX
   ================================================================= */
.box {
  padding: var(--s-2);
  outline: var(--border-thin) solid transparent;
  outline-offset: calc(var(--border-thin) * -1);
}

.box[data-variant="banner"] {
  border-inline: 0;
  background: var(--paper-alt);
}

.box[data-variant="banner"]:first-child { border-block-start: 0; }
.box[data-variant="banner"]:last-child  { border-block-end: 0; }
header.box{ margin-block: 0; }


/* =================================================================
   6. SWITCHER — nav / main / aside
   Above the threshold: three columns, sized by --grow ratios.
   Below it: one column, in source order (nav, main, aside).

   flex-basis collapses to 0 above the threshold, so the free space
   is effectively the whole container and the grow values behave as
   width proportions. 1 : 3 : 1 gives main 60%.
   ================================================================= */
.switcher {
  --threshold: 58rem;

  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
	background: var(--paper);
	padding:1rem;
}

.switcher > * {
  flex-grow: var(--grow, 1);
  flex-basis: calc((var(--threshold) - 100%) * 999);
}

.switcher > :nth-child(1) { --grow: 1; }  /* nav   */
.switcher > :nth-child(2) { --grow: 3; }  /* main  */
.switcher > :nth-child(3) { --grow: 1; }  /* aside */

.switcher > :nth-last-child(n+4),
.switcher > :nth-last-child(n+4) ~ * {
  flex-basis: 100%;
}

/* =================================================================
   7. STACK
   ================================================================= */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
	--space: var(--s0);
}

.stack > * { margin-block: 0; }
.stack > * + * { margin-block-start: var(--space); }

.stack > :is(h2, h3, h4, h5, h6) + * {
  --space: var(--s-2);
}
.stack > * + :is(h2, h3, h4, h5, h6) {
  --space: var(--s2);
}

/* =================================================================
   8. CLUSTER — footer links
   ================================================================= */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s0) var(--s1);
  justify-content: space-between;
  align-items: center;
}

nav ul, footer ul { list-style: none; margin: 0; padding: 0; }

footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  justify-content: center;   /* added */
}
footer small { color: var(--muted); }
aside { font-size: var(--s-1); }
aside h2 { font-size: var(--s0); }
[aria-current="page"] { font-weight: 700; color: var(--nav); text-decoration: none; }

a:not(:has(> img)):hover { background-color: #cccc99; }

.copyright{
	margin-inline: auto;
	text-align: center;
	font-size: var(--s-1);
	margin-bottom:2rem;
}



/* Table styles */
table {
  border-collapse: collapse;
}

th,
caption {
  text-align: start;
}

caption {
  margin-block: 0.75rem;
}

thead th:not(:first-child),
td {
  text-align: end;
}

th,
td {
  border: 1px solid;
}

thead {
  border-block-end: 2px solid;
  background: whitesmoke;
}

tfoot {
  border-block: 2px solid;
  background: whitesmoke;
}

th,
td {
  border: 1px solid lightgrey;
  padding: 0.25rem 0.75rem;
}