/* MyTh — shared styles for the index (myth.html) and the per-entry pages
   (myth-0NN.html). Extracted from myth.html so one edit reaches every page. */

.my-hero { padding: 160px 0 0; }
.my-hero h1 { font-size: 4.2rem; margin-bottom: 1.6rem; }
.my-hero .lead { margin-bottom: 0; }
@media (max-width: 1024px) { .my-hero h1 { font-size: 2.9rem; } }

/* The wordmark: MyTh, with the two capitals doing the explaining. */
.my-mark { font-weight: 900; letter-spacing: -2px; }
.my-mark em { font-style: normal; color: var(--text-muted); font-weight: 700; }

.my-about {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem; margin: 2.5rem 0 3.5rem;
}
.my-about div {
    padding: 1.4rem 1.6rem; border-radius: 18px;
    background: rgba(255,255,255,.025); border: 1px solid var(--glass-border);
}
.my-about h2 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: 2px;
    color: #818cf8; margin: 0 0 .5rem; font-weight: 800;
}
.my-about p { font-size: .98rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

/* Toolbar above the list */
.my-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem;
    padding-bottom: 1rem; border-bottom: 1px solid var(--glass-border);
}
.my-count { color: var(--text-muted); font-size: .92rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
/* The RSS pill is a link, not a button: kill the default underline. */
.my-bar .filter-pill { text-decoration: none; }
.my-bar .filter-pill:hover { color: #fff; border-color: rgba(129,140,248,.38); }

/* ---------- The MyTh entry ---------- */
.myth {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--glass-border);
    border-radius: 24px; margin-bottom: 1.5rem;
    scroll-margin-top: 130px;
    transition: border-color .4s, background .4s;
}
.myth:hover { border-color: rgba(129,140,248,.38); background: rgba(255,255,255,.04); }
.myth::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent-liquid);
    transform: scaleY(0); transform-origin: top;
    transition: transform .5s cubic-bezier(.16,.8,.3,1);
}
.myth:hover::before, .myth:focus-visible::before { transform: scaleY(1); }

.myth-card {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 1.6rem; align-items: start;
    padding: 2rem 2.4rem;
    text-decoration: none; color: inherit;
}
.myth-card:focus-visible { outline: 2px solid #818cf8; outline-offset: -4px; border-radius: 24px; }

.myth-no {
    font-size: 1.55rem; font-weight: 900; letter-spacing: -1px;
    background: var(--accent-liquid);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    line-height: 1.1; padding-top: .15rem; white-space: nowrap;
}
.myth-no small { display: block; font-size: .62rem; letter-spacing: 2px; -webkit-text-fill-color: var(--text-muted); font-weight: 800; }

.myth-head h3 { font-size: 1.6rem; margin: 0 0 .55rem; letter-spacing: -.6px; line-height: 1.25; }
.myth-dek { color: var(--text-muted); font-size: 1.02rem; line-height: 1.55; margin: 0 0 .9rem; max-width: 62ch; }
.myth-meta { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.myth-meta .tag { margin: 0; font-size: .78rem; padding: 4px 12px; }
.myth-date { color: var(--text-muted); font-size: .82rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }

.myth-chev {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.5rem; font-weight: 300;
    color: #a5b4fc; background: rgba(99,102,241,.12); border: 1px solid var(--glass-border);
    transition: transform .35s cubic-bezier(.16,.8,.3,1), background .3s;
}
.myth-card:hover .myth-chev { transform: translateX(4px); background: rgba(99,102,241,.25); }

.myth-body { padding: 0 2.4rem 2.6rem; border-top: 1px solid var(--glass-border); padding-top: 2.2rem; }
/* On a standalone entry page the body is the page, not a drawer inside a card. */
.myth-article .myth-body { padding: 0; border-top: 0; }
.myth-body > p { color: #cbd5e1; margin-bottom: 1.35rem; font-size: 1.12rem; line-height: 1.75; }
.myth-body h4 {
    font-size: 1.32rem; font-weight: 800; letter-spacing: -.4px;
    margin: 2.8rem 0 1.1rem; color: #fff;
}
.myth-body h4::before {
    content: attr(data-n); color: #818cf8; font-size: .82rem;
    font-weight: 800; letter-spacing: 2px; display: block; margin-bottom: .35rem;
}
.myth-body ul { margin: 0 0 1.4rem 1.3rem; }
.myth-body li { color: #cbd5e1; margin-bottom: .6rem; font-size: 1.08rem; line-height: 1.7; }
.myth-body strong { color: #fff; }
.myth-body a { color: #a5b4fc; }

/* Inline citation markers */
.cit {
    font-size: .68em; font-weight: 800; vertical-align: super; line-height: 0;
    text-decoration: none; color: #a5b4fc; padding: 0 1px;
    border-bottom: none;
}
.cit:hover, .cit:focus { color: #fff; }
.cit::before { content: '['; }
.cit::after { content: ']'; }

/* Key-numbers strip inside an entry */
.myth-figs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem; margin: 2rem 0 2.4rem;
}
.myth-fig {
    padding: 1.3rem 1.4rem; border-radius: 16px;
    background: rgba(99,102,241,.07); border: 1px solid rgba(129,140,248,.22);
}
.myth-fig b {
    display: block; font-size: 2.4rem; font-weight: 900; letter-spacing: -1.5px; line-height: 1.1;
    background: var(--accent-liquid);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
/* Direct child only: the counter <span> lives inside the <b> above and must
   keep the display size and gradient fill, not the label styling. */
.myth-fig > span { display: block; color: var(--text-muted); font-size: .88rem; font-weight: 600; line-height: 1.4; margin-top: .3rem; max-width: none; }
.myth-fig b span { font: inherit; color: inherit; }

/* Roster tables inside an entry. The wrapper scrolls, never the page. */
.myth-tw {
    overflow-x: auto; margin: 1.6rem 0 2.4rem;
    border: 1px solid var(--glass-border); border-radius: 18px;
    background: rgba(255,255,255,.02);
}
.myth-table { width: 100%; border-collapse: collapse; min-width: 700px; font-size: .96rem; }
.myth-table caption {
    text-align: left; padding: 1.2rem 1.4rem .2rem;
    color: #818cf8; font-weight: 800; font-size: .74rem;
    letter-spacing: 2.2px; text-transform: uppercase;
}
.myth-table th, .myth-table td {
    text-align: left; padding: .85rem 1.4rem; vertical-align: top;
    border-top: 1px solid var(--glass-border);
}
.myth-table thead th {
    color: var(--text-muted); font-size: .7rem; letter-spacing: 1.6px;
    text-transform: uppercase; font-weight: 800; background: rgba(99,102,241,.07);
}
.myth-table tbody th { color: #fff; font-weight: 700; }
.myth-table td { color: #cbd5e1; line-height: 1.55; }
.myth-table tbody tr:hover td, .myth-table tbody tr:hover th { background: rgba(255,255,255,.03); }
.myth-table .role {
    display: block; margin-top: .3rem; font-weight: 600;
    color: var(--text-muted); font-size: .82rem; letter-spacing: .2px;
}

.myth-pull {
    margin: 2.2rem 0; padding: 1.5rem 0 1.5rem 2rem;
    border-left: 3px solid #ec4899;
    font-size: 1.35rem; font-weight: 600; line-height: 1.5;
    color: #fff; letter-spacing: -.3px; max-width: 52ch;
}

/* Sources */
.myth-src { margin-top: 2.8rem; padding-top: 1.8rem; border-top: 1px solid var(--glass-border); }
.myth-src h4 { margin-top: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: 2.5px; color: #6366f1; }
.myth-src ol { margin: 0; padding-left: 1.6rem; }
.myth-src li {
    color: var(--text-muted); font-size: .95rem; line-height: 1.55;
    margin-bottom: .75rem; max-width: 78ch; scroll-margin-top: 140px;
}
.myth-src li:target { color: #fff; }
.myth-src a { color: #a5b4fc; word-break: break-word; }
.myth-src cite { font-style: italic; color: #cbd5e1; }

.myth-foot {
    margin-top: 1.6rem; font-size: .9rem; color: var(--text-muted);
    font-style: italic; max-width: 78ch;
}

@media (max-width: 768px) {
    .myth-card {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 1.6rem; align-items: start;
    padding: 2rem 2.4rem;
    text-decoration: none; color: inherit;
}

/* ---------- Standalone entry page ---------- */
.myth-article { padding: 150px 0 0; }
.myth-back {
    display: inline-block; margin-bottom: 2rem; text-decoration: none;
    color: var(--text-muted); font-size: .85rem; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
}
.myth-back:hover { color: #a5b4fc; }

.myth-page-head { margin-bottom: 3rem; }
.myth-page-no {
    display: block; font-size: 1.1rem; font-weight: 900; letter-spacing: -.5px;
    background: var(--accent-liquid);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: .8rem;
}
.myth-page-no small {
    font-size: .62rem; letter-spacing: 2px; font-weight: 800;
    -webkit-text-fill-color: var(--text-muted); margin-right: .5rem;
}
.myth-page-head h1 {
    font-size: 3.1rem; letter-spacing: -1.6px; line-height: 1.12; margin: 0 0 1.1rem;
}
.myth-page-head .myth-dek { font-size: 1.2rem; max-width: 68ch; margin-bottom: 1.2rem; }

/* ---------- Previous / next ---------- */
.myth-pn-wrap {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    margin: 3.5rem 0 0; padding-top: 2.5rem;
    border-top: 1px solid var(--glass-border);
}
.myth-prevnext {
    display: block; padding: 1.4rem 1.6rem; border-radius: 18px;
    background: rgba(255,255,255,.025); border: 1px solid var(--glass-border);
    text-decoration: none; transition: border-color .3s, background .3s;
}
.myth-prevnext:hover { border-color: rgba(129,140,248,.38); background: rgba(255,255,255,.04); }
.myth-prevnext.next { text-align: right; }
.myth-pn-label {
    display: block; color: #818cf8; font-size: .7rem; font-weight: 800;
    letter-spacing: 2px; text-transform: uppercase; margin-bottom: .4rem;
}
.myth-pn-title { display: block; color: #fff; font-weight: 700; line-height: 1.4; }

/* ---------- Subscribe: feed address + copy ---------- */
.feed-copy { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.feed-copy input {
    flex: 1 1 320px; min-width: 0; padding: 12px 16px; border-radius: 12px;
    background: rgba(0,0,0,.35); border: 1px solid var(--glass-border);
    color: #a5b4fc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .95rem;
}
.feed-copy button {
    padding: 12px 24px; border-radius: 12px; cursor: pointer;
    background: #6366f1; border: 0; color: #fff; font: inherit; font-weight: 700;
    transition: background .2s;
}
.feed-copy button:hover { background: #4f46e5; }
.feed-copy button:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }