/* =====================================================================
   Pointing People to Jesus — supplement pages
   Shared styling for the on-brand web versions of the printed
   "Supplemental Workbook" handouts (Lessons 1-5). Loaded after
   shared.css. Every class here is prefixed `sup-` so it never
   collides with lesson/dashboard styles.
   ===================================================================== */

/* ---------- TOP BAR (matches lesson.html's lheader) ---------- */
header.sup-topbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(120deg,var(--azure-800),var(--azure-deep));
  color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.sup-topbar .bar{max-width:1080px; margin:0 auto; padding:0 28px; height:70px; display:flex; align-items:center; justify-content:space-between;}
.sup-topbar .brand{display:flex; align-items:center; gap:11px; font-family:'League Spartan'; font-weight:800; font-size:.98rem; color:#fff;}
.sup-topbar .brand img{width:34px; height:34px;}
.sup-topbar .back{
  display:inline-flex; align-items:center; gap:8px; font-family:'League Spartan';
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.76rem;
  color:rgba(255,255,255,.82); transition:color .15s;
}
.sup-topbar .back:hover{color:#fff;}
.sup-topbar .back svg{width:15px; height:15px;}

/* ---------- PAGE SHELL ---------- */
.sup-wrap{max-width:820px; margin:0 auto; padding:48px 28px 40px;}

/* ---------- HERO ---------- */
.sup-hero{margin-bottom:14px;}
.sup-hero .eyebrow{display:block; margin-bottom:16px;}
.sup-hero h1{font-size:clamp(2.1rem,5vw,3.1rem); font-weight:800; line-height:1.02;}
.sup-hero .lede-label{
  display:block; color:var(--gold-deep); font-family:'League Spartan'; font-weight:700;
  font-size:1.02rem; text-transform:uppercase; letter-spacing:.02em; margin-top:10px;
}
.sup-hero .swoosh{width:150px; margin-top:16px;}
.sup-intro{margin-top:26px; color:var(--muted); font-size:1.1rem; font-weight:300; line-height:1.75;}
.sup-intro strong{color:var(--dark-azure); font-weight:600;}

/* ---------- SECTIONS ---------- */
.sup-section{margin-top:40px;}
.sup-section > .tag{
  font-family:'League Spartan'; font-size:.72rem; color:var(--gold-deep); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px;
}
.sup-section h2{font-size:clamp(1.4rem,2.8vw,1.9rem); font-weight:800; line-height:1.08;}
.sup-section h2 + p{margin-top:16px;}
.sup-section p{color:#2b4457; font-size:1.04rem; line-height:1.8; font-weight:300;}
.sup-section p + p{margin-top:16px;}
.sup-section p strong{color:var(--dark-azure); font-weight:600;}

.sup-subhead{
  font-family:'League Spartan'; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:.8rem; color:var(--gray-azure); margin:26px 0 8px;
}

/* ---------- CARD (a bordered block that groups content) ---------- */
.sup-card{
  margin-top:22px; border:1px solid var(--line); border-radius:var(--r);
  padding:28px 30px; background:#fff; box-shadow:var(--sh-sm);
}
.sup-card::before{content:none;}
.sup-card.accent{position:relative; padding-left:34px; overflow:hidden;}
.sup-card.accent::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:4px;
  border-radius:0 4px 4px 0; background:var(--gold);
}

/* ---------- SCRIPTURE REFERENCE LINK ---------- */
a.ref{
  color:var(--dark-azure); font-weight:500; text-decoration:underline;
  text-decoration-color:var(--gold-deep); text-underline-offset:2px; white-space:nowrap;
}
a.ref:hover{color:var(--gray-azure);}

/* ---------- SCRIPTURE PULL QUOTE ---------- */
.sup-quote{
  margin:34px 0; text-align:center; padding:28px 24px;
  background:linear-gradient(180deg,var(--light-azure),#eaf6fc); border-radius:var(--r);
}
.sup-quote blockquote{
  font-family:'League Spartan'; font-weight:500; text-transform:none; color:var(--dark-azure);
  font-size:1.2rem; line-height:1.55; max-width:600px; margin:0 auto 12px;
}
.sup-quote figcaption{
  font-family:'League Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:.72rem; color:var(--gray-azure);
}

/* ---------- "THREE LINES" / EVIDENCE POINTS ---------- */
.sup-points{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.sup-point{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--off-white);
}
.sup-point .lbl{
  flex-shrink:0; font-family:'League Spartan'; font-weight:800; color:var(--gold);
  background:var(--dark-azure); border-radius:8px; padding:6px 11px; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.05em; min-width:auto;
}
.sup-point p{margin:0; font-size:1rem;}
.sup-point p strong{color:var(--dark-azure);}

/* ---------- WOUND / FACT LIST ---------- */
.sup-list{margin-top:20px; list-style:none;}
.sup-list li{
  position:relative; padding:12px 0 12px 30px; border-top:1px solid var(--line);
  color:#2b4457; font-size:1.02rem; line-height:1.7; font-weight:300;
}
.sup-list li:first-child{border-top:none;}
.sup-list li::before{
  content:""; position:absolute; left:2px; top:20px; width:9px; height:9px;
  border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(253,208,90,.25);
}
.sup-list li strong{color:var(--dark-azure); font-weight:600;}

/* ---------- CALLOUT (Think about it) ---------- */
.sup-callout{
  margin-top:32px; background:linear-gradient(150deg,var(--azure-800),var(--azure-deep));
  border-radius:var(--r); padding:30px 32px; color:#fff; position:relative; overflow:hidden;
  box-shadow:var(--sh-md);
}
.sup-callout::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 260px at 90% -30%, rgba(253,208,90,.20), transparent 70%);
}
.sup-callout .tag{
  position:relative; z-index:1; font-family:'League Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.12em; font-size:.72rem; color:var(--gold); margin-bottom:10px;
}
.sup-callout p{position:relative; z-index:1; color:rgba(255,255,255,.9); font-weight:300; font-size:1.04rem; line-height:1.75;}
.sup-callout p strong{color:#fff; font-weight:600;}

/* ---------- REASONS (Let me first) ---------- */
.sup-reason{
  border:1px solid var(--line); border-radius:var(--r); padding:22px 26px; background:#fff;
  box-shadow:var(--sh-sm); margin-top:16px;
}
.sup-reason .said{
  font-family:'League Spartan'; font-weight:800; color:var(--dark-azure); font-size:1.12rem;
  line-height:1.2; margin-bottom:10px;
}
.sup-reason .said::before{content:"\201C";}
.sup-reason .said::after{content:"\201D";}
.sup-reason p{color:#2b4457; font-size:1rem; line-height:1.75; font-weight:300; margin:0;}
.sup-reason p strong{color:var(--dark-azure); font-weight:600;}

/* =====================================================================
   WORKSHEETS  (In Christ, Is It Worth It?)
   Fillable on screen (not saved), and print nicely on paper.
   ===================================================================== */
.sup-ex-num{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:6px;
}
.sup-ex-num .n{
  width:30px; height:30px; border-radius:50%; background:var(--dark-azure); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:'League Spartan';
  font-weight:800; font-size:.86rem; flex-shrink:0;
}
.sup-ex-num .k{font-family:'League Spartan'; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--gray-azure);}

/* A single write-in prompt with a line/box */
.sup-field{margin-top:18px;}
.sup-field label{display:block; font-size:1rem; color:#22384a; margin-bottom:9px; line-height:1.6;}
.sup-field label strong{color:var(--dark-azure); font-weight:600;}
.sup-write{
  width:100%; min-height:56px; resize:vertical; border:1.5px solid #dce7ed; border-radius:12px;
  padding:12px 14px; font-family:'Jost'; font-size:1rem; color:var(--ink); background:var(--off-white);
  line-height:1.6; transition:border-color .15s, box-shadow .15s, background .15s;
}
.sup-write::placeholder{color:#9fb0bc;}
.sup-write:focus{outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 4px rgba(253,208,90,.2);}

/* IN CHRIST — blessings fill-in rows */
.sup-fillrow{
  display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center;
  padding:14px 0; border-top:1px solid var(--line);
}
.sup-fillrow:first-of-type{border-top:none;}
.sup-fillrow .refcell{
  font-family:'League Spartan'; font-weight:800; color:var(--dark-azure); font-size:1rem;
}
.sup-fillrow .refcell a{text-decoration:underline; text-decoration-color:var(--gold-deep); text-underline-offset:2px;}

/* IN CHRIST — in/outside contrast */
.sup-contrast{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px;}
.sup-contrast .col{border-radius:var(--r); padding:24px 24px; border:1px solid var(--line);}
.sup-contrast .in{background:linear-gradient(180deg,var(--light-azure),#eaf6fc); border-color:transparent;}
.sup-contrast .out{background:var(--off-white);}
.sup-contrast h3{font-size:1.15rem; margin-bottom:4px;}
.sup-contrast .in h3{color:var(--dark-azure);}
.sup-contrast .out h3{color:var(--gray-azure);}
.sup-contrast .cap{font-family:'League Spartan'; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; color:var(--gray-azure); margin-bottom:14px; display:block;}
.sup-contrast ul{list-style:none;}
.sup-contrast li{padding:7px 0 7px 26px; position:relative; font-size:.98rem; line-height:1.55; color:#2b4457;}
.sup-contrast .in li::before{content:"\2713"; position:absolute; left:0; color:var(--gold-deep); font-weight:800;}
.sup-contrast .out li::before{content:"\2715"; position:absolute; left:2px; color:#b06a6a; font-weight:700; font-size:.9rem;}

/* IN CHRIST — blood/water paired columns */
.sup-pair{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:22px; box-shadow:var(--sh-sm);}
.sup-pair .pair-head{display:grid; grid-template-columns:1fr 1fr;}
.sup-pair .pair-head div{
  padding:16px 20px; font-family:'League Spartan'; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:.82rem; color:#fff; text-align:center;
}
.sup-pair .pair-head .a{background:var(--azure-deep);}
.sup-pair .pair-head .b{background:var(--dark-azure);}
.sup-pair .pair-block{border-top:1px solid var(--line);}
.sup-pair .pair-theme{
  text-align:center; font-family:'League Spartan'; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.72rem; color:var(--gold-deep); background:var(--panel-tint);
  padding:8px 12px;
}
.sup-pair .pair-cells{display:grid; grid-template-columns:1fr 1fr;}
.sup-pair .cell{padding:20px 22px;}
.sup-pair .cell + .cell{border-left:1px solid var(--line);}
.sup-pair .cell .cref{font-family:'League Spartan'; font-weight:800; color:var(--dark-azure); font-size:.95rem; margin-bottom:6px;}
.sup-pair .cell .cq{font-size:.96rem; color:#2b4457; line-height:1.6; font-weight:300;}

/* IS IT WORTH IT — 2x2 honest math grid */
.sup-grid4{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px;}
.sup-quad{border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; background:#fff; box-shadow:var(--sh-sm);}
.sup-quad .qh{
  display:flex; align-items:baseline; gap:8px; justify-content:space-between;
  font-family:'League Spartan'; margin-bottom:12px; flex-wrap:wrap;
}
.sup-quad .row-lbl{font-weight:700; color:var(--dark-azure); font-size:.95rem; text-transform:uppercase; letter-spacing:.04em;}
.sup-quad .col-lbl{font-weight:700; color:var(--gold-deep); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;}
.sup-quad .sup-write{min-height:80px;}

/* three-question test (let me first) */
.sup-test{counter-reset:tq; margin-top:20px;}
.sup-test .tq{
  display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start;
  padding:16px 0; border-top:1px solid var(--line);
}
.sup-test .tq:first-child{border-top:none;}
.sup-test .tq::before{
  counter-increment:tq; content:counter(tq);
  width:30px; height:30px; border-radius:50%; background:var(--panel-tint); color:var(--dark-azure);
  display:flex; align-items:center; justify-content:center; font-family:'League Spartan'; font-weight:800; font-size:.86rem;
}
.sup-test .tq label{display:block; font-size:1rem; color:#22384a; margin-bottom:9px; line-height:1.6;}

/* ---------- DATA TABLE (manuscripts, sources, variants) ---------- */
.sup-table-wrap{
  margin-top:22px; overflow-x:auto; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm); background:#fff;
}
.sup-table{width:100%; border-collapse:collapse; font-size:.92rem; white-space:nowrap;}
.sup-table thead th{
  background:var(--dark-azure); color:#fff; font-family:'League Spartan'; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; font-size:.7rem; text-align:left;
  padding:12px 16px;
}
.sup-table td{padding:12px 16px; border-top:1px solid var(--line); color:#2b4457; line-height:1.5; white-space:normal;}
.sup-table tbody tr:first-child td{border-top:none;}
.sup-table tbody tr:nth-child(even){background:var(--off-white);}
.sup-table tbody tr.hl td{background:linear-gradient(180deg,var(--light-azure),#eaf6fc);}
.sup-table td strong{color:var(--dark-azure); font-weight:600;}
.sup-table-caption{
  margin-top:10px; font-size:.86rem; color:var(--gray-azure); font-weight:300; font-style:italic;
}

/* ---------- FLOWCHART GATES (Was My Baptism Biblical?) ---------- */
.sup-flow{margin-top:28px;}
.sup-gate{
  border:1px solid var(--line); border-radius:var(--r); background:#fff; box-shadow:var(--sh-sm);
  padding:0 28px; opacity:0; transform:translateY(8px); max-height:0; overflow:hidden;
  visibility:hidden; border-width:0; transition:opacity .3s ease, transform .3s ease;
}
.sup-gate.is-shown{opacity:1; transform:none; max-height:none; overflow:visible; visibility:visible; padding:26px 28px; border-width:1px;}
.sup-gate-connector{
  width:2px; height:26px; background:var(--line); margin:0 auto; transition:opacity .3s ease;
  opacity:0;
}
.sup-gate-connector.is-shown{opacity:1;}
.sup-gate .gnum{
  width:30px; height:30px; border-radius:50%; background:var(--dark-azure); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:'League Spartan';
  font-weight:800; font-size:.86rem; margin-bottom:14px;
}
.sup-gate h3{font-size:1.15rem; font-weight:800; color:var(--ink); line-height:1.35;}
.sup-gate .support{margin-top:10px; font-size:.98rem; color:var(--muted); font-weight:300; line-height:1.65;}
.sup-gate .answers{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap;}
.sup-gate .gbtn{
  font-family:'League Spartan'; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.8rem; padding:11px 26px; border-radius:999px; cursor:pointer; transition:all .15s;
  border:1.5px solid var(--line); background:#fff; color:var(--dark-azure);
}
.sup-gate .gbtn:hover{border-color:var(--gold-deep); color:var(--gold-deep);}
.sup-gate.is-answered .gbtn{opacity:.4; pointer-events:none;}
.sup-gate.is-answered .gbtn.chosen{opacity:1; background:var(--dark-azure); border-color:var(--dark-azure); color:var(--gold);}
.sup-gate .outcome{
  display:none; margin-top:18px; padding:16px 18px; border-radius:12px; font-size:.96rem;
  line-height:1.65; font-weight:300;
}
.outcome .ol{margin-top:12px;}
.outcome .ol:first-child{margin-top:0;}
.outcome .ol-lbl{
  display:block; font-family:'League Spartan'; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; font-size:.68rem; margin-bottom:3px;
}
.outcome-no .ol-lbl{color:#a85454;}
.sup-flow-final{
  margin-top:0; border-radius:var(--r); padding:0 28px; text-align:center;
  opacity:0; max-height:0; overflow:hidden; visibility:hidden; transition:opacity .3s ease;
}
.sup-flow-final.is-shown{opacity:1; max-height:none; overflow:visible; visibility:visible; padding:26px 28px;}
.sup-flow-final.match{background:linear-gradient(150deg,var(--azure-800),var(--azure-deep)); color:#fff;}
.sup-flow-final.match p{color:rgba(255,255,255,.9); font-weight:300; line-height:1.7;}
.sup-flow-final.no-match{border:1.5px solid #d9a3a3; background:#fbeeee;}
.sup-flow-final.no-match p{color:#7a3a3a; font-weight:300; line-height:1.7;}

/* Certainty meter — one segment per gate, shown atop the final summary. */
.certainty{margin-bottom:22px;}
.certainty-bar{display:flex; gap:6px; justify-content:center; margin-bottom:10px;}
.certainty-bar .seg{width:44px; height:8px; border-radius:999px; background:rgba(0,0,0,.12);}
.sup-flow-final.match .certainty-bar .seg{background:rgba(255,255,255,.25);}
.certainty-bar .seg-yes{background:var(--gold);}
.certainty-label{font-family:'League Spartan'; font-weight:800; font-size:1rem; text-transform:uppercase; letter-spacing:.04em;}
.sup-flow-final.match .certainty-label{color:#fff;}
.sup-flow-final.no-match .certainty-label{color:var(--dark-azure);}
.certainty-sub{font-size:.9rem; margin-top:4px; font-weight:300;}
.sup-flow-final.match .certainty-sub{color:rgba(255,255,255,.85);}
.sup-flow-final.no-match .certainty-sub{color:#7a3a3a;}

/* Per-gate detail cards inside the no-match summary. */
.flagged-item{text-align:left; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.55); border:1px solid #e3bcbc; margin-top:14px;}
.flagged-item .gate-tag{
  display:block; font-family:'League Spartan'; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; font-size:.68rem; color:#a85454; margin-bottom:8px;
}
.flagged-item .ol{margin-top:10px;}
.flagged-item .ol:first-of-type{margin-top:0;}
.flagged-item .ol-lbl{
  display:block; font-family:'League Spartan'; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; font-size:.68rem; margin-bottom:3px; color:#a85454;
}

/* ---------- INLINE "TALK TO SOMEONE" (Was My Baptism Biblical, no-match) ---------- */
.sup-talk{margin-top:22px; text-align:left;}
.sup-talk-done{
  padding:16px 18px; border-radius:12px; background:rgba(255,255,255,.7); border:1px solid #d9a3a3;
}
.sup-talk-done strong{
  display:block; color:var(--dark-azure); font-family:'League Spartan'; font-weight:800;
  font-size:.88rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;
}
.sup-talk-done span{color:#7a3a3a; font-size:.94rem; font-weight:300;}
.sup-talk-form label{display:block; font-size:.9rem; color:#7a3a3a; margin-bottom:8px; line-height:1.55;}
.sup-talk-form textarea, .sup-talk-form input[type=text], .sup-talk-form input[type=email]{
  width:100%; min-height:74px; resize:vertical; border:1.5px solid #e3bcbc; border-radius:12px;
  padding:12px 14px; font-family:'Jost'; font-size:.96rem; color:#5a2f2f; background:#fff;
  line-height:1.6; transition:border-color .15s, box-shadow .15s;
}
.sup-talk-form input[type=text], .sup-talk-form input[type=email]{min-height:0;}
.sup-talk-form textarea::placeholder, .sup-talk-form input::placeholder{color:#c99;}
.sup-talk-form textarea:focus, .sup-talk-form input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(253,208,90,.2);}
.sup-talk-anon-fields{margin-bottom:14px;}
.sup-talk-anon-fields .field{margin-bottom:12px;}
.sup-talk-actions{display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px; flex-wrap:wrap;}
.sup-talk-note{font-size:.84rem; color:#7a3a3a; margin-right:auto; font-weight:300;}
.sup-talk-note.err{color:#b3261e; font-weight:600;}
.sup-flow-reset{
  display:block; margin:24px auto 0; cursor:pointer; padding:12px 30px; border-radius:999px;
  font-family:'League Spartan'; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.78rem; background:#fff; border:1.5px solid var(--line); color:var(--dark-azure);
  box-shadow:var(--sh-sm); transition:all .15s;
}
.sup-flow-reset:hover{border-color:var(--gold-deep); color:var(--gold-deep); box-shadow:var(--sh-md);}

/* ---------- FOOTER CTA ---------- */
.sup-cta{
  margin-top:52px; border-radius:var(--r); overflow:hidden; position:relative;
  background:linear-gradient(150deg,var(--azure-800),var(--azure-deep)); box-shadow:var(--sh-lg);
}
.sup-cta::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(460px 300px at 88% -20%, rgba(253,208,90,.20), transparent 70%);
}
.sup-cta .inner{position:relative; z-index:1; padding:40px 38px; text-align:center;}
.sup-cta img{width:52px; height:52px; margin:0 auto 16px; display:block;}
.sup-cta h3{color:#fff; font-size:1.35rem; margin-bottom:12px;}
.sup-cta p{color:rgba(255,255,255,.82); font-weight:300; font-size:1rem; line-height:1.75; max-width:500px; margin:0 auto 24px;}
.sup-cta .btn-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

/* ---------- BACK LINE + PRINT ---------- */
.sup-foot-nav{
  margin-top:34px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; border-top:1px solid var(--line); padding-top:24px;
}
.btn-print{
  display:inline-flex; align-items:center; gap:7px; background:none; border:0; cursor:pointer;
  font-family:'League Spartan'; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  font-size:.74rem; color:var(--gray-azure); padding:6px 2px; transition:color .15s;
}
.btn-print svg{width:15px; height:15px;}
.btn-print:hover{color:var(--dark-azure);}

/* =====================================================================
   SHROUD REVEAL  (native in-browser color invert)
   ===================================================================== */
.sup-shroud{margin-top:26px;}
.sup-shroud .reveal-bar{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-bottom:22px;
}
.sup-shroud .hint{font-size:.9rem; color:var(--gray-azure); font-weight:300;}
.sup-figs{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.sup-fig{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#111820;
  box-shadow:var(--sh-md); text-align:center;
}
.sup-fig .imgbox{background:#0d1319; padding:14px; overflow:hidden;}
.sup-fig img{
  display:block; margin:0 auto; width:100%; height:auto; border-radius:6px;
  transition:filter .5s ease;
}
.sup-shroud.is-revealed .sup-fig img{filter:invert(1) contrast(1.08) brightness(1.05);}
.sup-fig figcaption{
  padding:14px 16px; font-size:.9rem; color:var(--muted-2); font-weight:300; background:#fff;
}
.sup-fig figcaption b{display:block; font-family:'League Spartan'; font-weight:700; color:var(--dark-azure); text-transform:uppercase; letter-spacing:.05em; font-size:.74rem; margin-bottom:4px;}
.sup-shroud .after-note{
  margin-top:22px; padding:18px 22px; border-radius:12px; background:var(--panel-tint);
  border-left:3px solid var(--gold); font-size:.98rem; color:#2b4457; line-height:1.7; font-weight:300;
}
.sup-shroud .after-note strong{color:var(--dark-azure); font-weight:600;}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ---------- SUPPLEMENT INDEX LIST (more.html) ---------- */
.sup-index{margin-top:18px; display:flex; flex-direction:column; gap:12px;}
.sup-index-item{
  display:flex; align-items:center; gap:16px; padding:16px 18px;
  border:1px solid var(--line); border-radius:12px; background:var(--off-white);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.sup-index-item:hover{border-color:var(--gold); box-shadow:var(--sh-sm); transform:translateY(-1px);}
.sup-index-ic{
  flex:none; width:38px; height:38px; border-radius:10px; background:var(--light-azure);
  display:flex; align-items:center; justify-content:center; color:var(--dark-azure);
}
.sup-index-ic svg{width:18px; height:18px;}
.sup-index-body{flex:1; min-width:0;}
.sup-index-t{display:block; font-family:'League Spartan'; font-weight:700; color:var(--dark-azure); font-size:1rem;}
.sup-index-d{display:block; margin-top:3px; color:var(--muted); font-size:.9rem; font-weight:300; line-height:1.5;}
.sup-index-act{flex:none; text-align:right;}
.sup-index-meta{display:block; font-size:.7rem; color:var(--gray-azure); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:4px;}
.sup-index-go{font-family:'League Spartan'; font-weight:700; font-size:.78rem; color:var(--gold-deep);}

/* ---------- ASK A QUESTION (more.html) ---------- */
.sup-ask-head p{margin-top:8px;}
.sup-ask-thread{margin-top:18px; display:flex; flex-direction:column; gap:14px;}
.sup-ask-thread .ask-item{border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; background:var(--off-white);}
.sup-ask-thread .who{font-family:'League Spartan'; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.7rem; color:var(--gray-azure);}
.sup-ask-thread p{margin-top:6px; color:#2b4457; font-size:.96rem; line-height:1.6; font-weight:300;}
.sup-ask-thread .ask-answer{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line);}
.sup-ask-thread .ask-answer .who{color:var(--gold-deep);}
.sup-ask-thread .ask-pending{margin-top:10px; font-size:.86rem; color:var(--gray-azure); font-weight:300; font-style:italic;}
.sup-ask-form{margin-top:20px;}
.sup-ask-form label{display:block; font-size:.9rem; color:#22384a; margin-bottom:8px; line-height:1.55;}
.sup-ask-form textarea, .sup-ask-form input[type=text], .sup-ask-form input[type=email], .sup-ask-form select{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:'Jost'; font-size:.96rem; color:var(--ink); background:#fff; resize:vertical; min-height:90px;
}
.sup-ask-form input[type=text], .sup-ask-form input[type=email], .sup-ask-form select{min-height:0;}
.sup-ask-form textarea::placeholder, .sup-ask-form input::placeholder{color:#9fb0bc;}
.sup-ask-form textarea:focus, .sup-ask-form input:focus, .sup-ask-form select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(253,208,90,.2);}
.sup-ask-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.sup-ask-field{margin-bottom:14px;}
.sup-ask-actions{display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:6px; flex-wrap:wrap;}
.sup-ask-note{font-size:.84rem; color:var(--muted); margin-right:auto; font-weight:300;}
.sup-ask-note.err{color:#b3261e; font-weight:600;}
.sup-ask-note.ok{color:#2f7a4d; font-weight:600;}
.sup-ask-done{
  border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:var(--r);
  padding:22px 24px; background:linear-gradient(180deg,var(--panel-tint),#fff);
}
.sup-ask-done strong{display:block; color:var(--dark-azure); font-family:'League Spartan'; font-weight:800; margin-bottom:4px;}
.sup-ask-done span{color:var(--muted); font-size:.94rem; font-weight:300;}

/* ---------- FOOTER (site) ---------- */
footer.sup-site{padding:52px 0 40px; border-top:1px solid var(--line); background:#fff; margin-top:20px;}
.sup-site .foot{max-width:820px; margin:0 auto; padding:0 28px; display:flex; align-items:center; gap:12px; justify-content:center; text-align:center; flex-direction:column;}
.sup-site .mark{width:40px; height:40px;}
.sup-site .ft{font-family:'League Spartan'; font-weight:800; color:var(--dark-azure);}
.sup-site .copy{font-size:.8rem; color:#8496a2; margin-top:4px;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:680px){
  .sup-contrast{grid-template-columns:1fr;}
  .sup-grid4{grid-template-columns:1fr;}
  .sup-figs{grid-template-columns:1fr; max-width:420px; margin:0 auto;}
  .sup-fillrow{grid-template-columns:1fr; gap:8px;}
  .sup-pair .pair-cells{grid-template-columns:1fr;}
  .sup-pair .cell + .cell{border-left:none; border-top:1px solid var(--line);}
  .sup-topbar .brand span{display:none;}
  .sup-index-item{flex-wrap:wrap;}
  .sup-index-act{text-align:left; margin-left:54px;}
  .sup-ask-row{grid-template-columns:1fr;}
}

/* =====================================================================
   PRINT — clean handout, keep the worksheets fillable on paper
   ===================================================================== */
@media print{
  @page{margin:14mm;}
  header.sup-topbar, .sup-cta, .sup-foot-nav, footer.sup-site, .sup-shroud .reveal-bar{display:none !important;}
  body{background:#fff; color:#000;}
  .sup-wrap{max-width:none; padding:0;}
  .sup-hero h1{font-size:22pt;}
  .sup-hero .swoosh{display:none;}
  .sup-section, .sup-card, .sup-reason, .sup-quad, .sup-pair, .sup-point{break-inside:avoid; page-break-inside:avoid;}
  .sup-card, .sup-reason, .sup-quad, .sup-point{box-shadow:none;}
  .sup-callout{background:none; color:#000; border:1pt solid #000; box-shadow:none;}
  .sup-callout .tag, .sup-callout p, .sup-callout p strong{color:#000;}
  .sup-quote{background:none; border:1pt solid #999;}
  .sup-write{background:none; border:none; border-bottom:1pt solid #999; border-radius:0; min-height:40pt;}
  .sup-fig img{filter:none !important;}
  .sup-cta, a[href]::after{content:"";}
  .sup-table-wrap{box-shadow:none; border:1pt solid #999;}
  .sup-table thead th{background:none !important; color:#000 !important; border-bottom:1pt solid #000;}
  .sup-table tbody tr:nth-child(even){background:none;}
  .sup-table tbody tr.hl td{background:none; font-weight:700;}
  .sup-gate, .sup-gate-connector, .sup-flow-final{opacity:1 !important; max-height:none !important; overflow:visible !important; visibility:visible !important; transform:none !important;}
  .sup-gate{box-shadow:none; break-inside:avoid; padding:26px 28px !important; border-width:1px !important;}
  .sup-gate .answers, .sup-flow-reset{display:none !important;}
  .sup-gate .outcome{display:block !important; background:none !important; border:1pt dashed #999; color:#000 !important;}
  .outcome .ol-lbl{color:#000 !important;}
  .sup-flow-final{display:none !important;}
}

/* =====================================================================
   BURIAL/RESURRECTION DIAGRAM (supplement-baptism.html)
   Jesus' death-burial-resurrection, and the same pattern in baptism,
   as two small line-drawing panels. Original artwork.
   ===================================================================== */
.sup-bdiagram{margin-top:28px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:32px 30px; box-shadow:var(--sh-sm);}
.bd-panel + .bd-panel{margin-top:30px; padding-top:30px; border-top:1px solid var(--line);}
.bd-kicker{display:block; text-align:center; font-family:'League Spartan'; font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--gray-azure); margin-bottom:14px;}
.bd-panel svg{display:block; width:100%; height:auto; overflow:visible;}
.bd-ground,.bd-grave,.bd-wave{fill:none; stroke:var(--dark-azure); stroke-width:6; stroke-linecap:round; stroke-linejoin:round;}
.bd-wave{stroke-width:5;}
.bd-arrow{fill:none; stroke:var(--dark-azure); stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round;}
.bd-cross rect{fill:var(--dark-azure);}
.bd-water{fill:var(--gold); fill-opacity:.24; stroke:none;}
.bd-label{font-family:'League Spartan'; font-weight:700; fill:var(--dark-azure);}
.bd-label-left{text-anchor:start;}
.bd-label-center{text-anchor:middle;}
@media (max-width:600px){
  .sup-bdiagram{padding:22px 14px;}
}
@media print{
  .sup-bdiagram{box-shadow:none; break-inside:avoid; print-color-adjust:exact; -webkit-print-color-adjust:exact;}
}

/* =====================================================================
   FROM RESPONSE TO NEW LIFE DIAGRAM (supplement-baptism.html)
   The full arc: belief and repentance, buried with Christ in baptism,
   raised to a new life that keeps being shaped. Original artwork.
   ===================================================================== */
.sup-rdiagram{margin-top:28px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:32px 30px 26px; box-shadow:var(--sh-sm);}
.sup-rdiagram svg{display:block; width:100%; height:auto; overflow:visible;}
.rd-label{font-family:'League Spartan'; font-weight:800; letter-spacing:.08em; fill:var(--dark-azure); text-anchor:middle;}
.rd-label-sub{font-family:'Jost',sans-serif; font-weight:400; letter-spacing:normal; fill:var(--gray-azure);}
.rd-pill text{font-family:'League Spartan'; font-weight:700; letter-spacing:.05em; text-anchor:middle;}
.rd-pill rect{stroke-width:1.5;}
.rd-pill-point rect{fill:#eaf4fb; stroke:#cfe2f2;}
.rd-pill-point text{fill:var(--dark-azure);}
.rd-pill-process rect{fill:#fdf3d6; stroke:#f4e2a6;}
.rd-pill-process text{fill:#8a6a12;}

.rd-steps{margin-top:26px; display:flex; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-sm); overflow:hidden;}
.rd-step{flex:1; padding:26px 22px; text-align:center;}
.rd-step + .rd-step{border-left:1px solid var(--line);}
.rd-step-title{font-family:'League Spartan'; font-weight:800; letter-spacing:.02em; text-transform:uppercase; color:var(--dark-azure); font-size:1rem;}
.rd-step-bar{display:block; width:38px; height:4px; background:var(--gray-azure); border-radius:3px; margin:11px auto 14px;}
.rd-step-gold .rd-step-bar{background:var(--gold);}
.rd-step p{font-size:.92rem; line-height:1.5; color:var(--ink);}
.rd-step-ref{display:block; margin-top:10px; font-size:.78rem; color:var(--gray-azure);}

@media (max-width:700px){
  .rd-steps{flex-direction:column;}
  .rd-step + .rd-step{border-left:none; border-top:1px solid var(--line);}
}
@media (max-width:600px){
  .sup-rdiagram{padding:22px 14px;}
}
@media print{
  .sup-rdiagram,.rd-steps{box-shadow:none; break-inside:avoid; print-color-adjust:exact; -webkit-print-color-adjust:exact;}
}