/* ==========================================================================
   OROVELL careers sheet. Loads after css/orovell.css, css/chrome.css and
   css/blog.css (the .sec rhythm, the .cta-wine close and the .post-body
   article measure are reused from there) on careers.html and
   careers/<slug>.html, both generated by tools/build-careers.py. Every colour
   is a brand token or an alpha of one. Surfaces alternate down each page:
   hero (obsidian, warmed with wine) > why join us (linen) > open roles
   (obsidian) > the close (wine) > footer; a role page: head block (obsidian)
   > the role (linen) > apply (wine) > footer. Corners 5px, hairline rows
   (never dashed), no shadows, no rules under headings, tracked caps only at
   label size (client rulings 2026-09-16).
   ========================================================================== */

/* ------------------------------------------------ the heroes (obsidian)
   No photograph: the text sits on obsidian warmed with a wine wash (rule 16)
   so the block is never a flat pure black. The line under the H1 is a .frag
   like every other page hero: one line at desktop (the nowrap rule in
   css/orovell.css, client ruling 2026-09-16), shortened in copy, never
   wrapped. */
.careers-hero,.role-hero{min-height:52svh;
  background:radial-gradient(70% 90% at 20% 0%,rgba(75,25,40,.28),transparent 70%) var(--obsidian)}
.careers-hero .hero-caps,.role-hero .hero-caps{margin-top:22px}
/* the factory still behind the careers hero, at low opacity (client
   2026-09-16): the page-hero .bg grammar from orovell.css (cover, brightness,
   obsidian gradient), pulled down further so the type sits on near-black */
.careers-hero .bg img{opacity:.4;filter:brightness(.7)}
.careers-hero .bg::after{background:linear-gradient(to bottom,var(--obs-90),rgba(5,5,5,.35) 45%,var(--obs-90))}

/* the Urgent tag (the CMS flag): wine plate, gold caps, the house corner,
   the same grammar as the footer's Opening soon tag */
.tag.urgent{display:inline-block;padding:4px 9px 3px;border-radius:var(--r);
  background:var(--wine);color:var(--gold);
  font-family:var(--f-body);font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;
  vertical-align:middle;white-space:nowrap}

/* ------------------------------------------------ 01 · why join us (linen)
   Three cards in a hairline frame, the number as a label, the title in
   display type one rank under the section head, the sentence at body size.
   No hover geometry. */
.sec-head{margin-top:14px}
.why-grid{margin-top:clamp(32px,5vh,52px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,32px)}
.why-card{border:1px solid var(--hair-d);border-radius:var(--r);padding:clamp(24px,3vw,40px);
  background:rgba(75,25,40,.04)}
.why-card h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(16px,1.5vw,22px);line-height:1.2;margin-top:14px;color:var(--obsidian)}
.why-card p{margin-top:12px;font-size:15px;line-height:1.75;color:var(--o72);max-width:38ch}

/* ------------------------------------------------ 02 · open roles (obsidian)
   One hairline row per role (rule 22: the catalogue number, then the title
   and its metadata triplet at label size, then the way in). The title
   underlines in gold on hover, a background hairline so it follows every
   wrapped line; nothing moves. */
.roles-sec{background:linear-gradient(rgba(75,25,40,.05),rgba(75,25,40,.02)) var(--obsidian)}
.roles{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;border-top:1px solid var(--hair)}
.role-row{display:grid;grid-template-columns:clamp(34px,4vw,64px) minmax(0,1fr) auto;
  gap:clamp(14px,2.4vw,36px);align-items:center;
  padding:clamp(22px,3vh,34px) 0;border-bottom:1px solid var(--hair)}
.role-row .role-n{color:var(--l45)}
.role-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.role-row h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(17px,1.7vw,26px);line-height:1.2;color:var(--linen)}
.role-row h3 a{background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;
  background-size:0 1px;background-position:0 100%;padding-bottom:2px;transition:background-size .3s var(--ez);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.role-row:hover h3 a,.role-row h3 a:focus-visible{background-size:100% 1px}
.role-row .role-meta{margin-top:10px}
.role-row .btn{justify-self:end;white-space:nowrap}

/* ------------------------------------------------ the role page
   The head block: the "Open role" label with the tag beside it, the title,
   the metadata triplet, the package line when the CMS carries one. */
.role-kicker{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.role-hero h1.display{max-width:22ch}
.role-pkg{margin-top:18px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-size:clamp(14px,1.1vw,16px);color:var(--linen-85)}

/* the converted job description in the blog's article measure
   (css/blog.css .post-body): the section heads are display type, the first
   sits flush with the top of the section */
.role-body > h2:first-child{margin-top:0}
.role-body h2{font-size:clamp(17px,1.5vw,23px)}
/* list markers: the site's 3px gold square (the caps-line separator), never
   a disc (no circles) */
.role-body ul{list-style:none;padding-left:0}
.role-body li{position:relative;padding-left:1.3em}
.role-body li::before{content:"";position:absolute;left:.2em;top:.72em;width:3px;height:3px;background:var(--gold)}
.role-body li + li{margin-top:.45em}

/* the close and apply bands on wine (css/blog.css .cta-wine): the sentence
   under the heading is body copy (.lead, centred, one line at desktop, it
   wraps only when the viewport makes it); the email in it is a plain linen
   link; the way back is a label with the gold underline the nav uses */
.cta-wine .lead{margin:18px auto 0;max-width:none;font-size:clamp(14px,1.25vw,17px);line-height:1.75;
  color:var(--linen-85);font-weight:300}
.cta-wine .lead a{color:var(--linen);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.cta-wine .lead a:hover,.cta-wine .lead a:focus-visible{color:var(--gold)}
.cta-wine .eyebrow{display:block}
.cta-wine .hero-actions{justify-content:center;margin-top:26px}
.cta-wine h2{margin-top:20px}
.apply-back{position:relative;display:inline-block;margin-top:30px;color:var(--l72);transition:color .2s}
.apply-back::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ez)}
.apply-back:hover,.apply-back:focus-visible{color:var(--linen)}
.apply-back:hover::after,.apply-back:focus-visible::after{transform:scaleX(1)}

/* ------------------------------------------------ responsive */
@media (max-width:1023px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .role-row{grid-template-columns:clamp(30px,8vw,44px) minmax(0,1fr);row-gap:16px}
  .role-row .btn{grid-column:2;justify-self:start}
}
@media (max-width:460px){
  .careers-hero,.role-hero{min-height:0}
  .role-row{grid-template-columns:minmax(0,1fr)}
  .role-row .role-n{display:none}
  .role-row .btn{grid-column:1}
}