/* ==========================================================================
   avinashanandsingh.com/career  - the openings listing
   Added 20 Sep 2026.

   Same language as about.css and results.css: cream ground, Cinzel display,
   Montserrat body, gold as the only accent. The application form itself keeps
   its own layout and is re-tinted separately in career/assets/css/theme.css.
   ========================================================================== */

.cr {
   --ground: #faf7f2;
   --ground-2: #f2ece2;
   --ink: #2a2118;
   --muted: #6f6355;
   --gold: #c2a74e;
   --gold-soft: rgba(194, 167, 78, 0.14);
   --line: rgba(42, 33, 24, 0.12);
   --serif: "Cinzel", Georgia, serif;

   background: var(--ground);
   color: var(--ink);
   font-family: "Montserrat", system-ui, sans-serif;
}

.cr .wrap {
   width: min(100% - 32px, 1100px);
   margin-inline: auto;
}

.cr section { padding: clamp(46px, 7vw, 96px) 0; }
.cr .alt { background: var(--ground-2); }

/* ------------------------------------------------------------- headings -- */

.cr-eyebrow {
   display: inline-block;
   margin: 0 0 14px;
   padding: 6px 16px;
   border: 1px solid var(--gold);
   border-radius: 999px;
   background: #fff;
   color: var(--gold);
   font-size: clamp(0.62rem, 0.58rem + 0.2vw, 0.73rem);
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
}

.cr h1 {
   margin: 0 0 16px;
   font-family: var(--serif);
   font-weight: 700;
   font-size: clamp(2rem, 1.35rem + 3vw, 3.4rem);
   line-height: 1.1;
   text-wrap: balance;
}

.cr h2 {
   margin: 0 0 16px;
   font-family: var(--serif);
   font-weight: 700;
   font-size: clamp(1.5rem, 1.15rem + 1.9vw, 2.5rem);
   line-height: 1.18;
   text-wrap: balance;
}

.cr .lede {
   max-width: 62ch;
   margin: 0;
   font-size: clamp(0.95rem, 0.9rem + 0.4vw, 1.08rem);
   line-height: 1.75;
   color: var(--muted);
}

.cr .lede + .lede { margin-top: 1em; }

/* ----------------------------------------------------------------- hero -- */

.cr-hero {
   padding: clamp(42px, 6.5vw, 88px) 0 clamp(34px, 5vw, 66px);
   background:
      radial-gradient(720px 320px at 80% -10%, var(--gold-soft), transparent 70%),
      var(--ground);
}

.cr-hero .meta {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 26px;
   margin-top: clamp(22px, 3vw, 30px);
   color: var(--muted);
   font-size: 0.86rem;
   font-weight: 600;
}

.cr-hero .meta span { display: inline-flex; align-items: center; gap: 8px; }

.cr-hero .meta span::before {
   content: "";
   width: 7px;
   height: 7px;
   rotate: 45deg;
   background: var(--gold);
}

/* ------------------------------------------------------------- openings -- */

.cr-roles {
   display: grid;
   gap: clamp(14px, 2vw, 20px);
   margin-top: clamp(26px, 4vw, 40px);
}

.cr-role {
   display: grid;
   gap: clamp(14px, 2vw, 22px);
   padding: clamp(20px, 3vw, 30px);
   border: 1px solid var(--line);
   border-radius: 18px;
   background: #fff;
   box-shadow: 0 10px 26px rgba(42, 33, 24, 0.05);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 820px) {
   .cr-role {
      grid-template-columns: 1fr auto;
      align-items: center;
   }
}

.cr-role:hover {
   transform: translateY(-2px);
   box-shadow: 0 16px 34px rgba(42, 33, 24, 0.1);
}

.cr-role h3 {
   margin: 0 0 10px;
   font-family: var(--serif);
   font-weight: 700;
   font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
   line-height: 1.25;
}

.cr-role p {
   max-width: 58ch;
   margin: 0;
   color: var(--muted);
   font-size: 0.93rem;
   line-height: 1.7;
}

.cr-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 0 0 12px;
   padding: 0;
   list-style: none;
}

.cr-tags li {
   padding: 5px 12px;
   border: 1px solid var(--line);
   border-radius: 999px;
   background: var(--ground-2);
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: var(--muted);
}

.cr-tags li.count {
   border-color: var(--gold);
   background: var(--gold-soft);
   color: #8a7428;
}

/* -------------------------------------------------------------- buttons -- */

.cr-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   min-height: 52px;
   padding: 0 clamp(22px, 3vw, 32px);
   border: 1px solid var(--gold);
   border-radius: 999px;
   background: var(--gold);
   color: #fff;
   font-family: inherit;
   font-weight: 700;
   font-size: clamp(0.9rem, 0.86rem + 0.25vw, 0.98rem);
   text-decoration: none;
   white-space: nowrap;
   touch-action: manipulation;
   transition: transform 0.18s ease, background 0.18s ease;
}

.cr-btn:hover { transform: translateY(-2px); background: #ad9340; color: #fff; }
.cr-btn:active { transform: translateY(0); }
.cr-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.cr-btn--ghost { background: #fff; color: var(--ink); }
.cr-btn--ghost:hover { background: var(--ground-2); color: var(--ink); }

/* --------------------------------------------------------- what we look -- */

.cr-list {
   display: grid;
   gap: 12px;
   margin: clamp(22px, 3vw, 32px) 0 0;
   padding: 0;
   list-style: none;
}

@media (min-width: 720px) {
   .cr-list { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
}

.cr-list li {
   display: flex;
   gap: 12px;
   padding: 15px 18px;
   border: 1px solid var(--line);
   border-radius: 14px;
   background: #fff;
   font-size: 0.92rem;
   line-height: 1.55;
}

.cr-list li::before {
   content: "";
   flex: none;
   width: 7px;
   height: 7px;
   margin-top: 7px;
   rotate: 45deg;
   background: var(--gold);
}

/* ---------------------------------------------------------------- steps -- */

.cr-steps {
   display: grid;
   gap: clamp(12px, 2vw, 18px);
   margin-top: clamp(26px, 4vw, 38px);
   counter-reset: step;
}

@media (min-width: 760px) {
   .cr-steps { grid-template-columns: repeat(4, 1fr); }
}

.cr-step {
   padding: clamp(18px, 2.4vw, 24px);
   border: 1px solid var(--line);
   border-radius: 16px;
   background: #fff;
}

.cr-step::before {
   counter-increment: step;
   content: counter(step);
   display: grid;
   place-items: center;
   width: 32px;
   height: 32px;
   margin-bottom: 12px;
   border-radius: 50%;
   background: var(--gold-soft);
   color: #8a7428;
   font-family: var(--serif);
   font-weight: 700;
   font-size: 0.9rem;
}

.cr-step strong {
   display: block;
   margin-bottom: 6px;
   font-size: 0.98rem;
}

.cr-step span {
   color: var(--muted);
   font-size: 0.86rem;
   line-height: 1.6;
}

/* ------------------------------------------------------------------ CTA -- */

.cr-cta {
   text-align: center;
   background:
      radial-gradient(680px 300px at 50% 0%, var(--gold-soft), transparent 68%),
      var(--ground-2);
   border-top: 1px solid var(--line);
}

.cr-cta .lede { margin-inline: auto; }

.cr-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center;
   margin-top: clamp(22px, 3vw, 30px);
}

@media (prefers-reduced-motion: reduce) {
   .cr-role, .cr-btn { transition: none; }
   .cr-role:hover, .cr-btn:hover { transform: none; }
}