/*
 * CTRAA website: set like the association's stationery.
 *
 * Type scale (Spencer Mortensen, "The typographic scale"):
 *   f(i) = f0 · r^(i/n), with r = 2, n = 5 and f0 = the body text size
 *   (18px on phones, 20px on larger screens).
 *
 * Styles:
 *
 *   Name     i = 5 (twice the text; i = 3 on phones), regular, cherry   the association's name
 *   Title    i = 3, regular                                             page titles (h1)
 *   Text     i = 0, regular                                             body copy, buttons
 *   Nav      i = 0, semibold                                            main navigation
 *   Heading  i = 0, bold                                                section headings, portfolios
 *   Small    i = -1, regular                                            tables, captions, dates, footer
 *
 * No capitals, letter-spacing or italics for structure. Colour carries the rest:
 * near-black for text, warm grey for secondary text, red for every link.
 *
 * Colours of the neighbourhood:
 *   stucco   warm white of the painted houses on a summer day (paper)
 *   railing  near-black of the cast-iron railings (text)
 *   sign red the red of the borough and postcode on the street-name plates (links)
 *   cherry   the dark red of the fruit (the name in the letterhead, link hover)
 *   blossom  a trace of cherry blossom (notices)
 */

@font-face {
  font-family: 'CTRA Pagella';
  src: url('/assets/fonts/ctra-pagella-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CTRA Pagella';
  src: url('/assets/fonts/ctra-pagella-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'CTRA Pagella';
  /* Generated from the regular by widening the outlines halfway to the bold (design/fonts/embolden.py). */
  src: url('/assets/fonts/ctra-pagella-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'CTRA Pagella';
  src: url('/assets/fonts/ctra-pagella-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /*
   * f0, the fundamental size, is the body text. Every other size is f0 · 2^(i/5).
   * Changing f0 adapts the whole scale to the medium: 18px on phones, 20px on larger screens.
   */
  --f0: 1.125rem;
  --small: calc(var(--f0) * 0.8706); /* i = -1 */
  --text: var(--f0); /* i = 0 */
  --title: calc(var(--f0) * 1.5157); /* i = 3 */
  --name: calc(var(--f0) * 1.5157); /* i = 3 on phones, i = 5 (twice the text) on larger screens */

  /* Line height: three steps of the scale (2^(3/5) ≈ 1.516). */
  --leading: 1.5157;
  /* Vertical rhythm: one line of body text. */
  --line: calc(var(--text) * var(--leading));

  /* About 70 characters of body text per line. */
  --measure: calc(var(--text) * 35);
  --wide: 64rem;
  --gutter: 1.3195rem;

  --stucco: #f7f2e8;
  --stucco-deep: #efe8da;
  --railing: #24201d;
  --railing-soft: #6b635b;
  --rule: #d9cfbf;
  --sign-red: #b3202b;
  --cherry: #7e1424;
  --blossom: #f3e1df;

  --serif: 'CTRA Pagella', 'Palatino Linotype', 'Book Antiqua', Palatino, 'URW Palladio L', serif;
}

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

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--stucco);
  color: var(--railing);
  font-family: var(--serif);
  font-size: var(--text);
  line-height: var(--leading);
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--blossom);
}

/* ---------- The four styles ---------- */

h1 {
  font-size: var(--title);
  font-weight: 400;
  line-height: 1.149;
  margin: 0 0 var(--line);
  text-wrap: balance;
}

h2,
h3 {
  font-size: var(--text);
  font-weight: 700;
}

strong,
b {
  font-weight: 700;
}

h2,
h3 {
  line-height: var(--leading);
  margin: 0 0 calc(var(--line) * 0.5);
  text-wrap: balance;
}

.small,
table,
figcaption,
.colophon,
.notice {
  font-size: var(--small);
}

.muted,
th {
  color: var(--railing-soft);
}

/* ---------- Links: one style everywhere ---------- */

a {
  color: var(--sign-red);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

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

a[aria-current='page'] {
  color: var(--railing);
  text-decoration: none;
}

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

/* ---------- Spacing ---------- */

p,
ul,
ol,
figure,
blockquote,
.table {
  margin-block: 0 var(--line);
}

section {
  margin-block-start: calc(var(--line) * 2);
}

/* Sections of a page are divided by a rule, like the parts of a printed agenda. */
main > section + section,
article > section {
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--line);
}

.prose ul,
.prose ol {
  padding-inline-start: 1.25em;
}

.prose li + li {
  margin-block-start: calc(var(--line) * 0.25);
}

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

.prose h2,
.prose h3 {
  margin-block-start: var(--line);
}

/* Dated issue updates get a rule above, nothing more. */
.prose h2.dated {
  border-block-start: 1px solid var(--rule);
  padding-block-start: calc(var(--line) * 0.5);
}

blockquote {
  margin-inline: 0;
  padding-inline-start: var(--text);
  border-inline-start: 1px solid var(--rule);
}

hr {
  border: 0;
  border-block-start: 1px solid var(--rule);
  margin-block: var(--line);
}

/* ---------- The sheet: one centred column, like a letter ---------- */

main,
.colophon {
  width: min(100% - 2 * var(--gutter), var(--measure));
  margin-inline: auto;
}

main {
  padding-block: calc(var(--line) * 2) calc(var(--line) * 3);
}

/* Pictures and wide lists break out of the column, centred on the page. */
.banner,
.pair,
.newsletters,
.admin .table,
main > .committee .table,
.entry-committee .table {
  width: min(100vw - 2 * var(--gutter), var(--wide));
  margin-inline-start: 50%;
  translate: -50% 0;
}

main > .committee .table,
.entry-committee .table {
  width: min(100vw - 2 * var(--gutter), 46rem);
}

/* ---------- Letterhead ---------- */

.letterhead {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
  padding-block-start: var(--line);
  text-align: center;
}

.letterhead-mark {
  display: inline-block;
  color: var(--railing);
  text-decoration: none;
}

.letterhead-mark:hover {
  color: var(--railing);
}

.letterhead-mark .tree {
  display: block;
  width: auto;
  height: 6rem;
  margin-inline: auto;
}

/*
 * The name: the one place the scale goes up a full interval, to s6, twice the body
 * size (s4, the title size, on phones). Second ink of the letterhead, as on printed stationery.
 */
.letterhead-mark .name {
  display: block;
  margin-block-start: calc(var(--line) * 0.5);
  font-size: var(--name);
  line-height: 1.149;
  text-wrap: balance;
  color: var(--cherry);
}

/* Line breaks only between these phrases. */
.letterhead-mark .name > span {
  display: inline-block;
}

.letterhead-line {
  margin: calc(var(--line) * 0.25) 0 0;
  color: var(--railing-soft);
}

.letterhead nav {
  margin-block-start: var(--line);
  border-block: 1px solid var(--rule);
}

/* Navigation: semibold, link red without underlines; the current page and hover in the letterhead's cherry. */
.letterhead nav a {
  font-weight: 600;
  text-decoration: none;
}

.letterhead nav a:hover,
.letterhead nav a[aria-current='page'] {
  color: var(--cherry);
}

.letterhead nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--small);
  margin: 0;
  padding: calc(var(--line) * 0.25) 0;
  list-style: none;
}

/* ---------- Tables ---------- */

.table {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: calc(var(--line) * 0.2) var(--small) calc(var(--line) * 0.2) 0;
  border-block-end: 1px solid var(--rule);
}

th {
  font-weight: 400;
}

/* Committee: the portfolio (first column) in bold. */
main > .committee td:first-child,
.entry-committee td:first-child {
  font-weight: 700;
}

/* ---------- Footer and notices ---------- */

.updated {
  margin-block-start: calc(var(--line) * 2);
}

.colophon {
  text-align: center;
  border-block-start: 1px solid var(--rule);
  padding-block: var(--line) calc(var(--line) * 2);
  color: var(--railing-soft);
}

.colophon p {
  margin: 0;
}

.notice,
.flash {
  background: var(--blossom);
  padding: calc(var(--line) * 0.4) var(--gutter);
}

.notice {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Home ---------- */

.intro {
  margin-block-start: 0;
}

.join-form {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--line) * 0.5);
  margin-block-end: var(--line);
}

.join-form select {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: calc(var(--line) * 1.6);
  padding: 0 2.5rem 0 var(--small);
  font: inherit;
  color: var(--railing);
  background: var(--stucco)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2324201d' stroke-width='1.2'/%3E%3C/svg%3E")
    no-repeat right var(--small) center;
  border: 1px solid var(--railing-soft);
  border-radius: 0;
  appearance: none;
  text-overflow: ellipsis;
}

.join-form select:invalid {
  color: var(--railing-soft);
}

.button {
  display: inline-block;
  min-height: calc(var(--line) * 1.6);
  padding: 0 calc(var(--line) * 1.25);
  border: 0;
  background: var(--sign-red);
  color: var(--stucco);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: var(--cherry);
  color: var(--stucco);
}

.button:disabled,
.button:disabled:hover,
.join-form:invalid .button {
  background: var(--rule);
  color: var(--railing-soft);
  cursor: not-allowed;
}

.issue-list {
  list-style: none;
  padding: 0;
}

.issue-list > li {
  border-block-start: 1px solid var(--rule);
  padding-block: calc(var(--line) * 0.5);
}

.issue-list p {
  margin: 0;
}

/* ---------- History ---------- */

.banner {
  margin-block: calc(var(--line) * 2);
}

.banner img {
  display: block;
  width: 100%;
  height: auto;
}

.pair {
  margin-block-start: calc(var(--line) * 2);
}

.pair h3 {
  width: min(100%, var(--measure));
  margin-inline: auto;
  margin-block-end: calc(var(--line) * 0.5);
}

/* Without JavaScript: the two photographs side by side. */
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--line);
}

.compare figure {
  margin: 0;
}

.compare img {
  display: block;
  width: 100%;
  height: auto;
}

figcaption {
  margin-block-start: calc(var(--line) * 0.4);
  color: var(--railing-soft);
}

.year {
  color: var(--railing);
}

/* With JavaScript: one picture, drag to reveal the other year. */
.compare.is-enhanced {
  grid-template-columns: 1fr;
  row-gap: 0;
}

@media (min-width: 40rem) {
  .compare.is-enhanced {
    grid-template-columns: 1fr 1fr;
  }
}

.compare.is-enhanced .stage {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  background: var(--stucco-deep);
}

.compare.is-enhanced figure img {
  display: none;
}

.stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage .now-layer {
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.stage .divider {
  position: absolute;
  inset-block: 0;
  left: var(--pos, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--stucco);
  box-shadow: 0 0 0 1px rgb(36 32 29 / 0.2);
  pointer-events: none;
}

.stage .divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: 2rem;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--stucco);
  box-shadow: 0 1px 4px rgb(36 32 29 / 0.35);
}

.stage .tag {
  position: absolute;
  top: calc(var(--line) * 0.4);
  padding: 0 calc(var(--line) * 0.25);
  background: rgb(247 242 232 / 0.88);
  font-size: var(--small);
  pointer-events: none;
}

.stage .tag-then {
  left: calc(var(--line) * 0.4);
}

.stage .tag-now {
  right: calc(var(--line) * 0.4);
}

.stage input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.stage input[type='range']:focus-visible + .divider::after {
  outline: 2px solid var(--sign-red);
  outline-offset: 2px;
}

.hint {
  display: none;
}

.js .hint {
  display: block;
}

.newsletters {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--line) calc(var(--line) * 1.25);
  font-size: var(--small);
}

.newsletters a {
  display: block;
  color: var(--railing);
  text-decoration: none;
}

.newsletters a:hover strong {
  color: var(--sign-red);
}

.newsletters img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  margin-block-end: calc(var(--line) * 0.25);
}

.stories {
  list-style: none;
  padding: 0;
  margin: 0;
}

.newsletters p {
  margin: 0;
}

/* ---------- Documents ---------- */

.document-group ul {
  list-style: none;
  padding: 0;
}

.document-group li {
  padding-block: calc(var(--line) * 0.2);
  border-block-end: 1px solid var(--rule);
}

.document-group li p {
  margin: 0;
}

/* ---------- Admin ---------- */

.admin .links {
  white-space: nowrap;
}

.badge {
  color: var(--cherry);
}

.warnings,
.changes {
  font-size: var(--small);
}

/*
 * Narrow screens: a table that doesn't fit scrolls edge to edge of the viewport,
 * while its first column still lines up with the text.
 */
@media (max-width: 50rem) {
  .table,
  .admin .table,
  main > .committee .table,
  .entry-committee .table {
    display: flex;
    width: 100vw;
    margin-inline-start: 50%;
    translate: -50% 0;
    padding-inline-start: var(--gutter);
  }

  /* Trailing space at the end of the scroll, matching the gutter. */
  .table::after {
    content: '';
    flex: 0 0 var(--gutter);
  }

  .table > table {
    flex: none;
    width: max-content;
    max-width: 42rem;
    min-width: calc(100vw - 2 * var(--gutter));
  }
}

/* ---------- Larger screens: more room, same styles ---------- */

@media (min-width: 40rem) {
  :root {
    --f0: 1.25rem;
    --name: calc(var(--f0) * 2);
    --gutter: 2rem;
  }

  .letterhead-mark .tree {
    height: 7.5rem;
  }

  .letterhead nav ul {
    gap: 0 calc(var(--line) * 1.25);
  }
}

@media print {
  .letterhead nav,
  .notice {
    display: none;
  }

  body {
    background: none;
  }
}