@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{color-scheme:dark;--bg:#101214;--surface:#191c1e;--fg:#f3f1ec;--muted:#a5a7a6;--line:#333739;--accent:#d7a47b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}.topbar{height:86px;padding:0 5.5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff15;position:absolute;z-index:4;left:0;right:0}.wordmark{font-size:15px;font-weight:700;letter-spacing:.19em}.dot{color:var(--accent)}nav{display:flex;gap:35px}nav a{font-size:12px;color:#d0d0cf;letter-spacing:.07em}nav a:hover,.primary-link:hover{color:var(--accent)}.hero{min-height:760px;height:90vh;max-height:1000px;position:relative;overflow:hidden;display:flex;align-items:center;background:radial-gradient(ellipse at 73% 43%,#34383b 0%,#202427 29%,#101214 69%)}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#101214 5%,transparent 80%);pointer-events:none}.hero-glow{position:absolute;width:45vw;height:70vh;right:4%;top:17%;background:linear-gradient(120deg,transparent,#b48b6824 50%,transparent);transform:skew(-18deg);filter:blur(22px)}.hero-inner{position:relative;z-index:2;padding:90px 8% 0;width:100%}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--accent)}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:9px;vertical-align:middle}.hero h1{font-size:clamp(80px,11.2vw,176px);line-height:.95;letter-spacing:-.075em;font-weight:500;margin:45px 0 34px}.hero h1 em,h2 i{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-.06em;color:var(--accent)}.hero-sub{font-size:13px;letter-spacing:.09em;font-weight:600}.hero-sub span{color:var(--accent);padding:0 8px}.hero-desc{color:#b9bcbd;font-size:16px;max-width:460px;line-height:1.7;margin:28px 0 35px}.primary-link{display:inline-flex;gap:40px;border-bottom:1px solid var(--accent);padding-bottom:13px;font-size:13px;letter-spacing:.04em}.hero-side{position:absolute;z-index:2;right:4%;bottom:12%;writing-mode:vertical-rl;font-size:9px;letter-spacing:.2em;color:#9a9fa0}.hero-side span{color:var(--accent)}.section{padding:115px 8%}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:52px}h2{font-weight:500;font-size:clamp(48px,6vw,85px);line-height:1.05;letter-spacing:-.065em;margin:25px 0 0}.section-intro{color:var(--muted);font-size:14px;max-width:260px;line-height:1.7}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:46px 26px}.project-card{min-width:0}.project-trigger{width:100%;display:block;padding:0;background:none;border:0;color:inherit;text-align:left;cursor:pointer}.project-art{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(135deg,#353b3e,#171a1d 70%);border:1px solid #ffffff12}.project-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,opacity .3s}.project-trigger:hover img{transform:scale(1.035)}.project-art .fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;color:#ffffff80;font-size:clamp(17px,2vw,28px);letter-spacing:.07em;font-weight:600}.play-icon{position:absolute;right:20px;bottom:20px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#101214c9;border:1px solid #ffffff50;font-size:19px;transition:background .2s}.project-trigger:hover .play-icon{background:var(--accent);color:#111}.project-info{padding-top:17px;display:flex;justify-content:space-between;gap:10px;align-items:start}.project-info h3{font-size:19px;font-weight:500;margin:0 0 8px;letter-spacing:-.025em}.project-info p{font-size:11px;color:var(--muted);letter-spacing:.08em;margin:0;text-transform:uppercase}.project-number{font-size:11px;color:var(--accent)}.secondary-heading{border-top:1px solid var(--line);margin:90px 0 32px;padding-top:27px;display:flex;align-items:center;justify-content:space-between}.secondary-heading h3{font-size:25px;font-weight:500;margin:0}.secondary-heading span{font-size:10px;color:var(--muted);letter-spacing:.15em}.additional-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.additional-grid .project-info h3{font-size:16px}.additional-grid .play-icon{width:42px;height:42px}.about-section{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12%}.about-copy{padding-top:40px;color:var(--muted);font-size:15px;line-height:1.9}.about-copy p{margin:0 0 24px}.about-copy .lead{font-size:21px;line-height:1.55;color:var(--fg)}.services{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}.services span{border:1px solid #414547;padding:9px 12px;font-size:10px;letter-spacing:.07em;color:#c3c5c5}.contact-section{padding:110px 8% 65px;background:#1c2022}.contact-section h2{font-size:clamp(60px,9vw,125px)}.contact-section>p:not(.eyebrow){color:var(--muted);margin:25px 0 32px}.contact-button{display:inline-block;background:var(--accent);color:#101214;font-size:13px;font-weight:700;padding:18px 27px}.contact-button:hover{background:#e8bb98}.contact-foot{border-top:1px solid #44494a;display:flex;justify-content:space-between;margin-top:100px;padding-top:25px;color:var(--muted);font-size:11px;letter-spacing:.08em}footer{display:flex;justify-content:space-between;gap:20px;padding:30px 8%;color:#8f9394;font-size:10px;letter-spacing:.1em}dialog{border:1px solid #555;background:#101214;color:white;width:min(1100px,92vw);padding:45px 12px 12px;max-height:90vh}dialog::backdrop{background:#000d}#video-holder{aspect-ratio:16/9}#video-holder iframe{width:100%;height:100%;border:0}.close-dialog{position:absolute;top:5px;right:12px;background:none;color:white;border:0;font-size:32px;cursor:pointer}@media(max-width:700px){.topbar{height:70px;padding:0 6%}.wordmark{font-size:12px}nav{gap:16px}nav a{font-size:11px}.hero{height:auto;min-height:680px}.hero-inner{padding:120px 7% 75px}.hero h1{font-size:clamp(72px,16vw,120px)}.hero-sub{font-size:11px;line-height:1.9}.hero-side{display:none}.section{padding:75px 6%}.section-heading{display:block}.section-intro{margin-top:22px}.project-grid{grid-template-columns:1fr;gap:32px}.additional-grid{grid-template-columns:1fr 1fr;gap:22px 12px}.additional-grid .project-info h3{font-size:14px}.additional-grid .project-info p{font-size:9px}.additional-grid .play-icon{width:34px;height:34px;right:10px;bottom:10px}.about-section{grid-template-columns:1fr;gap:10px}.about-copy{padding-top:10px}.contact-section{padding:75px 6% 45px}.contact-foot{margin-top:80px;gap:20px;flex-wrap:wrap}footer{padding:25px 6%;flex-wrap:wrap;line-height:1.7}}

/* Portfolio V7: custom hero image with a contrast gradient for readable type */
.hero{background:#101214 url("images/hero-charlie-waymire.jpg") center center/cover no-repeat}
.hero:after{background:linear-gradient(90deg,rgba(8,11,14,.92) 0%,rgba(8,11,14,.78) 38%,rgba(8,11,14,.38) 72%,rgba(8,11,14,.26) 100%)}
.hero-glow{display:none}
@media(max-width:700px){.hero{background-position:54% center}.hero:after{background:linear-gradient(90deg,rgba(8,11,14,.89),rgba(8,11,14,.64))}}
/* V8: quieter headline and lighter photo overlay */
.hero h1{font-size:clamp(64px,8.96vw,141px)}
.hero:after{background:linear-gradient(90deg,rgba(8,11,14,.68) 0%,rgba(8,11,14,.52) 38%,rgba(8,11,14,.22) 72%,rgba(8,11,14,.12) 100%)}
@media(max-width:700px){.hero h1{font-size:clamp(57px,12.8vw,96px)}.hero:after{background:linear-gradient(90deg,rgba(8,11,14,.70),rgba(8,11,14,.40))}}

/* V9: social links in navigation and footer */
.topbar{justify-content:initial;gap:34px}
.topbar nav{margin-left:auto}
.social-links{display:flex;align-items:center;gap:15px}
.social-links a{color:#d0d0cf;font-size:11px;font-weight:700;letter-spacing:.09em;transition:color .2s}
.social-links a:hover,.social-links a:focus-visible{color:var(--accent)}
.social-top{border-left:1px solid #ffffff45;padding-left:22px}
.social-footer{gap:20px;flex-wrap:wrap}
.social-footer a{font-size:10px;color:#a5a7a6}
footer{align-items:center;flex-wrap:wrap}
@media(max-width:700px){.topbar{height:auto;min-height:70px;flex-wrap:wrap;gap:10px 18px;padding-top:16px;padding-bottom:14px}.topbar nav{gap:16px}.social-top{width:100%;justify-content:flex-end;border-left:0;padding-left:0;gap:20px}.hero-inner{padding-top:160px}footer{gap:16px 24px}.social-footer{order:3;width:100%}}
@media(max-width:390px){.wordmark{font-size:10px;letter-spacing:.12em}.topbar nav{gap:11px}nav a{font-size:10px}}

/* V10: recognizable social media icons, header and footer */
.social-links a{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:32px;line-height:1;letter-spacing:normal}
.social-links svg{display:block;width:19px;height:19px;flex:none}
.social-footer svg{width:18px;height:18px}
@media(max-width:700px){.social-top{gap:16px}}