/* 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;
}