:root {
    --bg: #f5f4ef;
    --fg: #191615;
    --muted: #6f6a66;
    --line: #3a3a3a;
    --border: #e2e0d8;
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Space Grotesk", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0; padding-left: 0.38em; /* balances the trailing letter-spacing */
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Hover underline: same font, dark-gray line sliding in left → right */
.ulink { position: relative; display: inline-block; }
.ulink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease-out;
}
.ulink:hover::after,
.ulink:focus-visible::after { transform: scaleX(1); }

:focus-visible { outline: 2px solid var(--line); outline-offset: 4px; }

/* Draft bar (only shown before publishing) */
.draft-bar {
    position: sticky; top: 0; z-index: 20;
    background: var(--fg); color: var(--bg);
    font-size: 13px; text-align: center; padding: 8px 16px;
}
.draft-bar a { text-decoration: underline; }

/* Hero */
.hero {
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 56px 24px;
}
.logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; border-radius: 50%;
    background: var(--fg); color: var(--bg);
    font-family: var(--serif); font-size: 42px; font-weight: 500;
    transition: transform 0.3s;
}
a.logo:hover { transform: scale(1.05); }
.nav {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px 22px; margin-top: 40px;
}
.nav a { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: -0.01em; }
.tagline { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--muted); margin: 40px 0 0; }
.scroll-down { display: inline-flex; margin-top: 40px; font-size: 24px; padding: 10px; color: var(--fg); transition: color 0.3s; }
.scroll-down:hover { color: var(--muted); }

/* Work */
.work { position: relative; padding: 48px 24px 96px; scroll-margin-top: 24px; }
.services-line { max-width: 560px; margin: 0 auto 64px; text-align: center; color: var(--muted); font-size: 15px; }
.grid { display: grid; grid-template-columns: 1fr; gap: 48px 32px; max-width: 1180px; margin: 0 auto; }
.card { text-align: center; }
.card-media {
    position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
    aspect-ratio: 16 / 9; overflow: hidden; background: #dcdad3;
}
.card-media video, .card-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s ease-out;
}
.card-media .card-cover { position: absolute; inset: 0; transition: transform 0.7s ease-out, opacity 0.4s ease; }
.card-media.is-playing .card-cover { opacity: 0; }
.card-media:hover video, .card-media:hover img,
.card-media:focus-visible video, .card-media:focus-visible img { transform: scale(1.03); }
.play-badge {
    position: absolute; right: 12px; bottom: 12px;
    background: var(--fg); color: var(--bg);
    font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 4px 8px; opacity: 0; transition: opacity 0.3s;
}
.card-media:hover .play-badge, .card-media:focus-visible .play-badge { opacity: 1; }
.card-title { margin: 16px 0 0; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.card-client { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* Studio / about */
.studio { padding: 64px 24px; scroll-margin-top: 24px; }
.section-title { text-align: center; font-family: var(--serif); font-size: 60px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.studio-grid { display: grid; grid-template-columns: 1fr; gap: 48px; max-width: 1180px; margin: 64px auto 0; align-items: center; }
.studio-photo { overflow: hidden; }
.studio-photo img { width: 100%; height: auto; transition: transform 0.7s ease-out; }
.studio-photo:hover img { transform: scale(1.04); }
.studio-heading { font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1.2; margin: 0 0 24px; }
.studio-text p { color: var(--muted); max-width: 460px; }

/* Contact */
.contact { padding: 96px 24px; text-align: center; border-top: 1px solid var(--border); scroll-margin-top: 24px; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.contact-title { font-family: var(--serif); font-size: 64px; font-weight: 500; letter-spacing: -0.02em; margin: 8px 0 16px; }
.contact-text { max-width: 480px; margin: 0 auto 40px; color: var(--muted); }
.btn {
    display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 16px 40px;
    background: var(--fg); color: var(--bg);
    font-size: 13px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase;
    transition: background 0.3s;
}
.btn:hover { background: var(--line); }
.btn svg { transition: transform 0.3s; }
.btn:hover svg { transform: translate(2px, -2px); }
.contact-cols { display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 900px; margin: 72px auto 0; }
.contact-link { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer-nav { display: flex; gap: 32px; }
.footer-nav a { font-size: 12px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; }
.footer-nav a:hover { color: var(--fg); }
.socials { display: flex; gap: 20px; font-size: 20px; }
.socials a { color: var(--muted); transition: color 0.3s; }
.socials a:hover { color: var(--fg); }
.copyright { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* Video player */
.player { border: 0; padding: 0; background: transparent; width: min(1100px, 92vw); max-height: 90vh; overflow: visible; }
.player::backdrop { background: rgba(10, 9, 8, 0.92); }
.player video { width: 100%; max-height: 85vh; background: #000; }
.player-close {
    position: absolute; right: 0; top: -52px; width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: rgba(255,255,255,0.8); font-size: 26px; cursor: pointer;
}
.player-close:hover { color: #fff; }

/* Coming-soon page */
body.soon main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.soon-text { font-family: Georgia, serif; font-style: italic; font-size: 22px; color: var(--muted); margin: 0; }

@media (min-width: 768px) {
    .hero { padding: 80px 24px; }
    .logo { width: 96px; height: 96px; font-size: 48px; }
    .nav { gap: 16px 96px; }
    .nav a { font-size: 40px; }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .studio-grid { grid-template-columns: 1fr 1fr; }
    .section-title { font-size: 96px; }
    .contact-title { font-size: 96px; }
    .contact-cols { grid-template-columns: repeat(3, 1fr); }
    .card-title { font-size: 30px; }
}

@media (min-width: 1100px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
    html { scroll-behavior: auto; }
}

/* Name at the top of the page */
.brand-name {
    margin: 0; padding-left: 0.38em; /* balances the trailing letter-spacing */
    font-family: var(--sans); font-size: 16px; font-weight: 600;
    letter-spacing: 0.38em; text-transform: uppercase; color: var(--fg);
}
@media (min-width: 768px) {
    .brand-name { font-size: 19px; }
}

/* Clients + testimonial */
.clients { padding: 16px 24px 40px; text-align: center; }
.client-list {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 8px 22px; max-width: 1000px; margin: 20px auto 0;
}
.client-list li {
    font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em;
    color: var(--muted); transition: color 0.3s;
}
.client-list li:hover { color: var(--fg); }
/* Logos sit in equal boxes so wide and square marks carry similar weight */
.client-logo { display: flex; }
.client-logo img {
    width: 112px; height: 40px; object-fit: contain;
    filter: grayscale(1); opacity: 0.6; mix-blend-mode: multiply;
    transition: filter 0.4s, opacity 0.4s;
}
.client-logo:hover img { filter: none; opacity: 1; }
.quote { max-width: 720px; margin: 72px auto 0; }
.quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.35; }
.quote figcaption { margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 768px) {
    .client-list li { font-size: 30px; }
    .client-logo img { width: 150px; height: 52px; }
    .quote blockquote { font-size: 34px; }
}

/* Services (empty for now: just the heading) */
.services { padding: 96px 24px 24px; scroll-margin-top: 24px; }
.services-text { max-width: 640px; margin: 40px auto 0; text-align: center; color: var(--muted); }

/* Phones can't hover: always show the "watch" label so covers read as tappable */
.play-badge::before { content: "▶"; margin-right: 6px; font-size: 9px; vertical-align: 1px; }
@media (hover: none) {
    .play-badge { opacity: 1; }
}
@media (min-width: 768px) {
    .studio { padding: 96px 24px; }
    .clients { padding: 24px 24px 96px; }
    .client-list { gap: 14px 44px; }
}

/* Gentle motion — only when JS is running and the visitor hasn't asked for reduced motion */
.motion .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.65, 0.3, 1), transform 0.9s cubic-bezier(0.2, 0.65, 0.3, 1),
                color 0.3s, background-color 0.3s;
    will-change: opacity, transform;
}
.motion .reveal.in { opacity: 1; transform: none; }

/* The intro settles in on page load, one line after another */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero > * { animation: rise 1s cubic-bezier(0.2, 0.65, 0.3, 1) backwards; }
.hero > :nth-child(1) { animation-delay: 0.05s; }
.hero > :nth-child(2) { animation-delay: 0.2s; }
.hero > :nth-child(3) { animation-delay: 0.35s; }
.hero > :nth-child(4) { animation-delay: 0.5s; }
.hero > :nth-child(5) { animation-delay: 0.7s; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.scroll-down svg { animation: nudge 2.4s ease-in-out 1.8s infinite; }

@media (prefers-reduced-motion: reduce) {
    .hero > *, .scroll-down svg { animation: none; }
}

/* Typography details */
h1, h2, h3, .studio-heading, .contact-title, .tagline { text-wrap: balance; }
p, blockquote { text-wrap: pretty; hanging-punctuation: first; }
.contact-link, .copyright { font-variant-numeric: lining-nums tabular-nums; }

/* Camerawoman logo at the top (inline SVG, takes the text colour) */
.brand-logo { margin: 0; line-height: 0; color: #4a4542; }
.brand-logo a { display: inline-block; color: #4a4542; transition: color 0.4s; }
.brand-logo a:hover { color: var(--fg); }
/* A hairline of page colour around the letters slims the bold wordmark to sit with the serif menu */
.brand-logo .word { stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; }
.brand-logo svg {
    display: block; width: 150px; height: auto; overflow: visible;
    /* undo the outline-icon defaults so the logo keeps its own fills and square brackets */
    fill: currentColor; stroke: none; stroke-linecap: butt; stroke-linejoin: miter;
}
@media (min-width: 768px) {
    .brand-logo svg { width: 180px; }
}

/* "Focus" intro: the brackets close in like a viewfinder while the words develop, then rest.
   On hover they ease outward a touch. Units are the logo's own (viewBox) units. */
.hero > .brand-logo { animation: none; }
.brand-logo .br { transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.3, 1); }
.brand-logo .br-l { animation: focus-l 1.2s cubic-bezier(0.2, 0.65, 0.3, 1) 0.15s backwards; }
.brand-logo .br-r { animation: focus-r 1.2s cubic-bezier(0.2, 0.65, 0.3, 1) 0.15s backwards; }
.brand-logo .word { animation: word-in 0.9s cubic-bezier(0.5, 0, 0.6, 1) 0.3s backwards; }
.brand-logo a:hover .br-l { transform: translateX(-14px); }
.brand-logo a:hover .br-r { transform: translateX(14px); }
@keyframes focus-l { from { transform: translateX(-110px); opacity: 0; } 60% { opacity: 1; } }
@keyframes focus-r { from { transform: translateX(110px); opacity: 0; } 60% { opacity: 1; } }
/* Words "develop" like a photo in the darkroom: pale first, then deepening to full ink */
@keyframes word-in { from { opacity: 0; } 45% { opacity: 0.3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .brand-logo .br, .brand-logo .word { animation: none; transition: none; }
}