/* Shared logo component styles — included into every page */
:root{
  --red:#C41E3A;
  --red-deep:#9E1229;
  --ink:#0B0B0B;
  --paper:#ffffff;
  --rule:#e6e6e6;
  --mute:#6b6b6b;
  --cream:#F5F2EC;
}

/* ========== LOGO: PRIMARY LOCKUP ========== */
.logo{
  font-family:'Inter',sans-serif;
  line-height:1;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  --logo-size: 1;
}
.logo .top{
  display:inline-flex;
  align-items:center;
  gap:calc(18px * var(--logo-size));
}
.logo .mark{
  background:var(--red);
  color:#fff;
  font-weight:900;
  font-size:calc(108px * var(--logo-size));
  letter-spacing:-0.01em;
  padding:calc(16px * var(--logo-size)) calc(20px * var(--logo-size)) calc(14px * var(--logo-size));
  line-height:.92;
  border-radius:0;
  display:flex;
  align-items:center;
}
.logo .side{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.logo .side .tt{
  font-weight:900;
  font-size:calc(48px * var(--logo-size));
  letter-spacing:-0.015em;
  color:var(--ink);
  line-height:1.0;
  display:block;
}
.logo .under{
  margin-top:calc(16px * var(--logo-size));
  display:flex;
  flex-direction:column;
  gap:calc(10px * var(--logo-size));
  width:100%;
}
.logo .under .bar{
  height:calc(3px * var(--logo-size));
  background:var(--ink);
  width:100%;
}
.logo .under .est{
  font-weight:600;
  font-size:calc(12px * var(--logo-size));
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}

/* no-tagline variant */
.logo.no-tag .under{display:none}

/* on dark / on red */
.logo.on-dark .side .tt,
.logo.on-dark .under .bar,
.logo.on-dark .under .est{color:#fff;background:#fff}
.logo.on-dark .under .est{background:transparent}

.logo.on-red .mark{background:#fff;color:var(--red)}
.logo.on-red .side .tt,
.logo.on-red .under .est{color:#fff}
.logo.on-red .under .bar{background:#fff}

/* mono versions */
.logo.mono-black .mark{background:var(--ink)}
.logo.mono-white .mark{background:#fff;color:var(--ink);outline:2px solid var(--ink);outline-offset:-2px}
.logo.mono-white .side .tt,
.logo.mono-white .under .est{color:var(--ink)}

/* reversed (white bg inside ink environment) */
.logo.reversed .mark{background:#fff;color:var(--ink)}

/* ========== COMPACT / SQUARE ========== */
.logo-square{
  background:var(--red);
  color:#fff;
  font-family:'Inter',sans-serif;
  font-weight:900;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  letter-spacing:-0.01em;
  line-height:1;
  gap:calc(var(--sq) * 0.04);
  --sq:160px;
  width:var(--sq);
  height:var(--sq);
  padding:calc(var(--sq) * 0.16) 0;
}
.logo-square .sq-top{
  font-size:calc(var(--sq) * 0.26);
  letter-spacing:-0.02em;
  line-height:1;
  font-weight:900;
}
.logo-square .sq-bot{
  font-size:calc(var(--sq) * 0.13);
  letter-spacing:0.04em;
  line-height:1;
  font-weight:800;
}
/* small sizes — hide subline under 32px to stay legible */
.logo-square[style*="--sq:32"] .sq-bot,
.logo-square[style*="--sq:16"] .sq-bot{display:none}
.logo-square[style*="--sq:32"] .sq-top,
.logo-square[style*="--sq:16"] .sq-top{font-size:calc(var(--sq) * 0.36)}

.logo-square.on-dark{background:var(--red)}
.logo-square.mono-white{background:#fff;color:var(--red)}
.logo-square.mono-black{background:var(--ink);color:#fff}