:root{
  --bg:#07111d;
  --bg-2:#0a1522;
  --card:#101b29;
  --card-2:#132131;
  --line:#26364b;
  --text:#f4f6f8;
  --muted:#aeb9c7;
  --gold:#f5bb38;
  --purple:#b68cff;
  --blue:#67b8ff;
  --green:#78d58a;
  --cyan:#5ad8e6;
  --coral:#ff716e;
  --orange:#ff9f2f;
  --periwinkle:#89a8ff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% 0%, rgba(37,78,124,.18), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(244,187,56,.06), transparent 22%),
    linear-gradient(180deg,var(--bg),#050b13 85%);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.page-shell{
  width:min(1540px, calc(100% - 36px));
  margin:0 auto;
  padding:30px 0 18px;
}
.topbar{
  display:grid;
  grid-template-columns:1fr minmax(520px, 720px);
  gap:24px;
  align-items:center;
  margin-bottom:20px;
}
.brand{
  display:flex;
  gap:18px;
  align-items:center;
}
.brand-mark{font-size:58px;color:var(--gold);line-height:1}
.brand h1{
  margin:0;
  font-size:clamp(34px,4vw,58px);
  letter-spacing:-2px;
  font-weight:500;
}
.brand h1 span{color:var(--gold)}
.brand p{
  margin:8px 0 0;
  font-family:"Playfair Display",serif;
  font-style:italic;
  color:#ece4d8;
  font-size:19px;
}
.glass,.card{
  background:linear-gradient(145deg,rgba(20,33,49,.96),rgba(9,17,27,.96));
  border:1px solid var(--line);
  box-shadow:0 14px 35px rgba(0,0,0,.18);
}
.weather-panel{
  border-radius:12px;
  padding:20px 26px;
  display:grid;
  grid-template-columns:1fr 1px 1.1fr;
  gap:28px;
  align-items:center;
}
.weather-main{display:flex;align-items:center;gap:18px}
.weather-icon{font-size:48px}
.temperature{font-size:48px;font-weight:600;line-height:1}
.temperature span{font-size:58px}
.weather-range{margin-top:8px;font-size:14px}
.weather-divider{width:1px;height:82px;background:var(--line)}
.date-info{display:grid;gap:16px;font-size:16px}
.muted,.subtitle,.source-note{color:var(--muted)}

.card{
  border-radius:11px;
  overflow:hidden;
  position:relative;
}
.featured{
  border-color:#5f4a25;
  background:linear-gradient(100deg,rgba(54,42,27,.82),rgba(22,23,24,.96));
}
.briefing{
  display:grid;
  grid-template-columns:80px 1fr 250px;
  gap:24px;
  align-items:center;
  padding:20px 28px;
  margin-bottom:16px;
}
.brief-icon{
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  font-size:32px;
}
.eyebrow{color:var(--gold);font-weight:800;margin-bottom:10px}
.brief-copy p{margin:0;line-height:1.55;max-width:900px}
.brief-cta{
  border-left:1px solid rgba(255,255,255,.15);
  padding-left:34px;
  color:var(--gold);
  font-weight:700;
  text-align:center;
  line-height:1.35;
}
.down-arrow{font-size:30px;margin-top:4px}

.news-grid{
  display:grid;
  grid-template-columns:1.45fr .83fr .83fr .95fr;
  gap:16px;
}
.middle-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  margin-top:16px;
}
.bottom-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:16px;
  margin-top:16px;
}

.section-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:.2px;
  padding:20px 20px 14px;
}
.purple{color:var(--purple)}
.blue{color:var(--blue)}
.green{color:var(--green)}
.cyan{color:var(--cyan)}
.coral{color:var(--coral)}
.orange{color:var(--orange)}
.periwinkle{color:var(--periwinkle)}
.gold{color:var(--gold)}

.scripture{
  background:
    radial-gradient(circle at 20% 10%, rgba(182,140,255,.11), transparent 35%),
    linear-gradient(145deg,#171328,#0a111b);
}
.scripture-content{
  margin:0 12px 12px;
  border-radius:9px;
  padding:28px 26px 20px;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.86), rgba(242,233,255,.90) 40%, rgba(237,222,204,.92)),
    linear-gradient(#efe7ff,#e9dfcd);
  color:#18202b;
  min-height:540px;
  display:flex;
  flex-direction:column;
}
blockquote{
  margin:0 0 20px;
  font-size:27px;
  font-weight:700;
  line-height:1.4;
}
blockquote cite{
  display:block;
  font-style:normal;
  font-size:16px;
  font-weight:500;
  margin-top:8px;
}
.scripture-comment{font-size:16px;line-height:1.65}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:auto;
  padding:13px 18px;
  border-radius:9px;
  font-weight:700;
}
.purple-button{
  background:linear-gradient(90deg,#7c4be9,#9c56f0);
  color:white;
}

.compact-news{padding-bottom:16px}
.news-list{padding:0 16px}
.news-item{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:12px;
  align-items:start;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.09);
}
.news-item:first-child{border-top:1px solid rgba(255,255,255,.12)}
.news-item:hover h3{text-decoration:underline}
.thumb{
  height:70px;
  border-radius:7px;
  display:grid;
  place-items:center;
  font-weight:800;
  background:#1b3556;
  color:white;
}
.thumb-jw{background:linear-gradient(135deg,#2d5a92,#18385d)}
.gradient-thumb{background:linear-gradient(135deg,#263d57,#5f7389)}
.news-item h3{font-size:15px;line-height:1.35;margin:0 0 7px}
.news-item p{font-size:13px;line-height:1.45;color:var(--muted);margin:0}
.text-link{
  display:block;
  padding:12px 20px 2px;
  font-size:14px;
  font-weight:600;
}

.middle-grid .card{padding:0 16px 16px}
.middle-grid .section-title{padding-left:0}
.middle-grid h2{font-size:20px;margin:16px 0 8px}
.middle-grid p{font-size:14px;line-height:1.6;color:#d9e0e7}
.hero-placeholder{
  height:150px;border-radius:9px;
  display:grid;place-items:center;
  font-size:48px;
}
.tech-hero{background:linear-gradient(135deg,#18303b,#285d67)}
.food-hero{background:linear-gradient(135deg,#4e2d17,#90612b)}
.accent-cyan{border-color:#1e6b70;background:linear-gradient(145deg,#0d2830,#10202a)}
.accent-red{border-color:#6a3137;background:linear-gradient(145deg,#2a151b,#1d1720)}
.accent-orange{border-color:#704619;background:linear-gradient(145deg,#2e2113,#21180f)}
.health-list{display:grid;gap:16px;margin-top:18px}
.health-list>div{
  display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:start
}
.health-list span{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.06)
}
.health-list p{margin:0}
.source-note{font-size:12px!important}
.recipe-meta{font-size:13px;color:#dfc28a;margin-bottom:10px}

.history-card{padding-bottom:16px}
.history-content{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:20px;
  padding:0 18px 8px;
  align-items:center;
}
.history-image{
  min-height:160px;border-radius:8px;background:#05080d;
  display:grid;place-items:center;font-size:64px;
}
.history-content h3{color:var(--blue);margin:0 0 10px}
.history-content p{line-height:1.6;color:#d4dce6}
.quote-card{padding-bottom:16px}
.quote-inner{
  margin:0 14px;
  min-height:190px;
  border-radius:9px;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 75% 65%,rgba(255,189,72,.25),transparent 25%),
    linear-gradient(135deg,#4d2e18,#1a1714);
}
.quote-inner p{
  font-family:"Playfair Display",serif;
  font-style:italic;
  font-size:27px;
  line-height:1.5;
  text-align:center;
  margin:0;
}

footer{
  text-align:center;
  color:var(--muted);
  padding:18px 0 4px;
  font-size:14px;
}
footer span{margin-left:8px;color:#d7dce2}

@media (max-width:1200px){
  .topbar{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1.4fr 1fr 1fr}
  .news-grid .compact-news:last-child{grid-column:2 / span 2}
}
@media (max-width:900px){
  .page-shell{width:min(100% - 22px, 760px)}
  .weather-panel{grid-template-columns:1fr;gap:18px}
  .weather-divider{display:none}
  .briefing{grid-template-columns:60px 1fr}
  .brief-cta{display:none}
  .news-grid,.middle-grid,.bottom-grid{grid-template-columns:1fr}
  .news-grid .compact-news:last-child{grid-column:auto}
  .history-content{grid-template-columns:1fr}
}
@media (max-width:560px){
  .brand-mark{font-size:42px}
  .brand h1{font-size:34px}
  .brand p{font-size:15px}
  .briefing{grid-template-columns:1fr;padding:18px}
  .brief-icon{display:none}
  .weather-panel{padding:18px}
  .temperature{font-size:36px}
  .temperature span{font-size:44px}
  .scripture-content{min-height:auto}
  blockquote{font-size:22px}
}


.weather-extra{
  margin-top:7px;
  font-size:12px;
  color:#90a4b8;
}
.weather-refresh{
  appearance:none;
  border:1px solid #31475f;
  background:#0c1825;
  color:#dce7f1;
  border-radius:8px;
  padding:8px 11px;
  width:max-content;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  transition:.2s ease;
}
.weather-refresh:hover{
  border-color:#5ad8e6;
  color:#5ad8e6;
  transform:translateY(-1px);
}
.weather-refresh:disabled{
  opacity:.5;
  cursor:wait;
  transform:none;
}
.weather-status{
  min-height:15px;
  font-size:11px;
  color:#73879a;
}


.live-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin-bottom:18px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(88,59,130,.12);
  border:1px solid rgba(116,76,171,.24);
  color:#5b3b82;
  font-size:12px;
  font-weight:700;
}
.wol-full-text{
  white-space:pre-line;
  font-size:16px;
  line-height:1.72;
  margin-bottom:24px;
}
.loading-item{
  color:var(--muted);
  padding:18px 0;
  font-size:13px;
}
.news-source{
  display:inline-block;
  margin-top:7px;
  font-size:11px;
  color:#7f93a7;
}
.news-item.dynamic{
  grid-template-columns:44px 1fr;
}
.news-item.dynamic .thumb{
  height:44px;
  font-size:17px;
}
.recipe-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:10px 0 14px;
}
.recipe-tags span{
  font-size:11px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:5px 8px;
  color:#dfc28a;
}
.ingredients{
  margin:8px 0 12px;
  padding-left:18px;
  color:#d9e0e7;
  font-size:13px;
  line-height:1.55;
}
.api-warning{
  background:rgba(245,187,56,.08);
  border:1px solid rgba(245,187,56,.18);
  border-radius:8px;
  padding:10px 12px;
  color:#d8c28e;
  font-size:12px;
  line-height:1.5;
}


.market-strip{
  display:grid;
  grid-template-columns:1fr 1px 1fr auto;
  align-items:center;
  gap:24px;
  padding:16px 22px;
  margin-bottom:16px;
  background:
    radial-gradient(circle at 15% 20%,rgba(90,216,230,.08),transparent 30%),
    radial-gradient(circle at 80% 20%,rgba(182,140,255,.08),transparent 30%),
    linear-gradient(145deg,#0d1d2c,#0a1421);
  border-color:#294762;
}
.market-item{
  display:flex;
  align-items:center;
  gap:14px;
}
.market-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(103,184,255,.09);
  border:1px solid rgba(103,184,255,.16);
  font-size:22px;
}
.market-label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.8px;
  color:#8fb3d5;
}
.market-value{
  font-size:25px;
  font-weight:800;
  margin-top:2px;
}
.market-change{
  margin-top:3px;
  font-size:11px;
  color:#7f93a7;
}
.market-change.up{color:#78d58a}
.market-change.down{color:#ff8d8a}
.market-separator{
  width:1px;height:50px;background:var(--line)
}
.market-source{
  color:var(--blue);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.compact-news{
  min-height:0 !important;
}
.news-grid{
  align-items:start;
}
.news-list:empty{
  display:none;
}
@media (max-width:900px){
  .market-strip{
    grid-template-columns:1fr 1fr;
  }
  .market-separator{display:none}
  .market-source{grid-column:1 / -1}
}
@media (max-width:560px){
  .market-strip{grid-template-columns:1fr}
}