/* thebuckets.org (ZK-25) — deliberately NOT the book site's styling.
   In the novel this is a thing a stranger stood up in an hour. It should look like a competent
   person's utilitarian search page, not like a designed companion artifact. System fonts, one
   accent, no ornament. */
:root {
  --bk-bg: #f7f7f5; --bk-fg: #16181a; --bk-dim: #5f676e; --bk-line: #d9dcdd;
  --bk-card: #ffffff; --bk-accent: #8a2f2f;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bk-bg); color: var(--bk-fg);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* THE FICTION FRAME. sticky and with no dismiss control, on purpose — the threat model is a
   screenshot of any part of this page being read as a real breach index, so the notice has to
   survive scrolling rather than sit at the top waiting to be scrolled past. */
.fiction-frame {
  position: sticky; top: 0; z-index: 10;
  background: var(--bk-accent); color: #fff;
  padding: 0.7rem 1rem; font-size: 0.86rem; line-height: 1.45;
}
.fiction-frame a { color: #fff; text-decoration: underline; }
.fiction-frame strong { letter-spacing: 0.01em; }

.buckets { max-width: 46rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
/* ZK-25: the wordmark. Sized in rem so it tracks the reader's text size rather than pinning to a
   pixel width, and capped so it never outgrows the 46rem column. */
.bk-logo { margin: 0; line-height: 0; }
.bk-logo-svg { display: block; width: min(21rem, 100%); height: auto; color: var(--bk-fg); }
.bk-sub { margin: 0.25rem 0 1.6rem; color: var(--bk-dim); font-size: 0.85rem; }

.bk-form { display: flex; gap: 0.5rem; }
.bk-form input {
  flex: 1; padding: 0.6rem 0.7rem; font: inherit;
  border: 1px solid var(--bk-line); border-radius: 4px; background: var(--bk-card); color: inherit;
}
.bk-form button {
  padding: 0.6rem 1.1rem; font: inherit; cursor: pointer;
  border: 1px solid var(--bk-line); border-radius: 4px; background: #eceeef; color: inherit;
}
.bk-form button:hover { border-color: var(--bk-dim); }

.bk-logged { margin: 0.9rem 0 0; font-size: 0.85rem; }
.bk-logged-inworld { color: var(--bk-accent); font-weight: 600; }
.bk-logged-real { color: var(--bk-dim); }

.bk-count { margin: 1.6rem 0 0.8rem; color: var(--bk-dim); font-size: 0.8rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.bk-none { margin: 1.6rem 0; color: var(--bk-dim); font-style: italic; }
.bk-rec {
  background: var(--bk-card); border: 1px solid var(--bk-line); border-radius: 4px;
  padding: 0.9rem 1rem; margin-bottom: 0.7rem;
}
/* ZK-25: a record reads as tool output, not as an article. The identifier and date lead in
   monospace, the title follows, the tags trail. That ordering is what an index looks like,
   and this page is claiming to be one. */
.bk-rec-head { margin: 0 0 .2rem; display: flex; gap: .8rem;
               font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; color: var(--bk-dim); }
.bk-rec-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; }
.bk-rec-meta { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem;
               font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
               font-size: 0.72rem; color: var(--bk-dim); }
.bk-tag { background: #eceeef; border-radius: 3px; padding: 0.1rem 0.4rem; }
.bk-rec-body { margin: 0; color: #333; }
.bk-foot { margin-top: 2.6rem; padding-top: 1rem; border-top: 1px solid var(--bk-line);
           color: var(--bk-dim); font-size: 0.82rem; }

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

/* afterqday.com (ZK-40) — the same chrome as thebuckets.org, since both are artifacts of the
   same world and a second stylesheet is a second place for the fiction frame to drift. */
.aqd { max-width: 34rem; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.aqd-head h1 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
.aqd-hero { margin: 2.4rem 0; text-align: center; }
.aqd-label { margin: 0; color: var(--bk-dim); font-size: 0.8rem; letter-spacing: 0.14em;
             text-transform: uppercase; }
.aqd-day { margin: 0.1rem 0 0; font-size: clamp(4rem, 22vw, 8rem); line-height: 1;
           font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.aqd-note { margin: 0.5rem 0 0; color: var(--bk-dim); }
.aqd-facts { margin: 2.4rem 0 0; padding: 0; border-top: 1px solid var(--bk-line); }
.aqd-facts > div { display: flex; justify-content: space-between; gap: 1rem;
                   padding: 0.65rem 0; border-bottom: 1px solid var(--bk-line); }
.aqd-facts dt { margin: 0; color: var(--bk-dim); }
.aqd-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.aqd-cta { margin: 2.2rem 0 0; }
.aqd-cta a { color: var(--bk-accent); }

/* afterqday wordmark (ZK-40). Sized in rem so it tracks the reader's text size rather than
   pinning to a pixel width, and capped so it never outgrows the 34rem column. */
.aqd-logo { margin: 0; line-height: 0; }
.aqd-logo-svg { display: block; width: min(19rem, 100%); height: auto; color: var(--bk-fg); }

/* ── ardmorerisk.com (ZK-49) ────────────────────────────────────────────────────────────────
   Scoped to [data-ardmore] so the body-level overrides cannot reach thebuckets.org or
   afterqday.com, which share this stylesheet only for :root, the reset, .fiction-frame and
   .visually-hidden. Those three MUST stay shared — one frame definition is the whole point of
   the partial, and a second stylesheet is a second place for it to drift.

   The look is deliberately not buckets': that page is a utilitarian search tool a stranger stood
   up in an hour, this one is a firm that spent money to say nothing. Wide letter-spacing, a lot
   of air, one hairline, no accent colour anywhere in the body — the only saturated thing on the
   page is the fiction frame, which is exactly the right hierarchy for a prop. */
[data-ardmore] body {
  background: #fff; color: #23282d;
  font: 16px/1.75 ui-serif, Georgia, "Times New Roman", serif;
}
.ard { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem 5rem; }

/* Full-bleed within the column, and short — a hero band, not a photograph you are meant to look
   at. `slice` keeps the skyline anchored to its own baseline as the viewport narrows, so the
   buildings never letterbox into a strip of empty sky. */
.ard-hero { margin: 0 -1.25rem 2.75rem; }
.ard-sky {
  display: block; width: 100%; height: clamp(150px, 28vw, 300px);
  object-fit: cover;        /* the img equivalent of the SVG's preserveAspectRatio="slice" */
  object-position: 50% 62%; /* bias DOWN: the towers live in the lower two thirds of the frame,
                               so a centred crop on a short band would show mostly empty sky */
}

.ard-head { margin: 0 0 1.75rem; }
.ard-name {
  margin: 0; font-size: clamp(1.25rem, 3.4vw, 1.6rem); font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: #23282d;
}
.ard-copy { margin: 0 0 2.5rem; color: #3c444b; }
.ard-contact { margin: 0; padding-top: 1.75rem; border-top: 1px solid #e2e5e7; }
.ard-contact a { color: #23282d; text-decoration: none; border-bottom: 1px solid #c8ced3; }
.ard-contact a:hover { border-bottom-color: #23282d; }

/* The out-of-world footer keeps buckets' muted treatment rather than the serif above it, so the
   disclaimer reads as site furniture and not as more of the firm's own copy. */
[data-ardmore] .bk-foot {
  margin-top: 3.5rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  Helvetica, Arial, sans-serif; font-size: 0.82rem; color: #6b737a;
}

/* basaltcolabs.com (ch.30.1) — SEMI-STEALTH. Brad's brief: lightweight, semi-stealth, current
   typography. The register is a company that says what field it is in and then stops, so the
   design job is air and restraint rather than sections.

   NO WEBFONT, deliberately — this project loads none anywhere, and a CDN font on a prop page is
   both a new dependency and a request leaving the reader's browser for a third party. "Current"
   is the modern system-UI stack, a real scale, and tight negative tracking on the display line.
   `ui-sans-serif`/`system-ui` first picks up SF and Segoe Variable, which is what actually makes
   this read as 2026 rather than 2013.

   This sentence used to end "and a lot of whitespace," which Brad overruled on 2026-09-07 — the
   page did not fit a laptop screen. The tracking and the type scale are what carry the register;
   the vertical air was never doing that work, and it cost the whole page a viewport. See the
   density note on `.bsl` below before widening any margin here. */
:root {
  --bsl-fg:   #101215;
  --bsl-dim:  #6a7178;
  --bsl-line: #e6e8ea;
  --bsl-bg:   #fbfbfa;
  --bsl-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI",
              Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-basalt] body, body:has(.bsl) { background: var(--bsl-bg); }
/* WIDTH AND DENSITY ARE BRAD'S CALL, 2026-09-07: "too much white space ... it doesn't fit on a
   laptop screen. shrink it a little so it fits. you can also widen the margins some so Sams bio
   fits on one line instead of two." Both numbers below are load-bearing, so do not restore the
   airier earlier values from a reading of the header comment above.

   WHY 40rem AND NOT LESS. `box-sizing: border-box` (line 9) makes max-width INCLUSIVE of the
   3rem of horizontal padding, so the bio text column is max-width MINUS 8.35rem (3 padding +
   4 face + 1.35 gap). At the old 34rem that left ~410px, and "MIT. Samantha runs the machine and
   designs the algorithms." needs ~460px at this size — hence the wrap. 40rem gives ~506px, which
   clears it with room rather than exactly. Narrowing this again re-breaks her line; that is the
   test to re-run, not a matter of taste. */
.bsl {
  max-width: 40rem; margin: 0 auto; padding: clamp(1.75rem, 4vh, 2.5rem) 1.5rem 2.5rem;
  font-family: var(--bsl-sans); color: var(--bsl-fg);
  font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* The display line. Tight tracking is the single change that most reads as current type — at
   this size the default spacing looks slack. */
.bsl-head { margin: 0 0 2rem; }
.bsl-mark {
  margin: 0 0 1.1rem; font-weight: 600;
  font-size: clamp(1.75rem, 5.5vw, 2.5rem); line-height: 1.05;
  letter-spacing: -0.033em; color: var(--bsl-fg);
}
.bsl-claim {
  margin: 0; color: var(--bsl-dim); font-size: 1.0625rem; line-height: 1.5;
  letter-spacing: -0.006em;
}

.bsl-sec { margin: 0 0 1.9rem; }
.bsl-lede { margin: 0; font-size: 1.125rem; line-height: 1.6; letter-spacing: -0.008em; }

.bsl-h {
  margin: 0 0 1.1rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.13em; color: var(--bsl-dim);
}

.bsl-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.9rem; }
.bsl-person { display: grid; grid-template-columns: 4rem 1fr; gap: 1.35rem; align-items: start; }

/* One box, two fillings. The <img> and the monogram share every dimension and both radii, so the
   page reads as uniformly finished and the absence is not legible as a broken asset. That is the
   whole point — see the layout's header comment. */
.bsl-face {
  display: block; width: 4rem; height: 4rem; border-radius: 50%;
  object-fit: cover; background: #eceef0;
}
.bsl-mono {
  display: grid; place-items: center;
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.07em; color: #9aa1a8;
}

.bsl-bio p { margin: 0; }
.bsl-who { font-weight: 600; letter-spacing: -0.012em; }
.bsl-role {
  font-size: 0.9rem; color: var(--bsl-dim); letter-spacing: -0.004em;
  margin-bottom: 0.6rem !important;
}
.bsl-note { color: #3a4147; }

.bsl-foot {
  margin-top: 2rem; padding-top: 1.3rem; border-top: 1px solid var(--bsl-line);
  font-size: 0.95rem;
}
.bsl-foot p { margin: 0 0 0.5rem; }
.bsl-foot a { color: var(--bsl-fg); text-decoration: none; border-bottom: 1px solid #ccd1d5; }
.bsl-foot a:hover { border-bottom-color: var(--bsl-fg); }
.bsl-quiet { color: var(--bsl-dim); }

@media (max-width: 30rem) {
  .bsl-person { grid-template-columns: 3.25rem 1fr; gap: 1rem; }
  .bsl-face { width: 3.25rem; height: 3.25rem; }
}