.si-wrap { width: min(1200px, 90%); margin: 0 auto; }
/* Walk: one illustrated guide, followed by three playable sample destinations. */
.wg-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: center; scroll-margin-top: 90px; }
.wg-landscape { position: relative; margin: 0; overflow: hidden; border-radius: 8px; background: #e6e6d9; }
.wg-landscape img { display: block; width: 100%; height: 565px; object-fit: cover; }
.wg-landscape::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, #182419b3); pointer-events: none; }
.wg-landscape figcaption { position: absolute; z-index: 1; bottom: 34px; left: 34px; color: #fffaf0; font: 400 27px/1.7 var(--serif); letter-spacing: -.035em; }
.si-section.wg-guide .eyebrow, .si-section.wg-samples .eyebrow { color: #827154; font-size: 10px; letter-spacing: .2em; margin: 0 0 15px; }
.si-section.wg-guide h2 { margin-bottom: 17px; }
.wg-guide .wg-lead { margin: 0 0 25px; }
.wg-steps { list-style: none; padding: 0; margin: 0 0 24px; }
.wg-steps li { display: flex; gap: 20px; padding: 19px 0; border-top: 1px solid var(--line); }
.wg-steps li > span { padding-top: 2px; color: #89785b; font: 18px/1.5 var(--serif); }
.wg-guide .wg-steps h3 { font-size: 17px; margin: 0 0 7px; letter-spacing: -.025em; }
.wg-guide .wg-steps p { margin: 0; font-size: 13px; }
.wg-text-link { display: inline-flex; align-items: center; gap: 28px; padding-bottom: 8px; border-bottom: 1px solid #a1aa92; font-size: 13px; color: #45513e; }
.wg-samples-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.wg-samples .wg-samples-heading h2 { margin-bottom: 0; }
.wg-samples-heading > p { font-size: 13px; margin: 0; }
.wg-sample-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wg-sample { min-width: 0; overflow: hidden; border: 1px solid #e1dfd2; border-radius: 10px; background: #fcfaf4; transition: transform .2s, box-shadow .2s; }
.wg-sample:hover { transform: translateY(-4px); box-shadow: 0 12px 30px #39463012; }
.wg-sample-image { position: relative; }
.wg-sample-image img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.wg-film-cover { position: absolute; inset: 0; padding: 5% 4% 5% 56%; display: flex; flex-direction: column; justify-content: center; color: #fffaf0; background: linear-gradient(90deg, transparent 35%, #221b1440 55%, #221b14a0); }
.wg-sample-image[data-opening="moon"] .wg-film-cover { color: #493626; background: linear-gradient(90deg, transparent 35%, #f4e4cd55 58%, #f4e4cdbb); }
.wg-sample-image[data-opening="moon"] .wg-film-title { text-shadow: none; }
.wg-samples .wg-film-cover .wg-film-title { color: inherit; font: 400 clamp(13px, 1.3vw, 18px)/1.65 var(--serif); letter-spacing: -.035em; margin: 0 0 14px; text-shadow: 0 2px 12px #07130f66; }
.wg-film-start { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.wg-film-start > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; font-size: 16px; flex-shrink: 0; }
.wg-sample:focus-visible { outline: 2px solid #526b58; outline-offset: 5px; }
.wg-play { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #fff8; border-radius: 50%; background: #fffaf0ed; color: #45513e; font-size: 24px; }
.wg-sample-copy { padding: 24px; }
.wg-sample-copy .wg-mood { color: #827154; font-size: 11px; margin: 0 0 7px; }
.wg-samples .wg-sample-copy h3 { font: 400 25px/1.5 var(--serif); letter-spacing: -.035em; margin: 0 0 12px; }
.wg-sample-copy > p { font-size: 13px; margin: 0 0 24px; }
.wg-sample-link { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #e5e2d7; padding-top: 16px; font-size: 12px; color: #46513f; }
.wg-samples .wg-sample-note { font-size: 11px; margin: 20px 0 0; }
@media (max-width: 900px) {
  .wg-guide { gap: 5%; }
  .wg-desktop-break { display: none; }
  .wg-sample-grid { gap: 16px; }
  .wg-sample-copy { padding: 19px; }
  .wg-samples-heading { flex-direction: column; align-items: start; gap: 14px; }
}
@media (max-width: 760px) {
  .wg-guide { grid-template-columns: 1fr; gap: 28px; }
  .wg-landscape img { height: 290px; object-position: center 65%; }
  .wg-landscape figcaption { left: 25px; bottom: 24px; font-size: 23px; }
  .wg-sample-grid { grid-template-columns: 1fr; gap: 24px; }
  .wg-sample-copy { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .wg-sample { transition: none; } .wg-sample:hover { transform: none; } }
/* Starlight: a warm editorial introduction with direct sample access. */
@media (min-width: 761px) {
  .sl-page.si-wrap { width: min(1440px, calc(100% - 64px)); }
}
.sl-page { --sl-ink: #3f473d; --sl-muted: #6d7065; --sl-line: #deded1; color: var(--sl-ink); }
.sl-page .eyebrow { font-size: 10px; letter-spacing: .19em; color: #827459; }
.sl-page h2 { font: 400 clamp(25px, 2.7vw, 35px)/1.5 var(--serif); letter-spacing: -.055em; margin: 0; word-break: keep-all; }
.sl-page p { word-break: keep-all; }
.sl-hero { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 5%; padding: 22px 0 64px; }
.sl-hero-copy h1 { font-size: 15px; font-weight: 500; margin: 30px 0 14px; letter-spacing: .06em; }
.sl-headline { font: 400 clamp(36px, 4.1vw, 57px)/1.4 var(--serif); letter-spacing: -.055em; margin: 0 0 24px; }
.sl-lead { color: var(--sl-muted); font-size: 15px; line-height: 1.95; }
.sl-page .button { background: #465442; color: #fffdf7; border: 1px solid #465442; box-shadow: none; border-radius: 6px; padding: 15px 21px; font-size: 13px; }
.sl-page .button:hover { background: #334330; }
.sl-text-link { font-size: 13px; padding: 7px 0; border-bottom: 1px solid #a7ad9b; }
.sl-small { color: var(--sl-muted); font-size: 11px; margin-top: 16px; }
.sl-hero-image { margin: 0; position: relative; overflow: hidden; border-radius: 100px 8px 8px 8px; background: #e9e5db; }
.sl-hero-image img { display: block; width: 100%; height: 460px; object-fit: cover; }
.sl-hero-image::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, #20251c99); pointer-events: none; }
.sl-hero-image figcaption { position: absolute; z-index: 1; bottom: 27px; left: 30px; color: #fff9ec; font: 22px/1.6 var(--serif); }
.sl-hero-image figcaption span { display: block; font: 9px/2 sans-serif; letter-spacing: .23em; margin-bottom: 5px; }
.sl-samples, .sl-guide { padding: 48px 0; border-top: 1px solid var(--sl-line); scroll-margin-top: 90px; }
.sl-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.sl-section-heading > p { margin: 0 0 3px; font-size: 13px; line-height: 1.9; color: var(--sl-muted); }
.sl-sample-grid, .sl-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sl-sample-card { display: block; border: 1px solid var(--sl-line); border-radius: 8px; overflow: hidden; background: #fcfbf6; transition: box-shadow .2s, transform .2s; }
.sl-sample-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px #40483512; }
.sl-sample-photo { position: relative; overflow: hidden; background: #eeede5; }
.sl-sample-photo img { display: block; width: 100%; aspect-ratio: 1.6; height: auto; object-fit: cover; object-position: center 42%; }
.sl-sample-tag { position: absolute; top: 16px; left: 16px; background: #fcfaf1ed; border-radius: 3px; padding: 6px 10px; font-size: 11px; }
.sl-open { position: absolute; right: 15px; bottom: 15px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff9; font-size: 19px; }
.sl-sample-copy { padding: 22px; }
.sl-sample-label { font-size: 11px; color: #76785f; }
.sl-sample-copy h3 { font: 400 clamp(17px, 1.6vw, 21px)/1.65 var(--serif); letter-spacing: -.035em; margin: 9px 0 22px; word-break: keep-all; }
.sl-sample-link { display: flex; justify-content: space-between; font-size: 12px; }
.sl-sample-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 17px; }
.sl-sample-foot p { font-size: 11px; color: var(--sl-muted); }
.sl-guide { margin: 8px 0 0; }
.sl-step-grid { list-style: none; margin: 0; padding: 0; }
.sl-step-grid li { min-width: 0; }
.sl-step-image { position: relative; }
.sl-step-image img { display: block; width: 100%; height: 155px; object-fit: cover; border-radius: 6px; }
.sl-step-image > span { position: absolute; bottom: -18px; left: 18px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #f9f7ef; border: 1px solid var(--sl-line); color: #807351; font: 20px var(--serif); }
.sl-step-copy { padding: 25px 4px 0; }
.sl-step-copy .sl-step-meta { color: #817354; font-size: 10px; margin: 4px 0 8px; letter-spacing: .035em; }
.sl-step-copy h3 { font: 400 22px/1.5 var(--serif); margin: 0 0 10px; }
.sl-step-copy > p { color: var(--sl-muted); font-size: 13px; line-height: 1.9; margin: 0; }
.sl-feature-details { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; margin-top: 28px; border-top: 1px solid var(--sl-line); border-bottom: 1px solid var(--sl-line); }
.sl-feature-details details { padding: 19px 14px; }
.sl-feature-details summary { cursor: pointer; font-size: 12px; display: flex; justify-content: space-between; gap: 8px; list-style: none; }
.sl-feature-details summary::-webkit-details-marker { display: none; }
.sl-feature-details summary span { color: #8d8063; }
.sl-feature-details details[open] summary span { transform: rotate(45deg); }
.sl-feature-details details p { font-size: 12px; color: var(--sl-muted); line-height: 1.9; margin: 14px 0 0; }
.sl-guide-note { text-align: center; font-size: 12px; color: var(--sl-muted); margin: 24px 0 0; }
.sl-page .sl-faq { padding: 38px 0 48px; }
.sl-closing { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 42px 48px; background: linear-gradient(110deg,#e9ebdf,#f3efe4); border: 1px solid #e2e3d5; border-radius: 8px; }
.sl-closing p:not(.eyebrow) { font-size: 13px; color: var(--sl-muted); margin-bottom: 0; }
@media (max-width: 900px) {
  .sl-hero { gap: 28px; }
  .sl-hero-image img { height: 410px; }
  .sl-sample-grid, .sl-step-grid { gap: 16px; }
  .sl-section-heading { align-items: start; flex-direction: column; gap: 12px; }
  .sl-feature-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .sl-hero { grid-template-columns: 1fr; padding: 12px 0 36px; }
  .sl-hero-copy h1 { margin-top: 23px; }
  .sl-headline { font-size: 39px; }
  .sl-hero-image img { height: 300px; }
  .sl-hero-image { border-top-left-radius: 65px; }
  .sl-page .si-actions { gap: 13px; }
  .sl-page .si-actions .button { width: auto; }
  .sl-samples, .sl-guide { padding: 34px 0; }
  .sl-sample-grid, .sl-step-grid { grid-template-columns: 1fr; gap: 22px; }
  .sl-sample-photo img { aspect-ratio: 1.65; }
  .sl-sample-copy { padding: 18px 20px; }
  .sl-sample-copy h3 { font-size: 22px; margin-bottom: 16px; }
  .sl-sample-foot { align-items: start; flex-direction: column; gap: 4px; }
  .sl-step-grid { gap: 28px; }
  .sl-step-image img { height: 180px; }
  .sl-feature-details { grid-template-columns: 1fr; }
  .sl-feature-details details + details { border-top: 1px solid var(--sl-line); }
  .sl-feature-details summary { font-size: 13px; }
  .sl-closing { align-items: start; flex-direction: column; padding: 28px; }
}
@media (prefers-reduced-motion: reduce) { .sl-sample-card { transition: none; } }
.si-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 0; color: var(--muted); font-size: 12px; }
.si-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 6%; align-items: center; padding: 24px 0 64px; }
.si-hero-copy, .si-visual { min-width: 0; }
.si-hero .eyebrow { color: #795843; margin-bottom: 24px; }
.si-category { margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.si-hero h1 { font: 400 clamp(2rem, 3.7vw, 3.2rem)/1.35 var(--serif); letter-spacing: -.055em; margin: 0 0 22px; word-break: keep-all; }
.si-slogan { font: 400 23px/1.65 var(--serif); color: var(--green); word-break: keep-all; }
.si-intro { font-size: 15px; color: var(--muted); line-height: 1.95; word-break: keep-all; }
.si-status { border-left: 2px solid #b99d78; padding: 8px 0 8px 16px; font-size: 13px; color: #795843; }
.si-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.si-visual { margin: 0; }
.si-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.si-visual figcaption { text-align: right; font-size: 12px; color: var(--muted); padding-top: 12px; }
.si-section { padding: 60px 0; border-top: 1px solid var(--line); }
.si-section h2, .si-closing h2 { font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.5 var(--serif); letter-spacing: -.045em; word-break: keep-all; margin: 0 0 32px; }
.si-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.si-features article { padding: 26px; background: #f0f1e9; border-radius: 14px; }
.si-number { color: #917b5f; font: 400 26px/1.4 var(--serif); }
.si-section h3 { font-size: 19px; font-weight: 500; margin: 18px 0 12px; word-break: keep-all; }
.si-section p { color: var(--muted); font-size: 14px; line-height: 1.9; word-break: keep-all; }
.si-features p { margin: 0; }
.si-steps, .si-faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8%; }
.si-steps { scroll-margin-top: 30px; }
.si-steps ol { list-style: none; padding: 0; margin: 0; }
.si-steps li { display: flex; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.si-steps li:first-child { padding-top: 0; }
.si-step-index { font: 400 22px/1.6 var(--serif); color: #917b5f; }
.si-steps h3 { margin-top: 0; }
.si-steps li p { margin-bottom: 0; }
.si-faq details { padding: 20px 0; border-bottom: 1px solid var(--line); }
.si-faq summary { cursor: pointer; font-size: 16px; line-height: 1.7; }
.si-faq details p { margin: 16px 0 0; }
.si-closing { padding: 48px 24px; background: #eef0e7; text-align: center; border-radius: 18px; }
.si-related { padding: 36px 0 60px; }
.si-related > p { font-size: 12px; color: var(--muted); }
.si-related > div { display: flex; gap: 16px 32px; flex-wrap: wrap; }
.si-related a { border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 14px; }
.si-related a span { margin-left: 16px; }
.si-wrap a:focus-visible, .si-wrap summary:focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
/* One quiet, illustrated introduction to the six-week reading course. */
.bcg-guide { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 7%; scroll-margin-top: 36px; }
.bcg-photo { margin: 0; min-width: 0; }
.bcg-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.bcg-photo figcaption { margin-top: 15px; color: #827461; font: 400 13px/1.8 var(--serif); letter-spacing: .04em; }
.bcg-copy { min-width: 0; }
.si-section.bcg-guide .eyebrow { color: #8a7459; font-size: 10px; letter-spacing: .2em; margin: 0 0 17px; }
.si-section.bcg-guide h2 { margin-bottom: 20px; }
.si-section.bcg-guide .bcg-lead { margin: 0 0 18px; line-height: 1.95; }
.si-section.bcg-guide .bcg-meta { color: #776a58; font-size: 12px; margin: 0 0 26px; }
.bcg-meta span { padding-inline: 7px; color: #b8aa96; }
.bcg-moments { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.bcg-moments li { display: grid; grid-template-columns: 27px 1fr; gap: 15px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.bcg-moments li > span { color: #9a8162; font: 400 17px/1.7 var(--serif); }
.si-section.bcg-guide h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.si-section.bcg-guide .bcg-moments p { margin: 0; font-size: 13px; line-height: 1.8; }
.bcg-next { margin-top: 24px; }
.bcg-next a { display: inline-flex; align-items: center; gap: 27px; padding-bottom: 7px; border-bottom: 1px solid #a89b86; font-size: 13px; }
.si-section.bcg-guide .bcg-next p { margin: 10px 0 0; font-size: 11px; }
@media (max-width: 900px) and (min-width: 761px) { .bcg-guide { gap: 5%; } .bcg-photo img { aspect-ratio: 3 / 4; } }
@media (max-width: 760px) {
  .bcg-guide { grid-template-columns: 1fr; gap: 30px; }
  .bcg-photo img { aspect-ratio: 5 / 4; object-position: center 58%; }
  .bcg-photo figcaption { margin-top: 10px; font-size: 12px; }
  .si-section.bcg-guide h2 { margin-bottom: 16px; }
  .si-section.bcg-guide .bcg-lead br { display: none; }
  .si-wrap { width: auto; margin: 0 22px; }
  .si-breadcrumb { gap: 8px; padding: 20px 0; }
  .si-hero { grid-template-columns: 1fr; gap: 32px; padding: 14px 0 36px; }
  .si-hero .eyebrow { font-size: 10px; margin-bottom: 18px; }
  .si-slogan { font-size: 21px; }
  .si-section { padding: 36px 0; }
  .si-features, .si-steps, .si-faq { grid-template-columns: 1fr; gap: 18px; }
  .si-section h2 { margin-bottom: 24px; }
  .si-features article { padding: 22px; }
  .si-actions .button { width: 100%; justify-content: center; }
}