/* ======================================================================== Marcelo Manucci — Refined editorial aesthetic Three variants switchable via data-variant on : A — Editorial Silencioso (ivory, serif/sans, very restrained) B — Estructural Académico (paper-white, denser grid, mono-led) C — Contemporáneo Editorial (warm bone, larger type, dramatic rule) ======================================================================== */ :root { /* ---- Shared scale ---- */ --fs-label: 0.72rem; --fs-body: 1.0625rem; --fs-small: 0.9rem; --lh-body: 1.75; --max-prose: 680px; --max-wide: 1040px; --page-pad-x: clamp(1.5rem, 5vw, 4rem); --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* ---- Variant A: Editorial Silencioso (default) ---- */ --ivory: #F5F2EC; --ivory-deep: #EDE8DE; --ink: #1B1F2A; --ink-soft: #3A3F4D; --ink-muted: #7A7F8C; --rule: #D9D4C8; --rule-faint: #E6E1D6; --blue: #2A3B55; /* desaturated, restrained */ --accent: #9B3A31; /* desaturated earth red */ --accent-soft: rgba(155, 58, 49, 0.5); --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-serif:"Instrument Serif", Georgia, serif; } /* --------- Variant B: Estructural Académico (paper, denser) --------- */ body[data-variant="B"] { --ivory: #F4F2ED; --ivory-deep: #EAE7E0; --ink: #141821; --ink-soft: #2E3340; --ink-muted: #767C8A; --rule: #CFC9BD; --rule-faint: #E2DDD1; --blue: #1F2F48; --accent: #8C2E26; } /* --------- Variant C: Contemporáneo Editorial (warm bone, larger) --------- */ body[data-variant="C"] { --ivory: #EDEAE2; /* warmer, deeper bone */ --ivory-deep: #E3DFD3; --ink: #101218; --ink-soft: #33384A; --ink-muted: #6E7482; --rule: #C9C3B4; --rule-faint: #D8D3C4; --blue: #1F3A4D; /* petrol blue */ --accent: #A23A30; } /* ---------------- Reset ---------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); color: var(--ink-soft); background: var(--ivory); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -0.003em; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease), opacity 0.3s var(--ease); } ::selection { background: var(--accent); color: var(--ivory); } /* ---------------- Type ---------------- */ h1, h2, h3, h4 { font-family: var(--font-sans); color: var(--ink); font-weight: 500; letter-spacing: -0.02em; } h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; } h2 { font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.022em; color: var(--ink); margin-bottom: 2.5rem; } .prose h2 { margin-bottom: 2.75rem; } .prose h2 em { color: var(--blue); font-style: normal; } body[data-variant="C"] .prose h2 em { color: var(--blue); font-family: var(--font-sans); font-style: normal; font-weight: 500; } .band h2 { margin-bottom: 2.5rem; } h3 { font-size: 1.05rem; font-weight: 500; line-height: 1.35; color: var(--ink); letter-spacing: -0.01em; } p { margin-bottom: 1.4em; color: var(--ink-soft); text-wrap: pretty; } p:last-child { margin-bottom: 0; } .label { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2rem; display: inline-block; } .label .dot { color: var(--accent); margin: 0 0.55em; opacity: 0.9; font-size: 0.85em; vertical-align: middle; } /* Variant B: labels even more technical */ body[data-variant="B"] .label { font-size: 0.68rem; letter-spacing: 0.18em; } /* Variant C: mixes serif italic into a few accents (OFF by default — per user request) */ body[data-variant="C"] h1 em, body[data-variant="C"] h2 em { font-family: var(--font-sans); font-style: normal; font-weight: 400; color: var(--blue); letter-spacing: -0.02em; } /* ---------------- Layout primitives ---------------- */ .prose { max-width: var(--max-prose); margin: 0 auto; } .wide { max-width: var(--max-wide); margin: 0 auto; } /* ---------------- Navigation ---------------- */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--ivory) 85%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.4s var(--ease), background 0.4s var(--ease); } .nav.is-scrolled { background: var(--blue); border-bottom-color: var(--blue); } .nav.is-scrolled .nav-logo, .nav.is-scrolled .nav-links a, .nav.is-scrolled .nav-links a.active { color: color-mix(in oklab, var(--ivory) 88%, transparent); } .nav.is-scrolled .nav-links a:hover, .nav.is-scrolled .nav-links a.active { color: var(--ivory); } .nav-inner { max-width: var(--max-wide); margin: 0 auto; padding: 1.35rem var(--page-pad-x); display: flex; align-items: center; justify-content: space-between; } .nav-logo { font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; color: var(--ink); letter-spacing: -0.01em; } .nav-links { display: flex; gap: 2.25rem; list-style: none; align-items: center; } .nav-links a { position: relative; font-family: var(--font-sans); font-size: 0.86rem; font-weight: 400; color: var(--ink-muted); letter-spacing: 0.005em; padding: 0.25rem 0; } .nav-links a:hover, .nav-links a.active { color: var(--ink); } .nav-links a.active::before { content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: var(--accent); border-radius: 50%; } /* ---------------- HERO ---------------- */ .hero { position: relative; min-height: 92vh; display: flex; align-items: center; padding: 8rem var(--page-pad-x) 6rem; overflow: hidden; background: var(--ivory); } .hero-mark { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .hero-mark svg { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); height: 140%; width: auto; color: var(--ink); opacity: 0.045; } .hero-mark svg path { stroke: currentColor; stroke-width: 1.4; fill: none; vector-effect: non-scaling-stroke; } /* Variant C: mark slightly more present, warmer */ body[data-variant="C"] .hero-mark svg { right: -10%; height: 160%; opacity: 0.06; color: var(--blue); } body[data-variant="C"] .hero-mark svg path { stroke-width: 1.1; } /* Variant B: even quieter, more to edge */ body[data-variant="B"] .hero-mark svg { right: 0; height: 110%; opacity: 0.035; } .hero-inner { position: relative; z-index: 1; max-width: var(--max-wide); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr; gap: 3rem; } .hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .hero-top .hero-meta-right { text-align: right; } .hero-top .hero-meta-right span { color: var(--ink); } .hero-body { max-width: 940px; } .hero-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2.25rem; display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; } .hero-eyebrow .bullet { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; flex-shrink: 0; } .hero h1 { color: var(--ink); max-width: 18ch; margin-bottom: 2rem; } /* Variant A — quiet treatment of H1 with a final accented glyph */ body[data-variant="A"] .hero h1 .accent { color: var(--accent); font-style: normal; } /* Variant B — H1 denser, set in full caps accent number */ body[data-variant="B"] .hero h1 { font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.4rem); letter-spacing: -0.028em; } /* Variant C — editorial, larger, italic accent */ body[data-variant="C"] .hero h1 { font-size: clamp(2.8rem, 6.4vw, 5rem); line-height: 1.0; letter-spacing: -0.04em; font-weight: 400; } .hero-subtitle { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--ink-soft); max-width: 48ch; font-weight: 400; letter-spacing: -0.005em; margin-top: 2rem; padding-top: 2rem; position: relative; } .hero-subtitle::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 1px; background: var(--accent); } body[data-variant="B"] .hero-subtitle { font-family: var(--font-sans); max-width: 52ch; } body[data-variant="C"] .hero-subtitle { font-family: var(--font-sans); font-style: normal; font-size: clamp(1.15rem, 1.55vw, 1.35rem); line-height: 1.5; max-width: 48ch; color: var(--blue); } /* ---------------- Sections ---------------- */ .section { padding: clamp(5rem, 10vw, 9rem) var(--page-pad-x); position: relative; } .section--tight { padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(4rem, 7vw, 6rem); } .section--alt { background: var(--ivory-deep); } .section-head { display: grid; grid-template-columns: 80px 1fr; gap: 2.5rem; align-items: baseline; max-width: var(--max-prose); margin: 0 auto 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule-faint); } .section-head .section-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); padding-top: 0.25rem; } .section-head .section-wordmark { font-family: var(--font-sans); font-size: 0.95rem; letter-spacing: -0.01em; text-transform: lowercase; font-weight: 500; color: var(--blue); padding-top: 0; } /* ---------------- Transition band (between dark hero and body) - now a quiet band of ivory-deep ---------------- */ .band { background: var(--ivory-deep); padding: clamp(4.5rem, 7vw, 7rem) var(--page-pad-x); border-top: 1px solid var(--rule-faint); border-bottom: 1px solid var(--rule-faint); } .band-inner { max-width: var(--max-prose); margin: 0 auto; } .band h2 { font-size: clamp(1.4rem, 2.1vw, 1.8rem); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; margin-bottom: 2.75rem; } body[data-variant="C"] .band h2 em { color: var(--blue); font-style: normal; font-family: var(--font-sans); } /* ---------------- Editorial numbered list (replaces card-finding) ---------------- */ .findings { max-width: var(--max-prose); margin: 3.5rem auto 0; list-style: none; } .finding { display: grid; grid-template-columns: 110px 1fr; gap: 2.5rem; padding: 2.75rem 0; border-top: 1px solid var(--rule-faint); align-items: baseline; } .finding:last-child { border-bottom: 1px solid var(--rule-faint); } .finding:hover .finding-num { color: var(--accent); } .finding .finding-num { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; color: var(--ink-muted); padding-top: 0.45rem; transition: color 0.3s var(--ease); white-space: nowrap; } .finding-body h3 { margin-bottom: 0.85rem; font-size: 1.1rem; color: var(--ink); } .finding-body p { font-size: 0.98rem; line-height: 1.75; color: var(--ink-soft); margin: 0; max-width: 56ch; } /* Variant B — tighter, more technical */ body[data-variant="B"] .finding { padding: 2rem 0; grid-template-columns: 90px 1fr; gap: 1.75rem; } body[data-variant="B"] .finding-body p { font-size: 0.94rem; } /* Variant C — roomier, display number in blue petrol */ body[data-variant="C"] .finding { padding: 3.5rem 0; grid-template-columns: 120px 1fr; } body[data-variant="C"] .finding-num { font-family: var(--font-mono); font-style: normal; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--blue); padding-top: 0.45rem; line-height: 1.3; } /* ---------------- Lab block (centered intro) ---------------- */ .lab { text-align: left; max-width: var(--max-prose); margin: 0 auto; } .lab h2 { margin-bottom: 2.5rem; } .lab p { color: var(--ink-soft); max-width: 60ch; margin: 0; } /* Variant C: lab h2 — same sans, blue petrol */ body[data-variant="C"] .lab h2 { font-family: var(--font-sans); font-weight: 500; font-style: normal; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.02em; color: var(--blue); } body[data-variant="C"] .lab h2 em { color: var(--blue); font-family: var(--font-sans); font-style: normal; } /* ---------------- Bridge + nav cards (editorial links) ---------------- */ .nav-cards { max-width: var(--max-prose); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule-faint); border-bottom: 1px solid var(--rule-faint); } .nav-card { padding: 2.75rem 2rem 2.75rem 0; display: flex; flex-direction: column; gap: 0.85rem; border-right: 1px solid var(--rule-faint); transition: background 0.3s var(--ease); cursor: pointer; position: relative; } .nav-card:last-child { border-right: none; padding-right: 0; padding-left: 2rem; } .nav-card:hover { background: color-mix(in oklab, var(--accent) 4%, transparent); } .nav-card .nav-card-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .nav-card h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; } .nav-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; max-width: 36ch; } .nav-card .nav-card-link { margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .nav-card .nav-card-link svg { width: 14px; height: 14px; transition: transform 0.35s var(--ease); } .nav-card:hover .nav-card-link svg { transform: translateX(4px); } /* Variant C — nav card headings in blue petrol, sans */ body[data-variant="C"] .nav-card h3 { font-family: var(--font-sans); font-weight: 500; font-style: normal; letter-spacing: -0.02em; color: var(--blue); } /* ---------------- Thesis section ---------------- */ .thesis { position: relative; overflow: hidden; } /* Butterfly watermark between findings 01 and 02 — same config as hero-mark */ .findings-mark { position: relative; display: block; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule-faint); height: clamp(180px, 26vw, 320px); overflow: hidden; pointer-events: none; } .findings-mark svg { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: 55%; height: auto; color: var(--ink); opacity: 0.055; fill: currentColor; display: block; } body[data-variant="C"] .findings-mark svg { right: -8%; width: 60%; opacity: 0.08; color: var(--blue); } body[data-variant="B"] .findings-mark svg { right: -2%; width: 45%; opacity: 0.04; } /* ---------------- Footer ---------------- */ footer { background: var(--blue); color: color-mix(in oklab, var(--ivory) 80%, transparent); padding: clamp(4rem, 7vw, 6rem) var(--page-pad-x) 2.5rem; margin-top: 0; } .footer-inner { max-width: var(--max-wide); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-col { display: flex; flex-direction: column; gap: 0.7rem; } .footer-col h4 { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ivory); margin: 0 0 0.9rem; opacity: 0.7; } .footer-col a { font-size: 0.88rem; color: color-mix(in oklab, var(--ivory) 65%, transparent); transition: color 0.3s var(--ease); } .footer-col a:hover { color: var(--ivory); } .footer-col--nolabel h4 { visibility: hidden; } .footer-social-row { display: flex; gap: 1rem; margin-top: 0.25rem; } .footer-social { padding: 4px 0; opacity: 0.65; } .footer-social:hover { opacity: 1; } .footer-social svg { width: 18px; height: 18px; fill: currentColor; display: block; } .footer-bottom { max-width: var(--max-wide); margin: 2rem auto 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: color-mix(in oklab, var(--ivory) 45%, transparent); text-transform: uppercase; } /* ---------------- Fade-in ---------------- */ .fade-in { opacity: 0; transform: translateY(12px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); } .fade-in.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1; transform: none; transition: none; } } /* ---------------- Tweaks panel ---------------- */ .tweaks-panel { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 100; background: var(--ivory); border: 1px solid var(--rule); border-radius: 2px; padding: 1.25rem 1.25rem 1rem; min-width: 240px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); display: none; font-family: var(--font-sans); } .tweaks-panel.is-visible { display: block; } .tweaks-panel h4 { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; margin-bottom: 1rem; } .tweaks-options { display: flex; flex-direction: column; gap: 0.4rem; } .tweaks-opt { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.55rem 0.65rem; border: 1px solid transparent; border-radius: 2px; cursor: pointer; font-size: 0.85rem; color: var(--ink-soft); transition: background 0.2s var(--ease), border-color 0.2s var(--ease); text-align: left; background: transparent; width: 100%; } .tweaks-opt:hover { background: var(--ivory-deep); } .tweaks-opt.is-active { border-color: var(--rule); background: var(--ivory-deep); color: var(--ink); } .tweaks-opt .tw-letter { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); letter-spacing: 0.12em; flex-shrink: 0; padding-top: 2px; } .tweaks-opt .tw-name { font-weight: 500; display: block; line-height: 1.2; } .tweaks-opt .tw-desc { font-size: 0.75rem; color: var(--ink-muted); display: block; line-height: 1.35; margin-top: 2px; } /* ---------------- Mobile nav toggle (hamburger) ---------------- */ .nav-toggle { display: none; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 0; position: relative; color: var(--ink); z-index: 60; } .nav-toggle-bar { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease); } .nav-toggle-bar:nth-child(1) { top: 16px; } .nav-toggle-bar:nth-child(2) { top: 22px; } .nav-toggle-bar:nth-child(3) { top: 28px; } .nav-toggle.is-open .nav-toggle-bar:nth-child(1) { top: 22px; transform: rotate(45deg); } .nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle.is-open .nav-toggle-bar:nth-child(3) { top: 22px; transform: rotate(-45deg); } .nav.is-scrolled .nav-toggle { color: var(--ivory); } /* When menu is open, toggle always on the navy panel → force ivory */ .nav-toggle.is-open { color: var(--ivory); } /* ---------------- Responsive ---------------- */ /* Tablet + small laptop */ @media (max-width: 960px) { :root { --page-pad-x: 1.75rem; } .section-head { grid-template-columns: 1fr; gap: 0.75rem; } .finding { grid-template-columns: 1fr; gap: 0.5rem; padding: 2rem 0; } .nav-cards { grid-template-columns: 1fr; } .nav-card, .nav-card:last-child { border-right: none; border-bottom: 1px solid var(--rule-faint); padding: 2rem 0; } .nav-card:last-child { border-bottom: none; } .footer-inner { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; row-gap: 2.5rem; } } /* Tablet portrait / large phone */ @media (max-width: 720px) { :root { --page-pad-x: 1.5rem; } /* Nav → hamburger */ .nav-toggle { display: block; } .nav-inner { padding: 1.1rem var(--page-pad-x); } .nav-logo { font-size: 0.9rem; white-space: nowrap; } .nav-links { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: #F5F2EC; background-color: var(--ivory); flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 5rem 1.75rem 2rem; transform: translateX(100%); transition: transform 0.35s var(--ease); pointer-events: none; list-style: none; margin: 0; z-index: 55; overflow-y: auto; } .nav-links.is-open { transform: translateX(0); pointer-events: auto; } body[data-variant="B"] .nav-links { background: #F4F2ED; background-color: var(--ivory); } body[data-variant="C"] .nav-links { background: #EDEAE2; background-color: var(--ivory); } .nav-links li { width: 100%; border-bottom: 1px solid var(--rule-faint); } .nav-links a { display: block; padding: 1.15rem 0; font-size: 1.3rem; font-weight: 400; color: var(--ink); letter-spacing: -0.01em; } .nav-links a.active::before { display: none; } .nav-links a.active { color: var(--accent); } /* When scrolled-on-blue, menu overlay stays ivory (readable) */ .nav.is-scrolled .nav-links { background: var(--ivory); } .nav.is-scrolled .nav-links a { color: var(--ink); } .nav.is-scrolled .nav-links a.active { color: var(--accent); } body.nav-open { overflow: hidden; } /* Hero */ .hero { min-height: auto; padding: 7rem var(--page-pad-x) 4rem; } .hero h1 { font-size: clamp(2.25rem, 10vw, 3.2rem); line-height: 1.05; } .hero-subtitle { font-size: 1.05rem; } .hero-top { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .hero-top .hero-meta-right { text-align: left; } .hero-eyebrow { font-size: 0.66rem; flex-wrap: wrap; } /* GLOBAL: all side-label grids collapse to stacked (label above content) on mobile */ .section-head, .finding, body[data-variant="B"] .finding, body[data-variant="C"] .finding, .trajectory > li, body[data-variant="C"] .trajectory > li, .properties, .regimes, .duo, .bio-split, .bio-meta, .credentials, .teaching-grid, .book-entry { grid-template-columns: 1fr !important; gap: 0.6rem; } .trajectory > li, .finding { padding: 1.75rem 0; } .traj-label, .finding-num, .prop-label, .regime-num, .duo-label, .section-num, .book-year { display: block; margin-bottom: 0.25rem; } .traj-label br { display: none; } /* Footer — 2 cols clean */ .footer-inner { grid-template-columns: repeat(2, 1fr); padding: 3.5rem var(--page-pad-x) 2rem; column-gap: 1.5rem; row-gap: 2.25rem; } .footer-col h4 { font-size: 0.62rem; } .footer-col a { font-size: 0.9rem; padding: 0.15rem 0; } .footer-bottom { padding: 1.5rem var(--page-pad-x) 2rem; font-size: 0.75rem; } /* Section paddings */ section { padding-left: var(--page-pad-x); padding-right: var(--page-pad-x); } h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); } } /* Small phone */ @media (max-width: 380px) { :root { --page-pad-x: 1.25rem; } .hero { padding-top: 6rem; padding-bottom: 3rem; } .hero h1 { font-size: clamp(2rem, 11vw, 2.75rem); } .hero-subtitle { font-size: 0.98rem; line-height: 1.5; } /* Footer: keep 2 cols even on small phones (user prefers grid over long list) */ .footer-inner { grid-template-columns: repeat(2, 1fr); column-gap: 1.25rem; row-gap: 2rem; padding: 3rem var(--page-pad-x) 1.75rem; } .footer-col h4 { font-size: 0.6rem; } .footer-col a { font-size: 0.82rem; } .footer-col--nolabel h4 { display: none; } .footer-bottom { flex-direction: column; gap: 0.4rem; align-items: flex-start; } /* Tighter body copy */ p { font-size: 1rem; line-height: 1.6; } }