@layer pages {
/* "/" (07 P1): a compact hero with the carnet plate, two door cards on their
   species fields, a travel strip, the claims row, guide tiles and the
   emergency strip. Tokens only. */
.home-hero {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding-block: 1.5rem 1rem;
}
.home-hero-text > * + * { margin-block-start: 1rem; }
.home-hero-art { max-inline-size: 26rem; justify-self: center; inline-size: 100%; }
/* The raster hero (src/pages/page.mjs HERO): its box is the crop's own
   width/height, so nothing moves when it paints. Change a width here and the
   `sizes` in HERO changes with it. Below 900 px the 4:5 crop is at most 18rem,
   so the first door card still starts on a 390x844 screen. */
.home-hero-art picture, .home-hero-img { display: block; inline-size: 100%; block-size: auto; }
.home-hero-art:has(picture) { max-inline-size: 18rem; }
@media (min-width: 768px) {
  .home-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-block: 2.5rem 1.5rem; }
}
/* From 900 px the 16:9 desktop crop: half the row, up to 36rem. */
@media (min-width: 900px) {
  .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-hero-art, .home-hero-art:has(picture) { max-inline-size: 36rem; }
}

.hero-svg .h-field { fill: var(--field-dog); }
.hero-svg .h-doodles { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; opacity: .35; }
.hero-svg .h-shadow { fill: var(--ink); opacity: .12; transform: translate(8px, 10px); }
.hero-svg .h-page { fill: var(--paper); }
.hero-svg .h-ink { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.hero-svg .h-ribbon { fill: var(--pine); }
.hero-svg .h-lines { fill: none; stroke: var(--ink-soft); stroke-width: 6; stroke-linecap: round; opacity: .45; }
.hero-svg .h-stamp { fill: none; stroke: var(--pine); stroke-width: 3; stroke-dasharray: 5 4; }
.hero-svg .h-stamp-mark { fill: none; stroke: var(--pine); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hero-svg .h-rail { stroke: var(--line); stroke-width: 4; }
.hero-svg .h-dot { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 3; }
.hero-svg .h-dot-done { fill: var(--pine); }
.hero-svg .h-dot-next { fill: var(--due); }
.hero-svg .h-bar { stroke: var(--ink-soft); stroke-width: 8; stroke-linecap: round; opacity: .35; }
.hero-svg .h-bar-next { stroke: var(--due); stroke-width: 10; stroke-linecap: round; }

.door-grid { margin-block: 1rem 2.5rem; }
.door-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: var(--radius-card);
  background: var(--paper-2);
  border-block-start: 10px solid var(--field-dog);
}
.door-card[data-field="cat"] { border-block-start-color: var(--field-cat); }
.door-card h2 { font-size: clamp(1.5rem, 1.3rem + .9vw, 2rem); }
.door-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

.home-travel { margin-block: 2.5rem; padding: 1.5rem 1.25rem; border-radius: var(--radius-card); background: var(--paper-2); }
.home-travel > * + * { margin-block-start: .75rem; }
.travel-strip { display: grid; gap: .6rem; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.travel-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .15rem .75rem;
  align-items: center;
  block-size: 100%;
  min-block-size: var(--target);
  padding: .9rem 1rem;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
}
.travel-link:hover .travel-link-title { text-decoration: underline; }
.travel-link-title { font-weight: 700; color: var(--pine); }
.travel-link-text { grid-column: 1; font-size: var(--step-label); color: var(--ink-soft); }
.travel-link .arrow { grid-column: 2; grid-row: 1 / 3; inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: var(--pine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.shield-icon { inline-size: 1.5rem; block-size: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.shield-row { margin-block: 0 2.5rem; }
.shield { color: var(--ink); padding-inline: .5rem; }
.shield-proof { font-size: var(--step-label); }

.home-guides { margin-block: 2.5rem; }
.home-guides > * + * { margin-block-start: 1rem; }
.guide-tiles { display: grid; gap: 1rem; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.guide-tile {
  display: grid;
  gap: .6rem;
  block-size: 100%;
  padding: .75rem;
  border-radius: var(--radius-card);
  background: var(--paper-2);
  color: var(--ink);
  text-decoration: none;
}
.guide-tile-title { font-weight: 700; color: var(--pine); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.home-guides .link-list, .home-guides > p a { display: inline-flex; align-items: center; min-block-size: var(--target); }
.emergency-strip { margin-block-start: 2rem; }

/* Direct tool links before the hero art (Codex PO review 2026-10-18: on a phone
   the first door card began at the bottom of the first viewport). */
.hero-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-quick a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 0 1rem; border: 2px solid var(--line); border-radius: 999px; background: var(--paper-2); color: var(--ink); font-weight: 600; text-decoration: none; }
.hero-quick a:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }

}