/* The frame every imported page wears (pages/standard_page.html; the words
 * are the page's own, read out by pages/frame.py). Loaded by that template
 * only.
 *
 * THE DESIGN'S INTERNAL PAGE, without what these pages do not have: the dark
 * hero of Products.dc.html, Industries.dc.html, Technology.dc.html and the
 * practice pages (Tech - Swift.dc.html, the approved template), with no
 * context bar (these pages have no sections to list), no spec tiles and no
 * visual, so the copy column stands alone on the page grid; the 3px rule;
 * the body in the article's own type (article.css, .ed-art__body) on the
 * light ground of the design's first section after a hero; then the
 * closing slab and the footer (base.html). One light and dark rhythm, as on
 * every page (HANDOFF.md, "Light and dark"; the owner, 28 September).
 *
 * EVERY VALUE IS A TOKEN, the way layout.css has it: no hex here, and every
 * --ed-* read is defined in tokens.css (pages/tests_frame.py holds the file
 * to both). The few plain numbers are the design's hero geometry, drawn once.
 */

/* ---- The page's accent -------------------------------------------------
 * A class on <body> (StandardPage.accent_key): the page's practice pair
 * where the design ties it to one, else the brand's (design/claude-design/
 * latest/CLAUDE.md, "Every practice color has two shades"; HANDOFF.md,
 * "Colour roles on internal pages"). Practice colour is wayfinding only:
 * the hero's top glow, its eyebrow and the eyebrow's bar on dark; the
 * body's links and marks on light. Never a pill, the closing slab, the
 * 3px rule, the header or the focus ring, which stay the brand's.
 *
 *   --pc-glow             the hero's top glow, a triplet (the dark shade's)
 *   --pc-ink-dark         the dark shade: the end of the eyebrow's bar
 *   --pc-eyebrow          the eyebrow's words on the hero
 *   --pc-ink-light        a link in the body (brand: purple, as everywhere)
 *   --pc-ink-light-hover  its hover (a practice's over-glow shade)
 *   --pc-mark-light       the body's marks: the FAQ's rule and numbers
 *                         (brand: magenta, as in an article)
 *
 * THE EYEBROW'S WORDS ARE THE DARK SHADE, EXCEPT WEB & CLOUD'S AND AI'S.
 * Small text passes 4.5:1 (CLAUDE.md): over the page's own glow #1884FF
 * falls to 4.13:1 and #C34CFF to 4.15:1 at its brightest, and a kicker long
 * enough to wrap reaches it on a phone (measured in Chrome: /ai/ 4.19:1,
 * /cloud-development/ 4.32:1). Those two take the neutral #C8C8D0, 7.92:1
 * or better, and keep their colour in the bar and the glow; the other five
 * hold 4.66:1 or better even with both glows at full strength under them,
 * which no point of the hero reaches (pages/tests_frame.py; BASELINE.md §5).
 *
 * Six practices, so a page tied to any of them takes its pair; each
 * practice's shades are measured where tokens.css declares them. */
.ed-accent--brand {
  --pc-glow: var(--ed-purple-on-dark-glow);
  --pc-ink-dark: var(--ed-purple-on-dark);
  --pc-eyebrow: var(--ed-purple-on-dark);
  --pc-ink-light: var(--ed-link);
  --pc-ink-light-hover: var(--ed-link-hover);
  --pc-mark-light: var(--ed-magenta);
}
.ed-accent--web {
  --pc-glow: var(--ed-practice-web-dark-glow);
  --pc-ink-dark: var(--ed-practice-web-on-dark);
  --pc-eyebrow: var(--ed-label-on-dark);
  --pc-ink-light: var(--ed-practice-web-on-light);
  --pc-ink-light-hover: var(--ed-practice-web-over-glow);
  --pc-mark-light: var(--ed-practice-web-on-light);
}
.ed-accent--ai {
  --pc-glow: var(--ed-practice-ai-dark-glow);
  --pc-ink-dark: var(--ed-practice-ai-on-dark);
  --pc-eyebrow: var(--ed-label-on-dark);
  --pc-ink-light: var(--ed-practice-ai-on-light);
  --pc-ink-light-hover: var(--ed-practice-ai-over-glow);
  --pc-mark-light: var(--ed-practice-ai-on-light);
}
.ed-accent--mobile {
  --pc-glow: var(--ed-practice-mobile-dark-glow);
  --pc-ink-dark: var(--ed-practice-mobile-on-dark);
  --pc-eyebrow: var(--ed-practice-mobile-on-dark);
  --pc-ink-light: var(--ed-practice-mobile-on-light);
  --pc-ink-light-hover: var(--ed-practice-mobile-over-glow);
  --pc-mark-light: var(--ed-practice-mobile-on-light);
}
.ed-accent--data {
  --pc-glow: var(--ed-practice-data-dark-glow);
  --pc-ink-dark: var(--ed-practice-data-on-dark);
  --pc-eyebrow: var(--ed-practice-data-on-dark);
  --pc-ink-light: var(--ed-practice-data-on-light);
  --pc-ink-light-hover: var(--ed-practice-data-over-glow);
  --pc-mark-light: var(--ed-practice-data-on-light);
}
.ed-accent--growth {
  --pc-glow: var(--ed-practice-growth-dark-glow);
  --pc-ink-dark: var(--ed-practice-growth-on-dark);
  --pc-eyebrow: var(--ed-practice-growth-on-dark);
  --pc-ink-light: var(--ed-practice-growth-on-light);
  --pc-ink-light-hover: var(--ed-practice-growth-over-glow);
  --pc-mark-light: var(--ed-practice-growth-on-light);
}
.ed-accent--design {
  --pc-glow: var(--ed-practice-design-dark-glow);
  --pc-ink-dark: var(--ed-practice-design-on-dark);
  --pc-eyebrow: var(--ed-practice-design-on-dark);
  --pc-ink-light: var(--ed-practice-design-on-light);
  --pc-ink-light-hover: var(--ed-practice-design-over-glow);
  --pc-mark-light: var(--ed-practice-design-on-light);
}

/* ---- The hero band -----------------------------------------------------
 * As drawn: #0A0910 under the page's colour glowing from the top end
 * (56% 80% at 90% 18%) and brand magenta from below (46% 70% at 64% 104%);
 * 36-72px above the copy and 56-96px below it; a column at most 640px wide
 * whose parts stand 22px apart. The focus ring is the neutral, as on the
 * slabs: in the glow, brand magenta falls under 3:1. */
.ed-pagehero {
  --ed-focus: var(--ed-label-on-dark);
  background:
    radial-gradient(56% 80% at 90% 18%, rgb(var(--pc-glow) / var(--ed-pagehero-glow)) 0%, rgb(var(--pc-glow) / 0) 62%),
    radial-gradient(46% 70% at 64% 104%, rgb(var(--ed-cta-glow) / var(--ed-pagehero-cta-glow)) 0%, rgb(var(--ed-cta-glow) / 0) 60%),
    var(--ed-dark);
  color: var(--ed-on-dark);
}
.ed-pagehero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: var(--ed-maxw);
  margin-inline: auto;
  padding: clamp(36px, 4.4vw, 72px) var(--ed-gutter) clamp(56px, 6vw, 96px);
}
.ed-pagehero__inner > * { max-width: min(640px, 100%); margin: 0; }

/* The breadcrumb: Home, then the page, as the BreadcrumbList in the page's
 * structured data has it (core/structured_data.py). 13px Plex Sans; the
 * separator is drawn, not read. */
.ed-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ed-font-body);
  font-size: var(--ed-size-caption);
  color: var(--ed-crumb-sep);
}
.ed-crumbs__item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ed-crumbs__item + .ed-crumbs__item::before { content: "/"; content: "/" / ""; }
.ed-crumbs__link {
  color: var(--ed-crumb-ink);
  text-decoration: none;
  transition: color var(--ed-transition-quick);
}
.ed-crumbs__link:is(:hover, :focus-visible) { color: var(--ed-on-dark); }
.ed-crumbs [aria-current] { color: var(--ed-on-dark); overflow-wrap: anywhere; }

/* The eyebrow: the page's own WordPress kicker, in the shared eyebrow's type
 * with its bar, as drawn: the words in the page's dark shade (or the
 * neutral, above), the bar running from magenta to the dark shade. A long
 * kicker wraps, its bar on the first line. */
.ed-pagehero__eyebrow {
  align-items: flex-start;
  margin: 0;
  line-height: 1.5;
  color: var(--pc-eyebrow);
  --ed-eyebrow-bar: linear-gradient(90deg, var(--ed-cta), var(--pc-ink-dark));
  --ed-eyebrow-bar-rtl: linear-gradient(270deg, var(--ed-cta), var(--pc-ink-dark));
}
.ed-pagehero__eyebrow::before { margin-block-start: calc(0.5lh - 1px); }

.ed-pagehero__title {
  font-family: var(--ed-font-display);
  font-size: var(--ed-size-h1);
  font-weight: var(--ed-weight-bold);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ed-on-dark);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.ed-pagehero__inner > .ed-pagehero__lede {
  max-width: min(580px, 100%);
  font-size: var(--ed-size-lead-lg);
  line-height: 1.6;
  color: var(--ed-on-dark-86);
  text-wrap: pretty;
}

.ed-pagehero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ---- The body ----------------------------------------------------------
 * The design's first light section after a hero, its ground painted over at
 * most --ed-ground-reach and white below (tokens.css, --ed-ground-page). */
.ed-pagebody {
  background-color: var(--ed-bg);
  background-image: var(--ed-ground-page);
  background-repeat: no-repeat;
  background-size: 100% min(100%, var(--ed-ground-reach));
}

/* The page's colour on its links and marks (above). A long address the
 * WordPress text spells out (a video's file, a policy's URL) breaks rather
 * than run past a phone's edge. */
.ed-pagebody .ed-art__body {
  --ed-link: var(--pc-ink-light);
  --ed-link-hover: var(--pc-ink-light-hover);
  overflow-wrap: anywhere;
}
/* Most of these bodies open on a heading, whose top margin is for a heading
 * after prose: under the section's own top space it doubled the gap below
 * the rule. */
.ed-pagebody .ed-art__body > :first-child { margin-block-start: 0; }
.ed-pagebody .ed-faq { border-top-color: var(--pc-mark-light); }
.ed-pagebody .ed-faq__num { color: var(--pc-mark-light); }

/* AN IMAGE IS NEVER DRAWN WIDER THAN ITS OWN PIXELS, NOR TALLER THAN MOST
 * OF THE SCREEN. The article's figure (article.css) fills the column, which
 * suits a landscape photograph; these pages' WordPress pictures include
 * portraits a third of the column wide, which stretched to it blur, and
 * phone screenshots twice as tall as wide, which at the column's width ran
 * past a screen and a half. Both caps keep the picture's proportions; a
 * large landscape picture still fills the column. */
.ed-pagebody .ed-art__body img {
  width: auto;
  max-width: 100%;
  max-height: var(--ed-figure-max-h);
}

/* A page whose whole body was its hero: a white gap before the closing slab,
 * so the two dark bands never touch. */
.ed-pagegap { block-size: var(--ed-dark-gap); }

/* ---- The team (pages/blocks/team.html) ----------------------------------
 * /about/'s three people as a grid (the owner, 9 October 2026: basic, in the
 * site's own cards, until the Claude Design rebuild). Outside the prose, on
 * the whole 1080px column. Each person is the plain white card (.ed-card,
 * layout.css), the photo flush and square at its head; the name in the
 * card title's type, the role as a label inside a card (royal blue, as the
 * Insights cards' tags), the bio in body copy.
 *
 *   under 37.5em (600px)    one column, the photo across the card's top
 *   37.5em to 56.1875em     one column, the photo 240px beside the words
 *   from 56.25em (900px)    three columns, every card as tall as the row
 *
 * The photo's `sizes` (pages/blocks.py, PHOTO_SIZES) follows these widths:
 * change one, change the other.
 *
 * In the body's own type size, so the space from "Meet Our Team" to the
 * grid is the body's 1.15em between blocks, and the space to the prose
 * after it the 2.4em a panel takes in the body (.ed-leadform, article.css).
 * A link in a bio takes the page's colour, as a link in its prose does
 * (above). */
.ed-team {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ed-read-body);
}
.ed-pagebody .ed-team {
  --ed-link: var(--pc-ink-light);
  --ed-link-hover: var(--pc-ink-light-hover);
}
.ed-art__body + .ed-team { margin-block-start: 1.15em; }
.ed-team + .ed-art__body { margin-block-start: 2.4em; }

.ed-team__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: var(--ed-ink);
}
.ed-team__photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.ed-team__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: clamp(18px, 2vw, 24px);
}
.ed-team__name {
  margin: 0;
  font-family: var(--ed-font-display);
  font-size: var(--ed-size-card-title);
  font-weight: var(--ed-weight-bold);
  line-height: 1.24;
  letter-spacing: -0.012em;
  color: var(--ed-ink);
  text-wrap: balance;
}
.ed-team__role {
  margin: 0;
  font-family: var(--ed-font-mono);
  font-size: var(--ed-size-eyebrow);
  font-weight: var(--ed-weight-semibold);
  line-height: 1.5;
  letter-spacing: var(--ed-track-label);
  text-transform: uppercase;
  color: var(--ed-card-label);
}
.ed-team__bio {
  margin-block-start: 4px;
  font-size: var(--ed-size-body);
  line-height: 1.6;
  color: var(--ed-dek);
  overflow-wrap: break-word;
}
.ed-team__bio p { margin: 0; }
.ed-team__bio p + p { margin-block-start: 0.8em; }
.ed-team__bio a {
  color: var(--ed-link);
  text-decoration: underline;
  text-decoration-thickness: var(--ed-underline);
  text-underline-offset: 2px;
}
.ed-team__bio a:is(:hover, :focus-visible) { color: var(--ed-link-hover); }

@media (min-width: 37.5em) and (max-width: 56.1875em) {
  .ed-team__card {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: start;
  }
}
@media (min-width: 56.25em) {
  .ed-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}