/* =====================================================================
   CADRE CLUB  (Roadside look)
   Old roadside signs and motel stripes. Logo, headings and buttons use
   Bungee, a font drawn after street signage. Everything else uses
   Barlow, modeled on California highway signs and license plates.

   Part 1: colors and fonts      Part 2: header
   Part 3: home page             Part 4: latest videos
   Part 5: Route 66 page         Part 6: footer and accessibility
   ===================================================================== */


/* ========== PART 1: COLORS AND FONTS ========== */
:root {
  --orange: #FF4300;   /* official darker orange, the main one */
  --amber:  #FF9400;   /* official lighter orange */
  --bg:     #1A0F0A;   /* page background, warm near-black brown */
  --panel:  #25160E;   /* slightly lighter boxes */
  --text:   #F7E6D3;   /* main text, warm off-white */
  --muted:  #C7A68B;   /* secondary text */
  --line:   rgba(255, 148, 0, 0.28);

  --sign:   "Bungee", "Arial Black", sans-serif;
  --body:   "Barlow", system-ui, sans-serif;
  --narrow: "Barlow Condensed", "Arial Narrow", sans-serif;

  --page-width: 1320px;
  --gutter: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: var(--body); font-size: 17px; line-height: 1.55;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
main { flex: 1; }

/* The orange sign button: used for Learn more and Contribute now */
.btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  font-family: var(--sign);
  font-size: 18px;
  padding: 16px 30px;
  background: var(--orange);
  color: var(--bg);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--amber);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover  { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--amber); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--amber); }


/* ========== PART 2: HEADER  (members | logo | pages) ========== */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "members logo pages";
  align-items: center;
  gap: 16px;
  padding: 20px var(--gutter);
  border-bottom: 4px solid var(--orange);
  box-shadow: 0 4px 0 var(--bg), 0 8px 0 var(--amber);   /* the second stripe */
  margin-bottom: 8px;
}
.logo {
  grid-area: logo;
  justify-self: center;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--sign);
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1;
  color: var(--amber);
  text-shadow: 3px 3px 0 var(--orange), 6px 6px 0 #3A1708;  /* stacked sign depth */
}
.nav-members { grid-area: members; justify-self: start; }
.nav-pages   { grid-area: pages;   justify-self: end; }
.nav-members, .nav-pages {
  display: flex; flex-wrap: wrap; gap: 4px 28px;
  font-family: var(--narrow); font-weight: 600; font-size: 27px; line-height: 1.2;
}
.nav-members a, .nav-pages a {
  text-decoration: none; color: var(--muted);
  padding: 4px 0; border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.nav-members a:hover, .nav-pages a:hover { color: var(--text); }

/* Each member's name always shows in their own color.
   David's and Ethan's are the lighter versions used on their own pages,
   because their main colors are too dark to read on this background. */
.nav-members .member-paul   { color: #4293BD; }   /* Paul's blue */
.nav-members .member-nathan { color: #E06717; }   /* Nathan's orange */
.nav-members .member-david  { color: #7CC456; }   /* David's green (main: #3F7C27) */
.nav-members .member-ethan  { color: #E874AB; }   /* Ethan's pink (main: #AB3670) */
.nav-members a:hover { border-bottom-color: currentColor; }   /* underline in their color */
.nav-pages a[aria-current="page"] { color: var(--amber); border-bottom-color: var(--orange); }

/* Tablet: logo gets its own row, the two menus share the row under it */
@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr 1fr; grid-template-areas: "logo logo" "members pages"; row-gap: 12px; }
  .nav-members, .nav-pages { font-size: 24px; gap: 4px 20px; }
}
/* Phone: everything centered and stacked */
@media (max-width: 560px) {
  .site-header { grid-template-columns: 1fr; grid-template-areas: "logo" "pages" "members"; }
  .nav-members, .nav-pages { justify-self: center; justify-content: center; font-size: 22px; }
}


/* ========== PART 3: HOME PAGE  (two columns) ========== */
.home {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 44px) var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: stretch;       /* both columns end at the same height */
}

/* --- Left column --- */
.links { display: flex; flex-direction: column; gap: 16px; }

.discord {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 24px 22px;
  background: var(--orange);
  color: var(--bg);
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--amber);
  text-decoration: none;
  font-family: var(--sign);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.1;
  margin-bottom: 6px;
  transition: transform .12s, box-shadow .12s;
}
.discord .icon { width: 36px; height: 36px; flex: none; }
.discord:hover  { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--amber); }
.discord:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--amber); }

.links-banner { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border: 3px solid var(--amber); border-radius: 6px; }

/* The link boxes share whatever height is left, so the left column
   always ends exactly where the Route 66 box ends. */
.link-list { flex: 1; display: grid; grid-auto-rows: 1fr; gap: 16px; }   /* same 16px as the space above the list */
.link-list > li { display: flex; }   /* each box fills its whole row, so the gaps stay exactly 16px */
.link-list .link { flex: 1; }
.link {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--narrow); font-weight: 700; font-size: 26px; line-height: 1.1;
  color: var(--text);
  transition: background .15s, border-color .15s, color .15s;
}
.link .icon { width: 28px; height: 28px; flex: none; color: var(--amber); transition: color .15s; }
/* Name on top, address in small text underneath (like 7pej.com) */
.link-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.link-name { line-height: 1.05; }
.link-sub {
  font-family: var(--body); font-weight: 500; font-size: 15px; line-height: 1.2;
  color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .15s;
}
.link:hover .link-sub { color: var(--bg); }
.link:hover { background: var(--orange); border-color: var(--orange); color: var(--bg); }
.link:hover .icon { color: var(--bg); }

/* --- Right column: Route 66, everything centered --- */
.r66 { display: flex; flex-direction: column; background: var(--panel); border: 3px solid var(--amber); border-radius: 8px; overflow: hidden; }
.r66-banner { width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; border-bottom: 3px solid var(--amber); }
.r66-body {
  padding: clamp(28px, 3.4vw, 48px) clamp(20px, 3vw, 40px);
  flex: 1;
  display: grid; gap: 16px; justify-items: center; align-content: center; text-align: center;
}
.r66 h1 {
  font-family: var(--sign); font-weight: 400; line-height: 1;
  font-size: clamp(44px, 6vw, 80px);
  color: var(--amber); text-shadow: 3px 3px 0 var(--orange);
}
.r66-sub  { font-family: var(--narrow); font-weight: 600; font-size: 24px; }
.r66-text { max-width: 54ch; color: var(--muted); margin-bottom: 8px; }

@media (max-width: 900px) {
  .home { grid-template-columns: 1fr; }
  .links { max-width: 560px; width: 100%; margin: 0 auto; }
  .link-list { grid-auto-rows: auto; }
}


/* ========== PART 4: LATEST VIDEOS  (full width, always sliding) ========== */
.videos { margin-top: clamp(48px, 6vw, 80px); padding-bottom: 72px; }
.videos-head { max-width: var(--page-width); margin: 0 auto 20px; padding: 0 var(--gutter); }
.videos h2 { font-family: var(--sign); font-weight: 400; font-size: clamp(26px, 2.8vw, 36px); }

.video-track {
  --cards: 3;                 /* how many videos fit across the screen */
  --gap: 16px;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}
.video-track::-webkit-scrollbar { display: none; }
.card {
  flex: 0 0 calc((100% - (var(--cards) - 1) * var(--gap)) / var(--cards));
  display: grid; gap: 12px; align-content: start;
  text-decoration: none; color: var(--text);
}
.card-thumb {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border: 3px solid var(--line); border-radius: 6px;
  transition: border-color .15s;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card-thumb { border-color: var(--amber); }
.card-title { font-family: var(--narrow); font-weight: 600; font-size: 22px; line-height: 1.25; padding: 0 4px; }
@media (max-width: 1000px) { .video-track { --cards: 2; } }
@media (max-width: 600px)  { .video-track { --cards: 1.3; } }


/* ========== PART 5: ROUTE 66 PAGE  (everything centered) ========== */
.film {
  width: 100%; max-width: var(--page-width); margin: 0 auto;
  padding: clamp(32px, 4vw, 56px) var(--gutter) 80px;
}
.film-head {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 24px; text-align: center; margin-bottom: 36px;
}
.film-head h1 {
  width: 100%;
  font-family: var(--sign); font-weight: 400; line-height: 1;
  font-size: clamp(60px, 11vw, 144px);
  color: var(--amber); text-shadow: 4px 4px 0 var(--orange);
}
.film-kicker { font-family: var(--narrow); font-weight: 600; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; }
.film-soon {
  font-family: var(--narrow); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1;
  color: var(--bg); background: var(--amber); padding: 4px 16px; border-radius: 4px;
}
.film-banner { width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; border: 3px solid var(--amber); border-radius: 8px; }

/* Info box under the banner */
.film-info {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px);
  background: var(--panel);
  border: 3px solid var(--amber);
  border-radius: 8px;
  text-align: center;
  display: grid; gap: 16px; justify-items: center;
}
.film-info h2 { font-family: var(--sign); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); color: var(--amber); }
.film-info p  { max-width: min(952px, 85%); font-size: 19px; }   /* half the side space it had before */

/* Mailing list button: same sign style as the Discord button on the home page */
.mailing {
  display: grid; gap: 6px; justify-items: center;
  width: 100%;
  margin-top: 24px;
  padding: 26px 24px;
  background: var(--orange);
  color: var(--bg);
  border: 0;
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--amber);
  text-align: center;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.mailing:hover  { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--amber); }
.mailing:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--amber); }
.mailing-title { font-family: var(--sign); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; }
.mailing-sub   { font-family: var(--narrow); font-weight: 600; font-size: clamp(18px, 1.8vw, 22px); }

/* Mailing list pop-up */
.signup {
  width: min(460px, calc(100vw - 32px));
  padding: 40px 32px 32px;
  background: var(--panel);
  color: var(--text);
  border: 3px solid var(--amber);
  border-radius: 8px;
  text-align: center;
}
.signup::backdrop { background: rgba(10, 6, 4, .75); }
.signup[open] { animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.signup h2 { font-family: var(--sign); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--amber); margin-bottom: 10px; }
.signup p  { color: var(--muted); }
.signup-form, .signup-done { display: grid; gap: 12px; }
.signup [hidden] { display: none; }   /* only one of the two screens shows at a time */
.signup-label { font-family: var(--narrow); font-weight: 600; font-size: 18px; text-align: left; margin-top: 8px; }
.signup-input {
  font: inherit; font-size: 18px;
  width: 100%; padding: 14px 16px;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--line); border-radius: 6px;
}
.signup-input:focus { outline: none; border-color: var(--amber); }
.signup-trap { position: absolute; left: -9999px; }
.signup-error { color: #FF8A65; font-weight: 600; }
.signup-note { font-size: 14px; color: var(--muted); font-style: italic; }
.signup-btn { border: 0; cursor: pointer; margin-top: 8px; }
.signup-btn[disabled] { opacity: .6; cursor: wait; }
.signup-x {
  position: absolute; top: 10px; right: 12px;
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.signup-x:hover { background: var(--line); color: var(--text); }

/* Organizations */
.orgs { margin-top: clamp(56px, 6vw, 88px); }
.orgs h2 { font-family: var(--sign); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); text-align: center; margin-bottom: 32px; }
.org-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.org {
  position: relative;
  isolation: isolate;               /* keeps the faded photo behind the content */
  overflow: hidden;
  min-height: 800px;                /* the column height */
  display: flex; flex-direction: column; align-items: center;   /* name, photo, text from the top */
  gap: 24px;
  padding: 40px 28px;
  text-align: center;
  background: var(--panel);
  border: 3px solid var(--amber);
  border-radius: 8px;
}
.org-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.3; }
.org::before {                      /* darkens the faded photo so text stays readable */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26, 15, 10, 0.45), rgba(26, 15, 10, 0.85));
}
.org-name  { font-family: var(--sign); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--amber); }
.org-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; border: 2px solid var(--line); }
.org-text  { max-width: 32ch; font-size: 18px; }
.org .btn  { align-self: stretch; margin-top: auto; }   /* pushes the button to the bottom */

@media (max-width: 900px) {
  .org-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .org { min-height: 640px; }
}


/* ========== PART 6: FOOTER AND ACCESSIBILITY ========== */
.site-footer {
  padding: 28px var(--gutter); text-align: center;
  font-family: var(--narrow); color: var(--muted);
  border-top: 2px solid var(--line);
}
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}