/**
 * Home page — the cinematic build: preloader, custom cursor, signature
 * scroll-drawn thread, hero, "the living record" 3D book, the wall of
 * people, lessons accordion, journal excerpt, and the closing chapter CTA.
 * Animation is driven by assets/js/home-cinematic.js (GSAP + ScrollTrigger)
 * and assets/js/journal-3d.js (self-hosted Three.js); this file only
 * defines the visual states those scripts read from and write to.
 */

/* [data-reveal] elements on this page are driven by a continuous
   ScrollTrigger scrub (home-cinematic.js sets opacity/transform every
   frame), so the CSS transition from base.css's shared .reveal rule would
   fight it — cancel it here. The opacity:0/translateY starting state from
   that shared rule is kept as the pre-JS fallback. */
[data-reveal] { transition: none; }

/* Scroll is locked (via a body class set server-side in inc/setup.php) until
   the preloader is dismissed, so there's no flash of scrollable content
   before JS runs. home-cinematic.js removes this class on dismiss. */
body.has-preloader {
	overflow: hidden;
	height: 100%;
}

/* Home page nav/hero use the same shared tokens and .brand/.navlink/.navcta
   markup as every other template (see base.css) — no home-specific token
   or nav overrides here, matching _reference-source/index.html exactly. */

/* Caveat — the --hand script font used by the hero annotations, journal
   margin notes, etc. Self-hosted here because the home page reference
   actually loads it (as 4 unicode-range subsets); the other three
   templates' own reference files never load it and fall back to the
   platform's cursive/Segoe Script, so this stays home-only. */
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/caveat-c804a400.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/caveat-d1925c31.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/caveat-d47bd0ca.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('../fonts/caveat-8e41658e.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------------- */
/* Reading progress bar + signature thread (drawn across the whole page)  */
/* ---------------------------------------------------------------------- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--ink); z-index: 6000; }

#thread { position: absolute; left: 0; top: 0; z-index: 40; pointer-events: none; overflow: visible; fill: none; }
.thread-track { stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 6; }
.thread-line { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.thread-node { fill: var(--ink); }

#threadHeadEl {
	position: absolute; left: 0; top: 0; z-index: 45; width: 34px; height: 34px;
	opacity: 0; transition: opacity .35s ease; pointer-events: none; will-change: transform;
}
#threadGlyph {
	width: 34px; height: 34px; border-radius: var(--r-sq); background: var(--ink); color: var(--paper);
	display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 22px -6px rgba(10, 10, 10, .45);
	transition: transform .38s var(--ease), background .38s var(--ease);
}
#threadPulse {
	position: absolute; left: 0; top: 0; z-index: 44; width: 18px; height: 18px;
	border-radius: 999px; border: 2px solid var(--ink); opacity: 0; pointer-events: none;
}
#threadChapter {
	position: fixed; left: 22px; bottom: 24px; z-index: 46; display: flex; align-items: center; gap: 10px;
	opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
#threadChapNum { font: 600 11px var(--mono); letter-spacing: .05em; color: var(--ink); }
#threadChapName { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec); }

@media (max-width: 760px) {
	#thread, #threadHeadEl, #threadPulse, #threadChapter { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Preloader / intro                                                      */
/* ---------------------------------------------------------------------- */
#loader {
	position: fixed; inset: 0; z-index: 100000; background: var(--paper); overflow: hidden;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#loaderInner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.loader__box { position: relative; width: min(820px, 92vw); text-align: center; }
.loader__kicker {
	font: 600 11px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--sec);
	opacity: 0; transition: opacity .6s ease;
}
.loader__headline {
	position: relative; display: inline-block; margin-top: 18px;
	font: 700 clamp(32px, 5.2vw, 66px)/1.04 var(--serif); letter-spacing: -0.024em; color: var(--ink);
}
.loader__line { overflow: hidden; display: block; }
.loader__line span { display: inline-block; transform: translateY(110%); }
.loader__line em { font-style: italic; }
.loader__cue { position: absolute; left: 0; right: 0; bottom: 48px; text-align: center; opacity: 0; transition: opacity .7s ease; }
.loader__cue button {
	background: transparent; border: none; cursor: pointer; font: 500 12px var(--mono); letter-spacing: .18em;
	text-transform: uppercase; color: var(--sec); transition: color .25s, transform .3s var(--ease);
}
.loader__cue button:hover { color: var(--ink); transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	#loader { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Custom cursor (pointer devices only — see home-cinematic.js gating)    */
/* ---------------------------------------------------------------------- */
.tibbb-cursor-active, .tibbb-cursor-active * { cursor: none !important; }
.cursor-ring {
	position: fixed; left: 0; top: 0; width: 30px; height: 30px; border: 1.5px solid var(--ink);
	border-radius: 999px; display: flex; align-items: center; justify-content: center;
	transition: width .25s var(--ease), height .25s var(--ease), background .25s, border-color .25s;
	will-change: transform; pointer-events: none;
}
.cursor-ring__label {
	font: 600 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--paper);
	opacity: 0; transition: opacity .2s; white-space: nowrap;
}
.cursor-dot { position: fixed; left: 0; top: 0; width: 6px; height: 6px; border-radius: 999px; background: var(--ink); pointer-events: none; will-change: transform; }
.cursor-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 99999; opacity: 0; transition: opacity .3s; }
.cursor-wrap.is-visible { opacity: 1; }

.chapter-head { display: flex; align-items: baseline; gap: 16px; }
.chapter-head .rule { flex: 1; height: 1px; background: var(--line); }
.chapter-head .kicker { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec); }

/* ---------------------------------------------------------------------- */
/* Hero                                                                   */
/* ---------------------------------------------------------------------- */
.hero {
	position: relative;
	display: grid;
	grid-template-columns: 60fr 40fr;
	gap: var(--s-5);
	align-items: center;
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(132px, 16.5vh, 200px) 40px clamp(80px, 10vh, 124px);
	min-height: 85vh;
}
.hero__annot {
	position: absolute;
	font: 600 17px var(--hand);
	color: var(--sec);
	pointer-events: none;
	display: none;
}
@media (min-width: 1080px) {
	.hero__annot { display: block; }
}
.hero__annot--1 { left: 24px; bottom: 34px; font-size: 18px; transform: rotate(-5deg); }
.hero__annot--2 { right: 38%; top: 96px; transform: rotate(4deg); }
.hero__annot--3 { left: 42%; bottom: 64px; transform: rotate(-3deg); }

.hero__chapter { display: flex; align-items: center; gap: 12px; font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec); }
.hero__chapter .badge { padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px; }
.hero__chapter .rule { width: 30px; height: 1px; background: var(--line); }

.hero h1 { margin: var(--s-3) 0 0; font: 700 clamp(44px, 6vw, 92px)/1.04 var(--serif); letter-spacing: -0.024em; max-width: 18ch; }
.hero h1 em { font-style: italic; }
.hero__strapline { margin: 18px 0 0; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec); }
.hero__lede { max-width: 38ch; margin: var(--s-4) 0 0; font: 400 clamp(16px, 1.3vw, 18px)/1.62 var(--sans); color: var(--sec); }

.hero__stats { display: flex; gap: 0; margin-top: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero__stat { flex: 1; padding: 18px 0; }
.hero__stat + .hero__stat { padding-left: 24px; border-left: 1px solid var(--line); }
.hero__stat .n { font: 700 clamp(24px, 2.4vw, 34px)/1 var(--mono); color: var(--ink); }
.hero__stat .l { margin-top: 6px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sec); }

.hero__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }

/* Optional ACF-driven hero extras — inert until an editor populates them. */
.hero__bg-video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; z-index: 0; pointer-events: none;
}
.hero__floating-image { position: absolute; z-index: 1; pointer-events: none; }
.hero__decor { position: absolute; z-index: 1; pointer-events: none; }
.hero__svg-asset { position: absolute; top: 24px; right: 24px; width: 64px; height: auto; pointer-events: none; }
.hero__visual { width: 100%; border-radius: var(--r-lg); margin-bottom: var(--s-3); }
.hero__content, .hero__record { position: relative; z-index: 2; }

@media (max-width: 760px) {
	.hide-on-mobile { display: none !important; }
}

/* Entrance animation — enabled per Homepage Settings > Hero > Animation. */
@keyframes tibbbHeroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tibbbHeroFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tibbbHeroZoomIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes tibbbHeroSlideLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
.hero__content[data-animate] {
	animation-name: var(--hero-anim-name, tibbbHeroFadeUp);
	animation-duration: var(--hero-anim-duration, .8s);
	animation-delay: var(--hero-anim-delay, 0s);
	animation-timing-function: var(--ease-out);
	animation-fill-mode: both;
}
@media (prefers-reduced-motion: reduce) {
	.hero__content[data-animate] { animation: none; }
}

@media (max-width: 760px) {
	.hero--mobile-compact h1 { font-size: clamp(34px, 9vw, 52px); }
	.hero--mobile-btn-center .hero__actions { justify-content: center !important; }
	.hero--mobile-btn-stretch .hero__actions { flex-direction: column; align-items: stretch; }
	.hero--mobile-btn-stretch .hero__actions .pill-primary,
	.hero--mobile-btn-stretch .hero__actions .pill-ghost { justify-content: center; }
}

/* Membership record / application card. #recordWrap provides the 3D
   perspective; home-cinematic.js tilts #record within it on mousemove. */
.hero__record { perspective: 1300px; }
.record {
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3);
	transform-style: preserve-3d;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.record__head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 16px 24px; border-bottom: 1px solid var(--ink);
}
.record__head .title { font: 700 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.record__head .num { font: 500 11px var(--mono); color: var(--sec); }

.record__form { padding: 24px; display: flex; flex-direction: column; gap: 17px; }
.fld { display: block; }
.fld--row { display: flex; gap: 18px; }
.fld--row .fld { flex: 1; }
.fld span.label { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sec); }
.fld__control { position: relative; display: block; margin-top: 6px; }
.fld input, .fld select, .fld textarea {
	width: 100%; font: 500 15px var(--sans); color: var(--ink); background: transparent;
	border: none; border-bottom: 1.5px solid var(--line); padding: 6px 0; outline: none;
	cursor: none;
}
.fld select { color: var(--sec); font-size: 14px; }
.fld textarea { font: 500 14px/1.5 var(--sans); resize: none; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--sec); }
.fld .ink {
	position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%; background: var(--ink);
	transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.fld input:focus ~ .ink, .fld select:focus ~ .ink, .fld textarea:focus ~ .ink { transform: scaleX(1); }

.record__submit {
	margin-top: 4px; height: 52px; padding: 0 18px; border-radius: var(--r-sm);
	background: var(--ink); color: var(--paper); font: 600 14px var(--sans); border: 1px solid var(--ink);
	display: flex; align-items: center; justify-content: center; cursor: none;
	transition: transform .35s var(--ease), background .3s var(--ease);
}
.record__submit:hover { transform: scale(1.02); background: #1A1A1A; }

.record__stamp {
	position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
	justify-content: center; background: var(--paper); text-align: center; padding: 30px; border-radius: var(--r-lg);
}
.record__stamp.is-visible { display: flex; }
.record__stamp-mark {
	border: 3px solid var(--ink); color: var(--ink); padding: 14px 22px; font: 700 18px var(--mono);
	letter-spacing: .14em; text-transform: uppercase; transform: rotate(-10deg);
}
.record__stamp-line { margin-top: 24px; font: 600 22px var(--serif); color: var(--ink); }
.record__stamp-hand { margin-top: 6px; font: 600 17px var(--hand); color: var(--sec); }

@media (max-width: 980px) {
	.hero { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* "The living record" — the Three.js 3D page-flip book (journal-3d.js).   */
/* ---------------------------------------------------------------------- */
#journal3d {
	position: relative;
	height: 100vh;
	height: 100dvh;
	border-top: 1px solid var(--line);
	z-index: 1;
}
#j3dStage {
	position: absolute; inset: 0; height: 100vh; height: 100dvh; overflow: hidden;
	display: flex; align-items: center; justify-content: center; margin: 0 auto;
	background: radial-gradient(120% 80% at 50% 20%, #FBFAF6 0%, #F1F0EA 58%, #E7E6DF 100%);
	z-index: 1; will-change: transform;
}
#j3dCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.j3d-eyebrow {
	position: absolute; top: 104px; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	font: 600 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--sec);
}
.j3d-eyebrow .rule { width: 24px; height: 1px; background: var(--line); }
.j3d-caps {
	position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
	width: 38%; max-width: 520px; text-align: center; pointer-events: none; z-index: 2; min-height: 140px;
}
.j3dcap {
	position: absolute; left: 0; right: 0; top: 0;
	font: 600 clamp(22px, 2.7vw, 40px)/1.22 var(--serif); letter-spacing: -0.015em; color: var(--ink);
	opacity: 0;
}
.j3d-cue {
	position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
	font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sec); pointer-events: none; z-index: 2;
	white-space: nowrap;
}

@media (max-width: 760px) {
	/* journal-3d.js scroll-jacks the page while #journal3d fills the
	   viewport (initLock()'s tryEngage() detects the lock point by
	   checking when this section's top/bottom lines up with the
	   viewport edge, which only works reliably at ~100vh) — so height
	   must stay 100vh here, same as desktop. The book is re-centered and
	   zoomed out for narrow aspect ratios in journal-3d.js's update(),
	   which frees up a bottom band in the same screen; anchor the
	   (still absolutely-positioned, still opacity-cycling) caption
	   there instead of beside the book. */
	.j3d-eyebrow { top: 20px; }
	.j3d-caps {
		left: 24px; right: 24px; top: auto; bottom: 15%; transform: none;
		width: auto; max-width: none; min-height: 92px; text-align: center;
	}
	.j3dcap { font-size: clamp(19px, 5.4vw, 26px); }
	.j3d-cue { font-size: 9.5px; letter-spacing: .1em; bottom: 20px; }
}

/* ---------------------------------------------------------------------- */
/* The Wall — people cards                                                */
/* ---------------------------------------------------------------------- */
.wall { padding: clamp(96px, 12vh, 150px) 40px clamp(64px, 8vh, 100px); border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.wall__inner { max-width: 1320px; margin: 0 auto; }
.wall h2 { margin: var(--s-3) 0 0; font: 700 clamp(30px, 4.4vw, 62px)/1.04 var(--serif); letter-spacing: -0.018em; max-width: 780px; }
.wall > .wall__inner > p { margin: 14px 0 0; font: 400 16px var(--sans); color: var(--sec); max-width: 580px; }

.people { margin-top: var(--s-5); max-width: 1160px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 38px 30px; align-items: start; }
.pcard {
	--tilt: 0deg;
	position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 3px;
	padding: 32px 26px 28px; box-shadow: 0 20px 44px -30px rgba(10, 10, 10, .55);
	transform: rotate(var(--tilt));
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pcard:hover { transform: rotate(0deg) translateY(-4px) scale(1.02); box-shadow: 0 32px 64px -28px rgba(10, 10, 10, .5); z-index: 3; }
.pcard::before {
	content: ""; position: absolute; left: 50%; top: -9px; transform: translateX(-50%) rotate(-2.5deg);
	width: 80px; height: 19px; background: rgba(10, 10, 10, .05); border: 1px solid var(--line);
}
.pcard .date { font: 600 17px/1 var(--hand); color: var(--sec); }
.pcard .who { margin-top: 14px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pcard .who .name { font: 700 clamp(27px, 2.6vw, 36px)/1 var(--serif); letter-spacing: -0.014em; color: var(--ink); }
.pcard .who .co { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sec); }
.pcard .line { margin: 18px 0 0; font: 500 clamp(18px, 1.6vw, 21px)/1.5 var(--hand); color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* Lessons accordion                                                      */
/* ---------------------------------------------------------------------- */
.lessons { padding: clamp(112px, 14vh, 170px) 40px clamp(64px, 8vh, 100px); border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.lessons__inner { max-width: 1100px; margin: 0 auto; }
.lessons h2 { margin: var(--s-3) 0 0; font: 700 clamp(30px, 4.4vw, 62px)/1.04 var(--serif); letter-spacing: -0.018em; max-width: 720px; }
.lessons > .lessons__inner > p { margin: 14px 0 0; font: 400 16px var(--sans); color: var(--sec); }
.lessons > .lessons__inner > p .hand { font-family: var(--hand); font-size: 19px; }

.lesson-list { margin-top: var(--s-4); }
.lesson { position: relative; border-top: 1px solid var(--line); }
.lesson:last-child { border-bottom: 1px solid var(--line); }
.lesson__head {
	display: flex; align-items: center; gap: 24px; padding: 28px 0; width: 100%;
	background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.lesson__head .n { font: 600 13px var(--mono); color: var(--sec); }
.lesson__head .t { flex: 1; font: 700 clamp(22px, 2.8vw, 38px)/1.08 var(--serif); letter-spacing: -0.012em; color: var(--ink); transition: transform .4s var(--ease); }
.lesson__head .plus {
	width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
	display: grid; place-items: center; font-size: 20px; color: var(--ink); flex: none;
	transition: transform .4s var(--ease), background .3s, color .3s;
}

@media (max-width: 640px) {
	/* Below ~640px, "Lesson № 01" + the full title + the plus button
	   can't share one row without squeezing the title into 4+ lines —
	   put the number on its own line above, and align the button to the
	   title's first line instead of the vertical center of the whole
	   wrapped block (which reads as floating once it wraps). */
	.lesson__head { flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; padding: 22px 0; }
	.lesson__head .n { flex: 0 0 100%; }
	.lesson__head .t { flex: 1 1 auto; font-size: clamp(20px, 6vw, 26px); line-height: 1.2; }
	.lesson__head .plus { margin-top: 2px; width: 32px; height: 32px; font-size: 17px; }
}

.lesson:hover .lesson__head .t { transform: translateX(10px); }
.lesson:hover .lesson__head .plus { transform: rotate(90deg); }
.lesson.is-open .lesson__head .plus { transform: rotate(45deg); background: var(--ink); color: var(--paper); }
.lesson.is-open:hover .lesson__head .t { transform: translateX(10px); }
.lesson__body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s var(--ease), opacity .45s var(--ease); }
.lesson.is-open .lesson__body { max-height: 320px; opacity: 1; }
.lesson__body-inner { padding: 0 0 30px; display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.lesson__body-inner p { flex: 1; min-width: 280px; max-width: 620px; font: 400 clamp(17px, 1.5vw, 21px)/1.6 var(--sans); color: var(--ink); }
.lesson__aside { flex: 0 0 auto; max-width: 240px; font: 600 19px/1.3 var(--hand); color: var(--sec); border-left: 2px solid var(--line); padding-left: 16px; }
/* Optional per-lesson extras — inert until an editor adds one. Note: they
   share .lesson__body's fixed 320px max-height cap (see above), so a long
   body + image + button together can get clipped; keep the current copy
   length in mind before adding both to the same lesson. */
.lesson__image { flex: 0 0 auto; width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-sm); }
.lesson__cta { flex: 0 0 100%; margin-top: 4px; }

/* ---------------------------------------------------------------------- */
/* Journal excerpt                                                        */
/* ---------------------------------------------------------------------- */
.journal { padding: clamp(96px, 12vh, 150px) 40px clamp(80px, 10vh, 124px); border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.journal__inner { max-width: 1100px; margin: 0 auto; }
.journal h2 { margin: var(--s-3) 0 0; font: 700 clamp(30px, 4.4vw, 62px)/1.04 var(--serif); letter-spacing: -0.018em; }
.journal > .journal__inner > p { margin: 14px 0 0; font: 400 16px var(--sans); color: var(--sec); }
.journal > .journal__inner > p .hand { font-family: var(--hand); font-size: 19px; }

.journal__book-wrap { position: relative; margin-top: 44px; }
.bookmarks { position: absolute; right: -15px; top: 30px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.bmk {
	display: block; appearance: none; -webkit-appearance: none;
	cursor: pointer; padding: 6px 13px 6px 14px; line-height: 1.05; background: var(--paper); color: var(--sec);
	border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 0 7px 7px 0;
	font: 600 10.5px var(--sans); text-transform: uppercase; white-space: nowrap;
	transition: transform .3s var(--ease), background .25s, color .25s; transform: translateX(18px);
}
.bmk:hover { transform: translateX(2px); }
.bmk:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bmk.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateX(0); }

@media (max-width: 760px) {
	/* The translateX(18px) "peek, reveal on hover" tab treatment has no
	   equivalent on touch — leaving non-active tabs permanently half-
	   hidden reads as broken rather than interactive, so show them
	   fully expanded here instead. */
	.bmk { transform: translateX(0); font-size: 10px; padding: 5px 10px 5px 11px; }
	.bookmarks { right: 0; gap: 3px; }
}

.journal-book {
	position: relative; min-height: 380px; background: var(--paper); border: 1px solid var(--line);
	border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; margin-right: 64px;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.journal-book:hover { transform: translateY(-6px); }
.journal-book__page { padding: 46px 54px; }
.journal-book__meta { display: flex; align-items: baseline; gap: 14px; }
.journal-book__meta .rule { flex: 1; height: 1px; background: var(--line); }
.journal-book__week { font: 700 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.journal-book__date { font: 500 12px var(--mono); color: var(--sec); }
.journal-book__title { margin: 22px 0 0; max-width: 560px; font: 700 clamp(24px, 3vw, 40px)/1.12 var(--serif); letter-spacing: -0.01em; color: var(--ink); white-space: pre-line; }
.journal-book__body { margin: 18px 0 0; max-width: 520px; font: 500 clamp(19px, 1.7vw, 24px)/1.55 var(--hand); color: var(--ink); white-space: pre-line; }
.journal-book__margin { position: absolute; right: 30px; bottom: 30px; max-width: 160px; text-align: right; font: 600 17px var(--hand); color: var(--sec); transform: rotate(-3deg); }

/* Standardize each section's own side gutter (independent of .wrap) down
   to the 20px mobile container padding used site-wide. */
@media (max-width: 760px) {
	.hero, .wall, .lessons, .journal { padding-left: 20px; padding-right: 20px; }
}