/*
 * Issue #73 — measured site-shell, page-opening and reading-rhythm candidate.
 * Recreates only visible reference behavior with repository-native RYOI code.
 */

body.issue-73-shell-rhythm {
  --header-height: 50px;
  --issue-73-shell-edge: max(20px, calc((100vw - 1600px) / 2));
  --issue-73-opening-height: 492px;
  --issue-67-reading-base: 14px;
  --issue-67-reading-weight: 300;
}

body.issue-73-shell-rhythm .utility-header {
  padding-inline: var(--issue-73-shell-edge);
  border-bottom: 0;
  background: var(--surface-page);
  backdrop-filter: none;
}

body.issue-73-shell-rhythm .index-menu {
  background: color-mix(in srgb, var(--surface-page) 90%, transparent);
}

body.issue-73-shell-rhythm .menu-toggle::after {
  display: none;
}

body.issue-73-shell-rhythm .index-route > a:first-child em {
  display: none;
}

body.issue-73-shell-rhythm .index-route > a:first-child[aria-current="page"],
body.issue-73-shell-rhythm .subroute[aria-current="page"] {
  border-bottom: 0;
  color: var(--cursor);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}

body.issue-73-shell-rhythm .index-route > a:first-child,
body.issue-73-shell-rhythm .subroute {
  width: 100%;
  box-sizing: border-box;
  padding-right: 10px;
  padding-left: 10px;
  transition:
    color var(--motion-fast),
    background var(--motion-fast);
}

body.issue-73-shell-rhythm .index-route > a:first-child[aria-current="page"]::before,
body.issue-73-shell-rhythm .subroute[aria-current="page"]::before {
  content: "▸";
  flex: none;
  color: currentColor;
}

body.issue-73-shell-rhythm .index-route > a:first-child:hover,
body.issue-73-shell-rhythm .index-route > a:first-child:focus-visible,
body.issue-73-shell-rhythm .subroute:hover,
body.issue-73-shell-rhythm .subroute:focus-visible {
  color: var(--surface-page);
  background: var(--text-primary);
}

body.issue-73-shell-rhythm .index-route p {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
}

body.issue-73-shell-rhythm .site-footer nav a[aria-current="page"],
body.issue-73-shell-rhythm .site-footer__utilities a[aria-current="page"],
body.issue-73-shell-rhythm.issue-59-contact-close .contact-layout__navigation nav a[aria-current="page"] {
  border-bottom: 0;
  color: var(--text-secondary);
  box-shadow: none;
}

body.issue-73-shell-rhythm.issue-67-reading-typography main > .page-hero .page-hero__copy > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main > article > .page-hero .page-hero__copy > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main .home-hero__statement > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main .home-hero__lower article > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main > .section .chapter-heading > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main > article > .section .chapter-heading > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main > .section .product-entry__body > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main > .section .indexed-row > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main > .section .split-feature__body > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main > .section .about-columns > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main .article-body > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main .article-body > .dek,
body.issue-73-shell-rhythm.issue-67-reading-typography main .article-meta > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main .case-study-signal > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main .case-study-credits__body > p,
body.issue-73-shell-rhythm.issue-67-reading-typography main .contact-section__actions > p,
body.issue-73-shell-rhythm.issue-67-reading-typography .site-footer p {
  font-size: var(--issue-67-reading-base);
  font-weight: var(--issue-67-reading-weight);
  line-height: 1.23;
  letter-spacing: 0;
}

body.issue-73-shell-rhythm main > .page-hero:not(.home-hero),
body.issue-73-shell-rhythm main > article > .page-hero,
body.issue-73-shell-rhythm .home-hero__statement {
  min-height: var(--issue-73-opening-height);
}

body.issue-73-shell-rhythm.issue-62-boundary-grammar[data-route] main > .page-hero,
body.issue-73-shell-rhythm.issue-62-boundary-grammar[data-route] main > article > .page-hero {
  background: var(--surface-page);
}

body.issue-73-shell-rhythm main > .page-hero:not(.home-hero),
body.issue-73-shell-rhythm main > article > .page-hero {
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-content: start;
  align-items: start;
  padding: 96px var(--edge-wide);
}

body.issue-73-shell-rhythm main > .page-hero:not(.home-hero) .page-hero__title,
body.issue-73-shell-rhythm main > article > .page-hero .page-hero__title,
body.issue-73-shell-rhythm main > .page-hero:not(.home-hero) .page-hero__copy,
body.issue-73-shell-rhythm main > article > .page-hero .page-hero__copy {
  grid-column: 1;
}

body.issue-73-shell-rhythm main > .page-hero:not(.home-hero) .page-hero__title,
body.issue-73-shell-rhythm main > article > .page-hero .page-hero__title {
  gap: 24px;
}

body.issue-73-shell-rhythm main > .page-hero:not(.home-hero) .page-hero__copy,
body.issue-73-shell-rhythm main > article > .page-hero .page-hero__copy {
  max-width: 620px;
  margin: 0;
  padding: 0;
  align-self: auto;
}

body.issue-73-shell-rhythm .home-hero__statement {
  align-content: start;
  align-items: start;
  gap: 24px;
  padding-top: 96px;
  padding-bottom: 96px;
}

body.issue-73-shell-rhythm .home-hero__statement > .cursor-mark {
  top: 96px;
  align-self: auto;
}

body.issue-73-shell-rhythm main > .page-hero > .cursor-mark,
body.issue-73-shell-rhythm main > article > .page-hero > .cursor-mark {
  position: absolute;
  top: 135.5px;
  left: calc(var(--edge-wide) - 26px);
  margin-left: 0;
  align-self: auto;
}

@media (min-width: 901px) {
  body.issue-73-shell-rhythm .index-grid {
    min-height: 198px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 0;
    align-content: start;
    padding: 14px var(--issue-73-shell-edge) 48px;
    border-top: 1px solid color-mix(in srgb, var(--rule) 54%, transparent);
    border-bottom-color: color-mix(in srgb, var(--rule) 54%, transparent);
  }

  body.issue-73-shell-rhythm .index-route {
    gap: 0;
    padding: 0 10px;
    border-left: 1px solid color-mix(in srgb, var(--rule) 42%, transparent);
  }

  body.issue-73-shell-rhythm .index-route:first-child { border-left: 0; }

  body.issue-73-shell-rhythm .index-route > a:first-child {
    min-height: 34px;
    gap: 9px;
  }

  body.issue-73-shell-rhythm .subroute {
    min-height: 25px;
    display: flex;
    align-items: center;
  }

  body.issue-73-shell-rhythm .index-route p {
    margin-top: 3px;
  }
}

body.issue-73-shell-rhythm #entries {
  padding: clamp(96px, 8vw, 150px) var(--edge-wide) 0;
}

body.issue-73-shell-rhythm .journal-index-layout {
  display: grid;
  grid-template-columns: minmax(260px, .36fr) minmax(0, .64fr);
  gap: clamp(72px, 9vw, 150px);
  align-items: stretch;
}

body.issue-73-shell-rhythm .journal-index-rail {
  min-height: 460px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
}

body.issue-73-shell-rhythm #entries .chapter-heading {
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 24px;
  margin: 0;
}

body.issue-73-shell-rhythm #entries .chapter-heading h2 {
  grid-column: 2;
  grid-row: 1;
  font-size: clamp(32px, 2.55vw, 49px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}

body.issue-73-shell-rhythm #entries .chapter-heading p {
  grid-column: 2;
  grid-row: 2;
  max-width: 330px;
  margin-top: 24px;
}

body.issue-73-shell-rhythm .journal-index-topics {
  display: grid;
  gap: 4px;
  margin: 30px 0 0 34px;
  padding: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.23;
  list-style: none;
}

body.issue-73-shell-rhythm .journal-index-topics li::before {
  content: "↳ ";
}

body.issue-73-shell-rhythm .journal-index-more {
  align-self: end;
  margin-left: 34px;
}

body.issue-73-shell-rhythm #entries .indexed-rows {
  margin: 0;
  border-top: 1px solid var(--rule);
}

body.issue-73-shell-rhythm #entries .indexed-row {
  grid-template-columns: minmax(190px, .78fr) minmax(280px, 1.22fr);
  gap: clamp(34px, 4vw, 68px);
  align-items: start;
  padding: 32px 0;
}

body.issue-73-shell-rhythm #entries .indexed-row__title {
  display: grid;
  gap: 14px;
}

body.issue-73-shell-rhythm #entries .indexed-row h3 {
  font-size: 18px;
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -.025em;
}

body.issue-73-shell-rhythm #entries .indexed-row__title > span {
  color: var(--cursor);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
}

body.issue-73-shell-rhythm #entries .indexed-row p {
  max-width: 470px;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.23;
  letter-spacing: 0;
}

body.issue-73-shell-rhythm .site-footer[data-contact-close-ready="true"] > div:first-child p {
  white-space: nowrap;
}

@media (max-width: 900px) {
  body.issue-73-shell-rhythm {
    --issue-73-opening-height: 420px;
    --issue-73-shell-edge: 20px;
    --issue-67-reading-base: 13.5px;
  }

  body.issue-73-shell-rhythm main > .page-hero > .cursor-mark,
  body.issue-73-shell-rhythm main > article > .page-hero > .cursor-mark {
    position: absolute;
    top: 107.5px;
    left: 0;
    margin-left: 0;
  }

  body.issue-73-shell-rhythm main > .page-hero:not(.home-hero),
  body.issue-73-shell-rhythm main > article > .page-hero {
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    align-content: start;
    padding: 72px var(--issue-73-shell-edge);
  }

  body.issue-73-shell-rhythm .index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding-top: 14px;
    padding-right: var(--issue-73-shell-edge);
    padding-bottom: 34px;
    padding-left: var(--issue-73-shell-edge);
  }

  body.issue-73-shell-rhythm .index-route {
    gap: 0;
    padding: 0 8px 18px;
    border-left: 1px solid color-mix(in srgb, var(--rule) 42%, transparent);
  }

  body.issue-73-shell-rhythm .index-route:nth-child(odd) { border-left: 0; }

  body.issue-73-shell-rhythm .index-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding-top: 14px;
  }

  body.issue-73-shell-rhythm main > .page-hero:not(.home-hero) .page-hero__title,
  body.issue-73-shell-rhythm main > article > .page-hero .page-hero__title,
  body.issue-73-shell-rhythm main > .page-hero:not(.home-hero) .page-hero__copy,
  body.issue-73-shell-rhythm main > article > .page-hero .page-hero__copy {
    grid-column: 2;
  }

  body.issue-73-shell-rhythm main > .page-hero:not(.home-hero) .page-hero__title,
  body.issue-73-shell-rhythm main > article > .page-hero .page-hero__title {
    gap: 20px;
  }

  body.issue-73-shell-rhythm .home-hero__statement {
    position: relative;
    align-content: start;
    gap: 20px;
    padding-top: 72px;
    padding-bottom: 72px;
  }

  body.issue-73-shell-rhythm .home-hero__statement > .cursor-mark {
    position: absolute;
    top: 72px;
    left: 20px;
  }

  body.issue-73-shell-rhythm #entries {
    padding-right: var(--issue-73-shell-edge);
    padding-left: var(--issue-73-shell-edge);
  }

  body.issue-73-shell-rhythm .journal-index-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 68px;
  }

  body.issue-73-shell-rhythm .journal-index-rail { min-height: 330px; }

  body.issue-73-shell-rhythm #entries .chapter-heading {
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 20px;
  }

  body.issue-73-shell-rhythm #entries .chapter-heading h2 { font-size: clamp(38px, 11vw, 58px); }
  body.issue-73-shell-rhythm #entries .chapter-heading p { grid-column: 2; }
  body.issue-73-shell-rhythm .journal-index-topics,
  body.issue-73-shell-rhythm .journal-index-more { margin-left: 30px; }

  body.issue-73-shell-rhythm #entries .indexed-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding: 28px 0;
  }

  body.issue-73-shell-rhythm #entries .indexed-row__title,
  body.issue-73-shell-rhythm #entries .indexed-row__title > span { grid-column: 1; }
  body.issue-73-shell-rhythm #entries .indexed-row p { grid-column: 1; }

  body.issue-73-shell-rhythm .site-footer[data-contact-close-ready="true"] > div:first-child p {
    white-space: normal;
  }
}

@media (max-width: 430px) {
  body.issue-73-shell-rhythm {
    --issue-73-opening-height: 390px;
    --issue-73-shell-edge: 18px;
  }

  body.issue-73-shell-rhythm .home-hero__statement > .cursor-mark { left: 18px; }
}
