/* ------------------------------------------------------------------ *\
   AIriktig · dekorative trims
   Lavmælte redaksjonelle detaljer som deler designsystemets tokens
   (--ivory / --terra / --line / --paper …). Ren CSS + inline-SVG,
   ingen ekstra assets. Trygt å lenke på alle sider.
\* ------------------------------------------------------------------ */

/* ---------- PAPIRKORN ----------
   Fast, hårfin grain-tekstur bak innholdet (z-index:-1), slik at den
   aldri legger seg over eller svekker tekst. multiply gjør at bare de
   mørke kornene vises – over den varme ivory-flaten gir det et subtilt
   «trykt på papir»-preg. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- DROP-CAP ----------
   Innleder en ingress med en stor Fraunces-kursiv initial i terrakotta.
   Settes med klassen .dropcap på et avsnitt. */
.dropcap::first-letter{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-weight:500;
  color:var(--terra);
  float:left;
  font-size:3.3em;
  line-height:.82;
  padding:.06em .12em 0 0;
  -webkit-font-smoothing:antialiased;
}

/* ---------- SEKSJONSORNAMENT ----------
   Et lite, sentrert skille: <div class="ornament"><span>✦</span></div>
   Brukes sparsomt mellom store seksjoner – ikke overalt. */
.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  max-width:840px;
  margin:56px auto;
  padding:0 28px;
}
.ornament::before,
.ornament::after{
  content:"";
  height:1.5px;
  flex:0 0 56px;
  border-radius:99px;
}
.ornament::before{background:linear-gradient(90deg,transparent,var(--line))}
.ornament::after{background:linear-gradient(90deg,var(--line),transparent)}
.ornament span{
  font-family:"Fraunces",Georgia,serif;
  color:var(--terra);
  font-size:17px;
  line-height:1;
  opacity:.85;
  letter-spacing:.08em;
}

/* ---------- HJØRNEMERKER ----------
   Diskré L-formede crop-merker. Påføres fremhevede kort. .tier.featured
   har allerede position:relative, og bruker ikke ::before/::after selv,
   så vi kan trygt feste merkene der. Utility-klassen .trim-corners kan
   brukes manuelt på andre kort ved behov. */
.tier.featured,
.trim-corners{position:relative}

.tier.featured::before,
.tier.featured::after,
.trim-corners::before,
.trim-corners::after{
  content:"";
  position:absolute;
  width:13px;
  height:13px;
  border:1.5px solid var(--terra);
  opacity:.5;
  pointer-events:none;
}
.tier.featured::before,
.trim-corners::before{ top:9px; left:9px; border-right:0; border-bottom:0; border-radius:3px 0 0 0 }
.tier.featured::after,
.trim-corners::after{ bottom:9px; right:9px; border-left:0; border-top:0; border-radius:0 0 3px 0 }

/* ---------- MOBIL ----------
   Hold trimsene rolige og unngå overflow på smale skjermer. */
@media(max-width:720px){
  .dropcap::first-letter{ font-size:2.8em; padding:.05em .1em 0 0 }
  .ornament{ margin:42px auto }
  .ornament::before,
  .ornament::after{ flex:0 0 40px }
  .tier.featured::before,
  .tier.featured::after,
  .trim-corners::before,
  .trim-corners::after{ width:11px; height:11px }
}