/* Adamas Digital — corrections to the reference build.
   Loaded after site.css (a byte-for-byte copy of the reference stylesheet)
   for defects that are not viewport-specific. Mobile-only work lives in
   mobile.css. Each rule notes what it repairs, so re-syncing from the
   reference later is a matter of re-checking this short list. */

/* The home page wraps a principle's copy in a <div> that lands in column two;
   the about page lists <span>, <h3> and <p> as flat siblings instead. Against
   grid-template-columns:54px 1fr that puts the paragraph in the 54px number
   column, wrapping it to roughly one word per line. Send it to column two. */
.principle-list article > p { grid-column: 2; }

/* In the manifesto, `.manifesto > p` is written for the statement paragraph,
   but the eyebrow is a direct <p> child too, so it is captured as well.
   `.manifesto > p` (0,1,1) outranks `.eyebrow` (0,1,0), which blew the label
   up to 88px. Re-scope the eyebrow out of it.

   The companion rule that used to sit here corrected the eyebrow's leading
   <span>, the little 28x1px rule before the label. Those spans have been
   taken out of the markup, so there is nothing left for it to fix. */
.manifesto .eyebrow {
  max-width: none;
  margin: 0 0 32px;
  font-size: 10px;
  letter-spacing: .16em;
  line-height: 1.2;
}

/* .industry-page-list is declared with only padding-top, and the horizontal
   gutter is supplied solely by the max-width:720px rule. Above that
   breakpoint the list therefore has no side padding at all: the row numbers
   sit flush against the viewport edge while every other section indents by
   clamp(24px,6vw,96px). Restore the site gutter, and close the bottom so the
   last row's rule is not flush against the next section. */
@media (min-width: 721px) {
  .industry-page-list {
    padding-right: clamp(24px, 6vw, 96px);
    padding-left: clamp(24px, 6vw, 96px);
    padding-bottom: clamp(92px, 11vw, 180px);
  }
}

/* ---- Hero showcase -----------------------------------------------------
   The hero card can carry a grid of campaign work instead of the logo. The
   image is inset rather than bled to the edges, so the card still reads as a
   white card holding something, and the "BRAND / DEMAND / GROWTH" line the
   card draws along its bottom keeps its own room.

   contain, not cover: the point of the image is the whole grid of pieces, and
   cover would crop the outer ones away. The bands that leaves are white on a
   white card, so they cost nothing. */
/* The card's height came from a bottom inset chosen when it held the logo,
   which left it very nearly square. A 1.5:1 image padded out to fit that
   leaves a dead band of white across the bottom half. So the card is given
   the image's proportions instead: the bottom inset is released and the
   height derived from the width, sized to hold the picture plus the strip
   the "BRAND / DEMAND / GROWTH" line sits in. The image then fills it. */
.hero-logo-card.has-showcase {
  padding: 0;
  bottom: auto;
  aspect-ratio: 100 / 74;
}

/* Sized rather than inset. An <img> is a replaced element, and for those a
   width of auto is the intrinsic width - the right offset is ignored instead
   of stretching it, so an inset shorthand leaves the picture at full width
   and hanging over the edge of the card. The height is the card less the top
   margin and the strip the label sits in. */
.hero-logo-card .hero-showcase {
  position: absolute;
  top: 16px;
  left: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 60px);
  object-fit: contain;
  border-radius: 10px;
  display: block;
}

/* The label is measured off the card's bottom, and that bottom has moved. */
.hero-logo-card.has-showcase:after { bottom: 17px; }

@media (max-width: 720px) {
  .hero-logo-card .hero-showcase {
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 46px);
  }

  .hero-logo-card.has-showcase:after { bottom: 13px; }
}

/* `.engine-heading > p` is written for the standfirst that follows the
   heading: 540px wide, muted, and pushed across with `margin-left: auto`. Two
   things go wrong with that. The eyebrow is a direct <p> child as well, so the
   same rule catches it and drags it out to the right, 28px down, wearing the
   standfirst's width cap - the identical defect to the manifesto above. And
   the standfirst itself ends up floating to the right of the heading it
   belongs to, which reads as though it belongs to something else.

   Both are put back under the heading, and the eyebrow is scoped out of the
   rule that was never meant for it. */
.engine-heading > p { margin-left: 0; }

.engine-heading > .eyebrow {
  max-width: none;
  margin-top: 0;
}

/* The footer link row is declared repeat(3,1fr) for Company, Services and
   Social. A fourth list — the phone number and email address — now sits with
   them, and without a matching track it would wrap onto a row of its own.
   Scoped to the desktop side of 720px, because below it site.css switches the
   same grid to two columns and that rule has to keep winning. */
@media (min-width: 721px) {
  .footer-links { grid-template-columns: repeat(4, 1fr); }
}