/* ============================================================
   Timeline Source — foundations
   Pure white ground, deep teal accent, warm gold highlight.
   ============================================================ */

/* The name in the logo is set in Source Sans 3 SemiBold (Adobe, SIL Open
   Font License), served from this site: the privacy page promises that
   nothing here calls out to anyone else, so no font service. Only the name
   uses it, and pages preload the file so the name doesn't change face as it
   arrives. If the file ever changes, change its name too; it is cached for a
   year (_headers). */
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-semibold-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --white: #ffffff;
  --ink: #14171a;
  --ink-2: #3d454d;
  --muted: #6b7480;
  --faint: #9aa3ad;
  --line: #e6e9ed;
  --line-soft: #f0f2f5;
  --surface: #fafbfc;

  --accent: #0f4c5c;
  --accent-hover: #0b3b47;
  --accent-soft: #e7f0f2;
  --gold: #b0812a;
  --gold-soft: #fbf4e6;
  --danger: #b3261e;
  --danger-soft: #fdeceb;

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 23, 26, .06), 0 1px 3px rgba(20, 23, 26, .04);
  --shadow: 0 2px 4px rgba(20, 23, 26, .04), 0 8px 24px rgba(20, 23, 26, .08);
  --shadow-lg: 0 4px 8px rgba(20, 23, 26, .04), 0 20px 48px rgba(20, 23, 26, .12);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --header-h: 68px;
}

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

/* Author styles beat the user agent's [hidden] rule, so any component
   that sets its own `display` would otherwise ignore the attribute. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1.1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font: inherit;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1;
  padding: .68em 1.15em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-ghost { border-color: var(--line); background: var(--white); color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { border-color: var(--faint); color: var(--ink); }

.btn-quiet { color: var(--muted); padding: .5em .7em; }
.btn-quiet:hover:not(:disabled) { background: var(--line-soft); color: var(--ink); }

.btn-danger { color: var(--danger); border-color: var(--line); background: var(--white); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: #f0c3bf; }

.btn-lg { font-size: 1.02rem; padding: .85em 1.6em; }
.btn-sm { font-size: .84rem; padding: .5em .8em; }

/* ---------- forms ---------- */

label, .label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-2);
  margin-bottom: .4em;
}

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="time"], textarea, select {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .6em .75em;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236b7480' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7em center;
  padding-right: 2em;
}

.field { margin-bottom: 1.15rem; }
.hint { font-size: .82rem; color: var(--muted); margin: .4em 0 0; }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: .6em;
  font-size: .92rem;
  font-weight: 400;
  color: var(--ink-2);
  cursor: pointer;
  margin: 0;
}
.checkbox input { width: auto; margin: .25em 0 0; accent-color: var(--accent); flex: none; }

/* ---------- tooltips ---------- */

/* The site's own hover hints (js/tooltip.js), in place of the system tooltip
   a title attribute gets. Ink like the toast, with a caret on the element
   the hint belongs to and any keyboard shortcut in small key caps. */
.tip {
  position: fixed;
  z-index: 250;
  width: max-content;
  max-width: 260px;
  padding: .34rem .6rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font: 500 .75rem/1.4 var(--sans);
  box-shadow: var(--shadow);
  pointer-events: none;
  opacity: 0;
  transform: translateY(var(--tip-from, -3px));
  transition: opacity .12s ease, transform .12s ease;
}
.tip[data-side="top"] { --tip-from: 3px; }
.tip.on { opacity: 1; transform: none; }
.tip::before {
  content: "";
  position: absolute;
  left: var(--caret, 50%);
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 1.5px;
  background: inherit;
  transform: rotate(45deg);
}
.tip[data-side="bottom"]::before { top: -3px; }
.tip[data-side="top"]::before { bottom: -3px; }
.tip-keys { display: inline-flex; gap: 3px; margin-left: .5rem; vertical-align: 1px; }
.tip kbd {
  font: 600 .66rem/1 var(--sans);
  padding: .22em .42em;
  border-radius: 4px;
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .92);
}
@media (prefers-reduced-motion: reduce) {
  .tip { transform: none; transition: opacity .12s ease; }
}

/* ---------- notices ---------- */

.notice {
  border-radius: var(--radius-sm);
  padding: .75em 1em;
  font-size: .9rem;
  margin-bottom: 1.1rem;
  border: 1px solid transparent;
}
.notice-error { background: var(--danger-soft); border-color: #f3cdca; color: #8c1e18; }
.notice-ok { background: var(--accent-soft); border-color: #cfe1e5; color: var(--accent-hover); }
.notice[hidden] { display: none !important; }

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

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 clamp(1.1rem, 4vw, 2.5rem);
  background: var(--white);
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.brand:hover { text-decoration: none; }
/* The mark is kept a little smaller than the name, so the words lead. Its
   viewBox is cropped to the bars, so a height alone sizes it. */
.brand-mark { display: block; flex: none; width: auto; height: 19px; }
.brand-name {
  font-family: "Source Sans 3", var(--sans);
  font-size: 1.47rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
}
.brand-accent { color: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .93rem;
}
.site-nav a {
  color: var(--ink-2);
  padding: .5em .8em;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.site-nav a:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; }
.site-nav a.cta {
  background: var(--accent);
  color: #fff;
  margin-left: .3rem;
}
.site-nav a.cta:hover { background: var(--accent-hover); }
.site-nav [hidden] { display: none !important; }

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

.wrap { max-width: 68ch; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.wrap-wide { max-width: 1400px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }

.site-footer {
  border-top: 1px solid var(--line-soft);
  margin-top: 5rem;
  padding: 2rem 0 3rem;
  font-size: .87rem;
  color: var(--muted);
}
.site-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.site-footer a:hover { color: var(--ink); }
.footer-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

.mono { font-family: var(--mono); font-size: .92em; }

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

/* ---------- narrow screens ---------- */

/* The header has to stay on one line: the brand plus two or three links
   is more than 375px will take at full size. */
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  .site-header { padding: 0 1rem; gap: .5rem; }
  .brand { gap: .45rem; }
  .brand-mark { height: 16px; }
  .brand-name { font-size: 1.25rem; }
  .site-nav { font-size: .86rem; gap: 0; }
  .site-nav a { padding: .45em .55em; }
  .site-nav a.cta { margin-left: .25rem; padding: .5em .7em; }
}

/* Below this the secondary link has to go; it is still in the footer. */
@media (max-width: 470px) {
  .nav-secondary { display: none; }
  .brand-name { font-size: 1.16rem; }
}