:root { --bg: #0A0A0A; --bg-elev: #131313; --text: #F5F1E8; --text-dim: rgba(245, 241, 232, 0.62); --text-soft: rgba(245, 241, 232, 0.42); --gold: #C9A961; --gold-bright: #D9BC74; --rule: rgba(245, 241, 232, 0.12); --max: 1200px; --pad-x: clamp(20px, 5vw, 64px); --pad-y: clamp(80px, 12vw, 160px); --radius: 4px; --serif: 'Fraunces', 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; border: 0; background: 0; color: inherit; } /* ─── reveal initial state ─── Only applied when JS is active (.js class is set by an inline script in ). If JS fails or is slow, content is visible. */ .js [data-reveal] { opacity: 0; transform: translateY(20px); will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* ─── buttons ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; border-radius: var(--radius); text-decoration: none; transition: transform 220ms ease, background 220ms ease, color 220ms ease, border-color 220ms ease; } .btn--primary { background: var(--gold); color: #0A0A0A; } .btn--primary:hover { background: var(--gold-bright); transform: translateY(-1px); } .btn--ghost { color: var(--text); border: 1px solid var(--rule); background: transparent; } .btn--ghost:hover { border-color: var(--gold); color: var(--gold); } .btn--ghost .arrow { transition: transform 220ms ease; } .btn--ghost:hover .arrow { transform: translateX(4px); } .btn--lg { padding: 16px 32px; font-size: 16px; } .btn--block { width: 100%; padding: 16px 24px; } /* ─── hero ─── */ .hero { min-height: 100vh; display: flex; align-items: center; padding: var(--pad-x); padding-top: clamp(60px, 8vw, 100px); padding-bottom: clamp(60px, 8vw, 100px); } .hero__inner { width: 100%; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; } .hero__text { display: flex; flex-direction: column; gap: 24px; } .hero__eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); font-weight: 500; } .hero__name { font-family: var(--serif); font-weight: 600; font-size: clamp(56px, 9vw, 124px); line-height: 0.95; letter-spacing: -0.02em; color: var(--text); } .hero__tagline { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; color: var(--text-dim); max-width: 30ch; font-style: italic; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .hero__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; position: relative; } .hero__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,0.25) 100%); pointer-events: none; } .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(1.05) contrast(1.02); } /* ─── section base ─── */ .section { padding: var(--pad-y) var(--pad-x); position: relative; } .section + .section { border-top: 1px solid var(--rule); } .section__inner { max-width: var(--max); margin: 0 auto; } .section__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--gold); font-weight: 500; margin-bottom: 20px; position: relative; display: inline-block; } .section__eyebrow::after { content: ''; display: block; width: 36px; height: 1px; background: var(--gold); margin-top: 10px; } .section__heading { font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 5.5vw, 64px); line-height: 1.05; letter-spacing: -0.015em; color: var(--text); margin-bottom: 56px; max-width: 18ch; } /* ─── story ─── */ .story__body { display: flex; flex-direction: column; gap: 24px; max-width: 64ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: var(--text-dim); } .story__body p { font-weight: 400; } /* ─── stats ─── */ .section--stats { background: var(--bg-elev); } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: 32px; } .stat { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--rule); } .stat__num { font-family: var(--serif); font-weight: 500; font-size: clamp(64px, 9vw, 112px); line-height: 1; letter-spacing: -0.02em; color: var(--gold); } .stat__label { font-size: 14px; color: var(--text-dim); letter-spacing: 0.01em; line-height: 1.45; max-width: 22ch; } /* ─── today ─── */ .today__body { display: flex; flex-direction: column; gap: 24px; max-width: 64ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: var(--text-dim); } /* ─── contact ─── */ .contact__inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px, 7vw, 100px); align-items: start; } .contact__intro { display: flex; flex-direction: column; gap: 16px; } .contact__intro .section__heading { margin-bottom: 8px; } .contact__lede { font-size: 17px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; max-width: 44ch; } .contact__intro .btn { align-self: flex-start; } .contact__form { display: flex; flex-direction: column; gap: 20px; background: var(--bg-elev); padding: clamp(28px, 4vw, 44px); border: 1px solid var(--rule); border-radius: var(--radius); } .field { display: flex; flex-direction: column; gap: 8px; } .field__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-soft); font-weight: 500; } .field input, .field textarea { font-family: var(--sans); font-size: 15px; color: var(--text); background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 10px 0; outline: 0; transition: border-color 220ms ease; resize: vertical; } .field input:focus, .field textarea:focus { border-bottom-color: var(--gold); } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form__status { font-size: 14px; min-height: 1.4em; color: var(--gold); margin-top: -4px; } .form__status.error { color: #E08A8A; } /* ─── footer ─── */ .footer { padding: 40px var(--pad-x); border-top: 1px solid var(--rule); } .footer__inner { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .footer__copy { font-size: 13px; color: var(--text-soft); letter-spacing: 0.04em; } .footer__socials { display: flex; gap: 18px; list-style: none; } .footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--text-soft); border: 1px solid var(--rule); border-radius: 999px; transition: color 220ms ease, border-color 220ms ease, transform 220ms ease; } .footer__socials a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-1px); } /* ─── responsive ─── */ @media (max-width: 880px) { .hero__inner { grid-template-columns: 1fr; gap: 48px; } .hero__photo { order: -1; max-width: 420px; width: 100%; } .stats { grid-template-columns: 1fr; gap: 32px; } .contact__inner { grid-template-columns: 1fr; gap: 48px; } .section__heading { max-width: 100%; } } @media (max-width: 480px) { .hero__ctas { flex-direction: column; align-items: stretch; } .hero__ctas .btn { justify-content: center; } .footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; } }