.public-story-page { min-height: 100vh; background: var(--paper); }
.public-story-header .nav { justify-content: space-between; }
.story-header-note { margin-right: auto; color: var(--muted); font: italic 12px Georgia, serif; }
.public-story-nav-actions { display: flex; align-items: center; gap: 18px; }
.public-story-nav-link { min-height: 42px; display: inline-flex; align-items: center; color: var(--muted); font-size: 12px; font-weight: 750; }
.public-story-nav-link:hover { color: var(--ink); }

.public-story-main { overflow: hidden; }
.public-story-layout { display: grid; grid-template-columns: minmax(0, 760px) 300px; align-items: start; justify-content: center; gap: 48px; padding-top: 68px; padding-bottom: 92px; }
.public-story-article { min-width: 0; }
.public-story-route { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.public-story-cover { height: clamp(190px, 31vw, 340px); margin: 0 0 31px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px 12px 22px 14px; background: #283831; box-shadow: 0 18px 45px rgba(25,35,31,.12); }
.public-story-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.public-story-route a:hover { color: var(--coral-dark); }
.public-story-route strong { color: var(--coral-dark); }
.public-translation-note { display: inline-flex; margin-top: 20px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 14px 8px 14px 12px; color: var(--sage); background: var(--card); font-size: 9px; font-weight: 800; }
.public-story-intro h1 { max-width: 720px; margin: 22px 0 27px; font: 500 clamp(45px, 6vw, 72px)/1.02 Georgia, "Times New Roman", serif; letter-spacing: -2.8px; text-wrap: balance; }
.public-story-author { display: flex; align-items: center; gap: 11px; padding: 18px 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.public-story-author > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.public-story-author strong { font-size: 13px; }
.public-story-author small { color: var(--muted); font-size: 10px; }
.public-story-author time { margin-left: auto; color: var(--muted); font-size: 10px; white-space: nowrap; }

.public-story-audio { display: grid; gap: 14px; margin: 34px 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px 18px 14px 16px; background: var(--card); box-shadow: 0 10px 30px rgba(31, 41, 37, .05); }
.public-story-audio > div { display: flex; align-items: center; gap: 10px; }
.public-audio-icon { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; color: #fff; background: var(--coral); }
.public-story-audio > div > span:last-child { display: grid; gap: 2px; }
.public-story-audio strong { font: 500 16px Georgia, serif; }
.public-story-audio small { color: var(--muted); font-size: 9px; }
.public-story-audio audio { width: 100%; }
.public-story-copy { margin-top: 38px; color: var(--ink); font: 19px/1.82 Georgia, "Times New Roman", serif; }
.public-story-copy p { margin: 0 0 1.35em; }
.public-story-copy p:first-child::first-letter { float: left; margin: 8px 8px 0 0; color: var(--coral); font: 500 68px/.72 Georgia, serif; }
.public-lesson { position: relative; margin: 50px 0 42px; padding: 27px 30px 28px 33px; border-radius: 5px 18px 8px 15px; color: #eef4f0; background: #182720; box-shadow: 0 18px 40px rgba(22, 37, 31, .13); transform: rotate(-.25deg); }
.public-lesson::before { content: ""; position: absolute; top: -9px; left: 45px; width: 78px; height: 22px; opacity: .72; background: #e8d9bd; transform: rotate(-4deg); }
.public-lesson > span { color: #8fbaa0; font-size: 9px; font-weight: 850; letter-spacing: 1.2px; text-transform: uppercase; }
.public-lesson blockquote { margin: 12px 0 0; font: italic 22px/1.5 Georgia, serif; }
.public-story-end { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.public-story-end-mark { display: grid; flex: 0 0 auto; width: 37px; height: 37px; place-items: center; border-radius: 10px 7px 11px 8px; color: #fff; background: var(--ink); font: 700 18px Georgia, serif; transform: rotate(-2deg); }
.public-story-end > div { display: grid; gap: 3px; }
.public-story-end strong { font: 500 15px Georgia, serif; }
.public-story-end p { margin: 0; color: var(--muted); font-size: 10px; }

.public-story-sidebar { position: sticky; top: 110px; display: grid; gap: 14px; }
.public-share-card, .public-honesty-card, .public-opportunity-card { border: 1px solid var(--line); background: var(--card); box-shadow: 0 12px 32px rgba(28, 38, 33, .06); }
.public-share-card { padding: 24px; border-radius: 17px 11px 18px 14px; }
.public-share-card h2 { margin: 9px 0 9px; font: 500 25px/1.08 Georgia, serif; letter-spacing: -.7px; }
.public-share-card > p { margin: 0 0 18px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.public-share-card .public-native-share { width: 100%; }
.public-copy-link, .public-reddit-link { display: flex; width: 100%; min-height: 43px; align-items: center; gap: 9px; padding: 8px 11px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.public-copy-link { margin-top: 9px; }
.public-copy-link:hover, .public-reddit-link:hover { color: var(--coral-dark); }
.public-copy-link span, .public-reddit-link span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--coral-dark); background: var(--paper-deep); font-weight: 900; }
.public-share-status { min-height: 14px; margin: 10px 0 0 !important; color: var(--sage) !important; font-size: 9px !important; font-weight: 750; }
.public-honesty-card { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 20px; border-radius: 11px 17px 13px 18px; }
.public-honesty-card > span:first-child { grid-column: 1 / -1; margin-bottom: 7px; color: var(--sage); font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.public-honesty-card > strong { font: 500 38px Georgia, serif; }
.public-honesty-card > small { align-self: end; margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.public-vote-button { grid-column: 1 / -1; display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: transparent; font-size: 10px; font-weight: 850; cursor: pointer; }
.public-vote-button span { color: var(--coral); font-size: 18px; }
.public-vote-button:hover, .public-vote-button.voted { border-color: var(--coral); background: rgba(239, 107, 85, .08); }
.public-opportunity-card { padding: 22px; border-radius: 15px 12px 17px 10px; }
.public-opportunity-card > span { color: var(--coral-dark); font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.public-opportunity-card h3 { margin: 8px 0; font: 500 20px/1.15 Georgia, serif; }
.public-opportunity-card p { margin: 0 0 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.public-opportunity-card a { color: var(--sage); font-size: 10px; font-weight: 850; }

.public-story-cta { padding: 82px 0; color: #f2f5f3; background: #16241e; text-align: center; }
.public-story-cta span:first-child { color: #8eb29d; font-size: 10px; font-weight: 850; letter-spacing: 1px; text-transform: uppercase; }
.public-story-cta h2 { margin: 13px auto 10px; font: 500 clamp(37px, 5vw, 55px)/1.05 Georgia, serif; letter-spacing: -1.8px; }
.public-story-cta p { margin: 0 auto 25px; color: #aabbb2; font-size: 13px; }
.public-story-cta .public-story-how-link { margin-top:-14px; }
.public-story-cta .public-story-how-link a { color:#f2f5f3; text-decoration:underline; text-decoration-color:#f17b65; text-underline-offset:3px; }
.public-story-footer { padding: 28px 0; border-top: 1px solid var(--line); background: var(--paper-deep); }
.public-story-footer .shell { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.public-story-footer p { max-width: 530px; margin: 0; color: var(--muted); font-size: 10px; text-align: right; }

html[data-theme="night"] .public-story-header { background: rgba(14, 21, 18, .95); }
html[data-theme="night"] .public-lesson { color: #eff5f1; border: 1px solid #405148; background: #1b2a23; }
html[data-theme="night"] .public-story-end-mark { color: #101713; background: #edf3ef; }
html[data-theme="night"] .public-copy-link span,
html[data-theme="night"] .public-reddit-link span { background: #26352e; }
html[data-theme="night"] .public-story-cta { background: #0b120f; }

html[data-theme="clarity"] .public-share-card,
html[data-theme="clarity"] .public-honesty-card,
html[data-theme="clarity"] .public-opportunity-card,
html[data-theme="clarity"] .public-story-audio { border: 2px solid #000; box-shadow: none; }
html[data-theme="clarity"] .public-story-author,
html[data-theme="clarity"] .public-story-end { border-color: #000; }
html[data-theme="clarity"] .public-story-copy { font-size: 20px; }
html[data-theme="clarity"] .public-lesson { border: 3px solid #000; color: #fff; background: #000; box-shadow: none; }
html[data-theme="clarity"] .public-vote-button,
html[data-theme="clarity"] .public-copy-link,
html[data-theme="clarity"] .public-reddit-link { border-color: #000; }

@media (max-width: 960px) {
    .public-story-layout { grid-template-columns: minmax(0, 720px); }
    .public-story-sidebar { position: static; grid-template-columns: 1fr 1fr; }
    .public-share-card { grid-row: span 2; }
}

@media (max-width: 700px) {
    .public-story-header .nav { gap: 10px; }
    .story-header-note, .public-story-nav-link { display: none; }
    .public-story-nav-actions { margin-left: auto; }
    .public-story-nav-actions .btn { min-height: 39px; padding: 7px 10px; font-size: 10px; }
    .public-story-layout { gap: 34px; padding-top: 38px; padding-bottom: 58px; }
    .public-story-intro h1 { margin: 18px 0 23px; font-size: 42px; letter-spacing: -1.8px; }
    .public-story-author { align-items: flex-start; }
    .public-story-author time { font-size: 9px; }
    .public-story-copy { margin-top: 30px; font-size: 17px; line-height: 1.75; }
    .public-story-copy p:first-child::first-letter { font-size: 58px; }
    .public-lesson { margin: 42px 0 34px; padding: 25px 22px 23px; }
    .public-lesson blockquote { font-size: 19px; }
    .public-story-end { align-items: flex-start; }
    .public-story-sidebar { grid-template-columns: 1fr; }
    .public-share-card { grid-row: auto; }
    .public-share-card h2 { font-size: 27px; }
    .public-native-share, .public-copy-link, .public-reddit-link, .public-vote-button { min-height: 48px; }
    .public-story-cta { padding: 61px 0; }
    .public-story-cta h2 { font-size: 38px; }
    .public-story-cta .btn { width: 100%; }
    .public-story-footer .shell { align-items: flex-start; flex-direction: column; }
    .public-story-footer p { text-align: left; }
}

@media (max-width: 420px) {
    .public-story-intro h1 { font-size: 36px; }
    .public-story-author { flex-wrap: wrap; }
    .public-story-author time { width: 100%; margin: 4px 0 0 53px; }
}