/* =========================================================
   MDM — Mobility Design Magazin · Web Design System
   Derived from the Hof University MDM 2024/2025 covers
   ========================================================= */

:root {
  /* Grounds */
  --paper:      #f6f6f4;
  --paper-2:    #ececeb;
  --ink:        #0c1024;   /* deep navy-black, like the 2025 cover ground */
  --ink-2:      #131a3a;
  --ink-soft:   #1b2347;

  /* Accents (shared chroma, varied hue feel of the brand) */
  --magenta:    #e6007e;   /* primary — 2024 cover */
  --magenta-d:  #c00069;
  --coral:      #e8482e;   /* secondary — 2025 lines */
  --line-red:   #e73040;   /* masthead speed lines (sampled) */
  --steel:      #7fb3c5;   /* steel blue — sampled from 2025 MDM */

  /* Hof University "H" mark colors (sampled from cover) */
  --hof-blue:   #0072bc;
  --hof-yellow: #ffde00;
  --hof-green:  #3eb762;
  --hof-red:    #ef3f4a;
  --hof-black:  #231f20;

  /* Text */
  --text:       #14182c;
  --text-dim:   #5b607a;
  --text-faint: #9398ad;
  --on-dark:    #f6f6f4;
  --on-dark-dim:#9aa2c4;

  --line:       #d8d8d4;
  --line-dark:  rgba(255,255,255,.14);

  /* Type */
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--magenta); color: #fff; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.section { padding-block: clamp(56px, 8vw, 120px); }

/* ---------- Type primitives ---------- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 0;
}
.eyebrow.on-dark { color: var(--steel); }

h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.02; margin: 0; }

/* The giant MDM grotesque scaling */
.mdm-display {
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .82;
}

/* ---------- Signature speed-line motif ---------- */
/* thin horizontal lines that strike across an element, like the covers */
.speedlines {
  position: relative;
}
.speedlines::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--gut));
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% + var(--gut));
  height: 62%;
  background: repeating-linear-gradient(
    to bottom,
    var(--lines-color, var(--coral)) 0,
    var(--lines-color, var(--coral)) 2px,
    transparent 2px,
    transparent 11px
  );
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: var(--lines-blend, normal);
}
.speedlines > * { position: relative; z-index: 1; }

/* standalone strip of lines used as a divider / accent */
.linestrip {
  height: 56px;
  background: repeating-linear-gradient(
    to bottom,
    var(--coral) 0, var(--coral) 2px,
    transparent 2px, transparent 11px
  );
}

/* skewed / angular banner (like the red IAA banner) */
.banner-skew {
  display: inline-block;
  background: var(--magenta);
  color: #fff;
  padding: .7em 1.3em;
  transform: skewX(-12deg);
  font-weight: 700;
  letter-spacing: .02em;
}
.banner-skew > span { display: inline-block; transform: skewX(12deg); }

/* ---------- Hof University "H" mark ---------- */
/* Faithful 3×3 rebuild of the Hof University logo mark:
   blue (top-left), yellow (bottom-left, 2 tall), black crossbar (center),
   green (top-right, 2 tall), red (bottom-right). */
.hofmark {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  width: 1.7em; height: 1.7em;
  flex: none;
}
.hofmark i { display: block; }
.hofmark .blue   { grid-area: 1 / 1 / 2 / 2; background: var(--hof-blue); }
.hofmark .yellow { grid-area: 2 / 1 / 4 / 2; background: var(--hof-yellow); }
.hofmark .black  { grid-area: 2 / 2 / 3 / 3; background: var(--hof-black); }
.hofmark .green  { grid-area: 1 / 3 / 3 / 4; background: var(--hof-green); }
.hofmark .red    { grid-area: 3 / 3 / 4 / 4; background: var(--hof-red); }
/* mono variant (e.g. on dark "student work" bar) */
.hofmark.mono i { background: currentColor; }
.hofmark.mono .black { background: color-mix(in srgb, currentColor 55%, transparent); }
.hofmark.mono .yellow,
.hofmark.mono .green { background: color-mix(in srgb, currentColor 78%, transparent); }

/* ---------- Buttons / chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  padding: .85em 1.4em;
  border: 1.5px solid currentColor;
  background: none; cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}
.btn .arw { transition: transform .2s; }
.btn:hover .arw { transform: translateX(4px); }
.btn--fill { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.btn--fill:hover { background: var(--magenta-d); border-color: var(--magenta-d); }
.btn--ghost:hover { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.btn--on-dark { color: var(--on-dark); }
.btn--on-dark.btn--ghost:hover { background: var(--on-dark); color: var(--ink); }