/* RetroHits — member access pages.
   One stylesheet for all nine screens: sign-in, first access, password set/reset,
   confirmation screens and the GOLD unlock page. */

/* Self-hosted faces. Paths are relative to /login/, so the /fonts/ folder at the site
   root is a hard requirement for these pages, exactly like on the home page. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/Barlow400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/Barlow400-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/Barlow500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/Barlow700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/Barlow700-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ArchivoBlack-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/ArchivoBlack-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/BebasNeue-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Permanent Marker';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/PermanentMarker-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}

:root{
  color-scheme: dark;
  --ink:#0A0807;
  --panel:#140F0D;
  --panel-2:#1C1512;
  --field:#0E0B09;
  --line:rgba(240,224,192,.13);
  --line-2:rgba(232,163,61,.3);
  --text:#F3EADA;
  --muted:#C9BCA5;
  --dim:#8E8271;
  --amber:#E8A33D;
  --gold:#F5C542;
  --orange:#FF6B1A;
  --ember:#E03E12;
  --go:#22C55E;
  --go-deep:#15803D;
  --gold-grad:linear-gradient(150deg,#F5C542,#FF6B1A 58%,#E03E12);
  --d70:#E8B84B; --d80:#FF5A1F; --d90:#22D3EE; --d00:#B265F5;
  --shadow-hard:6px 6px 0 rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--text);background:var(--ink);min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ===== STAGE =====
   Two columns on desktop: a poster panel that carries the brand, and the form itself.
   Below 900px the poster panel is dropped entirely rather than stacked — on a phone it
   would push the form under the fold, and this is a screen people arrive at to type. */
.stage{
  /* align-content:center matters — without it the implicit rows stretch to fill 100vh
     and the brand, the decade strip and the card drift apart. */
  min-height:100vh;display:grid;grid-template-columns:1fr;
  align-content:center;justify-items:center;padding:2.5rem 1.25rem;
  position:relative;
  background:
    radial-gradient(70% 48% at 50% -8%, rgba(255,107,26,.16), transparent 64%),
    radial-gradient(60% 46% at 50% 108%, rgba(232,163,61,.08), transparent 62%),
    var(--ink);
}

/* Paper grain, same tile as the home page so the two feel like one site */
.stage::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ===== BRAND ===== */
.brand-mark{
  display:flex;align-items:baseline;justify-content:center;gap:.45rem;
  text-decoration:none;margin-bottom:1.5rem;position:relative;z-index:1;line-height:1;
}
.brand-mark .rt{
  font-family:'Archivo Black',Impact,sans-serif;font-size:2rem;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--text);
  text-shadow:0 3px 0 rgba(0,0,0,.55),0 0 26px rgba(255,107,26,.2);
}
.brand-mark .hs{
  font-family:'Permanent Marker',cursive;font-size:2.15rem;display:inline-block;
  transform:rotate(-4deg);
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(224,62,18,.35));
}
@media (max-width:380px){
  .brand-mark .rt{font-size:1.55rem}
  .brand-mark .hs{font-size:1.65rem}
}

/* Four decade marks as dashes rather than dots — same idea the album covers use */
.decade-strip{display:flex;gap:.35rem;justify-content:center;margin-bottom:1.5rem;position:relative;z-index:1}
.decade-strip span{width:26px;height:3px;display:inline-block;border-radius:1px}
.decade-strip .d70{background:var(--d70)}
.decade-strip .d80{background:var(--d80)}
.decade-strip .d90{background:var(--d90)}
.decade-strip .d00{background:var(--d00)}

/* ===== AUTH CARD ===== */
.auth-box{
  width:min(420px,100%);background:var(--panel);
  border:1px solid var(--line);border-radius:6px;padding:2.1rem 1.9rem;
  box-shadow:0 34px 70px rgba(0,0,0,.62);
  position:relative;z-index:1;
}
/* Perforated top edge — the printed-ticket detail carried over from the home page */
.auth-box::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:8px;
  background-image:radial-gradient(circle at 8px 50%,var(--ink) 4.5px,transparent 5px);
  background-size:16px 8px;
}

.auth-box h1{
  font-family:'Archivo Black',Impact,sans-serif;text-transform:uppercase;letter-spacing:-.018em;
  font-size:1.42rem;color:#fff;text-align:center;margin-bottom:.45rem;line-height:1.1;
}
.auth-box .sub{color:var(--muted);font-size:.9rem;text-align:center;line-height:1.55;margin-bottom:1.75rem}

/* ===== FORM — filled boxes, not underlines ===== */
.auth-form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field span{
  font-family:'Bebas Neue',Impact,sans-serif;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.field input{
  width:100%;background:var(--field);border:1px solid #2A211B;border-radius:5px;
  color:var(--text);padding:.72rem .8rem;font-size:1rem;font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,163,61,.14)}
.field input::placeholder{color:#544838}
.field input:read-only{color:var(--muted);background:#0B0908}

.input-wrap{position:relative}
.input-wrap input{padding-right:42px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--dim);cursor:pointer;padding:6px;display:flex;align-items:center;transition:color .2s;
}
.pw-toggle:hover{color:var(--amber)}

/* ===== PRIMARY BUTTON — same green + hard shadow as the home page CTA ===== */
.primary{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:50px;border:0;border-radius:6px;
  font-family:inherit;font-weight:700;font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;background:linear-gradient(175deg,var(--go),var(--go-deep));color:#04180C;
  box-shadow:var(--shadow-hard);transition:transform .16s,box-shadow .16s;
  margin-top:6px;text-decoration:none;padding:.8rem 1rem;
}
.primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.6)}
.primary:active{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(0,0,0,.5)}
.primary .btn-spinner{
  width:15px;height:15px;border:2px solid rgba(4,24,12,.3);border-top-color:#04180C;
  border-radius:50%;opacity:0;transform:scale(.85);transition:opacity .2s,transform .2s;
  animation:spin .8s linear infinite;
}
.primary.loading{pointer-events:none;opacity:.85}
.primary.loading .btn-spinner{opacity:1;transform:scale(1)}
@keyframes spin{to{transform:rotate(360deg)}}

.secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:44px;border:1px solid var(--line);border-radius:6px;
  font-family:inherit;font-weight:600;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  cursor:pointer;background:transparent;color:var(--muted);
  text-decoration:none;transition:border-color .2s,color .2s;margin-top:12px;padding:.6rem 1rem;
}
.secondary:hover{border-color:var(--amber);color:var(--text)}

.auth-links{margin-top:18px;display:flex;justify-content:space-between;gap:12px;font-size:.82rem;flex-wrap:wrap}
.auth-links a{color:var(--dim);text-decoration:none;transition:color .2s}
.auth-links a:hover{color:var(--gold)}

.auth-foot{
  margin-top:1.9rem;padding-top:1.15rem;border-top:1px dashed var(--line);
  font-size:.74rem;color:var(--dim);display:flex;flex-direction:column;gap:6px;
  align-items:center;text-align:center;
}
.support-link{color:var(--dim);text-decoration:none;transition:color .2s}
.support-link:hover{color:var(--gold)}

.notice{
  background:rgba(232,163,61,.09);border:1px solid rgba(232,163,61,.3);color:#F0CE8E;
  padding:12px 14px;font-size:.86rem;margin-bottom:20px;border-radius:5px;line-height:1.5;
}
.hidden{display:none !important}

/* ===== SUCCESS TOAST ===== */
.success-toast{
  position:fixed;top:24px;left:50%;transform:translateX(-50%) translateY(-20px);
  background:linear-gradient(175deg,var(--go),var(--go-deep));color:#04180C;
  padding:12px 22px;border-radius:6px;box-shadow:var(--shadow-hard);
  display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:700;
  z-index:9999;opacity:0;pointer-events:none;transition:all .4s ease;
}
.success-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.success-toast svg{flex-shrink:0}

@media (max-width:480px){
  .stage{padding:2rem 1rem}
  .auth-box{padding:1.7rem 1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .primary,.secondary,.success-toast{transition:none}
  .primary .btn-spinner{animation-duration:2s}
}