/* New site-wide design system (2026 reskin). Loaded alongside the legacy main.css during
   the phased rollout — main.css still backs pages that haven't been converted yet
   (see KGCC-php CLAUDE.md / the reskin plan for phase order). Once every content/*.php
   template is converted, main.css and its #Heading1-5/#BGHeading1-5/etc. ID selectors
   can be retired. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/montserrat-variable.woff2') format('woff2');
}

:root{
  --red: #ED1C24;
  --red-dark: #B8121A;
  --ink: #161616;
  --white: #FFFFFF;
  --grey-line: #E2E2E2;
  --grey-text: #5C5C5C;

  --font: 'Montserrat', helvetica, sans-serif;
  --max: 1200px;
}

.site{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  line-height:1.55;
}
.site *{box-sizing:border-box;}
.site img{max-width:100%;}
/* Plain element selector (not .site a) so any single-class component rule like
   .btn--primary can override it - a class+element selector here would silently
   win on specificity over .btn's color rules regardless of source order, which
   is exactly what was making button text invisible (e.g. Register on hover). */
a{color:inherit;}
.site h1,.site h2,.site h3,.site p,.site dl,.site dd{margin:0;}

.site .skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--ink); color:var(--white); padding:.75rem 1.25rem;
  z-index:200; font-weight:600; text-decoration:none;
}
.site .skip-link:focus{left:1rem; top:1rem;}

.site :focus-visible{ outline:3px solid var(--red); outline-offset:2px; }

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:1.5rem;}
@media (min-width:900px){ .wrap{padding-inline:2.5rem;} }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font); font-weight:700; font-size:.9rem;
  padding:.85rem 1.6rem;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  border-radius:0;
}
.btn--primary{background:var(--red-dark); color:var(--white);}
.btn--primary:hover{background:var(--ink);}
/* On a dark (ink) section background, hovering to ink would make the button
   disappear into it - invert to white instead so the shape stays visible. */
.teaser__card .btn--primary:hover,
.join .btn--primary:hover{
  background:var(--white);
  color:var(--ink);
}
.btn--ghost{border-color:var(--white); color:var(--white); background:transparent;}
.btn--ghost:hover{background:var(--white); color:var(--ink);}
.btn--dark{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn--dark:hover{background:var(--ink); color:var(--white);}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--white);
  box-shadow:0 1px 0 var(--grey-line);
  transition:background-color .25s ease, box-shadow .25s ease;
}
/* Only the homepage has a dark hero for the nav to float transparently over;
   every other page has a plain light background, so the nav must stay solid
   from the start there or its (initially white) text would be invisible. */
.has-hero .nav{
  background:transparent;
  box-shadow:none;
}
.has-hero .nav.is-solid{
  background:var(--white);
  box-shadow:0 1px 0 var(--grey-line);
}
.nav__row{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:.75rem;
}
.nav__brand{
  display:flex; align-items:center; gap:.65rem;
  text-decoration:none; color:var(--ink);
  transition:color .25s ease;
}
.has-hero .nav__brand{color:var(--white);}
.has-hero .nav.is-solid .nav__brand{color:var(--ink);}
.nav__brand img{height:42px; width:auto;}
.nav__brand-text{
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-.01em;
  display:none;
}
@media (min-width:480px){ .nav__brand-text{display:block;} }
.nav__links{
  display:none;
  gap:1.6rem;
  list-style:none; margin:0; padding:0;
  font-weight:600; font-size:.9rem;
  color:var(--ink);
  transition:color .25s ease;
  position:relative;
}
.has-hero .nav__links{color:var(--white);}
.has-hero .nav.is-solid .nav__links{color:var(--ink);}
.nav__links > li{ position:relative; }
.nav__links a{text-decoration:none; opacity:.85; display:block; padding:.4rem 0;}
.nav__links a:hover{opacity:1;}
@media (min-width:800px){ .nav__links{display:flex; align-items:center;} }

/* dropdown (replaces the old jquerycssmenu plugin) */
.nav__links .nav__sub{
  display:none;
  position:absolute; top:100%; left:0;
  background:var(--white);
  border:1px solid var(--grey-line);
  min-width:200px;
  padding:.4rem 0;
  list-style:none; margin:0;
  box-shadow:0 8px 16px rgba(0,0,0,.12);
}
.nav__links li:hover > .nav__sub,
.nav__links li:focus-within > .nav__sub{ display:block; }
.nav__sub a{ color:var(--ink); opacity:1; padding:.55rem 1rem; }
.nav__sub a:hover{ background:#FAFAFA; }

.nav__toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem;
  border:2px solid currentColor;
  color:var(--ink);
  background:transparent;
  cursor:pointer;
}
.has-hero .nav__toggle{color:var(--white);}
.has-hero .nav.is-solid .nav__toggle{color:var(--ink);}
.nav__toggle svg{width:16px; height:16px;}
.nav__toggle rect{fill:currentColor;}
@media (min-width:800px){ .nav__toggle{display:none;} }

.nav__links--mobile{
  display:none;
  flex-direction:column;
  gap:0;
  list-style:none; margin:0; padding:0;
  background:var(--white);
  border-top:1px solid var(--grey-line);
  max-height:70vh;
  overflow-y:auto;
}
.nav__links--mobile.is-open{display:flex;}
.nav__links--mobile a{
  display:block;
  padding:.9rem 1.5rem;
  text-decoration:none;
  font-weight:600;
  color:var(--ink);
  border-bottom:1px solid var(--grey-line);
}
.nav__links--mobile .nav__sub-mobile{
  list-style:none; margin:0; padding:0;
  background:#FAFAFA;
}
.nav__links--mobile .nav__sub-mobile a{ padding-left:2.5rem; font-weight:500; }
@media (min-width:800px){ .nav__links--mobile{display:none !important;} }

/* ---------- Main content clearance under the fixed nav ---------- */
/* Every page needs its content pushed below the fixed nav; the homepage's
   .hero provides its own (larger) clearance via padding-top, so main itself
   needs none there. */
main{ padding-top:4.5rem; }
.has-hero main{ padding-top:0; }
main > .wrap:first-child{ padding-top:2.5rem; }

/* ---------- Section heading pattern ---------- */
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:2rem; flex-wrap:wrap;
  margin-bottom:2.25rem;
  padding-bottom:1.1rem;
  border-bottom:3px solid var(--ink);
}
.section-head__title{
  font-weight:800;
  font-size:clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing:-.01em;
}
.section-head__note{
  font-size:.9rem;
  color:var(--grey-text);
  max-width:32ch;
}

/* ---------- Flat card grid (reused for news/stats/sponsors/etc.) ---------- */
.card-grid{
  display:grid; gap:1px;
  background:var(--grey-line);
  border:1px solid var(--grey-line);
}
.card-grid--2{ }
@media (min-width:700px){ .card-grid--2{grid-template-columns:repeat(2,1fr);} }
@media (min-width:700px){ .card-grid--4{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .card-grid--4{grid-template-columns:repeat(4,1fr);} }
.card{
  background:var(--white);
  padding:1.6rem 1.75rem;
}

/* ---------- Flat data table (replaces old .datatable / bgcolor= rows) ---------- */
.flat-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
}
.flat-table th,.flat-table td{
  padding:.6rem .75rem;
  border-bottom:1px solid var(--grey-line);
  text-align:left;
}
.flat-table th{
  font-weight:700;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--grey-text);
  border-bottom:2px solid var(--ink);
}
.flat-table tr:hover td{ background:#FAFAFA; }

/* ---------- Hero slideshow (homepage) ---------- */
.hero{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  padding-top:6rem;
  padding-bottom:3rem;
  background:var(--ink);
  color:var(--white);
  overflow:clip;
}
.hero__slideshow{ position:absolute; inset:0; z-index:0; }
.hero__slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1);
  opacity:0;
  transition:opacity 1.6s ease;
}
.hero__slide.is-active{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(120deg, rgba(184,18,26,.72) 0%, rgba(22,22,22,.8) 65%);
}
.hero__row{ position:relative; z-index:2; width:100%; }
.hero__eyebrow{
  font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); opacity:.85; margin-bottom:1rem; display:block;
}
.hero__headline{
  font-weight:800;
  font-size:clamp(2.1rem, 5vw, 3.6rem);
  line-height:1.08;
  letter-spacing:-.01em;
  max-width:20ch;
}
.hero__sub{ margin-top:1.25rem; font-size:1.1rem; color:rgba(255,255,255,.85); max-width:48ch; }
.hero__ctas{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:1rem; }

/* ---------- Homepage: news (1 hero story + list) ---------- */
.news{ padding-block:4rem; }
.news__grid{
  display:grid; gap:1px;
  background:var(--grey-line);
  border:1px solid var(--grey-line);
}
@media (min-width:900px){ .news__grid{grid-template-columns:1fr 1fr; align-items:stretch;} }
.news__hero{
  background:var(--ink); color:var(--white);
  padding:2.25rem;
  display:flex; flex-direction:column; gap:.9rem; justify-content:flex-end;
  min-height:280px; position:relative; overflow:clip;
}
.news__hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(155deg, var(--red-dark) 0%, var(--ink) 78%);
  z-index:0;
}
.news__hero > *{ position:relative; z-index:1; }
.news__hero .news__meta{ color:var(--white); opacity:.85; }
.news__hero .news__title{ font-size:clamp(1.4rem,2.4vw,1.9rem); }
.news__hero .news__snippet{ color:rgba(255,255,255,.8); max-width:46ch; }
.news__hero .news__link{ border-bottom-color:var(--white); color:var(--white); }
.news__list{ display:grid; grid-auto-rows:1fr; background:var(--grey-line); gap:1px; }
.news__row{ background:var(--white); padding:1.3rem 1.6rem; display:flex; flex-direction:column; gap:.35rem; justify-content:center; }
.news__meta{ font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--red-dark); }
.news__title{ font-weight:700; font-size:1.2rem; line-height:1.3; }
.news__row .news__title{ font-size:1rem; }
.news__snippet{ color:var(--grey-text); font-size:.92rem; }
.news__link{ margin-top:.3rem; font-weight:700; font-size:.82rem; text-decoration:none; border-bottom:2px solid var(--ink); align-self:flex-start; padding-bottom:.1rem; }

/* ---------- Homepage: events, sponsors-ish teaser blocks ---------- */
.events{ padding-block:4rem; background:#FAFAFA; border-top:1px solid var(--grey-line); border-bottom:1px solid var(--grey-line); }
.events__month{ font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; color:var(--red-dark); margin:1.5rem 0 .5rem; }
.events__month:first-child{ margin-top:0; }
.events__item{ display:flex; gap:1.25rem; padding:1rem 0; border-bottom:1px solid var(--grey-line); align-items:flex-start; }
.events__day{
  flex:none; width:3rem; height:3rem;
  background:var(--ink); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.1rem;
}
.events__body{ flex:1; }
.events__name{ font-weight:700; font-size:1.05rem; }
.events__edit{ display:inline-flex; gap:.6rem; margin-left:.75rem; font-size:.75rem; font-weight:600; }
.events__edit a{ text-decoration:underline; color:var(--red-dark); }
.events__meta{ color:var(--grey-text); font-size:.88rem; margin-top:.2rem; }
.events__meta .map{ color:var(--red-dark); text-decoration:underline; }
.events__desc{ color:var(--grey-text); font-size:.9rem; margin-top:.4rem; }

.teaser{ padding-block:3.5rem; border-bottom:1px solid var(--grey-line); }
.teaser__card{ background:var(--ink); color:var(--white); padding:2rem 2.25rem; display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between; }
.teaser__text h3{ font-weight:800; font-size:1.3rem; }
.teaser__text p{ color:rgba(255,255,255,.75); margin-top:.35rem; font-size:.95rem; }

.shop-grid{ margin-top:1.5rem; display:grid; gap:1.25rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .shop-grid{ grid-template-columns:repeat(4,1fr); } }
.shop-card{ border:1px solid var(--grey-line); padding:1.25rem; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.shop-card__image{ width:100%; aspect-ratio:1; background:#F5F5F5; display:flex; align-items:center; justify-content:center; color:var(--grey-text); }
.shop-card__image svg{ width:45%; height:45%; }
.shop-card__title{ font-weight:700; font-size:.95rem; }
.shop-card__price{ color:var(--red-dark); font-weight:800; }
.shop-card__buy{ width:100%; }

/* ---------- Homepage: stats ---------- */
.stats{ padding-block:4rem; }
.stats__grid{ display:grid; gap:2.5rem; }
@media (min-width:700px){ .stats__grid{grid-template-columns:1fr 1fr;} }
.stats__block{ border-top:3px solid var(--ink); }
.stats__title{ font-weight:800; font-size:1.1rem; padding:1rem 0; }
.stats__list{ list-style:none; margin:0; padding:0; }
.stats__item{ display:flex; align-items:center; gap:1rem; padding:.8rem 0; border-top:1px solid var(--grey-line); }
.stats__rank{ font-weight:800; color:var(--red-dark); font-size:.92rem; width:1.4rem; }
.stats__name{ font-weight:600; flex:1; }
.stats__value{ font-weight:800; font-size:1.02rem; }

/* ---------- Homepage: join/contact ---------- */
.join{ padding-block:4rem; background:var(--ink); color:var(--white); }
.join__grid{ display:grid; gap:2.5rem; }
@media (min-width:900px){ .join__grid{grid-template-columns:1.2fr .8fr;} }
.join__title{ font-weight:800; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.1; }
.join__title em{ font-style:normal; color:var(--red); }
.join__sub{ margin-top:1rem; color:rgba(255,255,255,.8); font-size:1.02rem; max-width:40ch; }
.join__ctas{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; }
.join__card{ border:1px solid rgba(255,255,255,.25); padding:1.5rem 1.75rem; }
.join__card dt{ font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--white); margin-top:.9rem; }
.join__card dt:first-child{ margin-top:0; }
.join__card dd{ margin:.3rem 0 0; font-size:.98rem; color:rgba(255,255,255,.9); }
.join__card a{ text-decoration:underline; text-underline-offset:.2em; color:inherit; }

/* ---------- .datatable override (replaces the legacy bgcolor=/border= look) ---------- */
/* Same class name/markup the old pages already use (player stats, honour board, etc.) -
   overriding it here means every .datatable table site-wide gets the flat look without
   touching each template's HTML structure. */
.datatable{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
  margin-bottom:1.5rem;
}
.datatable th,.datatable td{
  padding:.55rem 0rem;
  border-bottom:1px solid var(--grey-line);
  text-align:left;
  white-space:nowrap;
}
.datatable th{
  font-weight:700;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--grey-text);
  border-bottom:2px solid var(--ink);
  background:none;
}
.datatable th a{
  color:var(--grey-text);
  text-decoration:none;
}
.datatable th.is-sorted,
.datatable th.is-sorted a{
  color:var(--red-dark);
  background:none;
}
.sort-arrow{ display:inline-block; margin-left:.3em; font-size:.7em; }
.datatable tr:hover td{ background:#FAFAFA; }
.datatable td a{ color:var(--red-dark); text-decoration:underline; text-underline-offset:.15em; }

/* ---------- Filter bars (Fixture/Stats season-team-comp dropdowns) ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:1.25rem;
  align-items:flex-end;
  padding:1.25rem 1.5rem;
  background:#FAFAFA;
  border:1px solid var(--grey-line);
  margin-bottom:2rem;
}
.filters__field{ display:flex; flex-direction:column; gap:.35rem; }
.filters__field label{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--grey-text); }
.filters select{
  font-family:var(--font); font-size:.9rem; font-weight:600; color:var(--ink);
  border:1px solid var(--grey-line); background:var(--white);
  padding:.5rem .6rem; border-radius:0; min-width:9rem;
}
.filters select:focus-visible{ outline:3px solid var(--red); outline-offset:1px; }

/* ---------- Fixture results ---------- */
.fixture-card{ border:1px solid var(--grey-line); margin-bottom:1.5rem; }
.fixture-card__head{
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1.1rem;
  background:#FAFAFA; border-bottom:1px solid var(--grey-line);
  font-size:.85rem; font-weight:700; color:var(--grey-text);
}
.fixture-card__head a{ display:inline-flex; }
.fixture-card__head img{ height:20px; width:auto; }
.fixture-card__title{ text-align:center; padding:.9rem 1rem; font-weight:800; font-size:1.15rem; border-bottom:1px solid var(--grey-line); }
.fixture-card__ground{ text-align:center; padding:.6rem 1rem; color:var(--grey-text); font-size:.88rem; border-bottom:1px solid var(--grey-line); }
.fixture-card__result{ text-align:center; padding:.7rem 1rem; font-size:.92rem; border-bottom:1px solid var(--grey-line); }
.fixture-card__innings{ padding:.75rem 1.1rem; border-bottom:1px solid var(--grey-line); }
.fixture-card__innings:last-child{ border-bottom:none; }
.fixture-card__innings-label{ font-weight:800; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; color:var(--red-dark); margin-bottom:.4rem; }
.fixture-card__score-row{ display:flex; justify-content:space-between; gap:1rem; padding:.2rem 0; font-size:.95rem; }
.fixture-card__score-row b{ font-weight:700; }
.fixture-card__perf{ margin-top:.5rem; font-size:.85rem; color:var(--grey-text); }
.fixture-empty{ text-align:center; padding:4rem 1rem; color:var(--grey-text); font-weight:600; }

.perf-grid{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:900px){ .perf-grid{ grid-template-columns:1fr 1fr; } }

/* ---------- Login widget ---------- */
.login-box{ max-width:340px; }
.login-box__form{ border:1px solid var(--grey-line); padding:1.5rem; display:flex; flex-direction:column; gap:1rem; }
.login-box__title{ font-weight:800; font-size:1rem; text-align:center; margin:0; }
.login-box__field{ display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; font-weight:600; color:var(--grey-text); }
.login-box__field input{ font-family:var(--font); border:1px solid var(--grey-line); padding:.55rem .7rem; border-radius:0; font-size:.95rem; }
.login-box__field input:focus-visible{ outline:3px solid var(--red); outline-offset:1px; }

/* ---------- Generic content pages (Page.php, News/Article, reports, etc.) ---------- */
.page{ padding-block:3rem 4rem; }
.page__head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1.5rem; flex-wrap:wrap;
  margin-bottom:2rem;
  padding-bottom:1rem;
  border-bottom:3px solid var(--ink);
}
.page__title{ font-weight:800; font-size:clamp(1.6rem,3.2vw,2.2rem); letter-spacing:-.01em; }
.page__tools{ display:flex; align-items:center; gap:1rem; font-size:.85rem; font-weight:600; }
.page__tools a{ color:var(--red-dark); text-decoration:underline; text-underline-offset:.2em; }
.page__meta{ margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--grey-line); color:var(--grey-text); font-size:.82rem; }

/* Inline admin edit forms (Page/Article/News/Calendar) - embedded directly in the
   content page instead of linking out to a separate admin/*.php page. */
.edit-form{ display:flex; flex-direction:column; gap:1rem; }
.edit-form__row{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.edit-form__field{ display:flex; flex-direction:column; gap:.35rem; font-size:.85rem; font-weight:600; color:var(--grey-text); }
.edit-form__field input[type=text],.edit-form__field input[type=date]{ font-family:var(--font); border:1px solid var(--grey-line); padding:.55rem .7rem; border-radius:0; font-size:.95rem; font-weight:400; }
.edit-form__field input:focus-visible,.edit-form__field select:focus-visible{ outline:3px solid var(--red); outline-offset:1px; }
.edit-form__actions{ display:flex; align-items:center; gap:1rem; }

/* Admin-authored rich text (website_site_pages.Content, news Article bodies) -
   arbitrary WYSIWYG HTML, so these are loose defaults, not a strict system. */
.prose{ font-size:1rem; line-height:1.65; max-width:70ch; }
.prose p{ margin:0 0 1rem; }
.prose h1,.prose h2,.prose h3,.prose h4{ font-weight:800; margin:1.75rem 0 .75rem; line-height:1.25; }
.prose h1{ font-size:1.6rem; } .prose h2{ font-size:1.35rem; } .prose h3{ font-size:1.15rem; }
.prose ul,.prose ol{ margin:0 0 1rem; padding-left:1.4rem; }
.prose li{ margin-bottom:.35rem; }
.prose a{ color:var(--red-dark); text-decoration:underline; text-underline-offset:.15em; }
.prose img{ max-width:100%; height:auto; margin:1rem 0; }
.prose table{ border-collapse:collapse; margin:1rem 0; }
.prose table td,.prose table th{ border:1px solid var(--grey-line); padding:.5rem .75rem; }

/* Page/Article bodies (edited via the inline WYSIWYG editor) fill the full page
   width instead of the 70ch reading measure - matches .edit-form's width so the
   saved content looks the same width it was edited at. */
.prose--wide{ max-width:none; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.6); border-top:1px solid rgba(255,255,255,.15); padding-block:1.75rem; font-size:.85rem; }
.site-footer__row{ display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between; align-items:center; }
.site-footer__social{ display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; }
.site-footer__social a{ text-decoration:none; opacity:.8; }
.site-footer__social a:hover{ opacity:1; }

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }