:root{
  /* Brand */
  --BlackanOrange: #FF801A;

  /* Neutrals */
  --BlackanSvart: #1A0D03;
  --BlackanVitt:  #F7F4EE; /* varm off-white */

  /* Text */
  --Ink: #1A0D03;
  --InkSoft: #3a2a20;

  /* Lines */
  --Rule: rgba(0,0,0,0.10);

  /* Header */
  --HeaderText: rgba(255,255,255,0.88);
  --HeaderTextSoft: rgba(255,255,255,0.72);
}

/* Page */
body{
  background: var(--BlackanVitt);
  color: var(--Ink);
}

/* Header background */
.site-header{
  background: var(--BlackanSvart);
  background-image: linear-gradient(
    to bottom,
    rgba(26,13,3,0.95),
    rgba(26,13,3,0.95) 65%,
    rgba(26,13,3,0.75) 85%,
    rgba(26,13,3,0.00)
  );
}

/* Title + nav colors */
.site-title{
  color: var(--BlackanOrange);
}

.site-nav a{
  color: var(--HeaderTextSoft);
  text-decoration: none;
}

.site-nav a:hover{
  color: var(--HeaderText);
}

.site-nav a:focus-visible{
  outline: 2px solid var(--BlackanOrange);
  outline-offset: 3px;
  border-radius: 6px;
}

.site-nav a.active{
  color: var(--HeaderText);
  border-bottom: 2px solid var(--BlackanOrange);
  padding-bottom: 2px;
}