/* ---------------------------------------------------
   New View Advice — homepage
   Brand: Pink #f9dbe5 · Dark Blue #159bc3 · Light Blue #95d8eb · Navy #07084f
   Pink and light blue are for small details only (thin lines, nav underline).
   Large areas use white or --cloud.
--------------------------------------------------- */
:root {
  --bg: #ffffff;
  --cloud: #e9eef2;           /* section/header background. Lighter option: #f0f3f6 (Mist) */
  --navy: #07084f;
  --blue: #159bc3;
  --light: #95d8eb;
  --pink: #f9dbe5;
  --pink-deep: #f2c9d9;        /* the pink, a shade down: hover on the ask pill */
  --rule: #e3e2ea;            /* nav divider, same weight as hum n play */
  --rule-soft: rgba(7,8,79,.12);
  --muted: rgba(7,8,79,.6);

  /* Layout widths. Change these numbers to resize the site.
     --wrap  the page: header, hero, top stories, footer
     --feed  the article feed and the section listings (narrower on purpose)
     --post  body text on a post page (~720px is the standard reading column)
     --gutter is the space at the screen edges; it grows with the screen but
     stops at 48px so it can't eat into the content on a big monitor. */
  --wrap: 1080px;
  --feed: 860px;
  --post: 680px;
  --gutter: clamp(20px, 4vw, 48px);
  --page:      calc(var(--wrap) + var(--gutter) * 2);
  --page-feed: calc(var(--feed) + var(--gutter) * 2);
  --page-post: calc(var(--post) + var(--gutter) * 2);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--navy);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden; overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Banner ribbon ---------- */
.ribbon {
  position: relative; z-index: 6;
  background: var(--blue); color: #fff;   /* deep blue with white text (Oct 2026) */
  font-size: 13px; padding: 9px var(--gutter);
  display: flex; align-items: center; gap: 10px;
}
.ribbon .rt { flex: 1; }
.ribbon a { color: #fff; font-weight: 600; text-decoration: underline; }
.ribbon .x { background: none; border: 0; color: #fff; font-size: 15px; opacity: .8; cursor: pointer; }
.ribbon.hidden { display: none; }

/* ---------- Header / nav ---------- */
header {
  position: sticky; top: 0; z-index: 5;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
header .in {
  display: flex; justify-content: space-between; align-items: center;
  max-width: var(--page); margin: 0 auto;
  padding: 22px var(--gutter); font-size: 14px; font-weight: 500;
}
header .brand { font-weight: 700; font-size: 16px; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; }
header .brand img { width: 30px; height: 30px; display: block; flex: none; }   /* logo icon (Oct 18) */
header nav ul { display: flex; align-items: center; gap: 26px; list-style: none; }
header nav a { opacity: .8; }
header nav a:hover { opacity: 1; }
/* ---------- Nav underline ----------
   Scanning: a thin line appears under whatever the mouse is over, so it's
   obvious what you're about to click. The line is transparent rather than
   absent, so nothing shifts when it appears.
   You are here: the current page turns blue and keeps the line. js/nav.js
   works out which link that is and marks it with aria-current.
   Skipped on the pink "ask a question" pill, which is already a button. */
header nav > ul > li > a:not(.ask-btn),
header nav .drop-btn {
  border-bottom: 1.5px solid transparent;
  padding-bottom: 3px;
}
@media (hover: hover) {
  header nav > ul > li > a:not(.ask-btn):hover,
  header nav .drop-btn:hover { border-bottom-color: currentColor; }
}
header nav > ul > li > a[aria-current="page"],
header nav .has-drop.here > .drop-btn {
  color: var(--blue); opacity: 1; font-weight: 600; border-bottom-color: currentColor;
}
header nav a.ask-btn {
  padding: 10px 18px; border-radius: 4px; margin-left: 10px;   /* the one button shape: 4px corners */
  background: var(--navy); color: #fff; border: 1.5px solid var(--navy);
  font-weight: 600; opacity: 1;
  transition: background .15s, border-color .15s;
}
/* the pill is a button, so it changes color instead of taking the underline */
header nav a.ask-btn:hover { background: var(--blue); border-color: var(--blue); }
.menu-btn {
  display: none; background: none; border: 1.5px solid var(--navy);
  border-radius: 4px; padding: 8px 14px; font-weight: 600; cursor: pointer;
}

/* ---------- Free resources dropdown ---------- */
header nav .has-drop { position: relative; }
.drop-btn {
  background: none; border: 0; cursor: pointer; font-weight: 500; font-size: 14px;
  opacity: .8; display: inline-flex; align-items: center; gap: 6px; padding: 0;
}
.drop-btn::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.drop-btn:hover, .has-drop.open .drop-btn { opacity: 1; }
.has-drop.open .drop-btn::after { transform: rotate(-135deg); margin-top: 3px; }
header nav ul.drop {
  display: none; position: absolute; top: 100%; left: -16px; margin-top: 12px;
  flex-direction: column; align-items: stretch; gap: 0; min-width: 190px;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
  padding: 6px; box-shadow: 0 10px 30px rgba(7,8,79,.1);
}
/* invisible bridge so the menu doesn't close while the mouse moves down to it */
header nav ul.drop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
header nav ul.drop a { display: block; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
header nav ul.drop a:hover { background: rgba(7,8,79,.06); opacity: 1; }
header nav ul.drop a[aria-current="page"] { color: var(--blue); opacity: 1; font-weight: 600; }
.has-drop.open ul.drop { display: flex; }
@media (hover: hover) and (min-width: 761px) {
  .has-drop:hover ul.drop { display: flex; }
  .has-drop:hover .drop-btn { opacity: 1; }
}

/* ---------- Hero ---------- */
main > * { position: relative; z-index: 1; }
.hero { text-align: center; padding: 8vh var(--gutter) 6vh; max-width: calc(960px + var(--gutter) * 2); margin: 0 auto; }
/* Cloud band behind every hero (home, section listings, hubs). The text stays
   centered at its normal width; the shadow + clip paint the color edge to edge. */
.hero {
  background: var(--cloud);
  box-shadow: 0 0 0 100vmax var(--cloud);
  clip-path: inset(0 -100vmax);
}
.hero h1 {
  font-size: clamp(34px, 5.2vw, 60px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05; text-wrap: balance;
}
.hero p { margin-top: 18px; font-size: 18px; color: var(--muted); }

/* ---------- Sort chips ---------- */
.ask { margin-top: 34px; font-size: 14px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.chips button {
  font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(7,8,79,.2); background: rgba(255,255,255,.75); cursor: pointer;
}
.chips button.on { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Top stories ---------- */
.top { max-width: var(--page); margin: 30px auto 0; padding: 0 var(--gutter); }
.top .box {
  background: #fff; border: 1px solid rgba(7,8,79,.12);
  border-radius: 16px; padding: 22px 24px 8px;
}
.top h2 { font-size: 14px; font-weight: 600; margin-bottom: 8px; display: flex; justify-content: space-between; }
.top h2 span { font-weight: 400; color: var(--muted); font-size: 12px; }
.top ol { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.top li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(7,8,79,.1); }
.top li:nth-child(-n+2) { border-top: 0; }
.top .n { font-size: 14px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.top h3 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.top h3 a:hover { color: var(--blue); }
.top .m { font-size: 12px; color: var(--muted); margin-top: 3px; }
@media (max-width: 640px) { .top ol { grid-template-columns: 1fr; } .top li:nth-child(2) { border-top: 1px solid rgba(7,8,79,.1); } }

/* ---------- Feed ---------- */
.feed { max-width: var(--page-feed); margin: 0 auto; padding: 30px var(--gutter) 100px; }
.feed h2 {
  font-size: 14px; font-weight: 600; padding-bottom: 12px;
  border-bottom: 2px solid var(--navy); display: flex; justify-content: space-between;
}
.feed h2 a { color: var(--blue); }
.item {
  display: grid; grid-template-columns: 110px 1fr; gap: 22px;
  padding: 22px 0; border-bottom: 1px solid var(--rule-soft); align-items: start;
}
.item .thumb {
  width: 110px; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--rule-soft);
}
.item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item .head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.item .date { font-size: 14px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; }
.item .kind { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.item .kind i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1px solid rgba(7,8,79,.15); }
.item h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.item h3 a:hover { color: var(--blue); }
.item p {
  font-size: 15px; color: var(--muted); margin-top: 6px; max-width: 60ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.item p.verse { white-space: pre-line; }
.item .by { font-size: 13px; opacity: .5; margin-top: 6px; }
.empty { padding: 40px 0; text-align: center; color: var(--muted); font-size: 15px; }

.more {
  display: block; margin: 28px auto 0; cursor: pointer;
  padding: 12px 26px; border-radius: 999px;
  border: 1.5px solid var(--navy); background: rgba(255,255,255,.75);
  font-size: 14px; font-weight: 600;
}
.more:hover { background: var(--navy); color: #fff; }
.more[hidden] { display: none; }

/* ---------- Hubs ---------- */
.hubs { text-align: center; padding-top: 50px; }
.hubs h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.hubs .r { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hubs a { padding: 12px 20px; border-radius: 12px; background: var(--cloud); font-weight: 600; font-size: 14px; }

/* ---------- Footer ---------- */
footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--rule); padding: 30px var(--gutter) 40px;
  font-size: 13px; color: var(--muted);
}
footer .row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; max-width: var(--wrap); margin: 0 auto; }
footer a { color: var(--blue); font-weight: 600; }
/* disclaimer lines up with the footer row above it (was a narrower centered block that looked off) */
footer .disclaimer { max-width: var(--wrap); margin: 20px auto 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.6; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  header .in { padding: 16px var(--gutter); }
  header nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--rule); padding: 10px var(--gutter) 18px; }
  header nav.open { display: block; }
  header nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  header nav ul li { width: 100%; }
  header nav a { display: block; padding: 10px 0; }
  /* stop the underline running the full width of the open menu */
  header nav > ul > li > a:not(.ask-btn) { width: fit-content; padding-bottom: 8px; }
  header nav .drop-btn { width: fit-content; }
  header nav a.ask-btn { display: inline-block; margin: 10px 0 0; }
  .menu-btn { display: inline-block; }
  .drop-btn { padding: 10px 0 8px; justify-content: flex-start; }
  header nav ul.drop {
    position: static; margin: 0 0 6px; box-shadow: none; border: 0; border-left: 2px solid var(--light);
    border-radius: 0; padding: 0 0 0 14px; min-width: 0;
  }
  header nav ul.drop::before { display: none; }
  header nav ul.drop a { padding: 8px 0; }
  header nav ul.drop a:hover { background: none; }
  .item { grid-template-columns: 84px 1fr; gap: 14px; }
  .item .thumb { width: 84px; }
  .item h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }