/* Layout: 12-column Swiss grid. Wide = one screen (logo left, copy from column 7, four-cell footer on columns 1/4/7/10).
   Narrow = single column, footer in a 2x2 at the bottom of the same screen. */
:root {
  --paper: #a5a897;
  --ink: #252915;
  --grid: rgba(255, 255, 255, 0.28);

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --m: clamp(20px, 3.2vw, 56px);
  --gap: clamp(12px, 1.6vw, 28px);

  --ease-swipe: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-slide: cubic-bezier(0.65, 0, 0.15, 1);
  --ease-drop: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Inter (rsms.me/inter), open source under the SIL Open Font License 1.1: self-hosted, no license
   required. Variable fonts, upright + italic; the license text sits beside them in assets/fonts/. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color-scheme: light; }
body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--paper); }

/* Hidden only while the intro script is arming its animations. Without JS everything is simply visible. */
html.intro .logo,
html.intro .copy,
html.intro .foot { visibility: hidden; }

.page {
  padding-inline: var(--m);
  padding-block: var(--m);
  overflow-x: clip;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.foot { margin-top: auto; }
/* Home is Tyler's single screen: hero above, footer pinned to the bottom, no scroll. */
.page.home {
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: grid;
  grid-template-rows: 1fr auto;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 0;
  padding-top: calc(33svh - var(--m));
  display: grid;
  align-content: start;
  row-gap: clamp(28px, 9vw, 44px);
}
.logo {
  margin: 0;
  width: clamp(140px, 36vw, 260px);
  line-height: 0;
  cursor: default;
  transform-origin: 0 50%;
}
.logo-mask { display: block; }
.logo a { display: block; color: inherit; text-decoration: none; }
.logo-img { display: block; width: 100%; height: auto; overflow: visible; clip-path: inset(-40% -40% 0 -40%); }
.logo-img path { transform-box: fill-box; transform-origin: 50% 50%; }
.mark-img { transform-origin: 50% 50%; }

.copy {
  font-size: 14px;
  line-height: 1.27;
  letter-spacing: -0.003em;
  max-width: 38em;
  min-width: 0;
}
.copy p { margin: 0; }
.copy p + p { margin-top: 1.27em; }
.ln { display: block; overflow: hidden; padding-block: 0.08em; margin-block: -0.08em; }
.ln-i { display: block; will-change: transform; }
/* intro.js measures each word span's top to group lines; a hyphenated word ("record-keeping") that
   breaks at its hyphen mis-groups and the split line then wraps again. Keep each word span, and so
   each measured line, on one line. */
[data-split] > span { white-space: nowrap; }

.copy h1, .copy h2 { margin: 0; font: inherit; letter-spacing: inherit; }
.copy h1 + p, .copy h1 + .item { margin-top: 1.27em; }
/* Sub-page titles stand out from the paragraphs (owner 2026-10-02). Inter's variable
   font renders a true Bold, not a synthesized one. */
.copy h1 { font-weight: 700; }
.copy a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
/* Paragraphs holding links, and the nav, are not line-split by the intro script; they fade in as it settles. */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
html:not(.intro) .copy .plain,
html:not(.intro) .copy .nav { animation: fade-in 900ms cubic-bezier(0.16, 1, 0.3, 1) 1.9s both; }
/* Sub-pages run the whole intro three times faster (intro.js reads the same attribute). */
html[data-intro-speed="3"] .copy .plain,
html[data-intro-speed="3"] .copy .nav { animation-duration: 300ms; animation-delay: 633ms; }

/* ---------- Site nav: one line in the footer's small type ---------- */
.nav {
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}
.copy .nav:first-child { margin-bottom: clamp(28px, 3vw, 52px); }
.copy * + .nav { margin-top: clamp(28px, 3vw, 52px); }
/* Items sit apart on a flex row; a thin dim hairline (aria-hidden, never a link) divides them. */
.copy .nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(8px, 1vw, 16px); row-gap: 0.7em; }
.nav .sep { display: block; width: 2px; height: 0.95em; background: currentColor; opacity: 0.6; }
/* Phone widths: two balanced lines, breaking after "The company" (the third hairline, child 6 in
   every nav) so no hairline hangs at a line end. */
@media (max-width: 439.98px) {
  .copy .nav { row-gap: 0; }
  .nav .sep:nth-child(6) { flex-basis: 100%; height: 0; margin-block: 0.35em; }
}
.copy .nav a { text-decoration: none; }
.copy .nav a:hover { text-decoration: underline; }

/* ---------- Section pages ---------- */
.item + .item { margin-top: 2.54em; }
.item h2 + p { margin-top: 0.4em; }
/* The status line is each product's label (owner 2026-10-09: after the paragraph it read as a
   heading for the NEXT product). It now sits above the title, bold and letter-spaced, tight to
   the title it describes. */
.item .status {
  margin: 0 0 0.5em;
  font-size: 10px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
}
.contact-line span { display: inline-block; min-width: 14em; }
/* Sub-pages grow with their content; keep clear air between the last line and the footer. */
.page:not(.home) > .hero { padding-bottom: clamp(48px, 6vw, 96px); }
/* What we build carries three products: a higher start and tighter blocks keep it to one screen.
   Body type stays on Tyler's scale; nav and footer are the same as every other page. */
.page.compact > .hero { padding-top: max(0px, calc(6svh - var(--m))); padding-bottom: clamp(32px, 4vw, 64px); }
.compact .item + .item { margin-top: 1.6em; }

/* ---------- Footer ---------- */
.foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(28px, 8vw, 44px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}
.cell { min-width: 0; }
/* The footer is the copyright block alone, right-aligned on every page. */
.legal { grid-column: 1 / 13; grid-row: 1; text-align: right; }
.mask { overflow: hidden; padding-block: 0.1em; margin-block: -0.1em; }
.drop { display: block; will-change: transform; }
.drop > span, .drop > a { display: block; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.mark { display: none; }

/* ---------- Wide: one screen, footer pinned to the bottom ---------- */
@media (min-width: 960px) {
  .hero {
    min-height: 0;
    padding-top: max(0px, calc(39svh - var(--m)));
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    row-gap: 0;
    align-content: start;
    align-items: start;
  }
  .page.compact > .hero { padding-top: max(0px, calc(18svh - var(--m))); }
  .logo { grid-column: 1 / 6; grid-row: 1; width: clamp(150px, 15.1vw, 340px); }
  .copy {
    grid-column: 7 / 13; grid-row: 1;
    font-size: clamp(13px, 1.02vw, 18px);
  }
  .foot {
    padding-top: 0;
    align-items: end;
    font-size: clamp(9.5px, 0.72vw, 12.5px);
  }
  .page.home { min-height: 560px; }
  .nav, .item .status { font-size: clamp(9.5px, 0.72vw, 12.5px); }
  .legal { grid-column: 1 / 12; }
  .mark {
    display: block; grid-column: 12 / 13; grid-row: 1;
    justify-self: end; align-self: end;
    width: clamp(18px, 1.78vw, 34px); line-height: 0;
  }
  .mark-mask { display: block; }
  .mark-img { display: block; width: 100%; height: auto; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .ln-i, .drop, .logo { will-change: auto; }
  html:not(.intro) .copy .plain, html:not(.intro) .copy .nav { animation: none; }
}