/* One route shape from the first screen to the last: story in the wide cell,
   destination in the protruding cell. The whole shape is one real link. */
.route-block,
.h-routes a.route-block,
.nav-start a.route-block,
.site-footer a.route-block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  align-content: start;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--bone);
  text-decoration: none;
}
.route-block-body {
  display: grid;
  align-content: center;
  gap: 4px;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 62px;
  padding: 10px 14px;
  border-top: 4px solid var(--step);
  background: var(--field-2);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .32);
}
.route-block-body > b,
.route-block-body > strong { color: var(--bone); font-size: 1rem; line-height: 1.2; }
.route-block-body > span:not(.nav-piece) { color: var(--bone-soft); font-size: .8rem; line-height: 1.35; }
.route-block-tail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  grid-column: 2 / 4;
  min-width: 0;
  min-height: 25px;
  padding: 3px 5px;
  background: var(--step);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22);
}
.route-block-tail > span { color: inherit; }
.h-routes a .route-block-tail,
.nav-start a .route-block-tail,
.site-footer a .route-block-tail { color: var(--ink); }
.h-routes a .route-block-tail > span,
.nav-start a .route-block-tail > span,
.site-footer a .route-block-tail > span { color: inherit; }
@media (hover: hover) { .route-block:hover .route-block-body { background: #272b34; } }
.route-block:focus-visible { outline: 3px solid var(--number); outline-offset: 3px; }
.h-routes li:first-child a.route-block { border: 0; box-shadow: none; }
.h-routes .route-block-body { min-height: 61px; }
.nav-start .route-block-body { min-height: 100px; padding: 10px 12px; }
.nav-start .route-block-body .nav-piece { justify-self: start; margin: 0 0 2px; }
.nav-start a.route-block .route-block-body > span:not(.nav-piece) { color: var(--bone-soft); }
.nav-start a.route-block .route-block-tail { color: var(--ink); }
.footer-system { max-width: 360px; margin: 0 0 16px; }
.site-footer a.footer-system { min-height: 0; }
.footer-system .route-block-body { min-height: 66px; }
.footer-system .route-block-tail { min-height: 29px; }

/* The T is recognizable, and the word tells a first-time visitor what it opens. */
@media (max-width: 430px) {
  .js .nav-item.nav-item--li { display: none; }
  .js .site-nav.is-sheet .nav-item.nav-item--li { display: block !important; }
  .js .nav-menu {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    min-width: 78px;
    padding: 0 9px 0 35px;
    font-size: .83rem;
  }
  .js .nav-menu-piece {
    inset: auto;
    left: 8px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
  }
  .js .nav-menu[aria-expanded="true"] .nav-menu-piece { transform: translateY(-50%) rotate(90deg); }
}
@media (max-width: 345px) {
  .site-header .wrap { gap: 3px; }
  .js .nav-item--primary { display: none; }
  .js .site-nav.is-sheet .nav-item--primary { display: block !important; }
  .js .nav-menu { min-width: 72px; padding-right: 6px; }
}

/* The four reader routes use four silhouettes, with the same action cell grammar
   as the hero and footer. Their words remain in the HTML and in normal reading order. */
.nav-start .route-block--o .route-block-body,
.nav-start .route-block--o .route-block-tail { grid-column: 1 / 4; }
.nav-start .route-block--i .route-block-body,
.nav-start .route-block--i .route-block-tail { grid-column: 1 / -1; }
.nav-start .route-block--s .route-block-body { grid-column: 2 / -1; }
.nav-start .route-block--s .route-block-tail { grid-column: 1 / 4; }
.nav-start .route-block--z .route-block-body { grid-column: 1 / 4; }
.nav-start .route-block--z .route-block-tail { grid-column: 2 / -1; }
.nav-start .route-block--o .route-block-body { border-color: var(--piece-o); }
.nav-start .route-block--i .route-block-body { border-color: var(--piece-i); }
.nav-start .route-block--s .route-block-body { border-color: var(--piece-s); }
.nav-start .route-block--z .route-block-body { border-color: var(--piece-z); }
.nav-start .route-block--o .route-block-tail { background: var(--piece-o); }
.nav-start .route-block--i .route-block-tail { background: var(--piece-i); }
.nav-start .route-block--s .route-block-tail { background: var(--piece-s); }
.nav-start .route-block--z .route-block-tail { background: var(--piece-z); color: var(--bone); }
@media (prefers-reduced-motion: no-preference) {
  .js .site-nav.is-sheet .nav-start li .route-block-tail {
    animation: route-lock 240ms steps(3, end) backwards;
  }
  .js .site-nav.is-sheet .nav-start li:nth-child(2) .route-block-tail { animation-delay: 55ms; }
  .js .site-nav.is-sheet .nav-start li:nth-child(3) .route-block-tail { animation-delay: 110ms; }
  .js .site-nav.is-sheet .nav-start li:nth-child(4) .route-block-tail { animation-delay: 165ms; }
  @keyframes route-lock { from { transform: translateY(-8px); } to { transform: translateY(0); } }
}
@media (hover: hover) {
  .nav-start .route-block:hover .route-block-tail { transform: translateY(3px); }
}
.nav-start .route-block:active .route-block-tail { transform: translateY(4px); }

/* A resume is a small golden tile; LinkedIn has a connected blue corner.
   Both share the game's tactile press, including the footer and homepage actions. */
.nav-resume, .resume-piece, .social-piece, .nav-li-btn {
  position: relative;
  overflow: visible;
  border-radius: 0;
  transition: transform 120ms steps(2, end), box-shadow 120ms steps(2, end);
}
.nav-resume .nav-piece { --pc: var(--ink); margin-right: 1px; }
.nav-resume::after, .resume-piece::after {
  content: ""; position: absolute; right: 0; top: 0;
  border-top: 8px solid var(--field); border-left: 8px solid transparent;
}
.nav-li-btn { border-left: 4px solid #0a66c2; }
.nav-li-btn::after, .social-piece::after {
  content: ""; position: absolute; right: -5px; top: -5px;
  width: 7px; height: 7px; background: #67b4ff;
  box-shadow: -7px 7px 0 #0a66c2;
}
.resume-piece .nav-piece { --pc: var(--number); }
.social-piece .li-mark { box-shadow: 3px 3px 0 #073d77; }
@media (hover: hover) {
  .nav-resume:hover, .resume-piece:hover, .social-piece:hover, .nav-li-btn:hover {
    box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .35), 0 0 0 2px var(--bone);
  }
}
.nav-resume:active, .resume-piece:active, .social-piece:active, .nav-li-btn:active {
  transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);
}
@media (prefers-reduced-motion: reduce) {
  .nav-resume, .resume-piece, .social-piece, .nav-li-btn { transition: none; }
}
@media (max-width: 430px) { .nav-resume .nav-piece { display: none; } }

/* The reading ground is calm; the playfield grid belongs to the menu and game.
   Interlocking section edges join sections instead of a repeating square backdrop. */
:root { --paper: #f0efe9; --paper-line: #d8d9d4; }
.paper { background: var(--paper); }
/* The old stepped seam (a small grey T at each section's top-left) read as a stray block; the interlocking
   section edges at the end of this file replace it. .h-do keeps its full-time job band (world.css). */
.home .h-plays::before, .home .offclock::before { content: none; }
.home .h-do::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; width: auto; z-index: 2; background: var(--ft-band); box-shadow: none; }
.home .h-do::after, .home .h-plays::after { display: none; }
.home .h-do, .home .h-plays, .home .offclock { padding-top: max(var(--section), 40px); }
.home .h-results { padding-block: var(--section-tight); border-bottom: 1px solid var(--paper-line); }
.home .h-now { background: #f8f8f4; }

/* Phone menu "Start here" (Hayden, 2026-10-12: "mobile menu dropdown looks horrible"): the staggered piece
   shapes broke apart at 390px, buttons drifting away from their cards. In the sheet each route is now one
   even card, its action as a colored footer inside it. */
.js .site-nav.is-sheet .nav-start ul { grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
.js .site-nav.is-sheet .nav-start li { display: grid; }
.js .site-nav.is-sheet .nav-start a.route-block {
  display: flex; flex-direction: column; min-height: 0; padding: 0; gap: 0;
  background: var(--field-2); border: 0; border-radius: 4px; overflow: hidden;
}
.js .site-nav.is-sheet .nav-start a.route-block .route-block-body {
  flex: 1; display: grid; align-content: start; gap: 4px; min-height: 0; margin: 0; padding: 12px;
  border: 0; border-top: 4px solid var(--rb-c, var(--bone-soft)); background: none;
}
.js .site-nav.is-sheet .nav-start a.route-block .route-block-body strong { font-size: 1rem; line-height: 1.25; }
.js .site-nav.is-sheet .nav-start a.route-block .route-block-body > span:not(.nav-piece) { font-size: 0.86rem; line-height: 1.35; }
.js .site-nav.is-sheet .nav-start a.route-block .route-block-tail {
  margin: 0; padding: 10px 12px; min-height: 44px; display: flex; align-items: center;
  font-weight: 800; font-size: 0.95rem; background: var(--rb-c, var(--bone-soft)); box-shadow: none; transform: none; animation: none;
}
.js .site-nav.is-sheet .nav-start .route-block--o { --rb-c: var(--piece-o); }
.js .site-nav.is-sheet .nav-start .route-block--i { --rb-c: var(--piece-i); }
.js .site-nav.is-sheet .nav-start .route-block--s { --rb-c: var(--piece-s); }
.js .site-nav.is-sheet .nav-start .route-block--z { --rb-c: var(--piece-z); }
/* While the phone menu sheet is open, the floating Bella and Top buttons step aside so they never cover a link. */
html:has(.site-nav.is-sheet) :is(.bella-launch, .to-top) { visibility: hidden; }

/* Interlocking sections, homepage prototype (Hayden, 2026-10-12: pieces should "connect one content block
   after another in the background, but naturally, in a way that looks great on mobile as well", "think apple site,
   beautiful design, not choppy bad rushed animation"). Each section's top edge carries one block shape in its own
   color, reaching up into the section above, so the page reads as pieces stacked into each other. The shape sits in
   the section padding, never over text. Motion is tied to scroll (no timers, no steps): it rises into place as the
   edge comes into view; without scroll-driven animation support, or with reduced motion, it simply sits there. */
body.page-home main.home > * { position: relative; }
body.page-home main.home > :not(:first-child)::after {
  --cell: clamp(16px, 2.6vw, 30px);
  content: ""; display: block; position: absolute; z-index: 1; pointer-events: none;
  top: calc(var(--cell) * -2 + 1px); bottom: auto; left: auto; right: 9%;
  width: calc(var(--cell) * 3); height: calc(var(--cell) * 2);
  background: inherit; background-image: none; border: 0; box-shadow: none;
  clip-path: polygon(0 100%, 0 50%, 33.34% 50%, 33.34% 0, 66.67% 0, 66.67% 50%, 100% 50%, 100% 100%);
}
body.page-home main.home > :nth-child(odd):not(:first-child)::after { right: auto; left: 9%;
  clip-path: polygon(0 100%, 0 50%, 33.34% 50%, 33.34% 0, 100% 0, 100% 50%, 66.67% 50%, 66.67% 100%); }
body.page-home main.home > :nth-child(4n)::after {
  clip-path: polygon(0 100%, 0 50%, 66.67% 50%, 66.67% 0, 100% 0, 100% 100%); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.page-home main.home > :not(:first-child)::after {
      animation: piece-settle linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes piece-settle { from { transform: translateY(100%); } to { transform: none; } }
/* Phone menu: Resume and LinkedIn as two equal buttons with room between them (Hayden, 2026-10-12: "resume and
   linkedin button are jammed together"). */
@media (max-width: 899px) {
  .js .site-nav.is-sheet .nav-top { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
  .js .site-nav.is-sheet .nav-top > .nav-item { grid-column: 1 / -1; }
  .js .site-nav.is-sheet .nav-top > :is(.nav-item--li, .nav-item:has(> a[href="/resume/"])) { grid-column: auto; margin-top: 16px; border: 0; }
  .js .site-nav.is-sheet .nav-top > .nav-item:has(> a[href="/resume/"]) { order: 98; }
  .js .site-nav.is-sheet .nav-top > .nav-item--li { order: 99; }
  .js .site-nav.is-sheet .nav-top > :is(.nav-item--li, .nav-item:has(> a[href="/resume/"])) > a {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 12px;
    border: 2px solid #3a3f4b; border-radius: 6px; box-shadow: none; background: #1d2027; color: var(--bone); font-size: 1.05rem;
  }
  .js .site-nav.is-sheet .nav-top > .nav-item:has(> a[href="/resume/"]) > a { background: var(--piece-o); border-color: var(--piece-o); color: var(--ink); }
  .js .site-nav.is-sheet .nav-top > :is(.nav-item--li, .nav-item:has(> a[href="/resume/"])) > a::before,
  .js .site-nav.is-sheet .nav-top > :is(.nav-item--li, .nav-item:has(> a[href="/resume/"])) > a::after,
  .js .site-nav.is-sheet .nav-top > :is(.nav-item--li, .nav-item:has(> a[href="/resume/"]))::before { display: none; }
  .js .site-nav.is-sheet .nav-top > .nav-item:has(> a[href="/resume/"]) .nav-piece { display: none; }
}