/* BROWSER BASICS */
button { color: inherit; }
svg { display: block; vertical-align: middle; flex-shrink: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

:root { color-scheme:dark; --background:#030c17; --foreground:#f7f7fa; --card:#081322; --card-foreground:#f7f7fa; --popover:#081322; --popover-foreground:#f7f7fa; --primary:#d52391; --primary-foreground:#fff; --secondary:#122139; --secondary-foreground:#f7f7fa; --muted:#132239; --muted-foreground:#b9c4d4; --accent:#23355a; --accent-foreground:#fff; --destructive:#fa5877; --border:#365474; --input:#263d57; --ring:#92bbfa; --radius:.5rem; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:82px; }
body { margin:0; font-family:Arial,Helvetica,sans-serif; background:#030a12; color:var(--foreground); font-size:16px; -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; font:inherit; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:2px solid #91caff; outline-offset:5px; }
img { display:block; max-width:100%; }
h1,h2,h3,p,blockquote { margin:0; }
ul { list-style:none; margin:0; padding:0; }
::selection { background:#913fab; color:#fff; }
.container { width:calc(100% - 112px); max-width:1320px; margin:0 auto; }
.section-border { border-bottom:1px solid #34465d; position:relative; }
.section-border::after { content:""; position:absolute; height:1px; bottom:-1px; left:30%; right:14%; background:linear-gradient(90deg,transparent,#f124a56b,#558ffd9c,transparent); pointer-events:none; }
.eyebrow { color:#b4d6fb; text-transform:uppercase; font-size:.78rem; letter-spacing:.3em; font-weight:700; line-height:1.6; }
.site-header { height:74px; background:linear-gradient(100deg,#041d32ed,#030b19f2 64%,#130d26f2); position:sticky; top:0; z-index:40; border-bottom:1px solid #14334a; backdrop-filter:blur(18px); }
.header-inner { height:100%; width:calc(100% - 88px); max-width:1360px; margin:auto; display:flex; align-items:center; gap:30px; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:18px; white-space:nowrap; }
.brand > span:last-child { font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; }
.monogram { font-family:"Brush Script MT","URW Chancery L",Georgia,serif; font-style:italic; font-size:50px; font-weight:400; letter-spacing:-.19em; line-height:1; transform:rotate(-13deg); padding-right:8px; }
.desktop-nav { display:flex; gap:25px; height:100%; align-items:center; }
.desktop-nav a { font-size:.875rem; position:relative; white-space:nowrap; }
.desktop-nav a::after { content:""; position:absolute; height:2px; background:#f0f3ff; bottom:-10px; left:0; right:0; transform:scaleX(0); transition:transform .2s; }
.desktop-nav a:hover::after,.desktop-nav a.active::after { transform:scaleX(1); }
.header-right { display:flex; gap:22px; align-items:center; }
.location { display:flex; gap:7px; align-items:center; font-size:.85rem; white-space:nowrap; }
.location svg { color:#f8aedb; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:12px; border:1px solid transparent; border-radius:100px; padding:15px 25px; text-transform:uppercase; font-size:.76rem; letter-spacing:.13em; font-weight:700; line-height:1.2; transition:transform .2s,box-shadow .2s,background .2s; white-space:nowrap; min-height:46px; }
.button:hover { transform:translateY(-2px); }
.glow { background:linear-gradient(105deg,#e1097d 5%,#8f22c7 55%,#273eed); border-color:#9581f9; box-shadow:-8px 0 25px #f4008140,8px 0 25px #2c66ff38,inset 0 0 9px #ffffff29; }
.glow:hover { box-shadow:-7px 0 30px #f4008180,8px 0 30px #2c66ff65; }
.button.small { min-height:38px; padding:10px 21px; font-size:.73rem; }
.stroke-button { border-color:#6891c6; background:linear-gradient(110deg,#080f2099,#051023d9); box-shadow:inset 0 0 8px #528bf325,0 0 9px #4563c321; }
.stroke-button:hover { background:#162746; border-color:#c391f6; }
.button-row { display:flex; gap:24px; }
.menu-toggle,.mobile-nav { display:none; }
.skip-link { position:fixed; left:20px; top:-70px; background:white; color:#071120; padding:16px; z-index:100; }
.skip-link:focus { top:10px; }
.hero { min-height:460px; overflow:hidden; display:flex; align-items:center; }
.hero-background { position:absolute; width:100%; height:100%; inset:0; object-fit:cover; object-position:center; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#00132659,transparent 62%),linear-gradient(0deg,#00071151,transparent 30%); }
.hero-content { z-index:1; position:relative; padding:32px 0 43px; }
.hero-kicker { font-size:.76rem; letter-spacing:.29em; margin-bottom:10px; }
.hero h1 { font-size:clamp(68px,6.9vw,110px); font-weight:950; letter-spacing:-.055em; line-height:.88; text-transform:uppercase; max-width:680px; }
.hero h1 > span { display:block; }
.hero h1 > span:first-child { color:#f4f6f8; text-shadow:0 2px 12px #04263f55; }
.gradient-text { background:linear-gradient(90deg,#ed0879,#b124d9 47%,#3f6bea); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero-roles { font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.21em; margin-top:12px; }
.hero-roles b { padding:0 3px; }
.hero-intro { font-size:clamp(18px,1.55vw,24px); line-height:1.25; letter-spacing:.012em; margin:20px 0 25px; max-width:590px; text-shadow:0 2px 8px #000; }
.handwritten { font-family:"Brush Script MT","URW Chancery L",Georgia,serif; font-style:italic; font-weight:400; line-height:1.25; transform:rotate(-12deg); text-align:center; color:#d7cef5; }
.handwritten::after { content:""; width:65px; height:2px; background:linear-gradient(90deg,#ad54ff,#5086ff); display:block; margin:13px auto 0; }
.hero-note { position:absolute; right:3.8%; top:48px; font-size:clamp(20px,2vw,31px); text-shadow:0 2px 8px #02081e; }
.hero-location { position:absolute; bottom:19px; right:3.8%; font-size:.7rem; letter-spacing:.28em; font-weight:700; text-transform:uppercase; text-shadow:0 1px 8px #000; }
.hero-location span { display:block; font-size:.65rem; margin-top:6px; letter-spacing:.16em; color:#b8c4df; }
.about { padding:32px 0 27px; min-height:337px; isolation:isolate; background:#060e19; }
.about-photo { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#030c16f7 0%,#06101aeb 41%,#020b1550 67%,#030b15eb 86%),linear-gradient(0deg,#0209139e,transparent),var(--about-photo) var(--about-photo-position, center 14%) / cover; }
.about-grid { display:grid; grid-template-columns:230px 1.8fr .78fr 192px; gap:28px; }
.section-heading h2 { font-family:Georgia,"Times New Roman",serif; font-size:42px; line-height:1.04; letter-spacing:-.035em; font-weight:400; margin:5px 0 18px; }
.accent-line { display:block; width:44px; height:3px; background:linear-gradient(90deg,#f023bd,#7860ff); margin:20px 0 16px; }
.about-copy { font-size:1rem; line-height:1.48; color:#d7d8e4; }
.about-copy p + p { margin-top:14px; }
.signature { display:block; font-family:"Brush Script MT","URW Chancery L",Georgia,serif; font-size:27px; font-style:italic; color:#c6cfe4; margin-top:15px; transform:rotate(-4deg); }
.about blockquote { align-self:end; margin-bottom:0; font-family:Georgia,serif; font-style:italic; font-size:.95rem; text-align:center; color:#e4b7cc; line-height:1.3; text-shadow:0 2px 6px #000; }
.skills-list { align-self:center; display:grid; gap:20px; }
.skills-list li { display:flex; align-items:center; gap:18px; }
.skills-list span { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; }
.skills-list svg { flex-shrink:0; }
.web-section { padding:24px 0 28px; background:radial-gradient(ellipse at 60% 100%,#092044,transparent 76%),#030b16; }
.section-topline { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:16px; }
.section-topline p { font-size:1rem; color:#d8dfec; line-height:1.4; }
.small-motto { color:#bcd6f4; font-size:.67rem; letter-spacing:.22em; text-transform:uppercase; margin-left:auto; margin-right:40px; font-weight:700; }
.text-link { display:inline-flex; align-items:center; gap:12px; font-size:.75rem; text-transform:uppercase; font-weight:700; letter-spacing:.13em; background:none; border:0; }
.text-link:hover { color:#c899ff; }
.website-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; scroll-margin-top:110px; }
.website-card { border:1px solid #709dcd; border-radius:8px; background:#030c17; overflow:hidden; box-shadow:0 0 8px #3973d525; transition:transform .2s,box-shadow .2s; }
.website-card:hover { transform:translateY(-4px); box-shadow:0 0 22px #576be438; }
.reference-art { width:100%; background-repeat:no-repeat; }
.website-caption { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; gap:12px; min-height:76px; }
.website-caption h3 { font-size:1.04rem; font-weight:700; margin-bottom:4px; }
.website-caption p { color:#b9c8dc; font-size:.84rem; line-height:1.35; }
.circle-arrow { flex-shrink:0; width:31px; height:31px; display:grid; place-items:center; border:1px solid #74a4d8; border-radius:50%; }
.film-section { padding:35px 0; background:radial-gradient(ellipse at 31% 0,#3710279a,transparent 65%),linear-gradient(105deg,#0a0d19,#0e0610); }
.portfolio-row { display:grid; grid-template-columns:280px 1fr; gap:30px; }
.section-copy { font-size:1rem; color:#d5d7e3; line-height:1.4; margin-bottom:22px; }
.section-heading .button { font-size:.7rem; padding:13px 20px; min-height:42px; }
.film-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; align-content:start; padding-top:6px; }
.film-card { min-width:0; background:none; border:0; padding:0; text-align:center; color:inherit; }
.poster { position:relative; aspect-ratio:.69; border:1px solid #6d456b; overflow:hidden; background:#060c18; box-shadow:0 4px 14px #0005; border-radius:3px; transition:transform .2s,border-color .2s; }
.poster img,.poster .reference-art { width:100%; height:100%; object-fit:cover; }
.film-card:hover .poster { transform:translateY(-5px); border-color:#c982fc; }
.poster-hover { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; background:#030918a8; opacity:0; transition:opacity .2s; text-transform:uppercase; letter-spacing:.13em; font-size:.7rem; }
.film-card:hover .poster-hover,.film-card:focus-visible .poster-hover { opacity:1; }
.film-card h3 { font-size:.8rem; line-height:1.3; margin-top:11px; font-weight:500; }
.film-card p { font-size:.76rem; color:#b5b2c6; margin-top:4px; }
.photography-section { padding:28px 0 33px; background:linear-gradient(90deg,#06101eea,#040e18ec),var(--photography-photo) center/cover; }
.photo-row { grid-template-columns:320px 1fr; gap:28px; }
.photo-row .section-heading h2 { font-size:39px; white-space:nowrap; }
.photo-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.photo-card { position:relative; display:block; overflow:hidden; height:243px; border:1px solid #2d425b; border-radius:3px; background:#06101a; padding:0; text-align:left; }
.photo-card img { width:100%; height:100%; object-fit:cover; transition:transform .45s; }
.photo-card::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,#030a15ef); }
.photo-card span { position:absolute; bottom:13px; left:12px; right:7px; z-index:1; font-size:.8rem; line-height:1.3; }
.photo-card:hover img { transform:scale(1.06); }
.photo-arrow { position:absolute; right:10px; top:10px; opacity:0; filter:drop-shadow(0 1px 4px #000); transition:opacity .2s; }
.photo-card:hover .photo-arrow { opacity:1; }
.photo-services { display:flex; justify-content:space-between; gap:14px; margin-top:25px; }
.photo-services li { display:flex; align-items:center; gap:9px; }
.photo-services span { font-size:.65rem; letter-spacing:.13em; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.photo-services svg { flex-shrink:0; }
.music-section { background:linear-gradient(90deg,#010710f5 0%,#010710ed 26%,#0207142e 60%,#010613ad 100%),var(--music-photo) center 56% / cover; min-height:318px; }
.music-inner { position:relative; padding:28px 0; }
.music-inner .section-heading { max-width:360px; }
.music-inner .section-heading h2 { margin-bottom:12px; }
.music-inner .section-copy { margin-bottom:18px; }
.music-note { position:absolute; right:0; top:54px; font-size:31px; }
.contact-section { background:linear-gradient(90deg,#01091220,#010b16 26%,#020913dd),var(--contact-photo) left 56%/cover; }
.contact-inner { display:flex; gap:35px; align-items:center; justify-content:space-between; padding:30px 0 32px; padding-left:220px; min-height:161px; }
.contact-inner h2 { font-family:Georgia,serif; font-weight:400; font-size:32px; line-height:1.05; margin-bottom:15px; }
.contact-inner h2 strong { font-family:Arial,sans-serif; font-weight:600; letter-spacing:.015em; }
.contact-inner .eyebrow { font-size:.7rem; letter-spacing:.25em; }
.brand.compact > span:last-child { font-size:.68rem; letter-spacing:.1em; }
.brand.compact { gap:13px; }
.site-footer { background:linear-gradient(#030b11f0,#030b11f4),var(--footer-photo) center/cover; }
.footer-inner { display:flex; flex-wrap:wrap; align-items:center; gap:25px; padding:28px 0 22px; }
.footer-inner .brand { gap:16px; }
.footer-inner .brand > span:last-child { font-size:.68rem; }
.footer-inner p { font-size:.75rem; color:#9dabbc; }
.footer-inner nav { display:flex; gap:22px; margin-left:auto; font-size:.76rem; }
.footer-inner nav a:hover { color:#e1aafa; }
.copyright { color:#8090a7; font-size:.75rem; width:100%; text-align:right; }
.portfolio-dialog { padding:36px; border:1px solid #526791; background:radial-gradient(ellipse at top right,#322342,#08111f 65%); color:#f6f6fc; box-shadow:0 0 90px #000a; max-height:90dvh; overflow-y:auto; width:calc(100% - 32px); }
.portfolio-dialog [data-slot="dialog-title"] { font-family:Georgia,serif; font-size:32px; line-height:1.1; font-weight:400; letter-spacing:-.025em; }
.portfolio-dialog [data-slot="dialog-description"] { color:#bfccdf; font-size:1rem; line-height:1.6; }
.portfolio-dialog > [data-slot="dialog-close"] { top:12px; right:12px; width:32px; height:32px; display:grid; place-items:center; }
.portfolio-dialog > [data-slot="dialog-close"] svg { width:20px; height:20px; }
.wide-dialog { max-width:1080px !important; }
.availability-note { display:flex; gap:16px; align-items:center; color:#d9c4e9; background:#aa7ae010; border:1px solid #82619b50; padding:18px; border-radius:6px; font-size:.95rem; line-height:1.55; margin-top:6px; }
.availability-note span span { color:#aebcd0; }
.muted { color:#aebcd0; font-size:.875rem; }
.music-dialog-image { width:100%; max-height:260px; object-fit:cover; border-radius:5px; }
.film-modal-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; margin-top:12px; }
.gallery-filters { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.gallery-filters button { border:1px solid #425874; background:#101d31; border-radius:40px; padding:10px 15px; font-size:.875rem; }
.gallery-filters button[aria-pressed="true"] { background:#66328e; border-color:#bd93ed; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.gallery-grid button { background:#0a1729; border:1px solid #354a67; border-radius:5px; overflow:hidden; text-align:left; padding:0; }
.gallery-grid img { width:100%; height:190px; object-fit:cover; }
.gallery-grid span { display:block; padding:12px; font-size:.9rem; }
.lightbox { max-width:1100px !important; padding:36px 20px 17px; gap:10px; background:#040b15; }
.lightbox > img { max-height:65dvh; width:100%; object-fit:contain; }
.lightbox-bar { display:flex; justify-content:space-between; align-items:center; text-align:center; }
.lightbox-bar p { font-size:1rem; }
.lightbox-bar span { display:block; font-size:.78rem; color:#a3b1c8; margin-top:5px; }
.icon-button { width:44px; height:44px; display:grid; place-items:center; border:1px solid #415476; border-radius:50%; background:#0b192e; }
.back-gallery { margin:6px auto 0; font-size:.75rem; }
.film-detail { max-width:780px !important; display:grid; grid-template-columns:1fr 1.3fr; gap:30px; align-items:center; }
.detail-poster img { max-height:67vh; width:100%; object-fit:contain; }
.detail-poster .reference-art { max-height:67vh; }
.film-detail [data-slot="dialog-title"] { margin:12px 0 18px; }
.film-detail .availability-note { margin:20px 0; }
@media (min-width:1600px) { .hero { min-height:540px; } }
@media (max-width:1250px) {
  .container { width:calc(100% - 76px); } .header-inner { width:calc(100% - 58px); gap:20px; } .desktop-nav { gap:18px; } .brand { gap:15px; } .brand > span:last-child { font-size:.7rem; } .location { display:none; }
  .hero { min-height:405px; } .hero h1 { font-size:90px; } .hero-roles { font-size:.7rem; letter-spacing:.16em; } .hero-kicker { font-size:.7rem; }
  .about-grid { grid-template-columns:180px 1.8fr .5fr 165px; gap:22px; } .section-heading h2 { font-size:38px; } .skills-list span { font-size:.65rem; } .skills-list { gap:17px; } .skills-list li { gap:13px; } .about-copy { font-size:1rem; } .about blockquote { font-size:.85rem; }
  .portfolio-row { grid-template-columns:250px 1fr; gap:24px; } .photo-row { grid-template-columns:275px 1fr; } .photo-row .section-heading h2 { font-size:34px; } .photo-card { height:218px; } .photo-services { flex-wrap:wrap; gap:15px 20px; } .photo-services li { flex-basis:27%; } .photo-services span { font-size:.65rem; } .contact-inner { padding-left:150px; } .contact-inner .brand { display:none; } .small-motto { margin-right:15px; }
}
@media (max-width:1000px) {
  .desktop-nav { gap:15px; } .desktop-nav a { font-size:.85rem; } .header-right { display:none; } .hero { min-height:392px; } .hero h1 { font-size:77px; } .hero-intro { font-size:19px; } .hero-note { font-size:24px; right:3%; top:35px; } .hero-location { display:none; } .hero-roles { font-size:.65rem; } .hero-kicker { font-size:.65rem; letter-spacing:.21em; }
  .about-grid { grid-template-columns:160px 1fr 170px; } .about blockquote { display:none; } .about-photo { background-position:center,center,var(--about-photo-position, center 14%); } .section-heading h2 { font-size:34px; } .small-motto { display:none; }
  .portfolio-row { grid-template-columns:205px 1fr; gap:23px; } .film-grid { gap:12px; } .film-card h3 { font-size:.8rem; } .section-heading .button { font-size:.65rem; padding:12px 14px; gap:8px; }
  .photo-row { grid-template-columns:250px 1fr; } .photo-row .section-heading h2 { font-size:31px; } .photo-card { height:209px; } .photo-card span { font-size:.75rem; left:8px; } .photo-services { gap:16px 8px; } .photo-services svg { width:22px; } .photo-services span { font-size:.6rem; } .contact-inner { padding-left:145px; } .footer-inner { gap:22px; } .footer-inner nav { gap:14px; } .footer-inner p { display:none; }
}
@media (max-width:760px) {
  html { scroll-padding-top:68px; } .container { width:calc(100% - 40px); } .site-header { height:66px; } .header-inner { width:calc(100% - 36px); } .desktop-nav { display:none; } .header-inner .brand > span:last-child { font-size:.75rem; } .monogram { font-size:43px; }
  .menu-toggle { display:grid; place-items:center; background:none; border:1px solid #334760; border-radius:7px; width:42px; height:42px; } .mobile-nav { display:grid; padding:14px 20px 22px; background:#050f1afc; border-bottom:1px solid #456190; box-shadow:0 14px 30px #0008; } .mobile-nav a { display:flex; justify-content:space-between; padding:13px 6px; font-size:1rem; border-bottom:1px solid #1c2b40; }
  .hero { min-height:640px; display:block; } .hero-background { height:360px; object-fit:cover; object-position:69% center; } .hero-shade { background:linear-gradient(0deg,#030c17 25%,#030c17f7 39%,#030c17bb 50%,transparent 76%); } .hero-content { padding-top:292px; padding-bottom:37px; } .hero-kicker { font-size:.62rem; letter-spacing:.18em; margin-bottom:16px; } .hero h1 { font-size:clamp(54px,12.8vw,94px); line-height:.9; letter-spacing:-.052em; } .hero-roles { font-size:.62rem; letter-spacing:.12em; margin-top:14px; line-height:1.8; } .hero-roles b { padding:0 1px; } .hero-intro { font-size:18px; max-width:430px; margin:18px 0 22px; line-height:1.4; } .hero-note { top:35px; left:22px; right:auto; font-size:24px; opacity:.9; } .button-row { gap:12px; } .button { padding:14px 19px; font-size:.7rem; gap:9px; }
  .about { padding:32px 0; } .about-grid { grid-template-columns:1fr; gap:24px; } .about-photo { background:linear-gradient(#04101aea,#030c16dd),var(--about-photo) 64% top/cover; } .section-heading h2 { font-size:37px; } .about .section-heading h2 br { display:none; } .about .section-heading h2 { margin-bottom:0; } .about .accent-line { margin-bottom:0; } .about-copy { font-size:1rem; max-width:600px; line-height:1.6; } .signature { margin-top:16px; } .skills-list { grid-template-columns:1fr 1fr; gap:20px 13px; margin-top:10px; } .skills-list span { font-size:.7rem; } .skills-list svg { width:24px; }
  .web-section { padding:27px 0 30px; } .section-topline { align-items:start; } .section-topline p { font-size:1rem; margin-top:4px; } .section-topline .text-link { display:none; } .website-grid { grid-template-columns:1fr; gap:18px; } .website-card { border-color:#557caa; } .website-caption { padding:15px; } .website-caption p { font-size:.9rem; }
  .portfolio-row { grid-template-columns:1fr; gap:25px; } .film-section { padding:30px 0 34px; } .section-heading h2 br { display:none; } .section-copy { font-size:1rem; line-height:1.5; max-width:520px; } .section-heading .button { font-size:.7rem; padding:13px 19px; } .film-grid { grid-template-columns:repeat(5,minmax(134px,1fr)); overflow-x:auto; margin:0 -20px; padding:6px 20px 12px; gap:15px; scroll-snap-type:x mandatory; } .film-card { scroll-snap-align:start; } .film-card h3 { font-size:.875rem; } .film-card p { font-size:.8rem; }
  .photography-section { padding:30px 0; } .photo-row .section-heading h2 { font-size:35px; white-space:normal; } .photo-row .section-heading h2 br { display:block; } .photo-grid { grid-template-columns:repeat(5,minmax(142px,1fr)); overflow-x:auto; margin:0 -20px; padding:0 20px 12px; gap:10px; scroll-snap-type:x mandatory; } .photo-card { height:240px; scroll-snap-align:start; } .photo-card span { font-size:.875rem; left:12px; } .photo-services { gap:20px 10px; margin-top:20px; } .photo-services li { flex-basis:30%; gap:8px; } .photo-services span { font-size:.6rem; }
  .music-section { min-height:360px; background-position:center; background-image:linear-gradient(90deg,#020712eb,#0109158a),var(--music-photo); } .music-inner { padding:32px 0; } .music-inner .section-heading { max-width:310px; } .music-inner .section-heading h2 br { display:block; } .music-note { display:none; }
  .contact-inner { padding:32px 0; display:flex; flex-direction:column; align-items:start; gap:24px; } .contact-inner h2 { font-size:32px; } .contact-inner .eyebrow { font-size:.65rem; } .contact-section { background:linear-gradient(90deg,#04101adc,#030b16eb),var(--contact-photo) center/cover; }
  .footer-inner { padding:28px 0; gap:27px; } .footer-inner nav { margin:0; width:100%; gap:17px; flex-wrap:wrap; font-size:.875rem; } .copyright { text-align:left; }
  .portfolio-dialog { padding:30px 22px 24px; max-height:88dvh; } .portfolio-dialog [data-slot="dialog-title"] { font-size:28px; } .film-modal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; } .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .gallery-grid img { height:130px; } .gallery-grid span { font-size:.875rem; padding:10px; } .gallery-filters { gap:6px; } .gallery-filters button { font-size:.875rem; padding:9px 12px; } .lightbox { padding:35px 12px 16px; } .lightbox > img { max-height:60dvh; } .film-detail { grid-template-columns:1fr; gap:22px; } .detail-poster { max-width:210px; margin:0 auto; } .detail-poster img { max-height:38dvh; } .film-detail .availability-note { margin:12px 0; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } }

/* Keep small labels legible and horizontal galleries within their columns. */
.portfolio-row > *, .photo-content { min-width:0; }
.hero h1 .gradient-text { width:max-content; max-width:100%; }
.eyebrow,.hero-kicker,.hero-roles,.skills-list span,.photo-services span,.small-motto,.hero-location,.hero-location span,.brand > span:last-child,.contact-inner .eyebrow,.footer-inner .brand > span:last-child,.brand.compact > span:last-child { font-size:max(.75rem, 12px); }
.button,.button.small,.section-heading .button,.text-link { font-size:.875rem; letter-spacing:.09em; }
.film-card h3,.photo-card span,.desktop-nav a,.footer-inner nav { font-size:.875rem; }
@media (max-width:1000px) and (min-width:761px) { .header-inner { gap:18px; } .desktop-nav { gap:12px; } .desktop-nav a { font-size:.8125rem; } .header-inner .brand > span:last-child { font-size:.6875rem; } .section-heading .button { white-space:normal; text-align:left; font-size:.8125rem; letter-spacing:.035em; } }
@media (max-width:760px) { .button-row { flex-wrap:wrap; } .button { padding:14px 17px; font-size:.8125rem; } .hero-kicker { max-width:330px; letter-spacing:.18em; line-height:1.7; } .hero-roles { max-width:330px; letter-spacing:.055em; line-height:1.8; } .hero-note { font-size:22px; } .photo-services li { flex-basis:45%; } .photo-services span { font-size:.75rem; } .skills-list li { gap:10px; } .skills-list span { letter-spacing:.06em; } }

/* Image paths are set in the editable .portfolio-site variables below. */
.website-art { width:100%; aspect-ratio:272 / 91; object-fit:cover; }
.youtube-link { display:inline-flex; align-items:center; gap:10px; width:fit-content; color:#d2dff4; font-size:.875rem; line-height:1.5; }
.youtube-link:hover { color:#ff91cf; }
.youtube-link svg { flex-shrink:0; }
.contact-email { text-transform:none; letter-spacing:0; max-width:100%; white-space:normal; }
.contact-email span { overflow-wrap:anywhere; }
.contact-email svg { flex-shrink:0; }
.film-detail .youtube-link { margin-bottom:22px; }
.project-watch { margin:12px 0 20px; }

/* =====================================================
   EDIT IMAGE PATHS AND THE ABOUT PHOTO POSITION HERE
   Increase the second percentage to move the photo up.
   ===================================================== */
.portfolio-site {
  --about-photo: url("images/on-location.jpg");
  --about-photo-position: center 22%;
  --music-photo: url("images/piano.jpg");
  --photography-photo: url("images/mountains.jpg");
  --contact-photo: url("images/lake.jpg");
  --footer-photo: url("images/mountains.jpg");
}

/* MATTHEW HEWLETT */
.collaborator-section {
  position: relative;
  isolation: isolate;
  background: linear-gradient(90deg, #05111dda 0%, #071120ad 56%, #130d1c77 100%), url("images/matthew-landscape.jpg") center 55% / cover;
}
.collaborator-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, #050c1870, transparent 30%, #050c187f);
}
.collaborator {
  display: grid;
  grid-template-columns: minmax(240px, 315px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 78px);
  align-items: center;
  padding: 50px 0 54px;
}
.collaborator-photo {
  margin: 0;
  padding: 8px;
  border: 1px solid #bfa6c481;
  background: linear-gradient(130deg, #ffffff24, #06101a9a);
  box-shadow: 0 20px 46px #020711b3, 0 0 28px #d191bc22;
  transform: rotate(-1deg);
}
.collaborator-photo img {
  display: block;
  width: 100%;
  height: clamp(300px, 29vw, 390px);
  object-fit: cover;
  object-position: center 30%;
}
.collaborator-photo figcaption {
  padding: 15px 11px 9px;
  font-family: Georgia, serif;
  font-size: 20px;
  color: #f4e8ec;
}
.collaborator-photo figcaption span {
  display: block;
  margin-top: 6px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #d0bfce;
}
.collaborator-copy {
  max-width: 830px;
}
.collaborator-copy h2 {
  font-family: Georgia, serif;
  font-size: clamp(32px, 3.1vw, 48px);
  font-weight: 400;
  line-height: 1.08;
  margin: 9px 0 22px;
  max-width: 650px;
}
.collaborator-copy h2::after {
  content: "";
  display: block;
  width: 65px;
  height: 3px;
  margin-top: 21px;
  background: linear-gradient(90deg, #f126ad, #7277fa);
}
.collaborator-copy p:not(.eyebrow) {
  color: #e1e1e9;
  font-size: 16px;
  line-height: 1.7;
  text-shadow: 0 2px 9px #010714b0;
}
.collaborator-copy p + p {
  margin-top: 14px;
}
.collaborator-work {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 23px;
}
.collaborator-work li {
  border: 1px solid #c8adc578;
  background: #081322b0;
  padding: 8px 11px;
  font-size: 13px;
  letter-spacing: .05em;
  color: #f6eaf7;
}

/* PROJECT CREDITS AND THE COTTAGE GROVE BRIDGE TOUR */
.film-card .film-role {
  color: #e7b8e1;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 8px;
}
.credit-heading {
  margin-bottom: 9px;
  font-size: 14px;
  color: #dbc9ed;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.project-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 18px;
}
.project-roles li {
  border: 1px solid #786388;
  border-radius: 5px;
  padding: 6px 9px;
  color: #f2d9ee;
  background: #b167b513;
  font-size: 14px;
  line-height: 1.4;
}
.project-copy > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.65;
  color: #c5d0e0;
  margin-bottom: 14px;
}
.project-copy > .text-link {
  display: flex;
  margin-top: 16px;
}
.project-copy .youtube-link {
  margin: 8px 0 0;
}
.bridge-project {
  margin-top: 32px;
  border-top: 1px solid #613455;
  padding-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 38px;
  align-items: center;
}
.bridge-visual {
  border: 1px solid #798dac;
  border-radius: 7px;
  overflow: hidden;
  background: #f4fff8;
  box-shadow: 0 14px 30px #01061580;
}
.bridge-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 1.95;
  object-fit: cover;
  object-position: center bottom;
}
.bridge-project h3 {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin: 9px 0 14px;
}
.bridge-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: #cec4d6;
  margin-bottom: 16px;
}
.bridge-episodes {
  border-top: 1px solid #7e5a81;
  margin: 18px 0;
}
.bridge-episodes li {
  border-bottom: 1px solid #7e5a816b;
}
.bridge-episodes a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 8px;
  font-size: 17px;
  line-height: 1.4;
  transition: background .2s, color .2s;
}
.bridge-episodes a:hover,
.bridge-episodes a:focus-visible {
  background: #ffffff12;
  color: #f4c4eb;
}
.bridge-episodes a span:last-child {
  color: #cca5e8;
  font-size: 22px;
}
.bridge-copy .bridge-credit {
  color: #bdb1c2;
  font-size: 14px;
  margin-bottom: 0;
}
.film-series-links {
  display: flex;
  gap: 10px 22px;
  flex-wrap: wrap;
  align-items: baseline;
  border-top: 1px solid #526791;
  padding-top: 18px;
}
.film-series-links h3 {
  width: 100%;
  font-family: Georgia, serif;
  font-size: 21px;
  font-weight: 400;
}
.film-series-links a {
  color: #d7c9f0;
  font-size: 15px;
}
.film-series-links a:hover {
  color: #ffa9db;
}

/* NATIVE DIALOGS: THE TEXT STAYS IN index.html */
dialog.portfolio-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: 620px;
  border-radius: 10px;
}
dialog:not([open]) {
  display: none;
}
dialog.portfolio-dialog[open]:not(.film-detail) {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
dialog::backdrop {
  background: #01040ccc;
  backdrop-filter: blur(5px);
}
.dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 34px;
  height: 34px;
  font-size: 25px;
  line-height: 1;
}
.film-detail {
  width: calc(100% - 32px);
}
.lightbox [data-lightbox-image] {
  width: 100%;
  max-height: 65dvh;
  object-fit: contain;
}
.gallery-grid [hidden] {
  display: none;
}
body:has(dialog[open]) {
  overflow: hidden;
}
.mobile-nav[hidden] {
  display: none;
}

@media (max-width: 760px) {
  .collaborator {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 38px 0 42px;
  }
  .collaborator-photo {
    width: min(100%, 330px);
    margin-inline: auto;
  }
  .collaborator-photo img {
    height: 300px;
  }
  .collaborator-copy h2 {
    font-size: 34px;
  }
  .collaborator-copy .eyebrow {
    letter-spacing: .13em;
  }
  .bridge-project {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .bridge-project h3 {
    font-size: 28px;
  }
  .film-card .film-role {
    font-size: 14px;
  }
  dialog.portfolio-dialog {
    padding-top: 45px;
  }
}
@media (max-width: 420px) {
  .collaborator-photo img {
    height: 270px;
  }
}
@media (max-width: 760px) {
  .film-grid, .photo-grid {
    scroll-padding-inline: 20px;
  }
}

/* Film watch buttons. Edit their labels and links in index.html. */
.project-watch {
  margin: 24px 0 20px;
  padding-top: 18px;
  border-top: 1px solid #655276;
}
.project-watch .credit-heading {
  margin-bottom: 12px;
}
.watch-actions {
  display: grid;
  gap: 9px;
}
.watch-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 13px;
  border: 1px solid #6f6285;
  border-radius: 8px;
  background: linear-gradient(110deg, #1b263b, #20182f);
  color: #f8f6fc;
  text-decoration: none;
  box-shadow: inset 0 1px 0 #ffffff18;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.watch-link-primary {
  border-color: #d89ddf;
  background: linear-gradient(105deg, #863e91, #633491 60%, #373a80);
  box-shadow: inset 0 1px 0 #ffffff30, 0 5px 18px #5a2b7b33;
}
.watch-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding-left: 2px;
  border-radius: 50%;
  background: #ffffff22;
  font-size: 13px;
  line-height: 1;
}
.watch-label {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.watch-label strong {
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
.watch-label small {
  color: #f0d9f3;
  font-size: 13px;
  line-height: 1.3;
}
.watch-arrow {
  margin-left: auto;
  color: #f5c9fa;
  font-size: 20px;
  line-height: 1;
}
.watch-link:hover {
  transform: translateY(-2px);
  border-color: #f5b8e1;
  box-shadow: 0 10px 24px #0006;
}
.watch-link:focus-visible {
  outline: 3px solid #f8c6f2;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .watch-link { transition: none; }
  .watch-link:hover { transform: none; }
}