/*
Theme Name: Berlin Atonal
Theme URI: https://berlin-atonal.com
Description: Berlin Atonal
Author: Robin Benad
Author URI: https://robinbenad.com
Version: 1.0
*/
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
  2. Remove default margin
*/
* {
    margin: 0;
}

/*
  5. Improve media defaults
*/
img, video, canvas, svg {
    display: block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
    font: inherit;
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

address {
    font-style: normal;
}

ul, ol {
    padding-left: 0.25em;
}

/*--------------------------------------------------------------
# Root
--------------------------------------------------------------*/

:root {
    font-size: 14px;
    --grey: #a5a5ab;
}

body {
    font-family: "Times New Roman", Times, serif;
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.site-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.site-content > div:first-child {
    flex-grow: 1;
    max-width: 100%;
}

/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/

@font-face {
    font-family: "NeueHelveticaPro85Heavy";
    src: url('fonts/NeueHelveticaPro85Heavy.woff2') format('woff2'), url('fonts/NeueHelveticaPro85Heavy.woff') format('woff');
    font-weight: 900;
}

/*--------------------------------------------------------------
# Landing Page
--------------------------------------------------------------*/

.landing {
    padding: 2.5rem;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin: 0 auto;
}

.first-part {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}


.logo {
    position: relative;
    container-type: inline-size;
    width: 565px;
    max-width: 100%;
}

.day-links {
    position: absolute;
    right: 0;
    top: 9.8%;
    font-family: "NeueHelveticaPro85Heavy", sans-serif;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    font-size: 2.675cqi;
    line-height: 1.16;
}

.boxed-text {
    background: #E6E6E6;
    padding: 0.5rem;
}

.festival-image-mobile,
.third-part .ticket-link-wrapper {
    display: none;
}

.text p:not(:last-child) {
    margin-bottom: 0.75em;
}

.back-button,
.ticket-button,
.ticket-link,
.ticket-link-mobile {
    font-family: "NeueHelveticaPro85Heavy", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.25rem;
}

.ticket-link {

}

.ticket-link-mobile {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
}

/*--------------------------------------------------------------
# Big Table
--------------------------------------------------------------*/


.big-table-section {
    font-size: 0.9rem;
    font-family: "ocr-b-std";
}

.big-table {
    columns: 4;
    column-gap: 1.5rem;
}

.festival {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 1.25rem;
}

.time-table-section {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 1.5rem;
}

.third-surface-section {
    margin-top: 4rem;
}

.third-surface-header {
    background: black;
    color: white;
    font-family: 'democratica', serif;
    font-size: 4rem;
    padding: 0.15em 0.2em 0;
    line-height: 1;
}

.third-surface-columns {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr;
}

.third-surface-columns > div {
    padding: 0.5rem;
    padding-bottom: 2.5rem;
}

.third-surface-artist {
    padding: 0.15em 0;
    text-wrap: balance;
}

.third-surface-1 {
    font-family: "helvetica-lt-pro", sans-serif;
    font-weight: 700;
}

.third-surface-2,
.third-surface-3 {
    color: #828287;
}

.third-surface-2 {
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.third-surface-box {
    border: 1px solid black;
}

.festival-col-3 {
    grid-column: span 2;
}

.big-table-row {
    display: grid;
    grid-template-columns: 100%;
    --border-width: 1px;
    break-inside: avoid;
}

.big-table-row:not(:first-child) {
    margin-top: -1px;
}

.big-table-row > div {
    --pad-left: 0.625em;
    --pad-h: 0.3em;
    padding: var(--pad-h) var(--pad-left);
}

.big-table-row > div:first-child {
    border: var(--border-width) solid black;
    border-left-width: 2px;
}

.big-table-row > div:first-child > div {
    position: relative;
    text-wrap: balance;
}

.big-table-row .label-ph {
    visibility: hidden;
    pointer-events: none;
}

.big-table-row .label-ph,
.big-table-label {
    font-size: 0.55em;
    font-family: 'lores-9-minus-wide';
}

.big-table-label {
    position: absolute;
    right: 0.3em;
    bottom: 0.125em;
}

.big-table-row > div:nth-child(2) {
    display: none;
    border-right: 0;
}

.big-table-row > div:nth-child(2) span {
    font-size: 0.55em;
    font-family: 'lores-9-minus-wide';
}

.big-table-row.force-border > div:nth-child(2) {
    border-top: var(--border-width) solid black;
    border-bottom: var(--border-width) solid black;
}

.big-table-row.extra-pad-left > div:first-child {
    padding-left: calc(1.8 * var(--pad-left));
}

.big-table-row.bold-cells {
    --border-width: 2px;
}

.big-table-row.bold-cells:not(:first-child) {
    margin-top: -2px;
}

/*--------------------------------------------------------------
# Time Table
--------------------------------------------------------------*/
.time-table-header {
    font-family: 'democratica', serif;
    font-size: 5rem;
}

/*--------------------------------------------------------------
# Artist Table
--------------------------------------------------------------*/

.artist-table-section {
    display: flex;
    justify-content: space-between;
    column-gap: 1.5rem;
    font-size: 0.9rem;
}

small {
    font-size: 0.55em;
}

table {
    --pad-left: 0.625em;
    --pad-h: 0.3em;
    --border-color: black;
    border-spacing: 0;
    border-collapse: collapse;
    font-family: "ocr-b-std";
    width: 100%;
}

tr {
    --border-width: 1px;
}


td {
    --pad-left: 0.625em;
    --pad-h: 0.3em;
    padding: var(--pad-h) var(--pad-left);
    vertical-align: top;
    border: var(--border-width) solid var(--border-color);
}

.extra-pad-left td:first-child {
    padding-left: calc(1.8 * var(--pad-left));
}

td:nth-child(1) {
    text-wrap: balance;
}

td:nth-child(2) {
    line-height: 1;
    font-size: 0.7em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

@media (hover: hover) {
    a:hover {
        text-decoration: underline;
    }
}

table.day-table + table.day-table {
    margin-top: 1.5rem;
}


table[data-table="1"] {
    font-family: "Times New Roman", Times, serif;
}

table[data-table="1"] td:nth-child(2) {
    background: #E6E6E6;
    font-size: 0.8em;
}

table[data-table="2"] {
    font-family: "arial-nova", Arial, sans-serif;
    border-top: 2px solid black;
}

.table-2-line {
    background: black;
    height: 2px;
    margin-bottom: 2px;
}

table[data-table="2"] tr {
    --border-width: 2px;
}

table[data-table="2"] td:nth-child(2) {
    text-align: center;
    vertical-align: middle;
}

table[data-table="3"] td:nth-child(1) {
    padding-left: calc(1.8 * var(--pad-left));
    font-size: 0.95em;
}

table[data-table="3"] td:nth-child(2) {
    border-right: none;
}

table[data-table="4"] {
    font-family: "helvetica-lt-pro", sans-serif;
    --border-color: #BFBFBF;
}

table[data-table="4"] tr {
    --border-width: 3px;
}

table[data-table="4"] td:first-child {
    background: #EBEBEB;
    text-align: center;
}

table[data-table="4"] td:nth-child(2) {
    font-family: "NeueHelveticaPro85Heavy", sans-serif;
    font-weight: 900;
    vertical-align: middle;
}

table[data-table="5"] {
    font-family: "helvetica-lt-pro", sans-serif;
    border-collapse: separate;
    border-spacing: 2px;
    border: 2px solid black;
    font-weight: 700;
}

table[data-table="5"] tr {
    --border-width: 2px;
}

table[data-table="5"] td:nth-child(1) {
    padding-left: calc(1.8 * var(--pad-left));
    padding-top: calc(1.5 * var(--pad-h));
    padding-bottom: calc(0.5 * var(--pad-h));
    vertical-align: middle;
}

table[data-table="5"] td:nth-child(2) {
    vertical-align: middle;
}

/*--------------------------------------------------------------
# Artist Grid
--------------------------------------------------------------*/

.back-button {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    padding-top: 1rem;
    padding-left: 1rem;
    z-index: 10;
}

.ticket-button {
    position: fixed;
    display: block;
    left: 0;
    bottom: 0;
    padding-bottom: 1rem;
    padding-left: 1rem;
    z-index: 10;
}

.artist-map {
    display: grid;
    grid-template-columns: 100%;
    gap: 2rem;
}

.artist-map + .artist-map {
    margin-top: 2rem;
}

/*--------------------------------------------------------------
# Artist Item
--------------------------------------------------------------*/

.artist-item {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(4, min-content) repeat(8, minmax(min-content, 1rem));
    grid-template-rows: repeat(4, min-content) repeat(6, minmax(max-content, 1rem)) repeat(2, min-content);
    --col-start-text: 3;
    --row-start-text: 1;

    --col-start-image: 1;
    --row-start-image: 5;
    --span-x-image: 8;
    --span-y-image: 3;

    --col-start-deco: 6;
    --row-start-deco: 6;
    --span-x-deco: 6;
    --span-y-deco: 4;
}

.artist-item[data-layout="bottom"] {
    grid-template-rows: repeat(8, minmax(min-content, 1rem)) repeat(4, min-content);
}

.artist-item-outer {
    display: flex;
    height: 100%;
    align-items: center;
    padding-top: 2rem;
}

.artist-item-wrapper {
    position: relative;
}

.repeat-trigger,
.anchor {
    position: absolute;
    top: 0;
    left: 0;
}

.repeat-trigger {
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.artist-text {
    grid-column: var(--col-start-text, 3) / span 8;
    grid-row: var(--row-start-text, 1) / span 4;
    z-index: 3;
    padding: 18px;
}

.artist-image {
    grid-column: var(--col-start-image, 1) / span var(--span-x-image, 8);
    grid-row: var(--row-start-image, 5) / span var(--span-y-image, 3);
    z-index: 2;
}

.artist-deco {
    grid-column: var(--col-start-deco, 6) / span var(--span-x-deco, 6);
    grid-row: var(--row-start-deco, 6) / span var(--span-y-deco, 4);
    z-index: 1;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.artist-item[data-layout="bottom"] .artist-deco {
    object-position: bottom;
}

.artist-title {
    font-size: 1.8rem;
    font-family: "NeueHelveticaPro85Heavy", sans-serif;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-wrap: balance;
}

.artist-press {
    font-family: "Times New Roman", Times, serif;
    font-size: 1rem;
}

.text a {
    text-decoration: underline;
}

.text a:hover {
    color: blue;
}

.longtext {
    padding: 2.5rem;
    padding-top: 4rem;
}

.longtext .max-xl {
    max-width: 30rem;
    margin: 0 auto;
}

.longtext h1 {
    margin-top: 1em;
    margin-bottom: 1em;
}

.longtext h2 {
    margin-bottom: 0.5em;
}

.longtext h3 {
    margin-bottom: 0.25em;
}

.longtext ul {
    padding-left: 1em;
    margin-bottom: 0.75em;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.ext-icon {
    display: inline-block;
    transform: scaleX(-1) translateY(-5%);
    padding-right: .1em;
}


/*--------------------------------------------------------------
# Controls
--------------------------------------------------------------*/

.controls {
    font-family: sans-serif;
    font-size: 0.75rem;
    margin-top: 12px;
    margin-bottom: 42px;
    background: #e1e1e1;
    padding: 4px;
}

.control-sliders {
    display: flex;
    gap: 12px;
}

.control-sliders > div > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.control-label {
    margin-bottom: 12px;
    font-weight: bold;
}

.controls {
    display: flex;
    gap: 12px;
}

.button-group {
    min-width: 5.5rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.controls .history {
    display: flex;
    gap: 4px;
}

.controls .history > button {
    flex-grow: 1;
}

.controls label {
    white-space: nowrap;
}

@media screen and (min-width: 820px) {
    .landing-header,
    .landing-footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .landing-footer {
        align-items: flex-end;
    }
}

@media screen and (max-width: 819px) {
    .logo {
        width: 100%;
    }

    .footer-links {
        margin-top: 1rem;
        padding-bottom: 1rem;
    }
}