/* ============================================================
   MARKS — HC monogram + corner marks
   ============================================================ */

/* ---------- HC MONOGRAM (primary logo) ----------
   Kvadrat med outline + Archivo Black "HC".
   Bruk: .hc-mark.hc-mark--md.hc-mark--ink
*/
.hc-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.04em;
  border: 1.5px solid var(--ink-600);
  color: var(--ink-600);
  background: transparent;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
  /* compensate for cap-height — nudge text up so it sits visually centered */
  padding-top: 0.05em;
}

/* Sizes */
.hc-mark--xs { width: 24px;  height: 24px;  font-size: 10px; border-width: 1px;   }
.hc-mark--sm { width: 32px;  height: 32px;  font-size: 12px; border-width: 1px;   }
.hc-mark--md { width: 44px;  height: 44px;  font-size: 16px; border-width: 1.5px; }
.hc-mark--lg { width: 64px;  height: 64px;  font-size: 22px; border-width: 1.5px; }
.hc-mark--xl { width: 96px;  height: 96px;  font-size: 32px; border-width: 2px;   }
.hc-mark--2xl{ width: 144px; height: 144px; font-size: 48px; border-width: 2.5px; }

/* Color variants */
.hc-mark--ink   { border-color: var(--ink-600);   color: var(--ink-600);   }
.hc-mark--cream { border-color: var(--cream-200); color: var(--cream-200); }
.hc-mark--rust  { border-color: var(--rust-400);  color: var(--rust-400);  }
.hc-mark--olive { border-color: var(--olive-600); color: var(--olive-600); }

/* Filled variants — invert background */
.hc-mark--filled.hc-mark--ink   { background: var(--ink-600);   color: var(--cream-200); }
.hc-mark--filled.hc-mark--cream { background: var(--cream-200); color: var(--ink-600);   }
.hc-mark--filled.hc-mark--rust  { background: var(--rust-400);  color: var(--cream-200); }
.hc-mark--filled.hc-mark--olive { background: var(--olive-600); color: var(--cream-200); }

/* ---------- WORDMARK (secondary logo) ----------
   "Hege Christine" — Archivo Black + Newsreader Italic Rust
   Bruk: <span class="wordmark">Hege<em>Christine</em></span>
*/
.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink-600);
  display: inline-flex;
  gap: 0.25em;
  align-items: baseline;
}
.wordmark em,
.wordmark .it {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  color: var(--rust-400);
  letter-spacing: -0.01em;
}
.wordmark--sm { font-size: var(--text-xl); }
.wordmark--lg { font-size: var(--text-5xl); }
.wordmark--xl { font-size: var(--text-6xl); }
.wordmark--cream { color: var(--cream-200); }
.wordmark--cream em { color: var(--sand-200); }

/* Lock-up: monogram + wordmark together */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.lockup .wordmark { font-size: var(--text-2xl); }

/* ---------- CORNER MARKS ----------
   Decorative L-shapes that anchor a layout corner.
   Bruk: <div class="corner-mark corner-mark--a"></div>
   Plasseres absolutt inne i en relativ container.
*/
.corner-mark {
  position: relative;
  width: 96px;
  height: 96px;
  display: block;
  flex-shrink: 0;
}
.corner-mark > span {
  position: absolute;
  display: block;
  background: var(--ink-600);
}

/* a · simple L with rust accent tab */
.corner-mark--a > span:nth-child(1) { top: 0; left: 0; width: 42%; height: 2px; }
.corner-mark--a > span:nth-child(2) { top: 0; left: 0; width: 2px; height: 42%; }
.corner-mark--a > span:nth-child(3) {
  top: 0; left: 8%; width: 18%; height: 5px;
  background: var(--rust-400); transform: translateY(-3px);
}

/* b · double L (ink outer, rust inner) */
.corner-mark--b > span:nth-child(1) { top: 6px;  left: 6px;  width: 38%; height: 1px; }
.corner-mark--b > span:nth-child(2) { top: 6px;  left: 6px;  width: 1px; height: 38%; }
.corner-mark--b > span:nth-child(3) { top: 14px; left: 14px; width: 30%; height: 1px; background: var(--rust-400); }
.corner-mark--b > span:nth-child(4) { top: 14px; left: 14px; width: 1px; height: 30%; background: var(--rust-400); }

/* c · stepped dots */
.corner-mark--c {
  background-image:
    radial-gradient(circle, var(--ink-600) 1px, transparent 1.5px),
    radial-gradient(circle, var(--ink-600) 1px, transparent 1.5px);
  background-size: 14px 14px, 14px 14px;
  background-position: 6px 6px, 6px 6px;
  background-repeat: repeat repeat;
  background-image: radial-gradient(circle, var(--ink-600) 1px, transparent 1.5px);
  background-size: 14px 14px;
  background-position: 6px 6px;
  background-repeat: no-repeat;
}
.corner-mark--c {
  background:
    radial-gradient(circle at 6px 6px, var(--ink-600) 1.2px, transparent 1.6px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(135deg, black 0%, black 55%, transparent 65%);
          mask-image: linear-gradient(135deg, black 0%, black 55%, transparent 65%);
}

/* d · big rust L */
.corner-mark--d > span:nth-child(1) { top: 6px; left: 6px; width: 48%; height: 6px; background: var(--rust-400); }
.corner-mark--d > span:nth-child(2) { top: 6px; left: 6px; width: 6px; height: 48%; background: var(--rust-400); }

/* e · solid triangle */
.corner-mark--e {
  position: relative;
}
.corner-mark--e::before {
  content: "";
  position: absolute;
  left: 14px; bottom: 14px;
  width: 0; height: 0;
  border-left: 48px solid transparent;
  border-bottom: 48px solid var(--ink-600);
}

/* f · centered square */
.corner-mark--f::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 30%; height: 30%;
  border: 1.5px solid var(--ink-600);
}

/* On dark backgrounds — flip ink to cream */
.on-dark .corner-mark > span,
.corner-mark--cream > span { background: var(--cream-200); }
.on-dark .corner-mark--e::before,
.corner-mark--cream.corner-mark--e::before { border-bottom-color: var(--cream-200); }
.on-dark .corner-mark--f::before,
.corner-mark--cream.corner-mark--f::before { border-color: var(--cream-200); }

/* Size modifiers */
.corner-mark--sm { width: 64px; height: 64px; }
.corner-mark--lg { width: 128px; height: 128px; }