/* Yeshivas Mevakshei Torah — shared site styles (Classic direction) */
:root{
  --navy:#0B303E;
  --navy-deep:#072431;
  --gold:#C59F4C;
  --gold-dark:#8C6A22;   /* gold for small text on light backgrounds (readable) */
  --gold-light:#E8E0C0;
  --cream:#FAF6EC;
  --cream-deep:#F3ECDA;   /* the alternate, slightly deeper cream behind framed cards */
  --paper:#FFFDF8;
  --ink:#1C2A31;
  --ink-mid:#4E5B61;
  --rule:#E4D9BD;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Montserrat", system-ui, sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;font-variant-ligatures:no-common-ligatures}   /* keep "ff", "fi", "fl" as separate letters */
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- Placeholder style (removed once content arrives) ---------- */
.ph{border:1px dashed #CDBF9C;background:rgba(197,159,76,.06);color:#8A7D60;font-size:13px;letter-spacing:.02em;padding:18px 20px;border-radius:2px;font-style:normal}
.ph b{display:block;font-weight:600;color:var(--gold-dark);text-transform:uppercase;font-size:11px;letter-spacing:.14em;margin-bottom:4px}
.on-dark .ph{border-color:rgba(197,159,76,.45);background:rgba(197,159,76,.06);color:#B9C3C6}
.on-dark .ph b{color:var(--gold)}


/* ---------- Header / Nav ---------- */
header{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:46px;width:auto}   /* the logo's gold Hebrew lettering */
.brand-text{font-family:var(--serif);line-height:1.05}
.brand-text small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dark);font-weight:600;margin-bottom:3px}
.brand-text strong{font-family:"Cinzel",var(--serif);font-size:21px;font-weight:600;color:var(--navy);letter-spacing:.06em}

nav ul{list-style:none;display:flex;align-items:center;gap:6px}
nav>ul>li{position:relative}
nav>ul>li>a,nav>ul>li>button{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:none;border:0;cursor:pointer;padding:12px 14px;display:flex;align-items:center;gap:6px;position:relative}
nav>ul>li>a::after,nav>ul>li>button::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .3s ease}
nav>ul>li:hover>a::after,nav>ul>li:hover>button::after,nav>ul>li>a.active::after{transform:scaleX(1)}
.caret{width:7px;height:7px;border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(45deg) translateY(-2px)}
.dropdown{position:absolute;top:100%;left:0;min-width:240px;background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--gold);box-shadow:0 18px 40px -16px rgba(11,48,62,.25);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s ease}
nav li:hover .dropdown,nav li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:10px 22px;font-family:var(--serif);font-size:19px;font-weight:500;color:var(--navy);transition:background .2s,color .2s,padding .2s}
.dropdown a:hover{background:var(--cream);color:var(--gold-dark);padding-left:28px}
.btn-support{margin-left:10px;background:var(--navy);color:#fff !important;padding:12px 22px !important;border:1px solid var(--navy)}
.btn-support::after{display:none}
.btn-support:hover{background:transparent;color:var(--navy) !important}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.menu-toggle span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--navy);transition:.3s}
.menu-toggle span:nth-child(1){top:15px}.menu-toggle span:nth-child(2){top:21px}.menu-toggle span:nth-child(3){top:27px}

/* ---------- Ornaments ---------- */
.ornament{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold)}
.ornament::before,.ornament::after{content:"";height:1px;width:90px;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament::after{background:linear-gradient(90deg,var(--gold),transparent)}
.ornament i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);display:block}
.eyebrow{font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--gold-dark)}
.on-dark .eyebrow{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--navy);line-height:1.15}
h2{font-size:clamp(34px,4vw,48px)}
.on-dark h2,.on-dark h3{color:#fff}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:16px 32px;border:1px solid var(--navy);transition:all .3s ease}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep);box-shadow:0 10px 24px -10px rgba(11,48,62,.6)}
.btn-ghost{color:var(--navy);border-color:var(--gold)}
.btn-ghost:hover{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.on-dark .btn-ghost{color:#fff}
.on-dark .btn-ghost:hover{color:var(--navy-deep)}
.btn-gold{background:var(--gold);color:var(--navy-deep);border-color:var(--gold)}
.btn-gold:hover{background:#d4b067}

/* ---------- Hero ---------- */
/* navy band with the logo in a cream arch, the tagline and buttons beside it (stacked on narrow screens) */
.hero{background:var(--navy);padding:72px 0;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:440px 1fr;gap:72px;align-items:center;max-width:1120px}
.hero-arch{background:var(--cream-deep);border-radius:300px 300px 0 0;padding:72px 44px 56px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.hero-logo{display:block;width:min(230px,62%);margin:0 auto}
.hero-words{align-self:stretch;display:flex;flex-direction:column}   /* buttons level with the bottom of the arch */
.hero-words::before{content:"";height:87px;flex:none}   /* same height as the buttons row, so the tagline centres on the arch */
.hero .tagline{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(32px,3.3vw,46px);line-height:1.18;color:var(--cream-deep);margin:auto 0;padding:4px 0 4px 28px;border-left:2px solid var(--gold);text-wrap:balance}
.hero .tagline br{display:none}   /* the line break suits a centred layout; beside the arch the lines balance themselves */
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;padding:40px 0 0 30px}
.hero .btn{font-size:11px;padding:13px 26px;letter-spacing:.17em}   /* a little smaller than the site's other buttons */
@media (max-width:1080px){.hero .wrap{grid-template-columns:380px 1fr;gap:56px}}
@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .hero-arch{width:100%;max-width:380px;margin:0 auto}
  .hero-words{text-align:center}
  .hero-words::before{display:none}
  .hero .tagline{max-width:620px;margin:0 auto;padding:0;border-left:0}
  .hero .tagline::before{content:"";display:block;width:64px;height:1px;background:var(--gold);margin:0 auto 22px}   /* a short gold line above when stacked */
  .hero .actions{justify-content:center;padding:44px 0 0}
}

/* ---------- Welcome ---------- */
section{padding:110px 0}
.welcome .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;align-items:start}
.welcome h2{margin:14px 0 22px}
.welcome .rule{width:60px;height:1px;background:var(--gold);margin-bottom:26px}
.welcome-text p{font-family:var(--text-serif);font-variant-numeric:lining-nums;font-weight:500;font-size:21.5px;line-height:1.75;color:var(--navy);margin-bottom:1.15em}
.welcome-text .lead-in{font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.12em;color:var(--gold-dark)}
.read-more{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:3px;transition:color .2s}
.read-more:hover{color:var(--gold-dark)}
.welcome-text .read-more{display:table;margin:8px auto 0}   /* centered under the summary */

/* ---------- Our Rebbeim (homepage): arched photos, name in capitals, role in italics ---------- */
.hanhala{background:var(--cream);border-top:1px solid var(--rule)}
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.person{text-align:center}
.arch{border-radius:200px 200px 6px 6px;overflow:hidden;border:2px solid var(--gold);padding:5px;background:var(--paper)}
.arch img{border-radius:190px 190px 2px 2px;aspect-ratio:4/5;object-fit:cover;width:100%;height:auto;display:block}
.person h4{font-family:"Cormorant SC",Georgia,serif;font-size:21px;font-weight:600;color:var(--navy);margin-top:14px;line-height:1.2}
.person span{display:block;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold-dark)}
.people-link{text-align:center;margin-top:44px}
/* each rebbe links to his bio; on hover (or keyboard focus) he rises slightly and the gold frame deepens */
a.person{display:block;color:inherit;outline:none;transition:transform .35s ease}
a.person .arch{transition:border-color .3s ease,box-shadow .35s ease}
a.person:hover,a.person:focus-visible{transform:translateY(-6px)}
a.person:hover .arch,a.person:focus-visible .arch{border-color:var(--gold-dark);box-shadow:0 0 0 4px var(--cream),0 0 0 5px var(--gold),0 26px 40px -24px rgba(11,48,62,.5)}
@media (prefers-reduced-motion:reduce){a.person,a.person .arch{transition:none}a.person:hover,a.person:focus-visible{transform:none}}
@media (max-width:860px){.people{grid-template-columns:repeat(2,1fr)}}

/* ---------- Explore ---------- */
.explore{background:var(--paper);border-top:1px solid var(--rule)}
.section-head{text-align:center;max-width:680px;margin:0 auto 64px}
.section-head h2{margin:14px 0 18px}
.section-head .ornament{margin-top:22px}
/* program cards: white framed cards like the inside pages, each with an icon */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--gold);padding:44px 34px 38px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 26px 60px -42px rgba(11,48,62,.5);transition:transform .3s ease,box-shadow .3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(11,48,62,.55)}
.card-icon{width:66px;height:66px;border-radius:50%;background:var(--cream-deep);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--gold)}
.card-icon img{width:44px;height:auto;margin-top:-2px}   /* the logo crown, in full color */
.card h3{font-size:30px;color:var(--navy);margin:18px 0 12px}
.card .card-text{flex:1;margin-bottom:26px;font-family:var(--text-serif);font-size:19px;line-height:1.6;color:var(--ink-mid)}
.card .more{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:10px}
.card .more::after{content:"";width:22px;height:1px;background:var(--gold);transition:width .3s}
.card:hover .more::after{width:40px}

/* ---------- Begin Here (audiences) ---------- */

/* ---------- Quote ---------- */
.quote{background:var(--cream);text-align:center;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.quote .wrap{max-width:860px}
.quote-he{font-family:var(--hebrew);font-weight:500;font-size:clamp(30px,3.6vw,44px);line-height:1.5;color:var(--navy)}
.quote-he span{display:inline-block;white-space:nowrap}   /* each half of the pasuk stays together */
.quote-tr{font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.2vw,26px);line-height:1.45;color:var(--ink-mid);margin-top:14px}
.quote-cite{font-family:var(--hebrew);font-size:17px;color:var(--gold-dark);margin-top:10px}
.quote .ornament{margin:30px 0 26px}
.quote-note{font-family:var(--text-serif);font-weight:500;font-size:20px;line-height:1.6;color:var(--navy);max-width:620px;margin:0 auto 22px}

/* ---------- CTA ---------- */
.cta{background:var(--cream);border-top:1px solid var(--rule);text-align:center;padding:100px 0}
.cta h2{margin:14px 0 34px}
.cta .sub{color:var(--ink-mid);max-width:560px;margin:0 auto 36px}
.cta .actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

/* ---------- Footer ---------- */
footer{background:var(--navy);color:#B9C3C6;font-size:14px;padding:80px 0 0}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;padding-bottom:64px;border-bottom:1px solid rgba(197,159,76,.25)}
.foot-brand img{width:130px;margin-bottom:20px}
footer h4{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a:hover{color:#fff}
footer h4 a{color:inherit;border-bottom:1px solid transparent;transition:border-color .2s}
footer h4 a:hover{color:var(--gold);border-color:var(--gold)}
.legal{display:flex;justify-content:space-between;padding:24px 0;font-size:12px;letter-spacing:.04em;opacity:.75}


/* ---------- Responsive ---------- */
@media (max-width:1080px){
  /* logo on its own row, then About, Join Us and Contact side by side */
  .foot-grid{grid-template-columns:repeat(3,1fr);gap:36px 32px}
  .foot-brand{grid-column:1/-1}
  .foot-brand img{margin-bottom:0}
}
@media (max-width:960px){
  .menu-toggle{display:block}
  nav{position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--rule);max-height:0;overflow:hidden;transition:max-height .4s ease}
  nav.open{max-height:80vh;overflow:auto}
  nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px}
  nav>ul>li>a,nav>ul>li>button{width:100%;padding:16px 0;border-bottom:1px solid var(--rule)}
  nav>ul>li>a::after,nav>ul>li>button::after{display:none}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 8px 14px;background:none;display:none}
  nav li.sub-open .dropdown{display:block}   /* About folds open when tapped (site.js) */
  nav li.sub-open .caret{transform:rotate(225deg) translateY(-2px)}
  .dropdown a{font-size:18px;padding:8px 0}
  .btn-support{margin:16px 0 0;justify-content:center}
  .welcome .wrap{grid-template-columns:1fr;gap:36px}
}
@media (max-width:600px){
  section{padding:76px 0}
  .wrap{padding:0 16px}
  /* footer on a phone: logo on top, About and Join Us side by side, Contact below, all centred */
  footer{padding-top:52px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px 16px;padding-bottom:40px;text-align:center}
  .foot-brand,.foot-grid>div:last-child{grid-column:1/-1}
  .foot-brand img{width:104px;margin:0 auto}
  footer h4{margin-bottom:14px}
  .brand-text strong{font-size:17px}
  .brand img{height:38px}
  header .wrap{height:62px}
  .hero{padding:56px 0 64px}
  .legal{flex-direction:column;gap:6px;align-items:center;text-align:center}
}

/* =====================================================================
   INSIDE PAGES
   ===================================================================== */
:root{
  --text-serif:"EB Garamond", "Cormorant Garamond", Georgia, serif;
  --hebrew:"Frank Ruhl Libre", "Times New Roman", serif;
}
nav>ul>li>button.active::after{transform:scaleX(1)}

/* ---------- Page banner ---------- */
.page-banner{background:var(--navy);text-align:center;padding:84px 0 78px;position:relative;overflow:hidden}
.page-banner::before{content:"";position:absolute;left:50%;top:50%;width:560px;height:460px;transform:translate(-50%,-50%);background:url(../assets/crown-white.png) center/contain no-repeat;opacity:.04}
.page-banner::after{content:"";position:absolute;inset:14px;border:1px solid rgba(197,159,76,.22);pointer-events:none}
.page-banner .wrap{position:relative}
.page-banner h1{color:#fff;font-size:clamp(44px,6vw,72px);margin:14px 0 22px;font-weight:600}
.crumbs{margin-top:26px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9FB0B6}
.crumbs a:hover{color:#fff}
.crumbs span{color:var(--gold);margin:0 10px}

.anchor{scroll-margin-top:128px}

/* ---------- Long-form article ---------- */
.article-section{padding:100px 0}
.article-section.tint{background:var(--cream);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.article{max-width:740px;margin:0 auto;font-family:var(--text-serif);font-size:20.5px;line-height:1.75;color:var(--ink)}
.article p{margin-bottom:1.25em}
.article p:last-child{margin-bottom:0}
.article .lead{font-size:24px;line-height:1.6;color:var(--navy)}
.article .opening::first-letter,.article .lead::first-letter{font-family:var(--serif);font-weight:600;font-size:3.4em;line-height:.9;float:left;padding:7px 10px 0 0;color:var(--gold-dark)}   /* sized to sit beside exactly two lines */
.article .lead::first-letter{font-size:3.1em}   /* the larger opening paragraph has tighter lines */
.article .ornament{margin:54px 0}
.article .closing{margin-top:54px;padding:40px 20px 0;border-top:1px solid var(--rule);text-align:center;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(27px,3.2vw,36px);line-height:1.35;color:var(--navy)}
.tint .article .closing{border-color:#DCCFAE}
.he{font-family:var(--hebrew);font-size:.96em}
.eyebrow .he{font-size:21px;letter-spacing:.04em;font-weight:500;line-height:1}

/* ---------- Source / pasuk blocks ---------- */
.source{margin:34px auto 38px;padding:38px 44px 34px;background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--gold);text-align:center;box-shadow:0 18px 40px -30px rgba(11,48,62,.35)}
.source .he-text{font-family:var(--hebrew);font-weight:500;font-size:29px;line-height:1.7;color:var(--navy);direction:rtl}
.source .cite{font-family:var(--hebrew);font-size:17px;color:var(--gold-dark);margin-top:8px;direction:rtl}
.source .rule{width:44px;height:1px;background:var(--gold);margin:22px auto 20px}
.source .tr{font-style:italic;font-size:19.5px;line-height:1.6;color:var(--ink-mid);max-width:560px;margin:0 auto}
.source .tr em{font-style:normal}

/* ---------- Next-page band ---------- */
.next{background:var(--navy-deep);text-align:center;padding:92px 0}
.next h2{margin:14px 0 34px}
.next .actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}

@media (max-width:600px){
  .page-banner{padding:60px 0 56px}
  .anchor{scroll-margin-top:116px}
  .article-section{padding:68px 0}
  .article{font-size:19px}
  .article .lead{font-size:21px}
  .source{padding:28px 20px 26px}
  .source .he-text{font-size:24px}
  .source .tr{font-size:18px}
}

/* ---------- Rebbeim (bio sections) ---------- */
.rebbe{padding:104px 0}
.rebbe.tint{background:var(--cream);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.rebbe .wrap{display:grid;grid-template-columns:370px 1fr;gap:84px;align-items:start;max-width:1120px}
.rebbe.flip .wrap{grid-template-columns:1fr 370px}
.rebbe.flip .portrait{order:2}
.portrait{position:sticky;top:102px}
.portrait .frame{position:relative;z-index:0;margin:0 0 14px 14px}
.rebbe.flip .portrait .frame{margin:0 14px 14px 0}
.portrait .frame::before{content:"";position:absolute;inset:14px 14px -14px -14px;border:1px solid var(--gold);z-index:-1}
.rebbe.flip .portrait .frame::before{inset:14px -14px -14px 14px}
.portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;box-shadow:0 26px 50px -28px rgba(11,48,62,.55)}
.rebbe-text h2{font-size:clamp(36px,4vw,50px);margin:12px 0 22px}
.rebbe-text .rule{width:60px;height:1px;background:var(--gold);margin-bottom:30px}
.bio{font-family:var(--text-serif);font-size:20px;line-height:1.75;color:var(--ink)}
.bio p{margin-bottom:1.2em}
.bio p:last-child{margin-bottom:0}
/* on wide screens each rebbe's role and name stay in view while his bio is read: they pin under the
   menu bar level with the pinned photo (112px); the gap under the gold rule is inside the block and
   its last 22px fade out, so the bio slides away softly, and nothing is faded when the page is at rest */
@media (min-width:961px){
  .rebbe-text .head{position:sticky;top:71px;z-index:2;padding:31px 0 30px;margin-top:-31px;
    background:linear-gradient(var(--cream) calc(100% - 22px),rgba(250,246,236,0))}
  .rebbe-text .head .rule{margin-bottom:0}
  .rebbe.tint .rebbe-text .head{background:linear-gradient(var(--cream-deep) calc(100% - 22px),rgba(243,236,218,0))}
}

@media (max-width:960px){
  .rebbe{padding:76px 0}
  .rebbe .wrap,.rebbe.flip .wrap{grid-template-columns:1fr;gap:44px}
  .rebbe.flip .portrait{order:0}
  .portrait{position:static;max-width:340px;margin:0 auto;width:100%}
  .rebbe-text{text-align:left}
  .rebbe-text .head{text-align:center}
  .rebbe-text .rule{margin-left:auto;margin-right:auto}
}
@media (max-width:600px){
  .bio{font-size:19px}
  .portrait{max-width:280px}
}
@media (max-width:600px){
  .rebbe.anchor{scroll-margin-top:156px}
}

/* ---------- Daily Seder (schedule timeline) ---------- */
.seder{padding:96px 0 112px}
.seder-group{max-width:760px;margin:0 auto}
.seder-group + .seder-group{margin-top:64px}
.seder-label{display:flex;align-items:center;gap:22px;margin-bottom:22px}
.seder-label::before,.seder-label::after{content:"";flex:1;height:1px;background:var(--rule)}
.seder-label span{font-size:11.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dark)}
.timeline{list-style:none;position:relative}
.timeline::before{content:"";position:absolute;left:279.5px;top:26px;bottom:26px;width:1px;background:linear-gradient(var(--gold),var(--gold)) center/1px 100% no-repeat;opacity:.55}
.timeline li{display:grid;grid-template-columns:260px 40px 1fr;align-items:center;padding:17px 0}
.timeline .time{text-align:right;font-size:14.5px;font-weight:600;letter-spacing:.1em;color:var(--gold-dark);white-space:nowrap}
.timeline .dot{justify-self:center;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px var(--paper);position:relative}
.timeline .what{font-family:var(--serif);font-weight:600;font-size:29px;line-height:1.2;color:var(--navy);padding-left:14px}
.timeline li.tefillah .dot{border-radius:0;transform:rotate(45deg);background:var(--navy)}
.timeline li.break .dot{background:var(--paper);border:1px solid var(--gold)}
.timeline li.break .what{font-weight:500;font-style:italic;font-size:25px;color:var(--ink-mid)}

@media (max-width:600px){
  .seder{padding:64px 0 76px}
  .seder-group + .seder-group{margin-top:48px}
  .timeline::before{left:121.5px}
  .timeline li{grid-template-columns:108px 28px 1fr;padding:14px 0}
  .timeline .time{font-size:12px;letter-spacing:.04em}
  .timeline .dot{width:9px;height:9px}
  .timeline .what{font-size:22px;padding-left:8px}
  .timeline li.break .what{font-size:20px}
}

.section-head h2{text-wrap:balance}

/* ---------- Contact ---------- */
.contact-section{padding:100px 0 110px}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1080px;margin:0 auto}
.contact-grid .contact-card .value{font-size:clamp(20px,1.9vw,25px)}
.contact-form-wrap{margin-top:96px}
.contact-form-wrap .card-box{max-width:760px;margin:0 auto}
.contact-form-wrap .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-done{text-align:center;padding:12px 0}
.contact-done .seal{width:64px;height:64px;border-radius:50%;background:var(--navy);margin:0 auto 20px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 7px rgba(197,159,76,.22)}
.contact-done .seal svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:2.4}
.contact-done h3{font-size:32px;margin-bottom:10px}
.contact-done p{font-family:var(--text-serif);font-size:20px;color:var(--ink-mid)}
.contact-card{background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--gold);padding:46px 30px 42px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:box-shadow .3s ease,border-color .3s ease}
/* the same gentle hover on every card: a soft shadow and the icon brightening; only the phone and email are links */
.contact-card:hover{box-shadow:0 18px 38px -30px rgba(11,48,62,.4);border-color:#E2D3A8}
.contact-card .icon{transition:transform .3s ease,box-shadow .3s ease}
.contact-card:hover .icon{transform:scale(1.06);box-shadow:0 0 0 5px rgba(197,159,76,.18)}
a.contact-card .value{border-bottom:1px solid transparent;transition:border-color .3s ease}
a.contact-card:hover .value{border-bottom-color:var(--gold)}
.contact-card .icon{width:56px;height:56px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.contact-card .icon svg{width:24px;height:24px;stroke:var(--gold);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contact-card .value{font-family:var(--serif);font-size:clamp(23px,2.6vw,30px);font-weight:600;color:var(--navy);margin-top:10px;word-break:break-word}
@media (max-width:700px){
  .contact-grid{grid-template-columns:1fr}
  .contact-form-wrap{margin-top:64px}
  .contact-section{padding:64px 0 76px}
}

/* ---------- Framed pages: content sits on a paper card over a cream background ---------- */
.article-section,.seder,.contact-section,.rebbe{background:var(--cream)}
.article-section.tint,.rebbe.tint{background:var(--cream-deep)}
.article-section .article,.seder .seder-group{
  background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--gold);
  box-shadow:0 26px 60px -40px rgba(11,48,62,.45)}
.article-section .article{max-width:900px;padding:64px 72px}
.seder .seder-group{max-width:820px;padding:56px 40px 50px}
.tint .article .source{background:#fff}
@media (max-width:760px){
  .article-section .article{padding:44px 30px}
}
@media (max-width:600px){
  .article-section .article{padding:32px 20px}
  .seder .seder-group{padding:32px 12px 28px}
}

/* homepage program cards: three across, stacked on narrow screens */
@media (max-width:860px){
  .cards{grid-template-columns:1fr}
}

/* Privacy Policy */
.policy .article{max-width:860px;font-size:18px;line-height:1.7}   /* a legal page: smaller than the reading pages */
@media (max-width:600px){.policy .article{font-size:17px}}
.policy .article h3{font-size:clamp(25px,2.4vw,30px);margin:38px 0 12px;color:var(--navy)}
.policy .article ul{margin:0 0 1.2em 1.2em}
.policy .article li{margin:0 0 6px}
.policy .updated{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:22px}
.legal a{color:inherit;border-bottom:1px solid rgba(197,159,76,.6);white-space:nowrap}
.legal a:hover{color:#fff}

/* Shabbos Experience: one short card, so give it more cream around it */
.article-section.shabbos{padding:150px 0 170px}
.article-section.shabbos .article{max-width:780px}
@media (max-width:600px){.article-section.shabbos{padding:88px 0 100px}}

/* College: each program has name + contact on the left, description on the right (the intro card keeps the usual width) */
.prog-row{display:grid;grid-template-columns:320px 1fr;gap:64px;max-width:1040px;margin:56px auto 0;padding-top:56px;border-top:1px solid var(--gold)}
.prog-side h3{font-size:clamp(28px,2.8vw,34px);margin:0 0 16px;line-height:1.15}
.prog-side .rule{width:60px;height:1px;background:var(--gold);margin-bottom:22px}
.prog-text{font-family:var(--text-serif);font-size:20px;line-height:1.75;color:var(--ink)}
.prog-text p{margin-bottom:1.1em}
.prog-text p:last-child{margin-bottom:0}
.prog-row a{color:var(--navy);border-bottom:1px solid var(--gold);word-break:break-word}
.prog-row a:hover{color:var(--gold-dark)}
.program-contact a[href^="tel:"],.program-contact .nowrap{white-space:nowrap}   /* keep each phone number and note on one line */
.program-contact{padding:22px 24px;background:var(--paper);border-left:2px solid var(--gold);font-family:var(--sans);font-size:15px;line-height:1.8;color:var(--ink)}
.program-contact b{display:block;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:6px}
@media (max-width:860px){.prog-row{grid-template-columns:1fr;gap:24px}}
@media (max-width:600px){.prog-row{margin-top:44px;padding-top:44px}.prog-text{font-size:19px}.program-contact{padding:18px;font-size:14.5px}}

/* Long reading text (articles, College programs, Rebbeim bios): a little larger with more space between lines, so it is easy to follow */
.article,.prog-text,.bio{font-size:22px;line-height:1.85;color:#1A2A31}
@media (max-width:600px){.article,.prog-text,.bio{font-size:20px;line-height:1.8}}