/* LatinLather design tokens. Generated from tokens.json. */
:root {
  --kraft: #D9C3A0; /* The page ground. Websites, PDFs, offer pages, social posts and box cards sit on kraft by default. */
  --kraft-deep: #C4A47A; /* Second paper tone: table headers, slats, blocks that sit on kraft. Never body text ground for small rust text. */
  --cream: #F4EDE0; /* Raised surfaces: cards, long-read documents, email bodies, the one-page offer. Also text on navy and on rust. */
  --navy: #1E2A3A; /* Ink. All headings and body text on kraft (8.5:1) and cream. Also the dark block for footers and the photo frame. */
  --ink-muted: #3E4858; /* Secondary text (dates, captions, lot numbers) on kraft (5.4:1) and cream. */
  --rust: #B5432A; /* The stamp. Honest tags, single accents, stamp borders and fills with cream text (4.7:1). As text: only on cream, or 24px and up on kraft (3.2:1). */
  --rust-deep: #8E3220; /* Small rust text on kraft, such as a stamp label or link (4.7:1). */
  --line: #1E2A3A33; /* Hairlines and table rules: navy at 20%. */
  --space-1: 4px; /* Stamp padding, gaps inside a label. */
  --space-2: 8px; /* Gaps between related lines; slat thickness. */
  --space-4: 16px; /* Card padding, gaps between blocks. */
  --space-6: 24px; /* Page margins on mobile, the slat pitch. */
  --space-12: 48px; /* Section breaks on pages and in PDFs. */
  --radius-0: 0px; /* Blocks, photos, page sections. Crates have square corners. */
  --radius-sm: 2px; /* Inputs and buttons. */
  --radius-md: 4px; /* Stamps and cards, the most rounding the brand uses. */
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-sans: Barlow, system-ui, sans-serif;
}

@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/BarlowCondensed-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/Barlow-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 60px; font-weight: 500; }
.display { font-family: var(--font-display); font-size: 40px; line-height: 40px; font-weight: 500; }
.heading { font-family: var(--font-display); font-size: 28px; line-height: 30px; font-weight: 500; }
.subheading { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 500; }
.stamp { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }

/* Building blocks (prefix ll-) */
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--kraft); color: var(--navy); }
.ll-pad { padding: var(--space-4); }
.ll-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-4); }

.ll-display { font-family: var(--font-display); font-weight: 500; }
.ll-stamp-text { font-family: var(--font-display); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }
.ll-muted { color: var(--ink-muted); }

.ll-btn { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: .02em; height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-sm); border: 2px solid var(--navy); background: transparent; color: var(--navy); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
.ll-btn-primary { background: var(--navy); color: var(--cream); }
.ll-btn-rust { background: var(--rust); border-color: var(--rust); color: var(--cream); }
.ll-btn:focus-visible { outline: 2px solid var(--rust-deep); outline-offset: 3px; }

.ll-tag { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--rust-deep); border: 1.5px solid var(--rust); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); }
.ll-tag-on-cream { color: var(--rust); }
.ll-tag-on-navy { color: var(--cream); border-color: var(--cream); }

.ll-card { background: var(--cream); color: var(--navy); border-radius: var(--radius-0); padding: var(--space-6); border-top: 6px solid var(--navy); }
.ll-card h3 { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 30px; margin: 0 0 var(--space-2); }
.ll-card p { margin: 0; }

.ll-slats { height: 56px; background: repeating-linear-gradient(to bottom, var(--kraft-deep) 0 8px, transparent 8px 24px); }

.ll-lot { display: inline-grid; grid-template-columns: auto auto; border: 2px solid var(--navy); font-family: var(--font-display); font-weight: 500; color: var(--navy); background: var(--cream); }
.ll-lot span { padding: var(--space-1) var(--space-2); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.ll-lot span:nth-child(odd) { border-right: 1px solid var(--line); color: var(--ink-muted); }
.ll-lot span:nth-last-child(-n+2) { border-bottom: 0; }

.ll-log { background: var(--cream); max-width: 360px; }
.ll-photo { background: var(--navy); color: var(--cream); aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: var(--space-4); font-size: 14px; line-height: 20px; box-sizing: border-box; }
.ll-log-body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.ll-log-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 26px; margin: 0; }
.ll-log-meta { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-muted); }