/* ========================================= Site settings =========================================
   settings.js sets these on <html> from the nav light switch (and the OS motion setting):
   data-mode   easy | mine      (light on: "Your view", light off: "My view")
   data-theme  light | dark
   data-font   sans | serif
   data-motion full | reduced
   Every page loads this after styles.css; the token swaps below restyle the site. */

/* ---------- Themes ---------- */
:root[data-theme="light"] {
    color-scheme: light;
    --bg-rgb: 255, 255, 255;          /* white paper */
    --fg-rgb: 0, 0, 0;                /* black ink */
    --accent: #ffa8c2;                /* on paper the teal becomes pink: text, dots, globe */
    --accent-rgb: 255, 168, 194;
    --pink-soft: #ffc9de;             /* focus ring, photo shadow, slider, panel tint */
    --pink-soft-rgb: 255, 201, 222;
    --yellow: #fdff85;                /* selection glow, link shimmer */
    --yellow-pastel: #fff7c2;         /* the softer yellow in the link shimmer */
    --yellow-bar: #f4ff8f;            /* progress bar */
    --yellow-select: #fdff85;         /* selected text that's already pink */
    --gold-rgb: 255, 208, 107;        /* button hover glow */
    --footer-text: rgba(var(--fg-rgb), 0.5);
    --ink-bleed: 0 0 0.7px rgba(var(--fg-rgb), 0.5);   /* letters soak slightly into the paper */
    --shadow-rgb: 120, 100, 80;     /* warm and faint on paper */
    --view-bubble: rgba(255, 255, 255, 0.75);   /* a white bubble, lighter than the paper */
    --rail-ink: #b3aca5;              /* case study rail at rest: a solid pale ink, so lines and rings don't stack */
    --rail-ink-soft: #ddd7d0;         /* its track */
}

/* No glows on paper: selected text is plain pink */
:root[data-theme="light"] ::selection {
    color: var(--accent);
    text-shadow: none;
    background-color: transparent;
}

/* Text that's already pink selects yellow, so it still reads as selected */
:root[data-theme="light"] :is(.feedback-footer a, .rollout-phase, .bio-text h2, .cs-num, .gif-text .gif-kicker, .page-note a, .card__meta)::selection,
:root[data-theme="light"] :is(.feedback-footer a, .rollout-phase, .bio-text h2, .cs-num, .gif-text .gif-kicker, .page-note a, .card__meta) ::selection {
    color: var(--yellow-select);
}

:root[data-theme="light"] :is(.progress-bar, .load-bar span, .btn:hover, .travel-globe .globe-legend i),
:root[data-theme="light"] .cs-index a.is-current::before {
    box-shadow: none;
}

/* The case study facts (role, team, scope…): no panel, just a line above and below */
:root[data-theme="light"] .cs-facts {
    padding: var(--s-5) 0;
    background: none;
    border-width: 1px 0;
    border-color: var(--hairline-strong);
}

/* Its bottom line already closes the header, so the header's own divider goes */
:root[data-theme="light"] .cs-hero:has(.cs-facts) {
    border-bottom: 0;
}

/* The case-study rail rests in pale ink and goes full ink while hovered */
:root[data-theme="light"] .cs-rail {
    --rail-track: var(--rail-ink-soft);
    --rail-ring: var(--rail-ink);
    --highlight: var(--rail-ink);
    --text-tertiary: var(--rail-ink);
    --text-primary: var(--rail-ink);
}

:root[data-theme="light"] .cs-rail:hover {
    --rail-track: var(--rail-ink-soft);
    --rail-ring: var(--c-dim);
    --highlight: var(--c-strong);
    --text-tertiary: var(--c-dim);
    --text-primary: var(--c-title);
}

:root[data-theme="light"] .cs-rail .cs-back {
    color: var(--c-dim);
}

/* Tag pills go ink instead of pink */
:root[data-theme="light"] .pill {
    color: var(--c-strong);
    border-color: var(--c-strong);
}

/* Footers on paper: no rule above them, and lighter text */
:root[data-theme="light"] :is(.site-footer, .feedback-footer) {
    border-top: 0;
}

:root[data-theme="light"] :is(footer, .feedback-footer) {
    color: var(--footer-text);
}

/* Toggle panels (home Selected/Brand/UI/UX/All, Play filters): the hovered tab stays ink and the rest dim, like the nav */
:root[data-theme="light"] .view-btn {
    transition: opacity 400ms var(--ease-out);
}

:root[data-theme="light"] :is(.view-btn:hover, .view-btn:focus-visible) {
    color: var(--title);
}

:root[data-theme="light"] .view-toggle:hover > .view-btn:not(:hover) {
    opacity: 0.45;
}

/* The poem runs yellow through pink to ink and back */
:root[data-theme="light"] .gradient-poem {
    background-image: linear-gradient(45deg, var(--yellow), var(--accent), var(--c-strong), var(--accent), var(--yellow));
}

/* ---------- Text links ----------
   Every link inside a line of text (not the recruiter pages) shimmers on hover: teal through white in
   the dark, yellow through pink and pastel yellow on paper */
:where(body:not(.rc) p) a {
    color: inherit;
    text-decoration: none;
}

body:not(.rc) p a:hover {
    background-image: linear-gradient(45deg, var(--accent), var(--c-strong), var(--accent));
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: transparent;
    /* The gray ink bleed would show through the clear letters and muddy the colors, so it bleeds pink here */
    text-shadow: 0 0 0.7px rgba(var(--accent-rgb), 0.5);
    filter: none;
    animation: gradientHover 2s infinite linear;
}

:root[data-theme="light"] :is(body:not(.rc) p a:hover, .com-footer:hover) {
    background-image: linear-gradient(45deg, var(--yellow), var(--accent), var(--yellow-pastel), var(--accent), var(--yellow));
}

@keyframes gradientHover {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}

:root[data-theme="light"] :is(.progress-bar, .load-bar span) {
    background-image: linear-gradient(90deg, var(--yellow-bar), var(--pink-soft), var(--yellow-bar));
}

:root[data-theme="light"] :focus-visible {
    outline-color: var(--pink-soft);
}

:root[data-theme="light"] .bio-image:hover {
    box-shadow: -0.25rem 0.25rem 0.5rem 0.05rem var(--pink-soft);
}

:root[data-theme="light"] .btn:hover {
    border-color: rgba(var(--gold-rgb), 0.55);
}


:root[data-theme="light"] .callout {
    border-color: rgba(var(--pink-soft-rgb), 0.55);
    background: rgba(var(--pink-soft-rgb), 0.06);
}

/* Below 881px the finder carries its own background picture, so its text stays white there.
   Wider, it sits on the pale inverted video and the paper, so it's plain ink. */
:root[data-theme="light"] .header,
:root[data-theme="light"] .header::placeholder {
    color: var(--on-dark);
}

@media (min-width: 881px) {
    :root[data-theme="light"] .header,
    :root[data-theme="light"] .header::placeholder {
        color: rgb(var(--fg-rgb));
    }
}

/* Same place as the dark video; inverted, its black ground turns white and multiply sinks it into the paper */
:root[data-theme="light"] #video-container {
    mix-blend-mode: multiply;
}

:root[data-theme="light"] #background-video {
    filter: grayscale(100%) invert(1);
}

/* Content that belongs to one view: .easy-only shows in Your view, .mine-only in My view */
:root[data-mode="mine"] .easy-only,
:root:not([data-mode="mine"]) .mine-only {
    display: none !important;
}

/* ---------- Easy to read ---------- */
:root[data-mode="easy"] {
    /* Grays lift so body text is comfortable to read */
    --c-faint: rgba(var(--fg-rgb), 0.62);
    --c-dimmer: rgba(var(--fg-rgb), 0.64);
    --c-dim: rgba(var(--fg-rgb), 0.66);
    --c-text: rgba(var(--fg-rgb), 0.7);
    --c-mid: rgba(var(--fg-rgb), 0.74);
    --c-lead: rgba(var(--fg-rgb), 0.8);
    --c-pale: rgba(var(--fg-rgb), 0.84);
    --hover-blur: blur(0);

    /* Small sizes get bigger: running text lands on 16px */
    --fs-0: 0.75rem;
    --fs-tiny: 0.875rem;
    --fs-1: 1rem;
    --fs-note: 0.95rem;
    --fs-small: 1rem;
    --fs-body-sm: 1rem;
    --fs-kicker: 0.75rem;
}

/* About: bigger text needs more of the row, so the globe gives some up */
@media (min-width: 881px) {
    :root[data-mode="easy"] .bio-text {
        flex: 1 1 32rem;
        width: auto;
    }

    :root[data-mode="easy"] .globe-stage {
        flex: 0 1 auto;
        width: auto;
    }

    :root[data-mode="easy"] .travel-globe {
        width: clamp(220px, 22vw, 400px);
    }

    :root[data-mode="easy"] .bio-side {
        max-width: 240px;
    }
}

/* Justified text leaves gaps in narrow columns */
:root[data-mode="easy"] :is(.bio-text, .gif-text p) {
    text-align: left;
}

:root[data-mode="easy"] body {
    font-variant-numeric: lining-nums tabular-nums;
}

/* Hover: everything but the hovered item dims (no blur) */
:root[data-mode="easy"] :is(.nav-item-big, .design-list, .project-grid, .strip-grid, .card-grid, .cs-index) > * {
    transition: opacity 400ms var(--ease-out);
}

:root[data-mode="easy"] :is(.nav-item-big, .design-list, .project-grid, .strip-grid, .card-grid):hover > :not(:hover) {
    opacity: 0.45;
}

/* ---------- Font ---------- */
:root[data-font="sans"] {
    --font-body: var(--font-sans);
}

/* Text that never set a font (browser serif) gets the sans too */
:root[data-font="sans"] body {
    font-family: var(--font-body);
}

/* Your view headers and the Pirenily logo (nav + finder): IM Fell DW Pica, which only comes in 400,
   thickened with a hairline stroke instead of a faux bold */
:root[data-mode="easy"] {
    --font-head: "IM Fell DW Pica", serif;
    --head-stroke: 0.02em;
}

:root[data-mode="easy"] :is(h1, h2, h3, h4, .page-title, .case-title, .bio-name, .cs-heading, .cs-subheading,
    .insights-title, .next-case-title, .cta-title, .project-thumb-title, .strip-caption, .nav-header, .header):not(.cs-label) {
    font-family: var(--font-head);
    font-weight: 400;
    -webkit-text-stroke: var(--head-stroke) currentColor;
}

/* The nav links (About · Code · Play · Projects, and the phone menu) and the home Projects filter
   (bar, desktop column, phone panel) take the header face too; the ☀ ♪ switches keep theirs */
:root[data-mode="easy"] .nav-item:not(.settings-btn),
:root[data-mode="easy"] #portfolio :is(.view-btn, .view-current) {
    font-family: var(--font-head);
    -webkit-text-stroke: var(--head-stroke) currentColor;
}

/* Italic labels read as plain text in the sans */
:root[data-font="sans"] :is(body, body *):not(em, i, cite) {
    font-style: normal;
}

/* While a setting switches, nothing animates, so the new look lands at once */
:root.is-switching *,
:root.is-switching *::before,
:root.is-switching *::after {
    transition: none !important;
}

/* ---------- Reduced motion ---------- */
:root[data-motion="reduced"] {
    --hover-blur: blur(0);
    scroll-behavior: auto;
}

:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
}

/* ========================================= Nav switches: ☀ light, ♪ sound ========================================= */
.settings-switches {
    display: inline-flex;
    align-items: center;
}

.settings-btn {
    position: relative;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    color: var(--c-strong);
}

/* Off: dimmed, with a hairline struck through it */
.settings-btn[aria-pressed="false"] {
    color: var(--c-faint);
}

.settings-btn[aria-pressed="false"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.1em;
    border-top: 1px solid currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.settings-btn:hover,
.settings-btn:focus-visible {
    filter: var(--hover-blur);
}

/* Tablets and phones: the switches get their own centred row under the nav, above the page title,
   inside the sticky nav so they stay in view (and, on phones, above the open menu) */
@media screen and (max-width: 880px) {
    .navigator {
        flex-wrap: wrap;
    }

    .navigator .settings-switches {
        position: relative;
        z-index: 1001;
        flex-basis: 100%;
        justify-content: center;
        pointer-events: none;   /* the row spans the width; only the buttons take clicks */
    }

    .navigator .settings-btn {
        pointer-events: auto;
    }
}

@media screen and (max-width: 666px) {
    .navigator .settings-switches {
        height: 40px;
        margin-top: -0.75rem;
    }

    .navigator .settings-btn {
        height: 40px;
        padding: 0 6px;
        font-size: 1rem;
    }
}

/* Home on phones and tablets: the links stack into a grid; the switches take a centred row
   of their own under it, above the Pirenily title */
@media screen and (max-width: 880px) {
    .home-nav .settings-switches {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

/* ========================================= Mail copied note ========================================= */
:root {
    --bubble-bg: var(--bg);
}

.mail-copied {
    position: absolute;
    z-index: 2200;
    transform: translate(-50%, calc(-100% - 6px));
    padding: 0.2rem 0.6rem;
    font-family: var(--font-body);
    font-size: var(--fs-note);
    font-style: italic;
    white-space: nowrap;
    color: var(--c-title);
    background: var(--bubble-bg);
    border: 1px solid var(--hairline-strong);
    pointer-events: none;
}

/* "Come back to be a recruiter?" (partials/recruiter_return.html). Locked, it says how to get in on hover */
.site-footer > .rc-return {
    display: inline-flex;
    margin-top: 0.5rem;
}

.rc-return.is-locked {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--c-faint);
    cursor: default;
}

.rc-return-lock {
    width: 1em;
    height: 1em;
}

.rc-return.is-locked .rc-return-how,
.rc-return.is-locked:is(:hover, :focus-visible) .rc-return-ask {
    display: none;
}

.rc-return.is-locked:is(:hover, :focus-visible) .rc-return-how {
    display: inline;
}