/* The homepage keeps the shared palette. Intrinsic grids and wrapping controls
   reflow without fixed-height content; decorative artwork never receives focus. */
.home-page { --home-blue: var(--blue-700); display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: #f6f9fd; }
.home-page .site-header { top: 12px; width: calc(100% - 28px); margin: 12px auto 0; border: 1px solid #dbe7f3; border-radius: 999px; background: rgb(255 255 255 / 90%); box-shadow: 0 8px 24px rgb(63 99 143 / 6%); }
.home-page .site-header__inner { width: min(1400px, 100%); min-height: 64px; padding: 10px clamp(18px, 3vw, 34px); gap: 12px 24px; }
.home-page .site-nav a { padding: 8px 15px; }
.home-page .site-session { color: var(--ink-soft); }
.home-page .site-header + .home-main { width: 100%; max-width: none; padding: 0; }
.home-main { flex: 1; }
.home-hero { position: relative; isolation: isolate; padding: clamp(38px, 5.5vw, 78px) 20px clamp(38px, 5vw, 68px); }
.home-hero::before { position: absolute; z-index: -1; inset: -90px 0 0; content: ''; background: linear-gradient(to bottom, rgb(246 249 253 / 5%) 20%, rgb(246 249 253 / 15%) 62%, #f6f9fd 100%), url('/assets/home-atmosphere-v001.png') center 46% / cover no-repeat; opacity: .87; }
.home-heading { max-width: 900px; margin: 0 auto 30px; text-align: center; }
.home-heading .eyebrow { margin-bottom: 15px; font-size: .74rem; letter-spacing: .1em; }
.home-heading h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.35rem); font-weight: 800; line-height: 1.35; letter-spacing: -.045em; }
.home-heading h1 span { color: var(--blue-700); }
.home-heading .home-art-title { display: grid; place-items: center; width: min(680px, 100%); aspect-ratio: 2172 / 424; margin-inline: auto; }
/* Original PNG is unchanged. The frame retains y=145..569: visible lettering
   (alpha > 4) is y=175..542, with safe space for its complete printed edges. */
.home-title-visual { position: relative; display: block; width: 100%; aspect-ratio: 2172 / 424; overflow: clip; }
.home-title-visual[hidden] { display: none; }
.home-title-visual img { position: absolute; top: -34.198113%; left: 0; display: block; width: 100%; height: auto; }
.home-heading > p:last-child { margin: 15px 0 0; color: var(--ink-soft); font-size: clamp(.88rem, 1.3vw, 1rem); }
.home-search { width: min(810px, 100%); margin: 0 auto; padding: clamp(20px, 3vw, 30px); border: 1px solid #bfd4ed; border-radius: 28px; background: rgb(255 255 255 / 94%); box-shadow: 0 16px 50px rgb(48 95 151 / 10%), 0 1px 0 #fff inset; }
.home-search > label { display: block; margin-bottom: 12px; color: var(--ink); font-size: .87rem; font-weight: 750; }
.home-search > input { min-height: 60px; padding: 8px 0 16px; border: 0; border-radius: 6px; background: transparent; font-size: clamp(1rem, 1.5vw, 1.1rem); box-shadow: none; }
.home-search > input::placeholder { color: var(--ink-soft); }
.home-search-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 17px; }
.home-select-wrap { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 0 13px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 999px; color: var(--blue-700); }
.home-select-wrap svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.home-select-wrap select { width: auto; min-width: 112px; max-width: 230px; min-height: 44px; padding: 8px 4px; color: var(--blue-700); border: 0; background: transparent; font-size: .85rem; }
.home-search-bottom button { min-width: max-content; white-space: nowrap; min-height: 46px; gap: 25px; padding: 11px 22px; border-radius: 999px; font-size: .9rem; }
.home-status { margin: 14px 0 0; color: var(--ink-soft); font-size: .8rem; }
.home-shortcuts { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
.home-shortcuts a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: var(--ink-soft); font-size: .83rem; font-weight: 650; text-decoration: none; }
.home-shortcuts a:hover { color: var(--blue-700); }
.home-shortcuts svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-shortcuts a > span { font-size: 1.1rem; }
.home-collection { width: min(1400px, 100%); margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px) 45px; }
.home-section-heading { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 23px; }
.home-section-heading .eyebrow { margin: 0 0 7px; color: var(--ink-soft); font-size: .62rem; letter-spacing: .15em; }
.home-section-heading h2 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); letter-spacing: -.025em; }
.home-view-all { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; color: var(--blue-700); font-size: .8rem; text-decoration: none; }
.home-chips { display: flex; align-items: center; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; padding: 2px 3px 12px; margin: 0 -3px 10px; }
.home-chip { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; color: var(--ink-soft); background: #fff; border: 1px solid #dce7f2; border-radius: 999px; font-size: .8rem; line-height: 1.4; text-decoration: none; }
.home-chip:hover { color: var(--blue-700); border-color: #8bb6df; }
.home-chip.is-active { color: #fff; background: var(--blue-700); border-color: var(--blue-700); }
.home-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.home-card { min-width: 0; overflow: clip; background: #fff; border: 1px solid #dbe7f3; border-radius: 22px; color: var(--ink); text-decoration: none; box-shadow: 0 4px 16px rgb(52 93 143 / 4%); transition: border-color .16s ease, box-shadow .16s ease; }
.home-card:hover { color: var(--ink); border-color: #8bb6df; box-shadow: 0 14px 30px rgb(52 93 143 / 12%); }
.home-art { position: relative; height: clamp(190px, 19vw, 250px); overflow: clip; isolation: isolate; border-bottom: 1px solid #e4edf6; }
.home-art-label { position: absolute; top: 20px; left: 22px; color: var(--blue-700); font-size: .6rem; font-weight: 750; letter-spacing: .12em; }
.home-art-bank { background: radial-gradient(ellipse at 50% 90%, #adcff6 0, #e3efff 45%, #f1f7ff 90%); }
.home-art-paper { background: radial-gradient(ellipse at 55% 90%, #c3d8f5 0, #edf3fc 58%, #f7f9fc 100%); }
.home-art-class { background: radial-gradient(ellipse at 50% 80%, #dce6f6 0, #edf4fd 50%, #f6f8fc 100%); }
.home-book { position: absolute; left: 50%; top: 30%; display: flex; width: 220px; height: 125px; transform: translateX(-50%) rotate(-8deg); filter: drop-shadow(12px 24px 16px rgb(74 111 164 / 18%)); }
.home-book-page { position: relative; width: 50%; padding: 30px 18px 10px; border: 1px solid #c3d7ec; background: linear-gradient(110deg, #fff 50%, #dfecfb); box-shadow: 0 6px 0 #c4dcf5, 0 9px 0 #edf5fe; }
.home-book-page-left { border-radius: 12px 3px 3px 10px; transform: skewY(8deg); }
.home-book-page-right { border-radius: 3px 12px 10px 3px; transform: skewY(-8deg); background: linear-gradient(85deg, #d7e6f8, #fff 25%); }
.home-book-page i { display: block; height: 3px; margin-bottom: 11px; border-radius: 3px; background: #bbd0e8; }
.home-book-page i:last-child { width: 65%; }
.home-art-orbit { position: absolute; z-index: -1; width: 310px; height: 105px; left: 50%; top: 42%; transform: translateX(-50%) rotate(-15deg); border: 1px solid rgb(77 139 206 / 28%); border-radius: 50%; }
.home-sheet { position: absolute; top: 25%; left: calc(50% - 65px); width: 130px; height: 158px; padding: 23px 18px; border: 1px solid #c5d7ed; border-radius: 8px; background: linear-gradient(125deg, #fff, #edf4ff); transform: rotate(8deg); box-shadow: 8px 12px 25px rgb(85 114 160 / 15%); }
.home-sheet-back { transform: rotate(-12deg) translate(-15px, -5px); background: #d4e4f8; }
.home-sheet > span { display: block; width: 100%; height: 3px; margin-bottom: 10px; border-radius: 3px; background: #bfd3ed; }
.home-sheet > .home-sheet-heading { width: 60%; height: 7px; margin-bottom: 19px; background: #80a9d7; }
.home-sheet > i { display: block; width: 25px; height: 25px; margin: 16px 0 0 auto; border: 4px solid #f5d994; border-radius: 50%; }
.home-blocks { position: absolute; inset: 0; }
.home-blocks span { position: absolute; width: 63px; height: 53px; border: 1px solid #b9d0ec; border-radius: 12px; background: linear-gradient(135deg, #fff, #b8d2f1); box-shadow: 5px 9px 15px rgb(81 120 168 / 13%); transform: rotate(-6deg); }
.home-blocks span:nth-child(1) { top: 24%; left: calc(50% - 31px); }
.home-blocks span:nth-child(2) { top: 64%; left: calc(25% - 21px); background: linear-gradient(135deg, #fff, #efdaea); }
.home-blocks span:nth-child(3) { top: 64%; left: calc(75% - 40px); }
.home-blocks span:nth-child(4) { top: 65%; left: calc(50% - 28px); width: 54px; background: linear-gradient(135deg, #fff, #e1e9f6); }
.home-connections { position: absolute; z-index: -1; inset: 18% 0 0; width: 100%; height: 74%; fill: none; stroke: #9cbcdf; stroke-width: 1.4; stroke-dasharray: 4 5; }
.home-card-copy { padding: 22px; }
.home-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-card-heading h3 { font-size: 1.17rem; }
.home-card-arrow { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; color: var(--blue-700); background: var(--blue-50); border-radius: 50%; }
.home-card-copy p { margin: 11px 0 0; color: var(--ink-soft); font-size: .82rem; line-height: 1.8; }
.home-note { margin: 23px 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.8; text-align: center; }
.home-page .site-footer { background: rgb(255 255 255 / 70%); }
/* Narrow viewports retain a single-row capsule header and full-width search controls. */
@media (min-width: 680px) { .home-heading h1 span { white-space: nowrap; } }
@media (max-width: 640px) {
  .home-page .site-header { border-radius: 25px; top: 8px; margin-top: 8px; }
  .home-page .site-header__inner { gap: 9px 12px; padding: 13px 12px 10px; }
  .home-page .site-session { font-size: .72rem; }
  .home-page .site-menu-panel .site-nav a { padding: 11px 14px; font-size: .86rem; }
  .home-heading h1 span { display: block; }
  .home-heading .eyebrow { font-size: .65rem; }
  .home-search { border-radius: 22px; }
  .home-search-bottom { gap: 10px; }
  .home-select-wrap { flex: 1 1 140px; }
  .home-select-wrap select { width: 100%; }
  .home-search-bottom button { flex: 1 1 130px; }
  .home-shortcuts { gap: 8px 18px; }
  .home-shortcuts a { font-size: .79rem; }
}