/* apps/cf-pages/sakeozo-directions/src/b.css. Last modified 2026-10-11 22:20 EDT by Claude (Builder desk, task recBFJwKanrdrssCt, Step 4453.site.2): ported unchanged from projects/sakeozo/design/site-directions/src/b.css (Step 4453.site.1). */
/* Direction B, Night Stories: immersive storybook at night, worlds first. Midnight sky, glowing matcha, Fredoka + Lexend. */
:root {
  --bg: #0A0024; --fg: #FEF1DF; --muted: #D9CFEA; --surface: #1B1245; --surface-solid: #1B1245; --line: #3A2E6B;
  --accent: #B5D14A; --accent-hover: #C7E06A; --accent-fg: #0A0024; --link: #B5D14A; --focus: #B5D14A;
  --chip-bg: #F2C0AB; --chip-fg: #0A0024; --tst-bg: #56000E; --tst-fg: #FEF1DF; --ph: #F2C0AB; --nav-mark: #B5D14A;
  --header-bg: rgba(10, 0, 36, .92);
  --font-display: 'Fredoka', 'Trebuchet MS', sans-serif; --font-body: 'Lexend', system-ui, sans-serif;
  /* type scale: 18px base, ratio 1.2 */
  --t0: 18px; --t1: 21.6px; --t2: 25.92px; --t3: 31.1px; --t4: 37.32px; --t5: 44.79px; --t6: 53.75px; --t7: 64.5px; --t8: 77.4px;
  --radius: 20px;
}
h1, h2, h3 { font-weight: 600; }
.h2 { color: #F2C0AB; }
body { background: radial-gradient(1200px 600px at 80% -10%, #1B1245 0%, transparent 60%), #0A0024; }

.hero-b { position: relative; min-height: 88vh; display: grid; align-items: end; padding: 0; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-b::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,0,36,.25) 0%, rgba(10,0,36,.55) 45%, #0A0024 92%); }
.stars { position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(2px 2px at 20% 30%, #88A31F, transparent), radial-gradient(2px 2px at 70% 20%, #FEF1DF, transparent), radial-gradient(1.5px 1.5px at 40% 60%, #F2C0AB, transparent), radial-gradient(2px 2px at 85% 55%, #88A31F, transparent); animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .4; } to { opacity: 1; } }
.hero-card { position: relative; z-index: 2; padding-top: var(--sp9); padding-bottom: var(--sp7); text-align: center; }
.hero-card .display { font-size: var(--t6); font-weight: 700; line-height: 1.05; }
.hero-card .display span { display: block; color: #B5D14A; font-size: var(--t3); font-weight: 500; margin-top: var(--sp3); }
@media (min-width: 1024px) { .hero-card .display { font-size: var(--t8); } .hero-card .display span { font-size: var(--t5); } .hero-card { padding-bottom: var(--sp8); } }
.hero-card .lead, .hero-card .eyebrow { margin-inline: auto; }
.hero-card .eyebrow { color: #F2C0AB; }
.hero-card .cta-row { justify-content: center; }

.worlds { padding-top: var(--sp6); }
.world-row { grid-auto-columns: 80%; }
@media (min-width: 1024px) { .world-row { grid-template-columns: repeat(3, 1fr); gap: var(--sp5); } }
.world-card { background: var(--surface); border-radius: var(--radius); padding: var(--sp3); border: 1px solid var(--line); transition: transform var(--dur) ease, box-shadow var(--dur) ease; }
.world-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px #B5D14A, 0 20px 40px -20px #88A31F; }
.world-art { aspect-ratio: 16 / 10; border-radius: 14px; }
.world-name { font-size: var(--t2); color: #FEF1DF; }
.asl-frame { border: 2px solid #B5D14A; box-shadow: 0 0 40px -10px #88A31F; }
.featured { background: linear-gradient(180deg, transparent, #1B1245 30%, #1B1245 70%, transparent); }
.cat-frame { border-radius: 16px; }
.testimonials { background: #56000E; }
.testimonials .h2 { color: #FEF1DF; }
.tst { background: rgba(254, 241, 223, .08); color: #FEF1DF; border: 1px solid rgba(254, 241, 223, .25); }
.svc-card { border: 1px solid var(--line); }
.svc-card:nth-child(2) { box-shadow: 0 0 0 2px #B5D14A; }
.support-big { background: var(--surface); border-radius: 32px 32px 0 0; }
.btn-secondary, .btn-follow { color: #FEF1DF; border-color: #FEF1DF; }
.hero-b .btn-secondary { background: rgba(10, 0, 36, .5); }
.tl li { border-top-color: var(--line); }
.tl-year { color: #F2C0AB; }
.tl li::before { content: '\263E'; color: #B5D14A; position: absolute; margin-left: -28px; }
.tl li { position: relative; padding-left: 8px; }
.pet-card { background: linear-gradient(160deg, #1B1245, #2A1C5E); border: 1px solid #3A2E6B; }
.pet-card:hover { box-shadow: 0 0 0 2px #B5D14A, 0 0 32px -6px #88A31F; }
.pet-name { color: #F2C0AB; }
.world-hero { min-height: 70vh; display: grid; align-items: end; overflow: hidden; }
.world-hero-art { position: absolute; inset: 0; }
.world-hero-art img { height: 100%; max-height: none; }
.world-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,0,36,.1), #0A0024 90%); }
.world-hero-text { position: relative; z-index: 1; padding-bottom: var(--sp6); }
.world-hero-text .display { color: #F2C0AB; }
.form input, .form select, .form textarea { --field-bg: #FEF1DF; }
.tier { border: 1px solid var(--line); }
.svc-block { border-top-color: var(--line); }