/* ====================================================================================================== File: edutower-journey.css Path: /assets/css/edutower/edutower-journey.css Version: v3.6.3 Issued: 2026-07-26 Author: Buktika Webdesk (Binka) Purpose: Shared stylesheet for the six EduTower country-themed journey pages. One shared structural system so all six pages read as one family while each tells its own journey. Depends on global.css/themes.css for tokens and the canonical .sdx-card-section/.sdx-cta-band/.sdx-btn-primary/.sdx-btn-secondary/ .sdx-figure-caption components. Colour Map: reuses the existing EduTower page-token set (BKT-PIL-05, edutower.css) for buttons and structure; the shared numbered progression uses --sdx-color-purple-deep (global.css §2.2, "Governance, Viridians primary" -- a shared governance primitive, not a pillar-exclusive colour) so a read-only evidence/recognition sequence is never visually confused with an actionable EduTower button. Design System: v4.0.0 / BKT-DOC-01 v3.0.0 / BKT-DOC-02 v3.0.0 / BKT-DOC-03 v3.0.0 ChangeLog: v3.6.3 (2026-07-26): OWNER-APPROVED RUNTIME CLOSURE. Converged the six journey pages on one shared stylesheet identity. v3.6.2 (2026-07-25): Sponsored Learning Arrangement progression tightened to reduce visual dominance while preserving all eight stages and the accepted reading scale. v3.6.1 (2026-07-25): SPONSORED LEARNING LIGHTBOX. Added only page-scoped trigger reset and lightbox caption-width rules for the two existing Rwanda story images. The shared lightbox CSS and JavaScript remain unchanged. v3.6.0 (2026-07-25): SPONSORED LEARNING JOURNEY REBUILD. Added only Sponsored Learning-scoped rules for one learner-centred five-section Rwanda story: accepted hero typography without a hero action, two large narrative images, a governed eight-stage route, integrated learning, Turning Point and violet recognition record, a compact learner boundary, and one terminal enquiry. Obsolete catalogue, arrow-chain, compliance-wall and competing Living Tower structures require no retained styling. No accepted journey-page selector changed. v3.5.6 (2026-07-25): FUNDING HERO TYPOGRAPHY RECONVERGED. Funding now uses the exact accepted long-form responsive headline scale already used by Field Learning and Research, while inheriting the shared journey font family, 1.3/1.2 line-height, tracking, margins, tagline and body-copy scale. Its measure remains inside this photograph's left negative space. No public copy, image, overlay, hero height or below-hero layout changed. v3.5.5 (2026-07-25): FUNDING HERO SERIF RHYTHM. Funding's headline now follows the accepted MamaDEX hero's calm typographic principles: a 4.5rem ceiling, mandatory 1.08 line-height, normal tracking, no transform, a 35rem measure and explicit positive spacing to the tagline. The tagline and intro now use the approved subordinate measures and leading. Mobile retains the same 1.08 headline rhythm with the specified responsive gaps. No public copy, image, overlay, hero height or below-hero rule changed. v3.5.4 (2026-07-25): REDUCED FUNDING HERO COPY. Funding-scoped measures and typography now support the shorter approved headline, tagline and intro: compact left-negative-space widths, 1.75rem desktop and 1.25rem mobile gaps, readable governed type, and focal alignment that keeps the seated learner clear of the copy. Hero image asset, height, overlay and section geometry remain unchanged. v3.5.3 (2026-07-25): FUNDING HERO TYPOGRAPHY AND SPACING. Funding-scoped headline, tagline and intro measures now form one connected left-middle introduction: three headline lines and two tagline lines at 1440px, explicit 2.25rem desktop and 1.5rem mobile inter-element gaps, and a larger readable intro. Hero image, height, overlay, copy and all section rules remain unchanged. v3.5.2 (2026-07-25): FUNDING SECTION-HEADING RHYTHM. Funding-scoped spacing now sets major eyebrow-to-heading gaps to 1.75rem, internal Delivery moments to 1.25rem and the closing CTA to 1.5rem, with the specified 390px values. The gap beneath each major title underline is explicitly 1.5rem. No frozen page selector, copy, structure, image or route changed. v3.5.1 (2026-07-25): FUNDING IMAGE LIGHTBOX ACTIVATED. Added only the Funding-page trigger reset, Firefox inner-focus reset and full-width overlay caption treatment required by the established shared media-lightbox component. No shared lightbox asset or frozen-page selector changed. v3.5.0 (2026-07-25): FUNDING PAGE NARRATIVE REBUILD. Added only page-scoped Funding rules for one continuous defined-need, agreement, delivery, record, boundary and conversation journey. The two retained Costa Rican supporting images now carry material narrative weight; the agreement and governed record use continuous semantic progressions; the Turning Point remains inside Delivery; the compact boundary uses aligned rows; and the sole CTA closes the page. Hero width and type are corrected for a maximum of four lines at 1440px. No accepted Learning, Teaching, Field Learning or Research selector changed. v3.4.5 (2026-07-25): LEARNING PAGE LIGHTBOX ADDED (owner request, extending the lightbox work already done for the hub, Field Learning and Research to this accepted/frozen page). Same shared, read-only media-lightbox.css/.js component. New component 12: the Beginning section's photograph needed no new rule (its .edutower-narrative-media wrapper already carries the shared .media-thumb reset); the Record section's photograph sits inside .edutower-recognition-media instead, which had never had a .media-thumb variant in this file -- added here, values copied verbatim from the hub's own separate stylesheet (edutower.css), which already defines the identical reset for its own instance of the same class name. Without it this button would have hit the exact defect already found and fixed on Field Learning and Research (default browser button chrome, unreliable click hit-area). The ::-moz-focus-inner reset and the caption full-width fix (align-self:stretch) are also applied here from the outset, matching both prior pages. See edutower-learning.html v2.1.4 changelog for the HTML side. v3.4.4 (2026-07-24): FIELD LEARNING PAGE LIGHTBOX ADDED (owner-reported: "lightbox not working" -- this page never had one wired up; it predates the lightbox work done for Research). Same shared, read-only media-lightbox.css/.js component now used on edutower.html and edutower-research.html. New component 10.13: the two fixes found the hard way on Research (the missing .edutower-narrative-media class on one of the two photograph figures, which left its .media-thumb button with the browser's own default styling and an unreliable click hit-area in every browser; and the shared caption's 640px cap rendering narrower than this page's full-sentence captions) are both applied from the outset here, not discovered again. See edutower-field-learning.html v2.1.5 changelog for the HTML side (both photographs now wrapped in a .media-thumb trigger; the shared #media-lightbox modal + script added once, in the same position as edutower.html's own instance). v3.4.3 (2026-07-24): RESEARCH PAGE CTA BODY-COPY SIZE. Owner-reported: the CTA section's body paragraph reads too small next to the rest of the page's narrative copy. The shared .edutower-route p rule (component 9.4, unmodified) leaves body text at the site's plain 1rem default -- correct and unchanged for Learning/Teaching/Field Learning, whose own CTA sections were previously confirmed pixel-identical to it, but inconsistent with this page's own 1.0625rem narrative scale used everywhere else. New page-scoped override (component 11.14) raises only this page's CTA paragraph to 1.0625rem/1.6 -- max-width and centring stay governed by the shared rule. No other page's CTA section is affected. v3.4.2 (2026-07-24): RESEARCH PAGE LIGHTBOX CROSS-BROWSER FIXES. Owner-reported, Firefox-specific: a stray ~2px border visible around a thumbnail, and the lightbox caption pill rendering narrower than the photograph above it. See component 11.13 below for the two page-scoped fixes (Firefox's own ::-moz-focus-inner reset; the caption's shared 640px cap replaced with align-self:stretch so it matches the image's own resolved width). Neither the shared media-lightbox.css/.js nor any other journey page was touched. v3.4.1 (2026-07-24): RESEARCH PAGE TURNING POINT PARAGRAPH SPACING. Owner's replacement copy expanded the Turning Point body from one paragraph to three. .edutower-research-turning-point p was margin:0 (correct only for a single paragraph -- the three body paragraphs would otherwise run together with no gap). Now margin:0 0 1.25rem, matching this page's other narrative body-copy spacing; the conclusion line's own margin:1rem 0 0 !important is unaffected and still governs the gap immediately above it. No other rule changed. v3.4.0 (2026-07-24): RESEARCH PAGE REBUILD -- new page-scoped rules added to support edutower-research.html's rebuilt narrative (owner brief "Rebuild edutower-research.html Only"), following the same additive, read-only-elsewhere pattern the Learning (v3.1.0), Teaching (v3.2.0) and Field Learning (v3.3.0) rebuilds used. Minor version bump for a new page-specific structural system, matching that same repository precedent. Every layout/typography defect found and fixed on Field Learning across its two follow-up corrections is applied here from the outset rather than discovered again: (1) .page-edutower-research .hero-content/.headline -- page-scoped width and font-size correction so this page's long hero headline ("A Place Presents a Question Before Research Gives It a Name") renders within 4 lines at 1440px. No tagline override -- this page's brief keeps the shared amber tagline treatment (unlike Field Learning, which explicitly removed it). (2) .page-edutower-research .edutower-narrative-body h2 -- restores the canonical centred, pillar-underlined heading treatment for the two headings that cannot be direct children of .sdx-card-section (Beginning and What-Returns-to-the-Place both pair an image). The page's other two major headings (Investigation, Boundary) get this treatment for free from global.css. (3) Two image-paired sections (Beginning, What Returns to the Place) each get: an align-items:stretch row (not the shared component's default align-items:center, which would float a shorter image with dead space above and below it -- the exact defect Field Learning's owner screenshot caught); fr-based column ratios (55fr 45fr / 45fr 55fr) rather than percentages, since percentage tracks do not account for the shared component's own gap:3rem and would overflow the row by that amount (the exact bug Field Learning's second follow-up correction found); a
margin:0 reset (the browser's UA-stylesheet default figure margin, 1em 40px, otherwise shrinks the rendered image well below its own grid column -- the root cause of Field Learning's original "thumbnail" complaint); and a frame + object-fit:cover wrapper (matching the Learning page's own accepted .edutower-recognition-media/-frame Record-section construction, read-only, unchanged) so each photograph fills the full stretched row height with no dead space in either column, at every viewport. (4) .edutower-research-question-line -- the research question ("Why is vegetation establishing...") as a visually distinct but integrated line: a left rule and larger display-weight type, no card, no background, no quotation icon -- structurally identical to the equivalent pattern on Teaching and Field Learning but page-scoped separately per this work item's file-scoping rule. (5) .edutower-research-investigation .section-intro/.edutower-journey-progression -- widened to a readable 62rem/65rem respectively (the shared component's own 52rem/50rem defaults, untouched for Learning/Teaching/Field Learning). (6) .page-edutower-research .edutower-journey-step--threshold h3 { color: var(--fg); } -- stage titles stay the normal foreground colour throughout, including stage 3; amber is confined to the stage 3 circular marker only, applied from the outset per this page's brief (which states the rule up front, as Field Learning's brief eventually came to as well). (7) .edutower-research-stage-media -- the investigation photograph sits as a full-width section-level sibling immediately after the progression's closing , not nested inside stage 3's own list-item content div -- Field Learning's own follow-up correction found that nesting narrows the image to the stage's indented text column; this page's markup never does that in the first place. (8) .edutower-research-turning-point/-conclusion -- full-width separator (not capped to a narrow column), inner max-width:62rem on the readable text only, explicit teal eyebrow colour in both light AND dark mode (a dark-mode override is required here since the sitewide dark-mode rule would otherwise turn every eyebrow, including this one, amber) -- this page's brief states the "teal in both themes" requirement up front, which Field Learning's brief only added after an owner correction. (9) .edutower-research-closing-line -- one typographically emphasised prose line for the "What Returns to the Place" section's closing statement. (10) .edutower-research-boundary -- section-intro widened to 65rem/left-aligned; .edutower-definitions widened to 65rem, dt top-margin tightened to 1.25rem, dd font-size raised to 1.0625rem; boundary note is a plain left-rule text line, no fill, no radius, no padding box -- the same restrained Boundary construction already accepted on Teaching and Field Learning. (11) CTA: no rule added. .edutower-route/.edutower-final-cta/.sdx-btn-primary were never overridden for this page, so this section is pixel-identical to Learning's, Teaching's and Field Learning's own CTA (verified by direct computed-style comparison, not assumed). No image, button, colour-token, or Learning/Teaching/Field-Learning-page rule touched. v3.3.3 (2026-07-24): FIELD LEARNING BEGINNING-IMAGE OVERFLOW FIX. Owner screenshot showed the Beginning photograph overflowing past the section's right padding. Root cause: .edutower-field-beginning .edutower-narrative's grid-template-columns was set to 55% 45% (v3.3.1), but the shared .edutower-narrative rule also sets gap:3rem at this breakpoint (component 6, untouched) -- CSS Grid does not subtract gap from percentage tracks, so the row's total allocation was 55%+45%+3rem, i.e. 3rem wider than the container, and the second (image) column overflowed the section by that amount. Fixed by switching to fr units (55fr 45fr), which -- like the shared component's own original 1fr 1fr -- correctly divide only the space left over after the gap is subtracted, giving the same ~55/45 visual ratio with no overflow. No HTML change. v3.3.2 (2026-07-24): FIELD LEARNING BEGINNING-IMAGE FOLLOW-UP CORRECTION. Owner screenshot after v3.3.1 showed the Beginning photograph, now top-aligned per that pass, leaving a large empty void beneath it (the text column ran noticeably taller) -- the image still read as too small relative to the section. Fixed by switching the row to align-items:stretch and giving the image a frame + object-fit:cover (same construction as the Learning page's own accepted .edutower-recognition-media/-frame Record-section pattern, read-only, unchanged) so the photograph now fills the full stretched row height at every viewport, no dead space in either column. See 10.4.1 below for the full rationale. HTML: one wrapping
added around the existing in edutower-field-learning.html -- no src/alt/caption change. v3.3.1 (2026-07-24): FIELD LEARNING LAYOUT AND TYPOGRAPHY CORRECTION -- geometry and typography only, no copy/image/CTA change. All rules remain scoped under .page-edutower-field-learning; nothing shared or generic was rewritten. - Hero tagline: the v3.3.0 white override is removed outright. Falls back to the shared .tagline default (var(--sdx-color-mama-amber), same text-shadow), per this pass's instruction superseding the earlier "no amber" requirement. - Beginning: the .edutower-narrative-body h2 override is removed (dead code -- the heading is now a direct child of the section in HTML, per that file's own v2.1.1 changelog, so it already gets the canonical treatment for free). New .edutower-field-beginning .edutower-narrative rules: align-items:start (was the shared component's align-items:center, which floated a shorter image in the middle of a taller text column) and, at >=900px, grid-template-columns:55% 45% (was the shared 1fr 1fr / 50-50) so the photograph reads with real visual authority instead of like a thumbnail. - Investigation: .section-intro widened 52rem -> 62rem (still left-aligned, margin 0); new .edutower-journey-progression override widens the shared 50rem cap to 65rem, page-scoped so Learning/Teaching's own 50rem stays untouched. The investigation photograph (moved out of stage 3's nested list-item content div in the HTML, see that file's changelog) now sits as a full-width section-level sibling with no nested-column constraint at all -- no new width rule was even needed once it left the grid item. - Turning Point: the outer .edutower-field-turning-point block drops its 48rem cap (now width:100%, so its top-rule separator spans the section's full internal width); a new inner max-width:62rem is applied to the eyebrow/ heading/body/conclusion instead, so the readable text keeps a sane measure without capping the separator. New explicit dark-mode override forces the eyebrow to stay var(--page-primary) (teal) in dark mode too -- this page's brief requires teal in both themes, unlike the shared sitewide dark-mode .eyebrow rule (which turns every other eyebrow on every journey page amber in dark mode and is untouched). - What Returns to the Work: .edutower-field-prose changed from a centred 46rem column (margin:0 auto) to a left-aligned 62rem field (margin:0) -- it no longer reads as prose compressed into the middle of the card. - Boundary: new .edutower-field-boundary-scoped overrides (matching the section's own new HTML class) -- .section-intro widened to 65rem, left-aligned, margin 0 (was the global centred 52rem default); .edutower-definitions widened from the shared 760px (~47.5rem) cap to 65rem; dt top-margin tightened 1.75rem -> 1.25rem for less dead space between rows; dd font-size raised var(--body) (1rem) -> 1.0625rem. The boundary note was already within the requested 1-1.0625rem/1.6 range and is untouched. - CTA: no rule added. .edutower-route/.edutower-final-cta/.sdx-btn-primary were never overridden for this page, so this section was already pixel-identical to Learning's and Teaching's own CTA -- verified by direct computed-style comparison across all three pages (see completion report), not assumed. v3.3.0 (2026-07-24): FIELD LEARNING PAGE REBUILD -- new page-scoped rules added to support edutower-field-learning.html's rebuilt narrative (owner brief "Rebuild edutower-field-learning.html Only"), following the same additive, read-only-elsewhere pattern the Learning (v3.1.0) and Teaching (v3.2.0) rebuilds used. Minor version bump for a new page-specific structural system, matching that same repository precedent. None of the selectors below are referenced by any other journey page, so nothing regresses. (1) .page-edutower-field-learning .hero-content/.headline -- page-scoped width and font-size correction so this page's unchanged, long hero headline ("The Land Presents a Question That Cannot Be Answered From a Distance") renders within 4 lines at 1440px (verified in a real headless-Chrome render), mirroring the same fix already applied to the Teaching page's own hero. (2) .page-edutower-field-learning .tagline -- overrides the shared amber tagline colour with high-contrast white (plus the same hero text-shadow technique already used for the amber version elsewhere) per this pass's explicit instruction: no amber or yellow as a hero reading colour on this page. (3) .page-edutower-field-learning .edutower-narrative-body h2 -- restores the canonical centred, pillar-underlined heading treatment (global.css's .sdx-card-section > h2 rule, values copied verbatim, incl. dark-mode border opacity) for the one heading on this page that cannot be a direct child of .sdx-card-section (it sits inside the image-pairing .edutower-narrative-body wrapper). The page's other three major headings (Investigation, What Returns to the Work, Boundary) get this treatment for free -- their markup does not wrap them in .edutower-section-body, so global.css's own rule already applies. (4) .page-edutower-field-learning .edutower-narrative-body p -- narrative body-copy scale (1.0625rem/1.65), matching the accepted Learning/corrected Teaching reading scale. (5) .edutower-field-question-line -- the field question ("Why is the water cutting here...") as a visually distinct but integrated line: a left rule and larger display-weight type, no card, no background, no quotation icon -- structurally identical to the Teaching page's own .edutower-teaching-question-line but page-scoped separately per this work item's file-scoping rule. (6) .edutower-field-investigation .section-intro width -- a readable prose measure, not a centred narrow tower. (7) .page-edutower-field-learning .edutower-journey-step--threshold h3 { color: var(--fg); } -- this page's brief states the amber/yellow rule up front (stage titles must use the normal heading colour; amber is confined to the stage 3 circular marker only), so this override is applied from the outset rather than discovered later, unlike the Teaching page's own correction pass for the same shared .edutower-journey-step--threshold h3 rule. (8) .edutower-field-stage-media -- sizes the investigation photograph nested inside stage 3 of the progression, so it reads as evidence for "test the emerging explanation" rather than a full-width interruption (same technique as the Teaching page's .edutower-teaching-stage-media). (9) .edutower-field-turning-point/-conclusion -- this page's internal Turning Point, styled on the accepted .edutower-learning-turning-point/.edutower-teaching- turning-point pattern: single thin top rule, no card, no fill, no shadow, no border-radius. Deliberately carries NO eyebrow-colour override -- the brief explicitly requires the ordinary EduTower teal eyebrow colour here, which is simply the shared .eyebrow default already in effect; overriding it to amber (as the other two journey pages originally did, later corrected) was not repeated. (10) .edutower-field-prose -- centred, comfortable-measure reading column (46rem, left-ranged text, 1.0625rem/1.65) for "What Returns to the Work", same construction as the Teaching page's .edutower-teaching-prose. (11) .edutower-field-closing-line -- one typographically emphasised prose line for that section's closing statement (bold, slightly larger, foreground colour), not a heading, not a bordered note. (12) .edutower-field-boundary-note -- a plain left-rule text line (teal marker, no fill, no radius, no padding box) for the Boundary's closing line, same construction as the Teaching page's .edutower-teaching-boundary-note. No image, button, colour-token, or Learning/Teaching-page rule touched. v3.2.4 (2026-07-24): LEARNING PAGE CONTRAST FIX -- owner instruction ("edutower- learning.html ... requires the same") extending v3.2.3's Teaching-page contrast fix to the Learning page's own, identical pattern flagged as a cross-cutting note in that changelog entry. .edutower-learning-turning-point .eyebrow's light-mode amber override is removed for the same measured reason: amber text against this page's #f8f5f2 card background measures ~1.7:1, failing WCAG 2.2 AA for a small functional eyebrow label (see v3.2.3 below and the colour governance whitepaper's own documented 2.7:1 "DECORATIVE ONLY - headings >=24px bold" note for this exact token/background pairing). The eyebrow now falls back to the shared .eyebrow default, var(--page-primary) (4.63:1, passing) -- the same colour every other eyebrow on the Learning page already uses. Dark mode unaffected (already 9.02:1 via the sitewide dark-mode eyebrow rule). No colour invented; no other rule, no HTML structure, and no copy on the Learning page touched. edutower-learning.html itself needs only its stylesheet query string bumped to pick this up (see that file's own changelog). v3.2.3 (2026-07-24): TEACHING PAGE CONTRAST FIX -- "poor amber contrast" (flagged alongside v3.2.2's other three fixes but not yet addressed) traced to a specific, measurable WCAG 2.2 AA failure, not a subjective look. The Turning Point eyebrow's .page-edutower-teaching .edutower-teaching-turning-point .eyebrow { color: var(--sdx-color-mama-amber); } override (carried forward verbatim from the accepted Learning page's own .edutower-learning-turning-point .eyebrow pattern) forces amber-on-card in light mode. Per this repo's own colour governance whitepaper (assets/documents/bkt-design-foundation-colour-tokens-governance-set/ bkt-www-colour-map-whitepaper-v3.16.0.txt §8.11 and its documented measurement, "--sdx-color-mama-amber (#f5b014) on #f7f4ed 2.7:1 DECORATIVE ONLY - headings >=24px bold"), amber text against this page's #f8f5f2 card background measures ~1.7-1.8:1 (recalculated here against the exact card token) -- nowhere near the 3:1 (large) or 4.5:1 (normal) AA floor, and explicitly scoped by the governance doc to large decorative headings, not a small (1.1rem) functional eyebrow label. Fix: the light-mode override is removed outright (not replaced with an invented colour -- CLAUDE.md's "do not guess colours" rule). The eyebrow now falls back to the shared .eyebrow default already used by every other eyebrow on this page, var(--page-primary), which measures 4.63:1 on the same card background -- a passing, already-governed, already-used-elsewhere-on-this-page token, not a new one. Dark mode is unaffected and stays amber: the sitewide [data-theme="dark"] .page-edutower-journey .eyebrow rule (unchanged, applies to every eyebrow on every journey page) already sets amber there, and amber against the dark surface (#0f1e23) measures 9.02:1 -- fully compliant, so the intended "distinct, warmer" Turning Point signal is preserved exactly where the token actually reads well. The stage 3 number marker and connecting-line accents (both amber-as-non-text-fill, a different contrast pair entirely) are untouched. CROSS-CUTTING NOTE FOR THE OWNER: the identical pattern and identical failure exists on the accepted Learning page's own .edutower-learning-turning-point .eyebrow rule (component 9.2 below, unchanged by this pass -- edutower- learning.html is out of scope for this work item). That page's Turning Point eyebrow has the same ~1.7:1 light-mode contrast problem and was not touched here; it would need its own, separately-authorised correction pass. v3.2.2 (2026-07-24): TEACHING PAGE PRECISION CORRECTION -- psychologist-team review flagged inconsistent section containment (uneven gap beneath underlined headings) and poor amber contrast (stage 3's heading rendered in amber, a large-type use the brief reserves for markers/eyebrows/accents only). Both fixes are Teaching-scoped. (1) Heading-to-body gap: the canonical .sdx-card-section > h2 rule (global.css) sets margin:0 on all sides, so on this page's three direct-child major headings (Teaching, What-the-Educator-Learns-equivalent, Boundary) the underline sat flush against the next paragraph with no breathing room. New rule .page-edutower-teaching .sdx-card-section:not(.edutower-route) > h2 sets margin-bottom:1.5rem (the Route/closing-CTA heading is explicitly excluded -- .edutower-route h2's own margin-bottom:1rem, part of its established no-underline treatment, is untouched). .edutower-narrative-body h2 (Section 1's heading, which cannot be a direct child) gets the same 1.5rem bottom margin, up from 1.25rem, for visual consistency across all four major headings. Adjacent margins collapse to the larger value under CSS's normal rules, so every section lands at the same ~1.5rem gap regardless of whether the next element is .section-intro (1.25rem top margin) or a plain paragraph (0 top margin) -- verified by direct measurement in a real browser render, not assumed. Eyebrow-to-heading spacing (above the heading) is untouched -- only margin-bottom was set, never margin-top. (2) Amber contrast: the shared .edutower-journey-step--threshold h3 rule (component 9, used by both this page's stage 3 and the Learning page's stage 2) sets amber type intentionally for Learning's stage 2 heading, which stays unchanged. A new, more specific Teaching-only override, .page-edutower-teaching .edutower-journey-step--threshold h3 { color: var(--fg); }, restores the normal foreground colour for Teaching's stage 3 heading only ("The learner takes the task"). Amber is retained on the stage 3 number marker (its own selector, untouched), the Turning Point eyebrow (untouched) and the connecting-line accents (untouched) -- exactly the three places the brief names as legitimate amber use on this page. No image, button, hero-CTA or Learning-page rule touched. v3.2.1 (2026-07-23): TEACHING PAGE OWNER-REVIEW CORRECTION. v3.2.0's Teaching-page rules are replaced (not extended) following owner rejection of the page they supported: oversized hero text, missing title underlines, undersized body copy, an overcrowded Teaching+Turning-Point card and a full-width learner-practice image breaking the progression. All selectors below are Teaching-page-scoped (.page-edutower-teaching or a .edutower-teaching-* class); none is referenced by any other journey page, so nothing regresses. (1) .page-edutower-teaching .hero-content/.headline -- page-scoped width and font-size correction so the unchanged hero headline wording renders in 3 lines at 1440px (verified in a real headless-Chrome render at 1440x1000; the shared clamp(2.75rem,6vw,4.5rem)/32rem combination every other journey page still uses was hitting its 4.5rem ceiling at 1440px and wrapping to 7 lines for this page's specific headline). Hero focal position and vignette (component 1/2) untouched; the wider text column still sits inside the existing left-to-right dark scrim's safe zone (0-58% width), not over the photograph's open/undarkened area. (2) .page-edutower-teaching .edutower-narrative-body h2 -- restores the exact canonical centred, pillar-underlined heading treatment (global.css's .sdx-card-section > h2 rule, font-size/family/weight/line-height/border-bottom copied verbatim, incl. the dark-mode border-opacity reduction) for the one heading that cannot be a direct child of .sdx-card-section (it sits inside the image-pairing .edutower-narrative-body wrapper). The page's other three major headings (Teaching, What-the-Educator-Learns-equivalent, Boundary) get this same canonical treatment for free now that their markup no longer wraps them in the left-axis .edutower-section-body pattern -- no CSS needed for those three at all. (3) .edutower-teaching-question-line -- the learner's "Why did you do that?" line: a left rule plus larger display-weight type, integrated inside the flowing prose, no card, no background, no quotation icon. (4) .edutower-teaching-stage-media -- sizes the learner-practice photograph where it now lives, nested inside stage 3 of the three-stage progression, so it reads as evidence for "the learner takes the task" rather than a full-width interruption between the progression and the Turning Point. (5) .edutower-teaching-prose -- a centred, comfortable-measure reading column (46rem, left-ranged text, 1.0625rem/1.65 line-height) for the "What the Educator Learns" section's three connected paragraphs, replacing the previous bare .edutower-section-body wrap (which inherited the site's 1rem default -- the "body text too small" defect). (6) .edutower-teaching-boundary-note -- a plain left-rule text line (teal marker, no fill, no radius, no padding box) for the Boundary's closing line, replacing the previous .edutower-recognition-note treatment, whose surface-alt background read as too heavy ("a large white inset bar") for a deliberately subordinate section. (7) .edutower-teaching-turning-point/-conclusion carried forward unchanged from v3.2.0 (still the correct, accepted-pattern treatment for this page's internal Turning Point). REMOVED (v3.2.0, unused after this rewrite): .edutower-teaching-question (the Question section is no longer a separate outer card, so its width-narrowing rule has nothing to select), .edutower-teaching-photograph (the learner-practice image no longer sits as a standalone full-width figure after the progression -- see (4) above), .edutower-teaching-closing-line (the "What the Educator Learns" equivalent section now ends in three connected paragraphs with no separate slogan line, per the owner's explicit correction against a closing slogan). No image, button, colour-token or Learning-page rule touched. v3.1.2 (2026-07-23): LEARNING PAGE OWNER-REVIEW CORRECTION. v3.1.1's fix embedded the Turning Point's label, full heading and conclusion inside stage 2 of the progression itself, which (a) still read, in the rendered screenshots, as if Practice ended and a second event began, and (b) left the combined section's progression narrow (still capped at 50rem) inside a much wider card, with unused space beside and below it. This pass: - Stage 2 reverts to its own short title/body ("The educator steps back" / "Prompts become fewer...", amber marker retained) -- no eyebrow label or conclusion nested inside the list item any more. - New .edutower-learning-turning-point block added directly after the closing , inside the same .edutower-learning-practice section (no new .sdx-card-section): eyebrow, the full "The educator steps back. The learner continues." heading, the restored body paragraph, and the closing "Independent performance begins when support ends." line. Separated from the progression above by a single thin top rule only (mirrors the hub's restrained threshold treatment) -- no fill, no shadow, no border-radius, no second card. - .edutower-learning-practice .section-intro and .edutower-learning-practice .edutower-journey-progression get page-scoped width increases (52rem and 68rem, up from the shared defaults) so the combined section reads with real visual weight across the card instead of as a narrow column with dead space around it. - .edutower-journey-threshold-label/.edutower-journey-threshold-conclusion (v3.1.1) are removed outright: they existed only for the embedded approach this pass replaces, and nothing else ever referenced them. v3.1.1 (2026-07-23): LEARNING PAGE CORRECTION -- owner rejected v3.1.0's Practice and Turning Point as two independent chapters (two separate outer .sdx-card-section cards) when the Turning Point is the decisive middle event of the Practice sequence, not a second story. This pass: - .edutower-threshold/.edutower-threshold-closing (v3.1.0, item 2 below) are removed outright: no other journey page ever referenced them, so nothing else depends on them. The standalone Turning Point section/card they styled no longer exists in the Learning page's markup. - New, smaller .edutower-journey-threshold-label and .edutower-journey-threshold- conclusion added instead: the withdrawal stage (.edutower-journey-step--threshold, stage 2 of .edutower-journey-progression) now carries the Turning Point's small eyebrow-style label and closing sentence directly inside its own list item, so Practice and Turning Point read as one continuous sequence in one outer card, per the hub's own accepted principle (one integrated capability section, not a progression card followed by a separate threshold card). The threshold stage's heading is also sized up slightly (item below) for the "more emphatic, still part of the same progression" authority the correction calls for. - .edutower-journey-step--threshold h3 sized up (clamp 1.4rem-1.75rem, was the same 1.25rem-1.5rem as stages 1/3) -- typographic emphasis only, no new graphic device. - .edutower-journey-progression max-width widened 42rem -> 50rem so the merged section reads with balanced visual weight in the card rather than as a narrow text island with unused space beside it. - .edutower-route/.edutower-route-secondary (v3.1.0, item 4 below): the secondary Living Tower text link is removed from this page (global nav already reaches Living Tower; it does not need to compete with the one closing MamaDEX action). .edutower-route-secondary is deleted (unused anywhere now). .edutower-route h2 now drops the canonical .sdx-card-section > h2 pillar-colour underline (global.css) -- a decorative rule under a short closing statement read as clutter -- replaced by ordinary vertical spacing; .edutower-route p gets a comfortable 34rem reading width so the body copy no longer reads as a single squeezed line. v3.1.0 (2026-07-23): LEARNING PAGE REBUILD -- three new reusable journey components ported from the accepted EduTower hub (edutower.css, read-only) so the Learning journey page's Practice/Turning-Point/Record sections can match the hub's own "successful dimensional marker logic" without duplicating page-local CSS. All three are shared, reusable journey components (not learning-page-scoped): no other of the six journey pages currently reference these class names, so nothing regresses. (1) .edutower-journey-progression/.edutower-journey-step/.edutower-journey-number -- three-stage supported-practice progression, teal for stages 1 and 3, amber only for the withdrawal threshold stage (.edutower-journey-step--threshold), mirroring the hub's .edutower-journey-progression construction exactly (same dimensions, same connecting-line technique) but using

for stage titles (this page's heading depth is one level deeper than the hub's

, since the hub nests an extra

subhead this page does not need). (2) .edutower-threshold/.edutower-threshold-closing -- restrained editorial threshold treatment for the page's decisive psychological turn, mirroring the hub's .edutower-capability-threshold (thin top/bottom rule, one amber eyebrow accent, no fill, no icon, no number) rather than an ordinary two-column prose card. (3) .edutower-recognition-layout/.edutower-recognition-media/.edutower-recognition- content -- two-column Record layout (photograph beside the shared four-stage violet .edutower-progression), mirroring the hub's own Record section composition. .edutower-progression is now list-marker-reset (list-style/padding) so it can be authored as a semantic
    /
  1. sequence (BKT-DOC accessibility guidance) instead of the hub's plain
    stack, with no visual change (all existing rules are class-selectors, not tag-selectors). (4) .edutower-route/.edutower-route-secondary -- the closing section is now intentionally centred as a whole (heading, body and button), with the Living Tower handoff as a quiet subordinate text link beneath the one dominant MamaDEX button -- replacing the old two-competing-CTA pattern (.edutower-next-step + a full .sdx-cta-band) on the Learning page only. .sdx-cta-band itself is untouched here and remains available to any journey page that still uses it. v3.0.0 (2026-07-22): OWNER-DIRECTED FULL VISUAL RECONSTRUCTION. Manual owner review rejected v2.0.1 despite passing browser checks: eyebrow scale, button hover, card fragmentation, alignment inconsistency and the generic repeated closing were all flagged. Authority audit performed against the LIVE rendered treatment of mamadex.css and living-tower.css (not memory) before any rule changed: (1) EYEBROW -- global.css's canonical .eyebrow (13px) is a floor, not a ceiling; both mamadex.css (.page-mamadex .eyebrow, confirmed 1.1rem/600/0.15em) and the live-linked living-tower.css (.page-living-tower .eyebrow, confirmed identical 1.1rem/600/0.15em) override it with a stronger page-scoped treatment. EduTower now matches that exact scale: 1.1rem, weight 600, 0.15em letter-spacing, uppercase, color var(--page-primary), margin-bottom 2rem. This is the established, accepted site pattern for this exact situation -- not a new invention. (2) BUTTON HOVER -- mamadex.css's .door-card-body .sdx-btn-primary:hover uses a box-shadow increase ONLY (no filter, no transform, no scale) -- confirmed by direct inspection. The previous filter:brightness(1.08) hover here is removed; .sdx-btn-primary:hover now only strengthens box-shadow, matching that exact mechanism with EduTower's own teal-deep shadow colour. No transform, translate, lift, jump or scale exists anywhere in this file's button rules. (3) SHARED NUMBERED PROGRESSION -- new .edutower-progression component, modelled directly on mamadex-restoration-evidence.css's .evidence-story-step structure (3rem circular number + connecting line + heading + body, confirmed by direct inspection), using --sdx-color-purple-deep for the number/line so it reads as a distinct "governed sequence" language from the teal/olive action-button language. Used for every EduTower recognition, evidence and sponsorship sequence. (4) LEFT-AXIS NARRATIVE STRUCTURE -- new .edutower-section-body wrapper: an eyebrow+heading+body unit that is deliberately NOT a direct child of .sdx-card-section, so the canonical centred .sdx-card-section > h2 hard rule (BKT-DOC-02 §4.1, page CSS MUST NOT override) does not apply to it -- this is not an override of that rule, it is a different, permitted heading pattern used only where a hard left narrative axis is the deliberate design, exactly as the eyebrow itself is already left-started by its own global rule. Eyebrow, heading and body now share one consistent left edge; centred headings are reserved for sections that keep the canonical direct-child pattern (recognition/definition-style sections retain centring where that reads better). (5) HERO CTA REMOVED -- .hero-actions/.btn-hero-primary rules deleted outright (dead code): no journey-page hero carries an action button as of this pass; the primary CTA belongs at the end of the journey only. (6) LIGHTBOX SUPPORT -- .edutower-narrative-media img rules extended to .edutower-narrative-media .media-thumb so the existing shared assets/css/partials/media-lightbox.css component (read-only, already used on MamaDEX sub-pages) can wrap each supporting photograph without changing its framing, border or caption relationship. (7) CARD CONSOLIDATION -- no rule in this file forces a minimum section height; the fragmentation the owner flagged was an HTML-authoring pattern (one card per short proposition), corrected in the six journey pages themselves, not a CSS defect. Mobile hero face-avoidance system (v2.0.1) is retained unchanged -- it was verified correct by real browser screenshots and the owner's new complaints did not concern it. v2.0.1 (2026-07-22) and earlier: see prior file revision for the full history (browser-acceptance corrections, story and design-system compliance rebuild, narrative-layout activation, initial creation). ====================================================================================================== */ /* 1) Page token binding */ .page-edutower-journey { --page-bg: var(--sdx-color-edutower-bg); --page-primary: var(--sdx-color-edutower-blue); --page-secondary: var(--sdx-color-green-deep); --page-accent: var(--sdx-color-leaf-green); --page-depth: var(--sdx-color-stem-olive); --page-dark-base: var(--sdx-color-edutower-dark-base); --page-dark-surface: var(--sdx-color-edutower-dark-surface); --hero-vignette-from: rgba(47, 92, 104, 0.20); --hero-vignette-to: rgba(47, 92, 104, 0); --hero-focal: center 40%; background: var(--page-bg); color: var(--fg); } body.page-edutower-journey { background-color: var(--page-bg); } /* Per-page hero image + focal-position binding (verified by browser screenshot, v2.0.1 -- unchanged this pass). */ .page-edutower-learning { --hero-image: url('/assets/images/edutower/learning/edutower-learning-hero-nepal.webp'); --hero-focal: 68% 35%; } .page-edutower-teaching { --hero-image: url('/assets/images/edutower/teaching/edutower-teaching-hero-ghana.webp'); --hero-focal: 62% 48%; } .page-edutower-field-learning { --hero-image: url('/assets/images/edutower/field-learning/edutower-field-learning-hero-south-africa.webp'); --hero-focal: 72% 58%; } .page-edutower-research { --hero-image: url('/assets/images/edutower/research/edutower-research-hero-new-zealand.webp'); --hero-focal: 70% 52%; } .page-edutower-funding { --hero-image: url('/assets/images/edutower/funding/edutower-funding-hero-costa-rica.webp'); --hero-focal: 35% 58%; } .page-edutower-sponsored-learning { --hero-image: url('/assets/images/edutower/sponsored-learning/edutower-sponsored-learning-hero-rwanda.webp'); --hero-focal: 60% 30%; } /* 2) Hero -- no CTA on any journey page as of v3.0.0; headline, tagline and one short intro only. */ .page-edutower-journey .hero-wrap { position: relative; background-image: var(--hero-image); background-size: cover; background-position: var(--hero-focal); min-height: var(--hero-min); } .page-edutower-journey .hero-wrap::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--hero-vignette-from) 0%, var(--hero-vignette-to) 32%); } .page-edutower-journey .hero-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(8,14,16,0.58) 0%, rgba(8,14,16,0.30) 32%, rgba(8,14,16,0) 58%); } .page-edutower-journey .hero { display: flex; align-items: center; justify-content: flex-start; min-height: var(--hero-min); padding: 6rem clamp(1.5rem, 6vw, 5rem); } .page-edutower-journey .hero-content { position: relative; z-index: 1; max-width: 32rem; margin: 0; text-align: left; } .page-edutower-journey .headline { font-size: clamp(2.75rem, 6vw, 4.5rem); margin: 0 0 1.5rem; color: #ffffff; } .page-edutower-journey .tagline { color: var(--sdx-color-mama-amber); text-shadow: 0 4px 50px rgb(0, 0, 0), 0 4px 30px rgb(0, 0, 0), 0 8px 32px rgb(0, 0, 0); } .page-edutower-journey .hero .intro { max-width: 30rem; margin: 1.25rem 0 0; } /* 3) Primary button -- BKT-PIL-05 §5.1 dual-tone gradient. Hover is a box-shadow increase ONLY, matching mamadex.css's confirmed live treatment: no filter, no transform, no translate, no scale, no card movement. */ .page-edutower-journey .sdx-btn-primary { background: linear-gradient(145deg, var(--sdx-color-teal-deep) 0%, var(--page-depth) 100%); color: #ffffff; box-shadow: 0 3px 12px rgba(47,92,104,0.32); transform: none; } .page-edutower-journey .sdx-btn-primary:hover, .page-edutower-journey .sdx-btn-primary:focus-visible { box-shadow: 0 6px 20px rgba(47,92,104,0.48); transform: none; } .page-edutower-journey .edutower-final-cta { text-align: center; margin-top: 2rem; } .page-edutower-journey .edutower-final-cta .sdx-btn-primary { display: inline-flex; } /* 4) Section text -- eyebrow strengthened to the MamaDEX/Living Tower live scale (see changelog (1)). h1-h6/section-title/figure-caption remain otherwise global-owned; only structural spacing for in-body h3 subheads is set here. */ .page-edutower-journey .eyebrow { font-size: 1.1rem; font-weight: 600; letter-spacing: 0.15em; color: var(--page-primary); margin-bottom: 2rem; } .page-edutower-journey .sdx-card-section h3 { margin: 2rem 0 1rem; } .page-edutower-journey .sdx-card-section a:not([class]) { color: var(--page-primary); border-bottom: 1px solid rgba(from var(--page-primary) r g b / 0.30); transition: filter 0.22s ease; } .page-edutower-journey .sdx-card-section a:not([class]):hover { filter: brightness(0.85); } /* 5) Left-axis narrative body -- eyebrow, heading and prose share one left edge. Deliberately not a direct child of .sdx-card-section so the canonical centred h2 hard rule does not apply here -- a different, permitted heading pattern for sections whose deliberate design is a hard left axis (BKT-DOC-02 §4.1 governs the direct-child selector only). */ .page-edutower-journey .edutower-section-body { text-align: left; } .page-edutower-journey .edutower-section-body h2 { text-align: left; margin: 0 0 1rem; } .page-edutower-journey .edutower-section-body > .eyebrow:first-child { margin-bottom: 0.75rem; } .page-edutower-journey .edutower-section-body p { text-align: left; } .page-edutower-journey .edutower-section-body .section-intro { margin: 0 0 1.25rem; max-width: none; } /* 6) Narrative image/text sections -- dedicated image and text columns, no overlay text on photography. Alternates side via .edutower-narrative--reverse. Images may be wrapped in a lightbox trigger button (assets/css/partials/media- lightbox.css, read-only, unchanged) without altering their framing. */ .page-edutower-journey .edutower-narrative { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin: 2rem 0; } .page-edutower-journey .edutower-narrative-media img, .page-edutower-journey .edutower-narrative-media .media-thumb img { width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid var(--border); display: block; } .page-edutower-journey .edutower-narrative-media .media-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .page-edutower-journey .edutower-narrative-body h3 { margin-top: 0; } .page-edutower-journey .edutower-narrative-body p:last-child { margin-bottom: 0; } @media (min-width: 900px) { .page-edutower-journey .edutower-narrative { grid-template-columns: 1fr 1fr; gap: 3rem; } .page-edutower-journey .edutower-narrative--reverse .edutower-narrative-media { order: 1; } .page-edutower-journey .edutower-narrative--reverse .edutower-narrative-body { order: 2; } } /* 7) Left-aligned definition structure (unchanged component, retained for the handful of places a short bounded list still reads best this way). */ .page-edutower-journey .edutower-definitions { margin: 2rem 0; max-width: 760px; } .page-edutower-journey .edutower-definitions dt { font-family: var(--headline-font); font-weight: 700; font-size: 1.0625rem; color: var(--fg); margin: 1.75rem 0 0.5rem; } .page-edutower-journey .edutower-definitions dt:first-child { margin-top: 0; } .page-edutower-journey .edutower-definitions dd { margin: 0; padding-left: 0; color: var(--muted); line-height: 1.7; font-size: var(--body); } /* 8) SHARED NUMBERED PROGRESSION -- modelled on mamadex-restoration-evidence.css's .evidence-story-step (confirmed by direct inspection), using the governed purple primitive so it reads as a distinct sequence language from the teal/olive action-button language. No card per stage; one continuous vertical axis. */ .page-edutower-journey .edutower-progression { max-width: 44rem; margin: 2rem 0; padding: 0; list-style: none; } .page-edutower-journey .edutower-progression-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.75rem; text-align: left; } .page-edutower-journey .edutower-progression-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 3rem; inset-block-end: 0; inset-inline-start: calc(1.5rem - 1px); width: 2px; background: color-mix(in srgb, var(--sdx-color-purple-deep) 32%, var(--border)); } .page-edutower-journey .edutower-progression-number { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, var(--sdx-color-purple-deep) 0%, color-mix(in srgb, var(--sdx-color-purple-deep) 65%, black) 100%); color: #ffffff; font-weight: 700; box-shadow: 0 3px 12px color-mix(in srgb, var(--sdx-color-purple-deep) 28%, transparent); } .page-edutower-journey .edutower-progression-step h3 { margin: 0 0 0.35rem; font-family: var(--headline-font); font-size: 1.25rem; color: var(--fg); } .page-edutower-journey .edutower-progression-step p { margin: 0; color: var(--muted); font-size: var(--body); line-height: 1.65; } .page-edutower-journey .edutower-progression-note { max-width: 44rem; margin: 0.5rem 0 0; padding: 1.25rem 1.5rem; background: rgba(120, 113, 108, 0.08); border: 1px solid rgba(120, 113, 108, 0.18); border-left: 4px solid var(--sdx-color-purple-deep); border-radius: 0 0.5rem 0.5rem 0; text-align: left; color: var(--muted); font-size: var(--body); line-height: 1.6; } /* 9) Note box and recognition note (unchanged components). */ .page-edutower-journey .note-box { background: rgba(120,113,108,0.08); border: 1px solid var(--border); padding: 1.5rem; margin: 1.5rem 0; border-radius: 0.5rem; } .page-edutower-journey .edutower-recognition-note { background: var(--surface-alt); border-left: 3px solid var(--page-primary); padding: 1.25rem 1.5rem; margin: 1.5rem 0 0; border-radius: 0.5rem; font-size: 1.0625rem; line-height: 1.6; color: var(--fg); } /* 9.1) THREE-STAGE SUPPORTED-PRACTICE PROGRESSION -- ported from the accepted hub's .edutower-journey-progression (edutower.css, read-only), same dimensional marker construction as the four-stage Record progression above but recoloured to EduTower's own teal so the two sequences read as related but distinct; amber only for the one withdrawal-threshold stage. Semantic
      /
    1. ; list-style/padding reset here since the hub's own version is a plain
      stack. */ .page-edutower-journey .edutower-journey-progression { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 50rem; } .page-edutower-journey .edutower-journey-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 0 0 1.75rem; text-align: left; } .page-edutower-journey .edutower-journey-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 3rem; inset-block-end: 0; inset-inline-start: calc(1.5rem - 1px); width: 2px; background: color-mix(in srgb, var(--sdx-color-teal-deep) 32%, var(--border)); } .page-edutower-journey .edutower-journey-number { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: linear-gradient(135deg, var(--sdx-color-teal-deep) 0%, color-mix(in srgb, var(--sdx-color-teal-deep) 65%, black) 100%); color: #ffffff; font-weight: 700; box-shadow: 0 4px 14px color-mix(in srgb, var(--sdx-color-teal-deep) 35%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .page-edutower-journey .edutower-journey-step h3 { margin: 0 0 0.35rem; font-family: var(--headline-font); font-weight: 700; color: var(--fg); font-size: clamp(1.25rem, 1.13rem + 0.35vw, 1.5rem); line-height: 1.2; } .page-edutower-journey .edutower-journey-step p { margin: 0; color: var(--muted); font-size: clamp(1.025rem, 0.98rem + 0.15vw, 1.125rem); line-height: 1.55; } /* The withdrawal stage: carried by type and colour alone (amber, tinted heading), never a graphic device; a little more breathing room above and below. */ .page-edutower-journey .edutower-journey-step--threshold { padding-block: 0.25rem 2rem; } .page-edutower-journey .edutower-journey-step--threshold:not(:last-child)::after { inset-block-start: 3.25rem; } .page-edutower-journey .edutower-journey-step--threshold .edutower-journey-number { background: linear-gradient(135deg, var(--sdx-color-mama-amber) 0%, color-mix(in srgb, var(--sdx-color-mama-amber) 65%, black) 100%); box-shadow: 0 4px 14px color-mix(in srgb, var(--sdx-color-mama-amber) 40%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .page-edutower-journey .edutower-journey-step--threshold h3 { color: var(--sdx-color-mama-amber); } /* 9.2) INTERNAL TURNING POINT -- sits beneath the three-stage progression, inside the same .edutower-learning-practice section (not a second .sdx-card-section): the progression establishes the movement, this concludes it. No card, no fill, no shadow, no border-radius -- separation from the progression above is a single thin rule only, matching the accepted hub's restrained threshold treatment. Left-aligned, sharing the section's own axis; page-scoped since no other journey page uses it. */ .page-edutower-journey .edutower-learning-turning-point { text-align: left; max-width: 48rem; margin-top: 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } /* v3.2.4: no light-mode amber override on this eyebrow (removed -- see changelog). Falls back to the shared .eyebrow default (var(--page-primary), 4.63:1 on the card background) in light mode; still amber in dark mode via the existing sitewide dark-mode eyebrow rule (9.02:1 on the dark surface). */ .page-edutower-journey .edutower-learning-turning-point h3 { text-align: left; margin: 0 0 0.75rem; font-family: var(--headline-font); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.3; color: var(--fg); } .page-edutower-journey .edutower-learning-turning-point p { text-align: left; margin: 0; max-width: none; color: var(--muted); font-size: var(--body); line-height: 1.65; } .page-edutower-journey .edutower-learning-turning-point-conclusion { font-family: var(--text-font); font-weight: 700; font-size: 1.0625rem; color: var(--fg) !important; margin: 1rem 0 0 !important; } /* Balance the combined Practice + Turning Point section across the section's real width instead of leaving the progression as a narrow column with empty space beside and below it: intro gets a comfortable reading measure, the progression (and its text column, which is fr-based) gets noticeably more room than the shared 50rem default. Page-scoped override -- narrowest safe change, no other journey page uses .edutower-learning-practice. */ .page-edutower-journey .edutower-learning-practice .section-intro { max-width: 52rem; } .page-edutower-journey .edutower-learning-practice .edutower-journey-progression { max-width: 68rem; } /* 9.3) RECORD LAYOUT -- photograph beside the shared progression, ported from the accepted hub's .edutower-recognition-layout/-media/-content composition. */ .page-edutower-journey .edutower-recognition-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: stretch; gap: clamp(2rem, 5vw, 4rem); margin-top: 1rem; } .page-edutower-journey .edutower-recognition-content { min-width: 0; } /* Figure is a column flex box (photo frame + caption below); only the frame stretches to fill the column height. Unlike the hub's version, this figure carries a real
      -- without the frame wrapper, display:flex on the figure itself would lay the image and caption out side by side and crush the caption into a sliver. */ .page-edutower-journey .edutower-recognition-media { margin: 0; display: flex; flex-direction: column; } .page-edutower-journey .edutower-recognition-media-frame { flex: 1 1 auto; min-height: 0; display: flex; } .page-edutower-journey .edutower-recognition-media img { width: 100%; height: 100%; min-height: 22rem; object-fit: cover; border-radius: 0.75rem; border: 1px solid var(--border); display: block; } .page-edutower-journey .edutower-recognition-media figcaption { flex: none; } /* 9.4) BEGIN THE ROUTE -- the closing section is intentionally centred as a whole (heading, body, button) with one primary action and one quiet text handoff. Learning-page-specific: this page removes the shared .sdx-cta-band pattern in favour of one dominant CTA. The canonical .sdx-card-section > h2 pillar-colour underline (global.css) is dropped here -- a decorative rule under a short closing statement read as clutter; clear vertical spacing replaces it instead. */ .page-edutower-journey .edutower-route { text-align: center; } .page-edutower-journey .edutower-route h2 { border-bottom: none; padding-bottom: 0; margin-bottom: 1rem; } .page-edutower-journey .edutower-route p { max-width: 46rem; margin-left: auto; margin-right: auto; } /* 10) Media queries */ @media (max-width: 968px) { .page-edutower-journey .hero { padding: 4rem clamp(1.25rem, 5vw, 3rem); } .page-edutower-journey .edutower-recognition-layout { grid-template-columns: 1fr; gap: 1.75rem; } .page-edutower-journey .edutower-recognition-media img { height: auto; min-height: 0; } } @media (max-width: 768px) { .page-edutower-journey .sdx-card-section { padding: 2rem 1.25rem; } } @media (max-width: 640px) { .page-edutower-journey .hero-wrap::after { background: linear-gradient(to top, rgba(8,14,16,0.74) 0%, rgba(8,14,16,0.46) 40%, rgba(8,14,16,0.15) 100%); } .page-edutower-journey .hero { justify-content: center; align-items: flex-end; padding: 3.5rem 1.25rem 3rem; } .page-edutower-journey .hero-content { max-width: 100%; text-align: center; } .page-edutower-journey .hero .intro { max-width: 100%; margin-left: auto; margin-right: auto; } .page-edutower-field-learning .hero-wrap::after, .page-edutower-funding .hero-wrap::after, .page-edutower-teaching .hero-wrap::after, .page-edutower-research .hero-wrap::after { background: linear-gradient(to bottom, rgba(8,14,16,0.74) 0%, rgba(8,14,16,0.46) 40%, rgba(8,14,16,0.15) 100%); } .page-edutower-field-learning .hero, .page-edutower-funding .hero, .page-edutower-teaching .hero, .page-edutower-research .hero { align-items: flex-start; padding: 3rem 1.25rem 3.5rem; } .page-edutower-learning .hero-content, .page-edutower-sponsored-learning .hero-content { background: rgba(8, 14, 16, 0.60); border-radius: 1rem; padding: 1.5rem 1.25rem; } .page-edutower-journey .edutower-progression-step { grid-template-columns: 2.5rem minmax(0,1fr); } .page-edutower-journey .edutower-progression-number { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; } .page-edutower-journey .edutower-progression-step:not(:last-child)::after { inset-inline-start: calc(1.25rem - 1px); } .page-edutower-journey .edutower-journey-step { grid-template-columns: 2.5rem minmax(0,1fr); } .page-edutower-journey .edutower-journey-number { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; } .page-edutower-journey .edutower-journey-step:not(:last-child)::after { inset-inline-start: calc(1.25rem - 1px); } } @media (max-width: 480px) { .page-edutower-journey .hero-wrap, .page-edutower-journey .hero { min-height: 480px; } } @media (prefers-reduced-motion: reduce) { .page-edutower-journey * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* 11) Dark mode -- [data-theme="dark"] only, per BKT-DOC-01 §3.2. */ [data-theme="dark"] .page-edutower-journey { background: var(--page-dark-base); color: var(--sdx-color-ui-dark-text); } [data-theme="dark"] .page-edutower-journey .note-box { background: rgba(245,176,20,0.07); border-color: rgba(245,176,20,0.18); } [data-theme="dark"] .page-edutower-journey .edutower-recognition-note { background: rgba(255,255,255,0.04); } [data-theme="dark"] .page-edutower-journey .edutower-progression-note { background: rgba(255,255,255,0.04); } [data-theme="dark"] .page-edutower-journey .edutower-definitions dd { color: var(--muted); } [data-theme="dark"] .page-edutower-journey .edutower-narrative-media img { border-color: var(--border); } [data-theme="dark"] .page-edutower-journey .eyebrow { color: var(--sdx-color-mama-amber); } [data-theme="dark"] .page-edutower-journey .edutower-recognition-media img { border-color: var(--border); } [data-theme="dark"] .page-edutower-journey .edutower-learning-turning-point { border-top-color: rgba(255,255,255,0.10); } /* 9.5) TEACHING PAGE -- hero headline/width correction (v3.2.1). Page-scoped to .page-edutower-teaching only: every other journey page keeps the shared clamp(2.75rem,6vw,4.5rem)/32rem hero treatment untouched. This page's unchanged headline wording ("A Skill Becomes Teachable When Its Decisions Become Visible") was rendering 7 lines at 1440px against the shared values (verified by real headless-Chrome measurement); this correction renders it at 3 lines. The widened text column (44rem, right edge ~797px at 1440px) still sits inside the existing hero-wrap::after scrim's darkened 0-58%-width zone (~835px at 1440px), so it does not reach into the photograph's own open/undarkened area. */ .page-edutower-teaching .hero-content { max-width: 44rem; } .page-edutower-teaching .headline { font-size: clamp(2.5rem, 3.6vw, 3.5rem); } /* 9.6) TEACHING PAGE -- restores the canonical centred, pillar-underlined heading treatment (global.css .sdx-card-section > h2, values copied verbatim) for the one heading on this page that cannot be a direct child of .sdx-card-section: it sits inside the image-pairing .edutower-narrative-body wrapper (v3.2.1). The page's other three major headings need no rule here at all -- their markup no longer wraps them in .edutower-section-body, so they already get this exact treatment for free from global.css. */ .page-edutower-teaching .edutower-narrative-body h2 { font-family: var(--headline-font); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; text-align: center; color: var(--fg); margin: 0 0 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--page-primary); } [data-theme="dark"] .page-edutower-teaching .edutower-narrative-body h2 { border-bottom-color: rgba(from var(--page-primary) r g b / 0.40); } /* 9.6.1) TEACHING PAGE -- heading-to-body gap correction (v3.2.2). The canonical .sdx-card-section > h2 rule sets margin:0 on every side, leaving no breathing room beneath the underline on this page's direct-child major headings. Excludes .edutower-route explicitly so the closing CTA heading's own established no-underline/margin-bottom:1rem treatment is untouched. Only margin-bottom is set -- the gap above the heading (eyebrow to heading) is deliberately left alone. */ .page-edutower-teaching .sdx-card-section:not(.edutower-route) > h2 { margin-bottom: 1.5rem; } /* 9.7) TEACHING PAGE -- narrative body-copy scale (v3.2.1). Applies to the flowing prose in the opening image-paired section and to the dedicated reading column used for "What the Educator Learns" (9.9 below). 1.0625rem/1.65 matches the brief's accepted-Learning-page target scale; .section-intro (global.css, reused verbatim elsewhere on this page) already sits at 1.125rem/1.7, the upper end of that same range, so nothing is invented here. */ .page-edutower-teaching .edutower-narrative-body p { text-align: left; font-size: 1.0625rem; line-height: 1.65; color: var(--fg); margin: 0 0 1.25rem; } .page-edutower-teaching .edutower-narrative-body p:last-child { margin-bottom: 0; } /* 9.8) TEACHING PAGE -- the learner's interrupting question (v3.2.1): a visually distinct but integrated line inside the flowing prose. No card, no background, no quotation icon -- a left rule and larger display-weight type only. */ .page-edutower-teaching .edutower-teaching-question-line { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--page-primary); font-family: var(--headline-font); font-weight: 700; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); line-height: 1.4; color: var(--fg); } /* 9.9) TEACHING PAGE -- "What the Educator Learns" reading column (v3.2.1): a centred, comfortable-measure column with left-ranged text, replacing the previous bare .edutower-section-body wrap (which inherited the site's 1rem default). */ .page-edutower-teaching .edutower-teaching-prose { max-width: 46rem; margin: 0 auto; text-align: left; } .page-edutower-teaching .edutower-teaching-prose p { font-size: 1.0625rem; line-height: 1.65; color: var(--fg); margin: 0 0 1.25rem; } .page-edutower-teaching .edutower-teaching-prose p:last-child { margin-bottom: 0; } /* 9.10) TEACHING PAGE -- learner-practice photograph nested inside stage 3 of the three-stage progression (v3.2.1), so it reads as evidence for "the learner takes the task" rather than a full-width interruption between the progression and the Turning Point. Reuses .edutower-narrative-media's own img/figcaption rules for consistent framing; this class only adds the spacing appropriate to its new position inside a progression step's content column. */ .page-edutower-teaching .edutower-teaching-stage-media { margin: 1.25rem 0 0; } .page-edutower-teaching .edutower-teaching-stage-media img { width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid var(--border); display: block; } /* 9.10.1) TEACHING PAGE -- amber contrast correction (v3.2.2). The shared .edutower-journey-step--threshold h3 rule (component 9) is intentionally amber for the Learning page's stage 2 heading, which is untouched. This page's stage 3 heading ("The learner takes the task") is large display type, not a marker or accent, so it reverts to the normal foreground heading colour here; amber stays on the stage 3 number marker, the Turning Point eyebrow and the connecting-line accents (all separate, untouched selectors). */ .page-edutower-teaching .edutower-journey-step--threshold h3 { color: var(--fg); } [data-theme="dark"] .page-edutower-teaching .edutower-teaching-stage-media img { border-color: var(--border); } /* 9.11) TEACHING PAGE -- internal Turning Point (v3.2.1, carried forward from v3.2.0 unchanged in structure), styled on the accepted .edutower-learning-turning-point pattern: single thin top rule, amber eyebrow, no card, no fill, no shadow, no border-radius. Body copy bumped to the page's 1.0625rem narrative scale (was the 1rem site default). */ .page-edutower-teaching .edutower-teaching-turning-point { text-align: left; max-width: 48rem; margin-top: 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } /* v3.2.3: no light-mode amber override on this eyebrow (removed -- see changelog). It now falls back to the shared .eyebrow default (var(--page-primary), 4.63:1 on the card background) in light mode, and still renders amber in dark mode via the existing sitewide dark-mode eyebrow rule ([data-theme="dark"] .page-edutower- journey .eyebrow, 9.02:1 on the dark surface) -- no new selector needed for that. */ .page-edutower-teaching .edutower-teaching-turning-point h3 { text-align: left; margin: 0 0 0.75rem; font-family: var(--headline-font); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.3; color: var(--fg); } .page-edutower-teaching .edutower-teaching-turning-point p { text-align: left; margin: 0; max-width: none; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; } .page-edutower-teaching .edutower-teaching-turning-point-conclusion { font-family: var(--text-font); font-weight: 700; font-size: 1.0625rem; color: var(--fg) !important; margin: 1rem 0 0 !important; } [data-theme="dark"] .page-edutower-teaching .edutower-teaching-turning-point { border-top-color: rgba(255,255,255,0.10); } /* 9.12) TEACHING PAGE -- Boundary closing note (v3.2.1): a restrained text treatment, a short teal marker/border only -- no fill, no radius, no padding box. Replaces the previous .edutower-recognition-note treatment, whose surface-alt background read as too heavy for a deliberately subordinate section. */ .page-edutower-teaching .edutower-teaching-boundary-note { margin: 1.25rem 0 0; padding-left: 1rem; border-left: 3px solid var(--page-primary); color: var(--fg); font-size: 1rem; line-height: 1.6; } /* ========================================================================== FIELD LEARNING PAGE (v3.3.0) -- page-scoped rules, see changelog above. ========================================================================== */ /* 10.1) Hero headline/width correction so the unchanged headline wording renders within 4 lines at 1440px. */ .page-edutower-field-learning .hero-content { max-width: 44rem; } .page-edutower-field-learning .headline { font-size: clamp(2.25rem, 3.2vw, 3.25rem); } /* 10.2) Hero tagline: v3.3.1 restores the shared amber default (removed the v3.3.0 white override outright) -- governed token, same shadow, per this pass's owner instruction superseding the earlier "no amber" requirement. */ /* 10.3) v3.3.1: no rule needed here any more. The Beginning heading is now a direct child of .sdx-card-section.edutower-field-beginning in the HTML (moved out of .edutower-narrative-body), so it gets the canonical centred, pillar-underlined treatment for free from global.css, exactly like the page's other three major headings. See 10.13 below for the margin-bottom rhythm rule (unchanged, still applies to all four). */ .page-edutower-field-learning .sdx-card-section:not(.edutower-route) > h2 { margin-bottom: 1.5rem; } /* 10.4) Narrative body-copy scale, matching the accepted Learning/corrected Teaching reading scale. */ .page-edutower-field-learning .edutower-narrative-body p { text-align: left; font-size: 1.0625rem; line-height: 1.65; color: var(--fg); margin: 0 0 1.25rem; } .page-edutower-field-learning .edutower-narrative-body p:last-child { margin-bottom: 0; } /* 10.4.1) Beginning section geometry (v3.3.2). The shared .edutower-narrative component sets align-items:center unconditionally, which floated a shorter image in the middle of this section's taller text column with equal empty space above and below (owner screenshot). v3.3.1's align-items:start override only relocated that same void to below the image instead of removing it. This pass sets align-items:stretch instead (an explicit page-scoped override, since the shared rule's own default is "center", not the grid-initial "stretch") and makes the image fill the full stretched row height via the same frame + object-fit:cover technique already established and accepted on the Learning page's own Record section (.edutower-recognition-media/-frame, component 9.3 -- read-only, unchanged): a wrapping "frame" div is the flex item that actually stretches and clips the image, while the figure itself stays a plain flex column so the caption below is never squeezed. The photograph now matches the text column's own height exactly, at every viewport, with no dead space in either column. Cropping is via CSS object-fit only; the source asset is untouched. .edutower-field-beginning-media/-media-frame are new markup added in the HTML (a div wrapping the existing , no change to src/alt/caption) -- page+section scoped; Learning/Teaching's own .edutower-narrative-media is untouched. Root cause of the original "thumbnail" complaint (v3.3.1, still valid):
      's UA-stylesheet default margin (1em 40px) was never reset for .edutower-narrative- media, shrinking the rendered image 80px narrower than its own column (measured 395px actual vs. 475px column at 1440px) regardless of the 50/50-vs-55/45 column split. That reset is retained below. */ .page-edutower-field-learning .edutower-field-beginning .edutower-narrative-media { margin: 0; } .page-edutower-field-learning .edutower-field-beginning .edutower-narrative { align-items: stretch; } @media (min-width: 900px) { .page-edutower-field-learning .edutower-field-beginning .edutower-narrative { /* v3.3.3: fr units, not %. The shared rule's gap:3rem is not subtracted from percentage tracks (55%+45%+3rem gap > 100% of the container), which pushed the image column past the section's right padding -- confirmed by owner screenshot and by direct measurement. fr units correctly divide the space remaining after the gap is subtracted, giving the same ~55/45 visual ratio with no overflow. */ grid-template-columns: 55fr 45fr; } } /* ========================================================================== SPONSORED LEARNING PAGE (v3.6.0) -- one continuous adult learner story. All rules are page-scoped so the five accepted journey pages remain frozen. ========================================================================== */ /* 14.1) Hero: the accepted long-form journey headline scale, a stable image-safe measure, and no private font-family, weight, shadow, tracking or intro scale. */ .page-edutower-sponsored-learning .hero-content { max-width: 38rem; } .page-edutower-sponsored-learning .headline { font-size: clamp(2.25rem, 3.2vw, 3.25rem); } .page-edutower-sponsored-learning .hero .intro { max-width: 38rem; } /* 14.2) Major heading rhythm and shared narrative reading scale. */ .page-edutower-sponsored-learning .sdx-card-section { text-align: left; } .page-edutower-sponsored-learning .sdx-card-section:not(.edutower-route) > .eyebrow:first-child { display: block; margin-bottom: 1.75rem; } .page-edutower-sponsored-learning .sdx-card-section:not(.edutower-route) > h2 { width: 100%; margin-top: 0; margin-bottom: 1.5rem; } .page-edutower-sponsored-learning .edutower-sponsored-prose, .page-edutower-sponsored-learning .edutower-sponsored-turning-point, .page-edutower-sponsored-learning .edutower-sponsored-record, .page-edutower-sponsored-learning .edutower-sponsored-boundary .section-intro, .page-edutower-sponsored-learning .edutower-sponsored-boundary-rows, .page-edutower-sponsored-learning .edutower-sponsored-boundary-note { max-width: 64rem; } .page-edutower-sponsored-learning .edutower-sponsored-prose p, .page-edutower-sponsored-learning .edutower-sponsored-turning-point p { margin: 0 0 1.25rem; color: var(--fg); font-size: 1.0625rem; line-height: 1.7; } .page-edutower-sponsored-learning .edutower-sponsored-prose p:last-child, .page-edutower-sponsored-learning .edutower-sponsored-turning-point p:last-child { margin-bottom: 0; } /* 14.3) Beginning: full-width heading, then one substantial copy/image field. */ .page-edutower-sponsored-learning .edutower-sponsored-beginning-grid { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); gap: 3rem; align-items: start; } .page-edutower-sponsored-learning .edutower-sponsored-purpose-line { padding-left: 1rem; border-left: 3px solid var(--sdx-color-teal-deep); font-weight: 600; } .page-edutower-sponsored-learning .edutower-sponsored-figure { margin: 0; } .page-edutower-sponsored-learning .edutower-sponsored-figure .media-thumb { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .page-edutower-sponsored-learning .edutower-sponsored-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 0.75rem; } .page-edutower-sponsored-learning .media-thumb::-moz-focus-inner { border: 0; padding: 0; } .page-edutower-sponsored-learning #media-lightbox .lightbox-caption { max-width: none; width: 100%; align-self: stretch; box-sizing: border-box; } /* 14.4) Arrangement: one readable introduction and one continuous route. */ .page-edutower-sponsored-learning .edutower-sponsored-arrangement > .section-intro { max-width: 64rem; margin: 0 0 1.75rem; text-align: left; font-size: 1.0625rem; line-height: 1.7; } .page-edutower-sponsored-learning .edutower-sponsored-route-progression { max-width: 68rem; margin-top: 0; } .page-edutower-sponsored-learning .edutower-sponsored-route-progression .edutower-journey-step { grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.875rem; padding-bottom: 1.125rem; } .page-edutower-sponsored-learning .edutower-sponsored-route-progression .edutower-journey-step:not(:last-child)::after { inset-block-start: 2.75rem; inset-inline-start: calc(1.375rem - 1px); } .page-edutower-sponsored-learning .edutower-sponsored-route-progression .edutower-journey-number { width: 2.75rem; height: 2.75rem; box-shadow: 0 2px 6px rgb(0 0 0 / 0.14), 0 1px 2px rgb(0 0 0 / 0.10); } .page-edutower-sponsored-learning .edutower-sponsored-route-progression .edutower-journey-step h3 { margin-bottom: 0.375rem; color: var(--fg); font-size: clamp(1.25rem, 1.55vw, 1.5rem); line-height: 1.28; } .page-edutower-sponsored-learning .edutower-sponsored-route-progression .edutower-journey-step p { line-height: 1.65; } .page-edutower-sponsored-learning .edutower-sponsored-route-closing { max-width: 64rem; margin: 0.5rem 0 0; padding-left: 1rem; border-left: 3px solid var(--sdx-color-teal-deep); color: var(--fg); font-family: var(--headline-font); font-size: clamp(1.1875rem, 1.05rem + 0.35vw, 1.375rem); font-weight: 700; line-height: 1.5; } /* 14.5) Learning, review image, Turning Point and recognition form one sequence. */ .page-edutower-sponsored-learning .edutower-sponsored-learning-grid { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); gap: 3rem; align-items: start; } .page-edutower-sponsored-learning .edutower-sponsored-turning-point { margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--border); } .page-edutower-sponsored-learning .edutower-sponsored-turning-point > .eyebrow, .page-edutower-sponsored-learning .edutower-sponsored-record > .eyebrow { display: block; margin-bottom: 1.25rem; } .page-edutower-sponsored-learning .edutower-sponsored-turning-point > h3, .page-edutower-sponsored-learning .edutower-sponsored-record > h3 { margin: 0 0 1rem; color: var(--fg); font-family: var(--headline-font); font-size: clamp(1.5rem, 1.25rem + 0.65vw, 1.875rem); font-weight: 700; line-height: 1.3; } .page-edutower-sponsored-learning .edutower-sponsored-turning-closing { padding-left: 1rem; border-left: 3px solid var(--sdx-color-teal-deep); font-family: var(--headline-font); font-size: 1.1875rem !important; font-weight: 700; line-height: 1.55 !important; } .page-edutower-sponsored-learning .edutower-sponsored-record { margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--border); } .page-edutower-sponsored-learning .edutower-sponsored-recognition-progression { max-width: 60rem; margin-top: 1.5rem; } .page-edutower-sponsored-learning .edutower-sponsored-recognition-progression .edutower-journey-step:not(:last-child)::after { background: color-mix(in srgb, var(--sdx-color-purple-deep) 32%, var(--border)); } .page-edutower-sponsored-learning .edutower-sponsored-recognition-progression .edutower-journey-number { background: linear-gradient(135deg, var(--sdx-color-purple-deep) 0%, color-mix(in srgb, var(--sdx-color-purple-deep) 65%, black) 100%); box-shadow: 0 4px 14px color-mix(in srgb, var(--sdx-color-purple-deep) 35%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.18); } .page-edutower-sponsored-learning .edutower-sponsored-recognition-progression h4 { margin: 0 0 0.35rem; color: var(--fg); font-family: var(--headline-font); font-size: clamp(1.25rem, 1.13rem + 0.35vw, 1.5rem); font-weight: 700; line-height: 1.2; } .page-edutower-sponsored-learning .edutower-sponsored-recognition-note { max-width: 60rem; margin: 0.5rem 0 0; padding-left: 1rem; border-left: 3px solid var(--sdx-color-purple-deep); color: var(--fg); font-size: 1.0625rem; line-height: 1.65; } /* 14.6) Boundary: three aligned propositions and one restrained note. */ .page-edutower-sponsored-learning .edutower-sponsored-boundary > .section-intro { margin: 0 0 1.5rem; text-align: left; font-size: 1.0625rem; line-height: 1.7; } .page-edutower-sponsored-learning .edutower-sponsored-boundary-rows { margin: 0; } .page-edutower-sponsored-learning .edutower-sponsored-boundary-rows > div { display: grid; grid-template-columns: minmax(15rem, 0.35fr) minmax(0, 0.65fr); gap: 2rem; padding: 1.125rem 0; border-top: 1px solid var(--border); } .page-edutower-sponsored-learning .edutower-sponsored-boundary-rows > div:last-child { border-bottom: 1px solid var(--border); } .page-edutower-sponsored-learning .edutower-sponsored-boundary-rows h3 { margin: 0; color: var(--fg); font-family: var(--headline-font); font-size: 1.0625rem; font-weight: 700; line-height: 1.4; } .page-edutower-sponsored-learning .edutower-sponsored-boundary-rows p { margin: 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; } .page-edutower-sponsored-learning .edutower-sponsored-boundary-note { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 3px solid var(--sdx-color-teal-deep); color: var(--fg); font-size: 1.0625rem; line-height: 1.65; } /* 14.7) One terminal action. */ .page-edutower-sponsored-learning .edutower-sponsored-conversation > .eyebrow:first-child { margin-bottom: 1.5rem; } .page-edutower-sponsored-learning .edutower-sponsored-conversation p { font-size: 1.0625rem; line-height: 1.6; } .page-edutower-sponsored-learning .edutower-sponsored-conversation .edutower-final-cta { margin-top: 1.5rem; } /* 14.8) Governed teal eyebrows in both themes. */ [data-theme="dark"] .page-edutower-sponsored-learning .eyebrow { color: var(--sdx-color-edutower-blue); } @media (max-width: 899px) { .page-edutower-sponsored-learning .edutower-sponsored-beginning-grid, .page-edutower-sponsored-learning .edutower-sponsored-learning-grid { grid-template-columns: 1fr; gap: 1.75rem; } } @media (max-width: 640px) { .page-edutower-sponsored-learning { --hero-focal: 24% 32%; } .page-edutower-sponsored-learning .hero-wrap::after { background: linear-gradient(to bottom, rgba(8,14,16,0.74) 0%, rgba(8,14,16,0.46) 42%, rgba(8,14,16,0.15) 100%); } .page-edutower-sponsored-learning .hero { align-items: flex-start; padding: 3rem 1.25rem 3.5rem; } .page-edutower-sponsored-learning .hero-content { max-width: 100%; padding: 0; border-radius: 0; background: none; text-align: left; } .page-edutower-sponsored-learning .headline { font-size: clamp(2.5rem, 10.5vw, 2.75rem); } .page-edutower-sponsored-learning .edutower-sponsored-route-progression .edutower-journey-step { grid-template-columns: 2.375rem minmax(0, 1fr); gap: 0.875rem; padding-bottom: 0.875rem; } .page-edutower-sponsored-learning .edutower-sponsored-route-progression .edutower-journey-step:not(:last-child)::after { inset-block-start: 2.375rem; inset-inline-start: calc(1.1875rem - 1px); } .page-edutower-sponsored-learning .edutower-sponsored-route-progression .edutower-journey-number { width: 2.375rem; height: 2.375rem; } .page-edutower-sponsored-learning .edutower-sponsored-route-progression .edutower-journey-step h3 { font-size: clamp(1.1875rem, 5.1vw, 1.3125rem); line-height: 1.3; } .page-edutower-sponsored-learning .sdx-card-section:not(.edutower-route) > .eyebrow:first-child { margin-bottom: 1.375rem; } .page-edutower-sponsored-learning .edutower-sponsored-turning-point > .eyebrow, .page-edutower-sponsored-learning .edutower-sponsored-record > .eyebrow { margin-bottom: 1rem; } .page-edutower-sponsored-learning .edutower-sponsored-conversation > .eyebrow:first-child { margin-bottom: 1.25rem; } .page-edutower-sponsored-learning .edutower-sponsored-boundary-rows > div { grid-template-columns: 1fr; gap: 0.4rem; } } .page-edutower-field-learning .edutower-field-beginning-media { display: flex; flex-direction: column; } .page-edutower-field-learning .edutower-field-beginning-media-frame { flex: 1 1 auto; min-height: 0; display: flex; } .page-edutower-field-learning .edutower-field-beginning-media-frame img { width: 100%; height: 100%; min-height: 16rem; object-fit: cover; border-radius: 0.75rem; border: 1px solid var(--border); display: block; } .page-edutower-field-learning .edutower-field-beginning-media figcaption { flex: none; } [data-theme="dark"] .page-edutower-field-learning .edutower-field-beginning-media-frame img { border-color: var(--border); } /* 10.5) The field question: a visually distinct but integrated line inside the flowing prose. No card, no background, no quotation icon. */ .page-edutower-field-learning .edutower-field-question-line { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--page-primary); font-family: var(--headline-font); font-weight: 700; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); line-height: 1.4; color: var(--fg); } /* 10.6) Investigation section: readable prose width for the introduction, not a centred narrow tower. Widened 52rem -> 62rem (v3.3.1) -- still left-aligned, still not a centred island. */ .page-edutower-field-learning .edutower-field-investigation .section-intro { max-width: 62rem; text-align: left; margin-left: 0; margin-right: 0; } /* 10.6.1) Investigation progression: the shared .edutower-journey-progression caps at 50rem (component 9, also used unmodified by Learning/Teaching -- untouched there). Page+section-scoped override widens it here only, so the progression uses more of the section's real width (v3.3.1). */ .page-edutower-field-learning .edutower-field-investigation .edutower-journey-progression { max-width: 65rem; } /* 10.7) Stage titles stay the normal foreground colour throughout, including stage 3 -- amber is confined to the stage 3 circular marker only (never a reading colour). */ .page-edutower-field-learning .edutower-journey-step--threshold h3 { color: var(--fg); } /* 10.8) Investigation photograph (v3.3.1: moved in the HTML to sit as a full-width section-level sibling immediately after the progression's closing
    , not nested inside stage 3's own list-item content div -- that nesting was what constrained it to a narrow, indented column. As a section-level sibling it now uses the section's full available width automatically, subject only to the section's own padding; no width rule was needed here beyond what already existed. Still reads as belonging to stage 3 by direct proximity (Gestalt): it is the very next element after stage 3's list item closes.) Reuses .edutower-narrative-media's own img/figcaption rules for consistent framing. */ .page-edutower-field-learning .edutower-field-stage-media { margin: 1.75rem 0 0; } .page-edutower-field-learning .edutower-field-stage-media img { width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid var(--border); display: block; } [data-theme="dark"] .page-edutower-field-learning .edutower-field-stage-media img { border-color: var(--border); } /* 10.9) Internal Turning Point (v3.3.1: the outer block's 48rem cap is removed -- width:100% -- so the top-rule separator spans the section's full internal width; an inner max-width:62rem is applied to the eyebrow/heading/body/conclusion instead, so the readable text still keeps a sane measure). No card, no fill, no shadow, no border-radius. Explicit eyebrow colour override in both themes -- this page's brief requires teal here even in dark mode, unlike every other eyebrow on every journey page, which the shared sitewide dark-mode rule turns amber (untouched, still correct everywhere else). */ .page-edutower-field-learning .edutower-field-turning-point { text-align: left; width: 100%; max-width: none; margin-top: 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } .page-edutower-field-learning .edutower-field-turning-point .eyebrow, .page-edutower-field-learning .edutower-field-turning-point h3, .page-edutower-field-learning .edutower-field-turning-point p, .page-edutower-field-learning .edutower-field-turning-point-conclusion { max-width: 62rem; } [data-theme="dark"] .page-edutower-field-learning .edutower-field-turning-point .eyebrow { color: var(--page-primary); } .page-edutower-field-learning .edutower-field-turning-point h3 { text-align: left; margin: 0 0 0.75rem; font-family: var(--headline-font); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.3; color: var(--fg); } .page-edutower-field-learning .edutower-field-turning-point p { text-align: left; margin: 0; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; } .page-edutower-field-learning .edutower-field-turning-point-conclusion { font-family: var(--text-font); font-weight: 700; font-size: 1.0625rem; color: var(--fg) !important; margin: 1rem 0 0 !important; } [data-theme="dark"] .page-edutower-field-learning .edutower-field-turning-point { border-top-color: rgba(255,255,255,0.10); } /* 10.10) "What Returns to the Work" reading column (v3.3.1: left-aligned full editorial field, 62rem, margin:0 -- was a centred 46rem column, margin:0 auto, which read as prose arbitrarily compressed into the middle of the card). */ .page-edutower-field-learning .edutower-field-prose { max-width: 62rem; margin: 0; text-align: left; } .page-edutower-field-learning .edutower-field-prose p { font-size: 1.0625rem; line-height: 1.65; color: var(--fg); margin: 0 0 1.25rem; } .page-edutower-field-learning .edutower-field-prose p:last-child { margin-bottom: 0; } /* 10.11) Closing statement: stronger than body copy, not a heading, not a bordered note. */ .page-edutower-field-learning .edutower-field-closing-line { font-family: var(--text-font); font-weight: 700; font-size: 1.0625rem; color: var(--fg) !important; margin: 1rem 0 0 !important; } /* 10.12) Boundary closing note: a restrained text treatment, a short teal marker/border only -- no fill, no radius, no padding box. Already within the requested 1-1.0625rem/1.6 range; unchanged in v3.3.1. */ .page-edutower-field-learning .edutower-field-boundary-note { margin: 1.25rem 0 0; padding-left: 1rem; border-left: 3px solid var(--page-primary); color: var(--fg); font-size: 1rem; line-height: 1.6; } /* 10.12.1) Boundary section geometry and reading scale (v3.3.1). Scoped to the section's own new .edutower-field-boundary class (added in the HTML) so nothing generic is touched. */ .page-edutower-field-learning .edutower-field-boundary .section-intro { max-width: 65rem; text-align: left; margin-left: 0; margin-right: 0; } .page-edutower-field-learning .edutower-field-boundary .edutower-definitions { max-width: 65rem; } .page-edutower-field-learning .edutower-field-boundary .edutower-definitions dt { margin-top: 1.25rem; } .page-edutower-field-learning .edutower-field-boundary .edutower-definitions dt:first-child { margin-top: 0; } .page-edutower-field-learning .edutower-field-boundary .edutower-definitions dd { font-size: 1.0625rem; } /* 10.13) Lightbox for this page's two media-thumb triggers (v3.3.4). Page-scoped; the shared media-lightbox.css/.js files (read-only) are untouched. Both fixes below were found the hard way on the Research page (v3.4.2/v3.4.3's own changelog) and are applied here from the outset: (1) Both this page's photograph figures now carry the shared .edutower-narrative-media class (the Beginning figure already did; .edutower-field-stage-media did not and has been added in the HTML) -- .media-thumb's own reset (cursor:zoom-in, display:block, border:0, padding:0, transparent background) is keyed to .edutower-narrative-media .media-thumb, so without that class the button falls back to the browser's default button chrome in every browser, not only Firefox, and its clickable box does not reliably match the image inside it. (2) The lightbox caption's shared max-width:min(90vw,640px) is correct for the hub's shorter door captions but renders narrower than this page's own longer, full-sentence captions once the photograph exceeds 640px; align-self:stretch lets the caption match whatever width the image itself resolves to instead of a second, independent fixed value. */ .page-edutower-field-learning .media-thumb::-moz-focus-inner { border: 0; padding: 0; } .page-edutower-field-learning #media-lightbox .lightbox-caption { max-width: none; width: 100%; align-self: stretch; box-sizing: border-box; } /* ========================================================================== RESEARCH PAGE (v3.4.0) -- page-scoped rules, see changelog above. ========================================================================== */ /* 11.1) Hero headline/width correction so the unchanged headline wording renders within 4 lines at 1440px. No tagline override -- this page keeps the shared amber tagline treatment per its own brief. */ .page-edutower-research .hero-content { max-width: 44rem; } .page-edutower-research .headline { font-size: clamp(2.25rem, 3.2vw, 3.25rem); } /* 11.2) Restores the canonical centred, pillar-underlined heading treatment for the two headings that cannot be direct children of .sdx-card-section (Beginning and What Returns to the Place both pair an image). The page's other two major headings (Investigation, Boundary) get this treatment for free from global.css. */ .page-edutower-research .edutower-narrative-body h2 { font-family: var(--headline-font); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; text-align: center; color: var(--fg); margin: 0 0 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--page-primary); } [data-theme="dark"] .page-edutower-research .edutower-narrative-body h2 { border-bottom-color: rgba(from var(--page-primary) r g b / 0.40); } .page-edutower-research .sdx-card-section:not(.edutower-route) > h2 { margin-bottom: 1.5rem; } /* 11.3) Narrative body-copy scale, matching the accepted Learning/Teaching/Field Learning reading scale. */ .page-edutower-research .edutower-narrative-body p { text-align: left; font-size: 1.0625rem; line-height: 1.65; color: var(--fg); margin: 0 0 1.25rem; } .page-edutower-research .edutower-narrative-body p:last-child { margin-bottom: 0; } /* 11.4) The research question: a visually distinct but integrated line inside the flowing prose. No card, no background, no quotation icon. */ .page-edutower-research .edutower-research-question-line { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 3px solid var(--page-primary); font-family: var(--headline-font); font-weight: 700; font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem); line-height: 1.4; color: var(--fg); } /* 11.5) Beginning and What-Returns-to-the-Place image geometry: stretch the row (not the shared component's default align-items:center, which floats a shorter image with dead space above and below it) and reset
    's UA-stylesheet default margin (1em 40px), which otherwise shrinks the rendered image well below its own grid column regardless of the column split chosen. fr units (not %) for the column ratio, since percentage tracks do not account for the shared component's gap:3rem and would overflow the row by that amount. */ .page-edutower-research .edutower-research-beginning .edutower-narrative, .page-edutower-research .edutower-research-returns .edutower-narrative { align-items: stretch; /* The shared component's own margin:2rem 0 collapses with the heading's margin-bottom:1.5rem above it (32px measured, not 24px), slightly over this page's 1.75rem heading-rhythm ceiling. Zeroing the top margin here lets the heading's own 1.5rem govern the gap, matching Investigation/Boundary exactly. */ margin-top: 0; } .page-edutower-research .edutower-research-beginning .edutower-narrative-media, .page-edutower-research .edutower-research-returns .edutower-narrative-media { margin: 0; } @media (min-width: 900px) { .page-edutower-research .edutower-research-beginning .edutower-narrative { grid-template-columns: 55fr 45fr; } .page-edutower-research .edutower-research-returns .edutower-narrative { grid-template-columns: 45fr 55fr; } } /* 11.6) Frame + object-fit:cover so each photograph fills the full stretched row height with no dead space, matching the Learning page's own accepted .edutower-recognition-media/-frame Record-section construction (read-only, unchanged). */ .page-edutower-research .edutower-research-beginning-media, .page-edutower-research .edutower-research-returns-media { display: flex; flex-direction: column; } .page-edutower-research .edutower-research-beginning-media-frame, .page-edutower-research .edutower-research-returns-media-frame { flex: 1 1 auto; min-height: 0; display: flex; } .page-edutower-research .edutower-research-beginning-media-frame img, .page-edutower-research .edutower-research-returns-media-frame img { width: 100%; height: 100%; min-height: 16rem; object-fit: cover; border-radius: 0.75rem; border: 1px solid var(--border); display: block; } .page-edutower-research .edutower-research-beginning-media figcaption, .page-edutower-research .edutower-research-returns-media figcaption { flex: none; } [data-theme="dark"] .page-edutower-research .edutower-research-beginning-media-frame img, [data-theme="dark"] .page-edutower-research .edutower-research-returns-media-frame img { border-color: var(--border); } /* 11.7) Investigation section: readable, left-aligned prose measure and progression width, not a centred narrow tower. */ .page-edutower-research .edutower-research-investigation .section-intro { max-width: 62rem; text-align: left; margin-left: 0; margin-right: 0; } .page-edutower-research .edutower-research-investigation .edutower-journey-progression { max-width: 65rem; } /* 11.8) Stage titles stay the normal foreground colour throughout, including stage 3 -- amber is confined to the stage 3 circular marker only (never a reading colour). */ .page-edutower-research .edutower-journey-step--threshold h3 { color: var(--fg); } /* 11.9) Investigation photograph: a full-width section-level sibling immediately after the progression's closing
(not nested inside stage 3's own list-item content div, which would narrow it to the stage's indented text column). */ .page-edutower-research .edutower-research-stage-media { margin: 1.75rem 0 0; } .page-edutower-research .edutower-research-stage-media img { width: 100%; height: auto; border-radius: 0.75rem; border: 1px solid var(--border); display: block; } [data-theme="dark"] .page-edutower-research .edutower-research-stage-media img { border-color: var(--border); } /* 11.10) Internal Turning Point: full-width separator, inner max-width:62rem on the readable text only. No card, no fill, no shadow, no border-radius. Explicit eyebrow colour override in both themes -- this page's brief requires teal here even in dark mode, unlike every other eyebrow on every journey page, which the shared sitewide dark-mode rule turns amber (untouched, still correct everywhere else). */ .page-edutower-research .edutower-research-turning-point { text-align: left; width: 100%; max-width: none; margin-top: 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } .page-edutower-research .edutower-research-turning-point .eyebrow, .page-edutower-research .edutower-research-turning-point h3, .page-edutower-research .edutower-research-turning-point p, .page-edutower-research .edutower-research-turning-point-conclusion { max-width: 62rem; } [data-theme="dark"] .page-edutower-research .edutower-research-turning-point .eyebrow { color: var(--page-primary); } .page-edutower-research .edutower-research-turning-point h3 { text-align: left; margin: 0 0 0.75rem; font-family: var(--headline-font); font-weight: 700; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.3; color: var(--fg); } .page-edutower-research .edutower-research-turning-point p { text-align: left; margin: 0 0 1.25rem; color: var(--muted); font-size: 1.0625rem; line-height: 1.65; } .page-edutower-research .edutower-research-turning-point-conclusion { font-family: var(--text-font); font-weight: 700; font-size: 1.0625rem; color: var(--fg) !important; margin: 1rem 0 0 !important; } [data-theme="dark"] .page-edutower-research .edutower-research-turning-point { border-top-color: rgba(255,255,255,0.10); } /* 11.11) "What Returns to the Place" closing statement: stronger than body copy, not a heading, not a bordered note. */ .page-edutower-research .edutower-research-closing-line { font-family: var(--text-font); font-weight: 700; font-size: 1.0625rem; color: var(--fg) !important; margin: 1rem 0 0 !important; } /* 11.12) Boundary section geometry and reading scale, scoped to the section's own .edutower-research-boundary class. */ .page-edutower-research .edutower-research-boundary .section-intro { max-width: 65rem; text-align: left; margin-left: 0; margin-right: 0; } .page-edutower-research .edutower-research-boundary .edutower-definitions { max-width: 65rem; } .page-edutower-research .edutower-research-boundary .edutower-definitions dt { margin-top: 1.25rem; } .page-edutower-research .edutower-research-boundary .edutower-definitions dt:first-child { margin-top: 0; } .page-edutower-research .edutower-research-boundary .edutower-definitions dd { font-size: 1.0625rem; } /* 11.13) Lightbox fixes for this page's three media-thumb triggers (v3.4.2). Both rules are page-scoped: the shared media-lightbox.css/.js files (read-only) are untouched, and no other journey page currently uses .media-thumb, so nothing regresses. (1) Firefox draws its own internal dotted focus ring inside a