/* Approved story layouts: featured (1) is active; gallery (3) is retained in code. */
.story-lab.section { width:100%; max-width:none; padding:0; scroll-margin-top:-90px; }
.story-lab > [hidden] { display:none!important; }
.story-lab { --story-paper:#f7f5e9; --story-ink:#19382e; --story-line:#cdd3c1; background:var(--story-paper); color:var(--story-ink); }
.story-lab button { font:inherit; color:inherit; }
.story-review-controls { position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:22px; padding:15px max(24px,calc((100% - 1440px)/2)); border-block:1px solid #cdd3c1; background:#f7f5e9f5; backdrop-filter:blur(12px); color:#19382e; }
.story-review-controls > span { font-size:12px; text-transform:uppercase; letter-spacing:.1em; white-space:nowrap; }
.story-review-controls [role=tablist] { display:flex; gap:7px; overflow-x:auto; padding:4px; }
.story-review-controls button { display:flex; gap:10px; align-items:center; border:1px solid transparent; border-radius:8px; padding:10px 15px; background:transparent; font-size:15px; white-space:nowrap; min-height:44px; }
.story-review-controls button[aria-selected=true] { background:#19382e; color:#f7f5e9; }
.story-review-controls button:hover { border-color:#809477; }
.story-shell { width:min(1440px,calc(100% - 96px)); margin:auto; padding:54px 0 64px; }
.stories-heading { display:grid; grid-template-columns:1.35fr 1fr; gap:64px; margin-bottom:44px; align-items:start; }
.stories-heading h2 { font:400 clamp(38px,3.85vw,60px)/1.08 Georgia,'Times New Roman',serif; letter-spacing:-.045em; }
.stories-heading h2 em { color:inherit; font-style:normal; }
.stories-heading > p { color:#536357; font-size:15px; line-height:1.65; padding-top:6px; }
.story-label { display:block; font-size:11px; letter-spacing:.16em; line-height:1.6; font-weight:600; text-transform:uppercase; margin-bottom:13px; }
.example-bio h3 { font:600 30px/1.2 Outfit,Arial,sans-serif; letter-spacing:-.03em; margin:0 0 10px; }
.example-bio p { font-size:16px; line-height:1.45; margin:0; }
.example-amounts { display:grid; gap:25px; }
.example-amounts strong,.atlas-amount { display:block; font:600 42px/1.1 Outfit,Arial,sans-serif; letter-spacing:-.055em; color:#496a3c; }
.example-amounts small,.atlas-amount small,.journey-amount small { font:400 17px/1.2 Outfit,Arial,sans-serif; letter-spacing:0; white-space:nowrap; color:inherit; }
.example-habits ul { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.example-habits li { display:flex; justify-content:space-between; gap:20px; font-size:17px; line-height:1.5; }
.example-habits li > span:last-child { color:#496a3c; white-space:nowrap; }
.example-reward > p,.featured-facts p { font-size:17px; line-height:1.55; }
.story-lab blockquote { margin:0; font:italic 27px/1.35 Georgia,'Times New Roman',serif; letter-spacing:-.02em; }
.example-reward blockquote { border-top:1px solid var(--story-line); padding-top:20px; margin-top:24px; }
.example-people { display:flex; flex-wrap:wrap; gap:5px 22px; }
.example-people button { text-align:left; border:0; border-bottom:2px solid transparent; background:transparent; padding:8px 0; min-height:44px; font-size:17px; }
.example-people button[aria-pressed=true] { border-color:#df6749; font-weight:600; }
.example-people button:hover { color:#497143; }
.example-stepper { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:13px; }
.example-stepper > span { white-space:nowrap; font-variant-numeric:tabular-nums; }
.example-stepper button { border:1px solid var(--story-line); border-radius:30px; background:transparent; padding:9px 14px; min-height:44px; font-size:13px; }
.example-stepper button:hover { background:#e4e9d8; color:#19382e; }

/* 1 — Editorial feature, full name index and reward still life. */
[data-story-mode="1"] .stories-heading { display:block; }
[data-story-mode="1"] .stories-heading p { margin-top:18px; max-width:1380px; }
.featured-layout { display:grid; grid-template-columns:185px minmax(0,1fr); gap:50px; }
.mobile-example-nav { display:none; }
.featured-nav { display:flex; flex-direction:column; justify-content:space-between; gap:28px; border-right:1px solid var(--story-line); padding-right:30px; }
.featured-nav .example-people { flex-direction:column; gap:0; }
.featured-nav .example-stepper { flex-wrap:wrap; gap:10px; }
.featured-nav .example-stepper > span { order:-1; width:100%; }
.featured-lead { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr); gap:20px; align-items:center; }
.featured-lead blockquote { font-size:clamp(37px,4.05vw,64px); line-height:1.14; margin-bottom:32px; }
.featured-lead figure img { width:100%; height:350px; object-fit:cover; object-position:68% center; }
.featured-lead .example-bio { padding-left:12px; }
.featured-lead .example-bio p { text-transform:uppercase; letter-spacing:.13em; font-size:11px; line-height:1.8; }
.featured-facts { display:grid; grid-template-columns:.8fr 1.2fr 1.15fr; gap:32px; border-top:1px solid var(--story-line); margin-top:36px; padding-top:27px; }
.featured-facts > * + * { border-left:1px solid var(--story-line); padding-left:32px; }

/* 2 — Three complete examples in open comparison rows. */
.ledger-row { display:grid; grid-template-columns:1fr 1.3fr 1fr 1.8fr; gap:32px; border-top:1px solid #55715d; padding:27px 0; }
.ledger-row > * + * { border-left:1px solid var(--story-line); padding-left:30px; }
.ledger-row .example-bio h3 { font:400 37px/1.15 Georgia,serif; }
.ledger-row .example-amounts { gap:20px; }
.ledger-row .example-amounts > div + div { border-top:1px solid var(--story-line); padding-top:17px; }
.ledger-row .example-amounts strong { font:400 42px/1.1 Georgia,serif; }
.ledger-row .example-habits li { font-size:16px; }
.ledger-row .example-reward blockquote { font-size:24px; margin-top:17px; padding-top:16px; }
.ledger-pagination { border-top:1px solid #55715d; display:flex; justify-content:space-between; align-items:center; gap:25px; padding-top:22px; font-size:14px; }
.ledger-pagination > div { display:flex; gap:8px; }
.ledger-pagination button { border:0; background:transparent; border-radius:30px; min-width:44px; min-height:44px; padding:8px 14px; }
.ledger-pagination button[aria-current=page] { background:#19382e; color:#f7f5e9; }

/* 3 — Selectable reward photography with a shared detail area. */
.reward-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.reward-choice { padding:0; background:transparent; border:0; text-align:center; }
.reward-choice img { width:100%; height:285px; object-fit:cover; }
.reward-choice > span { display:block; width:42%; margin:10px auto 0; padding:9px 0; border-bottom:4px solid transparent; font-size:20px; }
.reward-choice[aria-pressed=true] > span { border-color:#19382e; font-weight:600; }
[data-story-mode="3"] .example-stepper { justify-content:flex-end; gap:20px; margin:10px 0 24px; }
.gallery-details { display:grid; grid-template-columns:1fr 1fr 1.1fr; gap:40px; border-top:1px solid var(--story-line); padding-top:30px; }
.gallery-details > * + * { padding-left:36px; border-left:1px solid var(--story-line); }
.gallery-details .example-amounts { margin-top:22px; padding-top:20px; border-top:1px solid var(--story-line); grid-template-columns:1fr 1fr; gap:22px; }
.gallery-details .example-amounts strong { font-size:36px; }
.gallery-details .example-reward blockquote { font-size:28px; }

/* 4 — A working, clearly illustrative habit-to-reward journey. */
[data-story-mode="4"] #story-stage { --story-line:#57705b; background:#19382e; color:#f7f5e9; }
[data-story-mode="4"] .stories-heading { display:block; }
[data-story-mode="4"] .stories-heading h2 em { color:#c7d79f; }
[data-story-mode="4"] .stories-heading p { color:#eef1e3; margin-top:22px; max-width:1250px; }
.journey-selector { display:flex; gap:35px; justify-content:space-between; align-items:center; border-bottom:1px solid var(--story-line); margin-bottom:28px; padding-bottom:12px; }
.journey-selector .example-people { gap:4px 24px; }
.journey-selector .example-people button { font-size:15px; }
.journey-selector .example-people button[aria-pressed=true] { border-color:#c7d79f; }
.journey-selector .example-people button:hover { color:#c7d79f; }
[data-story-mode="4"] .example-bio h3 { font-size:42px; }
[data-story-mode="4"] .example-bio p { display:inline; text-transform:uppercase; font-size:12px; letter-spacing:.13em; margin-right:20px; }
.journey-stages { display:grid; grid-template-columns:.85fr 1fr 1.35fr; gap:44px; margin:36px 0 45px; }
.journey-stage { min-width:0; }
.journey-stage h4 { display:flex; align-items:center; gap:16px; margin:0 0 30px; font-size:23px; font-weight:400; }
.journey-stage h4 > span { display:flex; align-items:center; justify-content:center; width:52px; height:52px; flex-shrink:0; border-radius:50%; background:#c7d79f; color:#19382e; font-size:22px; }
.journey-amount { display:block; font-size:69px; font-weight:600; letter-spacing:-.065em; line-height:1.05; }
.journey-amount small { font-size:23px; }
.journey-checks { display:grid; gap:18px; }
.journey-checks label { display:flex; align-items:center; gap:14px; cursor:pointer; font-size:16px; min-height:40px; }
.journey-checks input { margin:0; appearance:auto; width:21px; height:21px; flex-shrink:0; accent-color:#c7d79f; }
.journey-checks strong { margin-left:auto; white-space:nowrap; font-weight:400; }
.journey-demo { margin-top:15px; font-size:12px; color:#d3dfc3; min-height:42px; }
.journey-demo button { display:block; background:transparent; border:0; text-decoration:underline; text-underline-offset:4px; padding:8px 0; min-height:40px; }
.journey-reward { position:relative; }
.journey-object { position:absolute; right:-10px; top:-30px; width:50%; height:auto; margin:0; aspect-ratio:1; object-fit:contain; }
.journey-photo { position:absolute; right:0; top:70px; width:43%; height:165px; object-fit:cover; margin:0; }
.journey-spent { clear:both; padding-top:48px; font-size:17px; line-height:1.5; }
.journey-start { font-size:12px; margin-top:10px; color:#d3dfc3; }
[data-story-mode="4"] article > blockquote { font-size:clamp(32px,3.55vw,57px); line-height:1.25; }
[data-story-mode="4"] :focus-visible { outline-color:#c7d79f; }

/* 5 — An accurate geographic index with the same complete story details. */
.atlas-layout { display:grid; grid-template-columns:minmax(0,2.25fr) minmax(0,1fr); gap:48px; }
.atlas-explore { min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.world-map { width:100%; aspect-ratio:2; position:relative; margin:36px 0 50px; }
.world-map > img { width:100%; height:100%; object-fit:contain; }
.map-point { position:absolute; width:28px; height:28px; padding:0; border:0; background:transparent; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; z-index:1; }
.map-dot { width:10px; height:10px; border:1px solid #f7f5e9; background:#19382e; border-radius:50%; display:block; flex-shrink:0; }
.map-point:hover,.map-point[aria-pressed=true],.map-point:focus-visible { z-index:3; }
.map-point[aria-pressed=true] .map-dot { background:#d86643; box-shadow:0 0 0 3px #df674955; }
.map-place { position:absolute; left:26px; top:0; padding:4px 8px; border:1px solid #de8a6e; border-radius:5px; background:#fff7e9; color:#19382e; white-space:nowrap; font-size:13px; pointer-events:none; }
.map-point.align-end .map-place { left:auto; right:26px; }
.atlas-navigation { display:flex; gap:25px; align-items:center; }
.atlas-navigation .example-people { flex:1; display:grid; grid-template-columns:repeat(6,1fr); gap:18px 15px; }
.atlas-navigation .example-stepper { flex-wrap:wrap; justify-content:center; width:155px; border-left:1px solid var(--story-line); padding-left:22px; }
.atlas-navigation .example-stepper > span { order:-1; width:100%; text-align:center; }
.atlas-detail { padding-left:38px; border-left:1px solid var(--story-line); }
.atlas-detail > * + * { margin-top:21px; padding-top:20px; border-top:1px solid var(--story-line); }
.atlas-detail .example-bio h3 { font:400 37px/1.2 Georgia,serif; }
.atlas-detail .example-habits li { font-size:16px; }
.atlas-detail .example-reward blockquote { font-size:23px; }

@media(max-width:1200px) {
  .story-shell { width:calc(100% - 64px); padding:42px 0 55px; }
  .story-review-controls { flex-direction:column; align-items:flex-start; gap:3px; padding:10px 24px; }
  .story-review-controls [role=tablist] { width:100%; }
  .stories-heading { gap:35px; }
  .stories-heading h2 { font-size:43px; }
  .featured-layout { grid-template-columns:140px minmax(0,1fr); gap:28px; }
  .featured-nav { padding-right:22px; }
  .featured-lead blockquote { font-size:43px; }
  .featured-lead figure img { height:285px; }
  .featured-facts { gap:22px; grid-template-columns:.8fr 1.2fr 1fr; }
  .featured-facts > * + * { padding-left:20px; }
  .example-habits li,.example-reward > p,.featured-facts p { font-size:15px; }
  .example-amounts strong { font-size:35px; }
  .ledger-row { grid-template-columns:1fr 1.15fr .85fr 1.35fr; gap:23px; }
  .ledger-row > * + * { padding-left:20px; }
  .ledger-row .example-bio h3 { font-size:30px; }
  .ledger-row .example-amounts strong { font-size:32px; }
  .ledger-row .example-reward blockquote { font-size:22px; }
  .reward-choice img { height:235px; }
  .gallery-details { gap:25px; }
  .gallery-details > * + * { padding-left:24px; }
  .gallery-details .example-amounts { grid-template-columns:1fr; }
  .journey-selector { align-items:flex-start; gap:20px; }
  .journey-selector .example-stepper { flex-wrap:wrap; min-width:155px; }
  .journey-stages { grid-template-columns:.75fr 1.1fr 1.15fr; gap:25px; }
  .journey-stage h4 { font-size:21px; gap:11px; }
  .journey-amount { font-size:54px; }
  .journey-checks label { gap:9px; font-size:14px; }
  .journey-object,.journey-photo { width:42%; }
  .atlas-layout { grid-template-columns:1.75fr 1fr; gap:28px; }
  .atlas-detail { padding-left:24px; }
  .atlas-navigation { flex-direction:column; align-items:stretch; }
  .atlas-navigation .example-people { grid-template-columns:repeat(4,1fr); }
  .atlas-navigation .example-stepper { width:100%; border-left:0; padding-left:0; flex-wrap:nowrap; justify-content:flex-start; }
  .atlas-navigation .example-stepper > span { order:0; width:auto; }
}
@media(max-width:760px) {
  .story-review-controls { padding:10px 14px; gap:4px; }
  .story-review-controls > span { font-size:10px; }
  .story-review-controls button { font-size:13px; padding:9px 12px; gap:7px; }
  .story-shell { width:calc(100% - 40px); padding:32px 0 44px; }
  .stories-heading { display:block; margin-bottom:30px; }
  .stories-heading h2 { font-size:36px; line-height:1.1; }
  .stories-heading p,[data-story-mode="1"] .stories-heading p { margin-top:18px; font-size:13px; line-height:1.55; padding:0; }
  .story-label { font-size:10px; margin-bottom:10px; }
  .example-bio h3 { font-size:28px; }
  .example-bio p { font-size:14px; }
  .example-habits li,.example-reward > p,.featured-facts p { font-size:15px; }
  .example-amounts strong { font-size:36px; }
  .featured-layout { display:flex; flex-direction:column; gap:25px; }
  .featured-nav { border-right:0; padding:0; gap:14px; }
  .featured-nav .example-people { display:flex; flex-direction:row; flex-wrap:nowrap; overflow:auto; gap:25px; }
  .featured-nav .example-people button { flex-shrink:0; font-size:16px; }
  .featured-nav .example-stepper { display:none; }
  .featured-nav .example-stepper > span { order:0; width:auto; }
  .mobile-example-nav {
    display:block;
    position:sticky;
    bottom:max(12px,env(safe-area-inset-bottom));
    z-index:10;
    padding:10px 12px;
    border:1px solid var(--story-line);
    border-radius:16px;
    background:var(--story-paper);
    box-shadow:0 4px 18px #19382e12;
  }
  .mobile-example-nav .example-stepper { justify-content:space-between; gap:10px; margin:0; }
  .mobile-example-nav .example-stepper > span { font-variant-numeric:tabular-nums; white-space:nowrap; }
  .featured-story { scroll-margin-bottom:100px; }
  .featured-lead { display:flex; flex-direction:column; align-items:stretch; gap:25px; }
  .featured-lead blockquote { font-size:37px; margin-bottom:23px; }
  .featured-lead .example-bio { padding:0; }
  .featured-lead figure img { height:235px; width:100%; }
  .featured-facts { grid-template-columns:1fr; margin-top:25px; gap:24px; }
  .featured-facts > * + * { border-left:0; padding-left:0; border-top:1px solid var(--story-line); padding-top:22px; }
  .featured-facts .example-amounts { grid-template-columns:1fr 1fr; gap:15px; }
  .ledger-row { grid-template-columns:1fr; gap:23px; padding:26px 0; }
  .ledger-row > * + * { border-left:0; padding-left:0; }
  .ledger-row .example-amounts { grid-template-columns:1fr 1fr; gap:15px; }
  .ledger-row .example-amounts > div + div { border:0; padding:0; }
  .ledger-row .example-reward { border-top:1px solid var(--story-line); padding-top:20px; }
  .ledger-pagination { flex-direction:column; align-items:flex-start; gap:18px; }
  .reward-gallery { gap:9px; }
  .reward-choice img { height:125px; }
  .reward-choice > span { font-size:14px; width:85%; border-width:3px; }
  [data-story-mode="3"] .example-stepper { justify-content:space-between; }
  .gallery-details { grid-template-columns:1fr; gap:25px; padding-top:25px; }
  .gallery-details > * + * { padding-left:0; border-left:0; padding-top:22px; border-top:1px solid var(--story-line); }
  .gallery-details .example-amounts { grid-template-columns:1fr 1fr; gap:15px; }
  .gallery-details .example-amounts strong { font-size:34px; }
  .gallery-details .example-reward blockquote { font-size:26px; }
  .journey-selector { flex-direction:column; gap:16px; }
  .journey-selector .example-people { flex-wrap:nowrap; overflow:auto; width:100%; gap:23px; }
  .journey-selector .example-people button { flex-shrink:0; }
  .journey-selector .example-stepper { width:100%; flex-wrap:nowrap; }
  [data-story-mode="4"] .example-bio h3 { font-size:34px; }
  [data-story-mode="4"] .example-bio p { display:block; margin:5px 0 0; font-size:10px; }
  .journey-stages { grid-template-columns:1fr; gap:32px; margin:28px 0; }
  .journey-stage + .journey-stage { border-top:1px solid var(--story-line); padding-top:28px; }
  .journey-stage h4 { margin-bottom:22px; font-size:23px; }
  .journey-stage h4 > span { width:45px; height:45px; font-size:19px; }
  .journey-amount { font-size:62px; }
  .journey-checks label { font-size:16px; min-height:44px; }
  .journey-object { position:static; float:right; width:45%; margin-top:-15px; }
  .journey-photo { position:static; float:right; width:45%; height:160px; }
  .journey-spent { padding-top:22px; }
  [data-story-mode="4"] article > blockquote { font-size:33px; }
  .atlas-layout { grid-template-columns:1fr; gap:28px; }
  .world-map { margin:12px 0 22px; }
  .map-place { font-size:10px; padding:3px 5px; }
  .map-point:not(.align-end) .map-place { left:50%; right:auto; top:22px; transform:translateX(-50%); }
  .map-point { width:20px; height:20px; }
  .map-dot { width:8px; height:8px; }
  .atlas-navigation { gap:18px; }
  .atlas-navigation .example-people { grid-template-columns:repeat(4,1fr); gap:7px 14px; }
  .atlas-navigation .example-people button { font-size:14px; }
  .atlas-navigation .example-stepper { justify-content:space-between; }
  .atlas-detail { padding:27px 0 0; border-left:0; border-top:1px solid var(--story-line); }
  .atlas-detail .example-bio h3 { font-size:32px; }
  .atlas-amount { font-size:38px; }
}
@media(prefers-reduced-motion:reduce) { .story-lab * { scroll-behavior:auto; } }

/* Gold rewards separate the center stripe; the outer habit stripes keep their hearts. */
[data-theme="landscape"] .feeling .ribbon-gold { width:18px; height:18px; object-fit:contain; flex-shrink:0; }
@media(max-width:760px) { [data-theme="landscape"] .feeling .ribbon-gold { width:15px; height:15px; } }
