/* ==========================================================================
   Editorial restyle — typography, buttons, cards, section rhythm, tuned to
   match a reference design system (styles.refero.design). Colors are
   whatever the page's own palette stylesheet defines (style.css's navy
   system by default, or css/palette.css's sage/teal/olive system on
   pages that opt in) — this file only touches type/shape, never a color
   value directly. The dashed/crosshair motif and the shop's shadowed
   product photography stay in place structurally.
   Loaded AFTER style.css on every page except the cover (index.html), so
   it overrides style.css's defaults via source order without touching
   the shared --font-body/--font-display root variables the cover page
   still depends on (it never links this file, but it shares style.css).

   Font: the reference uses HelveticaNow, a licensed commercial font we
   can't self-host. Public Sans is the closest open substitute — it's
   built explicitly as a free alternative to Helvetica — at the same two
   weights the reference ships (400 regular, 600 semibold).

   Type scale, line-height, and letter-spacing below are taken directly
   from the reference's tokens (caption 14 / body-sm 16 / body 18 /
   subheading 23 / heading-sm 35 / heading 46 / heading-lg 50 / display
   150). Reference tracking is given in absolute px at a fixed size; it's
   converted here to em (tracking ÷ size) so it scales correctly with our
   fluid clamp()-based sizing instead of the reference's static desktop
   values.
   ========================================================================== */

:root {
  --font-editorial: 'Public Sans', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Jost — a free geometric sans in the Futura/Kabel tradition (circular
     O, pointed apex on A/M/W) — used wherever the site wants a Futura-
     light feel: the footer wordmark here, and homepage section headings
     via css/broken-grid.css's own use of this same variable. */
  --font-geo: 'Jost', var(--font-editorial);
}

/* -------------------------------------------------------------------------
   Typography — font-family override. style.css declares font-family
   explicitly on these selectors (via --font-body/--font-display); each is
   re-declared here with the same specificity so source order wins,
   without redefining the shared variables themselves.
   ------------------------------------------------------------------------- */
body,
h1, h2, h3, .font-display,
.eyebrow, .label, .small-caps, .caption,
.pull-quote, .logo__word, .btn, .pill {
  font-family: var(--font-editorial);
}

h1, .h1,
.hero h1 {
  font-size: clamp(2.75rem, 9vw, 9.375rem); /* heading-lg -> display: 44px -> 150px */
  font-weight: 400;
  line-height: 0.93; /* --leading-display */
  letter-spacing: -0.05em; /* --tracking-display: -7.5px / 150px */
  color: var(--ink);
}

h2, .h2 {
  font-size: clamp(2rem, 4.2vw, 2.875rem); /* --text-heading: 46px */
  font-weight: 400;
  line-height: 1; /* --leading-heading */
  letter-spacing: -0.03em; /* --tracking-heading: -1.38px / 46px */
  color: var(--ink);
}

h3, .h3 {
  font-size: clamp(1.25rem, 1.6vw, 1.4375rem); /* --text-subheading: 23px */
  font-weight: 400;
  line-height: 1.2; /* --leading-subheading */
  letter-spacing: -0.017em; /* --tracking-subheading: -0.39px / 23px */
  color: var(--ink);
}

body, p, .body-text {
  font-size: 1.125rem; /* --text-body: 18px */
  font-weight: 400;
  line-height: 1.31; /* --leading-body */
  letter-spacing: 0; /* --tracking-body: -0.07px / 18px, effectively flat */
}

.eyebrow, .label, .small-caps, .caption,
.size-small, .btn, .view-all, .pill,
.nav-links, .footer-col a, .footer-col p,
.footer-bottom, .shop-card__price, .card__caption {
  font-size: 0.875rem; /* --text-caption: 14px */
  line-height: 1.4; /* --leading-caption */
  letter-spacing: 0.015em; /* --tracking-caption: 0.21px / 14px */
}

.eyebrow, .label {
  font-weight: 400;
  letter-spacing: 0.16em; /* uppercase small-caps label tracking stays as its own established convention, not the reference caption tracking above */
}

/* Footer brand — name + tagline sized down 30% from their normal type-
   scale sizes (logo__word's usual 1rem, the tagline's inherited 1.125rem
   body size), with the wordmark itself moved to a light geometric
   ("Futura light") face instead of the site's regular sans. Site-wide:
   footer markup is identical on every page. Scoped to .footer-brand so
   nav's own .logo__word (same class, no tagline next to it) is
   untouched — this is specifically the name+tagline pairing in the
   footer, not the header wordmark. */
.footer-brand .logo__word {
  font-size: 0.7rem; /* 1rem - 30% */
  font-family: var(--font-geo);
  font-weight: 300;
}

.footer-tagline {
  font-size: 0.7875rem; /* 1.125rem - 30% */
}

.small-caps {
  font-weight: 400;
  letter-spacing: 0.14em;
}

strong, b, .font-semibold, .card__caption strong {
  font-weight: 600; /* --font-weight-semibold, the only weight above regular */
}

/* Pull quote: set at the heading-sm scale — smaller than a section
   heading, larger than body copy. */
.pull-quote {
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1875rem); /* --text-heading-sm: 35px */
  line-height: 1.15; /* --leading-heading-sm */
  letter-spacing: -0.02em; /* --tracking-heading-sm: -0.7px / 35px */
  font-style: normal;
}

/* -------------------------------------------------------------------------
   Layout — reference's max content width.
   ------------------------------------------------------------------------- */
:root {
  --content-width: 1200px;
}

/* -------------------------------------------------------------------------
   Buttons — pill-shaped, flat, two variants (ghost / filled). No shadow,
   no hover motion beyond a plain fill/border swap.
   ------------------------------------------------------------------------- */
.btn {
  border-radius: 999px; /* --radius-buttons: 500px, effectively a full pill at any button height */
  font-size: 1rem; /* --text-body-sm: 16px */
  letter-spacing: 0.005em; /* --tracking-body-sm: 0.08px / 16px */
  font-weight: 600;
  text-transform: none;
  box-shadow: none;
}

.pill {
  border-radius: 999px; /* --radius-tags: 500px */
  font-weight: 400;
}

/* -------------------------------------------------------------------------
   Cards — flat rectangles, zero radius, zero shadow, hairline edge only.
   ------------------------------------------------------------------------- */
.card__frame {
  border-radius: 0; /* --radius-cards: 0px */
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   Section rhythm — generous vertical spacing, alternating cream/paper
   tone instead of dashed dividers between major sections. The dashed
   crosshair motif stays everywhere else (buttons' marks, card leaders,
   list markers) — it's only the between-section <hr> rules that go.
   ------------------------------------------------------------------------- */
:root {
  --section-space: clamp(4.5rem, 8vw, 5rem); /* --section-gap: 80px at desktop */
}

/* -------------------------------------------------------------------------
   Hero — large horizontal word pairing with the eyebrow rotated 90° along
   the left edge, echoing the reference's short-phrase-at-huge-scale
   pattern more literally than our full-sentence headline could on its
   own. The actual sentence moves to the subhead so the complete meaning
   is still on the page, just not carried by the h1 itself.
   ------------------------------------------------------------------------- */

.hero__row {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.hero__vertical {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-editorial);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-bottom: 0.5rem;
  flex-shrink: 0;
}

.hero__main {
  flex: 1;
  min-width: 0;
}

.hero h1 {
  margin-top: 0;
  max-width: none;
  font-size: clamp(3.5rem, 13vw, 9.375rem);
  line-height: 0.85;
  text-transform: uppercase;
}

/* Force exactly two rows ("Space" / "& Object") regardless of viewport —
   without this, "& Object" alone was narrow enough to soft-wrap into a
   third line at some desktop widths where the vertical eyebrow column
   ate into the available width. */
.hero__line {
  display: block;
  white-space: nowrap;
}

.hero__subhead {
  margin-top: 1.75rem;
  font-size: 1.125rem;
  max-width: 46ch;
}

@media (max-width: 640px) {
  .hero__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .hero__vertical {
    writing-mode: horizontal-tb;
    transform: none;
    padding-bottom: 0;
    white-space: normal;
    max-width: 30ch;
  }
}

/* -------------------------------------------------------------------------
   Statement — keep the asymmetric mark/text grid, retune body size to the
   18px baseline instead of the old serif-era 1.2rem.
   ------------------------------------------------------------------------- */
.statement__text p {
  font-size: 1.125rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Pull-quote — left-weighted like every other section now, not centered.
   ------------------------------------------------------------------------- */
.pull-quote-section {
  text-align: left;
}

.pull-quote-section .pull-quote {
  margin-inline: 0;
  max-width: 26ch;
}

.pull-quote-attribution {
  text-align: left;
}

/* -------------------------------------------------------------------------
   Subpage header — Studio / Work / Shop / Contact <h1> stays at the
   section-heading scale (not full hero display size).
   ------------------------------------------------------------------------- */
.page-header h1 {
  font-size: clamp(2rem, 4.2vw, 2.875rem);
  max-width: 20ch;
}

.page-header p {
  font-size: 1.125rem;
}