/* Moonlit Atelier — art, typography and motion share one visual hierarchy. */
:root {
  --atelier-ink: #091321;
  --atelier-gold: #dfc18c;
  --atelier-ivory: #f5eddd;
}

.topbar h1 { font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.35; }
.brand-copy b { font-size: 1.65rem; font-weight: 500; letter-spacing: -.02em; }
.topbar .eyebrow { font-size: .63rem; letter-spacing: .2em; }
.home-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.view { padding-top: 28px; }

.hero.scroll-cinematic {
  min-height: 540px;
  padding: 58px 48px 102px;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid rgba(223, 193, 140, .28);
  border-radius: 22px;
  background: var(--atelier-ink);
  box-shadow: 0 28px 80px #0004, inset 0 1px #fff1;
}
.hero .hero-depth-image {
  inset: -3%;
  background: url("moonlit-atelier-v1.webp") 65% center / cover no-repeat;
  filter: none;
  transform-origin: 75% 45%;
}
.hero .hero-depth::before {
  background: linear-gradient(90deg, #08111bed 0%, #08111ba1 34%, #08111b0d 66%),
    linear-gradient(0deg, #08111be6, transparent 34%);
}
.hero .hero-depth::after {
  opacity: .35;
  animation-duration: 14s;
}
.hero .hero-depth-grid, .hero .hero-depth > i { display: none; }
.hero::before { display: none; }
.hero::after {
  inset: 10px;
  border-radius: 15px;
  border-color: #e6c8921c;
  box-shadow: none;
}
.hero .hero-copy { max-width: 52%; padding: 0; }
.hero .hero-copy h2 {
  max-width: 100%;
  margin: 22px 0;
  font-family: var(--font-serif, var(--font-display));
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.065em;
  color: var(--atelier-ivory);
}
.hero .hero-copy > p:not(.eyebrow) {
  max-width: 320px;
  margin-bottom: 22px;
  color: #dddcd4;
  font-size: .86rem;
  font-weight: 400;
  line-height: 1.9;
}
.atelier-kicker { display: flex; gap: 9px; align-items: center; font-size: .58rem; letter-spacing: .18em; }
.hero .atelier-kicker { color: var(--atelier-gold); }
.atelier-kicker > span { font-size: 1rem; }
.hero .soft-chip { background: #09132180; border-color: #e3c79724; font-size: .64rem; }
.hero .button-row { margin-top: 22px; }
.hero .button.primary { min-height: 50px; padding: 13px 23px; border-radius: 10px; font-size: .84rem; }
.atelier-edition {
  position: absolute;
  z-index: 3;
  top: 25px;
  right: 27px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: #efe1c3bd;
  font-size: .52rem;
  letter-spacing: .18em;
}
.atelier-edition i { font-size: .9rem; font-style: normal; }
.atelier-ritual {
  position: absolute;
  z-index: 3;
  left: 48px;
  right: 48px;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: 20px;
  border-top: 1px solid #f2dbac24;
  color: #d8d8d1;
  font-size: .62rem;
}
.atelier-ritual span { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; }
.atelier-ritual b { color: #e3c894; font-family: var(--font-display); font-size: 1rem; font-weight: 500; }
.atelier-ritual > i { width: 26px; height: 1px; background: #dcc49655; }
.atelier-starlight { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.atelier-starlight i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff2cf;
  box-shadow: 0 0 13px 3px #e9cca64d;
  animation: atelier-twinkle 5.5s ease-in-out infinite;
}
.atelier-starlight i::before, .atelier-starlight i::after {
  content: ""; position: absolute; inset: -5px 2px; background: linear-gradient(transparent, #ffedc4, transparent);
}
.atelier-starlight i::after { transform: rotate(90deg); }
.atelier-starlight i:nth-child(1) { left: 62%; top: 22%; }
.atelier-starlight i:nth-child(2) { left: 89%; top: 40%; animation-delay: -2s; }
.atelier-starlight i:nth-child(3) { left: 72%; top: 68%; animation-delay: -4s; width: 3px; height: 3px; }
.atelier-starlight i:nth-child(4) { left: 50%; top: 16%; animation-delay: -1s; width: 2px; height: 2px; }
@keyframes atelier-twinkle {
  0%, 100% { opacity: .15; transform: scale(.65); }
  50% { opacity: .9; transform: scale(1.15); }
}

.home-aside.stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.home-aside .insight-card {
  position: relative;
  min-height: 155px;
  overflow: hidden;
  padding: 23px 26px;
  border-radius: 16px;
  background: linear-gradient(120deg, var(--surface), color-mix(in srgb, var(--surface) 85%, #36504e));
}
.home-aside .insight-card::after {
  content: ""; position: absolute; right: -12px; top: 28px; width: 85px; height: 85px;
  border: 1px solid var(--accent); transform: rotate(45deg); opacity: .15; pointer-events: none;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 18%, transparent);
}
.home-aside .insight-card h3 { margin: 8px 0; font-family: var(--font-serif); font-size: 1.08rem; font-weight: 500; }
.home-aside .insight-card p { max-width: 86%; font-size: .72rem; line-height: 1.85; }
.home-aside .insight-card .eyebrow { font-size: .56rem; letter-spacing: .18em; }
.home-aside .progress-line { height: 3px; margin-top: 14px; max-width: 85%; }
.home-aside .button-row { margin-top: 10px !important; }

.portal-section.scroll-cinematic { border-radius: 20px; padding: 28px; }
.portal-intro { align-items: center; margin-bottom: 24px; }
.portal-intro h2 { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; line-height: 1.5; }
.portal-intro > p { font-size: .72rem; line-height: 1.9; }
.portal-intro .eyebrow { font-size: .56rem; }
.reading-portal { border-radius: 15px; }
.portal-copy b { font-family: var(--font-serif); font-weight: 500; }
.portal-copy small { font-size: .58rem; letter-spacing: .15em; }
.portal-copy em { font-size: .73rem; }
.reading-portal:focus-visible { outline-offset: 5px; }

.deck-card, .result-card-back {
  background-image: url("celestial-card-back-v1.webp");
  background-position: center;
  background-size: cover;
}
.deck-card { border-color: #d9bc7e80; aspect-ratio: 2 / 3; }
.deck-card.selected { box-shadow: 0 0 0 2px #f3d398, 0 15px 40px #be945738, 0 0 35px #c6dccc22; }
.deck-card.selected::after { inset: 9px 9px auto auto; transform: none; width: 23px; height: 23px; }
.deck-card::before { background: linear-gradient(125deg, transparent 25%, #fff2cf33 48%, transparent 65%); }
.deck-stage::after { border-color: #ddc49733; }
.result-card-art { border-radius: 13px; box-shadow: 0 22px 50px #0006, 0 0 0 1px #e8c69466; }
.result-card-art::after { background: linear-gradient(120deg, transparent 35%, #fff4d52b 50%, transparent 65%); }
.reading-note h2, .reading-verdict h2, .archive-hero h2, .empty-state h3 { font-family: var(--font-serif); line-height: 1.6; }
.collection-grid { gap: 18px; }
.button, .filter-chip, .icon-button { touch-action: manipulation; }
.button:active { filter: brightness(1.12); }
.mobile-nav button.active { color: var(--accent-soft); }

/* Day mode keeps dark illustration canvases and readable paper controls. */
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .mobile-nav button.active,
html[data-theme="light"] .filter-chip.active,
html[data-theme="light"] .segmented button.active,
html[data-theme="light"] .settings-menu button.active { color: #674719; background: #e9dbc3; border-color: #a67b424f; }
html[data-theme="light"] .nav-item.active em { color: #674719; background: #ffffff80; }
html[data-theme="light"] .button.ghost { color: #624c33; background: #fffaf0; border-color: #a5805259; }
html[data-theme="light"] .hero .button.ghost { color: #f5eddd; background: #0a132399; border-color: #e3c79755; }
html[data-theme="light"] .icon-button { color: #5b4b32; background: #fffcf6; }
html[data-theme="light"] .portal-section.scroll-cinematic { background: #f8f3e9; border-color: #9e7d4833; }
html[data-theme="light"] .portal-intro h2 { color: #342c21; }
html[data-theme="light"] .portal-intro > p { color: #695c4e; }
html[data-theme="light"] .portal-intro .eyebrow { color: #795825; }
html[data-theme="light"] .dossier-panel.opportunity small { color: #376653; }
html[data-theme="light"] .dossier-panel.caution small { color: #91445b; }
html[data-theme="light"] .home-aside .insight-card { background: linear-gradient(120deg, #fffcf7, #f0ebdf); }

@media (min-width: 1500px) {
  .hero.scroll-cinematic { min-height: 590px; padding-left: 60px; }
  .hero .hero-copy h2 { font-size: 3.5rem; }
  .atelier-ritual { left: 60px; }
}
@media (max-width: 1000px) and (min-width: 761px) {
  .hero.scroll-cinematic { padding-left: 32px; min-height: 490px; }
  .hero .hero-copy { max-width: 58%; }
  .hero .hero-copy h2 { font-size: 2rem; }
  .atelier-ritual { left: 32px; right: 32px; gap: 12px; }
  .atelier-ritual > i { width: 12px; }
}
@media (max-width: 760px) {
  .topbar h1 { font-size: 1.75rem; }
  .topbar p { font-size: .75rem; }
  .view { padding-top: 20px; }
  .hero.scroll-cinematic { min-height: 610px; padding: 246px 26px 76px; border-radius: 19px; }
  .hero .hero-depth-image { inset: 0; background-size: auto 405px; background-position: 84% -15px; transform: none; }
  .hero .hero-depth::before {
    inset: 0;
    background: linear-gradient(0deg, #091321 0%, #091321 31%, #091321d4 47%, transparent 76%);
  }
  .hero .hero-copy { max-width: 100%; align-self: end; }
  .hero .hero-copy h2 { font-size: 2.05rem; line-height: 1.45; margin: 14px 0; letter-spacing: -.055em; }
  .hero .hero-copy > p:not(.eyebrow) { max-width: 100%; font-size: .75rem; line-height: 1.85; margin-bottom: 14px; }
  .hero .hero-copy > .eyebrow { font-size: .52rem; }
  .hero .button-row { margin-top: 18px; }
  .hero .button.primary { width: 100%; justify-content: center; min-height: 49px; }
  .hero .soft-chip { font-size: .59rem; }
  .atelier-edition { top: 22px; right: 22px; font-size: .45rem; }
  .atelier-ritual { left: 26px; right: 26px; bottom: 22px; gap: 8px; justify-content: space-between; font-size: .5rem; padding-top: 15px; }
  .atelier-ritual span { gap: 5px; }
  .atelier-ritual b { font-size: .85rem; }
  .atelier-ritual > i { width: 8px; }
  .atelier-starlight i:nth-child(1) { left: 39%; top: 14%; }
  .atelier-starlight i:nth-child(2) { left: 83%; top: 25%; }
  .atelier-starlight i:nth-child(3) { left: 66%; top: 34%; }
  .home-aside.stack { gap: 12px; }
  .home-aside .insight-card { padding: 19px 16px; min-height: 168px; }
  .home-aside .insight-card h3 { font-size: .92rem; line-height: 1.65; }
  .home-aside .insight-card p { max-width: 100%; font-size: .65rem; }
  .home-aside .insight-card::after { font-size: 5rem; right: 8px; }
  .home-aside .insight-card .eyebrow { font-size: .5rem; }
  .portal-section.scroll-cinematic { padding: 21px 16px; }
  .portal-intro h2 { font-size: 1.28rem; }
  .portal-intro > p { max-width: 100%; font-size: .67rem; }
  .portal-intro { gap: 12px; margin-bottom: 18px; }
  .collection-grid { gap: 12px; }
  .deck-card:nth-child(19) { grid-column: 2; }
}
@media (max-width: 370px) {
  .hero.scroll-cinematic { padding-left: 20px; padding-right: 20px; }
  .hero .hero-copy h2 { font-size: 1.85rem; }
  .atelier-ritual { left: 20px; right: 20px; gap: 5px; }
  .atelier-ritual > i { display: none; }
  .home-aside.stack { grid-template-columns: 1fr; }
  .home-aside .insight-card { min-height: 130px; }
}
.hero:not(.is-motion-active) .atelier-starlight i,
html[data-app-visibility="hidden"] .atelier-starlight i { animation-play-state: paused; }
html[data-motion="reduced"] .atelier-starlight i { animation: none; opacity: .4; }
html[data-motion="reduced"] .hero .hero-depth-image { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .atelier-starlight i { animation: none; opacity: .4; }
  .hero .hero-depth-image { transform: none; transition: none; }
}