/* ============================================================
   WABI-SABI — concept (Presence · Japan)
   Theme: sage (#7A8471) · kintsugi gold (#B8860B) · clay (#9C7A5B) ·
   aged paper (#F2EEE5) · sumi ink (#2B2A26)
   Dark-mode-safe variable remap.
   ============================================================ */

.page-wabi-sabi {
    --ws-paper:    #F2EEE5;
    --ws-paper-2:  #E7E0D2;
    --ws-sage:     #7A8471;
    --ws-sage-d:   #5C6555;
    --ws-gold:     #B8860B;
    --ws-gold-l:   #C9A24A;
    --ws-clay:     #9C7A5B;
    --ws-clay-d:   #7A5C42;
    --ws-ink:      #2B2A26;
    --ws-mute:     #6F6857;

    --c-gold:   var(--ws-gold);
    --c-bg:     var(--ws-paper);
    --c-ink:    var(--ws-ink);
    --c-mute:   var(--ws-mute);
    --c-accent: var(--ws-sage);

    background: var(--ws-paper);
    color: var(--ws-ink);
}

[data-theme="dark"] .page-wabi-sabi,
[data-theme="dark"].page-wabi-sabi {
    --ws-paper:    #14140F;
    --ws-paper-2:  #1B1A15;
    --ws-ink:      #E8E2D2;
    --ws-mute:     #ABA38E;
    --ws-sage:     #9DAA91;
    --ws-sage-d:   #B6C0AB;
    --ws-gold:     #D2A857;
    --ws-gold-l:   #E0BC74;
    --ws-clay:     #C09A78;
    --ws-clay-d:   #D4B190;
    --c-bg:        #14140F;
    --c-ink:       #E8E2D2;
    --c-mute:      #ABA38E;
    background: #14140F;
    color: #E8E2D2;
}

/* shared ----------------------------- */
.ws-section { padding: var(--s-10, 4rem) 0; position: relative; }
.ws-section-head { max-width: 820px; margin: 0 auto var(--s-7, 2.5rem); text-align: center; }
.ws-eyebrow {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ws-clay-d);
    margin-bottom: var(--s-3, 0.75rem);
}
.ws-h2 {
    font-family: var(--f-serif, serif);
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    line-height: 1.22;
    color: var(--ws-ink);
    margin-bottom: var(--s-4, 1rem);
    font-weight: 600;
}
.ws-h2 em { font-style: italic; color: var(--ws-clay-d); font-weight: 500; }
.ws-sub {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ws-mute);
    max-width: 70ch;
    margin: 0 auto;
}
.ws-sub em { color: var(--ws-sage-d); font-style: italic; }
.ws-sub b  { color: var(--ws-ink); }
.ws-data {
    font-family: var(--f-mono, monospace);
    font-feature-settings: "tnum";
    letter-spacing: 0.01em;
}

.ws-field { display: block; margin-bottom: var(--s-3, 0.75rem); }
.ws-field-label {
    display: block;
    font-size: 0.92rem;
    color: var(--ws-ink);
    font-weight: 500;
    margin-bottom: 4px;
}
.ws-hint-inline { font-weight: 400; color: var(--ws-mute); font-size: 0.84em; font-style: italic; }
.ws-input-text,
.ws-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(122, 132, 113, 0.4);
    border-radius: 4px;
    background: var(--ws-paper);
    color: var(--ws-ink);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
.ws-textarea { resize: vertical; line-height: 1.55; font-family: var(--f-serif, serif); font-size: 1.05rem; }
.ws-input-text:focus, .ws-textarea:focus { outline: none; border-color: var(--ws-sage); }
[data-theme="dark"] .ws-input-text,
[data-theme="dark"] .ws-textarea { background: #0E0E0A; color: #E8E2D2; }

.ws-slider {
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    background: rgba(122, 132, 113, 0.28);
}
.ws-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ws-sage);
    border: 2px solid var(--ws-paper);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.ws-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--ws-sage);
    border: 2px solid var(--ws-paper);
    cursor: pointer;
}
.ws-slider-wrap { display: flex; align-items: center; gap: var(--s-2, 0.5rem); }
.ws-range-out {
    flex: 0 0 28px;
    text-align: right;
    font-family: var(--f-mono, monospace);
    color: var(--ws-clay-d);
    font-weight: 600;
}

/* result blocks shared */
.ws-result-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ws-clay-d);
    margin-bottom: var(--s-2, 0.5rem);
}
.ws-result-synth {
    font-family: var(--f-serif, serif);
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--ws-ink);
    max-width: 62ch;
    margin: 0 auto;
}

/* fade-up shared */
.page-wabi-sabi .fade-up {
    opacity: 0; transform: translateY(16px);
    animation: wsFadeUp 0.8s ease-out forwards;
}
.page-wabi-sabi .fade-up.delay-1 { animation-delay: 0.12s; }
.page-wabi-sabi .fade-up.delay-2 { animation-delay: 0.26s; }
.page-wabi-sabi .fade-up.delay-3 { animation-delay: 0.40s; }
.page-wabi-sabi .fade-up.delay-4 { animation-delay: 0.54s; }
@keyframes wsFadeUp { to { opacity: 1; transform: translateY(0); } }

/* shared form shell */
.ws-truths-form, .ws-imp-form, .ws-kin-form, .ws-aware-form,
.ws-sabi-form, .ws-ma-form, .ws-letgo-form {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--ws-paper);
    border: 1px solid rgba(122, 132, 113, 0.35);
    padding: var(--s-5, 1.25rem);
    border-radius: 4px;
}
[data-theme="dark"] .ws-truths-form, [data-theme="dark"] .ws-imp-form,
[data-theme="dark"] .ws-kin-form, [data-theme="dark"] .ws-aware-form,
[data-theme="dark"] .ws-sabi-form, [data-theme="dark"] .ws-ma-form,
[data-theme="dark"] .ws-letgo-form { background: #17160F; }

/* ============================================================
   1. HERO
   ============================================================ */
.ws-hero {
    position: relative;
    min-height: 80vh;
    padding: var(--s-12, 5rem) 0 var(--s-10, 4rem);
    background: linear-gradient(180deg, var(--ws-paper) 0%, var(--ws-paper-2) 100%);
    overflow: hidden;
}
[data-theme="dark"] .ws-hero { background: linear-gradient(180deg, #14140F 0%, #1B1A15 100%); }
.ws-hero-canvas { position: absolute; inset: 0; pointer-events: none; }
.ws-kanji {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--f-serif, serif);
    font-size: clamp(160px, 30vw, 380px);
    color: var(--ws-sage);
    opacity: 0.07;
    line-height: 1;
    font-weight: 700;
    user-select: none;
    letter-spacing: -0.04em;
}
[data-theme="dark"] .ws-kanji { opacity: 0.12; }
.ws-bowl {
    position: absolute;
    left: 2%;
    bottom: 8%;
    width: clamp(220px, 30vw, 400px);
    opacity: 0.5;
}
.ws-hero-content { position: relative; z-index: 1; max-width: 720px; }
.ws-hero-title {
    font-family: var(--f-serif, serif);
    font-size: clamp(2.4rem, 5.4vw, 4.2rem);
    line-height: 1.08;
    color: var(--ws-ink);
    margin: var(--s-4, 1rem) 0;
    font-weight: 600;
}
.ws-hero-title span, .ws-hero-title em { display: block; }
.ws-hero-title em {
    font-style: italic;
    color: var(--ws-clay-d);
    font-weight: 500;
}
.ws-hero-line-2 { padding-left: 0.6em; }
.ws-hero-title em { padding-left: 1.2em; }
.ws-hero-sub, .ws-hero-promise {
    font-size: 1.08rem;
    line-height: 1.78;
    color: var(--ws-mute);
    margin-bottom: var(--s-4, 1rem);
    max-width: 62ch;
}
.ws-hero-sub b { color: var(--ws-ink); font-weight: 600; }
.ws-hero-sub em, .ws-hero-promise em { color: var(--ws-sage-d); font-style: italic; }
.ws-hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3, 0.75rem); margin-top: var(--s-6, 1.5rem); }

/* ============================================================
   2. THE THREE TRUTHS
   ============================================================ */
.ws-truths { background: var(--ws-paper); }
.ws-truth-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--s-4, 1rem);
    align-items: center;
    padding: var(--s-4, 1rem) 0;
    border-bottom: 1px dashed rgba(122, 132, 113, 0.3);
}
.ws-truth-row:last-of-type { border-bottom: none; }
@media (max-width: 640px) { .ws-truth-row { grid-template-columns: 1fr; } }
.ws-truth-label { text-align: center; }
.ws-truth-han {
    font-family: var(--f-serif, serif);
    font-size: 2.4rem;
    color: var(--ws-sage-d);
    line-height: 1;
    margin-bottom: 4px;
}
.ws-truth-name { font-family: var(--f-serif, serif); font-size: 1.05rem; color: var(--ws-ink); font-weight: 600; }
.ws-truth-name em { color: var(--ws-mute); font-style: italic; font-weight: 400; font-size: 0.8em; display: block; }
.ws-truth-q { display: block; font-size: 0.94rem; color: var(--ws-mute); margin-bottom: var(--s-2, 0.5rem); line-height: 1.5; }
.ws-truths-result {
    max-width: 800px;
    margin: var(--s-5, 1.25rem) auto 0;
    padding: var(--s-5, 1.25rem);
    background: var(--ws-paper-2);
    border-left: 3px solid var(--ws-gold);
    border-radius: 4px;
    text-align: center;
}
[data-theme="dark"] .ws-truths-result { background: #1B1A15; }

/* ============================================================
   3. IMPERFECTION INVENTORY
   ============================================================ */
.ws-imperfection { background: var(--ws-paper-2); }
[data-theme="dark"] .ws-imperfection { background: #1B1A15; }
.ws-imp-list { display: flex; flex-direction: column; gap: var(--s-3, 0.75rem); margin-bottom: var(--s-3, 0.75rem); }
.ws-imp-row {
    display: grid;
    grid-template-columns: 1fr 28px 1fr;
    gap: var(--s-2, 0.5rem);
    align-items: center;
}
@media (max-width: 700px) { .ws-imp-row { grid-template-columns: 1fr; } .ws-imp-arrow { display: none; } }
.ws-imp-arrow { text-align: center; color: var(--ws-clay); font-weight: 700; }
.ws-input-good { background: var(--ws-paper-2); border-left: 3px solid var(--ws-sage); }
[data-theme="dark"] .ws-input-good { background: #14130E; }

/* ============================================================
   4. KINTSUGI
   ============================================================ */
.ws-kintsugi { background: var(--ws-paper); }
.ws-kin-q {
    font-family: var(--f-mono, monospace);
    font-size: 0.84rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ws-clay-d);
    margin: var(--s-3, 0.75rem) 0 var(--s-2, 0.5rem);
}
.ws-kin-options { display: flex; flex-wrap: wrap; gap: var(--s-2, 0.5rem); margin-bottom: var(--s-4, 1rem); }
.ws-kin-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 0.9rem;
    background: var(--ws-paper-2);
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.9rem;
    color: var(--ws-ink);
}
[data-theme="dark"] .ws-kin-opt { background: #14130E; }
.ws-kin-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ws-kin-mark {
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid var(--ws-mute);
    background: var(--ws-paper);
    position: relative;
}
.ws-kin-opt input:checked ~ .ws-kin-mark { border-color: var(--ws-gold); }
.ws-kin-opt input:checked ~ .ws-kin-mark::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 5px; height: 5px; background: var(--ws-gold); border-radius: 50%;
}
.ws-kin-opt:has(input:checked) { background: rgba(184, 134, 11, 0.12); border-color: var(--ws-gold); }
.ws-kin-result {
    max-width: 800px;
    margin: var(--s-5, 1.25rem) auto 0;
    padding: var(--s-5, 1.25rem);
    background: var(--ws-paper-2);
    border-left: 3px solid var(--ws-gold);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .ws-kin-result { background: #1B1A15; }
.ws-kin-result::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--ws-gold-l), var(--ws-gold), var(--ws-clay));
}

/* ============================================================
   5. MONO NO AWARE
   ============================================================ */
.ws-aware { background: var(--ws-paper-2); }
[data-theme="dark"] .ws-aware { background: #1B1A15; }
.ws-aware-bar {
    display: flex; align-items: center; gap: var(--s-3, 0.75rem);
    flex-wrap: wrap; margin-top: var(--s-3, 0.75rem);
}
.ws-aware-streak {
    font-family: var(--f-mono, monospace);
    font-size: 0.92rem;
    color: var(--ws-sage-d);
    font-weight: 500;
}
.ws-aware-recent { max-width: 1000px; margin: var(--s-5, 1.25rem) auto 0; }
.ws-aware-recent h3 {
    font-family: var(--f-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ws-clay-d);
    margin-bottom: var(--s-3, 0.75rem);
    text-align: center;
}
.ws-aware-recent ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2, 0.5rem); }
.ws-aware-recent li {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3, 0.75rem);
    background: var(--ws-paper);
    border-left: 2px solid var(--ws-sage);
    padding: var(--s-2, 0.5rem) var(--s-3, 0.75rem);
    border-radius: 0 4px 4px 0;
}
[data-theme="dark"] .ws-aware-recent li { background: #14130E; }
.ws-aware-text { font-family: var(--f-serif, serif); font-style: italic; color: var(--ws-ink); font-size: 1rem; line-height: 1.5; }
.ws-aware-date { font-family: var(--f-mono, monospace); font-size: 0.76rem; color: var(--ws-mute); white-space: nowrap; }

/* ============================================================
   6. SABI
   ============================================================ */
.ws-sabi { background: var(--ws-paper); }

/* ============================================================
   7. MA — space audit
   ============================================================ */
.ws-ma { background: var(--ws-paper-2); }
[data-theme="dark"] .ws-ma { background: #1B1A15; }
.ws-ma-grid { display: flex; flex-direction: column; gap: var(--s-3, 0.75rem); margin-bottom: var(--s-3, 0.75rem); }
.ws-ma-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--s-3, 0.75rem);
    align-items: center;
}
@media (max-width: 640px) { .ws-ma-row { grid-template-columns: 1fr; } }
.ws-ma-label { font-family: var(--f-serif, serif); font-size: 1.05rem; color: var(--ws-ink); }
.ws-ma-track { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-2, 0.5rem); }
.ws-ma-end {
    font-family: var(--f-mono, monospace);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ws-mute);
}
.ws-ma-slider::-webkit-slider-thumb { background: var(--ws-clay); }
.ws-ma-slider::-moz-range-thumb { background: var(--ws-clay); }
.ws-ma-result {
    max-width: 800px;
    margin: var(--s-5, 1.25rem) auto 0;
    padding: var(--s-5, 1.25rem);
    background: var(--ws-paper);
    border-left: 3px solid var(--ws-sage);
    border-radius: 4px;
    text-align: center;
}
[data-theme="dark"] .ws-ma-result { background: #17160F; }
.ws-ma-worst {
    font-family: var(--f-serif, serif);
    font-size: 1.6rem;
    color: var(--ws-clay-d);
    text-align: center;
    margin: var(--s-2, 0.5rem) 0;
    font-style: italic;
}

/* ============================================================
   8. THE IMPERMANENCE SIT
   ============================================================ */
.ws-sit { background: var(--ws-paper); }
.ws-sit-card {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4, 1rem);
    background: var(--ws-paper-2);
    border: 1px solid rgba(122, 132, 113, 0.35);
    border-radius: 4px;
    padding: var(--s-5, 1.25rem);
}
[data-theme="dark"] .ws-sit-card { background: #1B1A15; }
@media (max-width: 600px) { .ws-sit-card { grid-template-columns: 1fr; } }
.ws-sit-timer, .ws-sit-stats { text-align: center; padding: var(--s-3, 0.75rem); }
.ws-timer-tag, .ws-sit-tag {
    font-family: var(--f-mono, monospace);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ws-clay-d);
    margin-bottom: var(--s-2, 0.5rem);
}
.ws-timer-display {
    font-family: var(--f-mono, monospace);
    font-size: 4rem;
    color: var(--ws-ink);
    font-weight: 600;
    line-height: 1;
    margin-bottom: var(--s-3, 0.75rem);
    font-feature-settings: "tnum";
    transition: color 0.4s;
}
.ws-timer-display.is-running { color: var(--ws-sage-d); }
.ws-sit-num {
    font-family: var(--f-mono, monospace);
    font-size: 3rem;
    color: var(--ws-sage-d);
    font-weight: 600;
    line-height: 1;
    margin-bottom: var(--s-2, 0.5rem);
}
.ws-sit-unit { font-size: 1rem; color: var(--ws-mute); font-weight: 400; }
.ws-sit-sub { font-size: 0.92rem; color: var(--ws-mute); margin-bottom: var(--s-3, 0.75rem); }

/* ============================================================
   9. LETTING-GO
   ============================================================ */
.ws-letgo { background: var(--ws-paper-2); }
[data-theme="dark"] .ws-letgo { background: #1B1A15; }
.ws-letgo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--s-2, 0.5rem);
    margin-bottom: var(--s-3, 0.75rem);
}
.ws-letgo-card {
    display: flex;
    align-items: center;
    gap: var(--s-2, 0.5rem);
    padding: var(--s-3, 0.75rem);
    background: var(--ws-paper);
    border: 1px solid rgba(122, 132, 113, 0.28);
    border-left: 3px solid var(--ws-clay);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
[data-theme="dark"] .ws-letgo-card { background: #14130E; }
.ws-letgo-card:hover { transform: translateY(-1px); }
.ws-letgo-card input { position: absolute; opacity: 0; pointer-events: none; }
.ws-letgo-mark {
    flex: 0 0 14px; width: 14px; height: 14px;
    border: 2px solid var(--ws-mute);
    border-radius: 50%;
    background: var(--ws-paper);
    position: relative;
}
[data-theme="dark"] .ws-letgo-mark { background: #0E0E0A; }
.ws-letgo-card input:checked ~ .ws-letgo-mark { border-color: var(--ws-gold); }
.ws-letgo-card input:checked ~ .ws-letgo-mark::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 6px; height: 6px; background: var(--ws-gold); border-radius: 50%;
}
.ws-letgo-card:has(input:checked), .ws-letgo-card.is-active {
    background: rgba(184, 134, 11, 0.08);
    border-color: var(--ws-gold);
    border-left-color: var(--ws-gold);
}
[data-theme="dark"] .ws-letgo-card:has(input:checked),
[data-theme="dark"] .ws-letgo-card.is-active { background: rgba(210, 168, 87, 0.12); }
.ws-letgo-body { display: flex; flex-direction: column; gap: 2px; font-size: 0.92rem; line-height: 1.4; }
.ws-letgo-from { color: var(--ws-mute); }
.ws-letgo-arrow { color: var(--ws-gold); font-weight: 700; }
.ws-letgo-to { color: var(--ws-sage-d); font-weight: 600; font-family: var(--f-serif, serif); font-style: italic; }
.ws-letgo-tracker {
    max-width: 1000px;
    margin: var(--s-5, 1.25rem) auto 0;
    text-align: center;
    padding: var(--s-4, 1rem);
    background: var(--ws-paper);
    border: 1px solid rgba(122, 132, 113, 0.35);
    border-radius: 4px;
}
[data-theme="dark"] .ws-letgo-tracker { background: #17160F; }
.ws-letgo-streak {
    margin-top: var(--s-3, 0.75rem);
    font-family: var(--f-mono, monospace);
    font-size: 0.96rem;
    color: var(--ws-clay-d);
    font-weight: 500;
}

/* ============================================================
   10. VOICES — own palette (deep clay + gold)
   ============================================================ */
.ws-voices {
    background: linear-gradient(180deg, #3C3A30 0%, #2A281F 100%);
    color: #EDE6D4;
}
.ws-voices .ws-h2 { color: #EDE6D4; }
.ws-voices .ws-h2 em { color: var(--ws-gold-l); }
.ws-voices .ws-eyebrow { color: var(--ws-gold-l); }
.ws-voices .ws-sub { color: rgba(237, 230, 212, 0.78); }
.ws-voices .ws-sub em { color: var(--ws-gold-l); }
.ws-quote-card {
    background: rgba(237, 230, 212, 0.05);
    border: 1px solid rgba(201, 162, 74, 0.3);
    padding: var(--s-7, 2.5rem) var(--s-6, 1.5rem);
    border-radius: 4px;
    text-align: center;
    position: relative;
}
.ws-quote-mark {
    font-family: var(--f-serif, serif);
    font-size: 5rem;
    color: var(--ws-gold-l);
    line-height: 1;
    margin-bottom: var(--s-2, 0.5rem);
    opacity: 0.7;
}
.ws-quote-text {
    font-family: var(--f-serif, serif);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    line-height: 1.55;
    color: #EDE6D4;
    margin-bottom: var(--s-4, 1rem);
    font-style: italic;
    font-weight: 400;
}
.ws-quote-cite { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s-4, 1rem); }
.ws-quote-author {
    font-family: var(--f-mono, monospace);
    font-size: 0.92rem;
    color: var(--ws-gold-l);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.ws-quote-source { font-size: 0.84rem; color: rgba(237, 230, 212, 0.55); font-style: italic; }
.ws-quote-actions { display: flex; justify-content: center; gap: var(--s-3, 0.75rem); flex-wrap: wrap; }
.ws-quote-fav {
    background: transparent;
    border: 1px solid rgba(201, 162, 74, 0.4);
    color: #EDE6D4;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    transition: all 0.15s;
}
.ws-quote-fav:hover { border-color: var(--ws-gold-l); color: var(--ws-gold-l); }
.ws-quote-fav.is-favorited { background: var(--ws-gold-l); color: #2A281F; border-color: var(--ws-gold-l); }

/* ============================================================
   11. FINAL
   ============================================================ */
.ws-final { background: var(--ws-paper); text-align: center; padding: var(--s-12, 5rem) 0; }
.ws-final-mark {
    font-family: var(--f-serif, serif);
    font-size: 4.5rem;
    color: var(--ws-sage-d);
    line-height: 1;
    margin-bottom: var(--s-4, 1rem);
    opacity: 0.85;
    letter-spacing: -0.04em;
}
.ws-final-quote {
    font-family: var(--f-serif, serif);
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    line-height: 1.45;
    color: var(--ws-ink);
    font-style: italic;
    max-width: 820px;
    margin: 0 auto var(--s-3, 0.75rem);
    font-weight: 500;
}
.ws-final-quote em { color: var(--ws-clay-d); font-style: italic; }
.ws-final-cite {
    font-family: var(--f-mono, monospace);
    font-size: 0.92rem;
    color: var(--ws-mute);
    letter-spacing: 0.08em;
    margin-bottom: var(--s-5, 1.25rem);
}