/* arabesquelabs.com: page layout only. Everything else is the design system
   (v/0.6.0/dist/arabesque.css). From its homepage template (templates/home.css,
   0.6.0). Tokens only, logical properties only. */
.tp-hero { border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
.tp-hero__body { padding-block: var(--al-space-16) var(--al-space-section); }
.tp-hero__title { max-inline-size: 15ch; margin: 0; }
.tp-hero__lede { margin: var(--al-space-8) 0 0; max-inline-size: 44ch; }
.tp-hero__actions { margin-block-start: var(--al-space-8); gap: var(--al-space-6); }
.tp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--al-space-12) var(--al-space-16); align-items: start; }
.tp-two--baseline { align-items: baseline; }
.tp-h2 { margin: 0; max-inline-size: 14ch; font-family: var(--al-font-display); font-size: var(--al-text-3xl); font-weight: var(--al-weight-regular); line-height: var(--al-leading-heading); letter-spacing: var(--al-tracking-tight); }
.tp-copy { margin-block-start: var(--al-space-8); max-inline-size: 42ch; }
.tp-lede { margin: 0; }
.tp-steps { margin-block-start: var(--al-space-16); }
.tp-email { margin: var(--al-space-4) 0 0; font-family: var(--al-font-display); font-size: var(--al-text-2xl); overflow-wrap: anywhere; }
.tp-tagline { margin: 0; }
@media (max-width: 52rem) {
  .tp-two { grid-template-columns: minmax(0, 1fr); }
  .tp-hero__body { padding-block-start: var(--al-space-8); }
}

/* The footer's social links: brand marks are filled, not stroked. */
.site-social .al-footer__links a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--al-size-target-min); min-block-size: var(--al-size-target-min); }
.site-social__icon { fill: currentColor; stroke: none; }

/* The privacy notice. */
.tp-doc { padding-block: var(--al-space-16) var(--al-space-section); }
.tp-doc .al-display { margin: 0; }
.tp-doc .al-muted { margin-block-start: var(--al-space-4); }
.tp-doc .al-prose { margin-block-start: var(--al-space-12); }
.tp-doc .al-prose h2 { margin-block-start: var(--al-space-12); font-family: var(--al-font-display); font-size: var(--al-text-2xl); font-weight: var(--al-weight-regular); }
@media (max-width: 52rem) {
  .tp-doc { padding-block-start: var(--al-space-8); }
}

/* The products: a card each, its link or status at the foot. */
.tp-products { --al-grid-min: 20rem; --al-grid-gap: var(--al-space-6); margin: var(--al-space-16) 0 0; padding: 0; list-style: none; }
.tp-products > li { display: flex; }
.tp-product { flex: 1; overflow: hidden; }
/* A screenshot across the card's top, edge to edge, in the page's theme. */
.tp-product__shot { margin: calc(-1 * var(--al-space-5)) calc(-1 * var(--al-space-5)) var(--al-space-1); border-block-end: var(--al-border-hairline) solid var(--al-color-line); background: var(--al-color-surface-sunk); }
.tp-product__shot img { display: block; inline-size: 100%; block-size: auto; }
.tp-product__shot .tp-shot--dark { display: none; }
:root[data-theme="dark"] .tp-shot--light { display: none; }
:root[data-theme="dark"] .tp-shot--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tp-shot--light { display: none; }
  :root:not([data-theme="light"]) .tp-shot--dark { display: block; }
}
.tp-product > p { margin: 0; }
.tp-product > .tp-product__foot { margin-block-start: auto; padding-block-start: var(--al-space-2); }
/* The foot: the website at the start, the code on GitHub at the end. */
.tp-product__links { display: flex; align-items: center; justify-content: space-between; gap: var(--al-space-4); }
.tp-product__code { margin-inline-end: calc(-1 * var(--al-space-2)); color: var(--al-color-text-muted); }
.tp-product__code:hover { color: var(--al-color-text); text-decoration: none; }
.tp-product__code .al-icon { inline-size: 1.25rem; block-size: 1.25rem; }

/* Earlier projects: smaller cards, three to a row, under the products. */
.tp-earlier { margin-block-start: var(--al-space-16); }
.tp-earlier__title { margin: 0; font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); }
.tp-earlier > .al-muted { margin: var(--al-space-2) 0 0; }
.tp-earlier__list { --al-grid-min: 15rem; --al-grid-gap: var(--al-space-5); margin: var(--al-space-6) 0 0; padding: 0; list-style: none; }
.tp-earlier__list > li { display: flex; }
.tp-product--small { gap: var(--al-space-3); padding: var(--al-space-4); font-size: var(--al-text-sm); }
.tp-product--small > .tp-product__shot { margin: calc(-1 * var(--al-space-4)) calc(-1 * var(--al-space-4)) var(--al-space-1); }
.tp-product--small h4 { margin: 0; font-size: var(--al-text-md); font-weight: var(--al-weight-medium); }