/* ═══════════════════════════════════════════════════════════════
   article.css — the /planner/tudastar/ knowledge base

   Loaded after main/components/responsive, and only by the pages
   tools/build-tudastar.py writes. It adds the long-form reading
   column and the chrome those pages need; it defines no token and
   overrides no component, so the landing page is unaffected.

   Everything here is measured against the same palette: body text
   is --ink-700 on --paper, and the only gold that carries type is
   --gold-deep. Gold hairlines stay hairlines.
═══════════════════════════════════════════════════════════════ */

.art-body { background:var(--paper); }

/* ── top bar ──────────────────────────────────────────────────── */
/* Not the landing page's <nav>: there is no section to jump to here,
   so the bar carries exactly two things — the way back, and the ask. */
.art-nav {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    max-width:var(--maxw); margin:0 auto;
    padding:18px var(--gutter);
    border-bottom:1px solid rgba(16,49,44,.09);
}
/* flex:none on both, for the reason main.css gives the landing nav's
   .brand-logo: the wordmark is sized by one axis and takes the other
   from the file's proportions, so a shrinkable box does not narrow it —
   it deforms it. At 320px this bar wanted 421px, and the logo was the
   only item that could give, so it was squeezed to 35x7 and became
   unreadable while every geometry check still passed. */
.art-nav .art-brand { display:inline-flex; align-items:center; flex:none; }
.art-nav .art-brand img { width:170px; height:auto; display:block; }
.art-nav-cta {
    flex:0 1 auto;
    font-size:var(--fs-sub); font-weight:500; color:var(--accent);
    text-decoration:none; padding:9px 16px;
    border:1px solid rgba(14,79,71,.30); border-radius:999px;
    transition:background .2s var(--ease), color .2s var(--ease);
}
.art-nav-cta:hover { background:var(--accent); color:var(--cream); }

/* ── page frame ───────────────────────────────────────────────── */
.art { max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) 84px; }

.art-crumbs { padding:22px 0 0; font-size:var(--fs-meta); color:var(--ink-500); }
.art-crumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.art-crumbs li + li::before { content:'/'; margin-right:6px; color:var(--gold-deep); }
.art-crumbs a { color:var(--ink-500); text-decoration:none; border-bottom:1px solid transparent; }
.art-crumbs a:hover { color:var(--ink); border-bottom-color:var(--gold); }
.art-crumbs [aria-current] { color:var(--ink-700); }

.art-head { max-width:none; padding:34px 0 8px; }
.art-head h1 {
    font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.1;
    color:var(--ink); margin:.28em 0 0; max-width:20ch;
}
.art-head--hub h1 { max-width:16ch; }
.art-lede {
    margin-top:20px; max-width:62ch;
    font-size:1.13rem; line-height:1.62; color:var(--ink-500);
}
.art-meta {
    margin-top:22px; padding-top:16px;
    border-top:1px solid rgba(16,49,44,.10);
    font-size:var(--fs-meta); color:var(--ink-500);
    max-width:62ch;
}

/* ── the reading column ───────────────────────────────────────── */
/* 68ch is the measure; the tables are allowed to break out of it,
   because a three-column table at 68ch is a column of fragments. */
.art-doc { --measure:68ch; }
.art-doc > p,
.art-doc > ul,
.art-doc > ol,
.art-doc > h2,
.art-doc > h3,
.art-doc > .art-note { max-width:var(--measure); }

.art-doc p, .art-doc li {
    font-size:1.03rem; line-height:1.74; color:var(--ink-700);
}
.art-doc > p { margin:0 0 1.15em; }
.art-doc h2 {
    font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:clamp(1.5rem,2.6vw,1.95rem); line-height:1.22;
    color:var(--ink); margin:2.1em 0 .1em;
}
.art-doc h2::after {
    content:''; display:block; width:46px; height:1px;
    margin:.62em 0 .9em; background:var(--gold);
}
.art-doc h3 {
    font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:1.22rem; line-height:1.3;
    color:var(--ink); margin:1.85em 0 .5em;
}
.art-doc ul, .art-doc ol { margin:0 0 1.3em; padding-left:1.25em; }
.art-doc li { margin:0 0 .58em; }
.art-doc li::marker { color:var(--gold-deep); }
.art-doc a { color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(14,79,71,.34); }
.art-doc a:hover { border-bottom-color:var(--accent); }
.art-doc code {
    font-size:.92em; padding:.12em .42em; border-radius:5px;
    background:rgba(16,49,44,.06); color:var(--ink);
}
.art-doc em { font-style:italic; }

/* An aside, not a decoration: it carries a sentence worth stopping on. */
.art-note {
    margin:1.6em 0 1.8em; padding:16px 20px;
    border-left:2px solid var(--gold);
    background:var(--shell); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.art-note p { margin:0; font-size:1rem; color:var(--ink-700); }

/* ── tables ───────────────────────────────────────────────────── */
/* The wrapper scrolls, so a three-column table never widens the page
   on a phone — the one element allowed its own horizontal overflow. */
.art-table-wrap {
    margin:1.6em 0 2em; overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
.art-table {
    width:100%; min-width:520px; border-collapse:collapse;
    font-size:var(--fs-sub);
}
.art-table th, .art-table td {
    text-align:left; vertical-align:top;
    padding:12px 16px; border-bottom:1px solid rgba(16,49,44,.10);
}
.art-table thead th {
    font-family:'Hanken Grotesk',system-ui,sans-serif;
    font-weight:600; font-size:var(--fs-label);
    letter-spacing:.09em; text-transform:uppercase;
    color:var(--gold-deep);
    border-bottom:1px solid var(--gold);
}
.art-table tbody tr:last-child td { border-bottom:0; }
.art-table td { color:var(--ink-700); line-height:1.55; }
.art-table td:first-child { color:var(--ink); }

/* ── the hub's card list ──────────────────────────────────────── */
.kb-list {
    list-style:none; margin:44px 0 0; padding:0;
    display:grid; gap:20px;
    grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}
.kb-card a {
    display:flex; flex-direction:column; height:100%;
    padding:26px 26px 22px; text-decoration:none;
    background:var(--shell); border-radius:var(--radius);
    border:1px solid transparent;
    transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.kb-card a:hover { border-color:var(--gold); transform:translateY(-2px); }
.kb-kicker {
    font-size:var(--fs-label); font-weight:600;
    letter-spacing:.11em; text-transform:uppercase; color:var(--gold-deep);
}
.kb-card h2 {
    font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:1.26rem; line-height:1.26; color:var(--ink);
    margin:.55em 0 .5em;
}
.kb-card p { margin:0; font-size:var(--fs-sub); line-height:1.6; color:var(--ink-500); }
.kb-more {
    display:inline-flex; align-items:center; gap:7px;
    margin-top:auto; padding-top:20px;
    font-size:var(--fs-sub); font-weight:500; color:var(--accent);
}
.kb-more svg { width:16px; height:16px; }

/* ── the closing ask, and what to read next ───────────────────── */
.art-cta {
    margin-top:56px; padding:34px 32px;
    background:var(--sea-deep); color:var(--cream);
    border-radius:var(--radius-lg);
}
.art-cta h2 {
    font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:clamp(1.35rem,2.4vw,1.8rem); line-height:1.24;
    color:var(--cream); margin:0 0 .5em; max-width:22ch;
}
.art-cta p { margin:0 0 1.1em; max-width:60ch; color:var(--cream-dim); line-height:1.66; }
/* :not(.btn) because a .btn carries its own pair — .btn--light is
   --sea-deep on --cream — and a blanket `a` rule here is more specific
   than the variant class, so it repainted the button's label cream on a
   cream ground and the label vanished. Anything that is a button on this
   band keeps the colours the button variant gives it. */
.art-cta a:not(.btn) { color:var(--cream); }
.art-cta .btn { margin-top:4px; }
.art-cta-fine { margin:16px 0 0; font-size:var(--fs-meta); }
/* :not(.btn) again, and not for the button's sake: it puts this rule on the
   same specificity as .art-cta a:not(.btn) above, so source order decides
   and the quieter colour wins. Without it the blanket rule is one step more
   specific and the fine print comes out as bright as the body copy. */
.art-cta-fine a:not(.btn) { color:var(--cream-faint); text-decoration:underline; }
.art-cta-fine a:hover { color:var(--cream); }

.art-related { margin-top:56px; }
.art-related h2 {
    font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:1.4rem; color:var(--ink); margin:0 0 18px;
}
.art-related ul {
    list-style:none; margin:0; padding:0;
    display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
}
.art-related a {
    display:block; padding:20px 22px; text-decoration:none;
    border:1px solid rgba(16,49,44,.12); border-radius:var(--radius);
    transition:border-color .22s var(--ease), background .22s var(--ease);
}
.art-related a:hover { border-color:var(--gold); background:var(--shell); }
.art-related b {
    display:block; font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:1.08rem; line-height:1.3; color:var(--ink); margin-bottom:.4em;
}
.art-related span { display:block; font-size:var(--fs-sub); color:var(--ink-500); line-height:1.55; }

/* ── phone ────────────────────────────────────────────────────── */
@media (max-width:640px) {
    .art-nav { padding:14px 20px; }
    .art-nav .art-brand img { width:136px; }
    .art-nav-cta { font-size:var(--fs-meta); padding:8px 13px; }
}

/* ── 320px: the wordmark and the CTA have to share the bar ────── */
@media (max-width:400px) {
    .art-nav { gap:12px; padding:12px 16px; }
    .art-nav .art-brand img { width:112px; }
    .art-nav-cta { padding:8px 12px; }
    .art { padding:0 20px 64px; }
    .art-cta { padding:26px 22px; border-radius:var(--radius); }
    .art-doc h2 { margin-top:1.75em; }
}
@media (prefers-reduced-motion:reduce) {
    .kb-card a, .art-related a { transition:none; }
    .kb-card a:hover { transform:none; }
}