/* ==========================================================================
   Members area — one stylesheet, two brands.

   These are not sales pages. The landers are loud because they are converting;
   this is the room you come back to having already bought. So each brand's
   PALETTE is taken from its lander (it should feel like the same company) but
   never its volume.

   Matt Cook Courses / The Back Pain Miracle — light. Someone in pain, 40-70,
   often on a phone while lying down. Light ground on purpose: age-related
   contrast loss makes dark UI harder to read. Sky and sea from the lander.

   Men's Confidence Project / Hypnotica — dark. A man with headphones on, late.
   Carbon and gold from the lander, cream instead of white so nothing glares.

   Shared rules either way: 18px floor, nothing under weight 400, 48px touch
   targets, words not icons.

   Everything below derives from tokens. To add a brand, add a [data-brand]
   block — never a one-off colour in a component.
   ========================================================================== */

@font-face { font-family:'Fraunces'; src:url('../fonts/fraunces.woff2') format('woff2');
  font-weight:400 700; font-display:swap; font-style:normal; }
@font-face { font-family:'SourceSans'; src:url('../fonts/sourcesans.woff2') format('woff2');
  font-weight:400 700; font-display:swap; font-style:normal; }

:root{
  /* ---- Matt Cook Courses (default): the lander's sky, sea and white cards.
     Amber still means only one thing — "you have done this". ---- */
  --ground:#EDF5FA; --surface:#FFFFFF; --sink:#DCEAF3;
  --ink:#0F2E47; --muted:#4E6B80; --line:#CBDFEC;
  --accent:#1B7FC0; --accent-ink:#125E8D; --accent-wash:#E2F0F9;
  --done:#C8890B; --done-wash:#FBF0D8;

  /* the header band, read straight off the lander: sky meeting sea */
  /* Deeper than the lander's sky: white nav text on the lander's own blue is
     2.25:1, and this audience is the one that can least afford that. At
     #12649B -> #0B7B8D it is 6.3 and 5.0, still plainly sky meeting sea. */
  --band-top:#12649B; --band-bottom:#0B7B8D; --band-rule:#FFFFFF;
  /* No opacity for hierarchy here: even 92% white over the sea end lands at
     4.44:1. Solid white throughout (4.96 at the worst point) and weight
     carries the hierarchy instead. */
  --band-ink:#FFFFFF; --band-ink-dim:#FFFFFF;

  /* messages */
  --warn-bg:#FBEDE9; --warn-line:#E3C4BA; --warn-ink:#7A2E1B;
  --info-bg:#E6F2FA; --info-line:#BCDCEF; --info-ink:#124667;
  --danger-bg:#FDF7F5; --danger-line:#E0C9C1; --danger-ink:#7A2E1B;
  --danger-btn:#8C3418; --danger-btn-hover:#712A13;
  --well:#0E1512; --well-ink:#CFD6D2;

  /* display type: MCC sets titles as-is */
  --display-transform:none; --display-track:-.005em;

  --r:14px; --r-sm:9px;
  --shadow:0 1px 2px rgba(15,46,71,.05), 0 6px 18px rgba(15,46,71,.07);
  --tap:48px;
}

/* ---- Men's Confidence Project: carbon and gold, cream not white.
   On a dark ground --accent-ink must be LIGHTER than --accent, not darker;
   it is the link colour, and the light-theme instinct inverts wrongly here. */
:root[data-brand="mcp"]{
  --ground:#0C0C0D; --surface:#16161A; --sink:#232329;
  --ink:#F0E7D4; --muted:#9C9384; --line:#2E2E36;
  --accent:#C9A55C; --accent-ink:#DFC07E; --accent-wash:#221D14;
  --done:#C9A55C; --done-wash:#241F16;

  /* the same band, rendered as the lander's carbon with one gold hairline */
  --band-top:#161619; --band-bottom:#0A0A0B; --band-rule:#C9A55C;
  --band-ink:#F0E7D4; --band-ink-dim:rgba(240,231,212,.7);

  --warn-bg:#2A1A16; --warn-line:#5B342A; --warn-ink:#F0C4B4;
  --info-bg:#1A1A20; --info-line:#33333E; --info-ink:#D8CFBC;
  --danger-bg:#241614; --danger-line:#4E2C25; --danger-ink:#F0BFB0;
  --danger-btn:#8C3418; --danger-btn-hover:#A03D1C;
  --well:#000000; --well-ink:#8B8477;

  /* the lander sets its headings as roman capitals; tracking gets us there
     without shipping a second display face for one brand */
  --display-transform:uppercase; --display-track:.055em;

  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'SourceSans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:18px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Fraunces', Georgia, 'Times New Roman', serif; font-weight:600;
  line-height:1.2; letter-spacing:var(--display-track);
  text-transform:var(--display-transform); margin:0; }
a{ color:var(--accent-ink); }
img,svg{ max-width:100%; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ---------- shell ---------- */
.wrap{ max-width:1060px; margin:0 auto; padding:40px 24px 80px; }
.wrap.narrow{ max-width:640px; }
.page-title{ font-size:34px; margin-bottom:8px; }
.meta{ color:var(--muted); font-size:16px; margin:6px 0 0; }
.lede{ font-size:19px; color:var(--muted); margin:8px 0 24px; }

/* ---------- the band ----------
   Both landers open with a full-bleed band behind the video: Matt Cook's is a
   horizon, sky meeting sea; Hypnotica's is carbon with a single gold line.
   That band is the one thing this template borrows, and the only place either
   brand raises its voice. Everything below it stays quiet. */
.topbar{
  background:linear-gradient(180deg, var(--band-top) 0%, var(--band-bottom) 100%);
  border-bottom:3px solid var(--band-rule);
  color:var(--band-ink);
}
:root[data-brand="mcp"] .topbar{ border-bottom-width:1px; }
.topbar-inner{ max-width:1060px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); }
.brand{ color:var(--band-ink); }
.brand-text{ font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600;
  letter-spacing:var(--display-track); text-transform:var(--display-transform); }
.brand-text em{ font-style:normal; color:var(--band-ink-dim); }
/* the mark: a body at rest on a ground line — the whole method in two strokes */
.brand-mark{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.22);
  position:relative; flex:0 0 auto; }
.brand-mark::after{ content:''; position:absolute; left:5px; right:5px; bottom:8px;
  height:2px; background:var(--band-ink); border-radius:2px; }
.brand-mark::before{ content:''; position:absolute; left:6px; bottom:11px; width:7px; height:7px;
  border-radius:50%; border:2px solid var(--band-ink); }
.brand-mark.big{ width:44px; height:44px; }
.brand-mark.big::after{ left:9px; right:9px; bottom:13px; }
.brand-mark.big::before{ left:10px; bottom:17px; width:11px; height:11px; }
.topnav{ display:flex; align-items:center; gap:20px; }
.topnav a,.linkish{ font-size:17px; color:var(--band-ink-dim); font-weight:500;
  text-decoration:none; padding:10px 2px; }
.topnav a:hover,.linkish:hover{ color:var(--band-ink); text-decoration:underline; }
.linkish{ background:none; border:0; font:inherit; cursor:pointer; }
.inline{ display:inline; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--tap); padding:12px 26px; border-radius:var(--r-sm); border:1px solid transparent;
  font:inherit; font-size:17px; font-weight:600; cursor:pointer; text-decoration:none; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-ink); }
.btn-quiet{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-quiet:hover{ border-color:var(--muted); }

/* ---------- login ---------- */
.is-login{ display:flex; flex-direction:column; min-height:100vh; }
.auth{ flex:1; display:grid; place-items:center; padding:48px 20px; }
.auth-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:40px; width:100%; max-width:460px; }
.auth-card h1{ font-size:30px; margin:18px 0 0; }
.stack{ display:flex; flex-direction:column; gap:8px; }
.stack label{ font-size:16px; font-weight:600; margin-top:12px; }
.stack input{ max-width:460px; font:inherit; font-size:18px; min-height:var(--tap); padding:11px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink); }
.stack input:focus{ border-color:var(--accent); }
.stack .btn{ margin-top:22px; }
.alert{ background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-ink);
  padding:12px 14px; border-radius:var(--r-sm); font-size:17px; }
.fineprint{ font-size:15px; color:var(--muted); margin:22px 0 0; }
/* Secondary route out of an auth screen — always visible, never a dead end. */
.auth-alt{ font-size:17px; margin:20px 0 0; }
.auth-alt a{ color:var(--accent); font-weight:600; }
/* Informational, not a failure — softer than .alert. */
.notice{ background:var(--info-bg); border:1px solid var(--info-line); color:var(--info-ink);
         border-radius:var(--r); padding:12px 14px; margin:18px 0 0; font-size:16px; }

/* ---------- library ---------- */
.resume{ display:grid; gap:2px; background:var(--accent-wash); border:1px solid #CFE0D7;
  border-radius:var(--r); padding:22px 26px; text-decoration:none; color:var(--ink);
  margin:24px 0 36px; position:relative; }
.resume:hover{ border-color:var(--accent); }
.resume-eyebrow{ font-size:15px; font-weight:600; color:var(--accent-ink);
  text-transform:uppercase; letter-spacing:.07em; }
.resume-lesson{ font-family:'Fraunces',Georgia,serif; font-size:24px; font-weight:600; }
.resume-course{ font-size:16px; color:var(--muted); }
.resume-go{ display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  font-weight:600; color:var(--accent-ink); }

.courses{ list-style:none; margin:0; padding:0; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); }
/* Each course carries its own cover art, so the card leads with the image and
   the type sits underneath. Covers arrive at assorted ratios, so a fixed 3:2
   box with object-fit keeps the grid even without letterboxing anything. */
.course-card a{ display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow); height:100%; }
.course-card a:hover{ border-color:var(--accent); }
.course-card .cover{ display:block; aspect-ratio:3/2; background:var(--sink); }
.course-card .cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.course-card a > :not(.cover){ margin-left:26px; margin-right:26px; }
.course-card h2{ font-size:23px; margin-top:22px; }
.course-card a > :last-child{ margin-bottom:24px; }
.bar{ display:block; height:8px; background:var(--sink); border-radius:99px; overflow:hidden; margin-top:16px; }
.bar.wide{ max-width:340px; }
.bar-fill{ display:block; height:100%; background:var(--done); border-radius:99px; }

/* ---------- course: the position rail ---------- */
.course-head{ display:grid; gap:10px; justify-items:start; margin-bottom:36px; }
.course-head .btn{ margin-top:10px; }
/* With cover art the header becomes two columns; the image leads on mobile. */
.course-head.has-cover{ grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:28px; align-items:center; justify-items:stretch; }
.course-head .course-cover{ width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow); }
.course-head-text{ display:grid; gap:10px; justify-items:start; }
.rail-note{ font-size:16px; color:var(--muted); margin:0 0 18px;
  padding-bottom:14px; border-bottom:1px solid var(--line); }
.positions{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.position{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; }
.position-head{ display:flex; gap:16px; align-items:flex-start; }
.position-head h2{ font-size:22px; }
.position-glyph{ display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex:0 0 auto; border-radius:50%;
  background:var(--accent-wash); color:var(--accent-ink); }
.position-glyph.inline{ width:32px; height:32px; vertical-align:middle; margin-right:6px; }
.lessons{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:2px; }
.lessons a{ display:flex; align-items:center; gap:12px; min-height:var(--tap);
  padding:10px 12px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font-size:17px; }
.lessons a:hover{ background:var(--accent-wash); }
.tick{ width:22px; height:22px; flex:0 0 auto; border-radius:50%;
  border:2px solid var(--line); background:#fff; }
.is-done .tick, a.is-done .tick{ border-color:var(--done); background:var(--done);
  box-shadow:inset 0 0 0 3px var(--done-wash); }
.empty-note{ margin-top:14px; }
.empty{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:40px; text-align:center; }

/* ---------- lesson ---------- */
.lesson-wrap{ max-width:1220px; margin:0 auto; padding:28px 24px 90px;
  display:grid; gap:34px; grid-template-columns:minmax(0,1fr) 330px; align-items:start; }
.crumb{ display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:600;
  text-decoration:none; color:var(--muted); margin-bottom:14px; }
.crumb:hover{ color:var(--accent-ink); }
.player{ position:relative; aspect-ratio:16/9; background:var(--well);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.player-empty{ display:grid; place-items:center; height:100%; color:var(--well-ink); }
.lesson-title{ font-size:30px; margin:24px 0 0; }
.lesson-where{ display:flex; align-items:center; }
.lesson-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.saved{ font-size:15px; color:var(--accent-ink); margin-top:10px; }

.rail{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; position:sticky; top:20px; max-height:calc(100vh - 40px); overflow:auto; }
.rail-top{ padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.rail-course{ font-family:'Fraunces',Georgia,serif; font-size:19px; font-weight:600; margin:0; }
.rail-toggle{ display:none; }
.rail-section{ padding-top:14px; }
.rail-section h2{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  font-family:'SourceSans',sans-serif; }
.rail-section h2 .position-glyph{ width:30px; height:30px; }
.rail-section ul{ list-style:none; margin:8px 0 0; padding:0; }
.rail-section a{ display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px;
  border-radius:var(--r-sm); text-decoration:none; color:var(--ink); font-size:16px; }
.rail-section a:hover{ background:var(--accent-wash); }
.rail-section a.is-current{ background:var(--accent); color:#fff; font-weight:600; }
.rail-section a.is-current .tick{ border-color:#fff; }
.rail-section .tick{ width:18px; height:18px; }

.foot{ border-top:1px solid var(--line); background:var(--surface); }
.foot p{ max-width:1060px; margin:0 auto; padding:22px 24px; font-size:16px; color:var(--muted); }

/* ---------- phone ---------- */
@media (max-width:900px){
  .lesson-wrap{ grid-template-columns:1fr; gap:22px; padding:16px 0 70px; }
  .lesson-main{ padding:0 18px; }
  .crumb{ padding-left:0; }
  .player{ border-radius:0; margin:0 -18px; width:calc(100% + 36px); }
  .rail{ position:static; max-height:none; margin:0 18px; }
  /* an accordion, not a hidden drawer — hidden menus lose this audience */
  .rail-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%;
    min-height:var(--tap); background:none; border:0; font:inherit; font-size:17px; font-weight:600;
    color:var(--ink); cursor:pointer; padding:10px 0; }
  .rail-toggle::after{ content:'▾'; color:var(--muted); }
  .rail-toggle[aria-expanded="true"]::after{ content:'▴'; }
  .rail-list{ display:none; }
  .rail-list.is-open{ display:block; }
  .wrap{ padding:26px 18px 70px; }
  .page-title{ font-size:28px; }
  .lesson-title{ font-size:25px; }
  .courses{ grid-template-columns:1fr; }
  .course-head.has-cover{ grid-template-columns:1fr; gap:18px; }
  .course-head .course-cover{ max-width:340px; }
  .auth-card{ padding:28px 22px; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* A section that contains exactly one lesson of the same name is not a
   section — it's a lesson. Render it as one row instead of repeating itself. */
.position-head.is-solo{ display:flex; align-items:center; gap:16px; width:100%;
  text-decoration:none; color:var(--ink); min-height:var(--tap); }
.position-head.is-solo h2{ font-size:21px; }
.position-head.is-solo > div{ flex:1 1 auto; }
.position-head.is-solo .tick{ flex:0 0 auto; margin-left:auto; }
.position-head.is-solo:hover h2{ color:var(--accent-ink); }
.position:has(.is-solo){ padding:14px 20px; }
.position:has(.is-solo):hover{ border-color:var(--accent); }

/* ---------- lesson body (text DAP kept under the video) ---------- */
.lesson-body{ margin-top:26px; max-width:66ch; }
.lesson-body h3{ font-size:21px; margin:28px 0 10px; }
.lesson-body h3:first-child{ margin-top:0; }
.lesson-body p{ margin:0 0 14px; }
.lesson-body img{ border-radius:var(--r-sm); margin:12px 0; }

/* ---------- notes ---------- */
.notes{ margin-top:32px; max-width:66ch; padding-top:24px; border-top:1px solid var(--line); }
.notes-label{ display:block; font-family:'Fraunces',Georgia,serif; font-size:21px; font-weight:600; }
.notes-hint{ color:var(--muted); font-size:15px; margin:4px 0 10px; }
.notes textarea{ width:100%; font:inherit; font-size:17px; line-height:1.5; padding:14px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
  color:var(--ink); resize:vertical; min-height:120px; }
.notes textarea:focus{ border-color:var(--accent); }

/* ---------- settings ---------- */
/* Cards need to read as separate things: the old surface tone was almost the
   same as the page, so the sections ran together. */
.panel{ background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:28px 30px; margin:0 0 24px; box-shadow:var(--shadow); }
.panel h2{ font-size:22px; margin:0 0 4px; }
.panel > p{ margin:0 0 6px; }
.panel .stack{ margin-top:16px; }
/* a form button should be its own size, not a full-width slab */
.panel .stack .btn, .panel form > .btn{ align-self:flex-start; margin-top:24px; min-width:220px; }
.panel-danger{ border-color:var(--danger-line); background:var(--danger-bg); }
.panel-danger h2{ color:var(--danger-ink); }
.btn-danger{ background:var(--danger-btn); color:#fff; }
.btn-danger:hover{ background:var(--danger-btn-hover); }
.notice{ background:var(--accent-wash); border:1px solid #CFE0D7; color:var(--accent-ink);
  padding:12px 14px; border-radius:var(--r-sm); font-size:17px; }

/* ---------- lesson media: any mix of video, audio, text, downloads ---------- */
/* Men's Confidence Project is audio-led (543 tracks); Matt Cook Courses is
   video-led. Same page, same components, whatever the lesson actually holds. */
.extra-video{ margin-top:18px; }
.extra-video video{ width:100%; display:block; border-radius:var(--r); background:#000; }
.media-caption{ font-size:16px; color:var(--muted); margin:8px 0 0; }

.tracks, .downloads{ margin-top:32px; }
.tracks-head{ font-size:20px; margin:0 0 14px; }
.track-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:t; }
.track{ display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; }
.track-n{ flex:0 0 30px; height:30px; border-radius:99px; background:var(--sink);
  color:var(--muted); font-size:15px; font-weight:600; display:grid; place-items:center; }
.track-body{ flex:1 1 auto; min-width:0; }
.track-label{ display:block; font-size:17px; font-weight:600; margin-bottom:8px; }
.track audio{ width:100%; height:38px; display:block; }
.track-dl{ flex:0 0 auto; color:var(--muted); display:grid; place-items:center;
  width:40px; height:40px; border-radius:var(--r); }
.track-dl:hover{ color:var(--accent); background:var(--sink); }

.download-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.download-list a{ display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 16px; color:var(--ink); text-decoration:none; font-size:17px; }
.download-list a:hover{ border-color:var(--accent); color:var(--accent); }
@media (max-width:640px){
  .track{ flex-wrap:wrap; }
  .track-body{ flex:1 1 100%; order:2; }
}

/* Hypnotica's mark is a ring, not a figure on a ground line — the body glyph
   belongs to the movement course and would be meaningless here. */
:root[data-brand="mcp"] .brand-mark{ background:transparent; border:2px solid var(--accent); }
:root[data-brand="mcp"] .brand-mark::after,
:root[data-brand="mcp"] .brand-mark::before{ content:none; }
:root[data-brand="mcp"] .brand-mark.big{ border-width:3px; }
/* the auth cards sit on the page, not the band, so they take page ink back */
.auth-card{ color:var(--ink); }