/* ==========================================================
   JTSAI DESIGN LOCK (Oct 3, 2026). Read before changing anything.
   The merch page is the model for the whole site.
   - Fonts: Inter (text), Bricolage Grotesque (headlines, logo, lead-in lines). No others.
   - Colors: sand #FEF9EE, navy #1B2F5B, grey-blue #51607F, sunset stripes
     #F6C667 #F4A95F #F28C5B #E86A5A, lines #E3D6BC.
   - Sizes: text 19px, small 17px, menu 17px, logo 26px, card titles 23px,
     page titles 38-62px, lead-in lines 31px.
   - The final say is the two "MERCH-PAGE" blocks at the bottom of this file.
   - merch.html has its own built-in styles: any change here must be mirrored there.
   - Full guide: "JTSAI Website Style and Rules" in the Claude project.
   ========================================================== */
/* JumpTheSharkAI.com — shared styles */
:root {
  --cream: #FFF6E6;
  --paper: #FFFFFF;
  --ink: #1C1A2E;
  --muted: #4A4760;
  --teal: #0B6E78;
  --teal-dark: #084F57;
  --orange: #F2622E;
  --pink: #D9486E;
  --yellow: #FFC53D;
  --line: #E8DCC6;
  --radius: 14px;
  --max: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 19px;
  line-height: 1.65;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); }
h1, h2, h3 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}
h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 99; }

/* Retro stripe */
.stripe {
  height: 10px;
  background: linear-gradient(90deg,
    var(--yellow) 0 25%, var(--orange) 25% 50%, var(--pink) 50% 75%, var(--teal) 75% 100%);
}

/* Header */
header.site {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 72px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.35rem;
}
.brand svg { width: 42px; height: 42px; }
.brand span b { color: var(--teal); font-weight: 400; }
nav.main ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
nav.main a {
  display: block; padding: 10px 14px; border-radius: 10px;
  text-decoration: none; color: var(--ink); font-weight: 700;
}
nav.main a:hover { background: var(--cream); }
nav.main a[aria-current="page"] { background: var(--ink); color: #fff; }
.menu-btn {
  display: none; background: none; border: 2px solid var(--ink); border-radius: 10px;
  font: inherit; font-weight: 700; padding: 6px 14px; cursor: pointer; color: var(--ink);
}
@media (max-width: 760px) {
  .menu-btn { display: block; }
  nav.main { display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line); }
  nav.main.open { display: block; }
  nav.main ul { flex-direction: column; padding: 8px 20px 16px; }
}

/* Buttons */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px;
  font-weight: 700; text-decoration: none; font-size: 1.05rem;
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transition: transform .1s, box-shadow .1s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { color: #fff; }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-ghost:hover { color: var(--ink); }
.btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

/* Hero */
.hero { padding: 72px 0 64px; }
.hero .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.eyebrow {
  display: inline-block; background: var(--yellow); color: var(--ink);
  font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 6px; margin-bottom: 18px;
}
.hero .lede { font-size: 1.3rem; color: var(--muted); max-width: 36ch; }
.hero-art { background: var(--teal); border-radius: 24px; padding: 28px 0 0; overflow: hidden; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; }
}

/* Page header (inner pages) */
.page-head { padding: 64px 0 40px; }
.page-head p { font-size: 1.25rem; color: var(--muted); max-width: 48ch; }

/* Sections */
section.band { padding: 64px 0; }
section.alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.dark { background: var(--ink); color: #fff; }
section.dark a { color: var(--yellow); }
.section-intro { max-width: 60ch; color: var(--muted); font-size: 1.15rem; }
section.dark .section-intro { color: #D8D5E8; }

.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 26px; box-shadow: 5px 5px 0 var(--ink);
}
section.alt .card { background: var(--cream); }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .tag {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 6px;
}

/* Glossary */
.term { border-left: 6px solid var(--orange); }
.term:nth-child(3n+2) { border-left-color: var(--teal); }
.term:nth-child(3n+3) { border-left-color: var(--pink); }
.term .plain { color: var(--muted); font-size: 1rem; margin-top: 8px; }

/* Module list */
.module { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; }
.module .num {
  width: 64px; height: 64px; border-radius: 50%; background: var(--yellow);
  border: 3px solid var(--ink); display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.6rem;
}

/* About */
.about-grid { display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: start; }
.photo {
  aspect-ratio: 4/5; background: var(--teal); border: 3px solid var(--ink); border-radius: 20px;
  box-shadow: 8px 8px 0 var(--ink); display: grid; place-items: center; color: #fff;
  text-align: center; padding: 20px; font-weight: 700;
}
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.photo.has-img { aspect-ratio: 4/3; padding: 0; overflow: hidden; }
.photo.has-img picture { display: block; width: 100%; height: 100%; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .photo { max-width: 480px; width: 100%; } }
.checklist { list-style: none; padding: 0; margin: 0 0 1em; }
.checklist li { padding-left: 34px; position: relative; margin-bottom: 10px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--orange); border: 2px solid var(--ink);
}

/* Signup band */
.signup { text-align: center; }
.signup h2 { color: #fff; }
.signup p { max-width: 52ch; margin-left: auto; margin-right: auto; color: #D8D5E8; }

/* Contact */
.contact-box { max-width: 680px; }
.contact-box .big { font-size: 1.4rem; font-weight: 700; word-break: break-word; }

/* Footer */
footer.site { background: var(--ink); color: #CFCBE0; padding: 36px 0; font-size: .95rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
footer.site a { color: #fff; }
footer.site .legal { display: inline-block; margin-top: 6px; font-size: .85rem; color: #A9A4BE; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
section.dark a.btn-primary, section.dark a.btn-primary:hover { color: #fff; }

/* Brand art */
.brand img { width: 44px; height: 44px; border-radius: 50%; display: block; }
.banner { background: #FFF9ED; border-bottom: 3px solid var(--ink); }
.banner img { display: block; width: 100%; height: auto; max-width: 2048px; margin: 0 auto; }
.hero .wrap { grid-template-columns: 1fr; }
.hero .wrap > div { max-width: 760px; }

/* Nav: six items, collapse earlier */
@media (max-width: 1239px) {
  .menu-btn { display: block; }
  nav.main { display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--line); }
  nav.main.open { display: block; }
  nav.main ul { flex-direction: column; padding: 8px 20px 16px; }
}
nav.main a { white-space: nowrap; }

/* Spaces */
.space { display: block; text-decoration: none; color: var(--ink); transition: transform .1s, box-shadow .1s; }
.space:hover { color: var(--ink); transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--ink); }
.space .go { font-weight: 700; color: var(--teal); }
.space-pit { border-top: 10px solid var(--pink); }
.space-study { border-top: 10px solid var(--orange); }
.pit-head { background: linear-gradient(180deg, #FFE3D3, var(--cream)); }
.study-head { background: linear-gradient(180deg, #FFE0C2, var(--cream)); }

/* Chat panel */
.pit-grid { align-items: start; }
.chat { background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; min-height: 420px; }
.chat-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--pink); color: #fff; border-bottom: 3px solid var(--ink); }
.chat-top .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); }
.chat-status { margin-left: auto; font-size: .9rem; font-weight: 700; }
.chat-body { flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 14px; background: var(--cream); }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg img { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.msg > div { background: var(--paper); border: 2px solid var(--ink); border-radius: 4px 14px 14px 14px; padding: 10px 14px; font-size: 1rem; }
.msg p { margin: 2px 0 0; }
.chat-input { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-top: 3px solid var(--ink); color: var(--muted); font-size: .95rem; }
.chat-input span:first-child { flex: 1; border: 2px dashed var(--line); border-radius: 999px; padding: 8px 14px; }
.chat-input .send { background: var(--line); color: var(--muted); font-weight: 700; border-radius: 999px; padding: 8px 16px; }

/* Study timer + progress */
.timer { display: flex; flex-direction: column; align-items: center; background: var(--ink); color: #fff; border-radius: 16px; padding: 18px; margin: 8px 0 18px; }
.timer #t-mode { font-weight: 700; color: var(--yellow); letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; }
.timer #t-clock { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: clamp(3rem, 10vw, 4.5rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
button.btn { font-family: inherit; cursor: pointer; }
.sr-note { margin-top: 12px; font-weight: 700; color: var(--teal); min-height: 1.6em; }
.progress { list-style: none; padding: 0; margin: 0 0 12px; }
.progress li { border-bottom: 1px solid var(--line); }
.progress label { display: flex; gap: 12px; align-items: center; padding: 10px 0; cursor: pointer; }
.progress input { width: 24px; height: 24px; accent-color: var(--orange); flex: none; }
.progress-count { font-weight: 700; color: var(--teal); }
header.site .wrap { max-width: 1260px; }
.brand { flex-shrink: 0; }
nav.main a { padding: 10px 12px; }


/* ==========================================================
   MERCH-PAGE TYPE, SITE-WIDE (Dave, Oct 3 2026)
   Fonts and sizes copied from merch.html so every page matches it:
   Inter for reading, Bricolage Grotesque for headlines and lead-in lines (brand fonts as of Oct 3, 2026).
   ========================================================== */
body { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 19px; line-height: 1.5; }
h1, h2, h3 { font-family: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-weight: 800; letter-spacing: -0.015em; }
h1 { font-size: clamp(38px, 6vw, 62px); line-height: 1.02; margin: 6px 0 14px; text-wrap: balance; }
h2 { font-size: clamp(30px, 4vw, 40px); line-height: 1.1; }
h3 { font-size: 23px; line-height: 1.15; }

/* Lead-in lines ("eyebrows") become the merch page's script line */
.eyebrow { background: none; padding: 0; border-radius: 0; text-transform: none; letter-spacing: 0;
  font-family: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.3;
  color: var(--teal); margin-bottom: 4px; }
section.dark .eyebrow { color: var(--yellow); }

/* Intro paragraphs: merch size */
.hero .lede, .page-head p, .section-intro { font-size: 19px; }
.term .plain, .msg > div { font-size: 17px; }

/* Header + menu: merch style (Bricolage Grotesque logo, lighter 17px menu, yellow underline on current page) */
.brand { font-family: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; font-weight: 800; letter-spacing: -0.01em; font-size: 26px; }
nav.main ul { gap: 6px 18px; align-items: center; }
nav.main a { padding: 6px 0; border-radius: 0; font-weight: 400; font-size: 17px; color: #51607F; }
nav.main a:hover { background: none; color: var(--ink); }
nav.main a[aria-current="page"] { background: none; color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--yellow); }
@media (max-width: 1239px) {
  nav.main ul { gap: 0; }
  nav.main a { padding: 10px 12px; font-size: 19px; }
  nav.main a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--yellow); }
}

/* Buttons and small labels: merch sizes */
.btn { font-size: 17px; }
.tag { font-size: 14px; }


/* ==========================================================
   MERCH-PAGE HEADER + COLORS, SITE-WIDE (Dave, Oct 3 2026)
   Same sunset stripes, sand header and navy text as merch.html
   ========================================================== */
:root { --cream: #FEF9EE; --ink: #1B2F5B; --muted: #51607F; --line: #E3D6BC; }
.bars { display: grid; grid-template-rows: repeat(4, 4px); gap: 3px; padding-top: 6px; background: #FEF9EE; }
.bars span:nth-child(1) { background: #F6C667; } .bars span:nth-child(2) { background: #F4A95F; }
.bars span:nth-child(3) { background: #F28C5B; } .bars span:nth-child(4) { background: #E86A5A; }
header.site { background: #FEF9EE; border-bottom: 1px solid #E3D6BC; }
header.site .wrap { max-width: 1120px; }
.brand { color: #1B2F5B; }
.brand span b { color: #F28C5B; }
nav.main a { color: #51607F; }
nav.main a:hover, nav.main a[aria-current="page"] { color: #1B2F5B; }
@media (max-width: 1239px) { nav.main { background: #FEF9EE; } }


/* ==========================================================
   MERCH-PAGE SURFACES, SITE-WIDE (Dave, Oct 3 2026)
   The merch page has no thick black outlines and no hard drop shadows.
   Cards are soft sand panels, buttons are flat pills, photos have
   gentle rounded corners. This block makes every page match.
   ========================================================== */
:root {
  --paper: #FFFFFF;
  --sand-2: #F6EEDC;              /* merch card ground */
  --teal: #2B7489;                /* merch teal, deepened so links stay readable */
  --teal-dark: #1F5A6B;
  --orange: #E4703F;              /* merch sunset orange, deepened for white button text */
  --pink: #E86A5A;                /* merch coral */
  --yellow: #F6C667;              /* merch sunset yellow */
  --radius: 10px;
}
.eyebrow { color: #3F97AD; }

/* Sunset stripes on pages that still use the old single stripe */
.stripe { height: auto; background: none; display: grid; grid-template-rows: repeat(4, 4px); gap: 3px; padding-top: 6px; background: #FEF9EE; }

/* Buttons: flat pills, like "Add to cart" */
.btn { border: 0; box-shadow: none; padding: 12px 24px; font-weight: 700; transition: background .15s, color .15s; }
.btn:hover { transform: none; box-shadow: none; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: #CC5E30; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #FEF9EE; box-shadow: inset 0 0 0 1.5px var(--ink); }
section.dark .btn-ghost { color: #FEF9EE; box-shadow: inset 0 0 0 1.5px #FEF9EE; }
section.dark .btn-ghost:hover { background: #FEF9EE; color: var(--ink); }
.menu-btn { border: 1.5px solid var(--ink); border-radius: 999px; }

/* Cards: soft sand panels, no outline, no shadow */
.card { background: var(--sand-2); border: 0; border-radius: var(--radius); box-shadow: none; }
section.alt { background: #FFFFFF; border-color: var(--line); }
section.alt .card { background: #FEF9EE; }
.card .tag { color: var(--teal); font-weight: 700; }
.term { border-left: 4px solid var(--orange); border-radius: 4px var(--radius) var(--radius) 4px; }
.term:nth-child(3n+2) { border-left-color: #3F97AD; }
.term:nth-child(3n+3) { border-left-color: var(--pink); }
.space { transition: background .15s; }
.space:hover { transform: none; box-shadow: none; background: #EFE4CC; }
section.alt .space:hover { background: #F6EEDC; }
.space-pit { border-top: 6px solid var(--pink); }
.space-couch { border-top: 6px solid var(--orange); }

/* Number circles and checklist dots */
.module .num { border: 0; background: var(--yellow); color: var(--ink); }
.checklist li::before { border: 0; background: var(--orange); width: 14px; height: 14px; top: 9px; left: 4px; }

/* Photos and art: gentle corners, no frame */
.hero-art, .photo { border: 0; box-shadow: none; border-radius: var(--radius); }
.photo img { border-radius: var(--radius); }
.banner { border-bottom: 1px solid var(--line); }

/* Peachy Pit chat preview */
.chat { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(27,47,91,.08); }
.chat-top { background: var(--pink); border-bottom: 0; }
.chat-top .dot { border: 0; }
.msg > div { border: 1px solid var(--line); }
.chat-input { border-top: 1px solid var(--line); }

/* Study Hall timer */
.timer { border-radius: var(--radius); }

/* Dark bands and footer: merch navy */
section.dark { background: #1B2F5B; }
footer.site { background: #1B2F5B; color: #D5DBE8; }
footer.site .legal { color: #AEB8CF; }

/* Small phones: logo shrinks so the header fits (merch does the same) */
@media (max-width: 420px) {
  header.site .wrap { padding: 0 14px; gap: 8px; }
  .brand { font-size: 21px; gap: 8px; }
  .brand img { width: 36px; height: 36px; }
  .menu-btn { padding: 6px 12px; }
}
@media (max-width: 340px) { .brand { font-size: 18px; } }

/* Anything marked hidden stays hidden, even if another rule sets display (used by the founding-member price switch). */
[hidden] { display: none !important; }