/* ============================================
   Devotional Music — long-form article skin
   Shared by every song article in the series.
   Brief: "an old music book, lovingly restored
   for the digital age." Ivory & sandalwood,
   deep maroon, muted temple gold, restrained
   saffron. No glossy deity art, no neon, no
   clip-art, no giant Om.
   ============================================ */

:root {
    --ivory: #faf6ee;
    --sandalwood: #f0e7d6;
    --sandal-deep: #e5d8c0;
    --paper-line: #e0d3ba;
    --ink: #241c15;
    --ink-soft: #5d4b3a;
    --ink-faint: #8a7963;

    --maroon: #7d2b2b;
    --maroon-deep: #5d1c1c;
    --maroon-pale: #f4e6e3;
    --gold: #a8801f;
    --gold-soft: #c9a544;
    --gold-pale: #f9f1da;
    --saffron: #c96a1b;

    --rule: #d9c9ad;
    --rule-soft: #e8dcc6;

    --f-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --f-body: 'Spectral', 'Source Serif 4', Georgia, serif;
    --f-te: 'Noto Serif Telugu', 'Noto Sans Telugu', sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

    --measure: 34rem;
    --wide: 52rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 18px; }

body {
    font-family: var(--f-body);
    color: var(--ink);
    background: var(--ivory);
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
}

/* Paper feel comes from the ivory/sandalwood palette alone.
   A full-page ruled overlay was tried and removed: at body-text sizes it
   banded across the prose and cost more in readability than it returned. */

a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--maroon-deep); }

/* ── Top bar ── */
.top-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 20px; background: var(--maroon-deep); color: #f3e6d4;
    font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em;
}
.top-bar a { color: #f3e6d4; text-decoration: none; }
.top-bar a:hover { color: var(--gold-soft); }
.top-bar .tb-te { font-family: var(--f-te); font-size: 13.5px; opacity: .9; }

.progress-bar {
    position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 100;
    background: linear-gradient(90deg, var(--gold), var(--maroon));
    transition: width .1s linear;
}

/* ── Breadcrumb ── */
.crumb {
    max-width: var(--wide); margin: 0 auto; padding: 18px 20px 0;
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-soft);
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--maroon); }
.crumb .sep { opacity: .45; }
.crumb .here { color: var(--maroon); }

/* ── Masthead ── */
.masthead {
    max-width: var(--wide); margin: 0 auto; padding: 26px 20px 34px; text-align: center;
}
.mast-motif { margin: 0 auto 18px; display: block; }
.mast-kicker {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .24em;
    text-transform: uppercase; color: var(--maroon); margin-bottom: 14px;
}
.mast-title {
    font-family: var(--f-display); font-size: clamp(38px, 8vw, 74px);
    font-weight: 600; line-height: 1.02; letter-spacing: -.015em;
}
.mast-title-te {
    font-family: var(--f-te); font-size: clamp(20px, 4vw, 30px);
    color: var(--maroon); margin-top: 12px; font-weight: 500;
}
.mast-standfirst {
    font-family: var(--f-display); font-size: clamp(18px, 2.8vw, 24px);
    font-style: italic; color: var(--ink-soft); line-height: 1.5;
    margin: 20px auto 0; max-width: 30rem;
}
.mast-rule {
    width: 90px; height: 1px; background: var(--gold); margin: 26px auto 0;
    position: relative;
}
.mast-rule::before, .mast-rule::after {
    content: ''; position: absolute; top: -2px; width: 5px; height: 5px;
    border-radius: 50%; background: var(--gold);
}
.mast-rule::before { left: -9px; } .mast-rule::after { right: -9px; }
.mast-byline {
    font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ink-soft); margin-top: 20px;
}

/* ── Layout ── */
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 20px 90px; }
.measure { max-width: var(--measure); margin-inline: auto; }

/* ── Part headers ── */
.part {
    margin-top: 74px; padding-top: 30px; border-top: 1px solid var(--rule);
    scroll-margin-top: 20px;
}
.part:first-of-type { margin-top: 46px; }
.part-num {
    font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.part-title {
    font-family: var(--f-display); font-size: clamp(28px, 5vw, 42px);
    font-weight: 600; line-height: 1.12; letter-spacing: -.012em;
}
.part-title-te {
    font-family: var(--f-te); font-size: .5em; color: var(--maroon);
    font-weight: 500; display: block; margin-top: 6px;
}
.part-lead {
    font-family: var(--f-display); font-size: clamp(17px, 2.4vw, 21px);
    font-style: italic; color: var(--ink-soft); margin-top: 12px; line-height: 1.55;
}

h3.sub {
    font-family: var(--f-display); font-size: clamp(21px, 3vw, 27px);
    font-weight: 600; margin: 38px 0 12px; line-height: 1.2;
}
h4.subsub {
    font-family: var(--f-mono); font-size: 11px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--maroon); margin: 30px 0 12px;
}

p { margin-bottom: 1.15em; font-size: 17.5px; }
p.lede { font-size: 20px; line-height: 1.65; }
p:last-child { margin-bottom: 0; }
em { font-style: italic; }
strong { font-weight: 600; }
.te-inline { font-family: var(--f-te); font-size: 1.05em; }
.tr-inline { font-family: var(--f-mono); font-size: .92em; color: #3c3a70; }

ul.body-list, ol.body-list { margin: 0 0 1.2em 1.3em; }
ul.body-list li, ol.body-list li { margin-bottom: .5em; font-size: 17.5px; }

/* ── At-a-glance card ── */
.glance {
    background: var(--sandalwood);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 0; margin: 34px 0 10px;
    box-shadow: 0 1px 0 #fff inset, 0 2px 14px rgba(36,28,21,.06);
}
.glance-head {
    padding: 20px 24px 16px; text-align: center;
    border-bottom: 1px solid var(--rule);
    background: linear-gradient(180deg, var(--gold-pale), transparent);
}
.glance-head .gh-te { font-family: var(--f-te); font-size: 23px; color: var(--maroon); font-weight: 600; }
.glance-head .gh-title { font-family: var(--f-display); font-size: 27px; font-weight: 600; margin-top: 4px; }
.glance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.g-cell {
    padding: 13px 22px; border-bottom: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft);
}
.g-key {
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 3px;
}
.g-val { font-size: 16.5px; line-height: 1.4; }
.g-val .te { font-family: var(--f-te); font-size: .9em; line-height: 1.3; }
.glance-foot {
    padding: 15px 22px; font-size: 15px; line-height: 1.6; color: var(--ink-soft);
    background: var(--gold-pale); border-top: 1px solid var(--rule);
}
.glance-foot strong { color: var(--ink); }

/* ── Verse presentation ── */
.verse {
    margin: 34px 0; border-left: 2px solid var(--gold);
    padding-left: 22px;
}
.verse-label {
    font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em;
    text-transform: uppercase; color: var(--maroon); margin-bottom: 14px;
}
.v-te {
    font-family: var(--f-te); font-size: clamp(21px, 3.4vw, 27px);
    line-height: 1.95; color: var(--ink); font-weight: 500;
}
.v-tr {
    font-family: var(--f-mono); font-size: 14.5px; line-height: 1.95;
    color: #3c3a70; margin-top: 14px;
}
.v-en {
    font-family: var(--f-display); font-size: 20px; font-style: italic;
    line-height: 1.6; margin-top: 18px; padding-left: 16px;
    border-left: 2px solid var(--rule); color: var(--ink);
}

/* Word-by-word table */
.wbw { width: 100%; border-collapse: collapse; margin: 20px 0 8px; font-size: 16px; }
.wbw caption {
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-soft);
    text-align: left; padding-bottom: 8px;
}
.wbw th {
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft); text-align: left;
    padding: 6px 10px; border-bottom: 1px solid var(--rule);
}
.wbw td { padding: 8px 10px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.wbw td.w-te { font-family: var(--f-te); font-size: 17px; white-space: nowrap; color: var(--maroon); }
.wbw td.w-tr { font-family: var(--f-mono); font-size: 13.5px; color: #3c3a70; white-space: nowrap; }
.wbw tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; margin: 20px 0; }

/* ── Commentary block ── */
.commentary {
    background: #fff; border: 1px solid var(--rule-soft);
    border-radius: 3px; padding: 22px 24px; margin: 26px 0;
}
.commentary h5 {
    font-family: var(--f-display); font-size: 21px; font-weight: 600;
    margin-bottom: 9px; line-height: 1.25;
}
.commentary p { font-size: 17px; }
.commentary p:last-child { margin-bottom: 0; }

/* ── Pull quote ── */
.pull {
    margin: 42px auto; max-width: 30rem; text-align: center;
    font-family: var(--f-display); font-size: clamp(23px, 4vw, 32px);
    font-style: italic; line-height: 1.35; color: var(--maroon);
}
.pull .attrib {
    display: block; font-family: var(--f-mono); font-size: 10.5px;
    letter-spacing: .15em; text-transform: uppercase; font-style: normal;
    color: var(--ink-soft); margin-top: 16px;
}
.pull-te { font-family: var(--f-te); font-style: normal; }

/* ── Three-level (esoteric) ── */
.levels { display: grid; gap: 14px; margin: 28px 0; }
.level {
    border: 1px solid var(--rule); border-left: 3px solid var(--maroon);
    background: #fff; border-radius: 3px; padding: 19px 22px;
}
.level:nth-child(2) { border-left-color: var(--gold); }
.level:nth-child(3) { border-left-color: var(--saffron); }
.level-key {
    font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px;
}
.level-name { font-family: var(--f-display); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
.level-name .lv-te { font-family: var(--f-te); font-size: .74em; color: var(--maroon); margin-left: 6px; }

/* ── Arc / movement diagram ── */
.arc {
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
    margin: 30px 0; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden;
    background: #fff;
}
.arc-step { flex: 1 1 130px; padding: 16px 14px; text-align: center; border-right: 1px solid var(--rule-soft); }
.arc-step:last-child { border-right: none; }
.arc-step .as-te { font-family: var(--f-te); font-size: 19px; color: var(--maroon); font-weight: 600; }
.arc-step .as-tr { font-family: var(--f-mono); font-size: 12px; margin-top: 3px; letter-spacing: .05em; }
.arc-step .as-en { font-size: 14px; color: var(--ink-soft); margin-top: 5px; line-height: 1.4; }

/* ── Raga scale block ── */
.raga-box {
    background: var(--sandalwood); border: 1px solid var(--rule);
    border-radius: 3px; padding: 22px 24px; margin: 28px 0;
}
.raga-box-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.raga-box-head .rb-name { font-family: var(--f-display); font-size: 28px; font-weight: 600; }
.raga-box-head .rb-te { font-family: var(--f-te); font-size: 21px; color: var(--maroon); font-weight: 600; }
.rb-class { font-family: var(--f-mono); font-size: 11px; letter-spacing: .07em; color: var(--ink-soft); margin-bottom: 16px; }
.rb-row { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap; }
.rb-row:last-child { border-bottom: none; }
.rb-key {
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-soft); min-width: 118px; padding-top: 4px;
}
.rb-val { flex: 1; min-width: 190px; font-size: 16px; }
.swara {
    font-family: var(--f-mono); font-size: 15px; font-weight: 600;
    color: #3c3a70; letter-spacing: .08em;
}
.anya { color: var(--saffron); font-weight: 700; }

/* ── Comparison table ── */
.cmp { width: 100%; border-collapse: collapse; font-size: 16px; margin: 8px 0; }
.cmp th {
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft); text-align: left;
    padding: 9px 12px; border-bottom: 1px solid var(--rule); background: var(--sandalwood);
}
.cmp td { padding: 11px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; line-height: 1.55; }
.cmp tr:last-child td { border-bottom: none; }
.cmp .c-raga { font-weight: 600; color: var(--maroon); white-space: nowrap; }

/* ── Listening cues ── */
.cue {
    display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule-soft);
}
.cue:last-child { border-bottom: none; }
.cue-mark {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--maroon-pale); border: 1px solid #e5cec9;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--maroon);
}
.cue-body h5 { font-family: var(--f-display); font-size: 20px; font-weight: 600; margin-bottom: 5px; }
.cue-body h5 .cue-te { font-family: var(--f-te); font-size: .78em; color: var(--maroon); }
.cue-body p { font-size: 16.5px; margin-bottom: 0; }

/* ── Research note ── */
.research {
    background: var(--gold-pale); border: 1px solid #e3d3a4;
    border-left: 3px solid var(--gold); border-radius: 3px;
    padding: 20px 23px; margin: 30px 0; font-size: 16px; line-height: 1.68;
}
.research .r-label {
    display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: #79600f; margin-bottom: 9px;
}
.research p { font-size: 16px; }
.research ul { margin: .6em 0 .6em 1.2em; }
.research li { margin-bottom: .4em; font-size: 16px; }

/* ── Listening room ── */
.room-card {
    border: 1px solid var(--rule); background: #fff; border-radius: 3px;
    padding: 18px 21px; margin-bottom: 13px;
}
.room-card h5 { font-family: var(--f-display); font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.room-tag {
    font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;
}
.room-card p { font-size: 16.5px; margin-bottom: 0; }

/* ── Next-listen grid ── */
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 13px; margin: 24px 0; }
.next-card {
    border: 1px solid var(--rule); border-radius: 3px; padding: 17px 19px;
    background: #fff; text-decoration: none; color: inherit; display: block;
    transition: border-color .15s, transform .15s;
}
.next-card:hover { border-color: var(--maroon); transform: translateY(-2px); }
.next-card .n-te { font-family: var(--f-te); font-size: 18px; color: var(--maroon); font-weight: 600; }
.next-card .n-title { font-family: var(--f-display); font-size: 19px; font-weight: 600; margin-top: 3px; }
.next-card .n-raga { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .09em; color: var(--ink-soft); margin-top: 5px; }
.next-card .n-why { font-size: 15.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.5; }

/* ── Reflection ── */
.reflection {
    margin: 70px 0 0; padding: 40px 30px; text-align: center;
    background: var(--sandalwood); border-top: 2px solid var(--gold); border-radius: 3px;
}
.reflection .rf-label {
    font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em;
    text-transform: uppercase; color: var(--maroon); margin-bottom: 18px;
}
.reflection p {
    font-family: var(--f-display); font-size: clamp(19px, 2.8vw, 23px);
    line-height: 1.6; max-width: 30rem; margin-inline: auto;
}
.reflection .rf-final {
    font-size: clamp(24px, 4.4vw, 34px); font-style: italic; color: var(--maroon);
    margin-top: 26px;
}
.reflection .rf-te { font-family: var(--f-te); font-style: normal; display: block; font-size: .8em; margin-top: 8px; }

/* ── Sources ── */
.sources { margin-top: 30px; }
.sources li { font-size: 15px; padding: 7px 0; border-bottom: 1px dotted var(--rule-soft); list-style: none; }
.sources a { color: #3c3a70; }

/* ── Footer ── */
.site-footer {
    text-align: center; padding: 50px 20px 64px; margin-top: 60px;
    background: var(--sandalwood); border-top: 1px solid var(--rule);
}
.foot-motif { margin: 0 auto 14px; display: block; }
.site-footer .f-main { font-family: var(--f-display); font-size: 21px; font-style: italic; color: var(--maroon); }
.footer-note {
    font-size: 13.5px; color: var(--ink-soft); margin-top: 13px;
    max-width: 40rem; margin-inline: auto; line-height: 1.6;
}

/* ── Scroll buttons ── */
.scroll-buttons { position: fixed; right: 16px; bottom: 20px; display: flex; flex-direction: column; gap: 7px; z-index: 60; }
.scroll-btn {
    width: 34px; height: 34px; border-radius: 50%; background: var(--maroon);
    color: #fff; border: none; cursor: pointer; font-size: 12px;
    box-shadow: 0 3px 10px rgba(36,28,21,.2);
}
.scroll-btn:hover { background: var(--maroon-deep); }

/* ── Motif SVG defaults ── */
.motif { display: block; }
.motif .ln { fill: none; stroke: var(--maroon); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.motif .ln-g { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; }
.motif .fl { fill: var(--maroon); }
.motif .fl-g { fill: var(--gold); }
.motif .fl-soft { fill: var(--sandal-deep); }

/* ── Responsive ── */
@media (max-width: 640px) {
    html { font-size: 17px; }
    .verse { padding-left: 15px; }
    .rb-key { min-width: 100%; }
    .g-cell { border-right: none; }
    .reflection { padding: 30px 18px; }
    .top-bar { font-size: 10.5px; padding: 8px 13px; }
    .top-bar .tb-te { display: none; }
}

/* ── Print ── */
@media print {
    .top-bar, .progress-bar, .scroll-buttons, .crumb { display: none !important; }
    body { background: #fff; }
    .part, .verse, .commentary, .level, .cue, .room-card, .glance { break-inside: avoid; }
    .part { border-top: 1px solid #bbb; }
    a { color: #000; text-decoration: none; }
}