/* ============================================================
   foundations.css
   The Foundations collection: intellectual field guides, the
   quiet archival layer beneath the Field Notes. Plus the shared
   intellectual-lineage cross-link component and the reusable
   Atlas media component. Additive only. Pairs with system.css,
   thinking.css and tokens.css. Relative paths only.
   ============================================================ */

/* ---- Foundations landing: a quieter register than the libraries ---- */
.fn-lede{padding:44px 0 0}
.fn-lede p{font-size:19px;line-height:1.7;color:var(--ink-light);max-width:66ch;margin:0 0 18px;text-wrap:pretty}
.fn-lede p:last-child{margin-bottom:0}
.fn-lede em{font-style:italic;color:var(--ink)}

.fn-ways{margin-top:8px}
.fn-ways .lib-note{margin-bottom:18px}
.fn-ways-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.fn-way{background:var(--paper);padding:22px 22px 24px}
.fn-way .fw-k{font-family:var(--font-system);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.fn-way .fw-t{font-family:var(--font-meaning);font-style:italic;font-size:18px;line-height:1.4;color:var(--ink)}
@media (max-width:760px){.fn-ways-grid{grid-template-columns:1fr}}

/* ---- Field-guide article: a small marker that this is a Foundation ---- */
.fg-mark{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-system);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.fg-mark i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.fg-thinker{font-family:var(--font-system);font-size:13px;font-weight:500;color:var(--muted);margin:0 0 26px;letter-spacing:.01em}

/* ---- Primary sources block ---- */
.sources{margin-top:52px;border-top:1px solid var(--line);padding-top:24px}
.sources-h{font-family:var(--font-system);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.sources ul{list-style:none;margin:0;padding:0}
.sources li{font-family:var(--font-meaning);font-size:16px;line-height:1.55;color:var(--ink-light);padding:7px 0;border-bottom:1px solid var(--line);max-width:70ch}
.sources li:last-child{border-bottom:0}
.sources li b{font-style:normal;font-weight:600;color:var(--ink)}
.sources .sr-note{display:block;font-family:var(--font-system);font-size:12.5px;color:var(--muted);margin-top:3px}

/* ---- Reading order, a compact ordered list ---- */
.readorder{margin-top:30px}
.readorder-h{font-family:var(--font-system);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.readorder ol{margin:0;padding-left:20px}
.readorder li{font-size:16px;line-height:1.6;color:var(--ink-light);margin-bottom:6px;max-width:64ch}

/* ============================================================
   Intellectual lineage cross-link component.
   Bidirectional. On a Field Note it shows the thinking beneath a
   principle; on a Foundation it shows where the idea echoes in the
   work. A closed relationship vocabulary, set as a quiet label
   before each link. Restrained. Not badges, not footnotes.
   ============================================================ */
.lineage{margin-top:58px;border-top:1px solid var(--line-strong);padding-top:28px}
.lineage-h{font-family:var(--font-system);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.lineage-intro{font-size:15px;line-height:1.6;color:var(--muted);max-width:62ch;margin:0 0 18px}
.lineage-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.lineage-row{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.lineage-rel{font-family:var(--font-system);font-weight:600;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.lineage-main{min-width:0}
.lineage-main a{font-family:var(--font-system);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink);text-decoration:none}
.lineage-main a:hover{color:var(--accent)}
.lineage-note{display:block;font-family:var(--font-meaning);font-size:15.5px;line-height:1.5;color:var(--ink-light);margin-top:4px;max-width:60ch;text-wrap:pretty}
@media (max-width:640px){
  .lineage-row{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .lineage-rel{padding-top:0}
}

/* inline lineage link inside prose: a quiet marked reference */
a.lref{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--blueprint-light)}
a.lref:hover{border-bottom-color:var(--accent)}

/* ============================================================
   Atlas media component.
   The reusable frame for a plate that is an image or a video loop,
   in the museum-blue Atlas language, 16:9 by default. Contained
   and full-bleed variants. Renders nothing when a plate is absent,
   so an article is elegant with or without one.
   ============================================================ */
.atlas-media{margin:46px 0}
.atlas-media.is-full{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw}
.atlas-media .am-frame{position:relative;aspect-ratio:16/9;background:var(--paper-2,#F3F0EE);border:1px solid rgba(57,62,112,.22);border-radius:3px;overflow:hidden}
.atlas-media.is-full .am-frame{border-radius:0;border-left:0;border-right:0}
.atlas-media .am-frame > img,
.atlas-media .am-frame > video,
.atlas-media .am-frame > svg{display:block;width:100%;height:100%;object-fit:contain}
.atlas-media figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:12px;font-family:var(--font-system);font-size:13px;line-height:1.5;color:var(--muted);max-width:64ch}
.atlas-media .am-id{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--accent)}
.atlas-media .am-cap{color:var(--ink-light)}
.atlas-media .am-note{flex-basis:100%;font-family:var(--font-meaning);font-style:italic;font-size:15px;color:var(--ink-light);margin-top:2px;max-width:62ch}
/* graceful fallback: if a video cannot load, its poster shows; if nothing loads, the frame stays a quiet vellum field, never a broken box */
@media (prefers-reduced-motion:reduce){.atlas-media video{display:none}.atlas-media .am-frame{background:var(--paper-2,#F3F0EE)}}