:root {
  --blue: #073ca8;
  --blue-deep: #05286f;
  --blue-light: #dce9ff;
  --yellow: #ffd92f;
  --yellow-soft: #fff1a8;
  --coral: #f45b4f;
  --ink: #131b2a;
  --paper: #f7f8f4;
  --white: #ffffff;
  --line: #c8cfda;
  --shell: min(1180px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Verdana, Geneva, sans-serif; font-size: 16px; line-height: 1.65; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; object-fit: cover; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
button, input { font: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; transform: translateY(-180%); background: var(--yellow); color: var(--ink); padding: 8px 12px; font-weight: 700; }
.skip-link:focus { transform: none; }

.site-header { position: relative; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--ink); }
.masthead { min-height: 106px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: baseline; width: max-content; color: var(--blue); font-weight: 800; line-height: 1; letter-spacing: 0; }
.brand-main { font-size: 31px; }
.brand-dot { color: var(--yellow); font-size: 39px; text-shadow: 1px 1px 0 var(--blue); }
.brand-now { color: var(--ink); font-size: 24px; }
.strapline { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.search-open { justify-self: end; border: 0; background: transparent; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; padding: 10px 0; }
.search-open span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: var(--blue); font-size: 24px; line-height: 1; }
.nav-wrap { background: var(--blue); color: var(--white); }
.category-nav { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow-x: auto; scrollbar-width: none; }
.category-nav::-webkit-scrollbar { display: none; }
.category-nav a { white-space: nowrap; font-size: 13px; font-weight: 700; border-bottom: 2px solid transparent; padding: 14px 0 11px; }
.category-nav a:hover { border-color: var(--yellow); color: var(--yellow); }

.hero { min-height: 590px; padding-block: 46px 52px; display: grid; grid-template-columns: minmax(0, .91fr) minmax(450px, 1.09fr); gap: 58px; align-items: center; position: relative; }
.hero::before { content: ""; position: absolute; width: 72px; height: 72px; border: 16px solid var(--blue); border-radius: 50%; left: 42%; top: 38px; opacity: .15; }
.hero-copy { position: relative; z-index: 2; }
.edition, .kicker { display: block; color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0; margin-bottom: 18px; }
.hero-intro { max-width: 510px; font-size: 18px; line-height: 1.55; margin: 0 0 30px; }
.hero-title { margin: 0; font-size: 52px; line-height: 1.04; font-weight: 800; color: var(--blue-deep); max-width: 620px; }
.hero-title > a { display: flex; align-items: flex-start; gap: 18px; }
.hero-title b { flex: 0 0 50px; width: 50px; height: 50px; display: grid; place-items: center; border: 2px solid var(--blue); border-radius: 50%; font-size: 24px; color: var(--blue); }
.hero-title:hover span, h2 a:hover, h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; text-decoration-color: var(--yellow); }
.hero-copy > p:not(.hero-intro) { max-width: 550px; margin: 24px 0 22px; }
.story-meta { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; font-weight: 700; }
.story-meta a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.hero-visual { display: block; position: relative; min-width: 0; }
.hero-visual img { width: 100%; aspect-ratio: 1.08; border-radius: 48% 48% 43% 48%; position: relative; z-index: 2; box-shadow: 18px 20px 0 var(--blue); }
.sun-disc { position: absolute; width: 71%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); right: -18%; top: -13%; z-index: 1; }
.image-note { position: absolute; z-index: 3; left: -38px; bottom: 16%; padding: 12px 17px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; font-size: 12px; font-weight: 800; transform: rotate(-5deg); }

.ticker { background: var(--yellow); border-block: 2px solid var(--ink); overflow: hidden; }
.ticker-track { min-height: 58px; width: max-content; min-width: 100%; display: flex; align-items: center; justify-content: space-around; gap: 30px; padding-inline: 28px; color: var(--blue-deep); font-weight: 800; text-transform: uppercase; font-size: 13px; }
.ticker i { width: 9px; height: 9px; background: var(--coral); border-radius: 50%; }

.story-pair { padding-block: 92px; display: grid; gap: 34px; }
.story-wide { min-height: 420px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: stretch; overflow: hidden; position: relative; }
.story-wide:nth-child(even) { grid-template-columns: .92fr 1.08fr; }
.story-blue { background: var(--blue); color: var(--white); border-radius: 210px 7px 7px 210px; }
.story-yellow { background: var(--yellow); color: var(--ink); border-radius: 7px 210px 210px 7px; }
.story-photo { min-width: 0; overflow: hidden; }
.story-blue .story-photo { border-radius: 210px 0 0 210px; }
.story-yellow .story-photo { border-radius: 0 210px 210px 0; }
.story-photo img { width: 100%; height: 100%; min-height: 420px; transition: transform .5s ease; }
.story-photo:hover img, .orbit-image:hover img, .related-image:hover img, .category-image:hover img { transform: scale(1.035); }
.story-copy { padding: 54px 58px; align-self: center; position: relative; }
.number { position: absolute; right: 38px; top: 24px; font-size: 58px; line-height: 1; font-weight: 800; opacity: .16; }
.section-label { color: inherit; display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--coral); }
.story-copy h2 { font-size: 35px; line-height: 1.15; margin: 18px 0; letter-spacing: 0; }
.story-copy p { margin: 0 0 24px; font-size: 15px; }
.read-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 13px; border-bottom: 2px solid currentColor; padding-bottom: 4px; }
.read-link span { font-size: 21px; }

.roundup { padding-block: 36px 120px; }
.roundup-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; border-bottom: 1px solid var(--ink); padding-bottom: 27px; }
.roundup-head h2 { margin: 0; color: var(--blue-deep); font-size: 39px; line-height: 1.1; }
.roundup-head p { max-width: 480px; margin: 0 0 2px; justify-self: end; }
.roundup-orbit { min-height: 740px; display: grid; grid-template-columns: 1fr 190px 1fr; gap: 25px; align-items: center; position: relative; padding-top: 66px; }
.roundup-orbit::before { content: ""; position: absolute; width: 58%; aspect-ratio: 1; border: 2px dashed var(--blue); border-radius: 50%; left: 21%; top: 15%; opacity: .35; }
.orbit-story { position: relative; z-index: 2; }
.orbit-left { align-self: start; }
.orbit-right { align-self: end; display: flex; flex-direction: column-reverse; }
.orbit-image { display: block; width: 100%; overflow: hidden; border: 9px solid var(--white); box-shadow: 0 0 0 2px var(--ink); }
.orbit-left .orbit-image { border-radius: 50% 50% 6px 50%; transform: rotate(-2deg); }
.orbit-right .orbit-image { border-radius: 50% 6px 50% 50%; transform: rotate(2deg); }
.orbit-image img { width: 100%; aspect-ratio: 1.15; transition: transform .5s ease; }
.orbit-story > div { width: 88%; margin: 26px auto; }
.orbit-story h3 { margin: 10px 0 14px; font-size: 27px; line-height: 1.2; color: var(--blue-deep); }
.orbit-story p { margin: 0; font-size: 14px; }
.roundup-center { width: 160px; height: 160px; border-radius: 50%; background: var(--coral); color: var(--white); display: grid; place-content: center; text-align: center; transform: rotate(-7deg); position: relative; z-index: 3; box-shadow: 9px 9px 0 var(--yellow); }
.roundup-center span { font-size: 59px; line-height: .9; font-weight: 800; }
.roundup-center small { margin-top: 8px; font-size: 11px; line-height: 1.3; font-weight: 800; text-transform: uppercase; }

.category-band { background: var(--blue-deep); color: var(--white); border-top: 8px solid var(--yellow); }
.category-band-inner { padding-block: 54px 62px; display: grid; grid-template-columns: 170px repeat(5, 1fr); gap: 20px; align-items: start; }
.category-band-inner p { margin: 6px 0 0; color: var(--yellow); font-weight: 800; }
.category-band-inner a { font-size: 13px; font-weight: 700; line-height: 1.35; }
.category-band-inner a span { display: block; color: var(--yellow); font-size: 11px; margin-bottom: 10px; }
.category-band-inner a:hover { text-decoration: underline; text-underline-offset: 4px; }

.site-footer { background: var(--ink); color: var(--white); }
.footer-orbit { min-height: 260px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.brand-footer .brand-main { color: var(--white); }
.brand-footer .brand-now { color: var(--yellow); }
.footer-orbit p { margin: 17px 0 0; font-size: 13px; }
.footer-orbit nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 25px; }
.footer-orbit nav a { font-size: 12px; color: #dbe2ee; }
.footer-orbit nav a:hover { color: var(--yellow); }

.search-dialog { width: min(820px, calc(100% - 32px)); max-height: min(740px, calc(100vh - 32px)); border: 2px solid var(--ink); border-radius: 7px; padding: 0; background: var(--paper); color: var(--ink); box-shadow: 18px 18px 0 rgba(7, 60, 168, .8); }
.search-dialog::backdrop { background: rgba(5, 40, 111, .82); }
.search-head { display: flex; justify-content: space-between; gap: 20px; padding: 28px 32px 20px; border-bottom: 1px solid var(--line); }
.search-head .kicker { margin-bottom: 6px; }
.search-head h2 { margin: 0; font-size: 28px; line-height: 1.15; }
.dialog-close { flex: 0 0 42px; width: 42px; height: 42px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); cursor: pointer; font-size: 27px; line-height: 1; }
.search-form { padding: 24px 32px; background: var(--yellow-soft); }
.search-form label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 800; }
.search-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.search-line input { width: 100%; min-width: 0; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); padding: 12px 18px; }
.search-line button { border: 2px solid var(--ink); border-radius: 999px; background: var(--blue); color: var(--white); padding: 11px 22px; font-weight: 800; cursor: pointer; }
.search-results { padding: 16px 32px 30px; overflow-y: auto; }
.search-result { border-bottom: 1px solid var(--line); }
.search-result > a { display: grid; grid-template-columns: 110px 1fr; gap: 17px; padding: 14px 0; align-items: center; }
.search-result img { width: 110px; height: 78px; border-radius: 50%; }
.search-result span { display: grid; gap: 3px; }
.search-result small { color: var(--blue); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.search-result strong { line-height: 1.3; }
.search-result em { font-style: normal; font-size: 12px; line-height: 1.4; color: #4c5564; }

/* Article pages */
.article-hero { padding-block: 76px 68px; display: grid; grid-template-columns: .96fr 1.04fr; gap: 65px; align-items: center; }
.article-heading h1 { color: var(--blue-deep); font-size: 53px; line-height: 1.05; margin: 17px 0 25px; letter-spacing: 0; }
.article-heading > p { font-size: 18px; line-height: 1.6; margin: 0 0 25px; max-width: 600px; }
.byline { padding-top: 18px; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; gap: 9px 20px; font-size: 11px; font-weight: 700; }
.article-hero figure { margin: 0; position: relative; }
.article-hero figure img { width: 100%; aspect-ratio: 1.02; border-radius: 48% 48% 8px 48%; position: relative; z-index: 2; box-shadow: 15px 15px 0 var(--yellow); }
.figure-ring { position: absolute; width: 52%; aspect-ratio: 1; border: 18px solid var(--coral); border-radius: 50%; right: -10%; top: -10%; z-index: 1; }
.article-layout { display: grid; grid-template-columns: 205px minmax(0, 720px); gap: 72px; justify-content: center; align-items: start; padding-block: 70px 112px; border-top: 1px solid var(--ink); }
.article-aside { position: sticky; top: 22px; border-top: 7px solid var(--yellow); padding-top: 18px; }
.aside-mark { display: block; color: var(--blue); font-size: 52px; font-weight: 800; line-height: 1; }
.article-aside p { margin: 8px 0 20px; font-size: 13px; font-weight: 800; }
.article-aside a { color: var(--blue); font-size: 11px; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; }
.article-body { font-family: Verdana, Geneva, sans-serif; font-size: 17px; line-height: 1.78; }
.article-body .lead { margin-top: 0; color: var(--blue-deep); font-size: 21px; line-height: 1.55; font-weight: 700; }
.article-body h2 { margin: 62px 0 20px; color: var(--blue-deep); font-size: 33px; line-height: 1.16; letter-spacing: 0; }
.article-body h2::before { content: ""; display: block; width: 42px; height: 8px; margin-bottom: 16px; background: var(--yellow); border-radius: 999px; }
.article-body h3 { margin: 38px 0 13px; color: var(--blue); font-size: 23px; line-height: 1.25; }
.article-body h4 { margin: 29px 0 10px; font-size: 18px; color: var(--ink); }
.article-body p { margin: 0 0 22px; }
.article-body ul, .article-body ol { margin: 8px 0 28px; padding: 22px 28px 22px 48px; background: var(--yellow-soft); border-left: 7px solid var(--yellow); }
.article-body li + li { margin-top: 8px; }
.related { padding-block: 78px 110px; border-top: 2px solid var(--ink); }
.related header { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 35px; }
.related header .kicker { margin: 0; }
.related h2 { margin: 0; color: var(--blue-deep); font-size: 36px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.related-grid article { display: grid; grid-template-columns: 210px 1fr; grid-template-rows: auto auto; gap: 8px 23px; align-items: start; }
.related-image { grid-row: 1 / 3; overflow: hidden; border-radius: 50% 8px 50% 50%; box-shadow: 7px 7px 0 var(--yellow); }
.related-image img { width: 100%; aspect-ratio: 1.12; transition: transform .5s ease; }
.related-grid h3 { margin: 5px 0 0; color: var(--blue-deep); font-size: 20px; line-height: 1.28; }

/* Category pages */
.category-hero { min-height: 330px; padding-block: 58px; display: grid; grid-template-columns: 170px 1fr; gap: 50px; align-items: center; }
.category-count { width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--blue); font-size: 55px; font-weight: 800; box-shadow: 10px 10px 0 var(--blue); }
.category-hero h1 { margin: 7px 0 12px; color: var(--blue-deep); font-size: 54px; line-height: 1; }
.category-hero p { max-width: 690px; margin: 0; font-size: 18px; }
.category-feed { padding-block: 65px 100px; border-top: 1px solid var(--ink); }
.category-feature { min-height: 480px; display: grid; grid-template-columns: 1.15fr .85fr; background: var(--blue); color: var(--white); border-radius: 240px 7px 7px 240px; overflow: hidden; }
.category-image { border-radius: 240px 0 0 240px; overflow: hidden; }
.category-image img { width: 100%; height: 100%; min-height: 480px; transition: transform .5s ease; }
.category-feature > div { padding: 62px 55px; align-self: center; }
.category-feature .edition { color: var(--yellow); }
.category-feature h2 { margin: 14px 0 20px; font-size: 37px; line-height: 1.14; }
.category-feature p { margin: 0 0 22px; }
.category-feature .story-meta { margin-bottom: 28px; color: var(--yellow); }
.category-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; padding-bottom: 110px; }
.category-switch p { margin: 0 12px 0 0; font-weight: 800; }
.category-switch a { display: inline-block; padding: 8px 14px; border: 2px solid var(--blue); border-radius: 999px; color: var(--blue); font-size: 12px; font-weight: 800; }
.category-switch a:hover { background: var(--yellow); color: var(--ink); }

@media (max-width: 980px) {
  :root { --shell: min(100% - 36px, 760px); }
  .masthead { grid-template-columns: 1fr auto; min-height: 90px; }
  .strapline { display: none; }
  .category-nav { justify-content: flex-start; }
  .hero { grid-template-columns: 1fr 1fr; gap: 35px; min-height: 580px; padding-block: 55px; }
  .hero-title { font-size: 39px; }
  .hero-visual img { box-shadow: 11px 12px 0 var(--blue); }
  .story-copy { padding: 38px; }
  .story-copy h2 { font-size: 28px; }
  .roundup-orbit { grid-template-columns: 1fr 120px 1fr; min-height: 660px; }
  .roundup-center { width: 115px; height: 115px; }
  .roundup-center span { font-size: 45px; }
  .category-band-inner { grid-template-columns: repeat(3, 1fr); }
  .category-band-inner p { grid-column: 1 / -1; }
  .article-heading h1 { font-size: 41px; }
  .article-hero { gap: 35px; }
  .article-layout { grid-template-columns: 150px minmax(0, 1fr); gap: 40px; }
  .related-grid article { grid-template-columns: 150px 1fr; }
  .category-feature > div { padding: 40px; }
}

@media (max-width: 720px) {
  :root { --shell: calc(100% - 28px); }
  body { font-size: 15px; }
  .masthead { min-height: 78px; }
  .brand-main { font-size: 26px; }
  .brand-dot { font-size: 34px; }
  .brand-now { font-size: 20px; }
  .search-open span:last-child { display: none; }
  .category-nav { min-height: 48px; gap: 24px; }
  .category-nav a { font-size: 12px; }
  .hero { display: flex; flex-direction: column; min-height: 0; gap: 38px; padding-block: 40px 56px; align-items: stretch; }
  .hero { overflow: clip; }
  .hero::before { display: none; }
  .hero-copy { display: contents; }
  .edition { order: 1; margin: 0; }
  .hero-intro { order: 2; margin: 0; font-size: 16px; }
  .hero-title { order: 3; font-size: 37px; }
  .hero-title b { flex-basis: 42px; width: 42px; height: 42px; font-size: 20px; }
  .hero-visual { order: 4; width: 94%; margin-left: 0; }
  .hero-copy > p:not(.hero-intro) { order: 5; margin: 0; }
  .hero-copy .story-meta { order: 6; }
  .hero-visual img { aspect-ratio: 1.18; box-shadow: 9px 10px 0 var(--blue); }
  .sun-disc { right: 0; }
  .image-note { left: 8px; bottom: -12px; }
  .ticker-track { gap: 18px; font-size: 11px; }
  .story-pair { padding-block: 60px; gap: 26px; }
  .story-wide, .story-wide:nth-child(even) { display: flex; flex-direction: column; min-height: 0; border-radius: 7px; }
  .story-blue .story-photo, .story-yellow .story-photo { border-radius: 0; }
  .story-yellow .story-copy { order: 2; }
  .story-yellow .story-photo { order: 1; }
  .story-photo img { min-height: 0; aspect-ratio: 1.35; }
  .story-copy { padding: 30px 25px 34px; }
  .story-copy h2 { font-size: 27px; }
  .number { font-size: 44px; }
  .roundup { padding-bottom: 75px; }
  .roundup-head { grid-template-columns: 1fr; gap: 15px; }
  .roundup-head h2 { font-size: 32px; }
  .roundup-head p { justify-self: start; }
  .roundup-orbit { min-height: 0; display: flex; flex-direction: column; gap: 45px; padding-top: 45px; }
  .roundup-orbit::before { width: 280px; left: calc(50% - 140px); top: 23%; }
  .orbit-story { width: 100%; }
  .orbit-right { flex-direction: column; }
  .orbit-image { width: 87%; }
  .orbit-right .orbit-image { align-self: flex-end; }
  .orbit-story > div { width: 100%; }
  .roundup-center { position: absolute; top: 42%; right: 4px; }
  .category-band-inner { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-orbit { grid-template-columns: 1fr; gap: 34px; padding-block: 50px; }
  .footer-orbit nav { grid-template-columns: 1fr 1fr; }
  .search-dialog { box-shadow: 8px 8px 0 rgba(7, 60, 168, .8); }
  .search-head, .search-form, .search-results { padding-inline: 20px; }
  .search-head h2 { font-size: 23px; }
  .search-line { grid-template-columns: 1fr; }
  .search-line button { width: 100%; }
  .search-result > a { grid-template-columns: 80px 1fr; }
  .search-result img { width: 80px; height: 66px; }
  .search-result em { display: none; }
  .article-hero { display: flex; flex-direction: column; gap: 38px; padding-block: 48px 58px; }
  .article-heading h1 { font-size: 38px; }
  .article-heading > p { font-size: 16px; }
  .article-hero figure { width: 96%; align-self: flex-start; }
  .article-hero figure img { aspect-ratio: 1.18; }
  .figure-ring { right: 0; top: -7%; border-width: 12px; }
  .article-layout { display: block; padding-block: 48px 76px; }
  .article-aside { position: static; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 15px; margin-bottom: 42px; }
  .aside-mark { font-size: 38px; }
  .article-aside p { margin: 0; }
  .article-aside a { width: 100%; }
  .article-body { font-size: 16px; line-height: 1.74; }
  .article-body .lead { font-size: 18px; }
  .article-body h2 { margin-top: 50px; font-size: 29px; }
  .article-body h3 { font-size: 21px; }
  .article-body ul, .article-body ol { padding: 20px 19px 20px 38px; }
  .related { padding-block: 58px 75px; }
  .related header { display: block; }
  .related h2 { font-size: 30px; margin-top: 7px; }
  .related-grid { grid-template-columns: 1fr; gap: 34px; }
  .related-grid article { grid-template-columns: 112px 1fr; }
  .related-grid h3 { font-size: 18px; }
  .category-hero { min-height: 0; grid-template-columns: 85px 1fr; gap: 25px; padding-block: 45px; }
  .category-count { width: 82px; height: 82px; font-size: 32px; box-shadow: 6px 6px 0 var(--blue); }
  .category-hero h1 { font-size: 35px; }
  .category-hero p { font-size: 14px; }
  .category-feed { padding-block: 50px 70px; }
  .category-feature { display: flex; flex-direction: column; min-height: 0; border-radius: 7px; }
  .category-image { border-radius: 0; }
  .category-image img { min-height: 0; aspect-ratio: 1.25; }
  .category-feature > div { padding: 31px 25px 36px; }
  .category-feature h2 { font-size: 28px; }
  .category-switch { padding-bottom: 75px; }
  .category-switch p { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}