/* ============================================================================
 * INNOVATIVE MECHANICAL - AUTHOR  ·  /author-chad-ferguson/
 *
 * Layer 4 (`inm-body`). Loaded only for this page, AFTER type-service.css, so every
 * rule here beats the type sheet's on an equal-specificity tie. Nothing is scoped more
 * loosely than `.rsg-inm-au`, which no other page or asset carries.
 *
 * WHAT IS BORROWED. The client's reference (a Dycus author page) shows two sections: a
 * centred title band, then a portrait rail on the left with the bio copy on the right.
 * INM already owns both shapes, so neither was rebuilt:
 *   band 1  `.rsg-hero` + `.rsg-hero-grid.is-solo`   - the centred hero, unchanged.
 *   band 2  `.rsg-fin-grid` / `.rsg-fin-stage` / `.rsg-fin-photo` - the house photo-left
 *           split, whose .715fr/1.285fr column pair is already the reference's rail-to-
 *           bio proportion. The offset royal outline frame comes with it for free.
 * Only what the borrowed component gets WRONG for a portrait is corrected below, plus
 * the two caption lines and the bio prose, which the component never had.
 *
 * THREE CORRECTIONS TO `.rsg-fin-*`, EACH FOR A MEASURED REASON:
 *   1. `img{height:515px}` + `object-fit:cover` is built for a landscape job photo and
 *      would crop a 800x1000 portrait to a letterbox. Replaced with `aspect-ratio:4/5`
 *      + `height:auto`, which is the documented way to hold a known source ratio. The
 *      type sheet re-declares that height at 1024/767 too, so it is restated there.
 *   2. `figure::after` lays a dark gradient scrim over the bottom of the photo. That
 *      reads as depth on a job site and as a shadow across a person's chest. Removed.
 *   3. `align-items:center` centres a short rail against a long bio. The reference
 *      top-aligns them, and so does this.
 * `.rsg-fin-body` is deliberately NOT used: its <=767 rules set `display:contents` and
 * hand-pick child orders by class, which only works for the pricing band's own markup.
 * The rail is its own element, so the type sheet's `.rsg-fin-stage{order:3}` at <=767 is
 * inert here - but its margin is not, and is restated.
 *
 * PROSE. Same treatment as the privacy policy page: the article column from blog.css
 * (17.5px / 1.75 / #3A3D3F, 18px rhythm), so every long-form page on this site reads as
 * one material.
 * ========================================================================== */

.rsg-inm-au{
  --au-body:17.5px;
  --au-name:22px;
}

/* ---- band 2: the rail / bio split ---------------------------------------- */
.rsg-inm-au .rsg-au-grid{align-items:start;column-gap:56px}

/* the rail: photo, then the doc's name and role beneath it */
.rsg-inm-au .rsg-au-rail{position:relative}

/* 1. hold the portrait's real 4:5 ratio instead of cropping it to a fixed height */
.rsg-inm-au .rsg-fin-photo img{height:auto;aspect-ratio:4/5}

/* 2. the job-photo scrim reads as a shadow across a person - drop it */
.rsg-inm-au .rsg-fin-photo figure::after{content:none}

.rsg-inm-au .rsg-au-name{
  margin:26px 0 0;
  font-family:var(--font-heading);font-size:var(--au-name);font-weight:700;
  line-height:1.2;letter-spacing:-.008em;color:var(--ink)}

/* the established light-band micro-label: 11.5px uppercase in the warm literal */
.rsg-inm-au .rsg-au-role{
  margin:7px 0 0;
  font-family:var(--font-heading);font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.45;color:#805928}

/* ---- the bio column ------------------------------------------------------ */
.rsg-inm-au .rsg-au-body p{
  margin-top:18px;
  font-size:var(--au-body);line-height:1.75;color:#3A3D3F}

.rsg-inm-au .rsg-au-body>p:first-child{margin-top:0}

/* ---- the proof line ------------------------------------------------------ */
/* Separated by a hairline rather than a box: it is a credential line, not a callout. */
.rsg-inm-au .rsg-au-proof{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  font-size:16px;line-height:1.7;color:var(--muted)}

.rsg-inm-au .rsg-au-rating{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-heading);font-weight:700;color:var(--ink);
  text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease)}

.rsg-inm-au .rsg-au-rating:hover{border-bottom-color:var(--red)}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1024px){
  .rsg-inm-au{--au-name:20px}
  .rsg-inm-au .rsg-au-grid{column-gap:40px}
  /* restated: the type sheet sets a fixed img height at this breakpoint too */
  .rsg-inm-au .rsg-fin-photo img{height:auto}
}

@media (max-width:767px){
  .rsg-inm-au{--au-body:16.5px;--au-name:20px}
  .rsg-inm-au .rsg-fin-photo img{height:auto}
  /* the stacked rail should not become a full-width portrait */
  .rsg-inm-au .rsg-au-rail{max-width:340px;margin:0 auto 34px}
  .rsg-inm-au .rsg-au-name,.rsg-inm-au .rsg-au-role{text-align:center}
  /* restated: `.rsg-fin-stage` carries a stacking margin at <=767 that is not wanted
     here, because the rail supplies its own spacing */
  .rsg-inm-au .rsg-fin-stage{margin:0}
}

@media (prefers-reduced-motion:reduce){
  .rsg-inm-au .rsg-au-rating{transition:none}
}