body:has(main.story) {
    background: #f6f8f6;
}
main.story {
    --ink: #1b2b24;
    --muted: #5d6b64;
    --green: #1f6f4f;
    --serif: 'Source Serif 4', Georgia, serif;
    color: var(--ink);
    font: 400 16px/1.5 Figtree, system-ui, sans-serif;
    max-width: 808px;
    padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 24px) 80px;
    margin-inline: auto;
}
main.story h1 {
    font: 500 clamp(36px, 6vw, 58px)/1.06 var(--serif);
    letter-spacing: -.025em;
    text-wrap: balance;
}
main.story .lead {font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; color: #3d4b44}
.story .hero-photo {
    margin: clamp(40px, 6vw, 64px) max(-80px, calc((808px - 100vw) / 2)) clamp(40px, 6vw, 64px);
}
.story .hero-photo img {display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: clamp(8px, 2vw, 24px)}
.story .hero-photo figcaption {color: var(--muted); font-size: 14px; padding-inline: clamp(0px, (100vw - 808px)/2, 80px); margin-top: 10px}
.story .story-toc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid #e3e9e5;
    background: #fff;
}
.story-toc > strong {padding-bottom: 6px; color: var(--muted); font-size: 13px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase}
.story .story-toc a {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid #f0f3f1;
    color: var(--ink);
    text-decoration: none;
    line-height: 18px;
}
.story-toc a > span:first-child {color: var(--muted); font-weight: 600}
.story-toc a b {font-weight: 600}
.story-toc a small {color: var(--muted); font-size: 14px; font-weight: 500; white-space: nowrap}
.story .story-toc a:hover, .story .story-toc a:focus-visible {color: var(--green); text-decoration: underline}
.story .story-stop {display: flex; flex-direction: column; gap: 18px; margin: clamp(40px, 6vw, 64px) 0; scroll-margin-top: 90px}
.story-stop .story-meta {display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; font-weight: 600; color: var(--muted)}
.story-meta > b {width: 28px; height: 28px; display: grid; place-items: center; background: var(--ink); border-radius: 50%; color: white; font-weight: 700}
.story-meta span + span::before {content: '·'; margin-right: 10px}
.story .story-stop h2 {font: 500 clamp(26px, 3.4vw, 34px)/1.15 var(--serif); letter-spacing: -.015em; margin: 0; text-wrap: balance}
.story .story-stop > p, .story .story-intro {margin: 0; font: 400 18px/1.65 Figtree, system-ui, sans-serif; color: #2c3a33; text-wrap: pretty}
.story-tip {display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: #edf4ef}
.story-tip > svg {flex: none; width: 20px; height: 20px; color: var(--green); margin-top: 2px}
.story-tip strong {display: block; font-size: 13px; color: var(--green)}
.story-tip p {margin: 2px 0 0; font-size: 16px; line-height: 1.5}
.story .story-offer {
    display: grid;
    grid-template-columns: 46% minmax(0, 1fr);
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: white;
    border: 1px solid #e3e9e5;
    box-shadow: 0 8px 28px rgba(20,40,30,.06);
    color: var(--ink);
    text-decoration: none;
}
.story-offer:hover, .story-offer:focus-visible {box-shadow: 0 14px 40px rgba(20,40,30,.12)}
.story-offer > img {width: 100%; height: 100%; min-height: 220px; object-fit: cover}
.story-offer .story-offer-body {min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px}
.story-offer .story-offer-head {display: flex; align-items: flex-start; justify-content: space-between; gap: 12px}
.story-offer-head h3 {font: 600 24px/1.15 var(--serif); letter-spacing: -.01em; margin: 0; overflow-wrap: break-word}
.story-offer-head p {color: var(--muted); margin: 2px 0 0; font-size: 14px; line-height: 1.45}
.story-rating {display: flex; gap: 8px; align-items: center; flex: none}
.story-rating > span {display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2}
.story-rating b {font-size: 13px}
.story-rating small {font-size: 12px; font-weight: 400; color: var(--muted)}
.story-rating > strong {display: grid; place-items: center; min-width: 36px; height: 32px; padding: 0 6px; border-radius: 8px 8px 8px 2px; background: #003b95; color: white; font-size: 15px}
.story-offer ul {margin: 0; padding: 0; list-style: none; display: grid; gap: 6px}
.story-offer li {position: relative; padding-left: 24px; font-size: 15px; line-height: 1.4}
.story-offer li::before {content: '✓'; position: absolute; left: 1px; color: var(--green); font-weight: 700}
.story-offer .story-offer-foot {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #f0f3f1}
.story-offer-foot > div {display: flex; flex-direction: column; line-height: 1.25}
.story-offer-foot strong {font-size: 19px}
.story-offer-foot small {font-size: 13px; font-weight: 400; color: var(--muted)}
.story-offer .story-cta {padding: 11px 18px; border-radius: 999px; background: var(--green); color: white; font-size: 15px; font-weight: 600; white-space: nowrap}
@media (max-width: 808px) {
    .story .hero-photo {margin-inline: 0}
}
@media (max-width: 620px) {
    .story .story-offer {grid-template-columns: 1fr}
    .story-offer > img {height: 220px; min-height: 0}
    .story-offer .story-offer-body {padding: 16px}
}
.story .story-head, .story .story-intro {display: flex; flex-direction: column; gap: 20px}
.story .story-head > *, .story .story-intro > * {margin: 0}
.story .story-crumbs {display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; font-size: 14px; color: var(--muted); font-weight: 600}
.story .story-crumbs a {padding: 0; color: var(--green); text-decoration: none}
.story .story-crumbs a:hover {text-decoration: underline}
.story .story-byline {display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; line-height: 1.3}
.story-byline > b {width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font: 600 15px var(--serif)}
.story-byline > span {display: grid}
.story-byline small {font-size: 14px; color: var(--muted); font-weight: 400}
.story .story-intro p {font-size: 18px; line-height: 1.65; color: #2c3a33}
.story .story-intro .story-toc {font: 400 16px/1.3 Figtree, system-ui, sans-serif}
.story .story-end {display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px; border-radius: 24px; background: var(--ink); color: white; margin-bottom: 0}
.story .story-end h2 {margin: 0; font: 500 clamp(26px, 3.4vw, 32px)/1.15 var(--serif); color: white}
.story .story-end p {margin: 0; font-size: 17px; line-height: 1.55; color: #d6e3db}
.story .story-end a {display: inline-flex; color: var(--ink); background: white; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 600}
.story-offer-foot > small {flex-basis: 100%}