/* The careers page ("Work") only. Its own file so the front page, which
   inlines site.css, does not carry it. Rebuilt 2026-10-10: the page opens
   with the site's own opening (.op in site.css) and everything after it
   uses the width of the screen. Nothing here moves. */

/* a section after the opening: one column on a phone, twelve on a wide screen */
.wk { padding-block: clamp(56px, 8vw, 120px) 0; }
.wk--first { padding-top: clamp(56px, 9vw, 136px); }
.wk__in { width: var(--col); margin: 0 auto; }

/* the work in one statement, and reliability beside it */
.wk__two { display: grid; gap: clamp(40px, 8vw, 64px); }
.wk__say { margin: 0; font-size: clamp(1.5rem, 1rem + 2.1vw, 2.75rem); line-height: 1.22; letter-spacing: -.015em; color: var(--fg); max-width: 26ch; text-wrap: pretty; }
.wk__block { display: grid; gap: 20px; align-content: start; }
.wk__block p, .wk__cell p { margin: 0; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.36; max-width: 38ch; }
@media (min-width: 900px) {
  .wk__two { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; }
  .wk__block { padding-left: clamp(24px, 3vw, 44px); border-left: 1px solid var(--line); }
}

/* the five steps of a job, beside the photograph of the same day's work */
.wk__job { display: grid; gap: 28px; }
.wk__jobh { margin: 0; }
.careers__steps { list-style: none; margin: 0; padding: 0; counter-reset: st; border-top: 1px solid var(--line); }
.careers__steps li { counter-increment: st; display: grid; grid-template-columns: 3.2em 1fr; gap: 0 12px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: var(--t-lead); line-height: 1.35; color: var(--fg-2); }
.careers__steps li::before { content: "0" counter(st); font-family: var(--mono); font-size: .8em; color: var(--signal-text); padding-top: .2em; }
.careers__steps b { color: var(--fg); font-weight: 600; }
/* the file is 900 wide: the picture is never drawn wider than that */
.wk__pic { margin: 0; width: 100%; max-width: 900px; aspect-ratio: 4 / 5; max-height: 76vh; max-height: 76svh; overflow: hidden; background: var(--bg-2); }
.wk__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.wk__where { position: relative; margin: 0; padding-left: 22px; color: var(--fg); font-size: var(--t-lead); line-height: 1.35; max-width: 34ch; }
.wk__where i { position: absolute; left: 0; top: .5em; width: 9px; height: 9px; background: var(--signal); }
@media (min-width: 600px) and (max-width: 899px) {
  .wk__pic { aspect-ratio: 4 / 3; }
}
@media (min-width: 900px) {
  .wk__job { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); row-gap: clamp(28px, 3vw, 44px); align-items: start; }
  .wk__jobh { grid-column: 1; grid-row: 1; }
  .careers__steps { grid-column: 1; grid-row: 2; }
  .wk__where { grid-column: 1; grid-row: 3; }
  .wk__pic { grid-column: 2; grid-row: 1 / 4; align-self: stretch; aspect-ratio: auto; height: 100%; min-height: 420px; max-height: min(78vh, 760px); max-height: min(78svh, 760px); }
}

/* who else we look for, and what it takes: two cells in the site's ruled grid */
.wk__cells { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.wk__cell { position: relative; display: grid; gap: 18px; align-content: start; padding: clamp(24px, 3.4vw, 52px); background: var(--bg); }
.wk__cell::before { content: ""; position: absolute; top: -1px; right: -1px; width: 12px; height: 12px; background: var(--signal); }
.wk__cell .wk__note { margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); font-size: var(--t-body); line-height: 1.5; color: var(--fg-3); }
@media (min-width: 900px) {
  .wk__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the closing: the question on the left, the two ways to apply on the right */
.wk-apply { padding-block: clamp(72px, 10vw, 160px); }
.wk-apply .cta__h { font-family: var(--display); font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.08; font-size: clamp(2rem, 1rem + 4.2vw, 4.6rem); max-width: none; }
.wk-apply__side { display: grid; gap: clamp(24px, 3vw, 36px); align-content: start; }
.wk-apply__note { margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--fg-3); font-size: var(--t-body); line-height: 1.5; max-width: 44ch; }
@media (min-width: 900px) {
  .wk-apply { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); align-items: start; }
}
/* on a phone the thumb bar (.reach, the last thing inside .after) comes to
   rest just above the closing, and the closing is drawn over it across the
   whole screen: the two ways to apply never stand on the page twice */
@media (max-width: 820px) {
  .wk-apply { position: relative; z-index: 41; margin-top: calc(-69px - env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
}

/* where the work has been: the list, and beside it a chart with Larnaca at the
   centre. Every point stands at its true direction and distance from there
   (the distance drawn on a root scale, so Europe does not collapse to a dot). */
.rc { display: grid; gap: clamp(32px, 6vw, 56px); }
.rc__lead { margin: 18px 0 0; color: var(--fg-2); font-size: var(--t-lead); line-height: 1.36; max-width: 34ch; }
.rc__list { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.rc__grp:first-child { grid-row: span 3; }
.rc__grp h3 { margin: 0 0 10px; font-weight: 400; color: var(--signal-text); text-transform: uppercase; }
.rc__grp ul { list-style: none; margin: 0; padding: 0; line-height: 1.55; color: var(--fg); }
.rc__fig { margin: 0; min-width: 0; }
.rc__svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; overflow: visible; }
.rc__rings circle { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rc__km text { font-family: var(--mono); font-size: 11px; fill: var(--fg-3); }
.rc__rays path { stroke: var(--fg); stroke-opacity: .28; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
.rc__pts circle { fill: var(--fg); }
.rc__home { fill: var(--signal); }
.rc__here { font-family: var(--mono); font-size: 12px; fill: var(--fg); }
@media (min-width: 900px) {
  .rc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); align-items: center; }
}
.rc__code text { font-family: var(--mono); font-size: 10.5px; fill: var(--fg-2); letter-spacing: .04em; }