/*
  Easytech: styles.css
  Monochrome, light and dark by system setting. No build step, no images other than SVG.
  Palette comes from the EasyVoice colour system (the bronze accent is deliberately not used here).
  If you change this file, bump the ?v= number on the stylesheet link in every page,
  because nginx caches .css for 30 days.
*/

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  /* palette */
  --ink: #0A0A0B;
  --graphite: #262628;
  --slate: #525256;
  --ash: #8C8C91;
  --mist: #D4D4D6;
  --paper: #FAFAF9;

  /* roles, light */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--graphite);      /* body copy */
  --fg-quiet: var(--slate);     /* captions, small print (7.4:1 on paper) */
  --rule: var(--mist);

  /* the one inverted block on the page (the product tag) */
  --panel-bg: var(--ink);
  --panel-fg: var(--paper);
  --panel-fg-2: var(--mist);
  --panel-quiet: var(--ash);
  --panel-rule: var(--graphite);

  /* type */
  --display: "Jost", "Futura", "Century Gothic", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* shape and space */
  --radius: 2px;
  --gutter: 16px;
  --max: 72rem;
  --tag-cut: 36px;              /* clipped corner of the product tag, echoes the logo badge */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --fg: var(--paper);
    --fg-2: var(--mist);
    --fg-quiet: var(--ash);      /* 5.8:1 on ink */
    --rule: var(--graphite);

    --panel-bg: var(--paper);
    --panel-fg: var(--ink);
    --panel-fg-2: var(--graphite);
    --panel-quiet: var(--slate);
    --panel-rule: var(--mist);
  }
}

@media (min-width: 40em) { :root { --gutter: 24px; } }
@media (min-width: 64em) { :root { --gutter: 40px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

@media (min-width: 56em) {
  body { font-size: 1.0625rem; }
}

main { flex: 1 0 auto; }

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }

svg { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

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

::selection { background: var(--fg); color: var(--bg); }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  padding: 0.5rem 0.875rem;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* ---------- Header ---------- */
.site-header { padding-block: 1rem; }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header--bare .wrap { justify-content: flex-end; }

.brand { display: block; line-height: 0; color: var(--fg); }
.brand .logo { width: 10.5rem; }       /* 168 px: the monoline wordmark (logo 02) gets fragile below ~160 px */

.nav { display: flex; gap: 1.25rem; font-size: 0.9375rem; }
.nav a {
  display: inline-block;
  padding-block: 0.5rem;               /* 44px-ish tap target */
  color: var(--fg-2);
  text-decoration: none;
}
.nav a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 0.3em; }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2rem, 7vw, 5rem) clamp(3rem, 9vw, 7rem); }

.hero .logo {
  width: min(100%, 22rem);
  color: var(--fg);
}

.hero-copy {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2rem, 6vw, 4.5rem);
}

.hero h1 {
  font: 500 clamp(2.5rem, 1.2rem + 6.2vw, 5.5rem) / 1.02 var(--display);
  letter-spacing: -0.025em;
  max-width: 11em;
  text-wrap: balance;
}

.mission {
  color: var(--fg-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  max-width: 30rem;
}

@media (min-width: 56em) {
  .hero-copy {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
    align-items: end;
  }
  .hero h1 { grid-column: 1 / span 8; }
  .mission { grid-column: 9 / -1; padding-bottom: 0.6rem; }
}

/* ---------- Sections ---------- */
.section {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 7vw, 5rem);
  scroll-margin-top: 0.5rem;
}

.section > .wrap {
  display: grid;
  gap: 1.75rem;
}

.section h2 {
  font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 2rem) / 1.15 var(--display);
  letter-spacing: -0.01em;
}

@media (min-width: 56em) {
  .section > .wrap {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 2rem;
  }
  .section-head { grid-column: 1 / span 4; }
  .section-body { grid-column: 5 / -1; }
}

/* ---------- Product tag ---------- */
.product {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--panel-bg);
  color: var(--panel-fg);
  border-radius: var(--radius);
}

/* Cut the top-right corner at 45 degrees and punch an eyelet, as on the logo badge.
   Done with a gradient so the corner is truly transparent in both themes. */
@supports (background: linear-gradient(225deg, transparent 0, #000 0)) {
  .product {
    background: linear-gradient(225deg, transparent 0 calc(var(--tag-cut) * 0.7071), var(--panel-bg) calc(var(--tag-cut) * 0.7071));
  }
}

.product::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
}

.product-kicker {
  color: var(--panel-quiet);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.product-name {
  margin-top: 0.5rem;
  font: 500 clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem) / 1 var(--display);
  letter-spacing: -0.02em;
}

.product-lede {
  margin-top: 0.75rem;
  color: var(--panel-fg-2);
  font-size: 1.125rem;
}

.facts {
  margin-top: 1.75rem;
  border-top: 1px solid var(--panel-rule);
}

.facts div {
  display: grid;
  gap: 0.125rem;
  padding-block: 0.75rem;
  border-bottom: 1px solid var(--panel-rule);
}

.facts dt { color: var(--panel-quiet); font-size: 0.875rem; }
.facts dd { color: var(--panel-fg); }

@media (min-width: 40em) {
  .facts div { grid-template-columns: 10rem 1fr; gap: 1.5rem; }
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  margin-top: 1.75rem;
  padding: 0.625rem 1.25rem;
  background: var(--panel-fg);
  color: var(--panel-bg);
  border: 1px solid var(--panel-fg);
  border-radius: var(--radius);
  font: 500 0.9375rem/1.2 var(--body);
  text-decoration: none;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
.btn::after { content: "\2192"; content: "\2192" / ""; }
.btn:hover { background: transparent; color: var(--panel-fg); }

.quiet {
  margin-top: 1.5rem;
  color: var(--fg-quiet);
}

/* ---------- Principles ---------- */
.principles li {
  display: grid;
  gap: 0.375rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--rule);
}
.principles li:first-child { padding-top: 0; border-top: 0; }

.principles h3 {
  font: 500 1.25rem / 1.25 var(--display);
  letter-spacing: -0.005em;
}
.principles p { color: var(--fg-2); max-width: 34rem; }

@media (min-width: 40em) {
  .principles li { grid-template-columns: minmax(9rem, 14rem) 1fr; column-gap: 2rem; }
}

/* ---------- Contact and prose ---------- */
.contact-line {
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  line-height: 1.45;
  max-width: 44rem;
}

.prose { max-width: 38rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
  margin-top: 2.25rem;
  font: 500 1.375rem / 1.2 var(--display);
  letter-spacing: -0.005em;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--fg-2); }
.prose ul { list-style: disc; padding-left: 1.25rem; }
.prose li + li { margin-top: 0.375rem; }
.prose a { color: var(--fg); }
.prose .meta { color: var(--fg-quiet); font-size: 0.875rem; }

.page-title {
  font: 500 clamp(2.25rem, 1.4rem + 4.2vw, 4rem) / 1.05 var(--display);
  letter-spacing: -0.02em;
}

/* a content page (privacy, 404): title left, prose right on wide screens */
.page { padding-block: clamp(2rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem); }
.page > .wrap { display: grid; gap: 1.75rem; }

@media (min-width: 56em) {
  .page > .wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
  .page .section-head { grid-column: 1 / span 4; }
  .page .section-body { grid-column: 5 / -1; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 1.75rem 2.25rem;
  color: var(--fg-quiet);
  font-size: 0.875rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer-links a { display: inline-block; padding-block: 0.25rem; }

/* ---------- Motion: one page-load reveal, off when reduced motion is requested ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .rise.d1 { animation-delay: 0.08s; }
  .rise.d2 { animation-delay: 0.16s; }
  .rise.d3 { animation-delay: 0.24s; }

  @keyframes rise {
    from { transform: translateY(10px); }   /* motion only: content is visible at rest, never parked at opacity 0 */
    to   { transform: none; }
  }
}

@media print {
  .nav, .skip { display: none; }
}