/* ==========================================================================
   MGD 2026
   Rink dark against ice light, one red accent, Archivo Expanded over Barlow.
   Self hosted faces only. No third party font requests.
   ========================================================================== */

@font-face{
  font-family:"Archivo";
  src:url(../fonts/archivo-var.woff2) format("woff2-variations"),
      url(../fonts/archivo-var.woff2) format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url(../fonts/barlow-400.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url(../fonts/barlow-600.woff2) format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow";
  src:url(../fonts/barlow-700.woff2) format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* Rink side */
  --rink:#0B0D0F;
  --rink-2:#11161A;
  --board:#151A1F;
  --board-2:#1D242B;

  /* Ice side */
  --paper:#EDF1F5;
  --paper-2:#FFFFFF;
  --paper-3:#DFE6EC;
  --paper-line:#C3CDD7;

  /* Accent, unchanged from the existing brand */
  --red:#D2162A;
  --red-deep:#9C1220;
  --red-hot:#FF2E45;

  /* Type colours in the dark context */
  --white:#FFFFFF;
  --ink:#F4F4F4;
  --steel:#A7B2BC;
  --steel-2:#7E8A96;
  --line:rgba(255,255,255,.11);

  /* Legacy aliases kept so older markup keeps resolving */
  --ice:#151A1F;
  --red-bright:#FF2E45;
  --line-dark:#1D242B;

  --shadow:0 20px 45px -25px rgba(0,0,0,.6);
  --maxw:1180px;
  --display:"Archivo","Arial Narrow",Helvetica,Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--rink);
  color:var(--steel);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-stretch:125%;
  overflow-wrap:break-word;
  font-weight:800;
  text-transform:uppercase;
  line-height:.97;
  letter-spacing:-.005em;
  margin:0 0 .42em;
  text-wrap:balance;
  color:var(--white);
}
h1{ font-size:clamp(2.4rem,5.4vw,4.2rem); }
h2{ font-size:clamp(1.7rem,3.3vw,2.6rem); }
h3{ font-size:1.2rem; font-stretch:112%; font-weight:700; }
h4{ font-size:1rem; font-stretch:112%; font-weight:700; }
p{ margin:0 0 1em; max-width:64ch; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--display); font-stretch:112%;
  font-size:.71rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--red-hot);
  margin-bottom:1em;
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--red); display:inline-block; flex:none; }
.eyebrow-lg{ font-size:.8rem; }

.breadcrumb{
  font-family:var(--display); font-stretch:106%; font-weight:600;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--steel-2); margin-bottom:1.4em;
}
.breadcrumb a:hover{ color:var(--red-hot); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* --------------------------------------------------------------- buttons
   Two only. Solid red is the action you want taken. Red outline is the
   secondary route on the same screen and fills solid on hover.            */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--display); font-stretch:112%;
  font-weight:700; font-size:.79rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1em 1.75em;
  border:2px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary{ background:var(--red); color:var(--white); border-color:var(--red); }
.btn-primary:hover{ background:var(--red-deep); border-color:var(--red-deep); }
.btn-outline,
.btn-ghost,
.btn-line{ background:transparent; color:var(--white); border-color:var(--red); }
.btn-outline:hover,
.btn-ghost:hover,
.btn-line:hover{ background:var(--red); color:var(--white); }

/* ----------------------------------------------------------------- bands */
section.band{ padding:92px 0; }
section.band.tight{ padding:66px 0; }
.band.rink{ background:var(--rink); }
.band.ice{ background:var(--board); }
.cut-bottom{ clip-path:polygon(0 0,100% 0,100% calc(100% - 40px), 0 100%); }
/* A hero carrying a photo or video must fill its box. The angled cut removes
   pixels and lets the dark page show through, which reads as a black wedge
   under the image, so it is dropped on those heroes. */
.hero-video-wrap.cut-bottom{ clip-path:none; }

/* Safety net. Anything left as a direct child of a band still gets the shared
   container rather than running to the viewport edge. */
section.band > *:not(.wrap):not(.hero-scrim):not(.video-toggle):not(video):not(img){
  max-width:var(--maxw);
  margin-left:auto; margin-right:auto;
  padding-left:28px; padding-right:28px;
}

/* The light band. Contextual tokens are redefined here so inline
   var(--steel) / var(--line) in the content resolve to legible values.     */
.band.paper{
  background:var(--paper);
  color:#48535E;
  --steel:#5A6773;
  --steel-2:#6E7A86;
  --white:#0B0D0F;
  --ink:#0B0D0F;
  --line:#C3CDD7;
  --red-hot:#B01223;
}
.band.paper h1,
.band.paper h2,
.band.paper h3,
.band.paper h4{ color:#0B0D0F; }
.band.paper p{ color:#48535E; }
.band.paper .eyebrow{ color:var(--red); }
.band.paper .breadcrumb{ color:#6E7A86; }
.band.paper a:not(.btn):not(.hub-link){ color:var(--red-deep); }
.band.paper .btn-outline,
.band.paper .btn-ghost,
.band.paper .btn-line{ color:var(--red-deep); border-color:var(--red); }
.band.paper .btn-outline:hover,
.band.paper .btn-ghost:hover,
.band.paper .btn-line:hover{ background:var(--red); color:var(--white); }

/* --------------------------------------------------------------- hero video */
.hero-video-wrap{ position:relative; overflow:hidden; }
.hero-video-wrap .bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero-video-wrap .hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(11,13,15,.94) 0%, rgba(11,13,15,.72) 42%, rgba(11,13,15,.38) 100%);
}
.hero-video-wrap > .wrap{ position:relative; z-index:2; }

/* Pause control for the background video. Present so moving content can
   always be stopped, quiet enough not to compete with the headline. */
.video-toggle{
  position:absolute; right:20px; bottom:20px; z-index:3;
  width:38px; height:38px; padding:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(11,13,15,.55);
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  color:#fff; font-size:.62rem; line-height:1;
  cursor:pointer; opacity:.55;
  transition:opacity .16s ease, background .16s ease, border-color .16s ease;
}
.video-toggle:hover,
.video-toggle:focus-visible{ opacity:1; background:var(--red); border-color:var(--red); }
@media (max-width:700px){ .video-toggle{ right:14px; bottom:14px; width:34px; height:34px; } }

/* Photo band on the home page */
.complexity-photo{ position:relative; overflow:hidden; }
.complexity-photo::before{
  content:""; position:absolute; inset:0;
  /* The high resolution frame pulled from the source footage. The older
     image-01 crop was padded with black down its left half, which showed
     through the band as a dead area. */
  background-image:url(../images/complexity-band.jpg);
  background-size:cover; background-position:center center;
  opacity:.5;
}
.complexity-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,13,15,.55) 0%, rgba(11,13,15,.8) 100%);
}
.complexity-photo > .wrap{ position:relative; z-index:1; }
@media (max-width:700px){
  /* The band turns tall on a phone, so the original portrait frame fits it
     better than the wide composite does. */
  .complexity-photo::before{
    background-image:url(../images/goalie-harrison.jpg);
    background-position:center 38%;
  }
}

/* A single supporting photograph inside a content band */
.shot{ margin:0; }
.shot img,
.shot img.lazyload,
.shot img.lazyloaded{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border:1px solid var(--line);
}
.shot figcaption{
  font-family:var(--display); font-stretch:106%; font-weight:600;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel-2); margin-top:10px;
}
.band.paper .shot img{ border-color:var(--paper-line); }
@media (max-width:700px){ .shot img{ aspect-ratio:4/3; } }

/* A portrait photograph is shown whole rather than cropped to a wide band.
   The ratio is declared rather than left to `auto`, because `auto` cancels the
   box the width and height attributes would otherwise reserve, and a lazily
   loaded image inside a zero height box never scrolls into view to load. */
.shot--tall{ --shot-ar: 1344 / 2389; max-width:430px; margin-left:auto; margin-right:auto; }
.shot--tall img,
.shot--tall img.lazyload,
.shot--tall img.lazyloaded{
  aspect-ratio:var(--shot-ar); width:100%; height:auto; object-fit:contain;
}
.shot--tall figcaption{ text-align:center; }
@media (max-width:700px){ .shot--tall{ max-width:340px; } }

/* ------------------------------------------------------------------ grids */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }
/* Card grids nested in a two column layout (the registration page) cannot
   shrink below their longest word, so four across overflows the page
   between the single column breakpoint and about 1100px. Two across fits. */
@media (min-width:901px) and (max-width:1120px){
  .grid-2 .grid-3, .grid-2 .grid-4{ grid-template-columns:repeat(2,1fr); }
}

/* ------------------------------------------------------------------ cards */
.card{
  background:var(--board);
  border:1px solid var(--line);
  border-top:3px solid var(--red);
  padding:26px 24px;
}
.card h3{ margin-top:.1em; }
.card > :last-child{ margin-bottom:0; }
.card-line{ border-top:1px solid var(--line); border-left:3px solid var(--red); }

.band.paper .card{
  background:var(--paper-2);
  border:1px solid var(--paper-line);
  border-top:3px solid var(--red);
}
.band.paper .card-line{ border-top:1px solid var(--paper-line); border-left:3px solid var(--red); }

/* --------------------------------------------------------------- hub links */
.hub-links{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
.hub-links-6{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
@media (max-width:900px){ .hub-links,.hub-links-6{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .hub-links,.hub-links-6{ grid-template-columns:1fr; } }
.hub-link{
  background:var(--board);
  border:1px solid var(--line);
  border-left:3px solid transparent;
  padding:22px 20px;
  display:block;
  transition:border-color .16s ease, background .16s ease;
}
.hub-link .k{
  font-family:var(--display); font-stretch:118%; font-weight:700;
  font-size:1.22rem; text-transform:uppercase; line-height:1.05;
  color:var(--white);
}
.hub-link .go{
  font-family:var(--display); font-stretch:106%;
  font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red-hot);
  margin-top:.65em; display:block;
}
.hub-link:hover{ border-left-color:var(--red); }

.band.paper .hub-link{ background:var(--paper-2); border-color:var(--paper-line); border-left-color:transparent; }
.band.paper .hub-link .k{ color:#0B0D0F; }
.band.paper .hub-link .go{ color:var(--red); }
.band.paper .hub-link:hover{ border-left-color:var(--red); background:#fff; }

/* ------------------------------------------------------------------ quotes */
.quote{
  background:var(--board);
  border:1px solid var(--line);
  border-left:3px solid var(--red);
  padding:26px 28px; margin:0;
}
.quote p{ color:var(--ink); font-size:1.03rem; max-width:none; margin-bottom:.6em; }
.quote cite{
  font-family:var(--display); font-stretch:106%;
  font-style:normal; font-weight:700; font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--steel-2);
}
.band.paper .quote{ background:var(--paper-2); border-color:var(--paper-line); border-left-color:var(--red); }
.band.paper .quote p{ color:#2A333C; }
.band.paper .quote cite{ color:#6E7A86; }

/* ------------------------------------------------------------- stats + table */
.stat{ text-align:left; }
.stat .n{
  font-family:var(--display); font-stretch:125%; font-weight:800;
  font-size:3.5rem; color:var(--red); line-height:.92;
  font-variant-numeric:tabular-nums;
}
.stat .l{
  font-family:var(--display); font-stretch:106%;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--steel-2); font-weight:700; margin-top:.45em;
}

table.sheet{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
table.sheet th{
  text-align:left; font-family:var(--display); font-stretch:106%;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--steel-2); padding:.65em .8em; border-bottom:2px solid var(--red);
}
table.sheet td{ padding:.85em .8em; border-bottom:1px solid var(--line); font-size:.95rem; }
table.sheet tr:last-child td{ border-bottom:none; }
.band.paper table.sheet td{ border-bottom-color:var(--paper-line); color:#48535E; }
.band.paper table.sheet th{ color:#6E7A86; }

/* ----------------------------------------------------------------- status */
.status{
  display:inline-block; font-family:var(--display); font-stretch:106%;
  font-size:.64rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; padding:.3em .65em; border-radius:2px;
  vertical-align:middle; margin-left:.5em;
}
.status.open{ background:rgba(46,160,96,.16); color:#3E9E68; border:1px solid rgba(46,160,96,.4); }
.status.wait{ background:rgba(190,132,24,.16); color:#96661A; border:1px solid rgba(190,132,24,.4); }
.status.full{ background:rgba(210,22,42,.14); color:var(--red-deep); border:1px solid rgba(210,22,42,.4); }
.band.rink .status.open,.band.ice .status.open{ color:#6FE3A0; border-color:rgba(111,227,160,.35); }
.band.rink .status.wait,.band.ice .status.wait{ color:#F0B65C; border-color:rgba(240,182,92,.35); }
.band.rink .status.full,.band.ice .status.full{ color:#FF8A93; border-color:rgba(255,138,147,.35); }

/* ------------------------------------------------------------- people cards */
.person{ display:flex; gap:24px; align-items:flex-start; }
/* The lazy-load plugin injects a placeholder width, so these selectors carry
   the extra class to outrank it and keep the photo slot a fixed size.        */
.person img,
.person img.lazyload,
.person img.lazyloaded{
  width:150px; height:188px; object-fit:cover; object-position:center 18%;
  border:1px solid var(--line); flex:none;
}
.person > div{ flex:1; min-width:0; }
.person-photo{
  width:150px; height:188px; flex:none;
  border:1px dashed var(--line);
  background:rgba(255,255,255,.03);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.3em;
}
.person-photo .initials{
  font-family:var(--display); font-stretch:125%; font-weight:800;
  font-size:2.2rem; color:var(--steel-2); line-height:1;
}
.person-photo .ph-label{
  font-family:var(--display); font-stretch:106%;
  font-size:.56rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--steel-2); text-align:center; padding:0 .6em;
}
.person .role{
  font-family:var(--display); font-stretch:106%;
  font-size:.68rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--red-hot);
  margin-bottom:.35em; display:block;
}
.person h3{ margin-bottom:.5em; }
.person ul{ margin:.6em 0 0; padding-left:1.1em; font-size:.93rem; }
.person ul li{ margin-bottom:.3em; }
.card .role{
  font-family:var(--display); font-stretch:106%;
  font-size:.66rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--red-hot);
  margin-bottom:.5em; display:block;
}
.card ul{ margin:.6em 0 0; padding-left:1.1em; font-size:.92rem; }
.card ul li{ margin-bottom:.28em; }
.band.paper .person-photo{ border-color:var(--paper-line); background:rgba(11,13,15,.03); }
.band.paper .person-photo .initials,
.band.paper .person-photo .ph-label{ color:#8A95A0; }
.band.paper .person .role,
.band.paper .card .role{ color:var(--red); }
.band.paper .person img{ border-color:var(--paper-line); }
@media (max-width:640px){
  .person{ flex-direction:column; }
  .person img,
  .person img.lazyload,
  .person img.lazyloaded,
  .person-photo{ width:100%; height:230px; }
}

/* ----------------------------------------------------------- testimonials */
.testi-rotator{ position:relative; min-height:150px; }
.testi-slide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .5s ease;
}
.testi-slide.is-active{ opacity:1; pointer-events:auto; position:relative; }
.testi-dots{ display:flex; gap:9px; margin-top:20px; }
.testi-dots button{
  width:9px; height:9px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:transparent; cursor:pointer;
}
.testi-dots button.is-active{ background:var(--red-hot); border-color:var(--red-hot); }

/* ---------------------------------------------------------------- socials */
.social{ display:flex; gap:14px; margin-top:1em; }
.social a{ display:inline-flex; }
.social svg{ width:22px; height:22px; }
.social-lg svg{ width:30px; height:30px; }
.social a:hover{ color:var(--red-hot); }

/* ----------------------------------------------------------------- footer */
footer{
  background:var(--rink);
  color:var(--steel-2);
  padding:60px 0 30px;
  border-top:3px solid var(--red);
}
footer h4{ color:var(--white); font-size:1.02rem; margin-bottom:.7em; }
footer .cols{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
@media (max-width:800px){ footer .cols{ grid-template-columns:1fr; } }
footer ul{ list-style:none; margin:0; padding:0; }
footer ul li{ margin-bottom:.5em; font-size:.94rem; }
footer a:hover{ color:var(--white); }
footer .bottom{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--display); font-stretch:106%;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--steel-2);
}

.divider-cut{ height:52px; background:var(--rink); clip-path:polygon(0 100%,100% 0,100% 100%); }

/* ------------------------------------------------------------ nav / header */
#site-nav{
  position:sticky; top:0; z-index:90;
  background:var(--rink);
  border-bottom:3px solid var(--red);
}
#site-nav .bar{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  height:92px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{ display:flex; align-items:center; gap:1em; }
.brand img{ height:60px; width:auto; flex:none; }

nav.menu{ display:flex; align-items:stretch; height:100%; }
nav.menu ul{ list-style:none; margin:0; padding:0; }
nav.menu > ul{ display:flex; height:100%; }
nav.menu > ul > li{ position:relative; display:flex; align-items:center; }
nav.menu > ul > li > a{
  display:flex; align-items:center; height:100%;
  padding:0 .85em;
  font-family:var(--display); font-stretch:106%;
  font-size:.74rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel);
  border-bottom:3px solid transparent; margin-bottom:-3px;
  transition:color .15s ease, border-color .15s ease;
}
nav.menu > ul > li > a:hover,
nav.menu > ul > li.active > a{ color:var(--white); border-color:var(--red); }
.sub{
  display:none; position:absolute; top:100%; left:0; min-width:230px;
  background:var(--board); border:1px solid var(--line); border-top:2px solid var(--red);
  box-shadow:var(--shadow); padding:6px 0; z-index:95;
}
nav.menu > ul > li:hover .sub{ display:block; }
.sub li a{
  display:block; padding:.62em 1.1em;
  font-family:var(--display); font-stretch:106%;
  font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--steel);
}
.sub li a:hover{ color:var(--white); background:rgba(210,22,42,.18); }
.menu-toggle{ display:none; background:none; border:0; color:var(--white); font-size:1.6rem; cursor:pointer; }

@media (max-width:1000px){
  #site-nav .bar{ height:78px; }
  .menu-toggle{ display:block; }
  .brand img{ height:46px; }
  nav.menu{
    display:none; position:absolute; top:78px; left:0; right:0;
    background:var(--rink); border-bottom:3px solid var(--red);
    height:auto; max-height:calc(100vh - 78px); overflow:auto;
  }
  nav.menu.open{ display:block; }
  nav.menu > ul{ flex-direction:column; height:auto; }
  nav.menu > ul > li{ height:auto; flex-direction:column; align-items:stretch; border-top:1px solid var(--line); }
  nav.menu > ul > li > a{ height:auto; padding:.95em 1.4em; border-bottom:0; margin:0; }
  .sub{ display:block; position:static; box-shadow:none; border:0; border-top:1px solid var(--line); background:rgba(255,255,255,.03); padding:0; min-width:0; }
  nav.menu > ul > li:hover .sub{ display:block; }
}

@media (max-width:700px){
  section.band{ padding:64px 0; }
  section.band.tight{ padding:48px 0; }
  .cut-bottom{ clip-path:polygon(0 0,100% 0,100% calc(100% - 22px), 0 100%); }
}

/* Expanded caps are wide. On a narrow phone a single long word such as
   REGISTRATION outruns the viewport, so the display sizes step down. */
@media (max-width:520px){
  h1{ font-size:clamp(1.8rem,7.4vw,2.4rem); }
  h2{ font-size:clamp(1.45rem,5.8vw,1.9rem); }
}


/* ==========================================================================
   Motion kit
   Six interactions approved from the motion proposal: button sweep, card
   lift, hub link travel, nav underline wipe, scroll reveal, visible focus.
   Everything here is progressive. If the animation never runs the element
   still sits in its finished state, so nothing depends on motion to be read.
   ========================================================================== */

/* --- 01 button sweep ---------------------------------------------------
   The sheen lives in a pseudo element behind the label. `isolation` gives
   the button its own stacking context so a negative z-index child paints
   over the button's background but under its text, which avoids wrapping
   the label in a span across two dozen section files. */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transform:translateX(-115%);
}
.btn:hover::after{
  transform:translateX(115%);
  transition:transform .62s cubic-bezier(.3,.6,.3,1);
}
.btn-outline::after{
  background:linear-gradient(105deg,transparent 38%,rgba(210,22,42,.20) 50%,transparent 62%);
}

/* --- 02 card lift ------------------------------------------------------ */
.card{
  position:relative;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 34px -22px rgba(0,0,0,.85); }
.band.paper .card:hover{ box-shadow:0 18px 34px -24px rgba(11,13,15,.42); }
/* The red rule along the top draws itself across. Only on the plain card:
   card-line carries its accent down the left edge instead. */
.card:not(.card-line)::after{
  content:""; position:absolute; left:0; right:0; top:-3px; height:3px;
  background:var(--red-hot); transform:scaleX(0); transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.card:not(.card-line):hover::after{ transform:scaleX(1); }

/* --- 03 hub link travel ------------------------------------------------
   The go label carries its arrow as a text node, so the whole label shifts
   rather than the arrow alone. No markup change, same read. */
.hub-link{
  transition:border-color .2s ease, background .2s ease, transform .2s cubic-bezier(.2,.7,.3,1);
}
.hub-link .go{ transition:transform .24s cubic-bezier(.2,.7,.3,1); }
/* The travel is a transform, never padding. Padding changes the box, which
   reflows every neighbour in the grid and shoves the text on the rest of the
   row sideways. A transform is composited and moves nothing else. */
.hub-link:hover{ transform:translateX(4px); background:var(--board-2); }
.hub-link:hover .go{ transform:translateX(5px); }

/* --- 05 nav underline wipe ---------------------------------------------
   In from the left on hover, out to the right on leave. The current page
   keeps its rule. The transparent border stays for layout only. */
nav.menu > ul > li > a{ position:relative; }
nav.menu > ul > li > a::after{
  content:""; position:absolute; left:.85em; right:.85em; bottom:-3px; height:3px;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
nav.menu > ul > li > a:hover::after{ transform:scaleX(1); transform-origin:left; }
nav.menu > ul > li.active > a::after{ transform:scaleX(1); }
nav.menu > ul > li > a:hover,
nav.menu > ul > li.active > a{ border-color:transparent; }
@media (max-width:1000px){
  nav.menu > ul > li > a::after{ display:none; }
  nav.menu > ul > li.active > a{ border-color:var(--red); }
}

/* --- 06 scroll reveal --------------------------------------------------
   Fade carries the movement rather than the other way round: a long fade,
   a short rise, and a gentle curve, so entry reads as settling rather than
   sliding. `.mgd-reveal` is only ever added by script, so a visitor without
   JavaScript sees every block already in place. */
.mgd-reveal{ opacity:0; transform:translate3d(0,14px,0); will-change:opacity,transform; }
.mgd-reveal.mgd-in{
  opacity:1; transform:none;
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),
             transform .85s cubic-bezier(.22,.61,.36,1);
}

/* --- 10 visible focus --------------------------------------------------
   Required rather than optional. Anyone filling a registration form by
   keyboard has to be able to see which control they are in. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--red-hot);
  outline-offset:3px;
  border-radius:1px;
}
.band.paper a:focus-visible,
.band.paper button:focus-visible,
.band.paper input:focus-visible,
.band.paper select:focus-visible,
.band.paper textarea:focus-visible{ outline-color:var(--red); }

/* ------------------------------------------------------- upcoming session */
/* A session that is real and dated but not yet open for registration. It is
   deliberately quieter than a live card, and its call to action is a span
   rather than a link so it cannot be clicked or tabbed to. */
.card.is-upcoming{ opacity:.78; }
.btn-soon{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--display); font-stretch:112%;
  font-weight:700; font-size:.79rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1em 1.75em;
  border:2px dashed var(--line);
  border-radius:2px;
  color:var(--steel-2);
  background:transparent;
  cursor:default;
}
.band.paper .card.is-upcoming{ opacity:1; background:var(--paper-3); }
.band.paper .btn-soon{ border-color:var(--paper-line); color:#6B7681; }

/* --------------------------------------------------------- mailing list */
.signup{
  border-top:1px solid var(--line);
  margin-top:26px; padding-top:24px;
}
.signup h3{
  font-family:var(--display); font-stretch:118%; text-transform:uppercase;
  font-weight:800; font-size:.95rem; letter-spacing:.02em; margin:0 0 .35em;
}
.signup p{ color:var(--steel); font-size:.88rem; margin:0 0 14px; max-width:52ch; }
.signup form{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; }
.signup input[type="email"]{
  flex:1 1 240px; min-width:0;
  font-family:var(--body); font-size:.95rem;
  padding:.85em 1em;
  background:var(--paper-2); color:#0B0D0F;
  border:1px solid var(--paper-line); border-radius:2px;
}
.signup input[type="email"]::placeholder{ color:#7E8A96; }
.signup .btn{ flex:none; }
.signup .fineprint{ font-size:.76rem; color:var(--steel-2); margin:10px 0 0; }
/* Mailchimp's bot trap. It must stay in the DOM and stay reachable to nobody. */
.signup .mc-trap{ position:absolute; left:-5000px; }
@media (max-width:560px){
  .signup form{ flex-direction:column; }
  .signup .btn{ width:100%; justify-content:center; }
}

/* ---------------------------------------------------------- partner logos */
/* All three supplied logos are white artwork on transparency, drawn for a dark
   background. The partners band is light, so on a white card they rendered as
   nothing at all: present, correct, and invisible. Each one now sits on its own
   dark plate, which is both what the artwork needs and a tidier way to show a
   logo wall.

   The plate is a fixed height for all three, so a wide wordmark and a tall
   stacked mark occupy identical boxes. The logo is contained inside rather than
   sized individually, which is what keeps the boxes matching no matter what
   shape a future partner's logo turns out to be. */
.partner-grid{ align-items:stretch; }
.partner{
  display:flex; flex-direction:column;
  text-align:center;
}
.partner-plate{
  display:flex; align-items:center; justify-content:center;
  height:132px; margin-bottom:16px; padding:20px 24px;
  background:var(--rink);
  border:1px solid rgba(255,255,255,.08);
  border-radius:2px;
}
.band.paper .partner-plate{ border-color:rgba(11,13,15,.14); }
.partner-plate img,
.partner-plate img.lazyload,
.partner-plate img.lazyloaded{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  margin:0;
}
.partner h3{
  font-size:1.1rem;
  margin-top:auto; margin-bottom:0;
}
@media (max-width:560px){
  .partner-plate{ height:112px; padding:16px 20px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  .testi-slide{ transition:none !important; }
  /* Reveal targets must land in their finished state, never stay hidden. */
  .mgd-reveal{ opacity:1 !important; transform:none !important; }
  .card:hover{ transform:none; }
  .btn::after{ display:none; }
}