/* News. Every rule is scoped to a class starting "nw-". */

.nw-news { padding-top: 96px; }
.nw-post { max-width: 1280px; margin: 0 auto; color: #1f2937; font-size: 16px; line-height: 1.65; }
.nw-post + .nw-post { margin-top: 88px; }
.nw-kind { margin: 0 0 16px; font-size: 19px; color: var(--text); }
.nw-post h2 { font-family: var(--font-head); font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; }
.nw-post .nw-h2-small { font-size: 26px; }
.nw-date { margin: 18px 0 22px; font-size: 19px; color: var(--text); }
.nw-post h3 { margin: 36px 0 18px; font-family: var(--font-head); font-size: 20px; }
.nw-post h3.nw-h3-large { margin-top: 56px; font-size: 24px; }
.nw-post h2 + h3 { margin-top: 20px; }
.nw-post strong { color: var(--navy-text); }
.nw-post ul:not([class]) { margin: 0 0 1em; padding-left: 40px; list-style: disc; }
.nw-post ul:not([class]) li { margin-bottom: 2px; }
.nw-post a:not(.btn) { color: var(--steel-text); }

/* Posts with a photo beside the text */
.nw-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 120px; align-items: start; }
.nw-photo { margin: 0; }
.nw-photo img { width: 100%; max-width: 570px; margin-left: auto; }
.nw-links { display: flex; flex-wrap: wrap; gap: 4px 10px; }

/* Quotes */
.nw-quote { position: relative; margin: 28px 0; padding: 38px 24px 38px 132px; border-left: 3px solid var(--steel); border-radius: 0 var(--radius) var(--radius) 0; background: #eef3f9; }
.nw-quote > .icon { position: absolute; left: 20px; top: 40px; width: 30px; height: 30px; color: var(--steel); opacity: .35; }
.nw-quote p { margin: 0; font-family: var(--font-head); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--navy-text); }

/* Event cards */
.nw-event { max-width: 412px; margin: 32px 0; padding: 26px 24px 24px; border: 1px solid #edf0f4; color: var(--navy-text); }
.nw-event h4 { margin-bottom: 26px; font-family: var(--font-head); font-size: 24px; line-height: 1.5; }
.nw-event-facts { display: grid; gap: 8px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); font-size: 14px; }
.nw-event-facts li { display: flex; align-items: center; gap: 10px; }
.nw-event-facts .icon { width: 14px; height: 14px; color: var(--navy-text); }
.nw-event > p { line-height: 1.4; }
.nw-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 412px)); gap: 20px; margin-top: 20px; }
.nw-events .nw-event { margin: 0; display: flex; flex-direction: column; }
.nw-event-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; }
.nw-event-foot p { margin: 0; line-height: 1.3; font-size: 14px; }
.nw-event-foot span { display: block; }
.nw-event-foot strong { font-size: 16px; }
.nw-event-foot .nw-free { color: #16803c; }

.nw-banner { width: 100%; margin-top: 52px; border-radius: 24px; }

@media (max-width: 1100px) {
  .nw-split { grid-template-columns: 1fr; gap: 40px; }
  .nw-photo img { margin: 0 auto; }
}

@media (max-width: 760px) {
  .nw-news { padding-top: 64px; }
  .nw-post + .nw-post { margin-top: 64px; }
  .nw-kind, .nw-date { font-size: 17px; }
  .nw-quote { padding: 64px 20px 24px 22px; }
  .nw-quote > .icon { top: 22px; }
  .nw-quote p { font-size: 19px; }
  .nw-post ul:not([class]) { padding-left: 22px; }
  .nw-banner { border-radius: 14px; }
}

/* Banner photo (notes/STYLE-GUIDE.md, "Banner photos"; notes/review/news.md, "Banner"). The photo is 1619 x 971
   (aspect 0.6). Its focal point is the man reading by the window, at 178-357 across and 268-650 down (head at
   268-330); the calm area is the sky between the window frames, 470-1290 across and 0-430 down, with the
   skyline's tops at about 420-460. The title goes on the sky, just above the skyline, with his head below
   the see-through header. No white burst: the sky behind the title is already pale and plain. Wide screens cover the banner by width, so photo row 358 (36.8% down) sits
   0.368 x 0.6 x 100vw = 22.1vw below the photo's top; holding it at the title's centre (213 px) gives
   calc(213px - 22.1vw), and clamp() keeps the photo filling the banner. */
.nw-hero { background-color: #e7e7e7; background-position: 50% clamp(100%, calc(213px - 22.1vw), 0px); }
/* Phones: the banner is 194 px tall, so the photo would be drawn at its height and the man's head would sit
   under the header. Drawn at 150% of the banner's height from the top, his head is just below the header and
   the title sits on the sky and skyline; 15% across keeps him in view at the left. */
@media (max-width: 480px) {
  .nw-hero { background-size: auto 150%; background-position: 15% 0; }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .nw-post { color: #cfdcef; }
  .nw-quote { border-left-color: #4892dc; background-color: #1a202a; }
  .nw-quote > .icon { color: #7ebaf9; }
  .nw-event { border-color: #2f3641; }
  .nw-event-foot .nw-free { color: #8dd69b; }
  .nw-hero { background-color: #232934; }
}