/* ============================================================
   Rockwell Health - "Editorial" · Careers (interior page)
   Page-only section styles on top of the shared editorial system
   (../style.css, READ-ONLY): :root tokens, base type, header,
   footer, .ed-wrap, .ed-head/.ed-eyebrow/.ed-kicker, .ed-btn*,
   .ed-textlink, .ed-close (shared light closer), focus + motion.
   Everything below is namespaced ed-cr- so it never collides with
   shared components or sibling pages.
   Brand: navy #262168 / red #e0271c only (+ warm neutrals).

   Spine (light throughout; no navy slab):
     1 · open   type-led editorial masthead
     2 · who    three ruled columns, ghost icon marks
     3 · roles  sand band: ruled index of role areas + a plain note
     4 · work   paper band: editorial pull-quote + plain-spoken prose
     5 · close  shared light closer (.ed-close) as introduce-yourself
   ============================================================ */

/* ============================================================
   1 · Masthead - type-led editorial opening
   ============================================================ */
.ed-cr-open{
  background:
    radial-gradient(120% 140% at 88% -10%, #fffdf9 0%, rgba(255,253,249,0) 46%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, var(--paper-2) 100%);
  border-bottom:1px solid var(--line);
}
.ed-cr-open-in{
  padding-block:clamp(58px,8.5vw,116px) clamp(44px,6vw,78px);
}
.ed-cr-open h1{
  font-size:clamp(2.6rem,6vw,4.8rem);
  line-height:1.02; letter-spacing:-.028em; color:var(--navy);
  max-width:16ch;
}
.ed-cr-open h1 em{ font-style:italic; font-weight:600; color:var(--red); }
.ed-cr-lede{
  margin-top:clamp(24px,3.2vw,38px); max-width:60ch;
  font-size:clamp(1.1rem,1.35vw,1.3rem);
  line-height:1.6; color:var(--body); text-wrap:pretty;
}

/* ============================================================
   2 · Who we are - three ruled columns with ghost icon marks
   (echoes the homepage care-philosophy row).
   ============================================================ */
.ed-cr-who{ padding-block:var(--sec); background:var(--paper); }
.ed-cr-points{
  display:grid; grid-template-columns:repeat(3,1fr);
  align-items:stretch;
  border-top:1px solid var(--line-2);
}
.ed-cr-point{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(30px,3vw,42px) clamp(20px,1.9vw,32px) clamp(6px,1vw,12px);
}
.ed-cr-point:first-child{ padding-inline-start:0; }
.ed-cr-point:last-child{ padding-inline-end:0; }
.ed-cr-point + .ed-cr-point{ border-inline-start:1px solid var(--line); }
.ed-cr-point-mk{
  display:grid; place-items:center; flex:none;
  width:52px; height:52px; border-radius:var(--r);
  margin-bottom:clamp(20px,2vw,26px);
  background:transparent; border:1px solid var(--navy); color:var(--navy);
  transition:transform var(--med) var(--ease-expo),
             border-color var(--med) var(--ease-expo),
             color var(--med) var(--ease-expo);
}
.ed-cr-point-mk svg{ width:24px; height:24px; }
.ed-cr-point h3{
  font-size:1.24rem; font-weight:600; line-height:1.2;
  letter-spacing:-.012em; color:var(--navy);
  position:relative;
}
.ed-cr-point h3::after{
  content:""; position:absolute; left:0; bottom:-9px;
  width:0; height:2px; border-radius:2px; background:var(--red);
  transition:width var(--med) var(--ease-expo);
}
.ed-cr-point p{
  margin-top:18px; max-width:30ch;
  color:var(--body-2); font-size:.97rem; line-height:1.55; text-wrap:pretty;
}
.ed-cr-point:hover .ed-cr-point-mk{ transform:translateY(-4px); border-color:var(--red); color:var(--red); }
.ed-cr-point:hover h3::after{ width:30px; }

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ed-cr-point{
      animation:ed-rise .7s var(--ease) both;
      animation-timeline:view(); animation-range:entry 2% cover 24%;
    }
    .ed-cr-point:nth-child(2){ animation-range:entry 6% cover 28%; }
    .ed-cr-point:nth-child(3){ animation-range:entry 10% cover 32%; }
  }
}

/* ============================================================
   3 · The roles we grow - a ruled editorial index.
   Each row is a role area (Spectral name + short description) on a
   hairline, read like a magazine contents list. No numbered markers:
   these areas are not a sequence, just where good people fit.
   ============================================================ */
.ed-cr-roles{
  padding-block:var(--sec);
  background:var(--paper-2);
  border-top:1px solid var(--line);
}
.ed-cr-list{
  border-top:1px solid var(--line-2);
}
.ed-cr-role{
  display:grid; grid-template-columns:minmax(0,0.92fr) minmax(0,1.32fr);
  gap:clamp(14px,3vw,52px); align-items:baseline;
  padding:clamp(20px,2.5vw,30px) 0;
  border-bottom:1px solid var(--line);
}
.ed-cr-role-name{
  display:flex; align-items:baseline; gap:.72em;
  font-size:clamp(1.3rem,1.9vw,1.62rem); font-weight:600;
  letter-spacing:-.014em; line-height:1.16; color:var(--navy);
  text-wrap:balance;
}
.ed-cr-role-name::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:var(--red); flex:none; transform:translateY(-.34em);
}
.ed-cr-role-desc{
  font-size:1rem; line-height:1.56; color:var(--body-2); max-width:48ch;
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .ed-cr-role{
      animation:ed-rise .6s var(--ease) both;
      animation-timeline:view(); animation-range:entry 0% cover 20%;
    }
  }
}

/* plain note beneath the index */
.ed-cr-roles-note{
  display:flex; align-items:flex-start; gap:11px;
  margin-top:clamp(24px,2.6vw,34px);
  padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--line-2);
  font-size:.94rem; line-height:1.56; color:var(--body-2); max-width:72ch;
}
.ed-cr-roles-note svg{ width:19px; height:19px; flex:none; color:var(--red-ink); margin-top:.12em; }

/* ============================================================
   4 · How we work - editorial pull-quote + plain-spoken prose.
   Asymmetric: a hanging head on the left, the quote and account on
   the right, kept true to the practice model (no invented perks).
   ============================================================ */
.ed-cr-work{ padding-block:var(--sec); background:var(--paper); }
.ed-cr-work-in{
  display:grid; grid-template-columns:0.7fr 1.3fr;
  gap:clamp(30px,4vw,72px); align-items:start;
}
.ed-cr-work-head{ max-width:26rem; }
.ed-cr-work-head h2{
  font-size:clamp(2rem,3.4vw,2.85rem); font-weight:600;
  letter-spacing:-.02em; line-height:1.08; color:var(--navy);
}
.ed-cr-work-body{ max-width:56ch; }
.ed-cr-quote{
  margin:0 0 clamp(22px,2.6vw,32px);
  padding-left:22px; position:relative;
  font-family:"Spectral",serif; font-style:italic; font-weight:500;
  font-size:clamp(1.34rem,2.1vw,1.85rem); line-height:1.36;
  letter-spacing:-.008em; color:var(--navy); max-width:34ch;
  text-wrap:pretty;
}
.ed-cr-quote::before{
  content:""; position:absolute; left:0; top:.3em; bottom:.3em;
  width:3px; border-radius:var(--r-pill); background:var(--red);
}
.ed-cr-prose{
  font-size:clamp(1.04rem,1.15vw,1.16rem); line-height:1.66; color:var(--body);
}
.ed-cr-prose + .ed-cr-prose{ margin-top:clamp(14px,1.5vw,20px); }

/* ============================================================
   Responsive - 1024 (tablet)
   ============================================================ */
@media (max-width:1024px){
  /* who columns → 2-up ruled */
  .ed-cr-points{ grid-template-columns:repeat(2,1fr); }
  .ed-cr-point{ padding:clamp(26px,3vw,34px) 0 0; }
  .ed-cr-point + .ed-cr-point{ border-inline-start:none; }
  .ed-cr-point:nth-child(2n){ border-inline-start:1px solid var(--line); padding-inline-start:clamp(28px,3.4vw,44px); }
  .ed-cr-point:nth-child(2n+1){ padding-inline-end:clamp(28px,3.4vw,44px); }
  .ed-cr-point:nth-child(3){ border-top:1px solid var(--line); margin-top:clamp(4px,1.2vw,14px); padding-top:clamp(26px,3vw,34px); }
  .ed-cr-point p{ max-width:34ch; }

  /* how we work stacks */
  .ed-cr-work-in{ grid-template-columns:1fr; gap:clamp(24px,4vw,34px); }
  .ed-cr-work-head{ max-width:60ch; }
  .ed-cr-work-body{ max-width:64ch; }
  .ed-cr-quote{ max-width:44ch; }
}

/* ============================================================
   Responsive - 760
   ============================================================ */
@media (max-width:760px){
  /* role index rows stack: name above its description */
  .ed-cr-role{
    grid-template-columns:1fr; gap:8px;
    align-items:start;
  }
  .ed-cr-role-desc{ max-width:60ch; }
}

/* ============================================================
   Responsive - 560 (phone, 390 target)
   ============================================================ */
@media (max-width:560px){
  .ed-cr-open h1{ font-size:clamp(2.2rem,10vw,2.9rem); max-width:none; }

  /* who points → single column, horizontal rules */
  .ed-cr-points{ grid-template-columns:1fr; }
  .ed-cr-point,
  .ed-cr-point + .ed-cr-point,
  .ed-cr-point:nth-child(2n),
  .ed-cr-point:nth-child(2n+1){ border-inline-start:none; padding-inline:0; }
  .ed-cr-point{ padding:clamp(22px,5vw,28px) 0 0; }
  .ed-cr-point + .ed-cr-point{ border-top:1px solid var(--line); }
  .ed-cr-point:first-child{ padding-top:clamp(26px,5vw,32px); }
  .ed-cr-point p{ max-width:54ch; }
}

/* ============================================================
   Reduced motion - neutralize this page's reveals/hovers
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .ed-cr-point,.ed-cr-role{ animation:none; opacity:1; transform:none; }
  .ed-cr-point:hover .ed-cr-point-mk{ transform:none; }
}