:root { --ink:#20211d; --cream:#f6f2ea; --gold:#b6945b; --paper:#fcfaf6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.65; }
.site-header { position:absolute; z-index:2; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:flex-end; padding:32px 5.5%; color:#fff; }
.wordmark { display:flex; flex-direction:column; color:var(--ink); text-decoration:none; letter-spacing:.16em; line-height:1; }
.wordmark span { font-family:"Playfair Display",serif; font-size:1.35rem; letter-spacing:.13em; }
.wordmark small { font-size:.42rem; letter-spacing:.38em; margin-top:7px; }
.site-header nav { display:flex; gap:34px; }
.site-header nav a { color:#fff; text-decoration:none; font-size:.67rem; letter-spacing:.18em; text-transform:uppercase; }
.hero { min-height:760px; background:var(--ink); display:grid; grid-template-columns:1fr 1fr; position:relative; color:#fff; }
.hero-photo { background:#fbf6f2 url("assets/luma-logo.jpg") center center / contain no-repeat; }
.hero-copy { align-self:center; padding:125px 13% 80px 11%; background:#1f201c; }
.eyebrow { letter-spacing:.22em; font-size:.64rem; font-weight:600; margin:0 0 18px; }
.hero h1,h2 { font-family:"Playfair Display",serif; font-weight:500; line-height:1.06; margin:0; }
.hero h1 { font-size:clamp(3.1rem,5vw,5.5rem); letter-spacing:-.045em; }
.hero em,h2 em { color:var(--gold); font-weight:500; }
.hero-copy > p:not(.eyebrow) { max-width:400px; margin:28px 0; color:#f4f1e9; }
.text-link { display:inline-flex; gap:15px; align-items:center; color:inherit; text-decoration:none; text-transform:uppercase; font-size:.68rem; letter-spacing:.18em; border-bottom:1px solid currentColor; padding-bottom:8px; }
.text-link span { font-size:1rem; }
.scroll { position:absolute; bottom:30px; right:5.5%; letter-spacing:.22em; font-size:.55rem; }
.section-narrow { max-width:790px; padding:150px 30px; text-align:center; margin:auto; }
.section-narrow h2,.section-title h2,.experience h2,.about h2,.contact h2 { font-size:clamp(2.5rem,4.5vw,4.5rem); letter-spacing:-.04em; }
.section-narrow > p:last-child { max-width:580px; margin:30px auto 0; }
.portfolio { padding:25px 5.5% 130px; }
.section-title { text-align:center; margin-bottom:54px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:1240px; margin:auto; }
.story { min-height:510px; position:relative; overflow:hidden; color:#fff; background:#20211d; text-decoration:none; }
.story img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .5s ease; }
.story:hover img { transform:scale(1.035); }
.story-overlay { position:absolute; inset:0; padding:28px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(0deg,rgba(0,0,0,.63),transparent 62%); }
.story-overlay b { font-size:.68rem; letter-spacing:.18em; font-weight:500; }
.story-overlay h3 { font-family:"Playfair Display",serif; font-weight:500; font-size:2.25rem; margin:5px 0; }
.story-overlay p { font-size:.62rem; letter-spacing:.17em; margin:0; }
.story-bar img { object-position:55% center; }
.story-engagement img { object-position:50% 31%; }
.story-portrait img,.story-simcha img { object-position:center; }
.experience { background:#242520; color:#f7f4ed; display:grid; grid-template-columns:1.1fr .9fr; gap:100px; padding:135px 10%; }
.experience > div > p:not(.eyebrow) { max-width:510px; color:#dedbd3; margin:26px 0 34px; }
.button { border:1px solid currentColor; background:transparent; color:inherit; text-decoration:none; padding:15px 20px; font-size:.65rem; letter-spacing:.17em; cursor:pointer; display:inline-block; }
.experience ol { list-style:none; margin:25px 0 0; padding:0; counter-reset:item; }
.experience li { border-top:1px solid rgba(255,255,255,.2); padding:23px 0; }
.experience li b { color:var(--gold); font-size:.65rem; letter-spacing:.14em; }
.experience li h3 { font-family:"Playfair Display",serif; font-weight:500; font-size:1.65rem; margin:3px 0; }
.experience li p { color:#d7d4cc; margin:0; }
.about { display:grid; grid-template-columns:1fr 1fr; min-height:720px; background:var(--paper); }
.about-image { background:#ded6c9; overflow:hidden; }
.about-image img { width:100%; height:100%; object-fit:cover; object-position:55% center; }
.about-copy { align-self:center; padding:100px 14%; }
.about-copy > p:not(.eyebrow) { max-width:500px; font-size:1.04rem; margin:24px 0; }
.contact { background:#ece4d7; display:grid; grid-template-columns:1fr 1fr; gap:95px; padding:125px 10%; }
.contact > div > p:not(.eyebrow) { max-width:430px; }
.contact form { display:grid; grid-template-columns:1fr 1fr; gap:17px 20px; }
.contact label { display:flex; flex-direction:column; font-size:.59rem; letter-spacing:.14em; }
.contact label:nth-of-type(5),.contact label:nth-of-type(6),.contact button,.contact small { grid-column:span 2; }
input,select,textarea { font:inherit; border:0; border-bottom:1px solid #807a70; padding:8px 0; background:transparent; color:var(--ink); outline:0; }
textarea { resize:vertical; }
.contact button { justify-self:start; }
.contact small { font-size:.68rem; color:#706a61; }
footer { background:#20211d; color:#f5f1ea; padding:58px 5.5%; display:flex; gap:28px; justify-content:space-between; align-items:center; flex-wrap:wrap; font-size:.64rem; letter-spacing:.14em; }
footer a { color:inherit; text-decoration:none; }
footer p { margin:0; }
@media (max-width:760px) {
  .site-header { padding:22px 6%; align-items:flex-start; }
  .site-header nav { display:none; }
  .hero { min-height:690px; display:block; }
  .hero-photo { height:37vh; min-height:265px; background-position:center; }
  .hero-copy { padding:55px 9% 85px; background:#1f201c; }
  .hero h1 { font-size:3.05rem; }
  .scroll { bottom:20px; right:9%; }
  .section-narrow { padding:95px 8%; }
  .portfolio { padding:20px 5% 75px; }
  .portfolio-grid { grid-template-columns:1fr; gap:13px; }
  .story { min-height:420px; }
  .experience,.about,.contact { grid-template-columns:1fr; gap:55px; padding:85px 8%; }
  .experience ol { margin:0; }
  .about { padding:0; gap:0; }
  .about-image { height:560px; }
  .about-copy { padding:75px 8%; }
  .contact form { grid-template-columns:1fr; }
  .contact label,.contact label:nth-of-type(5),.contact label:nth-of-type(6),.contact button,.contact small { grid-column:span 1; }
  footer { padding:45px 8%; display:grid; gap:16px; }
  .section-title { margin-bottom:32px; }
}