@font-face{font-family:"Archivo";src:url("/assets/archivo-var.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--deep:#123742;--night:#0c2b34;--teal:#0f6e7a;--mist:#8fbac2;--gold:#e0a33c;--light:#eef3f3;--ink:#123742;--muted:#3f5a62}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:"Archivo",system-ui,sans-serif;font-stretch:100%;font-size:1.125rem;line-height:1.6;color:#fff;background:var(--deep);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{width:min(1120px,100% - 3rem);margin-inline:auto}
.narrow{max-width:720px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--gold);color:var(--deep);padding:.5rem 1rem;z-index:10}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.top{background:var(--deep);position:sticky;top:0;z-index:5;border-bottom:1px solid rgba(143,186,194,.15)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem}
.brand img{height:34px;width:auto}
.top nav{display:flex;gap:1.75rem;flex-wrap:wrap}
.top nav a{text-decoration:none;font-weight:600;font-size:1rem;color:var(--mist)}
.top nav a:hover{color:#fff}

h1,h2{font-weight:850;font-stretch:118%;line-height:1.05;letter-spacing:-.01em;margin:0 0 1rem}
h1{font-size:clamp(2.6rem,6vw,4.6rem);max-width:12ch}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:1.2rem;font-weight:700;margin:0 0 .4rem}
p{margin:0 0 1.25rem;max-width:62ch}
.lede{font-size:1.3rem;color:#d7e6e9;max-width:34ch}

.hero{position:relative;padding:4.5rem 0 0}
.hero__in{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:3rem;padding-bottom:3rem}
.hero__two{width:100%;max-width:360px;height:auto;justify-self:center}

.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.75rem}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:1.05rem;padding:.85rem 1.4rem;border-radius:4px;border:2px solid transparent}
.btn--gold{background:var(--gold);color:var(--deep)}.btn--gold:hover{background:#ebb557}
.btn--deep{background:var(--deep);color:#fff}.btn--deep:hover{background:var(--teal)}
.btn--line{border-color:var(--mist);color:#fff}.btn--line:hover{border-color:#fff}
.btn--line-dark{border-color:var(--deep);color:var(--deep)}.btn--line-dark:hover{background:var(--deep);color:#fff}

.edge{line-height:0;background:var(--from)}
.edge .ridges{width:100%;height:clamp(60px,9vw,140px)}
.edge .r-back{fill:var(--mid)}
.edge .r-front{fill:var(--to)}

section{position:relative}
.light{background:var(--light);color:var(--ink);padding:3.5rem 0 5rem}
#advertise.light{padding-top:0}
#advertise .narrow{padding-top:3rem}
.light a:not(.btn){color:var(--teal);font-weight:600}
.deep{background:var(--deep);padding:0 0 4.5rem}
.deep .narrow{padding-top:3rem}

.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2rem}
.way{border-top:4px solid var(--gold);padding-top:1.1rem}
.way p{color:var(--muted);margin:0}

.foot{background:var(--night);color:var(--mist)}
.foot__in{padding:2.5rem 0 3rem;display:grid;gap:.25rem}
.foot__in img{height:28px;width:auto;margin-bottom:1rem}
.foot p{margin:0 0 .75rem;font-size:1rem}
.legal{font-size:.9rem;color:#6f8f97}
.foot a{color:#fff}

@media (max-width:820px){
  .hero{padding-top:2.5rem}
  .hero__in{grid-template-columns:1fr;gap:1.5rem}
  .hero__two{max-width:180px;justify-self:start;order:-1}
  .ways{grid-template-columns:1fr;gap:1.75rem}
  .top nav{gap:1rem}.top nav a{font-size:.95rem}
}
@media (max-width:560px){.top__in{flex-direction:column;align-items:flex-start;gap:.6rem}}

/* real Driftless photography */
.hero--photo{background:
  linear-gradient(90deg,rgba(18,55,66,.94) 0%,rgba(18,55,66,.80) 42%,rgba(18,55,66,.45) 100%),
  url("/assets/photos/wyalusing-point-lookout.jpg") center 40%/cover no-repeat,var(--deep)}
.credit{font-size:.78rem;color:rgba(255,255,255,.7);margin:0 auto;padding:0 0 .75rem;text-align:right}
.place{margin:0;background:var(--night)}
.place img{width:100%;height:clamp(260px,42vw,560px);object-fit:cover;object-position:center 55%}
.place figcaption{font-size:.85rem;color:var(--mist);padding:.8rem 0 0}
.place figcaption a{color:#fff}
@media (max-width:820px){.hero--photo{background:
  linear-gradient(rgba(18,55,66,.90),rgba(18,55,66,.78)),
  url("/assets/photos/wyalusing-point-lookout.jpg") center/cover no-repeat,var(--deep)}
  .credit{text-align:left}}