/* Youssef Al-Tai: the shared look of the site, in the family of Layback's.
   Instrument Serif for titles, Inter Tight for everything else, and one color
   per product, taken from its icon, as a soft fill. Light only. */

@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Inter Tight"; font-weight: 100 900; src: url("/fonts/inter-tight.woff2") format("woff2"); font-display: swap; }

:root {
  --ice: #e6edfa;
  --sky: #bccce6;
  --mist: #f1f3f7;
  --shell: #fbfbfc;
  --ink: #15171c;
  --graphite: #565c69;
  --line: rgba(21, 23, 28, .13);
  --blue: #1f52e8;
  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(84px, 11vw, 160px);
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

.saluki { --ice: #f7f1e3; --sky: #e6d2a4; }
.caracal { --ice: #f9eee8; --sky: #e9c2ac; }
.layback { --ice: #e6edfa; --sky: #bccce6; }
.ufuq { --ice: #f3eee7; --sky: #e3c99c; }
.ufuq .art img { display: block; width: min(380px, 72%); margin-inline: auto; border-radius: 44px 44px 0 0; }

* { box-sizing: border-box; margin: 0; }
html { color-scheme: light; background: var(--shell); color: var(--ink); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font: 400 clamp(17px, 1.2vw, 19px)/1.55 "Inter Tight", system-ui, sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(50px, min(6.8vw, 11.5svh), 112px); line-height: .98; }
h2 { font-size: clamp(42px, 4.5vw, 70px); line-height: 1.03; }
h3 { font-size: 1em; font-weight: 500; }
p { color: var(--graphite); max-width: 34rem; }
small { color: var(--graphite); font-size: 14px; }
code, pre { font-family: var(--mono); font-size: .86em; }
code { padding: .12em .36em; border-radius: 6px; background: rgba(21, 23, 28, .06); overflow-wrap: anywhere; }
pre { padding: 18px 20px; border-radius: 16px; background: var(--ink); color: var(--shell); overflow-x: auto; }
pre code { padding: 0; background: none; }

/* Top bar */
.bar { position: absolute; inset: 0 0 auto; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--gutter); }
.mark { font: 400 27px/1 var(--serif); }
.bar nav { display: flex; gap: 22px; font-size: 15px; }
.bar nav a { background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.bar nav a:hover { background-size: 100% 1px; }

/* Buttons */
.button { display: inline-block; padding: 15px 26px; border-radius: 99px; background: var(--ink); color: var(--shell); font-weight: 500; font-size: 16px; white-space: nowrap; transition: background .25s, scale .35s var(--spring); }
.button:hover { background: var(--blue); scale: 1.03; }
.button:active { scale: .97; }
.badge { display: inline-block; padding: 11px 20px; border: 1px solid var(--line); border-radius: 99px; font-size: 15px; font-weight: 500; }

/* The hero: the product's color, with the art cut off by the bottom edge, as an icon cuts off its own. */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; height: 100svh; min-height: 760px; padding: clamp(84px, 12svh, 120px) 0 0; overflow: hidden; text-align: center; background: linear-gradient(var(--ice), var(--sky) 70%); }
.hero h1 { max-width: 13em; padding: 0 20px; box-sizing: content-box; }
.hero > p { max-width: 36rem; margin-top: 16px; padding: 0 20px; box-sizing: content-box; color: var(--ink); text-wrap: balance; }
.cta { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.art { width: min(100% - 2 * var(--gutter), 1120px); margin-top: auto; padding-top: clamp(28px, 6svh, 64px); }
.art img { width: 100%; border-radius: 14px 14px 0 0; box-shadow: 0 24px 80px rgba(21, 23, 28, .22); }
.art .icon { width: min(420px, 62%); margin-inline: auto; margin-bottom: -8%; border-radius: 0; box-shadow: none; filter: drop-shadow(0 24px 40px rgba(21, 23, 28, .18)); }
.icons { display: flex; justify-content: center; gap: clamp(14px, 3vw, 40px); margin-bottom: -5%; }
.icons img { width: clamp(96px, 23vw, 300px); border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 30px rgba(21, 23, 28, .16)); }

/* Home */
.products, .about { padding: var(--section) var(--gutter); }
.products { background: var(--mist); }
.products > h2 { text-align: center; }
.products > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1320px; margin: clamp(40px, 5vw, 72px) auto 0; }
.product { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: linear-gradient(var(--ice), var(--sky)); transition: scale .5s var(--ease); }
.product:hover { scale: 1.015; }
.product img { width: 96px; filter: drop-shadow(0 8px 14px rgba(21, 23, 28, .14)); }
.product h3 { margin-top: clamp(36px, 6vw, 88px); font: 400 clamp(38px, 3.6vw, 56px)/1.03 var(--serif); letter-spacing: -.012em; }
.product p { margin-top: 8px; color: var(--ink); }
.product small { margin-top: auto; padding-top: 22px; color: var(--ink); }

.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 7vw, 112px); align-items: center; }
.about a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.about dl { margin-top: 26px; }
.about dl div { display: flex; justify-content: space-between; padding: 13px 0; border-top: 1px solid var(--line); }
.about dt { font-weight: 500; }
.about dd { margin: 0; color: var(--graphite); }

.end { display: flex; flex-direction: column; align-items: center; padding: var(--section) var(--gutter); text-align: center; background: linear-gradient(var(--ice), var(--sky) 70%); }
.end h2 { margin: 18px 0 26px; font-size: clamp(60px, 7.4vw, 124px); }
.end p { margin-top: 18px; font-size: 15px; }
.end > img { width: 128px; }

/* App pages: titles on the left, text on the right */
.article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(40px, 6vw, 96px); max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) var(--section); }
.article > * { grid-column: 2; }
.article > h2 { grid-column: 1; font-size: clamp(36px, 3.4vw, 52px); }
.article > h2, .article > h2 + * { margin-top: var(--section); }
.article > p { max-width: 38rem; margin-bottom: 14px; }
.article > h3 { margin: 28px 0 4px; }
.article > h2 + h3 { margin-top: var(--section); }
.article > ul { padding: 0; list-style: none; }
.article > ul li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--graphite); }
.article a, .wrap a { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article a:hover, .wrap a:hover { text-decoration-color: currentColor; }

.card { padding: clamp(22px, 3vw, 32px); border-radius: 22px; background: var(--mist); }
.price { display: flex; flex-wrap: wrap; gap: 24px; }
.price div { flex: 1 1 12rem; }
.price dt { font-size: 14px; color: var(--graphite); }
.price dd { margin: 2px 0 0; font: 400 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); }

.changelog div { padding: 14px 0; border-top: 1px solid var(--line); }
.changelog dt { font-weight: 500; }
.changelog dd { margin: 2px 0 0; color: var(--graphite); }

/* Long reads: support, privacy, press */
main:not(:has(.hero)) { position: relative; background: linear-gradient(var(--ice), var(--shell) 420px); }
.wrap { max-width: calc(44rem + 2 * var(--gutter)); margin: 0 auto; padding: clamp(120px, 16svh, 180px) var(--gutter) var(--section); }
.wrap h1 { font-size: clamp(50px, 6vw, 84px); }
.wrap h2 { margin: clamp(48px, 6vw, 72px) 0 14px; font-size: clamp(32px, 3vw, 44px); }
.wrap h3 { margin: 28px 0 6px; }
.wrap p, .wrap ul, .wrap ol, .wrap pre, .wrap table { margin-bottom: 16px; }
.wrap p { max-width: none; }
.wrap ul, .wrap ol { padding-left: 1.2em; color: var(--graphite); }
.wrap li { margin-bottom: 8px; }
.wrap .lede { margin: 16px 0 40px; font-size: 1.15em; }
.wrap .card { margin-bottom: 24px; }

table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .92em; }
th, td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
th { color: var(--graphite); font-weight: 500; }

.press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 24px; align-items: start; }
.press-grid figure { margin: 0; }
.press-grid img { width: 100%; border-radius: 12px; }
.press-grid figcaption { margin-top: 8px; font-size: 14px; color: var(--graphite); }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; padding: 22px var(--gutter); color: var(--graphite); font-size: 13px; }
footer a { color: var(--ink); background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
footer a:hover { background-size: 100% 1px; }

/* One movement for everything: up into place, out of a slight blur. */
.word { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; translate: 0 var(--y, 24px); filter: blur(var(--blur, 6px)); } }
  @keyframes sink { to { translate: 0 12%; } }

  .bar { animation: rise 1s var(--ease) .9s backwards; --y: -8px; --blur: 0px; }
  .hero .word { animation: rise 1.1s var(--ease) calc(.1s + var(--w) * 65ms) backwards; --y: .32em; }
  .hero > p { animation: rise 1s var(--ease) .55s backwards; }
  .cta { animation: rise 1s var(--ease) .68s backwards; }
  .art > * { animation: rise 1.7s var(--ease) .4s backwards; --y: 12%; --blur: 0px; }

  /* Scroll-driven, so it needs no script. Browsers without it show everything in place. */
  @supports (animation-timeline: view()) {
    .art { animation: sink linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
    .products > h2, .product, .about > *, .end > *, .article > * { animation: rise linear backwards; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}

@media (max-width: 860px) {
  .products > div, .about, .article { grid-template-columns: minmax(0, 1fr); }
  .article > *, .article > h2 { grid-column: 1; }
  .article > h2 + * { margin-top: 18px; }
  .bar nav { gap: 16px; font-size: 14px; }
}