/* ============================================================
   Payday Loan Times — Editorial Design System
   "The Ledger" — a newsroom/broadsheet system.
   Hand-built: warm newsprint, ink, one brick-red accent.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* palette — warm newsprint + ink + a single editorial brick red */
  --paper:        #f6f1e7;   /* page */
  --paper-2:      #efe8d9;   /* panels / wells */
  --paper-3:      #e7decb;   /* hover wells */
  --ink:          #1b1815;   /* body text / headlines */
  --ink-2:        #3d362e;   /* secondary text */
  --ink-mute:     #786d5d;   /* meta, captions */
  --rule:         #d7ccb6;   /* hairlines */
  --rule-2:       #c4b79c;   /* stronger hairline */
  --accent:       #a4321f;   /* brick red */
  --accent-2:     #7c2415;   /* deep red (hover) */
  --accent-wash:  #f0e2da;   /* faint red wash */
  --night:        #211d18;   /* footer */
  --night-2:      #2c2720;
  --night-ink:    #e9e1d2;   /* text on night */
  --night-mute:   #a89c87;

  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --sans:    ui-sans-serif, "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* fluid scale */
  --step--1: clamp(.82rem, .80rem + .10vw, .9rem);
  --step-0:  clamp(1.06rem, 1.0rem + .25vw, 1.19rem);
  --step-1:  clamp(1.28rem, 1.18rem + .5vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.35rem + .9vw, 2rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.6vw, 2.85rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 4rem);
  --step-5:  clamp(3rem, 2.2rem + 4vw, 5.4rem);

  --measure: 42rem;
  --wrap: 1200px;
  --gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--step-0);
  line-height:1.62;
  font-variant-numeric:oldstyle-nums proportional-nums;
  font-feature-settings:"liga" 1,"onum" 1,"kern" 1;
  /* faint paper grain */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(27,24,21,.022) 1px, transparent 0);
  background-size:4px 4px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2)}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.08;letter-spacing:-.01em}
p{margin:0 0 1.05em}
hr{border:0;border-top:1px solid var(--rule);margin:0}
::selection{background:var(--accent);color:var(--paper)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,.4rem + 2vw,2.25rem)}
.kicker{
  font-family:var(--sans);
  font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .5rem;
}
.kicker a{color:inherit}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;background:var(--ink);color:var(--paper);padding:.5rem .8rem;z-index:99}

/* ============================================================
   Masthead / Nameplate
   ============================================================ */
.dateline{
  border-bottom:1px solid var(--rule);
  font-family:var(--sans);
  font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-mute);
}
.dateline .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-block:.55rem;flex-wrap:wrap}
.dateline strong{color:var(--ink-2);font-weight:700}
.dateline .dateline__tag{color:var(--ink-mute)}

.nameplate{
  border-top:4px solid var(--ink);
  text-align:center;
  padding-block:clamp(1.3rem,.8rem + 2vw,2.4rem) clamp(.9rem,.6rem + 1vw,1.5rem);
}
.nameplate__rule{display:flex;align-items:center;gap:1.25rem;color:var(--ink-mute);max-width:880px;margin-inline:auto}
.nameplate__rule::before,.nameplate__rule::after{content:"";flex:1;border-top:1px solid var(--rule-2)}
.nameplate__rule span{font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.nameplate__title{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  font-size:var(--step-5);
  letter-spacing:-.02em;
  margin:.35rem 0 .3rem;
  line-height:.95;
}
.nameplate__title a{color:var(--ink)}
.nameplate__title a:hover{color:var(--ink)}
.nameplate__sub{
  font-family:var(--serif);font-style:italic;
  color:var(--ink-2);font-size:var(--step-1);font-weight:400;
}

/* ---------- Primary nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--ink);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__list{
  list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0;
  font-family:var(--sans);
}
.nav__list a{
  display:block;color:var(--ink);
  font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:.95rem .95rem;position:relative;
}
.nav__list a:hover{color:var(--accent)}
.nav__list a[aria-current="page"]{color:var(--accent)}
.nav__list a[aria-current="page"]::after,
.nav__list a:hover::after{
  content:"";position:absolute;left:.95rem;right:.95rem;bottom:.55rem;
  border-bottom:2px solid currentColor;
}
.nav__toggle{display:none}
.nav__search{display:none}
.nav__more{font-family:var(--sans);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}

/* ============================================================
   Layout
   ============================================================ */
main{padding-block:clamp(2rem,1rem + 3vw,3.5rem) clamp(3rem,2rem + 3vw,5rem)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 304px;gap:var(--gap)}
.layout--full{display:block}
.layout--full .content{max-width:var(--wrap)}

/* breadcrumb */
.crumbs{
  font-family:var(--sans);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:1.4rem;
}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.crumbs li::after{content:"/";margin-left:.45rem;color:var(--rule-2)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-mute)}
.crumbs a:hover{color:var(--accent)}
.crumbs li:last-child{color:var(--ink-2)}

/* section header (listings) */
.section-head{margin-bottom:1.5rem}
.section-head__title{
  font-family:var(--display);font-weight:600;font-size:var(--step-3);
  border-bottom:3px double var(--ink);padding-bottom:.55rem;
}
.section-head__meta{font-family:var(--sans);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-top:.6rem}
.section-head__intro{font-family:var(--serif);font-style:italic;color:var(--ink-2);font-size:var(--step-1);max-width:46rem;margin-top:.7rem}

/* ============================================================
   Lead story (front page)
   ============================================================ */
.lead{
  display:grid;gap:.4rem;
  padding-bottom:clamp(1.6rem,1rem + 2vw,2.4rem);
  margin-bottom:clamp(1.6rem,1rem + 2vw,2.4rem);
  border-bottom:3px double var(--ink);
}
.lead__title{font-family:var(--display);font-weight:600;font-size:var(--step-4);letter-spacing:-.02em}
.lead__title a{color:var(--ink)}
.lead__title a:hover{color:var(--accent)}
.lead .deck{
  font-family:var(--serif);font-size:var(--step-1);color:var(--ink-2);
  max-width:40rem;margin:.2rem 0 .4rem;line-height:1.5;
}

/* ---------- Story list ---------- */
.stories{display:grid;gap:0}
.story{
  display:grid;gap:.35rem;
  padding-block:clamp(1.2rem,.9rem + 1vw,1.8rem);
  border-bottom:1px solid var(--rule);
}
.stories .story:first-child{padding-top:0}
.story__title{
  font-family:var(--display);font-weight:600;font-size:var(--step-2);
}
.story__title a{color:var(--ink)}
.story__title a:hover{color:var(--accent)}
.story__excerpt{color:var(--ink-2);margin:.15rem 0 .25rem;max-width:42rem}
.byline{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.05em;
  color:var(--ink-mute);text-transform:uppercase;
}
.byline a{color:var(--ink-mute)}
.byline a:hover{color:var(--accent)}
.byline .by-name{color:var(--ink-2);font-weight:700}

/* two-up grid variant for dense listings */
.stories--grid{grid-template-columns:1fr 1fr;gap:0 var(--gap)}
.stories--grid .story{border-bottom:1px solid var(--rule)}
@media(max-width:680px){.stories--grid{grid-template-columns:1fr}}

/* category chips */
.tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.chip{
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--rule-2);border-radius:2px;
  padding:.2rem .5rem;background:var(--paper);
}
.chip:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}

/* pagination */
.pager{
  display:flex;justify-content:space-between;gap:1rem;margin-top:2.5rem;
  border-top:2px solid var(--ink);padding-top:1.1rem;
  font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.pager a{color:var(--ink)}
.pager a:hover{color:var(--accent)}
.pager .is-disabled{color:var(--rule-2);visibility:hidden}

/* ============================================================
   Article
   ============================================================ */
.article__head{margin-bottom:1.6rem;border-bottom:1px solid var(--rule);padding-bottom:1.3rem}
.article__title{
  font-family:var(--display);font-weight:600;font-size:var(--step-4);letter-spacing:-.02em;
  margin:.2rem 0 .5rem;max-width:24ch;
}
.article__deck{font-family:var(--serif);font-style:italic;font-size:var(--step-1);color:var(--ink-2);max-width:var(--measure)}
.article__byline{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-mute);margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
}
.article__byline .by-name{color:var(--ink);font-weight:700}
.article__byline time{color:var(--ink-2)}

.prose{max-width:var(--measure);font-size:var(--step-0);line-height:1.72}
.prose>p:first-of-type::first-letter{
  font-family:var(--display);font-weight:600;
  float:left;font-size:4.6em;line-height:.74;
  padding:.06em .12em 0 0;color:var(--accent);
}
.prose p{margin:0 0 1.15em}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;text-decoration-color:var(--rule-2)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose h2{font-family:var(--display);font-size:var(--step-2);margin:2rem 0 .7rem}
.prose h3{font-family:var(--display);font-size:var(--step-1);margin:1.7rem 0 .6rem}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em}
.prose li{margin:.3em 0}
.prose img{margin:1.6rem 0;border:1px solid var(--rule-2);background:var(--paper);padding:.4rem}
.prose figure{margin:1.8rem 0}
.prose figcaption{font-family:var(--sans);font-size:.74rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.05em;margin-top:.5rem}
.prose blockquote{
  margin:1.8rem 0;padding:.2rem 0 .2rem 1.4rem;
  border-left:3px solid var(--accent);
  font-family:var(--display);font-style:italic;font-size:var(--step-1);color:var(--ink-2);
}
.prose table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:var(--step--1)}
.prose th,.prose td{border:1px solid var(--rule-2);padding:.5rem .7rem;text-align:left}
.prose th{background:var(--paper-2);font-family:var(--sans);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}
.article-wrap{overflow-x:auto}

.article__foot{
  margin-top:2.4rem;padding-top:1.4rem;border-top:2px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:flex-start;
}
.article__foot .label{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.5rem}
.backlink{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.backlink:hover{color:var(--accent)}

/* static page prose reuse */
.page__title{font-family:var(--display);font-weight:600;font-size:var(--step-3);border-bottom:3px double var(--ink);padding-bottom:.55rem;margin-bottom:1.4rem}

/* archive / historical notice */
.archive-note{
  font-family:var(--sans);font-size:.78rem;line-height:1.5;
  color:var(--ink-mute);background:var(--paper-2);
  border-left:3px solid var(--rule-2);padding:.6rem .85rem;margin:0 0 1.5rem;
}

/* author contact line */
.author-contact{font-family:var(--sans);font-size:.85rem;color:var(--ink-mute)}
.author-contact a{font-weight:700}

/* glossary A–Z nav */
.glossary-az{font-family:var(--sans);font-size:.82rem;letter-spacing:.03em;color:var(--ink-mute);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.6rem 0;margin:1.4rem 0}

/* state-coverage grid (payday-loans hub) */
.state-grid ul{list-style:none;margin:1.4rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.2rem .9rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1rem 0}
.state-grid li{margin:0}
.state-grid a{font-family:var(--sans);font-size:.86rem;color:var(--ink);text-decoration:none;display:block;padding:.28rem 0;border-bottom:1px dotted transparent}
.state-grid a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* On-site search page */
.search-form{display:flex;gap:.5rem;border:2px solid var(--ink);background:var(--paper);margin-bottom:1.6rem}
.search-form input[type=search]{flex:1;border:0;background:transparent;padding:.8rem 1rem;font:inherit;color:var(--ink);min-width:0}
.search-form input[type=search]:focus{outline:2px solid var(--accent);outline-offset:-2px}
.search-form button{border:0;background:var(--ink);color:var(--paper);cursor:pointer;font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:0 1.3rem}
.search-form button:hover{background:var(--accent)}
.search-count{font-family:var(--sans);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.6rem}

/* Sources / attribution (news posts) */
.sources{margin-top:2rem;background:var(--paper-2);border:1px solid var(--rule);padding:1rem 1.2rem}
.sources__h{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 .5rem}
.sources ul{margin:0;padding-left:1.1rem;font-size:.92rem}
.sources li{margin:.2rem 0}

/* Related coverage (article foot) */
.related{margin-top:2.4rem;border-top:2px solid var(--ink);padding-top:1.3rem}
.related__h{font-family:var(--display);font-size:var(--step-2);margin-bottom:1rem}
.related .story{padding-block:.9rem}
.related .story__title{font-size:var(--step-1)}

/* FAQ (landing pages) */
.faq{margin-top:2.4rem;border-top:2px solid var(--ink);padding-top:1.4rem}
.faq__h{font-family:var(--display);font-size:var(--step-2);margin-bottom:1rem}
.faq__item{border-bottom:1px solid var(--rule);padding:.9rem 0}
.faq__q{font-family:var(--display);font-size:var(--step-1);margin:0 0 .35rem}
.faq__a{color:var(--ink-2)}
.faq__a p:last-child{margin-bottom:0}

/* ============================================================
   Sidebar
   ============================================================ */
.aside{font-family:var(--serif)}
.aside__block{margin-bottom:2.2rem}
.aside__head{
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:2px solid var(--ink);padding-bottom:.4rem;margin-bottom:.7rem;
}
.aside__head .count{color:var(--ink-mute);float:right;font-weight:400}
.aside form{display:flex;border:1px solid var(--rule-2);background:var(--paper)}
.aside input[type=search]{flex:1;border:0;background:transparent;padding:.6rem .7rem;font:inherit;color:var(--ink);min-width:0}
.aside input[type=search]:focus{outline:2px solid var(--accent);outline-offset:-2px}
.aside button{
  border:0;background:var(--ink);color:var(--paper);cursor:pointer;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:0 .9rem;
}
.aside button:hover{background:var(--accent)}
.linklist{list-style:none;margin:0;padding:0;columns:2;column-gap:1.2rem}
.linklist.one-col{columns:1}
.linklist li{break-inside:avoid;margin:0}
.linklist a{
  display:block;color:var(--ink-2);font-size:.95rem;
  padding:.28rem 0;border-bottom:1px dotted var(--rule);
}
.linklist a:hover{color:var(--accent)}
.aside__note{
  background:var(--paper-2);border:1px solid var(--rule);
  padding:1rem 1.1rem;font-size:.95rem;color:var(--ink-2);
}
.aside__note strong{font-family:var(--display);color:var(--ink)}

/* ============================================================
   Footer
   ============================================================ */
.foot{background:var(--night);color:var(--night-ink);border-top:4px solid var(--accent);margin-top:0}
.foot a{color:var(--night-ink)}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--gap);padding-block:clamp(2.5rem,2rem + 2vw,3.5rem)}
.foot__brand .mark{font-family:var(--display);font-size:1.9rem;font-weight:600;color:#fff;line-height:1}
.foot__brand p{color:var(--night-mute);font-size:.95rem;margin-top:.7rem;max-width:32ch}
.foot__brand .est{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--night-mute);margin-top:1rem}
.foot h4{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;border-bottom:1px solid var(--night-2);padding-bottom:.5rem;margin-bottom:.8rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:.34rem 0}
.foot li a{font-size:.95rem;color:var(--night-mute)}
.foot li a:hover{color:#fff}
.foot__bar{border-top:1px solid var(--night-2)}
.foot__bar .wrap{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;padding-block:1.3rem;font-family:var(--sans);font-size:.72rem;letter-spacing:.04em;color:var(--night-mute)}
.foot__disclaimer{max-width:62ch;line-height:1.6}

/* back to top */
.totop{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:50;
  width:2.7rem;height:2.7rem;border-radius:50%;
  background:var(--ink);color:var(--paper);border:0;cursor:pointer;
  font-size:1.1rem;display:grid;place-items:center;
  opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--accent)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  .aside{border-top:2px solid var(--ink);padding-top:1.6rem}
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media(max-width:760px){
  .nav__toggle{
    display:inline-flex;align-items:center;gap:.5rem;
    background:none;border:0;cursor:pointer;color:var(--ink);
    font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    padding:.9rem 0;
  }
  .nav__list{
    display:none;width:100%;flex-direction:column;
    border-top:1px solid var(--rule);padding-bottom:.5rem;
  }
  .nav__list.open{display:flex}
  .nav__list a{padding:.7rem 0;border-bottom:1px dotted var(--rule)}
  .nav__list a[aria-current=page]::after,.nav__list a:hover::after{display:none}
  .nav .wrap{flex-wrap:wrap}
  .nav__more{display:none}
  /* compact search loupe at top-right, next to the burger (mobile) */
  .nav__toggle{order:1}
  .nav__search{order:2;margin-left:auto}
  .nav__list{order:3}
  .nav__search{
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--ink);padding:.7rem .2rem .7rem .7rem;
  }
  .nav__search:hover{color:var(--accent)}
  /* search now lives in the header loupe — drop the duplicate sidebar box */
  .aside__block--search{display:none}
}
@media(max-width:520px){
  .foot__top{grid-template-columns:1fr}
  .linklist{columns:1}
}

@media print{
  .nav,.aside,.foot,.totop,.dateline,.pager{display:none}
  body{background:#fff}
  .layout{display:block}
}