:root { --dark: #19201f; --paper: #f7f6f1; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--paper); background: var(--dark); font-family: Archivo, Arial, sans-serif; font-size: 16px; }
a { color: inherit; } img { display: block; max-width: 100%; }
.hero { min-height: 710px; padding: 55px 8.6% 75px; display: flex; flex-direction: column; justify-content: space-between; color: white; background: radial-gradient(circle at 13% 51%, rgba(211,222,25,.88), transparent 36%), radial-gradient(circle at 97% 85%, #173900, transparent 45%), radial-gradient(circle at 99% 3%, #d49cab, transparent 46%), linear-gradient(120deg, #c0a955, #cda5aa 52%, #333d28); }
.hero h1 { margin: 0; font-size: clamp(58px, 8.1vw, 106px); font-weight: 400; line-height: .98; letter-spacing: .01em; }.hero p { margin: 0; font-size: clamp(20px, 2.05vw, 31px); }
.section-dark { background: var(--dark); }.about { min-height: 420px; padding: 54px 5.8%; display: flex; align-items: center; gap: 7.5%; }.about-copy { width: min(60%, 720px); }.about h2, .work h2, .independent h2, footer h2 { margin: 0 0 35px; font-size: 25px; line-height: 1; font-weight: 600; }.about p { margin: 0; font-size: 17px; line-height: 1.03; }.portrait { width: min(29%, 240px); aspect-ratio: 1/1.17; object-fit: cover; object-position: center top; filter: grayscale(1) contrast(1.2); }
.work { min-height: 650px; padding: 55px 5%; display: grid; grid-template-columns: 27% 1fr; gap: 6%; }.bbc-work { background: linear-gradient(rgba(15,31,34,.45), rgba(13,21,20,.72)), url('Filmography/4.%20The%20World%20of%20Parvaty%20Tirkey/Still3.jpg') center/cover; }.work-label h2 { margin-bottom: 30px; }.work-label h3 { margin: 0 0 28px; font-size: 24px; line-height: .9; font-weight: 400; }.work-label h4, .project h4 { margin: 30px 0 10px; font-size: 15px; }.work-label p, .project p { margin: 0 0 17px; font-size: 15px; line-height: 1.05; }.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 17px 20px; }.video-grid a, .project-video { position: relative; display: block; background: #111; }.video-grid a::after, .project-video::after { content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: white; background: #f00; font-size: 13px; }.video-grid img, .project-video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }.video-grid a:hover { outline: 2px solid white; outline-offset: 3px; }
.independent { min-height: 760px; padding: 55px 5.8%; display: grid; grid-template-columns: 27% 34% 32%; gap: 3.5%; color: white; background: radial-gradient(circle at 12% 43%, rgba(207,218,14,.7), transparent 34%), radial-gradient(circle at 96% 8%, rgba(225,140,162,.68), transparent 48%), linear-gradient(110deg, #b0ab38, #b99772 57%, #41613a); }.independent-label h2 { margin-bottom: 31px; font-weight: 400; }.independent-label p { font-size: 15px; }.project { max-width: 430px; }.project h3 { margin: 20px 0 7px; font-size: 19px; line-height: .98; }.project-type { font-size: 14px !important; }.project h4 { margin-top: 22px; }.small-links { font-size: 13px !important; text-decoration: underline; }.poster { width: 100%; max-height: 580px; object-fit: contain; object-position: top; } footer { padding: 46px 6%; background: #03728b; } footer h2 { margin-bottom: 16px; } footer a { font-size: 16px; text-decoration: none; }
@media (max-width: 700px) { .hero { min-height: 520px; padding: 45px 8% 55px; }.about { padding: 38px 7%; gap: 8%; }.about-copy { width: 62%; }.about p { font-size: 14px; }.portrait { width: 30%; }.work { padding: 40px 6%; grid-template-columns: 1fr; gap: 35px; }.work-label h2 { margin-bottom: 20px; }.work-label h3 { margin-bottom: 17px; }.work-label h4 { margin-top: 20px; }.video-grid { gap: 10px; }.independent { padding: 40px 7%; grid-template-columns: 1fr; gap: 30px; }.independent-label h2 { margin-bottom: 16px; }.project { max-width: none; }.poster { max-width: 420px; } }