/* Pollard Labs
 *
 * Same tokens and typefaces as the Threshold site, with one deliberate
 * subtraction: the studio has no accent colour of its own. Every hue on this
 * page belongs to a product. That way the frame stays quiet and the thing
 * being framed is the only thing that carries colour — and adding a second
 * product later means adding a second colour, not repainting the studio.
 *
 * Fonts are self-hosted rather than pulled from Google, for the same reason
 * they are on the Threshold site: hotlinking transmits visitor IPs to a third
 * party, and this site sets no cookies and runs no analytics.
 */

/* ---------- fonts ---------- */

/* Only the weights this page actually sets. Space Grotesk 500 and JetBrains
   Mono 600 exist on the Threshold site but are unused here, so their files
   are not shipped. */
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 700;
  src: url('/static/fonts/spacegrotesk-700.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400;
  src: url('/static/fonts/instrumentsans-400.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 600;
  src: url('/static/fonts/instrumentsans-600.woff2') format('woff2'); font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400;
  src: url('/static/fonts/jetbrainsmono-400.woff2') format('woff2'); font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  --bg:        #07090C;
  --card:      #0F141B;
  --text:      #E8EDF2;

  --line:      rgba(255,255,255,.07);
  --line-soft: rgba(255,255,255,.045);
  --mut:       rgba(255,255,255,.56);   /* 4.5:1 on --bg; the floor for prose */
  --mut-dim:   rgba(255,255,255,.38);   /* non-essential only — fails AA */

  /* Product colours. The only hues on the page — the studio itself has none.
     Both are sampled from the products, not invented, and both clear 4.5:1
     on --bg (Threshold 8.9:1, Foldwing 6.5:1) so either can carry link text.

     Foldwing's rose is deliberately not the app's IFR salmon (#FF8080). Two
     cards side by side on an aviation site, one green and one red, must not
     read as a flight-category pair. */
  --threshold: #37E0A6;

  /* foldwing.app declares --red: #D94D59, tuned for its own paper-white
     background. Same hue (~355°) but only 4.5:1 on --card here, which is the
     AA line with no margin left. This is that red raised for a dark surface,
     and it happens to be the game's actual in-engine wing material. */
  --foldwing:  #F06574;

  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body:    'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --r-sm: 10px; --r: 16px; --r-lg: 22px;
  --shell: 940px;
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

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

.skip {
  position: absolute; left: -9999px;
  top: 12px; padding: 10px 16px;
  background: var(--card); border-radius: var(--r-sm);
}
.skip:focus { left: 24px; z-index: 10; }

/* ---------- wordmark ---------- */

/* Set in CSS rather than as an SVG so it stays crisp at any size and inherits
   the page's text colour. The bar is the mark; the letters are the name. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark::before {
  content: '';
  width: 4px; height: 17px;
  border-radius: 2px;
  background: currentColor;
  flex: none;
}

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

.nav {
  border-bottom: 1px solid var(--line);
}
.nav .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}
.nav-links {
  display: flex;
  gap: 24px;
  font-size: 15px;
}
.nav-links a {
  color: var(--mut);
  text-decoration: none;
}
.nav-links a:hover { color: var(--text); }

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

.hero { padding: 96px 0 72px; }

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 6.2vw, 60px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 24px;
  max-width: 16ch;
}

.lede {
  font-size: 19px;
  color: var(--mut);
  max-width: 56ch;
  margin: 0;
}
.lede + .lede { margin-top: 18px; }

/* ---------- sections ---------- */

section { padding: 56px 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mut-dim);
  margin: 0 0 24px;
}

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}

h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
}

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* ---------- product cards ---------- */

/* Each card sets --accent to its own product colour; the tag, the hover rim
   and the call to action all read from it. Adding a third product is a new
   colour token and one modifier class, not a change to any of this. */

.products {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
}

.product {
  --accent: var(--threshold);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px;
  transition: border-color .18s ease;
}
.product:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}

.product--foldwing { --accent: var(--foldwing); }

.product-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* 30px tall, not the 22px the Threshold site's nav uses. Eight bars of a
   136×100 box are ~2px each at 22px and start to comb; here there is room,
   and it balances the 25px wordmark beside it. */
.product-head img { height: 30px; width: auto; flex: none; }

.product-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -.01em;
}

.tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
}

.product p { color: var(--mut); font-size: 16px; }

/* margin-top:auto pins the call to action to the bottom of the card, so two
   cards with different amounts of copy still line their links up. */
.product-go {
  margin-top: auto;
  padding-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

/* ---------- principles ---------- */

.principles {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
}
.principles > div {
  background: var(--bg);
  padding: 26px 24px;
}
.principles p {
  color: var(--mut);
  font-size: 16px;
}

/* ---------- contact ---------- */

.contact-mail {
  font-family: var(--mono);
  font-size: clamp(19px, 3.6vw, 26px);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 3px;
}
.contact-mail:hover { border-bottom-color: var(--text); }

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

footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding: 32px 0 56px;
  color: var(--mut-dim);
  font-size: 14px;
}
footer .shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---------- narrow ---------- */

/* Two product cards need more room than the three principle columns do, so
   they collapse to one column earlier. */
@media (max-width: 860px) {
  .products { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero { padding: 64px 0 48px; }
  section { padding: 44px 0; }
  .principles { grid-template-columns: 1fr; }
  .product { padding: 24px; }
  .nav-links { gap: 18px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}