/* The home page below the hero: the guide (contents rail + article) and the footer.
   Values from Paper "Home · Hero · a": the guide is the "Copy" frame, the footer "Home · Footer".
   Reuses style.css: --ink, --paper, --ground, --muted, --font-display, --font-ui, --m, --e-ui. */
:root {
  --line: color-mix(in srgb, var(--ink) 10%, transparent);            /* Paper --color-line */
  --line-on-dark: color-mix(in srgb, var(--paper) 14%, transparent);  /* Paper --color-line-on-dark */
  --on-dark-muted: color-mix(in srgb, var(--paper) 60%, transparent); /* #FFFFFF99 */
  --on-dark-body: color-mix(in srgb, var(--paper) 74.1%, transparent); /* #FFFFFFBD */
  --on-dark-faint: color-mix(in srgb, var(--paper) 33%, transparent);  /* #FFFFFF54: footer heads, copyright */
  --accent: #e5532a;   /* light only: focus */
  --gutter: 24px;
  --rail-top: 48px;    /* the rail's own padding; jumps land section heads level with it */
  --d-hover: 120ms;
  --d-enter: 600ms;
  --e-enter: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Guide ---------- */
.guide {
  display: flex; justify-content: center;
  padding: 96px var(--m);
}
.guide-frame {
  display: flex; align-items: flex-start; gap: 28px;
  width: 1024px; max-width: 100%;
}

/* Contents rail: 30% of the frame, sticky, the current section in ink 500. */
.rail {
  position: sticky; top: var(--nav-h); flex-shrink: 0; /* under the anchored nav */
  width: 30%; width: round(30%, 1px);
  padding-block: var(--rail-top);
}
.rail ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rail a {
  display: block;
  font: 400 16px/24px var(--font-ui); color: var(--muted);
  transition: color var(--d-hover) var(--e-ui);
}
.rail a[aria-current="true"] { color: var(--ink); font-weight: 500; }

/* Article */
.doc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 96px; }
.doc-sec {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  scroll-margin-top: calc(var(--nav-h) + var(--rail-top)); /* jumps land level with the rail's first item */
}
.doc-sec > h2 {
  align-self: stretch; min-height: 32px;
  font: 400 24px/24px var(--font-display); letter-spacing: -0.02em; color: var(--ink);
}
.doc-sec > h2:focus { outline: none; }
.doc-sec > p {
  align-self: stretch;
  font: 400 16px/24px var(--font-ui); color: var(--body); text-wrap: pretty;
}

/* Who we are: 128px circles on ink 5%, name and two links under each. */
.team { display: flex; align-items: flex-start; gap: 16px; padding-block: 16px; max-width: 100%; }
.person {
  width: 176px; min-width: 0; /* shrinks to share a phone's width */
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.photo {
  width: 128px; height: 128px; flex-shrink: 0;
  border-radius: 50%; overflow: clip;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50%; }
.person-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.person-name { font: 400 14px/14px var(--font-ui); color: var(--ink); }
.person-link {
  display: inline-flex; align-items: center; gap: 4px;
  font: 400 14px/14px var(--font-ui); color: var(--muted);
  transition: color var(--d-hover) var(--e-ui);
}
.person-link svg { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; }

/* What makes data valuable: term 152 | description, a 1px rule over each row. */
.facts { align-self: stretch; margin: 0; }
.facts > div {
  display: flex; gap: 24px;
  padding: 8px 0 16px;
  border-top: 1px solid var(--line);
}
.facts dt { width: 152px; flex-shrink: 0; font: 500 14px/24px var(--font-ui); color: var(--ink); }
.facts dd { flex: 1; margin: 0; font: 400 14px/24px var(--font-ui); color: var(--muted); text-wrap: pretty; }

/* Link rows (Personal traces, Next steps): action 152 | description, a 1px rule under each.
   The action's hit area stretches over its whole row. */
.rows { align-self: stretch; padding-block: 16px; }
.row {
  position: relative;
  display: flex; align-items: center; gap: 24px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
}
.row-link {
  display: flex; align-items: center; gap: 4px;
  width: 152px; flex-shrink: 0;
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 14px/24px var(--font-ui); color: var(--ink);
}
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link svg {
  width: 16px; height: 16px; flex-shrink: 0; fill: currentColor;
  transition: transform var(--d-hover) var(--e-ui);
}
.row-desc {
  flex: 1; min-width: 0;
  font: 400 14px/24px var(--font-ui); color: var(--muted);
  transition: color var(--d-hover) var(--e-ui);
}

/* Copy prompt: the copy icon turns into a check while "Copied" shows. */
.copy .i-check { display: none; }
.copy[data-copied] .i-copy { display: none; }
.copy[data-copied] .i-check { display: block; }

/* ---------- Footer (Paper "Home · Footer", 2026-10-14) ----------
   The line and copyright on the left, three link columns on the right, then the wordmark at the footer's
   full width, dithered and sinking into the ink (foot.js). */
.foot { background: var(--ink); color: var(--paper); overflow: clip; }
.foot-top { display: flex; min-height: 273px; }
.foot-brand {
  width: 50%; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--gutter);
  padding: 64px var(--gutter) 0 var(--m);
}
.foot-line { width: 256px; max-width: 100%; font: 400 14px/20px var(--font-ui); color: var(--on-dark-muted); } /* 14 (Jerry, 2026-10-15) */
.foot-copy { font: 500 13px/18px var(--font-ui); letter-spacing: 0.01em; color: var(--on-dark-faint); }
.foot-cols {
  flex: 1; min-width: 0;
  display: flex; align-content: flex-start; gap: 40px var(--gutter);
  padding: 64px var(--m) 0 var(--gutter);
}
.foot-col { flex: 0 1 205px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } /* 205 in Paper; they share the space below 1440 rather than wrap */
.foot-head {
  padding-bottom: 4px;
  font: 500 13px/18px var(--font-ui); letter-spacing: 0.01em; color: var(--on-dark-faint);
}
.foot-col ul { display: flex; flex-direction: column; gap: 12px; font: 400 14px/20px var(--font-ui); }
.foot-col a { color: var(--on-dark-body); transition: color var(--d-hover) var(--e-ui); }

/* The wordmark: Sentient Light, sized by foot.js to the content width (320px at 1440). The DOM text sets
   the box and is the fallback; once the canvas is live it hides. */
.foot-mark { position: relative; padding: 0 24px 0 var(--m); line-height: 1; user-select: none; }
.foot-word {
  display: block; width: max-content; white-space: nowrap;
  font: 300 var(--fs, 22.2vw)/1 var(--font-display); letter-spacing: -0.02em;
  background: linear-gradient(var(--paper) 12%, color-mix(in srgb, var(--paper) 30%, var(--ink)) 62%, var(--ink) 86%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.foot-mark.is-live .foot-word { visibility: hidden; }
.foot-art {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  image-rendering: pixelated; pointer-events: none;
  visibility: hidden; /* until it has drawn: a context that never draws would show as a black slab */
}
.foot-mark.is-live .foot-art { visibility: visible; }

/* Tablet: the brand line sits above the three columns. */
@media (min-width: 768px) and (max-width: 1023px) {
  .foot-top { flex-direction: column; min-height: 0; }
  .foot-brand { width: auto; padding-right: var(--m); }
  .foot-cols { padding: 48px var(--m) 64px; }
}

/* ---------- Hovers: start at once, finish in 120ms ---------- */
@media (hover: hover) {
  .rail a:hover, .person-link:hover { color: var(--ink); }
  .row:hover .row-desc { color: var(--ink); }
  .row:hover .i-arrow { transform: translateX(2px); }
  .row:hover .i-out { transform: translate(2px, -2px); }
  .foot-col a:hover { color: var(--paper); }
}

/* Focus: the accent as light. */
.guide :focus-visible, .foot :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Phone (Paper "Home · Guide · phone", 2026-10-14) ----------
   No rail and no section bar: the guide is one column you scroll. Heads 22/28, body 14/150%, 48 between sections. */
@media (max-width: 767px) {
  .guide { flex-direction: column; justify-content: flex-start; padding: 0 0 80px; }
  .guide-frame { padding: 48px var(--m) 0; }
  .rail { display: none; }
  .doc { gap: 48px; }
  .doc-sec { scroll-margin-top: 72px; } /* clear of the fixed nav */
  .doc-sec > h2 { min-height: 0; font-size: 22px; line-height: 28px; }
  .doc-sec > p { font-size: 14px; line-height: 150%; }
  .facts > div { flex-direction: column; gap: 0; }
  .facts dt { width: auto; }

  .foot-top { flex-direction: column; min-height: 0; }
  .foot-brand { width: auto; padding: 48px var(--m) 0; }
  .foot-cols { flex-wrap: wrap; padding: 40px var(--m) 48px; gap: 32px var(--gutter); }
  .foot-col { flex: 0 0 calc((100% - var(--gutter)) / 2); }
  .foot-col a { display: inline-block; padding-block: 10px; margin-block: -10px; } /* 44px targets */
  .foot-mark { padding-right: var(--m); }
}