/* Blåstripe – faste identitetselementer.
   Felles for alle sider og logovarianter. Endres bare her.
   Samme forholdstall som logofilene, stickerne og Instagram (blastripe_logo.py). Én logoform – ingen varianter.

   Farger
   - Øverste stripe: #1F4FA8 på lys bakgrunn, #4E83E6 på mørk (--stripe settes av siden).
   - Nederste stripe: alltid #7AA5F0.
   - BYRÅ 700: alltid #FF6A47 med #0E1E3A tekst.

   Stripepar (pynt, uten BYRÅ 700) – .bs-stripes
   - Lik tykkelse t på begge, avstand 0,8 t, nederste stripe 88 % av øverste.

   Logoformen (stripepar + BYRÅ 700) – .bs-stripes.bs-lockup
   - t = 0,075 × ordmerkets skriftstørrelse (S). Avstand mellom stripene 0,8 t.
   - BYRÅ 700: Archivo Italic 800, 2,533 t (= 0,19 S). Felthøyde 3,6 t, sidepolstring 0,42 em.
     Skrått parallellogram 12° (samme helning som kursiven), skarpe hjørner, sentrert på stripene,
     høyrekant = logoens høyrekant. Teksten rettes opp inni, så den ikke blir dobbelt skrå.
   - Begge stripene ender i et skrått kutt parallelt med feltets venstre kant.
   - Luke mellom kutt og felt: 0,8 t, målt vannrett. Fast. Justeres aldri per flate.
   - Minste størrelse: luka skal være minst 0,5 mm på trykk og 2 px på skjerm
     → logoen minst 47 mm bred på trykk og 190 px bred på skjerm. Mindre enn det: bruk ordmerket alene. */
@property --bs-t{syntax:'<length>';inherits:true;initial-value:8px}
:root{
  --brand-stripe-hi-light:#1F4FA8;
  --brand-stripe-hi-dark:#4E83E6;
  --brand-stripe-lo:#7AA5F0;
  --brand-tag-bg:#FF6A47;
  --brand-tag-ink:#0E1E3A;
  --brand-gap-ratio:.8;
  --brand-lo-width:88%;
}

/* To striper. Tykkelsen styres med --bs-t der komponenten brukes. */
.bs-stripes{--bs-t:clamp(6px,1vw,11px);display:grid;gap:calc(var(--bs-t) * var(--brand-gap-ratio))}
.bs-stripes > b,.bs-stripes > i{display:block;height:var(--bs-t);background:var(--stripe,var(--brand-stripe-hi-light))}
.bs-stripes > b + b,.bs-stripes > i + i{background:var(--brand-stripe-lo);width:var(--brand-lo-width)}

/* Logoformen: stripene ender i skrått kutt, fast luke (0,8 t), så BYRÅ 700.
   Kolonneavstand = 0,8 t − tan12° × 1,4 t, så kuttet treffer feltets kant i riktig avstand på hver stripe. */
.bs-stripes.bs-lockup{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--bs-t) var(--bs-t);row-gap:calc(var(--bs-t) * .8);column-gap:calc(var(--bs-t) * .5024)}
.bs-lockup > b,.bs-lockup > i{grid-column:1;width:auto;height:auto}
.bs-lockup > :is(b,i):first-of-type{grid-row:1;clip-path:polygon(0 0,100% 0,calc(100% - var(--bs-t) * .2126) 100%,0 100%)}
.bs-lockup > :is(b,i):nth-of-type(2){grid-row:2;width:auto;clip-path:polygon(0 0,calc(100% - var(--bs-t) * .3826) 0,calc(100% - var(--bs-t) * .5951) 100%,0 100%)}
.bs-lockup > .bs-tag{grid-column:2;grid-row:1 / 3;align-self:center;margin-block:calc(var(--bs-t) * -.4)}

/* BYRÅ 700-feltet. Størrelsen følger stripetykkelsen (--bs-t), så forholdet aldri endres.
   Teksten ligger i en <span> som rettes opp mot skråstillingen. */
.bs-tag{display:block;background:var(--brand-tag-bg);color:var(--brand-tag-ink);padding:0 .42em;font-family:var(--f-display);font-weight:800;font-style:italic;font-stretch:110%;font-size:calc(var(--bs-t) * 2.5333);line-height:1.42;white-space:nowrap;border:0;border-radius:0;transform:skewX(-12deg);box-shadow:0 10px 30px -8px rgba(255,106,71,.55)}
.bs-tag>span{display:inline-block;transform:skewX(12deg)}