/* Hallmark · checked: 2026-11-11 · genre: modern-minimal (from DESIGN.md) · system: locked, site/DESIGN.md (Ultraviolet on Rim's night, after coreav-dev/site) · posture: committed · hero: Ledge, bare, on coreav-dev/site's markup and values, See GitHub 40px under the headline, the columns centred on each other · nav: edge-aligned · footer: colophon · copy: requested Koidrive rename, commands and repository URLs unchanged
 * floor: 0 FAIL · fixed: 2 (kept: the dropped #top, recorded below; at 320 the Copy pill covered the long argument, so it now drops under the commands) · structural: 0 printed · contrast: pass
 * built: the project · redesign: polish · v2.0.0 */
/* Hallmark · dismissed 77 · the maintainer scoped the page to the hero and the footer, so no sections are added below the install block */
/* Hallmark · dropped #top, top · the wordmark links to "/" as coreav-dev/site's does, so the hero no longer carries the id top */
/* Hallmark · answered F3 · the headline balances its lines: "Your own Dropbox / on Cloudflare" from 375 to 480 and from 961 to 1920, one line from 600 to 900 where the stacked head is full width, three lines at 320 */
/* Hallmark · finish-review: in-thread designer's critique, then a cross-lab review (BOX-139) · 13 findings · fixed 5: the head sat 28px under the screen's middle, now 8px over it; the ® stood 1 to 2px off the "e", now 3 to 6px; the commands were 13px, under the 14px labels, now 14px on a 24px line; Copy grew with its label and reflowed the panel, now 104px in every state; under 60rem an empty field row added 64px under the head, now gone · kept 8: the "Y" inks 1.5px inside the column edge; the nav centres the wordmark and the link, so their baselines differ by 7px; the block is wider than its commands; Copy's hover is a small step on the surface; two GitHub links on the first screen; the phone page has empty paper above the footer; the footer is below the fold on desktop; Copy sits under the commands under 415px (coreav-dev/site's layout or the reviewers' and the maintainer's choices) · logo round: the cube lockup sits on the wordmark's centre within 0.5px with a 10px gap, crisp at 1x on desktop; kept: on a phone the 23.33px cube leaves its seams soft at 1x, because the lockup's ratios fix that size · gap: none */
/* Hallmark · Koidrive: supplied koi paths unchanged, chosen Outfit 600 wordmark, app-icon favicons and OG image; install block unchanged · self-critique: the nav's viewBox crop removes the unused padding, so its 28/23.33px visible height balances the 24/20px wordmark without scaling the lockup · sweep: 0 FAIL, 1 file-URL font WARN, 2 section-count NOTEs; HTTP font captures loaded · cross-lab identity review pending */
/* Hallmark · install block removed (maintainer, 2026-11-11): no release or Homebrew tap exists yet and the command will be renamed, so the commands, Copy and its script are gone; the act column holds one release line on the install block's surface */
/* SPDX-License-Identifier: Apache-2.0 */
/* The page, built on coreav-dev/site (see DESIGN.md): its edge-aligned nav and its Ledge hero in the bare form,
   with their values. Shared pieces first, then the page from top to bottom. */
@import url("./tokens.css");
@import url("./base.css");

/* The page fills the screen, however short it is. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  color: var(--color-ink-2);
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  line-height: 1;
}

code,
kbd,
pre {
  font-family: var(--font-outlier);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: var(--space-sm);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-weight: 500;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* The pill pair: Outfit 500, one orange fill, an inset-outlined second. */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: var(--color-ink);
  font: 500 var(--text-md) / 1 var(--font-display);
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--color-accent);
  box-shadow: none;
  color: var(--color-accent-ink);
}

.btn--primary:hover {
  background: var(--color-accent-deep);
}

.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--space-2xs);
}

a:hover {
  text-decoration-color: var(--color-accent);
}

/* Edge-aligned nav: the wordmark and the links at opposite edges, no rule under them. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  min-height: 72px;
}

/* The lockup uses the owner's koi icon and the existing wordmark proportions. */
.brand {
  --mark: 24px;
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--mark) * 5 / 12);
}

.brand-icon {
  display: block;
  flex: none;
  width: auto;
  height: calc(var(--mark) * 7 / 6);
}

/* The wordmark's box is its ink, so its height is about the cap height. */
.wordmark {
  display: block;
  height: var(--mark);
  width: auto;
}

/* The links' text ends on the column's edge; their padding is the tap target, outside it. */
.links {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 calc(-1 * var(--space-md)) 0 0;
  padding: 0;
  list-style: none;
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font: 500 var(--text-sm) / 1 var(--font-display);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.link:hover {
  background: var(--color-rule-2);
}

/* Ledge: the field above, the head resting at the base of the screen. Koidrive has no field, so it takes the bare
   form, where the head alone sits in the middle of the screen. */
/* The bottom padding repeats the nav's 72px, so the head centres on the screen, not on the space under the nav. */
.hero {
  display: grid;
  min-height: calc(100svh - 72px);
  padding-block: var(--space-lg) calc(var(--space-xl) + 72px);
}

.ledge {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-areas: "field" "head";
  gap: var(--space-lg);
}

.bare {
  grid-template-rows: none;
  grid-template-areas: "head";
  align-content: center;
}

.bare .head {
  padding-top: 0;
  border-top: none;
}

/* The claim (the headline and See GitHub) and the release line, centred on each other. */
.head {
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-lg) var(--gap-columns);
  align-items: center;
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.hero h1 {
  max-width: none;
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
  color: var(--color-ink);
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
}

.cta {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* A pill straight under the headline needs more room than CoreAV's 16px, which sits under smaller text. */
.claim .cta {
  margin-top: var(--space-xl);
}

/* The release line, where the install commands go once there is a release: the surface fill, no border,
   the 16px surface radius and one line of body text in the ink. */
.soon {
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  color: var(--color-ink);
}

@media (max-width: 60rem) {
  .hero {
    min-height: 0;
    padding-block: var(--space-2xl) var(--space-3xl);
  }

  .ledge {
    grid-template-rows: none;
    grid-template-areas: "head" "field";
    gap: var(--space-2xl);
  }

  .ledge.bare {
    grid-template-areas: "head";
    row-gap: 0;
  }

  .head {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
    border-top: none;
  }

  .claim .cta {
    margin-top: var(--space-lg);
  }
}

@media (max-width: 40rem) {
  .brand {
    --mark: 20px;
  }

  /* On a phone the nav is the lockup alone; See GitHub stays in the hero. */
  .links {
    display: none;
  }
}