/* ═══════════════════════════════════════════════════════
   section.css — Section page styles (The Northern Writ)
   Extracted from nw-section-v4.html
   ═══════════════════════════════════════════════════════ */

/* ═══ SECTION HEADER ═══ */
.sec-hero{padding:1.5rem 0 1.25rem;border-bottom:1.5px solid var(--ink)}
.sec-bread{font-family:var(--sans);font-size:.6875rem;color:var(--ink5);margin-bottom:.5rem}
.sec-bread a{color:var(--navy);font-weight:500;transition:opacity .15s}.sec-bread a:hover{opacity:.7}
.sec-title{font-family:var(--serif);font-weight:800;font-size:clamp(1.75em,3.5vw,2.25em);color:var(--ink);letter-spacing:-.02em;margin-bottom:.25rem}
.sec-desc{font-family:var(--serif);font-size:.9375em;font-style:italic;color:var(--ink3);max-width:560px}
.sec-meta{display:flex;align-items:center;gap:1rem;margin-top:.5rem}
.sec-count{font-family:var(--mono);font-size:.625rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink5)}
.sec-share{font-family:var(--sans);font-size:.6875rem;font-weight:600;color:var(--navy);cursor:pointer;transition:opacity .15s}.sec-share:hover{opacity:.7}

/* ═══ TRENDING NOW STRIP ═══ */
.trend{padding:.75rem 0;border-bottom:1px solid var(--rule);overflow:hidden}
.trend-label{font-family:var(--mono);font-size:.5625rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink5);font-weight:700;margin-bottom:.375rem}
.trend-row{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.trend-row::-webkit-scrollbar{display:none}
.trend-pill{display:flex;align-items:center;gap:.375rem;font-family:var(--serif);font-size:.8125rem;font-weight:600;color:var(--ink);padding:.375rem .75rem;background:var(--paper2);border-radius:20px;white-space:nowrap;cursor:pointer;transition:background .12s,color .12s;flex-shrink:0;border:1px solid var(--rule2)}
.trend-pill:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.trend-pill .tp-num{font-family:var(--mono);font-size:.5rem;font-weight:700;color:var(--ink5);letter-spacing:0}
.trend-pill .tp-tag{font-family:var(--mono);font-size:.4375rem;letter-spacing:1px;text-transform:uppercase;color:var(--red);margin-right:.125rem}

/* ═══ CONTENT LAYOUT ═══ */
.sec-layout{max-width:var(--mw);margin:0 auto;padding:1.5rem 1.5rem 0;display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:start}

/* ═══ LEAD STORY ═══ */
.lead{margin-bottom:0;padding-bottom:1.25rem;border-bottom:1.5px solid var(--ink);cursor:pointer}
.lead:hover h2{color:var(--navy)}
.lead .ph{width:100%;aspect-ratio:2/1;background:linear-gradient(145deg,#e2dfda,#d5d2cc);border-radius:3px;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.5rem;letter-spacing:1px;text-transform:uppercase;color:#bbb}
html.dark .lead .ph{background:linear-gradient(145deg,#2a2a2a,#222);color:#555}
.lead .ey{font-family:var(--mono);font-size:.625rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:.25rem}
.lead h2{font-family:var(--serif);font-weight:800;font-size:clamp(1.25em,2vw,1.5em);line-height:1.18;color:var(--ink);letter-spacing:-.015em;margin-bottom:.375rem;transition:color .15s}
.lead .dk{font-family:var(--serif);font-size:.9375em;font-style:italic;color:var(--ink2);line-height:1.45;margin-bottom:.375rem}
.lead .mt{font-family:var(--sans);font-size:.75rem;color:var(--ink5)}.lead .mt b{color:var(--ink3);font-weight:600}

/* ═══ STORY LIST ═══ */
.story{display:grid;grid-template-columns:1fr 160px;gap:1rem;padding:1rem 0;border-top:1px solid var(--rule);align-items:start;cursor:pointer;transition:transform .12s}
.story:hover{transform:translateY(-1px)}
.story:hover h3{color:var(--navy)}
.story .ey{font-family:var(--mono);font-size:.5625rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink3);margin-bottom:.125rem}
.story h3{font-family:var(--serif);font-weight:700;font-size:1em;line-height:1.3;color:var(--ink);transition:color .15s;margin-bottom:.25rem}
.story .dk{font-family:var(--serif);font-size:.8125em;font-style:italic;color:var(--ink3);line-height:1.4;margin-bottom:.25rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story .mt{font-family:var(--sans);font-size:.6875rem;color:var(--ink5)}.story .mt b{color:var(--ink3);font-weight:600}
.story .ph{width:160px;aspect-ratio:3/2;background:linear-gradient(145deg,#e2dfda,#d5d2cc);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.4375rem;letter-spacing:1px;text-transform:uppercase;color:#bbb}
html.dark .story .ph{background:linear-gradient(145deg,#2a2a2a,#222);color:#555}

/* ═══ CROSS-SECTION BAR ═══ */
.xsec{padding:.625rem 1rem;margin:0;background:var(--paper2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.xsec-label{font-family:var(--mono);font-size:.5rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink5);font-weight:700;white-space:nowrap}
.xsec a{font-family:var(--serif);font-size:.8125rem;font-weight:600;color:var(--navy);transition:opacity .15s}.xsec a:hover{opacity:.7}
.xsec a::after{content:' \2192';font-size:.625rem}

/* ═══ MOST READ STRIP ═══ */
.mr-sec{padding:1.5rem 0;background:var(--navy-deep)}
.mr-inner{max-width:var(--mw);margin:0 auto;padding:0 1.5rem}
.mr-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.mr-label{font-family:var(--serif);font-weight:800;font-size:1em;color:#fff}
.mr-all{font-family:var(--sans);font-size:.6875rem;color:rgba(255,255,255,.4);transition:color .15s}.mr-all:hover{color:#fff}
.mrg{display:flex;flex-direction:column;gap:0;max-width:680px}
.mri{display:grid;grid-template-columns:24px 80px 1fr;gap:.625rem;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;align-items:center}
.mri:last-child{border-bottom:none}
.mri:hover h4{color:#c5caff}
.mrn{font-family:var(--serif);font-weight:800;font-size:1.125em;color:rgba(255,255,255,.15);line-height:1;text-align:center;min-width:24px}
.mri .mr-ph{width:80px;height:54px;background:rgba(255,255,255,.06);border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.4375rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.15);flex-shrink:0}
.mri h4{font-family:var(--serif);font-weight:600;font-size:.8125em;line-height:1.35;color:#fff;transition:color .15s}

/* ═══ PAGINATION ═══ */
.pag{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:1.5rem 0;border-top:1px solid var(--rule)}
.pag-btn{font-family:var(--sans);font-size:.8125rem;font-weight:600;color:var(--ink3);padding:.375rem .75rem;border:1px solid var(--rule);border-radius:3px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.pag-btn:hover{background:var(--paper2);color:var(--ink)}
.pag-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.pag-dots{font-size:.75rem;color:var(--ink5);padding:0 .25rem}

/* ═══ SIDEBAR ═══ */
.side{position:sticky;top:72px}
.side-sec{margin-bottom:1.5rem}
.side-label{font-family:var(--mono);font-size:.5625rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink5);font-weight:700;margin-bottom:.5rem;padding-bottom:.375rem;border-bottom:2px solid var(--navy)}
.side-nav a{display:block;font-family:var(--sans);font-size:.8125rem;color:var(--ink3);padding:.3125rem 0 .3125rem .5rem;border-left:2px solid transparent;transition:color .12s,border-color .12s,background .3s;background:linear-gradient(to right,rgba(0,6,102,.04) 0%,transparent 0%)}
.side-nav a:hover,.side-nav a.act{color:var(--navy);font-weight:600;border-left-color:var(--navy)}
.side-nav a.act{background:linear-gradient(to right,rgba(0,6,102,.04) 100%,transparent 100%)}

/* Sidebar Most Read */
.side-mr{background:var(--navy-deep);border-radius:4px;padding:1rem;margin-bottom:1.5rem}
.side-mr-label{font-family:var(--mono);font-size:.5625rem;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:700;margin-bottom:.5rem;padding-bottom:.375rem;border-bottom:1px solid rgba(255,255,255,.1)}
.side-mr-item{display:grid;grid-template-columns:20px 56px 1fr;gap:.375rem;padding:.375rem 0;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;align-items:center}
.side-mr-item:last-child{border-bottom:none}
.side-mr-item:hover h4{color:#c5caff}
.side-mr-item .sm-n{font-family:var(--serif);font-weight:800;font-size:.875em;color:rgba(255,255,255,.12);line-height:1;text-align:center}
.side-mr-item .sm-ph{width:56px;height:38px;background:rgba(255,255,255,.06);border-radius:2px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.375rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.12);flex-shrink:0}
.side-mr-item h4{font-family:var(--serif);font-weight:600;font-size:.75em;line-height:1.3;color:#fff;transition:color .15s}

/* Sidebar Cards */
.side-card{padding:.5rem 0;border-top:1px solid var(--rule2);cursor:pointer}.side-card:first-child{border-top:none}
.side-card:hover h4{color:var(--navy)}
.side-card .sc-ey{font-family:var(--mono);font-size:.5rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);margin-bottom:.125rem}
.side-card h4{font-family:var(--serif);font-weight:700;font-size:.8125em;line-height:1.25;color:var(--ink);transition:color .15s}
.side-card .sc-mt{font-family:var(--sans);font-size:.625rem;color:var(--ink5);margin-top:.125rem}

/* ═══ NEWSLETTER (sidebar version) ═══ */
.nlc{background:var(--paper2);border:1px solid var(--rule);border-radius:4px;padding:1.25rem;text-align:center}
.nlc h3{font-family:var(--serif);font-weight:800;font-size:1em;color:var(--ink);margin-bottom:.125rem}
.nlc .dk{font-family:var(--serif);font-size:.8125em;font-style:italic;color:var(--ink2);margin-bottom:.5rem}
.nf{display:flex;gap:6px}
.nf input{flex:1;border:2px solid var(--rule);background:var(--paper);padding:.4375rem .625rem;font-family:var(--sans);font-size:.8125em;color:var(--ink);outline:none;border-radius:4px}.nf input::placeholder{color:var(--ink3)}.nf input:focus{border-color:var(--navy)}
.nf button{background:var(--red);color:#fff;font-size:.75rem;font-weight:700;padding:.4375rem .875rem;border-radius:4px;white-space:nowrap}

/* ═══ BACK TO TOP ═══ */
.btt{position:fixed;bottom:1.25rem;right:1.25rem;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:80;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 2px 8px rgba(0,0,0,.15);font-size:1rem}
.btt.show{opacity:1;pointer-events:auto}

/* ═══ READ NEXT STICKY ═══ */
.read-next{position:fixed;bottom:0;left:0;right:0;background:var(--navy);z-index:90;transform:translateY(100%);transition:transform .3s ease;box-shadow:0 -2px 12px rgba(0,0,0,.2)}
.read-next.show{transform:translateY(0)}
.rn-inner{max-width:var(--mw);margin:0 auto;padding:.625rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.rn-label{font-family:var(--mono);font-size:.5625rem;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.4)}
.rn-title{font-family:var(--serif);font-weight:700;font-size:.875rem;color:#fff;flex:1;margin:0 1rem}
.rn-close{color:rgba(255,255,255,.3);font-size:1.25rem;cursor:pointer;padding:0 .5rem;margin-left:.5rem;transition:color .15s}.rn-close:hover{color:#fff}

/* ═══ DARK MODE OVERRIDES ═══ */
html.dark .trend-pill:hover{color:#111}
html.dark .pag-btn.active{color:#111}
html.dark .side-mr-item:hover h4{color:var(--navy)}
html.dark .mri:hover h4{color:var(--navy)}
html.dark .btt{background:var(--paper3)}
html.dark .read-next{background:var(--navy)}
html.dark .rn-label{color:rgba(0,0,0,.4)}
html.dark .rn-title{color:#111}
html.dark .rn-close{color:rgba(0,0,0,.3)}html.dark .rn-close:hover{color:#111}

/* ═══ PRINT ═══ */
@media print{
  .side,.pag,.nlc,.trend,.xsec,.mr-sec,.btt,.read-next{display:none!important}
}

/* ═══ RESPONSIVE — 960px ═══ */
@media(max-width:960px){
  .sec-layout{grid-template-columns:1fr}
  .side{position:static;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--rule)}
  .side-sec:first-child{grid-column:1/-1}
}

/* ═══ RESPONSIVE — 768px ═══ */
@media(max-width:768px){
  .story{grid-template-columns:1fr 110px;gap:.75rem}
  .story .ph{width:110px}
  .story .dk{display:none}
  .lead .ph{aspect-ratio:16/9}
  .sec-bread{display:none}
  .sec-title{padding-left:.5rem;border-left:3px solid var(--ink)}
  .side{grid-template-columns:1fr}
  .mri .mr-ph{width:64px;height:44px}.mri{grid-template-columns:24px 64px 1fr}
  .xsec{flex-direction:column;gap:.375rem;padding:.5rem 1rem}
  .xsec a{font-size:.75rem}
  .rn-label{display:none}
  .btt{bottom:4rem}
}

/* ═══ RESPONSIVE — 480px ═══ */
@media(max-width:480px){
  .story{grid-template-columns:1fr 90px;gap:.5rem}
  .story .ph{width:90px}
  .story h3{font-size:.9375em}
}

/* ═══ PRINT & REDUCED MOTION ═══ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .read-next{transition:none}
}
@media print{
  header,.tb,footer,.ham,.side,.pag,.nlc,.btn-s,.trend,.xsec,.mr-sec,.btt,.read-next{display:none!important}
  body{font-size:11pt;color:#000;background:#fff}a{text-decoration:underline}
}