/* Site layer on top of greywick.css. Only what the kit has no part for. */

/* Partner marks under the hero buttons, as on the live site. Owners' files, unaltered and
   never recoloured. 29px tall keeps the Litecoin mark above the 100px width its
   guidelines set for screens. */
.marks { display: flex; flex-wrap: wrap; gap: 24px 56px; margin-top: 8px; }
.marks dl { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.marks dt { font: 500 var(--fs-micro)/15px var(--font-mono); letter-spacing: 0; color: var(--text-3); }
.marks dd { margin: 0; }
.pmark { display: block; width: auto; height: 29px; }
/* Sized by eye to sit level with the others: DA and Cashen read larger than their height says. */
.pmark--da { height: 23px; }
.pmark--cashen { height: 20px; }
.pmark--cantex, .pmark--oneswap { height: 26px; }
/* Space under the logo row. Above 1200px the page adds a 48px gap between sections; below it that gap is 0,
   which pulled the logos up against the divider when the menu collapsed. The row's own padding now makes up
   the difference, so it is 56px from the divider at every width from tablet up. Phones keep the kit's 32px. */
@media (min-width: 810px) { .hero--split { padding-bottom: calc(56px - var(--section-gap)); } }

/* Six logos written four times, so each half is wider than a wide screen. Longer lap keeps the old drift speed. */
.logos-track { animation-duration: 72s; }

.more { margin: 32px 0 0; }

.foot-col .soon { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }

/* Legal lines under the footer columns, in the same 1080 column. */
.foot-notes { max-width: var(--page-max); margin: 48px auto 0; padding: 0 var(--foot-inset); display: flex; flex-direction: column; gap: 8px; }
.foot-notes p { margin: 0; max-width: 760px; font-size: var(--fs-small); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-3); }

.nw { white-space: nowrap; }

/* The dots vignette behind a short hero (404) must not run under the footer. */
.as-main { overflow: clip; }

/* The dimmed second half of a title, as on the live site. */
.h1 .dim { color: var(--mock-mono); }

/* cLTC lockup at the top of the cLTC page, in the place of the tag. */
.plock--head { gap: 16px; margin-bottom: 8px; }
.plock--head .plock-mark { width: 30px; height: 40px; stroke-width: 4.5; }
.plock--head .plock-tx b { font-size: var(--fs-h4); }
.plock--head .plock-tx span { font-size: var(--fs-small); }

/* cLTC terms: head on the left, the key-value table on the right. */
.terms { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.terms .head { margin: 0; }
@media (max-width: 1199.98px) { .terms { grid-template-columns: minmax(0, 1fr); gap: 32px; } .terms .tbl-wrap { max-width: 760px; } }

/* The endorsement quote is two paragraphs, so it is set at H4 size, not H2. */
.stmt--long { gap: 24px; }
.stmt--long .h2 { margin: 0 0 8px; }
.stmt--long blockquote { display: flex; flex-direction: column; gap: 16px; font-size: var(--fs-h4); line-height: 1.4; }
.stmt--long blockquote p { margin: 0; }

/* A quote inside a post: the pull quote bar, at reading size, with the name under it. */
.prose .pq blockquote { font-size: var(--fs-h5); line-height: 1.5; }
.prose .pq blockquote > div { display: flex; flex-direction: column; gap: 12px; }
.prose .pq blockquote p { margin: 0; }
.prose .pq figcaption { padding-left: calc(var(--bar-w) + 20px); color: var(--text); }
.prose .pq figcaption .tx span { color: var(--text-3); }

/* The logo mark as the byline monogram. */
.avatar--mark svg { width: 18px; height: 18px; color: var(--text); }
.post-end p { margin: 0; }
@media (max-width: 809.98px) { .stmt--long blockquote { font-size: var(--fs-h5); } }

/* Why Canton: a wider heading block so the title breaks once, after "where". */
.head--wide { max-width: 600px; }

/* Five icon cards as three, then two wide ones, so the row has no hole. */
@media (min-width: 1200px) {
  .icards--3-2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .icards--3-2 > * { grid-column: span 2; }
  .icards--3-2 > :nth-child(n+4) { grid-column: span 3; }
}

/* Founders as photo tiles, as on the live site: 3:4 portrait, name and role over a dark
   fade at the bottom. Two across on small screens, five across from tablet up. */
.team--photos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.member--photo { position: relative; padding: 0; gap: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--surface-2); }
.member--photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
/* Slava leans left in his photo; show more of the left side so his face sits nearer the middle of the tile. */
.member--photo img[alt="Slava Zhygulin"] { object-position: 20% 50%; }
.member--photo .tx { position: absolute; inset: auto 0 0 0; gap: 6px; padding: clamp(14px, 1.6vw, 20px);
  background: linear-gradient(to top, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .5) 46%, transparent 100%); }
.member--photo .tx span { order: -1; font: 500 var(--fs-micro)/1.2 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: rgb(255 255 255 / .66); }
.member--photo .tx h3 { color: #fff; }
@media (max-width: 809.98px) { .team--photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .member--photo { padding: 0; } }
/* Five tiles: on two across, the odd last one spans both columns as a wide crop so the grid has no hole. */
@media (max-width: 809.98px) { .member--photo:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .member--photo:last-child:nth-child(odd) img { object-position: 50% 30%; } }

/* Media cards in the middle range (tablet, 480 to 809px): two across instead of one giant card.
   The kit goes 3-up to 1-up at 810px, which at 700px wide makes each card the full width with a
   very tall stage. Product rows keep their head on its own row, then the cards two across.
   An odd last media card spans both columns and lays its stage and text side by side, so the
   row has no hole and the card does not grow tall. Under 480px it is one column as before. */
@media (min-width: 480px) and (max-width: 809.98px) {
  .media, .prow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--card-gap); }
  .media > .mcard:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; }
  .media > .mcard:last-child:nth-child(odd) .m-stage { flex: 1 1 50%; align-self: stretch; aspect-ratio: auto; min-height: 200px; }
  .media > .mcard:last-child:nth-child(odd) .body { flex: 1 1 50%; justify-content: center; }
}

/* Contact form states, driven by src/scripts/contact-form.ts. The kit's .form is display:flex,
   which would otherwise win over the hidden attribute. */
.form[hidden] { display: none; }
.form-error { margin: 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--bad); }
.form-error[hidden] { display: none; }
.form-card .form-done { padding-top: 8px; }

/* Skip link: off screen until a keyboard user tabs to it. */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 10px 16px; border-radius: var(--r-field);
  background: var(--text); color: var(--bg); font: 500 var(--fs-small)/1.2 var(--font-ui); text-decoration: none; }
.skip-link:focus { top: 16px; }