/* hunt's home page: the public face of a hosted hunt, set as
   arabesquelabs.com is. Large Jost headings, Newsreader for reading,
   hairlines, the star lattice behind the opening, one green accent. */


.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem;
  align-items: center; padding: 6rem var(--page-pad) 7rem; border-bottom: 1px solid var(--al-color-line); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--pattern);
  -webkit-mask: var(--pattern-tile), var(--hero-fade); -webkit-mask-composite: source-in;
  mask: var(--pattern-tile), var(--hero-fade); mask-composite: intersect; }
/* The lattice fades, a little, behind the words and buttons: around the text's column (the start one). */
.hero { --hero-fade: radial-gradient(ellipse 38% 62% at 22% 50%, rgb(0 0 0 / 0.3) 40%, #000 100%); }
[dir="rtl"] .hero { --hero-fade: radial-gradient(ellipse 38% 62% at 78% 50%, rgb(0 0 0 / 0.3) 40%, #000 100%); }
.hero h1 { margin: 0; font-size: clamp(2.25rem, 3.6vw, 3.25rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
/* A phrase kept on one line: the headline breaks only after its commas. */
.nowrap { white-space: nowrap; }
/* On a computer, beside the screenshot: each sentence on a line of its own,
   the type as large as the column lets the longer one be ("Your job hunt,
   captured.": about 10 times its size wide). */
.hero-text { container-type: inline-size; }
@media (min-width: 64.0625rem) {
  .hero h1 { font-size: min(3rem, 100cqi / 10.4); }
  .hero h1 .line { white-space: nowrap; }
}
.lede { margin: 1.75rem 0 0; max-width: 32rem; font: 400 1.25rem/1.7 var(--al-font-serif); color: var(--al-color-text-muted); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2.5rem; }
/* GitHub's mark, the size of an icon, in the text's colour. */
.hero-github .github-mark { inline-size: 1.4rem; block-size: 1.4rem; }
.hero-github { color: var(--al-color-text); }

.shot { margin: 0; }

/* A screenshot in a browser's window: a title bar with its three buttons
   and the address, over the page. Quiet greys, so the page stays what's
   looked at. Shared with the Screenshots page. */
.browser { border: 1px solid var(--al-color-line-strong); border-radius: 10px; background: var(--al-color-surface); overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 16px 40px -16px rgb(0 0 0 / 0.22); }
.browser__bar { position: relative; display: flex; align-items: center; height: 2.25rem; padding-inline: 0.9rem;
  border-bottom: 1px solid var(--al-color-line); background: var(--al-color-surface-sunk, var(--al-color-surface)); }
.browser__dots { display: inline-flex; gap: 6px; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--al-color-line-strong); }
.browser__address { position: absolute; inset-inline: 0; margin-inline: auto; width: min(22rem, 55%); padding: 0.15rem 0.75rem;
  border-radius: 999px; background: var(--al-color-bg); color: var(--al-color-text-muted); font: 400 0.75rem/1.5 var(--al-font-sans);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { display: block; width: 100%; height: auto; }

.band { padding: 6rem var(--page-pad); border-bottom: 1px solid var(--al-color-line); }
.band h2 { margin: 0; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.015em; }
.band p { font: 400 1.125rem/1.7 var(--al-font-serif); color: var(--al-color-text-muted); }
.band-head { max-width: 40rem; }
.band-head p { margin: 1rem 0 0; }

.feature-icon { width: 28px; height: 28px; fill: none; stroke: var(--al-color-accent); stroke-width: 1.5; stroke-linejoin: miter; stroke-linecap: square; }

/* The features: each beside what it looks like, every other one the other
   way round. */
.feature-rows { display: grid; gap: 6rem; margin-top: 4.5rem; }
.feature-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; }
.feature-row--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature-row--flip .feature-text { order: 2; }
.feature-text h3 { margin: 1.25rem 0 0.75rem; font-size: 1.75rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }
.feature-text p { margin: 0; max-width: 32rem; }

/* What hunt works with: tiles, four to a row. */
.tiles { list-style: none; margin: 4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  border: 1px solid var(--al-color-line); background: var(--al-color-line); }
.tiles li { padding: 1.75rem; background: var(--al-color-bg); }
.tiles h3 { margin: 1rem 0 0.4rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.tiles p { margin: 0; font-size: 1rem; }

/* Run it yourself, or let us: side by side. */
.ways { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; margin-top: 4rem; align-items: start; }
.way h3 { margin: 0 0 0.75rem; font-size: 1.75rem; font-weight: 400; letter-spacing: -0.01em; }
.way > p { margin: 0 0 1.75rem; }
.way .more { margin: 1.5rem 0 0; }
.way--hosted { padding: 2.25rem; border: 1px solid var(--al-color-line-strong); border-radius: var(--al-radius-sm); background: var(--al-color-surface); }
.way--hosted .al-badge { margin-bottom: 1rem; }
.way--hosted .cta { margin-top: 0; }
.more { font-family: var(--al-font-sans) !important; font-size: 1rem !important; }

/* A terminal: the design system's code block (.al-code), in a window's
   frame, its commands each after a prompt that's drawn, never copied. */
.terminal { box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 32px -12px rgb(0 0 0 / 0.18); }
.terminal .al-code__bar { gap: 1rem; }
.terminal .al-code__copy { margin-inline-start: auto; }
.terminal__dots { display: inline-flex; gap: 6px; }
.terminal__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--al-color-line-strong); }
.terminal .al-code__pre { font-size: 0.875rem; line-height: 1.75; }
.terminal .cmd::before { content: "$ "; color: var(--al-color-accent); user-select: none; -webkit-user-select: none; }
.terminal .cmd-after::before { content: "  "; user-select: none; -webkit-user-select: none; }
/* An empty line: as tall as the rest (an empty box sits on its bottom
   edge, and would stand taller). Nothing is copied from it. */
.terminal .al-code__line:empty::before { content: "\200b"; user-select: none; -webkit-user-select: none; }
.terminal__foot { display: block; margin: 0; padding: 0.6rem 1rem; border-top: 1px solid var(--al-color-line); font-size: var(--al-text-sm); color: var(--al-color-text-muted); }

@media (max-width: 64rem) {
  .hero, .feature-row, .feature-row--flip, .ways { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  /* The text above the screenshot: its fade, across the top. */
  .hero, [dir="rtl"] .hero { --hero-fade: radial-gradient(ellipse 75% 32% at 50% 24%, rgb(0 0 0 / 0.3) 40%, #000 100%); }
  .feature-row--flip .feature-text { order: 0; }
  .feature-rows { gap: 4.5rem; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .hero { padding-block: 3.5rem 4rem; }
  .band { padding-block: 4rem; }
  .feature-rows { margin-top: 3rem; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .way--hosted { padding: 1.5rem; }
  .terminal .al-code__pre { font-size: 0.8rem; }
}

/* A feature's screenshot: the top of its page, in the same frame as the
   others, however long the page it was taken of. */
.feature-row .browser picture { display: block; aspect-ratio: 1440 / 900; }
.feature-row .browser img { width: 100%; height: 100%; object-fit: cover; object-position: top; }