/* Homepage only. Without the enhancement, the approved vertical document remains usable. */
html:has(body.home-snap) { overflow: hidden; scrollbar-gutter: auto; }
body.mm-release.home-snap {
  display: flex; flex-direction: column;
  height: calc(100dvh - var(--hero-admin)); min-height: 0; overflow: hidden;
}
.home-snap .site-header { flex: none; }
.mm-release.home-snap #mm-main {
  display: flex; flex: 1 1 auto; min-height: 0; width: 100%;
  overflow-x: auto; overflow-y: hidden; position: relative;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-behavior: auto;
  overflow-anchor: none;
  touch-action: pan-x pinch-zoom;
}
.home-snap #mm-main::-webkit-scrollbar { display: none; }
.home-snap #remaining-content { display: contents; }
.mm-release.home-snap #mm-main .home-panel {
  flex: 0 0 100%; width: 100%; max-width: none; height: 100%; min-height: 0;
  box-sizing: border-box; margin: 0;
  /* The frame is fixed; overflow is available through the reading view. */
  align-content: safe center;
  overflow: hidden; overscroll-behavior-y: none;
  scroll-snap-align: start; scroll-snap-stop: always; scroll-margin: 0;
  scrollbar-width: thin; scrollbar-color: #73787a #101214;
}
.home-panel:focus { outline: none; }
.home-panel:focus-visible { outline: 1px solid #b9a3f0; outline-offset: -3px; }
/* Preserve the artwork proportions and equal spacing within the available frame. */
.wheel-preview.home-snap .hero { align-content: start; grid-template-rows: max-content 24px; }
.home-snap #w-archive { align-content: center; }
.home-snap .site-footer { padding: var(--space-section) var(--page-gutter); }
.home-snap .motion-control { margin: 24px 0 0; min-height: 44px; }
.home-sections[hidden] { display: none; }
.home-sections {
  flex: none; display: flex; align-items: center; gap: 16px;
  padding: 6px var(--page-gutter); min-height: 60px; box-sizing: border-box;
  border-top: 1px solid #b9a3f033; background: #090b0c; color: #e7e5df;
}
.home-sections .home-count { color: #a9b4ae; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-sections select {
  flex: 1; min-width: 0; max-width: 30rem; height: 44px; padding: 8px 28px 8px 8px;
  background: #090b0c; color: #e7e5df; border: 0; font-size: 14px; cursor: pointer;
}
.home-sections button {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  padding: 0; border: 1px solid #b9a3f04d; background: transparent; color: #e7e5df;
  font-size: 22px; transition: color .15s, border-color .15s, background .15s;
}
.home-sections [data-home-prev] { margin-left: auto; }
.home-sections button:disabled { opacity: .3; cursor: default; }
.home-sections button:not(:disabled):is(:hover,:focus-visible) { color: #fff; border-color: #c1544e; background: #713b3b55; }
.home-sections :is(button,select):focus-visible { outline: 2px solid #b9a3f0; outline-offset: 2px; }
.home-snap .home-panel:not(.is-current) .orbital-hand { animation-play-state: paused; }
/* The placeholder retains the original art box until its image is needed. */
.blood-art > img[data-home-src]:not([src]) { display: none; }
@media(max-width:800px) {
  .wheel-preview.home-snap .hero { align-content: start; grid-template-rows: auto auto auto; }
  .wheel-preview.home-snap .hero-art { width: min(100%,560px); }
}
@media(max-width:480px) {
  .home-sections { gap: 6px; padding-inline: 12px; }
  .home-sections select { font-size: 13px; padding-left: 4px; }
  .home-sections .home-count { font-size: 11px; }
}
/* Individual character paths retain their established artwork and copy layout. */
.wheel-preview.home-snap #remaining-content > .home-blood-section > .blood-grid { margin-top: 0; }
@media (min-width:701px) {
  .home-snap #w-clans .blood-card { grid-template-columns: minmax(0,1fr) minmax(0,1.45fr); }
  .home-snap #w-clans .blood-art { grid-column: 2; grid-row: 1; }
  .home-snap #w-clans .blood-copy { grid-column: 1; grid-row: 1; }
}
/* Visible guidance stays inside the enhanced Chronicle, above the wheel. */
.wheel-preview .chronicle-scroll-hint {
  margin: 0 0 16px; padding-inline: var(--page-gutter);
  color: #b7c2ba; font-size: 13px; line-height: 1.6;
}
.chronicle-scroll-hint .touch-hint { display: none; }
@media (hover:none) {
  .chronicle-scroll-hint .pointer-hint { display: none; }
  .chronicle-scroll-hint .touch-hint { display: inline; }
}
@media print {
  html:has(body.home-snap), body.mm-release.home-snap { height: auto; overflow: visible; display: block; }
  .mm-release.home-snap #mm-main, .mm-release.home-snap #mm-main .home-panel { display: block; height: auto; overflow: visible; }
  .home-sections { display: none; }
}

/* RC42: size the composition against main, after the header and navigation. */
.wheel-preview.home-snap { --frame-gap: clamp(16px, 2.3vh, 32px); --frame-pad: clamp(16px, 3vh, 40px); }
.wheel-preview.home-snap #mm-main .home-panel { padding-block: var(--frame-pad); }
.wheel-preview.home-snap .hero {
  grid-template-rows: minmax(0,1fr) 24px; row-gap: var(--frame-gap);
  align-content: stretch;
}
.wheel-preview.home-snap .hero-art {
  width: min(100%,calc(var(--home-frame-height, 80dvh) - 2 * var(--frame-pad) - var(--frame-gap) - 24px));
  min-width: 0; max-height: 100%;
}
.wheel-preview.home-snap .hero-slogan { font-size: clamp(42px,min(6.6vw,10vh),112px); }
.wheel-preview.home-snap #remaining-content > .section .section-top { margin-bottom: var(--frame-gap); }
.wheel-preview.home-snap #remaining-content .blood-intro h2,
.wheel-preview.home-snap #remaining-content .split-heading h2,
.wheel-preview.home-snap #remaining-content .accord-intro h2 { font-size: clamp(36px,min(5vw,7vh),80px); }
.wheel-preview.home-snap #remaining-content .blood-grid { margin-top: var(--frame-gap); }
.wheel-preview.home-snap #remaining-content .home-blood-section .blood-grid { margin-top: 0; }
.wheel-preview.home-snap .blood-art { max-height: calc(var(--home-frame-height,80dvh) - 2 * var(--frame-pad)); }
.wheel-preview.home-snap #remaining-content .blood-copy h3 { margin-block: 12px 16px; font-size: clamp(32px,min(4vw,6vh),64px); }
.wheel-preview.home-snap #remaining-content .blood-copy ul { margin-block: 12px; }
.wheel-preview.home-snap #w-story .blood-art { max-height: calc(var(--home-frame-height,80dvh) - 2 * var(--frame-pad) - 180px); }
.wheel-preview.home-snap .blood-art img { width: 100%; height: 100%; object-fit: contain; }
.wheel-preview.home-snap #remaining-content .path-list,
.wheel-preview.home-snap #remaining-content .accord-index,
.wheel-preview.home-snap #remaining-content .join-steps { margin-top: 0; }
.wheel-preview.home-snap .path-list > a { padding-block: 16px; }
.wheel-preview.home-snap .footer-brand { margin-bottom: var(--frame-gap); }
.wheel-preview.home-snap .footer-info { margin-block: var(--frame-gap); }
.wheel-preview.home-snap .site-footer .legal { margin-block: 12px; }
.wheel-preview.home-snap .motion-control { margin-top: 12px; }
@media(min-width:1000px) {
  .wheel-preview.home-snap #remaining-content .split-heading,
  .wheel-preview.home-snap #remaining-content .accord-layout {
    display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
    gap: clamp(32px,5vw,88px); align-items: center;
  }
  .wheel-preview.home-snap #remaining-content .accord-index { grid-template-columns: 1fr; gap: 0; }
  .wheel-preview.home-snap #remaining-content .accord-link { padding-block: 12px; }
  .wheel-preview.home-snap #remaining-content .blood-intro { display:grid; grid-template-columns: 1.45fr 1fr; gap:7%; align-items:center; }
  .wheel-preview.home-snap #remaining-content .blood-intro h2 { font-size: clamp(36px,min(4.5vw,6vh),72px); }
  .wheel-preview.home-snap #remaining-content .blood-intro p { margin: 0; }
}
@media(max-width:800px) {
  .wheel-preview.home-snap .hero { grid-template-rows: minmax(0,1fr) auto 24px; gap:16px; }
  .wheel-preview.home-snap .hero-art { width: min(100%,calc(var(--home-frame-height,80dvh) - 310px)); }
  .wheel-preview.home-snap .hero-copy { text-align:center; }
  .wheel-preview.home-snap .hero-slogan { font-size:clamp(36px,8vw,58px); }
  .wheel-preview.home-snap .hero-join { margin-top:12px; }
}
.home-summary { display:none; max-width:48rem; margin:auto; }
.mm-release.home-snap #mm-main .home-panel.is-condensed { display:grid; grid-template-columns:1fr; grid-template-rows:1fr; align-items:center; }
.home-panel.is-condensed > :not(.home-summary) { display:none !important; }
.home-panel.is-condensed > .home-summary { display:block; }
.home-summary h2 { font-size:clamp(32px,5vw,64px); line-height:1.1; margin:0 0 20px; }
.home-summary p { font-size:18px; line-height:1.65; margin:0 0 24px; }
.home-summary .button { min-height:44px; white-space:normal; }
.home-panel.is-minimal .home-summary p { display:none; }
.home-panel.is-minimal .home-summary h2 { font-size:28px; margin-bottom:12px; }
.home-reading {
  width:min(1100px,calc(100vw - 24px)); max-width:none; max-height:calc(100dvh - 24px);
  margin:auto; padding:0; overflow:auto; overscroll-behavior:contain;
  background:#090b0c; color:#e7e5df; border:1px solid #b9a3f066;
}
.home-reading::backdrop { background:#000c; }
.home-reading-bar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:20px; justify-content:space-between; padding:16px 24px; background:#101214; border-bottom:1px solid #b9a3f044; }
.home-reading-bar h2 { font:inherit; margin:0; }
.home-reading-bar button { min-height:44px; padding:8px 16px; color:inherit; background:transparent; border:1px solid #b9a3f077; }
.home-reading :is(button,a):focus-visible { outline:2px solid #b9a3f0; outline-offset:3px; }
.wheel-preview.home-snap .home-reading > .home-panel { display:block; width:100%; height:auto; max-height:none; padding:24px; overflow:visible; }
.home-reading .home-summary { display:none; }
.wheel-preview.home-snap .home-reading .hero-art { width:min(100%,360px); max-height:none; margin:auto; }
.wheel-preview.home-snap .home-reading .hero-copy { margin-block:24px; text-align:center; }
.wheel-preview.home-snap .home-reading .hero-bottom { margin-top:24px; }
.home-reading :is(.blood-intro,.split-heading,.accord-layout) { display:block; }
.home-reading :is(.blood-grid,.path-list,.accord-index,.join-steps) { margin-top:24px; }
.wheel-preview.home-snap .home-reading .blood-card { display:flex; flex-direction:column; gap:24px; }
.wheel-preview.home-snap .home-reading .blood-art { width:100%; max-height:300px; }
.wheel-preview.home-snap .home-reading .blood-copy { max-width:none; width:100%; padding:0; }
.home-reading :is(h2,h3) { overflow-wrap:anywhere; }
.home-reading .split-heading h2,.home-reading .blood-intro h2,.home-reading .accord-intro h2 { font-size:clamp(36px,5vw,64px); line-height:1.15; }
@media(min-width:1000px) and (max-height:800px) {
  .wheel-preview.home-snap #remaining-content .path-list > a { padding-block:12px; }
  .wheel-preview.home-snap #remaining-content .path-list h3 { font-size:30px; }
  .wheel-preview.home-snap #remaining-content .path-list p { font-size:16px; line-height:1.6; }
  .wheel-preview.home-snap #w-story .blood-card { grid-template-columns:1fr 1fr; gap:5%; }
  .wheel-preview.home-snap #remaining-content .blood-intro { grid-template-columns:1fr 1fr; gap:5%; }
  .wheel-preview.home-snap #remaining-content .blood-intro h2 { font-size:36px; }
  .wheel-preview.home-snap #remaining-content .blood-intro h2 br { display:none; }
  .wheel-preview.home-snap #w-story .blood-copy p { line-height:1.65; }
  .wheel-preview.home-snap #w-story .blood-copy li { margin-block:4px; }
  .wheel-preview.home-snap #w-archive .wheel-story { padding-block:12px; }
  .wheel-preview.home-snap #w-archive .wheel-summary { line-height:1.65; }
}
@media print {
  .home-summary,.home-reading { display:none !important; }
  .home-panel.is-condensed > :not(.home-summary) { display:revert !important; }
}

/* Owner revision: keep the full Mortals composition on desktop. The artwork
   occupies the remaining frame, rather than determining the slide height. */
@media (min-width:1000px) {
  .wheel-preview.home-snap #mm-main #w-story:not(.is-condensed) {
    display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr); gap:var(--frame-gap);
    align-content:stretch;
  }
  .wheel-preview.home-snap #remaining-content #w-story .section-top { margin:0; }
  .wheel-preview.home-snap #remaining-content #w-story .blood-intro { display:block; }
  .wheel-preview.home-snap #remaining-content #w-story .blood-intro h2 { white-space:nowrap; max-width:none; }
  .wheel-preview.home-snap #remaining-content #w-story .blood-intro h2 em { display:inline; padding:0; }
  .wheel-preview.home-snap #remaining-content #w-story .blood-grid { min-height:0; height:100%; margin:0; }
  .wheel-preview.home-snap #remaining-content #w-story .blood-card {
    height:100%; min-height:0; grid-template-rows:minmax(0,1fr);
  }
  .wheel-preview.home-snap #mm-main #w-story .blood-art {
    width:100%; height:100%; min-height:0; max-height:100%; aspect-ratio:auto;
  }
  .wheel-preview.home-snap #mm-main #w-story .blood-art img { width:100%; height:100%; object-fit:contain; }
}
/* The bottom section picker opens upward. Size it to the current label so its
   caret stays beside the wording, while retaining the native accessible select. */
.home-sections .home-picker { position:relative; flex:0 1 auto; min-width:0; max-width:30rem; min-height:44px; }
.home-sections .home-choice-size {
  display:block; visibility:hidden; white-space:nowrap; overflow:hidden;
  padding:8px 32px 8px 8px; font-size:14px; line-height:28px;
}
.home-sections .home-picker select {
  position:absolute; inset:0; width:100%; max-width:none; height:44px; margin:0;
  appearance:none; -webkit-appearance:none; background:transparent;
  padding:8px 32px 8px 8px; font-size:14px;
}
.home-sections .home-choice-caret {
  position:absolute; right:12px; top:20px; width:7px; height:7px;
  border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
  transform:rotate(-45deg); pointer-events:none;
}
.home-sections .home-picker:focus-within .home-choice-caret { color:#b9a3f0; }
/* Keep the landing composition readable in short landscape frames. */
@media(min-width:701px) and (max-height:480px) {
  .wheel-preview.home-snap .hero-slogan { font-size:clamp(28px,8vh,38px); }
  .wheel-preview.home-snap .hero-join { margin-top:8px; }
}
@media(max-width:480px) {
  .home-sections .home-choice-size,.home-sections .home-picker select { font-size:13px; padding-left:4px; }
}
