/* =========================================================
   The Intelligent Life Guide — @professorhanna
   Shared design system
   ========================================================= */

:root{
  /* Exact palette pulled from the live professorhanna.com brand CSS */
  --navy-900:#080b12;
  --navy-800:#0c101a;   /* --bg */
  --navy-700:#121828;   /* --bg-mid */
  --navy-600:#1a2238;   /* --bg-card */
  --navy-500:#222c46;
  --line:rgba(204,168,84,.26);
  --line-soft:rgba(255,255,255,.10);

  /* Golds retuned to match the actual logo artwork (sampled from
     ILG_Logo_Square/Horizontal: #cca854 / #d8a860) so CSS-drawn gold
     sits flush with the banner instead of reading muddy beside it. */
  --gold:#cca854;        /* was #b6862d — matches logo body gold */
  --gold-bright:#e2be67; /* --gold-lt, already close to artwork */
  --gold-deep:#a88448;   /* was #765319 — matches logo shadow gold */

  --cream:#f3efe4;               /* headings / primary */
  --cream-dim:rgba(255,255,255,.66);
  --cream-faint:rgba(255,255,255,.40);
  --sand:#cabfa6;                /* --cream accent tone */

  --maxw:1180px;
  --radius:14px;
  --radius-sm:9px;

  /* ---- Type scale ----------------------------------------------------
     Body copy previously ranged from .90rem to 1.04rem across cards,
     modules, lists and plans, which read as inconsistent. Everything of
     the same rank now uses one token, set at the larger end of the old
     range so the whole site reads bigger and evenly.                    */
  --fs-lead:1.22rem;    /* section intros                    (was 1.15)  */
  --fs-body:1.06rem;    /* all body copy         (was .90–1.04, varied)  */
  --fs-item:1.22rem;    /* card / module / list item headings           */
  --fs-card:1.42rem;    /* card titles                                  */
  --fs-meta:.92rem;     /* captions, durations, secondary notes         */
  --fs-label:.82rem;    /* eyebrows, form labels, badges                */
  --lh-body:1.68;

  /* Brand fonts: Cormorant Garamond (display) + Jost (body) */
  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --serif-soft:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", "Helvetica Neue", -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow:0 24px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(204,168,84,.08), transparent 60%),
    radial-gradient(900px 500px at 0% 10%, rgba(204,168,84,.05), transparent 55%),
    var(--navy-900);
  color:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;margin:0;color:var(--cream);}
.display{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:.5px;}
.display .accent{display:block;font-family:var(--serif-soft);font-style:italic;font-weight:500;color:var(--gold-bright);}
.eyebrow{
  font-family:var(--sans);font-size:var(--fs-label);font-weight:600;letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);margin:0 0 18px;
}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--cream-dim);max-width:62ch;}
.pillars{
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--sans);font-weight:600;font-size:.98rem;letter-spacing:.02em;
  padding:.85em 1.5em;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:active{transform:translateY(1px);}
.btn-gold{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#22190a;box-shadow:0 10px 30px rgba(204,168,84,.28);}
.btn-gold:hover{box-shadow:0 14px 38px rgba(204,168,84,.42);transform:translateY(-1px);}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--cream);}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(10px);
  background:rgba(8,11,20,.82);border-bottom:1px solid var(--line-soft);}
.nav-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;white-space:nowrap;}
.brand .monogram{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-family:var(--serif);font-weight:700;
  color:var(--gold-bright);border:1px solid var(--gold-deep);
  background:radial-gradient(circle at 50% 35%, #1a2138, #0a0f1c);
  letter-spacing:1px;font-size:1.02rem;
}
.brand .monogram-img{
  width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover;
  border:1px solid var(--gold-deep);
}
.app-btn{border-color:var(--gold);color:var(--gold-bright);
  background:linear-gradient(180deg, rgba(226,190,103,.10), rgba(182,134,45,.04));}
.app-btn:hover{background:linear-gradient(180deg, rgba(226,190,103,.20), rgba(182,134,45,.08));}
.brand .brand-name{font-family:var(--serif);font-size:1.12rem;color:var(--cream);line-height:1;}
.brand .brand-sub{font-family:var(--serif-soft);font-style:italic;color:var(--gold-bright);font-size:.95rem;}

.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nav-links a{
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream-dim);position:relative;padding:6px 0;
  transition:color .18s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--cream);}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px;
}
.nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.icon-btn{
  display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;flex:0 0 auto;
  font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.04em;
  color:var(--cream);background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:.5em .9em;cursor:pointer;transition:.18s ease;
}
.icon-btn svg{flex:0 0 auto;}
.icon-btn:hover{border-color:var(--gold);color:var(--gold-bright);}
.icon-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;}
.cart-btn{position:relative;}
.cart-count{
  position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;
  background:var(--gold-bright);color:#22190a;border-radius:999px;
  font-size:.68rem;font-weight:800;display:grid;place-items:center;
}
.cart-count[data-empty="true"]{display:none;}
.nav-toggle{display:none;background:none;border:0;color:var(--cream);cursor:pointer;}
.nav-toggle svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.8;fill:none;}

/* ---------- Sections ---------- */
section{padding:88px 0;}
.section-head{max-width:62ch;margin-bottom:44px;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.8rem);margin-bottom:14px;}
.divider{height:1px;background:linear-gradient(90deg,var(--line),transparent);margin:0;border:0;}

/* ---------- Hero ---------- */
.hero{padding-top:64px;padding-bottom:40px;text-align:center;}
.brand-banner{
  max-width:900px;margin:0 auto 46px;border-radius:var(--radius);
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow);
  background:
    repeating-linear-gradient(135deg, rgba(204,168,84,.05) 0 2px, transparent 2px 22px),
    radial-gradient(600px 300px at 50% 40%, #17203a, #090d18);
  position:relative;padding:54px 30px 46px;
}
.brand-banner .bb-mono{
  width:96px;height:96px;border-radius:50%;margin:0 auto 6px;
  display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:2rem;
  color:var(--gold-bright);border:1px solid var(--gold-deep);
  background:radial-gradient(circle at 50% 35%, #1c2440, #0a1020);
}
.brand-banner .bb-handle{font-family:var(--serif-soft);font-style:italic;color:var(--cream-dim);font-size:1.05rem;margin-bottom:6px;}
.brand-banner .bb-title{font-size:clamp(2.4rem,5vw,3.4rem);}
.brand-banner .bb-title .accent{display:block;font-family:var(--serif-soft);font-style:italic;color:var(--gold-bright);}
.brand-banner .bb-pillars{margin-top:14px;}

.brand-banner-img{
  max-width:920px;width:100%;height:auto;margin:0 auto 44px;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.hero .lead{margin:22px auto 30px;text-align:center;}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---------- Preview grid ---------- */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.card{
  background:linear-gradient(180deg,var(--navy-700),var(--navy-800));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:30px 28px;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column;gap:12px;
}
.card:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--shadow);}
.card .k{font-family:var(--serif-soft);font-style:italic;color:var(--gold);font-size:var(--fs-body);}
.card h3{font-size:var(--fs-card);}
.card p{color:var(--cream-dim);margin:0;font-size:var(--fs-body);line-height:var(--lh-body);}
.card .more{margin-top:auto;color:var(--gold-bright);font-weight:600;font-size:.86rem;
  letter-spacing:.06em;text-transform:uppercase;display:inline-flex;gap:.4em;align-items:center;}
.card:hover .more{gap:.7em;}

/* ---------- Page hero (interior) ---------- */
.page-hero{padding:72px 0 48px;border-bottom:1px solid var(--line-soft);}
.page-hero .display{font-size:clamp(2.2rem,5vw,3.6rem);}
.page-hero .lead{margin-top:20px;}

/* ---------- Feature / prose ---------- */
.prose{max-width:70ch;}
.prose p{color:var(--cream-dim);margin:0 0 22px;font-size:var(--fs-body);line-height:var(--lh-body);}
.prose h3{margin:38px 0 12px;color:var(--cream);font-size:var(--fs-card);}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.feature-row .visual{
  border-radius:var(--radius);border:1px solid var(--line);min-height:280px;
  background:radial-gradient(500px 260px at 50% 30%, #18213c, #0a1020);
  display:grid;place-items:center;color:var(--gold);font-family:var(--serif-soft);
  font-style:italic;font-size:1.2rem;text-align:center;padding:30px;
}
.stat-row{display:flex;gap:40px;flex-wrap:wrap;margin-top:8px;}
.stat .n{font-family:var(--serif);font-size:2.4rem;color:var(--gold-bright);}
.stat .l{font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);}

/* ---------- Curriculum timeline ---------- */
.modules{display:grid;gap:16px;}
.module{
  display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;
  background:var(--navy-700);border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px 24px;
}
.module .wk{font-family:var(--serif);color:var(--gold-bright);font-size:1.1rem;
  border-right:1px solid var(--line);padding-right:16px;}
.module h4{font-size:var(--fs-item);margin-bottom:7px;}
.module p{color:var(--cream-dim);margin:0;font-size:var(--fs-body);line-height:var(--lh-body);}

/* ---------- Pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.plan{
  background:linear-gradient(180deg,var(--navy-700),var(--navy-800));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:32px 28px;
  display:flex;flex-direction:column;gap:16px;position:relative;
}
.plan.featured{border-color:var(--gold);box-shadow:0 20px 50px rgba(204,168,84,.18);}
.plan .tag{position:absolute;top:-13px;left:28px;background:var(--gold-bright);color:#22190a;
  font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;}
.plan .pname{font-family:var(--serif);font-size:1.5rem;}
.plan .pprice{font-family:var(--serif);font-size:2.6rem;color:var(--gold-bright);}
.plan .pprice small{font-family:var(--sans);font-size:.9rem;color:var(--cream-faint);font-weight:500;}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.plan li{color:var(--cream-dim);font-size:var(--fs-body);line-height:1.5;padding-left:26px;position:relative;}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700;}
.plan .btn{width:100%;justify-content:center;margin-top:auto;}

/* ---------- Cart drawer ---------- */
.drawer-scrim{position:fixed;inset:0;background:rgba(4,6,12,.6);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:90;}
.drawer-scrim.open{opacity:1;pointer-events:auto;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);z-index:100;
  background:linear-gradient(180deg,var(--navy-700),var(--navy-900));
  border-left:1px solid var(--line);transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px 26px;border-bottom:1px solid var(--line-soft);}
.cart-head h3{font-size:1.3rem;}
.cart-close{background:none;border:0;color:var(--cream-dim);cursor:pointer;font-size:1.5rem;line-height:1;}
.cart-close:hover{color:var(--gold-bright);}
.cart-items{flex:1;overflow-y:auto;padding:18px 26px;display:flex;flex-direction:column;gap:14px;}
.cart-empty{color:var(--cream-faint);text-align:center;margin-top:40px;font-family:var(--serif-soft);font-style:italic;font-size:1.15rem;}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);}
.cart-item .ci-name{font-family:var(--serif);font-size:1.02rem;}
.cart-item .ci-meta{color:var(--cream-faint);font-size:.82rem;}
.cart-item .ci-price{font-family:var(--serif);color:var(--gold-bright);}
.cart-item .ci-remove{background:none;border:0;color:var(--cream-faint);cursor:pointer;font-size:.78rem;text-align:right;text-decoration:underline;}
.cart-item .ci-remove:hover{color:var(--gold-bright);}
.cart-foot{padding:22px 26px;border-top:1px solid var(--line);}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px;}
.cart-total .t-l{color:var(--cream-dim);letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;}
.cart-total .t-v{font-family:var(--serif);font-size:1.8rem;color:var(--gold-bright);}
.cart-foot .btn{width:100%;justify-content:center;}

/* ---------- Checkout ---------- */
.checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-faint);}
.field input,.field select,.field textarea{
  background:var(--navy-800);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:.8em 1em;color:var(--cream);font-family:var(--sans);font-size:.95rem;
}
/* The contact message field is a real textarea now. Browsers default it to
   monospace and allow horizontal drag, both of which break the layout. */
.field textarea{resize:vertical;min-height:7em;line-height:1.6;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.summary{background:var(--navy-700);border:1px solid var(--line-soft);border-radius:var(--radius);padding:26px;position:sticky;top:96px;}
.summary h3{margin-bottom:16px;}
.summary .line{display:flex;justify-content:space-between;padding:9px 0;color:var(--cream-dim);font-size:var(--fs-body);border-bottom:1px solid var(--line-soft);}
.summary .line.total{color:var(--cream);font-family:var(--serif);font-size:1.3rem;border-bottom:0;padding-top:16px;}
.summary .line.total span:last-child{color:var(--gold-bright);}

/* ---------- Payment methods (checkout) ---------- */
.pay-notice{
  background:linear-gradient(180deg,var(--navy-600),var(--navy-800));
  border:1px solid var(--gold);border-radius:var(--radius);padding:28px 26px;
}
.pay-notice h3{font-size:var(--fs-card);margin-bottom:10px;}
.pay-notice p{color:var(--cream-dim);font-size:var(--fs-body);
  line-height:var(--lh-body);margin:0 0 20px;}

.pay-option{
  background:var(--navy-700);border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:22px 22px 18px;margin-bottom:16px;
}
.pay-head{display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.pay-title{font-family:var(--serif);font-size:var(--fs-item);color:var(--cream);}
.pay-badges{display:flex;gap:6px;flex-wrap:wrap;}
.pay-badge{
  font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.06em;
  color:var(--cream-dim);background:rgba(255,255,255,.07);
  border:1px solid var(--line-soft);border-radius:5px;padding:3px 7px;
}
.pay-fine{color:var(--cream-faint);font-size:var(--fs-meta);margin:12px 0 0;text-align:center;}
.pay-divider{display:flex;align-items:center;gap:14px;margin:20px 0;
  color:var(--cream-faint);font-size:var(--fs-meta);}
.pay-divider::before,.pay-divider::after{
  content:"";flex:1;height:1px;background:var(--line-soft);}
.pay-error{
  background:rgba(192,57,43,.12);border:1px solid rgba(224,122,109,.5);
  color:#e8a49b;border-radius:var(--radius-sm);padding:12px 16px;
  font-size:var(--fs-meta);margin-top:16px;
}
#paypal-buttons{min-height:52px;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.contact-info .ci-block{margin-bottom:26px;}
.contact-info .ci-block .l{color:var(--gold);font-family:var(--serif-soft);font-style:italic;font-size:1.05rem;margin-bottom:4px;}

/* ---------- Newsletter / podcast lists ---------- */
.list-item{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line-soft);}
.list-item .num{font-family:var(--serif);color:var(--gold);font-size:1.3rem;}
.list-item h4{font-size:var(--fs-item);margin-bottom:5px;}
.list-item p{margin:0;color:var(--cream-dim);font-size:var(--fs-body);line-height:var(--lh-body);}
.list-item .dur{color:var(--cream-faint);font-size:var(--fs-meta);white-space:nowrap;}

/* ---------- Art gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.art-tile{border-radius:var(--radius);border:1px solid var(--line-soft);overflow:hidden;
  aspect-ratio:1;display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(400px 220px at 50% 30%, #18213c, #0a1020);
  font-family:var(--serif-soft);font-style:italic;color:var(--gold);transition:.2s ease;}
.art-tile:hover{border-color:var(--gold);transform:scale(1.02);}
.art-photo{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);
  position:relative;transition:.2s ease;}
/* height:auto is required — without it the width/height HTML attributes
   (used to reserve layout space) override aspect-ratio and stretch the tile. */
.art-photo img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s ease;}
.art-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--cream);
  background:linear-gradient(0deg, rgba(8,11,18,.85), transparent);}
.art-photo:hover{border-color:var(--gold);}
.art-photo:hover img{transform:scale(1.05);}

/* ---------- CTA band ---------- */
.cta-band{background:
  radial-gradient(700px 300px at 50% 0%, rgba(204,168,84,.12), transparent 60%),
  var(--navy-700);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;}
.cta-band h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:16px;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line-soft);padding:56px 0 40px;color:var(--cream-faint);}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:34px;margin-bottom:36px;}
.footer-grid h4{font-family:var(--sans);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--cream);margin-bottom:16px;}
.footer-grid a{display:block;color:var(--cream-dim);font-size:var(--fs-body);padding:6px 0;transition:.15s ease;}
.footer-grid a:hover{color:var(--gold-bright);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:var(--fs-meta);padding-top:24px;border-top:1px solid var(--line-soft);}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--navy-600);border:1px solid var(--gold);color:var(--cream);
  padding:14px 22px;border-radius:999px;font-size:.9rem;opacity:0;pointer-events:none;
  transition:.25s ease;z-index:120;box-shadow:var(--shadow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- Margin brand mark ----------
   Sits in the left gutter beside the content column. The content column is
   capped at --maxw (1180px), so a gutter only exists above ~1360px; below
   that the badge is hidden rather than allowed to overlap the text. */
/* The content column is capped at 1180px, so the usable gutter on each side
   is (viewport − 1180) / 2. Each size below is chosen to sit inside that
   gutter with clearance, never overlapping the text:
        1460px → 140 gutter · 120 badge + 14 offset
        1600px → 210 gutter · 150 badge + 20 offset
        1800px → 310 gutter · 190 badge + 28 offset
   At 150px+ the full "The Intelligent Life Guide" sub-line in the badge
   becomes readable, which is the point of enlarging it. */
.margin-badge{
  position:fixed;top:120px;left:14px;z-index:50;display:none;
  width:120px;height:120px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.55);
  opacity:.95;transition:opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.margin-badge img{width:100%;height:100%;object-fit:cover;display:block;}
.margin-badge:hover,.margin-badge:focus-visible{
  opacity:1;transform:translateY(-3px) scale(1.03);border-color:var(--gold);outline:none;}
@media (min-width:1460px){ .margin-badge{display:block;} }
@media (min-width:1600px){ .margin-badge{left:20px;width:150px;height:150px;border-radius:20px;} }
@media (min-width:1800px){ .margin-badge{left:28px;width:190px;height:190px;border-radius:24px;} }
@media print{ .margin-badge{display:none;} }

/* ---------- Course intro player ---------- */
.intro-player{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(180deg,var(--navy-600),var(--navy-800));
  border:1px solid var(--gold);border-radius:var(--radius);
  padding:22px 24px;margin-top:8px;box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.intro-player .ip-mark{
  width:58px;height:58px;border-radius:12px;flex:none;overflow:hidden;
  border:1px solid var(--gold-deep);
}
.intro-player .ip-mark img{width:100%;height:100%;object-fit:cover;display:block;}
.intro-player .ip-body{flex:1 1 300px;min-width:0;}
.intro-player .ip-k{
  font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-bright);display:block;margin-bottom:3px;}
.intro-player h3{font-size:var(--fs-card);margin-bottom:5px;}
.intro-player p{color:var(--cream-dim);font-size:var(--fs-body);margin:0 0 10px;}
.intro-player audio{width:100%;height:38px;}

/* ---------- Footer social icons ----------
   Full brand colours rather than muted outlines: on a near-black page the
   platform colours are the fastest thing the eye finds, which is the point
   of a follow row. 54px targets also clear the 44px touch minimum. */
.social-row{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;}
.social-icon{
  width:54px;height:54px;padding:0;display:grid;place-items:center;flex:none;
  border:0;border-radius:50%;color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.social-icon:hover,.social-icon:focus-visible{
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 12px 26px rgba(0,0,0,.55);
  filter:brightness(1.12);outline:none;
}
.social-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}

/* Platform brand colours */
.social-icon.is-instagram{
  background:radial-gradient(circle at 30% 107%,
    #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-icon.is-facebook{background:#1877F2;}
.social-icon.is-tiktok{background:linear-gradient(135deg,#25F4EE 0%,#000 50%,#FE2C55 100%);}
.social-icon.is-x{background:#ffffff;color:#0b0b0b;}

@media (max-width:720px){
  .social-row{gap:14px;justify-content:flex-start;}
  .social-icon{width:58px;height:58px;}
  .social-icon svg{width:28px;height:28px;}
}

/* ---------- Professor Portal lock ---------- */
.portal-btn{border-color:rgba(255,255,255,.16);color:var(--cream-dim);}
.portal-btn:hover{border-color:var(--gold);color:var(--gold-bright);}
.lock-scrim{position:fixed;inset:0;z-index:130;display:grid;place-items:center;
  background:rgba(4,6,12,.78);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .22s ease;}
.lock-scrim.open{opacity:1;pointer-events:auto;}
.lock-card{width:min(400px,92vw);text-align:center;padding:38px 32px;
  background:linear-gradient(180deg,var(--navy-600),var(--navy-800));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.lock-card .lock-icon{font-size:1.9rem;color:var(--gold-bright);margin-bottom:8px;}
.lock-card h3{font-size:1.7rem;margin-bottom:8px;}
.lock-card p{color:var(--cream-dim);font-size:var(--fs-body);margin:0 0 20px;}
.lock-card input{width:100%;text-align:center;letter-spacing:.28em;font-size:1.05rem;
  background:var(--navy-900);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:.85em 1em;color:var(--cream);font-family:var(--sans);}
.lock-card input:focus{outline:none;border-color:var(--gold);}
.lock-card input.error{border-color:#c0392b;animation:shake .4s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.lock-error{color:#e07a6d;font-size:.86rem;min-height:1.2em;margin-top:10px;}
.lock-actions{display:flex;gap:10px;margin-top:14px;}
.lock-actions .btn{flex:1;justify-content:center;}

/* ---------- Art gallery v2 (26 works, watermarked canvases) ---------- */
.gallery-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.art-tile-v2{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line-soft);cursor:pointer;background:var(--navy-700);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.art-tile-v2:hover,.art-tile-v2:focus-visible{transform:translateY(-4px);
  border-color:var(--gold);box-shadow:var(--shadow);outline:none;}
.art-tile-v2 .art-canvas{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  display:block;opacity:0;transition:opacity .45s ease;background:var(--navy-700);}
.art-tile-v2 .art-canvas.painted{opacity:1;}
.art-tile-v2 figcaption{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding:14px 16px;background:var(--navy-800);}
.art-tile-v2 .art-title{font-family:var(--serif);font-size:var(--fs-item);color:var(--cream);}
.art-tile-v2 .art-from{font-size:var(--fs-meta);color:var(--gold-bright);white-space:nowrap;}
.le-badge{position:absolute;top:12px;left:12px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#22190a;
  font-family:var(--sans);font-size:.62rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
  box-shadow:0 4px 14px rgba(0,0,0,.35);}

/* ---------- Art lightbox ---------- */
.lb-scrim{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:24px;
  background:rgba(4,6,12,.86);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .24s ease;overflow-y:auto;}
.lb-scrim.open{opacity:1;pointer-events:auto;}
.lb-card{position:relative;width:min(1000px,96vw);display:grid;grid-template-columns:1.35fr 1fr;
  gap:0;background:linear-gradient(180deg,var(--navy-700),var(--navy-900));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.lb-close{position:absolute;top:10px;right:14px;z-index:2;background:rgba(8,11,18,.6);
  border:1px solid var(--line-soft);color:var(--cream);font-size:1.5rem;line-height:1;
  width:36px;height:36px;border-radius:50%;cursor:pointer;}
.lb-close:hover{border-color:var(--gold);color:var(--gold-bright);}
.lb-art{background:var(--navy-900);display:grid;place-items:center;}
.lb-art canvas{width:100%;height:auto;display:block;max-height:74vh;object-fit:contain;}
.lb-info{padding:30px 28px;display:flex;flex-direction:column;gap:8px;}
.lb-edition{font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-faint);}
.lb-edition.is-le{color:var(--gold-bright);}
.lb-info h3{font-size:1.9rem;}
.lb-sub{color:var(--cream-faint);font-size:var(--fs-meta);margin:0 0 8px;}
.lb-buy{display:grid;gap:10px;margin-top:6px;}
.lb-option{display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  background:var(--navy-600);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:14px 16px;color:var(--cream);font-family:var(--sans);transition:.18s ease;}
.lb-option:hover{border-color:var(--gold);transform:translateY(-1px);}
.lb-option .lbo-icon{font-size:1.3rem;flex:none;}
.lb-option .lbo-txt{display:flex;flex-direction:column;flex:1;}
.lb-option .lbo-txt b{font-weight:600;font-size:var(--fs-body);}
.lb-option .lbo-txt small{color:var(--cream-faint);font-size:.8rem;}
.lb-option .lbo-price{font-family:var(--serif);font-size:1.5rem;color:var(--gold-bright);flex:none;}
.lb-note{color:var(--cream-faint);font-size:.8rem;margin:12px 0 0;}
.lb-counter{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;
  color:var(--gold);margin-bottom:2px;}

/* Prev / next arrows — sit outside the card on wide screens, overlay it on narrow */
.lb-nav{
  position:fixed;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(8,11,18,.72);border:1px solid var(--line);color:var(--cream);
  backdrop-filter:blur(4px);transition:.18s ease;
}
.lb-nav:hover{border-color:var(--gold);color:var(--gold-bright);
  background:rgba(8,11,18,.9);transform:translateY(-50%) scale(1.06);}
.lb-nav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.lb-prev{left:18px;}
.lb-next{right:18px;}
@media (min-width:1120px){ .lb-prev{left:34px;} .lb-next{right:34px;} }

/* ---------- Podcast sample player ---------- */
.ep-list{display:grid;gap:12px;margin-top:18px;}
.ep{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
  background:var(--navy-700);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:14px 16px;}
.ep .ep-n{font-family:var(--serif);color:var(--gold-bright);font-size:1.05rem;}
.ep .ep-body{min-width:0;}
.ep h4{font-size:var(--fs-item);margin-bottom:9px;}
.ep audio{width:100%;height:34px;}
.nl-ok{color:var(--gold-bright);font-family:var(--serif);font-style:italic;font-size:1.15rem;margin:0;}

/* ---------- Responsive ---------- */

/* Tighten the horizontal nav before it gets crowded. */
@media (max-width:1320px){
  .nav-links{gap:18px;}
  .nav-links a{font-size:.78rem;letter-spacing:.09em;}
}

/* Below this the 9 nav links + 3 action buttons can't sit on one line,
   so collapse to the hamburger menu rather than let anything wrap. */
@media (max-width:1180px){
  .nav-links{
    position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;
    background:var(--navy-800);border-bottom:1px solid var(--line);
    padding:10px 0;transform:translateY(-130%);transition:transform .25s ease;
    max-height:calc(100vh - 74px);overflow-y:auto;
  }
  .nav-links.open{transform:translateY(0);}
  .nav-links li{width:100%;text-align:center;border-top:1px solid var(--line-soft);}
  .nav-links a{display:block;padding:15px 0;font-size:.84rem;letter-spacing:.12em;}
  .nav-toggle{display:inline-flex;order:3;}
  .nav-actions{order:2;margin-left:auto;}
}

@media (max-width:900px){
  .grid-3,.price-grid,.gallery{grid-template-columns:1fr 1fr;}
  .feature-row,.checkout-grid,.contact-grid{grid-template-columns:1fr;gap:28px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .gallery-v2{grid-template-columns:1fr 1fr;}
  .lb-card{grid-template-columns:1fr;}
  .summary{position:static;}
}

@media (max-width:820px){
  .icon-btn .label{display:none;}
  .brand .brand-name{font-size:1rem;}
}

@media (max-width:720px){
  .grid-3,.grid-2,.price-grid,.gallery,.gallery-v2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:60px 0;}
  .list-item{grid-template-columns:auto 1fr;}
  .list-item .dur{display:none;}
  .brand .brand-sub{display:none;}
  .field-row{grid-template-columns:1fr;}
}