/* The Architecture of 64. Scoped styles accompany the page through fluid navigation. */
.course-hero {padding:calc(72px + 3.8rem) 0 4.8rem}
.course-hero-grid {display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.course-hero h1 {font-size:clamp(3.2rem,6.3vw,5.6rem);line-height:1.02;letter-spacing:-.025em}
.course-hero h1 em {font-style:normal;color:var(--teal-mid)}
.course-hero .eyebrow {max-width:30em;line-height:1.8}
.course-subtitle {font-family:var(--serif);font-size:clamp(1.45rem,2.3vw,1.9rem);line-height:1.4;margin-top:1.7rem;max-width:23em;color:var(--ink-soft)}
.course-start {margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--sand);font-size:1rem;color:var(--teal)}
.course-start p+p {margin-top:.2rem;color:var(--stone)}
.course-cover {display:block;width:100%;aspect-ratio:2 / 3;max-width:390px;justify-self:end;border-radius:var(--radius);box-shadow:0 20px 50px #191d1c20}
.course-hero .photo.reveal {transition-duration:.8s}
.course-hero .photo.reveal img {transition-duration:.85s}
.course-columns {display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,7vw,7rem)}
.course-columns p:not(.eyebrow),.course-phases p {font-size:1.1rem;line-height:1.8}
.course-columns h2 {margin-bottom:1.2rem}
.course-columns p+p {margin-top:1rem}
.course-question {font-family:var(--serif);font-size:1.65rem!important;line-height:1.4!important;color:var(--teal)}
.course-invitation {padding-top:1rem}
.course-audience {border-left:1px solid var(--sand);padding-left:clamp(1.5rem,4vw,3.2rem)}
.course-journey {background:var(--paper-warm);padding:4.5rem 0}
.course-phases {list-style:none;margin-top:2.8rem}
.course-phases > li {display:grid;grid-template-columns:5.5rem 1fr;gap:2rem;padding:1.8rem 0;border-top:1px solid #b3a68e66}
.course-phases h3 {font-size:1.8rem;margin-bottom:.6rem}
.course-phases p {max-width:50em}
.course-number {font-family:var(--serif);font-size:2rem;color:var(--teal-mid)}
.course-note {font-size:.95rem;color:var(--stone);margin-top:1.3rem}
.course-benefits {list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2.3rem;margin-top:2rem}
.course-benefits li {border-top:1px solid var(--sand);padding-top:1.3rem}
.course-benefits h3 {font-size:1.5rem;margin-bottom:.6rem}
.course-benefits p {font-size:1.05rem;line-height:1.7}
.course-guide {padding-top:0}
.course-text-link {display:inline-block;margin-top:1.2rem;border-bottom:1px solid var(--sage);color:var(--teal)}
.course-registration {position:relative;z-index:3;background:var(--paper-warm);padding:4.5rem 0;text-align:center}
.course-registration-intro {margin-bottom:3rem;padding-bottom:2.7rem;border-bottom:1px solid var(--sand)}
.course-registration-intro h2 {margin-bottom:1rem}
.course-reg-lede {max-width:39em;margin:1rem auto 0;font-size:1.1rem}
.course-payments {display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:850px;margin:2.5rem auto 1.3rem}
.course-payment {background:var(--paper);padding:2rem;border:1px solid var(--sand);border-radius:var(--radius)}
.course-price {font-family:var(--serif);font-size:3.8rem;line-height:1.2;margin:.8rem 0 .4rem;color:var(--teal-deep)}
.course-payment .btn {margin-top:1.6rem;letter-spacing:.12em;font-size:.77rem}
.course-payment .btn:hover {letter-spacing:.12em}
.course-contact {margin-top:2rem}
.course-contact a {border-bottom:1px solid var(--sage)}
#journey,#registration {scroll-margin-top:90px}
@media(max-width:860px){
 .course-hero {padding-top:calc(72px + 2.5rem)}
 .course-hero-grid {gap:2rem;grid-template-columns:1.1fr .9fr}
 .course-columns {grid-template-columns:1fr;gap:2.5rem}
 .course-audience {padding-left:0;padding-top:2rem;border-left:0;border-top:1px solid var(--sand)}
 .course-benefits {grid-template-columns:1fr 1fr}
 .course-payments {gap:1rem}
 .course-payment {padding:1.5rem 1rem}
}
@media(max-width:600px){
 .course-hero-grid {grid-template-columns:1fr}
 .course-hero {padding-bottom:3rem}
 .course-hero h1 {font-size:clamp(3rem,11.5vw,4.2rem)}
 .course-cover {max-width:340px;justify-self:center;margin-top:1rem}
 .course-hero .btn {margin-top:1.6rem}
 .course-start {margin-top:1.6rem}
 .course-phases > li {grid-template-columns:3rem 1fr;gap:.8rem}
 .course-number {font-size:1.5rem}
 .course-phases h3 {font-size:1.6rem}
 .course-journey,.course-registration {padding:3rem 0}
 .course-payments {grid-template-columns:1fr}
 .course-benefits {gap:1.5rem}
 .course-benefits h3 {font-size:1.35rem}
}

.course-hero-actions {display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1.7rem}
.course-hero-actions .course-text-link {font-size:.95rem}

/* Concrete learning outcomes and a worked elemental example. */
.course-outcomes {padding-top:0;padding-bottom:3.5rem}
.course-outcome-list {display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem;list-style:none;margin-top:1.8rem}
.course-outcome-list li {position:relative;padding-left:1.4rem;font-size:1.1rem;line-height:1.7;max-width:34em}
.course-outcome-list li::before {content:'';position:absolute;left:0;top:.7em;width:6px;height:6px;border:1px solid var(--teal-mid);border-radius:50%}
.course-example {padding:0 0 3.5rem;background:transparent;scroll-margin-top:90px}
.course-example-grid {display:grid;grid-template-columns:180px 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.course-example-figure {color:var(--teal);display:flex;flex-direction:column;align-items:center;gap:.6rem}
.course-example-figure span {font-family:var(--serif);font-size:2.5rem}
.course-example-hex {width:112px;height:120px;overflow:visible}
.course-example h3 {font-size:1.8rem;margin-bottom:1.3rem}
.course-example p:not(.eyebrow):not(.course-note):not(.course-nuclear-chain) {font-size:1.1rem;line-height:1.8;max-width:46em;margin-top:.8rem}
.course-example a {border-bottom:1px solid var(--sage)}
.course-journey {background:transparent}
.course-phases p+p {margin-top:.8rem}
.course-topics {padding-top:0;padding-bottom:3.5rem}
.course-topic-list {display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,6vw,5rem);margin-top:2.2rem}
.course-topic-list>div {padding:1.5rem 0;border-top:1px solid var(--sand)}
.course-topic-list dt {font-family:var(--serif);font-size:1.65rem;font-weight:500;line-height:1.2;margin-bottom:.8rem}
.course-topic-list dd {font-size:1.08rem;line-height:1.8}
.course-included {padding-top:1rem}
@media(max-width:600px){
 .course-outcome-list,.course-topic-list {grid-template-columns:1fr}
 .course-example-grid {grid-template-columns:1fr;gap:1.7rem}
 .course-example-figure {flex-direction:row;justify-content:flex-start;gap:1.3rem}
 .course-example-hex {width:78px;height:84px}
 .course-example-figure span {font-size:2rem}
 .course-example,.course-outcomes {padding-bottom:2.5rem}
}

.course-example p.course-nuclear-chain {font-family:var(--serif);font-size:clamp(1.8rem,3.5vw,2.4rem);letter-spacing:.04em;color:var(--teal);margin:1rem 0}
.course-topic-list dd p+p {margin-top:.8rem}

.course-example .faq {margin-top:0}
.course-example .course-example-grid {padding:.6rem 0 1rem;align-items:start}
.course-example .course-example-figure {padding-top:.5rem}
@media(max-width:860px){
 .course-example-grid {grid-template-columns:1fr;gap:1.3rem}
 .course-example-figure {flex-direction:row;justify-content:flex-start;gap:1.3rem}
 .course-example-hex {width:78px;height:84px}
 .course-example-figure span {font-size:2rem}
}

/* Familiar symbols mark the page rhythm and make the course structure visible. */
.course-bindu {width:30px;height:30px;flex:none;color:var(--teal-mid)}
.course-section-heading {display:flex;align-items:center;gap:1rem}
.course-section-heading .course-bindu {width:28px;height:28px}
.course-trigrams {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1.4rem 1rem;list-style:none;margin:1.5rem 0 1.7rem;max-width:55rem}
.course-trigrams li {display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;padding:.2rem 0;color:var(--teal)}
.course-trigram {display:block;width:44px;height:28px}
.course-trigrams span {font-size:.9rem;line-height:1.4;color:var(--ink-soft)}
.course-small-hex {display:block;width:42px;height:48px;color:var(--teal-mid)}
.course-pair {margin:1.3rem 0 1.1rem}
.course-pair-figures {display:flex;align-items:center;gap:1.2rem}
.course-pair-figures>div,.course-cores>div {display:flex;flex-direction:column;align-items:center;gap:.4rem}
.course-pair-figures>div>span,.course-cores span {font-family:var(--serif);font-size:1.2rem;color:var(--teal)}
.course-pair-link {color:var(--sage);align-self:flex-start;margin-top:.6rem;font-size:1.5rem}
.course-pair figcaption {font-size:.85rem;color:var(--stone);margin-top:.45rem}
.course-cores {display:flex;gap:1.7rem;margin:1.3rem 0 1.1rem}
.course-symbol-divider {display:flex;justify-content:center;align-items:center;gap:1.3rem;max-width:16rem;margin:0 auto 2.2rem}
.course-symbol-divider>span {height:1px;flex:1;background:var(--sand)}
@media(max-width:1000px){
 .course-trigrams {grid-template-columns:repeat(4,minmax(0,1fr));max-width:35rem}
}
@media(max-width:600px){
 .course-section-heading {align-items:flex-start;gap:.8rem}
 .course-section-heading .course-bindu {width:24px;height:24px;margin-top:.3rem}
 .course-trigrams {gap:1.3rem .6rem}
 .course-trigram {width:38px;height:25px}
 .course-trigrams span {font-size:.85rem}
 .course-cores {gap:1.4rem}
}

/* Homepage invitation to the live course. */
.course-home-feature {padding-top:0}
.course-home-panel {position:relative;z-index:3;display:grid;grid-template-columns:148px 1fr;gap:clamp(1.5rem,4vw,3.2rem);align-items:center;padding:clamp(1.5rem,4vw,2.6rem);background:var(--paper-warm);border:1px solid var(--sand);border-radius:var(--radius)}
.course-home-cover {aspect-ratio:2 / 3;max-width:148px}
.course-home-panel .eyebrow {margin-bottom:.7rem}
.course-home-panel h2 {font-size:clamp(2rem,4vw,2.8rem)}
.course-home-description {max-width:46em;margin-top:1rem;font-size:1.1rem;line-height:1.75}
.course-home-meta {margin-top:.8rem;color:var(--teal);font-size:1rem}
.course-home-panel .btn {margin-top:1.3rem}
@media(max-width:600px){
 .course-home-panel {grid-template-columns:1fr;gap:1.4rem}
 .course-home-cover {max-width:120px}
}

/* The guide uses the same portrait and photo treatment as the About page. */
.course-guide-grid {display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.course-guide-photo {max-width:280px}
.course-guide-grid h2 {margin-bottom:1.2rem}
.course-guide-grid p:not(.eyebrow) {font-size:1.1rem;line-height:1.8;max-width:44em}
#guide {scroll-margin-top:100px}
@media(max-width:600px){
 .course-guide-grid {grid-template-columns:1fr;gap:1.7rem}
 .course-guide-photo {max-width:220px}
}

/* A symbol for each remaining topic, with space before the explanation. */
.course-topic-symbol {width:96px;height:64px;margin:1.2rem 0;color:var(--teal-mid)}
.course-topic-symbol svg {display:block;width:100%;height:100%}
/* Five included items arranged as three plus two, then stacked on smaller screens. */
.course-benefits {grid-template-columns:repeat(6,minmax(0,1fr))}
.course-benefits>li {grid-column:span 2}
.course-benefits>li:nth-last-child(-n+2) {grid-column:span 3}
/* Two payment choices in the site's paper and deep-teal finishes. */
.course-payments {gap:1.6rem;align-items:stretch;max-width:920px}
.course-payment {display:flex;flex-direction:column;align-items:flex-start;text-align:left;padding:2.3rem;border-radius:20px;border:1px solid var(--sand);box-shadow:0 12px 30px -22px #0f302e55,inset 0 0 0 5px #ffffff30}
.course-payment-symbol {display:flex;align-items:center;gap:.8rem;min-height:32px;margin-bottom:1.8rem;color:var(--teal-mid)}
.course-payment-symbol svg {width:30px;height:30px;flex:none}
.course-payment-plan .course-payment-symbol svg {width:64px}
.course-payment-symbol span {font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.course-payment h3 {font-size:1.6rem}
.course-payment .course-price {font-size:clamp(3.2rem,5.4vw,4.6rem);margin:1rem 0 .65rem;letter-spacing:-.03em}
.course-payment .course-payment-detail {font-size:1rem;line-height:1.7;margin-bottom:1.8rem}
.course-payment .btn {align-self:stretch;text-align:center;margin-top:auto;padding-left:1rem;padding-right:1rem}
.course-payment-full {background-color:var(--teal-deep);background-image:var(--washi-dark);background-size:var(--washi-size);color:var(--paper);border-color:var(--teal);box-shadow:0 14px 36px -22px #0f302e80,inset 0 0 0 5px #7fa59e16}
.course-payment-full h3,.course-payment-full .course-price {color:var(--paper)}
.course-payment-full .course-payment-symbol {color:var(--mist)}
.course-payment-full .course-payment-detail {color:var(--mist)}
.course-payment-full .btn {background:var(--paper);border-color:var(--paper);color:var(--teal-deep)}
.course-payment-full .btn:hover {background:var(--paper-warm);border-color:var(--paper-warm);color:var(--teal-deep)}
.course-payment-full .btn:focus-visible {outline-color:var(--sage)}
.course-payment-plan {background:linear-gradient(145deg,#fffaf0,var(--paper))}
@media(max-width:860px){
 .course-benefits {grid-template-columns:repeat(2,minmax(0,1fr))}
 .course-benefits>li,.course-benefits>li:nth-last-child(-n+2) {grid-column:auto}
 .course-benefits>li:last-child {grid-column:1 / -1}
 .course-payment {padding:1.7rem}
 .course-payment-symbol {align-items:flex-start;gap:.6rem}
}
@media(max-width:480px){
 .course-benefits {grid-template-columns:1fr}
 .course-payment {padding:1.8rem}
 .course-payment-symbol {align-items:center}
}

/* Colour follows the reading sections, using the site's paper and ink textures. */
body[data-page="course"] {--course-gold:#e5b77b;--course-gold-ink:#815a2c;--course-gold-paper:#eee4d2}
.course-hero h1 em {color:var(--course-gold-ink)}
.course-outcomes {
 position:relative;z-index:3;padding:clamp(3rem,6vw,4.5rem) 0;
 background-color:var(--teal-deep);background-image:var(--washi-dark);background-size:var(--washi-size);
 color:var(--paper);border-top:1px solid #e5b77b55;
}
.course-outcomes .course-bindu {color:var(--course-gold)}
.course-outcome-list {gap:1.3rem 3.5rem}
.course-outcome-list li {color:#e4e9e3}
.course-outcome-list li::before {border-color:var(--course-gold)}
.course-journey {
 padding:clamp(3.5rem,7vw,5.5rem) 0;
 background-color:var(--course-gold-paper);background-image:var(--washi-paper);
 border-bottom:1px solid #c5aa7b55;
}
.course-journey .eyebrow,.course-number {color:var(--course-gold-ink)}
.course-phases > li {border-color:#aa89554d}
.course-journey .course-trigrams {padding:1.5rem 0;border-top:1px solid #aa895533;border-bottom:1px solid #aa895533}
.course-topics {padding:clamp(3.5rem,7vw,5.5rem) 0}
.course-included {
 padding:clamp(3rem,6vw,4.5rem) 0;background-color:var(--course-gold-paper);background-image:var(--washi-paper);
 border-top:1px solid #c5aa7b55;border-bottom:1px solid #c5aa7b55;
}
.course-included h2,.course-included h3 {color:var(--teal-deep)}
.course-benefits li {border-color:#aa89554d}
.course-example {padding-top:3.5rem}
.course-registration {
 padding:clamp(3.5rem,7vw,5.5rem) 0;
 background-color:#172321;background-image:var(--washi-dark);background-size:var(--washi-size);
 color:var(--paper);border-top:1px solid #e5b77b55;
}
.course-registration .eyebrow,.course-registration .course-bindu {color:var(--course-gold)}
.course-registration-intro {border-color:#e5b77b40}
.course-registration .course-symbol-divider>span {background:#e5b77b55}
.course-registration-intro>p:not(.eyebrow),.course-registration .course-reg-lede {color:#d4ddd5}
.course-registration .course-note,.course-registration .course-contact {color:#c6d3cf}
.course-registration .course-contact a {color:var(--course-gold);border-color:#e5b77b80}
.course-registration a:focus-visible {outline-color:var(--course-gold)}
.course-registration .course-payment-full {border-color:#e5b77b88;box-shadow:0 14px 36px -22px #0009,inset 0 0 0 5px #e5b77b0b}
.course-registration .course-payment-full .course-payment-symbol {color:var(--course-gold)}
.course-registration .course-payment-full .btn {background:var(--course-gold);border-color:var(--course-gold);color:#172321}
.course-registration .course-payment-full .btn:hover {background:#f0cca0;border-color:#f0cca0}
.course-registration .course-payment-plan {
 color:var(--teal-deep);background-color:#dfbc85;
 background-image:var(--washi-paper),linear-gradient(145deg,#e9c894,#d3aa72);
 border-color:var(--course-gold);box-shadow:0 14px 36px -22px #0009,inset 0 0 0 5px #fffaf026;
}
.course-registration .course-payment-plan .course-payment-symbol {color:var(--teal-deep)}
.course-registration .course-payment-plan .course-payment-symbol circle[stroke] {fill:#dfbc85}
.course-registration .course-payment-plan .btn {background:var(--teal-deep);border-color:var(--teal-deep);color:var(--paper)}
.course-registration .course-payment-plan .btn:hover {background:var(--teal);border-color:var(--teal);color:var(--paper)}
.course-registration .course-payment-plan .btn:focus-visible {outline-color:var(--teal-deep)}
@media(max-width:600px){
 .course-outcome-list {gap:1.2rem}
 .course-example {padding-top:2.5rem}
}