/* Hourwiz home page (redesign 2026-11-01). Loaded only on "/". Fixed navy / cream palette (no theme switch).
   Navy #171936, yellow #F6D65B, cream #FFF8E8, coral #FF8759. Space Grotesk headings, DM Sans body. */

.page-home {
  --navy: #171936; --navy-2: #0F1126; --yellow: #F6D65B; --cream: #FFF8E8; --cream-2: #F8EBC9; --coral: #FF8759;
  --ink: #171936; --ink-2: #4A4C6B;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--cream); color: var(--ink);
}
.page-home h1, .page-home h2, .page-home h3 { color: inherit; font-family: var(--display); font-weight: 700; }
.page-home a { color: inherit; }
.page-home :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.page-home .section-title { font-weight: 700; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); letter-spacing: -0.025em; line-height: 1.05; max-width: 22ch; }
.page-home .section-lede { color: var(--ink-2); font-size: 1.125rem; max-width: 56ch; margin: 14px 0 0; }

/* ---- header (navy over the hero) ---- */
.page-home .site-header { background: var(--navy); color: var(--cream); padding-block: 16px; position: relative; z-index: 3; }
.page-home .logo { color: var(--cream); font-weight: 700; letter-spacing: -0.02em; }
.logo b { font-weight: inherit; }
.page-home .logo b, .site-footer .logo b { color: var(--yellow); }
.page-home .nav-list a { color: var(--cream); font-weight: 500; font-size: 0.97rem; }
.page-home .nav-list a:hover { background: rgba(255, 248, 232, 0.12); }
.page-home .nav-list .nav-pill { background: var(--yellow); color: var(--navy); font-weight: 700; }
.page-home .nav-list .nav-pill:hover { background: #FFE27F; opacity: 1; }
.page-home .nav-yt .brand-icon { width: 20px; height: 20px; }
.page-home .skip { background: var(--yellow); color: var(--navy); }

/* ---- hero ---- */
.hero { position: relative; background: var(--navy); color: var(--cream); overflow: hidden; padding-block: clamp(28px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 62% at 74% 48%, rgba(246, 214, 91, 0.34), rgba(246, 214, 91, 0.10) 48%, transparent 72%);
  opacity: 0; animation: glow-in 1.6s ease-out 0.15s forwards;
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(16px, 4vw, 56px); }
.hero-title { font-size: clamp(2.6rem, 1.2rem + 5.2vw, 5.4rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 11ch; color: var(--cream); }
.hero-title .stop { color: var(--coral); }
.hero-sub { margin: 22px 0 30px; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); color: #E4E1EE; max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.btn-y, .btn-g {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font: 700 1rem/1 var(--display); text-decoration: none; letter-spacing: -0.005em;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.page-home .btn-y { background: var(--yellow); color: var(--navy); }
.page-home .btn-y:hover { background: #FFE27F; transform: translateY(-2px); }
.page-home .btn-g { border: 1.5px solid rgba(255, 248, 232, 0.7); color: var(--cream); }
.page-home .btn-g:hover { border-color: var(--yellow); color: var(--yellow); transform: translateY(-2px); }
.hero-bulb { display: grid; place-items: center; }
.bulb { width: min(100%, 440px); height: auto; overflow: visible; }

/* The bulb lights up once on load (filament, then the glass); the final state is the static look. */
.bulb .bulb-body { animation: glass-on 1.2s ease-out 0.35s both; }
.bulb .fil { animation: fil-on 1.1s ease-out 0.25s both; }
.bulb .fil-glow { animation: fil-glow-on 1.3s ease-out 0.25s both; }
.bulb .bulb-base { animation: base-on 1s ease-out 0.5s both; }
@keyframes glow-in { to { opacity: 1; } }
@keyframes glass-on { from { stroke-opacity: 0.45; } to { stroke-opacity: 1; } }
@keyframes fil-on { 0% { stroke: #5A5233; } 35% { stroke: #5A5233; } 100% { stroke: #F6D65B; } }
@keyframes fil-glow-on { from { opacity: 0; } to { opacity: 0.7; } }
@keyframes base-on { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; opacity: 1; }
  .bulb .bulb-body, .bulb .fil, .bulb .fil-glow, .bulb .bulb-base { animation: none; }
  .bulb .fil-glow { opacity: 0.7; }
}

/* ---- the W filament line + nodes at section joins ---- */
.join { position: relative; z-index: 2; height: 0; display: flex; justify-content: center; pointer-events: none; }
.join-node {
  position: absolute; top: -22px; left: 50%; margin-left: -22px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--yellow); display: grid; place-items: center; box-shadow: 0 0 0 5px rgba(246, 214, 91, 0.22), 0 0 26px 4px rgba(246, 214, 91, 0.45);
}
.join-node svg { width: 28px; height: 28px; }
.join-line { position: absolute; left: 50%; width: 2px; margin-left: -1px; height: 56px; background: linear-gradient(var(--c1), var(--c2)); box-shadow: 0 0 10px rgba(246, 214, 91, 0.7); border-radius: 2px; }
.join-line:first-child { bottom: 22px; --c1: transparent; --c2: #E8B923; }
.join-line:last-child { top: 22px; --c1: #E8B923; --c2: transparent; }
.join-navy-cream .join-line:first-child, .join-cream-navy .join-line:last-child { --c1: transparent; }

/* ---- latest videos ---- */
.latest-videos { padding-block: clamp(64px, 8vw, 112px) clamp(48px, 6vw, 80px); background: var(--cream); }
.vscroll { max-width: var(--wrap); margin: 36px auto 0; padding-inline: var(--gutter); }
.vgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.vcard { display: flex; flex-direction: column; min-width: 0; }
.vthumb {
  position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--navy);
  box-shadow: 0 1px 0 rgba(23, 25, 54, 0.08), 0 18px 34px -22px rgba(23, 25, 54, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.vcard:hover .vthumb { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(23, 25, 54, 0.08), 0 26px 40px -22px rgba(23, 25, 54, 0.6); }
.vcard:hover .vthumb img { transform: scale(1.04); }
.vthumb-plain { display: flex; align-items: flex-end; padding: 22px 18px; background: linear-gradient(160deg, #22264F, var(--navy) 60%); }
.vthumb-title { font: 700 1.35rem/1.15 var(--display); color: var(--cream); letter-spacing: -0.02em; }
.vthumb-w { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; }
.vmeta { margin: 14px 0 0; font: 500 0.72rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.vtitle { margin: 6px 0 0; font-size: 1.1rem; line-height: 1.25; letter-spacing: -0.015em; }
.vtitle a { text-decoration: none; }
.vtitle a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vlinks { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.vwatch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--navy); color: var(--cream) !important; font: 700 0.9rem/1 var(--display); text-decoration: none;
}
.vwatch:hover { background: #2A2D5C; }
.vwatch .brand-icon { width: 18px; height: 18px; color: var(--coral); }
.valt { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(23, 25, 54, 0.35); }
.valt:hover { background: var(--navy); color: var(--cream); }
.valt .brand-icon { width: 18px; height: 18px; }
.vexplore { margin: 12px 0 0; font-weight: 700; font-size: 0.95rem; }
.vexplore a { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vexplore a:hover { text-decoration-color: var(--navy); }
.lv-all { margin: 36px 0 0; font-weight: 700; }
.lv-all a { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }

/* ---- science band ---- */
.science { background: var(--navy); color: var(--cream); padding-block: clamp(72px, 9vw, 128px); position: relative; }
.sci-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.science .section-title { color: var(--cream); }
.sci-copy p { font-size: 1.15rem; color: #E4E1EE; max-width: 44ch; margin: 20px 0 0; }
.sci-cta a { display: inline-block; font: 700 1rem/1.3 var(--display); color: var(--yellow); text-decoration: none; border-bottom: 2px solid var(--yellow); padding-bottom: 3px; }
.sci-cta a:hover { color: #fff; border-color: #fff; }
.sci-art { border: 1px solid rgba(255, 248, 232, 0.28); border-radius: 20px; padding: clamp(16px, 3vw, 32px); background: radial-gradient(ellipse at 50% 30%, rgba(246, 214, 91, 0.10), transparent 70%); }
.sci-svg { display: block; width: 100%; height: auto; max-height: 420px; }

/* ---- topic tiles ---- */
.shows { background: var(--cream); padding-block: clamp(72px, 9vw, 120px) clamp(56px, 7vw, 88px); }
.topics { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.topic a {
  display: flex; flex-direction: column; height: 100%; padding: 28px 26px 26px; border-radius: 20px; text-decoration: none;
  background: var(--navy); color: var(--cream); border: 1px solid transparent; transition: transform 0.2s ease, border-color 0.2s ease;
}
.topic a:hover { transform: translateY(-4px); border-color: var(--yellow); }
.topic-icon svg { width: 64px; height: 64px; fill: none; stroke: var(--yellow); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; display: block; }
.topic-icon .dot { fill: var(--yellow); stroke: none; }
.topic-name { margin: 20px 0 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.topic-body { margin: 10px 0 18px; color: #D9D6E6; flex: 1; }
.topic-cta { font: 700 0.95rem/1.3 var(--display); color: var(--yellow); }

/* ---- newsletter (cream band) ---- */
.newsletter { background: var(--cream-2); padding-block: clamp(64px, 8vw, 104px); }
.nl-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.nl-lede { font-size: 1.15rem; color: var(--ink-2); margin: 16px 0 26px; max-width: 48ch; }
.newsletter .signup-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.newsletter .signup-row { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter .signup input[type="email"] {
  flex: 1 1 240px; min-height: 54px; padding: 0 22px; border-radius: 999px; border: 1.5px solid #7B7D99; background: #fff; color: var(--ink);
  font: 400 1rem/1 var(--body);
}
.newsletter .signup input[type="email"]:focus { outline: 3px solid var(--yellow); outline-offset: 2px; border-color: var(--navy); box-shadow: 0 0 0 5px rgba(246, 214, 91, 0.45); }
.newsletter .signup .btn {
  min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--navy); color: var(--cream); box-shadow: none;
  font: 700 1rem/1 var(--display);
}
.newsletter .signup .btn:hover { background: #2A2D5C; filter: none; }
.newsletter .signup .btn:active { transform: none; box-shadow: none; }
.newsletter .signup-help { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-2); }
.newsletter .signup-help a { color: var(--ink); }
.newsletter .signup-status { margin: 8px 0 0; min-height: 1.4em; font-weight: 700; }
.newsletter .signup-status[data-tone="error"] { color: #B0122B; }
.newsletter .signup-status[data-tone="ok"] { color: #0A6B57; }
.issue { position: relative; background: var(--navy); color: var(--cream); border-radius: 18px; padding: 26px 26px 24px; transform: rotate(2deg); box-shadow: 14px 14px 0 var(--coral); }
.issue-kicker { margin: 0 0 14px; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.issue-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; padding-right: 60px; }
.issue-steps b { display: block; font: 700 1.05rem/1.2 var(--display); color: var(--cream); }
.issue-steps li { color: #D9D6E6; font-size: 0.95rem; }
.issue-file { margin: 18px 0 0; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #BDBAD0; }
.issue-wiz { position: absolute; right: 18px; bottom: 16px; width: 56px; }
.issue-wiz img { width: 100%; height: auto; display: block; }

/* ---- follow along ---- */
.follow { background: var(--cream); padding-block: clamp(64px, 8vw, 104px) clamp(36px, 5vw, 56px); }
.channels { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.channel a { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 20px 22px; border-radius: 18px; border: 1.5px solid rgba(23, 25, 54, 0.3); text-decoration: none; transition: border-color 0.2s, transform 0.2s, background-color 0.2s; }
.channel a:hover { border-color: var(--navy); background: #fff; transform: translateY(-3px); }
.channel .brand-icon { grid-row: 1 / 3; width: 36px; height: 36px; }
.channel-youtube .brand-icon { color: #D6002B; } .channel-instagram .brand-icon { color: #C2185B; } .channel-facebook .brand-icon { color: #1366D6; }
.channel-name { font: 700 1.2rem/1.2 var(--display); letter-spacing: -0.015em; }
.channel-handle { color: var(--ink-2); font-size: 0.98rem; }

/* ---- work with us ---- */
.sponsor { background: var(--cream); padding-block: 0 clamp(72px, 9vw, 112px); }
.sponsor-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center; background: var(--navy); color: var(--cream); border-radius: 24px; padding: clamp(28px, 4vw, 52px); }
.sponsor-title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.1; }
.sponsor-lede { margin: 14px 0 0; font-size: 1.15rem; color: #E4E1EE; max-width: 52ch; }
.sponsor-rule { margin: 12px 0 0; font-size: 0.98rem; color: #CFCCE0; max-width: 56ch; }
.sponsor-act { margin: 0; }

/* ---- footer / join under sponsor ---- */
.page-home .site-footer { background: var(--navy); padding-top: 72px; }
.page-home .footer-links a { text-decoration: none; }
.page-home .footer-links a:hover { text-decoration: underline; }
.page-home .footer-brand p { color: #CFCCE0; }
.page-home .footer-copy { color: #B5B2CB; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topics, .channels { grid-template-columns: 1fr; }
  .sci-grid, .nl-grid, .sponsor-card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-bulb { order: -1; margin-top: -8px; }
  .bulb { width: min(62vw, 250px); }
  .hero-title { max-width: 12ch; }
  .hero-actions .btn-y, .hero-actions .btn-g { flex: 1 1 100%; }
  /* cards scroll sideways on phones */
  .vscroll { contain: paint; padding-inline: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .vgrid { display: flex; gap: 14px; padding-inline: var(--gutter); width: max-content; }
  .vcard { flex: 0 0 min(62vw, 240px); scroll-snap-align: start; }
  .issue { transform: none; box-shadow: 8px 8px 0 var(--coral); margin-right: 8px; }
  .join-node { top: -18px; margin-left: -18px; width: 36px; height: 36px; }
  .join-node svg { width: 22px; height: 22px; }
}

/* ---- overrides of the older shared rules in styles.css (same class names) ---- */
.page-home .hero-title { text-transform: none; font-weight: 700; }
.page-home .hero { padding-block: clamp(28px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.page-home .hero-actions { margin: 0; }
.page-home .channel-youtube { grid-column: auto; grid-row: auto; }
.page-home .channel a, .page-home .channel-youtube a {
  min-height: 0; background: transparent; color: var(--ink); border: 1.5px solid rgba(23, 25, 54, 0.3); padding: 20px 22px;
}
.page-home .channel a:hover, .page-home .channel-youtube a:hover { border-color: var(--navy); background: #fff; }
.page-home .channel .brand-icon, .page-home .channel-youtube .brand-icon { width: 36px; height: 36px; margin: 0; align-self: center; }
.page-home .channel-youtube .channel-name, .page-home .channel-name { font: 700 1.2rem/1.2 var(--display); margin: 0; }
.page-home .channel-youtube .channel-handle, .page-home .channel-handle { color: var(--ink-2); font-weight: 400; }
.page-home .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-home .sponsor { border-top: 0; padding-block: 0 clamp(72px, 9vw, 112px); }
.page-home .newsletter { padding-block: clamp(64px, 8vw, 104px); }
.page-home .issue { max-width: 380px; justify-self: center; border: 0; }
.page-home .issue-file { background: none; color: #BDBAD0; padding: 0; border-radius: 0; display: block; }
.page-home .issue-wiz { right: 18px; top: auto; bottom: 16px; width: 56px; transform: none; }
.page-home .issue-steps b { text-transform: none; letter-spacing: 0; color: var(--cream); font: 700 1.05rem/1.2 var(--display); }
.page-home .issue-steps { margin: 0; }
.page-home .signup { max-width: 560px; }
.page-home .signup-row { gap: 10px; }
.page-home .signup input[type="email"] { box-shadow: none; }
.page-home .latest-videos { padding-block: clamp(64px, 8vw, 112px) clamp(48px, 6vw, 80px); }
@media (max-width: 980px) { .page-home .channels { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .page-home .newsletter .signup input[type="email"] { flex: 1 1 100%; }
  .page-home .newsletter .signup .btn { flex: 1 1 100%; }
}