/* Hallmark · macrostructure: Feature Stack · genre: modern-minimal
 * theme: custom light-first · nav: N5 floating pill · footer: Ft5 statement
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 */

@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;           /* clip, never hidden — hidden kills position:sticky */
  margin: 0;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-mid) var(--ease-out), color var(--dur-mid) var(--ease-out);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;          /* roman display — italic headers are the tell */
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

p { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.shell { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: -9999px;
  background: var(--paper-raised); color: var(--ink);
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm);
  z-index: 100;
}
.skip:focus { left: var(--gutter); top: var(--space-sm); }

/* ============ N5 · floating pill nav ============ */

.nav {
  position: fixed;
  top: var(--space-md);
  left: 50%;
  translate: -50% 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 6px 6px 6px var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--paper-raised) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.14);
  max-width: calc(100vw - (var(--gutter) * 2));
}

.nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  padding-right: var(--space-xs);
}
.nav__mark::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}

.nav__links { display: flex; gap: 2px; }
.nav__link {
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--ink-quiet);
  padding: 8px var(--space-sm);
  border-radius: var(--radius-pill);
  white-space: nowrap;             /* never a two-line clickable */
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--ink); background: var(--paper-sunken); }

.nav__cta {
  font-size: var(--text-sm);
  font-weight: 550;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  padding: 9px var(--space-md);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav__cta:hover { opacity: 0.82; }

/* theme control — a real 3-way segmented control, not a binary flip */
.theme {
  display: flex;
  gap: 1px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--paper-sunken);
  border: 1px solid var(--rule);
}
.theme__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  width: 30px; height: 26px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.theme__btn:hover { color: var(--ink); }
.theme__btn[aria-pressed="true"] {
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.theme__btn svg { width: 14px; height: 14px; display: block; }

/* ============ Hero ============ */

.hero {
  /* Full-bleed colour field, not more page. This is what stopped the light
     theme reading as a generic sheet of paper: the fold is a block of colour
     the dark media sits inside, rather than a white expanse with a hole in it. */
  background: var(--field);
  color: var(--field-ink);
  padding-block: clamp(7rem, 16vh, 10rem) var(--space-3xl);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - (var(--page-max) / 2)));
  max-width: none;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--field-accent);
  margin-bottom: var(--space-md);
}

.hero__title {
  font-size: var(--text-display);
  max-width: 16ch;
  margin-bottom: var(--space-lg);
}

.hero__lede {
  font-size: var(--text-xl);
  color: var(--field-quiet);
  max-width: 46ch;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-xl);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-md);
  font-weight: 550;
  text-decoration: none;
  padding: 13px var(--space-lg);
  border-radius: var(--radius-pill);
  min-height: 44px;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { opacity: 0.9; }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { color: var(--ink); border: 1px solid var(--rule-strong); }
.btn--ghost:hover { background: var(--paper-sunken); }

.hero__meta {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--field-quiet);
  opacity: 0.75;
}

/* Buttons invert inside the field — the page-level accent is tuned for white
   and would be nearly invisible on deep teal. */
.hero .btn--primary { background: var(--field-accent); color: #06231F; }
.hero .btn--ghost { color: var(--field-ink); border-color: var(--field-rule); }
.hero .btn--ghost:hover { background: rgba(234, 244, 242, 0.08); }
.hero .media { box-shadow: 0 40px 90px -34px rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.09); }

/* ============ Media ============ */

.media {
  position: relative;
  background: var(--media-bg);
  border: 1px solid var(--media-rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--media-shadow);
}
.media video, .media img { display: block; width: 100%; height: auto; }

.hero__media { margin-top: var(--space-2xl); }

/* ============ Feature Stack ============ */

/* Alternating surfaces carry the rhythm — every other section drops onto the
   cool grey band. Full-bleed so the band reads as a stratum, not a card. */
.stack { padding-block: var(--space-3xl); }
.stack--band {
  background: var(--paper-sunken);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - (var(--page-max) / 2)));
  max-width: none;
}

.stack__row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

.stack__pane { position: sticky; top: 6.5rem; }

.stack__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  margin-bottom: var(--space-sm);
}
.stack__title { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.stack__body { color: var(--ink-quiet); max-width: var(--measure); }
.stack__body + .stack__body { margin-top: var(--space-md); }

.stack__facts {
  margin-top: var(--space-lg);
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.stack__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.stack__fact dt { color: var(--ink-faint); }
.stack__fact dd { margin: 0; color: var(--ink); text-align: right; }

.stack__scroller { display: grid; gap: var(--space-xl); }

/* ============ Inside (version + extensions) ============ */

.inside {
  padding-block: var(--space-3xl);
  background: var(--paper-sunken);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - (var(--page-max) / 2)));
  max-width: none;
}
.inside__head { max-width: 52ch; margin-bottom: var(--space-xl); }
.inside__title { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.inside__lede { color: var(--ink-quiet); }

.engine {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-lg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  background: var(--paper-raised);
  margin-bottom: var(--space-lg);
}
.engine__version {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--accent);
}
.engine__note { font-size: var(--text-md); color: var(--ink-quiet); max-width: 54ch; }

.exts { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; }
.exts li {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: 7px var(--space-sm);
  border-radius: var(--radius-sm);
}
.exts__count {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

/* ============ Promise ============ */

.promise { padding-block: var(--space-3xl); }
.promise__title { font-size: var(--text-display-s); max-width: 20ch; margin-bottom: var(--space-lg); }
.promise__body { color: var(--ink-quiet); max-width: 54ch; }
.promise__list {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: 0; list-style: none;
}
.promise__item { padding-top: var(--space-md); border-top: 1px solid var(--rule-strong); }
.promise__item h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.promise__item p { font-size: var(--text-md); color: var(--ink-quiet); }

/* ============ Close ============ */

.close {
  padding-block: var(--space-3xl);
  text-align: center;
  background: var(--field);
  color: var(--field-ink);
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter), calc(50vw - (var(--page-max) / 2)));
  max-width: none;
}
/* The app icon, shown at the decision point: this is the thing that will be
   in your Dock. The drop shadow is doing real work — the icon's squircle is
   dark and so is this section's field, so without it the edges dissolve. */
.close__icon {
  display: block;
  inline-size: 112px;
  block-size: 112px;
  margin-inline: auto;
  margin-block-end: var(--space-lg);
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.45));
}

.close .btn--primary { background: var(--field-accent); color: #06231F; }
.close .btn--ghost { color: var(--field-ink); border-color: var(--field-rule); }
.close .btn--ghost:hover { background: rgba(234, 244, 242, 0.08); }
.close .close__meta { color: var(--field-quiet); opacity: 0.75; }
.close__title { font-size: var(--text-display-s); margin-bottom: var(--space-lg); }
.close__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-sm); }
.close__meta { margin-top: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-faint); }

/* ============ Ft5 · statement footer ============ */

.foot { padding-block: var(--space-2xl) var(--space-xl); border-top: 1px solid var(--rule); }
.foot__statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-width: 30ch;
  margin-bottom: var(--space-xl);
}
.foot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}
.foot__meta a { text-decoration: none; color: var(--ink-quiet); white-space: nowrap; }
.foot__meta a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============ Responsive ============ */

@media (max-width: 60rem) {
  .nav__links { display: none; }   /* pill keeps wordmark + theme + CTA */
  .promise__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  /* F2 sticky-scroll → linear paired blocks. Sticky is rough on phones and the
     macrostructure file says so; this is the mandated fallback, not a shrug. */
  .stack__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .stack__pane { position: static; }
  .stack__scroller { gap: var(--space-lg); }
  .stack { padding-block: var(--space-2xl); }

  .nav { gap: 4px; padding-left: var(--space-sm); }

  .hero { padding-block: clamp(6rem, 14vh, 8rem) var(--space-xl); }
  .promise__list { grid-template-columns: minmax(0, 1fr); }
  .inside, .promise, .close { padding-block: var(--space-2xl); }
}

@media (max-width: 26rem) {
  .nav__cta { padding-inline: var(--space-sm); }
  .theme__btn { width: 34px; height: 30px; }   /* ≥44px combined hit row */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------- mark -- */
/* The dp monogram beside the wordmark. A background image rather than an
   <img>, because the site re-tunes its accents per theme and `src` cannot be
   themed from CSS — the light file uses --accent/--signal's light values so
   the mark does not become the one low-contrast thing on a near-white page.
   Default is light, matching :root; dark overrides below, the same shape as
   tokens.css. */
.nav__glyph {
  display: block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  background: url("../../shared/brand/dp-mark-light.svg") center / contain no-repeat;
  /* Optical: the p's descender makes the mark read low against a cap height. */
  margin-block-start: -0.08em;
}

:root[data-theme="dark"] .nav__glyph {
  background-image: url("../../shared/brand/dp-mark.svg");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav__glyph {
    background-image: url("../../shared/brand/dp-mark.svg");
  }
}

/* The DuckDB Foundation's trademark notice, which spec/00 requires in the site
 * footer and the About window. Quiet by design: it is a legal notice, not a
 * claim, and giving it the same weight as the nav links would misrepresent
 * both. */
.foot__legal {
  margin: var(--space-md) 0 0;
  max-width: 62ch;
  font-size: 0.82rem;
  line-height: var(--leading-body);
  color: var(--ink-faint);
}

/* FAQ. Shares `.qa` with the support page (defined in doc.css) so a question
 * reads the same in both places. */
.faq { padding-block: var(--space-2xl); }
.faq__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-xl);
  max-width: 24ch;
}
.faq .qa { max-width: 72ch; }
.faq__more { margin-top: var(--space-lg); }
.faq__more a { color: var(--accent); }

/* The hero lockup: icon plus name.
 *
 * Stacked on its own the icon read as a bullet above a 5rem headline, and the
 * hero never stated the product's name at all — the headline is a claim, and
 * the only "Datapuddle" above the fold was the nav pill at 13px. Pairing them
 * gives the mark a job and introduces the name in the same gesture. */
.lockup {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.lockup__mark { width: clamp(56px, 6vw, 76px); height: auto; }
.lockup__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}