/* fonts */

@font-face {
    font-family: Title;
    src: url("fnt/kingthings/Kingthings_Calligraphica_2.ttf") format("truetype");
}

@font-face {
    font-family: Text;
    font-weight: 300;
    src: url("fnt/neuton/Neuton-Light.ttf") format("truetype");
}
@font-face {
    font-family: Text;
    font-weight: 400;
    src: url("fnt/neuton/Neuton-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Text;
    font-style: italic;
    src: url("fnt/neuton/Neuton-Italic.ttf") format("truetype");
}

/* page */

@page { 
    size: 325mm 480mm; 
    margin: 10mm 
}

@-ro-preferences {
    page-layout: 1 page;
    initial-zoom: fit-page;
}

@media screen {
    html {
        outline: 1px solid gray;
        margin: auto;
        margin-top: 5mm;
        margin-bottom: 5mm;
        width: 305mm;
        height: 460mm;
        padding: 10mm;
    }
}


/* general style */

body { 
    margin: 0; 
    padding: 0; 
    
    font-family: Text;
    font-size: 5mm;
    font-weight: 300;
    text-align: justify;
    color: black;
    line-height: 1;
    
    hyphens: auto;
    hyphenate-before: 3;
    hyphenate-after: 3;
}

article.bordered {
    margin-top: 5mm;
    border: 0.5mm solid gray;
    padding: 2.5mm;
}

article {
    -webkit-column-gap: 5mm;
    -moz-column-gap: 5mm;
    column-gap: 5mm;
    
    margin-top: 2.5mm;
    margin-bottom: 2.5mm;
}

article::first-child {
    margin-top: 0;
}

article > hgroup {
    font-family: Text;
    font-weight: normal;
    
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}

h1, h2 {
    font-weight: normal;
}

article > hgroup > h1,
article > hgroup.topstory > h1 {
    margin-top: 0;
    margin-bottom: 2mm;
    text-align: left;
}

article > hgroup > h1 {
    font-size: 14mm;
}

article > hgroup.topstory > h1 {
    font-size: 20mm;
}

article > hgroup > h2 {
    margin-top: 2mm;
    margin-bottom: 3mm;
    font-size: 6mm;
}

article > p {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 2.5mm;
}

figure {
    margin: 0mm;
    margin-top: 2.5mm;
    margin-bottom: 2.5mm;
    
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span: all;
}

figure > img {
    display: block;
    width: 100%;
}

figure > figcaption,
article > p.intro,
article > p.further {
    font-weight: normal;
    margin-bottom: 2.5mm;
}

p.further {
    margin-top: 2.5mm;
    margin-bottom: 0;
    text-align: right;
}

p.further::before {
    content: "\203A  ";
    padding-left: 2.5mm;
}

p.further a {
    font-style: italic;
    font-weight: normal;
    font-size: 4.5mm;
    color: inherit;
    text-decoration: none;
}

*.singleColumn {
    -webkit-column-span: none;
    -moz-column-span: none;
    column-span: none;
}

figure.singleColumn {
    break-after: column;
    margin-top: 0;
}

hgroup.singleColumn > h1 {
    font-size: 10mm;
}

/* header */

header.title { 
    width: 305mm;
    height: 47mm;
    
    border-bottom: 2mm solid navy;
    
    margin-bottom: 5mm;
}

header.title > hgroup > h1 {
    margin: 0;
    margin-bottom: 5mm;
    padding: 0;
    
    font-family: Title;
    font-weight: normal;
    font-size: 30mm;
    
    text-align: center;
}

header.title > hgroup > h2 {
    margin: 0;
    padding: 0;
    
    font-family: Text;
    font-weight: normal;
    font-size: 5mm;
    
    text-transform: uppercase;
    text-align: center;
}

header.title > h2,
header.title > *.date,
header.title > *.volume {
    margin: 0;
    padding: 0;
    
    font-family: Text;
    font-weight: normal;
    font-size: 5mm;
    
    text-transform: uppercase;
    text-align: center;
}

header.title > *.date,
header.title > *.volume {
    font-size: 4mm;
    font-style: italic;
    text-transform: inherit;
}

header.title > *.date {
    float: left;
}

header.title > *.volume {
    float: right;
}

/* footer */

footer { 
    width: 305mm;
    height: 8mm;
    
    margin: 0;
    
    clear: both;
    
    font-size: 5.8mm;
    font-weight: normal;
    
    text-transform: uppercase;
    text-align: center;
    
    background-color: lightgrey;
}

footer span::after {
    content: " +++ ";
}

footer span:first-child::before,
footer span:last-child::after {
    content: " ++ ";
}

/* content layout */

section.overview { 
    width: 80mm;
    height: 390mm;
    
    margin-bottom: 5mm;
    margin-right: 5mm;
    
    float: left;
}

section.middle {
    width: 125mm;
    height: 330mm;
    
    margin: 0;
    margin-right: 5mm;
    margin-bottom: 2.5mm;
    
    padding: 2.5mm;
    padding-top: 0mm;
    
    outline: 0.5mm solid gray;
    
    float: left;
}

section.middle > article {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

section.right {
    width: 85mm;
    height: 332.5mm;
    
    margin: 0;
    margin-bottom: 2.5mm;
    
    padding: 0;
    
    float: left;
}

section.right > article {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

section.middleRight {
    width: 220mm;
    height: 55mm;
    
    margin: 0;
    margin-bottom: 5mm;
    
    float: left;
}

section.middleRight > article {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
}

/* overview */

section.overview > div {
    border: 1mm solid var(--box-color);
    margin-bottom: 2.5mm;
    padding: 0;
}

section.overview header {
    margin-bottom: 0;
    padding: 1mm;
    padding-bottom: 3mm;
    background-color: var(--box-color);
    color: white;
}

section.overview > div > :not(:first-child) {
    margin-left: 2.5mm;
    margin-right: 2.5mm;
}

section.overview > div > :last-child {
    margin-bottom: 2.5mm;
}

section.overview h1 {
    margin-top: 0;
    margin-bottom: 0.5mm;
    font-size: 8mm;
}

section.overview > div > p {
    margin-top: 0;
    margin-bottom: 1mm;
}


ol.line {
    display: block;
    clear: both;
}

ol.line > li {
    display: inline-block;
    width: 5mm;
    height: 5mm;
}

.cyan {
    background-color: cmyk(100%, 0%, 0%, 0%);
}

.cyan-lighter {
    background-color: cmyk(50%, 0%, 0%, 0%);
}

.magenta {
    background-color: cmyk(0%, 100%, 0%, 0%);
}

.magenta-lighter {
    background-color: cmyk(0%, 50%, 0%, 0%);
}

.yellow {
    background-color: cmyk(0%, 0%, 100%, 0%);
}

.yellow-lighter {
    background-color: cmyk(0%, 0%, 50%, 0%);
}

.black {
    background-color: cmyk(0%, 0%, 0%, 100%);
}

.black-lighter {
    background-color: cmyk(0%, 0%, 0%, 50%);
}

section.overview > div.world {
    --box-color: steelblue;
}

section.overview > div.national {
    --box-color: firebrick;
}

section.overview > div.business {
    --box-color: seagreen;
}

section.overview > div.sports {
    --box-color: goldenrod;
}

section.overview > div.poll {
    --box-color: darkslateblue;
}

section.overview > div.poll > figure > canvas {
    width: 100%;
    height: 33mm;
    
    background-color: lavender;
    background-image: -webkit-linear-gradient(-75deg, lavender, lightsteelblue);
    background-image: -moz-linear-gradient(-75deg, lavender, lightsteelblue);
    background-image: linear-gradient(165deg, lavender, lightsteelblue);
}

section.overview > div.print {
    --box-color: slategray;
}

section.overview > div.print > div.grid {
    width: 38mm;
    height: 15mm;
    float: left;
}

section.overview > div.print > div.grid > div {
    padding-top: 2mm;
}

section.overview > div.print > div.grid > div:nth-child(odd) {
    float: left;
    font-weight: normal;
}
section.overview > div.print > div.grid > div:nth-child(even) {
    float: right;
}

section.overview > div.print > div {
    width: 30mm;
    height: 15mm;
    margin-bottom: 1em;
    float: right;
}

.barcode {
    -ro-replacedelement: barcode;
    -ro-barcode-type: code128;
    -ro-barcode-size: 175%;
    -ro-barcode-content: "Lorem Ipsum";
    object-fit: contain;
    margin-top: 2mm;
}