/* Shared by every public page (/login, /about, /security, /terms, /privacy; docs/design/website-motion.md): the palette, the top
   bar of the document pages, and the footer band with the etched skyline. */
:root {
  --bg: #f7f4ef; --paper: #fff; --ink: #1c1519; --ink-2: #4a3f47; --muted: #776b74; --line: #e6dfd7;
  --plum: #6b3a5b; --plum-2: #80546d; --night: #1d1220; --ivory: #f4ece1; --ivory-2: #d9c7d2; --umber: #22151a; --copper: #c58b73;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --out: cubic-bezier(.2, .7, .2, 1);
}
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 8px; font: 500 15px var(--sans);
  text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--plum); color: #fff; }
.btn-primary:hover { background: #7d4769; }
.btn-light { background: var(--ivory); color: #2a1626; }
.btn-light:hover { background: #fff; }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--muted); }
.btn:focus-visible, .site-foot a:focus-visible, .site-foot button:focus-visible, .doc-top a:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* ---------- document pages: a plain top bar */
.doc-top { display: flex; align-items: center; gap: 24px; max-width: 1180px; margin: 0 auto; padding: 18px 24px; font: 14px var(--sans); }
.doc-top .wordmark { margin-right: auto; font-size: 22px; }
.doc-top .doc-nav { display: flex; gap: 22px; }
.doc-top a:not(.btn):not(.wordmark) { color: var(--ink-2); text-decoration: none; }
.doc-top a:not(.btn):not(.wordmark):hover { color: var(--ink); }
.doc-top .btn { height: 36px; font-size: 13.5px; padding: 0 14px; }
.doc-top .wordmark span, .site-foot .wordmark span { color: var(--plum-2); }
.draft-note { margin: 0 0 28px; padding: 12px 14px; border: 1px solid #f0c27b; border-radius: 8px; background: #fff8eb; color: #7a4b00; font-size: 14px; }

/* ---------- the footer band (layout after the owner's reference, 2026-10-04): slogan and call to action, link columns, a large
   wordmark, and an etched skyline in the corner */
.site-foot { position: relative; overflow: hidden; background: var(--umber); color: var(--ivory); font-family: var(--sans); --sk-bg: var(--umber);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 40px 8%; padding: 88px max(16px, 5%) 0;  /* the top bar's own 5% gutter */
  height: calc(100svh - var(--topbar-h, 68px)); min-height: 600px; max-height: 1040px; box-sizing: border-box; }  /* the whole footer fits one screen under the fixed top bar */
.foot-pitch, .foot-links { position: relative; z-index: 2; }
.foot-pitch h2 { font: 400 clamp(30px, 3.4vw, 44px)/1.12 var(--serif); letter-spacing: -0.01em; margin: 0 0 28px; color: var(--ivory); max-width: 460px; }
.foot-pitch .btn { font-size: 15px; }
.foot-links { display: grid; grid-template-columns: repeat(3, minmax(120px, auto)); gap: 0 56px; align-content: start; }
.foot-links h3 { margin: 0 0 14px; font: 600 12.5px var(--sans); color: #a88d97; }
.foot-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot-links a, .foot-links button { color: #e7d9df; text-decoration: none; font: 15px var(--sans); background: none; border: 0; padding: 0; height: auto; cursor: pointer; }
.foot-links a:hover, .foot-links button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-mark { grid-column: 1 / -1; align-self: end; position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: -.2em; pointer-events: none; }  /* bottom left, the p's descender running off the page; the skyline holds the bottom right */
.foot-mark .wordmark { font: 650 clamp(96px, 15vw, 250px)/.78 var(--sans); letter-spacing: -0.06em; color: var(--ivory); text-decoration: none; pointer-events: auto;
  padding-bottom: .04em; }
.foot-copy { margin: 18px 0 0; color: #a88d97; font-size: 13px; }
.foot-sky { position: absolute; z-index: 0; right: 0; bottom: 0; width: 56%; height: 64%; pointer-events: none; }  /* bottom right, beside the wordmark */
.foot-sky img, .foot-sky svg { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
/* the scene's own styles (site_skyline.py), for when landing.js inlines it: its <style> is dropped there (the page CSP) */
.foot-sky .far { fill: #2a1b22; stroke: var(--copper); stroke-opacity: .22; stroke-width: 1; }
.foot-sky .mid { fill: #241720; stroke: var(--copper); stroke-opacity: .42; stroke-width: 1.1; }
.foot-sky .fr { fill: var(--umber); stroke: var(--copper); stroke-width: 1.6; stroke-linejoin: round; }
.foot-sky .sd { fill: #2f1e25; stroke: var(--copper); stroke-width: 1.2; stroke-linejoin: round; }
.foot-sky .tp { fill: #3a2630; stroke: var(--copper); stroke-width: 1; }
.foot-sky .mul { fill: none; stroke: var(--copper); stroke-width: .6; opacity: .45; }
.foot-sky .pane { fill: var(--copper); opacity: .14; } .foot-sky .pane.lit { fill: #f1c9a5; opacity: .7; }
.foot-sky .crown { fill: none; stroke: var(--copper); stroke-width: 1.6; stroke-linejoin: round; }
.foot-sky .col, .foot-sky .beam { fill: none; stroke: #e0a487; stroke-width: 1; opacity: .75; }
.foot-sky .fnd { fill: var(--copper); opacity: .7; transform-box: fill-box; transform-origin: center; }
.foot-sky .br-t { fill: var(--umber); stroke: #d9774a; stroke-width: 1.6; stroke-linejoin: round; }
.foot-sky .br-sd { fill: #3a2026; stroke: #d9774a; stroke-width: 1.2; }
.foot-sky .br-rib { fill: none; stroke: #d9774a; stroke-width: 1; opacity: .7; }
.foot-sky .br-deck { fill: none; stroke: #d9774a; stroke-width: 2.2; } .foot-sky .br-truss { fill: none; stroke: #d9774a; stroke-width: .9; opacity: .75; }
.foot-sky .br-cable { fill: none; stroke: #e88a5c; stroke-width: 2.6; stroke-linecap: round; } .foot-sky .br-cable.back { stroke-width: 1.6; opacity: .45; }
.foot-sky .br-hang { fill: none; stroke: #d9774a; stroke-width: .8; opacity: .6; }
.foot-sky .water { fill: none; stroke: var(--copper); stroke-width: 1; opacity: .28; }
.foot-sky .crane { opacity: 0; } .foot-sky .jib { transform-box: view-box; }
.foot-sky .cr-mast, .foot-sky .cr-jib { fill: none; stroke: #f1c9a5; stroke-width: 1.4; } .foot-sky .cr-line { stroke: #f1c9a5; stroke-width: .8; } .foot-sky .cr-load { fill: #f1c9a5; }
.foot-sky [data-a="rise"] { transform-box: fill-box; transform-origin: 50% 100%; }
@media (max-width: 860px) {
  .site-foot { grid-template-columns: minmax(0, 1fr); padding-top: 64px; min-height: 0; }
  .foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .site-foot { height: auto; max-height: none; }
  .foot-mark { margin-top: 48px; padding-bottom: 0; }
  .foot-sky { position: relative; grid-column: 1 / -1; width: auto; height: auto; margin: 8px calc(-1 * max(16px, 5%)) 0; }
  .foot-sky img, .foot-sky svg { height: auto; }
  .doc-top .doc-nav { display: none; }
}
@media (max-width: 560px) { .foot-sky img, .foot-sky svg { height: 280px; object-fit: cover; object-position: left bottom; }  /* the bridge and the first towers */
  .doc-top { padding: 14px 16px; gap: 10px; } .doc-top .btn-ghost { display: none; } .foot-mark { flex-direction: column; align-items: flex-start; } }

/* ---------- the sign-in modal (login.js): a working state on its primary button, and errors that read as errors */
#auth-modal[aria-busy="true"] button.primary:not([hidden]) { position: relative; color: transparent; }
#auth-modal[aria-busy="true"] button.primary:not([hidden])::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid rgb(255 255 255 / 40%); border-top-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  #auth-modal[aria-busy="true"] button.primary:not([hidden])::after { animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}
#auth-modal .status[data-tone="error"] { padding: 9px 12px; border-radius: 8px; background: #fef3f2; border: 1px solid #fecdca; color: #b42318; font-size: 13.5px; }
#auth-modal .status[data-tone="ok"] { padding: 9px 12px; border-radius: 8px; background: #ecfdf3; border: 1px solid #abefc6; color: #067647; font-size: 13.5px; }
#auth-modal h1 { font: 400 30px/1.15 var(--serif); letter-spacing: -0.01em; }

/* ---------- document pages: a contents rail beside one readable column, serif titles like the site */
.doc-wrap { display: grid; grid-template-columns: 200px minmax(0, 700px); gap: 64px; justify-content: center; max-width: 1180px; margin: 0 auto; padding: 32px 24px 120px; }
.doc-wrap > .page { max-width: none; margin: 0; padding: 0; }
.doc-toc { position: sticky; top: 24px; align-self: start; font: 13.5px/1.5 var(--sans); padding-top: 120px; }
.doc-toc p { margin: 0 0 10px; color: var(--muted); font-weight: 600; font-size: 12px; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; border-left: 1px solid var(--line); }
.doc-toc a { display: block; padding-left: 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--ink-2); text-decoration: none; }
.doc-toc a:hover { color: var(--ink); border-left-color: var(--plum-2); }
.doc-wrap .page h1 { font: 400 clamp(38px, 4.4vw, 54px)/1.08 var(--serif); letter-spacing: -0.015em; color: var(--ink); margin: 40px 0 10px; }
.doc-wrap .page .updated { font-size: 14px; margin-bottom: 36px; }
.doc-wrap .page h2 { font: 600 19px/1.3 var(--sans); margin-top: 44px; scroll-margin-top: 24px; }
.doc-wrap .page .lead { font-size: 18px; color: var(--ink); line-height: 1.6; }
.doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 8px; }
.doc-cards > * { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.doc-cards b { display: block; color: var(--ink); margin-bottom: 4px; }
.doc-cards p { margin: 0 0 10px; font-size: 14.5px; }
.doc-cards .btn { height: 38px; font-size: 14px; }
@media (max-width: 900px) { .doc-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 8px; } .doc-toc { display: none; } .doc-cards { grid-template-columns: minmax(0, 1fr); } }