/* lockwoodsky.com — site layer.
   Sits on top of the brand kit (fonts.css, tokens.css, reset.css, base.css,
   components.css). Nothing here invents a colour, a face, or a scale — every
   value is a token. If you need a value that isn't a token, that's a brand
   question, not a CSS question.

   Rules this file is built around (brand/BRAND-SYSTEM.md):
   - White ground. Dark is a contained band at most, never the theme.
   - Kelly ONLY on hover, and the label flips to ink because white on Kelly is
     2.42:1 and fails. Controls rest in deep teal.
   - Headings Inter Display 800, sentence case, negative tracking.
   - The dot field lives inside the logo and nowhere else. */

:root { --site-max: 1140px; --site-pad: 24px; }

body {
  background: var(--ls-color-white);
  color: var(--ls-color-ink);
  font-family: var(--ls-font-body);
  font-variation-settings: var(--ls-fontVariation-text);
  font-size: var(--ls-fontSize-body);
  line-height: var(--ls-lineHeight-body);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--ls-font-display);
  font-variation-settings: var(--ls-fontVariation-display);
  font-weight: 800;
  color: var(--ls-color-field-row4);
  line-height: var(--ls-lineHeight-heading);
}
h1 { font-size: clamp(38px, 6vw, 62px); letter-spacing: -0.022em; line-height: 1.06; }
h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.016em; }
h3 { font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.010em; }

p { max-width: 68ch; }
a { color: var(--ls-color-field-row3); text-decoration: none; }
a:hover { color: var(--ls-color-kellyDeep); text-decoration: underline; }

.eyebrow {
  font-family: var(--ls-font-mono); font-weight: 500;
  font-size: var(--ls-fontSize-caption);
  letter-spacing: var(--ls-tracking-meta); text-transform: uppercase;
  color: var(--ls-color-field-row3);
  margin-bottom: var(--ls-space-4);
}

.lede { font-size: clamp(18px, 2vw, 21px); color: var(--ls-color-gray-700); margin-top: var(--ls-space-5); }

/* ---- header -------------------------------------------------------------- */
.site-head {
  border-bottom: 1px solid var(--ls-color-gray-150);
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.2) blur(8px);
}
.site-head .inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ls-space-5); height: 74px; }
/* tight crop: the padded variants make the mark look indented in a nav */
.site-head .brand img { height: 22px; width: auto; display: block; }
.site-nav { display: flex; gap: var(--ls-space-6); align-items: center; }
.site-nav a {
  font-size: var(--ls-fontSize-bodySm); font-weight: 500;
  color: var(--ls-color-field-row4); text-decoration: none;
  transition: color var(--ls-duration-base) var(--ls-easing-standard);
}
.site-nav a:hover { color: var(--ls-color-kellyDeep); }
.site-nav a[aria-current="page"] { color: var(--ls-color-field-row3); }

/* ---- buttons ------------------------------------------------------------- */
/* Kelly is a RESPONSE, never a resting state. Rest in deep teal; on hover go
   Kelly and flip the label to ink — black on Kelly is 8.69:1 AAA, white is
   2.42:1 and fails. This is not optional (BRAND-SYSTEM.md §3 rule 3). */
.btn {
  display: inline-flex; align-items: center; gap: var(--ls-space-2);
  font-family: var(--ls-font-body); font-weight: 600;
  font-size: var(--ls-fontSize-bodySm);
  letter-spacing: var(--ls-tracking-button);
  padding: 14px 24px; border-radius: var(--ls-radius-sm);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none;
  transition: background var(--ls-duration-base) var(--ls-easing-standard),
              color var(--ls-duration-base) var(--ls-easing-standard),
              border-color var(--ls-duration-base) var(--ls-easing-standard);
}
.btn-primary { background: var(--ls-color-field-row4); color: var(--ls-color-white); }
.btn-primary:hover { background: var(--ls-color-kelly); color: var(--ls-color-ink); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--ls-color-field-row4); border-color: var(--ls-color-gray-300); }
.btn-secondary:hover { background: var(--ls-color-kelly); color: var(--ls-color-ink); border-color: var(--ls-color-kelly); text-decoration: none; }
.btn:focus-visible { outline: 3px solid var(--ls-color-kellyTint); outline-offset: 2px; }

/* ---- sections ------------------------------------------------------------ */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section + .section { border-top: 1px solid var(--ls-color-gray-150); }
.section-tint { background: var(--ls-color-gray-75); border-top: 1px solid var(--ls-color-gray-150); }

.hero { padding: clamp(64px, 10vw, 128px) 0 clamp(48px, 7vw, 88px); }
.hero .actions { display: flex; gap: var(--ls-space-4); margin-top: var(--ls-space-7); flex-wrap: wrap; }

/* ---- proof strip --------------------------------------------------------- */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ls-space-6); }
.proof .k { font-family: var(--ls-font-display); font-variation-settings: var(--ls-fontVariation-display); font-weight: 800; font-size: 22px; color: var(--ls-color-field-row4); }
.proof .v { font-family: var(--ls-font-mono); font-weight: 500; font-size: var(--ls-fontSize-caption); letter-spacing: var(--ls-tracking-meta); text-transform: uppercase; color: var(--ls-color-field-row3); margin-top: var(--ls-space-2); }

/* ---- cards --------------------------------------------------------------- */
/* auto-FILL, not auto-fit: auto-fit collapses empty tracks, so a catalogue with a
   single live product stretched one card across the full width and blew the
   product image up to 1000px. auto-fill holds the grid so cards keep their size
   however many the truthfulness gate lets through. */
.cards { display: grid; gap: var(--ls-space-6); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-top: var(--ls-space-7); }
.card {
  border: 1px solid var(--ls-color-gray-150);
  border-radius: var(--ls-radius-md);
  padding: var(--ls-space-6);
  background: var(--ls-color-white);
  display: flex; flex-direction: column;
  transition: border-color var(--ls-duration-base) var(--ls-easing-standard),
              box-shadow var(--ls-duration-base) var(--ls-easing-standard);
}
.card:hover { border-color: var(--ls-color-kelly); box-shadow: var(--ls-shadow-2); }
/* Product art is a square 2000x2000 Etsy mockup on a white ground; the hairline
   keeps it from bleeding into the card on white. */
.card .shot {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: top center;
  border: 1px solid var(--ls-color-gray-150);
  border-radius: var(--ls-radius-sm);
  margin-bottom: var(--ls-space-5);
  background: var(--ls-color-white);
}
.card h3 { margin-bottom: var(--ls-space-3); }
.card p { color: var(--ls-color-gray-700); font-size: var(--ls-fontSize-bodySm); flex: 1; }
.card .price { font-family: var(--ls-font-mono); font-weight: 500; font-size: var(--ls-fontSize-bodySm); letter-spacing: 0.04em; color: var(--ls-color-field-row4); margin-top: var(--ls-space-5); }
.card .tagrow { display: flex; flex-wrap: wrap; gap: var(--ls-space-2); margin-top: var(--ls-space-4); }
.tag {
  font-family: var(--ls-font-mono); font-weight: 500; font-size: var(--ls-fontSize-meta);
  letter-spacing: var(--ls-tracking-meta); text-transform: uppercase;
  color: var(--ls-color-field-row3);
  border: 1px solid var(--ls-color-gray-150);
  border-radius: var(--ls-radius-pill);
  padding: 5px 12px;
}

/* ---- numbered steps ------------------------------------------------------ */
.steps { display: grid; gap: var(--ls-space-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: var(--ls-space-7); }
.stepcard .n { font-family: var(--ls-font-mono); font-weight: 500; font-size: var(--ls-fontSize-caption); letter-spacing: var(--ls-tracking-meta); color: var(--ls-color-field-row2); }
.stepcard h3 { margin: var(--ls-space-3) 0; }
.stepcard p { color: var(--ls-color-gray-700); font-size: var(--ls-fontSize-bodySm); }

/* ---- icon rows ----------------------------------------------------------- */
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.iconrow { display: flex; align-items: flex-start; gap: var(--ls-space-4); color: var(--ls-color-field-row3); }
.iconrow .txt { color: var(--ls-color-gray-700); font-size: var(--ls-fontSize-bodySm); }
.iconrow .txt strong { color: var(--ls-color-ink); display: block; font-weight: 600; margin-bottom: 4px; }

/* ---- faq ----------------------------------------------------------------- */
.faq { margin-top: var(--ls-space-7); max-width: 820px; }
.faq details { border-top: 1px solid var(--ls-color-gray-150); padding: var(--ls-space-5) 0; }
.faq details:last-child { border-bottom: 1px solid var(--ls-color-gray-150); }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ls-color-field-row4); list-style: none; display: flex; justify-content: space-between; gap: var(--ls-space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ls-color-field-row3); font-family: var(--ls-font-mono); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: var(--ls-space-4); color: var(--ls-color-gray-700); font-size: var(--ls-fontSize-bodySm); }

/* ---- footer -------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--ls-color-gray-150); padding: var(--ls-space-8) 0 var(--ls-space-7); margin-top: var(--ls-space-8); }
.site-foot .cols { display: grid; gap: var(--ls-space-7); grid-template-columns: 1.4fr 1fr 1fr; }
.site-foot img.mark { height: 20px; width: auto; display: block; margin-bottom: var(--ls-space-4); }
.site-foot h4 { font-family: var(--ls-font-mono); font-weight: 500; font-size: var(--ls-fontSize-meta); letter-spacing: var(--ls-tracking-meta); text-transform: uppercase; color: var(--ls-color-field-row3); margin-bottom: var(--ls-space-4); }
.site-foot ul { list-style: none; display: grid; gap: var(--ls-space-3); }
.site-foot a { color: var(--ls-color-gray-700); font-size: var(--ls-fontSize-bodySm); }
.site-foot a:hover { color: var(--ls-color-kellyDeep); }
.site-foot .legal { margin-top: var(--ls-space-7); padding-top: var(--ls-space-5); border-top: 1px solid var(--ls-color-gray-150); font-size: var(--ls-fontSize-caption); color: var(--ls-color-gray-500); display: flex; justify-content: space-between; gap: var(--ls-space-5); flex-wrap: wrap; }

@media (max-width: 900px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .site-nav { gap: var(--ls-space-4); }
  .site-nav a { font-size: var(--ls-fontSize-caption); }
  .site-foot .cols { grid-template-columns: 1fr; }
}

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