/* ============================================================================
   site.css — the shared look for every public ltc.sh page.

   Until now each page carried its own copy of the tokens, header, footer and
   base type inside its <style> block. The copies drifted: four different
   container widths, five different footers, three different names for the same
   grey. This file is the single source of truth for all of that.

   How a page uses it:

     <link rel="stylesheet" href="/site.css">      in <head>, BEFORE the page's
                                                    own <style> block
     <body class="w-text">                          picks the column width

   The page's inline <style> still loads afterwards, so anything a page needs to
   override still wins. Keep page-specific components there; keep anything that
   should look the same everywhere here.
   ============================================================================ */

:root {
  /* Brand palette. The rust accent is the one colour that carries the brand —
     it appears on links, hovers and eyebrows across every page. */
  --bg: #FFFFFF;
  --text: #1A1A1A;
  --text-muted: #666666;
  --accent: #C1440E;
  --accent-hover: #9E3709;
  --accent-soft: #CA6238;
  --cream: #FAF4EC;
  --border: #EAEAEA;

  /* Column width. Overridden per page by a class on <body> (see below) so the
     header, main and footer always agree without each page restating a number. */
  --w: 720px;

  /* Legacy aliases. The internal tools (dashboard, etsy, the admin pages) grew
     their own names for these same colours. Aliasing rather than renaming lets
     those pages adopt this file whenever it's convenient, without a rewrite. */
  --muted: var(--text-muted);
  --line: var(--border);
  --orange: var(--accent);
  --orange-dark: var(--accent-hover);
}

/* --- Column widths ---------------------------------------------------------
   Three widths, chosen by intent rather than by page:
     w-narrow  a short list of links, nothing to read      (home, where to buy)
     w-text    running prose — roughly 70 characters       (about, care, thanks)
     w-wide    galleries, case studies, side-by-side cards (corporate, cadence)
   -------------------------------------------------------------------------- */
body.w-narrow { --w: 640px; }
body.w-text   { --w: 720px; }
body.w-wide   { --w: 960px; }

/* --- Base ----------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  color: var(--text);
  letter-spacing: -0.015em;
}

p { margin: 0; }

img { max-width: 100%; }

/* --- Layout --------------------------------------------------------------- */

.site-header-inner,
main,
.site-footer-inner {
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 32px;
}

.site-header {
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
}

/* The wordmark is always the logo image linking home. Some pages used to spell
   the domain out in text instead; that read as an address bar rather than a
   brand, so the image is now the only treatment. */
.wordmark { display: inline-block; line-height: 0; text-decoration: none; }
.wordmark img { display: block; height: 36px; width: auto; transition: opacity 0.15s ease; }
.wordmark:hover img { opacity: 0.65; }

/* --- Footer --------------------------------------------------------------- */

.site-footer { background: var(--cream); padding: 56px 0; }

.site-footer-inner {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.8;
}

.site-footer a { color: var(--text); border-bottom: 1px solid var(--border); }
.site-footer a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.site-footer .copy { color: var(--text-muted); margin-top: 8px; }

/* --- Shared pieces -------------------------------------------------------- */

/* The small rust label above a page's h1. Five pages had a byte-identical copy
   of this (give or take 2px of margin); this is the settled version. */
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

/* The → that trails a link and nudges right on hover. */
.arrow {
  color: var(--text-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}
a:hover .arrow { color: var(--accent); transform: translateX(3px); }

/* --- Mobile --------------------------------------------------------------- */

@media (max-width: 640px) {
  .site-header { padding: 22px 0; }
  .site-header-inner,
  main,
  .site-footer-inner { padding: 0 24px; }
  .wordmark img { height: 28px; }
}
