/* landing.css — the public front door at quilt.zackariahcole.com.
   Hand-written against branding/Quilt-Brand-Guide.md: the indigo/terracotta/ecru accord,
   Fraunces display + Hanken Grotesk body (self-hosted, /fonts/), the running-stitch motif
   as the page's connective spine, soft-settle motion. Brand tokens are LITERAL values here
   on purpose — this page must never import the blocks CSS wholesale.
   JS-off rule: every ".q-motion"-scoped rule is pure enhancement; without the inlined
   MOTION_SCRIPT the page is fully visible and static. */

/* ---- Self-hosted brand fonts (recipe mirrored from packages/blocks/src/fonts.css;
        the woff2 files are copied to /fonts/ by landing/build.mjs) ---- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/fraunces-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latinext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Tokens (literal, from the brand guide §4/§5/§7) ---- */
:root {
  --ecru: #faf8f4;        /* ground — undyed cloth */
  --linen: #f6f5f3;       /* quiet surface */
  --seam: #e6e3de;        /* decorative divider only */
  --stitch: #c9c3b8;      /* the running-stitch dash (decorative) */
  --ink: #20201d;         /* body */
  --deep-ink: #0c0c0a;    /* headings */
  --muted: #6b6459;       /* 5.5:1 on ecru — AA for small text (verified in wizard.css) */
  --indigo: #2f3b66;      /* primary */
  --indigo-deep: #26315a; /* hover / focus */
  --terracotta: #c8553d;  /* fills + large accents only — never small text */
  --madder-ink: #a8412e;  /* small colored text (5.7:1) */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --settle: cubic-bezier(0.34, 1.56, 0.64, 1); /* "soft-settle" — a patch smoothed flat */
  --dur: 280ms;
  --container: 1120px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ecru);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--deep-ink);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
p { margin: 0; }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 20;
  background: var(--indigo);
  color: var(--ecru);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
  transition: top 160ms ease;
}
.skip-link:focus-visible { top: 0; }

/* ---- Shared controls (the .q-firstrun__start recipe) ---- */
.btn-primary {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ecru);
  background: var(--indigo);
  border-radius: 3px;
  padding: 13px 26px;
  transition:
    transform 160ms var(--settle),
    background-color 160ms ease;
}
.btn-primary:hover { background: var(--indigo-deep); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary--lg { padding: 17px 40px; }

/* Quiet links hover a dashed underline — the running stitch as the link mark. */
.quiet-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 6px 2px;
  transition: color 160ms ease;
}
.quiet-link:hover {
  color: var(--indigo);
  text-decoration: underline dashed;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ---- Header ---- */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px clamp(20px, 4vw, 40px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--deep-ink);
}
.brand__mark { border-radius: 7px; flex: 0 0 auto; }
.brand__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.site-head__actions { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); }

/* ---- Hero ---- */
.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(56px, 11vh, 120px) clamp(20px, 4vw, 40px) clamp(48px, 8vh, 88px);
  text-align: center;
}
.hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.hero__title {
  font-size: clamp(2.4rem, 6.4vw, 3.6rem);
  line-height: 1.05;
  /* Fraunces at its warmest: high optical size, soft terminals (axes no-op gracefully
     if absent from the subset file). */
  font-variation-settings: "opsz" 144, "SOFT" 45, "WONK" 0;
  margin: 0 auto 20px;
}
.hero__sub {
  max-width: 44ch;
  margin: 0 auto 34px;
  font-size: 1.13rem;
  line-height: 1.6;
  color: var(--ink);
}
.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 34px);
  flex-wrap: wrap;
}
.hero__peek { color: var(--muted); }
.hero__peek:hover { color: var(--indigo); }
.hero__hint {
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---- The seam — a running-stitch line with a patch pinned at its center.
        The page's signature: sections pieced together along one visible stitch. ---- */
.seam {
  position: relative;
  max-width: min(var(--container), calc(100% - 48px));
  margin: 0 auto;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--stitch) 0 9px, transparent 9px 17px);
}
.seam__patch {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 3px; /* soft corners — cut-and-sewn, never sharp geometry */
  border: 2px solid var(--ecru);
}
.seam__patch--indigo { background: var(--indigo); }
.seam__patch--terracotta { background: var(--terracotta); }

/* ---- Sections ---- */
.made, .how, .updates {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(52px, 9vh, 96px) clamp(20px, 4vw, 40px);
}
.section-head { margin-bottom: 36px; }
.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  font-variation-settings: "opsz" 72, "SOFT" 35, "WONK" 0;
  margin-bottom: 10px;
}
.section-head p { color: var(--muted); font-size: 0.98rem; max-width: 52ch; }

/* ---- Template showcase (scroll-snap row; MOTION_SCRIPT drives the arrows) ---- */
.made__rowwrap { position: relative; }
.made__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 1fr);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 18px; /* room for the hover lift + a quiet scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--seam) transparent;
}
.made__row:focus-visible { outline-offset: 6px; }
.tpl-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1px solid var(--seam);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 18px;
  transition:
    transform var(--dur) var(--settle),
    border-color 160ms ease,
    box-shadow var(--dur) ease;
}
.tpl-card:hover {
  border-color: var(--indigo);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(20, 20, 18, 0.1);
}
.tpl-card:active { transform: scale(0.99); }
.tpl-card__shot {
  display: block;
  border-bottom: 1px solid var(--seam);
  background: var(--linen);
  aspect-ratio: 8 / 5;
  overflow: hidden;
}
.tpl-card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tpl-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--deep-ink);
  padding: 16px 18px 0;
}
.tpl-card__desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
  padding: 2px 18px 10px;
}
.tpl-card__go {
  margin-top: auto;
  padding: 0 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo);
}
.tpl-card:hover .tpl-card__go { text-decoration: underline dashed; text-underline-offset: 5px; }

/* Arrow buttons — same bare line-arrow glyphs as ProjectShowcase's carousel. */
.q-showcase__arrow {
  position: absolute;
  top: 34%;
  z-index: 2;
  border: 0;
  cursor: pointer;
  background: var(--ecru);
  color: var(--deep-ink);
  padding: 12px 10px;
  border-radius: 3px;
  transition: transform 160ms var(--settle), color 160ms ease;
}
.q-showcase__arrow:hover { color: var(--indigo); transform: scale(1.06); }
.q-showcase__arrow:active { transform: scale(0.96); }
.q-showcase__arrow--prev { left: -8px; }
.q-showcase__arrow--next { right: -8px; }
/* ≥1100px the 3-up fits with nothing to scroll — the arrows would be no-ops, so they rest.
   Unhide (drop this rule) when a fourth template joins the row. */
@media (min-width: 1100px) {
  .q-showcase__arrow { display: none; }
}

/* ---- How it works ---- */
.how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
}
.how__num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--indigo);
  margin-bottom: 10px;
}
.how__step h3 { font-size: 1.22rem; margin-bottom: 8px; }
.how__step p { font-size: 0.95rem; color: var(--muted); max-width: 34ch; }

/* ---- Updates ---- */
.updates__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.updates__item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px 28px;
  padding: 22px 0;
  border-top: 1px solid var(--seam);
}
.updates__item:first-child { border-top: 0; padding-top: 0; }
.updates__date {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.updates__tag {
  color: var(--madder-ink);
  border: 1px solid var(--seam);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.64rem;
}
.updates__body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.updates__body p { font-size: 0.95rem; color: var(--ink); max-width: 62ch; }
.updates__older { margin-top: 10px; border-top: 1px solid var(--seam); }
.updates__older summary {
  cursor: pointer;
  padding: 16px 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.updates__older summary:hover { color: var(--indigo); }
.updates__older .updates__list { padding-bottom: 8px; }
.updates__older .updates__item:first-child { border-top: 0; }

/* ---- Footer ---- */
.site-foot {
  max-width: var(--container);
  margin: 0 auto;
  padding: 34px clamp(20px, 4vw, 40px) 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.site-foot__mark { border-radius: 5px; }
.site-foot p { font-size: 0.85rem; color: var(--muted); }

/* ---- Scroll-reveal (progressive enhancement only) ----
   MOTION_SCRIPT adds .q-motion to <html> and .is-visible per element; with JS off (or
   reduced motion) nothing below applies and everything is simply visible. */
.q-motion .q-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 320ms ease, transform 320ms var(--settle);
}
.q-motion .q-reveal.is-visible { opacity: 1; transform: none; }
/* Pieced elements settle one after another — a gentle stagger down the card row. */
.q-motion .made__row .q-reveal:nth-child(2) { transition-delay: 70ms; }
.q-motion .made__row .q-reveal:nth-child(3) { transition-delay: 140ms; }
.q-motion .how__steps .q-reveal:nth-child(2) { transition-delay: 70ms; }
.q-motion .how__steps .q-reveal:nth-child(3) { transition-delay: 140ms; }

/* ---- Responsive ---- */
@media (max-width: 719px) {
  .site-head { padding-top: 18px; }
  .brand__word { font-size: 1.2rem; }
  .hero { text-align: left; }
  .hero__sub, .hero__title { margin-left: 0; }
  .hero__cta { justify-content: flex-start; }
  .made__row { grid-auto-columns: min(84vw, 340px); }
  .how__steps { grid-template-columns: 1fr; }
  .updates__item { grid-template-columns: 1fr; gap: 6px; }
  .updates__date { flex-direction: row; align-items: center; padding-top: 0; }
}

/* ---- Reduced motion: everything still works, nothing glides ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .made__row { scroll-behavior: auto; }
  .btn-primary, .quiet-link, .tpl-card, .q-showcase__arrow, .skip-link { transition: none; }
  .btn-primary:hover, .btn-primary:active,
  .tpl-card:hover, .tpl-card:active,
  .q-showcase__arrow:hover, .q-showcase__arrow:active { transform: none; }
  .q-motion .q-reveal { opacity: 1; transform: none; transition: none; }
}