:root{
  --black: #08090d;
  --ink: #10121a;
  --panel: #1a1e2b;
  --line: #2b3040;
  --blue-deep: #262c40;
  --blue: #4b5570;      /* the blue sampled from the reference photo */
  --blue-soft: #6b7594;
  --blue-light: #9aa3c2;
  --pale: #cdd2e3;
  --ivory: #f4f3ef;
  --white: #ffffff;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:'manifold-cf', Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

h1,h2,h3,h4{
  font-family:'aquavit', Georgia, serif;
  font-weight:400;
  letter-spacing:.02em;
  margin:0;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* Deter casual saving of images/videos. The members' media gallery
   (media.php, flagged via [data-no-protect]) is excluded on purpose. */
img, video{ -webkit-user-drag:none; }
video::-webkit-media-controls-download-button{ display:none !important; }
[data-no-protect] img, [data-no-protect] video{ -webkit-user-drag:auto; }
[data-no-protect] video::-webkit-media-controls-download-button{ display:inline-flex !important; }

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}

/* -------- placeholder blocks -------- */
.ph{
  background:
    repeating-linear-gradient(45deg, #171a24, #171a24 10px, #1e2230 10px, #1e2230 20px);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue-light);
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-align:center;
  padding:.5rem;
}

/* -------- nav -------- */
.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem clamp(1.25rem, 4vw, 3rem);
  background:linear-gradient(to bottom, rgba(8,9,13,.9), transparent);
  transition:background .3s ease, padding .3s ease;
}
.site-nav.solid{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding-top:.75rem;
  padding-bottom:.75rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family:'aquavit', serif;
  font-weight:300;
  font-size:1.3rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.brand .mark{ width:30px; height:34px; flex-shrink:0; object-fit:contain; }

.nav-links{
  display:flex;
  gap:2.1rem;
  list-style:none;
  margin:0; padding:0;
}
.nav-links a{
  font-size:.76rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ivory);
  padding-bottom:.3rem;
  border-bottom:1px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{
  border-color:var(--blue-light);
  color:var(--blue-light);
}

.lang-toggle{
  font-family:'manifold-cf', sans-serif;
  font-size:.76rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ivory);
  background:none;
  border:none;
  padding:0 0 .3rem;
  border-bottom:1px solid transparent;
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.lang-toggle:hover{
  border-color:var(--blue-light);
  color:var(--blue-light);
}

.burger{
  display:none;
  width:26px; height:20px;
  position:relative;
  background:none; border:none; cursor:pointer;
  padding:0;
}
.burger span{
  position:absolute; left:0; right:0; height:1px;
  background:var(--ivory);
  transition:transform .25s ease, opacity .25s ease;
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:9px; }
.burger span:nth-child(3){ top:18px; }
.burger.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

@media (max-width:820px), (max-height:500px){
  .burger{ display:block; }
  .nav-links{
    position:fixed;
    top:0; right:0;
    height:100svh;
    width:min(78vw, 320px);
    background:var(--panel);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.8rem;
    padding:2rem 2.2rem;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s ease;
    border-left:1px solid var(--line);
  }
  .nav-links.open{ transform:translateX(0); }
}

/* -------- hero / dark gradient banners -------- */
.banner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:8rem 1.5rem 4rem;
  min-height:48svh;
  background:
    linear-gradient(to bottom, rgba(75,85,112,.55), rgba(8,9,13,.96) 78%),
    repeating-linear-gradient(135deg, #1c2130, #1c2130 14px, #222738 14px, #222738 28px);
}
.banner.tall{ min-height:100svh; padding-top:7rem; }
.banner{ overflow:hidden; isolation:isolate; }
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.hero-overlay{
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(to bottom, rgba(8,9,13,.4), rgba(8,9,13,.88) 85%);
}
.banner .mark-lg{ position:relative; z-index:2; }

.andalusier-img{
  width:100%;
  max-width:420px;
  margin:0 auto 1.2rem;
  transition:transform .4s ease, filter .4s ease;
}
.andalusier-img:hover{ transform:scale(1.04); filter:brightness(1.08); }

/* -------- portrait image overlapping the hero banner below it -------- */
.portrait-overlap{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  margin-top:-5rem;
}
.portrait-overlap img{
  width:220px;
  max-width:55%;
  transition:transform .4s ease, filter .4s ease;
}
.portrait-overlap img:hover{ transform:scale(1.05); filter:brightness(1.08); }
@media (max-width:600px){
  .portrait-overlap{ margin-top:-3rem; }
  .portrait-overlap img{ width:160px; }
}
.banner .mark-lg{ width:min(340px, 80vw); height:auto; margin-bottom:1.6rem; object-fit:contain; }
.banner h1{
  position:relative; z-index:2;
  font-size:clamp(2rem, 5vw, 3.4rem);
  letter-spacing:.05em;
  margin-bottom:1rem;
  text-transform:uppercase;
}
.banner p{
  position:relative; z-index:2;
  max-width:560px;
  color:var(--pale);
  font-size:1rem;
  line-height:1.7;
  margin:0 auto;
}
.banner .note{
  margin-top:1.6rem;
  font-size:.78rem;
  color:var(--blue-light);
}
.welcome{ text-align:center; }
.welcome h1{
  font-size:clamp(2rem, 5vw, 3.4rem);
  letter-spacing:.05em;
  margin-bottom:1rem;
}
.welcome p{
  max-width:560px;
  color:var(--pale);
  font-size:1rem;
  line-height:1.7;
  margin:0 auto;
}
.welcome .note{
  margin-top:1.6rem;
  font-size:.78rem;
  color:var(--blue-light);
}
.banner .eyebrow{
  font-size:.78rem;
  letter-spacing:.2em;
  color:var(--blue-light);
  margin-bottom:.8rem;
}

/* -------- section heading -------- */
.section-head{
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(1.5rem,4vw,2.5rem);
  border-top:1px solid var(--line);
}
.section-head h2{
  font-size:clamp(1.6rem, 3.4vw, 2.4rem);
  max-width:16ch;
  line-height:1.15;
}

/* -------- hero image + overlay caption -------- */
.hero-image{ position:relative; }
.hero-image .ph{ aspect-ratio:16/3; }
.hero-image-bg{
  aspect-ratio:16/3;
  background-image:url('images/more-than-dressageclub.jpg');
  background-size:cover;
  background-position:center;
}
.hero-image-bg.parallax{ background-attachment:fixed; }
@supports (-webkit-touch-callout:none){
  /* iOS Safari ignores background-attachment:fixed - fall back to a plain scrolling background */
  .hero-image-bg.parallax{ background-attachment:scroll; }
}
.image-caption{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.8rem;
  padding:1rem;
  text-align:center;
}
.image-caption .mark{
  width:18px; height:21px; flex-shrink:0; object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.7));
}
.image-caption h2{
  font-family:'manifold-cf', sans-serif;
  font-size:clamp(.72rem, 1.3vw, .88rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.75);
}
@media (max-width:600px){
  .hero-image .ph, .hero-image-bg{ aspect-ratio:auto; min-height:110px; }
  .image-caption{ flex-wrap:wrap; padding:.75rem; gap:.4rem; }
  .image-caption .mark{ width:16px; height:19px; }
  .image-caption h2{ font-size:.68rem; letter-spacing:.16em; }
}
/* background-attachment:fixed on a short, non-viewport-height element can jitter during
   momentum scrolling on touch devices - disable the fixed trick below the desktop breakpoint */
@media (max-width:900px), (hover:none){
  .hero-image-bg.parallax{ background-attachment:scroll; }
}

/* -------- triptych (card grid) -------- */
.triptych{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem;
  perspective:1200px;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.tri-item{
  display:block;
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.tri-item:hover{
  transform:translateY(-6px) rotateX(3deg) rotateY(-3deg);
  box-shadow:0 22px 40px rgba(0,0,0,.5);
  border-color:var(--blue-soft);
}
.tri-img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.tri-img-inner{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:brightness(.8);
  transition:transform .5s ease, filter .5s ease;
}
.tri-item:hover .tri-img-inner{ transform:scale(1.06); filter:brightness(.65); }
.tri-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,9,13,.9), rgba(8,9,13,0) 60%);
}
.tri-title{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.2rem 1.2rem 1.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.tri-title span{
  font-family:'aquavit', serif; font-size:1.15rem; letter-spacing:.1em;
  color:var(--ivory); text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.tri-title i{ font-style:normal; color:var(--blue-light); font-size:1.1rem; transition:transform .3s ease; }
.tri-item:hover .tri-title i{ transform:translateX(4px); }
@media (max-width:820px){ .triptych{ grid-template-columns:1fr; } }
@media (max-width:600px){
  .triptych{ gap:1.1rem; }
  .tri-item{ margin:0 1rem; }
}

/* -------- generic content sections -------- */
.content{ padding:clamp(2rem,5vw,3rem) 0; }
.content + .content{ border-top:1px solid var(--line); }
.lede{
  color:var(--pale);
  line-height:1.85;
  max-width:62ch;
  font-size:1.02rem;
}
.lede + .lede{ margin-top:1.1rem; }

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,3.5rem);
  align-items:center;
}
@media (max-width:760px){ .two-col{ grid-template-columns:1fr; } }

.kicker{
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--blue-light);
  margin-bottom:.6rem;
  display:block;
}

/* profile block (About Us owner bio) */
.profile{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.profile .ph{ aspect-ratio:3/4; }
.profile-portrait-frame{ overflow:hidden; }
.profile-portrait{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  display:block;
  filter:grayscale(25%);
  transition:transform .5s ease, filter .5s ease;
}
.profile-portrait-frame:hover .profile-portrait{
  transform:scale(1.08);
  filter:grayscale(0%);
}
@media (max-width:700px){
  .profile{ grid-template-columns:1fr; }
  .profile .ph{ max-width:220px; }
  .profile-portrait-frame{ max-width:160px; margin:0 auto; border-radius:50%; }
  .profile-portrait{ aspect-ratio:1/1; }
}
.profile h3{ font-size:1.7rem; letter-spacing:.03em; }
.profile .role{ color:var(--blue-light); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; margin:.3rem 0 1.2rem; }

/* schedule list (card look) */
.schedule{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; perspective:1200px; }
.schedule li{
  background:var(--ink);
  border:1px solid var(--line);
  padding:1.4rem 1.6rem;
  display:grid;
  grid-template-columns:2.4rem 1fr;
  gap:1.2rem;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.schedule li:hover{
  transform:translateY(-6px) rotateX(3deg) rotateY(-3deg);
  box-shadow:0 22px 40px rgba(0,0,0,.5);
  border-color:var(--blue-soft);
}
.schedule .num{ font-family:'aquavit', serif; font-size:1.6rem; color:var(--blue-light); }
.schedule .day{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory); margin-bottom:.35rem; }
.schedule .desc{ color:var(--pale); font-size:.94rem; line-height:1.6; }

/* rank ladder */
.ranks{ list-style:none; margin:0; padding:0; counter-reset:rank; }
.ranks li{
  counter-increment:rank;
  position:relative;
  padding:1.1rem 0 1.1rem 3rem;
  border-top:1px solid var(--line);
}
.ranks li:last-child{ border-bottom:1px solid var(--line); }
.ranks li::before{
  content:counter(rank);
  position:absolute; left:0; top:1.1rem;
  width:1.9rem; height:1.9rem;
  border:1px solid var(--blue-soft);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'aquavit', serif;
  color:var(--blue-light);
  font-size:.95rem;
}
.ranks h4{ font-size:1.15rem; letter-spacing:.04em; margin-bottom:.25rem; }
.ranks p{ margin:0; color:var(--pale); font-size:.92rem; line-height:1.6; }

/* tag list (dresscode items) */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.tag-cloud span{
  border:1px solid var(--line);
  padding:.5rem 1rem;
  font-size:.82rem;
  color:var(--pale);
  letter-spacing:.02em;
}

.credit-line{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue-light);
  margin-top:.8rem;
}

.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.checklist li{
  padding-left:1.4rem;
  position:relative;
  color:var(--pale);
  font-size:.95rem;
  line-height:1.6;
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:6px; height:6px;
  background:var(--blue-light);
}

.requirements{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.requirements li{ background:var(--ink); padding:1.1rem 1.4rem; color:var(--pale); font-size:.95rem; line-height:1.6; }

.callout{
  border:1px solid var(--blue-deep);
  background:var(--panel);
  padding:1.4rem 1.6rem;
  margin:1.6rem 0;
}
.callout .kicker{ margin-bottom:.5rem; }
.callout p{ margin:0; color:var(--pale); line-height:1.7; font-size:.95rem; }
.callout-card{
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.callout-card:hover{
  transform:translateY(-6px) rotateX(3deg) rotateY(-3deg);
  box-shadow:0 22px 40px rgba(0,0,0,.5);
  border-color:var(--blue-soft);
}

/* -------- card hover effect, simulated on scroll for touch devices without real hover -------- */
@media (hover:none){
  .tri-item.in-view,
  .schedule li.in-view,
  .callout-card.in-view{
    transform:translateY(-6px) rotateX(3deg) rotateY(-3deg);
    box-shadow:0 22px 40px rgba(0,0,0,.5);
    border-color:var(--blue-soft);
  }
  .tri-item.in-view .tri-img-inner{ transform:scale(1.06); filter:brightness(.65); }
  .tri-item.in-view .tri-title i{ transform:translateX(4px); }
}

/* -------- CTA -------- */
.cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(5rem,12vw,8rem) 1.5rem;
  text-align:center;
  background:
    linear-gradient(to bottom, rgba(75,85,112,.5), rgba(8,9,13,.97) 80%),
    repeating-linear-gradient(45deg, #1a1e2a, #1a1e2a 16px, #1f2433 16px, #1f2433 32px);
}
.cta h2{ position:relative; z-index:2; font-size:clamp(1.9rem, 4.5vw, 2.8rem); letter-spacing:.04em; margin-bottom:1.2rem; }
.cta p{ position:relative; z-index:2; color:var(--pale); max-width:440px; margin:0 auto 2rem; line-height:1.7; }
.cta .btn{ position:relative; z-index:2; }
.btn{
  display:inline-block;
  padding:.9rem 2.4rem;
  border:1px solid var(--blue-light);
  color:var(--blue-light);
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.btn:hover{ background:var(--blue-light); color:var(--black); }

/* -------- member gate -------- */
.gate{
  min-height:70svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8rem 1.5rem 4rem;
  text-align:center;
}
.gate-card{
  max-width:360px;
  width:100%;
}
.gate-card h2{
  font-size:clamp(1.7rem, 4vw, 2.2rem);
  margin:.4rem 0 .9rem;
}
.gate-form{
  display:flex;
  flex-direction:column;
  gap:.9rem;
  margin-top:1.4rem;
}
.gate-form input{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--ivory);
  padding:.85rem 1rem;
  font-family:'manifold-cf', sans-serif;
  font-size:.92rem;
  letter-spacing:.02em;
}
.gate-form input:focus{
  outline:none;
  border-color:var(--blue-light);
}
.gate-form button{
  background:none;
  cursor:pointer;
  font-family:'manifold-cf', sans-serif;
}
.gate-error{
  color:#c98a8a;
  font-size:.82rem;
  margin-top:1rem;
}
.member-content{ animation:fadeIn .4s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
[hidden]{ display:none !important; }
/* -------- hub cards (member area landing) -------- */
.hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.hub-card{ background:var(--ink); padding:1.6rem; display:block; transition:background .2s ease; }
.hub-card h3{ font-size:1.3rem; margin-bottom:.4rem; }
.hub-card p{ color:var(--pale); font-size:.88rem; margin:0; line-height:1.5; }
.hub-card:hover{ background:var(--panel); }

/* -------- form fields (admin pages) -------- */
.field-grid{ display:grid; gap:1rem; margin-bottom:1.2rem; }
.field-grid.cols-2{ grid-template-columns:1fr 1fr; }
.field-grid.cols-4{ grid-template-columns:2fr 1fr 1.4fr 1fr; }
.field-grid.cols-5{ grid-template-columns:1.6fr 1.6fr 1fr 1.4fr 1fr; }
@media (max-width:700px){
  .field-grid.cols-2, .field-grid.cols-4, .field-grid.cols-5{ grid-template-columns:1fr; }
}
.field label{
  display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue-light); margin-bottom:.4rem;
}
.field input, .field select{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ivory);
  padding:.75rem .9rem; font-family:'manifold-cf', sans-serif; font-size:.92rem;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--blue-light); }
.field input[type="date"]{ color-scheme:dark; }

/* -------- tag search (attendance) -------- */
.tag-search{ position:relative; }
.tag-search-input{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ivory);
  padding:.75rem .9rem; font-family:'manifold-cf', sans-serif; font-size:.92rem;
}
.tag-search-input:focus{ outline:none; border-color:var(--blue-light); }
.tag-suggestions{
  position:absolute; top:calc(100% + .3rem); left:0; right:0; z-index:20;
  background:var(--panel); border:1px solid var(--line); max-height:220px; overflow-y:auto;
}
.tag-suggestion-item{
  padding:.6rem .9rem; font-size:.88rem; color:var(--pale); cursor:pointer;
}
.tag-suggestion-item:hover{ background:var(--ink); color:var(--ivory); }
.tag-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem; }
.tag-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:.35rem .5rem .35rem .8rem; font-size:.82rem; color:var(--pale);
}
.tag-chip button{
  background:none; border:none; color:var(--blue-light); cursor:pointer;
  font-size:1rem; line-height:1; padding:0 .3rem; font-family:'manifold-cf', sans-serif;
}
.tag-chip button:hover{ color:var(--ivory); }

/* -------- data table (member list / attendance history) -------- */
.data-table{ width:100%; border-collapse:collapse; margin-top:.5rem; }
.data-table th, .data-table td{ text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); font-size:.88rem; vertical-align:top; }
.data-table th{ color:var(--blue-light); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; font-weight:400; }
.data-table td{ color:var(--pale); }
.wrap-table{ overflow-x:auto; }
.row-actions{ display:flex; gap:.9rem; }
.row-actions a, .row-actions button{
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-light);
  background:none; border:none; cursor:pointer; padding:0; font-family:'manifold-cf', sans-serif;
}
.row-actions .danger{ color:#c98a8a; }

/* -------- media gallery -------- */
.upload-form{ display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; margin:1.4rem 0 2.2rem; }
.upload-form input[type=file]{ color:var(--pale); font-size:.85rem; }
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:1.2rem; }
.media-item{ border:1px solid var(--line); background:var(--panel); overflow:hidden; }
.media-item img, .media-item video{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:#000; }
.media-actions{ display:flex; gap:.9rem; padding:.8rem 1rem; flex-wrap:wrap; align-items:center; }

/* -------- attendee checkboxes -------- */
.attendee-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:.7rem; margin-bottom:1.5rem; }
.attendee-item{ display:flex; align-items:center; gap:.55rem; font-size:.88rem; color:var(--pale); }
.attendee-item input{ accent-color:var(--blue-light); width:16px; height:16px; }

footer{ position:relative; padding:clamp(2.5rem,5vw,3.5rem) 1.5rem 2.5rem; text-align:center; border-top:1px solid var(--line); }
.footer-horse{
  position:absolute;
  left:clamp(1.25rem, 4vw, 3rem);
  bottom:0;
  height:clamp(300px, 25vw, 380px);
  width:auto;
  pointer-events:none;
}
@media (max-width:900px){
  .footer-horse{ display:none; }
}
footer .legal{ font-size:.66rem; letter-spacing:.08em; color:var(--blue-soft); text-transform:uppercase; margin-bottom:.4rem; }
footer .credit{ font-size:.75rem; color:var(--blue-soft); margin-bottom:1.6rem; }
footer .foot-mark{ width:64px; height:64px; margin:0 auto 1.6rem; object-fit:contain; }
.social{ display:flex; justify-content:center; gap:1rem; }
.social a{
  width:36px; height:36px;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease;
  color:var(--blue-soft);
}
.social a:hover{ border-color:var(--blue-light); color:var(--blue-light); }
.social svg{ width:16px; height:16px; fill:currentColor; }