@font-face{
  font-family:Anton;
  src:url('/assets/anton.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap}

:root{
  --ink:#171815;
  --surface:#23241f;
  --paper:#efebdf;
  --muted:#b7b7a8;
  --line:#4e5045;
  --acid:#e4ef48;
  --display:Anton,Impact,'Arial Narrow',sans-serif;
  --body:Arial,Helvetica,sans-serif;
  color-scheme:dark;
  font-family:var(--body);
  color:var(--paper);
  background:var(--ink);
  font-synthesis:none;
  scroll-padding-top:1.5rem}

*{
  box-sizing:border-box}
body{
  margin:0;
  font-size:1rem;
  line-height:1.6}
h1,h2,h3,p{
  margin:0}
h1,h2,h3{
  text-wrap:balance;
  overflow-wrap:anywhere}
h1,h2,h3,.brand,.footer-brand{
  font-weight:400}
button,input{
  font:inherit}
button,a,input{
  -webkit-tap-highlight-color:transparent}
button,a{
  touch-action:manipulation}
a{
  color:inherit;
  text-decoration:none}
button{
  color:inherit;
  cursor:pointer}
button,input{
  border-radius:0}
button{
  background:transparent}
a,button,input{
  min-height:44px}
button{
  border:1px solid var(--line)}
button:disabled{
  cursor:default}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex='-1']:focus-visible{
  outline:3px solid var(--acid);
  outline-offset:5px}
input:focus-visible{
  outline-offset:2px}
section,article{
  scroll-margin-top:1.5rem}
[hidden]{
  display:none!important}
::selection{
  color:var(--ink);
  background:var(--acid)}
.wrap{
  width:min(100% - 5rem,1280px);
  margin-inline:auto}
.eyebrow{
  font-size:.6875rem;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700}
.index{
  font-family:var(--display);
  font-size:1.5rem;
  line-height:1;
  letter-spacing:.04em}
.skip-link{
  position:absolute;
  left:1rem;
  top:-10rem;
  background:var(--acid);
  color:var(--ink);
  padding:1rem;
  z-index:10}
.skip-link:focus{
  top:1rem}
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  border-bottom:1px solid var(--line);
  padding-block:1.3rem}
.brand{
  display:flex;
  flex-wrap:wrap;
  max-width:100%;
  align-items:center;
  min-height:48px;
  font:1.7rem/1 var(--display);
  letter-spacing:-.015em;
  white-space:nowrap}
.brand-end{
  color:var(--acid)}
.brand-mark{
  font-family:var(--body);
  font-size:1.6rem;
  margin-left:.8rem;
  color:var(--acid)}
nav{
  display:flex;
  gap:2rem;
  flex-wrap:wrap}
nav a{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.8125rem;
  font-weight:700}
nav a:hover{
  color:var(--acid)}
.hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
  padding-block:4.5rem 5rem}
.kicker{
  display:flex;
  gap:.65rem;
  align-items:center;
  margin-bottom:2rem}
.signal{
  display:block;
  width:7px;
  height:7px;
  background:var(--acid);
  flex-shrink:0}
h1{
  font-family:var(--display);
  font-size:clamp(5rem,8.3vw,7.5rem);
  line-height:1.045;
  letter-spacing:-.015em}
h1 span{
  color:var(--acid)}
.hero-description{
  font-size:1.0625rem;
  line-height:1.65;
  max-width:25rem;
  margin:1.8rem 0;
  color:#d0d0c4}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  font-weight:700;
  font-size:.8125rem;
  padding:1rem 1.3rem;
  min-height:54px;
  line-height:1.5;
  text-align:left;
  border:1px solid var(--line)}
.button span{
  font-size:1.25rem;
  line-height:1}
.button.primary{
  background:var(--acid);
  color:var(--ink);
  border-color:var(--acid)}
.button:hover{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper)}
.hero-footnote{
  font-size:.75rem;
  color:var(--muted);
  margin-top:1rem}
.feature{
  background:var(--paper);
  color:var(--ink);
  padding:1.75rem 2rem 0;
  margin-top:1rem;
  position:relative;
  border-top:.45rem solid var(--acid)}
.feature-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #a8a99b;
  padding-bottom:1rem}
.feature-cross{
  font-size:1.8rem;
  line-height:1}
.feature-theme{
  font-family:Georgia,serif;
  font-size:1rem;
  font-style:italic;
  margin:1.25rem 0 1.8rem}
.feature h2{
  font-family:var(--display);
  font-size:clamp(3.8rem,5.3vw,5.3rem);
  line-height:1.08;
  letter-spacing:-.02em}
.feature-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.8rem}
.feature-bottom p{
  font-size:1rem;
  line-height:1.5;
  font-weight:700}
.feature-arrow{
  font-size:3rem;
  line-height:1}
.origin{
  font-size:.6875rem;
  line-height:1.5;
  letter-spacing:.025em;
  opacity:.75}
.feature .origin{
  margin:1rem 0 1.5rem}
.feature-link{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  border-top:1px solid #a8a99b;
  padding:.9rem 0;
  font-size:.75rem;
  font-weight:700}
.feature-link:hover{
  text-decoration:underline}
.feature a:focus-visible{
  outline-color:var(--ink)}
.standard-strip{
  border-block:1px solid var(--line)}
.standard-strip .wrap{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-block:1.2rem;
  font-family:var(--display);
  font-size:1.25rem;
  letter-spacing:.035em}
.standard-strip span:nth-child(2){
  color:var(--acid)}
.section-space{
  padding-block:5rem}
.section-heading{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:clamp(2rem,6vw,6rem);
  align-items:end;
  margin-bottom:2.7rem}
.section-number{
  color:var(--muted);
  margin-bottom:1.1rem}
.section-heading h2{
  font-family:var(--display);
  font-size:clamp(2.5rem,3.4vw,3.25rem);
  line-height:1.15}
.section-heading h2 span{
  color:var(--muted)}
.section-intro{
  font-size:.9375rem;
  line-height:1.65;
  max-width:24rem;
  color:#d0d0c4}
.search-row{
  display:flex;
  gap:1rem;
  align-items:end}
.search-field{
  flex:1;
  min-width:0}
.search-field label{
  font-size:.75rem;
  font-weight:700;
  display:block;
  margin-bottom:.55rem}
.search-box{
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  background:#20211c}
.search-box span{
  font-size:1.7rem;
  line-height:1;
  padding-left:1rem;
  color:var(--acid)}
.search-box input{
  width:100%;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--paper);
  padding:.85rem 1rem;
  min-height:54px;
  font-size:.875rem}
.search-box input::placeholder{
  color:var(--muted)}
.saved-filter{
  min-height:54px;
  padding:.85rem 1.3rem;
  font-size:.8125rem;
  font-weight:700}
.filters{
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  margin-top:1.15rem}
.filters button{
  padding:.65rem .95rem;
  font-size:.75rem;
  line-height:1.5;
  border-color:transparent;
  color:var(--muted);
  min-height:44px}
.filters button:hover,.saved-filter:hover{
  border-color:var(--paper);
  color:var(--paper)}
.filters button[aria-pressed='true'],.saved-filter[aria-pressed='true']{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper)}
.collection-status{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  justify-content:space-between;
  font-size:.6875rem;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-block:1rem 1.2rem;
  margin-bottom:1.5rem}
#result-count{
  font-weight:700;
  color:var(--paper)}
.reminder-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem}
.reminder{
  --card-ink:var(--paper);
  --card-line:var(--line);
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:1.5rem;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--card-ink)}
.reminder.tone-0{
  --card-ink:var(--ink);
  --card-line:#acada0;
  background:var(--paper);
  border-color:var(--paper)}
.reminder:target{
  outline:3px solid var(--acid);
  outline-offset:3px}
.reminder.tone-0 button:focus-visible{
  outline-color:var(--ink)}
.card-top{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:2.1rem}
.card-top .eyebrow{
  opacity:.75}
.card-top .index{
  opacity:.5}
.reminder h3{
  font-family:var(--display);
  font-size:2.05rem;
  line-height:1.18;
  text-transform:uppercase;
  margin-bottom:1rem;
  max-width:16rem}
.card-body{
  font-size:.875rem;
  line-height:1.65;
  margin-bottom:1.5rem}
.card-action{
  border-top:1px solid var(--card-line);
  padding-top:1.2rem;
  margin-top:auto}
.card-action .eyebrow{
  opacity:.7}
.card-action p{
  font-size:.8125rem;
  line-height:1.6;
  margin-top:.5rem}
.reminder .origin{
  margin-top:1.2rem;
  font-size:.625rem}
.card-tools{
  display:flex;
  justify-content:space-between;
  gap:.7rem;
  flex-wrap:wrap;
  border-top:1px solid var(--card-line);
  padding-top:.5rem;
  margin-top:1rem}
.card-tools button{
  border:0;
  padding:0 .2rem;
  font-size:.75rem;
  font-weight:700;
  min-width:44px;
  line-height:1.5}
.card-tools button:hover{
  text-decoration:underline}
.save-button[aria-pressed='true']{
  text-decoration:underline}
.copy-button span{
  padding-left:.5rem}
.save-button>span:first-child{
  font-size:1.15rem;
  vertical-align:middle}
.empty-state{
  border:1px solid var(--line);
  padding:3rem;
  text-align:center}
.empty-state h3{
  font-family:var(--display);
  font-size:2rem}
.empty-state p{
  margin:1rem 0}
.empty-state .button{
  background:var(--paper);
  color:var(--ink)}
.challenge-section{
  background:var(--acid);
  color:var(--ink);
  padding-block:4rem}
.challenge-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem}
.challenge-section .section-number{
  color:var(--ink)}
.challenge-section h2{
  font-family:var(--display);
  font-size:clamp(3.5rem,5vw,4.5rem);
  line-height:1.12}
.challenge-section h2+p{
  font-size:.875rem;
  margin-top:1.3rem}
.challenge-panel{
  border-left:1px solid #818822;
  padding-left:3.5rem;
  display:flex;
  flex-direction:column;
  justify-content:center}
.challenge-panel>.eyebrow{
  margin-bottom:1.3rem}
#challenge-action{
  font-family:Georgia,serif;
  font-size:1.75rem;
  line-height:1.4;
  min-height:4em}
.challenge-tools{
  display:flex;
  gap:1rem;
  align-items:center;
  flex-wrap:wrap;
  margin-top:1.8rem}
.button.dark{
  background:var(--ink);
  color:var(--acid);
  border-color:var(--ink)}
.button.dark:hover{
  background:#33362a}
.challenge-tools a{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:.75rem;
  font-weight:700;
  text-decoration:underline}
.challenge-note{
  font-size:.6875rem;
  margin-top:1rem}
.challenge-section :focus-visible{
  outline-color:var(--ink)}
.reading-list{
  border-top:1px solid var(--line)}
.reading-item{
  display:grid;
  grid-template-columns:.65fr 1.35fr;
  gap:3rem;
  align-items:start;
  padding-block:2rem;
  border-bottom:1px solid var(--line)}
.reading-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2rem}
.reading-meta .index{
  color:var(--acid);
  font-size:2rem}
.reading-meta .eyebrow{
  color:var(--muted)}
.reading-item h3{
  font-size:1.25rem;
  line-height:1.5;
  font-weight:700;
  text-wrap:pretty}
.reading-item h3 span{
  padding-left:.3rem;
  color:var(--acid)}
.reading-item p{
  font-size:.875rem;
  color:var(--muted);
  margin:.7rem 0}
.publisher{
  font-size:.6875rem;
  color:#d0d0c4}
.new-tab{
  color:var(--muted)}
.reading-item:hover h3{
  color:var(--acid);
  text-decoration:underline;
  text-underline-offset:.2em}
.reading-note{
  font-size:.6875rem;
  line-height:1.7;
  color:var(--muted);
  max-width:44rem;
  margin-top:1.5rem}
.closing{
  border-block:1px solid var(--line);
  padding-block:4.5rem;
  text-align:center}
.closing .eyebrow{
  color:var(--muted);
  margin-bottom:1.5rem}
.closing h2{
  font-family:var(--display);
  font-size:clamp(3rem,5.5vw,5rem);
  line-height:1.15}
.closing h2 span{
  color:var(--acid)}
.closing p:not(.eyebrow){
  font-size:.9375rem;
  color:var(--muted);
  margin-top:1.5rem}
.closing .button{
  margin-top:1.6rem}
.site-footer{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  padding-block:2.3rem}
.footer-brand{
  font-family:var(--display);
  font-size:1.6rem;
  line-height:1.2;
  color:var(--paper);
  margin-bottom:.65rem}
.site-footer p:not(.footer-brand){
  font-size:.6875rem;
  color:var(--muted)}
.footer-right{
  text-align:right}
.footer-right a{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  font-size:.75rem;
  font-weight:700}
.footer-right a:hover{
  color:var(--acid)}
.toast{
  position:fixed;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  z-index:4;
  max-width:calc(100% - 2rem);
  width:max-content;
  background:var(--paper);
  color:var(--ink);
  font-size:.8125rem;
  font-weight:700;
  box-shadow:0 2px 20px #0004}
.toast:not(:empty){
  padding:.8rem 1.2rem;
  border:1px solid var(--ink)}
dialog{
  width:min(34rem,calc(100% - 2rem));
  border:1px solid var(--line);
  padding:1.5rem;
  background:var(--paper);
  color:var(--ink)}
dialog::backdrop{
  background:#000b}
.dialog-top{
  display:flex;
  align-items:start;
  gap:1rem;
  justify-content:space-between}
.dialog-top h2{
  font-family:var(--display);
  font-size:1.8rem;
  line-height:1.2}
.dialog-top button{
  font-size:.75rem;
  padding:.4rem .8rem;
  border-color:#777}
.dialog-top+p{
  font-size:.875rem;
  margin-block:1rem}
dialog label{
  display:block;
  font-size:.75rem;
  font-weight:700;
  margin-bottom:.5rem}
dialog input{
  width:100%;
  min-width:0;
  background:#fff;
  color:var(--ink);
  border:1px solid #777;
  padding:.7rem;
  font-size:.875rem}
dialog :focus-visible{
  outline-color:var(--ink)}
.noscript-note{
  border:1px solid var(--line);
  padding:1rem;
  font-size:.875rem;
  margin-bottom:2rem}

@media(min-width:1600px){
  .hero{
  gap:7rem}
}

@media(max-width:1050px){
  .wrap{
  width:calc(100% - 3rem)}
.hero{
  gap:2.5rem;
  grid-template-columns:1.05fr .95fr;
  padding-block:3.5rem}
.feature{
  padding-inline:1.5rem}
.feature h2{
  font-size:clamp(3rem,5.8vw,4.5rem)}
h1{
  font-size:clamp(4.4rem,8.6vw,6rem)}
.reminder-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))}
.challenge-layout{
  gap:2.5rem}
.challenge-panel{
  padding-left:2.5rem}
.reading-item{
  grid-template-columns:.7fr 1.3fr;
  gap:2rem}
nav{
  gap:1.5rem}
}

@media(max-width:700px){
  .wrap{
  width:calc(100% - 2.5rem)}
.site-header{
  gap:.5rem;
  flex-wrap:wrap;
  padding-block:1rem}
.brand{
  font-size:1.5rem}
.site-header nav{
  width:100%;
  justify-content:space-between;
  gap:.6rem;
  border-top:1px solid var(--line);
  padding-top:.25rem;
  margin-top:.4rem}
nav a{
  font-size:.6875rem;
  gap:.4rem}
.hero{
  grid-template-columns:1fr;
  padding-block:2.5rem 3rem;
  gap:2.5rem}
.kicker{
  font-size:.625rem;
  margin-bottom:1.5rem}
h1{
  font-size:clamp(4.3rem,13.5vw,6rem);
  line-height:1.07}
.hero-description{
  font-size:.9375rem;
  max-width:26rem;
  margin-block:1.5rem}
.feature{
  margin:0;
  padding:1.5rem 1.5rem 0}
.feature h2{
  font-size:clamp(3.3rem,12.5vw,5rem);
  max-width:100%}
.feature-theme{
  margin-block:1.15rem}
.feature-bottom{
  margin-top:1.5rem}
.feature-bottom p{
  font-size:.9375rem}
.standard-strip .wrap{
  gap:.8rem;
  flex-wrap:wrap;
  justify-content:flex-start;
  font-size:.875rem;
  padding-block:1rem}
.standard-strip span{
  flex:1 1 25%;
  min-width:5rem}
.section-space{
  padding-block:3rem}
.section-heading{
  grid-template-columns:1fr;
  gap:1.25rem;
  margin-bottom:2rem}
.section-heading h2{
  font-size:2.35rem}
.section-intro{
  font-size:.875rem;
  max-width:100%}
.section-number{
  margin-bottom:.9rem}
.search-row{
  flex-wrap:wrap}
.search-field{
  flex-basis:100%}
.saved-filter{
  min-height:44px;
  padding:.65rem 1rem}
.filters{
  gap:.2rem;
  margin-top:.8rem}
.filters button{
  padding:.6rem .65rem;
  font-size:.6875rem}
.collection-status{
  display:block}
.collection-status p+p{
  margin-top:.35rem}
.reminder-grid{
  grid-template-columns:1fr;
  gap:.9rem}
.reminder{
  padding:1.5rem}
.reminder h3{
  font-size:2.1rem;
  max-width:100%}
.card-top{
  margin-bottom:1.6rem}
.challenge-section{
  padding-block:3rem}
.challenge-layout{
  grid-template-columns:1fr;
  gap:2rem}
.challenge-section h2{
  font-size:3.3rem}
.challenge-panel{
  border-left:0;
  border-top:1px solid #818822;
  padding:1.8rem 0 0}
.challenge-panel>.eyebrow{
  margin-bottom:1rem}
#challenge-action{
  font-size:1.5rem}
.challenge-tools{
  gap:.5rem;
  margin-top:1.5rem}
.reading-item{
  grid-template-columns:1fr;
  gap:1rem;
  padding-block:1.7rem}
.reading-meta{
  gap:1rem}
.reading-item h3{
  font-size:1.125rem}
.closing{
  padding-block:3rem}
.closing h2{
  font-size:2.9rem}
.site-footer{
  display:block;
  padding-block:2rem}
.footer-right{
  text-align:left;
  margin-top:1.3rem}
.empty-state{
  padding:2rem 1rem}
}

@media(prefers-reduced-motion:reduce){
  :root{
  scroll-behavior:auto}
*,*::before,*::after{
  animation:none!important;
  transition:none!important}
}

@media print{
  body{
  background:white;
  color:black}
.site-header,.collection-controls,.card-tools,.toast,dialog,.site-footer,.button,.standard-strip{
  display:none!important}
.hero,.section-heading,.challenge-layout,.reminder-grid{
  display:block}
.feature,.reminder,.challenge-section{
  background:white;
  color:black;
  border:1px solid #777;
  margin-bottom:1rem;
  break-inside:avoid}
.wrap{
  width:100%}
.hero,.section-space{
  padding-block:1rem}
.reminder{
  --card-ink:black;
  --card-line:#777}
h1,h1 span,.section-heading h2 span,.closing h2 span{
  color:black}
.hero-description,.section-intro,.reading-note,.reading-item p,.publisher,.section-number{
  color:black}
.reading-item{
  color:black}
.reading-item::after{
  content:attr(href);
  font-size:.7rem;
  overflow-wrap:anywhere}
}