/* =========================================================
   Airclerk — design system
   Palette: warm paper, ink, muted clay accent
   Type:    Newsreader (display) / IBM Plex Sans (body) /
            IBM Plex Mono (labels)
   ========================================================= */

:root {
  --paper:        oklch(0.972 0.008 82);
  --paper-2:      oklch(0.955 0.010 82);
  --paper-3:      oklch(0.930 0.012 82);
  --ink:          oklch(0.190 0.012 60);
  --ink-2:        oklch(0.320 0.010 60);
  --ink-3:        oklch(0.520 0.008 60);
  --ink-4:        oklch(0.680 0.008 60);
  --rule:         oklch(0.870 0.012 70);
  --rule-strong:  oklch(0.760 0.012 70);
  --accent:       oklch(0.625 0.180 38);
  --accent-soft:  oklch(0.900 0.055 50);
  --accent-ink:   oklch(0.430 0.140 38);
  --accent-deep:  oklch(0.330 0.110 38);

  --font-display: "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-body:    "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Menlo", monospace;

  --max:          1240px;
  --gutter:       clamp(20px, 4vw, 56px);

  --nav-h:        64px;

  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv02";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

::selection { background: var(--accent); color: var(--paper); }

/* ---------- type ---------- */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
  overflow-wrap: break-word;
  /* Trim leading above cap-height so display headings align optically
     with adjacent labels at their grid cell top. */
  text-box: trim-start cap alphabetic;
}
.display em {
  font-style: italic;
  font-variation-settings: "opsz" 36;
  color: var(--accent-ink);
}

.h1 { font-size: clamp(44px, 7.2vw, 104px); }
.h2 { font-size: clamp(34px, 4.6vw, 64px); }
.h3 { font-size: clamp(26px, 3vw, 40px); }
.h4 { font-size: clamp(20px, 2vw, 26px); }

.lede {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

p { text-wrap: pretty; }

.label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.label--ink { color: var(--ink); }
.label--accent { color: var(--accent); }

.label-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.label-row::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.label-row--end::after {
  content: "";
  width: 24px; height: 1px; background: currentColor; opacity: 0.6;
}
.label-row--end::before { content: none; }

/* ---------- layout ---------- */

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

.section {
  padding-block: clamp(72px, 10vw, 144px);
  border-top: 1px solid var(--rule);
}
.section--first { border-top: 0; }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }

.grid {
  display: grid;
  gap: clamp(24px, 3vw, 48px);
}

.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .cols-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: 1 / -1; }
@media (max-width: 900px) {
  [class*="span-"] { grid-column: 1 / -1; }
}

.stack-2 > * + * { margin-top: 8px; }
.stack-3 > * + * { margin-top: 16px; }
.stack-4 > * + * { margin-top: 24px; }
.stack-6 > * + * { margin-top: 40px; }
.stack-8 > * + * { margin-top: 64px; }

.divider {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--rule); }

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  line-height: 1;
}
.brand__mark {
  width: 24px;
  height: 24px;
  display: inline-block;
  background-color: var(--accent);
  -webkit-mask: url('brand-mark.svg') center/contain no-repeat;
          mask: url('brand-mark.svg') center/contain no-repeat;
  flex-shrink: 0;
}
.brand__word {
  display: inline-block;
  width: 86px;
  height: 18px;
  background-color: var(--ink);
  -webkit-mask: url('wordmark.svg') left center/contain no-repeat;
          mask: url('wordmark.svg') left center/contain no-repeat;
}
.brand__sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.brand small {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid var(--rule);
  line-height: 1;
  align-self: center;
}
@media (max-width: 600px) { .brand small { display: none; } }

.nav__links {
  display: flex;
  gap: clamp(18px, 2vw, 32px);
  align-items: center;
}
.nav__links a {
  font-size: 14px;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
  letter-spacing: -0.005em;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav__cta:hover { background: var(--ink); color: var(--paper); }
.nav__cta .arrow { transition: transform .2s var(--ease); }
.nav__cta:hover .arrow { transform: translateX(3px); }

.nav__burger { display: none; }
@media (max-width: 980px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .nav__burger::after {
    content: "";
    width: 18px;
    height: 10px;
    background:
      linear-gradient(currentColor, currentColor) top/100% 1px no-repeat,
      linear-gradient(currentColor, currentColor) bottom/100% 1px no-repeat,
      linear-gradient(currentColor, currentColor) center/100% 1px no-repeat;
  }
}

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  background: var(--paper);
  z-index: 49;
  padding: 32px var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
  border-top: 1px solid var(--rule);
  overflow: auto;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 28px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  font-size: 15px;
  letter-spacing: -0.005em;
  border: 1px solid var(--ink);
  transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
  cursor: pointer;
}
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.btn--link:hover { color: var(--accent-ink); border-bottom-color: var(--accent-ink); }

/* ---------- accent flourishes ---------- */

.accent-rule {
  width: 32px; height: 2px; background: var(--accent); display: inline-block;
}

.hero__eyebrow .dot {
  /* upgraded in hero rules below */
}

/* ---------- hero ---------- */

.hero {
  padding-top: clamp(72px, 12vw, 144px);
  padding-bottom: clamp(72px, 10vw, 144px);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.hero__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);
}

.hero__sub {
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 64ch;
}

.hero__meta {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 760px) {
  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero__meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.hero__meta dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  letter-spacing: -0.01em;
}

/* ---------- placeholder imagery ---------- */

.slot {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      var(--paper-2),
      var(--paper-2) 6px,
      var(--paper-3) 6px,
      var(--paper-3) 12px
    );
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  aspect-ratio: 4 / 3;
}
.slot::before, .slot::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed color-mix(in oklab, var(--ink-3) 35%, transparent);
  pointer-events: none;
}
.slot::after { display: none; }
.slot span {
  background: var(--paper);
  padding: 6px 10px;
  border: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.slot--tall { aspect-ratio: 3 / 4; }
.slot--wide { aspect-ratio: 16 / 9; }
.slot--square { aspect-ratio: 1 / 1; }

/* ---------- cards & rows ---------- */

.card {
  padding: 28px 28px 32px;
  border-top: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
  transition: background .2s var(--ease);
}
.card:hover { background: var(--paper-2); }
.card__index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-wrap: balance;
}
.card__body { color: var(--ink-2); font-size: 15px; }
.card__more {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card__more .arrow { transition: transform .2s var(--ease); }
.card:hover .card__more .arrow { transform: translateX(3px); }

/* row item — used in feature lists */
.row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row__index { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; }
.row__title { font-family: var(--font-display); font-size: clamp(22px, 1.8vw, 26px); letter-spacing: -0.01em; }
.row__body { color: var(--ink-2); max-width: 60ch; grid-column: 2 / 3; }
.row__cta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
@media (max-width: 760px) {
  .row { grid-template-columns: 60px 1fr; }
  .row__cta { grid-column: 1 / -1; padding-top: 8px; }
}

/* ---------- pill / chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  background: var(--paper);
}
.chip--accent { color: var(--accent-ink); border-color: var(--accent-soft); background: color-mix(in oklab, var(--accent) 6%, var(--paper)); }

/* ---------- FAQ / accordion ---------- */

.faq {
  border-top: 1px solid var(--rule);
}
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__head {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  gap: 16px;
  align-items: center;
  padding: 24px 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq__head .idx {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}
.faq__plus {
  position: relative;
  width: 16px; height: 16px; justify-self: end;
}
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--ink);
}
.faq__plus::before { width: 16px; height: 1px; }
.faq__plus::after { width: 1px; height: 16px; transition: transform .2s var(--ease); }
.faq__item[open] .faq__plus::after { transform: rotate(90deg); }

.faq__body {
  padding: 0 0 28px 64px;
  color: var(--ink-2);
  max-width: 72ch;
}
.faq__body p + p { margin-top: 12px; }

/* native details */
details.faq__item > summary { list-style: none; cursor: pointer; }
details.faq__item > summary::-webkit-details-marker { display: none; }

/* ---------- list checks ---------- */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.checklist li:first-child { border-top: 1px solid var(--rule); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 18px;
  width: 14px; height: 8px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* simple bulletless list */
.tightlist { list-style: none; margin: 0; padding: 0; color: var(--ink-2); }
.tightlist li { padding: 6px 0; }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(56px, 7vw, 96px);
  background: var(--paper);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 900px) {
  .foot__top { grid-template-columns: 1fr 1fr; }
}
.foot__col h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
}
.foot__col a {
  display: block;
  padding: 4px 0;
  color: var(--ink-2);
  font-size: 14px;
}
.foot__col a:hover { color: var(--ink); }

.foot__bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.foot__wordmark {
  font-family: var(--font-display);
  font-size: clamp(60px, 11vw, 156px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
  margin: 56px 0 0;
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- diagram / architecture sketch ---------- */
.arch {
  border: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 44px);
  background: var(--paper-2);
}
.arch__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px dashed var(--rule);
  align-items: start;
}
.arch__row:first-child { border-top: 0; padding-top: 0; }
.arch__row:last-child { padding-bottom: 0; }
.arch__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 4px;
}
.arch__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.arch__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.arch__tag--accent { color: var(--accent-ink); border-color: var(--accent-soft); background: color-mix(in oklab, var(--accent) 7%, var(--paper)); }

/* ---------- callout ---------- */
.callout {
  border: 1px solid var(--ink);
  padding: clamp(32px, 4vw, 56px);
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
}
@media (max-width: 760px) {
  .callout { grid-template-columns: 1fr; }
}
.callout--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.callout--ink .btn { border-color: var(--paper); color: var(--paper); }
.callout--ink .btn:hover { background: var(--paper); color: var(--ink); }
.callout--ink .label { color: color-mix(in oklab, var(--paper) 75%, transparent); }

/* small util */
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-display); }
.center { text-align: center; }
.max-prose { max-width: 64ch; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 24px; }
.mt-6 { margin-top: 40px; }
.mt-8 { margin-top: 64px; }