@charset "UTF-8";
/* ---------------------------------------------------------------------------
   PROFILE — a person on /staff-and-shamans (node 9).
   Added 2026-08-24, replacing that page's `.float-right-500` portraits.

   WHY, MEASURED on the live page before this file existed:

     - Prose ran 1136px at 21px, about 108 characters per line. `.group` alone
       is 1200px and the page never wrapped anything in `.text-section`. Every
       page rebuilt since 2026-08-20 reads at 731px / ~70 characters inside
       `.text-section.wide`; /ayahuasca-ceremony was measured at exactly that.
       The body markup now supplies the wrapper, so nothing here sets a measure.

     - `.float-right-500` put a 454px portrait inside that 1136px column, so the
       line length swung between ~62 characters beside the portrait and ~108
       below it, five times down the page. components/figure.scss records the
       same defect being removed from the Retreat Type pages on 2026-08-20 for
       the same reason. /staff-and-shamans was one of the nine node bodies still
       carrying `.float-right-500`; the other eight are untouched, which is why
       this is a new component and not an edit to components/images.scss.

     - The five portraits were 1665px of stacked image on a 390px phone. At
       110px each in the head row they are ~550px, and they sit beside the name
       instead of above the prose.

   The portrait is small and the name sits next to it deliberately: the page's
   complaint was that a three-paragraph profile was dressed exactly like a
   nine-paragraph one. Shrinking the dressing fixes that without demoting any
   person to a lower heading level, which would have been wrong both
   semantically (each person is a section of the page) and socially (Gina is an
   owner, Manain is the curandero).
   --------------------------------------------------------------------------- */
.profile__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

/* COMPETING RULE: critical.css:507's bare `img` (0,0,1) sets max-width: 100%,
   height: auto, display: block and auto inline margins. This is (0,1,0) and
   wins outright rather than by load order — the auto margins in particular
   would centre the portrait inside its flex item and open a gap beside the
   name. `flex: none` because the default `flex-shrink: 1` lets a long name
   squeeze the portrait narrower than its own height and break the square. */
.profile__portrait {
  flex: none;
  width: 6.875rem;
  height: 6.875rem;
  object-fit: cover;
  border-radius: 0.375rem;
  margin: 0;
}

@media (min-width: 800px) {
  .profile__portrait {
    width: 12.5rem;
    height: 12.5rem;
  }
}
/* BELOW 800px THE HEAD STACKS AND THE PORTRAIT TAKES THE MEASURE.
   Corrected 2026-08-24, same day as the rebuild, on the maintainer's side-by-side
   of the old page against the new one: at 110px beside the name the face was
   unreadable and the portrait read as a thumbnail tucked off to one side, where
   the page it replaced showed a full-width portrait of the person.

   A phone has one column, so there is no room for a portrait AND a 28px name on
   the same line — the identity row only works where the name has a column of its
   own. The row is the desktop treatment; stacked is the phone treatment.

   `order: -1` keeps the reading order the old page had: name, then role, then
   face, then prose. Source order stays image-first so the desktop row needs no
   ordering of its own.

   400px cap, not the full measure. `width: 100%` alone is right at 390px (343px,
   which is what the maintainer was comparing against) but hands a 739px square
   to a 799px tablet, where the portrait becomes the whole screen. The cap binds
   only above ~430px.

   `height: auto` overrides the fixed 110px above; `aspect-ratio` then keeps the
   square that `object-fit: cover` is cropping to. */
@media (max-width: 799px) {
  .profile__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .profile__id {
    order: -1;
  }
  .profile__portrait {
    width: 100%;
    max-width: 25rem;
    height: auto;
    aspect-ratio: 1;
  }
}
/* min-width: 0 so a long name wraps inside the flex item instead of forcing the
   row wider than the measure. "Vanessa de Davis & Gabriela Mosonbite" is the
   case that needs it. */
.profile__id {
  min-width: 0;
}

/* The h2 keeps $fs-h2 — GENERATOR-RULES 1.1: size a heading with its role
   token, and each person is a section of this page. Only the margins change,
   because the heading is now one half of a two-part identity block rather than
   a free-standing section title. */
.profile__id h2 {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* $fs-sm is sanctioned here by GENERATOR-RULES 1.1: this is a metadata label,
   uppercase and tracked, not reading matter.

   COLOUR IS DECIDED BY THE GROUND, AND THAT IS DELIBERATE. This rule is (0,1,0)
   and applies on the paper and cloth sections. On the two coloured grounds the
   band's own audited rules beat it on specificity, not on load order:

     .background-plum, .background-plum p   (0,1,1)  ->  $paper-plum   13.0:1
     .background-tan p                      (0,1,1)  ->  $primary-start 6.5:1

   Both clear layout/colored-containers.scss's own 5.5:1 floor, so no
   ground-specific override is needed or wanted here. $teal-light on the paper
   (#F6F3EE) and cloth (#F9F6EE) grounds measures 6.7:1.

   This replaces `.staff-subheading` (css/base.scss), which rendered $moss at
   clamped(20px, 28px) and measured 1.88:1 on cloth and 1.83:1 on paper. */
.profile__role {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3F5B5F;
}

/* ---------------------------------------------------------------------------
   PROFILE PHOTOS — the supporting pair inside a profile's prose.

   NOT `.two-column-block` (layout/two-col-topics.scss), which this page used
   before. That library is also attached to node 31 (/retreat-dates) for the
   "Included in our Retreats" block, so restyling it to fix this page would
   change a page this task did not ask about.

   TWO COLUMNS AT EVERY WIDTH, including the phone. Three stacked tiles plus the
   flute video were about 1,350px of back-to-back media at 390px. A pair at
   165px each is 165px of column height, and the third photograph moved into the
   prose as a `figure.figure` where it illustrates the paragraph next to it.

   `aspect-ratio: 1` is the native shape of both tiles (manain-at-alter.webp is
   1200x1200, manain_3.webp is 600x600), so `object-fit: cover` crops nothing.
   It is stated rather than left to the intrinsic size so a future swap cannot
   make the row ragged, which is what the old three-tile row was: 357px, 447px
   and 357px tall on a 1440px desktop.
   --------------------------------------------------------------------------- */
.profile-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: clamp(2.313rem, 1.271rem + 3.333vw, 4.188rem);
}
@media (min-width: 800px) {
  .profile-photos {
    gap: 1.313rem;
  }
}

/* (0,1,1), beating critical.css:507's bare `img` (0,0,1) outright. The auto
   inline margins there are wrong inside a grid track — the same note
   components/photo-grid.scss carries for the same reason. */
.profile-photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.375rem;
  margin: 0;
}

/*# sourceMappingURL=profile.css.map */