/*
  Typographic system — one family (Archivo), three registers carried by its width axis.

    display — headlines and numbers. WIDE and HEAVY (--stretch-display), very tight tracking, large
              scale: the mass of a finished piece.
    label   — eyebrows, buttons, small uppercase facts. Slightly wide, tracked out.
    body    — everything you read to act on: nav, prices, forms, product facts. Normal width.

  Nathy's voice (pull quotes, the story lead) is the body register at a larger size, never a second
  typeface — the owner's rule (PPT slides 1, 12–15).
*/

body { font-stretch: var(--stretch-body); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    line-height: var(--leading-tight);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink-strong);
    text-wrap: balance;
}

h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5, h6 { font-size: var(--text-base); }
h3, h4, h5, h6 { font-weight: var(--weight-bold); font-stretch: var(--stretch-label); line-height: var(--leading-snug); }

p {
    max-width: var(--measure);
    line-height: var(--leading-normal);
}

small {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

::selection {
    background: var(--cg-red);
    color: var(--cg-white);
}

/* ---------------------------------------------------------------------------
   Editorial primitives — shared by Home, Store, Story, Academy and the account
   area so every surface speaks the same typographic language.
   --------------------------------------------------------------------------- */

/* Small caps label above a headline. The single most useful editorial device: it gives a section a
   voice without adding another heading level. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0 0 var(--space-sm);
    font-family: var(--font-body);
    font-stretch: var(--stretch-label);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* The maker's mark before an eyebrow: a short red rule ending in a drop — a bead of glaze running
   down a piece. Still the brand's punctuation: one colour, no image. */
.eyebrow::before {
    content: "";
    inline-size: 2rem;
    block-size: 0.5rem;
    flex: none;
    background:
        radial-gradient(circle at calc(100% - 0.25rem) 50%, currentColor 0 0.21rem, transparent 0.24rem),
        linear-gradient(currentColor 0 0) 0 50% / calc(100% - 0.6rem) 2px no-repeat;
}

.eyebrow--plain::before { display: none; }
.eyebrow--muted { color: var(--color-ink-muted); }

/* Display headline, larger and tighter than a plain h2. Use for section openers. */
.display {
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: var(--text-3xl);
    font-weight: var(--weight-black);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
    margin: 0;
}

.display--xl { font-size: var(--text-4xl); }
.display--hero { font-size: var(--text-5xl); }
.display--sm { font-size: var(--text-2xl); }

/* One red word inside a black headline — the wordmark's own CERAMI/GEEK logic, reused as a
   typographic accent. Never more than one per headline. */
.display__accent { color: var(--color-accent); }

/* Standfirst / lead paragraph. */
.lead {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--color-ink-muted);
    max-width: var(--measure);
    margin: 0;
}

.lead--tight { max-width: var(--measure-narrow); }

/* Nathy's voice. */
.u-editorial,
.pull-quote {
    font-family: var(--font-editorial);
}

.pull-quote {
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    font-weight: var(--weight-medium);
    font-style: normal;
    color: var(--color-ink-strong);
    max-width: var(--measure-narrow);
    margin: 0;
    padding-inline-start: var(--space-lg);
    border-inline-start: 3px solid var(--color-accent);
}

.pull-quote__attribution {
    display: block;
    margin-block-start: var(--space-md);
    font-family: var(--font-body);
    font-style: normal;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* Small factual label/value pairs — dimensions, materials, lead time, order facts. */
.fact-list {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
}

.fact-list__row {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) 1fr;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.fact-list__label {
    color: var(--color-ink-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    align-self: center;
}

.fact-list__value { color: var(--color-ink); margin: 0; max-width: none; }

/* ---- Register overrides on the ink ground --------------------------------- */
.on-ink,
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4, .on-ink h5, .on-ink h6 {
    color: var(--color-on-deep-strong);
}

.on-ink .lead,
.on-ink .fact-list__label { color: var(--color-on-deep-muted); }
.on-ink .eyebrow { color: var(--color-accent-on-deep); }
.on-ink .display__accent { color: var(--color-accent-on-deep); }
.on-ink .pull-quote { color: var(--color-on-deep-strong); border-inline-start-color: var(--color-accent-on-deep); }
.on-ink .pull-quote__attribution { color: var(--color-on-deep-muted); }
.on-ink .fact-list__row { border-block-start-color: var(--color-on-deep-border); }
.on-ink .fact-list__value { color: var(--color-on-deep); }

/* ---- Utilities ------------------------------------------------------------ */
.u-measure { max-width: var(--measure); }
.u-measure-narrow { max-width: var(--measure-narrow); }
.u-no-measure { max-width: none; }
.u-center { text-align: center; }
.u-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Visually hidden but available to assistive technology. */
.u-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}