/* About, Contact and 404 only. Shared components are in site.css; the rules for them are in DESIGN-SYSTEM.md.
   body.page-about, body.page-contact and body.page-404 scope what belongs to one page. */

/* ---------- 1. Page intro (all three pages): H1, then its paragraphs ---------- */
.intro__grid > * { grid-column: 1 / span 7; }
.intro__grid > h1 { grid-column: 1 / span 10; }
.intro__grid > .intro__p { margin-top: var(--s-6); }
.intro__grid > .intro__p + .intro__p { margin-top: var(--s-5); }
.page-contact .intro__grid > * { grid-column: 1 / span 8; }
/* below 1280 the About H1 would break into three lines inside ten columns: give it the full width */
@media (max-width: 1279.98px) { .intro__grid > h1 { grid-column: 1 / -1; } }
@media (max-width: 1099.98px) { .intro__grid > * { grid-column: 1 / -1; } }
@media (max-width: 899.98px) { .intro__grid > *, .intro__grid > h1, .page-contact .intro__grid > * { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .intro__grid > .intro__p { margin-top: var(--s-5); } .intro__grid > .intro__p + .intro__p { margin-top: var(--s-4); } }

/* ---------- 2. About ---------- */
.about-what__lead { margin-top: var(--s-5); }
.about-what .rows, .about-ways .rows { margin-top: var(--s-8); }
.about-ways__note { margin-top: var(--s-5); max-width: 34em; }
@media (max-width: 699.98px) { .about-what .rows, .about-ways .rows { margin-top: var(--s-7); } }

/* Team: the phone pattern at every width (critique, 14 Nov). Each entry is a small portrait (4:5, greyscale) with the
   name and role line beside its foot, and the bio under both. Two entries a row from 700 px, one below. The
   portraits stay small (176 px wide at 1100 px and up, 152 px from 700, 40% of the entry on phones), so the 400 px
   source files are never blown up and the six differently made photos read as a set.
   Every head is the same size: each photo is placed in its frame (--w width, --x left, --y top, as % of the frame;
   set on the frame in about.html) so that in all six the eyes sit 41% down the frame, eye to chin is 34% of its
   height and the face is centred. The values come from measuring eyes, chin and face centre on each source photo. */
.team__lead { margin-top: var(--s-5); }
.team__grid { list-style: none; margin-top: var(--s-8); row-gap: var(--s-8); --portrait: 176px; }
.team__item {
  grid-column: span 6; display: grid; grid-template-columns: var(--portrait) minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: var(--s-5); align-items: end; align-content: start;
}
.team__item .frame { grid-column: 1; grid-row: 1; }
.team__id { grid-column: 2; grid-row: 1; }
.team__role { margin-top: var(--s-1); }
.team__bio { grid-column: 1 / -1; grid-row: 2; margin-top: var(--s-5); max-width: 32em; }   /* a clear gap between two bios side by side */
.team .frame--portrait > picture { position: absolute; inset: 0; width: auto; height: auto; }
.team .frame--portrait img {
  position: absolute; max-width: none; height: auto; object-fit: fill;
  width: var(--w); left: var(--x); top: var(--y);
}
@media (max-width: 1099.98px) { .team__grid { --portrait: 152px; } }
@media (max-width: 699.98px) {
  .team__grid { margin-top: var(--s-7); row-gap: var(--s-7); --portrait: 40%; }
  .team__item { grid-column: 1 / -1; column-gap: var(--s-4); }
  .team__bio { margin-top: var(--s-4); }
}

/* ---------- 3. Contact ---------- */
.contact__blocks { margin-top: var(--s-8); grid-template-rows: repeat(4, auto); }
/* Three blocks of four columns. Subgrid rows line the buttons, links and notes up across the three. */
.contact__block {
  grid-column: span 4; grid-row: span 4;
  display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start;
  border-top: 1px solid var(--hairline); padding-top: var(--s-5);
}
.contact__block > :nth-child(2) { margin-top: var(--s-3); }
.contact__block > :nth-child(3) { margin-top: var(--s-5); }
.contact__block > :nth-child(4) { margin-top: var(--s-4); }
.contact__block .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.contact__block p, .contact__addr { text-wrap: pretty; }
.contact__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); min-height: 48px; }
.contact__note { margin-top: var(--s-3); max-width: 26em; }
.contact__addr { font-style: normal; }
.contact__email a { overflow-wrap: anywhere; }
.contact__status { min-height: var(--lh-small); color: var(--ink); font-weight: 600; }
html:not(.js) .js-only { display: none !important; }
html:not(.js) .contact__maps { min-height: 0; margin-top: var(--s-4); }   /* no buttons: line up with the scheduler link */
@media (max-width: 899.98px) {
  .contact__blocks { grid-template-rows: none; row-gap: var(--s-7); }
  .contact__block { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; display: block; }
  .contact__spacer { display: none; }
  /* one column: "Copied." sits beside its button instead of on a reserved line under it */
  .contact__block--email { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); align-items: center; }
  .contact__block--email > :nth-child(-n + 2) { grid-column: 1 / -1; }
  .contact__block--email > .contact__status { margin-top: var(--s-5); }
  .contact__maps { margin-top: var(--s-2) !important; }
}
@media (max-width: 699.98px) { .contact__blocks { margin-top: var(--s-7); } }

/* The scheduler panel: empty and hidden until "Show available times"; then Calendly's page fills it. */
.cal { margin-top: var(--s-8); height: 700px; border: 1px solid var(--hairline); background: var(--paper); }
.cal[hidden] { display: none; }
.cal iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 699.98px) { .cal { margin-top: var(--s-7); } }

/* What happens next: three numbered steps */
.steps { list-style: none; margin-top: var(--s-8); row-gap: var(--s-6); }
.steps > li { grid-column: span 4; }
.steps__n { display: block; color: var(--grey); font-variant-numeric: tabular-nums; }
.steps__t { margin-top: var(--s-3); max-width: 34em; }
@media (max-width: 899.98px) {
  .steps { margin-top: var(--s-7); }
  .steps > li { grid-column: 1 / -1; display: grid; grid-template-columns: var(--s-7) minmax(0, 1fr); align-items: baseline; }
  .steps__t { margin-top: 0; }
}

/* ---------- 4. 404: the message fills most of the first screen, the footer shows under it ---------- */
.page-404 .intro { display: flex; align-items: center; min-height: calc(100vh - var(--header-h) - 200px); min-height: calc(100svh - var(--header-h) - 200px); }
.nf__actions { margin-top: var(--s-7); }
@media (max-width: 767.98px) { .nf__actions { margin-top: var(--s-6); } }

/* ---------- 5. Print ---------- */
@media print {
  .page-404 .intro { min-height: 0; }
  .cal, .contact__action, .contact__status { display: none !important; }
  .page-contact h1, .page-404 h1 { font-size: 26pt; line-height: 1.1; }
  .page-contact h2:not(.h3) { font-size: 16pt; line-height: 1.2; }
  .page-contact .h3 { font-size: 12pt; }
  .page-contact .lead, .page-404 .lead { font-size: 11pt; line-height: 1.4; }
  .page-contact .intro__grid > .intro__p { margin-top: 8pt; }
  .page-contact .contact__blocks { margin-top: 14pt; row-gap: 12pt; }
  .page-contact .steps { margin-top: 10pt; }

  /* About prints as a one-page capabilities sheet: intro, disciplines, ways to work, the six names with their
     role lines (no portraits, no bios), and the contact line from the footer. */
  .page-about { font-size: 9pt; line-height: 1.35; }
  .page-about .site-header { padding-bottom: 8pt; }
  .page-about .logo { min-height: 0; }
  .page-about .logo img { height: 13pt; }
  .page-about h1 { font-size: 19pt; line-height: 1.1; letter-spacing: -.02em; }
  .page-about h2 { font-size: 12.5pt; line-height: 1.2; letter-spacing: -.01em; }
  .page-about h3, .page-about .h3 { font-size: 9.5pt; line-height: 1.3; letter-spacing: 0; }
  .page-about .lead { font-size: 9.5pt; line-height: 1.35; max-width: none; }
  .page-about .section { padding-block: 0 10pt; }
  .page-about .intro { padding-block: 2pt 12pt; }
  .page-about .intro__grid > * { grid-column: 1 / -1; }
  .page-about .intro__grid > .intro__p { margin-top: 4pt; }
  .page-about .intro__grid > .intro__p + .intro__p { margin-top: 2pt; }
  .page-about .sh { padding-top: 6pt; }
  .page-about .sh__label { font-size: 7.5pt; line-height: 1.2; margin-bottom: 1pt; color: #444; }
  .page-about .about-what__lead, .page-about .team__lead { margin-top: 2pt; font-size: 9pt; }
  .page-about .about-what .rows, .page-about .about-ways .rows { margin-top: 6pt; border-color: #ccc; }
  .page-about .row { display: grid; grid-template-columns: 22% minmax(0, 1fr); column-gap: 10pt; padding-block: 3pt; border-color: #ccc; }
  .page-about .row__name { grid-column: 1; margin: 0; }
  .page-about .row__text { grid-column: 2; max-width: none; font-size: 8.5pt; line-height: 1.3; }
  .page-about .about-ways__note { margin-top: 4pt; max-width: none; font-size: 8.5pt; }
  .page-about .team .frame, .page-about .team__bio { display: none !important; }
  .page-about .team__grid { margin-top: 6pt; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 4pt; column-gap: 10pt; }
  .page-about .team__item { grid-column: auto; grid-row: auto; display: block; padding: 0; }
  .page-about .team__id { padding-top: 0; }
  .page-about .team__role { margin-top: 0; font-size: 8.5pt; line-height: 1.3; color: #444; }
  .page-about .site-footer > .container { padding-top: 6pt; }
}