/* Greenstone Park Speedway — public styles
   Palette: the club green from the logo, on the dark of a night meeting,
   with the clay of the track as the second accent. */

:root{
  --night:#0c110e;
  --shale:#141a16;
  --shale-2:#1c241e;
  --line:#28332b;
  --green:#4fb83c;
  --green-dim:#3a8c2c;
  --clay:#b4552d;
  --chalk:#eef0ec;
  --steel:#86948c;

  --display:Anton, Impact, sans-serif;
  --body:Barlow, system-ui, -apple-system, sans-serif;
  --util:"Barlow Condensed", Barlow, sans-serif;

  --shell:1120px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--night);
  color:var(--chalk);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  padding-top:8px;
}

img{max-width:100%;display:block}
a{color:var(--green)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green);outline-offset:2px;border-radius:2px;
}

.shell{max-width:var(--shell);margin:0 auto;padding:0 22px}

/* the one chequered element on the site */
.chequer{
  position:fixed;top:0;left:0;right:0;height:8px;z-index:60;
  background:repeating-linear-gradient(90deg,var(--chalk) 0 14px,var(--night) 14px 28px);
}

/* ---------- masthead ---------- */

.masthead{
  background:var(--shale);
  border-bottom:1px solid var(--line);
  position:sticky;top:8px;z-index:50;
}
.masthead-in{display:flex;align-items:center;gap:20px;min-height:78px;flex-wrap:wrap;
  padding-top:8px;padding-bottom:8px;transition:min-height .18s ease}
body.scrolled .masthead-in{min-height:64px}

.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;margin-right:auto}
/* the logo carries the club name, so it needs to be legible down to GREYMOUTH */
.brand img{max-height:88px;width:auto;transition:max-height .18s ease}
body.scrolled .brand img{max-height:52px}
.brand-mark{
  font-family:var(--display);font-size:23px;letter-spacing:.02em;
  background:var(--green);color:var(--night);
  width:46px;height:46px;display:grid;place-items:center;border-radius:3px;
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-family:var(--display);font-size:21px;text-transform:uppercase;letter-spacing:.03em}
.brand-sub{font-family:var(--util);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}

.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
  font-family:var(--util);font-weight:600;font-size:16px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--chalk);text-decoration:none;padding:9px 12px;border-radius:3px;
}
.nav a:hover{background:var(--shale-2);color:var(--green)}
.nav a.on{color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}
.nav a.ext::after{content:"\2197";font-size:.75em;margin-left:4px;opacity:.55;vertical-align:top}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line);color:var(--chalk);
  font-family:var(--util);font-size:16px;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border-radius:3px;cursor:pointer;
}

/* ---------- typography ---------- */

h1,h2,h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.02em;line-height:1.05;font-weight:400}
h1{font-size:clamp(38px,6vw,64px)}
h2{font-size:clamp(26px,3.4vw,36px)}
h3{font-size:21px}

.eyebrow{
  font-family:var(--util);font-weight:700;font-size:15px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green);display:block;margin-bottom:10px;
}
.lede{font-size:19px;color:#c8cdd1;max-width:62ch}
.muted{color:var(--steel)}

.section{padding:64px 0}
.section + .section{padding-top:0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;font-family:var(--display);font-size:17px;letter-spacing:.05em;text-transform:uppercase;
  background:var(--green);color:var(--night);text-decoration:none;
  padding:13px 26px;border:0;border-radius:3px;cursor:pointer;
}
.btn:hover{background:#63d24e}
.btn-ghost{background:transparent;color:var(--chalk);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{background:var(--shale-2);color:var(--green)}
.btn-sm{font-size:14px;padding:9px 16px}

/* ---------- hero: the next meeting ---------- */

.hero{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(79,184,60,.12) 0%, transparent 60%),
    var(--shale);
  border-bottom:1px solid var(--line);
  padding:70px 0 64px;
}

/* with a photo behind it: darkest under the text, opening up towards the right */
.hero.has-photo .eyebrow,
.hero.has-photo h1,
.hero.has-photo .lede,
.hero.has-photo .time-item .lbl,
.hero.has-photo .time-item .val,
.hero.has-photo .sponsor-line{text-shadow:0 1px 14px rgba(12,17,14,.8)}
/* the muted label colour is too faint over a bright photo */
.hero.has-photo .time-item .lbl{color:#b9c4bd}
.hero.has-photo .datestack{background:rgba(12,17,14,.92)}

.hero.has-photo{
  background-image:
    linear-gradient(100deg, rgba(12,17,14,.90) 0%, rgba(12,17,14,.78) 38%, rgba(12,17,14,.38) 100%),
    var(--hero);
  background-size:cover;
  background-position:center 42%;
  padding:84px 0 78px;
}
.hero-grid{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:start}

.datestack{
  background:var(--night);border:1px solid var(--line);border-radius:4px;
  padding:18px 24px;text-align:center;min-width:150px;
}
.datestack .dow{font-family:var(--util);font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.datestack .day{font-family:var(--display);font-size:66px;line-height:.9;margin:6px 0}
.datestack .mon{font-family:var(--util);font-size:20px;letter-spacing:.14em;text-transform:uppercase}
.datestack .yr{font-family:var(--util);font-size:15px;letter-spacing:.14em;color:var(--steel)}

.hero h1{margin-bottom:16px}

.times{display:flex;gap:34px;flex-wrap:wrap;margin:22px 0 26px}
.time-item .lbl{font-family:var(--util);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.time-item .val{font-family:var(--display);font-size:30px;line-height:1.1}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{
  font-family:var(--util);font-weight:600;font-size:15px;letter-spacing:.07em;text-transform:uppercase;
  background:var(--night);border:1px solid var(--line);color:var(--chalk);
  padding:6px 13px;border-radius:2px;text-decoration:none;display:inline-block;
}
.chip:hover{border-color:var(--green);color:var(--green)}

.sponsor-line{
  font-family:var(--util);font-size:16px;letter-spacing:.05em;color:var(--steel);
  border-top:1px solid var(--line);padding-top:16px;margin-top:8px;
}
.sponsor-line strong{color:var(--clay);text-transform:uppercase;letter-spacing:.12em;font-size:14px}

.hero-empty{padding:60px 0}

/* ---------- cards ---------- */

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}

.ecard{
  display:grid;grid-template-columns:78px 1fr;gap:18px;align-items:center;
  background:var(--shale);border:1px solid var(--line);border-radius:4px;
  padding:18px 20px;text-decoration:none;color:inherit;
}
.ecard:hover{border-color:var(--green-dim);background:var(--shale-2)}
.ecard .mini-date{text-align:center;border-right:1px solid var(--line);padding-right:14px}
.ecard .mini-date .d{font-family:var(--display);font-size:32px;line-height:1}
.ecard .mini-date .m{font-family:var(--util);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.ecard .mini-date .y{font-family:var(--util);font-size:12px;letter-spacing:.1em;color:var(--steel)}
.ecard h3{font-size:19px;margin-bottom:4px}
.ecard .meta{font-family:var(--util);font-size:15px;letter-spacing:.05em;color:var(--steel)}

.linkcard{
  display:block;background:var(--shale);border:1px solid var(--line);border-radius:4px;
  padding:22px;text-decoration:none;color:inherit;
}
.linkcard:hover{border-color:var(--green-dim);background:var(--shale-2)}
.linkcard h3{margin-bottom:6px}
.linkcard p{color:var(--steel);font-size:16px}

/* ---------- the placing board (signature) ---------- */

.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;align-items:start}

.board{background:var(--shale);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.board-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:var(--night);border-bottom:1px solid var(--line);padding:13px 18px;
}
.board-head .rno{font-family:var(--display);font-size:19px;text-transform:uppercase;letter-spacing:.04em}
.board-head .cnt{font-family:var(--util);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}

.board ol{list-style:none}
.placing{
  display:grid;grid-template-columns:44px 88px 1fr;gap:14px;align-items:center;
  padding:11px 18px;border-bottom:1px solid rgba(41,51,58,.6);
}
.placing:last-child{border-bottom:0}
.placing .pos{
  font-family:var(--display);font-size:26px;line-height:1;color:var(--steel);text-align:right;
}
.placing.p1 .pos,.placing.p2 .pos,.placing.p3 .pos{color:var(--green)}
.placing.p1{background:linear-gradient(90deg,rgba(255,182,39,.09),transparent 65%)}

/* the number plate — a car door panel */
.plate{
  font-family:var(--display);font-size:19px;letter-spacing:.02em;
  background:var(--night);color:var(--green);
  border:1px solid var(--line);border-radius:2px;
  padding:5px 0;text-align:center;
}
.placing .name{font-weight:500;font-size:17px}
.placing.dnf{opacity:.55}
.placing.dnf .pos{font-size:15px;font-family:var(--util);letter-spacing:.1em}
.placing.dnf .plate{color:var(--steel)}

.board-empty{padding:26px 18px;color:var(--steel);font-family:var(--util);font-size:16px;letter-spacing:.05em}

/* ---------- class list on an event ---------- */

.classlist{display:grid;gap:10px}
.classrow{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--shale);border:1px solid var(--line);border-radius:4px;
  padding:16px 20px;text-decoration:none;color:inherit;
}
.classrow:hover{border-color:var(--green-dim);background:var(--shale-2)}
.classrow h3{font-size:20px}
.classrow .status{font-family:var(--util);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.classrow .status.done{color:var(--green)}

/* ---------- prose pages ---------- */

.prose{max-width:70ch}
.prose h2{font-size:27px;margin:36px 0 12px}
.prose h3{margin:26px 0 8px}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 22px}
.prose li{margin-bottom:7px}
.prose strong{color:#fff}
.prose table{width:100%;border-collapse:collapse;margin-bottom:20px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--util);letter-spacing:.1em;text-transform:uppercase;font-size:15px;color:var(--green)}

/* ---------- breadcrumb ---------- */

.crumb{
  font-family:var(--util);font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel);padding:22px 0 0;
}
.crumb a{color:var(--steel);text-decoration:none}
.crumb a:hover{color:var(--green)}
.crumb span{margin:0 8px;opacity:.5}

/* ---------- page head band ---------- */

.pagehead{background:var(--shale);border-bottom:1px solid var(--line);padding:34px 0 40px;margin-bottom:52px}
.pagehead .shell > .eyebrow{margin-bottom:8px}

/* ---------- photos are on facebook ---------- */

.photos-note{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--shale);border:1px solid var(--line);border-radius:4px;
  padding:20px 24px;margin-top:34px;
}
.photos-note p{color:#c8cdd1;margin:0;max-width:56ch}
.photos-note .btn{display:inline-flex;align-items:center;gap:9px;flex:none}
.photos-note svg{width:16px;height:16px}

/* ---------- notice ---------- */

.notice{
  background:var(--shale);border-left:3px solid var(--clay);border-radius:0 4px 4px 0;
  padding:18px 22px;color:#c8cdd1;
}

/* ---------- social links, under the address in the footer ---------- */

.social{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.social a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--util);font-weight:600;font-size:15px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--chalk);text-decoration:none;
  background:var(--night);border:1px solid var(--line);border-radius:3px;
  padding:9px 14px;
}
.social a:hover{border-color:var(--green);color:var(--green)}
.social svg{width:17px;height:17px;flex:none}

/* ---------- footer ---------- */

.footer{background:var(--shale);border-top:1px solid var(--line);margin-top:70px;padding:46px 0 0}
.footer-in{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap;padding-bottom:34px}
.footer p{color:var(--steel);font-size:16px}
.footer-name{font-family:var(--display);font-size:20px;text-transform:uppercase;color:var(--chalk)!important;margin-bottom:8px}
.footer-links{display:flex;flex-direction:column;gap:7px}
.footer-links a{
  font-family:var(--util);font-size:16px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--chalk);text-decoration:none;
}
.footer-links a:hover{color:var(--green)}
.colophon{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:18px;padding-bottom:20px;
  font-family:var(--util);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);
}
.colophon a{color:var(--steel)}
.colophon a:hover{color:var(--green)}

/* ---------- responsive ---------- */

@media (max-width:860px){
  .nav-toggle{display:block;order:2}
  .nav{
    display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--line);padding:8px 0 14px;
  }
  body.nav-open .nav{display:flex}
  .nav a{padding:12px 4px;font-size:18px}
  .nav a.on{box-shadow:inset 3px 0 0 var(--green);padding-left:12px}
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero.has-photo{
    background-image:linear-gradient(rgba(12,17,14,.84), rgba(12,17,14,.92)), var(--hero);
    padding:52px 0 54px;
  }
  .brand img{max-height:60px}
  body.scrolled .brand img{max-height:46px}
  .datestack{justify-self:start}
  .section{padding:46px 0}
}

@media (max-width:520px){
  body{font-size:16px}
  /* the corner mark would cover the photo on a phone, so it sits under the text */
  .sponsor-corner{position:static;margin:22px 22px 0;justify-content:center;backdrop-filter:none}
  .sponsor-corner .lbl{max-width:none}
  .smark .splate img{max-height:38px}
  .placing{grid-template-columns:34px 76px 1fr;gap:11px;padding:10px 14px}
  .placing .pos{font-size:22px}
  .plate{font-size:17px}
  .times{gap:24px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* the masthead can grow tall on a short screen, so cap it there */
@media (max-height:560px){
  .brand img{max-height:52px}
}

/* ---------- the sponsor mark, shared by every placement ---------- */

.smark{display:inline-flex;align-items:center;text-decoration:none;border-radius:3px}
.smark .splate{display:block;background:#fff;border-radius:3px;padding:9px 14px;line-height:0}
.smark .splate img{max-height:46px;width:auto;display:block}
.smark .nm{font-family:var(--display);font-size:20px;text-transform:uppercase;letter-spacing:.03em;color:var(--chalk)}
a.smark:hover .splate{box-shadow:0 0 0 2px var(--green)}
a.smark:hover .nm{color:var(--green)}
.smark.sm .splate{padding:5px 9px}
.smark.sm .splate img{max-height:26px}
.smark.sm .nm{font-size:16px}

/* --- placement: bottom corner of the hero, like a board on the fence --- */
.hero{position:relative}
.sponsor-corner{
  position:absolute;right:22px;bottom:20px;z-index:2;
  display:flex;align-items:center;gap:11px;
  background:rgba(12,17,14,.72);border:1px solid rgba(255,255,255,.09);
  border-radius:4px;padding:9px 13px;backdrop-filter:blur(3px);
}
.sponsor-corner .lbl{
  font-family:var(--util);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel);
  max-width:74px;line-height:1.25;
}

/* --- placement: a thin strip above everything, on every page --- */
.sponsor-top{background:#0a0e0b;border-bottom:1px solid var(--line);padding:7px 0}
.sponsor-top .shell{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.sponsor-top .lbl{font-family:var(--util);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}

/* --- placement: understated, in the footer --- */
.sponsor-foot{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;padding-bottom:22px}
.sponsor-foot .lbl{font-family:var(--util);font-size:13px;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}

/* ---------- title sponsor band ---------- */

.sponsor-band{background:var(--shale);border-bottom:1px solid var(--line);padding:16px 0}
.sponsor-band .shell{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center}
.sponsor-band .lbl{font-family:var(--util);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.sponsor-band .nm{font-family:var(--display);font-size:22px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--chalk);text-decoration:none}
.sponsor-band .slink{text-decoration:none;display:inline-flex;align-items:center}
.sponsor-band .slink:hover .nm{color:var(--green)}
/* sponsor artwork gets its own white panel, the way a trackside board would */
.sponsor-band .splate{display:inline-block;background:#fff;border-radius:3px;padding:9px 14px;line-height:0}
.sponsor-band .splate img{max-height:52px;width:auto;display:block}
.sponsor-band .slink:hover .splate{box-shadow:0 0 0 2px var(--green)}
@media (max-width:520px){.sponsor-band .splate img{max-height:40px}}

/* ---------- video ---------- */

.video{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border:1px solid var(--line);border-radius:4px;background:var(--shale)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- photo credit ---------- */

.credit{font-family:var(--util);font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel);padding-bottom:16px;text-align:center}
.credit a{color:var(--green);text-decoration:none;margin-left:4px}
.credit a::before{content:"\00b7";color:var(--steel);margin-right:8px}
.credit a:hover{text-decoration:underline}

/* ---------- ad slot ---------- */

.adslot{border-top:1px solid var(--line);margin-top:64px;padding:26px 0 8px}
.adslot .shell{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0}
.adslot .adlbl{font-family:var(--util);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);opacity:.7}
.adslot ins,.adslot iframe{max-width:100%}
.adslot + .footer{margin-top:34px}

/* ---------- the sponsor wall ---------- */

.supporters .lede{max-width:64ch}
.wall{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:14px;margin-top:28px;align-items:stretch}
.wall li{display:flex}
.wall a{display:flex;width:100%;text-decoration:none;border-radius:3px}
.wall .splate{display:flex;align-items:center;justify-content:center;width:100%;
  background:#fff;border-radius:3px;padding:16px;min-height:96px}
.wall .splate img{max-height:64px;max-width:100%;width:auto;display:block}
.wall .sname{display:flex;align-items:center;justify-content:center;width:100%;min-height:96px;
  background:var(--shale);border:1px solid var(--line);border-radius:3px;padding:16px;text-align:center;
  font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.03em;color:var(--chalk)}
.wall a:hover .splate{box-shadow:0 0 0 2px var(--green)}
.wall a:hover .sname{border-color:var(--green);color:var(--green)}

@media (max-width:520px){
  .wall{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
  .wall .splate,.wall .sname{min-height:78px;padding:12px}
  .wall .splate img{max-height:48px}
  .wall .sname{font-size:15px}
}