:root {
  --navy: #061a2b;
  --navy-mid: #0a2b43;
  --navy-deep: #03111d;
  --gold: #c99538;
  --gold-light: #dfa946;
  --white: #ffffff;
  --ink: #07182a;
  --muted: #626d78;
  --line: rgba(6, 26, 43, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #fff; font-family: "Manrope", Arial, sans-serif; line-height: 1.65; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.lucide { width: 1em; height: 1em; display: inline-block; flex: 0 0 auto; stroke-width: 2; }
.detail-header { color: var(--white); background: var(--navy-deep); border-bottom: 1px solid rgba(255,255,255,.12); }
.detail-header__inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 34px; }
.detail-brand img { width: min(390px, 45vw); max-height: 66px; object-fit: contain; object-position: left; }
.detail-nav { display: flex; align-items: center; gap: 28px; }
.detail-nav a { color: rgba(255,255,255,.88); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.detail-nav a:hover { color: var(--gold-light); }
.detail-hero { color: var(--white); background: linear-gradient(110deg, #061e32, #041521 62%, #0b3049); }
.detail-hero__inner { min-height: 360px; display: grid; grid-template-columns: 92px 1fr; align-content: center; gap: 28px; padding-block: 58px; }
.detail-hero__icon { width: 82px; height: 82px; display: grid; place-items: center; border: 1px solid rgba(223,169,70,.7); border-radius: 50%; color: var(--gold-light); background: rgba(255,255,255,.04); }
.detail-hero__icon .lucide { width: 38px; height: 38px; stroke-width: 1.7; }
.detail-breadcrumb { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: rgba(255,255,255,.66); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.detail-breadcrumb .lucide { width: 14px; height: 14px; }
.detail-eyebrow { margin: 0 0 8px; color: var(--gold-light); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.detail-hero h1 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 54px; line-height: 1.02; letter-spacing: 0; }
.detail-lead { max-width: 820px; margin: 16px 0 0; color: rgba(255,255,255,.82); font-size: 17px; }
.detail-content { padding: 66px 0; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr); gap: 64px; align-items: start; }
.detail-main h2, .detail-related h2, .article-hub h2 { margin: 0 0 16px; color: var(--navy); font-family: "Cormorant Garamond", Georgia, serif; font-size: 36px; line-height: 1.1; }
.detail-main h2:not(:first-child) { margin-top: 38px; }
.detail-main p { margin: 0 0 18px; color: #34414c; font-size: 15px; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0; padding: 0; list-style: none; }
.detail-list li { display: grid; grid-template-columns: 22px 1fr; gap: 9px; padding: 14px 0; border-bottom: 1px solid var(--line); color: #253542; font-size: 14px; }
.detail-list .lucide { width: 18px; height: 18px; margin-top: 2px; color: var(--gold); }
.detail-aside { padding: 28px; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 5px; background: #f7f8f8; box-shadow: 0 10px 26px rgba(3,17,29,.08); }
.detail-aside h2 { margin: 0 0 14px; color: var(--navy); font-size: 18px; }
.detail-aside ul { margin: 0 0 26px; padding-left: 19px; color: #44515c; font-size: 13px; }
.detail-aside li { margin-bottom: 10px; }
.detail-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; border: 1px solid var(--gold); border-radius: 2px; color: var(--white); background: var(--navy); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.detail-button:hover { background: var(--navy-mid); }
.detail-button .lucide { width: 17px; height: 17px; }
.detail-aside .detail-button { width: 100%; }
.detail-related { padding: 48px 0; background: #f4f6f6; border-block: 1px solid var(--line); }
.detail-related__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.detail-related__links a { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); color: var(--navy); font-weight: 700; }
.detail-related__links a:hover { border-color: var(--gold); }
.detail-related__links .lucide { color: var(--gold); }
.detail-cta { color: var(--white); background: var(--navy); }
.detail-cta__inner { min-height: 180px; display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.detail-cta h2 { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 36px; }
.detail-cta p { margin: 5px 0 0; color: rgba(255,255,255,.72); }
.detail-cta .detail-button { color: var(--navy); background: var(--gold-light); }
.detail-footer { padding: 28px 0; color: rgba(255,255,255,.67); background: var(--navy-deep); font-size: 12px; }
.detail-footer__inner { display: flex; justify-content: space-between; gap: 24px; }

.article-hero { padding: 46px 0 0; background: #f3f5f5; }
.article-hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch; background: var(--white); border: 1px solid var(--line); }
.article-hero__copy { padding: 48px; }
.article-hero__copy h1 { margin: 0; color: var(--navy); font-family: "Cormorant Garamond", Georgia, serif; font-size: 48px; line-height: 1.06; letter-spacing: 0; }
.article-hero__copy time { display: block; margin: 15px 0; color: var(--muted); font-size: 12px; }
.article-hero__copy p { margin: 0; color: #3d4a55; }
.article-hero img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.article-body { padding: 58px 0 70px; }
.article-body__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: 60px; align-items: start; }
.article-body article h2 { margin: 32px 0 12px; color: var(--navy); font-family: "Cormorant Garamond", Georgia, serif; font-size: 31px; line-height: 1.15; }
.article-body article h2:first-child { margin-top: 0; }
.article-body article p { margin: 0 0 18px; color: #35434f; font-size: 15px; }
.article-checklist { padding: 26px; border-left: 3px solid var(--gold); background: #f5f6f6; }
.article-checklist h2 { margin: 0 0 15px; color: var(--navy); font-size: 17px; }
.article-checklist ul { margin: 0; padding-left: 19px; color: #41505b; font-size: 13px; }
.article-checklist li { margin-bottom: 10px; }
.article-hub { padding: 56px 0 70px; }
.article-hub__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.article-hub__grid a { display: grid; grid-template-columns: 170px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--white); box-shadow: 0 5px 16px rgba(3,17,29,.07); }
.article-hub__grid img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.article-hub__grid div { padding: 20px; }
.article-hub__grid h3 { margin: 0 0 8px; color: var(--navy); font-size: 16px; line-height: 1.35; }
.article-hub__grid span { color: var(--gold); font-size: 12px; font-weight: 700; }

[hidden] { display: none !important; }

@media (max-width: 820px) {
  .shell { width: min(100% - 36px, 1180px); }
  .detail-header__inner { min-height: 78px; }
  .detail-brand img { width: 280px; max-width: 68vw; }
  .detail-nav a:not(:last-child) { display: none; }
  .detail-hero__inner { min-height: 320px; grid-template-columns: 68px 1fr; gap: 18px; }
  .detail-hero__icon { width: 62px; height: 62px; }
  .detail-hero__icon .lucide { width: 29px; height: 29px; }
  .detail-hero h1 { font-size: 43px; }
  .detail-grid, .article-body__grid { grid-template-columns: 1fr; gap: 38px; }
  .article-hero__inner { grid-template-columns: 1fr; }
  .article-hero__copy { padding: 34px; }
  .article-hero__copy h1 { font-size: 40px; }
  .article-hero img { min-height: 280px; }
  .detail-related__links { grid-template-columns: 1fr; }
  .detail-cta__inner { padding-block: 38px; align-items: flex-start; flex-direction: column; }
  .article-hub__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .shell { width: min(100% - 28px, 1180px); }
  .detail-header__inner { gap: 14px; }
  .detail-brand img { width: 230px; max-width: 62vw; }
  .detail-hero__inner { grid-template-columns: 1fr; }
  .detail-hero__icon { display: none; }
  .detail-hero h1, .article-hero__copy h1 { font-size: 36px; }
  .detail-lead { font-size: 15px; }
  .detail-list { grid-template-columns: 1fr; }
  .detail-main h2, .detail-related h2, .article-hub h2 { font-size: 31px; }
  .article-hero__copy { padding: 26px 22px; }
  .article-hub__grid a { grid-template-columns: 120px 1fr; }
  .article-hub__grid div { padding: 16px; }
  .detail-footer__inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}
