/* Arcs: one wide story chart under a row of controls, built on the site tokens
   (style.css). Vonnegut’s chalkboard lettering, B–E and G–I, labels the axes. */
:root {
    --curve: #1f5a96;      /* the selected axis */
    --ghost: #b07a1e;      /* the comparison line (validated against --curve for colour-blind separation) */
    --arch:  #77766f;      /* archetype overlay */
    --band:  #ECECE9;
    --card:  #FFFFFF;
    --q0: #dfe9f4; --q1: #b2cbe6; --q2: #7ba5d2; --q3: #3f78b5; --q4: #1d4a7c;   /* sequential, levels 0–4 */
}

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding-block: 40px 14vh;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
    display: grid;
    gap: 20px;
}
.head { display: grid; gap: 10px; margin-top: 16px; }
.head h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 6vw, 52px); line-height: 1.02; color: var(--title); text-wrap: balance; }
.head h1 span { display: block; font-size: 0.42em; font-style: italic; font-weight: 400; color: var(--body); margin-top: 6px; }
.lede { font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--body); max-width: 64ch; text-wrap: pretty; }

.controls { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: end; }
.group { display: grid; gap: 6px; min-width: 0; }
.glabel { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pills { display: flex; flex-wrap: wrap; gap: 4px; }
.pills button {
    font: 500 13px/1 var(--sans); color: var(--body); background: transparent;
    border: 1px solid var(--rule); border-radius: 999px; padding: 8px 12px; cursor: pointer;
}
.pills button:hover { border-color: var(--body); color: var(--ink); }
.pills button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
select { font: 500 13px var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 7px 8px; max-width: 100%; }
button:focus-visible, select:focus-visible, .chart:focus-visible, .match:focus-visible { outline: 2px solid var(--curve); outline-offset: 2px; }

.axisnote { font-size: 15px; line-height: 1.5; color: var(--body); max-width: 80ch; }
.axisnote b { font-family: var(--serif); font-weight: 500; font-size: 17px; color: var(--ink); margin-right: 4px; }
.keyline { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--body); }
.keyline span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 20px; height: 0; border-top: 3px solid var(--curve); }
.sw.g { border-top: 2.5px solid var(--ghost); }
.sw.a { border-top: 2px dashed var(--arch); }
.sw.s { border-top: 1px solid var(--curve); opacity: .5; }

.chart { position: relative; outline: none; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.chart text { font-family: var(--mono); }
.tip {
    position: absolute; pointer-events: none; background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
    padding: 8px 10px; font-size: 13px; line-height: 1.35; max-width: 250px; box-shadow: 0 4px 16px rgb(0 0 0 / .10);
}
.tip .t { font: 11px var(--mono); color: var(--faint); }
.tip .n { font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--ink); }
.tip .v { font: 12px var(--mono); color: var(--body); }
.zoomhint { font: 12px var(--mono); color: var(--faint); display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.zoomhint button { font: 500 12px var(--mono); background: none; border: 0; color: var(--curve); cursor: pointer; padding: 0; text-decoration: underline; }

.below { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
@media (max-width: 760px) { .below { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.card h2 { font-family: var(--serif); font-weight: 500; font-size: 23px; line-height: 1.15; color: var(--title); text-wrap: balance; }
.card h3 { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.card p { max-width: 64ch; color: var(--ink); font-size: 15px; line-height: 1.5; }
.card .meta, .meta { font: 12px/1.45 var(--mono); color: var(--body); }
.why { font-size: 14px !important; color: var(--body) !important; border-top: 1px solid var(--line); padding-top: 8px; }
.vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.vals div { display: grid; gap: 4px; font: 11px var(--mono); color: var(--body); }
.vals b { font-weight: 500; color: var(--ink); }
.pips { display: flex; gap: 2px; }
.pips i { flex: 1; height: 5px; border-radius: 1px; background: var(--band); }
.pips i.on { background: var(--body); }
.pips.sel i.on { background: var(--curve); }

.matches { display: grid; gap: 4px; }
.match {
    display: grid; grid-template-columns: 64px minmax(0, 1fr) 46px; gap: 10px; align-items: center; background: none;
    border: 1px solid transparent; border-radius: 6px; padding: 5px 6px; cursor: pointer; text-align: left; color: var(--ink); font: 14px var(--sans);
}
.match:hover { border-color: var(--line); }
.match[aria-pressed="true"] { border-color: var(--body); }
.match svg { width: 64px; height: 22px; display: block; }
.match .r { font: 12px var(--mono); color: var(--body); text-align: right; font-variant-numeric: tabular-nums; }
.match small { display: block; color: var(--faint); font-size: 12px; }

.compare #dist { display: grid; gap: 10px; }
.drow { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 56px; gap: 12px; align-items: center; font-size: 14px; }
.drow.cur .dname { font-weight: 600; }
.dname { color: var(--ink); min-width: 0; }
.dbar { display: flex; height: 16px; gap: 2px; min-width: 0; }
.dbar i { height: 100%; min-width: 0; }
.dbar i:first-child { border-radius: 3px 0 0 3px; }
.dbar i:last-child { border-radius: 0 3px 3px 0; }
.dmean { font: 12px var(--mono); color: var(--body); text-align: right; font-variant-numeric: tabular-nums; }
.dkey { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 11px var(--mono); color: var(--body); }
.dkey span { display: inline-flex; gap: 5px; align-items: center; }
.dkey i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
@media (max-width: 560px) { .drow { grid-template-columns: minmax(0, 1fr) 48px; } .drow .dbar { grid-column: 1 / -1; grid-row: 2; } }

details { font-size: 13px; }
summary { cursor: pointer; font: 500 12px var(--mono); color: var(--body); }
.tablewrap { overflow-x: auto; margin-top: 8px; }
table { border-collapse: collapse; font: 12px var(--mono); font-variant-numeric: tabular-nums; min-width: 760px; width: 100%; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--faint); font-weight: 500; }
td.l { white-space: normal; font-family: var(--sans); color: var(--ink); }

.about { display: grid; gap: 12px; max-width: 70ch; margin-top: 16px; }
.about h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--title); }
.about h3 { font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--title); margin-top: 6px; }
.about p, .about li, .about dd { font-size: 15px; line-height: 1.55; color: var(--body); text-wrap: pretty; }
.about a { color: var(--ink); }
.about dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; }
.about dt { font: 500 12px/1.9 var(--mono); color: var(--ink); }
.about ul { padding-left: 18px; display: grid; gap: 6px; }
@media (max-width: 560px) { .about dl { grid-template-columns: minmax(0, 1fr); } .about dd { margin-bottom: 6px; } }