/* ==========================================================================
   SEVENTY-SEVEN — a design for GLME Summer Camp Fever 2027
   ==========================================================================

   A PROPOSAL, PARALLEL TO THE LIVE SITE. Its own markup, its own stylesheet,
   nothing shared with css/site.css. design-options/ can never be published by
   tools/build-dist.py, so nothing here can reach the server.

   THE IDEA — 1977.
   The club formed in 1977. Saturday Night Fever came out in 1977. The bike in
   the logo wears race number 77. Fifty years later the club rides for a week
   in August. That coincidence is the whole design: not disco as decoration,
   but the club and the film turning fifty together.

   THE SIGNATURE — the floor.
   The lit dancefloor from the film, built in CSS perspective, is the hero. The
   same component lies flat lower down and becomes the week: eight panels, six
   of them lit, one per riding day. So the most decorative thing on the page is
   also the schedule.

   THE DECADE, NOT THE ONE AFTER IT.
   Magenta and cyan on black is 1984 — Miami Vice, synthwave. 1977 is warm:
   gold, amber, deep aubergine, cream, with the mirror ball's cool sparkle on
   top. The gold is what keeps this in the right decade, and it is the one
   colour not taken from the logo.
   ========================================================================== */

/* --- Faces -------------------------------------------------------------- */
/* Monoton is a neon tube. It appears exactly once, on the 77, because that
   number is the club's founding year, the film's year and the bike's race
   number at the same time. A second use would spend the effect.
   Jost is Futura's lineage — the poster face of the period.
   Karla carries body copy with a bit of warmth; Space Mono holds the data. */
@font-face{font-family:'Monoton';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/monoton-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/jost-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/karla-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/spacemono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/spacemono-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;}

/* --- Tokens ------------------------------------------------------------- */
:root{
  --night:  #17091F;   /* aubergine black — the room, not a neutral void */
  --velvet: #24123A;
  --panel:  #2C1745;
  --cream:  #FFF1DC;   /* warm off-white; clinical white belongs to 1984 */
  --dim:    #B9A3C4;
  --hot:    #D80078;   /* the wordmark */
  --hot-lift:#FF4DA0;  /* lifted, for small magenta text */
  --ball:   #35AEDC;   /* the mirror ball */
  --gold:   #F2B01E;   /* the decade */
  --line:   #3D2456;

  --d1:#E40303; --d2:#FF8C00; --d3:#FFED00;
  --d4:#008026; --d5:#004DFF; --d6:#750787;

  --z-pennines:#C2560F; --z-lakes:#7A3B9E; --z-dales:#1F6C8C; --z-moors:#B02576;

  --neon:'Monoton',cursive;
  --display:'Jost','Helvetica Neue',Arial,sans-serif;
  --body:'Karla',Georgia,serif;
  --mono:'Space Mono',ui-monospace,monospace;

  --gut:clamp(1.25rem,4vw,3rem);
  --wrap:1180px;
}

*{ box-sizing:border-box; }
/* `hidden` has to actually hide. .btns and .facts set display, which otherwise
   beats the attribute's default style and leaks them onto the locked page. */
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--night); color:var(--cream);
  font-family:var(--body); font-size:1.0625rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* height:auto matters: the width/height attributes on every <img> act as a
   presentational hint, so without this the pictures render at their full
   attribute height and stretch — badly, at phone widths. */
img{ max-width:100%; height:auto; }
a{ color:var(--ball); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; z-index:99; background:var(--gold); color:var(--night);
             padding:.7rem 1rem; font-family:var(--mono); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* --- Shared type -------------------------------------------------------- */
h1,h2,h3{ font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; }
h2{ font-size:clamp(2rem,5.2vw,3.6rem); line-height:.98; letter-spacing:-.02em;
    text-transform:uppercase; }
h3{ font-size:1.1rem; letter-spacing:.02em; text-transform:uppercase; }

.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1rem;
}
.lede{ font-size:clamp(1.1rem,1vw+.9rem,1.3rem); line-height:1.6; max-width:52ch; }
.dim{ color:var(--dim); }
.note{ font-family:var(--mono); font-size:.74rem; line-height:1.7; color:var(--dim); }

.band{ padding-block:clamp(4rem,9vw,7rem); position:relative; }
.band--velvet{ background:var(--velvet); }

/* ==========================================================================
   THE FLOOR — the signature
   Perspective grid of lit panels. Used twice: receding behind the hero, and
   flat as the week. Same component, so the decoration is also the schedule.
   ========================================================================== */
.floor{
  position:absolute; left:-14%; right:-14%; bottom:0; height:min(76vh,680px);
  perspective:340px; perspective-origin:50% -14%; overflow:hidden;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 26%,#000);
          mask-image:linear-gradient(to bottom,transparent,#000 26%,#000);
}
.floor__grid{
  position:absolute; inset:0; display:grid; gap:4px;
  grid-template-columns:repeat(16,1fr); grid-auto-rows:1fr;
  transform:rotateX(70deg) scale(1.5); transform-origin:50% 0%;
}
.floor__grid i{
  display:block; background:var(--c,#fff); opacity:.26;
  animation:lit 7.5s steps(1,end) infinite; animation-delay:var(--d,0s);
}
@keyframes lit{
  0%,72%   { opacity:.22; }
  76%,88%  { opacity:.92; }
  92%,100% { opacity:.22; }
}
@media (prefers-reduced-motion:reduce){
  .floor__grid i{ animation:none; opacity:.42; }
}
/* The far edge of the floor, where the light stops. */
.floor::after{
  content:''; position:absolute; left:0; right:0; top:22%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,241,220,.45),transparent);
}

/* --- Marquee: the bar over the door ------------------------------------- */
.marquee{
  position:sticky; top:0; z-index:40;
  background:rgba(23,9,31,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.marquee__lights{ display:flex; height:4px; }
.marquee__lights i{ flex:1; }
.marquee__in{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding-block:.7rem;
}
.marquee b{
  font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.02em;
  text-transform:uppercase; margin-right:auto;
}
/* The club's own bike, from the 50th logo. It rides in once on arrival and
   parks beside the wordmark, where it stays as the page scrolls. In the bar
   rather than in a band of its own: the header already has this height, so
   the bike costs nothing and is still the first thing at the top. */
.marquee .bike{
  width:40px; height:29px; flex:none; margin-right:.7rem;
  -webkit-mask:url('../images/bike-mark.png?v=2f3ef1fb') center/contain no-repeat;
          mask:url('../images/bike-mark.png?v=2f3ef1fb') center/contain no-repeat;
  background:currentColor; color:var(--cream);
  animation:rollin 1.1s cubic-bezier(.2,.8,.3,1) .2s both;
}
@keyframes rollin{ from{ transform:translateX(-140%); opacity:0; }
                   to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){ .marquee .bike{ animation:none; } }
.marquee b span{ color:var(--hot-lift); }
.marquee nav ul{ display:flex; flex-wrap:wrap; gap:.2rem 1.1rem;
                 list-style:none; margin:0; padding:0; }
.marquee a{ font-family:var(--mono); font-size:.68rem; font-weight:700;
            letter-spacing:.13em; text-transform:uppercase;
            color:var(--dim); text-decoration:none; }
.marquee a:hover{ color:var(--gold); }
.burger77{
  display:none; background:none; cursor:pointer;
  border:1px solid var(--line); color:var(--cream);
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:.5rem .85rem;
}
.burger77:hover{ border-color:var(--gold); color:var(--gold); }

/* Below this the six links no longer fit on one line beside the wordmark, so
   they collapse behind a button rather than wrapping onto a second row. */
@media (max-width:62rem){
  .marquee__in{ position:relative; }
  .burger77{ display:block; }
  .marquee nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:#160820; border-block:1px solid var(--line);
    padding:.5rem var(--gut) 1rem; margin-inline:calc(var(--gut) * -1);
  }
  .marquee nav.open{ display:block; }
  .marquee nav ul{ flex-direction:column; gap:0; }
  .marquee nav a{ display:block; padding:.8rem 0; font-size:.8rem;
                  border-bottom:1px solid var(--line); }
  .marquee nav li:last-child a{ border-bottom:0; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(4rem,9vw,6rem);
  background:
    radial-gradient(60% 42% at 50% 4%, rgba(53,174,220,.22), transparent 70%),
    radial-gradient(70% 50% at 50% 96%, rgba(216,0,120,.20), transparent 70%);
}
/* Mirror-ball speckle: light scattered across the room, drawn rather than
   loaded — four radial gradients, no image, no request. */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,241,220,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 12%, rgba(53,174,220,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 62%, rgba(255,241,220,.7), transparent 60%),
    radial-gradient(2px   2px   at 88% 48%, rgba(242,176,30,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 30%, rgba(255,241,220,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 20% 82%, rgba(216,0,120,.8), transparent 60%);
}
.hero .wrap{ position:relative; z-index:2; text-align:center; }

/* The two logos, given equal billing: the event and the anniversary it falls
   in. They are sized to look the same weight rather than measure the same —
   the 50 carries more empty space inside its own artwork, so it runs a little
   larger to compensate. */
.lockup{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem,3.5vw,2.75rem); margin:0 auto clamp(1.2rem,2.4vw,1.8rem);
}
.lockup img{ display:block; height:auto; }
.lockup__fever{ width:min(288px,39vw); }
.lockup__fifty{ width:min(314px,42vw); }
/* They stay side by side at every width. Stacking them looks fine but costs
   about 500px before the headline starts, which on a phone puts the headline
   below the fold. */
@media (max-width:34rem){
  .lockup{ gap:.9rem; }
  .lockup__fever{ width:40vw; }
  .lockup__fifty{ width:43vw; }
}

.hero h1{
  font-size:clamp(2.6rem,8.4vw,6.4rem); line-height:.86; letter-spacing:-.035em;
  text-transform:uppercase; margin:0 0 1.4rem;
}
.hero h1 span{ display:block; }
.hero h1 .at{ color:var(--hot); }

.dates{
  display:inline-flex; flex-wrap:wrap; justify-content:center; gap:.6rem 1.4rem;
  font-family:var(--mono); font-size:.78rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold);
  border-block:1px solid var(--line); padding:.9rem 0; margin:0 0 1.6rem;
}
.hero__blurb{ margin:0 auto 2.2rem; max-width:46ch; color:var(--cream); }

.btns{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  font-family:var(--mono); font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; padding:.95rem 1.6rem; border:2px solid transparent;
  transition:background-color .15s,color .15s,border-color .15s;
}
.btn--hot{ background:var(--hot); color:#fff; }
.btn--hot:hover{ background:var(--hot-lift); color:var(--night); }
.btn--out{ border-color:var(--ball); color:var(--ball); background:none; }
.btn--out:hover{ background:var(--ball); color:var(--night); }

/* The one button that leaves the site, so it is the one that looks different:
   gold rather than mirror-ball blue, and carrying a pin. 10:1 on --night. */
.btn--map{
  display:inline-flex; align-items:center; gap:.55rem;
  border-color:var(--gold); color:var(--gold); background:none;
}
.btn--map:hover{ background:var(--gold); color:var(--night); }
.btn--map svg{ width:1.05em; height:1.05em; flex:none; fill:currentColor; }

/* --- Facts strip -------------------------------------------------------- */
.facts{
  list-style:none; margin:clamp(3rem,6vw,4.5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (min-width:46rem){ .facts{ grid-template-columns:repeat(4,1fr); } }
.facts li{ background:var(--night); padding:1.2rem 1rem; text-align:center; }
.facts b{ display:block; font-family:var(--display); font-weight:700; font-size:1.7rem;
          line-height:1; color:var(--gold); }
.facts span{ display:block; margin-top:.5rem; font-family:var(--mono); font-size:.64rem;
             letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }

/* ==========================================================================
   FIFTY YEARS — the 77
   ========================================================================== */
.fifty{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:56rem){ .fifty{ grid-template-columns:.85fr 1.15fr; } }

.seventyseven{
  font-family:var(--neon); font-size:clamp(6rem,17vw,12rem); line-height:.9;
  color:var(--hot-lift); text-align:center; margin:0;
  text-shadow:
    0 0 6px rgba(255,77,160,.55),
    0 0 26px rgba(216,0,120,.45),
    0 0 60px rgba(216,0,120,.28);
}
.seventyseven + p{ text-align:center; margin:.6rem 0 0; }

/* ==========================================================================
   THE WEEK — the same floor, laid flat
   ========================================================================== */
.week{
  list-style:none; margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding:0;
  display:grid; gap:4px; grid-template-columns:repeat(2,1fr);
}
@media (min-width:44rem){ .week{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:72rem){ .week{ grid-template-columns:repeat(8,1fr); } }
.day{
  position:relative; min-height:130px; padding:1.1rem .9rem;
  display:flex; flex-direction:column; background:var(--panel);
  border:1px solid var(--line);
}
.day b{ font-family:var(--display); font-weight:700; font-size:1.3rem; line-height:1;
        text-transform:uppercase; letter-spacing:-.01em; }
.day span{ margin-top:auto; padding-top:.7rem; font-family:var(--mono);
           font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; }
/* Lit panels: one per riding day, in flag order. */
.day--lit{ border-color:transparent; color:var(--night); }
.day--lit span{ opacity:.75; }
.day[data-d="1"]{ background:var(--d1); color:#fff; }
.day[data-d="2"]{ background:var(--d2); }
.day[data-d="3"]{ background:var(--d3); }
.day[data-d="4"]{ background:var(--d4); color:#fff; }
.day[data-d="5"]{ background:var(--d5); color:#fff; }
.day[data-d="6"]{ background:var(--d6); color:#fff; }
.day--off{ background:var(--panel); color:var(--cream); }
.day--off b{ color:var(--gold); }

/* ==========================================================================
   PANELS, PICTURES, LISTS
   ========================================================================== */
.split{ display:grid; gap:clamp(2rem,4.5vw,3.5rem); align-items:start; }
.split > *{ min-width:0; }
@media (min-width:56rem){ .split{ grid-template-columns:1.05fr .95fr; } }

.frame{ border:1px solid var(--line); background:var(--panel); overflow:hidden; }
/* The play-zones map is dense: its labels are unreadable at phone width, so it
   opens full size where the browser's own viewer can zoom it. */
.zoom{ display:block; cursor:zoom-in; }
.zoom:hover{ border-color:var(--gold); }
.frame img{ display:block; width:100%; }
.cap{ font-family:var(--mono); font-size:.7rem; line-height:1.6; color:var(--dim);
      margin:.7rem 0 0; }

.strip{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:2rem; }
@media (min-width:48rem){ .strip{ grid-template-columns:repeat(3,1fr); } }
.strip figure{ margin:0; }
.strip img{ width:100%; aspect-ratio:16/10; object-fit:cover;
            border:1px solid var(--line); display:block; }

.zones{ list-style:none; margin:clamp(2.5rem,5vw,3.5rem) 0 0; padding:0;
        display:grid; gap:1.1rem; grid-template-columns:1fr; }
@media (min-width:40rem){ .zones{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:64rem){ .zones{ grid-template-columns:repeat(4,1fr); } }
.zone{ display:flex; flex-direction:column; background:var(--panel);
       border:1px solid var(--line); border-top:6px solid var(--line); overflow:hidden; }
.zone img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.zone__t{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1; }
.zone h3{ margin:0 0 .5rem; font-size:1.02rem; }
.zone p{ margin:auto 0 0; font-family:var(--mono); font-size:.7rem; line-height:1.6;
         color:var(--dim); }
.zone[data-z="pennines"]{ border-top-color:var(--z-pennines); }
.zone[data-z="lakes"]{    border-top-color:var(--z-lakes); }
.zone[data-z="dales"]{    border-top-color:var(--z-dales); }
.zone[data-z="moors"]{    border-top-color:var(--z-moors); }

.speeds{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.8rem;
         grid-template-columns:repeat(2,1fr); }
@media (min-width:48rem){ .speeds{ grid-template-columns:repeat(4,1fr); } }
.speeds li{ border:1px solid var(--line); background:var(--panel);
            padding:1.1rem .9rem; text-align:center;
            font-family:var(--display); font-weight:700; font-size:1.05rem;
            text-transform:uppercase; letter-spacing:.04em; }
.speeds .bike{ display:block; width:44px; height:32px; margin:0 auto .7rem;
  -webkit-mask:url('../images/bike-mark.png?v=2f3ef1fb') center/contain no-repeat;
          mask:url('../images/bike-mark.png?v=2f3ef1fb') center/contain no-repeat;
  background:currentColor; color:var(--ball); }

/* --- Video -------------------------------------------------------------- */
.film{ position:relative; aspect-ratio:16/9; max-width:900px; margin:2rem auto 0;
       background:#000; border:1px solid var(--line); }
.film video,.film iframe{ position:absolute; inset:0; width:100%; height:100%;
                          border:0; display:block; }

/* --- Sign-in ------------------------------------------------------------ */
.door{ max-width:440px; margin:2.5rem auto 0; background:var(--panel);
       border:1px solid var(--line); }
.door__h{ background:var(--hot); color:#fff; padding:.7rem 1.1rem;
          font-family:var(--mono); font-size:.68rem; font-weight:700;
          letter-spacing:.18em; text-transform:uppercase; }
.door form{ padding:1.4rem 1.3rem 1.5rem; }
.door label{ display:block; margin-bottom:1rem; }
.door label span{ display:block; margin-bottom:.4rem; font-family:var(--mono);
                  font-size:.64rem; font-weight:700; letter-spacing:.16em;
                  text-transform:uppercase; color:var(--dim); }
.door input{ width:100%; padding:.8rem .85rem; background:var(--night);
             border:1px solid var(--line); color:var(--cream);
             font-family:var(--mono); font-size:.95rem; border-radius:0; }
.door .btn{ width:100%; text-align:center; }

/* --- Footer ------------------------------------------------------------- */
.foot{ background:#100616; border-top:1px solid var(--line);
       padding-block:clamp(3rem,6vw,4.5rem); }
.foot__in{ display:grid; gap:2rem; align-items:start; }
@media (min-width:52rem){ .foot__in{ grid-template-columns:1.2fr .8fr; } }
.foot img{ width:104px; margin-bottom:.9rem; }
.foot b{ font-family:var(--display); font-weight:700; font-size:1.15rem;
         text-transform:uppercase; display:block; }
.foot ul{ list-style:none; margin:0; padding:0; columns:2; gap:1rem; }
.foot a{ color:var(--dim); text-decoration:none; font-family:var(--mono);
         font-size:.74rem; line-height:2.1; }
.foot a:hover{ color:var(--gold); }
.foot__base{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
             font-family:var(--mono); font-size:.68rem; color:var(--dim); }