:root{--pine:#1f3a2e;--pine-2:#2c5140;--lake:#1d4e6b;--bark:#5b3a24;--sand:#f4ede1;--cream:#fbf8f2;--ember:#c8642b;--ink:#1d221f;--muted:#5d665f}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--lake)}
h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif;line-height:1.15;margin:0 0 .5em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);color:var(--pine)}
h3{font-size:1.2rem;color:var(--pine)}
.tc{display:inline-block;background:#ffe9a8;color:#6b4e00;border:1px dashed #c99a1b;border-radius:4px;padding:0 .4em;font-size:.75rem;font-weight:700;letter-spacing:.03em;font-family:Inter,sans-serif}
.site-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 5vw;background:rgba(31,58,46,.96);color:#fff;flex-wrap:wrap}
.brand{font-family:Fraunces,Georgia,serif;color:#fff;text-decoration:none;font-size:1.25rem;font-weight:700}
.brand span{font-weight:500;opacity:.8}
.site-header nav{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.site-header nav a{color:#e9efe9;text-decoration:none;font-size:.92rem}
.nav-cta{background:var(--ember);padding:.35rem .9rem;border-radius:999px;color:#fff!important;font-weight:600}
.hero{position:relative;overflow:hidden;min-height:88vh;display:flex;align-items:flex-end;background:#1a2b33;color:#fff}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,25,20,.15) 0%,rgba(10,25,20,.28) 45%,rgba(10,25,20,.8) 100%)}
.hero-inner{position:relative;z-index:2;padding:0 5vw 9vh;max-width:820px}
.hero h1{font-size:clamp(2.4rem,6.5vw,4.6rem);margin-bottom:.3em;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.lede{font-size:clamp(1.05rem,2vw,1.3rem);max-width:640px;margin:0 0 1.2rem}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:600;margin:0 0 .6rem;color:#f3d9b8}
.eyebrow.dark{color:var(--ember)}
.eyebrow.light{color:#f3d9b8}
.rating-pill{display:inline-block;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.35);padding:.4rem 1rem;border-radius:999px;font-weight:600;font-size:.95rem;margin-bottom:1.4rem}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.85rem 1.6rem;border-radius:999px;font-weight:600;text-decoration:none;border:2px solid transparent;font-size:1rem;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--ember);color:#fff}
.btn-primary:hover{background:#ad5121}
.btn-ghost{border-color:#fff;color:#fff}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.highlights{display:grid;grid-template-columns:repeat(4,1fr);background:var(--pine);color:#fff}
.hl{padding:1.6rem 1.2rem;text-align:center;border-right:1px solid rgba(255,255,255,.12)}
.hl strong{display:block;font-family:Fraunces,Georgia,serif;font-size:1.8rem;color:#f3d9b8}
.hl span{font-size:.9rem;opacity:.9}
.section{padding:5rem 5vw;max-width:1200px;margin:0 auto}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.about-photo img{border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.18);aspect-ratio:4/5;object-fit:cover;width:100%}
.host{border-left:4px solid var(--ember);padding-left:.8rem;color:var(--muted)}
.sleeping,.seasons{background:var(--sand);max-width:none}
.sleeping>*,.seasons>*{max-width:1100px;margin-left:auto;margin-right:auto}
.tc-note{background:#fff8de;border:1px dashed #c99a1b;border-radius:8px;padding:.6rem .9rem;font-size:.92rem}
.cards{display:grid;gap:1.2rem;margin-top:1.2rem}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border-radius:12px;padding:1.4rem;box-shadow:0 4px 18px rgba(31,58,46,.08);border-top:4px solid var(--pine-2)}
.card p{margin:0}
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2.4rem;margin-top:1.5rem}
.amen-grid ul,.season ul{padding-left:1.1rem;margin:0}
.amen-grid li{margin:.25rem 0}
.offsite{background:var(--sand);border-radius:12px;padding:1rem 1.2rem}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.5rem}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:10px}
.gal figure.wide{grid-column:span 3}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gal figure.wide img{aspect-ratio:21/9}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .6rem;color:#fff;font-size:.88rem;background:linear-gradient(transparent,rgba(0,0,0,.65))}
.reviews{background:linear-gradient(rgba(20,40,32,.92),rgba(20,40,32,.92)),url(../images/patio-fire-pit-seating.jpg) center/cover;color:#fff;max-width:none}
.reviews>*{max-width:1100px;margin-left:auto;margin-right:auto}
.reviews h2{color:#fff}
.cards.rev{grid-template-columns:repeat(2,1fr)}
.rev .card{background:rgba(255,255,255,.07);color:#fff;border-top-color:var(--ember);margin:0;box-shadow:none}
.rev .card p{font-family:Fraunces,Georgia,serif;font-size:1.12rem}
.rev cite{display:block;margin-top:.8rem;font-style:normal;color:#f3d9b8;font-size:.9rem}
.rev-note{margin-top:1.4rem;font-size:.88rem;opacity:.85}
.rev-note a{color:#f3d9b8}
.season{border-top-width:6px}
.summer{border-top-color:#2f7fa6}.fall{border-top-color:var(--ember)}.winter{border-top-color:#8aa6b8}
.center{text-align:center}.small{font-size:.92rem;color:var(--muted);margin-top:1.4rem}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem}
.rules-grid div{background:#fff;border:1px solid #e3dccd;border-radius:10px;padding:1rem 1.2rem}
.rules-grid strong{display:block;color:var(--pine);font-size:1.05rem}
.rules-grid span{color:var(--muted);font-size:.92rem}
.inquiry{background:var(--pine);color:#fff;max-width:none}
.inquiry .split{max-width:1100px;margin:0 auto;align-items:start}
.inquiry h2{color:#fff}
.inquiry a{color:#f3d9b8}
.inquiry .btn-primary{color:#fff}
.contact-line{font-size:1.1rem;margin:.3rem 0}
.inq-form{background:#fff;color:var(--ink);border-radius:14px;padding:1.6rem;display:grid;gap:.8rem}
.placeholder-tag{margin:0;background:#ffe9a8;color:#6b4e00;font-weight:700;font-size:.8rem;text-align:center;padding:.35rem;border-radius:6px}
.inq-form label{display:grid;gap:.25rem;font-size:.88rem;font-weight:600;color:var(--pine)}
.inq-form input,.inq-form select,.inq-form textarea{font:inherit;padding:.6rem .7rem;border:1px solid #cfc7b6;border-radius:8px;background:#f8f6f1}
.inq-form .row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.site-footer{background:#132219;color:#c9d3cc;text-align:center;padding:2rem 5vw;font-size:.9rem}
.site-footer a{color:#f3d9b8}
@media (max-width:900px){
 .split{grid-template-columns:1fr;gap:2rem}
 .amen-grid,.rules-grid{grid-template-columns:repeat(2,1fr)}
 .cards.three{grid-template-columns:1fr}
 .gal{grid-template-columns:repeat(2,1fr)}
 .gal figure.wide{grid-column:span 2}
 .highlights{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
 .section{padding:3.5rem 6vw}
 .amen-grid,.rules-grid,.cards.two,.cards.rev{grid-template-columns:1fr}
 .hero{min-height:82vh}
 .about-photo img{aspect-ratio:4/3}
 .hl strong{font-size:1.45rem}
}
.split>*,.inq-form .row>*{min-width:0}
.inq-form input,.inq-form select,.inq-form textarea{width:100%;min-width:0}
@media (max-width:600px){.inq-form .row{grid-template-columns:1fr}.inquiry h2{overflow-wrap:break-word}}
@media (max-width:600px){.site-header{flex-wrap:nowrap;padding:.7rem 5vw}.brand{font-size:1.05rem}.brand span{display:none}}
/* Availability calendar */
.availability{max-width:1200px}
.cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.2rem 0}
.cal-nav{width:44px;height:44px;border-radius:50%;border:2px solid var(--pine);background:#fff;color:var(--pine);font-size:1.6rem;line-height:1;cursor:pointer}
.cal-nav:disabled{opacity:.3;cursor:default}
.cal-legend{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;font-size:.92rem;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:.4rem}
.sw{display:inline-block;width:16px;height:16px;border-radius:4px}
.sw.open,.day.open{background:#dcebdd;color:#1f3a2e}
.sw.booked,.day.booked{background:#b5552a;color:#fff}
.sw.past,.day.past{background:#ece8e0;color:#a8a296}
.day.booked{text-decoration:line-through;text-decoration-color:rgba(255,255,255,.6)}
.cal-months{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cal-month{background:#fff;border-radius:12px;padding:1.1rem;box-shadow:0 4px 18px rgba(31,58,46,.08)}
.cal-month h3{text-align:center;margin-bottom:.7rem}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-grid .dow{text-align:center;font-size:.75rem;font-weight:600;color:var(--muted);padding-bottom:2px}
.cal-grid .day{text-align:center;font-size:.88rem;padding:.42rem 0;border-radius:6px;font-weight:500}
.cal-status{font-size:.85rem;color:var(--muted);text-align:center;margin:.9rem 0 0}
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;background:var(--sand);border-radius:12px;padding:1rem 1.3rem}
.cal-foot p{margin:0}
@media (max-width:1000px){.cal-months{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.cal-months{grid-template-columns:1fr}.cal-foot{flex-direction:column;align-items:stretch;text-align:center}}
/* Sleeping layout by floor */
.floors{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:1rem}
.floor{background:#fff;border-radius:14px;padding:1.2rem 1.3rem;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.floor-title{margin:0 0 .8rem;font-size:1.5rem}
.floor .cards.two{grid-template-columns:1fr 1fr;margin:0 0 .8rem}
.floor .card{background:#f8f6f1}
.floor .card h4{margin:0 0 .3rem;font-size:1.15rem}
.floor .card p{margin:0;font-size:1.1rem}
@media (max-width:800px){.floors{grid-template-columns:1fr}}
/* Inquiry form helper text */
.form-intro{margin:0;font-size:1rem;color:var(--ink)}
.form-alt{margin:0;font-size:.95rem;color:var(--ink)}
.inq-form .form-alt a{color:var(--pine);font-weight:600}
.occ-note{background:#fff;border-left:5px solid var(--ember);border-radius:8px;padding:.8rem 1.1rem;font-size:1.1rem;margin:.6rem 0 0}
.date-note{margin:0;font-size:1rem;font-weight:600;color:#9a2f12}
.date-note:empty{display:none}
/* ---- Motion (lightweight, CSS + tiny JS; all off for prefers-reduced-motion) ---- */
/* Hero crossfade slideshow with slow Ken Burns zoom/pan */
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:-2%;background-size:cover;background-position:center;opacity:0;transition:opacity 1.8s ease-in-out;will-change:opacity,transform}
.hero-slide.is-active{opacity:1}
.hero-slide.kb-1{background-position:center 55%}
.hero-slide.kb-2{background-position:center 35%}
.hero-slide.kb-3{background-position:center 60%}
.hero-slide.kb-4{background-position:center 50%}
.hero-slide.kb-1{animation:kb-a 20s ease-in-out infinite alternate}
.hero-slide.kb-2{animation:kb-b 20s ease-in-out infinite alternate}
.hero-slide.kb-3{animation:kb-c 20s ease-in-out infinite alternate}
.hero-slide.kb-4{animation:kb-d 20s ease-in-out infinite alternate}
@keyframes kb-a{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes kb-b{from{transform:scale(1.12) translate(0,-1.5%)}to{transform:scale(1.03) translate(0,1%)}}
@keyframes kb-c{from{transform:scale(1.03) translate(1.5%,0)}to{transform:scale(1.12) translate(-1%,-1%)}}
@keyframes kb-d{from{transform:scale(1.1) translate(-1.5%,1%)}to{transform:scale(1.02) translate(1%,0)}}
.hero h1,.hero .lede{text-shadow:0 2px 16px rgba(0,0,0,.45)}
/* Hero text: gentle entrance on load */
.js-motion .hero-inner>*{animation:hero-in .9s ease-out both}
.js-motion .hero-inner>*:nth-child(2){animation-delay:.12s}
.js-motion .hero-inner>*:nth-child(3){animation-delay:.24s}
.js-motion .hero-inner>*:nth-child(4){animation-delay:.36s}
.js-motion .hero-inner>*:nth-child(5){animation-delay:.48s}
@keyframes hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* Scroll reveal (class added by js/motion.js only when motion is allowed) */
.js-motion .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease-out,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
.js-motion .reveal.is-visible{opacity:1;transform:none}
/* Gallery: subtle hover zoom */
.gal img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gal figcaption{transition:padding-bottom .4s ease}
@media (hover:hover){
 .gal figure:hover img{transform:scale(1.06)}
 .gal figure:hover figcaption{padding-bottom:.85rem}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hero-slide,.hero-slide.kb-1,.hero-slide.kb-2,.hero-slide.kb-3,.hero-slide.kb-4{animation:none!important;transition:none!important;transform:none!important}
 .js-motion .hero-inner>*{animation:none!important}
 .js-motion .reveal{opacity:1!important;transform:none!important;transition:none!important}
 .gal img,.gal figcaption{transition:none!important}
 .gal figure:hover img{transform:none!important}
}

/* Nearby strip */
.nearby-strip{margin-top:2.2rem}
.nearby-strip h3{margin:0 0 .2rem}
.gal.nearby{grid-template-columns:1fr 1fr .42fr;max-width:1100px;align-items:start}
.gal.nearby figure.clip{background:#111;display:flex;flex-direction:column}
.gal.nearby figure.clip video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#111}
.gal.nearby figure.clip figcaption{position:static;background:#1f2b26;padding:.5rem .7rem}
@media (max-width:700px){.gal.nearby{grid-template-columns:1fr}.gal.nearby figure.clip{grid-column:1/-1;justify-self:center;width:min(100%,340px)}}
/* Seasonal gallery groups */
.gal-group{margin-top:2rem}
.gal-group:first-of-type{margin-top:1.2rem}
.gal-title{margin:0 0 .2rem;font-size:1.35rem}
.gal-group .gal{margin-top:.6rem}
.gal.two{grid-template-columns:repeat(2,1fr);max-width:900px}
/* Places to eat */
.eat-list{margin-top:1.8rem;background:var(--sand);border-radius:12px;padding:1.3rem 1.5rem;max-width:1100px}
.eat-list h3{margin:0 0 .6rem;font-size:1.45rem}
.eat-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2rem}
.eat-list li{font-size:1.15rem;line-height:1.4}
.eat-list li a{font-weight:600;color:inherit;text-decoration:underline;text-underline-offset:3px}
.eat-list .eat-desc{display:block;font-size:1.05rem;opacity:.85}
@media (max-width:700px){.eat-list ul{grid-template-columns:1fr}}
.gal.nearby figcaption a{color:#fff;text-decoration:underline;text-underline-offset:2px;position:relative;z-index:1}
/* Tall portrait clip inside a photo grid (eagles): fills exactly two photo rows */
.gal.summer-gal{grid-auto-flow:row dense}
.gal figure.clip-tall{grid-row:span 2;grid-column:3;background:#111;position:relative;min-height:0}
.gal figure.clip-tall video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.gal figure.clip-tall figcaption{top:0;bottom:auto;padding:.6rem .8rem 1.4rem;background:linear-gradient(rgba(0,0,0,.65),transparent);pointer-events:none}
@media (max-width:600px){.gal figure.clip-tall{grid-column:auto}}
/* Places to Go */
.places-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:1.5rem}
.place{background:#fff;border-radius:14px;padding:1.6rem 1.8rem;box-shadow:0 4px 18px rgba(31,58,46,.08);border-top:5px solid var(--lake)}
.place.featured{grid-column:1/-1;border-top-color:var(--ember);background:var(--sand)}
.place h3{margin:0 0 .4rem;font-size:1.6rem;line-height:1.25}
.place.featured h3{font-size:2rem}
.place h3 a{color:var(--pine);text-decoration:underline;text-underline-offset:4px}
.place p{font-size:1.2rem;line-height:1.55;margin:.4rem 0}
.place .place-meta{font-weight:600;color:var(--bark)}
.place .place-link{font-weight:600;color:var(--lake)}
@media (max-width:700px){.places-grid{grid-template-columns:1fr}.place.featured h3{font-size:1.6rem}}
/* Visible, copyable web addresses */
.web-line{display:block;margin-top:.35rem}
a.web-addr,.eat-list li a.web-addr,.place a.web-addr{color:#1a5fb4;text-decoration:underline;text-underline-offset:3px;font-weight:600;font-size:1.15rem;overflow-wrap:anywhere;word-break:break-word}
a.web-addr:hover,a.web-addr:focus,.eat-list li a.web-addr:hover{color:#0f3f7a}
.place .web-line{font-size:1.15rem}
.place-note{font-size:1.05rem!important;color:var(--muted)}

/* ---- Additions 2026-10-18: review scores, Getting here, FAQ ---- */
.rev-scores{display:flex;gap:1.2rem;flex-wrap:wrap;margin:0 auto 1.6rem}
.rev-scores div{flex:1 1 280px;background:rgba(255,255,255,.08);border-radius:12px;padding:1rem 1.3rem}
.rev-scores strong{display:block;font-family:Fraunces,Georgia,serif;font-size:2rem;color:#f3d9b8}
.rev-scores span{font-size:1.02rem}
.gh-intro{font-size:1.15rem;max-width:760px}
.gh-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.2rem}
.gh-box{background:#fff;border-radius:12px;padding:1.4rem 1.6rem;box-shadow:0 4px 18px rgba(31,58,46,.08);border-top:4px solid var(--lake)}
.gh-box h3{margin:0 0 .6rem;color:var(--pine);font-size:1.3rem}
.gh-list{list-style:none;margin:0;padding:0}
.gh-list li{display:grid;grid-template-columns:1fr auto 5.5rem;gap:.8rem;align-items:baseline;padding:.65rem 0;border-bottom:1px solid #ece6da;font-size:1.12rem}
.gh-list li:last-child{border-bottom:0}
.gh-place{font-weight:600;color:var(--ink)}
.gh-place small{display:block;font-weight:400;color:var(--muted);font-size:.9rem}
.gh-time{color:var(--lake);font-weight:600;white-space:nowrap}
.gh-mi{color:var(--muted);text-align:right;white-space:nowrap}
.gh-winter{margin-top:1.4rem;background:#eef4f8;border-left:5px solid var(--lake);border-radius:8px;padding:1rem 1.3rem;font-size:1.08rem}
.gh-winter a,.faq a{color:#1a5fb4}
.gh-small{color:var(--muted);font-size:.95rem;margin-top:.9rem}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;margin-top:1.2rem}
.faq-item{background:#fff;border:1px solid #e3dccd;border-radius:10px;padding:1.1rem 1.3rem}
.faq-item h3{margin:0 0 .4rem;color:var(--pine);font-size:1.2rem}
.faq-item p{margin:0;font-size:1.06rem;line-height:1.55}
.faq-more{margin-top:1.3rem;font-size:1.05rem}
@media (max-width:820px){.gh-grid,.faq-grid{grid-template-columns:1fr}.gh-list li{grid-template-columns:1fr auto}.gh-mi{display:none}}

/* Phone menu: a "Menu" button opens the full link list in large, easy-to-tap rows. Desktop is unchanged. */
.nav-links{display:contents}
.nav-toggle{display:none}
@media (max-width:600px){
 .site-header nav{gap:.6rem;flex-wrap:nowrap}
 .site-header nav a.nav-cta{font-size:1.05rem;padding:.55rem 1rem}
 html.js .nav-toggle{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.45rem .9rem;border:2px solid rgba(255,255,255,.75);border-radius:999px;background:transparent;color:#fff;font:600 1.05rem Inter,sans-serif;cursor:pointer}
 .nav-toggle:focus-visible,.nav-links a:focus-visible{outline:3px solid #f3d9b8;outline-offset:2px}
 .nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s,background .2s}
 .nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:0}
 .nav-toggle-bars::before{top:-6px}
 .nav-toggle-bars::after{top:6px}
 .nav-open .nav-toggle-bars{background:transparent}
 .nav-open .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg)}
 .nav-open .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg)}
 html.js .nav-links{display:none}
 html.js .site-header.nav-open .nav-links{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 64px);overflow-y:auto;background:rgb(31,58,46);box-shadow:0 12px 24px rgba(0,0,0,.35);padding:.25rem 0 .75rem}
 html.js .nav-links a{display:block;font-size:1.3rem;font-weight:500;color:#fff;padding:.85rem 6vw;min-height:48px;border-top:1px solid rgba(255,255,255,.14)}
 html.js .nav-links a:active{background:rgba(255,255,255,.1)}
 /* without JavaScript the links simply wrap onto a second row */
 html:not(.js) .site-header{flex-wrap:wrap}
 html:not(.js) .site-header nav{flex-wrap:wrap;gap:.4rem 1rem}
 html:not(.js) .nav-links{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
 html:not(.js) .nav-links a{font-size:1.1rem;padding:.4rem 0}
}