/* Stilen för de publika ordsidorna.
   Egen fil, inte Tailwind: sidorna byggs som färdig HTML av
   scripts/bygg-ordsidor.mjs, utanför Vites klassbygge, så klasserna måste
   finnas oavsett vad appen använder. Ljus botten här medan appen är mörk,
   för det här är en läsesida och inte en träningsyta. */

.ordsida {
  background: #fff;
  color: #191715;
  min-height: 100svh;
  font-family: Outfit, system-ui, -apple-system, sans-serif;
}
.os-inre { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.os-topp { border-bottom: 1px solid #e9e6e1; }
.os-rad { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.os-logo { font-family: Sora, Outfit, sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: #191715; text-decoration: none; }
.os-knapp {
  display: inline-block; background: #191715; color: #fff; text-decoration: none;
  border-radius: 999px; padding: 10px 20px; font-size: 15px; font-weight: 600;
  min-height: 44px; line-height: 24px; box-sizing: border-box;
}
.os-brod { font-size: 13px; color: #8d8880; margin: 24px 0 4px; }
.os-brod a { color: #8d8880; }
.os-ord { font-family: Sora, Outfit, sans-serif; font-weight: 800; font-size: 46px; letter-spacing: -.03em; line-height: 1.02; margin: 0; }
.os-klass { font-size: 14px; color: #8d8880; margin-top: 8px; }
.os-bet { margin-top: 24px; display: flex; gap: 18px; align-items: flex-start; }
.os-bettxt { flex: 1; min-width: 0; }
.os-lbl { font-size: 12px; font-weight: 700; color: #c98f28; text-transform: uppercase; letter-spacing: .07em; margin: 0; }
.os-syn { font-family: Sora, Outfit, sans-serif; font-weight: 700; font-size: 24px; line-height: 1.22; margin: 6px 0 0; }
.os-bild { width: 96px; height: 96px; object-fit: contain; flex-shrink: 0; }
.os-block { margin-top: 24px; }
.os-txt { margin-top: 6px; font-size: 17px; line-height: 1.55; color: #3a3733; }
.os-cta { margin-top: 30px; border: 1px solid #e9e6e1; border-radius: 18px; padding: 20px; background: #faf8f5; }
.os-ctarub { font-family: Sora, Outfit, sans-serif; font-weight: 800; font-size: 19px; margin: 0; line-height: 1.25; }
.os-ctatxt { font-size: 15px; color: #6b665f; margin: 8px 0 14px; line-height: 1.5; }
.os-rel { margin-top: 30px; border-top: 1px solid #e9e6e1; padding-top: 18px; }
.os-relrub { font-size: 13px; font-weight: 700; color: #8d8880; text-transform: uppercase; letter-spacing: .07em; margin: 0; }
.os-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.os-chip { border: 1px solid #e3ded6; border-radius: 999px; padding: 8px 14px; font-size: 15px; color: #3a3733; text-decoration: none; }
.os-fot { margin-top: 36px; border-top: 1px solid #e9e6e1; padding: 16px 0 32px; font-size: 13px; color: #a19b93; }
.os-fot a { color: #a19b93; }
.os-ratt { margin-top: 10px; line-height: 1.5; }

@media (max-width: 520px) {
  .os-ord { font-size: 38px; }
  .os-syn { font-size: 21px; }
  .os-bild { width: 76px; height: 76px; }
  .os-txt { font-size: 16px; }
}