/* LJ brand pack — rebuilt from loosejoints.biz
   (Shopify theme "LJ 2026 - COMMERCE Milan homepage 260902", assets/layout.theme.css)

   Principles seen in the live theme:
   - One family, Diatype Pre, one size in practice (12px/16px body), no letter-spacing.
   - Pure black on white. Colour appears only as partner accents (Ensemble green, yellow).
   - Interaction is typographic: underline on hover, black/white inversion on buttons,
     info (prices) fading in on hover. Transitions are 0.2s ease-in-out.
   - Wayfinding with "→" before titles, "—" between ticker items, "Artist – Title" pairs.
*/

@font-face { font-family: "Diatype Pre"; src: url(fonts/DiatypePre-Light.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Diatype Pre"; src: url(fonts/DiatypePre-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Diatype Pre"; src: url(fonts/DiatypePre-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Diatype Pre"; src: url(fonts/DiatypePre-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Type */
  --lj-font: "Diatype Pre", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --lj-light: 300;
  --lj-regular: 400;
  --lj-bold: 700;
  --lj-tracking: 0;

  /* Scale used on loosejoints.biz (px / line-height) */
  --lj-xs: 10px;      /* legal, small print */
  --lj-s: 12px;       /* body, nav, captions — line-height 16px */
  --lj-m: 15px;
  --lj-l: 18px;       /* line-height 22px */
  --lj-xl: 24px;      /* line-height 30px */
  --lj-lh-s: 16px;
  --lj-lh-l: 22px;
  --lj-lh-xl: 30px;

  /* Colour */
  --lj-ink: #000;
  --lj-paper: #fff;
  --lj-ensemble: #253525;  /* Ensemble green */
  --lj-yellow: #fbe122;
  --lj-green: #6cc24a;
  --lj-red: #da291c;

  /* Motion */
  --lj-ease: ease-in-out;
  --lj-fast: .2s;
  --lj-slow: .4s;

  /* Glyphs */
  --lj-arrow: "→";
  --lj-sep: "—";

  /* Breakpoint (reference only; custom properties can't be used in @media) */
  --lj-mobile: 750px;
}

/* Base */
.lj {
  font-family: var(--lj-font);
  font-weight: var(--lj-regular);
  letter-spacing: var(--lj-tracking);
  color: var(--lj-ink);
  background: var(--lj-paper);
  -webkit-font-smoothing: antialiased;
}
.lj a { color: inherit; text-decoration: none; }
.lj a:hover { text-decoration: underline; }

/* Components */
.lj-arrow::before { content: var(--lj-arrow) "\00a0\00a0"; }
.lj-btn {
  font: inherit; color: var(--lj-ink); background: var(--lj-paper);
  border: 1px solid var(--lj-ink); padding: .4em .8em; cursor: pointer;
  transition: color var(--lj-fast) var(--lj-ease), background-color var(--lj-fast) var(--lj-ease);
}
.lj-btn:hover { background: var(--lj-ink); color: var(--lj-paper); }
.lj-reveal { opacity: 0; transition: opacity .3s; }
*:hover > .lj-reveal { opacity: 1; }