/*
 * Irradiada · Clínica: the identity pages of fisiatria.com.br (the physician profile
 * /dr-marcus-yu-bin-pai/, Sobre /sobre/, Contato /contact/).
 * Source: 03-ops/inner-pages-irradiada/plugin/irradiada-static.css
 * Installed by apply-static.php as mu-plugins/fisiatria-irradiada/irradiada-static.css and enqueued
 * by the pages plugin (1.3.0) after the frame's sheet on a rebuilt static page of kind profile, about or contact
 * (PLUGIN-CONTRACT.md: page type "static", body classes irr-inner irr-static irr-static--{kind},
 * the mark <div class="irr irr-page irr-page--static irr-page--{kind}"> in the stored body).
 * Specification: IDENTITY-PAGES-SPEC.md (Appendix A), as bound by PLUGIN-CONTRACT.md, section
 * "Reading text on every inner page". Build notes: pages/IDENTITY-BUILD-NOTES.md.
 *
 * Sections:
 *   1 Theme containers             7 Items
 *   2 Root and tokens              8 Rows and the column button
 *   3 Lead                         9 Photograph band
 *   4 Facts strip                 10 Closing section and its rings
 *   5 Body and groups             11 Booking strip (the article's)
 *   6 Ledger                      12 Browser surfaces
 *
 * The page grid from 1280 px (binding): column 1 holds the names (group names, row titles),
 * columns 2 and 3 the running text at the measure of the article (--irr-measure), column 4
 * buttons, a photograph or air. Ledgers, items and the photograph pair are blocks: they start
 * on column 2 and end on a column line. Below 1280 px the groups set their name in column 1 from
 * 1024 px, as the specification measured, and the text keeps to the measure.
 *
 * Colour by meaning: cobalt is the physician (the profile's lead only); black and white
 * otherwise. No important flags, no font size under 16 px, no inline svg but the buttons' arrows.
 */

/* ---------- 1. Theme containers (outside .irr, under the body class) ---------- */
html body.irr-static {
  background: #fafafa;
}
html body.irr-static #page,
html body.irr-static #content,
html body.irr-static #primary,
html body.irr-static #main,
html body.irr-static #main > article,
html body.irr-static .inside-article,
html body.irr-static .entry-content {
  display: block;
  float: none;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* ---------- 2. Root and tokens ---------- */
/* The article's root (irradiada-article.css, section 2), restated as written there, so the
   reading size, the leading, the measure and the column tokens are one definition until the
   shared sheet irradiada-pages.css holds them. */
.irr.irr-page {
  --irr-fs-read: min(20px, clamp(18px, 16.4px + 0.19vw, 19px) + var(--irr-over) * 0.0132);
  --irr-lh-read: 1.45;
  --irr-measure: calc(var(--irr-fs-read) * 40);
  --irr-flow: 0.9em;
  --irr-fs-art-h1: clamp(30px, 8.72vw, var(--irr-fs-h3-xl));
  --irr-fs-art-h2: clamp(26px, 2.361vw, 34px);
  --irr-fs-art-h3: clamp(22px, 1.597vw, 24px);
  --irr-step-40: min(44px, clamp(28px, 2.778vw, 40px) + var(--irr-over) * 0.02778);
  --irr-row-top: 14px;
  --irr-col: calc((min(var(--irr-max), var(--irr-vw) - 2 * var(--irr-gutter)) - 3 * var(--irr-gap)) / 4);
  --irr-span3: calc(3 * var(--irr-col) + 2 * var(--irr-gap));
  --irr-field-bleed: min(var(--irr-tile-pad-lg), var(--irr-gutter) - 16px);
  --irr-focus: var(--irr-black);
  background: var(--irr-white);
  color: var(--irr-black);
  font-size: var(--irr-fs-read);
  line-height: var(--irr-lh-read);
  overflow-wrap: break-word;
}
@media (min-width: 360px) {
  .irr.irr-page {
    --irr-lh-read: 1.5;
    --irr-flow: 1.1em;
  }
}
@media (min-width: 768px) {
  .irr.irr-page {
    --irr-lh-read: 1.55;
    --irr-measure: calc(var(--irr-fs-read) * 36);
    --irr-flow: 1.6em;
  }
}
@media (min-width: 1024px) {
  .irr.irr-page {
    --irr-lh-read: 1.6;
  }
}
@media (min-width: 1280px) {
  .irr.irr-page {
    --irr-measure: min(2 * var(--irr-col) + var(--irr-gap), var(--irr-fs-read) * 36);
    --irr-flow: 1.8em;
  }
}
/* Static pages keep the article's paragraph gap as written above (PLUGIN-CONTRACT.md, "Reading
   text on every inner page": "as the article"; 1.6em from 768 px and 1.8em from 1280 px since the
   article's review fix 1). Only the size of the physician's name on his own page is set here:
   Headline from 768 px, as on the homepage (68.3 px at 1366, 80 px from 1600). */
.irr.irr-page--static {
  --irr-fs-name: max(var(--irr-fs-art-h1), var(--irr-fs-h2));
}
.irr-page--static figcaption {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--irr-ink-2);
}
.irr-page--static .irr-tel {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  text-decoration: none;
}
.irr-page--static .irr-tel:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---------- 3. Lead ---------- */
/* The hero's two-plus-two composition on the grid: copy on columns 1 and 2, a photograph with
   its caption on columns 3 and 4. The copy is one stack from the top: the h1 with its cap line
   on the photograph's top edge, then the sentence and the buttons one step apart (on Contato the
   booking button directly under the title, then its note). The copy sets the height and the
   photograph is cut to it, so both columns end on one line: no hole between the title and what
   follows it, and none beside the photograph. As tall as its content: no minimum height.
   Nothing stands above the h1. On phones one column, the h1 first. */
.irr-page--static .irr-lead {
  --irr-focus: var(--irr-guides);
  --irr-btn-hover-bg: var(--irr-white);
  --irr-btn-hover-fg: var(--irr-black);
  padding: var(--irr-step-64) 0 max(48px, var(--irr-step-72));
  background: var(--irr-black);
  color: var(--irr-white);
}
.irr-page--static .irr-lead--cobalt {
  --irr-btn-hover-fg: var(--irr-evidence);
  background: var(--irr-evidence);
}
.irr-page--static .irr-lead__grid {
  display: grid;
  gap: max(32px, var(--irr-step-40)) var(--irr-gap);
}
.irr-page--static .irr-lead__title {
  font-size: var(--irr-fs-art-h1);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.irr-page--static .irr-lead--cobalt .irr-lead__title {
  font-size: var(--irr-fs-name);
  line-height: 1;
  letter-spacing: -0.03em;
}
/* The lead's sentences fill columns 1 and 2 and keep to the measure of the article: from about
   1690 px two columns are wider than 36 reading sizes, and the text stops there (an 84
   character line at 1920 px otherwise). */
.irr-page--static .irr-lead__text {
  max-width: var(--irr-measure);
  margin-top: clamp(16px, 1.667vw, 24px);
  font-size: var(--irr-fs-lede);
  line-height: 1.45;
}
.irr-page--static .irr-lead__text + .irr-lead__text {
  margin-top: var(--irr-flow);
}
.irr-page--static .irr-lead__actions {
  display: grid;
  gap: 8px;
  margin-top: max(24px, var(--irr-step-40));
}
.irr-page--static .irr-lead__note {
  max-width: var(--irr-measure);
  margin-top: 20px;
  font-size: var(--irr-fs-read);
  line-height: var(--irr-lh-read);
}
.irr-page--static .irr-lead__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.irr-page--static .irr-lead figcaption {
  color: var(--irr-gray);
}
.irr-page--static .irr-lead--cobalt figcaption {
  color: var(--irr-white);
}
/* The portrait: 4:5 on phones, he stands in the right third (x 47 to 100 % of the frame). */
.irr-page--static .irr-lead__media--portrait img {
  aspect-ratio: 4 / 5;
  object-position: 100% 50%;
}
/* The entrance: 16:9, the whole building down to the pavement. */
.irr-page--static .irr-lead__media--street img {
  aspect-ratio: 16 / 9;
  object-position: 50% 90%;
}
@media (min-width: 600px) {
  .irr-page--static .irr-lead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
  }
}
@media (min-width: 768px) {
  .irr-page--static .irr-lead__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 0;
    align-items: stretch;
  }
  /* The copy carries the caption's height as bottom padding, so its last line (the buttons, on
     Contato the note) meets the bottom edge of the photograph and not of its caption. */
  .irr-page--static .irr-lead__copy {
    grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(12px + 16px * 1.4);
  }
  .irr-page--static .irr-lead__title {
    margin-top: -0.17em;
  }
  /* The name stands on two lines at every width of this layout ("Dr. Marcus", "Yu Bin Pai"):
     six sizes hold the first two words and not the third, so the break does not depend on the
     browser balancing the lines, and a window wide enough for one line keeps the block. */
  .irr-page--static .irr-lead--cobalt .irr-lead__title {
    max-width: 6em;
    margin-top: -0.15em;
  }
  /* One step under the title, never pushed to the bottom: the free height of the row is taken
     from the photograph, not left between the title and its sentence. */
  .irr-page--static .irr-lead__foot {
    padding-top: var(--irr-step-40);
  }
  .irr-page--static .irr-lead__foot > :first-child {
    margin-top: 0;
  }
  .irr-page--static .irr-lead__media {
    grid-column: 3 / 5;
    display: flex;
    flex-direction: column;
  }
  /* The photograph is as tall as the copy. Its ratio here is only the flattest cut allowed
     (12:5; the street frame 8:3, the entrance and the pavement): where the copy is shorter
     than that, the frame keeps this ratio and the rest of the height stays under the copy. */
  .irr-page--static .irr-lead__media img {
    flex: 1 1 auto;
    min-height: 0;
    aspect-ratio: 12 / 5;
  }
  .irr-page--static .irr-lead__media--portrait img {
    aspect-ratio: 12 / 5;
    object-position: 100% 50%;
  }
  /* The height that is cut comes from the cables above the building, not from the entrance. */
  .irr-page--static .irr-lead__media--street img {
    aspect-ratio: 8 / 3;
    object-position: 50% 100%;
  }
}

/* ---------- 4. Facts strip (the profile) ---------- */
/* The hero's proof strip under the lead: a hairline, uppercase terms, values. Two columns on
   phones (one below 390 px), four from 1024 px, each cell on a page column. White on cobalt.
   The cells of a row share its two lines (subgrid): a term that takes two lines ("Dor, área de
   atuação" below 1280 px) moves every value of its row, so the registration numbers stand on
   one baseline. The 20 px between rows is each cell's top padding, not a gap, because a gap
   would also part a term from its value. */
.irr-page--static .irr-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px var(--irr-gap);
  padding-top: 20px;
  border-top: 1px solid currentColor;
}
.irr-page--static .irr-facts dt {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.irr-page--static .irr-facts dd {
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.4;
}
.irr-page--static .irr-facts dd strong {
  display: block;
  font-weight: 700;
}
@supports (grid-template-rows: subgrid) {
  .irr-page--static .irr-facts {
    row-gap: 0;
    padding-top: 0;
  }
  .irr-page--static .irr-facts > div {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    padding-top: 20px;
  }
}
@media (max-width: 389.98px) {
  .irr-page--static .irr-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 768px) {
  .irr-page--static .irr-lead__grid--facts .irr-facts {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: max(32px, var(--irr-step-40));
  }
  .irr-page--static .irr-lead__grid--facts .irr-lead__media {
    grid-row: 1;
  }
}
@media (min-width: 1024px) {
  .irr-page--static .irr-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .irr-page--static .irr-facts dd {
    margin-top: 8px;
  }
}

/* ---------- 5. Body and groups ---------- */
/* A white field (black for the profile's closing). A group opens with a 3 px rule; its topic is
   its heading. From 1024 px the name stands in column 1 and the body on columns 2 to 4, its first
   line on the name's baseline. A paragraph of a group keeps to the measure: columns 2 and 3
   from 1280 px. */
.irr-page--static .irr-pbody {
  padding: var(--irr-step-64) 0 max(64px, var(--irr-step-104));
}
.irr-page--static .irr-pbody--end {
  padding-bottom: 0;
}
.irr-page--static .irr-group {
  padding-top: var(--irr-rule-pad);
  border-top: 3px solid currentColor;
}
.irr-page--static .irr-group + .irr-group {
  margin-top: max(56px, var(--irr-step-96));
}
.irr-page--static .irr-group__name {
  font-size: max(28px, var(--irr-fs-h3));
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.irr-page--static .irr-group__body {
  margin-top: 20px;
}
.irr-page--static .irr-group__lede {
  max-width: var(--irr-measure);
  font-size: var(--irr-fs-read);
  line-height: var(--irr-lh-read);
}
.irr-page--static .irr-group__lede + .irr-group__lede {
  margin-top: var(--irr-flow);
}
.irr-page--static .irr-group .irr-btn {
  margin-top: 24px;
}
@media (max-width: 599.98px) {
  .irr-page--static .irr-group .irr-btn--out,
  .irr-page--static .irr-rows .irr-btn--out,
  .irr-page--static .irr-close .irr-btn {
    width: 100%;
  }
}
@media (min-width: 1024px) {
  .irr-page--static .irr-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--irr-gap);
    align-items: first baseline;
    padding-top: 0;
  }
  .irr-page--static .irr-group__head {
    grid-column: 1;
    padding-top: var(--irr-rule-pad);
  }
  .irr-page--static .irr-group__body {
    grid-column: 2 / 5;
    margin-top: 0;
    padding-top: var(--irr-rule-pad);
  }
}

/* ---------- 6. Ledger ---------- */
/* Term and value rows (the curriculum): 1 px rules between rows and under the last. On phones the
   term stands over its value. From 768 px three columns: the term in the first, the value in the
   other two; inside a group from 1024 px those are page columns 2, 3 and 4, so the value starts
   on the line of column 3 and ends on the content edge. Its text keeps to the measure, so from
   about 1690 px, where two columns are wider than 36 reading sizes, it stops short of the edge
   (87 characters a line at 1920 px otherwise). */
.irr-page--static .irr-ledger__row {
  padding: 14px 0 16px;
  border-top: 1px solid currentColor;
}
.irr-page--static .irr-ledger__row:last-child {
  border-bottom: 1px solid currentColor;
}
.irr-page--static .irr-ledger dt {
  font-size: var(--irr-fs-read);
  font-weight: 700;
  line-height: 1.3;
}
.irr-page--static .irr-ledger dd {
  max-width: var(--irr-measure);
  margin-top: 4px;
  font-size: var(--irr-fs-read);
  line-height: 1.5;
}
@media (min-width: 768px) {
  .irr-page--static .irr-ledger__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--irr-gap);
    align-items: first baseline;
    padding: 16px 0 18px;
  }
  .irr-page--static .irr-ledger dd {
    grid-column: 2 / 4;
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  .irr-page--static .irr-ledger__row:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- 7. Items ---------- */
/* The Consulta items: a Title SM heading and short lines (an address, the hours), on white and on
   black. A line that holds a phone or e-mail link is a 48 px row of its own, so two link areas
   never overlap. Three columns from 768 px: inside a group from 1024 px, page columns 2, 3, 4. */
.irr-page--static .irr-items {
  display: grid;
  gap: 28px var(--irr-gap);
}
.irr-page--static .irr-items > li {
  padding-top: 20px;
  border-top: 1px solid currentColor;
}
.irr-page--static .irr-items h3 {
  font-size: var(--irr-fs-h3-sm);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.irr-page--static .irr-items h3 + p {
  margin-top: 12px;
}
.irr-page--static .irr-items p {
  font-size: var(--irr-fs-read);
  line-height: 1.5;
}
.irr-page--static .irr-items .irr-items__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.35em;
  min-height: 48px;
}
.irr-page--static .irr-items .irr-items__line a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
}
.irr-page--static .irr-items h3 + .irr-items__line {
  margin-top: 2px;
}
@media (min-width: 768px) {
  .irr-page--static .irr-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .irr-page--static .irr-group .irr-items > li {
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- 8. Rows and the column button (Sobre) ---------- */
/* The physician rows of the homepage on white: title, text, outline button. From 1024 px the
   title in column 1, the text on columns 2 and 3 at the measure, the button filling column 4
   (label flush left, the arrow at the right edge). The label is on one line wherever it fits:
   from 1440 px, where the column holds the longest label ("Ver endereço e horários", 215 px)
   with room to spare, 56 px tall as every other button; from 1024 to 1439 px, where it does
   not fit, on two fixed lines, 76 px. 3 px rule above the first row, 1 px between rows and
   under the last. */
.irr-page--static .irr-rows {
  border-bottom: 1px solid currentColor;
}
.irr-page--static .irr-rows > li {
  display: grid;
  gap: 12px var(--irr-gap);
  padding: 24px 0 32px;
  border-top: 1px solid currentColor;
}
.irr-page--static .irr-rows > li:first-child {
  border-top-width: 3px;
}
.irr-page--static .irr-rows h2 {
  font-size: var(--irr-fs-h3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.irr-page--static .irr-rows__text p {
  max-width: var(--irr-measure);
  font-size: var(--irr-fs-read);
  line-height: var(--irr-lh-read);
}
.irr-page--static .irr-rows__text p + p {
  margin-top: var(--irr-flow);
}
.irr-page--static .irr-rows .irr-btn {
  justify-self: start;
  margin-top: 12px;
}
@media (min-width: 1024px) {
  .irr-page--static .irr-rows > li {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    padding: var(--irr-row-pad) 0 var(--irr-row-pad-end);
  }
  .irr-page--static .irr-rows h2 {
    grid-column: 1;
  }
  .irr-page--static .irr-rows .irr-rows__text {
    grid-column: 2 / 4;
  }
  .irr-page--static .irr-rows .irr-btn {
    grid-column: 4;
    justify-self: stretch;
    margin-top: 0;
  }
  .irr-page--static .irr-btn--col {
    display: flex;
    width: 100%;
    min-height: 76px;
    padding: 14px 16px 14px 18px;
    text-align: left;
  }
  .irr-page--static .irr-btn--col .irr-btn__label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-wrap: wrap;
  }
  .irr-page--static .irr-btn--col svg {
    flex: none;
    margin-left: 0;
  }
  .irr-page--static .irr-btn--col .irr-btn__br {
    display: inline;
  }
}
@media (min-width: 1024px) and (max-width: 1151.98px) {
  .irr-page--static .irr-btn--col {
    padding-inline: 10px;
  }
  .irr-page--static .irr-btn--col .irr-btn__label {
    gap: 8px;
  }
}
/* Only the fixed break is taken out: with a wider fallback font the label wraps by itself and
   the button grows, it never runs under the arrow. */
@media (min-width: 1440px) {
  .irr-page--static .irr-btn--col {
    min-height: 56px;
  }
  .irr-page--static .irr-btn--col .irr-btn__br {
    display: none;
  }
}

/* ---------- 9. Photograph band (the profile, black) ---------- */
/* Two teaching photographs directly under "Ensino e pesquisa": two 3:2 frames side by side from
   768 px, each on two page columns; stacked on phones. Captions Gray on Black. */
.irr-page--static .irr-band {
  --irr-focus: var(--irr-guides);
  padding: max(56px, var(--irr-step-96)) 0 max(64px, var(--irr-step-104));
  background: var(--irr-black);
  color: var(--irr-white);
}
.irr-page--static .irr-band figcaption {
  color: var(--irr-gray);
}
.irr-page--static .irr-pair {
  display: grid;
  gap: 32px var(--irr-gap);
}
.irr-page--static .irr-pair img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.irr-page--static .irr-pair img.irr-pos-top {
  object-position: 50% 0%;
}
@media (min-width: 768px) {
  .irr-page--static .irr-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- 10. Closing section and its rings (the profile, black) ---------- */
/* "Onde atende": the items on two thirds of the group body (page columns 2 and 3 from 1024 px),
   the working photograph in the last third (column 4); on phones the items first. Then the ring
   band with the booking cluster inside the innermost ring, centred (the one place centred text
   is allowed), and a gray hairline above the footer. The rings are one CSS background, white
   only: sixteen circles, stroke 16 down to 1, never an inline svg and never under text. */
.irr-page--static .irr-pbody--black {
  --irr-focus: var(--irr-guides);
  --irr-btn-hover-bg: var(--irr-white);
  --irr-btn-hover-fg: var(--irr-black);
  padding-bottom: 0;
  background: var(--irr-black);
  color: var(--irr-white);
}
.irr-page--static .irr-pbody--black figcaption {
  color: var(--irr-gray);
}
.irr-page--static .irr-where {
  display: grid;
  gap: 40px var(--irr-gap);
}
.irr-page--static .irr-where .irr-items {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.irr-page--static .irr-where .irr-items > li {
  padding: 20px 0 24px;
  border-top: 1px solid currentColor;
}
.irr-page--static .irr-where .irr-items > li:last-child {
  border-bottom: 1px solid currentColor;
}
.irr-page--static .irr-where .irr-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 60%;
}
@media (min-width: 768px) {
  .irr-page--static .irr-where {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .irr-page--static .irr-where .irr-items {
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .irr-page--static .irr-where .irr-figure {
    grid-column: 3;
    grid-row: 1;
  }
}
@media (min-width: 1024px) {
  .irr-page--static .irr-group .irr-where .irr-items > li {
    padding: var(--irr-rule-pad) 0 calc(var(--irr-rule-pad) * 1.25);
    border-top: 1px solid currentColor;
  }
  .irr-page--static .irr-group .irr-where .irr-items > li:first-child {
    padding-top: 0;
    border-top: 0;
  }
}
.irr-page--static .irr-close {
  position: relative;
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  align-content: center;
  gap: 12px;
  height: min(640px, clamp(400px, 33.333vw, 480px) + var(--irr-over) * 0.33333);
  margin-top: max(56px, var(--irr-step-96));
  overflow: hidden;
  text-align: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice' fill='none' stroke='%23fafafa'%3E%3Ccircle cx='720' cy='300' r='316' stroke-width='16'/%3E%3Ccircle cx='720' cy='300' r='356' stroke-width='15'/%3E%3Ccircle cx='720' cy='300' r='394' stroke-width='14'/%3E%3Ccircle cx='720' cy='300' r='430' stroke-width='13'/%3E%3Ccircle cx='720' cy='300' r='464' stroke-width='12'/%3E%3Ccircle cx='720' cy='300' r='496' stroke-width='11'/%3E%3Ccircle cx='720' cy='300' r='526' stroke-width='10'/%3E%3Ccircle cx='720' cy='300' r='554' stroke-width='9'/%3E%3Ccircle cx='720' cy='300' r='580' stroke-width='8'/%3E%3Ccircle cx='720' cy='300' r='604' stroke-width='7'/%3E%3Ccircle cx='720' cy='300' r='626' stroke-width='6'/%3E%3Ccircle cx='720' cy='300' r='646' stroke-width='5'/%3E%3Ccircle cx='720' cy='300' r='664' stroke-width='4'/%3E%3Ccircle cx='720' cy='300' r='680' stroke-width='3'/%3E%3Ccircle cx='720' cy='300' r='694' stroke-width='2'/%3E%3Ccircle cx='720' cy='300' r='706' stroke-width='1'/%3E%3C/svg%3E") center / cover no-repeat;
}
.irr-page--static .irr-close .irr-tel {
  justify-self: center;
  font-size: clamp(26px, 2.222vw, 32px);
  letter-spacing: -0.01em;
}
.irr-page--static .irr-endrule {
  width: min(var(--irr-max), 100% - 2 * var(--irr-gutter));
  margin: 0 auto;
  border-top: 1px solid var(--irr-gray);
}

/* ---------- 11. Booking strip ---------- */
/* The article's booking band (irradiada-article.css, section 8), restated as written there: a
   black block on the four columns inside the white field, the line, the solid button, the phone.
   On Sobre and Contato it stands one section step under the last row. */
.irr .irr-abook {
  --irr-focus: var(--irr-guides);
  display: grid;
  gap: 24px var(--irr-gap);
  width: min(var(--irr-max), 100% - 2 * var(--irr-gutter));
  margin: 0 auto max(64px, var(--irr-step-104));
  padding: 28px 18px 24px;
  background: var(--irr-black);
  color: var(--irr-white);
}
.irr .irr-abook__line {
  font-size: var(--irr-fs-h3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: wrap;
}
.irr .irr-abook__actions {
  display: grid;
  gap: 8px;
}
/* The phone number is a hit area of its own. */
.irr .irr-abook__tel {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  min-height: 48px;
  font-size: 24px;
  font-weight: 800;
  text-decoration: none;
}
.irr .irr-abook__tel:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
/* Narrow phones: a button gives up side padding before its label takes a second line, and the
   physician's name may wrap (with a reader's text spacing it is wider than a 320 px window). */
@media (max-width: 599.98px) {
  .irr .irr-abook .irr-nowrap {
    white-space: normal;
  }
}
@media (max-width: 359.98px) {
  .irr .irr-abook {
    padding-inline: 12px;
  }
}
@media (min-width: 360px) and (max-width: 379.98px) {
  .irr .irr-abook .irr-btn--solid {
    padding-inline: 28px;
  }
}
@media (min-width: 600px) {
  .irr .irr-abook {
    padding: clamp(32px, 3.889vw, 56px);
  }
  .irr .irr-abook__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
  }
}
@media (min-width: 1024px) {
  .irr .irr-abook {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}
@media (min-width: 1280px) {
  .irr .irr-abook {
    grid-template-columns: repeat(4, var(--irr-col));
    width: calc(min(var(--irr-max), 100% - 2 * var(--irr-gutter)) + 2 * var(--irr-field-bleed));
    padding-inline: var(--irr-field-bleed);
  }
  .irr .irr-abook__line {
    grid-column: 1 / 3;
  }
  .irr .irr-abook__actions {
    display: grid;
    grid-column: 3 / -1;
    grid-template-columns: repeat(2, var(--irr-col));
    column-gap: var(--irr-gap);
  }
  .irr .irr-abook__actions > .irr-btn {
    justify-self: stretch;
    padding-inline: 16px;
  }
}
/* The step between the last row and the strip (the article has it as the padding of its text). */
.irr-page--static .irr-pbody--end + .irr-abook {
  margin-top: max(64px, var(--irr-step-104));
}

/* ---------- 12. Browser surfaces ---------- */
/* Selection: the frame's amber with black text on white, black and cobalt. Focus: the frame's
   3 px ring at 4 px, black on white (the root's token), amber on black and cobalt (set on the
   lead, the band, the closing and the strip; amber on cobalt measures 3.96:1). Nothing moves but
   the frame's button and link transitions. Forced colours and print are checked on the installed
   pages by capture-static.cjs (its keyboard, forced and print passes). */
@media (forced-colors: active) {
  .irr-page--static .irr-close {
    background-image: none;
  }
  .irr-page--static .irr-lead,
  .irr-page--static .irr-band,
  .irr-page--static .irr-pbody--black,
  .irr-page--static .irr-abook {
    border-top: 3px solid CanvasText;
  }
}
@media print {
  .irr-page--static .irr-lead,
  .irr-page--static .irr-band,
  .irr-page--static .irr-pbody--black,
  .irr-page--static .irr-abook {
    border-top: 3px solid var(--irr-black);
    background: none;
    color: var(--irr-black);
  }
  .irr-page--static .irr-lead figcaption,
  .irr-page--static .irr-band figcaption,
  .irr-page--static .irr-pbody--black figcaption {
    color: var(--irr-black);
  }
  .irr-page--static .irr-close {
    height: auto;
    padding-block: 24px;
    background-image: none;
  }
  .irr-page--static .irr-abook {
    padding-inline: 0;
  }
  .irr-page--static .irr-btn--solid {
    border-color: var(--irr-black);
  }
  /* On paper a photograph is 110 mm wide, not the sheet, and the lead's keeps the whole 3:2
     frame: a sheet-wide 4:5 portrait does not fit under the text before it and leaves half a
     sheet empty. A photograph never parts from its caption. */
  .irr-page--static figure {
    max-width: 110mm;
    break-inside: avoid;
  }
  /* A heading stays on the sheet of the text it names; a row or an item is not cut in two. */
  .irr-page--static :is(h2, h3) {
    break-after: avoid;
  }
  .irr-page--static :is(.irr-ledger__row, .irr-items > li, .irr-rows > li) {
    break-inside: avoid;
  }
  .irr-page--static .irr-lead__media img,
  .irr-page--static .irr-lead__media--portrait img,
  .irr-page--static .irr-lead__media--street img {
    aspect-ratio: 3 / 2;
  }
}

/* ---------- 13. Sobre: the lead's title, numbered chapters, photograph bands ---------- */
/* Owner approval of 2026-10-07 (design 08-C, with "improve white spacing: no breathing room
   between sections"). The lead is the lead of section 3 with the site's name on three lines in
   the headline size. Then five chapters: a number in column 1 from 1280 px, the heading and the body on
   columns 2 to 4; above and below each chapter the section padding of the homepage
   (--irr-pad-top, --irr-pad-bot). One photograph runs the full width, before "Aulas". The term
   rows are the ledger of section 6. One posed picture on the page: the lead's. */
.irr-page--about .irr-lead__title {
  font-size: min(124px, clamp(44px, 8.06vw, 116px) + var(--irr-over) * 0.04);
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.irr-page--about .irr-lead__site,
.irr-page--about .irr-lead__tld {
  display: block;
}
.irr-page--about .irr-lead__tld {
  font-weight: 400;
  color: var(--irr-gray);
}
.irr-page--about .irr-lead__media--stair img {
  object-position: 60% 40%;
}
@media (min-width: 768px) {
  .irr-page--about .irr-lead__title {
    margin-top: -0.12em;
  }
}
.irr-page--about .irr-chap {
  --irr-btn-hover-bg: var(--irr-black);
  --irr-btn-hover-fg: var(--irr-white);
  padding: var(--irr-pad-top) 0 var(--irr-pad-bot);
}
/* A chapter title is an address (the site header's "A clínica" leads to /sobre/#clinica): the
   title stops 48 px under the top of the window, not against it. */
.irr-page--about .irr-chap__title {
  scroll-margin-top: 48px;
}
.irr-page--about .irr-chap--black {
  --irr-focus: var(--irr-guides);
  --irr-btn-hover-bg: var(--irr-white);
  --irr-btn-hover-fg: var(--irr-black);
  background: var(--irr-black);
  color: var(--irr-white);
}
.irr-page--about .irr-chap--yellow {
  background: var(--irr-guides);
}
.irr-page--about .irr-chap__grid {
  display: grid;
  gap: 20px var(--irr-gap);
}
/* Two white chapters in a row: the second opens with the 3 px rule of a group, the section
   padding under it. */
.irr-page--about .irr-chap--rule {
  padding-top: 0;
}
.irr-page--about .irr-chap--rule .irr-chap__grid {
  padding-top: var(--irr-pad-top);
  border-top: 3px solid currentColor;
}
.irr-page--about .irr-chap__num {
  font-size: min(232px, clamp(72px, 14.58vw, 210px) + var(--irr-over) * 0.1);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.06em;
}
.irr-page--about .irr-chap--black .irr-chap__num {
  color: var(--irr-guides);
}
.irr-page--about .irr-chap__title {
  font-size: min(124px, clamp(40px, 7.78vw, 112px) + var(--irr-over) * 0.06);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.irr-page--about .irr-chap__lede {
  max-width: calc(var(--irr-fs-lede) * 36);
  margin-top: var(--irr-step-64);
  font-size: var(--irr-fs-lede);
  line-height: 1.5;
}
.irr-page--about .irr-chap .irr-ledger {
  margin-top: var(--irr-step-64);
}
.irr-page--about .irr-chap .irr-btn {
  margin-top: max(32px, var(--irr-step-64));
}
.irr-page--about .irr-chap--black figcaption,
.irr-page--about .irr-wide figcaption {
  color: var(--irr-gray);
}
.irr-page--about .irr-chap--yellow figcaption {
  color: var(--irr-black);
}
/* Photographs of a chapter: rows of two or three, the rows 24 px apart. One column on phones. */
.irr-page--about .irr-figs {
  display: grid;
  gap: 24px 16px;
  margin-top: var(--irr-step-72);
}
.irr-page--about .irr-figs + .irr-figs {
  margin-top: 24px;
}
.irr-page--about .irr-figs img,
.irr-page--about .irr-chap__fig img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.irr-page--about .irr-figs__low img {
  object-position: 50% 70%;
}
.irr-page--about .irr-figs__high img {
  object-position: 50% 35%;
}
/* "Livros e pesquisa": the photograph of the book stands under the chapter number in column 1
   from 1280 px, so the ledger keeps the page columns (terms in column 2, values from column 3). */
.irr-page--about .irr-chap__fig {
  max-width: 420px;
  margin-top: var(--irr-step-72);
}
.irr-page--about .irr-chap__fig img {
  aspect-ratio: 4 / 5;
  object-position: 50% 28%;
}
/* The photograph on the full width before "Aulas" (a 4480 px source), on black. */
.irr-page--about .irr-wide {
  background: var(--irr-black);
}
.irr-page--about .irr-wide img {
  display: block;
  width: 100%;
  height: clamp(240px, 38.9vw, 640px);
  object-fit: cover;
  object-position: 50% 40%;
}
.irr-page--about .irr-chap + .irr-pbody {
  padding-top: max(72px, var(--irr-step-136));
}
@media (max-width: 599.98px) {
  .irr-page--about .irr-chap .irr-btn--out {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .irr-page--about .irr-figs--wide {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .irr-page--about .irr-figs--narrow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
  .irr-page--about .irr-figs--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .irr-page--about .irr-figs--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .irr-page--about .irr-figs--wide img,
  .irr-page--about .irr-figs--narrow img {
    aspect-ratio: auto;
    height: clamp(260px, 30.56vw, 500px);
  }
  .irr-page--about .irr-figs--short img {
    height: clamp(180px, 20.14vw, 330px);
  }
  .irr-page--about .irr-figs--three img {
    aspect-ratio: auto;
    height: clamp(150px, 16.4vw, 270px);
  }
  /* One photograph on the whole body (the atrium, a 1600 px source: never wider than columns
     2 to 4, owner decision 7). */
  .irr-page--about .irr-figs--one img {
    aspect-ratio: auto;
    height: clamp(220px, 34.7vw, 560px);
    object-position: 50% 55%;
  }
  .irr-page--about .irr-figs--two img {
    aspect-ratio: auto;
    height: clamp(200px, 22.2vw, 360px);
  }
}
@media (min-width: 1280px) {
  .irr-page--about .irr-chap__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
  .irr-page--about .irr-chap__num {
    grid-column: 1;
    margin-left: -0.04em;
  }
  .irr-page--about .irr-chap__body {
    grid-column: 2 / 5;
  }
  .irr-page--about .irr-chap--aside .irr-chap__body {
    display: contents;
  }
  .irr-page--about .irr-chap--aside .irr-chap__title,
  .irr-page--about .irr-chap--aside .irr-ledger,
  .irr-page--about .irr-chap--aside .irr-btn {
    grid-column: 2 / 5;
  }
  .irr-page--about .irr-chap--aside .irr-chap__title {
    grid-row: 1;
  }
  .irr-page--about .irr-chap--aside .irr-ledger {
    grid-row: 2;
  }
  .irr-page--about .irr-chap--aside .irr-btn {
    grid-row: 3;
    justify-self: start;
  }
  .irr-page--about .irr-chap--aside .irr-chap__fig {
    grid-column: 1;
    grid-row: 2 / 4;
    max-width: none;
    margin-top: var(--irr-step-64);
  }
}

/* Forced colours and paper: the black and the amber fields become white with a rule, as the
   lead and the strip do (section 12). */
@media (forced-colors: active) {
  .irr-page--about .irr-chap--black,
  .irr-page--about .irr-chap--yellow,
  .irr-page--about .irr-wide {
    border-top: 3px solid CanvasText;
  }
}
@media print {
  .irr-page--about .irr-chap--black,
  .irr-page--about .irr-chap--yellow,
  .irr-page--about .irr-wide {
    border-top: 3px solid var(--irr-black);
    background: none;
    color: var(--irr-black);
  }
  .irr-page--about .irr-chap--black .irr-chap__num,
  .irr-page--about .irr-chap--black figcaption,
  .irr-page--about .irr-wide figcaption,
  .irr-page--about .irr-lead__tld {
    color: var(--irr-black);
  }
  .irr-page--about .irr-wide img,
  .irr-page--about .irr-figs img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}
