/* ============================================================
   Lena Ihara — brand tokens
   Everything you need to rebrand this template lives here.
   Edit these values; the pages follow.
   ============================================================ */
:root {
  /* ---- Core palette ---- */
  --bg:            #0D0D0F;  /* page background — the gallery wall */
  --surface:       #16161a;  /* photograph placeholder / raised panels */
  --ink:           #EAEAEA;  /* primary text, buttons, focus ring */
  --ink-bright:    #FFFFFF;  /* hover state for links */
  --ink-strong:    #F4F4F5;  /* hero name, caption headings */
  --muted:         #9C9CA4;  /* body copy in secondary blocks */
  --muted-2:       #8E8E96;  /* eyebrow labels, metadata */
  --muted-3:       #82828A;  /* legal line, faintest text — AA on --bg */
  --nav-ink:       #C9C9CE;  /* header nav links */
  --footer-ink:    #C0C0C7;  /* footer links */
  --caption-ink:   #A9A9B0;  /* photo caption sub-line */
  --venue-ink:     #E4E4E8;  /* exhibition venue names */
  --index-ink:     #7E7E86;  /* section index numerals, list marks — AA on --bg */

  /* ---- Hairlines & tints (derived from --ink) ---- */
  --rule:          rgba(234,234,234,0.08);  /* section dividers */
  --rule-strong:   rgba(234,234,234,0.10);  /* table rows */
  --rule-btn:      rgba(234,234,234,0.40);  /* ghost button border */
  --rule-faint:    rgba(234,234,234,0.06);  /* mobile nav item borders */
  --tint-hover:    rgba(234,234,234,0.06);  /* ghost button hover fill */
  --tint-row:      rgba(234,234,234,0.03);  /* exhibition row hover */

  /* ---- Type ---- */
  --font-body: "Karla", -apple-system, sans-serif;
  --fs-base:   15px;   /* body size */
  --lh-base:   1.7;    /* body line-height */

  /* letterspacing scale — the quiet-gallery signature */
  --track-label: 0.28em;  /* eyebrow labels */
  --track-nav:   0.26em;  /* nav + small caps headings */
  --track-hero:  0.22em;  /* hero name */
  --track-btn:   0.30em;  /* buttons, brand wordmark */

  /* ---- Geometry ---- */
  --radius:    0;                        /* squared corners throughout */
  --gutter:    clamp(20px, 4vw, 48px);   /* page side padding */
  --maxw:      1240px;                   /* content column */
  --gap:       20px;                     /* grid / masonry gutter */
  --section-y: clamp(72px, 10vw, 130px); /* section vertical rhythm */

  /* ---- Motion ---- */
  --t-fast: 0.3s ease;
  --t-slow: 0.5s ease;
}