/* Stillwork Labs — stillworklabs.com
   Deliberately NOT softkeel.com. Softkeel is dark navy and cream because it is a
   consumer product you use at night; the parent company is warm paper and warm
   graphite, so a second product never looks off-brand next to the first.

   Palette comes from the logo, not the other way round. Measured off
   `stillworklabs4096x2304.png`: the sails are #545252 with a #9C9A92 edge and the
   wordmark is #999999. The accent was deep pine #235C4E until 2026-08-20 — there
   was no green anywhere in the logo, so it is graphite now.

   Palette: paper #FAF8F3, ink #16181B, graphite #545252.
   Headings are a system serif, body is a system sans. No web fonts — the CSP in
   staticwebapp.config.json is self-only, and a font request that 404s is worse
   than a stack that was always going to render locally. */

:root {
  --paper:     #faf8f3;
  --paper-2:   #f3efe6;
  --paper-3:   #ece6d9;
  --ink:       #16181b;
  --ink-2:     #3c424a;
  --muted:     #6f6b66;
  --line:      #e2dbcc;
  --line-2:    #d3c9b5;
  --graphite:      #545252;   /* the sail fill, straight off the master art */
  --graphite-lift: #6b6866;   /* hover — the sails lifted, not a new colour */
  --graphite-wash: #eeece7;   /* warm tint, so it sits on paper not on white */
  --edge:          #9c9a92;   /* the stroke around the sails */

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

a { color: var(--graphite); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

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

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

.skip {
  position: absolute; left: -9999px;
  background: var(--graphite); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 6px 0; z-index: 99;
}
.skip:focus { left: 0; top: 0; }

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

h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; }

h1, h2 { font-family: var(--serif); line-height: 1.1; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3 {
  font-family: var(--sans);
  font-size: 1.06rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  font-weight: 650;
}

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.08rem, 2vw, 1.31rem);
  line-height: 1.58;
  color: var(--ink-2);
}
.measure { max-width: 34ch; }
.measure-wide { max-width: 62ch; }

/* Small utilities. These exist as classes rather than style="" attributes on
   purpose: the CSP in staticwebapp.config.json is style-src 'self', which blocks
   inline style attributes outright. Keep it that way — add a class, not a style. */
.tight      { margin-top: 1.3rem; }
.tighter    { margin-top: 1.4rem; }
.dim        { color: var(--muted); }
.footnote   { margin-top: 2rem; color: var(--muted); font-size: .95rem; }
.cta-tight  { margin-top: 1.9rem; }

.eyebrow {
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 1rem;
}

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 68px;
}

/* The mark is the three-sail W from the master vector. Three things it dictates:

   - the WORDMARK COMES FIRST and the sails sit to its RIGHT. That is the order in
     the master art and it is the opposite of softkeel.com, whose mark leads. The
     order lives in the HTML, not in row-reverse, so what is read matches what is
     seen. Do not "fix" it to match the sibling site.
   - it is NOT square, it is 1.26:1, so width and height are set independently.
     A square box letterboxes it and it stops matching the art.
   - the gap is 34.8% of the mark's width in the master, which is where .8rem
     comes from at a 38px mark.

   The master also sets "Stillwork Labs" in one weight and one grey, so there is no
   second colour on "Labs" any more. */
.logo { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo .mark { width: 38px; height: 30px; flex: none; }
.logo .word {
  font-family: var(--sans);
  font-size: 1.24rem;
  letter-spacing: 0;
  font-weight: 400;
  color: #6a6a6a;   /* the logo grey is #999; on paper that is 2.5:1, which fails
                       for a link, so the wordmark is darkened to clear 5.9:1 */
}

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: var(--ink-2); font-size: .95rem; font-weight: 500; }
.nav a:hover { color: var(--graphite); }
/* `.nav a` outranks `.btn`, so without this the header button inherits --ink-2 and
   sits dark-on-dark. It did the same in pine; graphite only made it obvious. */
.nav .btn { color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--graphite); color: #fff;
  padding: .72rem 1.35rem;
  border: 1px solid var(--graphite);
  border-radius: 999px;
  font-size: .95rem; font-weight: 600; letter-spacing: -0.005em;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--graphite-lift); border-color: var(--graphite-lift); text-decoration: none; }

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

@media (max-width: 720px) { .hide-sm { display: none; } }

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

section { padding: clamp(4rem, 9vw, 7rem) 0; }
.band { background: var(--paper-2); border-block: 1px solid var(--line); }
.hairline { border-top: 1px solid var(--line); }

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

.hero { padding-top: clamp(4.5rem, 11vw, 8.5rem); padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 56ch; margin-top: 1.6rem; }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: .55rem 1.6rem;
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: .89rem; color: var(--muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: .5rem; }
.hero-meta .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--graphite); flex: none; }

/* ---------- product card ---------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 3rem);
  margin-top: 2.5rem;
}
@media (max-width: 800px) { .product { grid-template-columns: 1fr; } }

.product .tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--graphite);
  background: var(--graphite-wash);
  border: 1px solid color-mix(in srgb, var(--graphite) 18%, transparent);
  border-radius: 999px;
  padding: .3rem .8rem;
  margin-bottom: 1.1rem;
}
.product h3 { font-family: var(--serif); font-size: 1.85rem; font-weight: 600; letter-spacing: -0.015em; }
.product .sub { color: var(--muted); margin: .35rem 0 1.1rem; font-size: .95rem; }

.stack-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; }
.stack-list li {
  display: flex; gap: .7rem; align-items: baseline;
  font-size: .93rem; color: var(--ink-2);
}
.stack-list li::before {
  content: ""; flex: none;
  width: 6px; height: 6px; margin-top: .45rem;
  border-radius: 50%; background: var(--line-2);
}

.product-figure {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #0d1626 0%, #17253c 100%);
  border-radius: 12px;
  padding: 2rem;
}
.product-figure svg { width: min(150px, 55%); height: auto; }

/* ---------- in development ----------
   Deliberately lighter than .product: these are real, running code but not
   finished, and the flagship has to stay the loudest thing in the section. */

.wip-head {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2.25rem;
  border-top: 1px solid var(--line-2);
}
.wip-head h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.wip-head p { margin-top: .6rem; color: var(--muted); font-size: .96rem; max-width: 60ch; }

.wip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.wip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 1.9rem);
}
.wip .tag {
  display: inline-flex; align-items: center;
  font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  background: var(--paper-3);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: .28rem .75rem;
  margin-bottom: 1rem;
}
.wip h3 {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.wip .sub { color: var(--muted); font-size: .92rem; margin: .3rem 0 .95rem; }
.wip > p { font-size: .95rem; }
.wip .stack-list { margin-top: 1.15rem; }
.wip .stack-list li { font-size: .88rem; color: var(--muted); }

/* ---------- capability grid ---------- */

.caps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px;
  margin-top: 3rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.cap { background: var(--paper); padding: 1.9rem 1.7rem; }
.band .cap { background: var(--paper-2); }
.cap .ico { display: block; width: 24px; height: 24px; color: var(--graphite); margin-bottom: 1.1rem; }
.cap h3 { margin-bottom: .55rem; }
.cap p { font-size: .94rem; color: var(--muted); margin: 0; }

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

.principles { display: grid; gap: 0; margin-top: 3rem; border-top: 1px solid var(--line-2); }
.principle {
  display: grid;
  grid-template-columns: minmax(0, 26ch) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3.5rem);
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--line-2);
}
@media (max-width: 760px) { .principle { grid-template-columns: 1fr; gap: .7rem; } }
.principle h3 {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.principle p { color: var(--ink-2); margin: 0; }

/* ---------- about / facts ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.facts li {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.facts .k { color: var(--muted); }
.facts .v { color: var(--ink); font-weight: 550; text-align: right; }

/* ---------- closing ---------- */

.close-cta { text-align: center; }
.close-cta .lede { margin-inline: auto; max-width: 52ch; margin-top: 1.4rem; }
.close-cta .cta-row { justify-content: center; }

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

.site-footer {
  background: var(--ink);
  color: #b9bfc7;
  padding: 3.5rem 0 2.5rem;
  font-size: .9rem;
}
.site-footer a { color: #dfe3e8; }
.footer-top {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: center; justify-content: space-between;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #2b2f36;
}
.site-footer .logo { color: var(--paper); }
.site-footer .logo .word { color: #cdc9c2; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer-legal { padding-top: 1.6rem; color: #8b939d; max-width: 72ch; }
.footer-legal p { font-size: .84rem; line-height: 1.6; }

/* ---------- long-form pages (privacy, 404) ---------- */

.doc { padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.doc .inner { max-width: 68ch; }
.doc h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.doc h2 { font-size: 1.5rem; margin: 2.75rem 0 .85rem; }
.doc .updated { color: var(--muted); font-size: .92rem; margin-top: 1rem; }
.doc ul { padding-left: 1.15rem; margin: 0 0 1.15rem; }
.doc li { margin-bottom: .5rem; }
.doc .note {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--graphite);
  border-radius: 0 8px 8px 0;
  padding: 1.1rem 1.3rem;
  margin: 1.75rem 0;
  font-size: .95rem;
}

.center-page { text-align: center; padding: clamp(5rem, 14vw, 9rem) 0; }
/* 1.26:1, like the mark itself — a square box crushes the sails. */
.center-page .mark-lg { width: 84px; height: 66px; margin-bottom: 2rem; }
.center-page .lede { max-width: 44ch; margin: 1.2rem auto 0; }
.center-page .cta-row { justify-content: center; }