/* Lady Cruisers of the Ozarks. Tokens first, then one rule set per component.
   Colour comes from the club's own marks: black and white from the oval patch logo; teal from the
   club's old site (2011 to 2026) and the Women On Wheels teal, used for the one action and for links.
   Grounds are white or patch black only. Display face: Oswald, the heading face womenonwheels.org uses. */
@font-face{font-family:"LCO Display";src:url(/assets/display.woff2) format("woff2");font-weight:200 700;font-display:swap}

:root{
  --ink:#1b2224; --ink-2:#4a5457; --paper:#ffffff; --line:#d9dfdf;
  --teal:#0d666b; --teal-deep:#08474b; --teal-light:#8fd0cc;
  --on-dark:#eef3f2; --on-dark-2:#b7c4c3; --line-dark:#3a4547;
  --display:"LCO Display","Arial Narrow",system-ui,sans-serif; --display-weight:600; --display-track:0;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:72rem; --col:44rem; --gutter:clamp(1rem,4vw,2.5rem);
  --section:clamp(3rem,7vw,5.5rem); --r-img:6px; --r-btn:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-underline-offset:.16em;text-decoration-thickness:.07em}
a:hover{color:var(--teal-deep);text-decoration-thickness:.12em}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-track);line-height:1.1;margin:0 0 .5em;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.25rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.4rem)}
p,ul,ol{margin:0 0 1em}
ul,ol{padding-left:1.25rem}
li{margin-bottom:.35em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:20}
.skip:focus{left:0}

/* widths: every block is the container or the reading column, and both share one left edge */
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.col{max-width:var(--col)}
.section{padding-block:var(--section)}
.ground-paper{background:var(--paper)}
.ground-ink{background:var(--ink);color:var(--on-dark)}
.ground-ink h1,.ground-ink h2,.ground-ink h3{color:#fff}
.ground-ink a,.ground-ink a:hover{color:#fff}
.section > .wrap > :last-child,.col > :last-child{margin-bottom:0}
.lede{font-size:1.25rem}
.muted{color:var(--ink-2)}
.ground-ink .muted{color:var(--on-dark-2)}
.rule{border:0;border-top:1px solid var(--line);margin:3rem 0}

/* the one button; on black it turns white */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin:1.75rem 0 0}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:.7rem 1.35rem;border-radius:var(--r-btn);font:600 1.05rem/1.2 var(--body);text-decoration:none;background:var(--teal);color:#fff;border:2px solid var(--teal)}
.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.ground-ink .btn{background:#fff;color:var(--ink);border-color:#fff}
.ground-ink .btn:hover{background:var(--teal-light);border-color:var(--teal-light);color:var(--ink)}
.go{font-weight:600;display:inline-flex;align-items:center;min-height:44px}

/* header */
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:5rem;flex-wrap:wrap;padding-block:.6rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink);flex:1 1 0;min-width:0}
.brand img{width:68px;height:auto;flex:none}
.brand b{display:block;font:var(--display-weight) 1.2rem/1.15 var(--display)}
.brand small{display:none;font-size:.9rem;color:var(--ink-2);margin-top:.15rem}
@media (min-width:36rem){.brand img{width:92px}.brand b{font-size:1.4rem}.brand small{display:block}}
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.nav-label{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:2px solid var(--ink);border-radius:var(--r-btn);font-weight:600;cursor:pointer}
.nav-label .close{display:none}
.nav-toggle:checked ~ .bar .nav-label .open{display:none}
.nav-toggle:checked ~ .bar .nav-label .close{display:inline}
.nav-toggle:focus-visible ~ .bar .nav-label{outline:3px solid var(--teal);outline-offset:3px}
.site-nav{display:none;width:100%;padding-bottom:.5rem}
.nav-toggle:checked ~ .bar .site-nav{display:block}
.site-nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.site-nav li{margin:0}
.site-nav a{display:flex;align-items:center;min-height:46px;color:var(--ink);text-decoration:none;font-weight:600;border-bottom:3px solid transparent}
.site-nav a:hover{color:var(--teal)}
.site-nav a[aria-current="page"]{border-bottom-color:var(--teal)}
@media (min-width:64rem){
  .brand{flex:0 1 auto}
  .nav-label{display:none}
  .site-nav{display:block;width:auto;padding:0}
  .site-nav ul{display:flex;gap:0 1.6rem}
}

/* home: photo, then the welcome on patch black with the patch itself */
.hero-photo{margin:0}
.hero-photo img{width:100%;height:clamp(18rem,44vw,36rem);object-fit:cover;object-position:50% 68%}
.welcome{display:grid;gap:2rem;align-items:center}
.welcome .patch{width:min(100%,15rem)}
@media (min-width:52rem){.welcome{grid-template-columns:1fr auto;gap:4rem}.welcome .patch{width:21rem}}
.welcome h1{max-width:16ch}

/* page head on inner pages: the title opens the first section; the photo spans the container */
.page-head{margin-bottom:clamp(2rem,4vw,3rem)}
.page-head h1{margin-bottom:0}
.page-photo{margin:clamp(1.5rem,3vw,2.25rem) 0 0}
.page-photo img{width:100%;border-radius:var(--r-img);aspect-ratio:21/9;object-fit:cover}

/* two columns of text */
.duo{display:grid;gap:2.5rem}
@media (min-width:52rem){.duo{grid-template-columns:1fr 1fr;gap:4rem}}
.duo > div > :last-child{margin-bottom:0}

/* events: one list component on the home page and the calendar */
.events{list-style:none;margin:0 0 1.25rem;padding:0}
.event{display:grid;grid-template-columns:3.6rem 1fr;gap:0 .9rem;padding:1.25rem 0;border-top:1px solid var(--line);margin:0}
@media (min-width:40rem){.event{grid-template-columns:4.6rem 1fr;gap:0 1.25rem}}
.event:last-child{border-bottom:1px solid var(--line)}
.event time{font-family:var(--display);line-height:1;color:var(--teal-deep);padding-top:.15rem}
.event time .m{display:block;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
.event time .d{display:block;font-size:2rem;font-weight:700}
.event time .y{display:block;font-size:.9rem;color:var(--ink-2);margin-top:.2rem}
.event h3{margin:0 0 .3rem;font-size:clamp(1.15rem,2vw,1.35rem)}
.event .where{color:var(--ink-2);margin:0 0 .5rem;font-size:1rem}
.event .body{font-size:1rem}
.event .body > :last-child{margin-bottom:0}
.empty{margin:0 0 1.25rem}
.sub{font-size:1.2rem;margin:2rem 0 0}
.year{border-top:1px solid var(--line);margin:0}
.year:last-of-type{border-bottom:1px solid var(--line)}
.year summary{cursor:pointer;padding:.9rem 0;font:var(--display-weight) 1.45rem/1.2 var(--display);min-height:44px}
.year summary span{font:400 1rem var(--body);color:var(--ink-2);margin-left:.6rem}

/* photo grid: one component everywhere; captions keep their rows even */
.photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem .75rem}
@media (min-width:40rem){.photos{grid-template-columns:repeat(3,1fr);gap:1.25rem 1rem}}
@media (min-width:64rem){.photos{grid-template-columns:repeat(4,1fr)}.photos-big{grid-template-columns:repeat(3,1fr);gap:1.5rem 1.25rem}}
.photos li,.photos figure{margin:0}
.photos a{display:block;color:inherit;text-decoration:none}
.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-img);background:var(--line)}
.ground-ink .photos img{background:var(--line-dark)}
.photos figcaption{font-size:.95rem;color:var(--ink-2);margin-top:.45rem;line-height:1.35;min-height:2.7em}
.ground-ink .photos figcaption{color:var(--on-dark-2)}
.photos a:hover figcaption{text-decoration:underline}
.more{margin:1.5rem 0 0}

/* plain lists of links (albums, documents, websites) */
.links{list-style:none;padding:0;margin:0 0 1.5rem}
.links li{padding:.65rem 0;border-top:1px solid var(--line);margin:0}
.links li:last-child{border-bottom:1px solid var(--line)}
.links .note{display:block;color:var(--ink-2);font-size:1rem}

/* prose */
.prose h2{margin-top:2.5rem}
.prose h3{margin-top:1.75rem}
.prose > :first-child{margin-top:0}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:0 0 1.25rem}
.figs figure{margin:0}
.figs img{border-radius:var(--r-img);width:100%}
.figs figcaption{font-size:.95rem;color:var(--ink-2);margin-top:.4rem}
blockquote{margin:0 0 1em;padding:0}
.contact-name{font:var(--display-weight) 1.5rem/1.2 var(--display);margin:0 0 .25rem}
.after{margin-top:2rem}

/* footer */
.site-footer{background:var(--ink);color:var(--on-dark);padding-block:3rem 2.5rem;font-size:1rem;border-top:1px solid var(--line-dark)}
.site-footer a,.site-footer a:hover,.site-footer a:focus{color:#fff}
.foot{display:grid;gap:1.75rem}
@media (min-width:52rem){.foot{grid-template-columns:1.4fr 1fr 1fr}}
.foot b{display:block;font:var(--display-weight) 1.25rem/1.2 var(--display);margin-bottom:.4rem;color:#fff}
.foot p{margin:0 0 .5rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:0}
.foot li a{display:inline-flex;align-items:center;min-height:44px}
.fine{color:var(--on-dark-2);font-size:.92rem;margin-top:2rem;border-top:1px solid var(--line-dark);padding-top:1.25rem}