/* =============================================================================
   SPINE.CSS  ·  the shared skeleton for the whole site
   -----------------------------------------------------------------------------
   Identity: "quiet but idiosyncratic" (Concept A, The Index). A restrained,
   near-monochrome document system on cool paper, with a single cobalt accent and
   a monospace metadata voice. Work reads like a numbered index. Personality lives
   in the details, not in loudness.

   One type system, one grid, one spacing rhythm, one nav. Sections layer their
   own sensibility by overriding a small set of theme tokens under
   [data-section="..."]. They never introduce a separate system.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
  /* Color */
  --ink:      #121212;   /* primary text, headings */
  --body:     #3a3a38;   /* body copy */
  --grey:     #6b6b6b;   /* secondary text */
  --faint:    #a6a6a6;   /* meta, de-emphasis */
  --rule:     #e6e5e1;   /* hairlines */
  --rule-ink: #121212;   /* the strong rule under section headings */
  --paper:    #fafaf9;   /* page background, cool near-white */
  --card:     #ffffff;   /* raised surfaces */
  --accent:   #2440e6;   /* cobalt, the signature; used sparingly */
  --ship:     #2f7d51;   /* "shipped" status */

  /* Type families */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; /* headlines, titles */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif; /* reading */
  --font-mono:    "Space Mono", ui-monospace, "SFMono-Regular", monospace; /* labels, numbers, meta */
  --font-accent:  var(--font-display); /* per-section accent face slots in here */

  /* Fluid type scale */
  --step--1: clamp(0.78rem, 0.75rem + 0.13vw, 0.85rem);
  --step-0:  clamp(0.92rem, 0.90rem + 0.12vw, 0.98rem);
  --step-1:  clamp(1.10rem, 1.03rem + 0.34vw, 1.30rem);
  --step-2:  clamp(1.30rem, 1.15rem + 0.72vw, 1.72rem);
  --step-3:  clamp(1.55rem, 1.30rem + 1.25vw, 2.25rem);
  --step-4:  clamp(1.90rem, 1.45rem + 2.20vw, 3.05rem);
  --step-5:  clamp(2.20rem, 1.55rem + 3.30vw, 3.75rem);

  /* Spacing rhythm (base 8) */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --wrap:        940px;   /* shared max content width */
  --wrap-narrow: 680px;   /* reading measure for prose */
  --pad:         clamp(1.25rem, 5vw, 2.5rem);
  --radius:      4px;     /* the system is square; corners barely soften */
  --radius-sm:   2px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ---------------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   --------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; font-weight: 500; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

/* Display face is the Space Grotesk voice for big moments. */
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.display .dim { color: var(--faint); }

/* Monospace metadata voice: labels, numbers, statuses. */
.mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

a.link { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); transition: color 0.2s; }
a.link:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   4. LAYOUT  ·  one centered column holds nav, main, footer
   --------------------------------------------------------------------------- */
.shell { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
main { padding-block: var(--space-2xl) var(--space-3xl); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.stack > * + * { margin-top: var(--space-md); }
.section { margin-top: var(--space-2xl); }

/* ---------------------------------------------------------------------------
   5. NAV  ·  in-flow, document-style (src/_includes/nav.njk)
   --------------------------------------------------------------------------- */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--rule);
}
.nav__logo {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--ink); padding: 3px 7px;
  transition: color 0.2s, border-color 0.2s;
}
.nav__logo:hover { color: var(--accent); border-color: var(--accent); }
.nav__links { display: flex; gap: clamp(16px, 3vw, 28px); }
.nav__link {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grey); text-decoration: none; transition: color 0.15s;
}
.nav__link:hover { color: var(--accent); }
.nav__link[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------------------
   6. FOOTER
   --------------------------------------------------------------------------- */
.footer {
  margin-top: var(--space-3xl); padding-block: var(--space-xl);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint);
}
.footer a { color: var(--faint); text-decoration: none; transition: color 0.2s; }
.footer a:hover { color: var(--accent); }
.footer__links { display: flex; gap: var(--space-lg); }

/* ---------------------------------------------------------------------------
   7. PAGE HEAD  ·  shared heading block for section/feed pages
   --------------------------------------------------------------------------- */
.pagehead { margin-bottom: var(--space-2xl); }
.pagehead__title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-4); color: var(--ink); letter-spacing: -0.03em; }
.pagehead__lede { margin-top: var(--space-sm); font-size: var(--step-1); color: var(--grey); max-width: 52ch; }

/* Section label: mono, with the strong ink rule under it (the "index" motif). */
.label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; }
.label { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.label--faint { font-weight: 400; color: var(--faint); }

/* ---------------------------------------------------------------------------
   8. INDEX  ·  the numbered/row list used for work, projects, and the log feed
   --------------------------------------------------------------------------- */
.index { border-top: 1px solid var(--ink); }
.index__row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: var(--space-lg);
  align-items: baseline; padding: var(--space-lg) var(--space-xs);
  border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit;
  transition: background 0.15s;
}
.index__row:hover { background: #f1f1ee; }
.index__row:hover .index__num,
.index__row:hover .index__title { color: var(--accent); }
.index__num { font-family: var(--font-mono); font-size: 13px; color: var(--faint); transition: color 0.15s; }
.index__title { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); letter-spacing: -0.02em; color: var(--ink); transition: color 0.15s; }
.index__desc { display: block; margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--grey); max-width: 60ch; }
.index__status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; padding-top: 3px; }
.index__status--ship { color: var(--ship); }

/* When an index row is a dated log entry, the number column carries the date. */
.index__date { font-family: var(--font-mono); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   8b. WORK CARDS  ·  colorful thumbnails with hover video previews (homepage)
   --------------------------------------------------------------------------- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xl) var(--space-lg); }
.work-card { display: block; text-decoration: none; color: inherit; }
.work-card__media {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--rule);
  transition: border-color 0.25s, transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.work-card:hover .work-card__media { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 16px 38px rgba(18,18,18,0.13); }
.work-card__tint { position: absolute; inset: 0; }
.work-card__preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.work-card:hover .work-card__preview[src], .work-card:hover .work-card__preview source { opacity: 1; }
.work-card:hover .work-card__preview { opacity: 1; }
.work-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-sm); }
.work-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); letter-spacing: -0.02em; color: var(--ink); transition: color 0.2s; }
.work-card:hover .work-card__title { color: var(--accent); }
.work-card__status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.work-card__status--ship { color: var(--ship); }
.work-card__desc { margin-top: var(--space-2xs); font-size: var(--step--1); color: var(--grey); max-width: 46ch; }

/* Product mockups that float on the card tint (built in code, not empty squares) */
.work-card__mock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px 26px; }
.work-card:hover .work-card__mock { transform: translateY(-2px); }
.wmk { font-family: var(--font-sans); box-shadow: 0 12px 30px rgba(0,0,0,0.16); border-radius: 8px; }
.wmk__hd { font-size: 9px; font-weight: 600; color: #3a3a45; letter-spacing: 0.01em; }
/* generic light card */
.wmk--card { background: #fff; padding: 11px 13px; width: min(74%, 260px); }
.wmk__row { display: flex; align-items: center; gap: 6px; font-size: 8.5px; color: #4a4a52; margin-top: 7px; }
.wmk__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wmk__dot.ok { background: #3daa6e; } .wmk__dot.flag { background: #e0674a; }
.wmk__row.flag { color: #b8442c; font-weight: 500; }
/* billing rows (cbo) */
.wmk__trow { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 8px; color: #6b675e; margin-top: 7px; }
.wmk__trow:first-child { margin-top: 0; }
.wmk__arrow { color: #b98a2a; } .wmk__chip { margin-left: auto; font-size: 7.5px; color: #2f7d51; background: rgba(47,125,81,0.12); padding: 1px 5px; border-radius: 8px; }
/* coding panel peek (cbo) */
.wmk__cbohd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.wmk__cbohd span:first-child { font-size: 9.5px; font-weight: 700; color: #1c1e26; }
.wmk__cbotag { font-size: 7px; font-weight: 600; color: #2f5fe0; background: #e7edff; padding: 2px 6px; border-radius: 5px; }
.wmk__crow { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; color: #4a4a52; margin-top: 7px; }
.wmk__clev { font-size: 7.5px; font-weight: 600; color: #2f5fe0; background: #dde5ff; padding: 2px 8px; border-radius: 100px; }
/* rowkeeper peek */
.wmk__rkeye { font-family: "Space Mono", ui-monospace, monospace; font-size: 7px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #2b53f2; margin-bottom: 7px; }
.wmk__rkrow { font-family: "Space Mono", ui-monospace, monospace; font-size: 11px; color: #15181e; line-height: 1.35; }
.wmk__rkbar { height: 4px; background: #dbe0e6; border: 1px solid #d2d7de; border-radius: 2px; margin-top: 10px; overflow: hidden; }
.wmk__rkbar i { display: block; height: 100%; background: #2b53f2; border-radius: 1px; }
/* dark recording panel (audio) */
.wmk--dark { background: #1c2b33; padding: 12px 14px; width: min(72%, 240px); }
.wmk__rec { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 8.5px; color: #e0896c; letter-spacing: 0.06em; }
.wmk__recdot { width: 7px; height: 7px; border-radius: 50%; background: #e0674a; box-shadow: 0 0 0 3px rgba(224,103,74,0.25); }
.wmk__time { margin-left: auto; color: rgba(255,255,255,0.65); }
.wmk__wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: 10px; }
.wmk__wave i { flex: 1; background: #6b8b96; border-radius: 1px; }
/* phone insight (spent) */
.wmk--phone { background: #fdf8f2; padding: 12px 13px; width: min(70%, 230px); border-radius: 12px; }
.wmk__ilabel { display: flex; align-items: center; gap: 5px; font-size: 7px; letter-spacing: 0.06em; text-transform: uppercase; color: #9c9590; }
.wmk__ilabel::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #e06b4a; }
.wmk__insight-p { font-size: 8.5px; color: #1a1a1a; line-height: 1.45; margin-top: 6px; }
/* security gate (sentinel) */
.wmk--gate { background: transparent; box-shadow: none; width: min(80%, 280px); }
.wmk__segs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.wmk__seg { height: 26px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.14); }
.wmk__seg.ok { background: rgba(78,168,122,0.18); border-color: rgba(78,168,122,0.4); }
.wmk__seg.block { background: rgba(224,103,74,0.2); border-color: rgba(224,103,74,0.55); }
.wmk__gatelbl { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: #e0896c; margin-top: 9px; text-align: right; }

@media (max-width: 620px) { .work-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   9. CARD GRID  ·  making section landing
   --------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  transition: border-color 0.2s, transform 0.2s var(--ease);
}
.card:hover { border-color: var(--ink); transform: translateY(-2px); }
.card__media { aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--accent) 7%, var(--paper)); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--space-md) var(--space-md) var(--space-lg); }
.card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); color: var(--ink); letter-spacing: -0.02em; }
.card__meta { margin-top: var(--space-2xs); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--faint); }

/* ---------------------------------------------------------------------------
   10. PROSE  ·  markdown body copy (log entries, project notes)
   --------------------------------------------------------------------------- */
.prose { color: var(--body); }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-xl); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-lg); }
.prose p, .prose li { max-width: 66ch; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--accent); }
.prose img { border-radius: var(--radius); margin-block: var(--space-lg); }
.prose figure { margin-block: var(--space-lg); }
.prose figcaption { font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: var(--space-xs); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: var(--space-md); color: var(--grey); font-style: italic; }

/* Details / spec table for project pages. */
.specs { font-family: var(--font-mono); display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xs) var(--space-lg); font-size: 12px; }
.specs dt { color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.specs dd { color: var(--ink); margin: 0; }

/* A visible marker for scaffold/placeholder content. Delete the entry, the
   marker disappears with it. */
.scaffold-note {
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm);
  display: inline-block; margin-bottom: var(--space-lg);
}

/* ---------------------------------------------------------------------------
   11. SECTION THEMES  ·  sensibility layered on the spine
   -----------------------------------------------------------------------------
   Each block overrides ONLY tokens, staying within the quiet system. Provisional
   values until Carly confirms each section's one-line sensibility brief.
   --------------------------------------------------------------------------- */
[data-section="knitting"]    { --paper: #faf8f4; --accent: #a86b3c; }
[data-section="sewing"]      { --paper: #f7f4f2; --accent: #7a3b42; }
[data-section="printing"]    { --paper: #f4f5f6; --accent: #2440e6; }
[data-section="photography"] { --paper: #f5f5f4; --accent: #2b2b2b; }

/* ---------------------------------------------------------------------------
   12. MOTION  ·  quiet entrance reveals + focus states
   -----------------------------------------------------------------------------
   Progressive enhancement: reveals only hide when JS is present (html.js), so a
   no-JS or failed-script visit still shows everything. An IntersectionObserver
   in base.njk adds .is-in as elements enter view.
   --------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Optional gentle stagger: set --i (an index) on siblings to offset their entrance. */
.js .reveal { transition-delay: calc(var(--i, 0) * 70ms); }

/* Keyboard focus: a visible cobalt ring, only for keyboard users. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   13. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width: 620px) {
  main { padding-block: var(--space-lg) var(--space-2xl); }
  .index__row { grid-template-columns: 32px 1fr; }
  .index__status { grid-column: 2; padding-top: var(--space-xs); }
  .footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}