/* arabesquelabs.com: page layout only. Everything else is the design system
   (vendor/arabesque/dist/arabesque.css). From its homepage template
   (templates/home.css, 0.6.0). Tokens only, logical properties only. */
/* The header is sticky (al-site-header--sticky): a section's link lands
   under it, not behind it. Its bar is 5rem, 4rem where it folds. */
html { scroll-padding-block-start: 5rem; }
@media (max-width: 52rem) { html { scroll-padding-block-start: 4rem; } }
.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; }
@media (max-width: 52rem) {
  .tp-two { grid-template-columns: minmax(0, 1fr); }
  .tp-hero__body { padding-block-start: var(--al-space-8); }
}

/* The footer, as power-close.com's, careerhunt.app's and the design system's
   site's: the studio (its lockup and tagline) beside three columns of links;
   the legal lines under them, over a hairline. Named as the design system's
   footer would name it (al-footer--columns): when Arabesque has one, these
   rules go. */
.al-footer__about { max-inline-size: 22rem; }
.al-footer__brand { color: var(--al-color-text); text-decoration: none; }
.al-footer__blurb { margin: var(--al-space-4) 0 0; font-size: var(--al-text-sm); line-height: 1.6; color: var(--al-color-text-muted); }
.al-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(9rem, auto)); gap: var(--al-space-8) var(--al-space-16); }
.al-footer__cols h2 { margin: 0 0 var(--al-space-4); font-family: inherit; font-size: var(--al-text-sm); font-weight: var(--al-weight-medium); color: var(--al-color-text); }
.al-footer__cols .al-footer__links { flex-direction: column; gap: var(--al-space-3); margin-inline-start: 0; }
.al-footer--columns .al-footer__legal { margin-block-start: var(--al-space-4); padding-block-start: var(--al-space-6); border-block-start: var(--al-border-hairline) solid var(--al-color-line); }
@media (max-width: 52rem) {
  /* One column, not wrapping: the legal lines' flex-basis (100%, for a row)
     would otherwise wrap them into a second column, off a phone's screen. */
  .al-footer--columns { flex-direction: column; flex-wrap: nowrap; }
  .al-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--al-space-8); }
}

/* The social links, each with its mark: brand marks are filled, not stroked. */
/* An icon would make each row taller than the other columns' rows: set at
   the top of the line, they keep the same rhythm. */
.site-social__link { display: inline-flex; align-items: center; gap: var(--al-space-2); vertical-align: top; }
.site-social__icon { inline-size: 1rem; block-size: 1rem; flex: none; 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); }