/* Uncoconut: coconut cream, cocoa, papaya and leaf. */
:root {
  --paper: #f8f1e7;
  --white: #fffcf7;
  --ink: #38251f;
  --muted: #706157;
  --line: #e3d8ca;
  --plum: #174d42;
  --plum-dark: #103e35;
  --wine: #296557;
  --orange: #f36a42;
  --accent: #b34b2c;
  --shadow: 0 16px 40px rgb(56 37 31 / 8%);
}
body { color: var(--ink); background: var(--paper); }
::selection { background: #f7b79e; color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #bc4824;
  outline-offset: 5px;
}
h1, h2, h3 { color: inherit; }
h2 { font-weight: 650; }
h2 em { font-weight: 500; color: var(--plum); }
.eyebrow, .guided-kicker, .selection-kicker, .guide-eyebrow { color: #945138; }
.site-header { background: var(--paper); border-color: var(--line); }
.nav-shell { height: 100px; gap: 28px; }
.brand { flex-shrink: 0; }
.brand-lockup { display: block; position: relative; width: 232px; aspect-ratio: 5.2; overflow: hidden; }
.brand-lockup img { position: absolute; width: 100%; height: auto; left: 0; top: 50%; transform: translateY(-50%); }
.desktop-nav { gap: 30px; margin: 0 auto; }
.desktop-nav a { color: var(--ink); font-size: 13px; }
.desktop-nav a:hover, .text-link:hover { color: #ab4223; }
.nav-actions { display: flex; gap: 12px; align-items: center; }
.nav-search { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.nav-search:hover { background: #eee4d6; }
.nav-search svg { width: 23px; height: 23px; }
.nav-issue { color: var(--ink); font-size: 11px; background: transparent; padding: 10px 13px; }
.pulse { background: #f36a42; box-shadow: 0 0 0 4px #f9dfcf; }
.mobile-menu { display: none; }
.hero-outer { padding-top: 22px; }
.hero {
  min-height: 510px;
  background: var(--plum);
  background-image: none;
  border-radius: 18px;
  grid-template-columns: 1.15fr 1fr;
}
.hero::before { display: none; }
.hero-text { padding: 65px 0 37px 58px; }
.eyebrow.light { color: var(--paper); font-size: 10px; letter-spacing: .19em; }
.hero h1 { color: var(--paper); font-size: clamp(54px, 6.1vw, 78px); line-height: 1.03; font-weight: 800; letter-spacing: -.06em; margin: 22px 0 23px; max-width: none; }
.hero h1 span { white-space: nowrap; }
.hero-text > p { color: var(--paper); font-size: 17px; line-height: 1.7; max-width: 395px; margin-bottom: 27px; }
.hero-actions { gap: 27px; }
.cta { border-radius: 100px; min-height: 48px; padding: 12px 23px; }
.cta-primary { background: var(--orange); color: #38251f; }
.cta-primary:hover { background: #ff825e; }
.cta-text { color: var(--paper); padding: 10px 0 5px; min-height: 44px; border-radius: 0; border-bottom: 1px solid #afc3b9; font-weight: 500; }
.cta-text:hover { color: #ffbd9d; }
.hero-bottom { color: #dce6df; font-size: 11px; padding-top: 27px; }
.hero-bottom .spark { color: var(--orange); }
.hero-visual { min-height: 510px; display: flex; align-items: center; justify-content: center; position: relative; }
.coconut-illustration { width: 118%; max-width: 610px; height: auto; flex-shrink: 0; z-index: 1; transform: translate(-4px, -13px); }
.coconut-shadow { position: absolute; height: 37px; width: 81%; border-radius: 50%; background: #103e35; bottom: 96px; left: 8%; }
.coconut-spark { width: 8px; height: 29px; border-radius: 100%; background: var(--paper); position: absolute; z-index: 2; }
.spark-left { left: 5%; top: 55%; transform: rotate(-42deg); }
.spark-right { right: 8%; top: 40%; transform: rotate(35deg); }
.spark-right::after { content: ''; position: absolute; width: 7px; height: 24px; border-radius: 100%; background: var(--paper); left: 23px; top: 25px; transform: rotate(40deg); }
.guided-section { padding-top: 52px; padding-bottom: 66px; }
.guided-heading { margin-bottom: 23px; }
.guided-heading h2 { font-weight: 650; font-size: clamp(34px, 4.1vw, 49px); }
.guided-heading h2 em { color: var(--plum); font-weight: 500; }
.guided-heading > p { color: var(--muted); }
.guided-progress { color: #78665a; }
.guided-progress b { color: #a0452a; }
.occasion-grid { gap: 0; border: 1px solid #d9cab9; border-radius: 14px; overflow: hidden; background: var(--white); }
.occasion-card { min-height: 155px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; padding: 22px; gap: 12px; color: var(--ink); }
.occasion-card:last-child { border-right: 0; }
.occasion-card:hover { transform: none; background: #f1e5d7; box-shadow: none; }
.occasion-card.active { background: var(--plum); border-color: var(--plum); color: var(--paper); box-shadow: none; }
.occasion-icon { background: transparent; color: var(--ink); border-radius: 0; width: 45px; height: 45px; }
.occasion-icon svg { width: 45px; height: 45px; }
.occasion-card.active .occasion-icon { color: var(--paper); background: transparent; }
.occasion-text strong { font-weight: 650; font-size: 24px; }
.occasion-text small { color: var(--muted); font-size: 11px; max-width: 190px; }
.occasion-card.active .occasion-text small { color: #e1ebe5; }
.occasion-arrow { color: var(--ink); font-size: 22px; top: 31px; }
.occasion-card.active .occasion-arrow { color: var(--paper); }
.tradition-selector { background: #efe6d8; }
.faith-choice { color: #554136; min-height: 44px; }
.faith-choice.active { color: var(--paper); }
.guided-result { border-color: #ded1c2; box-shadow: var(--shadow); }
.guide-ident h3 { font-weight: 650; }
.guide-symbol { background: #efe8dc; }
.guide-insight { background: #edf0e7; border-left-color: var(--plum); }
.guide-insight span { color: var(--plum); }
.guide-insight p { color: #43584b; }
.guide-outline h4 { font-weight: 650; }
.outline-reset { color: #9d442b; min-height: 44px; }
.phase-label strong, .ritual-head strong { font-weight: 600; }
.phase-count, .chapter-symbol { color: var(--plum); background: #e8ede3; }
.phase-group[open] .phase-count { color: var(--paper); }
.phase-group[open] { border-color: #a6b8a6; }
.ritual-category, .ritual-index, .nested-ritual-more h5 { color: #8e4d32; }
.nested-ritual-more { background: #f3ecdf; }
.switch-event, .guide-share { min-height: 44px; }
.switch-event { background: var(--plum); border-color: var(--plum); }
.overview { padding-top: 0; padding-bottom: 38px; }
.overview-icon { color: var(--plum); }
.calendar-section { padding-top: 65px; }
.section-heading h2 em, .story-intro h2 em, .faq-section h2 em { color: var(--plum); }
.up-next { background: #e9edde; border-color: #d5deca; }
.up-next .small-label { color: #365a45; }
.up-next-action { color: var(--plum); border-color: #b9c8ad; background: #f8f8ed; min-height: 44px; }
.filter-panel { background: var(--white); }
.month-btn { min-height: 44px; }
.month-btn.active { background: var(--plum); box-shadow: none; }
.community-btn { min-height: 40px; }
.community-btn.active { color: var(--plum); background: #e8eddf; border-color: #bdcdb4; }
.search-wrap input { min-height: 44px; }
.results-head p { color: #706157; }
.saved-switch { min-height: 44px; }
.saved-switch[aria-pressed="true"], .card-save.is-saved { color: #a94026; }
.card-art, .detail-cover { background: var(--shade1); }
.card-body h3 { font-weight: 600; }
.card-meta { color: #87553c; }
.card-body p { color: #706157; }
.card-footer .read-more { color: #94472e; }
.card-save { width: 42px; height: 42px; top: 10px; right: 10px; }
.load-more { border-radius: 100px; color: var(--ink); padding: 14px 25px; min-height: 48px; }
.interlude { background: #e8ecdf; padding-left: 48px; padding-right: 48px; margin-bottom: 74px; }
.interlude-symbol { color: #ccd7bd; }
.interlude h2 em { color: var(--plum); }
.interlude > p { color: #4a5e4b; }
.everyday-card h3, .rule h3 { font-weight: 600; }
.everyday-tag { color: var(--plum); background: #e8eddf; }
.try-line { color: #75513a; }
.text-link { color: var(--plum); border-color: var(--plum); }
.footer { background: #eee5d8; color: var(--ink); border-top: 1px solid #d7c8b8; }
.footer-top > div:first-child p { color: #6c584b; }
.footer-top h3 { color: var(--plum); }
.footer-top div > a:not(.brand) { color: #6c584b; }
.footer-top div > a:hover { color: #ab4223; }
.footer-bottom { border-color: #d7c8b8; }
.footer-bottom p { color: #786559; }
.dialog-close { width: 44px; height: 44px; color: var(--ink); }
.detail-content h2 { font-weight: 650; }
.detail-subtitle { color: #9e4b2d; }
.detail-uk { background: #e8eddf; }
.detail-uk h3, .detail-uk p { color: #395743; }
.detail-save, .detail-calendar, .detail-share { min-height: 44px; }
#toast { background: var(--plum); }
@media (max-width: 1100px) {
  .brand-lockup { width: 209px; }
  .desktop-nav { gap: 18px; }
  .nav-shell { gap: 18px; }
  .nav-issue { display: none; }
  .hero-text { padding-left: 42px; }
  .hero h1 { font-size: 64px; }
  .hero, .hero-visual { min-height: 480px; }
  .coconut-shadow { bottom: 100px; }
}
@media (max-width: 900px) {
  .nav-shell { height: 84px; }
  .desktop-nav { display: none; }
  .nav-actions { margin-left: auto; gap: 6px; }
  .mobile-menu { display: block; }
  .mobile-menu summary { display: grid; place-items: center; list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary svg { width: 24px; height: 24px; }
  .mobile-menu[open] summary { background: #e8ddcf; }
  .mobile-menu nav { position: absolute; top: calc(100% - 7px); right: 24px; left: 24px; padding: 14px; background: var(--white); border: 1px solid #d7c8b8; box-shadow: var(--shadow); border-radius: 12px; display: grid; z-index: 30; }
  .mobile-menu nav a { padding: 13px 15px; border-radius: 6px; font-size: 15px; }
  .mobile-menu nav a:hover { background: #eee5d8; }
  .hero { grid-template-columns: 1fr 1fr; }
  .hero-text { padding: 49px 0 32px 32px; }
  .hero h1 { font-size: clamp(43px, 6.5vw, 59px); }
  .hero-text > p { font-size: 15px; }
  .eyebrow.light { font-size: 8px; letter-spacing: .13em; }
  .hero-actions { gap: 18px; }
  .hero-actions .cta { padding-left: 18px; padding-right: 18px; gap: 15px; font-size: 12px; }
  .hero-actions .cta-text { padding: 8px 0 4px; }
  .hero, .hero-visual { min-height: 470px; }
  .coconut-illustration { width: 126%; transform: translate(-3px, -5px); }
  .coconut-shadow { bottom: 126px; height: 25px; }
  .occasion-card { padding: 19px 17px; }
}
@media (max-width: 760px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .brand-lockup { width: 206px; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: 42px 29px 0; }
  .eyebrow.light { font-size: 9px; letter-spacing: .13em; }
  .hero h1 { font-size: clamp(42px, 8.7vw, 64px); margin: 22px 0 18px; }
  .hero-text > p { max-width: 400px; font-size: 15px; line-height: 1.75; margin-bottom: 22px; }
  .hero-actions { gap: 22px; }
  .hero-bottom { font-size: 10px; padding-top: 23px; }
  .hero-visual { min-height: 0; height: 285px; margin: 0; }
  .coconut-illustration { width: 365px; max-width: 100%; transform: translateY(-3px); }
  .coconut-shadow { width: 70%; max-width: 265px; height: 23px; bottom: 59px; left: 50%; transform: translateX(-50%); }
  .spark-left { left: 15%; top: 45%; width: 6px; height: 22px; }
  .spark-right { right: 15%; top: 36%; width: 6px; height: 22px; }
  .spark-right::after { width: 5px; height: 18px; left: 17px; top: 18px; }
  .guided-section { padding-top: 39px; padding-bottom: 47px; }
  .guided-heading { gap: 14px; }
  .guided-heading h2 { font-size: 37px; }
  .guided-heading > p { font-size: 13px; line-height: 1.75; }
  .guided-progress { gap: 8px; }
  .occasion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .occasion-card { min-height: 152px; padding: 18px 17px; }
  .occasion-card:nth-child(2) { border-right: 0; }
  .occasion-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .occasion-card:nth-child(3) { border-right: 1px solid var(--line); }
  .occasion-text strong { font-size: 23px; }
  .occasion-text small { font-size: 11px; }
  .occasion-arrow { right: 13px; top: 27px; }
  .faith-choice { font-size: 12px; padding: 9px 14px; }
  .overview { padding-top: 0; padding-bottom: 30px; }
  .interlude { padding: 32px 27px; margin-left: 20px; margin-right: 20px; }
  .everyday-section { padding-left: 20px; padding-right: 20px; }
  .calendar-section { padding-top: 49px; }
  .up-next { padding: 16px; }
  .community-btn { min-height: 42px; }
  .detail-content { padding: 25px 22px; }
}
@media (max-width: 380px) {
  .nav-shell { gap: 8px; }
  .brand-lockup { width: 186px; }
  .hero-text { padding: 35px 23px 0; }
  .hero h1 { font-size: 10.2vw; }
  .eyebrow.light { font-size: 8px; letter-spacing: .1em; }
  .hero-actions { gap: 18px; }
  .hero-actions .cta { font-size: 11px; padding-left: 16px; padding-right: 16px; }
  .hero-actions .cta-text { padding: 8px 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}