* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #1a1a2e;
  color: #e0e0e0;
  padding: 20px;
  padding-top: 70px;
  max-width: 960px;
  margin: 0 auto;
}

/* ---- TOP NAV ---- */
.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  background: #0f3460;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
  border-bottom: 2px solid #e94560;
}
/* the kettlebell and the name open the menu: nothing at the right end, where iOS 27 puts its
   status chip over the bar (iPhone Duo). Taps go to the button itself, never to the image or text
   inside it: on the iPhone Duo the button sometimes stopped answering until the app was closed
   (2026-10-25, as in nossaterra; likely iOS taking the touch on the image for a drag or a long press) */
.topnav .brand {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 48px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: #ffd966;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 3px;
  white-space: nowrap;
}
.topnav .brand > * { pointer-events: none; -webkit-user-drag: none; }
.topnav .brand img { width: 34px; height: 34px; flex: none; }
.topnav .brand span {
  color: #aaa;
  font-weight: 300;
  font-size: 0.85em;
  letter-spacing: 1px;
}
.topnav .brand .open-mark {
  width: 18px;
  height: 18px;
  flex: none;
  margin-left: -4px;
  fill: none;
  stroke: #ffd966;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
.topnav .brand.open .open-mark { transform: rotate(180deg); }
.nav-menu {
  display: none;
  position: fixed;
  top: 54px;
  left: 0;
  background: #16213e;
  border: 1px solid #0f3460;
  border-top: none;
  border-radius: 0 0 10px 0;
  min-width: 220px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 999;
}
.nav-menu.open { display: block; }
.nav-menu a {
  display: block;
  padding: 14px 20px;
  color: #e0e0e0;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 1px;
  border-bottom: 1px solid #0f3460;
  transition: background 0.2s;
}
.nav-menu a:last-child { border-bottom: none; }
.nav-menu a:hover { background: #0f3460; color: #ffd966; }
.nav-menu a.active { color: #ffd966; }

/* ---- HEADER ---- */
.header {
  text-align: center;
  padding: 30px 20px;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #16213e, #0f3460);
  border-radius: 12px;
  border: 1px solid #e94560;
}
.header h1 {
  font-size: 2.8em;
  color: #ffd966;
  letter-spacing: 6px;
  margin-bottom: 6px;
}
h2 {
  font-size: 1.2em;
  color: #aaa;
  font-weight: 300;
}
body > h2 {
  font-style: italic;
}
.header h2 {
  margin-bottom: 16px;
}
.header .tags {
  text-align: center;
}
.header .tags .tag {
  display: inline-block;
  margin: 4px 6px;
}
.header .tag {
  background: #e94560;
  color: #fff;
  padding: 6px 18px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.95em;
  letter-spacing: 1px;
  text-decoration: none;
}
.header a.tag:hover {
  background: #ff6b81;
}

/* ---- COMING SOON ---- */
.coming_soon {
  text-align: center;
  padding: 80px 20px;
  margin: 40px 0;
  background: linear-gradient(135deg, #16213e, #0f3460);
  border: 4px dashed #ffd966;
  border-radius: 12px;
}
.coming_soon .icon {
  font-size: 3em;
  margin-bottom: 16px;
}
.coming_soon h2 {
  color: #ffd966;
  font-size: 1.8em;
  font-weight: 700;
  letter-spacing: 3px;
  font-style: normal;
}
.coming_soon p {
  color: #aaa;
  margin-top: 12px;
  font-size: 1em;
}

/* ---- GRADUATION / PROGRAM COMPLETE ---- */
.graduation {
  text-align: center;
  padding: 50px 25px;
  margin: 40px 0;
  background: linear-gradient(135deg, #16213e, #0f3460);
  border: 2px solid #ffd966;
  border-radius: 12px;
}
.graduation svg {
  width: 120px;
  height: 110px;
  margin-bottom: 18px;
}
.graduation h2 {
  color: #ffd966;
  font-size: 2em;
  font-weight: 700;
  letter-spacing: 4px;
  font-style: normal;
  margin-bottom: 18px;
}
.graduation p {
  color: #e0e0e0;
  font-size: 1.1em;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 14px;
}
.graduation p.signoff {
  color: #aaa;
  font-style: italic;
}
.graduation .cta {
  display: inline-block;
  margin-top: 22px;
  background: #e94560;
  color: #fff;
  padding: 12px 28px;
  border-radius: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  transition: background 0.2s;
}
.graduation .cta:hover {
  background: #ff6b81;
}

/* ---- WORKOUT SELECTOR ---- */
.wo-selector {
  display: inline-block;
  position: relative;
  margin: 4px 6px;
}
.wo-selector .tag {
  cursor: pointer;
  display: inline-block;
  padding-right: 28px;
}
.wo-selector .tag::after {
  content: '\25BC';
  font-size: 0.6em;
  margin-left: 6px;
  vertical-align: middle;
}
.wo-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: #16213e;
  border: 1px solid #e94560;
  border-radius: 10px;
  min-width: 160px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  z-index: 100;
}
.wo-dropdown.open { display: block; }
.wo-dropdown a {
  display: block;
  padding: 12px 16px;
  color: #e0e0e0;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 1px;
  border-bottom: 1px solid #0f3460;
  transition: background 0.2s;
}
.wo-dropdown a:last-child { border-bottom: none; }
.wo-dropdown a:hover { background: #0f3460; color: #ffd966; }
.wo-dropdown a.active { color: #ffd966; }

/* ---- SECTION TITLES ---- */
.section-title {
  text-align: center;
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: 3px;
  color: #ffd966;
  margin: 40px 0 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid #ffd966;
}
.section-title.superset {
  color: #e94560;
  border-bottom-color: #e94560;
}
.section-title.cooldown {
  color: #4571e9;
  border-bottom-color: #4571e9;
}

/* ---- EXERCISE TABLE ---- */
table.exercises {
  width: 100%;
  border-collapse: separate;
  border-spacing: 12px;
}
table.exercises td {
  background: #16213e;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  vertical-align: top;
  width: 50%;
  border: 1px solid #0f3460;
  transition: border-color 0.2s;
}
table.exercises td:hover {
  border-color: #e94560;
}
table.exercises img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  display: block;
  margin: 0 auto 10px;
}
table.exercises .exercise-name {
  font-size: 1.05em;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}
table.exercises .exercise-reps {
  font-size: 1.05em;
  font-style: italic;
  color: #aaa;
  letter-spacing: 1px;
}
table.exercises td.centered {
  width: 50%;
}

/* ---- FOOTER ---- */
.footer {
  text-align: center;
  padding: 30px;
  margin-top: 40px;
  color: #555;
  font-size: 0.85em;
}