/* ==========================================================================
   careers.css — cinematic-dark careers page
   Pairs with /careers. Tokens in /css/base/variables.css.
   ========================================================================== */

.careers-page {
    background-color: var(--ink);
    background-image:
        radial-gradient(ellipse 90% 60% at 50% 18%,  rgba(200, 16, 46, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse 70% 80% at 50% 100%, rgba(200, 16, 46, 0.045) 0%, transparent 65%);
    color: var(--on-black);
    font-family: var(--font-body);
}

@media (min-width: 1024px) {
    .careers-page { background-attachment: fixed; }
}

.careers-page main {
    display: block;
    position: relative;
    background: var(--ink);
}

.careers-page main > section { position: relative; z-index: 1; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--red);
    color: var(--on-black);
    padding: 12px 20px;
    z-index: 9999;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Shared section-bg-video pattern */
.has-video { position: relative; overflow: hidden; }
.section-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    filter: saturate(0.85) contrast(1.10) brightness(0.55);
}
.section-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(10, 10, 10, 0.65) 0%, rgba(10, 10, 10, 0.78) 60%, rgba(10, 10, 10, 0.92) 100%),
        radial-gradient(ellipse 80% 60% at 30% 30%, rgba(200, 16, 46, 0.08) 0%, transparent 60%);
}

/* Hero overlay — text sits bottom-LEFT, so anchor the readable scrim there
   (bottom + left) while letting the bright golden-hour city show through the
   upper right. Lighter than the old treatment so the photo reads as a lit
   city, not a void. */
.careers-page .careers-hero .section-bg-overlay {
    background:
        linear-gradient(
            to top,
            rgba(10, 10, 10, 0.92) 0%,
            rgba(10, 10, 10, 0.55) 30%,
            rgba(10, 10, 10, 0.14) 62%,
            transparent 88%
        ),
        linear-gradient(
            105deg,
            rgba(10, 10, 10, 0.85) 0%,
            rgba(10, 10, 10, 0.34) 42%,
            transparent 72%
        );
}

.section-bridge {
    position: relative;
    height: 240px;
    margin-top: -120px;
    margin-bottom: -120px;
    pointer-events: none;
    z-index: 1;
}
.section-bridge--ember {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(200, 16, 46, 0.04) 30%,
        rgba(200, 16, 46, 0.10) 50%,
        rgba(200, 16, 46, 0.04) 70%,
        transparent 100%
    );
    filter: blur(8px);
}

/* ============== HERO ============== */
.careers-hero {
    min-height: 80vh;
    display: flex;
    align-items: flex-end;
    background:
        url('/assets/photos/king-street-golden-hour.jpg?v=e68b4098') center 52% / cover no-repeat,
        var(--ink);
}

.careers-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 200px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(10, 10, 10, 0.55) 45%,
        rgba(10, 10, 10, 0.88) 80%,
        rgba(200, 16, 46, 0.10) 100%
    );
}

.careers-hero__inner {
    position: relative;
    z-index: 4; /* above .careers-hero::after (z-index 3) so text is never occluded */
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 180px 32px 120px;
}

.careers-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red-text);
    margin: 0 0 28px;
}

.careers-hero__rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
}

.careers-hero__headline {
    font: 400 clamp(2.25rem, 5vw, 3.75rem)/1.05 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0 0 28px;
    max-width: 18ch;
}

.careers-hero__headline em {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in oklab, var(--red) 70%, var(--on-black));
}

.careers-hero__lede {
    font: 400 var(--text-lg)/1.55 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    max-width: 56ch;
}

/* ============== POSITIONS ============== */
.careers-positions {
    background:
        linear-gradient(to bottom,
            rgba(10, 10, 10, 0.91) 0%,
            rgba(14, 14, 14, 0.85) 50%,
            rgba(10, 10, 10, 0.93) 100%),
        url('/assets/photos/king-street-transit.jpg?v=d4e24e1b') center / cover no-repeat;
    padding: 120px 0 140px;
    color: var(--on-black);
    position: relative;
    overflow: hidden;
}

.careers-positions::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 50% 60% at 0% 80%,
        rgba(200, 16, 46, 0.05) 0%,
        transparent 65%
    );
}

.careers-positions__inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
}

.careers-positions__header {
    margin-bottom: 64px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(245, 241, 232, 0.10);
    max-width: 720px;
}

.careers-positions__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red-text);
    margin: 0 0 20px;
}

.careers-positions__eyebrow .rule {
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--red);
}

.careers-positions__headline {
    font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0 0 20px;
    max-width: 22ch;
}

.careers-positions__headline em {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in oklab, var(--red) 70%, var(--on-black));
}

.careers-positions__lede {
    font: 400 var(--text-base)/1.6 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    max-width: 60ch;
}

.careers-positions__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.careers-positions__loading {
    list-style: none;
    padding: 80px 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-black-mute);
}

.careers-positions__item {
    border-top: 1px solid rgba(245, 241, 232, 0.08);
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 700ms cubic-bezier(.2,.7,.2,1),
        transform 700ms cubic-bezier(.2,.7,.2,1);
    transition-delay: calc(var(--i, 0) * 60ms);
}

.careers-positions__item:last-child {
    border-bottom: 1px solid rgba(245, 241, 232, 0.08);
}

.careers-positions__item.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.careers-positions__card {
    display: grid;
    grid-template-columns: 56px 2fr 1fr;
    grid-template-areas:
        "num head meta"
        "num desc meta"
        "num readmore meta";
    gap: 16px 40px;
    align-items: start;
    padding: 36px 24px;
    margin: 0 -24px;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background 500ms ease, transform 500ms cubic-bezier(.2,.7,.2,1);
}

.careers-positions__card::before {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(to right, var(--red), transparent);
    transition: width 600ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}

.careers-positions__card:hover,
.careers-positions__card:focus-visible {
    background: linear-gradient(to right, rgba(200, 16, 46, 0.04), transparent 70%);
    outline: none;
}

.careers-positions__card:hover::before,
.careers-positions__card:focus-visible::before {
    width: calc(100% - 48px);
}

.careers-positions__num {
    grid-area: num;
    font: 400 clamp(1.5rem, 2.4vw, 2rem)/1 var(--font-display);
    color: rgba(245, 241, 232, 0.25);
    letter-spacing: -0.02em;
    padding-top: 4px;
    transition: color 600ms ease;
}

.careers-positions__card:hover .careers-positions__num,
.careers-positions__card:focus-visible .careers-positions__num {
    color: var(--red-text);
}

.careers-positions__head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.careers-positions__dept {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red-text);
    margin: 0;
}

.careers-positions__title {
    font: 400 clamp(1.375rem, 2.4vw, 1.75rem)/1.2 var(--font-display);
    letter-spacing: -0.01em;
    color: var(--on-black);
    margin: 0;
    transition: color 500ms ease, text-shadow 600ms ease;
}

.careers-positions__card:hover .careers-positions__title,
.careers-positions__card:focus-visible .careers-positions__title {
    color: var(--red-text);
    text-shadow: 0 0 24px rgba(200, 16, 46, 0.30);
}

.careers-positions__meta {
    grid-area: meta;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 32px;
    border-left: 1px solid rgba(245, 241, 232, 0.08);
}

.careers-positions__meta div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.careers-positions__meta dt {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-black-mute);
    margin: 0;
}

.careers-positions__meta dd {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--on-black);
    margin: 0;
}

.careers-positions__desc {
    grid-area: desc;
    font: 400 var(--text-base)/1.6 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    max-width: 56ch;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.careers-positions__readmore {
    grid-area: readmore;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red-text);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 400ms ease, transform 400ms ease;
    margin-top: 4px;
}

.careers-positions__card:hover .careers-positions__readmore,
.careers-positions__card:focus-visible .careers-positions__readmore {
    opacity: 1;
    transform: translateX(0);
}

/* ============== EMPTY STATE ============== */
.careers-positions__empty {
    list-style: none;
    border-top: 1px solid rgba(245, 241, 232, 0.08);
    border-bottom: 1px solid rgba(245, 241, 232, 0.08);
    padding: 96px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.careers-positions__empty-rule {
    width: 48px;
    height: 1px;
    background: var(--red);
}

.careers-positions__empty-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red-text);
    margin: 0;
}

.careers-positions__empty-copy {
    font: 400 var(--text-xl)/1.45 var(--font-display);
    font-style: italic;
    color: var(--on-black);
    margin: 0;
    max-width: 40ch;
}

.careers-positions__empty-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 14px 26px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--red-text);
    text-decoration: none;
    border: 1px solid var(--red);
    transition: background 500ms ease, color 500ms ease, box-shadow 600ms ease;
}

.careers-positions__empty-link:hover,
.careers-positions__empty-link:focus-visible {
    background: var(--red);
    color: var(--on-black);
    box-shadow: 0 0 24px rgba(200, 16, 46, 0.30);
    outline: none;
}

/* ============== UNANNOUNCED ============== */









.careers-private__cta:hover,


/* ============== RESPONSIVE ============== */
@media (max-width: 900px) {
    .careers-positions__card {
        grid-template-columns: 48px 1fr;
        grid-template-areas:
            "num head"
            "num meta"
            "num desc"
            "num readmore";
        gap: 14px 20px;
    }
    .careers-positions__meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 24px;
        padding-left: 0;
        border-left: 0;
        padding-top: 8px;
        border-top: 1px solid rgba(245, 241, 232, 0.06);
    }
    .careers-positions__meta div { flex-direction: row; gap: 8px; align-items: baseline; }
}

@media (max-width: 640px) {
    .careers-hero__inner { padding: 140px 24px 80px; }
    .careers-positions { padding: 80px 0 100px; }
    .careers-positions__inner { padding: 0 24px; }
    .careers-positions__card { padding: 24px 16px; margin: 0 -16px; }
    .careers-positions__num { font-size: 1.25rem; }
}

/* ==========================================================================
   ART DIRECTION — job listing rows: red left border glow on hover,
   italic Fraunces title, mono caps department.
   Adapted to the actual HTML class names (.careers-positions__item /
   .careers-positions__card / .careers-positions__title / .careers-positions__dept).
   ========================================================================== */

/* Red left-edge reveal on the list item wrapper */
.careers-positions__item {
    position: relative;
}

.careers-positions__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: -1px;
    width: 2px;
    background: var(--red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 8px rgba(200, 16, 46, 0.45);
    z-index: 2;
    pointer-events: none;
}

.careers-positions__item:hover::before {
    transform: scaleY(1);
}

/* Job title — italic Fraunces */
.careers-positions__title {
    font-style: italic;
}

/* Department — already mono caps in existing CSS; reinforce the red color */
.careers-positions__dept {
    color: var(--red-text);
}

/* Subtle left-side red glow wash on the card anchor on hover
   (layered on top of the existing gradient in .careers-positions__card:hover) */
.careers-positions__item:hover .careers-positions__card {
    background: linear-gradient(
        to right,
        rgba(200, 16, 46, 0.06) 0%,
        rgba(200, 16, 46, 0.04) 20%,
        transparent 60%
    );
}

@media (prefers-reduced-motion: reduce) {
    .careers-positions__item::before {
        transition: none;
    }
}
/* REBOOT 2026-09-08. With the "Most hires are never posted" section gone, the
   empty state is the whole page below the hero, so its framing had to stop
   looking accidental. The section head's 720px rule and the empty state's
   full-width rule sat 64px apart, reading as two unrelated dividers with dead
   space between them. One rule now, full width, and the empty state sits under
   it rather than re-drawing its own edge. */
.careers-positions__head {
  margin-bottom: 0;
  padding-bottom: 40px;
  max-width: none;
}
.careers-positions__empty {
  border-top: 0;
  padding-top: 72px;
  padding-bottom: 88px;
}