:root {
  color-scheme: light;
  --night: #0e2226;
  --deep: #10292e;
  --ink: #172f33;
  --paper: #f5ede0;
  --cream: #fff5df;
  --muted: #485957;
  --gold: #f2c14e;
  --rule: #d8c8ae;
  font: 16px/1.55 system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid #91611c; outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.12; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.044em; }
h3 { font-size: clamp(1.22rem, 2.2vw, 1.52rem); letter-spacing: -.027em; }
.wrap { width: min(calc(100% - 3rem), 75rem); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 2; top: .5rem; left: .5rem; transform: translateY(-200%); padding: .65rem .85rem; border-radius: .4rem; color: var(--ink); background: var(--cream); }
.skip:focus { transform: none; }

header, footer { color: var(--cream); background: var(--night); }
header { border-bottom: 1px solid #fff5df25; }
.top, footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.top { min-height: 3.7rem; padding-block: .3rem; }
.wordmark { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .48rem; color: #ffdf8f; text-decoration: none; font-weight: 800; }
.wordmark img { border-radius: .35rem; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem 1.05rem; }
nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9rem; font-weight: 670; text-decoration: none; }
nav a:hover, footer a:hover { text-decoration: underline; text-underline-offset: .23em; }

.hero {
  color: var(--cream);
  background: radial-gradient(ellipse at 82% 26%, #305457 0%, transparent 64%), var(--deep);
  border-bottom: 5px solid #c18a40;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(1.3rem, 4vw, 3.4rem); padding-block: clamp(1.5rem, 5.3vw, 4.5rem); }
.hero-copy { display: grid; justify-items: start; gap: .95rem; }
.logo { width: min(74%, 18rem); filter: drop-shadow(0 4px 8px #09191ab3); }
.hero h1 { font-size: clamp(2.35rem, 4.55vw, 4.25rem); letter-spacing: -.055em; text-wrap: balance; }
.hero h1 em { color: #ffd37a; font-style: normal; }
.hero-copy p { max-width: 34rem; color: #edf0e8; font-size: clamp(1rem, 1.5vw, 1.14rem); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.1rem; padding: .6rem 1.18rem; border: 1px solid #ffdb90; border-radius: .65rem; color: #30230d; background: var(--gold); box-shadow: 0 3px 0 #906130; text-decoration: none; font-weight: 820; }
.button:hover { background: #ffdb7d; }
.hero a:focus-visible, .cta a:focus-visible, header a:focus-visible, footer a:focus-visible { outline-color: #fff0be; }
.quiet-link { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: .22em; font-weight: 680; }
.hero-copy small { color: #d6e5e1; font-size: .87rem; }
.hero-shot { min-width: 0; overflow: hidden; border: 1px solid #f4d09a62; border-radius: .85rem; background: var(--night); box-shadow: 0 16px 42px #06181ca6; }
.hero-shot img { width: 100%; }
.hero-shot figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .65rem; padding: .65rem .85rem; color: #dce9e5; font-size: .86rem; }
.hero-shot figcaption b { color: #f8cf7d; }

.content { display: grid; gap: clamp(2.8rem, 6vw, 5rem); padding-block: clamp(2.65rem, 5.5vw, 4.65rem); }
.lead { display: grid; gap: .65rem; max-width: 43rem; }
.lead p, .story p, .step-grid p, .reading-grid p, .journey p, .faq p { color: var(--muted); }
.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.85rem, 1.9vw, 1.4rem); margin-top: 1.3rem; }
.story { overflow: hidden; border: 1px solid var(--rule); border-radius: .85rem; background: #fff8eb; }
.story img { width: 100%; background: var(--deep); }
.story-copy { display: grid; gap: .46rem; padding: .88rem 1rem 1.05rem; }
.tag { color: #865323; font-size: .79rem; font-weight: 800; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1.2rem, 3vw, 2rem); border-radius: .85rem; color: var(--cream); background: var(--deep); }
.cta h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
.cta p { max-width: 35rem; margin-top: .43rem; color: #d6e5e1; }
.step-grid, .reading-grid, .journey {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem clamp(.85rem, 1.9vw, 1.4rem);
  margin: 1.3rem 0 0;
  padding: 0;
}
.step-grid, .journey { list-style-position: inside; }
.step-grid li, .reading-grid article, .journey li {
  padding: .95rem 1.1rem 1.05rem;
  border: 1px solid var(--rule);
  border-radius: .72rem;
  background: #fff8eb;
}
.step-grid li { border-top: 3px solid #ad733f; }
.journey li { border-top: 3px solid #64805d; }
.journey li:last-child { grid-column: 1 / -1; border-top-color: #377d85; }
.step-grid li::marker, .journey li::marker { color: #865323; font-size: 1.12rem; font-weight: 800; }
.step-grid h3, .journey h3 { display: inline; }
.step-grid p, .reading-grid p, .journey p { margin-top: .48rem; }
kbd { padding: .08rem .28rem; border: 1px solid var(--rule); border-radius: .25rem; background: #fff8eb; font-size: .87em; }
.lower { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(1.4rem, 4vw, 3rem); }
.lower h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.lower .lead { margin-bottom: .82rem; }
.faq { border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary { min-height: 2.75rem; padding: .65rem 0; font-weight: 740; cursor: pointer; }
.faq p { padding-bottom: .85rem; }
footer .wrap { gap: .55rem 1rem; padding-block: 1.05rem; font-size: .9rem; }
footer a { text-underline-offset: .22em; }

@media (max-width: 58rem) {
  .hero-grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
  .hero h1 { font-size: clamp(2.2rem, 4.9vw, 3.5rem); }
  .story-copy { padding-inline: .8rem; }
}

@media (max-width: 44rem) {
  .wrap { width: calc(100% - 2rem); }
  .hero-grid, .lower { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 1.25rem; }
  .hero-copy { gap: .7rem; }
  .hero h1 { font-size: clamp(2.27rem, 7vw, 3.4rem); }
  .logo { width: min(65%, 13.5rem); }
  .stories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 33rem) {
  .top { padding-bottom: .2rem; }
  .stories, .step-grid, .reading-grid, .journey { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { padding-top: 1.15rem; }
}