/* Shared chrome: design tokens, base type, masthead and footer.
 *
 * Loaded by BOTH the storefront and the client's landing page, so the two
 * halves of the site are literally the same components rather than two
 * systems that merely resemble each other.
 *
 * Deliberately small. An earlier attempt loaded the whole store stylesheet
 * over the landing page, and its `body`, `img`, `a` and heading rules bled
 * into the client's own design and recoloured her hero. Only what the two
 * pages genuinely share belongs in here.
 */

:root {
  /* These are the CLIENT'S OWN brand values, lifted from her original export
     rather than approximated. The La Ligne influence on this build was about
     layout and restraint, not hue -- so her palette wins and the store moved
     onto it, not the other way round. The landing page and the shop now read
     from one set of tokens. */
  --paper:      #f1efe7;   /* was #f7f5f0 */
  --paper-warm: #e8e5db;
  --ink:        #14140f;
  --ink-soft:   #5c5b53;
  --ink-faint:  #96948c;
  --rule:       #d5d1c6;
  --forest:     #071d15;   /* her deepest green */
  --house:      #123b2b;   /* her mid green -- masthead, footer, buttons */
  --acid:       #b8ff67;   /* her acid -- live/available signalling only */

  --serif: "Georgia", "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --bar-h: 62px;
}

/* NOTE: the page-level reset (body background/colour, img, a) deliberately
   does NOT live here. chrome.css is loaded over the client's own landing page,
   and a `body { background: var(--paper) }` here would repaint her dark hero
   section. Those rules live in store.css, which only storefront pages load. */

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

.eyebrow {
  font: 400 10px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.05;
  margin: 0;
}

/* The hand-drawn underline the reference uses on links and inputs. Done with
   a repeating gradient so it wobbles slightly instead of ruling straight. */
.penline {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 3px;
}

/* ---- masthead --------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 0 var(--gutter);
  height: var(--bar-h);
  background: var(--house);
  color: var(--paper);
}
.masthead a { color: inherit; }

.wordmark {
  font: 700 13px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mastnav {
  display: flex; gap: clamp(12px, 2.4vw, 30px);
  font: 400 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mastnav a { opacity: .78; padding: 6px 0; }
.mastnav a:hover, .mastnav a[aria-current="page"] { opacity: 1; }
.mastnav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--acid); }

.baglink {
  font: 400 10px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}
.bagcount {
  display: inline-block; min-width: 17px; height: 17px;
  margin-left: 5px; padding: 0 4px;
  border-radius: 9px; background: var(--acid); color: var(--house);
  font: 700 10px/17px var(--mono); text-align: center;
}
.bagcount[data-n="0"] { display: none; }

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


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

.footer {
  background: var(--house); color: var(--paper);
  padding: clamp(40px, 7vw, 90px) var(--gutter);
  text-align: center;
}
.footer nav { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; margin-bottom: 22px; }
.footer a { opacity: .8; font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.footer a:hover { opacity: 1; }
.footer small { color: color-mix(in srgb, var(--paper) 55%, transparent); font-size: 11px; }