/* ============================================================ Mayur Chaudhary — mayurchaudhary.com Built on the Mayur Chaudhary Design System (Fraunces + Inter, crimson-on-warm-neutral, 8px scale). Light mode is default; dark mode activates via [data-theme="dark"] on . ============================================================ */ /* ---- Tokens ---- */ :root { --neutral-0: #FFFFFF; --neutral-50: #F7F5F2; --neutral-100: #EFECE6; --neutral-200: #E2DEDA; --neutral-300: #C9C5BE; --neutral-600: #6B6963; --neutral-900: #17171A; --neutral-dark-bg: #121114; --neutral-dark-surface: #1D1B1F; --neutral-dark-border: #2B2930; --neutral-dark-muted: #A6A29C; --neutral-dark-text: #F5F3EE; --brand-crimson-light: #D62E39; --brand-crimson-dark: #E2505C; --brand-on-crimson-light: #FFFFFF; --brand-on-crimson-dark: #17171A; --danger-light: #C4401E; --danger-dark: #DE6236; --success-light: #3F8556; --success-dark: #52A56C; --bg-page: var(--neutral-50); --bg-surface: var(--neutral-0); --bg-surface-raised: var(--neutral-0); --border-default: var(--neutral-200); --border-strong: var(--neutral-300); --text-primary: var(--neutral-900); --text-muted: var(--neutral-600); --text-on-brand: var(--brand-on-crimson-light); --brand-accent: var(--brand-crimson-light); --brand-accent-hover: #B8232D; --brand-accent-active: #9C1D26; --state-danger: var(--danger-light); --state-success: var(--success-light); /* Hero/CTA/footer are deliberately fixed dark panels in both themes */ --panel-dark-bg: var(--neutral-900); --panel-dark-border: rgba(255,255,255,.08); --panel-dark-text: rgba(255,255,255,.92); --panel-dark-text-muted: rgba(255,255,255,.55); --panel-dark-text-faint: rgba(255,255,255,.35); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --text-h1: 2.5rem; --text-h1-lh: 1.05; --text-h2: 2rem; --text-h2-lh: 1.1; --text-h3: 1.5rem; --text-h3-lh: 1.2; --text-body-lg: 1.125rem; --text-body-lg-lh: 1.6; --text-body: 1rem; --text-body-lh: 1.65; --text-caption: 0.875rem; --text-caption-lh: 1.5; --text-micro: 0.75rem; --text-micro-lh: 1.5; --ui-caption: 13px; --ui-body: 15px; --ui-micro: 12px; --ui-button: 15px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --grid-max-width: 1200px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(23, 23, 26, 0.06); --shadow-md: 0 4px 16px rgba(23, 23, 26, 0.08); --shadow-lg: 0 12px 32px rgba(23, 23, 26, 0.12); --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 360ms; } [data-theme="dark"] { --bg-page: var(--neutral-dark-bg); --bg-surface: var(--neutral-dark-surface); --bg-surface-raised: #242229; --border-default: var(--neutral-dark-border); --border-strong: #3A3740; --text-primary: var(--neutral-dark-text); --text-muted: var(--neutral-dark-muted); --text-on-brand: var(--brand-on-crimson-dark); --brand-accent: var(--brand-crimson-dark); --brand-accent-hover: #EA6975; --brand-accent-active: #F0838C; --state-danger: var(--danger-dark); --state-success: var(--success-dark); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); /* Dark panels blend into the dark page instead of standing apart */ --panel-dark-bg: #0B0A0C; --panel-dark-border: rgba(255,255,255,.07); } /* ---- Reset & base ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); font-size: 16px; line-height: var(--text-body-lh); overflow-x: hidden; transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); -webkit-user-select: none; user-select: none; } input, button, textarea, select { -webkit-user-select: auto; user-select: auto; } ::selection { background: var(--text-primary); color: var(--bg-page); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; pointer-events: none; -webkit-user-drag: none; } em { font-style: italic; } /* ---- Progress bar ---- */ #bar { position: fixed; top: 0; left: 0; height: 2px; background: var(--brand-accent); width: 0; z-index: 300; transition: width .1s linear; } /* ---- Nav ---- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-7); transition: padding var(--duration-slow) var(--ease-standard), background var(--duration-slow), border-color var(--duration-slow), backdrop-filter var(--duration-slow); border-bottom: 1px solid transparent; } nav.scrolled { padding: var(--space-4) var(--space-7); background: color-mix(in srgb, var(--bg-page) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-default); } .logo { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; gap: 2px; } .logo-name { font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-primary); } .logo-sub { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--text-muted); } .navlinks { display: flex; align-items: center; gap: var(--space-6); } .navlinks a { font-size: var(--ui-caption); font-weight: 500; color: var(--text-muted); transition: color var(--duration-base) var(--ease-standard); } .navlinks a:hover, .navlinks a.active { color: var(--text-primary); } .navlinks a.cta { background: var(--brand-accent); color: var(--text-on-brand); padding: 10px 20px; border-radius: var(--radius-md); font-weight: 500; transition: background var(--duration-base) var(--ease-standard); } .navlinks a.cta:hover { background: var(--brand-accent-hover); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; transition: border-color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); } .theme-toggle:hover { border-color: var(--border-strong); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } .burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; } .burger span { width: 22px; height: 1.5px; background: var(--text-primary); transition: transform .25s, opacity .25s; } .mmenu { display: none; position: fixed; inset: 0; z-index: 250; background: var(--bg-page); flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease-standard); } .mmenu.open { opacity: 1; pointer-events: auto; } .mmenu a { font-family: var(--font-display); font-size: 30px; color: var(--text-primary); } .mmenu a.cta { font-family: var(--font-body); font-size: 16px; background: var(--brand-accent); color: var(--text-on-brand); padding: 14px 32px; border-radius: var(--radius-md); } /* ---- Hero (fixed dark panel, both themes) ---- */ .hero { padding: 104px 40px 0; } .hero-card { display: grid; grid-template-columns: 1.2fr .8fr; background: var(--panel-dark-bg); border-radius: var(--radius-lg); overflow: hidden; min-height: clamp(300px, 38vh, 380px); opacity: 0; animation: fadeIn 1s var(--ease-standard) .15s forwards; } .hero-text { padding: clamp(32px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; min-width: 0; } .hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--panel-dark-text-faint); margin-bottom: var(--space-5); } .hero-quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; color: var(--panel-dark-text); margin-bottom: var(--space-5); } .hero-bio { font-size: 14px; line-height: 1.8; color: var(--panel-dark-text-muted); max-width: 48ch; } .hero-bio strong { color: var(--panel-dark-text); font-weight: 600; } .hero-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); } .hero-tag { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--panel-dark-text-faint); padding: 6px 12px; border: 1px solid var(--panel-dark-border); border-radius: var(--radius-full); } .hero-img { position: relative; overflow: hidden; } .hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } @keyframes fadeIn { to { opacity: 1; } } /* ---- Sections ---- */ section.block { padding: clamp(80px, 11vh, 140px) clamp(40px, 8vw, 120px); } section.block + section.block { border-top: 1px solid var(--border-default); } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-5); } h2.big { font-family: var(--font-display); font-weight: 600; font-size: var(--text-h2); line-height: var(--text-h2-lh); color: var(--text-primary); text-wrap: balance; } @media (min-width: 1024px) { h2.big { font-size: 3.25rem; } } .lead { font-size: 17px; line-height: 1.75; color: var(--text-muted); margin-top: var(--space-5); max-width: 60ch; } .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease-standard), transform .8s var(--ease-standard); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; } /* ---- About ---- */ .about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-9); margin-top: var(--space-7); align-items: start; } .about-text p { font-size: var(--text-body); line-height: 1.85; color: var(--text-muted); margin-bottom: var(--space-5); } .about-text p:last-of-type { margin-bottom: 0; } .about-text a.inline { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color var(--duration-base); } .about-text a.inline:hover { text-decoration-color: var(--brand-accent); } .sidebar-quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 21px; line-height: 1.5; color: var(--text-primary); padding-left: var(--space-5); border-left: 2px solid var(--brand-accent); margin-bottom: var(--space-6); } .author-books { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .author-books a { font-size: 13px; font-weight: 600; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); transition: text-decoration-color var(--duration-base); } .author-books a:not(:last-child)::after { content: "/"; color: var(--text-muted); font-weight: 400; margin-left: var(--space-3); text-decoration: none; } .author-books a:hover { text-decoration-color: var(--brand-accent); } /* ---- Stats + career strip ---- */ .statstrip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border-default); } .statstrip .s { padding: var(--space-6) var(--space-5); text-align: center; border-right: 1px solid var(--border-default); } .statstrip .s:last-child { border-right: 0; } .statstrip .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 4.5vw, 52px); line-height: 1; color: var(--text-primary); } .statstrip .lab { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: var(--space-2); } .stat-note { text-align: center; font-size: 15px; line-height: 1.8; color: var(--text-muted); padding: var(--space-5) var(--space-5) 0; } .stat-note a { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); } .stat-note a:hover { text-decoration-color: var(--brand-accent); } .career-logos { overflow: hidden; position: relative; margin-top: var(--space-5); padding: var(--space-5) 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .career-track { display: flex; align-items: center; width: max-content; animation: logoMarquee 34s linear infinite; } .career-logos:hover .career-track { animation-play-state: paused; } .career-logo { flex: 0 0 156px; height: 74px; padding: var(--space-3) var(--space-5); display: flex; align-items: center; justify-content: center; } .career-logo-chip { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); transition: transform var(--duration-base), box-shadow var(--duration-base); } .career-logo img { max-width: 110px; max-height: 34px; width: auto; height: auto; object-fit: contain; } .career-logo:hover .career-logo-chip { transform: translateY(-1px); } /* Light mode's page background is already near-white, so logos sit directly on it. Dark mode needs a light chip behind them — without it, any logo with black linework (Cisco, OLX, etc.) would vanish into the dark page. */ [data-theme="dark"] .career-logo-chip { background: var(--neutral-0); } [data-theme="dark"] .career-logo:hover .career-logo-chip { box-shadow: var(--shadow-sm); } @keyframes logoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .career-track { animation: none; } } /* ---- Cards (Card component: border + shadow-sm, radius-md, shadow-md on hover) ---- */ .projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-7); } .pcard { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .pcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .pcard-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; position: relative; background: var(--bg-page); } .pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-standard); } .pcard:hover .pcard-img img { transform: scale(1.03); } .pcard-content { padding: var(--space-6); display: flex; flex-direction: column; flex-grow: 1; border-top: 1px solid var(--border-default); } .ptag, .wcat { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--brand-accent); margin-bottom: var(--space-3); } .pcard h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; margin-bottom: var(--space-3); color: var(--text-primary); } .pcard p { font-size: 14px; line-height: 1.8; color: var(--text-muted); flex: 1; } .plink, .wlink { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); font-size: 13px; font-weight: 600; color: var(--text-primary); transition: gap var(--duration-base) var(--ease-standard); } .pcard:hover .plink, .wcard:hover .wlink { gap: 12px; } .projects-more { text-align: center; margin-top: var(--space-6); font-size: 13px; color: var(--text-muted); font-weight: 500; } .projects-more a { color: var(--text-primary); font-weight: 600; } /* ---- Writings ---- */ .writings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-7); } .wcard { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-6) var(--space-6) var(--space-6); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); } .wcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .wcard h4 { font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.35; margin-bottom: var(--space-2); color: var(--text-primary); } .wcard p { font-size: 14px; line-height: 1.75; color: var(--text-muted); flex: 1; } .wcard.hidden-writing { display: none; } .wcard.hidden-writing.visible { display: flex; } .writings-loading, .writings-empty { color: var(--text-muted); font-size: 14px; margin-top: var(--space-7); } .writings-footer { text-align: center; margin-top: var(--space-6); } /* ---- Buttons (Button component: primary/secondary/ghost, radius-md, never pill) ---- */ .btn { font-family: var(--font-body); font-weight: 500; line-height: 1; border: none; border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--ui-button); padding: 12px 20px; transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand-accent); color: var(--text-on-brand); } .btn-primary:hover { background: var(--brand-accent-hover); } .btn-primary:disabled { opacity: .5; cursor: not-allowed; } .btn-secondary { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-strong); } .btn-secondary:hover { border-color: var(--text-primary); } .btn-ghost { background: none; color: var(--brand-accent); padding: 12px 4px; } .btn-ghost:hover { color: var(--brand-accent-hover); } /* ---- Books ---- */ .books-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-7); } .book-feature { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; box-shadow: var(--shadow-sm); } .book-label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-accent); margin-bottom: var(--space-4); } .book-feature h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; margin-bottom: var(--space-4); color: var(--text-primary); } .book-feature p { font-size: 15px; line-height: 1.8; color: var(--text-muted); margin-bottom: var(--space-6); flex: 1; } .buybtn { align-self: flex-start; } .reads-block { margin-top: var(--space-9); padding-top: var(--space-8); border-top: 1px solid var(--border-default); } .reads-list { columns: 2; column-gap: var(--space-8); margin-top: var(--space-6); } .reads-list li { font-size: 15px; line-height: 1.75; color: var(--text-muted); padding: var(--space-2) 0; list-style: none; break-inside: avoid; border-bottom: 1px solid var(--border-default); } /* ---- Contact ---- */ .contact-section { background: var(--bg-surface); border-top: 1px solid var(--border-default); } .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--space-9); margin-top: var(--space-7); align-items: start; } .contact-alt { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); } .contact-alt a { font-size: 14px; font-weight: 600; color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); } .contact-alt a:hover { text-decoration-color: var(--brand-accent); } .field { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; } .field label { font-size: var(--ui-caption); font-weight: 500; color: var(--text-primary); } .field input, .field textarea { font-family: var(--font-body); font-size: var(--ui-body); padding: 11px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-default); background: var(--bg-page); color: var(--text-primary); outline: none; resize: vertical; transition: border-color var(--duration-base) var(--ease-standard); } .field input:focus, .field textarea:focus { border-color: var(--brand-accent); } .field.has-error input, .field.has-error textarea { border-color: var(--state-danger); } .field .field-error { font-size: var(--ui-micro); color: var(--state-danger); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form { display: flex; flex-direction: column; gap: var(--space-5); } .form-status { font-size: 14px; font-weight: 500; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); display: none; } .form-status.visible { display: block; } .form-status.success { background: color-mix(in srgb, var(--state-success) 14%, transparent); color: var(--state-success); } .form-status.error { background: color-mix(in srgb, var(--state-danger) 14%, transparent); color: var(--state-danger); } /* ---- CTA / footer (fixed dark panels) ---- */ .cta-section { background: var(--panel-dark-bg); padding: clamp(80px, 12vh, 140px) 40px; text-align: center; } .cta-section h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 6vw, 64px); line-height: 1.1; color: var(--panel-dark-text); } .cta-section .lead { color: var(--panel-dark-text-muted); margin: var(--space-4) auto 0; max-width: 44ch; text-align: center; } .cta-btns { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; } .cta-btns a.primary { background: var(--brand-accent); color: var(--text-on-brand); padding: 14px 28px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; transition: background var(--duration-base); } .cta-btns a.primary:hover { background: var(--brand-accent-hover); } .cta-btns a.secondary { background: transparent; color: var(--panel-dark-text-muted); padding: 14px 28px; border-radius: var(--radius-md); font-size: 14px; font-weight: 600; border: 1px solid var(--panel-dark-border); transition: border-color var(--duration-base), color var(--duration-base); } .cta-btns a.secondary:hover { border-color: rgba(255,255,255,.4); color: var(--panel-dark-text); } footer { background: var(--panel-dark-bg); color: var(--panel-dark-text-muted); padding: var(--space-8) clamp(40px, 8vw, 120px) var(--space-6); border-top: 1px solid var(--panel-dark-border); } .footgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-8); align-items: start; } .foot-brand .fname { font-family: var(--font-body); font-weight: 700; font-size: 18px; letter-spacing: .03em; text-transform: uppercase; color: var(--panel-dark-text); margin-bottom: var(--space-3); } .foot-brand .ftag { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 15px; color: var(--panel-dark-text-faint); line-height: 1.65; max-width: 30ch; } .foot-col h5 { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--panel-dark-text-faint); margin-bottom: var(--space-4); } .foot-col a { display: block; font-size: 14px; color: var(--panel-dark-text-muted); padding: 5px 0; width: fit-content; transition: color var(--duration-base); } .foot-col a:hover { color: var(--panel-dark-text); } .footbottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--panel-dark-border); font-size: 12px; color: var(--panel-dark-text-faint); } .footbottom .credit-bar a { color: var(--panel-dark-text-muted); text-decoration: underline; text-underline-offset: 2px; } .footbottom .credit-bar a:hover { color: var(--panel-dark-text); } .footbottom .credit-sep { margin: 0 8px; opacity: .5; } /* ---- Responsive ---- */ @media (max-width: 900px) { .navlinks { display: none; } .burger { display: flex; } .mmenu { display: flex; } .about-grid { grid-template-columns: 1fr; gap: var(--space-8); } .contact-grid { grid-template-columns: 1fr; gap: var(--space-7); } .footgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } .projects-grid { grid-template-columns: 1fr; gap: var(--space-4); } .writings-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); } .books-row { grid-template-columns: 1fr; gap: var(--space-4); } .field-row { grid-template-columns: 1fr; } .statstrip { grid-template-columns: repeat(2, 1fr); } .statstrip .s { border-right: 0; border-bottom: 1px solid var(--border-default); } .statstrip .s:nth-child(odd) { border-right: 1px solid var(--border-default); } .footgrid { grid-template-columns: 1fr; } .hero-card { grid-template-columns: 1fr; } .hero-img { aspect-ratio: 16/10; } .hero { padding: 92px 20px 0; } .hero-text { padding: var(--space-6); } nav { padding: var(--space-4) var(--space-5); } section.block { padding: var(--space-9) var(--space-5); } } @media (max-width: 520px) { .writings-grid { grid-template-columns: 1fr; } .reads-list { columns: 1; } .career-logo { flex-basis: 132px; } }