/* ============================================================
   SOCIETY OF MARTIAL ARTS
   Collegiate-heraldic identity: ink, oxblood crimson, antique
   gold, parchment. Serif typography (Marcellus / Cormorant /
   EB Garamond). Built for GitHub Pages (static).
   ============================================================ */

:root{
  --ink:        #16110F;
  --ink-2:      #1F1916;
  --ink-soft:   #2A211C;
  --crimson:    #9A1426;
  --crimson-deep:#6E0E1B;
  --gold:       #B08743;
  --gold-light: #C9A45C;
  --parchment:  #F4EEE2;
  --parchment-2:#EAE0CD;
  --paper-line: #DDCFB6;
  --body:       #2C2521;
  --muted:      #6A5D52;
  --muted-light:#B9AC9B;

  --maxw: 1180px;
  --narrow: 760px;

  --serif-display: "Cormorant Garamond", Georgia, serif;
  --serif-roman:   "Marcellus", "Cormorant Garamond", serif;
  --serif-body:    "EB Garamond", Georgia, serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--parchment);
  color:var(--body);
  font-family:var(--serif-body);
  font-size:clamp(1.02rem,.55vw + .9rem,1.18rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:normal; }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.sr-only,.skip-link{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; top:12px; left:12px; width:auto; height:auto; clip:auto;
  background:var(--ink); color:var(--parchment); padding:.6rem 1rem;
  z-index:200; border-radius:2px; font-family:var(--serif-roman);
  letter-spacing:.04em;
}

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.wrap-narrow{ max-width:var(--narrow); }
.center{ text-align:center; }

.section{ padding:clamp(4.5rem,9vw,8rem) 0; position:relative; }
.section-tight{ padding:clamp(3.5rem,6vw,5.5rem) 0; }
.section-parchment{ background:var(--parchment); color:var(--body); }
.section-ink{ background:var(--ink); color:var(--parchment); }
.section-ink::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.5;
}

/* ---------- shared type devices ---------- */
.eyebrow{
  font-family:var(--serif-roman);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:.74rem;
  color:var(--crimson);
  margin:0 0 1.3rem;
  position:relative;
  padding-left:2.6rem;
}
.eyebrow::before{
  content:""; position:absolute; left:0; top:.52em;
  width:2rem; height:1px; background:var(--gold);
}
.eyebrow-light{ color:var(--gold-light); }
.eyebrow-light::before{ background:var(--gold); }

.section-title{
  font-family:var(--serif-display);
  font-weight:600;
  font-size:clamp(2rem,3.6vw,3.15rem);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--ink);
  max-width:18ch;
}
.section-title-light{ color:var(--parchment); }

.section-intro{
  font-family:var(--serif-display);
  font-size:clamp(1.25rem,1.6vw,1.55rem);
  line-height:1.5;
  color:var(--muted);
  max-width:46ch;
  margin:1.6rem 0 0;
  font-style:italic;
}
.section-intro-light{ color:var(--muted-light); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--serif-roman);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  text-decoration:none;
  padding:1.05em 1.9em;
  border:1px solid transparent;
  transition:all .35s var(--ease);
}
.btn-solid{
  background:var(--crimson);
  color:var(--parchment);
  border-color:var(--crimson);
}
.btn-solid:hover{ background:var(--crimson-deep); border-color:var(--crimson-deep); }
.btn-ghost{
  border-color:rgba(244,238,226,.5);
  color:var(--parchment);
}
.btn-ghost:hover{ border-color:var(--gold-light); color:var(--gold-light); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header-inner{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(.7rem,1.4vw,1.1rem) clamp(1.25rem,4vw,3rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.site-header.scrolled{
  background:rgba(18,14,12,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom-color:rgba(176,135,67,.35);
}

.wordmark{
  display:flex; align-items:center; gap:.7rem; text-decoration:none;
  color:var(--parchment);
}
.wordmark-crest{ display:flex; flex-shrink:0; }
.wordmark-crest img{ height:48px; width:auto; display:block; }
.wordmark-text{ display:flex; flex-direction:column; line-height:1; }
.wordmark-name{
  font-family:var(--serif-roman);
  font-size:1.02rem; letter-spacing:.05em; color:var(--parchment); white-space:nowrap;
}
.wordmark-sub{
  font-family:var(--serif-body);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-light); margin-top:.32rem; white-space:nowrap;
}

.nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:clamp(.7rem,1.15vw,1.3rem);
}
.nav-list a{
  font-family:var(--serif-roman);
  font-size:.8rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--parchment); text-decoration:none;
  padding:.4em 0; position:relative; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav-list a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--gold-light); transition:right .35s var(--ease);
}
.nav-list a:hover{ color:var(--gold-light); }
.nav-list a:hover::after{ right:0; }
.nav-cta{
  border:1px solid var(--gold); color:var(--gold-light)!important;
  padding:.55em 1.1em!important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ background:var(--crimson); border-color:var(--crimson); color:var(--parchment)!important; }

.nav-toggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  color:var(--parchment);
  overflow:hidden;
  padding:7rem 0 6rem;
}
.hero-media{
  position:absolute; inset:0;
  background:url("../assets/hero.jpg") center 38% / cover no-repeat;
  transform:scale(1.04);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,8,7,.84) 0%, rgba(12,9,8,.66) 42%, rgba(10,8,7,.88) 100%),
    radial-gradient(72% 62% at 50% 44%, rgba(0,0,0,.5), transparent 72%);
}
.hero-content{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3rem);
}
.hero-content-center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero-content-center .eyebrow{ padding-left:0; }
.hero-content-center .eyebrow::before{ display:none; }
.hero-logo{
  width:min(440px, 80vw); height:auto; display:block; margin:.4rem auto 0;
  filter:drop-shadow(0 6px 34px rgba(0,0,0,.55));
}
.hero-content-center .hero-motto{ margin-top:.4rem; }
.hero-content-center .hero-motto span::after{ left:50%; transform:translateX(-50%); }
.hero-content-center .hero-lede{ margin-left:auto; margin-right:auto; }
.hero-content-center .hero-actions{ justify-content:center; }
.hero .eyebrow{ color:var(--gold-light); }
.hero .eyebrow::before{ background:var(--gold); }
.hero-title{
  font-family:var(--serif-display);
  font-weight:600;
  font-size:clamp(3.2rem,9vw,6.6rem);
  line-height:.96;
  letter-spacing:-.015em;
  color:var(--parchment);
  text-shadow:0 2px 40px rgba(0,0,0,.5);
  margin:0;
}
.hero-motto{
  margin:1.5rem 0 0; padding:0;
  font-family:var(--serif-display); font-style:italic;
  font-size:clamp(1.4rem,2.6vw,2rem); color:var(--gold-light);
}
.hero-motto span{ position:relative; padding-bottom:.5rem; }
.hero-motto span::after{
  content:""; position:absolute; left:0; bottom:0; width:3.5rem; height:1px;
  background:var(--gold);
}
.hero-lede{
  margin:2rem 0 0; max-width:50ch;
  font-size:clamp(1.1rem,1.4vw,1.32rem); line-height:1.6;
  color:rgba(244,238,226,.92);
}
.hero-actions{ margin-top:2.6rem; display:flex; gap:1rem; flex-wrap:wrap; }

.hero-foundline{
  position:absolute; z-index:2; bottom:0; left:0; right:0;
  border-top:1px solid rgba(176,135,67,.4);
  background:rgba(10,8,7,.4);
}
.hero-foundline span{
  display:block; max-width:var(--maxw); margin:0 auto;
  padding:1rem clamp(1.25rem,4vw,3rem);
  font-family:var(--serif-roman);
  font-size:.76rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-light);
}

/* ============================================================
   THE SOCIETY / WELCOME
   ============================================================ */
.lede-prose{ margin-top:2rem; }
.lede-prose p:first-child{
  font-family:var(--serif-display);
  font-size:clamp(1.3rem,1.8vw,1.6rem);
  line-height:1.5; color:var(--ink); font-style:italic;
}
.lede-prose p{ max-width:62ch; }

/* ============================================================
   ETHOS
   ============================================================ */
.ethos-feature{
  margin:3rem 0 0; padding:2.4rem 0 0;
  border-top:1px solid rgba(176,135,67,.3);
  max-width:60ch;
}
.ethos-quote{
  font-family:var(--serif-display);
  font-size:clamp(1.4rem,2.2vw,1.9rem);
  line-height:1.45; color:var(--parchment); font-style:italic;
}
.ethos-quote-cite{
  font-size:.92rem; letter-spacing:.02em; color:var(--gold-light);
  margin-top:1.2rem;
}
.ethos-grid{
  margin-top:3.4rem;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.4rem,2.5vw,2.4rem);
}
.ethos-card{
  border:1px solid rgba(176,135,67,.28);
  padding:clamp(1.6rem,2.4vw,2.2rem);
  background:rgba(244,238,226,.025);
}
.ethos-card-wide{ grid-column:1 / -1; }
.ethos-card-title{
  font-family:var(--serif-roman);
  font-size:1.32rem; letter-spacing:.04em; color:var(--gold-light);
  margin-bottom:1rem;
}
.ethos-card p{ color:rgba(244,238,226,.85); }
.ethos-objectives{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:2.4rem;
}
.ethos-objectives li{
  break-inside:avoid; margin-bottom:.9rem; padding-left:1.4rem;
  position:relative; color:rgba(244,238,226,.85);
}
.ethos-objectives li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.5rem; height:.5rem; transform:rotate(45deg);
  border:1px solid var(--gold); 
}

/* ============================================================
   HISTORY TIMELINE  (signature)
   ============================================================ */
.timeline{
  list-style:none; margin:3.4rem 0 0; padding:0;
  position:relative;
}
.timeline::before{
  content:""; position:absolute; top:.4rem; bottom:.4rem;
  left:7.5rem; width:1px;
  background:linear-gradient(var(--gold),var(--paper-line));
}
.timeline-item{
  position:relative;
  display:grid; grid-template-columns:7.5rem 1fr;
  gap:0 2.4rem;
  padding:0 0 3rem;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-year{
  font-family:var(--serif-roman);
  font-size:1.18rem; letter-spacing:.04em; color:var(--crimson);
  text-align:right; padding-top:.1rem; white-space:nowrap;
}
.timeline-year-to{ color:var(--muted); }
.timeline-body{ position:relative; padding-left:2.4rem; }
.timeline-body::before{
  content:""; position:absolute; left:-.5rem; top:.55rem;
  width:.72rem; height:.72rem; transform:translateX(-50%) rotate(45deg);
  background:var(--parchment); border:1.5px solid var(--crimson);
}
.timeline-body h3{
  font-family:var(--serif-display); font-weight:600;
  font-size:1.5rem; color:var(--ink); margin-bottom:.5rem; line-height:1.2;
}
.timeline-body p{ max-width:60ch; color:var(--ink-soft); }

.honour-roll{
  margin:1.5rem 0 .4rem;
  border-left:2px solid var(--gold);
  padding:.3rem 0 .3rem 1.4rem;
  background:linear-gradient(90deg, rgba(176,135,67,.06), transparent 70%);
}
.honour-roll-label{
  font-family:var(--serif-roman);
  text-transform:uppercase; letter-spacing:.2em; font-size:.72rem;
  color:var(--crimson); margin-bottom:.7rem;
}
.honour-roll ul{
  list-style:none; margin:0; padding:0;
  columns:2; column-gap:2rem;
}
.honour-roll li{
  break-inside:avoid; margin-bottom:.42rem;
  font-size:.98rem; line-height:1.45; color:var(--ink-soft);
}
.honour-roll-note{
  font-size:.92rem; font-style:italic; color:var(--muted);
  margin-top:1.1rem; max-width:56ch;
}
.honour-roll-note a{ color:var(--crimson); text-underline-offset:3px; }

/* ============================================================
   MEMBERSHIP
   ============================================================ */
.progression{
  margin:3rem 0 0;
  display:flex; flex-wrap:wrap; align-items:stretch; gap:.7rem;
}
.progression-step{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  border:1px solid rgba(176,135,67,.4);
  padding:1.1rem .8rem;
  font-family:var(--serif-roman); font-size:1.04rem; letter-spacing:.03em;
  color:var(--parchment);
}
.progression-step small{
  display:block; margin-top:.4rem;
  font-family:var(--serif-body); font-style:italic;
  letter-spacing:.02em; font-size:.8rem; color:var(--gold-light);
}
.progression-step-peak{
  background:var(--crimson); border-color:var(--crimson);
}
.progression-step-peak small{ color:rgba(244,238,226,.85); }
.progression-arrow{
  display:flex; align-items:center; color:var(--gold);
  font-size:1.2rem;
}
.progression-note{
  margin-top:1.6rem; max-width:62ch; color:rgba(244,238,226,.82);
  font-size:1rem;
}
.progression-note strong{ color:var(--gold-light); font-weight:normal; }

.grades{
  margin-top:3.4rem;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:rgba(176,135,67,.28);
  border:1px solid rgba(176,135,67,.28);
}
.grade{
  background:var(--ink);
  padding:clamp(1.6rem,2.4vw,2.3rem);
}
.grade-title{
  font-family:var(--serif-display); font-weight:600;
  font-size:1.6rem; color:var(--parchment); margin-bottom:.9rem;
  line-height:1.15;
}
.grade-post{
  display:inline-block;
  font-family:var(--serif-body); font-style:italic;
  font-size:1rem; color:var(--gold-light); letter-spacing:.02em;
}
.grade p{ color:rgba(244,238,226,.82); font-size:1rem; }
.grade-routes{
  margin:.6rem 0 0; padding-left:1.3rem; color:rgba(244,238,226,.82);
  font-size:1rem;
}
.grade-routes li{ margin-bottom:.7rem; }
.grade-authority{ background:var(--ink-2); grid-column:1 / -1; }
.grade-authority .grade-title{ color:var(--gold-light); }
.grade-authority strong{ color:var(--parchment); font-weight:normal; }

/* ============================================================
   PLACEHOLDER CARDS (conferences / regulations)
   ============================================================ */
.placeholder-card{
  margin-top:2.4rem;
  border:1px solid var(--paper-line);
  border-left:3px solid var(--crimson);
  padding:clamp(1.8rem,3vw,2.6rem);
  background:rgba(176,135,67,.05);
}
.placeholder-card p{ max-width:62ch; color:var(--ink-soft); }
.placeholder-card-dark{
  border-color:rgba(176,135,67,.3);
  border-left-color:var(--gold);
  background:rgba(244,238,226,.03);
}
.placeholder-card-dark p{ color:rgba(244,238,226,.82); }
.placeholder-status{
  font-family:var(--serif-roman);
  text-transform:uppercase; letter-spacing:.2em; font-size:.78rem;
  color:var(--crimson); margin-top:1.4rem;
}
.placeholder-status-light{ color:var(--gold-light); }

/* ============================================================
   OFFICERS
   ============================================================ */
.officers{
  margin:2.8rem 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--paper-line);
}
.officer{
  display:flex; flex-direction:column; gap:.4rem;
  padding:1.5rem 0; margin:0;
  border-bottom:1px solid var(--paper-line);
}
.officer:nth-child(odd){ padding-right:2rem; }
.officer:nth-child(even){ padding-left:2rem; border-left:1px solid var(--paper-line); }
.officer dt{
  font-family:var(--serif-roman);
  text-transform:uppercase; letter-spacing:.18em; font-size:.72rem;
  color:var(--crimson);
}
.officer dd{
  margin:0; font-family:var(--serif-display); font-size:1.45rem;
  color:var(--ink); line-height:1.2;
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-feature{
  margin:3.2rem 0 0;
  display:grid; grid-template-columns:1.15fr .85fr; gap:0;
  border:1px solid rgba(176,135,67,.3);
}
.gallery-feature-img{ overflow:hidden; background:#0b0908; }
.gallery-feature-img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(8%) contrast(1.02);
  transition:transform 1.2s var(--ease);
}
.gallery-feature:hover .gallery-feature-img img{ transform:scale(1.04); }
.gallery-feature figcaption{
  padding:clamp(1.8rem,3vw,2.8rem);
  display:flex; flex-direction:column; justify-content:center;
  background:var(--ink-2);
}
.gallery-caption-title{
  font-family:var(--serif-display); font-style:italic; font-weight:600;
  font-size:1.7rem; color:var(--gold-light); margin-bottom:.8rem;
}
.gallery-feature figcaption p{ color:rgba(244,238,226,.85); font-size:1rem; }
.gallery-caption-names{ color:rgba(244,238,226,.7)!important; font-size:.92rem!important; }
.gallery-caption-missing{
  margin-top:1rem; font-style:italic;
  color:var(--muted-light)!important; font-size:.88rem!important;
}
.gallery-more{
  margin-top:2.2rem; font-style:italic; color:var(--muted-light);
  text-align:center; font-size:.98rem;
}

/* ============================================================
   CONTACT / CREST SECTION
   ============================================================ */
.section-crest{
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(154,20,38,.22), transparent 60%),
    var(--ink);
  position:relative; text-align:center;
}
.section-crest .eyebrow{ display:inline-block; padding-left:0; }
.section-crest .eyebrow::before{ display:none; }
.section-crest .section-title{ margin:0 auto; max-width:22ch; }
.contact-lede{
  margin:1.8rem auto 0; max-width:54ch;
  font-size:1.12rem; color:rgba(244,238,226,.86);
}
.contact-actions{ margin-top:2.4rem; }
.contact-note{
  margin-top:1.6rem; font-size:.86rem; font-style:italic;
  color:var(--muted-light); letter-spacing:.02em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:#0E0B0A; color:var(--muted-light);
  padding:clamp(3rem,5vw,4.5rem) 0;
  border-top:1px solid rgba(176,135,67,.3);
  text-align:center;
}
.footer-brand{ display:flex; flex-direction:column; align-items:center; }
.footer-crest{ display:block; margin-bottom:1.1rem; }
.footer-crest img{ height:60px; width:auto; display:block; margin:0 auto; }
.footer-name{
  font-family:var(--serif-roman); font-size:1.3rem; letter-spacing:.06em;
  color:var(--parchment); margin:0;
}
.footer-motto{
  font-family:var(--serif-display); font-style:italic;
  color:var(--gold-light); font-size:1.05rem; margin:.4rem 0 0;
}
.footer-charity{
  margin:1.8rem 0 0;
  font-family:var(--serif-roman);
  text-transform:uppercase; letter-spacing:.2em; font-size:.72rem;
  color:var(--muted-light);
}
.footer-copy{ margin:.8rem 0 0; font-size:.84rem; color:var(--muted); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav-toggle{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; background:none; border:1px solid rgba(176,135,67,.5);
    cursor:pointer; padding:0; position:relative; z-index:120;
  }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after{
    content:""; display:block; width:20px; height:1.5px; background:var(--gold-light);
    transition:transform .35s var(--ease), opacity .25s var(--ease);
  }
  .nav-toggle-bar{ position:relative; }
  .nav-toggle-bar::before{ position:absolute; top:-6px; left:0; }
  .nav-toggle-bar::after{ position:absolute; top:6px; left:0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar{ background:transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::before{ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar::after{ transform:translateY(-6px) rotate(-45deg); }

  .nav-list{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:2rem clamp(1.5rem,6vw,3rem);
    background:rgba(14,11,10,.98);
    border-left:1px solid rgba(176,135,67,.35);
    transform:translateX(100%); transition:transform .4s var(--ease);
  }
  .nav-list.open{ transform:none; }
  .nav-list a{ font-size:1.05rem; }
  .site-header{ background:rgba(18,14,12,.92); backdrop-filter:saturate(140%) blur(8px); border-bottom-color:rgba(176,135,67,.25); }

  .ethos-grid{ grid-template-columns:1fr; }
  .ethos-objectives{ columns:1; }
  .grades{ grid-template-columns:1fr; }
  .grade-authority{ grid-column:auto; }
  .gallery-feature{ grid-template-columns:1fr; }
}

@media (max-width:620px){
  .hero{ min-height:92svh; }
  .hero-media{ background-position:center 30%; }
  .timeline::before{ left:0; }
  .timeline-item{ grid-template-columns:1fr; gap:.3rem 0; }
  .timeline-year{ text-align:left; padding-left:1.6rem; }
  .timeline-body{ padding-left:1.6rem; }
  .timeline-body::before{ left:0; }
  .honour-roll ul{ columns:1; }
  .progression{ flex-direction:column; }
  .progression-arrow{ justify-content:center; transform:rotate(90deg); }
  .officers{ grid-template-columns:1fr; }
  .officer:nth-child(odd),.officer:nth-child(even){ padding:1.3rem 0; border-left:0; }
  .hero-actions .btn{ flex:1 1 auto; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto!important; }
  .reveal{ opacity:1!important; transform:none!important; transition:none!important; }
  .hero-media{ transform:none; }
  .gallery-feature-img img{ transition:none; }
}