/* Shared furniture for the two portfolio surfaces (/vo and /audio) only.
   Linked after /base.css and before each page's own <style>.

   Why not base.css: the hub links base.css too, and it independently uses
   .hero, .hero h1, .lead, .foot and footer.site to mean different things -- its
   .foot is a right-aligned <p>, not the flex row below. Putting these here
   keeps the hub out of the blast radius without scoping every selector.

   Everything in this file was byte-identical in both pages' <style> blocks.
   Page CSS keeps only what genuinely differs: accent tokens, the warm neutral
   ramp on /audio, and per-page layout (the reel rows, the capability tiles,
   the work groups). Selectors are unscoped, so a page still overrides any of
   this from its own <style> -- but only where the difference is deliberate.

   One cascade rule if you move more in here: a rule is only safe to lift if
   the page keeps no rule with the same selector and specificity that has to
   beat it. Media queries add no specificity, which is why
   @media (min-width: 820px) { .hero-inner } stays inline on both pages -- the
   base .hero-inner rule is page-specific and appears later in source order. */

:root {
    /* Foreground on --deep, the contact band's ground. Lives here rather than
       in base.css because --deep does too: it is a portfolio token, and the hub
       has no such band. Not restated per theme -- --deep is a saturated ink on
       both surfaces and stays dark in light and dark mode alike. */
    --on-deep: #ffffff;
}

/* ===== Header extras (beyond the shared brand/toggle in base.css) ===== */
.menuBtn {
    display: grid;
    place-items: center;
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    padding: 0.3rem;
}
.menuBtn:hover {
    color: var(--text);
}
.menuBtn svg {
    width: 22px;
    height: 22px;
}
.mobile-menu {
    position: absolute;
    top: calc(100% - 12px);
    right: var(--gutter);
    z-index: 50;
    display: grid;
    gap: 0.15rem;
    min-width: 170px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.4);
}
.mobile-menu[hidden] {
    display: none;
}
.mobile-menu a {
    text-decoration: none;
    color: var(--text);
    font-size: var(--fs-sm);
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}
@media (min-width: 760px) {
    .menuBtn,
    .mobile-menu {
        display: none !important;
    }
}
.nav-hide {
    display: none;
}
@media (min-width: 760px) {
    .nav-hide {
        display: inline;
    }
}
/* Nav-link underline: wipes in from the left rather than fading. */
nav.top a {
    position: relative;
}
nav.top a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease-out);
}
nav.top a:hover::after {
    transform: scaleX(1);
}

/* ===== Button ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: inherit;
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: 100px;
    padding: 0.8em 1.4em;
    line-height: 1;
    transition:
        opacity 0.15s var(--ease-out),
        transform 0.15s var(--ease-out);
}
.btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* ===== Hero ===== */
/* Both surfaces put the headline left and the portrait right at the same
   breakpoints, so the two pages line up when you cross-link between them. The
   .hero-inner grid itself is page-specific -- /vo adds a full-width reels row
   beneath. */
.hero {
    padding-top: clamp(0.5rem, 1.5vw, 1.2rem);
    padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
.hero-copy {
    grid-area: copy;
    min-width: 0;
}
.hero-photo {
    grid-area: photo;
}
.hero h1 {
    font-size: var(--fs-h1);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: var(--hero-h1-gap) 0 0;
    text-wrap: balance;
}
.hero h1 .hl {
    color: color-mix(in srgb, var(--accent) 80%, var(--text));
}
.hero-cta {
    margin: clamp(1.4rem, 3vw, 2rem) 0 0;
}

/* ===== Section rhythm ===== */
section {
    padding-block: clamp(3.25rem, 6vw, 5.5rem);
}
.lead {
    margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
/* Section headings carry a trace of the accent. Light mode can take a heavy
   35% mix against near-black text; dark mode cannot -- the accent is lighter
   than the text there, so the same ratio would wash the heading out. 14%
   measures 15.2:1 on /vo and 14.8:1 on /audio, versus 14.7 and 14.2 at 18%:
   contrast is not the constraint, so one value serves both surfaces. */
.lead h2 {
    font-size: var(--fs-h2);
    color: color-mix(in srgb, var(--accent) 35%, var(--text));
}
@media (prefers-color-scheme: dark) {
    .lead h2 {
        color: color-mix(in srgb, var(--accent) 14%, var(--text));
    }
}
:root[data-theme="light"] .lead h2 {
    color: color-mix(in srgb, var(--accent) 35%, var(--text));
}
:root[data-theme="dark"] .lead h2 {
    color: color-mix(in srgb, var(--accent) 14%, var(--text));
}

/* ===== Work cards ===== */
/* Video card player (.vmedia/.vplay/.vdur) is shared further up -- base.css. */
.work-grid {
    display: grid;
    gap: clamp(1.1rem, 2.5vw, 1.8rem);
    grid-template-columns: 1fr;
}
@media (min-width: 600px) {
    .work-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.vcard {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--accent) 5%, var(--panel));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px -10px rgba(0, 0, 0, 0.16);
    transition:
        box-shadow 0.18s var(--ease-out),
        transform 0.18s var(--ease-out);
}
.vcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px -20px rgba(0, 0, 0, 0.32);
}
.vcard video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: #000;
    object-fit: cover;
}
.vmeta {
    padding: 1rem 1.1rem 1.2rem;
}
.vtag {
    display: inline-block;
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-weight: 600;
    color: color-mix(in srgb, var(--accent) 70%, var(--text));
    margin-bottom: 0.4rem;
}
.vcard h3 {
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}
.vsub {
    color: var(--muted);
    font-size: var(--fs-sm);
    margin: 0.35rem 0 0;
    line-height: 1.5;
}
/* Feature card: media beside copy instead of above it. The 1.5fr/1fr split is
   the same on both surfaces -- /audio read 1.6fr until this file merged them,
   with nothing to justify the difference. */
@media (min-width: 760px) {
    .feature {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        align-items: stretch;
    }
    .feature .vmeta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: clamp(1.4rem, 3.5vw, 2.6rem);
    }
    .feature h3 {
        font-size: var(--fs-h2);
    }
    .feature .vsub {
        font-size: var(--fs-base);
        margin-top: 0.7rem;
        max-width: 40ch;
    }
}

/* ===== About ===== */
.about-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 4rem);
    grid-template-columns: 1fr;
    align-items: start;
}
@media (min-width: 860px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.about-grid .big {
    font-size: var(--fs-h2);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
    max-width: 22ch;
}
.about-grid .muted {
    color: var(--muted);
    margin-top: 1.1rem;
    max-width: 42ch;
}
.eng-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.3rem;
}
.eng-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.eng-head strong {
    font-weight: 600;
}
.eng-desc {
    color: var(--muted);
    font-size: var(--fs-sm);
    margin: 0.4rem 0 0;
    padding-left: calc(2.4rem + 1rem);
}
.eng-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.eng-ic svg {
    width: 20px;
    height: 20px;
}

/* ===== Contact band ===== */
.contact {
    background:
        radial-gradient(
            100% 120% at 12% -10%,
            color-mix(in srgb, var(--accent) 26%, transparent),
            transparent 55%
        ),
        /* Dot field with ~40% of the grid randomly missing, so it reads as
           scattered rather than a repeating lattice. */
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20154%20154'%20fill='%23ffffff'%20fill-opacity='0.05'%3E%3Ccircle%20cx='33'%20cy='11'%20r='1'/%3E%3Ccircle%20cx='55'%20cy='11'%20r='1'/%3E%3Ccircle%20cx='77'%20cy='11'%20r='1'/%3E%3Ccircle%20cx='121'%20cy='11'%20r='1'/%3E%3Ccircle%20cx='143'%20cy='11'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='33'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='121'%20cy='33'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='55'%20r='1'/%3E%3Ccircle%20cx='99'%20cy='55'%20r='1'/%3E%3Ccircle%20cx='121'%20cy='55'%20r='1'/%3E%3Ccircle%20cx='143'%20cy='55'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='77'%20r='1'/%3E%3Ccircle%20cx='77'%20cy='77'%20r='1'/%3E%3Ccircle%20cx='121'%20cy='77'%20r='1'/%3E%3Ccircle%20cx='33'%20cy='99'%20r='1'/%3E%3Ccircle%20cx='77'%20cy='99'%20r='1'/%3E%3Ccircle%20cx='99'%20cy='99'%20r='1'/%3E%3Ccircle%20cx='121'%20cy='99'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='121'%20r='1'/%3E%3Ccircle%20cx='77'%20cy='121'%20r='1'/%3E%3Ccircle%20cx='121'%20cy='121'%20r='1'/%3E%3Ccircle%20cx='11'%20cy='143'%20r='1'/%3E%3Ccircle%20cx='33'%20cy='143'%20r='1'/%3E%3Ccircle%20cx='55'%20cy='143'%20r='1'/%3E%3Ccircle%20cx='77'%20cy='143'%20r='1'/%3E%3Ccircle%20cx='99'%20cy='143'%20r='1'/%3E%3Ccircle%20cx='121'%20cy='143'%20r='1'/%3E%3C/svg%3E")
            0 0 / 154px 154px,
        var(--deep);
    color: var(--on-deep);
}
/* The band is always the deep ink panel, so the link is styled against that
   ground directly -- no light/dark variant. a.mail only ever appears inside
   .headline, which sets its own font-size, color and border-color; what
   survives here is the border's width and style, the padding and the
   transition. The border colour below is the fallback for a page that doesn't
   override it, not a value in effect on either current surface. */
.contact a.mail {
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--on-deep) 40%, transparent);
    padding-bottom: 0.15em;
    transition: border-color 0.15s var(--ease-out);
}
.contact a.mail:hover {
    border-color: var(--accent2);
}
.contact-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 3rem;
    margin-top: 2.5rem;
}
.contact-meta div {
    display: grid;
    gap: 0.25rem;
}
/* Key colour is page-specific (.contact .k): each surface's --accent2 sits on
   its own --deep, and the mix that clears 4.5:1 differs by pair -- 18% on /vo's
   cyan-on-blue, 28% on /audio's salmon-on-maroon. */
.contact-meta .k {
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-weight: 600;
}
.contact-meta .v {
    color: color-mix(in srgb, var(--on-deep) 90%, transparent);
}
.contact :focus-visible {
    outline-color: var(--on-deep);
}

/* ===== Footer ===== */
footer.site {
    padding: 3rem 0 3.5rem;
    border-top: 1px solid var(--line);
}
.foot {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: var(--fs-label);
}
.foot a {
    color: var(--muted);
    text-decoration: none;
}
.foot a:hover {
    color: var(--text);
}
.foot .also {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
}
.foot .also a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}
.foot .also a::after {
    content: "\2197";
    color: var(--faint);
}

/* ===== Finesse ===== */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity 0.7s var(--ease-out),
            transform 0.7s var(--ease-out);
    }
    .reveal.in {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        animation: none !important;
        transition: none !important;
    }
}