/* ============================================
   Portfolio redesign — shared styles: nav, home page, cursor
   Source: Figma "Untitled" — node 26:179
   ============================================ */

:root {
    --rd-bg: #eef0f4;
    --rd-text: #191d27;
    --rd-section-alt: #d4d7de;
    --rd-cursor: #ff6b4a;
    --rd-gutter: 20px;
    /* the small voice: nav links, intro facts, project labels */
    --rd-small-font: 'Inter', sans-serif;
}

body.redesign {
    margin: 0;
    background: var(--rd-bg);
    color: var(--rd-text);
    font-family: 'Inter', sans-serif;
}

/* FILM GRAIN: a fine, still noise over every page, a nod to shooting 35mm.
   Drawn by the browser from an SVG filter, so there's no image to download.
   It sits above the page (and the photo viewer) but under the custom cursor,
   and never catches clicks. */

body.redesign::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.6 0 0 0 -0.3 1.6 0 0 0 -0.3 1.6 0 0 0 -0.3 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
    mix-blend-mode: overlay;
    opacity: var(--rd-grain, 0.3);
}

@media print {
    body.redesign::after {
        display: none;
    }
}

/* NAV: your name on the left in the display face; the links on the right in the
   small voice, the same as the project labels and the facts. */

.rd-nav {
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding: 22px var(--rd-gutter) 0;
}

.rd-nav__logo {
    margin-right: auto;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--rd-text);
    text-decoration: none;
}

.rd-nav__links {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rd-nav__links a,
.rd-nav__contact {
    font-family: var(--rd-small-font);
    font-weight: 400;
    font-size: 13px;
    color: var(--rd-text);
    text-decoration: none;
}

.rd-nav__links a:hover,
.rd-nav__contact:hover {
    opacity: 0.6;
}

/* HOME: the intro, then one edge-to-edge rectangle per project, side by side
   with no gaps. Together they fill the first screen under the nav.
   (The earlier collage layout is saved in git under the tag home-collage.) */

.rd-first-screen {
    display: flex;
    flex-direction: column;
    min-height: max(calc(100svh - 41px), 600px);
}

.rd-hero {
    flex: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px 64px;
    padding: clamp(40px, 10vh, 112px) var(--rd-gutter) clamp(36px, 7vh, 72px);
}

/* the one loud thing on the page */
.rd-hero__title {
    max-width: 13em;
    margin: 0;
    font-family: 'Inter Tight', 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(34px, 4.4vw, 64px);
    letter-spacing: -0.035em;
    line-height: 1.02;
    color: var(--rd-text);
}

.rd-hero__title em {
    font-style: italic;
}

/* the short facts, in the small voice */
.rd-hero__facts {
    margin: 0;
    font-family: var(--rd-small-font);
    font-size: 13px;
    line-height: 1.5;
}

.rd-hero__facts > div {
    display: grid;
    grid-template-columns: 64px auto;
    gap: 12px;
}

.rd-hero__facts > div + div {
    margin-top: 4px;
}

.rd-hero__facts dt {
    color: var(--rd-text);
    opacity: 0.5;
}

.rd-hero__facts dd {
    margin: 0;
}

/* WORK */

.rd-work {
    --work-gap: 12px; /* space between the cards and round the outside */
    flex: 1 1 auto;
    min-height: 300px;
    display: grid;
    /* two headline projects, then a slim tile of earlier work */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(190px, 0.38fr);
    gap: var(--work-gap);
    padding: 0 var(--work-gap) var(--work-gap);
}

/* a tile whose image has a plain background: show all of it, on that colour
   (set with --tile), so the label below sits on clear space */
.rd-work__item--fit {
    background: var(--tile, #dcdfe5);
}

.rd-work__item.rd-work__item--fit img {
    object-fit: contain;
}

/* on narrow screens the tile turns tall: crop in to the middle of a wide image
   (e.g. the centre phone) instead of shrinking the whole thing */
@media (max-width: 760px) {
    .rd-work__item.rd-work__item--crop-narrow img {
        object-fit: cover;
    }
}

/* WORK TILES: a flat, gallery-like colour with the work shown the way it's used
   (a phone for the app, a browser window for the web app), bleeding off the
   bottom edge. The name and a short note sit inside the frame, top left.
   On hover the work lifts. */

.rd-work__item.rd-work__item--glow {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.rd-work__item--glow .rd-work__text {
    top: 20px;
    left: 22px;
    right: 22px;
    bottom: auto;
    z-index: 1;
    gap: 1px;
    font-family: var(--rd-small-font);
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
}

.rd-work__item--glow .rd-work__note {
    opacity: 0.55;
}

.rd-work__media {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--tile-bg, #e3e6ec);
}

.rd-work__item.rd-work__item--glow img.rd-work__subject {
    inset: auto;
    left: 50%;
    bottom: var(--subject-bottom, -16%);
    width: var(--subject-width, auto);
    height: var(--subject-height, auto);
    max-width: none;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 16px 28px rgba(25, 29, 39, 0.12)) drop-shadow(0 2px 6px rgba(25, 29, 39, 0.08));
    transition: transform 0.9s cubic-bezier(0.16, 0.8, 0.3, 1);
}

.rd-work__item--glow:hover img.rd-work__subject {
    transform: translateX(-50%) translateY(-14px);
}

/* Petro-Canada: the phone, sized by height, on a dusty rose (Petro red, nearly all the colour taken out) */
.rd-work__item--petro {
    --tile-bg: #ecdedd;
    --subject-height: 104%;
    --subject-bottom: -24%;
}

/* Duet Booth: the browser window, sized by width, on a soft sage (the rose's complement) */
.rd-work__item--duet {
    --tile-bg: #dde4da;
    --subject-width: 80%;
    --subject-bottom: -12%;
}

@media (max-width: 760px) {
    /* the tile turns tall: crop in to the camera in the middle of the window */
    .rd-work__item--duet {
        --subject-width: 150%;
        --subject-bottom: -10%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rd-work__item.rd-work__item--glow img.rd-work__subject {
        transition: none;
    }
}

/* while the earlier-work tile is hidden: just the two headline projects */
.rd-work--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rd-work__item {
    position: relative;
    display: block;
    color: var(--rd-text);
    text-decoration: none;
    overflow: hidden;
}

.rd-work__item img {
    display: block;
}

/* The image fills the tile but never sets its size, so the intro and the tiles
   together always fit the first screen, whatever its height. */
.rd-work__item .rd-thumb,
.rd-work__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder thumbnail, until the gifs are ready: a soft tint per project */
.rd-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tile, #dcdfe5);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(25, 29, 39, 0.35);
}

/* Earlier work: the same tile as the cards, its list sitting where their labels do */
.rd-earlier {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: var(--rd-gutter);
    background: var(--tile, #dcdfe5);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.rd-earlier__label {
    margin-bottom: 4px;
    color: rgba(25, 29, 39, 0.55);
}

.rd-earlier a {
    align-self: flex-start;
    font-weight: 400;
    color: var(--rd-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.rd-earlier a:hover {
    border-color: currentColor;
}

/* project name, with a short note under it, in the bottom-left corner */
.rd-work__text {
    position: absolute;
    left: var(--rd-gutter);
    right: var(--rd-gutter);
    bottom: var(--rd-gutter);
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--label-color, var(--rd-text));
}

.rd-work__note {
    opacity: 0.55;
}

/* CUSTOM CURSOR */

html.rd-has-custom-cursor body.redesign,
html.rd-has-custom-cursor a,
html.rd-has-custom-cursor button {
    cursor: none;
}

.rd-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--rd-cursor);
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, width 0.25s cubic-bezier(0.16, 0.8, 0.3, 1), height 0.25s cubic-bezier(0.16, 0.8, 0.3, 1);
}

.rd-cursor.is-visible {
    opacity: 1;
}

.rd-cursor.is-hovering {
    width: 44px;
    height: 44px;
}

.rd-cursor__fish {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: 6px;
    transform: translateY(-50%);
    font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1;
    color: #ffd27a;
    white-space: nowrap;
    opacity: 0;
}

.rd-cursor.is-fishing {
    width: 10px;
    height: 10px;
}

.rd-cursor.is-fishing .rd-cursor__fish {
    opacity: 1;
}

.rd-cursor.is-fishing.is-throwing .rd-cursor__fish {
    opacity: 0;
}

/* LOAD-IN ANIMATION */

html.js .rd-anim {
    opacity: 0;
    transform: translateY(14px);
}

html.js body.rd-loaded .rd-anim {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.16, 0.8, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 0.8, 0.3, 1);
    transition-delay: var(--rd-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    html.js .rd-anim {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* SCROLL REVEAL (long-scroll pages, e.g. case studies) */

html.js .rd-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 0.8, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 0.8, 0.3, 1);
}

html.js .rd-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html.js .rd-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* RESPONSIVE: below 760px the row of projects becomes a stack */

@media (max-width: 760px) {
    .rd-first-screen {
        display: block;
        min-height: 0;
    }
    .rd-work {
        display: flex;
        flex-direction: column;
    }
    .rd-work__item {
        height: min(80svh, 120vw);
    }
}

@media (max-width: 640px) {
    :root {
        --rd-gutter: 16px;
    }
    .rd-hero {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    /* phones: name on its own line, the links in a row beneath it */
    .rd-nav {
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 22px;
        padding-top: 16px;
    }
    .rd-nav__logo {
        flex-basis: 100%;
    }
    .rd-nav__links {
        gap: 22px;
    }
}