/* File 003 — biblical typology case page. Loaded after the shared case styles (/cases/tartaria/case.css) only on /cases/biblical-typology/
   and its es/fr/de copies. Built from tools/typology/build_typology_page.py; uses the site's colour tokens (light and dark themes).
   Layout: compact sections; inside them clickable sequences, card grids that open a study, accordions, and pictures. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ty-h3 { margin-top: 38px; font-size: 1.2rem; }
.ty-sec { padding: 46px 0; }
.ty-sec .tz-intro { margin: 8px 0 20px; }
.ty-sec h2 { margin-bottom: 4px; }
.mono { font-family: "Special Elite", monospace; }
.ty-arrow { color: var(--amber); font-style: normal; }
.ty-ico { width: 1.4em; height: 1.4em; }
.ty-ico-big { width: 54px; height: 54px; color: var(--amber); opacity: 0.85; }
.ty-pic { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- labels, ratings ---- */
.ty-lab { display: inline-block; font-family: "Special Elite", monospace; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border: 1px solid currentColor; border-radius: 3px; white-space: nowrap; }
.ty-lab-text { color: var(--tz-confirmed); }
.ty-lab-pattern { color: var(--tz-lead); }
.ty-lab-reading { color: var(--tz-background); }
.ty-rate { display: inline-block; font-family: "Archivo Black", sans-serif; font-size: 0.66rem; letter-spacing: 0.05em; padding: 4px 9px; border-radius: 3px; color: #1b1405; white-space: nowrap; }
.ty-r-maximum { background: #f1c40f; }
.ty-r-very-strong { background: #e67e22; }
.ty-r-strong { background: #ff9fc6; }
.ty-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.ty-chip { display: inline-block; font-size: 0.8rem; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2); color: var(--bone-dim); text-decoration: none; margin: 0 6px 6px 0; }
.ty-chip:hover { border-color: var(--amber); color: var(--bone); }

/* ---- hero ---- */
.ty-hero-grid { display: grid; gap: 34px; align-items: center; }
.ty-hero-grid.ty-has-dip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ty-dip { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.ty-dip > .ty-dip-a, .ty-dip > .ty-dip-b { position: relative; }
.ty-dip .ty-pic { height: auto; aspect-ratio: 4 / 5; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25); background: var(--ink-2); }
.ty-dip figcaption { margin-top: 8px; font-size: 0.74rem; color: var(--bone-dim); text-align: center; letter-spacing: 0.04em; }
.ty-dip > .ty-dip-mid { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: var(--amber-fill); color: var(--on-amber); display: grid; place-items: center; z-index: 2; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.ty-dip-mid .ty-ico { width: 24px; height: 24px; }

/* ---- the question ---- */
.ty-q { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.ty-explain { margin: 0; }
.ty-explain-svg { width: 100%; height: auto; }
.ty-xb { fill: var(--ink-2); stroke: var(--line); stroke-width: 1.5; }
.ty-xb-a { stroke: var(--amber); }
.ty-xb-b { stroke: var(--tz-background); }
.ty-xb-c { stroke: var(--tz-confirmed); stroke-dasharray: 5 4; }
.ty-xh { fill: var(--bone); font: 700 20px "Archivo Black", sans-serif; }
.ty-xs { fill: var(--bone-dim); font: 12.5px "Space Grotesk", sans-serif; }
.ty-xa { stroke: var(--amber); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ty-xa-d { stroke-dasharray: 5 6; stroke: var(--tz-confirmed); stroke-width: 2; }
.ty-claims4 { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ty-claims4 a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 16px; border: 1px solid var(--line); background: var(--ink-2); color: var(--bone); text-decoration: none; border-radius: 4px; transition: border-color 0.15s, transform 0.15s; }
.ty-claims4 a:hover { border-color: var(--amber); transform: translateY(-2px); }
.ty-claims4 b { font-family: "Archivo Black", sans-serif; color: var(--amber); font-size: 1.5rem; line-height: 1; }
.ty-claims4 span { font-size: 0.95rem; line-height: 1.4; }
.ty-go { margin-top: auto; font-style: normal; font-size: 0.78rem; color: var(--amber); }
.ty-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.ty-whyc { border-top: 3px solid var(--amber); background: var(--ink-2); padding: 14px 16px; }
.ty-whyc h3 { font-size: 0.98rem; margin-bottom: 6px; }
.ty-whyc p { color: var(--bone-dim); font-size: 0.88rem; line-height: 1.45; }
.ty-method-block { margin-top: 40px; padding-top: 6px; }
.ty-method-block .tz-k2 { margin-top: 0; }
.ty-lrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ty-lcard { border: 1px solid var(--line); background: var(--ink-2); padding: 14px 16px; border-radius: 4px; }
.ty-lcard p { color: var(--bone-dim); font-size: 0.9rem; margin-top: 10px; line-height: 1.45; }
.ty-steps6 { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; padding: 0; }
.ty-steps6 li { counter-increment: s; position: relative; padding: 14px 16px 14px 56px; border: 1px solid var(--line); background: var(--ink-2); border-radius: 4px; }
.ty-steps6 li::before { content: counter(s); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--amber-fill); color: var(--on-amber); display: grid; place-items: center; font-family: "Archivo Black", sans-serif; font-size: 0.9rem; }
.ty-steps6 b { display: block; margin-bottom: 4px; }
.ty-steps6 span { color: var(--bone-dim); font-size: 0.88rem; line-height: 1.45; display: block; }

/* ---- accordions ---- */
.ty-acc { border: 1px solid var(--line); background: var(--ink-2); border-radius: 4px; margin-top: 8px; }
.ty-acc > summary { cursor: pointer; padding: 11px 16px; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.ty-acc > summary::-webkit-details-marker { display: none; }
.ty-acc > summary::after { content: "+"; font-family: "Archivo Black", sans-serif; color: var(--amber); font-size: 1.1rem; flex: none; }
.ty-acc[open] > summary::after { content: "–"; }
.ty-acc[open] { border-color: var(--line); }
.ty-accbody { padding: 2px 16px 14px; color: var(--bone-dim); font-size: 0.93rem; }
.ty-accs { margin-top: 18px; }
.ty-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; align-items: start; }

/* ---- words, limits, passages (inside studies) ---- */
.ty-steps { padding-left: 1.2em; display: grid; gap: 8px; margin: 8px 0 8px; color: var(--bone-dim); }
.ty-pass { border-left: 3px solid var(--line); padding: 4px 0 4px 14px; margin: 12px 0; }
.ty-pass blockquote { margin: 6px 0; color: var(--bone); font-style: italic; }
.ty-pass cite { display: block; font-size: 0.78rem; color: var(--bone-dim); font-style: normal; margin-top: 2px; }
.ty-ref { font-size: 0.82rem; color: var(--bone-dim); }
.ty-role { margin-left: 8px; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.ty-orig { font-size: 1.15rem; line-height: 1.7; margin: 4px 0; }
.ty-os { display: block; font-size: 0.74rem; color: var(--bone-dim); font-family: "Space Grotesk", sans-serif; }
.ty-he { font-family: "SBL Hebrew", "Ezra SIL", "Times New Roman", serif; font-size: 1.2em; }
.ty-el { font-family: "Gentium Plus", "Gentium", "Cardo", "Times New Roman", serif; font-size: 1.1em; }
.ty-words, .ty-limits, .ty-srcs { list-style: none; display: grid; gap: 8px; margin: 8px 0 8px; padding: 0; }
.ty-words li, .ty-limits li, .ty-srcs li { padding: 9px 13px; border: 1px solid var(--line); background: var(--ink); color: var(--bone-dim); font-size: 0.92rem; }
.ty-words li b { color: var(--bone); }
.ty-gloss { color: var(--bone); }
.ty-where { font-family: "Special Elite", monospace; font-size: 0.78rem; color: var(--amber); }
.ty-wnote { display: block; font-size: 0.8rem; color: var(--bone-dim); margin-top: 4px; }
.ty-limits li { border-left: 3px solid var(--tz-unsourced); }
.ty-srcs li { padding: 6px 12px; }
.ty-biblio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ty-related { color: var(--bone-dim); margin-top: 14px; font-size: 0.9rem; }
.ty-caveat { margin-top: 14px; padding: 12px 16px; border-left: 4px solid var(--tz-lead); background: var(--ink-2); color: var(--bone-dim); max-width: 820px; }
.ty-method { color: var(--bone-dim); max-width: 780px; }
.ty-table td, .ty-table th { vertical-align: top; }
.ty-table td { color: var(--bone-dim); }
.ty-table td b { color: var(--bone); }
.ty-lang { font-size: 0.78rem; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.ty-mini { margin-top: 6px; font-size: 0.82rem; }
.ty-mini summary { cursor: pointer; color: var(--amber); }
.ty-mini p { margin-top: 4px; }

/* ---- John and Genesis: a numbered sequence, one pair on the stage ---- */
.ty-rail { list-style: none; display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 12px; margin: 0; scrollbar-width: thin; scroll-snap-type: x proximity; }
.ty-node { flex: none; display: flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; border: 1px solid var(--line); border-bottom: 3px solid var(--line); background: var(--ink-2); color: var(--bone-dim); border-radius: 999px; text-decoration: none; font-size: 0.74rem; scroll-snap-align: center; white-space: nowrap; }
.ty-node b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 1px solid var(--line); color: var(--bone); font-family: "Archivo Black", sans-serif; font-size: 0.72rem; }
.ty-node:hover { color: var(--bone); border-color: var(--bone-dim); }
.ty-n-text { border-bottom-color: var(--tz-confirmed); }
.ty-n-pattern { border-bottom-color: var(--tz-lead); }
.ty-n-reading { border-bottom-color: var(--tz-background); }
.ty-node.is-on { background: var(--amber-fill); color: var(--on-amber); border-color: var(--amber-fill); }
.ty-node.is-on b { background: var(--on-amber); color: var(--amber-fill); border-color: var(--on-amber); }
.ty-stage { margin-top: 6px; }
.ty-pcard { display: none; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 22px; padding: 18px; border: 1px solid var(--line); background: var(--ink-2); border-radius: 6px; }
.ty-pcard:first-child { display: grid; }
.ty-stage[data-sel] .ty-pcard { display: none; }
.ty-stage[data-sel] .ty-pcard.is-on { display: grid; }
.ty-pone, .ty-ppair, .ty-pico { border-radius: 4px; overflow: hidden; background: var(--ink); border: 1px solid var(--line); min-height: 180px; }
.ty-pone .ty-pic { min-height: 220px; }
.ty-ppair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ty-pico { display: grid; place-items: center; }
.ty-phead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ty-pnum { font-family: "Archivo Black", sans-serif; font-size: 1.8rem; line-height: 1; color: var(--amber); }
.ty-pnum small { font-size: 0.8rem; color: var(--bone-dim); }
.ty-pcols { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.ty-side { padding: 12px 14px; background: var(--ink); border: 1px solid var(--line); border-radius: 4px; }
.ty-side-g { border-top: 3px solid var(--amber); }
.ty-side-j { border-top: 3px solid var(--tz-background); }
.ty-side-h { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-dim); }
.ty-side-ref { font-size: 0.95rem; color: var(--bone); margin: 2px 0 6px; font-weight: 700; }
.ty-side-t { font-size: 0.92rem; color: var(--bone-dim); line-height: 1.5; }
.ty-plink { display: grid; place-items: center; color: var(--amber); }
.ty-ico-link { width: 28px; height: 28px; }
.ty-pconn { margin-top: 14px; color: var(--bone); font-size: 0.95rem; line-height: 1.55; }
.ty-pcard .ty-words { margin-top: 10px; }
.ty-pnav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.ty-pcount { font-size: 0.8rem; color: var(--bone-dim); }
.ty-tiles { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0; padding: 0; counter-reset: t; }
.ty-tile { counter-increment: t; position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--ink-2); }
.ty-tile::before { content: counter(t); position: absolute; top: 6px; right: 9px; font-family: "Archivo Black", sans-serif; color: var(--amber); font-size: 0.8rem; opacity: 0.7; }
.ty-tile b { font-size: 0.98rem; }
.ty-tile .ty-he { font-size: 1.3em; color: var(--bone); }
.ty-tile span:not(.ty-he) { font-size: 0.85rem; color: var(--bone-dim); }
.ty-tile small { font-size: 0.7rem; color: var(--amber); margin-top: 2px; }

/* ---- the studies: a grid of cards, each opens in a dialog ---- */
.ty-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.ty-toolbar .tz-filters { margin: 0; }
.ty-search input { font: inherit; font-size: 0.85rem; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-2); color: var(--bone); min-width: 200px; }
.ty-count { font-size: 0.8rem; color: var(--bone-dim); margin-left: auto; }
.ty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.ty-gcard { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--ink-2); border-radius: 6px; overflow: hidden; color: var(--bone); text-decoration: none; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.ty-gcard:hover, .ty-gcard:focus-visible { border-color: var(--amber); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
.ty-th { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--ink); overflow: hidden; }
.ty-gcard .ty-pic { transition: transform 0.4s; }
.ty-gcard:hover .ty-pic { transform: scale(1.04); }
.ty-gcard > .ty-rate { position: absolute; top: 10px; right: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.ty-gbody { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.ty-garc { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.ty-gtitle { font-size: 1.02rem; line-height: 1.25; }
.ty-gref { font-size: 0.76rem; color: var(--bone-dim); }
.ty-gsum { font-size: 0.86rem; color: var(--bone-dim); line-height: 1.45; margin-top: 4px; }
.ty-grid-l { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ty-gcard-l .ty-th { aspect-ratio: 16 / 9; }
.ty-none { color: var(--bone-dim); margin: 20px 0; }
.ty-fulls { display: none; }

/* the dialog that shows one study */
.ty-dlg { width: min(940px, 94vw); max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); color: var(--bone); overflow: auto; }
.ty-dlg::backdrop { background: rgba(8, 8, 10, 0.72); backdrop-filter: blur(4px); }
.ty-dlg-bar { position: sticky; top: 0; z-index: 3; display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--ink); border-bottom: 1px solid var(--line); }
.ty-dlg-bar button { font: inherit; font-size: 0.82rem; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); color: var(--bone); cursor: pointer; }
.ty-dlg-bar button:hover { border-color: var(--amber); }
.ty-dlg-bar .ty-dlg-x { background: var(--amber-fill); color: var(--on-amber); border-color: var(--amber-fill); font-weight: 700; }
.ty-dlg-body { padding: 0 0 26px; }
.ty-dlg-body .ty-full { display: block; }
.ty-dlg-body .ty-full > :not(.ty-banner) { margin-left: 28px; margin-right: 28px; }
.ty-banner { margin: 0 0 18px; position: relative; background: var(--ink-2); }
.ty-banner-img { width: 100%; max-height: 340px; object-fit: cover; object-position: center 30%; display: block; }
.ty-banner figcaption { font-size: 0.74rem; color: var(--bone-dim); padding: 6px 28px 0; line-height: 1.4; }
.ty-fhead { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 4px; }
.ty-fhead h3 { font-size: 1.5rem; flex: 1 1 280px; }
.ty-pair { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 8px 28px 4px; color: var(--bone-dim); font-size: 0.86rem; }
.ty-ref1, .ty-ref2 { color: var(--bone); }
.ty-basis { color: var(--bone-dim); font-size: 0.92rem; margin: 8px 0 12px; }
html.ty-lock { overflow: hidden; }

/* ---- timeline: five eras side by side ---- */
.ty-eras { display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.ty-era { scroll-snap-align: start; border: 1px solid var(--line); background: var(--ink-2); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.ty-eraimg { aspect-ratio: 16 / 10; background: var(--ink); display: grid; place-items: center; overflow: hidden; }
.ty-era h3 { font-size: 0.98rem; padding: 12px 14px 4px; }
.ty-eran { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--amber-fill); color: var(--on-amber); font-size: 0.72rem; margin-right: 6px; }
.ty-tl { list-style: none; display: grid; gap: 6px; padding: 6px 10px 12px; margin: 0; }
.ty-ev { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--amber); background: var(--ink); border-radius: 3px; color: var(--bone-dim); text-decoration: none; font-size: 0.84rem; }
a.ty-ev:hover { border-color: var(--amber); }
.ty-ev b { color: var(--bone); font-size: 0.88rem; }
.ty-ev .mono { font-size: 0.72rem; }
.ty-ev em { font-style: normal; font-size: 0.8rem; }

/* ---- convergence ---- */
.ty-conv { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.ty-cstats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0; }
.ty-chartfig { margin: 0; padding: 14px 16px 10px; border: 1px solid var(--line); background: var(--ink-2); border-radius: 6px; }
.ty-chart { width: 100%; height: auto; }
.ty-chartfig figcaption { font-size: 0.8rem; color: var(--bone-dim); margin-top: 4px; }
.ty-ax { stroke: var(--line); stroke-width: 1.5; }
.ty-cv { fill: var(--bone); font: 700 15px "Archivo Black", sans-serif; }
.ty-cl { fill: var(--bone-dim); font: 11px "Space Grotesk", sans-serif; }
.ty-cfig, .ty-gfig { margin: 0; }
.ty-cfig .ty-pic, .ty-gfig .ty-pic { height: auto; max-height: 320px; border-radius: 6px; border: 1px solid var(--line); }
.ty-cfig figcaption, .ty-gfig figcaption { font-size: 0.76rem; color: var(--bone-dim); margin-top: 6px; line-height: 1.4; }

/* ---- genealogy ---- */
.ty-gtop { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ty-gtop:not(:has(figure)) { grid-template-columns: 1fr; }
.ty-gpts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.ty-gpts .ty-acc { margin-top: 0; }
.ty-gp > summary { align-items: flex-start; }
.ty-gpt { flex: 1; }
.ty-gex { margin-top: 10px; color: var(--bone); font-size: 0.92rem; }
.ty-glinks { margin-top: 8px; }
.ty-gwork { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ty-wsteps2 { list-style: none; counter-reset: w; display: grid; gap: 10px; margin: 8px 0 0; padding: 0; }
.ty-wsteps2 li { counter-increment: w; position: relative; padding: 10px 14px 10px 50px; border: 1px solid var(--line); border-radius: 4px; background: var(--ink-2); }
.ty-wsteps2 li::before { content: counter(w); position: absolute; left: 12px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--amber-fill); color: var(--on-amber); display: grid; place-items: center; font-family: "Archivo Black", sans-serif; font-size: 0.82rem; }
.ty-wsteps2 b { display: block; }
.ty-wsteps2 span { color: var(--bone-dim); font-size: 0.9rem; }
.ty-skills { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 10px 0 0; }
.ty-skill { padding: 12px 14px; border: 1px solid var(--line); border-top: 3px solid var(--amber); border-radius: 4px; background: var(--ink-2); }
.ty-skill b { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.ty-skill span { color: var(--bone-dim); font-size: 0.82rem; line-height: 1.45; display: block; }

/* ---- corrections and limits ---- */
.ty-crows { display: grid; gap: 0; }
.ty-crow { margin-top: 6px; }
.ty-kind { font-style: normal; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; flex: none; color: #fff; }
.ty-k-fixed { background: var(--tz-confirmed); }
.ty-k-dropped { background: var(--tz-unsourced); }

/* ---- contrast (Oct 20, 2026): small text must reach 4.5:1 ----
   The shared case tokens (--tz-lead, --tz-background, --tz-unsourced) are right for File 002's big coloured bars but too light for 11px labels on paper,
   so File 003 darkens them locally (same hues) and leaves case.css alone. In the dark theme the two "what changed / what I dropped" chips keep their bright
   colours and take the dark ink the rating chips use. */
html[data-theme="light"] .ty-lab-pattern { color: #7a6100; }   /* was #b7950b, 2.7:1 on paper; now 5.6:1 */
html[data-theme="light"] .ty-lab-reading { color: #3d6a90; }   /* was #4a7aa0, 4.3:1; now 5.4:1 */
html[data-theme="light"] .ty-k-dropped { background: #b04500; }   /* was #d35400 under white text, 4.2:1; now 5.7:1 */
html[data-theme="dark"] .ty-k-fixed, html[data-theme="dark"] .ty-k-dropped, :root:not([data-theme]) .ty-k-fixed, :root:not([data-theme]) .ty-k-dropped { color: #1b1405; }   /* white on these was 3.3:1 and 2.9:1; dark ink is 5.5:1 and 6.4:1 */
.ty-node.is-on .ty-arrow { color: inherit; }   /* the arrow in the active step was amber on amber (invisible in the dark theme) */
.ty-crow > summary { justify-content: flex-start; }
.ty-crow > summary span { flex: 1; font-weight: 500; font-size: 0.92rem; }
.ty-crow > summary::after { margin-left: auto; }
.ty-open { list-style: none; counter-reset: o; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 18px; padding: 0; }
.ty-open li { counter-increment: o; position: relative; padding: 14px 16px 14px 54px; border: 1px solid var(--line); border-left: 3px solid var(--tz-lead); background: var(--ink-2); border-radius: 4px; color: var(--bone-dim); font-size: 0.9rem; line-height: 1.5; }
.ty-open li::before { content: counter(o); position: absolute; left: 14px; top: 12px; font-family: "Archivo Black", sans-serif; font-size: 1.3rem; color: var(--amber); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .ty-hero-grid.ty-has-dip { grid-template-columns: 1fr; }
  .ty-dip { max-width: 520px; }
  .ty-claims4, .ty-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ty-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ty-conv { grid-template-columns: 1fr; }
  .ty-eras { grid-template-columns: repeat(5, 240px); }
}
@media (max-width: 760px) {
  .ty-sec { padding: 34px 0; }
  .ty-q, .ty-gtop, .ty-gwork, .ty-two, .ty-lrow, .ty-steps6, .ty-open, .ty-gpts, .ty-biblio { grid-template-columns: 1fr; }
  .ty-claims4, .ty-why, .ty-skills { grid-template-columns: 1fr; }
  .ty-pcard { grid-template-columns: 1fr; }
  .ty-pcols { grid-template-columns: 1fr; }
  .ty-plink { transform: rotate(90deg); padding: 2px 0; }
  .ty-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ty-cstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ty-grid, .ty-grid-l { grid-template-columns: 1fr; }
  .ty-gcard { flex-direction: row; }
  .ty-gcard .ty-th { width: 118px; aspect-ratio: auto; flex: none; }
  .ty-gcard .ty-ico-big { width: 36px; height: 36px; }
  .ty-gsum { display: none; }
  .ty-dlg { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .ty-dlg-body .ty-full > :not(.ty-banner), .ty-pair { margin-left: 16px; margin-right: 16px; }
  .ty-banner figcaption { padding: 6px 16px 0; }
  .ty-count { margin-left: 0; }
  .ty-search input { min-width: 0; width: 100%; }
  .ty-search { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .ty-gcard, .ty-claims4 a, .ty-gcard .ty-pic { transition: none; } }
.ty-gcard[hidden], .ty-crow[hidden], .ty-none[hidden] { display: none; }
.ty-dlg-body .ty-full:not(:has(.ty-banner)) { padding-top: 18px; }

/* tighter */
.ty-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ty-crows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; align-items: start; }
.ty-tilex { margin-top: 4px; font-size: 0.78rem; }
.ty-tilex summary { cursor: pointer; color: var(--amber); list-style: none; }
.ty-tilex summary::-webkit-details-marker { display: none; }
.ty-tilex p { margin-top: 4px; color: var(--bone-dim); line-height: 1.4; }
.ty-tile { align-self: start; }
.ty-ev b, .ty-ev em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ty-editions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ty-lcard { padding: 12px 14px; }
.ty-lcard p { font-size: 0.86rem; margin-top: 8px; }
.ty-steps6 li { padding: 12px 14px 12px 50px; }
.ty-steps6 span { font-size: 0.84rem; }
.ty-whyc p { font-size: 0.84rem; }
@media (max-width: 760px) { .ty-crows, .ty-editions { grid-template-columns: 1fr; } }

/* disclosure cards */
.ty-whyc { padding: 0; border-top: 3px solid var(--amber); background: var(--ink-2); align-self: start; }
.ty-whyc > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ty-whyc > summary::-webkit-details-marker { display: none; }
.ty-whyc > summary::after { content: "+"; color: var(--amber); font-family: "Archivo Black", sans-serif; }
.ty-whyc[open] > summary::after { content: "–"; }
.ty-whyc h3 { font-size: 0.95rem; margin: 0; }
.ty-whyc > p { padding: 0 14px 14px; }
.ty-steps6 { align-items: start; }
.ty-steps6 li { padding: 0; }
.ty-steps6 li::before { top: 12px; }
.ty-steps6 details > summary { list-style: none; cursor: pointer; padding: 12px 14px 12px 52px; }
.ty-steps6 details > summary::-webkit-details-marker { display: none; }
.ty-steps6 details > summary::after { content: "+"; position: absolute; right: 14px; top: 12px; color: var(--amber); font-family: "Archivo Black", sans-serif; }
.ty-steps6 details[open] > summary::after { content: "–"; }
.ty-steps6 span { padding: 0 14px 14px 52px; }
.ty-steps6 b { margin: 0; }
.ty-method-block .tz-close { font-size: 1.02rem; margin-top: 22px; }
.ty-wsteps2 li { padding: 0; border: 0; background: none; }
.ty-wsteps2 li::before { display: none; }
.ty-wsteps2 .ty-acc { margin-top: 0; }
.ty-skills { align-items: start; }
.ty-skill { padding: 0; }
.ty-skill > details > summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ty-skill > details > summary::-webkit-details-marker { display: none; }
.ty-skill summary i { font-style: normal; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); }
.ty-skill > details > span { padding: 0 14px 12px; }
.ty-skill b { margin: 0; }
.ty-crows:not(.is-all) .ty-crow:nth-child(n+13) { display: none; }
.ty-showall { margin: 12px auto 0; display: block; }
.ty-showall[hidden] { display: none; }
.ty-open li { font-size: 0.86rem; }
@media (max-width: 760px) { .ty-gcard > .ty-rate { top: auto; bottom: 10px; right: 10px; } .ty-gbody { padding-bottom: 36px; } }
.ty-qnote { margin-top: 14px; padding: 10px 14px; border-left: 3px solid var(--tz-background); background: var(--ink-2); color: var(--bone-dim); font-size: 0.86rem; max-width: 720px; }
.ty-grid-l { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .ty-grid-l { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ty-grid-l { grid-template-columns: 1fr; } }
.ty-th .ty-pic[src*="suffering-servant"] { object-position: center 18%; }
.ty-dlg { margin: auto; }
.ty-sub { margin: 22px 0 6px; font-size: 1rem; }
.ty-conv { align-items: center; }