/* ==========================================================
   Taezo case-study + exchange pages — shared stylesheet
   Loaded by /case-studies/marla/ and /case-studies/marla/<exchange>/
   Design tokens kept in sync with /index.html (homepage).
   ========================================================== */

:root {
    color-scheme: light dark;

    --bg:       #F7F3EC;
    --surface:  #FFFAF2;
    --text:     #222426;
    --body:     #151719;
    --muted:    #6F6B64;
    --line:     #D8D0C4;
    --signal:   #A83E32;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:       #171819;
        --surface:  #202224;
        --text:     #EEE8DD;
        --body:     #FFF7EA;
        --muted:    #B8AFA4;
        --line:     #3A3A38;
        --signal:   #A83E32;
    }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

main {
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
}

.container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) {
    .container { padding: 1.5rem 2.5rem; }
    body { font-size: 15px; }
}

@media (min-width: 1024px) {
    .container { padding: 1.5rem 3.5rem; }
}

/* ==========================================================
   Header (matches homepage)
   ========================================================== */
header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 1.25rem;
}

.logo { display: flex; align-items: flex-start; gap: 0.375rem; }

.wordmark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--text);
    font-weight: 400;
}

.tagline {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.42em;
    color: var(--text);
}

@media (min-width: 640px) {
    .wordmark { font-size: 3.75rem; }
    .tagline { font-size: 0.75rem; }
}

.mark { margin-top: -0.25rem; color: var(--text); flex-shrink: 0; }
.mark .signal { fill: var(--signal); }

.hamburger {
    margin-top: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--signal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 200ms ease;
    flex-shrink: 0;
}
.hamburger:hover { opacity: 0.7; }

.hamburger-bars { display: flex; flex-direction: column; gap: 0.375rem; }
.hamburger-bars span {
    display: block;
    height: 1px;
    width: 1.25rem;
    background: var(--text);
}

.menu-panel {
    position: absolute;
    right: 0;
    top: 4rem;
    z-index: 10;
    width: 18rem;
    max-width: calc(100vw - 3rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: none;
}
.menu-panel[data-open="true"] { display: block; }

.menu-panel ul { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.menu-panel a {
    font-size: 1rem;
    letter-spacing: 0.025em;
    color: var(--text);
    transition: opacity 200ms ease;
}
.menu-panel a:hover { opacity: 0.7; }
.menu-panel a.signal { color: var(--signal); }

.rule {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--signal);
    border: 0;
    margin: 0;
}

/* ==========================================================
   Page content — shared
   ========================================================== */
section.copy {
    padding-top: 1.4rem;
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) { section.copy { padding-top: 1.6rem; } }
@media (min-width: 1024px) { section.copy { padding-top: 1.9rem; } }

.headline {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.2rem;
    line-height: 1.15;
    letter-spacing: -0.022em;
    font-weight: 400;
    color: var(--text);
    max-width: 48rem;
}

@media (min-width: 640px) { .headline { font-size: 2.7rem; } }
@media (min-width: 1024px) { .headline { font-size: 3.1rem; } }

.subtitle {
    margin-top: 0.55rem;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--body);
    max-width: 32rem;
}

@media (min-width: 640px) { .subtitle { font-size: 1.15rem; } }

/* Breadcrumb (exchange pages) — italic, muted, low visual weight */
.breadcrumb {
    margin-top: 1.4rem;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--muted);
    transition: opacity 200ms ease;
}
.breadcrumb:hover { opacity: 0.7; color: var(--signal); }

/* Section heading — Georgia, smaller than headline, sits close to body */
.section-h {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.45rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 0.65rem;
    max-width: 32rem;
}

@media (min-width: 640px) { .section-h { font-size: 1.65rem; } }

/* Body copy block */
.body {
    max-width: 28rem;
    color: var(--body);
    line-height: 1.72;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.body p { margin: 0; }

@media (min-width: 640px) { .body { font-size: 0.9375rem; } }

/* Section block (heading + body) */
.block {
    display: flex;
    flex-direction: column;
    margin-top: 2.5rem;
}

@media (min-width: 640px) { .block { margin-top: 2.9rem; } }

/* Lead paragraph (top of case study, after headline + subtitle) */
.lead {
    margin-top: 2.5rem;
    max-width: 28rem;
    color: var(--body);
    line-height: 1.72;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.lead p { margin: 0; }

@media (min-width: 640px) {
    .lead { font-size: 0.9375rem; margin-top: 2.9rem; }
}

/* ==========================================================
   Exchange "card" links on case study page
   ========================================================== */
.exchange-card {
    display: block;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    transition: opacity 200ms ease;
}
.exchange-card:last-of-type { border-bottom: 1px solid var(--line); }
.exchange-card:hover { opacity: 0.75; }

.exchange-card .label {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--text);
}

.exchange-card .descriptor {
    font-style: italic;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.exchange-card .frame {
    margin-top: 0.5rem;
    color: var(--body);
    line-height: 1.65;
    max-width: 28rem;
}

.exchange-card .read-cta {
    margin-top: 0.55rem;
    color: var(--signal);
    font-size: 0.95rem;
}

@media (min-width: 640px) {
    .exchange-card .label { font-size: 1.3rem; }
    .exchange-card { padding: 1.2rem 0; }
}

/* ==========================================================
   Exchange dialog (User: / Marla:)
   ========================================================== */
.exchange-dialog {
    margin: 2rem 0;
    max-width: 32rem;
    color: var(--body);
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (min-width: 640px) { .exchange-dialog { font-size: 0.95rem; } }

.turn-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--signal);
    margin-bottom: 0.45rem;
}

.turn .turn-body { display: flex; flex-direction: column; gap: 0.7rem; }
.turn .turn-body p { margin: 0; }

/* Marla's turn gets a left signal rule for visual distinction */
.turn--marla {
    padding-left: 0.85rem;
    border-left: 2px solid var(--signal);
}

.turn--user {
    padding-left: 0.85rem;
    border-left: 2px solid var(--line);
}

/* Editorial rules above and below the dialog */
.dialog-rule {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

/* "What this demonstrates" reflection paragraph (italic, muted) */
.reflection {
    margin: 2rem 0;
    font-style: italic;
    color: var(--body);
    line-height: 1.7;
    max-width: 32rem;
}

/* ==========================================================
   "How we built her to hold" — bolded principle blocks
   ========================================================== */
.principle {
    margin-top: 1.2rem;
    max-width: 28rem;
    line-height: 1.72;
    color: var(--body);
}
.principle:first-of-type { margin-top: 0; }
.principle b { color: var(--text); }

@media (min-width: 640px) { .principle { font-size: 0.9375rem; } }

/* Closing italic + CTAs */
.closing-italic {
    margin-top: 3rem;
    font-style: italic;
    line-height: 1.65;
    color: var(--body);
    max-width: 28rem;
}

.cta-row {
    margin-top: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cta-row a { color: var(--signal); transition: opacity 200ms ease; }
.cta-row a:hover { opacity: 0.7; }
.cta-row a.muted { color: var(--muted); }
.cta-row a.muted:hover { color: var(--signal); opacity: 1; }

@media (min-width: 640px) {
    .cta-row {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
        max-width: 32rem;
    }
}

/* ==========================================================
   Footer nav block on exchange pages — list of other exchanges
   ========================================================== */
.exchange-footer {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.exchange-footer .back-link {
    display: inline-block;
    color: var(--signal);
    margin-bottom: 1.75rem;
    transition: opacity 200ms ease;
}
.exchange-footer .back-link:hover { opacity: 0.7; }

.exchange-footer .other-h {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.95rem;
    color: var(--muted);
    margin-bottom: 0.85rem;
    font-style: italic;
}

.other-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 32rem;
}

.other-list a {
    display: block;
    padding: 0.6rem 0;
    border-top: 1px solid var(--line);
    transition: opacity 200ms ease;
}
.other-list a:hover { opacity: 0.75; }
.other-list li:last-child a { border-bottom: 1px solid var(--line); }

.other-list .label {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    color: var(--text);
}

.other-list .descriptor {
    font-style: italic;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}