/* Solomon Quantum Field — component styles. Tokens only; no raw values. */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--w-content); margin-inline: auto; padding-inline: var(--s-5); }
.wrap.narrow { max-width: var(--w-article); }
section { padding-block: var(--s-9); position: relative; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lead { color: var(--text-secondary); font-size: var(--body-lg); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-body);
  font-weight: 600; font-size: .97rem; padding: var(--s-3) var(--s-6); border-radius: 999px;
  cursor: pointer; border: 0; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
/* Breadcrumbs */
.breadcrumbs { padding-block: var(--s-8) 0; font-size: var(--caption); color: var(--text-muted); }
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs .sep { margin-inline: var(--s-2); }

/* Section heads */
.section-head { max-width: var(--w-article); margin-block-end: var(--s-7); }
.section-head.centered { margin-inline: auto; text-align: center; }
.section-head h2 {margin-block: var(--s-3) var(--s-4);}
.section-head p { color: var(--text-secondary); font-size: var(--body-lg); margin: 0; }
.section-cta { margin-block-start: var(--s-6); }

/* Rail + cards */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap: var(--s-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--s-5); }
.rail > * { scroll-snap-align: start; }
@media (max-width: 900px) { .rail { grid-auto-columns: minmax(250px, 78%); } }
.content-card { background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--s-6); display: flex; flex-direction: column;
  gap: var(--s-3); min-height: 250px; transition: transform var(--dur) var(--ease),
  background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.content-card:hover { transform: translateY(-6px); background: var(--surface-hover); box-shadow: var(--glow-soft); }
.content-card .cat { font-size: var(--eyebrow); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-violet); }
.content-card h3 { font-size: var(--h3); }
.content-card p { color: var(--text-secondary); font-size: var(--body-sm); flex: 1; margin: 0; }
.content-card .cta { font-weight: 600; font-size: var(--body-sm); }
/* Journey */
.journey-box { max-width: 860px; margin-inline: auto; background: var(--bg-elevated);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--s-8) var(--s-6); text-align: center; position: relative; overflow: hidden; }
.journey-box::before { content: ''; position: absolute; inset-block-start: -40%; inset-inline-start: 50%;
  translate: -50% 0; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(82,80,240,.18), transparent 68%); pointer-events: none; }
.journey-options { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center;
  margin-block-end: var(--s-6); position: relative; }
.journey-options button { font-family: var(--font-body); font-size: var(--body-sm); font-weight: 500;
  color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: var(--s-3) var(--s-5); cursor: pointer; transition: all var(--dur) var(--ease); }
.journey-options button:hover { color: var(--text-primary); border-color: var(--accent-violet); }
.journey-options button[aria-pressed='true'] { background: var(--accent-violet); color: #fff; border-color: var(--accent-violet); }
.journey-result { min-height: 110px; position: relative; }
.journey-result .lead-in { color: var(--text-muted); font-size: var(--body-sm); margin: 0; }
.journey-result .picks { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; margin-block-start: var(--s-4); }
.journey-result .pick { background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: var(--s-3) var(--s-5); font-weight: 600; font-size: var(--body-sm); }
.journey-result .pick:hover { border-color: var(--accent-violet); }

/* Quantum Hour */
.quantum-hour { background: linear-gradient(135deg, #14123a, var(--bg-elevated)); }
.quantum-hour .wrap { display: grid; grid-template-columns: 1fr auto; gap: var(--s-7); align-items: center; }
.quantum-hour h2 {font-weight: 800; margin-block-start: var(--s-3);}
.quantum-hour .sub { color: var(--accent-gold); font-weight: 600; font-size: var(--body-sm); margin-block: var(--s-3) var(--s-4); }
.quantum-hour p { color: var(--text-secondary); max-width: 540px; margin: 0; }
@media (max-width: 800px) { .quantum-hour .wrap { grid-template-columns: 1fr; } }

/* Founder — light editorial break */
.founder { background: var(--paper); color: var(--text-on-light); }
.founder .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s-8); align-items: center; }
.founder h2 {color: var(--text-on-light); margin-block: var(--s-3) var(--s-5);}
.founder p { color: var(--text-on-light-secondary); }
.founder .pull { font-family: var(--font-editorial); font-size: 1.5rem; color: var(--text-on-light);
  margin-block: var(--s-5); line-height: 1.4; }
.portrait { aspect-ratio: 4/5; border-radius: var(--radius-lg); background: var(--paper-tint-2);
  display: grid; place-items: center; color: var(--text-on-light-secondary); font-size: var(--caption);
  border: 1px solid var(--border-on-light); }
@media (max-width: 900px) { .founder .wrap { grid-template-columns: 1fr; } .portrait { max-width: 320px; margin-inline: auto; } }

/* Credentials */
.credentials { background: var(--paper-tint); color: var(--text-on-light); }
.credentials h2, .credentials .section-head h2 {color: var(--text-on-light);}
.cred-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s-5); }
.cred { border-inline-start: 2px solid var(--accent-indigo); padding-inline-start: var(--s-4); }
.cred b { display: block; font-size: var(--body-sm); }
.cred span { font-size: var(--caption); color: var(--text-on-light-secondary); }
.cred .flag { color: #8a6d1a; font-weight: 600; }

/* Field Picks */
.picks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); }

/* Newsletter */
.newsletter { background: var(--bg-elevated); border-block-start: 1px solid var(--border-subtle); text-align: center; }
.newsletter h2 { font-size: var(--h1); margin-block: var(--s-3) var(--s-4); }
.newsletter-sub { color: var(--text-secondary); max-width: 520px; margin-inline: auto; }
.newsletter form { display: flex; gap: var(--s-3); max-width: 460px; margin: var(--s-6) auto 0; flex-wrap: wrap; }
.newsletter input { flex: 1; min-width: 220px; background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: var(--s-3) var(--s-5); color: var(--text-primary); font-family: var(--font-body); }
.form-status { font-size: var(--caption); color: var(--text-muted); margin-block-start: var(--s-4); min-height: 1.2em; }

/* Footer */
.site-footer { background: var(--bg-deep); padding-block: var(--s-9) var(--s-6);
  border-block-start: 1px solid var(--border-subtle); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s-6); margin-block-end: var(--s-7); }
.foot-blurb { color: var(--text-muted); font-size: var(--body-sm); margin-block-start: var(--s-4); max-width: 280px; }
.foot-col h4 { font-size: var(--eyebrow); letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-violet); margin: 0 0 var(--s-4); }
.foot-col a { display: block; color: var(--text-secondary); font-size: var(--body-sm); padding-block: var(--s-1); }
.foot-col a:hover { color: var(--text-primary); }
.foot-disclaimer { border: 1px solid var(--border-subtle); border-radius: var(--radius);
  padding: var(--s-5); color: var(--text-muted); font-size: var(--caption); }
.foot-base { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  color: var(--text-muted); font-size: var(--caption); margin-block-start: var(--s-5); }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ============ INNER PAGES ============ */
.page-hero { padding-block: calc(var(--s-10) + var(--s-6)) var(--s-7); text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(82,80,240,.14), transparent 70%); }
.prose h2 {margin-block: var(--s-7) var(--s-3);}
.prose p {color: var(--text-secondary); margin-block: 0 var(--s-4);}

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--accent-indigo), var(--accent-violet)); text-align: center; padding-block: var(--s-8); }
.cta-band h2 { font-size: var(--h1); color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); max-width: 520px; margin: var(--s-3) auto var(--s-5); }
.cta-actions { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }

/* About layers */
.layers .wrap { display: flex; flex-direction: column; gap: var(--s-8); }
.layer { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-7); align-items: start; }
.layer-tag { display: flex; flex-direction: column; gap: var(--s-2); }
.layer-n { font-family: var(--font-editorial); font-size: 2.4rem; color: var(--accent-violet); line-height: 1; }
.layer-body h2 { font-size: var(--h2); margin-block-end: var(--s-4); }
.layer-body p { color: var(--text-secondary); margin-block-end: var(--s-3); }
.pull-section { background: var(--bg-elevated); border-block: 1px solid var(--border-subtle); }
.big-pull { font-family: var(--font-editorial); font-size: clamp(1.5rem, 3.5vw, 2.3rem); text-align: center;
  line-height: 1.4; margin: 0; border: 0; }
@media (max-width: 760px) { .layer { grid-template-columns: 1fr; gap: var(--s-4); } }

/* Approach orbit */
.approach-orbit .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }

/* Session page */
.session-for .fact { border-inline-start: 3px solid var(--accent-violet); padding-inline-start: var(--s-5); }
.session-for .fact p { font-size: var(--body-lg); color: var(--text-primary); margin: var(--s-2) 0 0; }
.session-steps h2, .session-faq h2 { font-size: var(--h2); margin-block-end: var(--s-6); }
.stepper { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.step { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; }
.step-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border-subtle); color: var(--accent-violet);
  font-weight: 700; font-family: var(--font-editorial); }
.step b { font-size: var(--h3); }
.step p { color: var(--text-secondary); margin: var(--s-1) 0 0; }
.framework-note { background: var(--surface); border-radius: var(--radius); padding: var(--s-5);
  color: var(--text-secondary); font-style: italic; }

/* FAQ accordion */
.faq-list { display: flex; flex-direction: column; gap: var(--s-3); }
.faq-item { border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.faq-item summary { list-style: none; cursor: pointer; padding: var(--s-4) var(--s-5); display: flex;
  justify-content: space-between; align-items: center; gap: var(--s-4); font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { position: relative; width: 14px; height: 14px; flex: none; }
.faq-mark::before, .faq-mark::after { content: ''; position: absolute; background: var(--accent-violet);
  transition: transform var(--dur) var(--ease); }
.faq-mark::before { inset-block-start: 6px; inset-inline: 0; height: 2px; }
.faq-mark::after { inset-inline-start: 6px; inset-block: 0; width: 2px; }
.faq-item[open] .faq-mark::after { transform: scaleY(0); }
.faq-a { padding: 0 var(--s-5) var(--s-5); }
.faq-a p { color: var(--text-secondary); margin: 0; }

/* Training */
.group-title { font-size: var(--h2); margin-block: var(--s-7) var(--s-5); }
.cred-list { display: flex; flex-direction: column; gap: var(--s-4); }
.cred-row { border-inline-start: 2px solid var(--accent-indigo); padding-inline-start: var(--s-4); }
.cred-row b { font-size: var(--body-lg); }
.cred-flag { display: inline-block; margin-inline-start: var(--s-3); font-size: var(--caption);
  color: var(--accent-gold); border: 1px solid rgba(201,162,39,.4); border-radius: 999px; padding: 2px 10px; }
.cred-inst { display: block; color: var(--text-secondary); font-size: var(--body-sm); margin-block-start: var(--s-1); }
.cred-clar { display: block; color: var(--text-muted); font-size: var(--caption); margin-block-start: var(--s-1); }
.fine-note { color: var(--text-muted); font-size: var(--body-sm); margin-block-start: var(--s-6);
  padding-block-start: var(--s-4); border-block-start: 1px solid var(--border-subtle); }

/* Quantum Hour */
.qh-hero .qh-sub { color: var(--accent-gold); font-weight: 600; margin-block: var(--s-3); }
.qh-next { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--s-6); text-align: center; margin-block-end: var(--s-6); }
.qh-next.unscheduled { border-style: dashed; }
.qh-next time { display: block; font-family: var(--font-editorial); font-size: 1.6rem; margin-block: var(--s-3); }
.qh-next p { color: var(--text-secondary); margin-block: var(--s-3) var(--s-5); }
.qh-includes ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-4); }
.qh-includes li { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: 999px;
  padding: var(--s-2) var(--s-5); font-size: var(--body-sm); }

/* Article */
.article-w { max-width: var(--w-article); }
.article h1 { font-size: var(--display-lg); margin-block: var(--s-3); }
.article .dek { font-size: var(--body-lg); color: var(--text-secondary); }
.article-meta { display: flex; gap: var(--s-3); align-items: center; color: var(--text-muted);
  font-size: var(--body-sm); margin-block: var(--s-5) var(--s-7); flex-wrap: wrap; }
.article-meta .dot { opacity: .5; }
.author-box { display: flex; gap: var(--s-4); align-items: center; margin-block-start: var(--s-8);
  padding-block-start: var(--s-5); border-block-start: 1px solid var(--border-subtle); }
.author-box b { display: block; } .author-box span { color: var(--text-muted); font-size: var(--body-sm); }

/* Resources */
.resource-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); }
.resource-cat { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--s-6); }
.resource-cat h2 { font-size: var(--h3); }
.resource-cat p { color: var(--text-secondary); font-size: var(--body-sm); margin-block: var(--s-2) var(--s-4); }
.resource-empty { color: var(--text-muted); font-size: var(--caption); font-style: italic;
  border: 1px dashed var(--border-subtle); border-radius: var(--radius-sm); padding: var(--s-3); text-align: center; }
.affiliate-note { color: var(--text-muted); font-size: var(--body-sm); margin-block-start: var(--s-6); text-align: center; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-8); align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: var(--s-4); }
.contact-form h2, .contact-aside h2 { font-size: var(--h2); margin-block-end: var(--s-2); }
.contact-form label { display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--body-sm); font-weight: 600; color: var(--text-secondary); }
.contact-form input, .contact-form select, .contact-form textarea { background: var(--surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4);
  color: var(--text-primary); font-family: var(--font-body); font-size: var(--body); font-weight: 400; }
.contact-form textarea { resize: vertical; }
.contact-form .consent { flex-direction: row; align-items: flex-start; gap: var(--s-3); font-weight: 400; font-size: var(--caption); color: var(--text-muted); }
.contact-form .consent input { width: 18px; height: 18px; flex: none; margin-block-start: 2px; }
.contact-form input:invalid:not(:placeholder-shown) { border-color: #c0556a; }
.contact-aside { background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--s-6); }
.contact-item { margin-block: var(--s-4); color: var(--text-secondary); font-size: var(--body-sm); }
.response-note { color: var(--text-muted); font-size: var(--caption); margin-block-start: var(--s-6); }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }


/* ============ GAIA-STYLE LIGHT BODY (airy default) ============ */
/* Dark is reserved for the hero and footer; the rest of the site breathes
   in light, the way Gaia's content sections do. */
body { background: var(--paper); color: var(--text-on-light); }

/* Sections default to light; dark blocks opt in explicitly. */
section { background: var(--paper); }
.explore, #explore { background: var(--paper-tint); }
.section-head h2 {color: var(--text-on-light);}
.section-head p { color: var(--text-on-light-secondary); }

/* Content cards on light */
.content-card { background: #fff; border-color: var(--border-on-light);
  box-shadow: 0 8px 30px rgba(28,22,56,.06); }
.content-card:hover { background: #fff; box-shadow: 0 20px 50px rgba(82,80,240,.14); }
.content-card h3 { color: var(--text-on-light); }
.content-card p { color: var(--text-on-light-secondary); }
.content-card .cta { color: var(--accent-violet); }
.content-card .cat { color: var(--accent-violet); }

/* Journey widget on light */
.journey { background: var(--paper-tint); }
.journey-box { background: #fff; border-color: var(--border-on-light);
  box-shadow: 0 20px 60px rgba(28,22,56,.08); }
.journey-options button { background: #fff; border-color: var(--border-on-light);
  color: var(--text-on-light-secondary); }
.journey-options button:hover { color: var(--text-on-light); }
.journey-result .lead-in { color: var(--text-on-light-secondary); }
.journey-result .pick { background: var(--paper-tint); border-color: var(--border-on-light);
  color: var(--text-on-light); }

/* Page hero (inner pages) on light with a soft glow */
.page-hero { background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(130,80,240,.08), transparent 70%), var(--paper); }
.prose {color: var(--text-on-light-secondary);}
.prose h2 {color: var(--text-on-light);}
.prose p {color: var(--text-on-light-secondary);}

/* Sessions/steps/faq on light */
.session-steps h2, .session-faq h2, .group-title { color: var(--text-on-light); }
.step b { color: var(--text-on-light); }
.step p { color: var(--text-on-light-secondary); }
.step-n { background: #fff; border-color: var(--border-on-light); }
.framework-note { background: var(--paper-tint); color: var(--text-on-light-secondary); }
.faq-item { background: #fff; border-color: var(--border-on-light); }
.faq-item summary { color: var(--text-on-light); }
.faq-a p { color: var(--text-on-light-secondary); }
.session-for .fact p { color: var(--text-on-light); }
.cred-row b { color: var(--text-on-light); }
.cred-inst { color: var(--text-on-light-secondary); }
.article h1, .article .prose h2 {color: var(--text-on-light);}
.article .dek { color: var(--text-on-light-secondary); }
.article-meta { color: var(--text-muted); }
.author-box { border-color: var(--border-on-light); }
.author-box b { color: var(--text-on-light); }

/* Resource cards stay vivid; their container is light */
.resource-cat { background: #fff; border-color: var(--border-on-light); }
.resource-cat h2 { color: var(--text-on-light); }
.resource-cat p { color: var(--text-on-light-secondary); }
.affiliate-note { color: var(--text-on-light-secondary); }

/* Contact on light */
.contact-form label { color: var(--text-on-light-secondary); }
.contact-form input, .contact-form select, .contact-form textarea {
  background: #fff; border-color: var(--border-on-light); color: var(--text-on-light); }
.contact-aside { background: var(--paper-tint); border-color: var(--border-on-light); }
.contact-aside h2 { color: var(--text-on-light); }
.contact-item { color: var(--text-on-light-secondary); }

/* Quantum hour band: soft tint, not dark */
.quantum-hour { background: linear-gradient(135deg, #f3ecff, var(--paper-tint)); }
.quantum-hour h2 {color: var(--text-on-light);}
.quantum-hour p { color: var(--text-on-light-secondary); }
.qh-next { background: #fff; border-color: var(--border-on-light); }
.qh-includes li { background: #fff; border-color: var(--border-on-light); color: var(--text-on-light); }

/* Footer explicitly dark */
.site-footer { background: var(--bg-deep); color: rgba(240,236,255,.7); }
.site-footer .foot-blurb { color: var(--text-muted); }

/* ============ FOUR GATES ============ */
.gates { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
.gate { position: relative; background: #fff; border: 1px solid var(--border-on-light);
  border-radius: var(--radius-lg); padding: var(--s-7); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.gate:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(82,80,240,.14); }
.gate-n { font-family: var(--font-editorial); font-size: 2.6rem; color: var(--accent-violet); opacity: .5; line-height: 1; }
.gate h3 { font-size: var(--h3); color: var(--text-on-light); margin-block: var(--s-3) var(--s-2); }
.gate p { color: var(--text-on-light-secondary); font-size: var(--body-sm); margin: 0 0 var(--s-4); }
.gate .cta { color: var(--accent-violet); font-weight: 600; font-size: var(--body-sm); }
@media (max-width: 720px) { .gates { grid-template-columns: 1fr; } }

/* ============ TOPIC CHIPS (learning / community) ============ */
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-6); }
.topic-chip { background: var(--paper-tint); border: 1px solid var(--border-on-light);
  border-radius: 999px; padding: var(--s-3) var(--s-5); font-size: var(--body-sm);
  font-weight: 500; color: var(--text-on-light); }

/* ============ LISTEN RAILS ============ */
.listen-rails { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-4); margin-block-start: var(--s-6); }
.listen-rail { background: #fff; border: 1px solid var(--border-on-light); border-radius: var(--radius);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.listen-cover { width: 48px; height: 48px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: linear-gradient(150deg, var(--accent-indigo), var(--accent-violet)); color: #fff; font-size: 1.4rem; }
.listen-rail b { color: var(--text-on-light); }
.listen-rail .soon { font-size: var(--caption); color: var(--text-muted); }

/* ============ LAYERS FLOW (about) ============ */
.layers-flow { display: flex; flex-direction: column; gap: var(--s-8); margin-block-end: var(--s-8); }

/* Footer legal row */
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-block: var(--s-5) var(--s-3);
  padding-block-start: var(--s-5); border-block-start: 1px solid var(--border-subtle); }
.foot-legal a { color: var(--text-muted); font-size: var(--caption); }
.foot-legal a:hover { color: var(--text-primary); }

/* Ensure the fixed header never overlaps page content. */
:root { --header-h: 78px; }
.page-hero { padding-block-start: calc(var(--s-8) + var(--header-h)); }
html { scroll-padding-block-start: calc(var(--header-h) + var(--s-4)); }
@media (max-width: 900px) { :root { --header-h: 68px; } }

/* ============================================================
   INNER PAGE HERO — a living "video-like" band, not flat colour.
   The same warm light field that animates the homepage runs here
   too (softer, shorter), so every page opens with movement rather
   than a static header. Real footage can replace it later.
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #241a45 0%, #3a2350 42%, var(--paper) 100%);
  min-height: 46vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero canvas.page-field {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,16,45,.18) 0%, rgba(20,16,45,.02) 40%, rgba(255,255,255,.55) 82%, var(--paper) 100%);
}

/* ============================================================
   HOLISTIC PASS — warmer, softer, more breathing room.
   Moves the feel from "tech product" toward something closer to
   a calm physical space: warm paper, organic radii, gentle bands.
   ============================================================ */
body { background: var(--paper); }

/* Alternate warm bands so long pages breathe instead of running flat. */
section:nth-of-type(even) { background: var(--paper-warm); }
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

/* Editorial rhythm: generous measure and spacing in body copy. */
.prose {max-width: 68ch; margin-inline: auto;}
.prose h2 {margin-block: 2.4em 0.7em; font-weight: 600;}
.prose h3 {margin-block: 1.8em 0.5em; font-weight: 600; color: var(--text-on-light);}
.prose p {margin-block: 0 1.15em;}
.prose ul, .prose ol {margin-block: 0 1.4em; padding-inline-start: 1.4em; color: var(--text-on-light-secondary);}
.prose li {margin-block-end: .55em;}
.prose strong {color: var(--text-on-light); font-weight: 600;}
.prose em {color: var(--text-on-light-secondary);}

/* Opening paragraph of a page reads larger and warmer. */
.prose .lead-para {color: var(--text-on-light); font-family: var(--font-editorial); font-weight: 400; margin-block-end: 1.6em;}

/* Pull quotes feel hand-placed rather than boxed. */
.prose blockquote {border: 0; margin: 2.4em 0; padding: 0 0 0 1.4em; border-inline-start: 3px solid var(--accent-clay); font-family: var(--font-editorial); color: var(--text-on-light);}
.prose blockquote p {margin: 0;}

/* Closing disclaimer lines in session pages: quiet, not shouty. */
.prose > p > em:only-child {display: block; color: var(--text-muted); padding-block-start: 1.2em; border-block-start: 1px solid var(--border-on-light);}

/* Warm CTA band instead of the saturated gradient. */
.cta-band {
  background: linear-gradient(135deg, #40365e 0%, #5b4a7a 55%, #7d5f74 100%);
}

/* Inner page band: warmer light, gentler fade into the page. */
.page-hero {
  background: linear-gradient(180deg, #3f3358 0%, #5a4566 40%, var(--paper) 100%);
  min-height: 40vh;
}
.page-hero::after {
  background: linear-gradient(180deg, rgba(40,30,60,.14) 0%, rgba(40,30,60,.01) 38%,
              rgba(253,251,247,.62) 80%, var(--paper) 100%);
}
.prose h3 {font-family: var(--font-body); font-weight: 600;}

/* Homepage editable block sits comfortably under the hero. */
.home-editable { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* ============================================================
   SESSIONS OVERVIEW — gateway sections + image cards
   ============================================================ */
.gateway-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.gateway-section .section-head { margin-bottom: 2rem; }
@keyframes scrolldot { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,14px)} }

/* Ghost button for hero */
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px); }

/* ---- EXPLORE THE FIELD ---- */
.explore-field { background: var(--paper); }
.section-head.centered { text-align: center; max-width: 60ch; margin: 0 auto 3rem; }
.section-sub {color: var(--text-on-light-secondary); margin-top: .8rem;}

/* ---- JOURNEY FINDER ---- */
.journey { background: var(--paper-warm); }
.journey-box { max-width: 760px; margin: 0 auto; background: #fffdfa;
  border: 1px solid var(--border-on-light); border-radius: 24px; padding: 2.5rem; }

/* ---- THE FIELD IS OPENING (timeline) ---- */
.opening { background: var(--paper); }
.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.phase { position: relative; padding: 1.8rem 1.5rem; background: #fffdfa;
  border: 1px solid var(--border-on-light); border-radius: 18px; }
.phase-when { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-clay); margin-bottom: .6rem; }
.phase h3 { font-size: 1.15rem; color: var(--text-on-light); margin: 0 0 .5rem;
  font-family: var(--font-body); font-weight: 600; }
.phase p { font-size: .93rem; color: var(--text-on-light-secondary); margin: 0; line-height: 1.6; }
.beyond { text-align: center; padding: 2rem; background: var(--paper-warm); border-radius: 18px; margin-bottom: 1.5rem; }
.beyond ul { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap;
  gap: .6rem; justify-content: center; }
.beyond li { background: #fffdfa; border: 1px solid var(--border-on-light); border-radius: 999px;
  padding: .5rem 1.1rem; font-size: .88rem; color: var(--text-on-light); }
.opening-note { text-align: center; font-family: var(--font-editorial), serif; font-style: italic;
  font-size: 1.2rem; color: var(--text-on-light-secondary); margin-bottom: 2rem; }

/* ---- QUANTUM HOUR (dark, with rings) ---- */
.quantum-hour { background: linear-gradient(160deg, #1a1530 0%, #2a1f42 100%); color: #fff; overflow: hidden; }
.quantum-hour .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center; }
.quantum-hour h2 {color: #fff;}
.quantum-hour .sub { color: #d9c4a3; font-size: 1.1rem; font-weight: 500; }
.quantum-hour p { color: rgba(255,255,255,.8); line-height: 1.75; }
.qh-visual { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.qh-ring { position: absolute; border: 1px solid rgba(213,163,90,.4); border-radius: 50%; }
.qh-ring:nth-child(1) { width: 60%; height: 60%; animation: qhpulse 4s ease-in-out infinite; }
.qh-ring:nth-child(2) { width: 80%; height: 80%; animation: qhpulse 4s ease-in-out infinite .6s; }
.qh-ring:nth-child(3) { width: 100%; height: 100%; animation: qhpulse 4s ease-in-out infinite 1.2s; }
@keyframes qhpulse { 0%,100%{opacity:.3;transform:scale(.96)} 50%{opacity:.8;transform:scale(1)} }
@media (max-width: 820px) { .quantum-hour .wrap { grid-template-columns: 1fr; } .qh-visual { display: none; } }

/* ---- FOUNDER ---- */
.founder { background: var(--paper-warm); }
.founder .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; }
.founder .portrait img { width: 100%; border-radius: 24px; box-shadow: 0 24px 60px rgba(58,51,80,.18); }
.founder .pull { border: 0; border-inline-start: 3px solid var(--accent-clay);
  padding-inline-start: 1.3rem; margin: 1.4rem 0; font-family: var(--font-editorial), serif;
  font-size: 1.5rem; color: var(--text-on-light); }
@media (max-width: 820px) { .founder .wrap { grid-template-columns: 1fr; } }

/* ---- STATEMENTS (two editorial columns) ---- */
.statements .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.statement h3 {font-family: var(--font-editorial), serif; font-weight: 400; color: var(--text-on-light); margin: .4rem 0 1rem;}
.statement p { color: var(--text-on-light-secondary); line-height: 1.75; }
.statement .pull.small { border: 0; border-inline-start: 2px solid var(--accent-clay);
  padding-inline-start: 1rem; font-family: var(--font-editorial), serif; font-style: italic;
  font-size: 1.15rem; color: var(--text-on-light); margin-top: 1rem; }
@media (max-width: 720px) { .statements .wrap { grid-template-columns: 1fr; } }

/* ---- JOURNAL TEASER + FINAL CTA ---- */
.writing-band, .journal-teaser { background: var(--paper); }
.final-cta { background: linear-gradient(160deg, #241b38 0%, #3a2b54 55%, #5a4570 100%); color: #fff; text-align: center; }
.final-cta h2 {color: #fff;}
.final-cta p { color: rgba(255,255,255,.85); font-size: 1.15rem; margin-bottom: 2rem; }

/* Journey finder buttons + results */
.journey-options { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-bottom: 1.5rem; }
.journey-options button { background: var(--paper-warm); border: 1px solid var(--border-on-light);
  border-radius: 999px; padding: .7rem 1.3rem; font-size: .95rem; font-weight: 500;
  color: var(--text-on-light); cursor: pointer; transition: all .2s ease; }
.journey-options button:hover { border-color: var(--accent-clay); transform: translateY(-2px); }
.journey-options button[aria-pressed="true"] { background: var(--accent-clay); color: #fff; border-color: var(--accent-clay); }
.journey-result .lead-in { text-align: center; color: var(--text-on-light-secondary); margin-bottom: 1rem; }
.journey-result .picks { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.journey-result .pick { background: #fffdfa; border: 1px solid var(--accent-clay); border-radius: 14px;
  padding: .9rem 1.4rem; font-weight: 600; color: var(--accent-clay); transition: all .2s ease; }
.journey-result .pick:hover { background: var(--accent-clay); color: #fff; }

/* ============================================================
   FIXES v2.4 — contrast, sizing, portrait, based on live review
   ============================================================ */

/* --- CONTRAST: Quantum Hour was white text on cream. Make it dark. --- */
.quantum-hour {
  background: linear-gradient(160deg, #1a1530 0%, #2a1f42 100%) !important;
  color: #fff;
}
.quantum-hour h2 {color: #fff !important;}
.quantum-hour .sub { color: #e4d3b5 !important; }
.quantum-hour p { color: rgba(255,255,255,.85) !important; }
.quantum-hour .qh-ring { border-color: rgba(213,163,90,.45); }

/* --- FOUNDER PORTRAIT: was enormous. Constrain hard. --- */
.founder .wrap { grid-template-columns: 340px 1fr; gap: 3.5rem; align-items: center; }
.founder .portrait { max-width: 340px; }
.founder .portrait img {
  width: 100%; height: auto; max-height: 460px; object-fit: cover;
  border-radius: 20px; box-shadow: 0 20px 50px rgba(58,51,80,.2);
}
@media (max-width: 820px) {
  .founder .wrap { grid-template-columns: 1fr; }
  .founder .portrait { max-width: 300px; margin: 0 auto; }
}
.btn-sm { font-size: .8rem; padding: .5rem 1rem; }
/* ============================================================
   SIZING PASS — tighter, less "everything is enormous"
   ============================================================ */
/* Sections were too tall. Reduce vertical rhythm. */
section { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }

/* Quantum Hour: rings were dominating. Shrink + contain. */
.quantum-hour .qh-visual { max-width: 300px; margin-inline: auto; }
.btn-sm { font-size: .8rem; padding: .5rem 1.05rem; }

/* --- Responsive --- */
.quantum-hour { background:
  radial-gradient(ellipse at 70% 30%, rgba(198,161,91,.14), transparent 55%),
  linear-gradient(160deg, #150f28 0%, #241a3c 100%); }
.final-cta { background:
  radial-gradient(ellipse at 30% 30%, rgba(198,161,91,.16), transparent 55%),
  radial-gradient(ellipse at 75% 70%, rgba(91,70,161,.4), transparent 50%),
  linear-gradient(160deg, #1a1330 0%, #2e2148 55%, #3f2d5c 100%); }

/* --- Section rhythm: generous, editorial breathing --- */
section { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* --- Buttons: more refined, tactile --- */
.btn { border-radius: 999px; font-weight: 500; letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .3s ease, background .3s ease; }

/* --- Pull quotes: gold rule, editorial serif --- */
.pull, .prose blockquote {border-inline-start-color: var(--accent-gold) !important;}

/* --- Smooth scroll + section fade edges --- */
html { scroll-behavior: smooth; }

/* --- Journey buttons: refined --- */
.journey-options button[aria-pressed="true"] { background: var(--accent-gold); border-color: var(--accent-gold); }
.journey-result .pick { border-color: var(--accent-gold); color: #96703f; }
.journey-result .pick:hover { background: var(--accent-gold); color: #fff; }

/* --- Beyond chips + phase accents --- */
.phase-when { color: var(--accent-gold); }
.beyond li:hover { border-color: var(--accent-gold); }

/* ============================================================
   PROTOCOL + ORBIT — single authoritative, mobile-first (v2.8)
   ============================================================ */
.protocol {
  position: relative;
  /* A flat colour first, so the section is never light even if the layered
     gradients below fail to parse or are stripped by an optimiser. Losing the
     gradient costs some depth; losing the dark background makes white text
     unreadable. */
  background-color: #0f0c1e;
  background-image:
    radial-gradient(ellipse at 25% 20%, rgba(91, 70, 161, .32), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(61, 45, 90, .4), transparent 50%),
    linear-gradient(160deg, #0f0c1e 0%, #1a1530 60%, #221a38 100%);
  color: #fff;
}
.protocol h2,
.protocol h3 { color: #fff; }
.protocol p { color: rgba(255, 255, 255, .82); }
.protocol .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 3.5vw, 3rem);
  align-items: center;
  max-width: 1140px;
}
.protocol h2 {color: #fff; margin-block: .6rem 1.4rem;}
.protocol p { color: rgba(255,255,255,.82); line-height: 1.75; margin-block: 0 1.1rem; }
.protocol .pull {
  border: 0; border-inline-start: 3px solid var(--accent-gold);
  padding-inline-start: 1.3rem; margin: 1.6rem 0;
  font-family: var(--font-editorial), serif; font-size: 1.35rem; line-height: 1.4; color: #f0e4d4;
}
.protocol-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.orbit-hint { font-size: .82rem; color: rgba(255,255,255,.5); text-align: center; margin: 0; max-width: 30ch; }

/* --- MOBILE: stack, shrink orbit, tighten --- */
@media (max-width: 860px) {
  .protocol .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .protocol p { font-size: 1rem; }
  .protocol .pull { font-size: 1.2rem; }
  .protocol-actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
}
/* ============================================================
   MOBILE OPTIMIZATION — comprehensive pass (v2.8)
   Everything below 768px, tuned for real phones and indexing.
   ============================================================ */
@media (max-width: 768px) {
  /* Global rhythm: tighter but breathing */
  section { padding-block: clamp(2.5rem, 9vw, 3.5rem); }
  .wrap { padding-inline: 1.25rem; }

  /* Section heads */
  .section-head.centered { margin-bottom: 2rem; }
  .gateway-block { margin-bottom: 2.5rem; }
  .session-card-body { padding: 1rem 1.1rem 1.2rem; }

  /* FOUNDER — portrait centered and capped */
  .founder .wrap { grid-template-columns: 1fr; gap: 1.8rem; }
  .founder .portrait { max-width: 240px; margin: 0 auto; }
  .founder .pull { font-size: 1.25rem; }

  /* QUANTUM HOUR — hide the decorative rings on small screens */
  .quantum-hour .wrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .qh-visual { display: none; }

  /* THE FIELD IS OPENING — single column timeline */
  .phases { grid-template-columns: 1fr; gap: 1rem; }
  .beyond ul { gap: .5rem; }
  .beyond li { font-size: .82rem; padding: .45rem .9rem; }

  /* STATEMENTS — stack */
  .statements .wrap { grid-template-columns: 1fr; gap: 2rem; }

  /* JOURNAL + FINAL CTA */
  .card-grid { grid-template-columns: 1fr; gap: 1rem; }
  .final-cta p { font-size: 1rem; }
  .btn-lg { width: 100%; justify-content: center; }

  /* Journey finder */
  .journey-box { padding: 1.5rem 1.2rem; }
  .journey-options button { font-size: .9rem; padding: .6rem 1rem; }
  .page-hero { min-height: 32vh; }

  /* Touch targets: comfortable tap size everywhere */
  .btn { min-height: 46px; display: inline-flex; align-items: center; }

  /* Footer */
  .foot-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .foot-legal { gap: .8rem 1.2rem; }
}

/* Very small phones */
/* RTL: mirror the arrow and orbit hint alignment for Hebrew */
[dir="rtl"] .arrow-inline { display: inline-block; transform: scaleX(-1); }

/* ============================================================
   MOBILE HARDENING v2.9 — prevent overflow, enforce readability
   ============================================================ */
@media (max-width: 768px) {
  /* Nothing should ever cause horizontal scroll */
  html, body { overflow-x: hidden; max-width: 100%; }
  /* Media must not overflow, but inline UI icons carry their own width/height
     attributes — forcing height:auto on those collapses them to nothing, which
     is what made the hamburger button render empty on phones. */
  img, video, canvas { max-width: 100%; height: auto; }
  svg:not(.icon):not([width]) { max-width: 100%; }

  /* Dark sections: reduce heavy padding, keep text legible */
  .protocol, .quantum-hour, .final-cta, .opening { padding-block: 2.5rem; }
  .protocol .wrap, .quantum-hour .wrap { gap: 2rem; }

  /* Any two-column grid collapses */
  .founder .wrap, .statements .wrap, .protocol .wrap,
  .quantum-hour .wrap, .contact-grid { grid-template-columns: 1fr !important; }

  /* Prose readability */
  .prose h2 {margin-block: 1.6em .5em;}

  /* Blockquotes don't overflow */
  .prose blockquote, .pull {padding-inline-start: 1rem;}
}

/* Ensure the fixed header never overlaps content on any screen */
body { padding-top: 0; }
/* ============================================================
   NEW WIDGETS v3.3 — FAQ, spotlight, principles, newsletter,
   statement band, article cards
   ============================================================ */

/* ---------- FAQ accordion ---------- */
.faq-band { background: var(--paper-warm); }
.faq-heading {text-align: center; margin-bottom: 2rem; font-family: var(--font-editorial), serif; font-weight: 400; color: var(--text-on-light);}
.faq-list { display: flex; flex-direction: column; gap: .7rem; }
.faq-item { background: #fdfaf3; border: 1px solid rgba(58,51,80,.09); border-radius: 14px;
  overflow: hidden; transition: border-color .25s ease, box-shadow .25s ease; }
.faq-item[open] { border-color: rgba(176,141,87,.4); box-shadow: 0 10px 30px rgba(58,51,80,.07); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.02rem; color: var(--text-on-light);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { position: relative; flex: none; width: 16px; height: 16px; }
.faq-mark::before, .faq-mark::after {
  content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 16px; height: 2px; background: var(--accent-gold); border-radius: 2px;
  transform: translateY(-50%); transition: transform .25s ease, opacity .25s ease;
}
.faq-mark::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] .faq-mark::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.faq-answer { padding: 0 1.3rem 1.2rem; }
.faq-answer p { margin: 0; color: var(--text-on-light-secondary); line-height: 1.75; }

/* ---------- Featured spotlight ---------- */
.spotlight { background: var(--paper); }
.spotlight .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.spotlight.is-flipped .spotlight-media { order: 2; }
.spotlight-media img { width: 100%; height: auto; border-radius: 20px; display: block;
  box-shadow: 0 20px 55px rgba(58,51,80,.16); }
.spotlight-copy h2 {font-family: var(--font-editorial), serif; font-weight: 400; color: var(--text-on-light); margin: .5rem 0 1rem;}
.spotlight-copy p { color: var(--text-on-light-secondary); line-height: 1.75; }
.spotlight-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
@media (max-width: 820px) {
  .spotlight .wrap { grid-template-columns: 1fr; }
  .spotlight.is-flipped .spotlight-media { order: 0; }
}

/* ---------- Principle trio ---------- */
.principles { background: var(--paper-warm); }
.principle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.principle { background: #fdfaf3; border: 1px solid rgba(58,51,80,.09); border-radius: 18px;
  padding: 1.8rem 1.6rem; }
.principle-n { display: block; font-family: var(--font-editorial), serif; font-size: 1.6rem;
  color: var(--accent-gold); margin-bottom: .6rem; }
.principle h3 {font-weight: 600; color: var(--text-on-light); margin: 0 0 .5rem;}
.principle p { font-size: .95rem; color: var(--text-on-light-secondary); line-height: 1.7; margin: 0; }

/* ---------- Statement band ---------- */
.statement-band { background: var(--paper); }
.statement-band h2 {font-family: var(--font-editorial), serif; font-weight: 400; color: var(--text-on-light); margin: .5rem 0 1rem;}
.statement-band p { color: var(--text-on-light-secondary); line-height: 1.8; font-size: 1.05rem; }
.statement-band .pull { border: 0; border-inline-start: 3px solid var(--accent-gold);
  padding-inline-start: 1.3rem; margin: 1.5rem 0 0; font-family: var(--font-editorial), serif;
  font-style: italic; font-size: 1.25rem; color: var(--text-on-light); }
.statement-band.is-dark {
  background: linear-gradient(160deg, #12101f 0%, #1a1530 100%); color: #fff;
}
.statement-band.is-dark h2 { color: #fff; }
.statement-band.is-dark p { color: rgba(255,255,255,.82); }
.statement-band.is-dark .pull { color: #f0e4d4; }

/* ---------- Newsletter ---------- */
.newsletter-band { background: var(--paper-warm); }
.newsletter-band h2 {font-family: var(--font-editorial), serif; font-weight: 400; color: var(--text-on-light); margin: 0 0 .7rem;}
.newsletter-band p { color: var(--text-on-light-secondary); margin: 0 auto 1.5rem; max-width: 52ch; }
.newsletter-form { display: flex; gap: .6rem; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
.newsletter-form input[type="email"] {
  flex: 1 1 240px; min-height: 46px; padding: .7rem 1.1rem;
  border: 1px solid rgba(58,51,80,.18); border-radius: 999px; background: #fff;
  font-size: .98rem; color: var(--text-on-light);
}
.newsletter-form input[type="email"]:focus {
  outline: none; border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(176,141,87,.16);
}

/* Screen-reader helper */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* Mobile for the new widgets */
@media (max-width: 768px) {
  .faq-item summary { font-size: .96rem; padding: .95rem 1.1rem; }
  .principle { padding: 1.4rem 1.2rem; }
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; justify-content: center; }
  .spotlight-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   JOURNAL v3.3 — archive + article
   ============================================================ */

/* ---------- Filter pills ---------- */
.journal-filters { padding-block: 0 0.5rem; background: var(--paper); }
.featured-post-img { display: block; overflow: hidden; min-height: 280px; background: var(--paper-warm); }
.featured-post-img img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s ease; }
.featured-post-body { padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-direction: column;
  justify-content: center; gap: .7rem; }
.featured-post-body h2 {font-family: var(--font-editorial), serif; font-weight: 400; color: var(--text-on-light); margin: 0;}
.featured-post-body p { color: var(--text-on-light-secondary); line-height: 1.7; margin: 0; }
.featured-post-body .cta { color: var(--accent-gold); font-weight: 600; margin-top: .3rem; }
@media (max-width: 820px) {
  .featured-post-img { min-height: 200px; aspect-ratio: 16/9; }
}

/* ---------- Article hero ---------- */
.article-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6rem);
  text-align: center; background: var(--paper); }
.article-hero.has-image { color: #fff; }
.article-hero .article-hero-bg { position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; }
.article-hero.has-image::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,12,30,.72) 0%, rgba(15,12,30,.55) 50%, rgba(15,12,30,.8) 100%);
}
.article-hero .wrap { position: relative; z-index: 2; }
.article-hero.has-image h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.article-hero.has-image .dek { color: rgba(255,255,255,.88); }
.article-meta { display: flex; align-items: center; justify-content: center; gap: .6rem;
  flex-wrap: wrap; font-size: .88rem; color: var(--text-on-light-secondary); }
.article-hero.has-image .article-meta { color: rgba(255,255,255,.75); }
.article-meta .dot { opacity: .5; }

/* ---------- Article prose ---------- */
.article-w { max-width: 760px; }
.article-prose {padding-block: clamp(2rem, 5vw, 3.5rem);}
.article-prose > p:first-of-type::first-letter {float: inline-start; font-family: var(--font-editorial), serif; padding-inline-end: .09em; margin-block-start: .04em; color: var(--accent-gold);}
.article-prose h2 {font-family: var(--font-editorial), serif; font-weight: 400; margin-block: 2em .6em; color: var(--text-on-light);}
.article-prose h3 {font-weight: 600; margin-block: 1.6em .5em;}
.article-prose blockquote {border: 0; border-inline-start: 3px solid var(--accent-gold); padding-inline-start: 1.4rem; margin-block: 2rem; font-family: var(--font-editorial), serif; font-style: italic; color: var(--text-on-light);}
.article-prose img {border-radius: 14px; margin-block: 2rem;}
.article-prose figure {margin-block: 2rem;}
.article-prose figcaption {color: var(--text-muted, #9a92a8); text-align: center; margin-top: .6rem;}

/* ---------- Author box ---------- */
.author-box {
  display: flex; align-items: center; gap: 1.2rem;
  background: var(--paper-warm); border-radius: 18px; padding: 1.4rem 1.6rem;
  margin-block: 1rem 2rem;
}
.author-portrait img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; display: block; }
.author-copy { display: flex; flex-direction: column; gap: .15rem; }
.author-copy b { font-size: 1.02rem; color: var(--text-on-light); }
.author-copy span { font-size: .88rem; color: var(--text-on-light-secondary); }
.author-copy .cta { font-size: .88rem; font-weight: 600; color: var(--accent-gold); margin-top: .3rem; }

/* ---------- Related ---------- */
.related-reading { background: var(--paper-warm); }

@media (max-width: 768px) {
  .article-prose blockquote {padding-inline-start: 1rem;}
  .author-box { flex-direction: column; text-align: center; gap: .8rem; }
  .author-copy { align-items: center; }
}

/* ============================================================
   MOBILE FINAL PASS v3.3 — details
   ============================================================ */
@media (max-width: 768px) {
  .gateway-label { padding-inline-start: .8rem; }
  .gateway-label p { font-size: .9rem; }

  /* Journal */
  .featured-post-body { padding: 1.3rem; }
  .filter-pills { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap;
    padding-bottom: .5rem; margin-inline: -1.25rem; padding-inline: 1.25rem; }
  .filter-pills .pill { flex: none; }

  /* Article */
  .article-hero { padding-block: 3rem; }
  .article-meta { font-size: .82rem; }

  /* Blocks */
  .principle-grid { grid-template-columns: 1fr; }
  .spotlight .wrap { gap: 1.5rem; }
}

/* ============================================================
   INTERNAL LINKS v3.7
   ============================================================ */
/* Inline contextual links inside prose — visible but not shouty */
.prose .sqf-inline-link,
.article-prose .sqf-inline-link {color: var(--accent-gold); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 92%; transition: background-size .25s ease, color .2s ease;}
.prose .sqf-inline-link:hover,
.article-prose .sqf-inline-link:hover {color: #96703f; background-size: 100% 2px;}

/* Related sessions block on service pages */
.related-sessions { background: var(--paper-warm); }
.related-sessions .section-head { margin-bottom: 1.8rem; }
.related-sessions h2 {font-family: var(--font-editorial), serif; font-weight: 400; color: var(--text-on-light); margin: .3rem 0 0;}

/* Footer social links */
.foot-social { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
  margin-block: 1.5rem 1rem; }
.foot-social .social-link {
  font-size: .82rem; font-weight: 500; color: var(--text-on-light-secondary);
  border: 1px solid rgba(58,51,80,.14); border-radius: 999px;
  padding: .4rem 1rem; transition: all .2s ease; min-height: 36px;
  display: inline-flex; align-items: center;
}
.foot-social .social-link:hover {
  border-color: var(--accent-gold); color: var(--accent-gold);
  transform: translateY(-1px);
}

.prose .sqf-inline-link:hover,
.article-prose .sqf-inline-link:hover {color: #5F4B2C;}

/* Outline button on light */
.btn-outline.on-light:hover { border-color: var(--accent-gold-text); color: var(--accent-gold-text); }

/* Journey finder selected state */
.journey-options button[aria-pressed="true"] {
  background: var(--accent-gold-btn); border-color: var(--accent-gold-btn);
}
.journey-result .pick:hover { background: var(--accent-gold-btn); color: #fff; }

/* Footer social */
.foot-social .social-link:hover { border-color: var(--accent-gold-text); color: var(--accent-gold-text); }

/* --- Responsive switch --- */
/* Keep fixed header from covering content on inner pages */
:root { --header-h: 68px; }

/* ============================================================
   INNER PAGES v4.2 — rich, block-driven layouts
   ============================================================ */

/* Blocks render their own full-bleed sections, so the wrapper must not
   constrain them. Prose inside a block page still gets a readable measure. */
.page-blocks { display: block; }
.page-blocks > .wp-block-html,
.page-blocks > p,
.page-blocks > h2,
.page-blocks > h3,
.page-blocks > ul,
.page-blocks > ol,
.page-blocks > blockquote {
  max-width: 68ch;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.page-blocks > .wp-block-html {
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.page-blocks .wp-block-html h2 {font-family: var(--font-editorial), serif; font-weight: 400; color: var(--text-on-light); margin-block: 2em .6em;}
.page-blocks .wp-block-html h3 {font-weight: 600; margin-block: 1.8em .5em;}
.page-blocks .wp-block-html p {color: var(--text-on-light-secondary); margin-block: 0 1.1em;}
.page-blocks .wp-block-html .lead-para {font-family: var(--font-editorial), serif; color: var(--text-on-light); margin-block: 0 1.6em;}
.page-blocks .wp-block-html blockquote {
  border: 0; border-inline-start: 3px solid var(--accent-gold);
  padding-inline-start: 1.4rem; margin-block: 2rem;
  font-family: var(--font-editorial), serif; font-style: italic;
  font-size: 1.3rem; line-height: 1.5; color: var(--text-on-light);
}
.page-blocks .wp-block-html ul { padding-inline-start: 1.3rem; }
.page-blocks .wp-block-html li {
  font-size: 1.02rem; line-height: 1.8; color: var(--text-on-light-secondary);
  margin-block-end: .5em;
}

/* Shortcode-driven pages keep their own section markup */
.page-blocks > .wp-block-shortcode { display: contents; }

/* Page hero: give inner pages the same editorial weight as the homepage */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(4.5rem, 10vw, 7rem) clamp(2.5rem, 5vw, 3.5rem);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(176,141,87,.10), transparent 60%),
    linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  text-align: center;
}
.page-prose { padding-block: clamp(2.5rem, 6vw, 4rem); }

@media (max-width: 768px) {
  .page-hero { padding-block: 3.5rem 2rem; }
}


/* ---------- Video / media block ---------- */
.media-band { background: var(--paper); }
.media-band.is-dark {
  background: linear-gradient(160deg, #12101f 0%, #1a1530 100%); color: #fff;
}
.media-band.is-dark h2 { color: #fff; }
.media-band.is-dark .media-caption { color: rgba(255,255,255,.78); }
.media-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 18px; background: #0f0c1e;
  box-shadow: 0 20px 55px rgba(47,42,77,.2);
  max-width: 980px; margin-inline: auto;
}
.media-frame iframe,
.media-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover;
}
.media-caption {
  max-width: 62ch; margin: 1.2rem auto 0; text-align: center;
  color: var(--text-on-light-secondary); font-size: .98rem; line-height: 1.7;
}
@media (max-width: 768px) { .media-frame { border-radius: 12px; } }

/* ---------- Farm page figures ---------- */
.farm-figure { margin-block: clamp(1.8rem, 4vw, 2.6rem); }
.farm-figure img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; box-shadow: 0 16px 44px rgba(47,42,77,.16);
}
.farm-figure figcaption {
  margin-top: .7rem; text-align: center; font-size: .88rem;
  color: var(--text-muted-aa); font-style: italic;
}

/* ---------- Partner contact block ---------- */
.contact-partner {
  margin-top: 2rem; padding: 1.4rem 1.5rem;
  background: var(--paper-warm); border-radius: 16px;
  border-inline-start: 3px solid var(--accent-gold);
}
.contact-partner p { margin: .5rem 0 0; font-size: .95rem; color: var(--text-on-light-secondary); }
.contact-partner .contact-lines a { color: var(--accent-gold-text); font-weight: 600; }
.contact-partner .contact-links { margin-top: .6rem; font-size: .9rem; }
.contact-partner .contact-links a { color: var(--accent-gold-text); }
.contact-partner .contact-links span { margin-inline: .4rem; opacity: .5; }

/* --- Section headings --- */
.section-head h2,
.protocol h2,
.quantum-hour h2,
.founder h2,
.faq-heading,
.statement-band h2,
.spotlight-copy h2,
.related-sessions h2,
.newsletter-band h2,
.final-cta h2,
.media-band h2 {font-family: var(--font-editorial), serif; font-weight: 400; letter-spacing: -0.014em;}

/* --- Sub-headings inside prose --- */
.page-blocks .wp-block-html h2,
.article-prose h2,
.prose h2 {font-family: var(--font-editorial), serif; font-weight: 400;}
.page-blocks .wp-block-html h3,
.article-prose h3,
.prose h3 {font-weight: 600;}
.page-blocks .wp-block-html .lead-para,
.prose .lead-para {font-family: var(--font-editorial), serif;}
/* Laptops: full height, but never so tall the scroll cue disappears */
/* Very short windows: give the content room instead of squashing it */
/* ============================================================
   LAYOUT BLOCKS v4.8
   Arrangement freedom without a page builder. Everything here
   uses the site tokens, so a page assembled from these blocks
   still looks like the rest of the site.
   ============================================================ */

/* Shared dark treatment for any layout block */
.sqf-columns.is-dark,
.sqf-image-text.is-dark,
.sqf-quote.is-dark {
  background: linear-gradient(160deg, #12101f 0%, #1a1530 100%);
  color: #fff;
}
.sqf-columns.is-dark h2, .sqf-columns.is-dark h3,
.sqf-image-text.is-dark h2,
.sqf-quote.is-dark blockquote p { color: #fff; }
.sqf-columns.is-dark p,
.sqf-image-text.is-dark p { color: rgba(255,255,255,.82); }

/* ---------- Columns ---------- */
.sqf-columns { background: var(--paper); }
.col-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.col-grid.col-2 { grid-template-columns: 1fr 1fr; }
.col-grid.col-3 { grid-template-columns: repeat(3, 1fr); }
.col-item h3 {font-family: var(--font-editorial), serif; font-weight: 400; color: var(--text-on-light); margin: 0 0 .6rem;}
.col-item p { color: var(--text-on-light-secondary); margin: 0; }
@media (max-width: 820px) {
  .col-grid.col-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .col-grid.col-2, .col-grid.col-3 { grid-template-columns: 1fr; }
}

/* ---------- Image + Text ---------- */
.sqf-image-text { background: var(--paper); }
.sqf-image-text .wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center;
}
.sqf-image-text.is-flipped .it-media { order: 2; }
.it-media img {
  width: 100%; height: auto; display: block;
  border-radius: 18px; box-shadow: 0 18px 48px rgba(47,42,77,.16);
}
.it-copy h2 {
  font-family: var(--font-editorial), serif; font-weight: 400;
  color: var(--text-on-light); margin: .4rem 0 1rem;
}
.it-copy p { color: var(--text-on-light-secondary); margin: 0 0 1.4rem; }
@media (max-width: 820px) {
  .sqf-image-text .wrap { grid-template-columns: 1fr; }
  .sqf-image-text.is-flipped .it-media { order: 0; }
}

/* ---------- Gallery ---------- */
.sqf-gallery { background: var(--paper-warm); }
.gallery-grid { display: grid; gap: 1rem; }
.gallery-grid.g-1 { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
.gallery-grid.g-2 { grid-template-columns: 1fr 1fr; }
.gallery-grid.g-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gallery-item { margin: 0; }
.gallery-item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 14px; box-shadow: 0 10px 30px rgba(47,42,77,.12);
  transition: transform .4s ease;
}
.gallery-item:hover img { transform: scale(1.02); }
.gallery-item figcaption {
  margin-top: .5rem; font-size: .85rem; color: var(--text-muted-aa);
  text-align: center; font-style: italic;
}
@media (max-width: 600px) { .gallery-grid.g-2, .gallery-grid.g-3 { grid-template-columns: 1fr; } }

/* ---------- Spacer ---------- */
.sqf-spacer { display: block; width: 100%; }
.sqf-spacer.s-1 { height: 1rem; }
.sqf-spacer.s-2 { height: 2rem; }
.sqf-spacer.s-3 { height: 3rem; }
.sqf-spacer.s-4 { height: 4.5rem; }
.sqf-spacer.s-5 { height: 6rem; }
.sqf-spacer.s-6 { height: 8rem; }
.sqf-spacer.has-line { display: grid; place-items: center; }
.sqf-spacer.has-line span {
  display: block; width: min(80%, 620px); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176,141,87,.45), transparent);
}
@media (max-width: 768px) {
  .sqf-spacer.s-4 { height: 3rem; }
  .sqf-spacer.s-5 { height: 3.5rem; }
  .sqf-spacer.s-6 { height: 4rem; }
}

/* ---------- Pull quote ---------- */
.sqf-quote { background: var(--paper-warm); }
.sqf-quote blockquote {
  margin: 0; border: 0; text-align: center;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.sqf-quote blockquote p {
  font-family: var(--font-editorial), serif; font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.45;
  color: var(--text-on-light); margin: 0;
}
.sqf-quote blockquote p::before { content: '\201C'; color: var(--accent-gold); }
.sqf-quote blockquote p::after  { content: '\201D'; color: var(--accent-gold); }
.sqf-quote cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-gold-text);
}
.sqf-quote.is-dark cite { color: #d8c19a; }

/* ---------- Button row ---------- */
.sqf-buttons { background: var(--paper); }
.sqf-buttons h2 {
  font-family: var(--font-editorial), serif; font-weight: 400;
  color: var(--text-on-light); margin: 0 0 1.4rem;
}
.button-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.button-row.is-centered { justify-content: center; }
@media (max-width: 600px) {
  .button-row { flex-direction: column; }
}

/* ---------- Checklist ---------- */
.sqf-checklist { background: var(--paper); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.check-list.is-two-col { grid-template-columns: 1fr 1fr; gap: .7rem 2rem; }
.check-list li {
  position: relative; padding-inline-start: 2rem;
  color: var(--text-on-light-secondary); line-height: 1.7;
}
.check-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .45em;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: rgba(176,141,87,.15);
}
.check-list li::after {
  content: ''; position: absolute; inset-inline-start: .33rem; inset-block-start: .72em;
  width: .34rem; height: .6rem;
  border-inline-end: 2px solid var(--accent-gold-text);
  border-block-end: 2px solid var(--accent-gold-text);
  transform: rotate(45deg);
}
[dir="rtl"] .check-list li::after { transform: rotate(45deg) scaleX(1); }
@media (max-width: 600px) { .check-list.is-two-col { grid-template-columns: 1fr; } }

/* ============================================================
   FARM FIGURES v5.0
   The source photographs are small (453px and 672px wide), so
   stretching them to the full prose column made them soft and
   visually oversized. Each figure is now capped near its native
   width and centred, which reads as intentional rather than
   blown up.
   ============================================================ */
.farm-figure {
  margin-block: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-inline: auto;
  max-width: 560px;          /* comfortable for the smaller sources */
  text-align: center;
}
.farm-figure img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(47, 42, 77, 0.14);
}
/* The one high-resolution photograph can take more room */
.farm-figure.is-wide { max-width: 820px; }

@media (max-width: 640px) {
  .farm-figure { max-width: 100%; }
}

/* --- Media layer: always fills the whole hero --- */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-media #fieldCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(11,10,20,.30), transparent 62%),
    linear-gradient(180deg, rgba(11,10,20,.48) 0%, rgba(11,10,20,.22) 42%, rgba(11,10,20,.72) 100%);
}

/* --- Content --- */
.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 860px;
  padding: 2rem 1.5rem;
}
.hero-inner .tagline {
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: #d8c19a; margin-bottom: 1.2rem;
}
.hero-inner .support {color: rgba(255,255,255,.86); max-width: 56ch; margin: 0 auto 1.3rem;}
.hero-status-pill {
  display: inline-block;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: #f0e4d4;
  border: 1px solid rgba(198,161,91,.5);
  border-radius: 999px;
  padding: .45rem 1.1rem;
  margin-bottom: 1.6rem;
}
.hero-cta { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

/* --- Scroll cue --- */
.hero-scroll {
  position: absolute;
  inset-block-end: 1.8rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 24px; height: 40px;
  border: 2px solid rgba(255,255,255,.38);
  border-radius: 14px;
}
.hero-scroll span {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-start: 50%;
  width: 4px; height: 8px;
  background: rgba(255,255,255,.7);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrolldot 1.8s infinite;
}
@keyframes scrolldot {
  0%   { opacity: 0; transform: translate(-50%, 0); }
  40%  { opacity: 1; }
  80%  { opacity: 0; transform: translate(-50%, 14px); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hero-inner { padding: 1.5rem 1.25rem; }
  .hero-inner .tagline { font-size: .7rem; letter-spacing: .18em; }
  .hero-cta { flex-direction: column; width: 100%; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   FOOTER COLUMNS v5.1
   Previously the footer rendered links only if a WordPress menu
   existed, so it shipped empty. Columns are now built from the
   site architecture and are always present in both languages.
   ============================================================ */
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.foot-col { display: flex; flex-direction: column; gap: .55rem; }
.foot-col-title {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-gold-text); margin-bottom: .35rem;
}
.foot-col a {
  font-size: .92rem; color: var(--text-on-light-secondary);
  transition: color .2s ease; line-height: 1.45;
}
.foot-col a:hover { color: var(--accent-gold-text); }
.foot-blurb { font-size: .93rem; color: var(--text-on-light-secondary); max-width: 34ch; margin-top: .8rem; }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ============================================================
   HERO TYPOGRAPHY + EYEBROW — final system (v5.1)

   Consolidated from 27 competing rules. The brand name is the
   H1 and now reads as a genuine title rather than a second
   eyebrow: larger, letterspaced, warm gold. The statement below
   it stays the largest type on the page.

   Order in the hero: tagline (small) → H1 brand → paragraph →
   H2 statement.
   ============================================================ */

/* --- Eyebrow: one definition, used everywhere --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  margin: 0;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

/* --- Hero tagline (the line above the brand) --- */
.hero-inner .tagline {
  font-family: var(--font-body);
  font-size: clamp(.68rem, .9vw, .78rem);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #C9AE7E;
  margin: 0 0 1.5rem;
}

/* --- H1: the brand name, a real title --- */
.hero-brand {
  font-family: var(--font-editorial), serif;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #F0DFBC;
  margin: 0 0 1.3rem;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .45);
}

/* --- H2: the statement, largest type on the page --- */
.hero-statement {font-family: var(--font-editorial), serif; font-weight: 400; letter-spacing: -.02em; color: #fff; margin: 1.4rem 0 0; text-shadow: 0 2px 40px rgba(0, 0, 0, .5);}

@media (max-width: 768px) {
  .hero-inner .tagline { font-size: .66rem; letter-spacing: .18em; margin-bottom: 1.1rem; }
  .hero-brand     { font-size: clamp(1.5rem, 6.5vw, 2rem); letter-spacing: .04em; margin-bottom: .8rem; }
  .hero-statement {margin-top: 1.1rem;}
}

/* ============================================================
   TYPE SCALE — the only place sizes are set (v5.2)

   Corrections in this pass: the hero statement was 54px, which
   overpowered everything under it; body copy was 16px and card
   text 13.6px, both too small to read comfortably. Headings
   come down, body copy goes up, and the gap between them
   narrows so the page reads as a document rather than a poster.

   Desktop (1440px):  hero 44 · page 30 · section 28 · card 17
   Body 17.6px / 1.75 — the size this actually gets read at.
   ============================================================ */

/* --- Display --- */
.hero-statement {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.35;
}

/* --- Section headings --- */
.section-head h2,
.protocol h2,
.quantum-hour h2,
.founder h2,
.faq-heading,
.statement-band h2,
.spotlight-copy h2,
.related-sessions h2,
.newsletter-band h2,
.final-cta h2,
.media-band h2,
.sqf-columns h2,
.sqf-gallery h2,
.sqf-checklist h2 {
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  line-height: 1.25;
}

/* --- Headings inside prose --- */
.page-blocks .wp-block-html h2,
.article-prose h2,
.prose h2 {
  font-size: clamp(1.3rem, 1.7vw, 1.5rem);
  line-height: 1.3;
}
.page-blocks .wp-block-html h3,
.article-prose h3,
.prose h3,
.col-item h3 {
  font-size: 1.14rem;
  line-height: 1.4;
}

/* --- Cards --- */
.featured-post-body h2 { font-size: clamp(1.3rem, 1.7vw, 1.55rem); line-height: 1.25; }
.statement h3,
.principle h3          { font-size: 1.12rem; line-height: 1.4; }

/* --- Body copy: the sizes that actually get read --- */
.prose,
.article-prose,
.page-blocks .wp-block-html p,
.page-blocks .wp-block-html li {
  font-size: 1.1rem;
  line-height: 1.75;
}
.section-sub {
  font-size: clamp(1.02rem, 1.3vw, 1.14rem);
  line-height: 1.7;
}
.hero-inner .support {
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  line-height: 1.7;
}
.lead-para,
.page-blocks .wp-block-html .lead-para {
  font-size: clamp(1.2rem, 1.8vw, 1.42rem);
  line-height: 1.5;
}
.foot-col a   { font-size: .95rem; }
.foot-blurb   { font-size: .97rem; line-height: 1.65; }

/* --- Small screens --- */
@media (max-width: 768px) {
  .hero-statement { font-size: clamp(1.15rem, 4.6vw, 1.4rem); }
  .section-head h2,
  .protocol h2,
  .quantum-hour h2,
  .founder h2,
  .faq-heading,
  .statement-band h2,
  .spotlight-copy h2,
  .related-sessions h2,
  .newsletter-band h2,
  .final-cta h2,
  .media-band h2 { font-size: clamp(1.32rem, 5vw, 1.55rem); }
  .page-blocks .wp-block-html h2,
  .article-prose h2,
  .prose h2 { font-size: 1.24rem; }
  .prose,
  .article-prose,
  .page-blocks .wp-block-html p,
  .page-blocks .wp-block-html li { font-size: 1.06rem; line-height: 1.72; }
  .lead-para { font-size: 1.16rem; }
}

/* ============================================================
   SESSION HERO v5.2

   The overlay previously faded from dark at the top to light
   paper at the bottom, while the heading and lead sit in the
   lower half — so light text landed on a light background and
   became unreadable. The scrim now stays dark for the whole
   area the text occupies and only meets the page colour below
   it, and every text colour here is stated explicitly.
   ============================================================ */

.session-hero.has-image {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 11vw, 8rem) clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
.session-hero .session-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
/* Dark scrim across the full text area; the page colour only meets it
   at the very bottom edge, well below the last line of text. */
.session-hero.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(16, 13, 30, .78) 0%,
      rgba(16, 13, 30, .70) 55%,
      rgba(16, 13, 30, .82) 88%,
      var(--paper) 100%
    );
}
.session-hero.has-image .wrap { position: relative; z-index: 2; }

/* Explicit light text on the dark scrim */
.session-hero.has-image .eyebrow { color: #E4CDA0; }
.session-hero.has-image h1 {
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .5);
  margin: .5rem 0 .8rem;
}
.session-hero.has-image .lead {
  color: rgba(255, 255, 255, .92);
  max-width: 56ch;
  margin: 0 auto 1.6rem;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .45);
}
.session-hero .hero-status {
  display: inline-block;
  margin-block: .5rem 1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #F3E7D5;
  background: rgba(16, 13, 30, .55);
  border: 1px solid rgba(228, 205, 160, .38);
  padding: .42rem .95rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* Without an image the hero sits on paper, so text goes dark */
.session-hero:not(.has-image) h1 { color: var(--text-on-light); }
.session-hero:not(.has-image) .lead { color: var(--text-on-light-secondary); }
.session-hero:not(.has-image) .eyebrow { color: var(--accent-gold-text); }

@media (max-width: 768px) {
  .session-hero.has-image { padding-block: 4rem 2.5rem; }
}

/* ============================================================
   MOBILE HEADER — hardened (v5.2)
   High specificity so no later rule can hide the toggle, and a
   visible outline so it reads as a button rather than a bare
   icon. The panel also opens without JS as a fallback.
   ============================================================ */
/* ============================================================
   SKIP LINK v5.3
   The link existed in the markup but had no styles, so it sat
   visibly at the top of every page. It should be off-screen
   until a keyboard user focuses it — which is also the only
   time it is useful.
   ============================================================ */
.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -100px;
  z-index: 200;
  background: var(--accent-gold-btn);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: 0 0 10px 10px;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: inset-block-start .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  inset-block-start: 0;
  outline: 2px solid #fff;
  outline-offset: -4px;
}



/* ============================================================
   PAGE & ARTICLE TITLES — one definition (v5.4)

   These sizes went missing because they lived in a grouped
   selector that also named .session-hero h1, and a later cleanup
   of the session hero removed the whole rule. Inner page titles
   then fell back to the browser default. Defined here on their
   own so no future edit to one hero can silently resize another.
   ============================================================ */

.page-hero h1,
.article-hero h1,
.session-hero h1 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.5vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: .5rem 0 .8rem;
}

/* Dark text on the plain paper hero */
.page-hero h1                    { color: var(--text-on-light); }
.page-hero .lead                 { color: var(--text-on-light-secondary); }

/* Light text once a photograph sits behind it */
.article-hero.has-image h1,
.session-hero.has-image h1       { color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.5); }
.article-hero:not(.has-image) h1 { color: var(--text-on-light); }

.page-hero .lead,
.article-hero .dek {
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  line-height: 1.65;
  max-width: 58ch;
  margin-inline: auto;
}
.article-hero.has-image .dek { color: rgba(255,255,255,.9); }

@media (max-width: 768px) {
  .page-hero h1,
  .article-hero h1,
  .session-hero h1 { font-size: clamp(1.55rem, 5.8vw, 1.9rem); }
}

/* ============================================================
   HEADER — mobile-first, single definition (v6.0)

   Rewritten from 28 accumulated rules. Two things changed
   structurally:

   1. The menu is a <details> element, so opening it needs no
      JavaScript and no toggle class. A broken script or a
      conflicting rule can no longer leave it inert.
   2. Mobile is the default state and the desktop layout is the
      override, rather than the other way round. That means the
      phone header cannot inherit a desktop rule by accident,
      which is how the toggle kept disappearing.
   ============================================================ */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1rem;
  background: rgba(246, 241, 233, .94);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-block-end: 1px solid rgba(47, 42, 77, .09);
}
.site-header.compact {
  background: rgba(246, 241, 233, .98);
  box-shadow: 0 2px 18px rgba(47, 42, 77, .07);
}

/* --- Brand --- */
.site-header .brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  flex: 1 1 auto;
}
/*
   The original wordmark rules, kept but no longer truncating.

   `white-space: nowrap` with `text-overflow: ellipsis` is why the name
   disappeared on a phone: the lockup competes for width with the language
   switcher and the menu button, and an un-wrappable line simply gets eaten.
   Sizing now lives in the brand lockup block further down; this only sets what
   is shared.
*/
.site-header .brand .wordmark { min-width: 0; line-height: 1.18; }
.site-header .brand .wordmark > span { display: none; }

/* --- Desktop nav: hidden on mobile --- */
.main-nav { display: none; }

/* --- Actions --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
}
.header-cta { display: none; }

/* --- Language switcher --- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(47, 42, 77, .06);
  border-radius: 999px;
  padding: 2px;
}
.lang-opt {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .74rem;
  font-weight: 600;
  color: #726A7A;
  padding: .3rem .5rem;
  border-radius: 999px;
  line-height: 1;
}
.lang-opt.active {
  background: #fff;
  color: #2F2A4D;
  box-shadow: 0 1px 4px rgba(47, 42, 77, .12);
}

/* --- The menu itself --- */
.mobile-menu { position: relative; }
.mobile-menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(47, 42, 77, .05);
  border: 1px solid rgba(47, 42, 77, .14);
  color: #2F2A4D;
}
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu > summary::marker { content: ''; }
.mobile-menu > summary:focus-visible {
  outline: 2px solid var(--accent-gold-btn);
  outline-offset: 2px;
}

/* Hamburger drawn in CSS — no SVG to collapse, no icon font to fail */
.mobile-menu .bars {
  display: block;
  position: relative;
  width: 20px;
  height: 14px;
}
.mobile-menu .bars span {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}
.mobile-menu .bars span:nth-child(1) { inset-block-start: 0; }
.mobile-menu .bars span:nth-child(2) { inset-block-start: 6px; }
.mobile-menu .bars span:nth-child(3) { inset-block-start: 12px; }

/* Open state: bars become an X, button turns gold */
.mobile-menu[open] > summary {
  background: var(--accent-gold-btn);
  border-color: var(--accent-gold-btn);
  color: #fff;
}
.mobile-menu[open] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu[open] .bars span:nth-child(2) { opacity: 0; }
.mobile-menu[open] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- The panel --- */
.mobile-menu .mobile-nav {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 58px;
  display: flex;
  flex-direction: column;
  background: rgba(246, 241, 233, .99);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-block-end: 1px solid rgba(47, 42, 77, .1);
  box-shadow: 0 18px 44px rgba(47, 42, 77, .18);
  padding: .5rem 1.25rem 1.5rem;
  max-height: calc(100svh - 58px);
  overflow-y: auto;
}
.mobile-menu .mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 50px;
  font-size: 1.05rem;
  font-weight: 500;
  color: #2F2A4D;
  border-block-end: 1px solid rgba(47, 42, 77, .08);
}
.mobile-menu .mobile-nav a:last-of-type { border-block-end: 0; }
.mobile-menu .mobile-cta {
  margin-top: 1rem;
  justify-content: center;
  color: #fff !important;
  border-radius: 999px;
  border-block-end: 0 !important;
  background: linear-gradient(135deg, var(--accent-gold-btn), #6F5631);
}

/* ============================================================
   DESKTOP — the override, applied only when there is room
   ============================================================ */
@media (min-width: 1001px) {
  .site-header { padding: .9rem 2rem; gap: 1.5rem; }
  .site-header .brand { flex: 0 0 auto; }
  /* Mark size lives in the brand lockup block below; setting it here as well
     meant the wide-screen size was silently overridden by this older rule. */
  .site-header .brand .wordmark > span {
    display: block;
    font-size: .6rem;
    letter-spacing: .09em;
    color: #726A7A;
  }

  .main-nav { display: flex; align-items: center; gap: 1.8rem; }
  .main-nav a {
    position: relative;
    font-size: .92rem;
    font-weight: 500;
    color: #4A4363;
    padding-block: .4rem;
  }
  .main-nav a::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    width: 0;
    height: 1.5px;
    background: var(--accent-gold-text);
    transition: width .25s ease;
  }
  .main-nav a:hover { color: #2F2A4D; }
  .main-nav a:hover::after { width: 100%; }

  .header-actions { gap: 1rem; }
  .header-cta { display: inline-flex; }
  .lang-opt { font-size: .8rem; padding: .32rem .7rem; }

  /* No hamburger once the full nav fits */
  .mobile-menu { display: none; }
}

:root { --header-h: 58px; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* ---------- Events / dates ---------- */
.events-band { background: var(--paper-warm); }
.events-band.is-dark {
  background: linear-gradient(160deg, #12101f 0%, #1a1530 100%); color: #fff;
}
.events-band.is-dark h2 { color: #fff; }
.events-band.is-dark .eyebrow { color: #E4CDA0; }
.events-band.is-dark .section-sub,
.events-band.is-dark .event-note { color: rgba(255,255,255,.8); }

.event-list { list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
  display: flex; flex-direction: column; gap: .8rem; }

.event-date {
  flex: 0 0 auto; width: 58px; text-align: center;
  background: linear-gradient(160deg, var(--accent-gold-btn), #6F5631);
  color: #fff; border-radius: 12px; padding: .5rem .3rem; line-height: 1.1;
}
.event-day   { display: block; font-size: 1.45rem; font-weight: 700; font-family: var(--font-editorial), serif; }
.event-month { display: block; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }

.event-body { flex: 1 1 auto; min-width: 0; }
.event-body h3 {
  font-family: var(--font-editorial), serif; font-weight: 400;
  font-size: 1.1rem; line-height: 1.3; color: var(--text-on-light); margin: 0 0 .25rem;
}
.events-band.is-dark .event-body h3 { color: #fff; }
.event-meta { margin: 0; font-size: .88rem; color: var(--text-on-light-secondary);
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.events-band.is-dark .event-meta { color: rgba(255,255,255,.72); }
.event-meta .dot { opacity: .45; }

.event-link {
  flex: 0 0 auto; font-size: .9rem; font-weight: 600;
  color: var(--accent-gold-text); white-space: nowrap;
}
.events-band.is-dark .event-link { color: #E4CDA0; }
.event-cta { margin-top: 1.6rem; }
.event-note { margin-top: .9rem; font-size: .88rem; color: var(--text-muted-aa); }

@media (max-width: 560px) {
  .event-date { width: 50px; }
  .event-body { flex: 1 1 60%; }
  .event-link { flex: 1 1 100%; }
}

/* ---------- Page hero with a photograph ---------- */
.page-hero.has-image {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 11vw, 8rem) clamp(3rem, 6vw, 4.5rem);
}
.page-hero .page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
/* Dark across the whole text area, meeting the page colour only at the edge */
.page-hero.has-image::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(16,13,30,.76) 0%, rgba(16,13,30,.68) 55%, rgba(16,13,30,.80) 88%, var(--paper) 100%);
}
.page-hero.has-image .wrap { position: relative; z-index: 2; }
.page-hero.has-image .eyebrow { color: #E4CDA0; }
.page-hero.has-image h1 { color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.5); }
.page-hero.has-image .lead { color: rgba(255,255,255,.92); text-shadow: 0 1px 18px rgba(0,0,0,.4); }

/* Second hero paragraph — slightly quieter than the first */
.hero-inner .support-2 {
  font-size: clamp(.94rem, 1.15vw, 1.02rem);
  color: rgba(255, 255, 255, .78);
  max-width: 62ch;
  margin-top: .9rem;
}
@media (max-width: 768px) {
  .hero-inner .support-2 { font-size: .92rem; }
}

/* ---------- Photographs inside prose ---------- */
.work-gallery {
  margin-block: clamp(1.8rem, 4vw, 2.6rem);
  margin-inline: auto;
  max-width: 720px;
}
.work-gallery img {
  width: 100%; height: auto; display: block;
  border-radius: 16px;
  box-shadow: 0 16px 44px rgba(47, 42, 77, .16);
}
.work-gallery figcaption {
  margin-top: .7rem;
  text-align: center;
  font-size: .85rem;
  color: var(--text-muted-aa);
  font-style: italic;
}

/* ============================================================
   EVENTS — RTL corrections (v6.6)
   In Hebrew the card mirrored but the intro text and the button
   drifted out of alignment, because the section head and the CTA
   were not explicitly centred. Times like 19:00–21:00 are also
   forced LTR so they don't render reversed.
   ============================================================ */
.events-band .section-head { text-align: center; }
.events-band .section-head .eyebrow { justify-content: center; }
.events-band .section-sub { margin-inline: auto; max-width: 56ch; }
.events-band .event-cta,
.events-band .event-note { text-align: center; }

/* Clock times and dates are always read left-to-right */
.event-meta time,
.event-meta .time,
.event-time { direction: ltr; unicode-bidi: isolate; }
.event-meta span { unicode-bidi: plaintext; }

/* ---------- Contact card ---------- */
.contact-card-band { background: var(--paper-warm); }
.contact-card-band.is-dark {
  background: linear-gradient(160deg, #12101f 0%, #1a1530 100%); color: #fff;
}
.contact-card-band.is-dark h2,
.contact-card-band.is-dark .cc-body h3 { color: #fff; }
.contact-card-band.is-dark .eyebrow { color: #E4CDA0; }
.contact-card-band.is-dark .cc-role,
.contact-card-band.is-dark .cc-note { color: rgba(255,255,255,.78); }
.contact-card-band.is-dark .contact-card {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);
}

.contact-card {
  display: flex; align-items: center; gap: 1.4rem;
  background: #fdfaf3; border: 1px solid rgba(58,51,80,.1);
  border-radius: 18px; padding: 1.5rem 1.7rem;
  max-width: 620px; margin-inline: auto;
}
.cc-media { flex: 0 0 auto; }
.cc-media img {
  width: 92px; height: 92px; object-fit: contain;
  border-radius: 12px; background: #fff; padding: .4rem; display: block;
}
.cc-body { flex: 1 1 auto; min-width: 0; }
.cc-body h3 {
  font-family: var(--font-editorial), serif; font-weight: 400;
  font-size: 1.2rem; color: var(--text-on-light); margin: 0 0 .3rem;
}
.cc-role { font-size: .93rem; line-height: 1.6; color: var(--text-on-light-secondary); margin: 0 0 .7rem; }
.cc-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.cc-lines a {
  font-size: .96rem; font-weight: 600; color: var(--accent-gold-text);
  unicode-bidi: isolate;
}
.cc-lines a:hover { color: #5F4B2C; }
.cc-links { margin: .7rem 0 0; font-size: .9rem; }
.cc-links a { color: var(--accent-gold-text); font-weight: 600; }
.cc-links span { margin-inline: .4rem; opacity: .5; }
.cc-note { margin-top: 1rem; font-size: .88rem; color: var(--text-muted-aa); }

@media (max-width: 560px) {
  .contact-card { flex-direction: column; text-align: center; gap: 1rem; }
  .cc-lines { align-items: center; }
}

/* ============================================================
   LEGAL PAGES v7.3
   Long statutory text needs a narrower measure and clearer
   spacing than editorial writing, so it stays readable rather
   than becoming a wall.
   ============================================================ */
.legal-page {
  max-width: 68ch;
  margin-inline: auto;
}
.legal-page h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.3;
  color: var(--text-on-light);
  margin-block: 2.2em .6em;
  padding-block-end: .4em;
  border-block-end: 1px solid rgba(58, 51, 80, .1);
}
.legal-page h3 {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text-on-light);
  margin-block: 1.6em .4em;
}
.legal-page p,
.legal-page li {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--text-on-light-secondary);
}
.legal-page ul { padding-inline-start: 1.4rem; margin-block: 0 1.2em; }
.legal-page li { margin-block-end: .5em; }
.legal-page a { color: var(--accent-gold-text); font-weight: 600; }
.legal-page strong { color: var(--text-on-light); }

.legal-page .legal-updated {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(58, 51, 80, .1);
  font-size: .9rem;
  color: var(--text-muted-aa);
}
.legal-draft-note {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: rgba(176, 141, 87, .09);
  border-inline-start: 3px solid var(--accent-gold);
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--text-on-light-secondary);
}
.qh-single .article-hero .eyebrow a { color: inherit; }
.qh-single .article-hero .eyebrow a:hover { text-decoration: underline; }

/* ---------- Session recordings ---------- */
.recordings-band { background: var(--paper-warm); }
.recordings-band.is-dark {
  background: linear-gradient(160deg, #12101f 0%, #1a1530 100%); color: #fff;
}
.recordings-band.is-dark h2,
.recordings-band.is-dark .rec-featured-meta h3 { color: #fff; }
.recordings-band.is-dark .eyebrow { color: #E4CDA0; }
.recordings-band.is-dark .section-sub,
.recordings-band.is-dark .rec-note { color: rgba(255,255,255,.78); }

.rec-featured { max-width: 880px; margin-inline: auto; }
.rec-featured .media-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 18px; background: #0f0c1e;
  box-shadow: 0 20px 55px rgba(47,42,77,.2);
}
.rec-featured .media-frame iframe,
.rec-featured .media-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.rec-featured-meta { margin-top: 1rem; text-align: center; }
.rec-featured-meta h3 {
  font-family: var(--font-editorial), serif; font-weight: 400;
  font-size: 1.2rem; color: var(--text-on-light); margin: 0 0 .3rem;
}
.rec-featured-meta p {
  margin: 0; font-size: .9rem; color: var(--text-muted-aa);
  display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap;
}
.rec-featured-meta .dot { opacity: .5; }

.rec-list {
  list-style: none; margin: 2rem auto 0; padding: 0;
  max-width: 720px; display: flex; flex-direction: column; gap: .5rem;
}
.rec-list a {
  display: flex; align-items: center; gap: .9rem;
  padding: .85rem 1.1rem; border-radius: 12px;
  background: #fdfaf3; border: 1px solid rgba(58,51,80,.1);
  transition: border-color .25s ease, transform .25s ease;
}
.recordings-band.is-dark .rec-list a {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);
}
.rec-list a:hover {
  border-color: rgba(176,141,87,.45); transform: translateY(-2px);
}
.rec-play {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem;
  background: linear-gradient(160deg, var(--accent-gold-btn), #6F5631); color: #fff;
}
.rec-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.rec-title {
  font-size: 1rem; font-weight: 600; color: var(--text-on-light);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.recordings-band.is-dark .rec-title { color: #fff; }
.rec-meta { font-size: .85rem; color: var(--text-muted-aa); }
.recordings-band.is-dark .rec-meta { color: rgba(255,255,255,.66); }
.rec-note { margin-top: 1.2rem; font-size: .88rem; color: var(--text-muted-aa); }

/* ---------- Audio recordings ---------- */
.audio-embed {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, #1a1530 0%, #241b3c 100%);
}
.audio-embed audio { width: 100%; max-width: 520px; }
/* An audio file does not need a 16:9 box */
.rec-featured .media-frame:has(.audio-embed) { aspect-ratio: auto; min-height: 120px; }

/* ============================================================
   QUANTUM HOUR CARD v8.0

   Deliberately quieter than the first version. The section had
   grown to fill most of a screen, with a portrait tall enough to
   dominate the page — which put more emphasis on the people than
   on the gathering. It now sits as a contained panel: a wider,
   shorter image, a narrower text column, and less vertical space
   overall, so it reads as one item on the homepage rather than
   an announcement taking it over.
   ============================================================ */
.qh-card {
  background: var(--paper);
  padding-block: clamp(1.5rem, 3vw, 2.2rem);
}
.qh-card.is-dark {
  background:
    radial-gradient(ellipse at 25% 15%, rgba(91, 70, 161, .26), transparent 62%),
    linear-gradient(160deg, #14101f 0%, #1e1733 60%, #221a38 100%);
  color: #fff;
}

/* A contained panel rather than a full-bleed band */
.qh-card .wrap {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(1.2rem, 2.2vw, 1.8rem);
  align-items: center;
  max-width: 900px;
}

.qh-media { align-self: stretch; }
.qh-media img {
  width: 100%;
  height: 100%;
  max-height: 260px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .28);
}

.qh-copy h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
  line-height: 1.2;
  margin: .3rem 0 .5rem;
}
.qh-card.is-dark h2 { color: #fff; }
.qh-card.is-dark .eyebrow { color: #E4CDA0; }
.qh-body {
  font-size: .93rem;
  line-height: 1.55;
  margin: 0 0 .8rem;
  max-width: 46ch;
}
.qh-card.is-dark .qh-body { color: rgba(255, 255, 255, .82); }

/* Dates: compact rows */
.qh-dates {
  list-style: none;
  margin: 0 0 .6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  max-width: 420px;
}
.qh-dates li {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .42rem .7rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  font-size: .9rem;
}
.qh-card:not(.is-dark) .qh-dates li {
  background: #fdfaf3;
  border-color: rgba(58, 51, 80, .1);
}
.qh-dates li.is-next {
  background: rgba(228, 205, 160, .13);
  border-color: rgba(228, 205, 160, .38);
}
.qh-card:not(.is-dark) .qh-dates li.is-next {
  background: rgba(176, 141, 87, .09);
  border-color: rgba(176, 141, 87, .32);
}
.qh-date { font-weight: 600; }
.qh-time { opacity: .75; unicode-bidi: isolate; font-size: .86rem; }
.qh-next-tag {
  margin-inline-start: auto;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: var(--accent-gold-btn);
  color: #fff;
  padding: .16rem .5rem;
  border-radius: 999px;
}
.qh-timenote { font-size: .8rem; opacity: .65; margin: 0 0 .9rem; }
.qh-hosts {
  font-size: .88rem;
  font-style: italic;
  margin: 0 0 1rem;
  max-width: 46ch;
}
.qh-card.is-dark .qh-hosts { color: rgba(255, 255, 255, .74); }
.qh-actions { margin: 0 0 .7rem; }
.qh-note {
  font-size: .8rem;
  opacity: .62;
  margin: 0;
  line-height: 1.55;
  max-width: 46ch;
}

@media (max-width: 820px) {
  .qh-card .wrap { grid-template-columns: 1fr; gap: 1.2rem; }
  .qh-media img { max-height: 220px; }
  .qh-dates { max-width: none; }
}

/* ============================================================
   QUANTUM HOUR — hub cards (v8.1)
   Matched to the session cards so the two directories on the
   site look like the same kind of thing. Portrait covers, the
   same radius and lift on hover, and a consistent measure.
   ============================================================ */
.qh-posts { background: var(--paper-warm); }
.qh-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  max-width: 1080px;
  margin-inline: auto;
}
.qh-post-card {
  display: flex;
  flex-direction: column;
  background: #fffdfa;
  border: 1px solid var(--border-on-light);
  border-radius: 22px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.qh-post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(201, 138, 107, .18);
  border-color: rgba(201, 138, 107, .3);
}
.qh-post-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1530;
}
.qh-post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  transition: transform .5s ease;
}
.qh-post-card:hover .qh-post-media img { transform: scale(1.04); }

.qh-post-body {
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  flex: 1 1 auto;
}
.qh-post-body time {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
  font-weight: 700;
}
.qh-post-body h3 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0;
}
.qh-post-body h3 a { color: var(--text-on-light); }
.qh-post-body h3 a:hover { color: var(--accent-gold-text); }
.qh-post-body p {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--text-on-light-secondary);
  margin: 0;
}
.qh-post-meta {
  margin-top: auto;
  padding-top: .7rem;
  font-size: .82rem;
  color: var(--accent-gold-text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* ============================================================
   HERO + EVENT ITEM — consolidated (v8.7)
   Both had accumulated duplicate declarations across versions:
   min-height set six times on the hero, flex-direction set twice
   identically on event rows. Same rendered result, but every
   duplicate is a place a future edit can silently miss.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: #0b0a14;
  color: #fff;
}
@media (max-width: 768px) { .hero { min-height: 92svh; } }
@media (max-height: 620px) { .hero { min-height: 560px; } }

.event-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  background: #fdfaf3;
  border: 1px solid rgba(58, 51, 80, .1);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.event-item:hover {
  border-color: rgba(176, 141, 87, .45);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(58, 51, 80, .09);
}
.events-band.is-dark .event-item {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
@media (max-width: 560px) {
  .event-item { flex-wrap: wrap; gap: .8rem; }
}




/* ============================================================
   CONTAINER BLOCKS (v10.1)

   A section you can put anything inside, and real columns whose
   children are arbitrary blocks. Until now a page was a fixed
   sequence of purpose-built sections; these let one be composed.
   ============================================================ */

.sqf-section { position: relative; }
.sqf-tone-paper  { background: var(--paper); }
.sqf-tone-warm   { background: var(--paper-warm); }
.sqf-tone-dark   { background: #12101f; color: #fff; }
.sqf-tone-cosmic {
  background-color: #0f0c1e;
  background-image:
    radial-gradient(ellipse at 25% 20%, rgba(91, 70, 161, .3), transparent 55%),
    linear-gradient(160deg, #0f0c1e 0%, #1a1530 60%, #221a38 100%);
  color: #fff;
}
.sqf-tone-dark h2, .sqf-tone-cosmic h2,
.sqf-tone-dark h3, .sqf-tone-cosmic h3 { color: #fff; }
.sqf-tone-dark p, .sqf-tone-cosmic p { color: rgba(255, 255, 255, .84); }
.sqf-tone-dark .eyebrow, .sqf-tone-cosmic .eyebrow { color: #E4CDA0; }

/* Vertical rhythm */
.sqf-sp-none   { padding-block: 0; }
.sqf-sp-small  { padding-block: clamp(1.5rem, 3vw, 2.2rem); }
.sqf-sp-normal { padding-block: clamp(2.6rem, 5vw, 4rem); }
.sqf-sp-large  { padding-block: clamp(4rem, 8vw, 6.5rem); }

/* Measure */
.sqf-section-inner { margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.sqf-w-narrow .sqf-section-inner { max-width: 720px; }
.sqf-w-normal .sqf-section-inner { max-width: 1080px; }
.sqf-w-wide   .sqf-section-inner { max-width: 1320px; }
.sqf-w-full   .sqf-section-inner { max-width: none; padding-inline: 0; }

/* --- columns --- */
.sqf-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.sqf-align-top    { align-items: flex-start; }
.sqf-align-centre { align-items: center; }
.sqf-gap-small  { gap: clamp(.8rem, 1.5vw, 1.2rem); }
.sqf-gap-normal { gap: clamp(1.2rem, 2.5vw, 2rem); }
.sqf-gap-large  { gap: clamp(1.8rem, 4vw, 3rem); }

.sqf-col { min-width: 0; }
.sqf-col > *:first-child { margin-block-start: 0; }
.sqf-col > *:last-child  { margin-block-end: 0; }

/* Stack below the width set on the block. Flex-basis has to go to 100%
   rather than the column simply wrapping, or a wide child forces overflow. */
@media (max-width: 780px) {
  .sqf-cols { flex-direction: column; }
  .sqf-col  { flex: 1 1 100% !important; }
}

/* Note under a legal page */
.legal-note {
  margin-top: 1.4rem;
  padding: .9rem 1.1rem;
  background: rgba(176, 141, 87, .07);
  border-inline-start: 3px solid var(--accent-gold);
  border-radius: 8px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--text-on-light-secondary);
}

/* ============================================================
   SESSION GRIDS (v11.7)

   Rebuilt from five competing definitions that had accumulated
   across versions — one of them a horizontal scroll rail with a
   negative margin-inline, which flips direction under RTL and
   pulled the cards out of alignment on the Hebrew pages.

   One layout now, the same in both directions: a plain grid,
   cards aligned to the top so uneven heights do not stagger, and
   logical properties throughout so nothing depends on which way
   the page reads.
   ============================================================ */

.session-rail,
.session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: start;      /* uneven cards must not stagger */
  margin-inline: 0;
  padding-inline: 0;
  overflow: visible;
}

/* Cards fill their cell so a row reads as a row. */
.session-rail > *,
.session-grid > * { height: 100%; }

@media (max-width: 900px) {
  .session-rail,
  .session-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 560px) {
  .session-rail,
  .session-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   CARDS (v11.8) — one definition each

   Rewritten after 43 accumulated rules were removed. The session
   and journal cards had picked up three or four competing
   definitions apiece across versions: one giving the card
   padding, another making it a flush image card, a third setting
   overflow. Together they produced a card that was neither, and
   under RTL the mismatch showed as boxes drifting apart from
   their own content.

   Everything below is logical-property only, so the layout is
   identical in both reading directions.
   ============================================================ */

/* --- the grids --- */
.card-grid,
.session-rail,
.session-grid,
.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
  align-items: stretch;
  margin-inline: 0;
  padding-inline: 0;
  overflow: visible;
}

/* --- the card itself --- */
.session-card,
.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fffdfa;
  border: 1px solid var(--border-on-light);
  border-radius: 20px;
  overflow: hidden;          /* the image corners follow the card */
  padding: 0;                /* the body carries the padding, not the card */
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.session-card:hover,
.article-card:hover {
  transform: translateY(-4px);
  border-color: rgba(176, 141, 87, .38);
  box-shadow: 0 16px 40px rgba(58, 51, 80, .13);
}

/* --- image --- */
.session-card-img,
.article-card-img {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--paper-warm);
  flex: 0 0 auto;
}
.session-card-img { aspect-ratio: 3 / 4; }
.article-card-img { aspect-ratio: 16 / 10; }
.session-card-img img,
.article-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.session-card:hover .session-card-img img,
.article-card:hover .article-card-img img { transform: scale(1.04); }

/* Status badge sits over the image, on the side the page starts from. */
.session-card-img .badge {
  position: absolute;
  inset-block-start: .7rem;
  inset-inline-start: .7rem;
  font-size: .7rem;
  font-weight: 700;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(255, 253, 250, .94);
  color: var(--text-on-light);
}
.session-card-img .badge-available { background: #2E7D32; color: #fff; }
.session-card-img .badge-later { background: rgba(90, 73, 122, .94); color: #fff; }

/* --- body --- */
.session-card-body,
.article-card-body {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.2rem 1.3rem 1.4rem;
  flex: 1 1 auto;            /* fills the card so rows line up */
}
.session-card-body h3,
.session-card-body h4,
.article-card-body h3 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.28;
  margin: 0;
  color: var(--text-on-light);
}
.session-card-body p,
.article-card-body p {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--text-on-light-secondary);
  margin: 0;
}
.session-card-body .cta,
.article-card-body .cta {
  margin-block-start: auto;  /* pinned to the bottom, so cards align */
  padding-block-start: .5rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--accent-gold-text);
}

@media (max-width: 900px) {
  .card-grid, .session-rail, .session-grid, .journal-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}
@media (max-width: 600px) {
  .card-grid, .session-rail, .session-grid, .journal-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .session-card-img { aspect-ratio: 4 / 3; }
}


/* ============================================================
   GATEWAY LABELS (v11.9)

   The accent rule was set with border-inline-start, which already
   moves to the right-hand side under RTL — and then a second rule
   flipped it again with border-inline-end, putting it back on the
   wrong side and shifting the padding with it. Logical properties
   do the flipping; they must not be flipped a second time by hand.
   ============================================================ */

.gateway-block { margin-block-end: clamp(2.2rem, 4vw, 3.2rem); }

.gateway-label {
  margin-block-end: 1.3rem;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--accent-gold);
}
.gateway-label h3 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  margin: 0 0 .25rem;
  color: var(--text-on-light);
}
.gateway-label p {
  font-size: .93rem;
  color: var(--text-on-light-secondary);
  margin: 0;
}


/* ============================================================
   REVEAL (v12.0) — visible by default

   The fade-in started every section at opacity:0 and relied on
   JavaScript adding .in when it scrolled into view. When the
   observer missed an element — which it was doing on the Hebrew
   pages — the element stayed invisible while its card background
   still painted, leaving an empty white box above real content.

   Now the element is visible on its own. The animation is an
   enhancement layered on top only when the script confirms it can
   run, by putting .reveal-on on <html>. No script, missed
   observer, or reduced-motion preference can hide content.
   ============================================================ */

.reveal { opacity: 1; transform: none; }

.reveal-on .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal-on .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   JOURNAL ARCHIVE (v12.6) — a proper editorial blog

   Elevated from the basic version: a magazine-style featured
   post, refined topic pills that read as navigation rather than
   buttons, and cards with clear meta. Logical properties
   throughout, so it reads correctly in both directions.
   ============================================================ */

.journal-archive { background: var(--paper); padding-block: clamp(2rem, 5vw, 4rem); }

/* --- topic filter as navigation --- */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-block: 1.5rem 2.5rem;
}
.pill {
  background: transparent;
  border: 1px solid rgba(58, 51, 80, .16);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .86rem;
  font-weight: 500;
  color: var(--text-on-light-secondary);
  text-decoration: none;
  transition: all .25s ease;
  white-space: nowrap;
}
.pill:hover {
  border-color: var(--accent-gold);
  color: var(--text-on-light);
}
.pill.is-active {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #fff;
}

/* --- featured post: magazine hero --- */
.featured-post {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: #fffdfa;
  border: 1px solid var(--border-on-light);
  border-radius: 24px;
  overflow: hidden;
  margin-block-end: clamp(2rem, 4vw, 3rem);
  transition: box-shadow .3s ease, transform .3s ease;
}
.featured-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(58, 51, 80, .15);
}
.featured-post-img {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  background: var(--paper-warm);
}
.featured-post-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.featured-post:hover .featured-post-img img { transform: scale(1.04); }
.featured-post-body {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .7rem;
}
.featured-post-body .topic-tag { color: var(--accent-gold-text); }
.featured-post-body h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  margin: 0;
  color: var(--text-on-light);
}
.featured-post-body p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-on-light-secondary);
  margin: 0;
}

/* --- meta row --- */
.card-meta {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.topic-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-gold-text);
}
.read-time {
  font-size: .78rem;
  color: var(--text-muted-aa);
  position: relative;
  padding-inline-start: .8rem;
}
.read-time::before {
  content: "·";
  position: absolute;
  inset-inline-start: 0;
  opacity: .5;
}

@media (max-width: 780px) {
  .featured-post { grid-template-columns: 1fr; }
  .featured-post-img { min-height: 220px; }
  .filter-pills { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-block-end: .5rem; }
  .pill { flex: none; }
}


/* ============================================================
   ORBIT (v12.7) — properly galactic

   Four nebula washes drifting on their own cycles, a starfield at
   three depths with the nearest blooming, three concentric rings
   and light arcs travelling in both directions. Nothing moves
   fast; it should read as something vast turning slowly.
   ============================================================ */

.protocol-visual { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

#orbit { width: 100%; max-width: 580px; height: auto; overflow: visible; }

/* --- nebula --- */
.neb { transform-origin: center; mix-blend-mode: screen; }
.neb.a { animation: qhDriftA 46s ease-in-out infinite; }
.neb.b { animation: qhDriftB 62s ease-in-out infinite; }
.neb.c { animation: qhDriftC 54s ease-in-out infinite; }
.neb.d { animation: qhDriftD 71s ease-in-out infinite; }
@keyframes qhDriftA { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8px,-6px) scale(1.08)} }
@keyframes qhDriftB { 0%,100%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(-9px,7px) scale(1)} }
@keyframes qhDriftC { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(5px,9px) scale(1.1)} }
@keyframes qhDriftD { 0%,100%{transform:translate(0,0) scale(1.06)} 50%{transform:translate(-7px,-8px) scale(1)} }

/* --- starfield --- */
.orbit-star { fill: #eae2ff; animation: qhTwinkle 7s ease-in-out infinite; }
.orbit-stars.near .orbit-star { fill: #fff; }
.orbit-stars.mid  .orbit-star { fill: #ded2ff; }
@keyframes qhTwinkle { 0%,100%{opacity:.10} 50%{opacity:.72} }

/* --- rings --- */
.orbit-path { fill: none; stroke: rgba(205,186,255,.24); stroke-width: .45; }
.orbit-path.faint { stroke: rgba(205,186,255,.10); }

.orbit-trace {
  fill: none;
  stroke: rgba(228,205,160,.62);
  stroke-width: .9;
  stroke-linecap: round;
  stroke-dasharray: 8 419;
  transform-origin: center;
  animation: qhTravel 18s linear infinite;
}
.orbit-trace.slow {
  stroke: rgba(169,140,245,.55);
  stroke-dasharray: 6 502;
  animation-duration: 30s;
  animation-direction: reverse;
}
.orbit-trace.faintest {
  stroke: rgba(79,201,208,.42);
  stroke-dasharray: 4 329;
  animation-duration: 24s;
}
@keyframes qhTravel { to { transform: rotate(360deg); } }

/* --- core --- */
.core-halo {
  fill: #a98cf5; opacity: .16; filter: blur(8px);
  transform-origin: center; animation: qhPulse 8s ease-in-out infinite;
}
.core-halo.outer {
  fill: #6f57c9; opacity: .09; filter: blur(15px);
  animation-duration: 12s; animation-direction: reverse;
}
@keyframes qhPulse {
  0%,100% { opacity: .10; transform: scale(.94); }
  50%     { opacity: .28; transform: scale(1.08); }
}
.core { fill: url(#qhCore); filter: url(#qhGlow); }
.core-label {
  font-family: var(--font-body); font-size: 6.2px; font-weight: 700;
  letter-spacing: .14em; fill: #fff; text-anchor: middle;
  dominant-baseline: middle; pointer-events: none;
}

/* --- spokes and anchors --- */
.node-thread { stroke: rgba(205,186,255,.13); stroke-width: .3; stroke-dasharray: 1 2.5; }
.node-anchor { fill: rgba(228,205,160,.55); }

/* --- nodes --- */
.node { cursor: default; }
.node.is-link { cursor: pointer; }
.disc {
  fill: rgba(20,14,44,.9);
  stroke: rgba(205,186,255,.45);
  stroke-width: .55;
  transition: fill .3s ease, stroke .3s ease;
}
.disc-label {
  font-family: var(--font-body); font-size: 4.4px; font-weight: 600;
  letter-spacing: .02em; fill: #f2eeff; text-anchor: middle;
  dominant-baseline: middle; pointer-events: none;
}
.node:hover .disc, .node:focus .disc, .node.active .disc {
  fill: rgba(169,140,245,.6); stroke: #E4CDA0;
}
.node:focus { outline: none; }
.node:focus-visible .disc { stroke: #E4CDA0; stroke-width: 1.2; }

.orbit-cap {
  font-size: .84rem; line-height: 1.5;
  color: rgba(255,255,255,.58); text-align: center; max-width: 30ch;
}

@media (prefers-reduced-motion: reduce) {
  .neb, .orbit-star, .core-halo, .orbit-trace { animation: none; }
}
@media (max-width: 900px) { #orbit { max-width: 420px; } }

/* ============================================================
   BUTTONS (v12.7) — bold and unmissable

   Rebuilt from many competing rules that had accumulated. The
   call to action is where a visitor becomes a client, so it
   should be the most confident element on the page: larger,
   heavier, with a gold gradient that lifts on hover.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 52px;
  padding: .95rem 2rem;
  border-radius: 999px;
  border: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--accent-gold); outline-offset: 3px; }

/* Primary — the action that earns money */
.btn-primary {
  background: linear-gradient(135deg, #C9A063 0%, #B08D57 55%, #96703F 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(176, 141, 87, .38);
}
.btn-primary:hover {
  box-shadow: 0 14px 36px rgba(176, 141, 87, .52);
  background: linear-gradient(135deg, #D4AC70 0%, #BE9A62 55%, #A37B47 100%);
}

/* Outline — secondary, still substantial */
.btn-outline {
  background: transparent;
  border: 2px solid rgba(176, 141, 87, .55);
  color: var(--text-on-light);
}
.btn-outline:hover {
  border-color: var(--accent-gold);
  background: rgba(176, 141, 87, .08);
}
/* On dark sections */
.is-dark .btn-outline,
.protocol .btn-outline,
.final-cta .btn-outline,
.qh-card.is-dark .btn-outline,
.sqf-tone-dark .btn-outline,
.sqf-tone-cosmic .btn-outline {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}
.is-dark .btn-outline:hover,
.protocol .btn-outline:hover,
.final-cta .btn-outline:hover,
.sqf-tone-dark .btn-outline:hover,
.sqf-tone-cosmic .btn-outline:hover {
  border-color: #E4CDA0;
  background: rgba(255, 255, 255, .09);
}

/* Large — hero and final call */
.btn-lg {
  min-height: 60px;
  padding: 1.15rem 2.6rem;
  font-size: 1.08rem;
}

@media (max-width: 600px) {
  .btn { width: 100%; }
  .btn-lg { min-height: 56px; font-size: 1rem; }
}

/* ============================================================
   ARTICLE PAGES (v13.5)

   The four written pieces — channeling, method, preparation,
   QHHT — are long reads, and were using the same prose styling
   as a contact page. This gives them an editorial shape: a
   measured column, headings that break the text properly, pull
   quotes that breathe, and a questions section that reads as a
   distinct part rather than more paragraphs.

   Logical properties throughout, so Hebrew reads correctly.
   ============================================================ */

.article-prose,
.page-prose .prose {
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--text-on-light);
}

/* Opening paragraph carries the weight */
.article-prose .lead-para,
.page-prose .prose .lead-para {
  font-size: 1.22rem;
  line-height: 1.62;
  color: var(--text-on-light);
  font-weight: 400;
  margin-block-end: 1.8rem;
  padding-block-end: 1.4rem;
  border-block-end: 1px solid rgba(176, 141, 87, .22);
}

/* Section headings — clear breaks in a long read */
.article-prose h2,
.page-prose .prose h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  color: var(--text-on-light);
  margin-block: 2.6rem .8rem;
  padding-inline-start: .9rem;
  border-inline-start: 3px solid var(--accent-gold);
}
.article-prose h3,
.page-prose .prose h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--text-on-light);
  margin-block: 1.8rem .5rem;
}

.article-prose p,
.page-prose .prose p { margin-block: 0 1.15rem; }

.article-prose strong,
.page-prose .prose strong { color: var(--text-on-light); font-weight: 700; }

/* Lists — spaced enough to scan */
.article-prose ul,
.article-prose ol,
.page-prose .prose ul,
.page-prose .prose ol {
  margin-block: 0 1.4rem;
  padding-inline-start: 1.3rem;
}
.article-prose li,
.page-prose .prose li { margin-block-end: .6rem; line-height: 1.7; }
.article-prose li::marker,
.page-prose .prose li::marker { color: var(--accent-gold); }

/* Links inside the reading column */
.article-prose a,
.page-prose .prose a {
  color: var(--accent-gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(176, 141, 87, .4);
  transition: text-decoration-color .2s ease;
}
.article-prose a:hover,
.page-prose .prose a:hover { text-decoration-color: var(--accent-gold); }

/* The closing disclaimer, set apart quietly */
.article-prose > p:last-child em,
.page-prose .prose > p:last-child em {
  display: block;
  margin-block-start: 2rem;
  padding: 1rem 1.2rem;
  background: rgba(176, 141, 87, .06);
  border-inline-start: 3px solid rgba(176, 141, 87, .35);
  border-radius: 8px;
  font-size: .92rem;
  font-style: normal;
  color: var(--text-on-light-secondary);
}

@media (max-width: 640px) {
  .article-prose,
  .page-prose .prose { font-size: 1rem; }
  .article-prose .lead-para,
  .page-prose .prose .lead-para { font-size: 1.1rem; }
  .article-prose h2,
  .page-prose .prose h2 { margin-block-start: 2rem; }
}

/* ============================================================
   JOURNAL CARDS (v13.5) — cards, not a list

   They were text in a rounded box, which reads as a list item.
   A cover image, a clear title, and a footer that stays pinned
   makes each one an object worth clicking.
   ============================================================ */

.writing-band .card-grid, .journal-teaser .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
}

.article-card-img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-warm);
  flex: 0 0 auto;
}
.article-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.article-card:hover .article-card-img img { transform: scale(1.05); }

.article-card-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.3rem 1.4rem 1.5rem;
  flex: 1 1 auto;
}
.article-card-body h3 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: 1.16rem;
  line-height: 1.3;
  margin: 0;
  color: var(--text-on-light);
}
.article-card-body p {
  font-size: .94rem;
  line-height: 1.62;
  color: var(--text-on-light-secondary);
  margin: 0;
}
.article-card-body .cta {
  margin-block-start: auto;
  padding-block-start: .7rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent-gold-text);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.article-card:hover .cta .arrow-inline { transform: translateX(-3px); }
[dir="ltr"] .article-card:hover .cta .arrow-inline { transform: translateX(3px); }
.cta .arrow-inline { transition: transform .25s ease; }

/* The journal before it has posts — a real page, not a blank one. */
.journal-empty {
  padding-block: clamp(2rem, 5vw, 4rem);
  background: var(--paper);
}
.journal-empty .lead-para {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-on-light);
  margin-block-end: .8rem;
}
.journal-empty > .wrap > p {
  color: var(--text-on-light-secondary);
  line-height: 1.7;
}

/* ============================================================
   MOBILE HEADER (v14.3)

   There were no mobile rules for the header at all, so the brand,
   the language switcher, the call to action and the menu button
   all stayed on one row and collided on a phone. The call to
   action is the important one, so it keeps its size; the brand
   wordmark drops to the mark alone, and the switcher tightens.
   ============================================================ */

@media (max-width: 900px) {
  .site-header { padding: .7rem 1rem; gap: .6rem; }
  /* Was: hide every span in .brand — which now hides the name itself, since
     the wordmark is text again rather than part of an image. The founder line
     is hidden by the brand rules below instead. */
  .site-header .brand svg { width: 27px; height: 27px; }
  .lang-switch { gap: .1rem; padding: .18rem; }
  .lang-switch a { padding: .3rem .55rem; font-size: .82rem; }
}

@media (max-width: 600px) {
  .site-header { padding: .6rem .8rem; gap: .45rem; }
  /* The CTA stays, but compact — it is the reason the header exists. */
  .site-header .btn,
  .site-header .nav-cta {
    min-height: 42px;
    padding: .55rem 1rem;
    font-size: .9rem;
    width: auto;
  }
  .lang-switch a { padding: .28rem .45rem; font-size: .78rem; }
  .menu-toggle { width: 44px; height: 44px; flex: none; }
}

@media (max-width: 420px) {
  /* At this width the call to action and the menu cannot both be
     comfortable, so the CTA shortens rather than wrapping. */
  .site-header .btn,
  .site-header .nav-cta { padding: .5rem .8rem; font-size: .84rem; }
  .lang-switch a { padding: .26rem .38rem; font-size: .74rem; }
}

/* Body copy, raised with the scale */
body { font-size: var(--body); line-height: 1.72; }
.prose, .article-prose, .page-prose .prose { font-size: var(--body); line-height: 1.78; }
.prose p, .article-prose p { font-size: inherit; }

/* ============================================================
   HEADING SCALE (v14.3)

   h2 was defined eleven different ways across the stylesheet and
   h3 thirteen, most of them below the token scale, which is why
   headings read as small and inconsistent from section to
   section. These come last so they set a reliable floor; a
   section that genuinely needs a different size can still
   override it deliberately.
   ============================================================ */

.prose h2,
.article-prose h2,
.page-prose .prose h2,
.section-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  line-height: 1.24;
}

.prose h3,
.article-prose h3,
.page-prose .prose h3 {
  font-size: clamp(1.22rem, 1.9vw, 1.4rem);
  line-height: 1.32;
}

/* Cards keep their own smaller heading, but not this small */
.article-card-body h3,
.session-card-body h3,
.session-card-body h4 {
  font-size: clamp(1.15rem, 1.6vw, 1.28rem);
  line-height: 1.3;
}

/* Lead paragraphs */
.lead, .lead-para {
  font-size: var(--body-lg);
  line-height: 1.62;
}

@media (max-width: 600px) {
  .prose h2, .article-prose h2, .page-prose .prose h2, .section-head h2 { font-size: 1.55rem; }
  .prose h3, .article-prose h3, .page-prose .prose h3 { font-size: 1.2rem; }
  body, .prose, .article-prose { font-size: 1.12rem; }
}

/* ============================================================
   CREDENTIALS (v15.2)

   A few relevant trainings per session page, not the whole
   collection. Certificates are evidence, so they are shown at a
   readable size and open larger — but they sit beside the text
   rather than dominating it.
   ============================================================ */

.cred-block {
  background: var(--paper-warm);
  padding-block: clamp(2.4rem, 5vw, 4rem);
  border-block: 1px solid rgba(176, 141, 87, .18);
}
.cred-block h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: .3rem 0 1.6rem;
  color: var(--text-on-light);
}

.cred-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.cred-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.2rem;
  align-items: start;
  background: #fffdfa;
  border: 1px solid var(--border-on-light);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}
.cred-item:has(.cred-text:only-child) { grid-template-columns: 1fr; }

.cred-thumb {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(58, 51, 80, .12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cred-thumb:hover { transform: scale(1.03); box-shadow: 0 8px 22px rgba(58,51,80,.16); }
.cred-thumb img { width: 100%; height: auto; display: block; }

.cred-text h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  margin: 0 0 .25rem;
  color: var(--text-on-light);
  line-height: 1.35;
}
.cred-body { font-size: .93rem; color: var(--text-on-light-secondary); margin: 0 0 .4rem; }
.cred-teacher { display: block; font-size: .88rem; opacity: .85; }

.cred-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0; }
.cred-status {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 999px;
}
.cred-status.is-complete    { background: rgba(46, 125, 50, .12);  color: #2E7D32; }
.cred-status.is-in-progress { background: rgba(176, 141, 87, .18); color: #7A5C2E; }
.cred-status.is-studied     { background: rgba(90, 73, 122, .12);  color: #5A497A; }
.cred-detail { font-size: .84rem; color: var(--text-muted-aa); }

/* A clarification is a caution, so it should read as one. */
.cred-note {
  margin: .55rem 0 0;
  padding-inline-start: .7rem;
  border-inline-start: 2px solid rgba(176, 141, 87, .45);
  font-size: .86rem;
  line-height: 1.55;
  color: var(--text-on-light-secondary);
}

.cred-cta { margin-block-start: 1.6rem; }

@media (max-width: 620px) {
  .cred-item { grid-template-columns: 1fr; }
  .cred-thumb { max-width: 240px; }
}

/* ============================================================
   TRAINING PAGE (v15.6) — a considered page, not a list

   Certificates displayed larger and evenly, each with a line
   explaining what the training contributes. A wall of thumbnails
   with names underneath reads as a scrapbook; the reason a
   training matters is what makes it worth showing.
   ============================================================ */

.training-page { max-width: 1080px; margin-inline: auto; }

.training-page .lead-para {
  font-size: var(--body-lg);
  line-height: 1.62;
  color: var(--text-on-light);
  max-width: 62ch;
  margin-block-end: 2.4rem;
  padding-block-end: 1.4rem;
  border-block-end: 1px solid rgba(176, 141, 87, .22);
}

.training-list { gap: 1.5rem; }

.training-list .cred-item {
  grid-template-columns: 260px 1fr;
  gap: 1.8rem;
  padding: 1.4rem 1.6rem;
  align-items: center;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.training-list .cred-item:hover {
  border-color: rgba(176, 141, 87, .4);
  box-shadow: 0 10px 30px rgba(58, 51, 80, .09);
}

/* Certificates are the evidence — show them properly. */
.training-list .cred-thumb {
  aspect-ratio: 4 / 3;
  background: var(--paper-warm);
  display: grid;
  place-items: center;
}
.training-list .cred-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .4rem;
}

.training-list .cred-text h3 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.28;
  margin-block-end: .35rem;
}

/* The line that says why this training matters. */
.cred-what {
  margin: .6rem 0 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-on-light-secondary);
  max-width: 60ch;
}

/* An item with no certificate should not look like a gap. */
.training-list .cred-item:not(:has(.cred-thumb)) {
  grid-template-columns: 1fr;
  background: transparent;
  border-style: dashed;
}

.training-page .fine-note {
  margin-block-start: 2.4rem;
  padding: 1.1rem 1.3rem;
  background: rgba(176, 141, 87, .07);
  border-inline-start: 3px solid var(--accent-gold);
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.65;
  color: var(--text-on-light-secondary);
}

@media (max-width: 780px) {
  .training-list .cred-item { grid-template-columns: 1fr; gap: 1rem; }
  .training-list .cred-thumb { max-width: 320px; }
}

/* ============================================================
   GATEWAY WITH ONE CARD (v16.5)

   A gateway holding a single session left most of its row empty,
   which read as a layout fault rather than a deliberate choice.
   The description now sits beside the card and fills that space.
   ============================================================ */

.gateway-block:has(.session-rail > :only-child) {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.4fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.gateway-block:has(.session-rail > :only-child) .gateway-label {
  order: 2;
  margin-block-end: 0;
  align-self: center;
}
.gateway-block:has(.session-rail > :only-child) .gateway-label p {
  font-size: 1.02rem;
  line-height: 1.72;
  max-width: 46ch;
}
.gateway-block:has(.session-rail > :only-child) .session-rail {
  order: 1;
  grid-template-columns: minmax(0, 320px);
}

@media (max-width: 820px) {
  .gateway-block:has(.session-rail > :only-child) {
    grid-template-columns: 1fr;
  }
  .gateway-block:has(.session-rail > :only-child) .gateway-label { order: 1; }
  .gateway-block:has(.session-rail > :only-child) .session-rail  { order: 2; }
}

/* ============================================================
   READING SIZE ON LAPTOPS (v16.5)

   Body text held its phone size all the way up, so a 1440px
   screen showed small type in a wide column — technically fine
   and tiring to read. It now grows with the viewport.
   ============================================================ */

@media (min-width: 1100px) {
  body { font-size: 1.19rem; }
  .prose, .article-prose, .page-prose .prose { font-size: 1.19rem; line-height: 1.8; }
  .lead, .lead-para { font-size: 1.4rem; }
  .session-body .prose { font-size: 1.2rem; }
}
@media (min-width: 1500px) {
  body { font-size: 1.23rem; }
  .prose, .article-prose, .page-prose .prose { font-size: 1.23rem; }
}

/* Inline links inside prose — visible without shouting. */
.prose a:not(.btn),
.article-prose a:not(.btn),
.session-body a:not(.btn) {
  color: var(--accent-gold-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(176, 141, 87, .45);
  transition: text-decoration-color .2s ease, background .2s ease;
  border-radius: 3px;
}
.prose a:not(.btn):hover,
.article-prose a:not(.btn):hover,
.session-body a:not(.btn):hover {
  text-decoration-color: var(--accent-gold);
  background: rgba(176, 141, 87, .08);
}

/* ============================================================
   PULL-OUT BOXES (v16.5)

   Long pages were an unbroken column of paragraphs. A list or a
   note set in its own box gives the eye somewhere to rest and
   marks what matters.
   ============================================================ */

.prose ul,
.article-prose ul,
.session-body ul {
  background: rgba(176, 141, 87, .05);
  border-inline-start: 3px solid rgba(176, 141, 87, .35);
  border-radius: 10px;
  padding: 1.1rem 1.4rem 1.1rem 2.2rem;
  margin-block: 1.5rem;
}
[dir="rtl"] .prose ul,
[dir="rtl"] .article-prose ul,
[dir="rtl"] .session-body ul {
  padding: 1.1rem 2.2rem 1.1rem 1.4rem;
}
.prose ul li,
.article-prose ul li,
.session-body ul li { margin-block-end: .55rem; }
.prose ul li:last-child,
.article-prose ul li:last-child { margin-block-end: 0; }

/* A paragraph that opens with bold text reads as a callout. */
.prose p > strong:first-child,
.session-body p > strong:first-child { color: var(--text-on-light); }

/* Compact training strip on the About page. */
.training-strip {
  margin-block: 2.4rem;
  padding: 1.6rem 1.8rem;
  background: rgba(176, 141, 87, .06);
  border: 1px solid rgba(176, 141, 87, .22);
  border-radius: 16px;
}
.training-strip h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin: .2rem 0 1.1rem;
  border: none;
  padding: 0;
}
.strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .8rem 1.4rem;
}
.strip-list li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding-inline-start: .8rem;
  border-inline-start: 2px solid rgba(176, 141, 87, .32);
  margin: 0;
}
.strip-title { font-weight: 700; font-size: .96rem; color: var(--text-on-light); line-height: 1.35; }
.strip-body  { font-size: .86rem; color: var(--text-on-light-secondary); }
.strip-list .cred-status { align-self: flex-start; margin-block-start: .2rem; }
.strip-note { margin: 1.3rem 0 0; font-size: .93rem; color: var(--text-on-light-secondary); }

/* The certificate collage on the Approach page. */
/*
 * The collage is capped at its natural width.
 *
 * width:100% stretched a 900px image across a 1240px column, so it rendered
 * upscaled and soft — larger on screen than the file it came from. Capping at
 * the file's own width keeps it sharp and stops it dominating the page.
 */
.cert-collage {
  margin-block: 2.2rem;
  margin-inline: auto;
  max-width: 900px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(176, 141, 87, .22);
}
.cert-collage img {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
}
.cert-collage figcaption {
  padding: .9rem 1.2rem;
  background: rgba(176, 141, 87, .07);
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-on-light-secondary);
}

/* ============================================================
   ABOUT HERO (v16.8)

   The hero keeps the centred layout it always had. The portrait
   is a small addition beneath the lead line, not a second column
   that reshapes the whole header.
   ============================================================ */

.hero-portrait {
  display: block;
  width: 128px;
  height: 128px;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 50%;
  margin: 0 auto 1.2rem;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 10px 30px rgba(58, 51, 80, .18);
}

/*
 * Reading width is left to the token in tokens.css.
 *
 * A previous pass overrode it to 78ch across a 1040px column, which made prose
 * pages read as a wide slab. The session pages were unaffected because their
 * content is broken up by cards and steps, which is why the problem showed on
 * some pages and not others. The original 760px is the measure that works.
 */

/* ============================================================
   HEADINGS AND EYEBROWS (v16.8)

   Headings were the same colour as body text, so a long page read
   as one undifferentiated block. They now carry the deep indigo,
   which separates structure from prose without shouting.

   Eyebrows were small enough to miss. Larger, and set from the
   theme so a single change moves them everywhere.
   ============================================================ */

.prose h2,
.article-prose h2,
.page-prose .prose h2,
.section-head h2,
.session-body h2 {
  color: var(--ink-deep, #2F2A4D);
}
.prose h3,
.article-prose h3,
.page-prose .prose h3,
.session-body h3 {
  color: var(--ink-deep, #2F2A4D);
}

.eyebrow {
  font-size: clamp(.82rem, 1.1vw, .94rem);
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--accent-gold-text);
}
.page-hero .eyebrow { font-size: clamp(.88rem, 1.2vw, 1rem); }

@media (min-width: 1100px) {
  .prose h2, .article-prose h2, .page-prose .prose h2, .session-body h2 {
    font-size: clamp(1.75rem, 2.6vw, 2.15rem);
  }
  .prose h3, .article-prose h3, .page-prose .prose h3, .session-body h3 {
    font-size: clamp(1.3rem, 1.9vw, 1.5rem);
  }
}

/* ============================================================
   INLINE LINKS (v16.8) — unmistakable

   The links were styled but too quiet to register as links at a
   glance. Gold, semibold, with a visible underline and a tinted
   background on hover: obvious without being loud.
   ============================================================ */

.prose a:not(.btn):not(.cta),
.article-prose a:not(.btn):not(.cta),
.session-body a:not(.btn):not(.cta),
.page-prose a:not(.btn):not(.cta),
.cred-note a,
.strip-note a,
.cert-collage figcaption a {
  color: #8A6A2F;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(176, 141, 87, .65);
  padding: 0 .12em;
  border-radius: 3px;
  transition: background .2s ease, text-decoration-color .2s ease, color .2s ease;
}
.prose a:not(.btn):not(.cta):hover,
.article-prose a:not(.btn):not(.cta):hover,
.session-body a:not(.btn):not(.cta):hover,
.page-prose a:not(.btn):not(.cta):hover,
.cred-note a:hover,
.strip-note a:hover,
.cert-collage figcaption a:hover {
  color: #6E5322;
  background: rgba(176, 141, 87, .16);
  text-decoration-color: #8A6A2F;
}
/* On the dark bands, the same idea in a lighter gold. */
.is-dark a:not(.btn):not(.cta),
.protocol a:not(.btn):not(.cta),
.statement-band a:not(.btn):not(.cta) {
  color: #E4CDA0;
  text-decoration-color: rgba(228, 205, 160, .6);
}

/* ============================================================
   BEYOND SESSIONS (v18.0)

   Four cards saying the Field is more than one person's session
   menu. Restrained on purpose — these compete with the session
   cards above them, so they stay text-led rather than shouting.
   ============================================================ */

.beyond-sessions {
  padding-block: clamp(2.6rem, 6vw, 5rem);
  background: var(--paper-warm);
  border-block: 1px solid rgba(176, 141, 87, .16);
}
.beyond-sessions .section-head { margin-block-end: 2.2rem; }
.beyond-sessions .lead-para {
  max-width: 56ch;
  margin-inline: auto;
  border: none;
  padding: 0;
}

.beyond-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.beyond-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem 1.4rem;
  background: #fffdfa;
  border: 1px solid var(--border-on-light);
  border-radius: 16px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.beyond-card:hover {
  transform: translateY(-3px);
  border-color: rgba(176, 141, 87, .45);
  box-shadow: 0 12px 32px rgba(58, 51, 80, .1);
}
.beyond-card h3 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.28;
  margin: 0;
  color: var(--ink-deep, #2F2A4D);
}
.beyond-card p {
  font-size: .93rem;
  line-height: 1.62;
  color: var(--text-on-light-secondary);
  margin: 0;
}
.beyond-card .cta {
  margin-block-start: auto;
  padding-block-start: .7rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent-gold-text);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
a.beyond-card:hover .arrow-inline { transform: translateX(3px); }
[dir="rtl"] a.beyond-card:hover .arrow-inline { transform: translateX(-3px); }

/* Not yet a page — say so quietly rather than linking nowhere. */
.beyond-card.is-soon {
  background: transparent;
  border-style: dashed;
}
.beyond-card.is-soon .cta {
  color: var(--text-muted-aa);
  font-weight: 600;
}

@media (max-width: 1000px) { .beyond-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .beyond-grid { grid-template-columns: 1fr; } }

/* ============================================================
   FIELD PICKS (v18.1)

   Editorial rather than commercial: no sale badges, no urgency,
   no borrowed star ratings. A recommendation reads as a
   recommendation when it looks like writing, not like a shop.
   ============================================================ */

.picks-hub { padding-block: clamp(2rem, 5vw, 3.5rem); }
/*
 * The featured pick leads the page.
 *
 * All three cards in identical cells gave equal weight to a 5,500-word
 * write-up and a four-line note, so the page read as a flat list. The featured
 * one runs full width with the image beside the text.
 */
.pick-card.is-featured {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 42%) 1fr;
  display: grid;
  align-items: stretch;
}

/* --- a single pick's page --- */
.pick-facts { padding-block: clamp(1.8rem, 4vw, 3rem); background: var(--paper-warm); }
.facts-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.4rem;
  margin: 0 0 1.8rem;
}
.facts-list dt { font-weight: 700; font-size: .92rem; color: var(--ink-deep, #2F2A4D); }
.facts-list dd { margin: 0; font-size: .96rem; color: var(--text-on-light-secondary); }
.fact-note { display: block; font-size: .82rem; color: var(--text-muted-aa); margin-block-start: .15rem; }

/* The disclosure sits with the link it describes, not buried in a footer. */
.pick-disclosure {
  margin-block-start: .9rem;
  font-size: .89rem;
  line-height: 1.6;
  color: var(--text-on-light-secondary);
  max-width: 62ch;
}

.pick-related { padding-block: clamp(1.6rem, 4vw, 2.6rem); }
.pick-related ul { list-style: none; padding: 0; margin: .8rem 0 0; background: none; border: none; }
.pick-related li { margin-block-end: .5rem; }

@media (max-width: 560px) {
  .facts-list { grid-template-columns: 1fr; gap: .15rem; }
  .facts-list dd { margin-block-end: .7rem; }
}

/* The homepage Field Picks strip. */
.picks-strip { padding-block: clamp(2.4rem, 6vw, 4.5rem); }

/* ============================================================
   COURSE REGISTRATION CARD (v18.5)

   Sits above the write-up. Facts on one side, the action on the
   other, disclosure attached to the button rather than buried
   further down. Warm and clear rather than a sales banner —
   nothing flashing, no countdown, no false urgency.
   ============================================================ */

.pick-cta-band { padding-block: 0 clamp(1.4rem, 3vw, 2.2rem); }

.pick-hero-cta {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
  padding: clamp(1.3rem, 3vw, 1.9rem);
  background: linear-gradient(135deg, rgba(176,141,87,.09), rgba(176,141,87,.04));
  border: 1px solid rgba(176, 141, 87, .34);
  border-radius: 18px;
}

.cta-provider {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-gold-text);
  margin: 0 0 .7rem;
}

.cta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  display: grid;
  gap: .5rem;
}
.cta-list li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: .8rem;
  align-items: baseline;
  margin: 0;
  font-size: .95rem;
}
.cta-list span { color: var(--text-muted-aa); font-size: .84rem; }
.cta-list strong { color: var(--ink-deep, #2F2A4D); font-weight: 700; }
.cta-list em {
  grid-column: 2;
  font-style: normal;
  font-size: .78rem;
  color: var(--text-muted-aa);
}

.cta-action { display: flex; flex-direction: column; gap: .7rem; }
.cta-action .btn { width: 100%; }
.cta-alt {
  font-size: .9rem;
  font-weight: 600;
  color: var(--accent-gold-text);
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.cta-alt:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The disclosure belongs with the button it describes. */
.cta-note {
  margin: .2rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-on-light-secondary);
  text-align: center;
}

@media (max-width: 720px) {
  .pick-hero-cta { grid-template-columns: 1fr; }
  .cta-list li { grid-template-columns: 84px 1fr; }
}

/* An offer, stated once and without pressure. */
.cta-offer strong { color: #2E7D32; }

/* Course covers carry text, so they are fitted rather than cropped —
   a crop takes the ends off the course name. */
.pick-img img { object-fit: contain; background: var(--paper-warm); }

/* ============================================================
   FIELD PICKS HUB (v18.9)

   A uniform grid under a section heading. The featured card ran
   full width, which gave one course half the page and left no
   room for the categories still to come.
   ============================================================ */

.picks-section {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--ink-deep, #2F2A4D);
  margin: 0 0 1.2rem;
  padding-inline-start: .8rem;
  border-inline-start: 3px solid var(--accent-gold);
}

/* Provider artwork carries its own title, so it is fitted not cropped. */
.pick-img { aspect-ratio: 3 / 2; }

/* ============================================================
   FIELD PICKS CARDS (v19.1)

   Rebuilt from rules that had accumulated across several passes —
   a min-height meant for the old featured card was still applying
   to every card, which is why they rendered enormous.

   One definition each, compact, four across on a wide screen.
   ============================================================ */

.picks-hub { padding-block: clamp(2rem, 5vw, 3.5rem); }

.picks-promise {
  max-width: 62ch;
  margin: 0 auto 2.2rem;
  padding: .9rem 1.2rem;
  background: rgba(176, 141, 87, .07);
  border-inline-start: 3px solid var(--accent-gold);
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-on-light-secondary);
}

.picks-section {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  color: var(--ink-deep, #2F2A4D);
  margin: 0 0 1.1rem;
  padding-inline-start: .8rem;
  border-inline-start: 3px solid var(--accent-gold);
}

.picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.2rem;
  align-items: start;
}

.pick-card {
  display: flex;
  flex-direction: column;
  background: #fffdfa;
  border: 1px solid var(--border-on-light);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  min-height: 0;
  padding: 0;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pick-card:hover {
  transform: translateY(-3px);
  border-color: rgba(176, 141, 87, .45);
  box-shadow: 0 12px 30px rgba(58, 51, 80, .11);
}

/* Provider artwork carries its own title, so it is fitted, not cropped —
   and capped, so a wide banner cannot stretch the card. */
.pick-img {
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 170px;
  overflow: hidden;
  background: var(--paper-warm);
  flex: 0 0 auto;
}
.pick-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

.pick-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.1rem 1.2rem 1.3rem;
  flex: 1;
  justify-content: flex-start;
}
.pick-provider {
  font-size: .72rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-gold-text);
  margin: 0;
}
.pick-body h2,
.pick-body h3 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.26;
  margin: 0;
  color: var(--ink-deep, #2F2A4D);
}
.pick-tagline {
  font-size: .89rem;
  line-height: 1.55;
  color: var(--text-on-light-secondary);
  margin: 0;
}
.pick-why {
  font-size: .84rem;
  line-height: 1.5;
  margin: .25rem 0 0;
  padding-inline-start: .6rem;
  border-inline-start: 2px solid rgba(176, 141, 87, .4);
  color: var(--text-on-light-secondary);
}
.pick-meta { font-size: .8rem; color: var(--text-muted-aa); }
.pick-card .cta {
  margin-block-start: auto;
  padding-block-start: .7rem;
  font-size: .86rem;
  font-weight: 700;
  color: var(--accent-gold-text);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* The homepage strip uses the same cards. */
.picks-strip { padding-block: clamp(2.4rem, 6vw, 4.5rem); background: var(--paper-warm); }
.picks-strip .section-head { margin-block-end: 1.8rem; }
.picks-strip .lead-para { max-width: 56ch; margin-inline: auto; border: none; padding: 0; }
.picks-all { text-align: center; margin-block-start: 1.6rem; }

@media (min-width: 1100px) {
  .picks-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .picks-grid { grid-template-columns: 1fr; }
  .pick-img { max-height: 200px; }
}

/* ============================================================
   FIELD PICKS HUB — CATEGORIES (v21.0)

   The hub lists kinds of thing, not things. It stays the same
   size however much sits beneath it, which is what lets the
   section grow without the page having to be reorganised.
   ============================================================ */

.picks-intro { padding-block: clamp(1.6rem, 4vw, 2.6rem); }
.picks-intro .lead-para { border: none; padding: 0; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
}

.cat-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: 1.5rem 1.5rem 1.6rem;
  background: #fffdfa;
  border: 1px solid var(--border-on-light);
  border-radius: 16px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(176, 141, 87, .45);
  box-shadow: 0 12px 32px rgba(58, 51, 80, .11);
}
.cat-card h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: 1.28rem;
  line-height: 1.25;
  margin: 0;
  color: var(--ink-deep, #2F2A4D);
}
.cat-card p {
  font-size: .92rem;
  line-height: 1.58;
  color: var(--text-on-light-secondary);
  margin: 0;
}
.cat-count {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted-aa);
}
.cat-card .cta {
  margin-block-start: auto;
  padding-block-start: .7rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent-gold-text);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* What is coming, stated once and quietly. */
.picks-coming {
  margin-block-start: 1.8rem;
  font-size: .9rem;
  color: var(--text-muted-aa);
  text-align: center;
}

/* The category name in a hero eyebrow links back to the hub. */
.page-hero .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(176,141,87,.4); }
.page-hero .eyebrow a:hover { border-bottom-color: var(--accent-gold); }

/* ============================================================
   FIELD PICKS HUB (v21.1) — built to be acted on

   The page opens with what is on offer and a way in, not with an
   explanation of methodology. The promise still matters, so it
   sits at the foot where someone reaches for it.
   ============================================================ */

.picks-hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.picks-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.picks-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,15,42,.62), rgba(20,15,42,.34) 55%, rgba(20,15,42,.7));
}
.picks-hero > .wrap { position: relative; z-index: 1; }
.picks-hero .eyebrow { color: #E4CDA0; }
.picks-hero h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.12;
  margin: .3rem 0 .9rem;
}
.picks-hero .lead {
  color: rgba(255,255,255,.9);
  font-size: clamp(1.1rem, 1.9vw, 1.35rem);
  line-height: 1.6;
  max-width: 54ch;
  margin-inline: auto;
}
.picks-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: center;
  margin-block-start: 2rem;
}
.picks-hero .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.picks-hero .btn-outline:hover { border-color: #E4CDA0; background: rgba(255,255,255,.1); }

/* --- the matcher --- */
.pick-finder {
  padding-block: clamp(2.4rem, 6vw, 4rem);
  background: var(--paper-warm);
  border-block-end: 1px solid rgba(176,141,87,.18);
  text-align: center;
}
.pick-finder h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  margin: .3rem 0 1.5rem;
  color: var(--ink-deep, #2F2A4D);
}
.finder-options { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.finder-chip {
  border: 1px solid rgba(176,141,87,.4);
  background: #fffdfa;
  border-radius: 999px;
  padding: .75rem 1.4rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-on-light);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.finder-chip:hover { transform: translateY(-2px); border-color: var(--accent-gold); }
.finder-chip.is-on { background: var(--accent-gold); border-color: var(--accent-gold); color: #fff; }

.finder-result { margin-block-start: 1.8rem; }
.finder-why {
  max-width: 52ch;
  margin: 0 auto 1.1rem;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--text-on-light-secondary);
}
.finder-pick {
  display: inline-flex;
  flex-direction: column;
  gap: .3rem;
  max-width: 460px;
  padding: 1.4rem 1.6rem;
  background: #fffdfa;
  border: 1px solid rgba(176,141,87,.4);
  border-radius: 16px;
  text-decoration: none;
  text-align: start;
  transition: transform .25s ease, box-shadow .25s ease;
}
.finder-pick:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(58,51,80,.13); }
.finder-title {
  font-family: var(--font-editorial), serif;
  font-size: 1.24rem;
  line-height: 1.26;
  color: var(--ink-deep, #2F2A4D);
}
.finder-tag { font-size: .92rem; line-height: 1.55; color: var(--text-on-light-secondary); }
.finder-none {
  max-width: 52ch;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-on-light-secondary);
}

/* --- categories, larger and easier to read --- */
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.3rem; }
.cat-card { padding: 1.8rem 1.8rem 1.9rem; gap: .5rem; }
.cat-card h3 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
  color: var(--ink-deep, #2F2A4D);
}
.cat-card p { font-size: 1rem; line-height: 1.6; }
.cat-card .cat-count { order: -1; }

/* --- the promise, at the foot --- */
.picks-promise-band {
  padding-block: clamp(2.4rem, 6vw, 4rem);
  background: var(--paper-warm);
  border-block-start: 1px solid rgba(176,141,87,.18);
}
.picks-promise-band h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin: 0 0 1rem;
  color: var(--ink-deep, #2F2A4D);
}
.picks-promise-band p {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text-on-light-secondary);
  margin: 0 0 .9rem;
}
.promise-money {
  padding: 1rem 1.2rem;
  background: rgba(176,141,87,.08);
  border-inline-start: 3px solid var(--accent-gold);
  border-radius: 10px;
}

@media (max-width: 600px) {
  .picks-hero-cta .btn { width: 100%; }
  .finder-chip { width: 100%; }
}

/* ============================================================
   FIELD PICKS GATEWAY (homepage)

   Drawn, not photographed, and coloured on a panel rather than on the section
   — `section:nth-of-type(even)` repaints section backgrounds and outranks a
   plain class, which is what turned an earlier version beige.

   The panel sits tight to the section above it. Two dark blocks separated by a
   thin strip of cream read as a mistake; either they touch or they are clearly
   apart, and touching is the better of the two here.
   ============================================================ */

section.picks-gateway {
  background: transparent;
  padding-block: clamp(.8rem, 2vw, 1.4rem) clamp(1.6rem, 3.5vw, 2.6rem);
}

.pg-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  padding: clamp(2rem, 4.5vw, 3rem) clamp(1.2rem, 4vw, 3rem) clamp(1.6rem, 3.5vw, 2.4rem);
  text-align: center;
  background: linear-gradient(165deg, #131836 0%, #0a0d20 55%, #12102b 100%);
  border: 1px solid rgba(198, 161, 91, .3);
  box-shadow: 0 24px 60px rgba(10, 12, 30, .28);
}

/* A hairline of light across the top edge — the one moving element. It reads
   as a field settling rather than as an animation demanding attention. */
.pg-panel::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 205, 160, .75), transparent);
  opacity: .8;
}

.pg-glow {
  position: absolute;
  inset: -45% 15% auto 15%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(130, 80, 240, .42), transparent 68%);
  z-index: -1;
  pointer-events: none;
  animation: pgDrift 14s ease-in-out infinite alternate;
}
@keyframes pgDrift {
  from { transform: translate3d(-3%, 0, 0) scale(1); opacity: .85; }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-glow { animation: none; }
}

.pg-head { max-width: 56ch; margin-inline: auto; }
.pg-panel .eyebrow { color: #E4CDA0; }
.pg-panel h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.22;
  color: #fff;
  margin: .35rem 0 .65rem;
}
.pg-lead {
  color: rgba(238, 240, 255, .8);
  font-size: var(--body-sm);
  line-height: 1.68;
  margin: 0;
}

/* The four things a write-up always answers. Stated as a row of short items,
   because a reader scans this and does not read it. */
.pg-promises {
  list-style: none;
  margin: clamp(1.1rem, 2.5vw, 1.6rem) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 0;
}
.pg-promises li {
  position: relative;
  padding-inline: .95rem;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: rgba(228, 205, 160, .92);
}
.pg-promises li + li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: .2em;
  width: 1px;
  background: rgba(198, 161, 91, .35);
}

.pg-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem 1.3rem;
  margin-block-start: clamp(1.3rem, 2.8vw, 1.9rem);
}
.pg-quiet {
  font-size: .9rem;
  font-weight: 600;
  color: rgba(238, 240, 255, .78);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(198, 161, 91, .45);
}
.pg-quiet:hover { color: #fff; text-decoration-color: #E4CDA0; }

/* Categories are a shortcut for someone who already knows what they want, so
   they are chips under the button rather than cards beside it. */
.pg-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .45rem .6rem;
  margin-block-start: clamp(1.2rem, 2.5vw, 1.7rem);
  padding-block-start: clamp(1rem, 2.2vw, 1.4rem);
  border-block-start: 1px solid rgba(150, 158, 214, .16);
}
.pg-jump-label {
  font-size: .8rem;
  color: rgba(185, 190, 222, .72);
  margin-inline-end: .2rem;
}
.pg-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  border: 1px solid rgba(198, 161, 91, .35);
  background: rgba(255, 255, 255, .05);
  color: #f2f3ff;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.pg-chip:hover {
  background: rgba(198, 161, 91, .18);
  border-color: rgba(228, 205, 160, .8);
  transform: translateY(-1px);
}
.pg-chip-n {
  font-size: .74rem;
  font-weight: 700;
  color: #0a0d20;
  background: rgba(228, 205, 160, .9);
  border-radius: 999px;
  min-width: 1.35em;
  height: 1.35em;
  display: grid;
  place-items: center;
  padding-inline: .25em;
}

.pg-coming {
  margin: .85rem 0 0;
  font-size: .79rem;
  color: rgba(185, 190, 222, .58);
}

@media (max-width: 560px) {
  .pg-promises li { padding-inline: .6rem; font-size: .8rem; }
  .pg-cta { flex-direction: column; }
  .pg-cta .btn { width: 100%; }
}

/* ============================================================
   Category cards with artwork on the hub.
   The image sits above the existing text, so a category without a picture
   keeps exactly the card it had.
   ============================================================ */

.cat-card.has-img { padding: 0 0 1.5rem; overflow: hidden; }
.cat-card.has-img > :not(.cat-img) { padding-inline: 1.5rem; }
.cat-img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--paper-warm);
  margin-block-end: 1.1rem;
}
/*
   No max-height. The images here are 16:9 and the box is 16:9, so a pixel cap
   on top of that only ever crops — it took the top and bottom off every
   provider thumbnail while the aspect ratio said it was fine.
*/
.cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A category card that carries a picture keeps the count under the image
   rather than above it — the mobile reorder was written for the text-only
   card and would otherwise float the count to the very top. */
.cat-card.has-img .cat-count { order: 0; }

/* ============================================================
   QUANTUM HOUR — matched to the Field Picks panel

   The card was a full-bleed dark band while the Field Picks gateway is an
   inset panel, so the two dark blocks on the homepage disagreed about what
   kind of object they were. They are the same kind of object: a contained
   invitation. Same width, same radius, same hairline.
   ============================================================ */

section.qh-card {
  background: transparent;
  padding-block: clamp(.8rem, 2vw, 1.4rem);
}

section.qh-card .wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /*
     The same measure as the Field Picks panel — and that is narrower than it
     looks. The picks panel sits *inside* a .wrap, so its width is the content
     width minus the wrap's inline padding on both sides. This panel *is* the
     .wrap, so matching var(--w-content) made it wider by exactly that padding
     — close enough to look like a rendering fault rather than a decision.
  */
  max-width: calc(var(--w-content) - (var(--s-5) * 2));
  border-radius: 22px;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.2rem, 3.5vw, 2.6rem);
  border: 1px solid rgba(198, 161, 91, .3);
  box-shadow: 0 24px 60px rgba(10, 12, 30, .28);
}
section.qh-card.is-dark .wrap {
  background:
    radial-gradient(ellipse at 25% 10%, rgba(91, 70, 161, .3), transparent 62%),
    linear-gradient(160deg, #14101f 0%, #1e1733 60%, #221a38 100%);
}
section.qh-card:not(.is-dark) .wrap { background: #fffdfa; }
section.qh-card.is-dark { background: transparent; color: inherit; }
section.qh-card.is-dark .wrap { color: #fff; }

section.qh-card .wrap::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 205, 160, .75), transparent);
}

/* The time is half the information in a date row, and it was set two steps
   smaller than the day it belongs to. Same weight class as the date now. */
.qh-time {
  opacity: 1;
  unicode-bidi: isolate;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(228, 205, 160, .95);
}
.qh-card:not(.is-dark) .qh-time { color: var(--accent-gold-text); }

.qh-timenote { font-size: .92rem; opacity: .8; }
.qh-hosts { font-size: .95rem; }
.qh-note { font-size: .9rem; opacity: .78; line-height: 1.6; }

@media (max-width: 820px) {
  section.qh-card .wrap { padding: 1.4rem 1.2rem 1.6rem; }
}

/* ============================================================
   Small text, raised

   A pass over the sizes that had drifted under ~0.8rem. At 13px and below,
   on a phone, this stops being quiet and starts being unreadable — and most
   of these carry real information: counts, dates, disclosure lines.
   ============================================================ */

.pg-promises li { font-size: .9rem; }
.pg-coming { font-size: .86rem; color: rgba(185, 190, 222, .72); }
.pg-jump-label { font-size: .88rem; }
.pg-chip-n { font-size: .8rem; }
.pg-quiet { font-size: .95rem; }
.pg-lead { font-size: var(--body); }

.cat-count { font-size: .84rem; }
.pick-provider { font-size: .78rem; }
.pick-meta { font-size: .86rem; }
.pick-why { font-size: .9rem; }
.pick-tagline { font-size: .95rem; }
.pick-card .cta { font-size: .92rem; }
.cat-card .cta { font-size: .92rem; }
.cat-card p { font-size: .98rem; }


/* The portrait fills its column instead of being capped at 260px and leaving
   a well of empty panel beneath it. At the wider measure the column is large
   enough that a full-height crop reads as a photograph rather than a band. */
section.qh-card .wrap { grid-template-columns: 0.78fr 1fr; align-items: stretch; }
section.qh-card .qh-media { align-self: stretch; display: flex; }
section.qh-card .qh-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 320px;
  object-fit: cover;
  object-position: center 28%;
}
section.qh-card .qh-copy { align-self: center; }

@media (max-width: 820px) {
  section.qh-card .wrap { grid-template-columns: 1fr; }
  section.qh-card .qh-media img { min-height: 0; max-height: 240px; }
}

/* Provider links on a category page. Reuses the homepage chip, on light. */
.picks-providers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .6rem;
  margin: 0 0 1.4rem;
}
.picks-providers-label {
  font-size: .88rem;
  color: var(--text-on-light-secondary);
  margin-inline-end: .2rem;
}
.picks-providers .pg-chip {
  color: var(--ink-deep, #2F2A4D);
  background: #fffdfa;
  border-color: rgba(176, 141, 87, .45);
}
.picks-providers .pg-chip:hover {
  background: rgba(198, 161, 91, .14);
  border-color: rgba(176, 141, 87, .8);
}

/* ============================================================
   PROVIDER PAGE

   A provider page is a long editorial read with a course grid inside it, so
   it borrows the article measure for prose and only opens out to full width
   for the grid and the two-column fit section.
   ============================================================ */

/* The provider's photograph, near the foot of the page. */
.prov-portrait { padding-block-start: 0; }
.prov-figure {
  margin: 0 auto;
  max-width: 860px;
  line-height: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(20, 16, 40, .16);
}
.prov-figure img { display: block; width: 100%; height: auto; }

/* The meta line inherits the shared header, so it only needs its own layout. */
.prov-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.2rem;
  margin: 1.3rem 0 0;
  font-size: .9rem;
  letter-spacing: .03em;
  font-weight: 600;
  color: rgba(240, 242, 255, .82);
}
.prov-meta a { color: rgba(240, 242, 255, .85); }

/* The count, as a jump link to the grid. Given a border so it reads as
   something to press rather than as a caption under the description. */
.prov-count {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 1rem;
  border: 1px solid rgba(198, 161, 91, .55);
  border-radius: 999px;
  font-size: .98rem;
  font-weight: 700;
  color: #F0E4CB !important;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.prov-count:hover {
  background: rgba(198, 161, 91, .18);
  border-color: #E4CDA0;
  transform: translateY(1px);
}
.prov-count .arrow-inline { transform: none; }

/* The anchor target sits under a sticky header, so the jump needs headroom or
   it lands with the heading hidden behind the bar. */
#courses { scroll-margin-block-start: calc(var(--header-h, 72px) + 1rem); }

/* Editorial blocks. Alternating bands are switched off here: the page already
   has enough sections that alternation would read as stripes rather than
   rhythm. */
section.prov-block { background: var(--paper); padding-block: clamp(2rem, 4.5vw, 3.2rem); }
section.prov-block:nth-of-type(even) { background: var(--paper); }
section.prov-why { background: var(--paper-warm); }
section.prov-caution { background: var(--paper-warm); }

.prose h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin: 0 0 .8rem;
}
.prose h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin: 1.5rem 0 .4rem;
  color: var(--ink-deep, #2F2A4D);
}
.prose p { margin: 0 0 1rem; line-height: 1.75; }
.prose p:last-child { margin-bottom: 0; }

.prov-list { margin: 0 0 1rem; padding: 0; list-style: none; }
.prov-list li {
  position: relative;
  padding-inline-start: 1.35rem;
  margin: 0 0 .5rem;
  line-height: 1.65;
}
.prov-list li::before {
  content: '';
  position: absolute;
  inset-inline-start: .25rem;
  inset-block-start: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-gold-text);
}

/* The caution section is marked with a rule rather than a warning colour —
   this is context a reader needs, not an alarm. */
.prov-caution .wrap { border-inline-start: 3px solid rgba(198, 161, 91, .5); padding-inline-start: clamp(1rem, 3vw, 2rem); }

/* Suits / does not suit, side by side, so the contrast is the point. */
.prov-fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); }
.prov-fit-col { padding: clamp(1.2rem, 2.5vw, 1.8rem); border-radius: 16px; background: #fffdfa; border: 1px solid rgba(198, 161, 91, .28); }
.prov-fit-col.is-no { background: var(--paper-warm); border-color: rgba(150, 158, 214, .28); }
.prov-fit-col.is-no .prov-list li::before { background: rgba(120, 126, 170, .8); }
@media (max-width: 760px) { .prov-fit { grid-template-columns: 1fr; } }

/* Course cards on a provider page — taller and more deliberate than the
   category grid, because here they are the thing being chosen between. */
section.prov-courses { background: var(--bg-deep); padding-block: clamp(2.4rem, 5vw, 3.6rem); }
section.prov-courses h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  color: #fff;
  text-align: center;
  margin: 0 0 clamp(1.4rem, 3vw, 2rem);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.prov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.prov-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fffdfa;
  border: 1px solid rgba(198, 161, 91, .3);
  text-decoration: none;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.prov-card:hover {
  transform: translateY(-4px);
  border-color: rgba(228, 205, 160, .85);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .32);
}
.prov-card-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-warm); }
.prov-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prov-card-body { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.2rem 1.2rem; flex: 1; }
.prov-card-kicker {
  font-size: .73rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-gold-text);
}
.prov-card-title {
  font-family: var(--font-editorial), serif;
  font-size: 1.22rem;
  line-height: 1.25;
  color: var(--ink-deep, #2F2A4D);
}
.prov-card-tagline { font-size: .93rem; line-height: 1.6; color: var(--text-on-light-secondary); }
.prov-card-foot {
  margin-block-start: auto;
  padding-block-start: .7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.prov-card-foot .cta { font-size: .9rem; font-weight: 700; color: var(--accent-gold-text); }
.prov-card-aff {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6b5220;
  background: rgba(198, 161, 91, .22);
  border-radius: 999px;
  padding: .22rem .55rem;
}

/* FAQ as disclosure widgets: visible to a reader, no schema chasing a rich
   result Google has restricted to health and government sites. */
.prov-faq details {
  border-block-end: 1px solid rgba(150, 158, 214, .25);
  padding: .9rem 0;
}
.prov-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.prov-faq summary::-webkit-details-marker { display: none; }
.prov-faq summary::after { content: '+'; color: var(--accent-gold-text); font-weight: 700; }
.prov-faq details[open] summary::after { content: '–'; }
.prov-faq details p { margin: .6rem 0 0; line-height: 1.7; color: var(--text-on-light-secondary); }

/* ============================================================
   KEEP READING — the two emphasised internal links, plus an image

   Gold, sized like a control rather than like body copy. A link that looks
   like a sentence gets read as a sentence; these need to look like an offer,
   because they are the site's main way of moving someone from one page to the
   next.
   ============================================================ */

.keep-reading {
  background: var(--paper-warm);
  padding-block: clamp(2rem, 4.5vw, 3.2rem);
}

.kr-inner {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
}
.kr-inner.has-img { grid-template-columns: minmax(0, 380px) 1fr; }
@media (max-width: 760px) {
  .kr-inner.has-img { grid-template-columns: 1fr; }
}

.kr-img {
  margin: 0;
  line-height: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(20, 16, 40, .14);
}
.kr-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

.kr-body h2 {
  font-family: var(--font-editorial), serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  margin: 0 0 .9rem;
}

.kr-links { list-style: none; margin: 0; padding: 0; }
.kr-links li { margin: 0 0 .55rem; }
.kr-links li:last-child { margin-bottom: 0; }

.kr-links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(198, 161, 91, .5);
  background: rgba(198, 161, 91, .1);
  color: var(--accent-gold-text);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.kr-links a:hover {
  background: rgba(198, 161, 91, .22);
  border-color: rgba(176, 141, 87, .9);
  transform: translateY(-1px);
}
[dir="rtl"] .kr-links .arrow-inline { transform: scaleX(-1); }

/* ============================================================
   THE WORDMARK ON A PHONE

   "QUANTUM HEALING FIELD" is twenty-one characters with letter-spacing on a
   single nowrap line. On a 360px screen, after the symbol, the language
   switcher and the menu button have taken their share, there is roughly 150px
   left — so the ellipsis ate most of the name and some phones showed almost
   nothing at all.

   Two lines instead of one truncated line. The name is the one thing in the
   header that must be readable.
   ============================================================ */

@media (max-width: 860px) {
  .site-header .brand .wordmark b {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: .66rem;
    letter-spacing: .03em;
    line-height: 1.12;
    /* Two lines is the whole name; a third would mean something is wrong. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .site-header .brand { gap: .45rem; }
  .site-header .brand svg { width: 30px; height: 30px; }
}

/* Very narrow phones: give the name the space rather than the chrome. */
@media (max-width: 380px) {
  .site-header .brand .wordmark b { font-size: .62rem; letter-spacing: .01em; }
  .site-header .brand svg { width: 24px; height: 24px; }
}



/* The old wordmark styling is gone; anything left referencing it should not
   reserve space. */
/* Was: hide the wordmark entirely. It was written when the lockup was a single
   image and the text was part of the picture. With the name as text again this
   rule hides the site's own name — which is exactly what it did. */





/* The home page renders the logo in a span rather than a link, so the brand
   styles must not assume an anchor. */
.site-header span.brand { cursor: default; }


.site-header .brand { padding-block: .2rem; }


/* ============================================================
   THE BRAND LOCKUP

   The theme's mark plus the site name as text. The name wraps to two lines on
   a phone rather than being truncated — a single nowrap line is what used to
   leave it cut in half between the language switcher and the menu button.
   ============================================================ */

.site-header .brand,
.site-footer .brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  text-decoration: none;
}
.site-header span.brand { cursor: default; }

.brand-mark { flex: none; width: 30px; height: 30px; display: block; }


.site-header .brand .wordmark b {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #2F2A4D;
  white-space: normal;
}
.site-header .brand .wordmark > span { display: none; }

@media (min-width: 900px) {
  .brand-mark { width: 52px; height: 52px; }
  .site-header .brand .wordmark b { font-size: 1.12rem; letter-spacing: .1em; }
  .site-header .brand .wordmark > span {
    display: block;
    font-size: .62rem;
    letter-spacing: .08em;
    color: #726A7A;
  }
}

/* Hebrew is a wider, heavier script at the same point size, so it is set a
   touch smaller and looser to occupy the same space as the Latin name. */
[dir="rtl"] .site-header .brand .wordmark b { letter-spacing: 0; font-size: .8rem; }
@media (min-width: 900px) {
  [dir="rtl"] .site-header .brand .wordmark b { font-size: 1.24rem; }
}

@media (max-width: 380px) {
  .brand-mark { width: 26px; height: 26px; }
  .site-header .brand .wordmark b { font-size: .64rem; letter-spacing: .02em; }
}

/* Footer: same lockup on the dark band. */
.site-footer .brand-mark { width: 52px; height: 52px; }
.site-footer .wordmark b {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: #F3EFE6;
}

/* ============================================================
   THE CTA IN THE MOBILE MENU

   It inherits .btn, which is sized for a page — full body-size type and
   generous padding. Inside a dropdown it came out heavier than the menu links
   above it and dominated the panel, when it should read as the last item in
   the list rather than as a banner.
   ============================================================ */

.mobile-menu .mobile-cta {
  font-size: .88rem;
  padding: .6rem 1.2rem;
  margin-top: .85rem;
  align-self: center;
  width: auto;
}

@media (max-width: 380px) {
  .mobile-menu .mobile-cta { font-size: .82rem; padding: .55rem 1.05rem; }
}

/* ============================================================
   THE MOBILE HEADER BAR

   Three things share a phone's width: the lockup, the language switcher and
   the menu button. The lockup is the one that must stay readable, and it is
   the one that loses, because it is the only flexible item — so it ends up
   squeezed to three clipped lines while the others keep their full size.

   So the brand is given a floor it cannot shrink past, and the chrome beside
   it is made compact rather than the name being made smaller.
   ============================================================ */

@media (max-width: 1000px) {
  /* Stated again at this specificity: the page-level CTA belongs in the menu
     on a phone, not in the bar. It is repeated in the dropdown. */
  .site-header .header-cta { display: none; }

  .site-header { gap: .5rem; padding-inline: .8rem; }

  .site-header .brand {
    flex: 1 1 auto;
    min-width: 8.5rem;   /* below this the name starts breaking badly */
  }
  .site-header .header-actions { flex: 0 0 auto; gap: .3rem; }

  .lang-switch { padding: 1px; gap: 1px; }
  .lang-switch a { padding: .26rem .42rem; font-size: .74rem; }
  /* The flag emoji is decoration and the widest part of each option. */
  .lang-switch a img, .lang-switch .flag { display: none; }

  .nav-toggle { padding: .4rem; }
}

@media (max-width: 400px) {
  .site-header { gap: .35rem; padding-inline: .65rem; }
  .site-header .brand { min-width: 7.5rem; }
  .lang-switch a { padding: .22rem .36rem; font-size: .7rem; }
}


/* ============================================================
   THE HERO MEDIA LAYER

   This is the element that actually clips. It carries `overflow: hidden`, so
   however well the video is sized, it can only show where this box reaches —
   and a black band down one edge is this box falling short, not the video.

   Restated here at the end of the stylesheet so nothing earlier can leave it
   smaller than the section it belongs to.
   ============================================================ */

.hero .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.hero .hero-media #fieldCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ============================================================
   THE HERO VIDEO

   `object-fit: cover` on an `inset: 0` element is the textbook way to fill a
   hero, and it was already in place — yet a black band sat down the left edge
   on desktop while the phone was fine. That pattern means the element is
   sizing against something other than the section: a containing block created
   further up, a rounding difference, or a scrollbar counted on one axis and
   not the other.

   Rather than hunt that, the video is centred on its own midpoint and told to
   be at least as large as the viewport in both directions. It no longer
   depends on its parent's box being exactly right, so it cannot leave a gap
   whatever the ancestors do.
   ============================================================ */

.hero-media .hero-video {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  /* Big enough to cover the section however the parent measures, and the
     viewport as a fallback for the same reason. */
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.hero-media .hero-video.ready { opacity: 1; }

/* RTL flips the inline axis, so the translate has to flip with it or the
   video lands half a screen to the side on Hebrew pages. */
[dir="rtl"] .hero-media .hero-video { transform: translate(50%, -50%); }

/* The free-entry band. Marked out from the editorial sections around it,
   because it is the one thing on the page a reader can act on for nothing. */
.prov-free { background: var(--paper-warm); }
.prov-free .wrap {
  border-inline-start: 3px solid var(--accent-gold-text);
  padding-inline-start: clamp(1rem, 3vw, 2rem);
}
.prov-free-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin-block-start: 1.2rem;
}
.prov-free-note { font-size: .86rem; color: var(--text-on-light-secondary); }

/* Dates in the at-a-glance table: one per line, so five sessions read as a
   list rather than as a run-on sentence. */
.fact-date { display: block; }
.fact-date + .fact-date { margin-block-start: .15rem; }

/* ============================================================
   PROVIDER PAGE — DATES AND COURSE CARDS

   The dates arrived sized like a page of their own: a full events listing at
   the top of a provider page, in its own palette, dwarfing the writing under
   it. Here it is a panel that introduces the page rather than competing with
   it — the same block, at the weight this context can carry.
   ============================================================ */

.prov-free .events-band { padding-block: 0; background: none; }
.prov-free .section-head { margin-block-end: .9rem; }
.prov-free .section-head h2 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.prov-free .section-sub { font-size: .95rem; }

.prov-free .event-item {
  padding: .65rem .85rem;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid rgba(47, 42, 77, .09);
  box-shadow: none;
}
.prov-free .event-item + .event-item { margin-block-start: .5rem; }
.prov-free .event-date { width: 46px; padding: .3rem .25rem; border-radius: 8px; }
.prov-free .event-day { font-size: 1.05rem; }
.prov-free .event-month { font-size: .62rem; }
.prov-free .event-title { font-size: .95rem; }
.prov-free .event-meta { font-size: .84rem; }
.prov-free .event-cta { margin-block-start: 1rem; }

/*
   The course cards filled a screen at full width, and with the same artwork
   on both they read as a duplicate rather than a choice. Narrower, on the
   page's own paper.
*/
.prov-courses .prov-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 60rem;
  margin-inline: auto;
  gap: 1rem;
}
.prov-courses .prov-grid img { aspect-ratio: 16 / 10; object-fit: cover; }
.prov-courses .prov-grid h3 { font-size: 1rem; }
.prov-courses .prov-grid p { font-size: .88rem; }

/* ============================================================
   PROVIDER PANELS ON THE FIELD PICKS HUB

   With a handful of picks, a grid of category boxes describes the filing
   system rather than what is in it. At this size the reader is choosing
   between teachers, so the teachers get panels of their own — wider than a
   category card, with room for who they are and whether there is a free way
   in.
   ============================================================ */

.prov-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.1rem;
  margin-block: 1.2rem 2.4rem;
}

.prov-panel {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(47, 42, 77, .1);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.prov-panel:hover,
.prov-panel:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(47, 42, 77, .1);
}

.prov-panel-img { display: block; line-height: 0; }
.prov-panel-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.prov-panel-body { display: block; padding: 1rem 1.15rem 1.15rem; }
.prov-panel-body h3 { margin: 0 0 .35rem; font-size: 1.12rem; }
.prov-panel-body p {
  margin: 0 0 .6rem;
  font-size: .92rem;
  color: var(--text-on-light-secondary);
}

.prov-panel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--text-on-light-secondary);
}
.prov-panel-free {
  padding: .12rem .5rem;
  border-radius: 999px;
  background: rgba(198, 161, 91, .16);
  color: var(--accent-gold-text);
}

/* ============================================================
   BREADCRUMBS

   Sits between the fixed header and the page's hero. Quiet by design: it is
   orientation, not navigation people came for, and on a page whose hero is a
   full-bleed image it must not compete with it.
   ============================================================ */

.crumbs {
  max-width: var(--wrap, 72rem);
  margin-inline: auto;
  padding: .55rem clamp(1rem, 4vw, 2rem) 0;
  font-size: .82rem;
  color: var(--text-on-light-secondary, #6F6880);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: .5rem; }

/* The separator is generated, so it is never read aloud as a character and
   never copied when someone selects the text. */
.crumbs li + li::before {
  content: "›";
  opacity: .5;
}
[dir="rtl"] .crumbs li + li::before { content: "‹"; }

.crumbs a { color: inherit; text-decoration: none; border-block-end: 1px solid transparent; }
.crumbs a:hover,
.crumbs a:focus-visible { color: var(--ink-deep, #2F2A4D); border-block-end-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--ink-deep, #2F2A4D); }

/* A dark hero directly below reads better without a light strip above it. */
@media (max-width: 600px) {
  .crumbs { font-size: .76rem; padding-block-start: .45rem; }
}

/* ============================================================
   TRAINING BEHIND A SESSION

   A quiet block, not a credentials wall. It answers "who is this person to be
   offering this" for someone already reading, and then gets out of the way —
   which is why it is typographic rather than card-based, and why the full list
   lives on its own page.
   ============================================================ */

.sess-training {
  background: var(--paper-warm, #F2EAE0);
  padding-block: clamp(2rem, 5vw, 3.25rem);
}
.sess-training h2 { margin-block-end: .35rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.sess-training-lead {
  margin-block: 0 1.4rem;
  font-size: .92rem;
  color: var(--text-on-light-secondary, #6F6880);
}

.sess-training-list { margin: 0; padding: 0; list-style: none; }
.sess-training-list > li {
  padding-block: 1rem;
  border-block-start: 1px solid rgba(47, 42, 77, .1);
}
.sess-training-list > li:first-child { border-block-start: 0; padding-block-start: 0; }
.sess-training-list h3 { margin: 0 0 .2rem; font-size: 1.02rem; }

.sess-training-meta {
  margin: 0 0 .45rem;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--accent-gold-text, #8A6F36);
}
.sess-training-list p { margin: 0 0 .4rem; font-size: .94rem; }

/* The scope note is the one line that must not be skimmed past, so it is set
   apart rather than blended into the description above it. */
.sess-training-note {
  margin-block-start: .5rem;
  padding-inline-start: .7rem;
  border-inline-start: 2px solid rgba(138, 111, 54, .45);
  font-size: .88rem;
  color: var(--text-on-light-secondary, #6F6880);
}

.sess-training-all { margin-block-start: 1.3rem; font-size: .92rem; }
.sess-training-all a { color: var(--accent-gold-text, #8A6F36); text-decoration: none; }
.sess-training-all a:hover { text-decoration: underline; }

/* ============================================================
   WHO A SESSION SUITS

   Two columns that carry equal weight. The "something else" side is
   deliberately not styled as a warning — it is not a disclaimer, it is the
   other half of an honest answer, and making it look like a caution box would
   turn useful guidance into fine print people skip.
   ============================================================ */

.sess-fit { padding-block: clamp(2rem, 5vw, 3.25rem); }
.sess-fit-cols {
  display: grid;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .sess-fit-cols { grid-template-columns: 1fr 1fr; }
}

.sess-fit-col h2 {
  font-size: clamp(1.1rem, 2.3vw, 1.35rem);
  margin-block: 0 .8rem;
  padding-block-end: .5rem;
  border-block-end: 1px solid rgba(47, 42, 77, .12);
}
.sess-fit-col ul { margin: 0; padding: 0; list-style: none; }
.sess-fit-col li {
  position: relative;
  padding-inline-start: 1.5rem;
  margin-block-end: .7rem;
  font-size: .96rem;
  line-height: 1.6;
}
.sess-fit-col li::before {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  font-weight: 700;
}
.sess-fit-col.is-yes li::before { content: "→"; color: var(--accent-gold-text, #8A6F36); }
/* An arrow pointing away, not a cross: this side is a redirection, not a refusal. */
.sess-fit-col.is-no li::before { content: "↗"; color: #6F6880; }
[dir="rtl"] .sess-fit-col.is-yes li::before { content: "←"; }
[dir="rtl"] .sess-fit-col.is-no li::before { content: "↖"; }

/* ============================================================
   WHERE TO GO NEXT, FROM A SESSION

   Two cards at most: the Journal pillar that covers the subject, and the
   teacher to learn it from where that connection is real. Deliberately not a
   rail of six — a page that offers everything offers nothing, and these are
   editorial choices rather than an algorithm's guesses.
   ============================================================ */

.sess-graph { padding-block: clamp(2rem, 5vw, 3.25rem); background: var(--paper-warm, #F2EAE0); }
.sess-graph-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  max-width: 56rem;
  margin-inline: auto;
}

.sess-graph-card {
  display: block;
  padding: 1.15rem 1.3rem 1.25rem;
  background: var(--paper, #F6F1E9);
  border: 1px solid rgba(47, 42, 77, .1);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sess-graph-card:hover,
.sess-graph-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(47, 42, 77, .09);
}
.sess-graph-card .eyebrow {
  display: block;
  margin-block-end: .3rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-gold-text, #8A6F36);
}
.sess-graph-card h3 { margin: 0 0 .4rem; font-size: 1.06rem; }
.sess-graph-card p {
  margin: 0 0 .7rem;
  font-size: .9rem;
  color: var(--text-on-light-secondary, #6F6880);
}
.sess-graph-card .cta { font-size: .88rem; color: var(--accent-gold-text, #8A6F36); }

/* Sessions listed on a provider page. */
.prov-session-list { margin: .6rem 0 0; padding: 0; list-style: none; }
.prov-session-list li { margin-block-end: .45rem; }
.prov-session-list a { color: var(--accent-gold-text, #8A6F36); }