/* Paton Hall — 4 Breadalbane Street, Hamilton
   Palette taken from the building: painted concrete block, the navy
   enamel of the sign, and the warm white of the shop's strip lights. */

:root {
  --paper:    #e6e5e1;   /* painted block wall, cool neutral */
  --paper-2:  #dcdad4;   /* recessed panel */
  --enamel:   #16212c;   /* the sign plate */
  --enamel-2: #24333f;
  --ink:      #1b1e21;
  --ink-2:    #5a5f64;
  --rule:     #b6b2a9;
  --rule-2:   #cbc7bf;
  --tube:     #f8efd6;   /* fluorescent warm white */
  --rust:     #8a4a2e;   /* brick chimney — used once, for Rejected */
  --link:     #2a4256;

  --serif: Charter, "Bitstream Charter", "Sitka Text", "Iowan Old Style", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "DejaVu Sans Mono", "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --wide: 60rem;
}

/* Three states. The system preference applies unless the reader has chosen,
   and an explicit choice wins in both directions. The two dark blocks below
   are identical and must stay in sync — plain CSS has no way to share them. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #14181c;
    --paper-2:  #1c2228;
    --enamel:   #0d141a;
    --enamel-2: #1c2a35;
    --ink:      #e4e2db;
    --ink-2:    #9aa1a8;
    --rule:     #333c44;
    --rule-2:   #262e35;
    --tube:     #f8efd6;
    --rust:     #c0714c;
    --link:     #9dc2dd;
  }
}

:root[data-theme="dark"] {
  --paper:    #14181c;
  --paper-2:  #1c2228;
  --enamel:   #0d141a;
  --enamel-2: #1c2a35;
  --ink:      #e4e2db;
  --ink-2:    #9aa1a8;
  --rule:     #333c44;
  --rule-2:   #262e35;
  --tube:     #f8efd6;
  --rust:     #c0714c;
  --link:     #9dc2dd;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.header-bar {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0.85rem 1.25rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Hidden until the script unhides it, so it never appears without working. */
.theme-toggle {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.42rem 0.7rem;
  cursor: pointer;
  line-height: 1;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); }
.theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.theme-toggle[hidden] { display: none; }

/* the enamel sign, as it appears on the wall */
.sign {
  display: inline-block;
  background: var(--enamel);
  color: var(--tube);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.045em;
  padding: 0.36rem 1.05rem 0.42rem;
  border: 1px solid var(--enamel-2);
  box-shadow: inset 0 0 0 2px var(--enamel);
  text-decoration: none;
}
.sign:hover { text-decoration: none; color: #fff; }

.site-nav {
  border-top: 1px solid var(--rule-2);
  background: var(--paper-2);
}
.site-nav ul {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.25rem;
  list-style: none;
  display: flex;
  gap: 1.35rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.site-nav li { flex: 0 0 auto; }
.site-nav a {
  display: block;
  padding: 0.55rem 0;
  font-family: var(--mono);
  font-size: 0.735rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--enamel); }

/* ---------- layout ---------- */

main { display: block; }

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.prose { max-width: var(--measure); }

section { padding: 3.25rem 0; border-bottom: 1px solid var(--rule-2); }
section:last-of-type { border-bottom: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.9rem;
}

/* ---------- hero ---------- */

.hero { padding: 0; border-bottom: 1px solid var(--rule); }

.hero figure { margin: 0; position: relative; background: var(--enamel); }

/* The Paton Hall sign sits between 28% and 40% of the image height, and it is
   the one thing that must never be cropped. Anchoring at 25% keeps the frame
   high while holding the sign in view at every viewport shape — pinning to
   the literal top does not, because the top of the photo is sky, and a
   wide-short window then cuts the sign off below the fold of the crop. */
.hero img {
  width: 100%;
  max-height: 62vh;
  min-height: 240px;
  object-fit: cover;
  object-position: center 25%;
}

.hero-text { padding: 2.5rem 0 3rem; }

h1.title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0 0 0.65rem;
}

.address {
  font-family: var(--mono);
  font-size: 0.79rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 1.6rem;
}

.standfirst {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 2.4vw, 1.5rem);
  line-height: 1.42;
  max-width: 30rem;
  margin: 0 0 1.5rem;
}

/* ---------- facts strip ---------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 2.25rem;
}
.facts div { background: var(--paper); padding: 1rem 1.1rem; }
.facts dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 0.3rem;
}
.facts dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.1;
}
.facts dd span { font-size: 0.9rem; color: var(--ink-2); }

/* ---------- progress ---------- */
/* Two counts pulled from Kit: everyone on the list, and the ones who have
   actually joined. The member bar carries the tube colour because it is the
   number that decides whether the room stays open. */

.progress {
  border: 1px solid var(--rule);
  border-top: 0;
  background: var(--paper);
}

.progress-row { padding: 0.9rem 1.1rem 1rem; }
.progress-row + .progress-row { border-top: 1px solid var(--rule-2); }

.progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.55rem;
}

.progress-head dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

.progress-head dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}
.progress-head dd span { color: var(--ink-2); font-size: 0.86rem; }

.track {
  height: 6px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  overflow: hidden;
}
.track > i {
  display: block;
  height: 100%;
  background: var(--rule);
  transition: width 600ms ease-out;
}

/* the live one */
.progress-row.is-members .track { border-color: #46596a; background: var(--enamel); }
.progress-row.is-members .track > i { background: var(--tube); }
.progress-row.is-members .progress-head dt { color: var(--ink); }

.progress-note {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  margin: 0.55rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .track > i { transition: none; }
}

/* ---------- signup ---------- */
/* The one call to action on the page. Enamel ground, tube-white button —
   the only place the strip-light colour appears as a surface. */

.signup {
  background: var(--enamel);
  color: var(--tube);
  border: 1px solid var(--enamel);
  padding: 1.5rem 1.4rem 1.6rem;
  margin-top: 2.25rem;
}

.signup .eyebrow { color: #9db2c4; margin-bottom: 0.55rem; }

.signup p {
  margin: 0 0 0.55rem;
  max-width: 34rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.4;
}

/* Supporting line: plainer and quieter than the serif lead above it, so the
   two read as headline then explanation rather than competing. */
.signup .signup-sub {
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  color: #cfe0ee;
  margin: 0 0 1.2rem;
}

.signup-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  max-width: 40rem;
}
.signup-form .full { grid-column: 1 / -1; }

.signup-form label {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #9db2c4;
  margin-bottom: 0.3rem;
}

/* These fields sit on the enamel block, which is dark in BOTH themes, so the
   field ground is always light. The text colour must therefore be a fixed
   dark value — using var(--ink) made it flip to light in dark mode and left
   people typing light grey on off-white. */
.signup-form input,
.signup-form select {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: #14171a;
  caret-color: #14171a;
  background: #f4f2ec;
  border: 1px solid #5a6d7e;
  border-radius: 0;
  padding: 0.62rem 0.7rem;
  appearance: none;
}
.signup-form input::placeholder { color: #5c6469; opacity: 1; }
.signup-form select option { color: #14171a; background: #f4f2ec; }

/* Browsers repaint autofilled fields with their own colours, which breaks the
   pairing above. Pin both back. */
.signup-form input:-webkit-autofill,
.signup-form input:-webkit-autofill:hover,
.signup-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #14171a;
  -webkit-box-shadow: 0 0 0 100px #f4f2ec inset;
  caret-color: #14171a;
}
.signup-form select {
  background-image: linear-gradient(45deg, transparent 50%, #46596a 50%),
                    linear-gradient(135deg, #46596a 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.signup-form input:focus-visible,
.signup-form select:focus-visible {
  outline: 2px solid var(--tube);
  outline-offset: 1px;
}

.signup-form button {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--enamel);
  background: var(--tube);
  border: 1px solid var(--tube);
  border-radius: 0;
  padding: 0.72rem 1.5rem;
  cursor: pointer;
  justify-self: start;
}
.signup-form button:hover { background: #fff; border-color: #fff; }
.signup-form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.signup .fineprint {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #8fa3b4;
  margin: 1rem 0 0;
  max-width: 34rem;
}
.signup .fineprint a { color: #cfe0ee; }

.signup a.plain { color: var(--tube); }

@media (max-width: 34rem) {
  .signup-form { grid-template-columns: 1fr; }
  .signup-form button { justify-self: stretch; text-align: center; }
}

/* ---------- document list ---------- */

.docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }

.docs li { border-bottom: 1px solid var(--rule); }

.docs a {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1.5rem;
  align-items: baseline;
  padding: 1.15rem 0.35rem;
  text-decoration: none;
  color: inherit;
}
.docs a:hover { background: var(--paper-2); }

.docs .ref {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.docs .name {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.25;
}
.docs .desc {
  grid-column: 2;
  margin: 0.3rem 0 0;
  font-size: 0.94rem;
  color: var(--ink-2);
  max-width: 38rem;
}

@media (max-width: 34rem) {
  .docs a { grid-template-columns: 1fr; gap: 0.25rem; }
  .docs .desc { grid-column: 1; }
}

/* ---------- figures ---------- */

figure { margin: 0 0 2rem; }
figure img { width: 100%; }
figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule-2);
  margin-top: 0.6rem;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 40rem) { .pair { grid-template-columns: 1fr; } }

/* ---------- paper (generated document) pages ---------- */

.paper { padding: 2.75rem 0 4rem; }

.paper h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.95rem, 5vw, 2.9rem);
  line-height: 1.08;
  margin: 0 0 1.5rem;
  max-width: 26rem;
}

.paper h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 2.9rem 0 0.85rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.paper h3 {
  font-family: var(--sans);
  font-weight: 650;
  font-size: 1.02rem;
  letter-spacing: 0.005em;
  margin: 2rem 0 0.6rem;
}

.paper h4 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 1.6rem 0 0.5rem;
}

.paper p, .paper li { max-width: var(--measure); }
.paper p { margin: 0 0 1.05rem; }
.paper ul, .paper ol { margin: 0 0 1.15rem; padding-left: 1.25rem; }
.paper li { margin-bottom: 0.4rem; }
.paper li > ul, .paper li > ol { margin-top: 0.4rem; margin-bottom: 0.5rem; }

.paper hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

.paper blockquote {
  margin: 1.5rem 0;
  padding: 0.15rem 0 0.15rem 1.15rem;
  border-left: 3px solid var(--enamel);
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.45;
  color: var(--ink);
}
.paper blockquote p { margin-bottom: 0.6rem; }
.paper blockquote p:last-child { margin-bottom: 0; }

.paper code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--paper-2);
  padding: 0.1em 0.34em;
  border: 1px solid var(--rule-2);
  white-space: nowrap;
}

.paper strong { font-weight: 650; }

/* tables — must scroll inside their own box, never the page */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.6rem;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.paper table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.9rem;
}
.paper th, .paper td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: top;
}
.paper th {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.paper tbody tr:last-child td { border-bottom: 0; }
.paper td code { background: transparent; border: 0; padding: 0; }

/* ---------- status note on generated pages ---------- */

.meta {
  font-family: var(--mono);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rust);
  padding: 0.85rem 1rem;
  margin: 0 0 2.25rem;
  max-width: var(--measure);
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 2.25rem 0 3rem;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.site-footer p { max-width: var(--measure); margin: 0 0 0.7rem; }
.site-footer .sign { margin-bottom: 1.1rem; }

/* The credit line. Set apart from the disclaimers above it, which are about
   the documents; this one is about who to talk to. */
.colophon {
  margin-top: 1.4rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-2);
}

.backlink {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .hero figure { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .paper h2 { page-break-after: avoid; }
  .table-scroll { overflow: visible; }
}