/* The home page's own furniture (the Local Vault design): the vault door
   beside the H1 and the strip of category links. Linked by index.html
   alone, so the tool routes do not carry it; precached in sw.js's SHELL
   with the page. The steel and brass tokens it uses are in kit/base.css. */

/* The strip of category links under the readout. */
.tool-index ul {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
  list-style: none;
  padding: 0.7rem 0.6rem;
  margin: -0.4rem -0.6rem 0.3rem;
}
.tool-index li { flex: none; }
.tool-index a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.8rem;
  border: 1px solid var(--steel-edge);
  border-radius: 6px;
  background: var(--steel);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 0 var(--bevel), 0 2px 0 var(--steel-edge);
}
.tool-index a::before {
  content: "";
  width: 0.9rem;
  height: 0.3rem;
  margin-right: 0.5rem;
  border-radius: 3px;
  background: var(--brass-face);
  box-shadow: 0 0 0 1px var(--brass-lo);
}
.tool-index a:hover { border-color: var(--brass); }

/* The vault door. */
.vault-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  grid-template-areas: "eyebrow eyebrow" "title art" "lede lede" "dict dict";
  column-gap: 0.75rem;
  align-items: start;
}
.vault-hero > .eyebrow { grid-area: eyebrow; align-self: end; }
.vault-hero > h1 { grid-area: title; }
.vault-hero > .lede { grid-area: lede; }
.vault-hero > .dictionary { grid-area: dict; }
.vault-art { grid-area: art; width: 100%; aspect-ratio: 1; }
.vault-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
@media (min-width: 48rem) {
  .vault-hero {
    grid-template-columns: minmax(0, 1fr) 19rem;
    grid-template-areas: "eyebrow art" "title art" "lede art" "dict art";
    column-gap: 2.5rem;
  }
  .vault-hero > h1 { font-size: 2.6rem; }
}
.v-steel { fill: var(--steel-lo); stroke: var(--steel-edge); }
.v-face { fill: var(--steel-hi); stroke: var(--steel-edge); }
.v-edge { fill: none; stroke: var(--steel-edge); }
.v-ink { fill: var(--brass-ink); }
.v-hole { fill: #101614; }
.v-cable { fill: none; stroke: #2a3330; stroke-linecap: round; }
.v-dial { transform-origin: 120px 120px; animation: vault-spin 2.4s cubic-bezier(0.3, 0.1, 0.2, 1) 0.2s both; }
.v-plug { transform-origin: 208px 150px; animation: vault-sway 5s ease-in-out infinite; }
@keyframes vault-spin { from { transform: rotate(-300deg); } to { transform: rotate(0); } }
@keyframes vault-sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }