:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #edf5f6;
  background: #101718;
  font-synthesis: none;
  --ink: #edf5f6;
  --muted: #a9bdc2;
  --dim: #789098;
  --line: rgba(190, 229, 239, .17);
  --blue: #0b6f9c;
  --blue-bright: #39b5dd;
  --yellow: #ffd33f;
  --red: #ef4c3e;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 85% 0, rgba(17, 116, 155, .18), transparent 28%), #101718; line-height: 1.65; }
a { color: inherit; }
.site-header { min-height: 74px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 38px; padding: 0 max(22px, calc((100% - 1180px) / 2)); border-bottom: 1px solid var(--line); background: rgba(13, 21, 23, .94); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; letter-spacing: .12em; font-size: 14px; white-space: nowrap; }
.brand small { margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.22); color: #82bfd2; font-size: 8px; letter-spacing: .15em; }
.brand-sun { width: 17px; height: 17px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 22px rgba(255, 211, 63, .25); }
.site-header nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2.5vw, 34px); }
.site-header nav a { color: #aebcc0; text-decoration: none; font-size: 12px; font-weight: 700; white-space: nowrap; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: #fff; }
.header-cta, .primary-link { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 42px; padding: 0 18px; border: 1px solid rgba(153, 217, 236, .38); border-radius: 99px; background: linear-gradient(145deg, #0c6f99, #123f55); color: white; text-decoration: none; font-size: 12px; font-weight: 800; white-space: nowrap; }
.header-cta:hover, .primary-link:hover { background: linear-gradient(145deg, #1181ad, #15556e); }

.blog-hero { width: min(100% - 44px, 1180px); min-height: 620px; display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(55px, 9vw, 115px); align-items: center; margin: auto; padding: 90px 0 110px; }
.eyebrow { margin: 0 0 20px; color: #7fd1ed; font-size: 10px; font-weight: 850; letter-spacing: .2em; }
.blog-hero h1, .plain-hero h1, .article-hero h1 { margin: 0; max-width: 760px; font-size: clamp(48px, 7.2vw, 89px); line-height: .99; letter-spacing: -.065em; font-weight: 620; }
.blog-hero > div:first-child > p:not(.eyebrow) { max-width: 600px; margin: 29px 0 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 23px; margin-top: 34px; }
.hero-actions > a:not(.primary-link) { color: #a8d7e5; font-size: 12px; font-weight: 750; text-underline-offset: 5px; }
.mini-forecast { position: relative; overflow: hidden; min-height: 400px; padding: 32px; border: 1px solid rgba(189, 228, 238, .3); border-radius: 34px; background: radial-gradient(ellipse at 82% -8%, rgba(255, 240, 165, .62), transparent 28%), linear-gradient(143deg, #1388b8, #0a5478 55%, #173947); box-shadow: 0 36px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15); }
.mini-forecast::after { content: ''; position: absolute; width: 320px; height: 320px; right: -140px; bottom: -170px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 0 0 58px rgba(255,255,255,.025); }
.mini-forecast header { position: relative; z-index: 1; display: grid; grid-template-columns: 50px 1fr auto; gap: 15px; align-items: center; }
.mini-sun { width: 49px; height: 49px; border-radius: 50%; background: var(--yellow); }
.mini-forecast header div { display: grid; gap: 2px; }
.mini-forecast header b { font-size: 22px; letter-spacing: -.03em; }
.mini-forecast header small { color: #c3e0e8; font-size: 10px; }
.mini-forecast header strong { padding: 7px 10px; border: 1px solid rgba(255,226,154,.55); border-radius: 99px; color: #ffe5a3; background: rgba(10,47,65,.25); font-size: 8px; letter-spacing: .13em; }
.mini-forecast dl { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 50px 0 0; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.16); }
.mini-forecast dl div { padding: 18px; background: rgba(6,53,75,.64); }
.mini-forecast dt { color: #afd4df; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mini-forecast dd { margin: 5px 0 0; font-size: 14px; font-weight: 750; }
.mini-forecast svg { position: relative; z-index: 1; width: 100%; height: 85px; margin-top: 22px; }
.mini-forecast path { fill: none; stroke: #51d1ef; stroke-width: 4; stroke-linecap: round; }

.guide-intro { width: min(100% - 44px, 1180px); display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin: auto; padding: 92px 0 48px; border-top: 1px solid var(--line); }
.guide-intro .eyebrow { grid-column: 1 / -1; margin: 0; }
.guide-intro h2, .business-band h2, .related h2, .editorial h2, .method-cta h2 { margin: 0; font-size: clamp(36px, 4.5vw, 60px); line-height: 1.02; letter-spacing: -.055em; font-weight: 590; }
.guide-intro > p:last-child { margin: 0; color: var(--muted); font-size: 17px; }
.article-grid { width: min(100% - 44px, 1180px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0 auto 120px; }
.article-card { min-height: 330px; border: 1px solid rgba(174, 220, 234, .19); border-radius: 27px; background: linear-gradient(145deg, #18343e, #17282e 66%, #1b2427); overflow: hidden; }
.article-card.featured { grid-column: 1 / -1; min-height: 370px; background: radial-gradient(ellipse at 87% -15%, rgba(255,239,167,.27), transparent 27%), linear-gradient(145deg, #107fae, #0c5477 58%, #173d4e); }
.article-card > a { height: 100%; display: flex; flex-direction: column; padding: clamp(28px, 4vw, 48px); text-decoration: none; }
.article-card span { color: #8bcfe3; font-size: 9px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.article-card.featured span { color: #d0edf5; }
.article-card h2 { max-width: 780px; margin: 33px 0 18px; font-size: clamp(29px, 4vw, 49px); line-height: 1.06; letter-spacing: -.05em; font-weight: 610; }
.article-card p { max-width: 760px; margin: 0; color: #afc3c8; font-size: 14px; }
.article-card.featured p { color: #d0e1e5; }
.article-card footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.11); }
.article-card footer small { color: #8ca3a9; }
.article-card footer b { color: #fff; font-size: 12px; }
.article-card:hover { border-color: rgba(151, 220, 240, .46); transform: translateY(-2px); transition: transform .18s ease, border-color .18s ease; }

.business-band { width: min(100% - 44px, 1180px); display: grid; grid-template-columns: 1.2fr .8fr auto; gap: 45px; align-items: center; margin: 0 auto 120px; padding: 48px; border: 1px solid rgba(181, 224, 236, .26); border-radius: 31px; background: radial-gradient(ellipse at 88% -25%, rgba(255,240,173,.32), transparent 27%), linear-gradient(135deg, #0d759f, #13465f); }
.business-band .eyebrow { color: #c6e8f1; }
.business-band h2 { font-size: clamp(31px, 3.6vw, 49px); }
.business-band > p { margin: 0; color: #cbe0e5; font-size: 14px; }
.business-band > a { color: white; font-size: 12px; font-weight: 800; white-space: nowrap; text-underline-offset: 5px; }

.article-hero { position: relative; overflow: hidden; min-height: 590px; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 86% 5%, rgba(22,128,172,.3), transparent 31%); }
.article-hero-inner { position: relative; z-index: 2; width: min(100% - 44px, 1040px); margin: auto; padding: 75px 0 95px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 65px; color: #849ba1; font-size: 10px; }
.breadcrumbs a { color: #a6ced9; text-underline-offset: 4px; }
.article-hero h1 { max-width: 920px; font-size: clamp(48px, 7.5vw, 88px); }
.dek { max-width: 760px; margin: 28px 0 0; color: #b7cbd0; font-size: clamp(17px, 2vw, 21px); }
.article-meta { display: flex; flex-wrap: wrap; gap: 11px 25px; margin-top: 35px; color: #81979c; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.article-meta span + span::before { content: '•'; margin-right: 25px; color: #4c6971; }
.weather-orbit { position: absolute; right: -50px; bottom: -160px; width: 430px; height: 430px; border: 1px solid rgba(157,220,239,.12); border-radius: 50%; box-shadow: 0 0 0 78px rgba(157,220,239,.025), 0 0 0 150px rgba(157,220,239,.017); }
.weather-orbit span { position: absolute; left: 46px; top: 40px; width: 70px; height: 70px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 60px rgba(255,217,77,.2); }
.weather-orbit i { position: absolute; left: 140px; top: 30px; color: rgba(255,255,255,.2); font-size: 100px; font-style: normal; }
.article-layout { width: min(100% - 44px, 1040px); display: grid; grid-template-columns: 235px minmax(0, 690px); gap: clamp(50px, 8vw, 100px); margin: auto; padding: 86px 0 125px; }
.article-aside { align-self: start; position: sticky; top: 30px; padding: 24px 0; border-top: 1px solid #48b8dc; border-bottom: 1px solid var(--line); }
.article-aside span { color: #76cce6; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.article-aside p { margin: 16px 0; color: #c0d0d4; font-size: 13px; line-height: 1.6; }
.article-aside a { color: #fff; font-size: 11px; font-weight: 800; text-underline-offset: 5px; }
.article-body { color: #bfd0d4; font-size: 17px; line-height: 1.82; }
.article-body > p:first-child.answer { margin-top: 0; color: #edf6f7; font-size: 23px; line-height: 1.55; letter-spacing: -.015em; }
.article-body h2 { margin: 65px 0 20px; color: #f2f7f8; font-size: clamp(29px, 3.8vw, 42px); line-height: 1.15; letter-spacing: -.045em; font-weight: 620; }
.article-body p { margin: 0 0 22px; }
.article-body ul { padding-left: 22px; }
.article-body li { margin: 10px 0; padding-left: 5px; }
.checklist { display: grid; gap: 1px; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--line); }
.checklist li { display: grid; grid-template-columns: 185px 1fr; gap: 22px; margin: 0; padding: 21px; background: #172326; }
.checklist b { color: #edf5f6; font-size: 14px; }
.checklist span { color: #aebfc3; font-size: 14px; }
.weather-rule { margin: 36px 0; padding: 27px 30px; border: 1px solid rgba(171,222,237,.27); border-radius: 22px; background: radial-gradient(ellipse at 89% -35%, rgba(255,237,157,.3), transparent 35%), linear-gradient(135deg, #0e759e, #133e54); }
.weather-rule span { display: block; margin-bottom: 9px; color: #bfe5f0; font-size: 9px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.weather-rule b { display: block; color: white; font-size: 20px; line-height: 1.4; }
.callout { margin: 48px 0; padding: 33px; border-radius: 25px; background: #ed4c3f; color: white; }
.callout > b { font-size: 25px; letter-spacing: -.03em; }
.callout p { margin: 10px 0 22px; color: #fff; font-size: 15px; }
.callout a { display: inline-flex; align-items: center; gap: 20px; min-height: 43px; padding: 0 17px; border-radius: 9px; background: #fff; color: #172124; text-decoration: none; font-size: 11px; font-weight: 850; }
.sources { margin-top: 75px; padding-top: 30px; border-top: 1px solid var(--line); }
.sources h2 { margin: 0 0 15px; font-size: 23px; }
.sources p { color: #889da2; font-size: 12px; line-height: 1.7; }
.sources a { color: #8bd3e8; text-underline-offset: 4px; }
.related { padding: 95px max(22px, calc((100% - 1180px) / 2)); background: #0a3444; }
.related > div:first-child { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: end; }
.related .eyebrow { margin: 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.related-grid a { min-height: 220px; display: flex; flex-direction: column; padding: 26px; border: 1px solid rgba(192,230,240,.2); border-radius: 22px; background: rgba(9,38,49,.35); text-decoration: none; }
.related-grid span { color: #81cce2; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.related-grid b { margin: 25px 0; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.related-grid small { margin-top: auto; color: #acd5e0; }

.plain-hero { width: min(100% - 44px, 1040px); margin: auto; padding: 125px 0 105px; }
.plain-hero h1 { max-width: 930px; }
.plain-hero > p:last-child { max-width: 670px; margin: 30px 0 0; color: var(--muted); font-size: 20px; }
.method-grid { width: min(100% - 44px, 1040px); display: grid; grid-template-columns: 1fr 1fr; margin: 0 auto 110px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.method-grid section { min-height: 300px; padding: 39px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-grid span { color: #6ecce8; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.method-grid h2 { margin: 58px 0 14px; font-size: 30px; line-height: 1.1; letter-spacing: -.04em; }
.method-grid p { margin: 0; color: #9fb2b7; font-size: 14px; }
.editorial { padding: 100px max(22px, calc((100% - 1040px) / 2)); display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; background: #0b3444; }
.editorial p { color: #bdd4da; }
.editorial a { color: white; font-weight: 800; text-underline-offset: 5px; }
.method-cta { width: min(100% - 44px, 1040px); margin: 100px auto; padding: 50px; border-radius: 30px; background: radial-gradient(ellipse at 85% -10%, rgba(255,241,170,.35), transparent 28%), linear-gradient(140deg, #0d7ca8, #12445d); }
.method-cta h2 { max-width: 750px; }
.method-cta p { max-width: 650px; color: #cae0e5; }
.method-cta a { color: white; font-size: 13px; font-weight: 850; text-underline-offset: 5px; }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 35px 70px; padding: 55px max(22px, calc((100% - 1180px) / 2)); border-top: 1px solid var(--line); background: #0d1314; }
.site-footer p { max-width: 460px; margin: 15px 0 0; color: #82979c; font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 15px 28px; align-items: start; }
.footer-links a { color: #a5b7bb; font-size: 11px; }
.site-footer > small { grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.08); color: #607277; font-size: 10px; }

:where(a, button):focus-visible { outline: 2px solid #62d2f1; outline-offset: 4px; border-radius: 7px; }
@media (max-width: 960px) {
  .site-header { grid-template-columns: auto 1fr; }
  .site-header nav { display: none; }
  .header-cta { justify-self: end; }
  .blog-hero { grid-template-columns: 1fr; min-height: auto; }
  .mini-forecast { width: min(100%, 650px); }
  .business-band { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside { position: static; max-width: 580px; }
}
@media (max-width: 700px) {
  .site-header { min-height: 66px; padding: 0 16px; }
  .brand small { display: none; }
  .header-cta { min-height: 38px; padding: 0 14px; font-size: 10px; }
  .blog-hero { width: min(100% - 32px, 1180px); padding: 65px 0 80px; gap: 50px; }
  .mini-forecast { min-height: 360px; padding: 24px; border-radius: 26px; }
  .mini-forecast header { grid-template-columns: 43px 1fr; }
  .mini-sun { width: 43px; height: 43px; }
  .mini-forecast header strong { grid-column: 2; justify-self: start; }
  .guide-intro { width: min(100% - 32px, 1180px); grid-template-columns: 1fr; gap: 20px; padding-top: 70px; }
  .guide-intro .eyebrow { grid-column: auto; }
  .article-grid { width: min(100% - 32px, 1180px); grid-template-columns: 1fr; margin-bottom: 85px; }
  .article-card.featured { grid-column: auto; }
  .business-band { width: min(100% - 32px, 1180px); margin-bottom: 85px; padding: 32px; }
  .article-hero { min-height: auto; }
  .article-hero-inner { width: min(100% - 32px, 1040px); padding: 55px 0 75px; }
  .breadcrumbs { margin-bottom: 48px; }
  .weather-orbit { opacity: .4; }
  .article-layout { width: min(100% - 32px, 1040px); gap: 45px; padding: 60px 0 85px; }
  .article-body { font-size: 16px; }
  .article-meta span + span::before { display: none; }
  .checklist li { grid-template-columns: 1fr; gap: 5px; }
  .related { padding-top: 70px; padding-bottom: 70px; }
  .related > div:first-child, .related-grid { grid-template-columns: 1fr; }
  .related-grid a { min-height: 180px; }
  .plain-hero { width: min(100% - 32px, 1040px); padding: 85px 0 70px; }
  .method-grid { width: min(100% - 32px, 1040px); grid-template-columns: 1fr; }
  .method-grid section { min-height: 240px; }
  .editorial { grid-template-columns: 1fr; gap: 35px; padding-top: 75px; padding-bottom: 75px; }
  .method-cta { width: min(100% - 32px, 1040px); padding: 32px; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > small { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}