/* root.css — the ante-room only. Plain, neutral, forks above the fold
   (CLAUDE.md §2/§4). No webfont, no photos, no branch tokens — restraint made
   deliberate through type and spacing, not ornament. */

.root-wrap {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
  /* fills the space between top and footer via `main { flex: 1 0 auto }` in
     base.css, then centres the column within it — no viewport-height hack, so
     the footer never pushes the page into a scroll (CLAUDE.md §2). */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding-block: 2rem;
}

/* --- masthead: wordmark + location, ruled off from the fork ---------------- */
.masthead {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.wordmark {
  margin: 0;
  font-size: clamp(2.1rem, 5vw + 0.6rem, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.wordmark .amp {
  color: var(--color-accent);   /* slate — the one distinctive glyph, set as a connector */
  font-weight: 500;
  margin-inline: 0.06em;
}
.place {
  margin: 0.55rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

/* --- the fork: two doorways; side by side on width, stacked when narrow ---- */
.fork {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}
.fork a {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.6rem 3.25rem 1.6rem 1.5rem;   /* right room for the arrow */
  border-radius: 8px;
  background-color: var(--color-cta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11h11M11 6l5 5-5 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.2rem top 1.7rem;
  color: var(--color-cta-ink);
  text-decoration: none;
  transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.fork a:hover {
  background-color: var(--color-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-text) 20%, transparent);
}
.fork a:hover .fork-name,
.fork a:focus-visible .fork-name {
  text-decoration: underline;
}
.fork a:focus-visible {
  outline-color: var(--color-text);   /* stronger than the slate default, on a slate card */
}
.fork-name {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.fork-areas {
  font-size: 1rem;
  line-height: 1.45;
}

/* --- short viewports (landscape phones, large OS text): tighten so the fork
       still clears the fold without scrolling ------------------------------- */
@media (max-height: 34rem) {
  .root-wrap { gap: 1.1rem; padding-block: 1rem; }
  .masthead { padding-bottom: 0.85rem; }
  .wordmark { font-size: clamp(1.5rem, 6vw, 1.95rem); }
  .place { margin-top: 0.35rem; }
  .fork { gap: 0.85rem; }
  .fork a { padding: 1.1rem 3rem 1.1rem 1.25rem; background-position: right 1rem top 1.2rem; }
  .fork-name { font-size: 1.15rem; }
  .fork-areas { font-size: 0.95rem; }
}