/* ============================================================
   What's New Today — front-page layout + full-article reader
   Styled to match the Weekly Scoop reader (navy + gold, Fraunces / Georgia).
   Everything is prefixed wn- so nothing else on the site is touched.
   ============================================================ */

/* ---------- section ---------- */
.wn-section{ padding:52px 0 26px; border-bottom:1px solid var(--line); content-visibility:visible; contain-intrinsic-size:auto; }
.wn-mast{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px 24px; flex-wrap:wrap; }
.wn-eyebrow{
  display:block; font:700 11px Inter,system-ui,sans-serif; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-bright); margin-bottom:8px;
}
.wn-mast h2{
  margin:0; font-weight:500; font-size:clamp(26px,4.2vw,40px); line-height:1.1; letter-spacing:-.01em;
  display:flex; align-items:center; gap:12px;
}
.wn-mast h2 span{ font-size:.78em; }
.wn-mast-r{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right; }
.wn-live{
  display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px;
  border:1px solid rgba(95,208,138,.35); background:rgba(95,208,138,.08);
  font:600 12px Inter,system-ui,sans-serif; color:#bfeed2; white-space:nowrap;
}
.wn-dot{ width:7px; height:7px; border-radius:50%; background:#5fd08a; box-shadow:0 0 0 0 rgba(95,208,138,.6); animation:wnPulse 2.4s ease-out infinite; }
@keyframes wnPulse{ 0%{ box-shadow:0 0 0 0 rgba(95,208,138,.55); } 70%,100%{ box-shadow:0 0 0 9px rgba(95,208,138,0); } }
.wn-next{ font:500 12px Inter,system-ui,sans-serif; color:var(--muted-2); }
.wn-rule{ height:1px; margin:18px 0 22px; background:linear-gradient(90deg, var(--gold-dim), rgba(212,167,44,.5), var(--gold-dim) 70%, transparent); border:0; }
.wn-sub{ margin:14px 0 22px; max-width:62ch; font-size:14.5px; line-height:1.55; color:var(--muted); }

/* ---------- grid: one lead story + three supporting stories ---------- */
.wn-grid{ display:grid; gap:20px; grid-template-columns:minmax(0,1.38fr) minmax(0,1fr); grid-template-rows:repeat(3,minmax(0,1fr)); }
.wn-card{
  position:relative; display:flex; width:100%; margin:0; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:linear-gradient(165deg,#161824,#0f1119); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.25,1), border-color .25s ease, box-shadow .35s ease;
  -webkit-tap-highlight-color:transparent;
  animation:wnRise .6s cubic-bezier(.2,.8,.25,1) both;
}
.wn-card:nth-child(2){ animation-delay:.07s } .wn-card:nth-child(3){ animation-delay:.14s } .wn-card:nth-child(4){ animation-delay:.21s }
@keyframes wnRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.wn-card:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:0 22px 50px -18px rgba(0,0,0,.7), 0 0 0 1px rgba(212,167,44,.35); }
.wn-card:active{ transform:scale(.985); }
.wn-card:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }

.wn-media{ position:relative; display:block; overflow:hidden; background:linear-gradient(135deg,#1a2348,#0c1430); }
.wn-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.8,.25,1), opacity .5s ease; }
.wn-media img.wn-loading{ opacity:0; }
.wn-card:hover .wn-media img{ transform:scale(1.06); }
.wn-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top, rgba(8,10,20,.78), rgba(8,10,20,0) 58%); }
.wn-fallback{ position:absolute; inset:0; display:grid; place-items:center; font-size:46px; }

.wn-chip{
  position:absolute; z-index:2; top:12px; left:12px; max-width:calc(100% - 90px);
  font:800 10.5px Inter,system-ui,sans-serif; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#14100a; background:var(--gold-bright); padding:5px 10px; border-radius:999px; box-shadow:0 6px 16px rgba(0,0,0,.35);
}
.wn-fresh{
  position:absolute; z-index:2; top:12px; right:12px; display:inline-flex; align-items:center; gap:6px;
  font:700 10.5px Inter,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#d9f7e5;
  background:rgba(8,20,14,.72); border:1px solid rgba(95,208,138,.5); padding:5px 10px; border-radius:999px; backdrop-filter:blur(6px);
}
.wn-fresh::before{ content:""; width:6px; height:6px; border-radius:50%; background:#5fd08a; }
.wn-num{
  position:absolute; z-index:2; left:12px; bottom:12px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold); color:#0c1430; font:800 12px Inter,system-ui,sans-serif; box-shadow:0 4px 14px rgba(0,0,0,.5);
}

.wn-body{ display:flex; flex-direction:column; min-width:0; }
.wn-kick{ font:700 10.5px Inter,system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:10px; }
.wn-card h3{
  margin:0; font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.01em; color:#fff; line-height:1.22;
}
.wn-card p{ margin:0; color:var(--muted); line-height:1.6; }
.wn-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin-top:auto; padding-top:14px;
  font:500 12px Inter,system-ui,sans-serif; color:var(--muted-2);
}
.wn-meta b{ color:var(--gold-bright); font-weight:700; }
.wn-meta i{ font-style:normal; opacity:.5; }
.wn-go{ margin-left:auto; font:700 10.5px Inter,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright); transition:letter-spacing .25s ease; white-space:nowrap; }
.wn-card:hover .wn-go{ letter-spacing:.17em; }

/* lead */
.wn-lead{ grid-row:1 / span 3; flex-direction:column; }
.wn-lead .wn-media{ aspect-ratio:16/10; flex:none; }
.wn-lead .wn-body{ flex:1; padding:22px 26px 22px; }
.wn-lead h3{ font-size:clamp(24px,2.7vw,34px); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:14px; }
.wn-lead p{ font-size:15px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.wn-lead .wn-num{ width:38px; height:38px; font-size:14px; }

/* supporting */
.wn-side{ flex-direction:row; align-items:stretch; min-height:150px; }
.wn-side .wn-media{ flex:0 0 40%; min-height:100%; }
.wn-side .wn-media::after{ background:linear-gradient(to top, rgba(8,10,20,.5), rgba(8,10,20,0) 55%); }
.wn-side .wn-chip{ top:9px; left:9px; font-size:9.5px; padding:4px 8px; max-width:calc(100% - 18px); }
.wn-side .wn-fresh{ display:none; }
.wn-side .wn-body{ flex:1; padding:16px 18px; justify-content:flex-start; }
.wn-side h3{ font-size:17px; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.wn-side p{ font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wn-side .wn-meta{ padding-top:10px; }
.wn-side .wn-go{ display:none; }

/* skeleton + empty */
.wn-skel{ pointer-events:none; }
.wn-skel .wn-media{ background:var(--panel-2); }
.wn-skel .wn-media::after{ display:none; }
.wn-sk{ display:block; height:12px; border-radius:6px; margin-bottom:10px; background:linear-gradient(90deg,var(--line) 0%,var(--panel-2) 50%,var(--line) 100%); background-size:200% 100%; animation:wnShimmer 1.4s ease-in-out infinite; }
@keyframes wnShimmer{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }
.wn-empty{ grid-column:1/-1; grid-row:auto; padding:44px 20px; text-align:center; font-size:14px; color:var(--muted-2); border:1px dashed var(--line); border-radius:18px; }

@media (max-width:900px){
  .wn-grid{ grid-template-columns:1fr; grid-template-rows:none; gap:16px; }
  .wn-lead{ grid-row:auto; }
  .wn-mast-r{ align-items:flex-start; text-align:left; }
  .wn-lead .wn-body{ padding:18px 18px 18px; }
}
@media (max-width:560px){
  .wn-section{ padding:40px 0 20px; }
  .wn-side{ min-height:128px; }
  .wn-side .wn-media{ flex-basis:36%; }
  .wn-side .wn-body{ padding:12px 14px; }
  .wn-side h3{ font-size:15.5px; -webkit-line-clamp:4; }
  .wn-side p{ display:none; }
  .wn-side .wn-ct{ display:none; }
  .wn-side .wn-meta > :nth-last-child(-n+2){ display:none; }
  .wn-lead p{ -webkit-line-clamp:4; }
}

/* ---------- reader (mirrors .twc-reader from the Weekly Scoop) ---------- */
.wn-reader{
  --bg:#0b0d14; --tx:#e8e5dc; --mu:#9aa4c4; --gd:#d4a72c; --pn:#121830; --ln:rgba(212,167,44,.28); --fs:18px; --bar-h:56px;
  position:fixed; inset:0; z-index:1000; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--bg); color:var(--tx); opacity:0; visibility:hidden; transition:opacity .28s ease, visibility .28s;
}
.wn-reader.open{ opacity:1; visibility:visible; }
.wn-reader.light{ --bg:#f6f3ea; --tx:#1d2233; --mu:#5d6682; --gd:#a8780a; --pn:#ffffff; --ln:rgba(160,120,10,.35); }
.wn-reader *{ box-sizing:border-box; }
.wn-bar{
  position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:var(--bar-h);
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--ln);
}
.wn-prog{ position:absolute; left:0; bottom:-1px; width:100%; height:3px; background:var(--gd); transform:scaleX(0); transform-origin:0 50%; }
.wn-bar-title{ flex:1; min-width:0; text-align:center; font:700 14px Inter,system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wn-tools{ display:flex; gap:6px; }
.wn-btn{
  min-width:40px; height:40px; padding:0 14px; border-radius:20px; border:1px solid var(--ln); background:var(--pn); color:var(--tx);
  font:700 13px Inter,system-ui,sans-serif; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; transition:border-color .15s ease, transform .15s ease;
}
.wn-btn:hover{ border-color:var(--gd); }
.wn-btn:active{ transform:scale(.95); }
.wn-btn:focus-visible{ outline:2px solid var(--gd); outline-offset:2px; }

.wn-art{ max-width:780px; margin:0 auto; padding:0 18px 110px; }
.wn-hero{ position:relative; margin:22px 0 0; border-radius:20px; overflow:hidden; background:linear-gradient(135deg,#1a2348,#0c1430); aspect-ratio:16/9; box-shadow:0 22px 50px -22px rgba(0,0,0,.6); }
.wn-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wn-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,10,20,.55), rgba(8,10,20,0) 45%); pointer-events:none; }
.wn-hero .wn-chip{ top:14px; left:14px; font-size:11px; padding:6px 12px; }
.wn-akick{ display:flex; align-items:center; gap:10px; margin-top:26px; font:700 11.5px Inter,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--gd); }
.wn-akick .wn-numc{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--gd); color:#0c1430; display:grid; place-items:center; font-size:12px; letter-spacing:0; }
.wn-art h1{ margin:14px 0 14px; font:700 clamp(28px,6vw,44px)/1.12 'Fraunces',Georgia,serif; letter-spacing:-.015em; }
.wn-byline{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; font:500 13px Inter,system-ui,sans-serif; color:var(--mu); padding-bottom:20px; border-bottom:1px solid var(--ln); }
.wn-byline b{ color:var(--tx); font-weight:700; }
.wn-byline i{ font-style:normal; opacity:.55; }
.wn-dek{
  margin:24px 0 6px; padding:2px 0 2px 18px; border-left:3px solid var(--gd);
  font:italic 400 clamp(17px,2.6vw,20px)/1.6 'Fraunces',Georgia,serif; color:var(--tx);
}
.wn-text{ margin-top:26px; }
.wn-text p{ margin:0 0 1.2em; font:400 var(--fs)/1.78 Georgia,'Times New Roman',serif; }
.wn-text p:first-child::first-letter{
  float:left; font:700 3.6em/.82 'Fraunces',Georgia,serif; color:var(--gd); padding:.08em .1em 0 0;
}
.wn-points{
  margin:34px 0 8px; padding:22px 22px 8px; border:1px solid var(--ln); border-radius:20px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--gd) 11%, var(--pn)), var(--pn));
}
.wn-points h2{ margin:0 0 14px; font:700 11.5px Inter,system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gd); }
.wn-points ol{ list-style:none; margin:0; padding:0; counter-reset:wnp; }
.wn-points li{ counter-increment:wnp; display:flex; gap:14px; margin:0 0 16px; font:400 16px/1.55 Inter,system-ui,sans-serif; }
.wn-points li::before{
  content:counter(wnp); flex:none; width:26px; height:26px; margin-top:1px; border-radius:50%; display:grid; place-items:center;
  background:var(--gd); color:#0c1430; font:800 12px Inter,system-ui,sans-serif;
}
.wn-src{
  margin:34px 0 0; padding:20px 22px; border-radius:20px; border:1px solid var(--ln); background:var(--pn);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; justify-content:space-between;
}
.wn-src p{ margin:0; flex:1 1 260px; font:400 13px/1.55 Inter,system-ui,sans-serif; color:var(--mu); }
.wn-src p b{ color:var(--tx); }
.wn-cta{
  display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; text-decoration:none;
  background:var(--gd); color:#0c1430; font:800 13px Inter,system-ui,sans-serif; letter-spacing:.02em; box-shadow:0 10px 24px -10px rgba(212,167,44,.7);
  transition:transform .15s ease, box-shadow .2s ease;
}
.wn-cta:hover{ transform:translateY(-2px); }
.wn-more{ margin-top:42px; }
.wn-more h2{ margin:0 0 6px; font:700 11.5px Inter,system-ui,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--gd); }
.wn-more-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:14px; }
.wn-mini{
  display:flex; flex-direction:column; text-align:left; padding:0; font:inherit; color:inherit; cursor:pointer; overflow:hidden;
  border-radius:16px; border:1px solid var(--ln); background:var(--pn); transition:transform .25s ease, border-color .2s ease, box-shadow .25s ease;
}
.wn-mini:hover{ transform:translateY(-3px); border-color:var(--gd); box-shadow:0 14px 30px rgba(0,0,0,.35); }
.wn-mini .wn-media{ aspect-ratio:16/10; flex:none; }
.wn-mini:hover .wn-media img{ transform:scale(1.07); }
.wn-mini .wn-num{ left:8px; bottom:8px; width:26px; height:26px; font-size:11px; }
.wn-mini-t{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; padding:12px 12px 14px; font:600 13.5px/1.4 Inter,system-ui,sans-serif; }
.wn-reader.light .wn-points,
.wn-reader.light .wn-src{ box-shadow:0 8px 22px rgba(60,50,20,.1); }

@media (max-width:640px){
  .wn-art{ padding:0 16px 90px; }
  .wn-hero{ border-radius:16px; margin-top:16px; }
  .wn-more-grid{ grid-template-columns:1fr; }
  .wn-mini{ flex-direction:row; }
  .wn-mini .wn-media{ flex:0 0 38%; aspect-ratio:auto; min-height:92px; }
  .wn-mini-t{ -webkit-line-clamp:4; align-self:center; }
  .wn-btn{ padding:0 11px; min-width:38px; height:38px; }
  .wn-btn .wn-btn-txt{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wn-card, .wn-dot{ animation:none; }
  .wn-card, .wn-media img, .wn-reader{ transition:none; }
}

/* ---------- Desktop only: What's New runs full width on top; clocks + currency board pair up underneath ---------- */
@media (min-width:1100px){
  .dash-pair.dp-a > #morning{ grid-column:1 / -1; grid-row:1; }
  .dash-pair.dp-a > #worldclock{ grid-column:1; grid-row:2; }
  .dash-pair.dp-a > #currency-board{ grid-column:2; grid-row:2; }
  /* the wide layout has room to breathe: bigger side stories, more of each excerpt */
  .wn-section .wn-side h3{ font-size:20px; -webkit-line-clamp:3; }
  .wn-section .wn-side p{ font-size:14px; -webkit-line-clamp:3; }
  .wn-section .wn-side .wn-body{ padding:20px 24px; }
  .wn-section .wn-side .wn-media{ flex-basis:38%; }
  .wn-section .wn-lead h3{ font-size:clamp(28px,2.4vw,38px); }
  .wn-section .wn-lead p{ font-size:16px; }
}