/* ============================================================
   GENESIS GENEALOGY — "From Adam to Abraham"
   A lifespan (range-bar) chart of the twenty generations of
   Genesis 5 and 11, shown in a modal over the Catholic Timeline.

   Three series, one job each — identity, not rank. The hues were
   validated for colour-vision deficiency against the parchment
   surface (#f3ecdd); do not re-tint them by eye.
     gold  #a8781f  fathers before the Flood (Gen. 5)
     blue  #1a6b9c  fathers after the Flood (Gen. 11)
     wine  #96382f  Abraham, where the chart is going
   The Deluge is an annotation, not a series, so it wears ink
   grey and never one of the three hues.
   ============================================================ */
.gg-dialog{
  --gg-ante:#a8781f;
  --gg-post:#1a6b9c;
  --gg-promise:#96382f;
  --gg-surface:#f3ecdd;
  --gg-ink:#241812;
  --gg-ink-soft:#6b5545;
  --gg-ink-muted:#8a705d;
  --gg-rule:rgba(69,42,28,.16);
  --gg-annot:#4a3a2c;
  --gg-gutter:186px;
  --gg-row:27px;
  --gg-bar:14px;
}

/* ── The button that opens it ─────────────────────────────── */
.timeline-head-actions{display:flex;justify-content:center;gap:10px;margin-top:26px}
.gg-open-hero{display:inline-flex;align-items:center;gap:11px;padding:14px 20px;background:rgba(246,241,230,.06);border:1px solid rgba(214,181,111,.5);color:#f4e7ce;cursor:pointer;font-family:var(--tl-display);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:background .2s,border-color .2s,color .2s}
.gg-open-hero:hover{background:var(--tl-gold-light,#d6b56f);border-color:var(--tl-gold-light,#d6b56f);color:#21140d}
.gg-open-hero svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}

/* ── Dialog shell ─────────────────────────────────────────── */
body.gg-open{overflow:hidden}
.gg-dialog{width:100%;max-width:none;height:100%;max-height:none;padding:0;background:transparent;border:0;overflow:hidden}
.gg-dialog::backdrop{background:rgba(26,16,12,.62);backdrop-filter:blur(3px)}
.gg-frame{display:flex;flex-direction:column;width:min(1180px,calc(100% - 28px));height:calc(100% - 28px);margin:14px auto;overflow:hidden;background:var(--tl-paper,#f3ecdd);box-shadow:0 30px 90px rgba(0,0,0,.34)}
.gg-frame > header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex:0 0 auto;padding:26px 34px 22px;background:var(--tl-ink,#241812);color:#f4e7ce}
.gg-frame > header .kicker{color:var(--tl-gold-light,#d6b56f)}
.gg-frame > header h2{margin:5px 0 6px;color:#f8ead0;font-family:var(--tl-head,"Cormorant Garamond",serif);font-size:clamp(30px,3.6vw,42px);font-weight:600;line-height:1}
.gg-frame > header p{max-width:660px;margin:0;color:#d8c6a8;font-family:var(--tl-body,"EB Garamond",serif);font-size:17px;line-height:1.45}
.gg-close{flex:0 0 auto;width:42px;height:42px;background:transparent;border:1px solid rgba(214,181,111,.42);color:#f4e7ce;cursor:pointer;font-family:var(--tl-head,serif);font-size:28px;line-height:1}
.gg-close:hover{background:rgba(214,181,111,.18)}
.gg-body{flex:1 1 auto;overflow:auto;padding:26px 34px 40px;-webkit-overflow-scrolling:touch}

/* ── Figures above the chart ──────────────────────────────── */
.gg-stats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.gg-stats div{flex:1 1 180px;padding:15px 18px;background:rgba(251,247,237,.8);border:1px solid var(--gg-rule)}
.gg-stats strong{display:block;color:var(--gg-ink);font-family:var(--tl-head,serif);font-size:31px;font-weight:600;line-height:1}
.gg-stats span{display:block;margin-top:5px;color:var(--gg-ink-muted);font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.12em;line-height:1.5;text-transform:uppercase}

/* ── Toolbar ──────────────────────────────────────────────── */
.gg-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.gg-legend{display:flex;flex-wrap:wrap;align-items:center;gap:7px 16px;margin-right:auto}
.gg-legend span{display:inline-flex;align-items:center;gap:7px;color:var(--gg-ink-soft);font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.gg-legend i{display:inline-block;width:22px;height:9px;border-radius:4px}
.gg-legend i.ante{background:var(--gg-ante)}
.gg-legend i.post{background:var(--gg-post)}
.gg-legend i.promise{background:var(--gg-promise)}
.gg-legend i.taken{background:repeating-linear-gradient(45deg,var(--gg-ante) 0 4px,#e6d5ac 4px 8px)}
.gg-legend i.flood{width:3px;height:15px;border-radius:0;background:var(--gg-annot)}
.gg-utility{height:32px;padding:0 11px;background:transparent;border:1px solid rgba(69,42,28,.24);color:#6a5343;cursor:pointer;font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.gg-utility[aria-pressed=true]{background:var(--gg-ink);border-color:var(--gg-ink);color:#f4e7ce}

/* ── Chart ────────────────────────────────────────────────── */
.gg-chart{position:relative;padding:16px 20px 12px;background:rgba(251,247,237,.72);border:1px solid var(--gg-rule)}
.gg-axis{position:relative;height:17px;margin-left:var(--gg-gutter)}
.gg-axis span{position:absolute;top:0;color:var(--gg-ink-muted);font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%)}
.gg-axis-bc{height:15px;margin-top:6px}
.gg-axis-title{position:absolute;left:calc(var(--gg-gutter) * -1);width:calc(var(--gg-gutter) - 14px);top:0;color:var(--gg-ink-muted);font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.1em;text-align:right;text-transform:uppercase;transform:none}

.gg-plot{position:relative}
.gg-overlay{position:absolute;z-index:0;top:0;bottom:0;left:var(--gg-gutter);right:0;pointer-events:none}
.gg-grid{position:absolute;top:0;bottom:0;width:1px;background:rgba(69,42,28,.1)}
.gg-flood{position:absolute;top:0;bottom:0;width:2px;background:var(--gg-annot);opacity:.75}
.gg-flood-label{position:absolute;top:0;padding:2px 7px;background:var(--gg-annot);color:#f6efe0;font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%)}
.gg-guide{position:absolute;top:0;bottom:0;width:1px;background:var(--gg-promise);opacity:0;transition:opacity .18s}
.gg-plot.has-guides .gg-guide{opacity:.5}

.gg-row{position:relative;z-index:1;display:grid;grid-template-columns:var(--gg-gutter) minmax(0,1fr);align-items:center;height:var(--gg-row)}
.gg-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-right:14px;overflow:hidden}
.gg-name{color:var(--gg-ink);font-family:var(--tl-display,serif);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gg-age{flex:0 0 auto;color:var(--gg-ink-muted);font-family:var(--tl-head,serif);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.gg-track{position:relative;height:100%}
/* The father begot the son in the very year the son's bar begins, so the
   connector is a plain vertical stroke from the bar above to this one. */
.gg-connector{position:absolute;z-index:0;top:calc((var(--gg-row) - var(--gg-bar)) / -2);height:calc(var(--gg-row) - var(--gg-bar));width:2px;margin-left:-1px;background:rgba(69,42,28,.3)}
.gg-bar{position:absolute;z-index:1;top:calc((var(--gg-row) - var(--gg-bar)) / 2);height:var(--gg-bar);min-width:7px;padding:0;border:0;border-radius:4px;background:var(--gg-tone);box-shadow:0 0 0 2px var(--gg-surface);cursor:pointer;transition:filter .15s,box-shadow .15s}
.gg-bar.ante{--gg-tone:var(--gg-ante)}
.gg-bar.post{--gg-tone:var(--gg-post)}
.gg-bar.promise{--gg-tone:var(--gg-promise)}
.gg-bar.taken{background:repeating-linear-gradient(45deg,var(--gg-ante) 0 4px,#e6d5ac 4px 8px)}
.gg-bar:hover,.gg-bar:focus-visible{filter:brightness(1.12);box-shadow:0 0 0 2px var(--gg-surface),0 0 0 3px var(--gg-ink);outline:none}
.gg-row.is-selected .gg-bar{box-shadow:0 0 0 2px var(--gg-surface),0 0 0 3px var(--gg-ink)}
.gg-row.is-selected .gg-name,.gg-row.is-selected .gg-age{color:var(--gg-promise)}
.gg-plot.is-hovering .gg-row:not(.is-hovered){opacity:.5}
.gg-plot.is-hovering .gg-row{transition:opacity .15s}

/* ── Tooltip ──────────────────────────────────────────────── */
.gg-tip{position:absolute;z-index:5;max-width:270px;padding:12px 14px;background:var(--gg-ink);color:#f6ecd7;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s}
.gg-tip.is-open{opacity:1;transform:none}
.gg-tip b{display:block;font-family:var(--tl-head,serif);font-size:21px;font-weight:600;line-height:1.05}
.gg-tip em{display:block;margin-top:2px;color:#c9b48c;font-family:var(--tl-body,serif);font-size:14px;font-style:italic}
.gg-tip dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0}
.gg-tip dt{color:#c0a980;font-family:var(--tl-display,serif);font-size:6px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;align-self:center}
.gg-tip dd{margin:0;color:#f6ecd7;font-family:var(--tl-head,serif);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.gg-tip-key{display:inline-block;width:14px;height:3px;margin-right:7px;border-radius:2px;vertical-align:middle;background:var(--gg-tone,var(--gg-ante))}

/* ── Reading panel ────────────────────────────────────────── */
.gg-detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px 30px;margin-top:16px;padding:22px 26px;background:var(--tl-wine,#712f2d);color:#f6e8cf}
.gg-detail .gg-detail-kicker{color:#e3c9a4;font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.gg-detail h3{margin:6px 0 4px;color:#fdf5e6;font-family:var(--tl-head,serif);font-size:32px;font-weight:600;line-height:1}
.gg-detail h3 small{font-family:var(--tl-body,serif);font-size:17px;font-style:italic;font-weight:400;color:#e6d0b3}
.gg-detail p{margin:8px 0 0;color:#eddcc2;font-family:var(--tl-body,serif);font-size:17px;line-height:1.45}
.gg-detail .gg-ref{margin-top:10px;color:#e3c9a4;font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.gg-detail dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0;margin:0;align-content:start}
.gg-detail dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;grid-column:1/-1;padding:7px 0;border-top:1px solid rgba(246,232,207,.2)}
.gg-detail dl > div:first-child{border-top:0}
.gg-detail dt{color:#e0c6a1;font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
.gg-detail dd{margin:0;color:#fdf5e6;font-family:var(--tl-head,serif);font-size:17px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* ── Table view ───────────────────────────────────────────── */
.gg-table-wrap{margin-top:16px;overflow-x:auto}
.gg-table{width:100%;border-collapse:collapse;background:rgba(251,247,237,.72);border:1px solid var(--gg-rule)}
.gg-table caption{padding:0 0 10px;color:var(--gg-ink-muted);font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.12em;text-align:left;text-transform:uppercase}
.gg-table th,.gg-table td{padding:9px 12px;border-bottom:1px solid var(--gg-rule);text-align:left;font-family:var(--tl-body,serif);font-size:15px;color:#4d3a2c}
.gg-table thead th{color:var(--gg-ink-muted);font-family:var(--tl-display,serif);font-size:7px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.gg-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.gg-table tbody tr:last-child th,.gg-table tbody tr:last-child td{border-bottom:0}
.gg-table tbody th{font-family:var(--tl-display,serif);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gg-ink);white-space:nowrap}

/* ── Notes ────────────────────────────────────────────────── */
.gg-note{margin-top:18px;padding:18px 22px;border-left:3px solid var(--tl-gold,#aa7b2d);background:#eadfca}
.gg-note p{margin:0 0 8px;color:#5f4a3c;font-family:var(--tl-body,serif);font-size:16px;line-height:1.5}
.gg-note p:last-child{margin:0}
.gg-note a{color:var(--tl-wine,#712f2d)}

@media(max-width:900px){
  .gg-chart{--gg-gutter:132px}
  .gg-frame{width:100%;height:100%;margin:0}
  .gg-frame > header{padding:20px 18px 18px}
  .gg-body{padding:20px 18px 34px}
  .gg-detail{grid-template-columns:1fr;gap:16px;padding:18px}
  .gg-tip{display:none}
}
@media(max-width:600px){
  .gg-chart{--gg-gutter:106px;--gg-row:24px;padding:14px 12px 10px}
  .gg-name{font-size:7px;letter-spacing:.06em}
  .gg-age{font-size:12px}
  .gg-axis span:nth-child(odd):not(.gg-axis-title){display:none}
  /* On a phone the modal header and four stat tiles would push the chart
     itself off the first screen, so the prose gives way and the tiles pair up. */
  .gg-frame > header p{display:none}
  .gg-stats{gap:8px;margin-bottom:16px}
  .gg-stats div{flex:1 1 calc(50% - 4px);padding:12px 13px}
  .gg-stats strong{font-size:26px}
  .gg-legend{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .gg-bar,.gg-tip,.gg-guide,.gg-plot.is-hovering .gg-row{transition:none}
}
@media print{.gg-dialog,.gg-open-hero,.timeline-head-actions{display:none!important}}