:root { --ink:#080607; --panel:#14090d; --rose:#d89a9a; --rose-light:#f1c4bd; --text:#f8eeee; --muted:#bdaeb0; --line:rgba(216,154,154,.35); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:10; top:0; left:0; width:100%; display:flex; justify-content:space-between; align-items:center; padding:28px 5vw; border-bottom:1px solid var(--line); }
.wordmark { color:var(--rose-light); font:500 16px/1 Georgia,"Times New Roman",serif; letter-spacing:.42em; }
.wordmark span { color:#fff; }
nav { display:flex; gap:34px; }
nav a { color:#e9d9d9; font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
.hero { min-height:760px; position:relative; overflow:hidden; display:grid; grid-template-columns:48% 52%; align-items:stretch; border-bottom:1px solid var(--line); background:radial-gradient(circle at 15% 35%,rgba(91,32,47,.35),transparent 32%),linear-gradient(110deg,#090708 0 48%,#180b10 100%); }
.hero-copy { position:relative; z-index:3; align-self:center; padding:120px 2vw 80px 7vw; }
.eyebrow { margin:0 0 20px; color:var(--rose); font-size:11px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; }
.hero h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.hero h1 { margin:0; color:var(--rose-light); font-size:clamp(62px,7vw,108px); line-height:.88; letter-spacing:-.045em; text-transform:uppercase; }
.roles { margin:32px 0; color:#f4e8e6; font-size:13px; letter-spacing:.36em; text-transform:uppercase; }
.roles span { color:var(--rose); }
.button { display:inline-flex; min-height:54px; align-items:center; padding:0 30px; border:1px solid rgba(231,175,172,.5); background:linear-gradient(135deg,rgba(102,40,52,.75),rgba(44,17,24,.85)); color:#fff; font-size:11px; letter-spacing:.25em; text-transform:uppercase; transition:transform .2s ease,border-color .2s ease; }
.button:hover { transform:translateY(-2px); border-color:var(--rose-light); }
.hero-portrait { position:relative; z-index:2; min-height:760px; background-image:linear-gradient(90deg,#0a0708 0%,transparent 25%),linear-gradient(0deg,#0b0708 0%,transparent 30%),url("/alexonenine-hero.jpg"); background-position:left center,center,center 15%; background-size:cover; filter:saturate(.84) contrast(1.04); }
.hero-index { position:absolute; z-index:1; right:-2vw; bottom:-5vw; color:rgba(205,139,142,.10); font:400 clamp(190px,29vw,480px)/.7 Georgia,serif; }
.hero-index span { font-size:.48em; }
.section { padding:105px 7vw; }
.section-heading h2 { margin:0; color:var(--rose-light); font-size:clamp(42px,5vw,72px); line-height:1; }
.section-heading.centered { text-align:center; }
.about { display:grid; grid-template-columns:.75fr 1.45fr .7fr; gap:7vw; align-items:center; background:linear-gradient(135deg,#32131d 0%,#170a0f 50%,#0b0708 100%); border-bottom:1px solid var(--line); }
.about-copy { max-width:720px; color:#e2d5d4; font-size:16px; line-height:1.85; }
.about-copy p:first-child { margin-top:0; }
.about-copy p:last-child { margin-bottom:0; }
.brand-art { width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; opacity:.82; box-shadow:0 0 70px rgba(213,136,143,.15); }
.service-grid { max-width:1150px; margin:55px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card { min-height:270px; padding:35px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(56,23,32,.65),rgba(15,8,10,.9)); }
.service-card span { color:rgba(216,154,154,.5); font:400 18px/1 Georgia,serif; letter-spacing:.12em; }
.service-card h3 { margin:68px 0 14px; color:var(--rose-light); font-size:30px; }
.service-card p { color:var(--muted); line-height:1.6; }
.experience { display:grid; grid-template-columns:1.25fr .75fr; gap:10vw; align-items:end; background:linear-gradient(110deg,#220d14,#10090b); border-block:1px solid var(--line); }
.experience h2,.contact h2 { max-width:820px; margin:0; color:var(--rose-light); font-size:clamp(42px,5vw,72px); line-height:1.05; }
.experience ul { margin:0; padding:0; list-style:none; color:#e7dbda; }
.experience li { padding:14px 0; border-bottom:1px solid var(--line); }
.portfolio-grid { max-width:1220px; margin:55px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.photo-placeholder { aspect-ratio:4/5; display:grid; place-items:center; border:1px solid var(--line); background:linear-gradient(135deg,transparent 49.7%,rgba(216,154,154,.08) 50%,transparent 50.3%),#120a0d; }
.photo-placeholder span { color:var(--rose); font:400 13px/1 Georgia,serif; letter-spacing:.3em; text-transform:uppercase; }
.contact { display:grid; grid-template-columns:1.5fr .5fr; gap:10vw; align-items:end; background:radial-gradient(circle at 90% 15%,rgba(135,54,68,.35),transparent 28%),var(--panel); border-top:1px solid var(--line); }
.contact-details { color:#eee0df; line-height:1.7; }
.placeholder-copy { color:var(--rose); font-size:13px; }
footer { display:flex; justify-content:space-between; align-items:center; gap:30px; padding:30px 7vw; color:#9e8d90; font-size:11px; letter-spacing:.12em; text-transform:uppercase; border-top:1px solid rgba(216,154,154,.16); }
@media (max-width:900px) {
  nav { display:none; } .site-header { justify-content:center; } .hero { min-height:auto; display:block; padding-top:70px; }
  .hero-copy { padding:70px 7vw 45px; } .hero h1 { font-size:clamp(52px,15vw,82px); } .roles { font-size:11px; letter-spacing:.22em; }
  .hero-portrait { min-height:560px; background-image:linear-gradient(0deg,#0a0708 0%,transparent 38%),url("/alexonenine-hero.jpg"); background-position:center,center 15%; }
  .section { padding:75px 7vw; } .about { grid-template-columns:1fr; gap:36px; } .brand-art { width:min(300px,78vw); justify-self:center; }
  .service-grid,.portfolio-grid { grid-template-columns:1fr; } .service-card { min-height:220px; } .service-card h3 { margin-top:45px; }
  .experience,.contact { grid-template-columns:1fr; gap:50px; } .photo-placeholder { aspect-ratio:4/3; } footer { flex-direction:column; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }