/* Home composition. Shared identity, preview and primitives live in their modules. */
.hero,.content-section,footer { width:min(var(--ui-content),calc(100% - 40px)); margin-inline:auto; }
.hero { padding:38px 0 28px; }
.hero h1 { max-width:760px; margin:0; font-size:clamp(28px,4vw,42px); font-weight:650; line-height:1.4; letter-spacing:-.045em; word-break:keep-all; }
.hero h1 em { color:var(--ui-accent); font-style:normal; }
.hero-description { margin:13px 0 0; color:var(--ui-muted); font-size:15px; line-height:1.8; word-break:keep-all; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.primary-link,.primary-button,.secondary-link { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:44px; padding:10px 17px; border:1px solid transparent; border-radius:12px; text-decoration:none; font-size:14px; cursor:pointer; }
.primary-link,.primary-button { background:var(--ui-accent); color:#242126; font-weight:650; }
.primary-link span { font-size:20px; }
.secondary-link { border-color:var(--ui-line-strong); background:#ffffff03; color:var(--ui-text); }
.content-section { padding:25px 0; scroll-margin-top:90px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.section-heading .eyebrow { margin-bottom:7px; }
.section-heading h2 { margin:0; font-size:24px; font-weight:600; letter-spacing:-.035em; }
.section-heading>p { margin:0; color:var(--ui-muted); font-size:13px; line-height:1.6; }
.recent-section { border-top:1px solid var(--ui-line); }
.recent-list { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 24px)/3); min-height:106px; gap:12px; padding:2px 2px 10px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; }
.recent-card { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; padding:14px; border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-surface); text-align:left; text-decoration:none; scroll-snap-align:start; }
.recent-card:hover { border-color:var(--ui-line-strong); }
.recent-cover { display:grid; width:64px; height:64px; place-items:center; border-radius:12px; font-size:25px; font-weight:600; }
.recent-copy { min-width:0; }
.recent-copy strong,.recent-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-copy strong { font-size:14px; font-weight:600; }
.recent-copy span { margin-top:5px; color:var(--ui-muted); font-size:12px; }
.recent-arrow { color:var(--ui-accent); font-size:20px; }
.recent-skeleton { height:94px; border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-surface); }
.recent-empty { grid-column:1 / -1; align-self:center; margin:0; color:var(--ui-muted); font-size:13px; }
.filter-row { display:flex; flex-wrap:nowrap; align-items:flex-start; height:56px; gap:7px; margin-bottom:20px; padding-bottom:5px; overflow-x:auto; scrollbar-width:thin; }
.filter-button { flex:0 0 auto; min-height:40px; padding:8px 14px; border:1px solid var(--ui-line); border-radius:12px; background:transparent; color:var(--ui-muted); font-size:13px; }
.filter-button:hover,.filter-button.active { border-color:#dcb5ac66; background:var(--ui-accent-soft); color:var(--ui-accent); }
.story-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:22px; }
.story-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--ui-line); border-radius:20px; background:var(--ui-surface); }
.story-card:hover { border-color:var(--ui-line-strong); }
.story-cover { position:relative; display:flex; align-items:flex-end; aspect-ratio:16/10; padding:22px; overflow:hidden; isolation:isolate; background:var(--ui-surface-raised); }
.story-cover::after { content:attr(data-monogram); position:absolute; z-index:-1; right:15px; bottom:-24px; color:#ffffff0d; font-size:170px; font-weight:700; line-height:1; }
.story-cover.has-art::before { content:''; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,#08061005 25%,#080610c7 100%); }
.story-cover.has-art::after { display:none; }
.story-cover-pair { position:absolute; z-index:0; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr); }
.story-cover-half { position:relative; min-width:0; min-height:0; overflow:hidden; }
.story-cover-half.male::before { content:''; position:absolute; z-index:1; top:0; bottom:0; left:0; width:1px; background:#ffffff33; }
.story-cover[data-selected-variant=female] .story-cover-half.male img,.story-cover[data-selected-variant=male] .story-cover-half.female img { filter:brightness(.55) saturate(.7); }
.story-badge { position:absolute; z-index:2; top:14px; left:14px; padding:5px 8px; border:1px solid #ffffff22; border-radius:8px; background:#151821b8; color:#eee9e3; font-size:10px; letter-spacing:.07em; }
.story-cover-copy { position:relative; z-index:2; }
.story-cover-copy>span { color:#ffffffa8; font-size:10px; letter-spacing:.1em; }
.story-cover-copy h3 { margin:6px 0 0; color:#f5f0ea; font-size:28px; font-weight:650; letter-spacing:-.04em; word-break:keep-all; }
.story-body { padding:20px; }
.story-tags { display:flex; flex-wrap:wrap; gap:6px; min-height:24px; }
.story-tag { padding:4px 8px; border-radius:6px; background:#ffffff07; color:#c1bfc4; font-size:11px; }
.story-synopsis { display:-webkit-box; min-height:69px; margin:14px 0; overflow:hidden; color:var(--ui-muted); font-size:14px; line-height:1.7; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.story-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:5px 10px; color:var(--ui-muted); font-size:11px; }
.story-gender-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; min-width:0; margin:18px 0 0; padding:0; border:0; }
.story-gender-picker legend { margin-bottom:8px; color:var(--ui-muted); font-size:12px; }
.story-gender-picker label { min-width:0; cursor:pointer; }
.story-gender-picker input { position:absolute; width:1px; height:1px; opacity:0; }
.story-gender-picker span { display:block; min-height:44px; padding:11px 8px; border:1px solid var(--ui-line-strong); border-radius:12px; color:#c9c5ca; text-align:center; font-size:13px; }
.story-gender-picker input:checked+span { border-color:var(--ui-accent); background:var(--ui-accent-soft); color:var(--ui-accent); }
.story-gender-picker input:focus-visible+span { outline:2px solid var(--ui-accent); outline-offset:3px; }
.start-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:46px; margin-top:16px; padding:12px 15px; border:0; border-radius:12px; background:var(--ui-accent); color:#242126; font-size:14px; font-weight:650; }
.start-button:disabled { opacity:.4; }
.story-art-link { display:inline-block; margin-top:12px; color:var(--ui-secondary); font-size:13px; text-decoration:none; }
.story-art-link:hover { text-decoration:underline; }
.create-card { display:grid; min-height:260px; place-items:center; border-style:dashed; background:#ffffff02; cursor:pointer; }
.create-card-inner { max-width:280px; padding:30px; text-align:center; }
.create-plus { display:grid; width:52px; height:52px; margin:0 auto 18px; place-items:center; border:1px solid var(--ui-line-strong); border-radius:16px; color:var(--ui-accent); font-size:27px; }
.create-card h3 { margin:0; font-size:20px; font-weight:600; }
.create-card p { margin:12px 0 0; color:var(--ui-muted); font-size:13px; line-height:1.7; }
.story-empty { grid-column:1 / -1; padding:44px 16px; color:var(--ui-muted); text-align:center; }
.story-skeleton { min-height:420px; border-radius:20px; background:linear-gradient(100deg,var(--ui-surface) 25%,var(--ui-surface-raised) 40%,var(--ui-surface) 55%); background-size:300% 100%; animation:home-shimmer 1.5s infinite; }
@keyframes home-shimmer { to { background-position:-100% 0; } }
.landing-error { margin:20px 0 0; color:var(--ui-danger); font-size:13px; }
.submission-notice { padding:14px 18px; border:1px solid #dcb5ac44; border-radius:12px; background:var(--ui-accent-soft); color:var(--ui-accent); }
.submission-history { margin-top:26px; padding:18px; border:1px solid var(--ui-line); border-radius:16px; background:var(--ui-surface); }
.submission-history h3 { margin:0 0 12px; font-size:16px; }
.submission-history p { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; padding:10px 0; border-top:1px solid var(--ui-line); }
.submission-history :is(span,a) { color:var(--ui-accent); }
.submission-history small { width:100%; color:var(--ui-muted); }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:35px; padding:28px 0 38px; border-top:1px solid var(--ui-line); color:var(--ui-muted); font-size:12px; }
footer p { margin:0; }
.footer-brand { font-size:15px; }
.footer-brand .brand-mark { flex-basis:28px; width:28px; height:28px; font-size:17px; }
.loading-curtain { position:fixed; z-index:100; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; background:#14161cf5; text-align:center; }
.loading-mark { display:grid; width:54px; height:54px; place-items:center; border:1px solid var(--ui-line-strong); border-radius:18px; color:var(--ui-accent); font:700 28px Georgia,serif; }
.loading-curtain>span:last-child { color:var(--ui-muted); font-size:13px; }
@media(max-width:800px) { .recent-list { grid-auto-columns:calc((100% - 12px)/2); } }
@media(max-width:600px) {
  .hero,.content-section,footer { width:calc(100% - 28px); }
  .hero { padding:27px 0 22px; } .hero .eyebrow { margin-bottom:8px; }
  .hero h1 { font-size:28px; } .hero-actions { margin-top:16px; gap:8px; }
  .primary-link,.secondary-link { padding-inline:13px; font-size:13px; }
  .hero-description { font-size:14px; }
  .content-section { padding:22px 0; } .section-heading { flex-direction:column; align-items:flex-start; gap:9px; margin-bottom:16px; }
  .section-heading h2 { font-size:23px; } .section-heading .eyebrow { display:none; }
  .story-grid { grid-template-columns:1fr; gap:18px; }
  .recent-list { grid-auto-columns:min(88%,320px); }
  .story-cover { padding:18px; } .story-cover-copy h3 { font-size:25px; } .story-body { padding:18px; }
  footer { flex-direction:column; align-items:flex-start; }
}