/* =========================================================================
   STOICISM — page-scoped theme + module styles
   Theme: warm marble + oxblood + aged bronze + Aegean blue
   Origin: Greek classical, weathered stone, philosopher's blood
   ========================================================================= */

body.page-stoicism {
    --c-bg:        #EFE7D2;
    --c-bg-alt:    #E5DBC1;
    --c-paper:     #F8F1DC;
    --c-line:      #C9BEA1;
    --c-ink:       #1F1B17;
    --c-ink-soft:  #3D362C;
    --c-mute:      #6B5E48;
    /* Concept palette */
    --st-blood:    #6B2B1E;   /* deep oxblood — primary */
    --st-blood-soft: #8E4536;
    --st-bronze:   #8B6F47;   /* aged bronze */
    --st-olive:    #6B7B3D;
    --st-aegean:   #4F6E80;   /* weathered Aegean blue */
    --st-gold-leaf:#B89B6E;
    --st-marble:   #F8F1DC;
    /* Override gold to oxblood for buttons/accents on this page */
    --c-gold:      var(--st-blood);
    --c-gold-soft: var(--st-blood-soft);
    --f-data:      'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}
[data-theme="dark"] body.page-stoicism {
    --c-bg:        #16120E;
    --c-bg-alt:    #1F1A14;
    --c-paper:     #251E16;
    --c-line:      #3A2F23;
    --c-ink:       #F0EBDD;
    --c-ink-soft:  #C8C2B0;
    --c-mute:      #A09784;
    --st-blood:    #9C4537;
    --st-blood-soft: #B96655;
}
body.page-stoicism em { color: var(--st-blood); font-style: italic; }
body.page-stoicism .st-data { font-family: var(--f-data); letter-spacing: 0.02em; }

/* Marble texture overlay — barely there */
body.page-stoicism::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0.06 0'/></filter><rect width='240' height='240' filter='url(%23m)'/></svg>");
    background-size: 240px 240px;
    mix-blend-mode: multiply;
}
[data-theme="dark"] body.page-stoicism::after { mix-blend-mode: screen; opacity: 0.18; }

/* Shared ----------------------------------------------------------------- */
.st-section { padding: var(--s-8) 0; position: relative; z-index: 2; }
.st-section-head { text-align: center; margin-bottom: var(--s-7); max-width: 760px; margin-left: auto; margin-right: auto; }
.st-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-mute);
    margin: 0 0 var(--s-3);
    font-family: var(--f-data);
}
.st-h2 {
    font-family: var(--f-serif);
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.18;
    margin: 0 0 var(--s-3);
    letter-spacing: -0.012em;
    color: var(--c-ink);
}
.st-h2 em { font-style: italic; color: var(--st-blood); }
.st-sub { color: var(--c-ink-soft); font-size: 1.02rem; line-height: 1.65; margin: 0; }
.st-sub b { color: var(--c-ink); font-weight: 600; }
.st-sub em { font-style: italic; color: var(--st-blood); }

/* -------------------------------------------------------------------------
   1. HERO — column + laurel
   ------------------------------------------------------------------------- */
.st-hero {
    padding: var(--s-9) 0 var(--s-8);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(107,43,30,0.08), transparent 70%),
        var(--c-bg);
    z-index: 2;
}
.st-hero-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.st-column {
    width: clamp(180px, 26vw, 280px);
    height: auto;
    color: var(--c-ink);
    opacity: 0.18;
    animation: stColumnFade 1.6s ease-out;
}
[data-theme="dark"] body.page-stoicism .st-column { opacity: 0.3; }
@keyframes stColumnFade { from { opacity: 0; } to { opacity: 0.18; } }

.st-laurel {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    width: 60px;
    height: 200px;
    color: var(--st-bronze);
    opacity: 0.4;
    animation: stLaurelSway 8s ease-in-out infinite alternate;
}
@keyframes stLaurelSway {
    0%   { transform: translateY(-50%) rotate(-3deg); }
    100% { transform: translateY(-50%) rotate(3deg); }
}
@media (max-width: 720px) { .st-laurel { display: none; } }

.st-crack {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: stCrackDraw 2.4s 0.5s ease-out forwards;
}
@keyframes stCrackDraw { to { stroke-dashoffset: 0; } }

.st-hero-content { position: relative; z-index: 1; max-width: 920px; margin: 0 auto; }
.st-hero-title {
    font-family: var(--f-serif);
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -0.018em;
    margin: 0 0 var(--s-5);
    color: var(--c-ink);
}
.st-hero-line-1 { display: block; }
.st-hero-title em { display: block; font-style: italic; color: var(--st-blood); }
.st-hero-line-3 { display: block; font-size: 0.7em; color: var(--c-ink-soft); }
.st-hero-sub {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    color: var(--c-ink-soft);
    max-width: 760px;
    margin: 0 auto var(--s-4);
}
.st-hero-promise {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--st-blood);
    border-left: 2px solid var(--st-blood);
    padding-left: var(--s-4);
    margin: 0 auto var(--s-6);
    max-width: 600px;
    text-align: left;
}
.st-hero-cta { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   2. DICHOTOMY OF CONTROL — sorter
   ------------------------------------------------------------------------- */
.st-dichotomy { background: var(--c-bg-alt); }

.st-dichotomy-input {
    max-width: 640px;
    margin: 0 auto var(--s-6);
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: var(--s-5);
}
.st-dichotomy-input label { font-size: 0.82rem; color: var(--c-ink-soft); margin-bottom: 6px; display: block; font-weight: 600; }
.st-input-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); }
.st-input-row input { padding: 0.7rem 0.95rem; }
.st-input-hint { color: var(--c-mute); font-size: 0.82rem; margin: var(--s-2) 0 0; font-style: italic; }

.st-dichotomy-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-3);
    margin-top: var(--s-5);
}
@media (max-width: 920px) { .st-dichotomy-cols { grid-template-columns: 1fr; } }

.st-dich-col {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: var(--s-4);
}
.st-dich-in       { border-top: 3px solid var(--st-olive); }
.st-dich-out      { border-top: 3px solid var(--c-mute); }
.st-dich-pending  { border-top: 3px solid var(--st-blood); }
.st-dich-col h3 {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 1.1rem;
    margin: 0 0 4px;
    color: var(--c-ink);
}
.st-dich-explain { font-size: 0.78rem; color: var(--c-mute); margin: 0 0 var(--s-3); font-style: italic; }
.st-dich-list { list-style: none; padding: 0; margin: 0; min-height: 60px; display: flex; flex-direction: column; gap: 6px; }
.st-dich-list li {
    background: var(--c-bg-alt);
    border: 1px solid var(--c-line);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.92rem;
    line-height: 1.45;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: center;
}
.st-dich-list .st-dich-text { color: var(--c-ink); }
.st-dich-action {
    background: transparent;
    border: 1px solid var(--c-line);
    color: var(--c-mute);
    padding: 3px 8px;
    border-radius: var(--r-pill);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast);
    line-height: 1;
}
.st-dich-action.is-in:hover { border-color: var(--st-olive); color: var(--st-olive); }
.st-dich-action.is-out:hover { border-color: var(--st-blood); color: var(--st-blood); }
.st-dich-action.is-back:hover { border-color: var(--st-bronze); color: var(--st-bronze); }

.st-dichotomy-result {
    text-align: center;
    margin-top: var(--s-6);
    padding: var(--s-5) var(--s-5);
    background: var(--c-paper);
    border: 1px solid var(--st-blood);
    border-radius: 12px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.st-dich-result-tag {
    font-family: var(--f-data);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.7rem;
    color: var(--st-blood);
    margin: 0 0 var(--s-3);
    font-weight: 700;
}
.st-dich-result-line { font-family: var(--f-serif); font-size: 1.3rem; color: var(--c-ink); margin: 0 0 var(--s-2); }
.st-dich-num { color: var(--st-olive); font-weight: 700; font-size: 1.6rem; font-family: var(--f-data); }
.st-dich-num-out { color: var(--c-mute); }
.st-dich-result-prompt { font-family: var(--f-serif); font-style: italic; color: var(--c-ink-soft); margin: 0 0 var(--s-4); }

/* -------------------------------------------------------------------------
   3. MEMENTO MORI — week grid
   ------------------------------------------------------------------------- */
.st-memento-form {
    max-width: 480px;
    margin: 0 auto var(--s-5);
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: var(--s-5);
    text-align: center;
}
.st-memento-form label { display: block; font-size: 0.82rem; color: var(--c-ink-soft); margin-bottom: 6px; font-weight: 600; }
.st-memento-form input { margin-bottom: var(--s-3); text-align: center; font-size: 1rem; }
.st-memento-readout {
    text-align: center;
    margin: 0 0 var(--s-4);
    font-family: var(--f-serif);
    color: var(--c-ink);
    font-size: 1.05rem;
}
.st-memento-readout span { color: var(--st-blood); font-weight: 700; }

.st-memento-grid {
    display: grid;
    grid-template-columns: repeat(52, 1fr);
    gap: 2px;
    max-width: 800px;
    margin: var(--s-5) auto;
    padding: var(--s-4);
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
}
.st-memento-week {
    aspect-ratio: 1;
    background: var(--c-bg-alt);
    border-radius: 1.5px;
    transition: background-color 0.2s ease;
}
.st-memento-week.is-lived { background: var(--st-blood); }
.st-memento-week.is-current { background: var(--st-gold-leaf); }
@media (max-width: 720px) {
    .st-memento-grid { grid-template-columns: repeat(40, 1fr); }
}

.st-memento-note {
    text-align: center;
    color: var(--c-mute);
    font-style: italic;
    font-family: var(--f-serif);
    margin: var(--s-3) auto 0;
    max-width: 600px;
}
.st-memento-note em { color: var(--st-blood); }

/* -------------------------------------------------------------------------
   4. VIEW FROM ABOVE
   ------------------------------------------------------------------------- */
.st-view-above { background: var(--c-bg-alt); text-align: center; }
.st-view-stage { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.st-view-zoom {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
}
.st-view-zoom.is-on { display: flex; }
.st-view-stage-label {
    font-family: var(--f-data);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--c-mute);
    margin: 0;
}
.st-view-svg {
    width: clamp(220px, 50vw, 400px);
    aspect-ratio: 1;
    color: var(--st-aegean);
}
#stViewDot { transition: r 1.2s cubic-bezier(.2,.8,.2,1), opacity 1.2s ease; }
.st-view-prompt {
    font-family: var(--f-serif);
    font-style: italic;
    color: var(--c-ink);
    font-size: 1.15rem;
    max-width: 480px;
    margin: 0;
    line-height: 1.55;
    transition: opacity 0.4s ease;
}
.st-view-end {
    background: transparent;
    border: 1px solid var(--st-olive);
    color: var(--st-olive);
    padding: 6px 14px;
    border-radius: var(--r-pill);
    font-size: 0.85rem;
    cursor: pointer;
    margin-top: var(--s-3);
    transition: all var(--t-fast);
}
.st-view-end:hover { background: var(--st-olive); color: var(--c-bg); }

/* -------------------------------------------------------------------------
   5. FOUR CARDINAL VIRTUES
   ------------------------------------------------------------------------- */
.st-virtues-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    max-width: 920px;
    margin: 0 auto;
}
@media (max-width: 720px) { .st-virtues-form { grid-template-columns: 1fr; } }
.st-virtues-form button[type="submit"] { grid-column: 1 / -1; justify-self: center; min-width: 260px; }
.st-virtues-form .form-feedback { grid-column: 1 / -1; text-align: center; }

.st-virtue {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--st-bronze);
    border-radius: 12px;
    padding: var(--s-4) var(--s-5);
}
.st-virtue h3 { font-family: var(--f-serif); font-size: 1.2rem; margin: 0 0 6px; color: var(--c-ink); }
.st-virtue h3 em { color: var(--st-blood); font-style: italic; font-size: 0.9rem; letter-spacing: 0.04em; }
.st-virtue p { font-size: 0.9rem; line-height: 1.55; color: var(--c-ink-soft); margin: 0 0 var(--s-3); }
.st-virtue-slider { display: grid; grid-template-columns: 1fr 50px; align-items: center; gap: var(--s-3); }
.st-virtue-slider output { text-align: right; font-size: 1.4rem; color: var(--st-blood); font-weight: 600; }

.st-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 4px;
    background: var(--c-line);
    border-radius: 2px;
    outline: none; cursor: pointer;
}
.st-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--st-blood);
    border: 3px solid var(--c-paper);
    box-shadow: 0 2px 8px rgba(107,43,30,0.4);
    cursor: grab;
}
.st-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--st-blood); border: 3px solid var(--c-paper);
    cursor: grab;
}

/* -------------------------------------------------------------------------
   6. PREMEDITATIO MALORUM
   ------------------------------------------------------------------------- */
.st-premed { background: var(--c-bg-alt); }
.st-premed-form {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.st-premed-form label { font-size: 0.82rem; color: var(--c-ink-soft); display: flex; flex-direction: column; gap: 4px; font-weight: 600; }

/* -------------------------------------------------------------------------
   7. VOLUNTARY DISCOMFORT
   ------------------------------------------------------------------------- */
.st-discomfort-stage {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-5);
    align-items: start;
}
@media (max-width: 920px) { .st-discomfort-stage { grid-template-columns: 1fr; } }
.st-discomfort-form, .st-discomfort-summary {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: var(--s-5);
}
.st-discomfort-form h3, .st-discomfort-summary h3 {
    font-family: var(--f-serif);
    font-style: italic;
    color: var(--st-blood);
    font-size: 1.15rem;
    margin: 0 0 var(--s-3);
}
.st-discomfort-summary h4 { font-family: var(--f-data); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--c-mute); margin: var(--s-4) 0 var(--s-2); font-weight: 700; }
.st-discomfort-stat { margin: 4px 0; font-size: 0.95rem; color: var(--c-ink-soft); }
.st-discomfort-stat span { font-size: 1.6rem; color: var(--st-blood); font-weight: 600; margin-right: 6px; font-family: var(--f-data); }
.st-discomfort-summary ul { list-style: none; padding: 0; margin: 0; }
.st-discomfort-summary li { padding: var(--s-2) 0; border-bottom: 1px dashed var(--c-line); font-size: 0.88rem; color: var(--c-ink-soft); }
.st-discomfort-summary li:last-child { border-bottom: none; }
.st-discomfort-summary li b { color: var(--c-ink); }
.st-discomfort-summary li em { color: var(--c-mute); font-style: italic; font-size: 0.82rem; }
.st-empty { color: var(--c-mute); font-style: italic; }

/* -------------------------------------------------------------------------
   8. JOURNAL
   ------------------------------------------------------------------------- */
.st-journal-form {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 12px;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.st-journal-form label { font-size: 0.82rem; color: var(--c-ink-soft); display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-family: var(--f-serif); font-style: italic; }
.st-journal-recent { margin-top: var(--s-6); }
.st-journal-recent h3 { font-family: var(--f-data); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--c-mute); margin: 0 0 var(--s-3); font-weight: 700; }
.st-journal-recent ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.st-journal-recent li {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--st-blood);
    border-radius: 8px;
    padding: var(--s-3) var(--s-4);
}
.st-journal-date { font-family: var(--f-serif); font-style: italic; color: var(--st-blood); font-size: 1.05rem; margin: 0 0 var(--s-2); }
.st-journal-line { font-size: 0.9rem; color: var(--c-ink-soft); margin: 4px 0; line-height: 1.45; }
.st-journal-line b { color: var(--c-ink); font-weight: 600; }

/* -------------------------------------------------------------------------
   9. VOICES OF THE DEAD — quote shuffler
   ------------------------------------------------------------------------- */
.st-voices { background: var(--c-bg-alt); }
.st-quote-card {
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: 14px;
    padding: var(--s-7) var(--s-6) var(--s-5);
    box-shadow: 0 18px 40px -22px rgba(0,0,0,0.18);
    text-align: center;
    position: relative;
    transition: opacity 320ms ease;
}
.st-quote-card.is-fading { opacity: 0.3; }
.st-quote-mark {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 6rem;
    line-height: 0.5;
    color: var(--st-blood);
    opacity: 0.25;
    margin: 0;
    user-select: none;
}
.st-quote-text {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.45;
    color: var(--c-ink);
    margin: 0 0 var(--s-5);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.st-quote-cite {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--s-5);
}
.st-quote-author {
    font-family: var(--f-serif);
    font-size: 1.1rem;
    color: var(--st-blood);
    font-weight: 600;
    letter-spacing: 0.04em;
    font-variant: small-caps;
}
.st-quote-source { font-family: var(--f-data); font-size: 0.78rem; color: var(--c-mute); letter-spacing: 0.06em; }
.st-quote-actions { display: flex; justify-content: center; gap: var(--s-3); flex-wrap: wrap; }
.st-quote-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--c-line);
    color: var(--c-mute);
    padding: 0.55rem 1rem;
    border-radius: var(--r-pill);
    cursor: pointer;
    font-size: 0.88rem;
    transition: all var(--t-fast);
}
.st-quote-fav:hover { border-color: var(--st-blood); color: var(--st-blood); }
.st-quote-fav.is-on { background: var(--st-blood); color: var(--c-bg); border-color: var(--st-blood); }
.st-quote-fav.is-on svg { fill: currentColor; }

/* -------------------------------------------------------------------------
   FINAL
   ------------------------------------------------------------------------- */
.st-final {
    background:
        radial-gradient(ellipse at 50% 50%, rgba(107,43,30,0.08), transparent 70%),
        var(--c-bg);
    text-align: center;
    padding: var(--s-9) 0;
}
.st-final-mark { font-size: 3.6rem; color: var(--st-blood); margin: 0 0 var(--s-4); line-height: 1; opacity: 0.55; }
.st-final-quote { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.4; color: var(--c-ink); max-width: 740px; margin: 0 auto var(--s-2); }
.st-final-cite { font-family: var(--f-data); font-size: 0.85rem; color: var(--c-mute); margin: 0 0 var(--s-6); letter-spacing: 0.16em; }