/*
 * ORDMÄRKET — loggan 3A "Anton" (vald av Robert 2026-10-06, tavlan
 * logga-studio/tavla2.html). Det ENDA stället där ordmärket stylas.
 *
 * Markupen, tecken för tecken densamma i varje vy (vakten är
 * test/unit/produktnamn-the-studio.test.js):
 *
 *   <a class="ordmarke" href="/" aria-label="The Studio by Papaya Coco">
 *     <span class="ordmarke-sta"><span class="ordmarke-the">THE</span>STUDIO</span>
 *     <span class="ordmarke-etikett">by Papaya Coco</span></a>
 *
 * Klassnamnen är tavlans (.m .a .sta .the .pill) med prefix: .pill och .a är
 * för allmänna för att släppas lösa i vyer som redan har egna pillerklasser.
 *
 * Anton laddas i samma Google Fonts-länk som Inter, med display=swap.
 * Storleken är 30 px i sidhuvudet och 24 px på mobil, så att loggan,
 * språkväljaren och "Logga in" ryms på en rad i 390 px. THE och etiketten har
 * golv (8 resp. 9 px) — etiketten blir aldrig mindre än 9 px.
 */
.ordmarke {
  display: inline-flex; align-items: flex-end; gap: .1em; flex: none;
  white-space: nowrap; line-height: .8; color: var(--ink); text-decoration: none;
  font-family: 'Anton', 'Inter', system-ui, sans-serif; font-weight: 400;
  letter-spacing: .005em; font-size: 30px;
}
.ordmarke-sta { display: flex; flex-direction: column; }
.ordmarke-the {
  font-size: max(8px, .24em); letter-spacing: .3em; margin: 0 0 .3em .04em; line-height: 1;
}
.ordmarke-etikett {
  font: 700 max(9px, .13em) 'Inter', system-ui, sans-serif; letter-spacing: .01em;
  background: #ff7878; color: #fff; border-radius: 999px; padding: .5em 1em;
  margin-bottom: .1em; line-height: 1.1;
}
.ordmarke:focus-visible { outline: 2px solid #ff7878; outline-offset: 4px; border-radius: 4px; }

/* Mörk botten (adminytan): THE och STUDIO ljusa, etiketten oförändrad. */
.topbar.morkt .ordmarke { color: #f5f1ea; }

@media (max-width: 720px) {
  .ordmarke { font-size: 24px; }
}