/* Home reading layout. Existing controls, covers and animation hooks
   stay in place. Scope every override so detail/About/Shop pages keep their CSS.
   Type uses the site's eight roles; spacing uses its existing rhythm tokens. */

/* Keep navigation legible when the archive scrolls behind the fixed bar. */
body.home-reading .site-header { background: var(--bg); }

/* Reading sizes belong to content, leaving header/footer/contact UI unchanged. */
body.home-reading .hero,
body.home-reading .archive,
body.home-reading .work-table,
body.home-reading .text-columns {
  --text-body: 1rem;
  --text-body-large: 1.125rem;
  --text-title: clamp(1.5rem, 2.4cqi, 2rem);
  --text-heading: clamp(2.125rem, 4.5cqi, 4rem);
  --text-display: clamp(3rem, 5.5cqi, 5.25rem);
}

/* Full-width 3D banner. Its copy-sized background shade grows with the text,
   leaving the upper scene open; the existing ResizeObserver sizes its canvas. */
body.home-reading .hero {
  --text-display: clamp(2.5rem, 4.7cqi, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  min-height: 100svh;
  padding: calc(var(--header-h) + var(--section-space) * 2) var(--gutter) calc(var(--section-space) * 2); padding-inline: var(--gutter-start, var(--gutter)) var(--gutter-end, var(--gutter));
  gap: var(--col-gap);
  isolation: isolate;
}
body.home-reading .hero > .hero-3d {
  position: absolute;
  inset: var(--header-h) 0 0;
  width: auto;
  height: auto;
}
body.home-reading .hero > .sr-only { position: absolute; }
body.home-reading .hero-copy {
  grid-column: 1;
  align-self: end;
  width: 100%;
  max-width: 72rem;
  min-width: 0;
}
body.home-reading .hero-copy::before {
  content: '';
  top: -70%;
  right: -35%;
  background: radial-gradient(ellipse farthest-side at 0% 100%,
    color-mix(in srgb, var(--hero-bg) 95%, transparent) 0% 68%,
    color-mix(in srgb, var(--hero-bg) 80%, transparent) 80%,
    color-mix(in srgb, var(--hero-bg) 30%, transparent) 92%,
    transparent 100%);
  opacity: 1;
}
body.home-reading .hero-title {
  max-width: 100%;
  font-size: var(--text-display);
  line-height: .98;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
body.home-reading .hero-lede {
  max-width: 48ch;
  margin-top: var(--block-space);
  font-family: var(--display);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
}
body.home-reading .hero-actions {
  opacity: 1;
  transform: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tight-space) var(--inline-space);
  margin-top: var(--block-space);
  font-size: var(--text-body);
}
body.home-reading .hero-actions a {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--sp-10) + var(--sp-1));
  text-decoration: underline;
  text-underline-offset: var(--sp-1);
}

/* The image leads the selected work; copy reads as a short project introduction. */
body.home-reading .archive { scroll-margin-top: var(--header-h); }
body.home-reading .archive + #about { padding-top: var(--block-space); }
body.home-reading .featured-panel {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: var(--col-gap);
  padding: 0 var(--gutter); padding-inline: var(--gutter-start, var(--gutter)) var(--gutter-end, var(--gutter));
}
body.home-reading .featured-panel-info {
  min-width: 0;
  padding: var(--section-space) 0;
  border: 0;
}
body.home-reading .featured-panel-counter-row { font-size: var(--text-label); color: var(--muted); }
body.home-reading .featured-panel-counter em { color: var(--ink); }
body.home-reading .featured-panel-title {
  font-family: var(--display);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
body.home-reading .featured-panel-description {
  max-width: 50ch;
  font-family: var(--display);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-soft);
}
body.home-reading .featured-panel-specs { margin-top: var(--block-space); }
body.home-reading .featured-panel-specs > div { font-size: var(--text-label); line-height: 1.5; }
body.home-reading .featured-panel-stage {
  --stage-h: clamp(24rem, 40cqi, 34rem);
  --stage-pad: var(--block-space);
  --pager-h: calc(var(--sp-10) + var(--sp-1));
  --stage-media-h: calc(var(--stage-h) - var(--pager-h) - var(--item-space));
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--pager-h);
  gap: var(--item-space);
  height: var(--stage-h);
  margin: var(--section-space) 0;
  background: transparent;
  overflow: visible;
}
body.home-reading .featured-panel-media { min-width: 0; min-height: 0; }

/* Size browser content from its intrinsic ratio, so its bar touches the
   screenshot instead of a fixed-height, letterboxed image rectangle. */
body.home-reading .featured-panel-stage[data-frame="browser"] {
  padding: 0;
  display: grid;
  align-items: stretch;
  justify-content: normal;
}
body.home-reading .featured-panel-stage[data-frame="browser"] .featured-panel-media {
  align-self: center;
  justify-self: center;
  height: auto;
  max-height: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--sp-1);
  overflow: hidden;
}
body.home-reading .featured-panel-stage[data-frame="browser"] .featured-panel-media img,
body.home-reading .featured-panel-stage[data-frame="browser"] .featured-panel-media video {
  width: auto;
  height: auto;
  max-height: calc(var(--stage-media-h) - var(--chrome-bar-h) - 2px);
}
body.home-reading .featured-panel-pager {
  position: static;
  align-self: center;
  justify-self: end;
  border: 0;
  background: transparent;
  gap: var(--tight-space);
  padding: 0;
  letter-spacing: 0;
}
body.home-reading .featured-panel-pager button,
body.home-reading .archive-scroll-buttons button {
  min-width: calc(var(--sp-10) + var(--sp-1));
  min-height: calc(var(--sp-10) + var(--sp-1));
}
body.home-reading .featured-panel-pager button::after,
body.home-reading .archive-scroll-buttons button::after { content: none; }
body.home-reading .archive-scroll-buttons { gap: 0; }

body.home-reading .archive-strip {
  --archive-media-height: clamp(calc(var(--sp-8) * 6), 16cqi, calc(var(--sp-8) * 8));
  grid-auto-columns: max-content;
  gap: var(--grid-gap);
  padding: var(--tight-space) var(--gutter); padding-inline: var(--gutter-start, var(--gutter)) var(--gutter-end, var(--gutter));
  scroll-snap-type: x mandatory;
}
body.home-reading .archive-strip.is-dragging { scroll-snap-type: none; }
body.home-reading .archive-card {
  --archive-card-chrome: 0px;
  --archive-card-width: min(
    calc((var(--archive-media-height) - var(--archive-card-chrome) - 2px) * var(--archive-card-ratio, 1.333333) + 2px),
    calc(100cqi - var(--gutter-start, var(--gutter)) - var(--gutter-end, var(--gutter))));
  width: var(--archive-card-width);
  min-width: 0;
  padding: 0;
  border-right: 0;
  border-top: 0;
}
body.home-reading .archive-card:hover { background: transparent; }
body.home-reading .archive-card.is-active { background: transparent; }
body.home-reading .archive-card-frame {
  flex: none;
  width: 100%;
  height: calc((var(--archive-card-width) - 2px) / var(--archive-card-ratio, 1.333333) + var(--archive-card-chrome) + 2px);
  aspect-ratio: auto;
  border: 1px solid var(--rule);
}
body.home-reading .archive-card-frame :is(img, video) { object-fit: contain; }
body.home-reading .archive-card[data-frame="browser"] { --archive-card-chrome: 11px; }
body.home-reading .archive-card[data-frame="browser"] .archive-card-frame {
  padding: 0;
  align-self: stretch;
}
body.home-reading .archive-card-byline { overflow-wrap: anywhere; }
body.home-reading .archive-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--tight-space) var(--item-space);
  align-items: baseline;
}
body.home-reading .archive-card-title {
  grid-area: 1 / 1 / 2 / 3;
  font-family: var(--display);
  font-size: var(--text-body);
  line-height: 1.3;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
body.home-reading .archive-card-byline { grid-area: 2 / 1; color: var(--ink-soft); letter-spacing: 0; }
body.home-reading .archive-card-year { grid-area: 2 / 2; letter-spacing: 0; }
body.home-reading .archive-card-tags { grid-area: 3 / 1 / 4 / 3; margin-top: var(--tight-space); }
body.home-reading .archive-card-num { grid-area: 4 / 1 / 5 / 3; letter-spacing: 0; }
body.home-reading .archive-card.is-active .archive-card-num { color: var(--muted); }
body.home-reading .archive-card.is-active .archive-card-byline { color: var(--ink-soft); }

/* The work list stays visible, with sorting and the pointer image preview. */
body.home-reading .work-table-row {
  min-height: calc(var(--sp-10) + var(--sp-1));
  padding: var(--item-space) 0;
  font-family: var(--display);
  font-size: var(--text-body);
  line-height: 1.4;
}
body.home-reading .work-table-cell { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
body.home-reading .work-table-cell--discipline,
body.home-reading .work-table-cell--client,
body.home-reading .work-table-cell--year { font-family: var(--sans); font-size: var(--text-label); line-height: 1.5; }
body.home-reading .work-table-row--header { font-family: var(--sans); font-size: var(--text-label); letter-spacing: .04em; }
body.home-reading a.work-table-row:hover { color: var(--ink); opacity: 1; }

/* The home studio/service excerpt shares the reading measure, not UI sizing. */
body.home-reading .text-columns p,
body.home-reading .text-columns .service-item {
  max-width: 60ch;
  font-family: var(--display);
  font-size: var(--text-body);
  line-height: 1.6;
  font-weight: 400;
}
body.home-reading .text-columns p a { text-decoration: underline; text-underline-offset: var(--sp-1); }
body.home-reading .text-columns .section-heading { line-height: 1.05; }

body.home-reading :is(a, button, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: var(--sp-1); }
body.home-reading .archive-card:focus-visible { outline-offset: calc(var(--sp-1) * -1); }

/* Mirror the shell's width as well as the viewport: opening a detail pane on a
   desktop must not leave the home layout squeezed into desktop columns. */
@media (max-width: 900px) {
  body.home-reading .featured-panel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.home-reading .featured-panel-stage { order: -1; --stage-h: clamp(20rem, 52cqi, 30rem); margin: var(--section-space) 0 0; }
  body.home-reading .featured-panel-info { padding: var(--block-space) 0 var(--section-space); border: 0; }
}
@container shell (max-width: 900px) {
  body.home-reading .featured-panel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  body.home-reading .featured-panel-stage { order: -1; --stage-h: clamp(20rem, 52cqi, 30rem); margin: var(--section-space) 0 0; }
  body.home-reading .featured-panel-info { padding: var(--block-space) 0 var(--section-space); border: 0; }
}
@media (max-width: 640px) {
  body.home-reading :is(.hero, .archive, .work-table, .text-columns) {
    --text-body: .875rem;
    --text-body-large: 1rem;
    --text-title: clamp(1.375rem, 2.4cqi, 1.75rem);
    --text-heading: clamp(1.75rem, 4.5cqi, 2rem);
  }
  body.home-reading .hero { --text-display: clamp(1.75rem, 7.4cqi, 2.125rem); }
  body.home-reading .hero-title { font-size: var(--text-display); }
  body.home-reading .featured-panel-stage { --stage-h: 20rem; }
  body.home-reading .work-table-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 4rem; gap: var(--item-space); }
  body.home-reading .work-table-cell--client { display: none; }
}
@container shell (max-width: 640px) {
  body.home-reading :is(.hero, .archive, .work-table, .text-columns) {
    --text-body: .875rem;
    --text-body-large: 1rem;
    --text-title: clamp(1.375rem, 2.4cqi, 1.75rem);
    --text-heading: clamp(1.75rem, 4.5cqi, 2rem);
  }
  body.home-reading .hero { --text-display: clamp(1.75rem, 7.4cqi, 2.125rem); }
  body.home-reading .hero-title { font-size: var(--text-display); }
  body.home-reading .featured-panel-stage { --stage-h: 20rem; }
  body.home-reading .work-table-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 4rem; gap: var(--item-space); }
  body.home-reading .work-table-cell--client { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-reading .featured-panel-body,
  body.home-reading .featured-panel-media img,
  body.home-reading .featured-panel-media video,
  body.home-reading .archive-card,
  body.home-reading .archive-card-frame img,
  body.home-reading .archive-card[data-frame="browser"] .archive-card-frame img { transition: none; }
}