/* ==========================================================================
   MAROSI — Careers (careers.html)
   The hiring shelf. Same grammar as the Field Notes shelf (notes.css) but
   day-side: the page keeps the default light tokens, and each role is a
   paper vessel whose background is a live Canvas 2D pattern in dark ink
   (js/note-covers.js with data-ink="dark"). Role cards are shorter than
   note cards — seven of them have to scan as a board, not a gallery.
   ========================================================================== */

/* scrolling document, not a film: the nav rides the page (see notes.css) */
.nav { position: absolute; }

/* ---------- header ---------- */
.careers-hero {
  padding: calc(var(--nav-h) + var(--nav-top) + clamp(4rem, 10vh, 8rem)) 0 clamp(3.5rem, 7vh, 6rem);
}
.careers-kicker { margin-bottom: clamp(1.2rem, 2.5vh, 2rem); }
.careers-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.25rem, 8.5vw, 8.5rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
}
.careers-deck {
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  color: var(--grey-700);
  font-size: clamp(1.1875rem, 1.5vw, 1.4375rem);
  line-height: 1.55;
  max-width: 52ch;
}

/* ---------- the board ---------- */
.roles-list { padding-bottom: clamp(3.5rem, 7vh, 6rem); }
.roles-ol {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.6vh, 2.25rem);
}
.roles-ol > li { display: flex; flex-direction: column; }
.roles-ol > li > .role { flex: 1; }

/* one role = one vessel. The canvas is the water; the copy floats above it
   and lets the pointer through so hovering the title still stirs the pattern. */
.role {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: clamp(280px, 38svh, 440px);
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(20px, 2.4vw, 36px);
  border: 1px solid var(--panel-border);
  background: #fbfcfd; /* must match note-covers.js PALETTES.paper.bg */
  box-shadow: var(--shadow-panel);
  transition: border-color 0.35s var(--ease-out);
  touch-action: pan-y;
}
.role:hover { border-color: var(--hairline-strong); }
/* .note-canvas is the class js/note-covers.js looks for inside a
   [data-pattern] vessel — the name is the contract, keep it */
.role .note-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}
/* ghost numeral, upper right — the notes shelf's voice, day-side ink */
.role .note-index {
  position: absolute; top: -0.12em; right: 0.06em; z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 16vh, 10rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(11, 13, 16, 0.05);
  pointer-events: none;
}

.role-copy {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2rem, 5vh, 3.5rem);
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  pointer-events: none;
}
/* ink sits raw on the pattern; a paper halo keeps it readable over dark ink */
.role-meta { color: var(--grey-600); text-shadow: 0 0 14px rgba(251, 252, 253, 0.95); }
.role-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.6vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  text-wrap: balance;
  max-width: 20ch;
  text-shadow: 0 0 20px rgba(251, 252, 253, 0.9), 0 2px 10px rgba(251, 252, 253, 0.75);
}
.role-blurb {
  margin-top: 1rem;
  color: var(--grey-700);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
  text-shadow: 0 0 16px rgba(251, 252, 253, 0.95), 0 1px 8px rgba(251, 252, 253, 0.8);
}

/* the whole card is the link; the apply line names the action and carries
   the forward arrow swap on card hover */
a.role:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.role-apply {
  display: inline-flex; align-items: center; gap: 0.55em;
  margin-top: 1.25rem;
  color: var(--fg);
  text-shadow: 0 0 14px rgba(251, 252, 253, 0.95);
}
.role-apply .btn-arr svg { width: 1em; height: 1em; stroke-width: 1.5; }
a.role:hover .btn-arr--fwd svg:first-child,
a.role:focus-visible .btn-arr--fwd svg:first-child { transform: translate(150%, 0); }
a.role:hover .btn-arr--fwd svg:last-child,
a.role:focus-visible .btn-arr--fwd svg:last-child { transform: translate(0, 0); }

/* ---------- open application ---------- */
.careers-open { padding-bottom: clamp(6rem, 12vh, 10rem); }
.careers-open .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2.5vh, 2rem);
  border-top: 1px solid var(--hairline);
  padding-top: clamp(3rem, 6vh, 5rem);
}
.careers-open-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.careers-open-sub {
  color: var(--grey-700);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
}
.careers-open .btn { margin-top: 0.5rem; }

@media (max-width: 640px) {
  .role { min-height: clamp(300px, 46svh, 480px); }
  .role .note-index { font-size: clamp(4.5rem, 14vh, 7rem); }
}