@charset "UTF-8";
/* ==========================================================================
   Home page components. Loaded after css/styles200920261.css and reuses its
   tokens, type scale and section furniture — nothing from it is redefined.

   The first page-level stylesheet this page has needed: everything else on it
   is section furniture the other pages use too. It holds one component, the
   pair of buttons at the foot of the papers, which is the same component as
   the Substack button on /opus/ and the YouTube button on /videos/, repeated
   rather than promoted: moving it into styles200920261.css would re-version a
   file all nineteen pages depend on, and each page loads exactly one page
   stylesheet, never two.
   ========================================================================== */

/* --- Screen-reader-only text ---------------------------------------------- */

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Section standfirst ---------------------------------------------------- */
/* The paragraph that opens the Writing section was set at the page lede's size,
   24px against the 34px h2 above it at 1280px, which made it read as a second
   heading; and with every margin zeroed in the base stylesheet the list below
   started on the first row's own 0.95rem of padding. It now takes the step the
   overview lede already takes on this page, 21px and --ink-2, and the space
   under it is the clamp the section head and the year headings use, so the list
   begins on the section's rhythm instead of against the paragraph. */

.section__lede {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- Company buttons (foot of the papers) --------------------------------- */
/* The pair is held to the same measure as the note above it, so the two read
   as one block: the papers column is 54rem across at a 1280px window, and a
   button run to that width would read as a banner rather than a button. The
   15.5rem minimum is what the longer of the two labels, "Go to Galactic
   Bioware", needs on one line; where two of those no longer fit the pair drops
   to a single column, which is what a phone gets. */

.visit-note {
  max-width: var(--measure);
  margin-top: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink-2);
}

.visit-ctas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: 0.6rem;
  max-width: var(--measure);
  margin-top: 1rem;
}

.visit-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.25s;
}
.visit-cta:hover,
.visit-cta:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.visit-cta__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.visit-cta__mark svg { width: 52%; height: 52%; fill: currentColor; }

.visit-cta__text { display: grid; gap: 0.15rem; }
.visit-cta__label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-meta);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.visit-cta__handle {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.visit-cta:hover .visit-cta__label,
.visit-cta:hover .visit-cta__handle { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .visit-cta { transition: border-color 0.18s; }
  .visit-cta:hover, .visit-cta:focus-visible { transform: none; }
}

/* --- Print ---------------------------------------------------------------- */
/* On paper a button cannot be pressed, so the mark and the frame go and the
   two addresses are left as text under the note. */

@media print {
  .visit-ctas { display: block; }
  .visit-cta {
    border: 0;
    padding: 0.15rem 0;
    background: none;
  }
  .visit-cta__mark { display: none; }
}