/* ========== THE 5BIX CHRONICLE — NEWSPAPER EDITION ========== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=UnifrakturMaguntia&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=IM+Fell+DW+Pica:ital@0;1&display=swap');

:root{
  --paper:#ede4d3;
  --paper-dark:#ddd3be;
  --ink:#1a1a1a;
  --ink-2:#3a3a3a;
  --ink-3:#6b6b6b;
  --rule:#1a1a1a;
  --rule-thin:rgba(26,26,26,.25);
  --accent:#8b0000;
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-gothic:'UnifrakturMaguntia',cursive;
  --font-body:'Libre Baskerville',Georgia,serif;
  --font-label:'IM Fell DW Pica',Georgia,serif;
  --col-gap:28px;
  --page-max:1100px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* -- page -- */
.np{
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.72;
  position:relative;
}

/* Crumpled paper photo texture — sits ON TOP of content, multiply blends fold shadows */
.np-texture{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background-image:url('/images/paper-crumple.jpg');
  background-size:100% auto;
  background-repeat:repeat-y;
  mix-blend-mode:multiply;
  opacity:0.4;
}

.np a{color:var(--ink);text-decoration:none}
.np-wrap{max-width:var(--page-max);margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ============ MASTHEAD ============ */
.np-mast{
  text-align:center;
  padding:40px 0 0;
  border-bottom:4px double var(--rule);
}
.np-mast-date{
  font-family:var(--font-label);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:6px;
}
.np-mast-title{
  font-family:var(--font-display);
  font-size:clamp(42px,8vw,80px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:2px;
}
.np-mast-sub{
  font-family:var(--font-label);
  font-style:italic;
  font-size:13.5px;
  color:var(--ink-3);
  padding-bottom:14px;
}
.np-mast-rule{height:2px;background:var(--rule);border:none;margin:0}
.np-mast-rule.thin{height:1px;background:var(--rule-thin);margin-top:3px}

/* ============ NAV / EDITION PICKER ============ */
.np-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid var(--rule-thin);
  font-family:var(--font-label);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  flex-wrap:wrap;
}
.np-nav a{padding:4px 12px;border-radius:2px;transition:background .2s}
.np-nav a:hover{background:rgba(0,0,0,.06)}
.np-nav-sep{width:1px;height:14px;background:var(--rule-thin)}

.np-edition-picker{
  font-family:var(--font-label);
  font-size:12px;
  letter-spacing:.06em;
  background:var(--paper);
  border:1px solid var(--rule-thin);
  color:var(--ink);
  padding:6px 28px 6px 12px;
  border-radius:2px;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%231a1a1a'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
.np-edition-picker:focus{outline:1px solid var(--accent);outline-offset:1px}

.np-edition-date{
  font-family:var(--font-label);
  font-size:13px;
  font-style:italic;
  color:var(--ink-2);
  text-transform:none;
  letter-spacing:.02em;
}

/* ============ FRONT PAGE LAYOUT ============ */
.np-front{padding:32px 0 40px}

/* ============ HEADLINE STORY ============ */
.np-headline{
  text-align:center;
  margin-bottom:0;
}
.np-headline-cat{
  font-family:var(--font-label);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:10px;
}
.np-headline-h{
  font-family:var(--font-display);
  font-size:clamp(30px,5vw,56px);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.03em;
  margin-bottom:14px;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}
.np-headline-deck{
  font-family:var(--font-label);
  font-style:italic;
  font-size:17px;
  line-height:1.55;
  color:var(--ink-2);
  max-width:640px;
  margin:0 auto 20px;
}
.np-section-rule{
  height:3px;
  border:none;
  background:var(--rule);
  max-width:760px;
  margin:0 auto;
}
.np-headline-body{
  max-width:760px;
  margin:28px auto 0;
  column-count:2;
  column-gap:var(--col-gap);
  column-rule:1px solid var(--rule-thin);
}
.np-headline-body p{
  margin-bottom:16px;
  text-align:justify;
  hyphens:auto;
  text-indent:1.5em;
}
.np-headline-body p.np-dropcap{text-indent:0}
.np-headline-body p.np-dropcap::first-letter{
  font-family:var(--font-display);
  font-weight:900;
  font-size:3.6em;
  float:left;
  line-height:.78;
  margin:4px 8px 0 0;
  color:var(--accent);
}

/* ============ DIVIDER ============ */
.np-divider{
  border:none;
  border-top:4px double var(--rule);
  margin:36px 0;
}

/* ============ SECONDARY STORIES (2-3 columns) ============ */
.np-secondary{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 1px;
}
.np-sec-story{
  padding:0 var(--col-gap);
  border-left:1px solid var(--rule-thin);
}
.np-sec-story:first-child{
  padding-left:0;
  border-left:none;
}
.np-sec-cat{
  font-family:var(--font-label);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.np-sec-h{
  font-family:var(--font-display);
  font-size:clamp(22px,2.5vw,30px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.02em;
  margin-bottom:10px;
}
.np-sec-deck{
  font-family:var(--font-label);
  font-style:italic;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-2);
  margin-bottom:16px;
}
.np-sec-body p{
  margin-bottom:14px;
  text-align:justify;
  hyphens:auto;
  font-size:14.5px;
  line-height:1.7;
  text-indent:1.2em;
}
.np-sec-body p.np-dropcap{text-indent:0}
.np-sec-body p.np-dropcap::first-letter{
  font-family:var(--font-display);
  font-weight:900;
  font-size:3em;
  float:left;
  line-height:.78;
  margin:3px 6px 0 0;
  color:var(--accent);
}

/* ============ PULL QUOTES ============ */
.np-pullquote{
  text-align:center;
  font-family:var(--font-display);
  font-style:italic;
  font-size:22px;
  line-height:1.4;
  padding:20px 24px;
  margin:20px 0;
  border-top:3px solid var(--rule);
  border-bottom:3px solid var(--rule);
  color:var(--ink);
  column-span:all;
}

/* ============ STORY IMAGES ============ */
.np-fig{margin:0 0 18px;text-align:left}
.np-fig-frame{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--rule-thin)}
/* newsprint: ink-toned photo multiplied onto the paper colour, so its whites become paper */
.np-fig-frame img{display:block;width:100%;height:auto;mix-blend-mode:multiply;opacity:.9;
  filter:grayscale(1) sepia(.28) contrast(1.12) brightness(1.05);transition:filter .5s ease,opacity .5s ease}
/* halftone dot screen */
.np-fig-frame::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.22;
  background-image:radial-gradient(circle at center,rgba(26,26,26,.9) .7px,transparent 1.3px);background-size:3px 3px}
.np-fig:hover .np-fig-frame img{opacity:1;filter:grayscale(.35) sepia(.2) contrast(1.06) brightness(1.02)}
.np-fig-cap{font-family:var(--font-label);font-style:italic;font-size:12.5px;line-height:1.45;color:var(--ink-2);padding:7px 0 0;border-bottom:1px solid var(--rule-thin);padding-bottom:8px}
.np-fig-credit{font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.np-fig-credit a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.np-fig-credit a:hover{color:var(--accent)}
.np-fig-lead{max-width:760px;margin:24px auto 0}
.np-fig-lead + .np-headline-body{margin-top:24px}
.np-fig-section{float:right;width:42%;margin:4px 0 12px 22px}
.np-section-story::after{content:"";display:block;clear:both}

/* ============ SECTIONS + SIDEBAR ============ */
.np-sections{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:0;
}
.np-section-stories{
  border-right:1px solid var(--rule-thin);
  padding-right:var(--col-gap);
}

/* Section label */
.np-section-label{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  border-bottom:2px solid var(--rule);
  padding-bottom:6px;
  margin-bottom:20px;
}
.np-section-block{margin-bottom:32px}
.np-section-block:last-child{margin-bottom:0}

.np-section-story{margin-bottom:24px}
.np-section-story:last-child{margin-bottom:0}

.np-section-story-h{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:900;
  line-height:1.2;
  letter-spacing:-.01em;
  margin-bottom:6px;
}
.np-section-story-deck{
  font-family:var(--font-label);
  font-style:italic;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-2);
  margin-bottom:14px;
}
.np-section-story-body p{
  margin-bottom:12px;
  text-align:justify;
  hyphens:auto;
  font-size:14.5px;
  line-height:1.68;
  text-indent:1.2em;
}
.np-section-story-body p:first-child{text-indent:0}

/* ============ SIDEBAR ============ */
.np-sidebar{
  padding-left:var(--col-gap);
  align-self:start;
}
.np-sidebar-h{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  border-bottom:2px solid var(--rule);
  padding-bottom:6px;
  margin-bottom:16px;
}
.np-sidebar-list{
  list-style:none;
  padding:0;
}
.np-sidebar-list li{
  font-family:var(--font-label);
  font-size:13.5px;
  line-height:1.5;
  padding:8px 0;
  border-bottom:1px solid var(--rule-thin);
  color:var(--ink-2);
}
.np-sidebar-list li:last-child{border-bottom:none}

/* ============ FOOTER ============ */
.np-foot{
  border-top:4px double var(--rule);
  padding:20px 0;
  text-align:center;
  font-family:var(--font-label);
  font-size:12px;
  color:var(--ink-3);
  letter-spacing:.08em;
}

/* ============ RESPONSIVE ============ */
@media(max-width:800px){
  .np-headline-body{column-count:1}
  .np-headline-body p.np-dropcap::first-letter{font-size:3em;margin:2px 6px 0 0}
  .np-secondary{grid-template-columns:1fr}
  .np-sec-story{
    padding:20px 0;
    border-left:none;
    border-bottom:1px solid var(--rule-thin);
  }
  .np-sec-story:first-child{padding-top:0}
  .np-sec-story:last-child{border-bottom:none}
  .np-sections{grid-template-columns:1fr}
  .np-section-stories{
    border-right:none;
    padding-right:0;
  }
  .np-sidebar{
    position:static;
    padding-left:0;
    margin-top:32px;
    padding-top:24px;
    border-top:4px double var(--rule);
  }
  .np-pullquote{font-size:18px;padding:16px 16px}
  .np-fig-section{float:none;width:auto;margin:0 0 16px}
}
@media(max-width:480px){
  .np-mast-title{font-size:36px}
  .np-headline-h{font-size:26px}
  .np-headline-deck{font-size:15px}
  .np-sec-h{font-size:20px}
  .np-wrap{padding:0 16px}
  .np-fig-credit{white-space:normal}
}