/* SYNTAX — careers page. Requires tokens.css + base.css. The review desk styles itself (js/modules/review-desk.js).
   Display sizes scale with --type-vw (tokens.css): held at the 1440 composition on wider screens, line breaks included. */

.careerspage .hide-s { display: inline; }
@media (max-width: 640px) { .careerspage .hide-s { display: none; } }

/* shared section rhythm */
.cr-desk, .cr-work, .cr-disc, .cr-where, .cr-apply { position: relative; padding: clamp(88px, 10.5vw, 168px) 0; border-top: 1px solid var(--line); }
.cr-desk { border-top: 0; padding-top: clamp(72px, 8vw, 128px); }
.cr-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 24px; align-items: end; margin-bottom: clamp(36px, 5vw, 68px); }
.cr-head .k { grid-column: 1 / -1; }
.cr-head h2 { grid-column: 1 / span 7; }
.cr-head h2 em, .cr-apply h2 em, .cr-hero h1 em { padding-right: .08em; }
.cr-head .cr-intro { grid-column: 8 / span 5; justify-self: end; max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--bone-2); }
/* site.js wraps [data-split] lines, adding ~.05em per line: reserve it so nothing moves when it runs */
.careerspage h1[data-split]:not([data-reveal-lines]), .careerspage h2[data-split]:not([data-reveal-lines]) { padding-bottom: .105em; }
@media (max-width: 900px) {
  .cr-head h2, .cr-head .cr-intro { grid-column: 1 / -1; justify-self: start; }
}

/* ======================================================================
   00 · HERO — the headline, and a release still waiting for a person
   ====================================================================== */
.cr-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--nav-h) + 56px); border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 60% at 82% 100%, rgba(250, 179, 31, .045) 0%, rgba(250, 179, 31, 0) 70%), var(--void); }
/* the composition sits in the middle of the first screen (not on its floor), so tall viewports keep no dead band under the nav */
.cr-hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px clamp(32px, 5vw, 96px); align-items: end; margin-block: auto; padding-bottom: clamp(44px, 6.5vh, 84px); }
.cr-hero h1 { font-size: clamp(52px, calc(8.6 * var(--type-vw, 1vw)), 144px); line-height: .92; letter-spacing: -.042em; margin-top: clamp(20px, 3vh, 30px); }
/* the signature: one gold stroke lands under the word once the headline is in */
.cr-hero h1 em { position: relative; display: inline-block; }
.cr-hero h1 em::after {
  content: ""; position: absolute; left: .02em; right: .12em; bottom: -.05em; height: max(.15em, 10px);
  background: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 9 6 20 4 19 11 C 18 18 8 21 14 17 C 60 11 120 8 190 10 S 300 17 350 12 S 392 5 397 3' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cpath d='M3 15 C 9 6 20 4 19 11 C 18 18 8 21 14 17 C 60 11 120 8 190 10 S 300 17 350 12 S 392 5 397 3' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path: inset(0 100% 0 0);
  animation: cr-sign 1.6s cubic-bezier(.65, 0, .35, 1) 1.15s forwards;
}
@keyframes cr-sign { to { clip-path: inset(0 0 0 0); } }
.cr-hero .lede { margin-top: clamp(26px, 3.6vh, 40px); max-width: 52ch; }
.cr-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.cr-record { container-type: inline-size; border: 1px solid var(--line); padding: 48px clamp(18px, 2vw, 28px) 18px; background: var(--ink-0); }
/* --s: the step-name size; the step column is sized from it, so a larger name never runs into "Agent" */
.cr-rec { --s: 22px; }
.cr-rec li { position: relative; display: grid; grid-template-columns: 2em calc(var(--s) * 4.8) minmax(0, 1fr) auto; align-items: center; align-content: center; gap: 12px; min-height: 52px; padding: 10px 0; border-top: 1px solid var(--line); }
/* columns: step · who · status. Review keeps "A person" in the who column (under three "Agent"s) and its status on the
   same line as every other row; the three things a person reads for run underneath */
.cr-rec .wait { row-gap: 2px; }
.cr-rec .wait .f { grid-column: 3 / -1; grid-row: 2; margin-top: -6px; color: var(--bone-3); letter-spacing: .1em; }
/* a narrow record (small laptop, phone): they run under the step name instead, across the row, so they stay on one line */
@container (max-width: 420px) { .cr-rec .wait .f { grid-column: 2 / -1; margin-top: 2px; } }
.cr-rec .n { color: var(--bone-3); }
.cr-rec .s { font-family: var(--f-display); font-weight: 400; font-variation-settings: var(--display-opsz); font-size: var(--s); line-height: 1.1; letter-spacing: -.015em; }
.cr-rec .w { color: var(--bone-2); letter-spacing: .1em; }
.cr-rec .wait .w { color: var(--bone); }
.cr-rec .st { position: relative; display: inline-flex; justify-content: flex-end; align-items: center; min-width: 14px; min-height: 14px; color: var(--bone-3); }
.cr-rec .st i { width: 10px; height: 5px; margin: 0 2px 4px 0; border-left: 1.5px solid var(--b-green); border-bottom: 1.5px solid var(--b-green); transform: rotate(-45deg); transition: opacity .3s, transform .55s var(--ease-out); }
.cr-rec .st .pend { width: 7px; height: 7px; margin: 0 3px 0 0; border: 1.5px solid var(--signal); transform: rotate(45deg); }
.cr-rec .sign .n, .cr-rec .sign .st { color: var(--signal); }
.cr-slot { position: relative; display: block; height: 28px; border-bottom: 1px dashed rgba(250, 179, 31, .55); transition: border-color .3s; }
.cr-slot .caret { position: absolute; left: 2px; bottom: 5px; width: 1.5px; height: 18px; background: var(--signal); animation: cr-blink 1.1s steps(1) infinite; }
@keyframes cr-blink { 50% { opacity: 0; } }

/* the record runs once: each agent step works (a turning stroke, "· drafting"), then ticks; then it waits for a person.
   The markup ships the settled record; the page script only plays it when motion is on. */
.cr-rec .v { display: none; }
.cr-rec [data-step] :is(.s, .w) { transition: opacity .45s var(--ease-out); }
.cr-rec .q .s, .cr-rec .q .w { opacity: .42; }
.cr-rec .q .st i, .cr-rec .run .st i { opacity: 0; transform: rotate(-45deg) scale(.3); }
.cr-rec .run .v { display: inline; color: var(--bone-3); }
.cr-rec .run .st::before { content: ""; position: absolute; right: 6px; top: calc(50% - 6px); width: 1.5px; height: 12px; background: var(--bone-2); animation: cr-turn .48s steps(4) infinite; }
@keyframes cr-turn { to { transform: rotate(180deg); } }
.cr-record.is-waiting .pend { animation: cr-pend 2.4s ease-in-out infinite; }
@keyframes cr-pend { 50% { opacity: .3; } }

/* the signature line is the way in: it answers a pointer or keyboard with where signing starts */
.cr-rec .sign a.s { color: inherit; text-decoration: none; }
.cr-rec .sign a.s::after { content: ""; position: absolute; inset: 0; }
.cr-rec .sign a.s:focus-visible { outline: none; }
.cr-rec .sign:has(a:focus-visible) { outline: 1.5px solid var(--signal); outline-offset: 2px; }
.cr-ask { position: absolute; left: 14px; bottom: 7px; color: var(--signal); font-size: 10.5px; letter-spacing: .14em; white-space: nowrap; opacity: 0; transform: translate3d(-6px, 0, 0); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); pointer-events: none; }
.cr-ask .arr { display: inline-block; transition: transform .45s var(--ease-out); }
.cr-rec .sign:is(:hover, :focus-within) .cr-slot { border-bottom-style: solid; border-bottom-color: var(--signal); }
.cr-rec .sign:is(:hover, :focus-within) .cr-ask { opacity: 1; transform: none; }
.cr-rec .sign:is(:hover, :focus-within) .cr-ask .arr { transform: translateY(2px); }
.cr-record.in .cr-rec li { animation: cr-row .7s var(--ease-out) both; }
.cr-record.in .cr-rec li:nth-child(2) { animation-delay: .14s; } .cr-record.in .cr-rec li:nth-child(3) { animation-delay: .28s; }
.cr-record.in .cr-rec li:nth-child(4) { animation-delay: .42s; } .cr-record.in .cr-rec li:nth-child(5) { animation-delay: .56s; }
@keyframes cr-row { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

.cr-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 18px; padding-bottom: 24px; }
.cr-meta .mono { font-size: 10.5px; }

/* two columns on a tall screen: the record stands the full height of the copy, eyebrow to buttons, and its rows and
   step names grow with the screen's height */
@media (min-width: 1101px) and (min-height: 820px) {
  .cr-hero-grid { align-items: stretch; }
  .cr-record { display: flex; flex-direction: column; }
  .cr-rec { flex: 1 1 auto; display: flex; flex-direction: column; --s: clamp(22px, min(2.5vh, 1.6vw), 27px); }
  .cr-rec li { flex: 1 1 auto; min-height: clamp(52px, 6.6vh, 84px); }
}
@media (max-width: 1100px) {
  .cr-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cr-record { max-width: 560px; }
}
@media (max-width: 760px) {
  .cr-hero { min-height: 0; padding-top: calc(var(--nav-h) + 40px); }
  .cr-hero h1 { font-size: clamp(46px, 13.4vw, 64px); }
  .cr-hero .lede { font-size: 17px; }
  .cr-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .cr-rec { --s: 19px; }
  .cr-rec li { grid-template-columns: 2em 5.4em minmax(0, 1fr) auto; gap: 10px; min-height: 48px; }
  .cr-rec .w, .cr-rec .wait .f { font-size: 10px; letter-spacing: .06em; }
}

/* ======================================================================
   01 · THE REVIEW DESK
   ====================================================================== */
.rd-frame { border: 1px solid var(--line); }
/* layout-shift guard until the module mounts (it then sizes to its content) */
.rd-frame:not(.is-mounted) { min-height: 720px; }
@media (max-width: 1240px) { .rd-frame:not(.is-mounted) { min-height: 1180px; } }
@media (max-width: 860px) { .rd-frame:not(.is-mounted) { min-height: 1900px; } }
.rd-fallback { display: grid; justify-items: center; gap: 20px; padding: clamp(120px, 14vw, 200px) var(--gutter) 80px; text-align: center; }
.rd-fallback .display { font-size: clamp(26px, calc(3.2 * var(--type-vw, 1vw)), 46px); line-height: 1.05; color: var(--bone-2); max-width: 22ch; }
.rd-frame.is-mounted > .rd-fallback { display: none; }
.cr-note { margin-top: 16px; font-size: 10.5px; }

/* ======================================================================
   02 · THE WORK, NOW — four questions, typographic
   ====================================================================== */
.cr-qs { border-top: 1px solid var(--line); }
.cr-qs li { position: relative; display: grid; grid-template-columns: 3em 9.5em minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px clamp(20px, 3vw, 48px); align-items: baseline; padding: clamp(26px, 3vw, 42px) 0; border-bottom: 1px solid var(--line); }
.cr-qs .n { color: var(--bone-3); }
.cr-qs .lab { color: var(--bone-2); }
.cr-qs h3 { font-weight: 300; font-size: clamp(30px, calc(3.4 * var(--type-vw, 1vw)), 56px); line-height: 1.02; letter-spacing: -.032em; }
.cr-qs .b { max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--bone-2); }
.cr-qs .gold .n, .cr-qs .gold .lab { color: var(--signal); }
.cr-qs .gold::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.6s var(--ease-out) .5s; }
.cr-qs .gold.in::after { transform: none; }
.cr-pull { margin-top: clamp(64px, 8vw, 128px); max-width: 30ch; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-size: clamp(26px, calc(3 * var(--type-vw, 1vw)), 46px); line-height: 1.16; letter-spacing: -.022em; }
.cr-pull em { font-style: italic; }
@media (max-width: 900px) {
  .cr-qs li { grid-template-columns: 2.6em minmax(0, 1fr); }
  .cr-qs h3, .cr-qs .b { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .cr-qs .gold::after { transform: none; transition: none; } }

/* ======================================================================
   03 · DISCIPLINES — an editorial list; every row writes to us
   ====================================================================== */
.cr-dl { border-top: 1px solid var(--line); }
.cr-row { position: relative; display: grid; grid-template-columns: 3em minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(0, .8fr) 5em; gap: 10px clamp(20px, 2.6vw, 40px); align-items: baseline; padding: clamp(22px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line); transition: background .5s var(--ease-out); }
.cr-row::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 1.5px; background: var(--signal); transform: scaleY(0); transform-origin: 50% 0; transition: transform .5s var(--ease-out); }
.cr-row .n { color: var(--bone-3); transition: transform .5s var(--ease-out), color .3s; }
.cr-row .t { font-weight: 300; font-size: clamp(26px, calc(2.6 * var(--type-vw, 1vw)), 40px); line-height: 1.05; letter-spacing: -.026em; }
.cr-row .t a::after { content: ""; position: absolute; inset: 0; }
.cr-row .t a:focus-visible { outline: none; }
.cr-row:has(a:focus-visible) { outline: 1.5px solid var(--signal); outline-offset: 2px; }
.cr-row .d { font-size: 15.5px; line-height: 1.55; color: var(--bone-2); }
.cr-row .o { color: var(--bone-3); font-size: 10.5px; }
.cr-row .go { justify-self: end; color: var(--bone-3); white-space: nowrap; transition: color .3s; }
.cr-row:hover, .cr-row:focus-within { background: linear-gradient(90deg, rgba(250, 179, 31, .05), rgba(250, 179, 31, 0) 70%); }
.cr-row:hover::before, .cr-row:focus-within::before { transform: none; }
.cr-row:hover .n, .cr-row:focus-within .n { color: var(--signal); transform: translateX(10px); }
.cr-row:hover .go, .cr-row:focus-within .go { color: var(--signal); }
.cr-row:hover .go .arr, .cr-row:focus-within .go .arr { transform: translateX(4px); }
.cr-row .go .arr { display: inline-block; transition: transform .45s var(--ease-out); }
@media (max-width: 1100px) {
  .cr-row { grid-template-columns: 3em minmax(0, 1fr) minmax(0, 1.2fr); }
  .cr-row .o { grid-column: 2; }
  .cr-row .go { grid-column: 3; grid-row: 2; }
}
@media (max-width: 700px) {
  .cr-row { grid-template-columns: 2.4em minmax(0, 1fr); row-gap: 8px; }
  .cr-row .d, .cr-row .o { grid-column: 2; }
  .cr-row .go { display: none; }
}

/* ======================================================================
   04 · WHERE WE WORK — four names, the local time in each
   ====================================================================== */
.cr-hubs { border-top: 1px solid var(--line); }
.cr-hubs li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15em) 8.5em; align-items: baseline; gap: 6px clamp(20px, 3vw, 48px); padding: clamp(10px, 1.4vw, 20px) 0; border-bottom: 1px solid var(--line); }
.cr-hubs .h { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-size: clamp(46px, calc(8 * var(--type-vw, 1vw)), 132px); line-height: 1; letter-spacing: -.045em; transition: color .4s; }
.cr-hubs li:first-child .h::after { content: ""; display: inline-block; width: .08em; height: .08em; min-width: 7px; min-height: 7px; margin-left: .12em; vertical-align: .62em; background: var(--signal); transform: rotate(45deg); }
.cr-hubs .m { color: var(--bone-3); }
.cr-hubs .t { justify-self: end; color: var(--bone-3); white-space: nowrap; }
.cr-hubs .t b { color: var(--bone); font-weight: 450; font-size: 13px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.cr-cities > .mono { text-wrap: balance; }
.cr-cities { display: grid; grid-template-columns: minmax(0, 22em) minmax(0, 1fr); gap: 14px clamp(20px, 3vw, 48px); margin-top: clamp(32px, 4vw, 56px); }
.cr-cities .list { font-family: var(--f-display); font-weight: 300; font-size: clamp(20px, calc(2 * var(--type-vw, 1vw)), 28px); line-height: 1.45; letter-spacing: -.01em; color: var(--bone-2); max-width: 60ch; }
.cr-cities .list i { font-style: normal; color: var(--bone-3); margin: 0 .2em; }
@media (max-width: 760px) {
  .cr-hubs li { grid-template-columns: minmax(0, 1fr) auto; }
  .cr-hubs .h { grid-column: 1 / -1; }
  .cr-hubs .m { font-size: 10px; }
  .cr-cities { grid-template-columns: minmax(0, 1fr); }
}

/* ======================================================================
   05 · OPEN APPLICATION — pick a discipline, the note writes its own subject
   ====================================================================== */
.cr-apply { padding-bottom: clamp(96px, 11vw, 176px); }
.cr-apply-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px clamp(40px, 6vw, 120px); align-items: start; }
.cr-apply-head { position: sticky; top: calc(var(--nav-h) + 32px); }
.cr-apply h2 { margin-top: 24px; font-size: clamp(48px, calc(6.6 * var(--type-vw, 1vw)), 112px); line-height: .96; }
.cr-apply .lede { margin-top: 28px; max-width: 40ch; }
.cr-honest { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-size: clamp(22px, calc(2 * var(--type-vw, 1vw)), 28px); letter-spacing: -.015em; }
.cr-honest i { flex: none; width: 8px; height: 8px; background: var(--signal); transform: rotate(45deg); }

.cr-pick { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.cr-pick legend { padding: 0; margin-bottom: 14px; }
.cr-pick .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-pick label { position: relative; display: inline-flex; }
.cr-pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cr-pick label span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; color: var(--bone-2); transition: border-color .3s, color .3s, background .3s; pointer-events: none; }
.cr-pick label:hover span { border-color: var(--line-3); color: var(--bone); }
.cr-pick input:checked + span { border-color: var(--signal); color: var(--bone); background: rgba(250, 179, 31, .08); }
.cr-pick input:focus-visible + span { outline: 1.5px solid var(--signal); outline-offset: 3px; }

.cr-mail { border: 1px solid var(--line); padding: 50px clamp(18px, 2.4vw, 32px) 18px; }
.cr-env > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.cr-env > div:first-child { border-top: 1px solid var(--line); }
.cr-env dd { margin: 0; font-size: 16px; color: var(--bone); overflow-wrap: anywhere; }
.cr-env [data-subject].flash { animation: cr-flash 1.4s var(--ease-out); }
@keyframes cr-flash { 0% { color: var(--signal); } 100% { color: var(--bone); } }
.cr-send li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 15px 0; border-bottom: 1px dashed var(--line-2); }
.cr-send li:last-child { border-bottom: 0; }
.cr-send .n { color: var(--bone-3); }
.cr-send p { font-size: 15.5px; line-height: 1.55; color: var(--bone-2); }
.cr-send b { color: var(--bone); font-weight: 550; }
.cr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.cr-actions [data-copy] .ok { display: none; }
.cr-actions [data-copy].is-copied .ok { display: inline; color: var(--signal); }
.cr-actions [data-copy].is-copied .no { display: none; }
.cr-legal { margin-top: 28px; font-size: 10.5px; }
.cr-legal .nw { white-space: nowrap; }
@media (max-width: 1000px) {
  .cr-apply-grid { grid-template-columns: minmax(0, 1fr); }
  .cr-apply-head { position: static; }
}
@media (max-width: 760px) {
  .cr-actions .btn { flex: 1 1 auto; justify-content: center; }
  .cr-pick label span { font-size: 13.5px; padding: 0 14px; }
  .cr-env > div { grid-template-columns: 5.4em minmax(0, 1fr); }
}

/* phones: no label, hint or link below 11.5px */
@media (max-width: 640px) {
  .cr-meta .mono, .cr-note, .cr-row .o, .cr-hubs .m, .cr-cities > .mono, .cr-legal, .cr-rec .w, .cr-rec .wait .f, .cr-ask { font-size: 11.5px; }
  .cr-rec .wait .f { letter-spacing: .03em; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-hero h1 em::after { animation: none; clip-path: none; }
  .cr-slot .caret, .cr-record.is-waiting .pend, .cr-rec .run .st::before { animation: none; }
  .cr-ask, .cr-ask .arr, .cr-rec .st i, .cr-rec [data-step] :is(.s, .w) { transition: none; }
  .cr-record.in .cr-rec li { animation: none; }
  .cr-env [data-subject].flash { animation: none; }
  .cr-row, .cr-row::before, .cr-row .n, .cr-row .go .arr { transition: none; }
}