/* * ============================================================ * ADVENIQ BIOSCIENCES — DESIGN SYSTEM * Typography refinement pass — v4 * ============================================================ * * v4 TYPOGRAPHY DIRECTION * ----------------------------------------------------------- * • Display + headings: Source Serif 4 (Adobe, SIL OFL). * Transitional serif designed for long-form scientific and * academic reading. Variable optical-size axis (opsz 8–60) * gives true display cuts for headlines and subhead cuts for * section titles. Calmer, more structural, less editorial * than Fraunces — exactly the institutional voice required * for a bioscience platform. * • Body + UI: Inter (Rasmus Andersson, SIL OFL). Institutional * clarity at small sizes, well-engineered numerals, perfectly * tuned for research-editorial UI. Two families only. * • Cormorant Garamond removed. Pull-quote text now uses * Source Serif 4 italic at semibold — keeps the family count * to two and avoids competing serif voices. * * • Fluid type scale uses a calm 1.20 ratio so hierarchy is * achieved through proportion + weight + opsz rather than * scale alone. * • Display tracking tightened (-0.015em to -0.022em). * Eyebrow tracking opened (0.16em). * • Optical-size hints applied per heading level via * font-variation-settings: opsz 60 for hero/H1, opsz 36 for * H2, opsz 20 for H3/H4, opsz 14 for highlight statement. * • OpenType features enabled: kern, liga, calt + tabular nums * on numeric contexts. dlig on headlines for refined ligatures. * • Line-height tokens refined (1.07 display / 1.32 snug / * 1.62 body). Measures tightened to 60–66ch. * • Body color contrast raised to 0.84 opacity for stronger * on-bone reading; muted-inv tuned similarly. * • Media veils refined to support text — slightly stronger * left-edge bone wash on hero video, calmer platform-bg * so the staged list reads with editorial calm. * • Font loading: preconnect + display=swap retained. * * v2 NOTES PRESERVED * ----------------------------------------------------------- * Cards, layout, palette, hero split, media frames, animations * remain structurally identical. All v2 audit changes are kept. * ============================================================ */ /* Source Serif 4 (display + headings + italic accent), Inter (body + UI). Both SIL OFL — free for any use. */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600&family=Inter:wght@400;500;600;700&display=swap'); /* ============================================================ TABLE OF CONTENTS — use Ctrl/Cmd+F to jump to a section ============================================================ 1. TOKENS — colours, spacing, type scale 2. RESET & BASE — element resets, focus rings 3. SKIP LINK — a11y skip-to-content 4. EYEBROWS — small label type 5. HEADINGS — h1–h4 scale + opsz hints 6. BODY TEXT — paragraph + meta + muted 7. LAYOUT — .container, .section, spacing 8. PULL QUOTE — .pull-quote 9. NAVIGATION — .nav, logo, links, mobile 10. HERO — .hero + split layout 11. BUTTONS — .btn variants 12. CARDS — advisory framework cards 13. SCIENTIFIC APPROACH — split layout + diagram 14. STAGE LIST — platform model rows 15. PRINCIPLE LIST — evidence standards rows 16. FIELD CONTEXT — long-form prose tightening 17. INQUIRY FORM — contact form 18. FOOTER — site footer 19. UNIVERSAL ICON STANDARD — icon sizing rules 20. MEDIA INTEGRATION — .media-frame, hero video, section backgrounds, break 21. BACK-TO-TOP BUTTON — fixed corner anchor 22. RESPONSIVE RHYTHM — final responsive tweaks 23. REDUCED MOTION — prefers-reduced-motion 24. DESKTOP-LARGE TWEAKS — ≥1440px optical refinements 25. PRIVACY POLICY PAGE — separate page (privacy.html) ============================================================ QUICK TUNING POINTERS • Hero font sizes ........ search: .hero__headline / .hero__lead • Hero video opacity ..... search: .hero__media-video • Hero veil intensity .... search: .hero__media-veil • Platform bg opacity .... search: .section--platform-bg • Regulatory bg opacity .. search: .section--regulatory-bg • Logo size .............. search: .nav__logo-img • Back-to-top look ....... search: .back-to-top ============================================================ */ /* ──────────────────────────────────────────────────────────── 1. TOKENS ──────────────────────────────────────────────────────────── */ :root { /* Palette — preserved exactly */ --color-bone: #F4EEE2; --color-card: #DDE5E0; --color-ink: #0E1818; --color-forest: #004445; --color-forest-deep: #002B2C; --color-forest-mid: #2A6364; --color-mist: #DDE5E0; --color-sage: #ADBA99; --color-ochre: #BC8A3D; /* Semantic surfaces */ --color-bg: var(--color-bone); --color-surface: var(--color-card); --color-surface-forest: var(--color-forest); --color-surface-footer: var(--color-forest-deep); /* Text — slightly stronger contrast on bone for editorial reading */ --color-text: var(--color-ink); --color-text-strong: var(--color-ink); --color-text-muted: rgba(14, 24, 24, 0.84); /* was 0.82 — measured uplift for serif/body */ --color-text-soft: rgba(14, 24, 24, 0.62); /* new — for captions, hints */ --color-text-faint: rgba(14, 24, 24, 0.38); --color-text-inverse: var(--color-mist); --color-text-muted-inv: rgba(221, 229, 224, 0.78); /* slight uplift from 0.74 */ --color-text-faint-inv: rgba(221, 229, 224, 0.42); /* Interactive */ --color-primary: var(--color-forest-mid); --color-primary-hover: var(--color-forest); --color-primary-active: var(--color-forest-deep); --color-accent-ochre: var(--color-ochre); --color-accent-sage: var(--color-sage); /* Borders */ --color-hairline: rgba(14, 24, 24, 0.14); --color-hairline-inv: rgba(221, 229, 224, 0.16); --color-border-card: rgba(14, 24, 24, 0.14); --color-border-form: rgba(14, 24, 24, 0.22); /* Typography — families Display (Source Serif 4) is used for H1/H2 and .highlight-statement. Accent (Source Serif 4 italic, semibold) is used for pull-quote text. Body (Inter) drives all UI and reading copy. Section H3/H4 (.heading-body, principle, stage titles) use a subhead-optical-size cut of Source Serif 4 for institutional voice. */ --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-accent: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Calm 1.20 fluid scale (clamped) — gentler than 1.25. The progression deliberately compresses near body sizes so small-text rhythm stays disciplined; expansion is reserved for the hero where editorial scale earns its place. */ --text-2xs: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem); /* 11–12 */ --text-xs: clamp(0.75rem, 0.72rem + 0.18vw, 0.8125rem); /* 12–13 */ --text-sm: clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem); /* 14–15 */ --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem); /* 16–17 */ --text-md: clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem); /* 17–19 */ --text-lg: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem); /* 19–22 */ --text-xl: clamp(1.375rem, 1.2rem + 0.85vw, 1.75rem); /* 22–28 */ --text-2xl: clamp(1.75rem, 1.45rem + 1.55vw, 2.625rem); /* 28–42 */ --text-3xl: clamp(2.25rem, 1.6rem + 3.20vw, 3.875rem); /* 36–62 */ --text-4xl: clamp(2.25rem, 1.5rem + 3.50vw, 3.75rem); /* 44–76 (reserved hero) */ /* Spacing — preserved */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* Shape */ --radius-card: 8px; --radius-btn: 4px; --radius-sm: 4px; --radius-md: 6px; --radius-full: 9999px; /* Elevation */ --shadow-sm: 0 1px 3px rgba(14, 24, 24, 0.06); --shadow-md: 0 4px 12px rgba(14, 24, 24, 0.08); --shadow-lg: 0 10px 28px rgba(14, 24, 24, 0.10); /* Motion */ --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); --transition-ui: 220ms cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 130ms cubic-bezier(0.16, 1, 0.3, 1); /* Typography helpers — refined */ --tracking-display: -0.018em; /* large serif headings */ --tracking-display-lg: -0.022em; /* hero only */ --tracking-h2: -0.014em; --tracking-h3: -0.005em; --tracking-tight: -0.005em; --tracking-normal: 0; --tracking-eyebrow: 0.16em; /* slightly opened (was 0.14) */ --tracking-eyebrow-sm: 0.12em; --tracking-btn: 0.02em; /* refined (was 0.04) */ --tracking-btn-uc: 0.10em; /* uppercase secondary */ --leading-display: 1.06; /* hero */ --leading-tight: 1.10; /* H1/H2 (was 1.15) */ --leading-snug: 1.32; /* H3/H4, lead lines */ --leading-normal: 1.50; --leading-relaxed: 1.62; /* body — calmed from 1.70 */ --leading-loose: 1.72; /* long-form prose (footer regulatory etc.) */ --measure-display: 18ch; --measure-h2: 22ch; --measure-lead: 54ch; --measure-body: 64ch; --measure-prose: 58ch; --measure-narrow: 44ch; /* Layout */ --content-narrow: 640px; --content-default: 960px; --content-wide: 1200px; --content-full: 100%; --nav-height: 80px; } /* ──────────────────────────────────────────────────────────── 2. RESET & BASE ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; scroll-padding-top: var(--nav-height); hanging-punctuation: first last; text-size-adjust: none; /* Default global OpenType features for Inter: contextual + standard ligatures, kerning, calt, ss03 (cv11 alts). */ font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss03" 1, "cv11" 1; font-kerning: normal; } body { min-height: 100dvh; background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-relaxed); letter-spacing: -0.003em; /* near-imperceptible body tightening at default size */ } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } ul[role="list"], ol[role="list"] { list-style: none; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } table { border-collapse: collapse; width: 100%; } /* Heading defaults — wrap-balance, tight leading, no orphans where possible */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: var(--leading-tight); font-feature-settings: "kern" 1, "liga" 1; /* Source Serif 4 — clean refined headings */ font-variation-settings: "opsz" 48; /* default display optical size; per-element overrides below */ } /* Body wrap — pretty for paragraphs, with a comfortable measure */ p, li, figcaption, blockquote { text-wrap: pretty; max-width: var(--measure-body); hyphens: manual; } ::selection { background: rgba(42, 99, 100, 0.20); color: var(--color-text); } :focus-visible { outline: 2px solid var(--color-forest-mid); outline-offset: 3px; border-radius: var(--radius-sm); } a, button, [role="button"], input, textarea, select { transition: color var(--transition-ui), background var(--transition-ui), border-color var(--transition-ui), box-shadow var(--transition-ui); } /* Tabular numerals utility — reserve for figures, dates, metadata */ .num, .tabular, time, [data-tabular] { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1; } /* ──────────────────────────────────────────────────────────── 3. SKIP LINK ──────────────────────────────────────────────────────────── */ .skip-link { position: fixed; top: -100%; left: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--color-forest); color: var(--color-mist); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.01em; border-radius: 0 0 var(--radius-btn) var(--radius-btn); z-index: 9999; } .skip-link:focus { top: 0; } /* ──────────────────────────────────────────────────────────── 4. EYEBROWS Refined: opened tracking, slightly smaller default, balanced colour. Eyebrows now read as taxonomy markers, not labels. ──────────────────────────────────────────────────────────── */ .eyebrow { font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; /* was 700 — calmer */ letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-forest); font-feature-settings: "kern" 1, "ss03" 1, "cv11" 1, "tnum" 1; /* Slight optical lift — uppercase reads cleaner with a hairline rise */ line-height: 1.4; } .eyebrow--inv { color: var(--color-sage); } .eyebrow--ochre { color: var(--color-ochre); } /* ──────────────────────────────────────────────────────────── 5. HEADINGS — Source Serif 4 system Hierarchy is achieved through size, weight, tracking, opsz, and measure. Each level has a distinct role. ──────────────────────────────────────────────────────────── */ h1, .h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 400; line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: var(--measure-display); font-variation-settings: "opsz" 60; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } h2, .h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 400; line-height: var(--leading-tight); letter-spacing: var(--tracking-h2); color: var(--color-ink); max-width: var(--measure-h2); font-variation-settings: "opsz" 48; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } /* Section-level H3 — Source Serif 4 subhead-optical-size, semibold, near-text size */ h3, .h3 { font-family: var(--font-serif); font-size: clamp(1.125rem, 1.04rem + 0.42vw, 1.3125rem); font-weight: 600; font-style: normal; line-height: var(--leading-snug); letter-spacing: var(--tracking-h3); color: var(--color-ink); font-variation-settings: "opsz" 20; font-feature-settings: "kern" 1, "liga" 1; } /* H4 / heading-body — for cards on dark forest surfaces; same family, slightly tighter so it sits compactly next to body copy. */ h4, .h4, .heading-body { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem); font-weight: 600; font-style: normal; line-height: var(--leading-snug); letter-spacing: var(--tracking-h3); color: var(--color-ink); font-variation-settings: "opsz" 14; font-feature-settings: "kern" 1, "liga" 1; } /* Pull-quote and accent display — Source Serif 4 italic semibold, subhead optical size for a refined scholarly accent. */ .accent-display, .pull-quote__text { font-family: var(--font-accent); font-size: var(--text-xl); font-weight: 600; font-style: italic; line-height: 1.34; letter-spacing: -0.008em; color: var(--color-ink); max-width: 36ch; font-variation-settings: "opsz" 32; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } /* Highlight statement — Source Serif 4 editorial, restrained */ .highlight-statement { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 400; font-style: normal; line-height: var(--leading-snug); letter-spacing: -0.008em; color: var(--color-ink); display: block; border-left: 2px solid var(--color-ochre); padding-left: var(--space-6); margin-block: var(--space-10); max-width: 56ch; font-variation-settings: "opsz" 32; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; } /* Inverse surface adjustments */ .section--forest .accent-display, .section--forest .pull-quote__text, .section--forest .highlight-statement { color: var(--color-mist); } /* ──────────────────────────────────────────────────────────── 6. BODY TEXT Lead = 17–19px Inter 400 / muted with strong variant. Body = 16–17px Inter 400 / muted. Measures are tightened for editorial reading. ──────────────────────────────────────────────────────────── */ .lead { font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; line-height: 1.55; letter-spacing: -0.005em; color: var(--color-text-muted); max-width: var(--measure-lead); font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss03" 1; } .lead--strong { color: var(--color-text); font-weight: 400; } .body-copy { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: var(--leading-relaxed); letter-spacing: -0.003em; color: var(--color-text-muted); max-width: var(--measure-body); font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss03" 1; } .body-copy--strong { color: var(--color-text); } .prose-scientific { max-width: var(--measure-prose); } .text-md { font-size: var(--text-md); } .text-sm { font-size: var(--text-sm); } .text-xs { font-size: var(--text-xs); } .text-muted { color: var(--color-text-muted); } .text-soft { color: var(--color-text-soft); } .text-faint { color: var(--color-text-faint); } .text-inv { color: var(--color-text-inverse); } .text-muted-inv { color: var(--color-text-muted-inv); } /* Spacing utilities */ .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-12 { margin-bottom: var(--space-12); } /* ──────────────────────────────────────────────────────────── 7. LAYOUT ──────────────────────────────────────────────────────────── */ .container { max-width: var(--content-default); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-12)); } .container--narrow { max-width: var(--content-narrow); } .container--wide { max-width: var(--content-wide); } .section { padding-block: clamp(var(--space-12), 8vw, var(--space-24)); } .section--compact { padding-block: clamp(var(--space-8), 5vw, var(--space-16)); } .section--spacious { padding-block: clamp(var(--space-16), 10vw, var(--space-32)); } .section--bone { background-color: var(--color-bone); } .section--card { background-color: var(--color-card); } .section--forest { background-color: var(--color-forest); color: var(--color-mist); } .section--deep { background-color: var(--color-forest-deep); color: var(--color-mist); } /* Section label wrap — eyebrow + animated rule */ .section-label-wrap { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); /* tightened — eyebrow → H2 reads as one block */ } /* ──────────────────────────────────────────────────────────── 8. PULL QUOTE Source Serif 4 italic semibold; ochre rule; refined measure & cap-height. ──────────────────────────────────────────────────────────── */ .pull-quote { border-left: 2px solid var(--color-ochre); padding-left: var(--space-8); margin-block: var(--space-10); max-width: 44ch; } .pull-quote--forest { border-left-color: var(--color-sage); } .pull-quote__text { display: block; margin-bottom: var(--space-2); } /* Pull-quote text — slightly enlarged, italic literary voice */ .pull-quote .pull-quote__text { font-size: clamp(1.375rem, 1.2rem + 0.85vw, 1.75rem); line-height: 1.32; letter-spacing: -0.006em; } .pull-quote__attribution { font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-ochre); } /* ──────────────────────────────────────────────────────────── 9. NAVIGATION ──────────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); background-color: var(--color-forest); border-bottom: 1px solid rgba(221, 229, 224, 0.08); display: flex; align-items: center; transition: box-shadow var(--transition-ui), border-bottom-color var(--transition-ui); } .nav--scrolled { border-bottom-color: rgba(221, 229, 224, 0.14); box-shadow: 0 2px 20px rgba(0, 43, 44, 0.28); } .nav__inner { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-12)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .nav__logo-link { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } .nav__logo-img { height: 54px; width: auto; display: block; } .nav__links { display: flex; align-items: center; gap: var(--space-8); list-style: none; } /* Nav links — refined typography for institutional clarity */ .nav__link { position: relative; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; /* was 400 — added crispness on dark */ color: var(--color-text-muted-inv); text-decoration: none; padding-block: var(--space-2); letter-spacing: 0.005em; font-feature-settings: "kern" 1, "ss03" 1, "cv11" 1; } .nav__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--color-sage); transition: width var(--transition-ui); } .nav__link:hover { color: var(--color-mist); } .nav__link:hover::after { width: 100%; } .nav__link--active { color: var(--color-mist); } .nav__link--active::after { width: 100%; background: var(--color-ochre); height: 2px; } .nav__toggle { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); color: var(--color-mist); } .nav__toggle span { display: block; width: 22px; height: 1px; background: currentColor; transition: transform var(--transition-ui), opacity var(--transition-ui); } @media (max-width: 768px) { .nav__toggle { display: flex; } .nav__links { display: none; position: absolute; top: var(--nav-height); left: 0; right: 0; flex-direction: column; background: var(--color-forest); padding: var(--space-4) var(--space-6) var(--space-8); gap: var(--space-2); border-bottom: 1px solid var(--color-hairline-inv); } .nav__links--open { display: flex; } .nav__link { font-size: var(--text-base); padding-block: var(--space-3); } .nav__link::after { display: none; } } /* ──────────────────────────────────────────────────────────── 10. HERO Hero headline gets its own scale — the most editorially loaded type on the page. Tracking is at the tightest setting. ──────────────────────────────────────────────────────────── */ .hero { padding-block: 0; min-height: clamp(480px, 72vh, 780px); display: flex; align-items: stretch; background-color: var(--color-bone); border-bottom: 1px solid var(--color-hairline); } .hero__inner { width: 100%; max-width: var(--content-default); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-12)); } .hero__inner--split.hero__inner { max-width: 100%; padding-inline: 0; } .hero__content { max-width: 580px; padding-inline: clamp(var(--space-4), 4vw, var(--space-12)); padding-block: clamp(var(--space-16), 8vw, var(--space-24)); } /* Pre-commercial status badge */ .hero__status { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 500; color: var(--color-forest-mid); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-6); } .hero__status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-sage); flex-shrink: 0; animation: adv-pulse 2.5s ease-in-out infinite; } @keyframes adv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } @media (prefers-reduced-motion: reduce) { .hero__status-dot { animation: none; } } .hero__eyebrow { margin-bottom: var(--space-5); } /* Hero headline — Source Serif 4 display optical size, calm leading */ .hero__headline { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 400; line-height: var(--leading-display); letter-spacing: var(--tracking-display-lg); color: var(--color-ink); margin-bottom: var(--space-8); max-width: 17ch; font-variation-settings: "opsz" 60; font-feature-settings: "kern" 1, "liga" 1, "dlig" 1; text-wrap: balance; } .hero__lead { font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; line-height: 1.55; letter-spacing: -0.005em; color: var(--color-text-muted); max-width: 50ch; margin-bottom: var(--space-6); text-wrap: pretty; } /* Hero trust line — small caps style affirmation */ .hero__trust { font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-forest); margin-bottom: var(--space-10); } .hero__cta-group { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* Hero split layout — content column + media/illustration column. Used by .hero__inner.hero__inner--split in the markup. */ .hero__inner--split { display: grid; grid-template-columns: 48fr 52fr; gap: 0; align-items: stretch; width: 100%; max-width: 100%; margin-inline: auto; } .hero__illustration { position: relative; overflow: hidden; background: var(--color-bone); } /* Static fallback image variant (used if hero video is replaced). */ .hero__illustration-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; min-height: clamp(400px, 65vh, 720px); opacity: 0.93; filter: saturate(0.88) brightness(0.98); } @media (max-width: 860px) { .hero__inner--split { grid-template-columns: 1fr; gap: var(--space-6); } .hero__illustration { order: -1; justify-content: center; overflow: hidden; max-height: 260px; } .hero__illustration-img { width: 100%; height: 260px; object-fit: cover; object-position: center center; opacity: 0.92; } .hero__content { max-width: 100%; } } @media (max-width: 560px) { .hero__illustration { max-height: 200px; } .hero__illustration-img { height: 200px; } } /* ──────────────────────────────────────────────────────────── 11. BUTTONS ──────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-btn); text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-btn); min-height: 44px; cursor: pointer; font-feature-settings: "kern" 1, "ss03" 1, "cv11" 1; transition: background var(--transition-ui), border-color var(--transition-ui), color var(--transition-ui), transform var(--transition-fast), box-shadow var(--transition-fast); } .btn--primary { background: var(--color-forest); color: var(--color-mist); border-color: var(--color-forest); padding: var(--space-4) var(--space-8); } .btn--primary:hover { background: var(--color-forest-mid); border-color: var(--color-forest-mid); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 68, 69, 0.22); } .btn--primary:active { transform: translateY(0); box-shadow: none; } .btn--secondary { background: transparent; color: var(--color-forest); border-color: rgba(0, 68, 69, 0.40); padding: var(--space-3) var(--space-6); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-btn-uc); text-transform: uppercase; } .btn--secondary:hover { border-color: var(--color-forest); background: rgba(0, 68, 69, 0.05); } .btn--ghost { background: transparent; color: var(--color-mist); border-color: rgba(221, 229, 224, 0.30); padding: var(--space-3) var(--space-6); } .btn--ghost:hover { border-color: rgba(221, 229, 224, 0.60); background: rgba(221, 229, 224, 0.06); } /* ──────────────────────────────────────────────────────────── 12. CARDS ──────────────────────────────────────────────────────────── */ .card { background: var(--color-card); border: 1px solid var(--color-border-card); border-radius: var(--radius-card); padding: var(--space-8); box-shadow: none; } .section--forest .card, .section--deep .card { background: rgba(221, 229, 224, 0.08); border-color: var(--color-hairline-inv); } .card__icon { color: var(--color-sage); margin-bottom: var(--space-5); display: block; } .card--investor { border-color: rgba(188, 138, 61, 0.32) !important; } .card--interactive { transition: transform var(--transition-ui), box-shadow var(--transition-ui), border-color var(--transition-ui); } .card--interactive:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14, 24, 24, 0.10), 0 2px 6px rgba(14, 24, 24, 0.06); } .card--interactive:active { transform: translateY(0); } .section--forest .card--interactive:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.20); } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--space-6); } .card-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 700px) { .card-grid--2 { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────── 13. SCIENTIFIC APPROACH — SPLIT LAYOUT ──────────────────────────────────────────────────────────── */ .scientific-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-10), 6vw, var(--space-16)); align-items: center; } .scientific-layout__text { min-width: 0; } .scientific-layout__visual { min-width: 0; display: flex; align-items: center; justify-content: center; } .animation-frame { width: 100%; background: linear-gradient(180deg, rgba(221,229,224,0.18) 0%, rgba(221,229,224,0.04) 100%); border: 1px solid rgba(14, 24, 24, 0.10); border-radius: var(--radius-card); padding: clamp(1rem, 2vw, 1.75rem); overflow: hidden; position: relative; } .animation-frame::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 76% 18%, rgba(173,186,153,0.11), transparent 30%), radial-gradient(ellipse at 10% 85%, rgba(188,138,61,0.05), transparent 26%); pointer-events: none; } .animation-frame svg { display: block; width: 100%; height: auto; overflow: visible; } @media (max-width: 900px) { .scientific-layout { grid-template-columns: 1fr; } .scientific-layout__visual { order: -1; } .animation-frame { max-width: 640px; margin-inline: auto; } } @media (max-width: 600px) { .animation-frame { max-width: 100%; } } /* Variant: text-heavy split — slightly tilts the diagram column narrower so the body copy gets more reading width. */ .scientific-layout--text-heavy { grid-template-columns: 44fr 56fr; } /* Variant: contained animation frame — used when the diagram needs to keep its native aspect ratio inside a tight column. */ .animation-frame--contained { width: 100%; padding: clamp(1.25rem, 2.4vw, 2.25rem); } .animation-frame--contained svg { display: block; width: 100%; height: auto; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; } @media (max-width: 900px) { .scientific-layout--text-heavy { grid-template-columns: 1fr; } .animation-frame--contained { max-width: 760px; margin-inline: auto; } } @media (max-width: 600px) { .animation-frame--contained { max-width: 100%; padding: clamp(0.75rem, 3vw, 1.25rem); } } /* ──────────────────────────────────────────────────────────── 14. STAGE LIST (Platform Model) ──────────────────────────────────────────────────────────── */ .stage-list { display: flex; flex-direction: column; gap: 0; } .stage-item { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-4) var(--space-6); padding-block: var(--space-8); border-top: 1px solid var(--color-hairline); align-items: start; } .stage-item__icon { color: var(--color-forest-mid); padding-top: 0.1rem; flex-shrink: 0; display: flex; align-items: flex-start; } .stage-item__title { font-family: var(--font-serif); font-size: clamp(1.125rem, 1.04rem + 0.42vw, 1.3125rem); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-3); line-height: var(--leading-snug); letter-spacing: var(--tracking-h3); font-variation-settings: "opsz" 20; font-feature-settings: "kern" 1, "liga" 1; } .stage-item__body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); letter-spacing: -0.003em; max-width: 58ch; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss03" 1; } .section--forest .stage-item__title { color: var(--color-mist); } .section--forest .stage-item__body { color: var(--color-text-muted-inv); } @media (max-width: 600px) { .stage-item { grid-template-columns: 2rem 1fr; gap: var(--space-3); } } @media (max-width: 400px) { .stage-item { grid-template-columns: 1fr; gap: var(--space-2); } .stage-item__icon { display: none; } } /* ──────────────────────────────────────────────────────────── 15. PRINCIPLE LIST (Evidence Standards) ──────────────────────────────────────────────────────────── */ .principle-list { display: flex; flex-direction: column; gap: 0; } .principle-item { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-6); padding-block: var(--space-8); border-top: 1px solid var(--color-hairline); align-items: start; } .principle-item__icon { color: var(--color-forest-mid); margin-top: 0.25rem; flex-shrink: 0; display: flex; align-items: flex-start; } .principle-item__heading { font-family: var(--font-serif); font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); line-height: var(--leading-snug); letter-spacing: var(--tracking-h3); font-variation-settings: "opsz" 14; font-feature-settings: "kern" 1, "liga" 1; } .principle-item__body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); letter-spacing: -0.003em; max-width: 58ch; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss03" 1; } /* ──────────────────────────────────────────────────────────── 16. FIELD CONTEXT — long-form prose tightening ──────────────────────────────────────────────────────────── */ .field-context-layout__content .body-copy { max-width: 60ch; } /* ──────────────────────────────────────────────────────────── 17. INQUIRY FORM ──────────────────────────────────────────────────────────── */ .form__trust-note { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; letter-spacing: -0.003em; max-width: 54ch; margin-bottom: var(--space-8); padding-left: var(--space-6); border-left: 2px solid var(--color-sage); } .form { display: flex; flex-direction: column; gap: var(--space-6); max-width: var(--content-narrow); } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .form__field { display: flex; flex-direction: column; gap: var(--space-2); } .form__label { font-family: var(--font-body); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-forest); font-feature-settings: "kern" 1, "ss03" 1, "cv11" 1; } .form__required { color: var(--color-ochre); margin-left: var(--space-1); } .form__input, .form__select, .form__textarea { font-family: var(--font-body); font-size: var(--text-base); letter-spacing: -0.003em; color: var(--color-ink); background: rgba(255, 255, 255, 0.55); border: 1px solid var(--color-border-form); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); width: 100%; -webkit-appearance: none; appearance: none; font-feature-settings: "kern" 1, "ss03" 1, "cv11" 1; transition: border-color var(--transition-ui), box-shadow var(--transition-ui), background var(--transition-ui); } .form__input:focus, .form__select:focus, .form__textarea:focus { border-color: var(--color-forest-mid); box-shadow: 0 0 0 3px rgba(42, 99, 100, 0.12); background: rgba(255, 255, 255, 0.80); outline: none; } .form__textarea { resize: vertical; min-height: 140px; line-height: var(--leading-relaxed); } .form__select-wrap { position: relative; display: block; } .form__select-wrap .form__select { padding-right: var(--space-10); cursor: pointer; } .form__select-chevron { position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-forest-mid); pointer-events: none; display: flex; align-items: center; } .form__hint { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-soft); margin-top: var(--space-1); line-height: 1.5; } .form__checkbox-row { display: flex; align-items: flex-start; gap: var(--space-3); } .form__checkbox { width: 16px; height: 16px; border: 1px solid var(--color-border-form); border-radius: 3px; background: rgba(255, 255, 255, 0.55); flex-shrink: 0; margin-top: 0.2rem; accent-color: var(--color-forest); cursor: pointer; } .form__checkbox-label { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; letter-spacing: -0.003em; cursor: pointer; } .form__privacy-link { color: var(--color-forest-mid); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; font-size: var(--text-xs); margin-left: var(--space-1); } .form__privacy-link:hover { color: var(--color-forest); } @media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────── 18. FOOTER ──────────────────────────────────────────────────────────── */ .footer { background-color: var(--color-forest-deep); color: var(--color-text-muted-inv); } .footer__main { max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-12)); padding-block: var(--space-16) var(--space-12); display: grid; grid-template-columns: 1fr auto; gap: var(--space-12); align-items: start; border-bottom: 1px solid var(--color-hairline-inv); } .footer__logo-link { display: inline-flex; align-items: center; text-decoration: none; margin-bottom: var(--space-6); } .footer__logo-img { height: 54px; width: auto; display: block; } .footer__brand address { font-style: normal; font-size: var(--text-sm); line-height: var(--leading-relaxed); letter-spacing: -0.002em; color: var(--color-text-muted-inv); } .footer__brand address a { color: var(--color-sage); text-decoration: none; } .footer__brand address a:hover { color: var(--color-mist); } .footer__nav { display: flex; flex-direction: column; gap: var(--space-3); } .footer__nav a { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted-inv); text-decoration: none; letter-spacing: 0.005em; transition: color var(--transition-ui); } .footer__nav a:hover { color: var(--color-mist); } .footer__disclosure { max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(var(--space-4), 4vw, var(--space-12)); padding-block: var(--space-6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); } .footer__regulatory { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-faint-inv); max-width: 64ch; line-height: var(--leading-loose); letter-spacing: -0.002em; } .footer__legal { display: flex; gap: var(--space-6); flex-shrink: 0; } .footer__legal a { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-faint-inv); text-decoration: none; letter-spacing: 0.005em; transition: color var(--transition-ui); } .footer__legal a:hover { color: var(--color-mist); } @media (max-width: 768px) { .footer__main { grid-template-columns: 1fr; gap: var(--space-8); } } /* v2/v3 carry-over rules removed during light cleanup pass. .nav__logo-img → canonical copy lives in 9. NAVIGATION. .hero__inner--split, .hero__illustration, .hero__illustration-img → moved into 10. HERO. .scientific-layout--text-heavy, .animation-frame--contained → moved into 13. SCIENTIFIC APPROACH. .privacy-* rules → moved into 25. PRIVACY POLICY at end of file (used only by privacy.html). */ /* ──────────────────────────────────────────────────────────── 19. UNIVERSAL ICON STANDARD ──────────────────────────────────────────────────────────── */ .stage-item__icon svg, .principle-item__icon svg, .card__icon svg { display: block; flex-shrink: 0; overflow: visible; } .stage-item__icon { color: var(--color-forest-mid); } .principle-item__icon { color: var(--color-forest-mid); } /* ════════════════════════════════════════════════════════════ 20. MEDIA INTEGRATION — v3 (refined for typography support) Only refinements: slightly stronger left-edge wash on hero video so the headline reads cleanly; calmer platform-bg veil so the staged list sits with editorial composure. ════════════════════════════════════════════════════════════ */ .media-frame { position: relative; width: 100%; border-radius: var(--radius-card); overflow: hidden; background: linear-gradient(180deg, rgba(221, 229, 224, 0.20) 0%, rgba(221, 229, 224, 0.04) 100%), var(--color-bone); border: 1px solid var(--color-hairline); box-shadow: 0 1px 2px rgba(14, 24, 24, 0.04), 0 18px 40px -22px rgba(14, 24, 24, 0.18); isolation: isolate; } .media-frame__video, .media-frame__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: none; image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); } .media-frame__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(244, 238, 226, 0.22) 100%), linear-gradient(180deg, rgba(244, 238, 226, 0.06) 0%, transparent 18%, transparent 82%, rgba(244, 238, 226, 0.10) 100%); mix-blend-mode: normal; } .media-frame--portrait { aspect-ratio: 4 / 5; } .media-frame--landscape { aspect-ratio: 16 / 10; } .media-frame--square { aspect-ratio: 1 / 1; } @media (max-width: 900px) { .media-frame--portrait { aspect-ratio: 5 / 4; } } /* ── HERO MEDIA ────────────────────────────────────────────── */ .hero__media { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: var(--color-bone); } .hero__media-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; min-height: clamp(420px, 68vh, 760px); filter: saturate(0.90) contrast(1.02) brightness(1.0); transform: translateZ(0); will-change: transform; } /* Refined hero veil — stronger left-edge bone wash so the serif headline reads with calm authority. The right edge keeps the video at full presence. */ .hero__media-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(244, 238, 226, 0.62) 0%, rgba(244, 238, 226, 0.22) 16%, rgba(244, 238, 226, 0.00) 38%, rgba(244, 238, 226, 0.00) 100%), linear-gradient(180deg, rgba(244, 238, 226, 0.18) 0%, rgba(244, 238, 226, 0.00) 14%, rgba(244, 238, 226, 0.00) 86%, rgba(244, 238, 226, 0.20) 100%); } @media (max-width: 860px) { .hero__media { max-height: 320px; } .hero__media-video { height: 320px; min-height: 0; } .hero__media-veil { background: linear-gradient(180deg, rgba(244, 238, 226, 0.00) 0%, rgba(244, 238, 226, 0.00) 70%, rgba(244, 238, 226, 0.55) 100%); } } @media (max-width: 560px) { .hero__media { max-height: 240px; } .hero__media-video { height: 240px; } } /* ── SECTION WITH BACKGROUND — Platform Model ──────────────── */ .section--with-bg { position: relative; isolation: isolate; overflow: hidden; } .section__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .section__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: saturate(0.78) contrast(0.96) brightness(1.02); opacity: 0.50; } .section__bg-veil { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 50%, rgba(221, 229, 224, 0.25) 0%, rgba(221, 229, 224, 0.55) 60%, rgba(221, 229, 224, 0.85) 100%), linear-gradient(180deg, rgba(221, 229, 224, 0.55) 0%, rgba(221, 229, 224, 0.30) 18%, rgba(221, 229, 224, 0.30) 82%, rgba(221, 229, 224, 0.65) 100%); } /* Platform-bg veil refined to give body copy & list items a calmer reading field, especially behind paragraph text. */ .section--platform-bg .section__bg-img { opacity: 0.40; filter: saturate(0.82) contrast(0.98); } .section--platform-bg .section__bg-veil { background: radial-gradient(80% 65% at 50% 42%, rgba(221, 229, 224, 0.18) 0%, rgba(221, 229, 224, 0.55) 55%, rgba(221, 229, 224, 0.82) 100%), linear-gradient(180deg, rgba(221, 229, 224, 0.60) 0%, rgba(221, 229, 224, 0.32) 22%, rgba(221, 229, 224, 0.32) 78%, rgba(221, 229, 224, 0.72) 100%); } .section--platform-bg .stage-item { border-top-color: rgba(14, 24, 24, 0.18); } @media (max-width: 700px) { .section--platform-bg .section__bg-img { opacity: 0.30; } } /* ── SECTION WITH BACKGROUND — Regulatory Alignment ────────── Sister variant to .section--platform-bg, tuned to sit just slightly more present (opacity 0.45) with a lighter veil so the regulatory imagery reads as deliberate context rather than decoration. Body copy still wins. To dial down/up, adjust .section__bg-img opacity and the veil alpha values below. */ .section--regulatory-bg .section__bg-img { opacity: 0.75; filter: saturate(0.86) contrast(0.98); } .section--regulatory-bg .section__bg-veil { background: radial-gradient(85% 70% at 50% 45%, rgba(221, 229, 224, 0.05) 0%, /* Lowered from 0.10 */ rgba(221, 229, 224, 0.15) 55%, /* Lowered from 0.42 */ rgba(221, 229, 224, 0.30) 100%), /* Lowered from 0.74 */ linear-gradient(180deg, rgba(221, 229, 224, 0.20) 0%, /* Lowered from 0.50 */ rgba(221, 229, 224, 0.10) 22%, rgba(221, 229, 224, 0.10) 78%, rgba(221, 229, 224, 0.25) 100%); /* Lowered from 0.62 */ } .section--regulatory-bg .principle-item { border-top-color: rgba(14, 24, 24, 0.18); } @media (max-width: 700px) { .section--regulatory-bg .section__bg-img { opacity: 0.60; } } /* ── EVIDENCE STANDARDS — Two-column with media on the left ── */ .evidence-layout { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: clamp(var(--space-10), 6vw, var(--space-16)); align-items: start; } .evidence-layout__media { position: sticky; top: calc(var(--nav-height) + var(--space-6)); align-self: start; max-height: calc(100vh - var(--nav-height) - var(--space-12)); } .evidence-layout__media .media-frame { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--nav-height) - var(--space-16)); } .evidence-layout__content { min-width: 0; } @media (max-width: 960px) { .evidence-layout { grid-template-columns: 1fr; gap: clamp(var(--space-8), 5vw, var(--space-12)); } .evidence-layout__media { position: static; max-height: none; max-width: 560px; } .evidence-layout__media .media-frame { aspect-ratio: 5 / 4; max-height: none; } } /* ── FULL-WIDTH SECTION BREAK — Cinematic ribbon ───────────── */ .media-break { position: relative; display: block; width: 100%; height: clamp(380px, 42vw, 480px); overflow: hidden; isolation: isolate; background: var(--color-forest-deep); border-top: 1px solid rgba(0, 43, 44, 0.32); border-bottom: 1px solid rgba(0, 43, 44, 0.32); box-shadow: inset 0 1px 0 rgba(244, 238, 226, 0.04), inset 0 -1px 0 rgba(244, 238, 226, 0.04); } .media-break__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: none; image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); will-change: transform; } @media (max-width: 768px) { .media-break { height: 240px; } } /* ── FIELD CONTEXT — Two-column with media on the right ────── */ .field-context-layout { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: clamp(var(--space-10), 6vw, var(--space-16)); align-items: center; } .field-context-layout__content { min-width: 0; } .field-context-layout__media .media-frame { aspect-ratio: 4 / 5; } @media (max-width: 960px) { .field-context-layout { grid-template-columns: 1fr; gap: clamp(var(--space-8), 5vw, var(--space-12)); } .field-context-layout__media { max-width: 560px; margin-inline: auto; width: 100%; } .field-context-layout__media .media-frame { aspect-ratio: 5 / 4; } } /* ════════════════════════════════════════════════════════════ 21. BACK-TO-TOP BUTTON Quiet anchor in the bottom-right corner that fades in once the user has scrolled roughly 80% of the viewport height. Bone circle + forest arrow + thin forest border so it sits politely on both bone and forest-deep sections. The .is-visible class is toggled by the small JS in the HTML