/* Sniðmát kynjagrein (#11479): its stylesheet on the article pages (news_tags.snidmat_styles), in place of the CSS
   stored with it in the admin. That CSS as of 2026-11-10, in Heimildin's colours and faces (README.md). */

/* The piece's own colours, the man's blue and the woman's pink and the line they share; lighter in the dark look,
   where the pure blue on black could hardly be read. */
:root, [data-theme="light"] { --kyn-kk: #0000ff; --kyn-kvk: #ff00b4; --kyn-both: #50285a; }
[data-theme="dark"] { --kyn-kk: hsl(235, 100%, 74%); --kyn-kvk: hsl(318, 100%, 68%); --kyn-both: hsl(290, 45%, 68%); }

.kyn-header {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: 4rem 0 0;
    }

.line-both {
        width: 0px;
        border-left: 4px dotted var(--kyn-both);
        height: 60px;
        margin: 1.25rem auto;
        position: relative;
        border-style: solid;
        border-width: 0 0 0 4px;
        border-image-source: url(../../img/dots.png);
        border-image-slice: 29%;
        border-image-repeat: repeat;
    }

.line-both.first {
        margin-top: 15px;
    }

.line-both.first:before, .line-both.first:after {
        content: "";
        border-style: solid;
        border-image-width: 0 0 0 4px;
        border-image-source: url(../../img/dots.png);
        border-image-slice: 29%;
        border-image-repeat: repeat;
        height: 15px;
        display: block;
        position: absolute;
        top: -15px;
    }

.line-both.first:before {
        transform: rotateZ(135deg);
        border-image-source: url(../../img/dots_blue.png);
        left: -14px;
    }

.line-both.first:after {
        transform: rotateZ(45deg);
        border-image-source: url(../../img/dots_pink.png);
        right: -9px;
    }

.line-both.third {
        margin-bottom: 16px;
    }

.line-both.third:before, .line-both.third:after {
        content: "";
        border-style: solid;
        border-image-width: 0 0 0 4px;
        border-image-source: url(../../img/dots.png);
        border-image-slice: 29%;
        border-image-repeat: repeat;
        height: 15px;
        display: block;
        position: absolute;
        bottom: -17px;
    }

.line-both.third:before {
        transform: rotateZ(45deg);
        border-image-source: url(../../img/dots_blue.png);
        left: -12px;
    }

.line-both.third:after {
        transform: rotateZ(135deg);
        border-image-source: url(../../img/dots_pink.png);
        right: -7px;
    }

.line-both.fourth {
        margin-top: 16px;
    }

.line-both.fourth:before, .line-both.fourth:after {
        content: "";
        border-style: solid;
        border-image-width: 0 0 0 4px;
        border-image-source: url(../../img/dots.png);
        border-image-slice: 29%;
        border-image-repeat: repeat;
        height: 15px;
        display: block;
        position: absolute;
        top: -17px;
    }

.line-both.fourth:before {
        transform: rotateZ(135deg);
        border-image-source: url(../../img/dots_blue.png);
        left: -12px;
    }

.line-both.fourth:after {
        transform: rotateZ(45deg);
        border-image-source: url(../../img/dots_pink.png);
        right: -7px;
    }

@media only screen and (min-width: 576px) {
  .line-both {
              height: 100px;
          }
  .line-both.first {
              margin-top: 45px;
          }
  .line-both.first:before, .line-both.first:after {
              height: 62px;
              top: -52px;
          }
  .line-both.first:before {
              left: -32px;
          }
  .line-both.first:after {
              right: -27px;
          }
  .line-both.third {
              margin-bottom: 45px;
          }
  .line-both.third:before, .line-both.third:after {
              height: 62px;
              bottom: -55px;
          }
  .line-both.third:before {
              left: -29px;
          }
  .line-both.third:after {
              right: -24px;
          }
  .line-both.fourth {
              margin-top: 45px;
          }
  .line-both.fourth:before, .line-both.fourth:after {
              height: 62px;
              top: -53px;
          }
  .line-both.fourth:before {
              left: -32px;
          }
  .line-both.fourth:after {
              right: -27px;
          }
}

.article__headlines {
        margin-top: 0 !important;
    }

.kyn-authors {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 80px;
        padding: 0 30px;
    }

@media only screen and (min-width: 576px) {
  .kyn-authors {
              margin-top: 100px;
          }
}

@media only screen and (min-width: 992px) {
  .kyn-authors {
              width: 600px;
              padding: 0;
          }
}

.kyn-author-info ul {
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 1.4;
    }

.kyn-author-info ul li {
        margin-top: .75em;
    }

.kyn-author {
        padding: 0 1rem 1rem;
        font-size: .75rem;
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

.kyn-author.kk {
        color: var(--kyn-kk);
        border-style: solid;
        border-image-width: 0 0 4px 4px;
        border-image-source: url(../../img/dots_blue.png);
        border-image-slice: 29%;
        border-image-repeat: repeat;
        margin-right: 12px;
        text-align: left;
    }

.kyn-author.kvk {
        color: var(--kyn-kvk);
       border-style: solid;
        border-image-width: 0 4px 4px 0;
        border-image-source: url(../../img/dots_pink.png);
        border-image-slice: 29%;
        border-image-repeat: repeat;
        margin-left: 12px;
        text-align: right;
    }

@media only screen and (min-width: 567px) {
  .kyn-author.kk {
              margin-right: 48px;
          }
  .kyn-author.kvk {
              margin-left: 48px;
          }
}

@media only screen and (min-width: 768px) {
  .kyn-author {
              font-size: .875rem;
              padding: 0 1.25rem 1.25remx;
          }
}

.kyn-author-image {
        margin-top: -88px;
        width: 80px;
        height: 80px;
        background: white;
        border-radius: 50%;
        display: inline-block;
        margin-bottom: 10px;
        overflow: hidden;
    }

.kyn-author-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.kyn-author.kk .kyn-author-image {
        margin-left: -58px;
        background-color: var(--kyn-kk);
        align-self: flex-start;
    }

.kyn-author.kvk .kyn-author-image {
        margin-right: -58px;
        background-color: var(--kyn-kvk);
        align-self: flex-end;
    }

@media only screen and (min-width: 576px) {
  .kyn-author-image {
              margin-top: -108px;
              width: 100px;
              height: 100px;
          }
  .kyn-author.kk .kyn-author-image {
              margin-left: -68px;
          }
  .kyn-author.kvk .kyn-author-image {
              margin-right: -68px;
          }
}

.kyn-columns {
        text-align: center;
        display: flex;
    }

.kyn-column {
        flex: 1;        
    }

.kyn-column p {
        font-family: var(--st-font-text, "tiempostext_web", Georgia, serif);
        word-wrap: break-word;
        font-size: .875rem;
        line-height: 1.375;
        letter-spacing: -.0125em;
    }

.kyn-column.kk {
        text-align: right;
        padding-right: 1rem;
        border-style: solid;
        border-image-width: 0 4px 0 0;
        border-image-source: url(../../img/dots_blue.png);
        border-image-slice: 29%;
        border-image-repeat: repeat;
        margin-right: 12px;
    }

.kyn-column.kvk {
        text-align: left;
        padding-left: 1rem;
        border-style: solid;
        border-image-width: 0 0 0 4px;
        border-image-source: url(../../img/dots_pink.png);
        border-image-slice: 29%;
        border-image-repeat: repeat;
        margin-left: 12px;
    }

.kyn-column-title {
        font-size: .875rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: .5em;
    }

.kk .kyn-column-title {
        color: var(--kyn-kk);
    }

.kvk .kyn-column-title {
        color: var(--kyn-kvk);
    }

@media only screen and (min-width: 576px) {
  .kyn-columns {
              max-width: 940px;
              margin: 0 auto;
          }
  .kyn-column p {
              font-size: 1rem;
          }
  .kyn-column.kk {
              padding-right: 2rem;
              margin-right: 47px;
          }
  .kyn-column.kvk {
              padding-left: 2rem;
              margin-left: 47px;
          }
}

@media only screen and (min-width: 992px) {
  .kyn-column p {
              font-size: 1.125rem;
          }
}

@media only screen and (min-width: 1200px) {
  .kyn-column p {
              font-size: 1.25rem;
          }
}