/* 01 — Cover. Keep the authentic portrait, with separate illustrated depth layers. */
.hero { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(ellipse at 85% 65%, #f7dce4 0, #fcf1ef80 38%, transparent 67%), var(--paper); }
.hero-layout { position: relative; min-height: clamp(38.125rem, 52vw, 45.9375rem); padding-top: calc(var(--header-height) + 1.25rem); padding-bottom: 4.0625rem; display: flex; align-items: center; }
.hero-copy { position: relative; z-index: 4; width: 52%; align-self: flex-start; margin-top: 1.125rem; transform: translate3d(0, var(--hero-copy-y, 0), 0); }
.hero-kicker { display: inline-flex; align-items: center; gap: 0.875rem; padding: 0.25rem 0.875rem; margin-bottom: 0.875rem; border: 0.0625rem solid #df9fb7; border-radius: 6.1875rem; color: #a75b78; font-size: 0.625rem; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; font-weight: 700; }
.hero-kicker > span { width: 1.625rem; height: 0.0625rem; background: currentColor; }
.hero h1 { font-size: clamp(3.75rem, 6.45vw, 5.6875rem); line-height: .94; letter-spacing: -.055em; white-space: nowrap; }
.hero h1 em { letter-spacing: -.045em; }
.hero-lead { margin-top: 1.5rem; max-width: 30.3125rem; color: #786b73; font-size: 1rem; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.875rem; margin-top: 1.375rem; }
.hero-actions .button:first-child { min-width: 12.8125rem; }
.hero-actions .button--outline { gap: 1rem; padding-inline: 1.1875rem; font-size: 0.75rem; }
.hero-visual { position: absolute; z-index: 2; right: -4%; top: 4.75rem; bottom: 0; width: 59%; }
.hero-visual-depth { position: absolute; inset: 0; transform: translate3d(0, var(--hero-visual-y, 0), 0); }
.portrait-backdrop { position: absolute; inset: 7% 2% 4% 21%; border-radius: 49% 49% 0.5625rem 0.5625rem; background: linear-gradient(125deg, #f2d1dd, #e7b7ca); transform: translate3d(var(--visual-x, 0rem), calc(var(--visual-y, 0rem) + var(--hero-backdrop-y, 0rem)), 0); }
.portrait-backdrop::after { content: ""; position: absolute; inset: 1.125rem; border: 0.0625rem solid #fffaf750; border-radius: inherit; }
.hero-portrait { position: absolute; z-index: 3; right: 0; bottom: 0.5625rem; width: 96%; max-width: none; height: 100%; object-fit: contain; object-position: center bottom; transform: translate3d(0, var(--hero-portrait-y, 0), 0) scale(var(--hero-portrait-scale, 1)); transform-origin: center bottom; filter: drop-shadow(0 0.75rem 0.8125rem #68213d0c); }
.hero-still-life { position: absolute; z-index: 1; bottom: 7%; left: -1%; width: 39%; transform: rotate(-3deg); opacity: .83; filter: drop-shadow(0 0.5625rem 0.6875rem #68213d0c); }
.hero-open-book { position: absolute; z-index: 5; width: 48%; right: -3%; bottom: -1%; transform: rotate(-7deg); filter: drop-shadow(0 0.5rem 0.5rem #68213d15); }
.portrait-caption { position: absolute; z-index: 2; left: 6%; top: 17%; color: #c77997; font: 400 clamp(1.8125rem, 3.2vw, 2.875rem)/.98 var(--font-hand); text-align: center; transform: translate3d(0, var(--hero-caption-y, 0), 0) rotate(-12deg); }
.hero-moon { position: absolute; width: 3.875rem; z-index: 5; top: 3%; right: 0; transform: translate3d(0, var(--hero-moon-y, 0), 0) rotate(var(--hero-moon-rotate, -14deg)); }
.hero-stamp { position: absolute; z-index: 4; top: 48%; right: -3%; width: 6.625rem; height: 6.625rem; display: grid; place-content: center; gap: 0.4375rem; text-align: center; border-radius: 50%; background: #fffdfa; color: var(--wine); box-shadow: 0 0.3125rem 1.0625rem #68213d05; }
.hero-stamp > span { font: 600 2.6875rem/.85 var(--font-display); letter-spacing: -.05em; }
.hero-stamp small { font-size: 0.6875rem; line-height: 1.25; color: #715c66; }

/* 02 — Teacher, figures and education. */
.about { padding-bottom: 1.5rem; background: radial-gradient(ellipse at 85% 55%, #f9e7e963, transparent 45%), var(--paper); }
.about-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(21.25rem, 1fr); align-items: end; gap: 2.5rem; }
.about .eyebrow { margin-bottom: 1.625rem; }
.about h2 { font-size: clamp(2.0625rem, 3.55vw, 3rem); white-space: nowrap; }
.about-tagline { margin-top: 0.625rem; font: italic 500 clamp(1.5rem, 2.55vw, 2rem)/1.12 var(--font-display); color: var(--rose); }
.about-tagline-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; align-items: center; gap: 1rem; }
.about-margin-note, .education-kitten { width: 100%; color: var(--rose); stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.education-kitten { position: absolute; right: 6.75rem; top: 44%; width: clamp(7rem, 14vw, 10.75rem); }
.about-text { margin-top: 1.75rem; max-width: 40.625rem; color: #70646a; font-size: 1rem; line-height: 1.65; }
.about-text p + p { margin-top: 0.9375rem; }
.about-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.125rem; margin-top: 1.875rem; }
.about-numbers > div { min-width: 0; padding: 1.375rem 1.625rem; border: 0.0625rem solid #e7d9d4; border-radius: 1rem; background: #fffdfa65; box-shadow: 0 0.0625rem 0.125rem #68213d03; }
.about-numbers dt { color: var(--wine); font: 500 3.6875rem/.95 var(--font-display); letter-spacing: -.05em; white-space: nowrap; }
.about-numbers dd { margin-top: 0.75rem; color: #75676f; font-size: 0.8125rem; line-height: 1.45; }
.about-education { align-self: end; padding: 1.125rem 1.75rem 0; margin-top: 0; border: 0.0625rem solid #f3dde2; border-radius: 1.375rem; background: linear-gradient(125deg, #fdf2ef, #fbeaec); }
.education-heading { position: relative; display: flex; justify-content: space-between; align-items: flex-start; min-height: 10rem; padding-top: 0.5625rem; gap: 1rem; overflow: hidden; }
.education-heading .mini-label { font-size: 0.6875rem; }
.about-avatar { align-self: end; width: 7rem; margin: -0.1875rem 0.1875rem -0.0625rem 0; flex: 0 0 7rem; }
.about-avatar--photo { height: 9.5rem; object-fit: contain; object-position: center bottom; }
.education-list { list-style: none; padding: 0; }
.education-list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.9375rem; padding: 1.5625rem 0; border-top: 0.0625rem solid #efd8dd; }
.education-list li > span { padding-top: 0.25rem; font: 500 0.9375rem/1 var(--font-display); color: var(--rose); }
.education-list h3 { font-size: 1.4375rem; line-height: 1.1; font-weight: 600; letter-spacing: -.025em; }
.education-list p { margin-top: 0.5rem; color: #8c7b81; font-size: 0.75rem; line-height: 1.65; }

/* 04 — Four equal programs, in a single shelf. */
.courses { overflow: clip; padding-block: 1.5rem 1.25rem; }
.courses .section-heading--split { margin-bottom: 2rem; }
.course-carousel { --course-edge: max(2.25rem, calc((100vw - 1.5rem - 81.25rem) / 2)); }
.course-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100vw - 1.5rem - var(--course-edge) * 2 - 3.75rem) / 4); gap: 1.25rem; overflow-x: auto; overflow-y: hidden; padding: 1.5rem var(--course-edge) 2.75rem; margin-block: -1.5rem -1.75rem; scroll-padding-inline: var(--course-edge); scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; }
.course-grid::-webkit-scrollbar { display: none; }
.course-grid.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.course-grid:focus-visible { outline-offset: -0.125rem; }
.course-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 1.375rem 1.5rem 1.0625rem; min-height: 29.375rem; border: 0.0625rem solid #ecdadd; border-radius: 1rem; background: #fffdfa98; box-shadow: 0 0.4375rem 1.125rem #78364505; scroll-snap-align: start; transition: border-color 300ms, box-shadow 300ms; }
.course-topline { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; }
.course-index { color: var(--rose); font: italic 600 1.3125rem/1 var(--font-display); }
.course-tag { padding: 0.1875rem 0.5rem; border: 0.0625rem solid #e8bdcb; border-radius: 6.1875rem; color: #a96b82; font-size: 0.5rem; line-height: 1.2; text-transform: uppercase; font-weight: 700; white-space: nowrap; }
.course-art { width: 100%; height: 6.3125rem; object-fit: contain; margin-block: 0.5rem 0.125rem; }
.course-card h3 { font-size: clamp(1.6875rem, 2.5vw, 2.3125rem); line-height: .97; min-height: 2.05em; letter-spacing: -.045em; }
.course-card > p { color: var(--muted); font-size: 0.8125rem; line-height: 1.55; margin-top: 0.8125rem; }
.course-card ul { display: grid; gap: 0.375rem; margin: 1.25rem 0 1.0625rem; padding: 0; list-style: none; color: var(--muted); font-size: 0.6875rem; line-height: 1.45; }
.course-card li { display: flex; gap: 0.5625rem; align-items: baseline; }
.course-card li::before { content: "✓"; flex-shrink: 0; color: var(--rose); font-size: 0.9375rem; line-height: 1; }
.course-link { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.75rem; border-top: 0.0625rem solid var(--line); color: var(--wine); font-size: 0.75rem; line-height: 1.3; font-weight: 700; text-decoration: none; }
.course-link > span { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border: 0.0625rem solid #dfb6c5; border-radius: 50%; line-height: 0; flex-shrink: 0; transition: color 250ms, background-color 250ms, border-color 250ms; }
.course-link > span svg { width: 1.125rem; height: 1.125rem; overflow: visible; }
.course-carousel-footer { display: none; align-items: center; justify-content: space-between; margin-top: 1rem; gap: 1rem; }
.course-counter { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.course-carousel-controls { display: flex; gap: 0.625rem; }
.course-carousel-controls button { width: 2.75rem; height: 2.75rem; padding: 0; border: 0.0625rem solid #dec2cb; border-radius: 50%; color: var(--wine); font-size: 1.375rem; background: transparent; }
.course-carousel-controls button:disabled { opacity: .28; cursor: default; }
@media (hover: hover) and (pointer: fine) {
    .course-card:hover { border-color: #d09aaf; box-shadow: 0 0.75rem 1.75rem #68213d0d; }
    .course-link:hover > span { color: #fff; background: var(--wine); }
    .course-carousel-controls button:hover:not(:disabled) { background: #f5e3e8; }
}

/* 06 — Guide copy and illustration keep separate, non-overlapping columns. */
.materials { padding-top: 2rem; }
.guide-banner { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 2rem; overflow: hidden; min-height: 21.875rem; padding: 2.375rem 2.75rem; border: 0.0625rem solid #9c6c7d; border-radius: 1.625rem; background: radial-gradient(ellipse at 75% 40%, #744058, #53223b 57%, #461c31); color: #fff9f0; }
.guide-banner::before, .guide-banner::after { content: ""; position: absolute; z-index: -1; width: 31.875rem; height: 31.875rem; border: 0.0625rem solid #ffffff08; border-radius: 50%; top: -17.5rem; right: 5rem; }
.guide-banner::after { top: 10rem; right: -13.75rem; }
.guide-copy { position: relative; z-index: 2; min-width: 0; }
.guide-copy h2 { font-size: clamp(2.75rem, 4.9vw, 4.1875rem); color: #fff7e9; }
.guide-copy h2 em { color: #e3a0ba; }
.guide-copy > p { color: #f7e9e4db; margin-top: 1.5rem; margin-bottom: 1.375rem; font-size: 0.9375rem; line-height: 1.6; }
.guide-copy .button { min-width: 15.25rem; }
.guide-copy .button-arrow { border-left: 0.0625rem solid #d2adb8; padding-left: 1.375rem; }
.guide-visual { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.guide-art { position: relative; z-index: 1; width: 100%; height: 17rem; }
.guide-art img { width: 100%; height: 100%; object-fit: contain; transform: translate3d(0, clamp(-0.5rem, var(--parallax-y, 0rem), 0.5rem), 0) rotate(-3deg); }
.guide-note { position: relative; z-index: 3; align-self: end; margin-right: 1rem; color: #ddb4c5; font-size: 1.4375rem; text-align: center; transform: rotate(-6deg); }
.guide-note span { display: inline-block; font-size: 1.5rem; margin-left: 0.5rem; }
.follow-strip { display: grid; grid-template-columns: minmax(0, 1.5fr) 1fr 1fr; gap: 1.375rem; align-items: stretch; }
.follow-intro { align-self: center; padding-right: 1.5625rem; }
.follow-intro .eyebrow { margin-bottom: 1.375rem; }
.follow-intro h2 { font-size: 2.6875rem; }
.follow-intro > p:last-child { margin-top: 0.875rem; color: var(--muted); font-size: 0.875rem; max-width: 24.375rem; }
.follow-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 12rem; padding: 1.5625rem; border: 0.0625rem solid #eedfd8; border-radius: 1.4375rem; background: #fffdfa50; text-decoration: none; text-align: center; transition: background 250ms, transform 300ms; }
.follow-card svg { color: #954264; width: 2.625rem; height: 2.625rem; }
.follow-card strong { font-size: 1.0625rem; font-weight: 500; color: #765d68; }
.follow-card > span { margin-top: -0.3125rem; color: #a08a93; font-size: 0.75rem; }

/* 07 — Questions and subscriptions have distinct destinations and labels. */
.socials { margin: 0; background: #f5e3e8; border-radius: 1.25rem; }
.social-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(21.25rem, 1fr); gap: 5rem; align-items: center; margin-top: 2rem; padding-top: 2rem; border-top: 0.0625rem solid #dfc5ce; }
.social-question-intro { display: grid; grid-template-columns: minmax(0, 1fr) 7.75rem; align-items: center; column-gap: 1.75rem; }
.social-question-intro > p { color: #8c7380; font-size: 0.9375rem; line-height: 1.65; }
.heart-location { grid-column: 2; width: 7.75rem; transform: rotate(6deg); filter: drop-shadow(0 0.6875rem 0.75rem #68213d12); }
.social-group h3 { margin-bottom: 0.5625rem; color: #a05b75; font: 700 0.625rem/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.social-row { display: grid; grid-template-columns: 3.0625rem minmax(0, 1fr) 1.5rem; gap: 1.125rem; align-items: center; padding-block: 0.9375rem; border-top: 0.0625rem solid #dfc5ce; text-decoration: none; }
.social-row:last-child { border-bottom: 0.0625rem solid #dfc5ce; }
.social-icon { display: grid; place-items: center; width: 3.0625rem; height: 3.0625rem; border: 0.0625rem solid #ddbcca; border-radius: 50%; color: #88425f; background: #fffdfa; }
.social-icon svg { width: 1.375rem; height: 1.375rem; }
.social-row strong { display: block; font: 600 1.75rem/1.15 var(--font-display); color: var(--wine-deep); letter-spacing: -.025em; }
.social-row small { display: block; margin-top: 0.3125rem; color: #a18b95; font-size: 0.75rem; line-height: 1.5; }
.social-arrow { color: #9c5774; font-size: 1.5625rem; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .social-row:hover .social-arrow { transform: translate(0.1875rem, -0.1875rem); }
    .follow-card:hover { background: #f8e9ed; transform: translateY(-0.1875rem); }
}

/* 08 — A cinematic study desk closes the page. */
.final-section { padding-top: 1.625rem; background: var(--paper); }
.final-banner { position: relative; isolation: isolate; min-height: 21.875rem; overflow: hidden; border: 0.0625rem solid #a7818e; border-radius: 1.375rem 1.375rem 0 0; background: #472235 url("../images/reference/final-study-reference.png") center / calc(100% + 1.875rem) calc(100% + 1.75rem) no-repeat; color: #fff8ef; }
.final-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #482034 0%, #482034 49%, #482034dd 51%, transparent 62%); }
.final-content { position: relative; padding-block: 1.875rem; }
.final-content .eyebrow { margin-bottom: 1.125rem; }
.final-content h2 { color: #fff8ef; font-size: clamp(2.6875rem, 4.2vw, 3.75rem); }
.final-content h2 em { color: #df91af; }
.final-content > p:not(.eyebrow) { margin-top: 1.25rem; max-width: 40.625rem; color: #f3dfe4; font-size: 0.875rem; line-height: 1.65; }
.final-content .button { min-width: 15.625rem; min-height: 3.25rem; margin-top: 1.375rem; }
.final-note { display: none; }
.site-footer { padding-block: 1.375rem 0.5rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.25rem; color: #a08793; font-size: 0.6875rem; }
.footer-inner .brand { font-size: 1.6875rem; }
.footer-inner > a:not(.brand) { min-height: 2.5rem; display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.back-top > span { font-size: 1.3125rem; }