* { box-sizing: border-box; }
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #173c32; background: #f4f5ee; }
body { margin: 0; }
.page { min-height: 100svh; max-width: 1600px; margin: auto; padding: 38px 6vw 26px; display: flex; flex-direction: column; }
.header, footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; font-size: 25px; font-weight: 720; letter-spacing: -1.1px; }
.brand:focus-visible { outline: 2px solid #173c32; outline-offset: 6px; border-radius: 3px; }
.brand-mark { width: 27px; height: 27px; border: 8px solid #173c32; border-left-width: 5px; border-radius: 3px 16px 16px 3px; transform: skew(-9deg); }
.status { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 550; color: #526b60; }
.status > span { width: 7px; height: 7px; border-radius: 50%; background: #688d51; }
main { flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 40px; padding: 80px 0; }
.eyebrow { margin: 0 0 25px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 2px; color: #526b60; }
h1 { margin: 0; font-size: clamp(54px, 6.5vw, 100px); line-height: 1.02; font-weight: 650; letter-spacing: -0.055em; }
.period { color: #73974b; }
.description { margin: 28px 0 35px; color: #526b60; font-size: 17px; line-height: 1.65; }
.road-art { position: relative; width: min(100%, 400px); aspect-ratio: 1; justify-self: center; border-radius: 50%; background: #e4e9d9; overflow: hidden; }
.road { position: absolute; width: 82%; height: 150%; top: 27%; left: 23%; border: 60px solid #b5c39d; border-radius: 50% 50% 0 0; transform: rotate(-28deg); }
.road-line { position: absolute; inset: -32px; border: 2px dashed #f4f5ee; border-radius: inherit; }
.destination { position: absolute; width: 19px; height: 19px; border: 5px solid #173c32; background: #e4e9d9; border-radius: 50%; top: 20%; left: 54%; box-shadow: 0 0 0 9px #e4e9d9; }
footer { border-top: 1px solid #d6dccf; padding-top: 22px; font-size: 11px; color: #627367; letter-spacing: .15px; }
@media (min-width: 1500px) { .page { padding-left: 90px; padding-right: 90px; } }
@media (max-width: 700px) {
  .page { padding: 26px 24px 22px; }
  .brand { font-size: 22px; }
  .status { font-size: 10px; }
  main { grid-template-columns: 1fr; gap: 44px; padding: 68px 0 48px; }
  h1 { font-size: clamp(52px, 12vw, 78px); }
  .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  .description { font-size: 15px; margin: 24px 0 28px; }
  .road-art { width: min(66vw, 280px); justify-self: end; }
  .road { border-width: 45px; }
  .road-line { inset: -24px; }
  footer { font-size: 10px; gap: 12px; }
}
@media (max-width: 350px) { .page { padding-left: 18px; padding-right: 18px; } .status { max-width: 90px; } }