/* Jewish Motivation – English (LTR). Brand from the Hebrew site: pink #FC0382, navy #03005C, yellow #FAE505, cyan #04F8C6, font Assistant. */
:root{
  --pink:#FC0382; --pink-dark:#C8006A; --navy:#03005C; --yellow:#FAE505; --cyan:#04F8C6;
  --ink:#1b1b1f; --muted:#555; --bg:#fff; --soft:#f6f6f8;
  --wrap:1200px; --radius:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Assistant',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:18px;line-height:1.65}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--pink-dark)}
a:focus-visible,button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:780px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
.note{color:var(--muted);font-size:.9rem;font-style:italic}

/* header – brand pink exactly as the Hebrew site (Guy: same colors); contrast note in DECISIONS.md #15 */
/* header – modelled on melrobbins.com (Guy 11.9.2026): logo left, nav in a white rounded bar on the right,
   current page in a beige pill; on the home page the header floats over the hero */
.site-header{position:relative;z-index:50;padding:22px 0}
.site-header.over-hero{position:absolute;top:0;left:0;right:0}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin:0 auto;padding:0 40px}
.logo{display:flex;align-items:center;gap:10px;color:#020057;text-decoration:none;font-weight:800;font-size:20px;letter-spacing:.2px;white-space:nowrap}
/* the mark is painted in the logo's text colour through a mask: navy on inner pages, white over the home hero */
.logo .mark{display:block;width:36px;height:32px;background:currentColor;-webkit-mask:url(/static/img/mark.png) center/contain no-repeat;mask:url(/static/img/mark.png) center/contain no-repeat}
.over-hero .logo{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.ftr-name{display:flex;align-items:center;gap:10px;margin:0;font-weight:800;font-size:20px}
.ftr-name img{height:28px;width:auto}
.ftr-sub{margin:2px 0 0 44px;opacity:.85;font-size:15px}
.mainnav{background:#fff;border-radius:16px;padding:8px;box-shadow:0 2px 16px rgba(0,0,0,.08)}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.mainnav a{color:#1b1b1f;text-decoration:none;font-size:16.5px;font-weight:600;line-height:1.2;padding:10px 15px;border-radius:12px;display:block;white-space:nowrap}
.mainnav a:hover,.mainnav a[aria-current="page"]{background:#f1eee8}
.menu-btn{display:none;background:#fff;border:0;color:#1b1b1f;font:inherit;font-size:16px;font-weight:700;padding:10px 20px;border-radius:14px;cursor:pointer;box-shadow:0 2px 16px rgba(0,0,0,.08)}

/* hero – text on the left in LTR */
.hero{background:#03005D center top/cover no-repeat;min-height:600px;display:flex;align-items:center;padding-top:100px}  /* top-anchored: Gili's head is never cropped */
.hero-in{width:100%;display:flex;flex-direction:column;align-items:flex-start}
.hero-name{color:#fff;font-size:clamp(34px,5vw,54px);font-weight:800;margin:0;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero-role{color:#fff;font-size:clamp(20px,2.4vw,26px);font-weight:700;margin:.3em 0 1.4em;line-height:1.35;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-cta{background:var(--yellow);color:var(--ink);text-decoration:none;font-weight:800;font-size:clamp(18px,2vw,24px);line-height:1.3;padding:18px 26px;border-radius:var(--radius);max-width:440px;box-shadow:0 6px 18px rgba(0,0,0,.15)}
.hero-cta:hover{filter:brightness(.97)}

/* quote with the brand gradient rules */
.quote{padding:56px 24px 40px;text-align:center}
.quote blockquote{margin:0 auto;max-width:640px;padding:22px 0;position:relative}
.quote blockquote::before,.quote blockquote::after{content:"";position:absolute;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--cyan),var(--pink),var(--yellow))}
.quote blockquote::before{top:0}.quote blockquote::after{bottom:0}
.quote p{font-size:clamp(22px,2.6vw,28px);line-height:1.4;margin:0 0 .5em}
.quote cite{font-style:normal;font-weight:700;font-size:15px}

/* three cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:24px 24px 40px}
.card a{text-decoration:none;color:inherit}
.card img{width:100%;aspect-ratio:400/545;object-fit:cover}
.card h2{font-size:19px;margin:.8em 0 .3em}
.card p{font-size:15.5px;color:#333;margin:0}
.pinkline{border:0;border-top:2px solid var(--pink);max-width:1100px;margin:10px auto 40px}

/* about – photo left, text right in LTR */
.about{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-bottom:50px}
.about-photo{width:100%;aspect-ratio:1/1;object-fit:cover}
.about h2{font-size:34px;margin:0 0 .4em}
.btn{display:inline-block;background:var(--yellow);color:var(--ink);font-weight:700;text-decoration:none;padding:10px 26px;border-radius:var(--radius);margin-top:10px}

/* videos */
.videos{text-align:center;padding-bottom:60px}
.videos h2{font-size:32px;margin:0 0 .2em}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:20px;text-align:left}
.vgrid figure{margin:0}
.vgrid figcaption{font-weight:700;margin-bottom:8px}

/* inner pages */
.page{padding:48px 24px 64px}
.page h1{font-size:clamp(30px,4vw,42px);line-height:1.2;margin:0 0 .6em;color:var(--navy)}
.prose h2{font-size:27px;margin:1.6em 0 .5em;color:var(--navy)}
.prose h3{font-size:22px;margin:1.4em 0 .4em}
.prose p{margin:0 0 1.05em}
.prose ul,.prose ol{padding-left:1.3em}
.embed iframe{border:0;border-radius:12px}
.notfound{text-align:center}

/* footer – navy */
.site-footer{background:var(--navy);color:#fff;padding:40px 0 20px}
.ftr{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ftr-brand img{height:30px;width:auto}
.social{list-style:none;display:flex;gap:12px;padding:0;margin:18px 0 0}
.social img{width:28px;height:28px}
.ftr-nav{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.ftr-nav a{color:#fff;text-decoration:none;line-height:2}
.ftr-nav a:hover{text-decoration:underline}
.copy{text-align:center;font-size:13px;opacity:.75;margin:26px 0 0}

@media (max-width:1100px){
  .hdr{padding:0 20px}
  .menu-btn{display:block}
  .mainnav{display:none;position:absolute;top:calc(100% - 10px);left:20px;right:20px}
  .mainnav.open{display:block}
  .mainnav ul{flex-direction:column;align-items:stretch}
}
@media (max-width:900px){
  .cards,.vgrid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .about{grid-template-columns:1fr}
  /* mobile hero: the photo sits whole at the top right (head to chest), the text below it on navy */
  .hero{min-height:820px;background-size:auto 46%;background-position:74% 96px;align-items:flex-end;padding-bottom:34px}  /* photo starts below the floating header */
  .ftr-nav{columns:1}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.quote-img{margin:0 auto;max-width:720px}
.quote-img img{width:100%;height:auto}

/* single post layout – mirrors the Hebrew Astra single-post grid (measured 10.9.2026):
   card #F6F8F5, 1200px, padding 85/107; H1 64/700 black; H2 40; H3 20; body 16/27.2; UAGB two columns 550 + 550 */
.post-wrap{padding:0 0 40px}
.post-card{background:#F6F8F5;max-width:1200px;margin:0 auto;padding:85px 107px 60px;color:#000;font-size:16px;line-height:1.7}
.post-meta{font-size:14px;margin:0 0 10px;color:#333}
.post-card h1{font-size:clamp(34px,4.6vw,64px);line-height:1.4;font-weight:700;color:#000;margin:0 0 20px}
.post-body h2{font-size:clamp(28px,2.8vw,40px);line-height:1.3;font-weight:700;color:#000;margin:.27em 0}
.post-body h3{font-size:20px;line-height:1.3;font-weight:700;color:#000;margin:0 0 20px}
.post-body p{margin:0 0 1.2em}
.post-body a{color:#000}
.cols2{display:grid;grid-template-columns:550px 550px;justify-content:space-between;gap:25px;margin:40px -77px 30px}
.col-img figure{margin:0 0 30px}
.col-img img{width:550px;max-width:100%;height:auto}
.col-img figcaption{margin-top:8px;font-size:16px}
.post-nav{max-width:1200px;margin:0 auto;padding:32px 0 0;display:flex;justify-content:space-between}
.post-nav a{color:#000;text-decoration:none}
@media (max-width:1240px){.cols2{grid-template-columns:1fr 1fr;margin:40px 0 30px}.col-img img{width:100%}}
@media (max-width:900px){.post-card{padding:48px 22px 40px}.cols2{grid-template-columns:1fr}}
/* episode + hub + lead form */
.listen{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 4px}
.listen .btn{margin-top:0}
.episode h2{font-size:clamp(24px,2.4vw,32px);margin:1.4em 0 .5em}
/* hubs, measured from the Hebrew archives (Astra podcast list + Content Views articles grid) */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pod-archive{max-width:1200px;margin:64px auto;padding:0 20px}
.pod-row{background:#F6F8F5;border-bottom:1px solid #ddd;padding:12.8px 106.72px;color:#000;font-size:16px;line-height:1.7}
.pod-row h2{font-size:30px;line-height:39px;font-weight:400;margin:0 0 6px}
.pod-row h2 a{color:#000;text-decoration:none}
.pod-player{display:block;width:100%;height:152px;border:0;border-radius:12px;margin:0 0 12px}
.pod-excerpt{margin:0}
.pod-more{margin:8px 0 6px}
.pod-more a{color:#000;text-decoration:underline}
.pager{display:flex;justify-content:center;align-items:center;padding-top:32px;font-size:17px}
.pager-n{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;color:#000;text-decoration:none}
.pager-n.current{background:#000;color:#fff}
.pager-step{color:#000;text-decoration:none;padding:0 25.6px;line-height:40px}
.pod-about{margin-top:56px;padding:40px 106.72px;background:#F6F8F5;line-height:1.7}
.pod-about h2{font-size:30px;font-weight:400;margin:0 0 12px}
.hub-grid-card h1{font-size:30px;line-height:1.2;font-weight:400;margin:0 0 10px}
.crumbs{margin:0 0 30px}
.crumbs a{color:#000;text-decoration:none}
.cv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 15px}
.cv-thumb{display:block;background:#e7ebe5;min-height:250px}
.cv-thumb img{display:block;width:100%;height:250px;object-fit:cover}
.cv-title{font-size:18px;line-height:1.3;font-weight:700;margin:10px 0 8px}
.cv-title a{color:#000;text-decoration:none}
.cv-excerpt{font-size:15px;line-height:1.6;margin:0 0 12px;color:#333}
.cv-btn{display:inline-block;background:#0075FF;color:#fff;font-size:14px;line-height:34px;padding:0 14px;border-radius:4px;text-decoration:none}
@media (max-width:900px){.pod-archive{margin:32px auto;padding:0 12px}.pod-row{padding:12px 16px}.pod-row h2{font-size:24px;line-height:1.3}
  .pod-about{padding:28px 16px}.cv-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cv-grid{grid-template-columns:1fr}}
.hub-list{list-style:none;padding:0;margin:30px 0 0}
.hub-list li{padding:18px 0;border-top:1px solid #dde3db}
.hub-list a{text-decoration:none;color:var(--navy)}
.hub-title{font-size:20px;font-weight:700}
.hub-date{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.hub-list p{margin:.4em 0 0}
.lead-form{background:#fff;border:2px solid var(--pink);border-radius:var(--radius);padding:24px;max-width:520px;margin:30px auto;display:grid;gap:14px}
.lead-title{font-weight:800;font-size:20px;color:var(--navy);margin:0}
.lead-form label{display:grid;gap:4px;font-weight:600}
.lead-form input:not([type=checkbox]){font:inherit;padding:10px 12px;border:1px solid #b9c0b6;border-radius:6px}
.lead-form .consent{display:block;font-weight:400}
.lead-msg{margin:0;font-weight:600;color:var(--navy)}
/* episode page, mirrored from the Hebrew single-podcast layout */
.crumbs{font-size:13px;color:var(--muted);margin:0 0 26px}
.crumbs a{color:var(--navy);text-decoration:none}
.ep-box{background:#EEF2EE;border-radius:14px;padding:26px 20px 20px}
.ep-box h1{font-size:20px;line-height:1.4;color:var(--navy);margin:0 0 4px}
.ep-sub{font-size:13px;color:var(--muted);margin:0 0 12px}
.ep-player{background:#fff;border-radius:14px;box-shadow:0 6px 24px rgba(3,0,92,.08);padding:14px 14px 10px;text-align:center}
.ep-player iframe{border:0;border-radius:12px}
.ep-player .listen{justify-content:center;margin:10px 0 4px}
.pill{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:14px;text-decoration:none;padding:7px 18px;border-radius:999px}
.pill:hover{background:var(--pink)}
.ep-player .note{margin:6px 0 0}
hr.grad{border:0;height:4px;border-radius:2px;margin:44px 0 30px;background:linear-gradient(90deg,#04F8C6,#3B5BDB,#9C27B0,#FC0382,#FF8A00)}
.episode h2{font-size:20px;color:var(--navy);margin:0 0 20px}
.follow{background:#EEF2EE;border-radius:14px;padding:22px;margin:50px 0 30px;text-align:center}
.follow p{font-weight:800;font-size:20px;color:var(--navy);margin:0 0 12px}
.follow .social{justify-content:center}
.ep-nav{display:flex;justify-content:space-between;border-top:1px solid #dde3db;padding-top:18px;font-weight:700;font-size:14px}
.ep-nav a{color:var(--navy);text-decoration:none}
.ep-nav .all{color:var(--pink)}
.follow .social{margin:0}.follow .social img{width:40px;height:40px}
.show-block{margin:44px 0 0;padding-top:26px;border-top:1px solid #dde3db}.show-block h2{font-size:20px;color:var(--navy);margin:0 0 14px}
.cohost{margin:18px 0 0;font-size:15px;color:#333}.cohost a{color:var(--navy)}
/* related links (episodes, articles) */
.related{margin:36px 0 26px;padding:18px 22px;background:var(--soft);border-radius:var(--radius)}
.related h2{font-size:18px;color:var(--navy);margin:0 0 8px}
.related ul{margin:0;padding-left:1.2em}.related li{margin:.35em 0}.related a{color:var(--navy)}
.post-body img,.prose img{height:auto}
.ftr-tag{margin:2px 0 0;font-size:14px;opacity:.85}

/* ===== Mel Robbins design language (Guy 11.9.2026) =====
   cream bands (#f4f4ee) under the header and in the footer, big semibold headings in Gili's navy #020057,
   grey body text, yellow buttons with a thin dark border, rounded cards and images, thin dividers.
   Landing pages (/sessions/, Bioutopia, ...) keep their own CSS; heading colours are scoped to site containers. */
:root{--head:#020057;--cream:#f4f4ee;--line:#e3e3dc;--text:#4a4a52}
body{font-family:'Figtree','Assistant',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#212322;font-size:17.5px;line-height:1.6}
.site-header:not(.over-hero){background:var(--cream)}
.logo{font-weight:700;letter-spacing:-.2px}
.mainnav a{font-size:15.5px}

/* headings */
.page h1,.post-card h1,.pod-archive h1,.ep-box h1,.prose h2,.prose h3,.post-body h2,.post-body h3,.episode h2,
.card h2,.about h2,.videos h2,.pod-row h2 a,.cv-title a,.related h2,.show-block h2,.follow p,.lead-title,.pod-about h2{color:var(--head)}
.page h1,.post-card h1,.pod-archive h1,.prose h2,.post-body h2,.card h2,.about h2,.videos h2,.pod-row h2,.pod-about h2{font-weight:600;letter-spacing:-.01em}

/* full-width cream title band under the header, centred like melrobbins.com/about */
.page > h1,.post-card > h1,.pod-archive > h1,.post-card > .crumbs{background:var(--cream);box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax);text-align:center}
.page > h1,.post-card > h1,.pod-archive > h1{font-size:clamp(34px,4.2vw,52px);line-height:1.1;margin:0 0 56px;padding:36px 0 64px}
.post-card > .crumbs{margin:0;padding:12px 0 0}
.episode > .crumbs{padding-bottom:28px}
.post-card > .crumbs + h1{padding-top:20px}
.hub-grid-card > h1{margin-bottom:0;padding-bottom:14px}
.hub-grid-card > .crumbs{background:var(--cream);box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax);text-align:center;margin:0 0 56px;padding:0 0 56px}
.crumbs{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#6b6b73}
.crumbs a{color:var(--head);text-decoration:none}

/* reading column */
.page{max-width:820px;padding:0 24px 72px}
.post-wrap{padding:0}
.post-card{background:transparent;max-width:820px;padding:0 24px 72px;color:var(--text);font-size:17.5px;line-height:1.65}
.page .prose,.post-body{color:var(--text)}
.prose h2,.post-body h2{font-size:clamp(26px,2.6vw,34px);line-height:1.2;margin:1.5em 0 .5em}
.prose h3,.post-body h3{font-size:21px;font-weight:600;line-height:1.3;margin:1.3em 0 .4em}
.post-body a,.prose a{color:var(--head);text-underline-offset:3px}
.post-body img,.prose img,.col-img img{border-radius:16px}
.cols2{grid-template-columns:1fr 1fr;margin:40px 0 30px}
.col-img img{width:100%}
.post-nav{max-width:820px;padding:0 24px 56px}
.post-nav a{color:var(--head);font-weight:600}

/* buttons (Guy 11.9.2026): navy #020057 fill, white text; no yellow */
.btn,.cv-btn,.pill,.pod-more a{display:inline-block;background:var(--head);color:#fff;border:1.5px solid var(--head);border-radius:10px;
  font-family:inherit;font-size:13.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.2;padding:15px 26px;text-decoration:none;cursor:pointer}
.btn:hover,.cv-btn:hover,.pill:hover,.pod-more a:hover{background:#1c1a8a;border-color:#1c1a8a;color:#fff}
/* on the navy hero the navy button gets a white edge so it stays visible */
.hero-cta{background:var(--head);color:#fff;border:1.5px solid #fff;border-radius:14px;box-shadow:none}
.hero-cta:hover{filter:none;background:#1c1a8a}

/* home */
.card img,.about-photo,.vgrid video{border-radius:16px}
.card h2{font-size:21px;line-height:1.25}
.card p,.about p{color:var(--text)}
.pinkline{display:none}
.about{background:var(--cream);box-shadow:0 0 0 100vmax var(--cream);clip-path:inset(0 -100vmax);padding-top:80px;padding-bottom:80px;margin:40px auto}
.about h2{font-size:clamp(32px,3.6vw,46px);line-height:1.1}
.videos{padding-top:40px;padding-bottom:80px}
.videos h2{font-size:clamp(30px,3.4vw,44px)}

/* podcast hub */
.pod-archive{max-width:1040px;margin:0 auto 80px;padding:0 24px}
.pod-row{background:transparent;border-bottom:1px solid var(--line);padding:36px 0;color:var(--text)}
.pod-row h2{font-size:clamp(22px,2.2vw,28px);line-height:1.25;margin:0 0 16px}
.pod-more{margin:20px 0 0}
.pager-n{border-radius:10px;color:var(--head)}
.pager-n.current{background:var(--head);color:#fff}
.pager-step{color:var(--head)}
.pod-about{background:var(--cream);border-radius:20px;padding:40px 48px;color:var(--text)}
.pod-about h2{font-size:28px}

/* articles hub */
.hub-grid-card{max-width:1240px}
.cv-grid{gap:44px 24px}
.cv-thumb{border-radius:16px;overflow:hidden;background:var(--cream)}
.cv-title{font-size:19px;font-weight:600;line-height:1.3;margin:16px 0 8px}
.cv-excerpt{color:var(--text)}

/* episode page */
.ep-box{background:var(--cream);border-radius:20px;padding:36px 32px 28px;margin-top:32px}
.ep-box h1{font-size:clamp(26px,3vw,38px);font-weight:600;line-height:1.15;margin:0 0 8px}
.ep-player{box-shadow:0 2px 16px rgba(0,0,0,.06);border-radius:16px}
hr.grad{height:1px;border-radius:0;background:var(--line);margin:48px 0 32px}
.episode h2{font-size:26px;font-weight:600}
.follow{background:var(--cream);border-radius:20px}
.related{background:var(--cream);border-radius:20px;padding:24px 28px}
.related a,.cohost a,.ep-nav a,.ep-nav .all{color:var(--head)}

/* lead form */
.lead-form{background:var(--cream);border:0;border-radius:20px;padding:32px}
.lead-form input:not([type=checkbox]){background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.lead-form .btn{justify-self:start}

/* footer: light, like melrobbins.com */
.site-footer{background:var(--cream);color:var(--head);padding:64px 0 28px;border-top:1px solid var(--line)}
.site-footer .wrap{max-width:1440px;padding:0 40px}
.ftr-name{color:var(--head)}
.ftr-name .mark{display:block;width:32px;height:28px;background:currentColor;-webkit-mask:url(/static/img/mark.png) center/contain no-repeat;mask:url(/static/img/mark.png) center/contain no-repeat}
.ftr-sub,.ftr-tag{opacity:1;color:var(--head)}
.ftr-nav{column-gap:64px}
.ftr-nav a{color:var(--head)}
.site-footer .social img{width:30px;height:30px}
.copy{max-width:1360px;margin:44px auto 0;padding:20px 40px 0;border-top:1px solid #d6d6cf;text-align:left;opacity:1;color:var(--head)}
.ftr-sub{margin-left:44px}

@media (max-width:900px){
  .cols2{grid-template-columns:1fr}
  .post-card{padding:0 20px 56px}
  .pod-about{padding:28px 20px}
  .about{padding-top:48px;padding-bottom:48px}
  .ep-box{padding:26px 18px 20px}
  .site-footer .wrap{padding:0 20px}
  .copy{margin:32px 0 0;padding:20px 20px 0}
}