:root{
  --black:#0B0B0D; --raise:#141418; --ember:#D4743A; --gold:#C9A84C; --gold-lt:#E2C478; --cream:#F0EAD6;
  --dim:rgba(240,234,214,.62); --line:rgba(240,234,214,.22);
  --cond:"Haettenschweiler","Arial Narrow Bold","Arial Narrow",Impact,"Helvetica Neue",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--black);color:var(--cream);font:16px/1.6 var(--sans);text-wrap:pretty;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(240,234,214,.045) 0 1px,transparent 1px 4px)}
h1,h2,h3{text-wrap:balance;line-height:.95;font-weight:700}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px;position:relative;z-index:2}

/* ---------- header ---------- */
header{border-bottom:3px solid var(--cream);position:sticky;top:0;z-index:30;background:var(--black)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:34px;height:34px;display:block}
.wordmark{font-family:var(--cond);font-size:34px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream);line-height:1}
.parent{display:block;font:700 9px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ember);margin-top:3px}
nav ul{list-style:none;display:grid;grid-template-columns:repeat(6,auto);gap:5px 6px}
nav a,nav button{display:block;width:100%;text-align:center;text-decoration:none;color:var(--cream);
  background:none;border:2px solid transparent;
  font:800 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:9px 10px;cursor:pointer}
nav a:hover,nav button:hover,nav a.on,nav button.on{border-color:var(--ember);color:var(--ember)}

/* ---------- view tabs ---------- */
.tabs{display:grid;grid-template-columns:1fr 1fr;border:3px solid var(--cream);margin:26px 0 24px;
  background:var(--black)}
.tab{background:none;border:none;color:var(--cream);font-family:var(--cond);font-size:clamp(22px,4.2vw,34px);
  letter-spacing:.07em;text-transform:uppercase;padding:14px 8px;cursor:pointer;line-height:1.05}
.tab+.tab{border-left:3px solid var(--cream)}
.tab.on{background:var(--cream);color:var(--black)}
.view{display:none}
.view.on{display:block}

/* ---------- deck ---------- */
.deck{padding:6px 0 60px}
.tape{display:inline-block;background:var(--ember);color:var(--black);font:800 11px/1 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;padding:8px 16px;transform:rotate(-1.6deg);margin-bottom:22px}
.stage{border:3px solid var(--cream);padding:clamp(22px,4vw,48px);position:relative;overflow:hidden;
  background:linear-gradient(160deg,#111114,#0B0B0D 60%)}
.stage.done{border-color:var(--ember)}
.no{font-family:var(--cond);font-size:clamp(60px,13vw,150px);color:rgba(240,234,214,.09);position:absolute;
  top:-12px;right:18px;line-height:1;pointer-events:none;user-select:none}
.cat{font:800 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.lie{font-family:var(--cond);font-size:clamp(40px,10vw,112px);text-transform:uppercase;letter-spacing:.005em;
  max-width:17ch;position:relative}
/* the strike is a second copy of the same words laid exactly on top of the real ones with its own text
   turned invisible. a background can never paint above the letters of its own element, so the bar has to
   live in a layer of its own. this copy is positioned, which puts it above the real text in paint order,
   and its letters are transparent, so all you ever see from it is the ember bar. inside it one inline span
   fragments once per wrapped line and clone gives every fragment its own background box, so a two, three or
   four line lie gets a bar on every line and they all sweep across together. */
.lie{position:relative}
.lie .txt,.lie .strike{display:inline}
.lie .strike{
  position:absolute;left:0;top:0;width:100%;
  color:transparent;
  pointer-events:none;
  -webkit-user-select:none;user-select:none;
}
.lie .strike i{
  display:inline;
  font-style:inherit;
  background-image:linear-gradient(to right,var(--ember),var(--ember));
  background-repeat:no-repeat;
  background-position:0 57%;
  background-size:0% clamp(6px,1.05vw,12px);
  transition:background-size .5s cubic-bezier(.5,0,.2,1);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.stage.done .lie .strike i{background-size:100% clamp(6px,1.05vw,12px)}
.variants{margin-top:20px;font-size:14px;color:var(--dim);font-style:italic;max-width:60ch}
.claims{margin-top:16px;font-size:16.5px;color:rgba(240,234,214,.82);max-width:62ch;
  border-left:3px solid var(--gold);padding-left:16px}
.stamp{position:absolute;top:clamp(56px,11vw,120px);right:clamp(14px,3.5vw,54px);border:5px solid var(--ember);
  color:var(--ember);font:800 clamp(17px,2.5vw,29px)/1 var(--sans);letter-spacing:.12em;padding:12px 18px;
  transform:rotate(-13deg) scale(.5);opacity:0;transition:.35s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.stage.done .stamp{opacity:1;transform:rotate(-13deg) scale(1)}
.reveal{max-height:0;overflow:hidden;transition:max-height .55s ease}
.stage.done .reveal{max-height:3000px;margin-top:34px}
.rline{height:3px;background:var(--cream);margin-bottom:26px}
.rlabel{font:800 11px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ember);margin-bottom:18px}
.verse{border-left:4px solid var(--gold);padding:2px 0 2px 18px;margin-bottom:22px;max-width:66ch}
.verse b{display:block;font:800 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:8px}
.verse p{font-size:18px;line-height:1.55}
.truth{background:var(--cream);color:var(--black);padding:22px 24px;max-width:66ch}
.truth span{display:block;font:800 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;
  color:var(--ember);margin-bottom:10px}
.truth p{font-size:19px;font-weight:600;line-height:1.4;text-wrap:balance}

.pad{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.big{font-family:var(--cond);font-size:30px;letter-spacing:.08em;text-transform:uppercase;background:var(--ember);
  color:var(--black);border:none;padding:14px 34px;cursor:pointer;line-height:1}
.big:hover{background:var(--gold)}
.big[disabled]{background:#2a2a2f;color:rgba(240,234,214,.4);cursor:default}
.ghost{background:none;border:2px solid var(--cream);color:var(--cream);font:800 12px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;padding:14px 20px;cursor:pointer}
.ghost:hover{border-color:var(--ember);color:var(--ember)}
.meter{display:flex;align-items:center;gap:14px;margin:26px 0 8px;flex-wrap:wrap}
.track{flex:1 1 220px;height:8px;background:#1c1c21;border:1px solid var(--line)}
.fill{height:100%;background:var(--ember);width:0;transition:width .3s}
.tally{font-family:var(--cond);font-size:26px;letter-spacing:.05em;color:var(--gold);white-space:nowrap}
.jump{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}
.jump button{width:38px;height:38px;background:none;border:1px solid var(--line);color:var(--cream);
  font:800 12px/1 var(--sans);cursor:pointer}
.jump button.on{background:var(--cream);color:var(--black);border-color:var(--cream)}
.jump button.hit{border-color:var(--ember);color:var(--ember)}
.jump button.hit.on{background:var(--ember);color:var(--black)}

/* ---------- browse ---------- */
.browse{padding:6px 0 60px}
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.find{flex:1 1 300px;position:relative}
.find input{width:100%;padding:15px 16px 15px 46px;border:3px solid var(--cream);background:var(--raise);
  color:var(--cream);font:16px/1.2 var(--sans)}
.find input::placeholder{color:rgba(240,234,214,.45)}
.find input:focus{outline:none;border-color:var(--ember)}
.find svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ember)}
.found{font-family:var(--cond);font-size:24px;letter-spacing:.05em;color:var(--gold);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:26px}
.chip{border:2px solid var(--line);background:none;color:var(--cream);padding:8px 14px;cursor:pointer;
  font:800 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.chip:hover{border-color:var(--ember);color:var(--ember)}
.chip.on{background:var(--ember);border-color:var(--ember);color:var(--black)}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1px;
  background:var(--line);border:3px solid var(--cream)}
.bcard{background:var(--black);padding:24px 22px 20px;display:flex;flex-direction:column}
.bcard:hover{background:var(--raise)}
.bk{font:800 11px/1 var(--sans);letter-spacing:.2em;color:var(--ember);margin-bottom:13px}
.bcard h3{font-family:var(--cond);font-size:34px;text-transform:uppercase;line-height:.98;margin-bottom:13px;
  text-decoration:line-through;text-decoration-color:var(--ember);text-decoration-thickness:5px}
.bcat{font:800 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.bverse{border-left:3px solid var(--gold);padding-left:13px;margin-bottom:14px;font-size:14.5px;color:var(--dim)}
.bverse b{display:block;font:800 10px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-lt);margin-bottom:6px}
.btruth{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:15px}
.btruth span{display:block;font:800 9.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ember);margin-bottom:7px}
.bacts{display:flex;gap:7px;flex-wrap:wrap;margin-top:15px}
.sm{background:none;border:2px solid var(--line);color:var(--cream);padding:8px 12px;cursor:pointer;
  font:800 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.sm:hover{border-color:var(--ember);color:var(--ember)}
.sm.fill{background:var(--ember);border-color:var(--ember);color:var(--black)}
.nores{grid-column:1/-1;background:var(--black);padding:60px 22px;text-align:center;color:var(--dim);
  font-style:italic}

/* ---------- meme modal ---------- */
.modal{position:fixed;inset:0;background:rgba(11,11,13,.96);z-index:70;display:none;overflow-y:auto;
  padding:26px 20px 60px}
.modal.on{display:block}
.mbox{max-width:1000px;margin:0 auto}
.mbox h2{font-family:var(--cond);font-size:clamp(30px,5.4vw,46px);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:3px solid var(--cream);padding-bottom:12px;margin-bottom:22px}
.mgrid{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.cvbox{display:flex;justify-content:center;background:var(--raise);border:3px solid var(--cream);padding:16px}
#cv{max-width:100%;max-height:62vh;width:auto;height:auto;display:block}
.mfield{margin-bottom:18px}
.mfield label{display:block;font:800 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ember);margin-bottom:9px}
.mfield select{width:100%;padding:11px;background:var(--raise);color:var(--cream);border:2px solid var(--line);
  font:14px/1.3 var(--sans)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--line)}
.seg button{background:none;border:none;color:var(--cream);padding:11px 4px;cursor:pointer;
  font:800 10px/1.35 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.seg button+button{border-left:2px solid var(--line)}
.seg button.on{background:var(--ember);color:var(--black)}
.seg small{display:block;font-weight:700;opacity:.75;font-size:9px;margin-top:4px;letter-spacing:.04em}
.sws{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:48px;height:48px;border:3px solid transparent;cursor:pointer}
.sw.on{border-color:var(--ember)}
.mclose{position:fixed;top:16px;right:18px;background:var(--black);border:2px solid var(--cream);color:var(--cream);
  width:42px;height:42px;font-size:20px;cursor:pointer;z-index:71}
.mclose:hover{border-color:var(--ember);color:var(--ember)}
.dlnote{font-size:12px;color:var(--dim);margin-top:10px;text-wrap:pretty}

/* balance, not pretty: this quotation is short enough that the browser can even out every line, which
   stops "obey Christ," from dropping onto a line by itself at certain widths */
.note{border:2px dashed var(--line);padding:14px 18px;font-size:13.5px;color:var(--dim);margin-bottom:24px;
  text-wrap:balance}
footer{border-top:3px solid var(--cream);margin-top:40px;padding:30px 0 56px;font-size:14px;color:var(--dim)}
footer a{color:var(--ember);text-decoration:none}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);background:var(--ember);color:var(--black);
  padding:13px 24px;font:800 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:0;
  transition:.3s;z-index:90}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- balanced collapse: 6 nav items go 6 -> 3x3 -> 2x2x2 ---------- */
@media (max-width:1040px){
  .bar{flex-direction:column;gap:14px}
  nav ul{grid-template-columns:repeat(3,1fr);width:100%}
  /* once the nav needs more than one row the header is too tall to pin to a phone screen,
     so it scrolls away and the compact view switch becomes the sticky control instead */
  header{position:static}
  .tabs{position:sticky;top:0;z-index:25;margin-top:18px}
  /* below this width the angled corner stamp lands on top of the headline, so it drops
     underneath the lie instead and keeps its stamped-on entrance */
  .stamp{position:static;display:inline-block;margin-top:clamp(20px,5vw,56px);transform-origin:left center;
    transform:rotate(-4deg) scale(.5)}
  .stage.done .stamp{transform:rotate(-4deg) scale(1)}
}
@media (max-width:900px){
  .mgrid{grid-template-columns:1fr}
  #cv{max-height:46vh}
}
@media (max-width:640px){
  nav ul{grid-template-columns:repeat(2,1fr)}
  .big{font-size:24px;padding:13px 24px;width:100%;text-align:center}
  .ghost{flex:1 1 44%}
  .bgrid{grid-template-columns:1fr}
  .seg{grid-template-columns:1fr}
  .seg button+button{border-left:none;border-top:2px solid var(--line)}
}

/* ---------- accessibility ---------- */
/* every control shows a thick, high contrast ring when reached by keyboard. cream is used rather than
   ember so the ring stays legible on the ember filled buttons as well as on the blackout ground. */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:3px solid var(--cream);outline-offset:3px}
.tab.on:focus-visible,.jump button.on:focus-visible{outline-color:var(--ember)}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--cream);color:var(--black);
  font:800 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:14px 18px}
.skip:focus{left:0}

/* ---------- progress reset ---------- */
.reset{background:none;border:1px solid var(--line);color:var(--dim);font:800 10px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;padding:9px 12px;cursor:pointer}
.reset:hover{border-color:var(--ember);color:var(--ember)}

/* ---------- the mission verse ---------- */
#creed{margin-top:34px}
#creed strong{color:var(--gold-lt)}

/* ---------- footer ---------- */
.fmark{width:38px;height:38px;display:block;margin-bottom:14px}
footer p+p{margin-top:6px}
.fverse{color:var(--gold);font-style:italic}
.fkeys{margin-top:14px;font-size:13px}