/* Funnel Sans — selbst gehostet (variabler Font, woff2) in fonts/.
   Ersetzt den frueheren Google-Fonts @import; keine externe Abhaengigkeit mehr. */
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/funnel-sans-v3-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/funnel-sans-v3-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/funnel-sans-v3-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Funnel Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/funnel-sans-v3-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   MENSCHEN IM FOKUS — Color & Type Foundations
   Berufsfotografie Burgenland · traveling photography exhibition
   ----------------------------------------------------------------------------
   A strictly monochrome identity: warm charcoal ground, white type, and the
   single expressive lever of WEIGHT (bold vs. regular) inside all-caps lines.
   No accent hues — colour enters only through the photographs themselves and
   through partner/sponsor logos.
   ========================================================================== */

:root {
  /* ---- Core palette ----------------------------------------------------- */
  --mif-bg:          #211D21;  /* primary ground — warm near-black charcoal   */
  --mif-bg-deep:     #000000;  /* pure black: photo mounts, contrast blocks   */
  --mif-surface:     #2B262B;  /* faintly raised panel on the charcoal ground */
  --mif-fg:          #FFFFFF;  /* headlines, bold emphasis, the mark          */
  --mif-paper:       #FFFFFF;  /* inverted / print-on-white surfaces          */

  /* ---- Text on dark (opacity-stepped white) ----------------------------- */
  --mif-fg-strong:   #FFFFFF;             /* display + bold lines             */
  --mif-fg-body:     rgba(255,255,255,.82); /* running body copy             */
  --mif-fg-muted:    rgba(255,255,255,.58); /* captions, roles, secondary    */
  --mif-fg-faint:    rgba(255,255,255,.34); /* meta, tracked labels          */

  /* ---- Text on paper (inverted contexts) -------------------------------- */
  --mif-ink:         #211D21;
  --mif-ink-body:    rgba(33,29,33,.80);
  --mif-ink-muted:   rgba(33,29,33,.55);

  /* ---- Lines & hairlines ------------------------------------------------ */
  --mif-line:        rgba(255,255,255,.16); /* dividers on dark              */
  --mif-line-strong: rgba(255,255,255,.40);
  --mif-line-ink:    rgba(33,29,33,.16);    /* dividers on paper            */

  /* ============ TYPE ====================================================
     The exhibition is set in FUNNEL SANS (Google Fonts) — a clean, slightly
     warm neo-grotesque. Loaded via the @import above; system grotesques are
     the fallback while it loads.
     ===================================================================== */
  --mif-sans: "Funnel Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --mif-w-regular: 400;
  --mif-w-medium:  500;
  --mif-w-bold:    700;

  /* Type scale — large-format poster/panel down to UI/caption.
     Built on a ~1.28 ratio. Override --mif-scale for screen vs. print. */
  --mif-display:   clamp(3rem, 7vw, 6.5rem);   /* hero exhibition title      */
  --mif-h1:        clamp(2.2rem, 4.4vw, 3.75rem);
  --mif-h2:        clamp(1.6rem, 3vw, 2.5rem);
  --mif-h3:        clamp(1.25rem, 2vw, 1.65rem);
  --mif-lead:      1.3rem;                       /* invitation lead lines     */
  --mif-body:      1.0625rem;
  --mif-small:     0.9375rem;
  --mif-label:     0.75rem;                      /* tracked all-caps labels   */

  /* Tracking — headlines sit at normal/tight, labels open up wide */
  --mif-track-tight:  -0.01em;
  --mif-track-normal: 0;
  --mif-track-label:  0.18em;
  --mif-track-badge:  0.30em;   /* circular MENSCHEN·IM·FOKUS lockup         */

  --mif-leading-tight: 1.04;
  --mif-leading-head:  1.1;
  --mif-leading-body:  1.5;

  /* ---- Geometry --------------------------------------------------------- */
  --mif-radius: 0px;            /* the brand is hard-edged — no rounding      */
  --mif-gutter: 2rem;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES
   Apply .mif-scope to a container to opt into the exhibition's type system.
   ========================================================================== */

.mif-scope {
  background: var(--mif-bg);
  color: var(--mif-fg-body);
  font-family: var(--mif-sans);
  font-weight: var(--mif-w-regular);
  font-size: var(--mif-body);
  line-height: var(--mif-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — the exhibition wordmark voice: ALL CAPS, mixed weight.
   Convention: set the line regular, wrap the keyword in <strong>. */
.mif-display {
  font-size: var(--mif-display);
  font-weight: var(--mif-w-regular);
  line-height: var(--mif-leading-tight);
  letter-spacing: var(--mif-track-tight);
  text-transform: uppercase;
  color: var(--mif-fg-strong);
}
.mif-display strong { font-weight: var(--mif-w-bold); }

.mif-h1 {
  font-size: var(--mif-h1);
  font-weight: var(--mif-w-regular);
  line-height: var(--mif-leading-head);
  text-transform: uppercase;
  color: var(--mif-fg-strong);
}
.mif-h1 strong { font-weight: var(--mif-w-bold); }

.mif-h2 {
  font-size: var(--mif-h2);
  font-weight: var(--mif-w-regular);
  line-height: var(--mif-leading-head);
  color: var(--mif-fg-strong);
}
.mif-h2 strong { font-weight: var(--mif-w-bold); }

.mif-h3 {
  font-size: var(--mif-h3);
  font-weight: var(--mif-w-bold);
  line-height: var(--mif-leading-head);
  color: var(--mif-fg-strong);
}

.mif-lead {
  font-size: var(--mif-lead);
  font-weight: var(--mif-w-regular);
  line-height: 1.4;
  color: var(--mif-fg-strong);
}

.mif-body {
  font-size: var(--mif-body);
  font-weight: var(--mif-w-regular);
  line-height: var(--mif-leading-body);
  color: var(--mif-fg-body);
  text-wrap: pretty;
}

.mif-small {
  font-size: var(--mif-small);
  line-height: 1.45;
  color: var(--mif-fg-muted);
}

/* Tracked all-caps label — section kickers, roles (LANDESINNUNGSMEISTER) */
.mif-label {
  font-size: var(--mif-label);
  font-weight: var(--mif-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--mif-track-label);
  color: var(--mif-fg-muted);
}

/* Circular badge lockup tracking helper */
.mif-badge-track {
  text-transform: uppercase;
  letter-spacing: var(--mif-track-badge);
  font-weight: var(--mif-w-regular);
}