/* The Content Surgeon: roster.css (DESIGN-SPEC 6.2, amended by 11.12). Page layout only: running heads,
   plates, findings, notes, quotes and the appointment card are core.css components.
   Mobile first, tokens only, no ids. Owner: WP3. */

/* ---------- Title page ---------- */
.r-title{padding-block:var(--title-top) var(--sec)}
.r-title__dek{margin-top:var(--sp-5)}
.r-contents{margin-top:var(--sp-7)}
/* The line-up: the three surgeons are the contents. Phones: a 72 px head-and-shoulders thumb
   beside number, name and specialty; the whole row is the target and carries the ring */
.r-contents__list li{border-bottom:var(--hair)}
.r-contents__list a{display:grid;grid-template-columns:72px minmax(0,1fr) auto;grid-template-areas:"img n arw" "img name arw" "img spec arw";align-items:center;column-gap:var(--sp-4);row-gap:0;padding:12px 0;text-decoration:none}
.r-contents__plate{grid-area:img;width:72px;height:72px}
.r-contents__plate img{object-fit:cover;object-position:50% 0}
.r-contents__n{grid-area:n;font:500 var(--fs-mono)/1.4 var(--mono);color:var(--ink-3)}
/* Hover grammar of the home index and journal rows: the name stays ink and takes a 2 px red
   underline; the photographs never move */
.r-contents__name{grid-area:name;min-width:0;overflow-wrap:anywhere;font:400 var(--fs-h4)/1.25 var(--serif);letter-spacing:-.005em;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.14em;
  transition:text-decoration-color var(--t-fast) var(--ease)}
.r-contents__spec{grid-area:spec;font:400 .9375rem/1.45 var(--sans);color:var(--ink-2)}
.r-contents__list .arw{grid-area:arw;align-self:center;padding-left:var(--sp-2);color:var(--ink-3)}
/* A mouse draws the name's rule (core.css, One link language); touch keeps the underline */
@media (hover:none){.r-contents__list a:hover .r-contents__name{text-decoration-color:var(--red)}}
.r-contents__list a:active .r-contents__name{text-decoration-color:var(--red-deep)}
/* Doorway (CORE-3): the plate takes the inset frame, the number turns red-deep, the arrow drops */
.r-contents__n{transition:color var(--t-fast) var(--ease)}
.r-contents__list a:focus-visible .r-contents__plate::after{opacity:1}
.r-contents__list a:focus-visible .r-contents__n{color:var(--red-deep)}
@media (hover:hover){
  .r-contents__list a:hover .r-contents__plate::after{opacity:1}
  .r-contents__list a:hover .r-contents__n{color:var(--red-deep)}
}

/* ---------- Case studies ---------- */
/* Phones: the specialty sits under the name two lines later, so the note steps out (as the hero's does) */
.rcase .rh__note{display:none}
/* One track that never outgrows the page, so enlarged text reflows instead of scrolling sideways */
.rcase__grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--sp-6)}
/* Phones: the plate bleeds to both edges at 1:1, the hero's framing */
.rcase__fig{margin-inline:calc(var(--margin) * -1)}
.rcase__fig .plate{aspect-ratio:1/1}
.rcase__spec{margin-top:var(--sp-3);font:400 var(--fs-small)/1.45 var(--sans);color:var(--ink-2)}
.rcase__head .dek{margin-top:var(--sp-5)}
/* A surname wider than a phone at enlarged text breaks rather than pushing the page sideways */
.rcase__head .h2{overflow-wrap:break-word}
.rcase__body{margin-top:var(--sp-7)}
/* Roman, as home's standfirst, so the testimonial below keeps the only italic */
.rcase__audience{max-width:var(--measure-dek);margin-top:var(--sp-6);font:400 var(--fs-dek)/1.38 var(--serif);color:var(--ink)}
.rcase__body .quote{margin-top:var(--sp-7)}
.rcase__notes{display:grid;gap:var(--sp-5);margin-top:var(--sp-6)}
/* The Note rules run to the column edge, as the table's do; only the reading lines take the measure */
.rcase__notes .note p{max-width:var(--measure-ui)}
.note .rcase__more{margin-top:var(--sp-3)}
/* The links stay inline (never flex), so the underline skips the inline-block ↗ and →;
   the 44 px target is a core-style ::after band, so the focus ring still hugs the words */
.rcase__more a{position:relative;font-weight:500}
.rcase__links{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--sp-3);min-height:44px;margin-top:var(--sp-5);font:500 .9375rem/1.3 var(--sans)}
.rcase__links a{position:relative}
.rcase__more a::after,.rcase__links a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.rcase__sep{color:var(--ink-3)}
/* A quote's handle can wrap to the start of its line, over the first link below; its 44 px band
   grows down (core), so the links keep 32 px from the quote and the two bands never overlap */
.rcase__body .quote + .rcase__links{margin-top:var(--sp-6)}

/* ---------- Booking close: the page ends on ink, a paper card on the dark ground (core joins
   it to the footer and resets the card's focus colour) ---------- */
.r-cta.on-ink{padding-block:clamp(56px,7vw,104px) clamp(48px,5vw,72px)}
.r-cta__grid{display:grid;row-gap:var(--sp-7)}
.r-cta__text .dek{margin-top:var(--sp-5)}

/* Phones only: the 1:1 box shows the figure at full width from the top, so the 100vw slot is
   right and the head is never cut (T35); from 720 the plates are 4:5 and contain again */
@media (max-width:719px){
  .rcase__fig .plate img{object-fit:cover;object-position:50% 0}
}

@media (min-width:720px){
  .r-contents__list a{grid-template-columns:88px 3rem minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"img n name spec arw";column-gap:var(--gutter)}
  .r-contents__plate{width:88px;height:88px}
  .rcase .rh__note{display:block}
  /* Tablet: plate and identity side by side, the evidence full width beneath */
  .rcase__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:0}
  .rcase__fig{grid-column:1 / span 6;margin-inline:0}
  .rcase__fig .plate{aspect-ratio:4/5}
  .rcase__text{display:contents}
  .rcase__head{grid-column:7 / -1;align-self:end}
  .rcase__body{grid-column:1 / -1}
  /* Tablet: the card takes columns 1 to 8, as the home booking card does */
  .r-cta__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .r-cta__text{grid-column:1 / -1}
  .r-cta__grid > .appt{grid-column:1 / span 8}
}

/* Tablet: the evidence runs full width, so the numeral column is set in em (3.9em is what the
   1024 px text column gives) and each figure stays one line of evidence with its label */
@media (min-width:720px) and (max-width:1023px){
  .rcase__body .findings__table th{width:3.9em}
}

@media (min-width:1024px){
  /* Title 1-6 with the standfirst from 8 on its first baseline (from 1280 the house 7 / 4); the
     line-up runs full width beneath: three plates, each over its number, name and specialty */
  .r-title__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto;column-gap:var(--gutter);align-items:first baseline}
  .r-title__h1{grid-column:1 / span 6}
  .r-title__dek{grid-column:8 / -1;margin-top:0}
  .r-contents{grid-column:1 / -1;grid-row:2;margin-top:var(--sp-7)}
  .r-contents__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
  .r-contents__list li{border-bottom:0}
  /* The name takes the full card width (one line from 1024); the arrow closes the specialty line */
  .r-contents__list a{grid-template-columns:2.25rem minmax(0,1fr) auto;grid-template-areas:"img img img" "n name name" ". spec arw";align-items:baseline;column-gap:var(--sp-3);row-gap:2px;padding:0}
  .r-contents__plate{width:auto;height:auto;aspect-ratio:4/3;margin-bottom:var(--sp-3)}
  .r-contents__list .arw{line-height:1}
  /* Plate 1-5 and text 7-12; the next case mirrors, so the page alternates */
  .rcase__grid{align-items:start}
  .rcase__fig{grid-column:1 / span 5;grid-row:1}
  .rcase__text{display:block;grid-column:7 / -1;grid-row:1}
  .rcase--flip .rcase__fig{grid-column:8 / -1}
  .rcase--flip .rcase__text{grid-column:1 / span 6}
  .r-cta__grid{align-items:start}
  .r-cta__text{grid-column:1 / span 6}
  .r-cta__grid > .appt{grid-column:8 / -1}
}
@media (min-width:1280px){
  .r-title__h1{grid-column:1 / span 7}
  .r-title__dek{grid-column:9 / span 4}
}
/* The three cards share their rows, so where a name wraps (1024 to about 1180) the specialties
   stay level across the line-up */
@supports (grid-template-rows:subgrid){
  @media (min-width:1024px){
    .r-contents__list li{display:grid;grid-row:span 3;grid-template-rows:subgrid}
    .r-contents__list a{grid-row:span 3;grid-template-rows:subgrid}
  }
}
/* The portrait stays in view beside its evidence wherever the viewport can hold the
   whole plate (about 46% of the width, plus the bar): 1366 x 768 and 1440 x 789 both can */
@media (min-width:1024px) and (max-aspect-ratio:9/5),(min-width:1024px) and (min-height:780px){
  .rcase__fig{position:sticky;top:calc(var(--bar-h) + var(--sp-5))}
}