:root {
  color-scheme: light;
  --paper: #f8f5ed;
  --ink: #1c3029;
  --muted: #465c51;
  --green: #174c37;
  --line: #b7c0b3;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 1.05rem/1.62 system-ui, sans-serif;
}

a { color: inherit; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: .14em; }
a:focus-visible { outline: .18rem solid #a6381d; outline-offset: .26rem; }
h1, h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; }
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }
.skip { position: absolute; left: 1rem; top: -20rem; padding: .5rem 1rem; background: var(--paper); }
.skip:focus { top: 1rem; z-index: 1; }
.bar { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; padding-block: 1rem; }
.mark { display: inline-flex; gap: .55rem; align-items: center; font-size: 1.12rem; font-weight: 700; text-decoration: none; }
.bar nav { display: flex; gap: .4rem clamp(.65rem, 2.2vw, 1.65rem); flex-wrap: wrap; font-size: .95rem; }
.bar nav a { padding-block: .4rem; }
.bar nav a:not(:hover, [aria-current]) { text-decoration: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  min-height: 26rem;
  margin-top: clamp(.5rem, 4vw, 2.2rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #e9ebdf;
}

.hero-copy { align-self: center; padding: clamp(1.5rem, 5vw, 4.25rem); }
h1 { margin: 0; font-size: clamp(2.5rem, 7vw, 5.25rem); line-height: .99; letter-spacing: -.04em; }
.hero p { max-width: 31ch; margin: 1.3rem 0 1.65rem; color: var(--muted); }
.action {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 2.8rem;
  padding: .5rem 1rem;
  border-radius: .35rem;
  color: #fff;
  background: var(--green);
  text-decoration: none;
}
.action:hover { background: #0f3727; }

.terrain {
  background: #3f674c url('/terrain.svg') center / cover no-repeat;
  min-height: 15rem;
}

.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-block: 1.65rem 4rem; }
.topics article { border-top: 1px solid var(--line); }
.topics h2 { font-size: 1.65rem; margin: .7rem 0 0; }
.topics p { max-width: 28ch; margin: .3rem 0; color: var(--muted); font-size: .98rem; }
.guide { max-width: 41rem; margin: clamp(2.5rem, 8vw, 6rem) auto 4.5rem; }
.guide h1 { font-size: clamp(2.5rem, 7vw, 4.2rem); }
.guide h2 { font-size: 1.8rem; line-height: 1.18; margin: 1.8rem 0 .45rem; }
.guide p { margin-block: .55rem 1rem; }
.guide .intro { font-size: 1.18rem; margin: 1.25rem 0 2rem; color: var(--muted); }
.next { display: inline-block; margin-top: 1.3rem; color: var(--green); font-weight: 650; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; padding-block: 1rem 1.65rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .87rem; }
.foot p { margin: 0; }

@media (max-width: 45rem) {
  .hero, .topics { grid-template-columns: 1fr; }
  .terrain { min-height: 12rem; }
  .topics { gap: .9rem; margin-bottom: 2.25rem; }
}